// ============ CITRUS LANDING V2 ============
// "Citrus landing page redesign" (Claude Design). Live WhatsApp-console
// hero → channel-flow timeline → company brain → no-black-boxes → control
// levels → Arabic/RTL section → CTA → footer. Bilingual EN/AR with a real
// language toggle; RTL via the `dir` cascade. Composed from the shared
// .lv2-* primitives in shared/components/landing-primitives.jsx + copy in copy.js.

const { useState, useEffect } = React;

const Kicker = window.Lv2Kicker;
const Pill = window.Lv2Pill;
const StatusDot = window.Lv2StatusDot;
const FacetList = window.Lv2FacetList;
const Checklist = window.Lv2Checklist;
const StepCard = window.Lv2StepCard;
const StatusStepCard = window.Lv2StatusStepCard;
const Lv2Button = window.Lv2Button;

const LANDING_WHATSAPP_NUMBER = String(
  window.CITRUS_CONFIG?.LANDING_WHATSAPP_NUMBER || "201000000000"
).replace(/\D/g, "");
const WA_LINK = `https://wa.me/${LANDING_WHATSAPP_NUMBER}`;
const AUTH_TONE = { propose: "gray", draft: "amber", execute: "orange", confirm: "green" };
const RAIL_DATA = [
  { initials: "NR", name: "Nour", nameAr: "نور", role: "Property leads", roleAr: "عملاء عقارات", tone: "green", active: true },
  { initials: "SA", name: "Sara", nameAr: "سارة", role: "Showroom leads", roleAr: "عملاء المعرض", tone: "green", active: false },
  { initials: "MA", name: "Maya", nameAr: "مايا", role: "B2B enquiries", roleAr: "استفسارات B2B", tone: "amber", active: false },
  { initials: "ZI", name: "Ziad", nameAr: "زياد", role: "After-hours leads", roleAr: "عملاء بعد الدوام", tone: "blue", active: false },
];

// ============ NAV ============
function Nav({ lang, onToggleLang, t }) {
  return (
    <nav className="lv2-nav" data-screen-label="00 Nav">
      <div className="lv2-container lv2-nav-inner">
        <a href="#top" className="lv2-brand">
          <span className="lv2-brand-mark">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M8 8l5 4-5 4" />
              <path d="M14 16h4" />
            </svg>
          </span>
          {t.brandName}
        </a>
        <div className="lv2-nav-right">
          <div className="lv2-lang-toggle">
            <button type="button" className={`lv2-lang-btn ${lang === "en" ? "is-active" : ""}`} onClick={() => onToggleLang("en")}>EN</button>
            <button type="button" className={`lv2-lang-btn ${lang === "ar" ? "is-active" : ""}`} onClick={() => onToggleLang("ar")}>عربي</button>
          </div>
          <a href="#start" className="lv2-nav-cta">{t.navCta}</a>
        </div>
      </div>
    </nav>
  );
}

// ============ HERO ============
function Hero({ t }) {
  return (
    <section id="top" className="lv2-hero-top">
      <div className="lv2-container lv2-container--hero">
        <div className="lv2-hero-chip">
          <span className="lv2-hero-chip-dot" />
          {t.heroChip}
        </div>
        <h1 className="lv2-hero-title">
          <span className="lv2-hero-title-line">{t.heroT1}</span>
          <span className="lv2-hero-title-line lv2-hero-title-accent">{t.heroT2}</span>
        </h1>
        <p className="lv2-hero-lede">{t.heroLede}</p>
        <div className="lv2-hero-ctas">
          <Lv2Button variant="solid-orange" href={WA_LINK}>{t.heroCta1} →</Lv2Button>
          <Lv2Button variant="outline" href="#console">{t.heroCta2}</Lv2Button>
        </div>
      </div>
    </section>
  );
}

