/* ===== screen-home.jsx ===== */

function HomeScreen({ locale, setRoute, heroVariant }) {
  const s = STR[locale];
  return (
    <main>
      <Hero locale={locale} setRoute={setRoute} variant={heroVariant}/>
      <TrustStrip locale={locale}/>
      <ServicesSection locale={locale} setRoute={setRoute}/>
      <ComparisonTeaser locale={locale} setRoute={setRoute}/>
      <CalculatorTeaser locale={locale} setRoute={setRoute}/>
      <ResourcesTeaser locale={locale}/>
      <PartnersStrip/>
      <ClosingCta locale={locale} setRoute={setRoute}/>
    </main>
  );
}

// ===== HERO =====
function Hero({ locale, setRoute, variant }) {
  const s = STR[locale];

  // Three hero variants: 'split' (default), 'centered', 'image'
  if (variant === "centered") {
    return (
      <section className="section" style={{ paddingTop: 70, paddingBottom: 56, position: "relative", overflow: "hidden" }}>
        <BgOrnament/>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 980, margin: "0 auto", position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{s.hero.eyebrow}</div>
          <h1 style={{ marginBottom: 24 }}>
            {s.hero.title[0]}
            <span style={{ color: "var(--accent-deep)", fontStyle: "italic", fontFamily: "Fraunces, Georgia, serif", fontWeight: 500 }}>{s.hero.title[1]}</span>
          </h1>
          <p className="muted" style={{ fontSize: 18, maxWidth: 720, margin: "0 auto 32px" }}>{s.hero.sub}</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-lg btn-accent" onClick={() => setRoute("calculator")}>{s.cta.book} <Icon name="arrow" size={16}/></button>
            <button className="btn btn-lg btn-ghost" onClick={() => setRoute("calculator")}>{s.cta.estimate}</button>
            <a className="btn btn-lg btn-wa" href={waLink()} target="_blank"><Icon name="wa" size={16}/> {s.cta.whatsapp}</a>
          </div>
          <div style={{ marginTop: 56 }}><HeroEstimatorMini locale={locale} setRoute={setRoute}/></div>
        </div>
      </section>
    );
  }

  if (variant === "image") {
    return (
      <section style={{ position: "relative", color: "#fff", minHeight: 640, display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <img src="media/dubai-01.webp" alt="Dubai skyline" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(4,31,66,.35) 0%, rgba(4,31,66,.85) 90%)" }}/>
        <div className="wrap" style={{ position: "relative", padding: "100px 32px 64px", maxWidth: 1320 }}>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,.7)", marginBottom: 16 }}>{s.hero.eyebrow}</div>
          <h1 style={{ color: "#fff", maxWidth: 880, marginBottom: 22 }}>
            {s.hero.title[0]}<span style={{ color: "var(--accent)" }}>{s.hero.title[1]}</span>
          </h1>
          <p style={{ fontSize: 18, maxWidth: 620, color: "rgba(255,255,255,.85)", marginBottom: 32 }}>{s.hero.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-lg btn-accent" onClick={() => setRoute("calculator")}>{s.cta.book} <Icon name="arrow" size={16}/></button>
            <a className="btn btn-lg" style={{ background: "rgba(255,255,255,.08)", color: "#fff", borderColor: "rgba(255,255,255,.2)" }} href={waLink()}><Icon name="wa" size={16}/> {s.cta.whatsapp}</a>
          </div>
        </div>
      </section>
    );
  }

  // SPLIT (default) — type left, layered visuals right
  return (
    <section className="section" style={{ paddingTop: 56, paddingBottom: 24, position: "relative", overflow: "hidden" }}>
      <BgOrnament/>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 72, alignItems: "center", position: "relative" }}>
        <div className="float-in">
          <div className="eyebrow" style={{ marginBottom: 16 }}>{s.hero.eyebrow}</div>
          <h1 style={{ marginBottom: 22 }}>
            {s.hero.title[0]}
            <span style={{
              backgroundImage: "linear-gradient(90deg, var(--accent-deep), var(--accent))",
              WebkitBackgroundClip: "text", backgroundClip: "text",
              color: "transparent", fontStyle: "italic",
              fontFamily: '"Fraunces", Georgia, serif', fontWeight: 500,
            }}>{s.hero.title[1]}</span>
          </h1>
          <p style={{ fontSize: 18.5, color: "var(--muted)", maxWidth: 540, marginBottom: 30 }}>{s.hero.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 28 }}>
            <button className="btn btn-lg btn-accent" onClick={() => setRoute("calculator")}>
              {s.cta.book} <Icon name="arrow" size={16}/>
            </button>
            <button className="btn btn-lg btn-ghost" onClick={() => setRoute("calculator")}>
              {s.cta.estimate}
            </button>
            <a className="btn btn-lg btn-wa" href={waLink()} target="_blank"><Icon name="wa" size={16}/> {s.cta.whatsapp}</a>
          </div>
          <div style={{ display: "flex", gap: 18, alignItems: "center", fontSize: 13, color: "var(--muted)" }}>
            <div style={{ display: "flex" }}>
              {["leader-lorenzo","leader-wael","leader-neha","leader-rebecca"].map((n,i) => (
                <img key={n} src={`media/${n}.webp`} alt=""
                  style={{ width: 30, height: 30, borderRadius: "50%", border: "2px solid #fff",
                  marginLeft: i === 0 ? 0 : -8, objectFit: "cover", boxShadow: "0 1px 2px rgba(0,0,0,.1)" }}/>
              ))}
            </div>
            <div>
              <strong style={{ color: "var(--cz-ink)" }}>30+ in-house specialists</strong> — average response under 30 minutes.
            </div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <HeroEstimatorMini locale={locale} setRoute={setRoute}/>
          <HeroAdvisorCard/>
          <HeroBadge/>
        </div>
      </div>
    </section>
  );
}

