/* Six condensed sections: Problem · WhatWeDo · Proof · Pricing · FAQ · Footer
   Coraly-inspired editorial luxury, restrained motion, premium feel. */

/* ============== PROBLEM ============== */
const Problem = ({ lang }) => {
  const isAR = lang === "ar";
  const items = isAR ? [
  { stat: "300", t: "استفسار شهريًا", d: "نصفهم مضيّعو وقت. أغلبهم يختفون إن لم تردّ خلال ٦٠ ثانية. وأنت ترسل نفس قالب واتساب ٥٠ مرّة في اليوم." },
  { stat: "60s", t: "نافذة الردّ", d: "٦٨٪ من الاستفسارات بين الـ ٨ مساءً والـ ٢ صباحًا. تردّ في الصباح، الصفقة ذهبت لوكيل أبطأ منك — لكن لديه نظام." },
  { stat: "8→11", t: "صباحًا حتى ليلًا", d: "٧ أيام في الأسبوع. وما زلت تشعر أنك متأخّر. السوق يتحرّك. البائعون المتعثّرون قادمون. من يصلهم أولًا يفوز." }] :
  [
  { stat: "300", t: "inquiries / month", d: "Half are time-wasters. Most vanish if you don't reply in 60 seconds." },
  { stat: "60s", t: "the reply window", d: "68% of inquiries hit between 8pm and 2am. By morning, the lead is gone." },
  { stat: "8→11", t: "am to pm, 7 days", d: "Still feel behind. Distressed sellers are coming. Whoever reaches them first wins." }];


  return (
    <section className="section problem" id="problem" data-screen-label="02 Problem">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/01</span>
            <span className="eyebrow">{isAR ? "المشكلة" : "The Problem"}</span>
          </div>
          <h2>{isAR ? <>لا تحتاج وكالة أخرى. <span className="it">تحتاج</span> نظامًا.</> : <>You don't need another agency. <span className="it">You need</span> a system.</>}</h2>
        </div>

        <p className="lead">
          {isAR ?
          "دفعت للوكالات. دفعت للفرق. دفعت لـ Bayut و Property Finder & لا تمتلك أيًّا منها." :
          "You paid agencies. You paid teams. You paid Bayut and Property Finder & you don't own any of it."}
        </p>

        <div className="problem-grid">
          {items.map((it, i) =>
          <div className="prob-card" key={i}>
              <div className="prob-stat">{it.stat}</div>
              <div className="prob-t">{it.t}</div>
              <div className="prob-d">{it.d}</div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        .lead {
          font-family: var(--serif);
          font-size: clamp(28px, 3.4vw, 48px);
          line-height: 1.2;
          letter-spacing: -0.01em;
          font-style: italic;
          margin: 0 0 80px 0;
          max-width: 22ch;
          color: var(--ink);
        }
        .problem-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--rule);
        }
        .prob-card {
          padding: 48px 32px 48px 0;
          border-right: 1px solid var(--rule);
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .prob-card:last-child { border-right: 0; }
        .prob-stat {
          font-size: clamp(64px, 8vw, 120px);
          line-height: 0.9;
          letter-spacing: -0.05em;
          color: var(--accent);
          margin-bottom: 16px;
        }
        .prob-t { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
        .prob-d { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 30ch; }
        @media (max-width: 800px) {
          .problem-grid { grid-template-columns: 1fr; }
          .prob-card { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--rule); gap: 8px; }
          .prob-card:last-child { border-bottom: 0; }
          .prob-stat { font-size: 56px; margin-bottom: 4px; }
          .prob-t { font-size: 18px; }
          .prob-d {
            font-size: 13px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      `}</style>
    </section>);

};

/* ============== WHAT WE DO / HOW IT WORKS ============== */
const WhatWeDo = ({ lang }) => {
  const isAR = lang === "ar";
  const systems = isAR ? [
  { code: "01", t: "تنبيهات صفقات متعثّرة", d: "تتبّع حيّ لكل مبنى تتبنّاه. خفوض حادّة، بائعون مدفوعون، رياضيات العائد — قبل أن يعرفها أي وكيل آخر." },
  { code: "02", t: "مشترون مؤهّلون", d: "كل استفسار من Bayut و Property Finder و Dubizzle يمرّ على مؤهّلنا في ٣٠ ثانية. ترى المهمّ فقط — جاهزًا للمعاينة." },
  { code: "03", t: "تواصل مالكين", d: "بياناتك، مبانيك، محرّكنا. واتساب + صوت + بريد، منسّق ومتوافق، يعمل وأنت نائم." },
  { code: "04", t: "مدير نجاح", d: "تحديثات أسبوعية على ما وصلك، ما حُجز، ما أُغلق. جلسات استراتيجية تُبقي النظام مضبوطًا على ما تريده فعلًا." }] :
  [
  { code: "01", t: "Distressed Deal Alerts", d: "🔥 Live tracking on every building. Price drops and motivated owners — surfaced before anyone else knows." },
  { code: "02", t: "Qualified Buyers", d: "✅ Every Bayut, PF, and Dubizzle inquiry runs through our 30-second qualifier. You only see the ones that matter." },
  { code: "03", t: "Owner Outreach", d: "📤 WhatsApp + voice + email outreach — coordinated, compliant, running while you sleep." },
  { code: "04", t: "Success Manager", d: "Weekly updates on what landed, booked, and closed. Strategy sessions to keep the system tuned." }];


  const steps = isAR ? [
  { n: "DAY 1", t: "اكتشاف", d: "نتعرّف على مبانيك، مشتريك، نصوصك. لا بيع — وضوح فقط." },
  { n: "WEEK 1", t: "نبني", d: "GoHighLevel + WhatsApp + الوكلاء الصوتيون — مُعدّ لسوقك. تكامل Bayut + PF." },
  { n: "WEEK 2", t: "حيّ", d: "الاستفسارات تمرّ عبر وستفي. الذكاء يؤهّل. أنت لمحادثات الإغلاق فقط. أوّل صفقات في الأيام الأولى." },
  { n: "DAY 30", t: "أرقام", d: "الردّ تحت ٥ دقائق. ١٠+ ساعات/أسبوع رجعت. أوّل معاينات من نظامك محجوزة." }] :
  [
  { n: "DAY 1", t: "Discovery", d: "We learn your buildings, your buyers, your scripts. No pitch — just clarity." },
  { n: "WEEK 1", t: "Build", d: "GoHighLevel + WhatsApp + voice agents, tuned to your market. Bayut + PF wired in." },
  { n: "WEEK 2", t: "Live", d: "AI qualifies every inquiry. You only do the closing calls. First deals in days." },
  { n: "DAY 30", t: "Numbers", d: "Reply time under 5 min. 10+ hours/week back. First viewings booked." }];


  return (
    <section className="section what" id="what" data-screen-label="03 What">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/02</span>
            <span className="eyebrow">{isAR ? "ما نفعله" : "What we do"}</span>
          </div>
          <h2>{isAR ? <>النظام الذي <span className="it">تملكه</span>.</> : <>The system <span className="it">you own</span>.</>}</h2>
        </div>

        <p className="lead what-lead">
          {isAR ?
          <>
            <span>ليست برمجيات. ليست وكالة. نظام ذكاء اصطناعي نبنيه ونسلّمه لك.</span>
            <span className="lead-second">يستردّ ٢٠٪ من وقتك في عشرات المهام المتكرّرة، يملأ ذلك الوقت بفرص جديدة، ويعطيك ٤٠٪ عائدًا إضافيًا. واتساب جزء فقط — التشغيل، التأهيل، المتابعة، التقارير، كلّها داخل النظام نفسه. أنت تملكه، باشتراك شهري.</span>
          </> :
          <>
            <span style={{ fontSize: "36.06px" }}>Not software. Not another agency. An AI system we build and hand to you.</span>
            <span className="lead-second" style={{ fontSize: "23.1172px" }}>Claws back 20% of your time, refills it with new opportunities, compounds into 40% more ROI. Outreach, qualifying, follow-up — one system.</span>
          </>}
        </p>

        <div className="systems-grid stagger reveal">
          {systems.map((it) =>
          <div className="sys-card" key={it.code}>
              <div className="sys-top mono">
                <span>{it.code}</span>
                <span className="sys-arrow">→</span>
              </div>
              <div className="sys-title" style={{ margin: "0px 0px 10px", padding: "0px 0px 1px" }}>{it.t}</div>
              <div className="sys-desc">{it.d}</div>
            </div>
          )}
        </div>

        <div className="hiw-block">
          <div className="hiw-eye eyebrow">{isAR ? "كيف يعمل · ٣٠ يومًا للأرقام" : "How it works · 30 days to numbers"}</div>
          <div className="steps">
            {steps.map((s, i) =>
            <div className="step" key={s.n}>
                <div className="step-n mono">{s.n}</div>
                <div className="step-t">{s.t}</div>
                <div className="step-d">{s.d}</div>
                {i < 3 && <div className="step-line"></div>}
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .what-lead {
          max-width: 32ch;
          font-size: clamp(24px, 2.6vw, 36px);
          line-height: 1.3;
          font-style: normal;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .what-lead > span:first-child { font-style: italic; }
        .what-lead .lead-second {
          font-family: var(--sans, inherit);
          font-style: normal;
          font-size: 0.62em;
          line-height: 1.5;
          color: color-mix(in oklab, var(--ink) 72%, transparent);
          max-width: 56ch;
          letter-spacing: 0;
        }
        .systems-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid var(--rule);
          border-left: 1px solid var(--rule);
          margin-bottom: 96px;
        }
        .sys-card {
          padding: 36px 28px;
          border-right: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          min-height: 240px;
          display: flex;
          flex-direction: column;
          transition: background .35s var(--ease);
          cursor: pointer;
        }
        .sys-card:hover { background: var(--ink); color: var(--bg); }
        .sys-card:hover .sys-arrow { transform: translateX(0); opacity: 1; color: var(--accent); }
        .sys-top {
          display: flex;
          justify-content: space-between;
          font-size: 10px;
          color: var(--muted);
          letter-spacing: 0.14em;
          margin-bottom: 56px;
        }
        .sys-card:hover .sys-top { color: var(--bg); }
        .sys-arrow {
          font-size: 16px;
          opacity: 0;
          transform: translateX(-6px);
          transition: all .35s var(--ease);
        }
        .sys-title {
          font-size: 26px;
          letter-spacing: -0.03em;
          line-height: 1;
          margin-bottom: 10px;
          text-transform: uppercase;
        }
        .sys-desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
        .sys-card:hover .sys-desc { color: var(--bg); }

        .hiw-block { padding-top: 64px; border-top: 1px solid var(--rule); }
        .hiw-eye { margin-bottom: 32px; }
        .steps {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 32px;
        }
        .step { padding: 24px 0; position: relative; }
        .step-n { font-size: 11px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 20px; }
        .step-t { font-size: 48px; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 14px; text-transform: uppercase; }
        .step-d { font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 30ch; }
        .step-line {
          position: absolute;
          top: 56px;
          right: -16px;
          width: 32px;
          height: 1px;
          background: var(--rule-2);
        }

        @media (max-width: 900px) {
          .systems-grid { grid-template-columns: 1fr 1fr; margin-bottom: 64px; }
          .sys-card { padding: 24px 20px; min-height: 180px; }
          .sys-top { margin-bottom: 32px; }
          .sys-title { font-size: 20px; }
          .sys-desc { font-size: 12px; }
          .steps { grid-template-columns: 1fr; gap: 0; }
          .step { padding: 20px 0; border-bottom: 1px solid var(--rule); }
          .step:last-child { border-bottom: 0; }
          .step-t { font-size: 32px; margin-bottom: 8px; }
          .step-line { display: none; }
          .what-lead .lead-second { display: none; }
          .what-lead { font-size: 22px; gap: 0; }
        }
        @media (max-width: 560px) {
          .systems-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>);

};

/* ============== SAVINGS + ROI CALCULATOR (Horizontal scroll story) ==============
   Pinned section that scroll-jacks the page: as the user scrolls down past it,
   the inner track translates horizontally through panels — intro → each cost
   category dropping off → final totals (savings + revenue + ROI). Team size
   stepper persists in a sticky control rail. Falls back to native horizontal
   swipe scroll on mobile / reduced motion. Numbers in AED, anchored to Dubai. */
const SavingsCalculator = ({ isAR }) => {
  const cats = isAR ? [
    { id: "isa",     name: "ISA / موظف اتصال",     sub: "موظف سرعة الردّ",         cost: 5500,  perSeat: true,  rev: 18000, replaced: "نظام الصوت يردّ في أقل من ٦٠ ثانية، ٢٤/٧، بـ ٢٥+ لغة." },
    { id: "portals", name: "Bayut + Property Finder", sub: "اشتراكات البوابات",     cost: 4200,  perSeat: false, rev: 12000, replaced: "وستفي يجلب لك العملاء بدلاً من تأجير الترتيب على بوابة." },
    { id: "leadgen", name: "وكالة توليد العملاء",   sub: "قمع خارجي",               cost: 9000,  perSeat: false, rev: 22000, replaced: "النظام يبني قمعك بالكامل ويسلّمه لك — تملكه للأبد." },
    { id: "ads",     name: "إدارة الإعلانات",        sub: "Meta + Google + إعادة استهداف", cost: 3500, perSeat: false, rev: 9000, replaced: "إعلانات ذكية بإعادة استهداف، جمهور مخصّص، وجمهور متطابق." },
    { id: "crm",     name: "CRM + أتمتة",           sub: "Hubspot · Make · Twilio", cost: 1800,  perSeat: true,  rev: 4000,  replaced: "تنشئة قاعدة البيانات تعمل تلقائيًا — تحوّل البارد إلى دافئ." }
  ] : [
    { id: "isa",     name: "VA / Cold caller",     sub: "Speed-to-lead caller",    cost: 5500,  perSeat: true,  rev: 18000, replaced: "Voice agent answers in under 60 seconds, 24/7, in 25+ languages." },
    { id: "portals", name: "Bayut + Property Finder", sub: "Portal subscriptions",  cost: 4200,  perSeat: false, rev: 12000, replaced: "Wastafy brings you the lead instead of renting placement on a portal." },
    { id: "leadgen", name: "Lead-gen agency",       sub: "Outsourced funnel",       cost: 9000,  perSeat: false, rev: 22000, replaced: "The system builds your funnel and hands it to you — you own it forever." },
    { id: "ads",     name: "Ad management",         sub: "Meta + Google + retargeting", cost: 3500, perSeat: false, rev: 9000, replaced: "Smart ads with retargeting, custom audiences, and lookalike audiences." },
    { id: "crm",     name: "CRM + automation",      sub: "Hubspot · Make · Twilio", cost: 1800,  perSeat: true,  rev: 4000,  replaced: "Database nurture runs on autopilot — turns cold contacts into warm conversations." }
  ];

  const [team, setTeam] = React.useState(1);
  const [progress, setProgress] = React.useState(0); // 0..1 across the whole horizontal story
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const railRef = React.useRef(null);

  // Total panels: 1 intro + N categories + 1 final = N+2
  const panelCount = cats.length + 2;

  const fmt = (n) => "AED " + Math.round(n).toLocaleString("en-US");
  const wastafyCost = 4500;

  // Compute running totals from scroll progress: each category "kicks in" as
  // its panel comes on-screen, so savings, revenue, and ROI build up live.
  // Snap each cat ON when we've scrolled past its panel index.
  const stepF = progress * (panelCount - 1); // 0..panelCount-1
  const activeCats = cats.map((c, i) => {
    // panel index for cat i is i+1 (intro is panel 0). Activate when we've
    // mostly scrolled into that panel.
    const panelIdx = i + 1;
    return Math.max(0, Math.min(1, stepF - (panelIdx - 1)));
  });
  const monthlySavingsRaw = cats.reduce((sum, c, i) =>
    sum + (c.perSeat ? c.cost * team : c.cost) * activeCats[i], 0);
  const monthlySavings = Math.max(0, monthlySavingsRaw - wastafyCost * Math.min(1, stepF));
  const annualSavings = monthlySavings * 12;
  const extraRev = cats.reduce((sum, c, i) =>
    sum + (c.perSeat ? c.rev * team : c.rev) * activeCats[i], 0);
  const roiMultiple = wastafyCost > 0 ? ((monthlySavings + extraRev) / wastafyCost) : 0;

  // Scroll-jack: tie horizontal translate to vertical scroll within the wrapper.
  React.useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const mobile = window.matchMedia("(max-width: 900px)").matches;
    if (reduced || mobile) {
      // Mobile/reduced: native horizontal scroll fallback. Track progress from
      // the rail's scrollLeft so totals still tick up as user swipes.
      const rail = railRef.current;
      if (!rail) return;
      const onScroll = () => {
        const max = rail.scrollWidth - rail.clientWidth;
        setProgress(max > 0 ? rail.scrollLeft / max : 0);
      };
      rail.addEventListener("scroll", onScroll, { passive: true });
      onScroll();
      return () => rail.removeEventListener("scroll", onScroll);
    }
    // Desktop: pin + horizontal translate driven by window scroll.
    let raf = 0;
    const update = () => {
      raf = 0;
      const wrap = wrapRef.current;
      if (!wrap) return;
      const rect = wrap.getBoundingClientRect();
      const total = wrap.offsetHeight - window.innerHeight;
      // p = how far we've scrolled into the wrapper (0 at top edge, 1 at bottom edge of pin)
      const p = Math.max(0, Math.min(1, -rect.top / total));
      setProgress(p);
    };
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(update);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    update();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Translate the track so panels slide left as progress goes 0..1.
  // We want the LAST panel to land flush; total travel = (panelCount - 1) * panelWidth.
  const trackStyle = {
    transform: `translate3d(${-progress * (panelCount - 1) * 100}vw, 0, 0)`
  };

  return (
    <div
      ref={wrapRef}
      className="saver-wrap"
      style={{ height: `${panelCount * 100}vh` }}
      data-screen-label="04a Savings">
      <div className="saver-pin">
        <div className="saver-chrome">
          <div className="saver-head mono">
            <span>{isAR ? "احسب التوفير + العائد" : "Your savings + ROI"}</span>
            <span className="saver-head-r">
              <span className="saver-head-hint">{isAR ? "← مرّر للأسفل لتشاهد التوفير →" : "↓ Keep scrolling — savings stack up →"}</span>
              <span className="saver-team">
                <span className="saver-team-l">{isAR ? "الفريق" : "Team"}</span>
                <button type="button" onClick={() => setTeam(t => Math.max(1, t - 1))} aria-label="Decrease team">−</button>
                <span className="saver-team-v">{team}</span>
                <button type="button" onClick={() => setTeam(t => Math.min(50, t + 1))} aria-label="Increase team">+</button>
              </span>
            </span>
          </div>

          <div className="saver-rail" ref={railRef}>
            <div className="saver-track" ref={trackRef} style={trackStyle}>

              {/* PANEL 0 — intro */}
              <section className="saver-panel saver-intro">
                <div className="saver-panel-num mono">01 / {String(panelCount).padStart(2, "0")}</div>
                <h3 className="saver-panel-h">
                  {isAR ? <>كم تدفع <span className="it">اليوم</span>؟</> : <>What you pay <span className="it">today</span>.</>}
                </h3>
                <p className="saver-panel-p">
                  {isAR
                    ? "خمس بنود معتادة في ميزانية كل وكيل في دبي — موظف اتصال، بوابات إعلان، وكالة، إدارة إعلانات، وأدوات. مرّر للأسفل لترى ما يستبدله نظامنا."
                    : "Five line items every Dubai agent has on the books today — VA, portals, agency, ad management, tools. Keep scrolling to watch our system replace each one."}
                </p>
                <div className="saver-intro-list">
                  {cats.map((c) => (
                    <div className="saver-intro-row mono" key={c.id}>
                      <span className="saver-intro-name">{c.name}</span>
                      <span className="saver-intro-cost">{fmt(c.perSeat ? c.cost * team : c.cost)}/mo</span>
                    </div>
                  ))}
                  <div className="saver-intro-row mono saver-intro-total">
                    <span className="saver-intro-name">{isAR ? "إجمالي الإنفاق الحالي" : "Total monthly spend"}</span>
                    <span className="saver-intro-cost">{fmt(cats.reduce((s, c) => s + (c.perSeat ? c.cost * team : c.cost), 0))}/mo</span>
                  </div>
                </div>
              </section>

              {/* PANELS 1..N — one per category */}
              {cats.map((c, i) => {
                const lineCost = c.perSeat ? c.cost * team : c.cost;
                const lineRev = c.perSeat ? c.rev * team : c.rev;
                const active = activeCats[i] > 0.4;
                return (
                  <section className={"saver-panel saver-cat-panel" + (active ? " is-on" : "")} key={c.id}>
                    <div className="saver-panel-num mono">{String(i + 2).padStart(2, "0")} / {String(panelCount).padStart(2, "0")}</div>
                    <div className="saver-cat-line">
                      <div className="saver-cat-x" aria-hidden="true">
                        <span className="strike-line"></span>
                      </div>
                      <div className="saver-cat-name-big">{c.name}</div>
                      <div className="saver-cat-cost-big mono">{fmt(lineCost)}<span>/mo</span></div>
                    </div>
                    <p className="saver-panel-p">{c.replaced}</p>
                    <div className="saver-cat-deltas">
                      <div className="saver-delta">
                        <div className="saver-delta-l mono">{isAR ? "توفير شهري" : "You save"}</div>
                        <div className="saver-delta-v">+{fmt(lineCost)}</div>
                      </div>
                      <div className="saver-delta">
                        <div className="saver-delta-l mono">{isAR ? "إيرادات إضافية" : "You earn"}</div>
                        <div className="saver-delta-v">+{fmt(lineRev)}</div>
                      </div>
                    </div>
                    <div className="saver-running mono">
                      <span>{isAR ? "الإجمالي حتى الآن" : "Running total"}</span>
                      <span className="saver-running-v">{fmt(monthlySavings + extraRev)}/mo</span>
                    </div>
                  </section>
                );
              })}

              {/* FINAL PANEL — totals + ROI */}
              <section className="saver-panel saver-final">
                <div className="saver-panel-num mono">{String(panelCount).padStart(2, "0")} / {String(panelCount).padStart(2, "0")}</div>
                <h3 className="saver-panel-h">
                  {isAR ? <>هذا ما <span className="it">يعنيه</span> النظام.</> : <>What that <span className="it">means</span>.</>}
                </h3>
                <div className="saver-final-grid">
                  <div className="saver-final-cell">
                    <div className="saver-final-l mono">{isAR ? "توفير شهري" : "Monthly savings"}</div>
                    <div className="saver-final-v">{fmt(monthlySavings)}</div>
                    <div className="saver-final-sub mono">{isAR ? `سنويًا · ${fmt(annualSavings)}` : `Annual · ${fmt(annualSavings)}`}</div>
                  </div>
                  <div className="saver-final-cell">
                    <div className="saver-final-l mono">{isAR ? "إيرادات إضافية / شهر" : "Avg extra revenue / mo"}</div>
                    <div className="saver-final-v">{fmt(extraRev)}</div>
                    <div className="saver-final-sub mono">{isAR ? "متوسط وكلائنا" : "Across our agents"}</div>
                  </div>
                  <div className="saver-final-cell saver-final-roi">
                    <div className="saver-final-l mono">{isAR ? "مضاعف العائد" : "ROI multiple"}</div>
                    <div className="saver-final-v">{roiMultiple.toFixed(1)}<span className="x">x</span></div>
                    <div className="saver-final-sub mono">{isAR ? "على رسوم وستفي" : "On Wastafy fee"}</div>
                  </div>
                </div>
                <p className="saver-final-foot mono">
                  {isAR
                    ? `لفريق من ${team} · مبني على متوسطات وكلائنا · أرقام مرنة، فعليّة الإغلاق تختلف`
                    : `For a team of ${team} · Based on our agents' averages · Numbers flex, your close rate decides`}
                </p>
              </section>

            </div>
          </div>

          {/* Progress bar across the bottom */}
          <div className="saver-progress" aria-hidden="true">
            <div className="saver-progress-fill" style={{ width: `${progress * 100}%` }}></div>
            <div className="saver-progress-ticks">
              {Array.from({ length: panelCount }).map((_, i) => (
                <span key={i} className={"tick" + (progress >= i / (panelCount - 1) - 0.001 ? " on" : "")}></span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ============== PROOF (US + Dubai) ============== */
const Proof = ({ lang }) => {
  const isAR = lang === "ar";
  const items = isAR ? [
  { q: "الـ AI يردّ على كل استفسار من Bayut و Property Finder خلال ٦٠ ثانية. ضاعفت إغلاقاتي بدون توظيف.", who: "حمّاد ك.", role: "وسيط · دبي مارينا", flag: "🇦🇪" },
  { q: "٣ صفقات في ٩٠ يومًا، و٣ أخرى في خط الأنابيب — بدون توظيف.", who: "تريسي س.", role: "Villa Rica, Georgia", flag: "🇺🇸" },
  { q: "١٠ مواعيد في الأسبوع الأول. ٣ صفقات تحت العقد قبل أن أنهي الإعداد.", who: "ريتشارد م.", role: "وسيط · Ohio", flag: "🇺🇸" }] :
  [
  { q: "Replies to my Bayut and PF leads before I've seen the notification — and the qualifying is sharper than my old ISA's.", who: "Hammad K.", role: "Broker · Dubai Marina", flag: "🇦🇪" },
  { q: "Three deals closed in 90 days, three more landing. I'm not working harder — I'm just talking to people who are ready.", who: "Tracey S.", role: "Villa Rica, Georgia", flag: "🇺🇸" },
  { q: "Week one my calendar was so full I thought it was broken. Two went under contract before onboarding even finished.", who: "Richard M.", role: "Broker · Ohio", flag: "🇺🇸" }];


  return (
    <section className="section proof" id="proof" data-screen-label="04 Proof">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/04</span>
            <span className="eyebrow">{isAR ? "نتائج · أمريكا + دبي" : "Proof · US + Dubai"}</span>
          </div>
          <h2>{isAR ? <>فعلناها في أمريكا. <span className="it">الآن</span> في دبي.</> : <>We've done this in the US. <span className="it">Now</span> in Dubai.</>}</h2>
        </div>

        <p className="lead proof-lead">
          {isAR ?
          <>
            <span>نظامنا ساعد الوكلاء على إغلاق صفقات أكثر بجهد أقل — والآن نُحضِره إلى دبي.</span>
            <span className="lead-second">منصّة واحدة. كل وكيل، بكل مستوى. حلول للجميع.</span>
          </> :
          <>
            <span>Our system helped US agents close more with less work. Now it's in Dubai.</span>
            <span className="lead-second">One platform. Every agent, every level.</span>
          </>}
        </p>

        <div className="big-stats stagger reveal">
          {[
          ["AED 176.7B", isAR ? "صفقات Q4 ٢٠٢٥" : "Q4 2025 transactions"],
          ["48,000", isAR ? "صفقة في ٩٠ يومًا" : "deals in 90 days"],
          ["29,000", isAR ? "مستثمر جديد/ربع" : "new investors / qtr"],
          ["70%", isAR ? "من السوق Off-plan" : "of market is off-plan"]].
          map(([n, l]) =>
          <div className="big-stat" key={l}>
              <div className="big-stat-n">{n}</div>
              <div className="big-stat-l mono">{l}</div>
            </div>
          )}
        </div>

        {/* Mobile-only savings graphic — replaces the dense market-stats grid
            on phones with a single, visceral "what you save" picture. */}
        <div className="save-graphic reveal" aria-hidden="false">
          <div className="save-graphic-eye mono">
            {isAR ? "ما توفّره · شهريًا" : "What you save · per month"}
          </div>
          <div className="save-graphic-num">
            <span className="sg-cur mono">AED</span>
            <span className="sg-val">22,400</span>
          </div>
          <div className="save-graphic-sub">
            {isAR
              ? "مقابل ISA + وكالة + ميزانية إعلانات"
              : "vs. ISA + agency retainer + ad spend"}
          </div>

          <div className="save-bars">
            <div className="save-bar-row">
              <div className="save-bar-l mono">{isAR ? "الطريقة القديمة" : "Old way"}</div>
              <div className="save-bar-track">
                <div className="save-bar-fill old"></div>
              </div>
              <div className="save-bar-v mono">28K</div>
            </div>
            <div className="save-bar-row">
              <div className="save-bar-l mono">{isAR ? "وستفي" : "Wastafy"}</div>
              <div className="save-bar-track">
                <div className="save-bar-fill new"></div>
              </div>
              <div className="save-bar-v mono">5.6K</div>
            </div>
          </div>

          <div className="save-graphic-foot mono">
            {isAR ? "≈ ٢٧٠٬٠٠٠ درهم سنويًا" : "≈ AED 270,000 / year back in your pocket"}
          </div>
        </div>

        <div className="testi-grid stagger reveal">
          {items.map((t, i) =>
          <div className="testi" key={i}>
              <div className="testi-flag">{t.flag}</div>
              <div className="testi-q">"{t.q}"</div>
              <div className="testi-meta">
                <div className="testi-who">{t.who}</div>
                <div className="testi-role mono">{t.role}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        .big-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          margin-bottom: 80px;
        }
        .big-stat {
          padding: 40px 24px;
          border-right: 1px solid var(--rule);
        }
        .big-stat:last-child { border-right: 0; }
        .big-stat-n {
          font-size: clamp(40px, 5vw, 72px);
          line-height: 0.9;
          letter-spacing: -0.05em;
          margin-bottom: 8px;
        }
        .big-stat-l { font-size: 10px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }

        /* Mobile-only "what you save" graphic. Hidden on desktop where the
           market-stats grid carries the proof. */
        .save-graphic { display: none; }
        @media (max-width: 900px) {
          .big-stats { display: none; }
          .save-graphic {
            display: block;
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
            padding: 36px 0 32px;
            margin-bottom: 56px;
          }
          .save-graphic-eye {
            font-size: 10px;
            letter-spacing: 0.16em;
            color: var(--muted);
            text-transform: uppercase;
            margin-bottom: 18px;
          }
          .save-graphic-num {
            display: flex;
            align-items: baseline;
            gap: 10px;
            line-height: 0.9;
            margin-bottom: 10px;
          }
          .sg-cur {
            font-size: 14px;
            color: var(--muted);
            letter-spacing: 0.12em;
          }
          .sg-val {
            font-size: clamp(64px, 18vw, 96px);
            letter-spacing: -0.05em;
            color: var(--accent);
            font-feature-settings: "tnum" 1;
          }
          .save-graphic-sub {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.4;
            margin-bottom: 28px;
            max-width: 28ch;
          }
          .save-bars {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 24px;
          }
          .save-bar-row {
            display: grid;
            grid-template-columns: 90px 1fr 56px;
            gap: 12px;
            align-items: center;
            font-size: 11px;
          }
          .save-bar-l {
            color: var(--muted);
            letter-spacing: 0.12em;
            text-transform: uppercase;
          }
          .save-bar-track {
            height: 14px;
            background: color-mix(in oklab, var(--ink) 8%, transparent);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
          }
          .save-bar-fill {
            height: 100%;
            border-radius: 2px;
            transform-origin: left center;
            animation: sgrow 1s var(--ease, ease) both;
          }
          .save-bar-fill.old {
            width: 100%;
            background: color-mix(in oklab, var(--ink) 55%, transparent);
          }
          .save-bar-fill.new {
            width: 20%;
            background: var(--accent);
          }
          @keyframes sgrow {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
          }
          .save-bar-v {
            text-align: right;
            font-size: 13px;
            color: var(--ink);
            letter-spacing: 0;
          }
          .save-graphic-foot {
            font-size: 11px;
            letter-spacing: 0.14em;
            color: var(--accent);
            text-transform: uppercase;
            border-top: 1px dashed var(--rule);
            padding-top: 16px;
          }
          [dir="rtl"] .save-bar-fill { transform-origin: right center; }
          [dir="rtl"] .save-bar-v { text-align: left; }
        }

        .testi-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--rule);
          border-left: 1px solid var(--rule);
        }
        .testi {
          padding: 40px 32px;
          border-right: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          min-height: 320px;
        }
        .testi-flag { font-size: 20px; margin-bottom: 24px; }
        .testi-q {
          font-family: var(--serif);
          font-size: 22px;
          line-height: 1.3;
          letter-spacing: -0.01em;
          margin-bottom: 24px;
          font-style: italic;
        }
        .testi-who { font-size: 13px; margin-bottom: 4px; }
        .testi-role { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }

        /* ===== Dubai-tailored savings & ROI calculator — horizontal scroll story ===== */
        .saver-wrap {
          position: relative;
          margin: 80px 0;
          width: 100%;
        }
        .saver-pin {
          position: sticky;
          top: 0;
          height: 100vh;
          width: 100vw;
          display: flex;
          align-items: stretch;
          background: var(--bg);
          overflow: hidden;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
        }
        .saver-chrome {
          position: relative;
          width: 100%;
          display: flex;
          flex-direction: column;
        }
        .saver-head {
          flex: 0 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 18px 32px;
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--muted);
          border-bottom: 1px solid var(--rule);
        }
        .saver-head-r { display: flex; gap: 24px; align-items: center; }
        .saver-head-hint { color: var(--muted); }
        .saver-team {
          display: flex;
          align-items: center;
          gap: 8px;
          font-family: var(--mono);
        }
        .saver-team-l { color: var(--muted); margin-right: 4px; }
        .saver-team button {
          width: 26px; height: 26px;
          border: 1px solid var(--rule);
          background: transparent;
          color: var(--ink);
          cursor: pointer;
          font-size: 14px;
          line-height: 1;
          border-radius: 4px;
          transition: background 160ms, border-color 160ms;
        }
        .saver-team button:hover { background: color-mix(in oklch, var(--ink) 8%, transparent); border-color: var(--ink); }
        .saver-team-v { min-width: 24px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink); }

        .saver-rail {
          flex: 1 1 auto;
          overflow: hidden;
          position: relative;
        }
        .saver-track {
          display: flex;
          height: 100%;
          will-change: transform;
        }
        .saver-panel {
          flex: 0 0 100vw;
          height: 100%;
          padding: 60px clamp(32px, 8vw, 120px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 32px;
          position: relative;
          border-right: 1px solid var(--rule);
        }
        .saver-panel-num {
          position: absolute;
          top: 32px;
          left: clamp(32px, 8vw, 120px);
          font-size: 10px;
          letter-spacing: 0.18em;
          color: var(--muted);
        }
        .saver-panel-h {
          font-size: clamp(40px, 6vw, 88px);
          line-height: 0.95;
          letter-spacing: -0.04em;
          margin: 0;
          max-width: 14ch;
        }
        .saver-panel-h .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
        .saver-panel-p {
          font-size: clamp(16px, 1.4vw, 20px);
          line-height: 1.5;
          max-width: 56ch;
          color: var(--muted);
          margin: 0;
        }

        /* Intro panel — list of current spend */
        .saver-intro-list {
          display: flex;
          flex-direction: column;
          max-width: 640px;
          width: 100%;
          border-top: 1px solid var(--rule);
        }
        .saver-intro-row {
          display: flex;
          justify-content: space-between;
          padding: 16px 0;
          border-bottom: 1px solid var(--rule);
          font-size: 14px;
          letter-spacing: 0.04em;
        }
        .saver-intro-name { color: var(--ink); text-transform: none; letter-spacing: -0.005em; font-family: var(--sans); font-size: 16px; }
        .saver-intro-cost { color: var(--muted); }
        .saver-intro-total { padding-top: 22px; padding-bottom: 22px; }
        .saver-intro-total .saver-intro-name { font-weight: 600; }
        .saver-intro-total .saver-intro-cost {
          color: var(--ink);
          font-size: 22px;
          font-weight: 500;
        }

        /* Category panels — replaced line item */
        .saver-cat-line {
          display: flex;
          align-items: baseline;
          gap: 32px;
          flex-wrap: wrap;
        }
        .saver-cat-x {
          width: 40px; height: 40px;
          border-radius: 50%;
          border: 1px solid var(--rule);
          display: grid; place-items: center;
          flex: 0 0 auto;
          position: relative;
        }
        .saver-cat-x::before, .saver-cat-x::after {
          content: "";
          position: absolute;
          width: 20px; height: 1.5px;
          background: var(--ink);
          transform-origin: center;
          opacity: 0;
          transition: opacity 400ms ease;
        }
        .saver-cat-x::before { transform: rotate(45deg); }
        .saver-cat-x::after { transform: rotate(-45deg); }
        .is-on .saver-cat-x::before, .is-on .saver-cat-x::after { opacity: 1; }
        .is-on .saver-cat-x { border-color: var(--ink); }
        .saver-cat-name-big {
          font-size: clamp(36px, 5vw, 64px);
          letter-spacing: -0.035em;
          line-height: 1;
          flex: 1 1 auto;
          transition: opacity 400ms ease, text-decoration-color 400ms ease;
          text-decoration: line-through;
          text-decoration-color: transparent;
        }
        .is-on .saver-cat-name-big {
          opacity: 0.55;
          text-decoration-color: var(--muted);
        }
        .saver-cat-cost-big {
          font-size: clamp(28px, 3vw, 40px);
          letter-spacing: -0.02em;
          color: var(--muted);
          font-feature-settings: "tnum" 1;
        }
        .saver-cat-cost-big span { font-size: 0.55em; opacity: 0.6; margin-left: 2px; }

        .saver-cat-deltas {
          display: flex;
          gap: 64px;
          padding-top: 12px;
        }
        .saver-delta { display: flex; flex-direction: column; gap: 8px; }
        .saver-delta-l {
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--muted);
        }
        .saver-delta-v {
          font-size: clamp(28px, 3vw, 40px);
          letter-spacing: -0.025em;
          line-height: 1;
          color: var(--ink);
          font-feature-settings: "tnum" 1;
        }
        .saver-running {
          display: flex;
          justify-content: space-between;
          padding: 18px 0;
          border-top: 1px solid var(--rule);
          font-size: 11px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--muted);
          align-items: baseline;
          max-width: 520px;
        }
        .saver-running-v {
          font-size: 22px;
          letter-spacing: -0.01em;
          color: var(--ink);
          text-transform: none;
          font-feature-settings: "tnum" 1;
        }

        /* Final panel — totals */
        .saver-final-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          width: 100%;
          max-width: 1200px;
        }
        .saver-final-cell {
          padding: 36px 28px 40px;
          border-right: 1px solid var(--rule);
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .saver-final-cell:last-child { border-right: 0; }
        .saver-final-l {
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--muted);
        }
        .saver-final-v {
          font-size: clamp(40px, 5vw, 72px);
          line-height: 0.95;
          letter-spacing: -0.04em;
          font-feature-settings: "tnum" 1;
        }
        .saver-final-v .x { font-size: 0.55em; margin-left: 4px; opacity: 0.6; }
        .saver-final-sub {
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--muted);
        }
        .saver-final-foot {
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--muted);
          padding-top: 8px;
        }

        /* Progress bar */
        .saver-progress {
          flex: 0 0 auto;
          height: 32px;
          border-top: 1px solid var(--rule);
          position: relative;
          background: var(--bg);
        }
        .saver-progress-fill {
          position: absolute;
          left: 0; top: 0; bottom: 0;
          background: color-mix(in oklch, var(--ink) 12%, transparent);
          transition: width 80ms linear;
        }
        .saver-progress-ticks {
          position: absolute;
          inset: 0;
          display: flex;
          justify-content: space-between;
          padding: 0 32px;
          align-items: center;
          pointer-events: none;
        }
        .saver-progress-ticks .tick {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--rule);
          transition: background 200ms;
        }
        .saver-progress-ticks .tick.on { background: var(--ink); }

        /* Mobile / reduced-motion fallback: native horizontal scroll */
        @media (max-width: 900px) {
          .saver-wrap { height: auto !important; margin-bottom: 60px; }
          .saver-pin { position: relative; height: auto; }
          .saver-rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
          .saver-track { transform: none !important; height: auto; }
          .saver-panel { flex: 0 0 90vw; height: auto; min-height: 80vh; scroll-snap-align: start; padding: 80px 28px 60px; gap: 24px; }
          .saver-final-grid { grid-template-columns: 1fr; }
          .saver-final-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
          .saver-final-cell:last-child { border-bottom: 0; }
          .saver-cat-deltas { flex-direction: column; gap: 24px; }
          .saver-head { flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
          .saver-head-hint { display: none; }
        }

        /* On phones, hide the heavy ROI scrolljack entirely.
           Pricing + Proof + Calendar already carry the value story
           and the page is dramatically shorter without it. */
        @media (max-width: 760px) {
          .saver-wrap { display: none !important; }
        }

        @media (max-width: 900px) {
          .big-stats { grid-template-columns: repeat(2, 1fr); }
          .big-stat:nth-child(2) { border-right: 0; }
          .big-stat { padding: 28px 16px; }
          .testi-grid { grid-template-columns: 1fr; }
          .testi { min-height: auto; padding: 28px 0; border-right: 0; border-left: 0; }
          .testi:nth-child(n+2) { display: none; }
          .proof-lead .lead-second { display: none; }
          .proof-lead { font-size: 22px; gap: 0; }
        }
      `}</style>
    </section>);

};

/* ============== PRICING (custom tailored) ============== */
const Pricing = ({ lang, onCTA }) => {
  const isAR = lang === "ar";
  const tiers = isAR ? [
  {
    name: "ابدأ", sub: "وكيل فردي",
    price: "مخصّص",
    tagline: "تملّك منطقتك. ابدأ بقوّة.",
    includes: [
    "منطقتك المحدّدة، مفعّلة وجاهزة",
    "تأهيل كل استفسار بـ٥ لغات تحت ٦٠ ثانية",
    "إعداد WhatsApp Business API برقمك الموثّق",
    "٥٠٠ جهة اتصال مالك مفعّلة ومجزّأة",
    "إنفاق إعلاني مدمج + تقارير أسبوعية"],

    cta: "احجز منطقتي"
  },
  {
    name: "نمو", sub: "وكلاء عاليي الحجم",
    price: "مخصّص",
    tagline: "ضاعف الحجم. أضف أنظمة. اعمل أقلّ.",
    includes: [
    "كل ما في «ابدأ» — بمنطقة أوسع وحجم أعلى",
    "٢٬٠٠٠ جهة اتصال مجزّأة بالجنسية والمطوّر",
    "محرّك مطابقة المشتري ↔ المالك تلقائيًا",
    "وكلاء صوتيون باللهجة الخليجية + الروسية",
    "وصول إلى Wastafy Network بين الوكلاء",
    "وصول يومي عبر واتساب + استراتيجية أسبوعية"],

    cta: "احجز منطقتي",
    featured: true
  },
  {
    name: "وكالة", sub: "وكلاء فاخرون / فرق",
    price: "مخصّص",
    tagline: "أكبر منطقة. أعلى حجم. كامل الأنظمة.",
    includes: [
    "كل ما في «نمو» — بأكبر نطاق وأعلى حجم",
    "نظام AI كامل، يُبنى ويُسلَّم لك باشتراك شهري",
    "تسويق متقدّم: إعلانات موجّهة، إعادة استهداف، جماهير مخصّصة وشبيهة",
    "رعاية قاعدة بياناتك القائمة تلقائيًا — لمسات يومية بدون تدخّل",
    "أقصى قدر من الأتمتة في المهام المتكرّرة دون فقدان الكفاءة",
    "ضمان أداء مرتبط بالعائد على الاستثمار"],

    cta: "احجز منطقتي"
  }] :
  [
  {
    name: "Starter", sub: "Solo agent",
    price: "Custom",
    tagline: "Own your area. Start strong.",
    includes: [
    "Your defined area, activated and ready.",
    "Every inquiry qualified in 5 languages, under 60 seconds.",
    "WhatsApp Business API setup with your verified number.",
    "500 owner contacts activated, segmented and ready for outreach.",
    "Ad spend included. Weekly performance reports."],

    cta: "Claim my area"
  },
  {
    name: "Growth", sub: "High-volume agents",
    price: "Custom",
    tagline: "More volume. More systems. Less manual work.",
    includes: [
    "Everything in Starter, with a wider area and higher volume.",
    "2,000 owner contacts segmented by nationality, developer, intent.",
    "Buyer ↔ Owner Match Engine running automatically across your area.",
    "Khaleeji Arabic + Russian voice agents · per-nationality scripts.",
    "Wastafy Network access — agent-to-agent inventory marketplace.",
    "Daily CSM via WhatsApp + weekly strategy calls."],

    cta: "Claim my area",
    featured: true
  },
  {
    name: "Agency", sub: "Boutique agencies & top teams",
    price: "Custom",
    tagline: "Bigger area. Higher volume. Every system on.",
    includes: [
    "Everything in Growth, at the largest area scope.",
    "Full AI build-and-release system — yours to keep, on a monthly subscription.",
    "High-level marketing: targeted ads, retargeting, custom + lookalike audiences.",
    "Existing database nurturing on autopilot — daily touchpoints handled for you.",
    "Maximum automation across the busywork without losing efficiency.",
    "ROI-backed performance guarantee."],

    cta: "Claim my area"
  }];


  return (
    <section className="section pricing" id="pricing" data-screen-label="05 Pricing">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/05</span>
            <span className="eyebrow">{isAR ? "الأسعار" : "Pricing"}</span>
          </div>
          <h2>{isAR ? <>كل وكيل مختلف. <span className="it">كل نظام</span> مخصّص.</> : <>Every agent's different. <span className="it">Every system</span> is custom.</>}</h2>
        </div>

        <p className="lead pricing-lead">
          {isAR ?
          <>
            <span>لا باقات جاهزة. نبني النظام حول أعمالك — لا العكس.</span>
            <span className="lead-second">حرصًا على نجاح كل وكيل، مهما كان. الجلسة الاستراتيجية مجانية، وسنخبرك بصراحة إن كنّا مناسبين.</span>
          </> :
          <>
            <span>No packages. We build the system around your business — not the other way around.</span>
            <span className="lead-second">Strategy call is free. We'll tell you straight if we're a fit.</span>
          </>}
        </p>

        <div className="tiers stagger reveal">
          {tiers.map((t, i) =>
          <div className={`tier ${t.featured ? "featured" : ""}`} key={i}>
              {t.featured && <div className="tier-badge mono">{isAR ? "الأكثر طلبًا" : "Most chosen"}</div>}
              <div className="tier-name">{t.name}</div>
              <div className="tier-sub mono">{t.sub}</div>
              <div className="tier-price">{t.price}</div>
              <div className="tier-tagline">{t.tagline}</div>
              <ul className="tier-list">
                {t.includes.map((it) =>
              <li key={it}><span className="t-check">✓</span>{it}</li>
              )}
              </ul>
              <button className={`btn ${t.featured ? "accent" : "ghost"}`} onClick={onCTA}>
                {t.cta} →
              </button>
            </div>
          )}
        </div>

        <div className="guarantees mono">
          <span>↳ {isAR ? "صفقات مغلقة في ٩٠ يومًا — أو نواصل مجانًا" : "Deals closed in 90 days — or we work free until you get them"}</span>
          <span>↳ {isAR ? "تشغيل في ٣ أيام" : "Live in 3 days"}</span>
          <span>↳ {isAR ? "متوافق RERA + DLD" : "RERA + DLD compliant"}</span>
        </div>
      </div>

      <style>{`
        .pricing-lead {
          margin-bottom: 64px;
          max-width: 32ch;
          font-size: clamp(24px, 2.6vw, 36px);
          line-height: 1.3;
          font-style: normal;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .pricing-lead > span:first-child { font-style: italic; }
        .pricing-lead .lead-second {
          font-family: var(--sans, inherit);
          font-style: normal;
          font-size: 0.62em;
          line-height: 1.5;
          color: color-mix(in oklab, var(--ink) 72%, transparent);
          max-width: 48ch;
          letter-spacing: 0;
        }
        .proof-lead {
          max-width: 32ch;
          font-size: clamp(24px, 2.6vw, 36px);
          line-height: 1.3;
          font-style: normal;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .proof-lead > span:first-child {
          font-style: italic;
        }
        .proof-lead .lead-second {
          font-family: var(--sans, inherit);
          font-style: normal;
          font-size: 0.62em;
          line-height: 1.5;
          color: color-mix(in oklab, var(--ink) 72%, transparent);
          max-width: 48ch;
          letter-spacing: 0;
        }
        .tiers {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--rule);
          border-left: 1px solid var(--rule);
          margin-bottom: 48px;
        }
        .tier {
          padding: 48px 32px;
          border-right: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          display: flex;
          flex-direction: column;
          gap: 12px;
          position: relative;
          transition: background .35s var(--ease);
        }
        .tier.featured {
          background: var(--ink);
          color: var(--bg);
        }
        .tier.featured .tier-sub,
        .tier.featured .tier-tagline,
        .tier.featured .tier-list { color: var(--bg); opacity: 0.85; }
        .tier-badge {
          position: absolute;
          top: 20px;
          right: 24px;
          padding: 4px 10px;
          background: var(--accent);
          color: #fff;
          border-radius: 999px;
          font-size: 9px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }
        .tier-name { font-size: 28px; letter-spacing: -0.03em; text-transform: uppercase; }
        .tier-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
        .tier-price {
          font-size: 56px;
          letter-spacing: -0.04em;
          line-height: 1;
          margin: 12px 0 4px;
        }
        .tier.featured .tier-price { color: var(--accent); }
        .tier-tagline { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
        .tier-list {
          list-style: none;
          padding: 0;
          margin: 0 0 24px 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
          font-size: 13px;
          line-height: 1.4;
          flex: 1;
        }
        .tier-list li {
          display: flex;
          gap: 12px;
          padding: 10px 0;
          border-top: 1px solid var(--rule);
        }
        .tier.featured .tier-list li { border-top-color: #ffffff15; }
        .t-check { color: var(--accent); font-weight: 600; }
        .tier .btn { align-self: flex-start; }
        .tier.featured .btn.ghost { color: var(--bg); border-color: var(--bg); }
        .tier.featured .btn.ghost:hover { background: var(--bg); color: var(--ink); }

        .guarantees {
          display: flex;
          gap: 32px;
          flex-wrap: wrap;
          font-size: 11px;
          color: var(--muted);
          letter-spacing: 0.08em;
          text-transform: uppercase;
          padding-top: 32px;
          border-top: 1px solid var(--rule);
        }

        @media (max-width: 900px) {
          .tiers { grid-template-columns: 1fr; }
          .pricing-lead .lead-second { display: none; }
          .pricing-lead { font-size: 22px; gap: 0; margin-bottom: 40px; }
          .tier { padding: 32px 24px; }
          .tier-price { font-size: 44px; }
          .tier-name { font-size: 22px; }
          .guarantees { flex-direction: column; gap: 8px; }
        }
      `}</style>
    </section>);

};

/* ============== FAQ ============== */
const FAQ = ({ lang }) => {
  const isAR = lang === "ar";
  const [open, setOpen] = React.useState(0);
  const items = isAR ? [
  { q: "عندي عملاء بالفعل. لماذا أحتاج هذا؟", a: "ليست لديك مشكلة عملاء. لديك مشكلة \"ماذا يحدث بعد العميل\". وكلاء يخسرون صفقات لأنهم ردّوا متأخّرين، نسوا المتابعة في الشهر الثالث، أو لم يكن عندهم نظام لاكتشاف وحدة شاغرة في مبانيهم. ٣٠٠ استفسار شهريًا وتغلق ٥ — تترك ١٠ صفقات على الطاولة. نحن نوصّلها." },
  { q: "البلاست على واتساب يحظر رقمي. ما الفرق؟", a: "البلاست هو ما يحظر الأرقام. نحن لا نبلاست. نرسل دفعات منخفضة متوافقة عبر WhatsApp Business API الموثّق بقوالب معتمدة، مع موافقة موثّقة لكل جهة اتصال. رقمك يبقى نظيفًا، تصنيفك يتحسّن، وتتوسّع بدون خوف." },
  { q: "أعمل في مبانٍ محدّدة — Marina Towers، Studio One. هل يعمل لذلك؟", a: "نعم — التخصّص هو الفكرة كاملة. كلما ركّزت أكثر، أداء وستفي أعلى. نرسم كل مالك، كل شغور، كل صفقة متعثّرة في مبانيك. النظام يصبح أذكى مع الاستخدام." },
  { q: "هل تأخذون عمولة؟", a: "لا. أبدًا. رسوم شهرية فقط. صفقاتك لك. وكلاء دبي يقتسمون ٥٠/٥٠ مع الوكالة أصلًا — لن نضيف أنفسنا فوق ذلك." },
  { q: "مشتريّ روس / هنود / بريطانيون / عرب. هل يتكلم الذكاء لغتهم؟", a: "نعم. إنجليزي (لكنة بريطانية)، عربي (خليجي مفضّل)، هندي، أردو، روسي. نصوص مختلفة لكل جنسية ولكل نتيجة (بيع، تأجير، أوف بلان، عقارات عطلات). مكتبة نصوص بُنيت على ما يقوله الوكلاء فعلًا، لا لغة شات بوت عامّة." },
  { q: "هل يبدو الذكاء آليًا لعملائي الراقين؟", a: "لا. الذكاء لا يُغلق العملاء الراقين أبدًا. يتعامل مع التأهيل فقط — يجيب \"كم السعر؟\" و \"هل الوحدة مفروشة؟\" للمرة الـ ٨٠ اليوم. كل محادثة راقية تصلك حيّة. عملاؤك يدفعون ٢٠ ألف+ AED عمولة. يحصلون على إنسان، لا روبوت — لكنّك لن تضيع وقتك قبل أن يكونوا مؤهّلين." }] :
  [
  { q: "I already have leads. Why do I need this?", a: "You don't have a lead problem. You have a what-happens-after-the-lead problem. Agents miss deals because they replied 4 hours late, forgot to follow up at month 3, or didn't have a system to find vacant units in their own buildings. If you sit on 300 inquiries a month and close 5 deals, you're leaving 10 deals on the table. We deliver those 10." },
  { q: "WhatsApp blasting gets my number blocked. How is this different?", a: "Blasting is exactly what gets your number blocked. We don't blast. We send compliant low-volume bursts through verified WhatsApp Business API with pre-approved templates, plus documented opt-in for every contact. Your number stays clean, your sending tier improves over time, and you can scale without fear." },
  { q: "I work specific buildings — Marina Towers, Studio One. Will this work for that?", a: "Yes — building specialization is the entire point. The more focused your area, the better Wastafy performs. We map every owner, every vacancy, every distressed deal in your buildings. The system gets smarter the longer you use it." },
  { q: "Do you take commission?", a: "No. Never. Monthly fee only. Your closings are yours. Dubai agents already split 50/50 with their agency — we're not adding ourselves to that stack." },
  { q: "My buyers are Russian / Indian / British / Arab. Does the AI speak their language?", a: "Yes. English (British accent), Arabic (Khaleeji preferred), Hindi, Urdu, and Russian. Different scripts per nationality, different scripts per outcome — selling vs. renting vs. off-plan vs. holiday homes. The script library is built on what top agents actually say, not generic chatbot language." },
  { q: "Is the AI going to sound robotic to my premium clients?", a: "No. The AI never closes premium clients. It handles qualification only — answering \"what's the price?\" and \"is it furnished?\" for the 80th time today. Every premium conversation reaches you, live. Your clients pay you AED 20,000+ commission. They get a human, not a bot — they just don't waste your time before they're qualified." }];


  return (
    <section className="section faq" id="faq" data-screen-label="06 FAQ">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/06</span>
            <span className="eyebrow">{isAR ? "أسئلة" : "FAQ"}</span>
          </div>
          <h2>{isAR ? <>الأسئلة <span className="it">قبل</span> التوقيع.</> : <>The questions <span className="it">before</span> we partner.</>}</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div className={`faq-item ${open === i ? "open" : ""}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="faq-num mono">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq-q-text">{it.q}</span>
                <span className="faq-toggle">{open === i ? "−" : "+"}</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        .faq-list { border-top: 1px solid var(--rule); }
        .faq-item { border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .3s var(--ease); }
        .faq-item:hover { background: var(--bg-2); }
        .faq-q { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; padding: 28px 0; gap: 24px; }
        .faq-num { font-size: 11px; color: var(--muted); letter-spacing: 0.15em; }
        .faq-q-text { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
        .faq-toggle { font-size: 24px; color: var(--accent); text-align: right; transition: transform .3s var(--ease); }
        .faq-item.open .faq-toggle { transform: rotate(180deg); }
        .faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), padding .5s var(--ease); padding: 0 0 0 84px; font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 70ch; }
        .faq-item.open .faq-a { max-height: 240px; padding: 0 0 28px 84px; }
        @media (max-width: 700px) {
          .faq-q { grid-template-columns: 40px 1fr 30px; }
          .faq-q-text { font-size: 17px; }
          .faq-a, .faq-item.open .faq-a { padding-left: 64px; }
        }
      `}</style>
    </section>);

};

/* ============== FOOTER ============== */
const Footer = ({ lang, onCTA }) => {
  const isAR = lang === "ar";
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="shell">
        <div className="footer-cta">
          <div className="footer-cta-eye eyebrow">
            <span className="dot-live"></span>
            {isAR ? "٣ مقاعد متاحة · Q2 ٢٠٢٦" : "3 seats open · Q2 2026"}
          </div>
          <h2 className="footer-headline">
            {isAR ? <>أنت الـ <span className="it">CEO</span>.<br />نحن الـ COO.</> : <>You're the <span className="it">CEO</span>.<br />We're the COO.</>}
          </h2>
          <button className="btn accent big" onClick={onCTA}>
            <span className="dot"></span>
            {isAR ? "احجز جلستك المجانية" : "Book your free session"}
          </button>
        </div>

        <div className="footer-grid">
          <div className="footer-brand">
            <Wordmark size={28} gap={11} />
          </div>
          <div className="footer-tag">
            {isAR ? "صفقات جاهزة على واتسابك. بُني في الخليج، بُني للإغلاق." : "Deal-ready leads on your WhatsApp. Built in the Gulf. Built to close."}
          </div>
          <div className="footer-meta mono">
            <span>© 2026 Wastafy AI</span>
            <span>·</span>
            <span>Dubai · Meydan FZ</span>
          </div>
        </div>

        <div className="footer-huge">WASTAFY</div>
      </div>
      <style>{`
        .footer { padding: 96px 0 0 0; border-top: 1px solid var(--rule); overflow: hidden; background: var(--bg-2); }
        .footer-cta {
          text-align: center;
          padding: 32px 0 80px;
          border-bottom: 1px solid var(--rule);
        }
        .footer-cta-eye {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 24px;
        }
        .footer-headline {
          margin: 0 0 32px 0;
          font-size: clamp(48px, 8vw, 120px);
          line-height: 0.9;
          letter-spacing: -0.05em;
          text-transform: uppercase;
          font-weight: 500;
        }
        .footer-headline .it {
          font-family: var(--serif);
          font-style: italic;
          text-transform: lowercase;
          font-weight: 400;
          color: var(--accent);
        }
        .btn.big { padding: 18px 28px; font-size: 13px; }

        .footer-grid {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 24px;
          padding: 32px 0;
        }
        .footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; font-weight: 600; }
        .footer-brand .logo-mark { color: var(--accent); animation: spin 18s linear infinite; }
        .footer-tag { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); text-align: center; }
        .footer-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; display: flex; gap: 8px; }

        .footer-huge {
          font-size: clamp(80px, 24vw, 360px);
          line-height: 0.85;
          letter-spacing: -0.06em;
          font-weight: 500;
          margin: 0;
          color: var(--ink);
          opacity: 0.07;
          text-align: center;
          margin-bottom: -0.18em;
        }

        @media (max-width: 700px) {
          .footer-grid { grid-template-columns: 1fr; text-align: center; }
        }
      `}</style>
    </footer>);

};

Object.assign(window, { Problem, WhatWeDo, Proof, Pricing, FAQ, Footer });