// ============ LIVE CONSOLE ============
function LiveConsole({ t, lang }) {
  const [jobIndex, setJobIndex] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setJobIndex((i) => (i + 1) % t.composerHints.length), 4000);
    return () => clearInterval(id);
  }, [t]);

  return (
    <div className="lv2-console-outer">
      <div className="lv2-container lv2-container--hero">
        <div id="console" className="lv2-console">
          <div className="lv2-console-bar">
            <span className="lv2-console-dot lv2-console-dot--red" />
            <span className="lv2-console-dot lv2-console-dot--yellow" />
            <span className="lv2-console-dot lv2-console-dot--green" />
            <span className="lv2-console-title">citrus · console</span>
            <span className="lv2-console-live">
              <span className="lv2-console-live-dot" />
              {t.consoleLive}
            </span>
          </div>
          <div className="lv2-console-grid">
            <div className="lv2-console-rail">
              <div className="lv2-rail-title">{t.railTitle}</div>
              <div className="lv2-rail-list">
                {RAIL_DATA.map((r) => (
                  <div key={r.initials} className={`lv2-rail-row ${r.active ? "is-active" : ""}`}>
                    <span className="lv2-rail-avatar">{r.initials}</span>
                    <div className="lv2-rail-info">
                      <div className="lv2-rail-name">{lang === "ar" ? r.nameAr : r.name}</div>
                      <div className="lv2-rail-role">{lang === "ar" ? r.roleAr : r.role}</div>
                    </div>
                    <StatusDot tone={r.tone} />
                  </div>
                ))}
              </div>
            </div>

            <div className="lv2-convo">
              <div className="lv2-convo-head">
                <span className="lv2-convo-avatar">NR</span>
                <div className="lv2-convo-info">
                  <div className="lv2-convo-name">{t.convName}</div>
                  <div className="lv2-convo-status">
                    <span className="lv2-convo-status-dot" />
                    {t.convStatus}
                  </div>
                </div>
                <span className="lv2-convo-time">14:22</span>
              </div>
              <div dir="rtl" className="lv2-convo-body">
                <div className="lv2-bubble lv2-bubble--out">بدوّر على فيلا ٣ غرف في ميفيدا، ميزانيتي حوالي ٨ مليون</div>
                <div className="lv2-bubble lv2-bubble--in">تمام 🙌 عندنا ٣ فيلات تطابق طلبك في ميفيدا. أبعتلك المواصفات؟</div>
                <div dir="ltr" className="lv2-tool-chip">
                  <span className="lv2-tool-chip-dot" />
                  listings.match · 142ms
                </div>
                <div className="lv2-bubble lv2-bubble--in">ده أقربهم لميزانيتك — فيلا ٣٢٠م، تقسيط ٨ سنين. أحجزلك معاينة الخميس ٤؟</div>
                <div className="lv2-bubble lv2-bubble--out">أيوه تمام 🙏</div>
              </div>
              <div className="lv2-composer">
                <div className="lv2-composer-input">
                  {t.composerHints[jobIndex]}
                  <span className="lv2-composer-caret" />
                </div>
                <span className="lv2-composer-send">↑</span>
              </div>
            </div>

            <div className="lv2-console-record">
              <div className="lv2-record-head">
                <StatusDot tone="amber" />
                <span className="lv2-record-title">{t.recordTitle}</span>
                <span className="lv2-record-id">#4471</span>
              </div>
              <FacetList items={t.facets} />
              <div className="lv2-record-actions">
                <span className="lv2-record-confirm">{t.actConfirm}</span>
                <span className="lv2-record-edit">{t.actEdit}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Marquee t={t} />
    </div>
  );
}