function BgOrnament() {
  return (
    <>
      <div style={{
        position: "absolute", top: -180, right: -120, width: 520, height: 520,
        background: "radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%)",
        filter: "blur(8px)", pointerEvents: "none",
      }}/>
      <div style={{
        position: "absolute", inset: 0, opacity: .35, pointerEvents: "none",
        backgroundImage: "radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--cz-ink) 12%, transparent) 1px, transparent 0)",
        backgroundSize: "32px 32px", maskImage: "radial-gradient(closest-side at 70% 30%, #000 0, transparent 75%)",
      }}/>
    </>
  );
}

// Floating mini estimator preview
function HeroEstimatorMini({ locale, setRoute }) {
  const [zone, setZone] = React.useState("dmcc");
  const [visas, setVisas] = React.useState(2);
  const ranges = window.CALC_RANGES;
  const r = ranges.estimate({ zone, activity: "trading", visas, office: "flexi" });
  return (
    <div className="card" style={{
      padding: 22, borderRadius: 18, boxShadow: "var(--sh-2)",
      position: "relative", zIndex: 2,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em" }}>
          Cost estimate
        </div>
        <span className="chip"><span className="chip-dot"></span>Indicative</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
        <div className="field">
          <label>Jurisdiction</label>
          <select value={zone} onChange={e => setZone(e.target.value)} style={{ padding: "10px 12px", fontSize: 13 }}>
            {DATA.jurisdictions.filter(j => j.group !== "Regional" && j.group !== "Offshore").map(j => (
              <option key={j.id} value={j.id}>{j.name}</option>
            ))}
          </select>
        </div>
        <div className="field">
          <label>Visas: <b style={{ color: "var(--cz-ink)" }}>{visas}</b></label>
          <input type="range" min={0} max={10} value={visas} onChange={e => setVisas(+e.target.value)} style={{ accentColor: "var(--accent)" }}/>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", padding: "16px 16px 14px",
                    background: "var(--paper-2)", borderRadius: 12, marginBottom: 12 }}>
        <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em" }}>Indicative range</div>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 22, fontWeight: 600, color: "var(--cz-ink)", letterSpacing: "-0.01em" }}>
          AED {r.low.toLocaleString()} – {r.high.toLocaleString()}
        </div>
      </div>
      <button className="btn btn-accent" style={{ width: "100%", justifyContent: "center" }} onClick={() => setRoute("calculator")}>
        Get my detailed estimate <Icon name="arrow" size={14}/>
      </button>
      <div style={{ fontSize: 11, color: "var(--muted-2)", marginTop: 10, textAlign: "center" }}>
        {STR[locale].indicative}
      </div>
    </div>
  );
}

function HeroAdvisorCard() {
  return (
    <div className="card" style={{
      position: "absolute", left: -28, bottom: -42, width: 240,
      padding: 14, borderRadius: 16, display: "flex", gap: 12, alignItems: "center",
      boxShadow: "var(--sh-3)", zIndex: 3, background: "#fff",
    }}>
      <img src="media/leader-lorenzo.webp" alt="" style={{ width: 50, height: 50, borderRadius: "50%", objectFit: "cover" }}/>
      <div>
        <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em" }}>Your advisor</div>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Lorenzo J.</div>
        <div style={{ fontSize: 12, color: "var(--accent-deep)" }}>● Online · replies ~5 min</div>
      </div>
    </div>
  );
}

