/* eslint-disable no-undef */
/* ──────────────────────────────────────────────────────────────────────
   Pages part 1: Home, Services hub, Single Service detail.
   ────────────────────────────────────────────────────────────────────── */

const { Ic: I, services: SERVICES, jurisdictions: JURIS, freeZones: FZ, T: COPY, trust: TRUST, guides: GUIDES, team: TEAM } = window.VZ_DATA;
const { useState: uS, useEffect: uE } = React;

/* ====================================================================
   HOME
   ==================================================================== */
function HomePage({ locale, nav, openConsult }) {
  const t = COPY[locale] || COPY.en;
  return (
    <main>
      <HomeHero t={t} openConsult={openConsult} nav={nav} />
      <TrustStripBand />
      <HomeServices t={t} nav={nav} openConsult={openConsult} />
      <HomeJourney t={t} />
      <HomeJurisdictions t={t} nav={nav} />
      <HomeEstimatorTeaser t={t} nav={nav} />
      <HomeWhy t={t} />
      <HomeResources t={t} nav={nav} />
      <HomeContactCTA t={t} openConsult={openConsult} />
    </main>
  );
}
window.HomePage = HomePage;


/* ── Hero — editorial split: 7/5 with real photo, ink type ───────────── */
function HomeHero({ t, openConsult, nav }) {
  return (
    <section style={{ background: "var(--paper)", paddingTop: 56, paddingBottom: 0, overflow: "hidden" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)", gap: 60, alignItems: "end" }}>
        {/* Left: type */}
        <div style={{ paddingBottom: 80 }}>
          <span className="eyebrow">{t.hero.eyebrow}</span>

          <h1 className="display" style={{ margin: "26px 0 0", color: "var(--ink)" }}>
            Business setup in <em style={{ fontStyle: "normal", display: "inline-block", position: "relative" }}>
              the UAE,
              <svg viewBox="0 0 240 14" preserveAspectRatio="none" style={{ position: "absolute", left: 0, right: 0, bottom: -8, width: "100%", height: 14 }}>
                <path d="M2 9 Q60 1 120 7 T238 5" stroke="url(#g1)" strokeWidth="3.5" fill="none" strokeLinecap="round" />
                <defs>
                  <linearGradient id="g1" x1="0" x2="1">
                    <stop offset="0%" stopColor="#FE294D"/><stop offset="100%" stopColor="#FD6611"/>
                  </linearGradient>
                </defs>
              </svg>
            </em><br/>made simple.
          </h1>

          <p className="body-lg" style={{ marginTop: 26, maxWidth: 520 }}>
            Mainland, free zone, offshore — formation, visas, banking, accounting, and compliance handled by one team. Your #1 partner since 2009.
          </p>

          <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={openConsult}>
              {t.cta.consult} <span className="arr">{I.arrow()}</span>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => nav("calculator")}>
              {t.cta.estimate}
            </button>
          </div>

          <div style={{ marginTop: 36, display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
            <span className="caps" style={{ color: "var(--steel)" }}>Trusted by</span>
            <span className="body-sm" style={{ color: "var(--ink)" }}>founders from 180+ countries</span>
            <span style={{ width: 1, height: 14, background: "var(--line-2)" }} />
            <span className="body-sm">Acquired by Ascentium · Jan 2025</span>
          </div>
          <div className="mono" style={{ color: "var(--steel-2)", marginTop: 8 }}>
            * Country & founder counts self-reported by Virtuzone.
          </div>
        </div>

        {/* Right: photography column */}
        <div style={{ position: "relative", height: 620, minHeight: 480 }}>
          <div style={{
            position: "absolute", inset: 0,
            borderRadius: "0 0 0 var(--r-xl)",
            overflow: "hidden",
            backgroundImage: "url(media/team-office-04.webp)",
            backgroundSize: "cover", backgroundPosition: "center",
          }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(11,18,32,0.55) 100%)" }} />
          </div>

          {/* floating card 1 */}
          <div style={{
            position: "absolute", right: -28, top: 70,
            background: "white", borderRadius: 14, padding: 18,
            width: 230, boxShadow: "0 24px 50px -22px rgba(0,0,0,0.35)",
            border: "1px solid var(--line)",
          }}>
            <div className="caps" style={{ color: "var(--vz-red)" }}>Service journey</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 660, letterSpacing: "-0.01em", marginTop: 4 }}>
              License → Visa → Bank → Live
            </div>
            <div className="mono" style={{ color: "var(--steel)", marginTop: 10 }}>One handover, one timeline.</div>
          </div>

          {/* floating card 2 */}
          <div style={{
            position: "absolute", left: -28, bottom: 50,
            background: "var(--ink)", color: "white",
            borderRadius: 14, padding: 18,
            width: 240, boxShadow: "0 24px 50px -22px rgba(0,0,0,0.45)",
          }}>
            <div className="caps" style={{ color: "rgba(255,255,255,0.6)" }}>Indicative</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 4 }}>
              From <span className="tnum">AED 12,500</span>
            </div>
            <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.6)", marginTop: 8 }}>
              Range only — Govt. & free-zone fees change. Confirmed on consultation.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


