/* global React */
// pricing.jsx — Pricing page content. Loaded AFTER logos.jsx + shared.jsx (no deps of its own).
// Language is fixed for the page lifetime (switching reloads), so read it once at module scope.
const AR = (typeof window !== "undefined" && window.WATHIQ_LANG === "ar");

/* ------------------------------------------------------------------
   Plan data — Arabic authored natively, English transcreated.
   Prices: Arabic-Indic digits + ر.س in AR; "SAR n" in EN.
   ------------------------------------------------------------------ */
const PLANS = [
  {
    id: "basic",
    name: AR ? "الأساسي" : "Basic",
    audience: AR ? "للأفراد" : "For individual lawyers",
    priceOld: AR ? "١٤٩ ر.س" : "SAR 149",
    priceNow: AR ? "٩٩ ر.س" : "SAR 99",
    period: AR ? "شهريًا" : "per month",
    tag: AR ? "عرض إطلاق" : "Launch offer",
    features: [
      AR ? "مختبر وثّق للذكاء الاصطناعي بكامل مهاراته" : "The full Wathiq AI Lab, every skill included",
      AR ? "قاعدة الأنظمة السعودية والمعرفة القانونية" : "The complete Saudi law & legal knowledge base",
      AR ? "تحديثات جريدة أم القرى أولًا بأول" : "Umm Al-Qura Gazette updates as they publish",
    ],
    ctaLabel: AR ? "ابدأ الآن" : "Start now",
    ctaHref: "https://app.wathiq.ai/signup?plan=basic",
    ctaStyle: "btn-dark",
  },
  {
    id: "pro",
    name: AR ? "الاحترافي" : "Professional",
    audience: AR ? "للممارس المستقل" : "For the independent practitioner",
    priceOld: null,
    priceNow: AR ? "٥٩٩ ر.س" : "SAR 599",
    period: AR ? "شهريًا" : "per month",
    tag: null,
    features: [
      AR ? "كل ما في الأساسي" : "Everything in Basic",
      AR ? "إدارة القضايا والجلسات والمهام" : "Matters, hearings, and tasks in one place",
      AR ? "خزائن مستندات داخل كل قضية" : "Document vaults inside every matter",
      AR ? "بحث في السوابق والأنظمة" : "Search across precedents and statutes",
    ],
    ctaLabel: AR ? "ابدأ الآن" : "Start now",
    ctaHref: "https://app.wathiq.ai/signup?plan=pro",
    ctaStyle: "btn-dark",
  },
  {
    id: "enterprise",
    name: AR ? "المنشآت" : "Enterprise",
    audience: AR ? "للمكاتب والإدارات القانونية" : "For firms and legal departments",
    priceOld: null,
    priceNow: AR ? "أسعار مخصّصة" : "Custom pricing",
    period: null,
    tag: null,
    features: [
      AR ? "كل الميزات + إضافة وورد وأوتلوك" : "Every feature, plus the Word and Outlook add-ins",
      AR ? "إدارة الفريق والصلاحيات" : "Team management and granular permissions",
      AR ? "أدلة المراجعة والوكلاء الأذكياء" : "Review playbooks and smart agents",
      AR ? "التزام واستضافة داخل المملكة" : "Compliance with in-Kingdom hosting",
    ],
    ctaLabel: AR ? "تواصل معنا" : "Contact us",
    ctaHref: "Contact.html",
    ctaStyle: "btn-ghost",
  },
];

// 1) Inner-page hero (light, centered)
function PricingHero() {
  return (
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow page-hero-eyebrow">{AR ? "الأسعار" : "Pricing"}</div>
        <h1 className="h-display">{AR ? "الأسعار" : "Pricing"}</h1>
        <p className="body-lg">
          {AR
            ? "خطط واضحة تبدأ من المحامي الفرد إلى المكتب الكامل."
            : "Clear plans that scale from a solo lawyer to the whole firm."}
        </p>
      </div>
    </section>
  );
}

// 2) The three plan cards + the VAT/cancellation note.
//    House rules: hairline borders only, typography carries emphasis —
//    no filled bands, no accent bars on rounded edges; the launch tag is a
//    square-cornered hairline outline with no fill.
function PricingPlans() {
  return (
    <section className="section pricing-section">
      <div className="container">
        <div className="pricing-grid reveal-stagger">
          {PLANS.map((p) => (
            <article className="price-card reveal" key={p.id}>
              <header className="price-card-head">
                <h2 className="h-3 price-card-name">{p.name}</h2>
                <p className="price-card-aud">{p.audience}</p>
              </header>

              <div className="price-block">
                {p.priceOld && (
                  <span className="price-old">
                    <s>{p.priceOld}</s>
                  </span>
                )}
                <span className={`price-now ${p.period ? "" : "is-custom"}`}>{p.priceNow}</span>
                {p.period && <span className="price-period">/ {p.period}</span>}
                {p.tag && <span className="price-tag">{p.tag}</span>}
              </div>

              <ul className="price-features">
                {p.features.map((f, i) => (
                  <li key={i}>{f}</li>
                ))}
              </ul>

              <div className="price-cta">
                <a
                  href={p.ctaHref}
                  className={`btn ${p.ctaStyle}`}
                  onClick={() => window.waTrack && window.waTrack("cta_pricing_click", { plan: p.id })}
                >
                  {p.ctaLabel} <span className="arrow">{AR ? "←" : "→"}</span>
                </a>
              </div>
            </article>
          ))}
        </div>

        <p className="pricing-note reveal-sm">
          {AR
            ? "الأسعار لا تشمل ضريبة القيمة المضافة. يمكن الإلغاء في أي وقت من لوحة التحكم."
            : "Prices exclude VAT. Cancel anytime from your dashboard."}
        </p>
      </div>
    </section>
  );
}

function PricingPage() {
  return (
    <>
      <PricingHero />
      <PricingPlans />
    </>
  );
}

// REQUIRED — publish to window so the shell's mount script can render <PricingPage/>.
Object.assign(window, { PricingPage });