function HeroBadge() {
  return (
    <div style={{
      position: "absolute", top: -16, right: -24,
      background: "var(--cz-ink)", color: "#fff",
      padding: "10px 14px", borderRadius: 999, fontSize: 12, fontWeight: 500,
      display: "flex", gap: 8, alignItems: "center", boxShadow: "var(--sh-2)", zIndex: 3,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}/>
      DIFC Registered CSP
    </div>
  );
}

// ===== TRUST STRIP =====
function TrustStrip({ locale }) {
  const items = STR[locale].trust;
  return (
    <section style={{ padding: "44px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--paper-2)" }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", gap: 32, alignItems: "center", flexWrap: "wrap" }}>
        {items.map((t, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 14, color: "var(--cz-ink)", fontWeight: 500 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--accent)", transform: "rotate(45deg)" }}/>
            {t}
          </div>
        ))}
      </div>
    </section>
  );
}

// ===== SERVICES JOURNEY CARDS =====
function ServicesSection({ locale, setRoute }) {
  return (
    <section className="section" id="services-anchor">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, marginBottom: 48, alignItems: "end" }}>
          <SectionHead
            eyebrow="What we do"
            title="One advisor for every step — from licence to lease."
            sub="End-to-end company formation plus an extended suite of services for after the licence: banking, tax, visas, HR, legal and a Dubai business hub."
          />
          <button className="btn btn-ghost" onClick={() => setRoute("services")}>
            All 12 services <Icon name="arrow" size={14}/>
          </button>
        </div>
        <div className="grid g-4">
          {DATA.services.slice(0, 8).map((sv, i) => (
            <button key={sv.id} className="card card-hover" onClick={() => setRoute("services")}
              style={{ textAlign: "left", background: "#fff", cursor: "pointer", display: "flex",
                flexDirection: "column", gap: 14, minHeight: 200 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                display: "flex", alignItems: "center", justifyContent: "center",
                background: i === 0 ? "var(--cz-ink)" : "var(--accent-tint)",
                color: i === 0 ? "var(--accent)" : "var(--accent-deep)",
              }}>
                <Icon name={sv.icon} size={22}/>
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 4 }}>{locale === "ar" ? sv.labelAr : sv.label}</div>
                <div style={{ fontSize: 13.5, color: "var(--muted)", lineHeight: 1.55 }}>{locale === "ar" ? sv.blurbAr : sv.blurb}</div>
              </div>
              <div style={{ marginTop: "auto", fontSize: 13, fontWeight: 500, color: "var(--accent-deep)", display: "flex", alignItems: "center", gap: 6 }}>
                How it works <Icon name="chevron" size={12}/>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== JURISDICTION COMPARISON TEASER =====
function ComparisonTeaser({ locale, setRoute }) {
  const rows = [
    { label: "Ownership", mainland: "100% foreign (most activities)", free: "100% foreign", offshore: "100% foreign" },
    { label: "Trade scope", mainland: "Anywhere in the UAE + abroad", free: "Within the zone + abroad", offshore: "Outside the UAE only" },
    { label: "Office requirement", mainland: "Physical office (Ejari)", free: "Flexi-desk to private office", offshore: "Registered agent address" },
    { label: "Visa eligibility", mainland: "Tied to office size", free: "Tied to package & space", offshore: "Generally none" },
    { label: "Setup speed", mainland: "2–4 weeks", free: "5–10 working days", offshore: "3–7 working days" },
  ];
  const cols = ["mainland", "free", "offshore"];
  const heads = ["Mainland", "Free Zone", "Offshore"];

  return (
    <section className="section section-tint">
      <div className="wrap">
        <SectionHead
          eyebrow="Where to set up"
          title="Mainland, free zone, or offshore — at a glance."
          sub="A qualitative comparison across the three jurisdiction families. We never quote government fees here — they change. The cost calculator gives an indicative range; an advisor confirms."
        />
        <div className="card" style={{ padding: 0, overflow: "hidden", background: "#fff" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", borderBottom: "1px solid var(--line)" }}>
            <div style={{ padding: "22px 28px", fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em" }}>Property</div>
            {heads.map((h, i) => (
              <div key={h} style={{
                padding: "22px 28px",
                borderLeft: "1px solid var(--line)",
                background: i === 1 ? "var(--cz-ink)" : "transparent",
                color: i === 1 ? "#fff" : "var(--cz-ink)",
              }}>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18 }}>{h}</div>
                <div style={{ fontSize: 12, color: i === 1 ? "rgba(255,255,255,.6)" : "var(--muted)", marginTop: 4 }}>
                  {i === 0 ? "Trade across the UAE" : i === 1 ? "Most flexible, fastest" : "International holding"}
                </div>
              </div>
            ))}
          </div>
          {rows.map((r, ri) => (
            <div key={r.label} style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", borderTop: ri === 0 ? "0" : "1px solid var(--line)" }}>
              <div style={{ padding: "20px 28px", fontWeight: 500, fontSize: 14 }}>{r.label}</div>
              {cols.map((c, i) => (
                <div key={c} style={{
                  padding: "20px 28px", fontSize: 14, color: "var(--cz-ink)",
                  borderLeft: "1px solid var(--line)",
                  background: i === 1 ? "color-mix(in srgb, var(--accent-tint) 50%, transparent)" : "transparent",
                }}>{r[c]}</div>
              ))}
            </div>
          ))}
          <div style={{ padding: "22px 28px", display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--line)" }}>
            <div style={{ fontSize: 13, color: "var(--muted)" }}>{STR[locale].indicative}</div>
            <button className="btn btn-primary btn-sm" onClick={() => setRoute("jurisdictions")}>
              Compare all 25+ jurisdictions <Icon name="arrow" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== CALCULATOR TEASER =====
function CalculatorTeaser({ locale, setRoute }) {
  return (
    <section className="section section-ink">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ color: "var(--accent)" }}>Cost calculator</div>
          <h2 style={{ color: "#fff", marginTop: 12, marginBottom: 18 }}>
            Get an indicative cost in <span style={{ color: "var(--accent)" }}>under 2 minutes.</span>
          </h2>
          <p style={{ color: "#B7C3D6", fontSize: 17, maxWidth: 480, marginBottom: 28 }}>
            Pick your jurisdiction, activity, visas and office type. We'll show an indicative range — then put you on a free call with an advisor who'll confirm the exact number.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 28 }}>
            <button className="btn btn-lg btn-accent" onClick={() => setRoute("calculator")}>
              Start the calculator <Icon name="arrow" size={16}/>
            </button>
            <a className="btn btn-lg" style={{ background: "rgba(255,255,255,.08)", color: "#fff", borderColor: "rgba(255,255,255,.15)" }} href={waLink("I'd like to discuss setup costs")}>
              <Icon name="wa" size={16}/> Talk on WhatsApp
            </a>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, color: "#B7C3D6", fontSize: 13.5, display: "flex", flexDirection: "column", gap: 10 }}>
            {["Indicative ranges only — never a fixed price",
              "Covers 25+ mainland / free-zone / offshore options",
              "Lead capture optional — chat first, register later"].map(x => (
              <li key={x} style={{ display: "flex", gap: 10 }}>
                <span style={{ color: "var(--accent)" }}><Icon name="check" size={16}/></span>{x}
              </li>
            ))}
          </ul>
        </div>
        <div className="card" style={{ background: "#0A2447", borderColor: "rgba(255,255,255,.08)", padding: 26 }}>
          <CalcStepsPreview/>
        </div>
      </div>
    </section>
  );
}

function CalcStepsPreview() {
  const steps = [
    { n: "01", label: "Jurisdiction", val: "DMCC · Free Zone" },
    { n: "02", label: "Activity", val: "Trading — general" },
    { n: "03", label: "Visas", val: "2 employees + 1 partner" },
    { n: "04", label: "Office", val: "Flexi-desk · co-working" },
  ];
  return (
    <div>
      {steps.map((s, i) => (
        <div key={s.n} style={{
          display: "flex", alignItems: "center", gap: 16,
          padding: "16px 0",
          borderBottom: i === steps.length - 1 ? "0" : "1px solid rgba(255,255,255,.08)",
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 8,
            background: i < 2 ? "var(--accent)" : "rgba(255,255,255,.06)",
            color: i < 2 ? "#fff" : "var(--accent)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--f-mono)", fontSize: 12, fontWeight: 600,
          }}>{i < 2 ? <Icon name="check" size={14}/> : s.n}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: "rgba(255,255,255,.5)", textTransform: "uppercase", letterSpacing: ".1em" }}>{s.label}</div>
            <div style={{ color: "#fff", fontWeight: 500, fontSize: 15 }}>{s.val}</div>
          </div>
        </div>
      ))}
      <div style={{ marginTop: 22, padding: 18, borderRadius: 12, background: "rgba(28,176,149,.12)", border: "1px solid rgba(28,176,149,.25)" }}>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.6)", textTransform: "uppercase", letterSpacing: ".1em" }}>Indicative range</div>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 28, fontWeight: 600, color: "#fff", marginTop: 4 }}>
          AED 22,500 – 34,800
        </div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", marginTop: 6 }}>Government fees can change — confirm with an advisor.</div>
      </div>
    </div>
  );
}