/* ── Trust strip ─────────────────────────────────────────────────────── */
function TrustStripBand() {
  return (
    <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--mist)", padding: "40px 0" }}>
      <div className="wrap trust-strip">
        {TRUST.map((tr, i) => (
          <div key={i} className="trust-item">
            <div className="trust-num tnum">{tr.num}</div>
            <div className="trust-lab">{tr.lab}</div>
            {tr.attr && <div className="trust-attr">{tr.attr}</div>}
          </div>
        ))}
        <div className="trust-item" style={{ minWidth: 220 }}>
          <div className="caps" style={{ color: "var(--steel)" }}>Group</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 660, letterSpacing: "-0.01em" }}>Part of Ascentium</div>
          <div className="trust-attr">Singapore-headquartered group · Hillhouse-backed</div>
        </div>
      </div>
    </section>
  );
}


/* ── Services grid ───────────────────────────────────────────────────── */
function HomeServices({ t, nav, openConsult }) {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow">{t.sections.services.eyebrow}</span>
            <h2 className="h1" style={{ margin: "18px 0 0" }}>{t.sections.services.title}</h2>
          </div>
          <button className="ulink" onClick={() => nav("services")}>
            View all services {I.arrow()}
          </button>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
          {SERVICES.slice(0, 8).map((s, i) => (
            <ServiceCard key={s.id} s={s} idx={i} onClick={() => nav("service:" + s.id)} />
          ))}
        </div>
      </div>
    </section>
  );
}


function ServiceCard({ s, idx, onClick }) {
  const big = idx === 0;
  return (
    <button className="card card-hover" onClick={onClick}
      style={{
        gridColumn: big ? "span 2" : "auto",
        gridRow:    big ? "span 2" : "auto",
        textAlign: "start",
        background: big ? "var(--ink)" : "white",
        color: big ? "white" : "var(--ink)",
        borderColor: big ? "var(--ink)" : undefined,
        padding: 0, overflow: "hidden",
      }}>
      <div style={{
        height: big ? 280 : 150,
        backgroundImage: `url(${s.photo})`, backgroundSize: "cover", backgroundPosition: "center",
        position: "relative",
      }}>
        <div style={{ position: "absolute", inset: 0, background: big ? "linear-gradient(180deg, rgba(11,18,32,0) 30%, rgba(11,18,32,0.55) 100%)" : "linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%)" }} />
        <span className="chip chip-red" style={{ position: "absolute", top: 14, left: 14 }}>{s.tag}</span>
      </div>
      <div style={{ padding: big ? "26px 28px 28px" : "20px 22px 22px" }}>
        <h3 className="h3" style={{ margin: 0, fontSize: big ? 28 : 19, color: big ? "white" : "var(--ink)" }}>{s.name}</h3>
        <p className="body" style={{ marginTop: 10, color: big ? "rgba(255,255,255,0.78)" : "var(--steel)", fontSize: big ? 16 : 14.5 }}>{s.one}</p>
        <div style={{ marginTop: big ? 22 : 16, display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 540, fontSize: 14, color: big ? "white" : "var(--ink)" }}>
          Start your journey <span className="arr">{I.arrow()}</span>
        </div>
      </div>
    </button>
  );
}


/* ── Journey strip (rail) ────────────────────────────────────────────── */
function HomeJourney({ t }) {
  const steps = [
    { n: "01", k: "Discover",  one: "Free 30-min consultation. Activity, structure, jurisdiction shortlist." },
    { n: "02", k: "Shortlist", one: "Indicative quote + comparison: free zone vs mainland vs offshore." },
    { n: "03", k: "Form",      one: "License application, MOA, initial approval, lease, notarisation." },
    { n: "04", k: "Visa",      one: "Investor visa, Emirates ID, medical, status changes — handled by PRO." },
    { n: "05", k: "Bank",      one: "KYC pack, bank shortlist, interviews, source-of-funds dossier." },
    { n: "06", k: "Operate",   one: "Accounting, tax, compliance, IT, insurance, ongoing PRO." },
  ];
  return (
    <section className="section" style={{ background: "var(--ink)", color: "white" }}>
      <div className="wrap">
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>The journey</span>
            <h2 className="h1" style={{ margin: "18px 0 0", color: "white" }}>License to live UAE entity, in six steps.</h2>
          </div>
          <p className="body-lg" style={{ color: "rgba(255,255,255,0.7)", maxWidth: 360, margin: 0 }}>
            Each stage is owned by a dedicated specialist — formation, PRO, banking, finance — so handovers don't drop.
          </p>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, border: "1px solid rgba(255,255,255,0.1)", borderRadius: 18, overflow: "hidden" }}>
          {steps.map((s, i) => (
            <div key={i} style={{ padding: 22, borderRight: i < 5 ? "1px solid rgba(255,255,255,0.1)" : "none", minHeight: 200 }}>
              <div className="mono" style={{ color: "var(--vz-red)" }}>{s.n}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 660, letterSpacing: "-0.01em", marginTop: 6 }}>{s.k}</div>
              <p style={{ marginTop: 12, color: "rgba(255,255,255,0.65)", fontSize: 13.5, lineHeight: 1.5 }}>{s.one}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


/* ── Jurisdictions teaser ────────────────────────────────────────────── */
function HomeJurisdictions({ t, nav }) {
  return (
    <section className="section">
      <div className="wrap">
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow">{t.sections.jurisdictions.eyebrow}</span>
            <h2 className="h1" style={{ margin: "18px 0 12px" }}>{t.sections.jurisdictions.title}</h2>
            <p className="body-lg">{t.sections.jurisdictions.sub}</p>
          </div>
          <button className="ulink" onClick={() => nav("jurisdictions")}>
            See the comparison {I.arrow()}
          </button>
        </header>

        <JurisdictionTable compact />
      </div>
    </section>
  );
}

/* Comparison table — used in Home + Jurisdictions page */
function JurisdictionTable({ compact = false }) {
  const rows = [
    { k: "Ownership",          rd: "ownership" },
    { k: "Visa eligibility",   rd: "visas" },
    { k: "Market access",      rd: "market" },
    { k: "Audit",              rd: "audit" },
    { k: "Best for",           rd: "best" },
  ];

  return (
    <div className="card" style={{ overflow: "hidden" }}>
      {/* head */}
      <div style={{ display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ padding: "22px 24px", background: "var(--mist)" }}>
          <span className="caps" style={{ color: "var(--steel)" }}>Compare paths</span>
        </div>
        {JURIS.map((j, i) => (
          <div key={j.id} style={{
            padding: "22px 24px",
            borderInlineStart: "1px solid var(--line)",
            background: i === 1 ? "var(--ink)" : "white", color: i === 1 ? "white" : "var(--ink)",
          }}>
            <div className="caps" style={{ color: i === 1 ? "rgba(255,255,255,0.65)" : "var(--steel)" }}>{i === 1 ? "Recommended starting point" : "Path " + (i + 1)}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.02em", fontWeight: 700, marginTop: 6 }}>{j.name}</div>
            {!compact && <p style={{ fontSize: 13.5, marginTop: 8, color: i === 1 ? "rgba(255,255,255,0.7)" : "var(--steel)" }}>{j.summary}</p>}
          </div>
        ))}
      </div>

      {/* rows */}
      {rows.map((r, ri) => (
        <div key={r.k} style={{
          display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)",
          borderBottom: ri < rows.length - 1 ? "1px solid var(--line)" : "none",
        }}>
          <div style={{ padding: "18px 24px", background: "var(--mist)", display: "flex", alignItems: "center" }}>
            <span className="caps" style={{ color: "var(--steel)" }}>{r.k}</span>
          </div>
          {JURIS.map((j) => (
            <div key={j.id + r.k} style={{ padding: "18px 24px", borderInlineStart: "1px solid var(--line)", fontSize: 14.5, lineHeight: 1.5 }}>
              {j[r.rd]}
            </div>
          ))}
        </div>
      ))}

      {/* footnote */}
      <div style={{ padding: "16px 24px", background: "var(--mist)", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <div className="mono" style={{ color: "var(--steel)" }}>
          Indicative comparison. Final eligibility, audit, and visa terms depend on activity & zone.
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {FZ.slice(0, 5).map((f) => (
            <span key={f.id} className="chip">{f.name}</span>
          ))}
          <span className="chip" style={{ background: "white" }}>+ more</span>
        </div>
      </div>
    </div>
  );
}
window.JurisdictionTable = JurisdictionTable;


/* ── Estimator teaser ────────────────────────────────────────────────── */
function HomeEstimatorTeaser({ t, nav }) {
  return (
    <section className="section" style={{ background: "var(--mist)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
        <div>
          <span className="eyebrow">{t.sections.calculator.eyebrow}</span>
          <h2 className="h1" style={{ margin: "18px 0 14px" }}>{t.sections.calculator.title}</h2>
          <p className="body-lg" style={{ marginBottom: 28 }}>{t.sections.calculator.sub}</p>
          <button className="btn btn-primary btn-lg" onClick={() => nav("calculator")}>
            Open the estimator <span className="arr">{I.arrow()}</span>
          </button>
          <div style={{ marginTop: 18, display: "flex", gap: 16, alignItems: "center", color: "var(--steel)", fontSize: 13 }}>
            {I.check()} Takes 60 seconds &nbsp;·&nbsp; {I.check()} No commitment &nbsp;·&nbsp; {I.check()} CRM-ready
          </div>
        </div>

        {/* faux estimator card */}
        <div className="card" style={{ padding: 28 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="pill"><span className="dot" />Indicative range</span>
            <span className="mono" style={{ color: "var(--steel)" }}>60s estimator</span>
          </div>

          <div style={{ marginTop: 22 }}>
            <div className="caps" style={{ color: "var(--steel)" }}>Free zone · Trading · 2 visas · Flexi-desk</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 56, letterSpacing: "-0.04em", lineHeight: 1, fontWeight: 700, marginTop: 10 }}>
              <span className="tnum">AED 23,400</span>
              <span style={{ color: "var(--steel-2)", fontSize: 26, fontWeight: 600, margin: "0 8px" }}>—</span>
              <span className="tnum">AED 31,800</span>
            </div>
            <div className="mono" style={{ color: "var(--steel)", marginTop: 8 }}>≈ USD 6,370 – 8,660 · year-one all-in</div>
          </div>

          <hr className="divider" style={{ margin: "24px 0" }} />

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {[
              ["License",      "AED 11–13.5k"],
              ["Visa & PRO",   "AED 6.5–9k"],
              ["Lease (flexi)", "AED 5.9–9.3k"],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="caps" style={{ color: "var(--steel)" }}>{k}</div>
                <div className="tnum" style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 22, padding: 14, background: "var(--mist)", borderRadius: 12, fontSize: 12.5, color: "var(--steel)" }}>
            <strong style={{ color: "var(--ink)" }}>Indicative only.</strong> Government & free-zone fees change. Final figure confirmed on consultation.
          </div>
        </div>
      </div>
    </section>
  );
}


/* ── "Why Virtuzone" with imagery ────────────────────────────────────── */
function HomeWhy({ t }) {
  const pts = [
    { k: "One team",          one: "Formation, visas, banking, accounting, compliance, legal — under one roof. No handovers between agencies." },
    { k: "Speed & accuracy",  one: "A dedicated PRO + corporate liaison per case. Predictable timelines, fewer back-and-forths with authorities." },
    { k: "After setup",       one: "Ongoing accounting, tax, ESR/UBO, payroll, and renewals — so you don't have to rebuild relationships annually." },
    { k: "Multilingual",      one: "English, Arabic, Russian, Chinese — natural-speaker advisors for the 180+ nationalities we serve." },
  ];
  return (
    <section className="section">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "start" }}>
        <div>
          <span className="eyebrow">Why founders pick Virtuzone</span>
          <h2 className="h1" style={{ margin: "18px 0 28px" }}>End-to-end, not "set it up and leave you."</h2>
          <div style={{ display: "grid", gap: 22 }}>
            {pts.map((p, i) => (
              <div key={i} style={{ borderTop: "1px solid var(--line)", paddingTop: 18, display: "grid", gridTemplateColumns: "60px 1fr", gap: 18 }}>
                <div className="mono" style={{ color: "var(--vz-red)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h3 className="h4" style={{ margin: 0 }}>{p.k}</h3>
                  <p className="body" style={{ marginTop: 6, color: "var(--steel)" }}>{p.one}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "240px 200px", gap: 14 }}>
          <div style={{ gridColumn: "1/-1", borderRadius: 18, backgroundImage: "url(media/team-office-07.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
          <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-09.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
          <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-08.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
        </div>
      </div>
    </section>
  );
}


/* ── Resources teaser ────────────────────────────────────────────────── */
function HomeResources({ t, nav }) {
  return (
    <section className="section" style={{ background: "var(--mist)" }}>
      <div className="wrap">
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 40 }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow">{t.sections.resources.eyebrow}</span>
            <h2 className="h1" style={{ margin: "18px 0 12px" }}>{t.sections.resources.title}</h2>
            <p className="body-lg">{t.sections.resources.sub}</p>
          </div>
          <button className="ulink" onClick={() => nav("resources")}>Browse all guides {I.arrow()}</button>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {GUIDES.slice(0, 3).map((g, i) => (
            <a key={i} href="#" className="card card-hover" style={{ padding: 26, background: "white", display: "block", textDecoration: "none" }}>
              <span className="chip">{g.kind}</span>
              <h3 className="h3" style={{ marginTop: 14, fontSize: 22 }}>{g.title}</h3>
              <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--steel)", fontSize: 13 }}>
                <span>{g.min} min read</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink)", fontWeight: 540 }}>Read {I.arrow()}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}


/* ── Closing CTA banner ──────────────────────────────────────────────── */
function HomeContactCTA({ t, openConsult }) {
  return (
    <section className="section" style={{ background: "var(--ink)", color: "white", position: "relative", overflow: "hidden" }}>
      {/* decorative diagonal gradient stripe */}
      <div style={{
        position: "absolute", right: -120, top: -120, width: 460, height: 460,
        background: "var(--vz-grad)", borderRadius: "50%", filter: "blur(80px)", opacity: 0.35,
      }} />
      <div className="wrap" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end" }}>
        <div>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>Ready when you are</span>
          <h2 className="display" style={{ color: "white", marginTop: 18, fontSize: "clamp(40px, 5.4vw, 72px)" }}>
            Your UAE company,<br/>started this week.
          </h2>
          <p className="body-lg" style={{ color: "rgba(255,255,255,0.75)", marginTop: 18, maxWidth: 540 }}>
            Free 30-min consultation with a senior advisor. We'll walk through structure, jurisdiction, and an indicative range — no commitment.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <button className="btn btn-primary btn-lg" onClick={openConsult}>{t.cta.consult} <span className="arr">{I.arrow()}</span></button>
          <a className="btn btn-whatsapp btn-lg" href="https://wa.me/97144578220" target="_blank" rel="noreferrer">{I.wa()} {t.cta.whatsapp}</a>
          <a className="btn btn-light btn-lg" href="tel:+97144578200" style={{ background: "rgba(255,255,255,0.08)", color: "white", borderColor: "rgba(255,255,255,0.16)" }}>{I.phone()} {t.cta.call}</a>
        </div>
      </div>
    </section>
  );
}


/* ====================================================================
   SERVICES HUB
   ==================================================================== */
function ServicesHubPage({ locale, nav, openConsult }) {
  const t = COPY[locale] || COPY.en;
  const tags = ["All", ...Array.from(new Set(SERVICES.map((s) => s.tag)))];
  const [activeTag, setActiveTag] = uS("All");

  const filtered = activeTag === "All" ? SERVICES : SERVICES.filter((s) => s.tag === activeTag);

  return (
    <main>
      <section style={{ padding: "80px 0 40px", background: "white", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <span className="eyebrow">{t.sections.services.eyebrow}</span>
          <h1 className="h1" style={{ margin: "20px 0 16px", maxWidth: 800 }}>End-to-end UAE corporate services, one team.</h1>
          <p className="body-lg" style={{ maxWidth: 680 }}>
            Ten service lines under one roof — so you don't stitch together five vendors. Every service ships with a dedicated specialist and a single project plan.
          </p>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32 }}>
            {tags.map((t) => (
              <button key={t}
                className={"btn " + (activeTag === t ? "btn-dark" : "btn-light") + " btn-sm"}
                onClick={() => setActiveTag(t)}>{t}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {filtered.map((s) => (
            <ServiceTile key={s.id} s={s} onClick={() => nav("service:" + s.id)} />
          ))}
        </div>
      </section>

      <HomeContactCTA t={t} openConsult={openConsult} />
    </main>
  );
}
window.ServicesHubPage = ServicesHubPage;

function ServiceTile({ s, onClick }) {
  return (
    <button onClick={onClick} className="card card-hover"
      style={{ textAlign: "start", background: "white", padding: 0, overflow: "hidden" }}>
      <div style={{
        height: 200, position: "relative",
        backgroundImage: `url(${s.photo})`, backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <span className="chip chip-red" style={{ position: "absolute", top: 14, left: 14 }}>{s.tag}</span>
      </div>
      <div style={{ padding: "22px 24px 24px" }}>
        <h3 className="h3" style={{ margin: 0, fontSize: 22 }}>{s.name}</h3>
        <p className="body" style={{ marginTop: 8, color: "var(--steel)", fontSize: 14.5 }}>{s.one}</p>
        <div style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 560, fontSize: 14 }}>
          Service detail <span className="arr">{I.arrow()}</span>
        </div>
      </div>
    </button>
  );
}


/* ====================================================================
   SERVICE DETAIL
   ==================================================================== */
function ServiceDetailPage({ id, locale, nav, openConsult }) {
  const t = COPY[locale] || COPY.en;
  const s = SERVICES.find((x) => x.id === id) || SERVICES[0];
  const others = SERVICES.filter((x) => x.id !== s.id).slice(0, 3);

  return (
    <main>
      {/* hero */}
      <section style={{ background: "var(--ink)", color: "white", paddingTop: 80, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.32, backgroundImage: `url(${s.photo})`, backgroundSize: "cover", backgroundPosition: "center" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--ink) 30%, rgba(11,18,32,0.6) 100%)" }} />
        <div className="wrap" style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, color: "rgba(255,255,255,0.7)", fontSize: 13 }}>
            <a onClick={(e)=>{e.preventDefault(); nav("services");}} href="#" style={{ color: "rgba(255,255,255,0.7)" }}>Services</a>
            <span>/</span>
            <span style={{ color: "white" }}>{s.name}</span>
          </div>
          <span className="chip chip-red" style={{ marginTop: 18 }}>{s.tag}</span>
          <h1 className="h1" style={{ color: "white", marginTop: 18, maxWidth: 800 }}>{s.name}</h1>
          <p className="body-lg" style={{ color: "rgba(255,255,255,0.78)", maxWidth: 700, marginTop: 14 }}>{s.one}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={openConsult}>{t.cta.consult} <span className="arr">{I.arrow()}</span></button>
            <button className="btn btn-light btn-lg" onClick={() => nav("calculator")} style={{ background: "rgba(255,255,255,0.08)", color: "white", borderColor: "rgba(255,255,255,0.18)" }}>{t.cta.estimate}</button>
          </div>
        </div>
      </section>

      {/* body */}
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64 }}>
          <div>
            <h2 className="h2">What's included</h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 24 }}>
              {s.includes.map((it, i) => (
                <div key={i} style={{ borderTop: "1px solid var(--line)", paddingTop: 14, display: "flex", alignItems: "start", gap: 10 }}>
                  <span style={{ color: "var(--vz-red)", marginTop: 4 }}>{I.check()}</span>
                  <span style={{ fontWeight: 540 }}>{it}</span>
                </div>
              ))}
            </div>

            <h2 className="h2" style={{ marginTop: 56 }}>How it works</h2>
            <ol style={{ paddingInlineStart: 0, listStyle: "none", marginTop: 24 }}>
              {["Discovery & shortlist","Documentation & approvals","Submission & follow-through","Hand-off, plus ongoing support"].map((step, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr", borderTop: "1px solid var(--line)", padding: "18px 0" }}>
                  <span className="mono" style={{ color: "var(--vz-red)" }}>{String(i+1).padStart(2,"0")}</span>
                  <span style={{ fontWeight: 540 }}>{step}</span>
                </li>
              ))}
            </ol>
          </div>

          {/* sticky aside */}
          <aside style={{ alignSelf: "start", position: "sticky", top: 100 }}>
            <div className="card" style={{ padding: 28, background: "var(--mist)" }}>
              <span className="pill"><span className="dot" />Free consultation</span>
              <h3 className="h3" style={{ marginTop: 14 }}>Indicative range for {s.name.toLowerCase()}</h3>
              <p className="body-sm" style={{ marginTop: 8 }}>Pricing depends on activity, jurisdiction, # of visas, and office setup. We share an indicative range live during the call.</p>

              <div style={{ marginTop: 20, display: "grid", gap: 10 }}>
                <button className="btn btn-primary" onClick={openConsult}>Book a 30-min call <span className="arr">{I.arrow()}</span></button>
                <a className="btn btn-whatsapp" href={`https://wa.me/97144578220?text=${encodeURIComponent("Hi Virtuzone, I'd like to enquire about " + s.name)}`} target="_blank" rel="noreferrer">{I.wa()} WhatsApp us</a>
                <a className="btn btn-ghost" href="tel:+97144578200">{I.phone()} Call +971 4 457 8200</a>
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* related */}
      <section className="section" style={{ background: "var(--mist)", paddingTop: 80, paddingBottom: 80 }}>
        <div className="wrap">
          <h2 className="h2" style={{ marginBottom: 32 }}>Often paired with</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
            {others.map((o) => <ServiceTile key={o.id} s={o} onClick={() => nav("service:" + o.id)} />)}
          </div>
        </div>
      </section>
    </main>
  );
}
window.ServiceDetailPage = ServiceDetailPage;