// ============ MARQUEE ============
function Marquee({ t }) {
  return (
    <div dir="ltr" className="lv2-marquee">
      <div className="lv2-marquee-track">
        {[0, 1].map((g) => (
          <div key={g} className="lv2-marquee-group" aria-hidden={g === 1 ? "true" : undefined}>
            {t.marquee.map((m, i) => (
              <Pill key={i} tone="marquee">
                <span className="lv2-kicker-dot" />
                {m}
              </Pill>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ CHANNEL FLOW ============
const CHANNEL_ICONS = {
  facebook: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />,
  instagram: <><path d="M4 7l8-4 8 4v6c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V7z" /><circle cx="12" cy="11" r="3" /></>,
  linkedin: <><circle cx="6" cy="7" r="1.8" /><circle cx="18" cy="6" r="1.8" /><circle cx="12" cy="17" r="1.8" /><path d="M7.4 8.3L11 15.3M16.7 7.3L13 15" /></>,
  whatsapp: <><path d="M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z" /><path d="M8.5 11c0 3 2.5 5 5 5 .4 0 1-.5 1.1-1l-2-1-.8.8c-1-.5-2-1.5-2.5-2.5l.8-.8-1-2c-.5 0-1 .6-1 1z" /></>,
  messenger: <path d="M21 15l-8-6-8 6M3 15l8 6 8-6" />,
  email: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 6.5l9 6.5 9-6.5" /></>,
};

function ChannelIcon({ name, size = 17, stroke = "#8F8B83" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      {CHANNEL_ICONS[name]}
    </svg>
  );
}

function ChannelFlow({ t }) {
  return (
    <section id="flow" className="lv2-section lv2-section--card">
      <div className="lv2-container lv2-container--flow">
        <div className="lv2-flow-head">
          <Kicker label={t.fKick} />
          <h2 className="lv2-h2 lv2-flow-title">{t.fTitle}</h2>
          <p className="lv2-body lv2-flow-sub">{t.fSub}</p>
        </div>

        <div className="lv2-flow-timeline">
          <div className="lv2-flow-line"><span className="lv2-flow-line-dot" /></div>
          <div className="lv2-flow-stages">

            <div className="lv2-flow-stage">
              <span className="lv2-flow-node" />
              <div>
                <div className="lv2-flow-stage-label">{t.stLabel1}</div>
                <div className="lv2-flow-stage-title">{t.stTitle1}</div>
                <div className="lv2-flow-sources">
                  <div className="lv2-flow-source-card">
                    <div className="lv2-flow-source-label">{t.socialLabel}<Pill>{t.soonLabel}</Pill></div>
                    <div>
                      <div className="lv2-flow-channel-row"><ChannelIcon name="facebook" /><span className="lv2-flow-channel-name">{t.chFacebook}</span></div>
                      <div className="lv2-flow-channel-row"><ChannelIcon name="instagram" /><span className="lv2-flow-channel-name">{t.chInstagram}</span></div>
                      <div className="lv2-flow-channel-row"><ChannelIcon name="linkedin" /><span className="lv2-flow-channel-name">{t.chLinkedin}</span></div>
                    </div>
                  </div>
                  <div className="lv2-flow-source-card">
                    <div className="lv2-flow-source-label">{t.messagingLabel}</div>
                    <div>
                      <div className="lv2-flow-channel-row lv2-flow-channel-row--live">
                        <ChannelIcon name="whatsapp" stroke="#E24310" />
                        <span className="lv2-flow-channel-name">{t.chWhatsapp}</span>
                        <Pill tone="live"><span className="lv2-status-dot lv2-status-dot--green" style={{ width: 4, height: 4 }} />{t.liveLabel}</Pill>
                      </div>
                      <div className="lv2-flow-channel-row">
                        <ChannelIcon name="messenger" />
                        <span className="lv2-flow-channel-name">{t.chMessenger}</span>
                        <Pill>{t.soonLabel}</Pill>
                      </div>
                      <div className="lv2-flow-channel-row">
                        <ChannelIcon name="email" />
                        <span className="lv2-flow-channel-name">{t.chEmail}</span>
                        <Pill>{t.soonLabel}</Pill>
                      </div>
                    </div>
                  </div>
                  <div className="lv2-flow-source-card">
                    <div className="lv2-flow-source-label">{t.phoneCatLabel}<Pill>{t.soonLabel}</Pill></div>
                    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 9 }}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8F8B83" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z" /></svg>
                      <span className="lv2-flow-channel-name">{t.chPhoneCall}</span>
                    </div>
                  </div>
                </div>
                <p className="lv2-flow-avail-note">{t.availNote}</p>
              </div>
            </div>

            <div className="lv2-flow-stage">
              <span className="lv2-flow-node" />
              <div>
                <div className="lv2-flow-stage-label">{t.stLabel2}</div>
                <div className="lv2-flow-active-badge">
                  <StatusDot tone="cta" />
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#E24310" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-9 8.5 9 9 0 0 1-3.8-.9L3 21l1.9-5.2A8.5 8.5 0 1 1 21 11.5z" /><circle cx="8.8" cy="12" r=".9" /><circle cx="12" cy="12" r=".9" /><circle cx="15.2" cy="12" r=".9" /></svg>
                  <span className="lv2-flow-active-badge-title">{t.citrusTitle}</span>
                </div>
                <p className="lv2-flow-stage-body">{t.citrusBody}</p>
              </div>
            </div>

            <div className="lv2-flow-stage">
              <span className="lv2-flow-node" />
              <div>
                <div className="lv2-flow-stage-label">{t.stLabel3}</div>
                <div className="lv2-flow-stage-head">
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#E24310" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M15 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="8.5" cy="7" r="4" /><path d="M16.5 11.5l2 2 4-4" /></svg>
                  <span className="lv2-flow-active-badge-title">{t.sendTitle}</span>
                </div>
                <p className="lv2-flow-stage-body">{t.sendBody}</p>
              </div>
            </div>

            <div className="lv2-flow-stage">
              <span className="lv2-flow-node" />
              <div>
                <div className="lv2-flow-stage-label">{t.stLabel4}</div>
                <div className="lv2-flow-stage-head">
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#E24310" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M9.5 18h5M10.5 21.5h3M12 2.5a7 7 0 0 0-4 12.8V17h8v-1.7A7 7 0 0 0 12 2.5z" /></svg>
                  <span className="lv2-flow-active-badge-title">{t.learnTitle}</span>
                </div>
                <p className="lv2-flow-stage-body">{t.learnBody}</p>
              </div>
            </div>

            <div className="lv2-flow-stage">
              <span className="lv2-flow-node lv2-flow-node--final" />
              <div className="lv2-flow-milestone">
                <div className="lv2-flow-stage-label">{t.stLabel5}</div>
                <div className="lv2-flow-stage-head">
                  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#9C3B05" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5.2l3.2 2" /></svg>
                  <span className="lv2-flow-active-badge-title">{t.graduateTitle}</span>
                </div>
                <p className="lv2-flow-stage-body">{t.graduateBody}</p>
              </div>
            </div>

          </div>
        </div>

        <div className="lv2-flow-loop">
          <svg className="lv2-flow-loop-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E24310" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20.5 12a8.5 8.5 0 1 1-2.8-6.3" /><path d="M20.5 4v5h-5" /></svg>
          <p className="lv2-flow-loop-text"><strong style={{ color: "var(--lv2-ink)" }}>{t.loopLead}</strong> {t.loopBody}</p>
        </div>
      </div>
    </section>
  );
}

// ============ STATEMENT BAND ============
function StatementBand({ t }) {
  return (
    <section className="lv2-section lv2-section--band">
      <div className="lv2-container">
        <div className="lv2-band-kicker">{t.bandKick}</div>
        <h2 className="lv2-band-title">
          <span className="lv2-band-title-line">{t.bandLine1}</span>
          <span className="lv2-band-title-line lv2-band-title-line--accent">{t.bandLine2}</span>
        </h2>
        <p className="lv2-band-sub">{t.bandSub}</p>
      </div>
    </section>
  );
}

// ============ HOW IT WORKS ============
function HowItWorks({ t }) {
  return (
    <section id="how" className="lv2-section">
      <div className="lv2-container">
        <div style={{ maxWidth: 600, marginBottom: "clamp(40px,5vw,60px)" }}>
          <Kicker label={t.hKick} />
          <h2 className="lv2-h2" style={{ marginBottom: 0 }}>{t.hTitle}</h2>
        </div>
        <div className="lv2-steps-grid">
          {t.steps.map((s, i) => (
            <StepCard key={i} num={s.num} tag={s.tag} title={s.title}>{s.body}</StepCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ COMPANY BRAIN ============
function CompanyBrain({ t }) {
  return (
    <section id="brain" className="lv2-section" style={{ borderTop: "1px solid var(--lv2-border)" }}>
      <div className="lv2-container lv2-two-col">
        <div>
          <Kicker label={t.bKick} />
          <h2 className="lv2-h2">{t.bTitle1} <span style={{ color: "var(--lv2-primary)" }}>{t.bTitle2}</span></h2>
          <p className="lv2-body" style={{ maxWidth: "48ch", marginBottom: 26 }}>{t.bBody}</p>
          <Checklist items={t.bList} />
        </div>
        <div className="lv2-brain-card">
          <div className="lv2-brain-card-head">
            <span className="lv2-brain-badge">C</span>
            <span className="lv2-brain-card-title">{t.brainCardTitle}</span>
            <span className="lv2-brain-card-meta">{t.brainCardMeta}</span>
          </div>
          <div className="lv2-brain-feeds">
            {t.brainFeeds.map((f, i) => (
              <span key={i} className="lv2-brain-feed"><span className="lv2-brain-feed-dot" />{f}</span>
            ))}
          </div>
          <div className="lv2-brain-qa">
            {t.brainQa.map((q, i) => (
              <div key={i} className="lv2-brain-qa-row">
                <span className="lv2-brain-qa-who">{q.who}</span>
                <span className="lv2-brain-qa-text">{q.text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ NO BLACK BOXES ============
function NoBlackBoxes({ t }) {
  return (
    <section id="explain" className="lv2-section lv2-section--card">
      <div className="lv2-container lv2-two-col">
        <div>
          <Kicker label={t.eKick} />
          <h2 className="lv2-h2">{t.eTitle}</h2>
          <p className="lv2-body" style={{ maxWidth: "48ch", marginBottom: 26 }}>{t.eBody}</p>
          <Checklist items={t.eList} />
        </div>
        <div className="lv2-dark-card">
          <div className="lv2-dark-card-head">
            <StatusDot tone="live" />
            <span className="lv2-dark-card-title">{t.recordTitle}</span>
            <span className="lv2-dark-card-meta">#4482 · not qualified</span>
          </div>
          <FacetList items={t.facets2} dark />
        </div>
      </div>
    </section>
  );
}

// ============ CONTROL / AUTHORITY ============
function ControlAuthority({ t }) {
  return (
    <section className="lv2-section">
      <div className="lv2-container">
        <div style={{ maxWidth: 620, marginBottom: "clamp(36px,5vw,52px)" }}>
          <Kicker label={t.ctrlKick} />
          <h2 className="lv2-h2">{t.ctrlTitle}</h2>
          <p className="lv2-body">{t.ctrlSub}</p>
        </div>
        <div className="lv2-auth-grid">
          {t.authSteps.map((a, i) => (
            <StatusStepCard key={i} tone={AUTH_TONE[a.key] || "gray"} step={a.step} title={a.title}>{a.body}</StatusStepCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ VERTICALS + ARABIC ============
function VerticalsArabic({ t }) {
  return (
    <section className="lv2-section lv2-section--dark">
      <div className="lv2-container lv2-two-col">
        <div>
          <Kicker label={t.vKick} onDark />
          <h2 className="lv2-h2">{t.vTitle1} <span style={{ color: "#FF5A22" }}>{t.vTitle2}</span></h2>
          <p className="lv2-body" style={{ color: "rgba(245,243,239,.68)", maxWidth: "46ch", marginBottom: 22 }}>{t.vBody}</p>
          <div className="lv2-vert-tags">
            {t.verticals.map((v, i) => <Pill key={i} tone="tag">{v}</Pill>)}
          </div>
        </div>
        <div className="lv2-vert-card">
          <div className="lv2-vert-tag">{t.arabicTag}</div>
          <div className="lv2-arabic-points">
            {t.arabicPoints.map((p, i) => (
              <div key={i} className="lv2-arabic-point">
                <span className="lv2-arabic-arrow">→</span>
                <div>
                  <div className="lv2-arabic-point-title">{p.title}</div>
                  <p className="lv2-arabic-point-body">{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CTA ============
function CtaSection({ t }) {
  return (
    <section id="start" className="lv2-section">
      <div className="lv2-container lv2-container--cta" style={{ textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center" }}><Kicker label={t.cKick} /></div>
        <h2 className="lv2-h2 lv2-cta-title">{t.cTitle}</h2>
        <p className="lv2-body lv2-cta-body">{t.cBody}</p>
        <div className="lv2-cta-next-grid">
          {t.nextSteps.map((n, i) => (
            <div key={i} className="lv2-cta-next-card">
              <div className="lv2-cta-next-tag">{n.tag}</div>
              <div className="lv2-cta-next-text">{n.text}</div>
            </div>
          ))}
        </div>
        <div className="lv2-cta-actions">
          <Lv2Button variant="solid-orange" href={WA_LINK}>{t.cBtn}</Lv2Button>
          <Lv2Button variant="outline" href="mailto:hello@agentcitrus.com">{t.cBtn2}</Lv2Button>
        </div>
        <div className="lv2-cta-sub">{t.cSub}</div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer({ t }) {
  return (
    <footer className="lv2-footer" data-screen-label="Footer">
      <div className="lv2-container lv2-footer-inner">
        <span className="lv2-footer-brand">
          <span className="lv2-brand-mark">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M8 8l5 4-5 4" />
              <path d="M14 16h4" />
            </svg>
          </span>
          {t.brandName}
        </span>
        <span className="lv2-footer-tag">{t.footTag}</span>
      </div>
    </footer>
  );
}

// ============ APP ============
function App() {
  const SignInModal = window.SignInModal;
  const LeadModal = window.LeadModal;
  const ArchitectModal = window.ArchitectModal;
  const [lang, setLang] = useState("en");
  const [signInOpen, setSignInOpen] = useState(false);
  const [leadOpen, setLeadOpen] = useState(false);
  const [archOpen, setArchOpen] = useState(false);
  const t = window.LV2_STRINGS[lang];

  // Kept for continuity with the rest of the site's modal system — nothing
  // on this page dispatches these events today (CTAs link straight to
  // WhatsApp/email per the design), but other embeds may still fire them.
  useEffect(() => {
    const onSign = () => setSignInOpen(true);
    const onLead = () => setLeadOpen(true);
    const onArch = () => setArchOpen(true);
    window.addEventListener("citrus:open-signin", onSign);
    window.addEventListener("citrus:open-lead", onLead);
    window.addEventListener("citrus:open-architect", onArch);
    return () => {
      window.removeEventListener("citrus:open-signin", onSign);
      window.removeEventListener("citrus:open-lead", onLead);
      window.removeEventListener("citrus:open-architect", onArch);
    };
  }, []);

  return (
    <div className="lv2-root" dir={lang === "ar" ? "rtl" : "ltr"} lang={lang}>
      <Nav lang={lang} onToggleLang={setLang} t={t} />
      <Hero t={t} />
      <LiveConsole t={t} lang={lang} />
      <ChannelFlow t={t} />
      <StatementBand t={t} />
      <HowItWorks t={t} />
      <CompanyBrain t={t} />
      <NoBlackBoxes t={t} />
      <ControlAuthority t={t} />
      <VerticalsArabic t={t} />
      <CtaSection t={t} />
      <Footer t={t} />

      <SignInModal open={signInOpen} onClose={() => setSignInOpen(false)} onRequestLead={() => setLeadOpen(true)} />
      <LeadModal open={leadOpen} onClose={() => setLeadOpen(false)} />
      <ArchitectModal open={archOpen} onClose={() => setArchOpen(false)} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);