// ===== RESOURCES TEASER =====
function ResourcesTeaser({ locale }) {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, marginBottom: 48, alignItems: "end" }}>
          <SectionHead eyebrow="Resources" title="Authority guides, not blog filler."
            sub="Real, structured guides written by our advisors — covering jurisdictions, licence types and operating questions you'll actually hit."/>
          <button className="btn btn-ghost">All guides <Icon name="arrow" size={14}/></button>
        </div>
        <div className="grid g-2">
          {DATA.guides.map((g, i) => (
            <a key={g.title} href="#" className="card card-hover" style={{
              padding: 0, overflow: "hidden", background: "#fff", display: "flex", flexDirection: "column", gridColumn: i === 0 ? "span 1" : "auto",
            }}>
              <div style={{ aspectRatio: "16 / 9", position: "relative", overflow: "hidden" }}>
                <img src={g.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 60%, rgba(4,31,66,.6))" }}/>
              </div>
              <div style={{ padding: 22 }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>{g.tag}</div>
                <h3 style={{ fontSize: 19, lineHeight: 1.3, color: "var(--cz-ink)" }}>{g.title}</h3>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 16, color: "var(--accent-deep)", fontSize: 13, fontWeight: 500 }}>
                  Read guide <Icon name="arrow" size={12}/>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== PARTNERS =====
function PartnersStrip() {
  return (
    <section style={{ padding: "60px 0", background: "var(--paper-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap" style={{ textAlign: "center" }}>
        <div style={{ fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".14em", marginBottom: 28 }}>
          Free-zone partners we work with every day
        </div>
        <div style={{ display: "flex", gap: 64, justifyContent: "center", alignItems: "center", flexWrap: "wrap", filter: "grayscale(.6)", opacity: .75 }}>
          <img src="media/partner-meydan.svg" alt="Meydan" style={{ height: 28 }}/>
          <img src="media/partner-dubai-economy.svg" alt="Dubai Economy" style={{ height: 38 }}/>
          <img src="media/partner-fcc.svg" alt="Fujairah Creative City" style={{ height: 36 }}/>
          {["DMCC", "DIFC", "JAFZA", "ADGM", "RAKEZ"].map(n => (
            <div key={n} style={{ fontFamily: "var(--f-display)", fontWeight: 700, letterSpacing: "0.04em", color: "var(--cz-ink)", fontSize: 18 }}>{n}</div>
          ))}
        </div>
        <div style={{ fontSize: 11, color: "var(--muted-2)", marginTop: 24, fontFamily: "var(--f-mono)" }}>
          ⓘ Partner logos shown subject to confirmed usage rights — design pitch placeholder.
        </div>
      </div>
    </section>
  );
}

// ===== CLOSING CTA =====
function ClosingCta({ locale, setRoute }) {
  const s = STR[locale];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{
          padding: "64px 56px",
          background: "linear-gradient(135deg, var(--cz-ink), var(--cz-ink-2) 60%, #0B3370)",
          borderRadius: 24, color: "#fff",
          display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center",
          position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", right: -60, top: -60, width: 320, height: 320, borderRadius: "50%",
            background: "radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%)",
          }}/>
          <div style={{ position: "relative" }}>
            <h2 style={{ color: "#fff", maxWidth: 580, marginBottom: 16 }}>Ready to set up? Talk to an advisor today — on us.</h2>
            <p style={{ color: "rgba(255,255,255,.78)", maxWidth: 520, fontSize: 17 }}>
              Free 30-minute consultation. Pick a jurisdiction, get a clear indicative cost, and a single point of contact for everything that follows.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
            <button className="btn btn-lg btn-accent" onClick={() => setRoute("calculator")} style={{ justifyContent: "center" }}>
              {s.cta.book} <Icon name="arrow" size={16}/>
            </button>
            <a className="btn btn-lg btn-wa" href={waLink()} style={{ justifyContent: "center" }}>
              <Icon name="wa" size={16}/> {s.cta.whatsapp} · +971 55 203 7894
            </a>
            <a className="btn btn-lg" style={{ justifyContent: "center", background: "rgba(255,255,255,.06)", color: "#fff", borderColor: "rgba(255,255,255,.15)" }} href="tel:+97145677333">
              <Icon name="phone" size={16}/> {s.cta.call} · +971 4 567 7333
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeScreen });