/* eslint-disable no-undef */
/* ──────────────────────────────────────────────────────────────────────
   Pages part 2: Jurisdictions, Calculator, GoldenVisa, Resources, About,
   Contact.
   ────────────────────────────────────────────────────────────────────── */

const {
  Ic: I2, services: SRV2, jurisdictions: JU2, freeZones: FZ2,
  T: T2, trust: TR2, guides: G2, team: TEAM2
} = window.VZ_DATA;
const { useState: uS2, useEffect: uE2, useMemo: uM2, useRef: uR2 } = React;


/* ====================================================================
   JURISDICTIONS PAGE
   ==================================================================== */
function JurisdictionsPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  const [active, setActive] = uS2(null);

  return (
    <main>
      <section style={{ padding: "80px 0 40px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <span className="eyebrow">{t.sections.jurisdictions.eyebrow}</span>
          <h1 className="h1" style={{ margin: "20px 0 14px", maxWidth: 820 }}>Mainland, free zone, or offshore? Side-by-side.</h1>
          <p className="body-lg" style={{ maxWidth: 720 }}>{t.sections.jurisdictions.sub}</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <window.JurisdictionTable />
        </div>
      </section>

      <section className="section" style={{ background: "var(--mist)", paddingTop: 80, paddingBottom: 80 }}>
        <div className="wrap">
          <header style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 20, marginBottom: 40 }}>
            <div>
              <span className="eyebrow">Free zones</span>
              <h2 className="h1" style={{ margin: "18px 0 0" }}>40+ free zones, sector-tuned.</h2>
            </div>
            <p className="body-lg" style={{ maxWidth: 380, margin: 0 }}>
              We work with every major UAE free zone. Below is a sample — final shortlisting depends on your activity, visa needs, and target market.
            </p>
          </header>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {FZ2.map((f) => (
              <button key={f.id} onClick={() => setActive(f)}
                className="card card-hover" style={{ padding: 22, background: "white", textAlign: "start" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="chip chip-ink">{f.name}</span>
                  <span className="mono" style={{ color: "var(--steel)" }}>{f.loc}</span>
                </div>
                <div className="h4" style={{ marginTop: 18 }}>{f.focus}</div>
                <div style={{ marginTop: 14, color: "var(--ink)", fontWeight: 540, fontSize: 13.5, display: "inline-flex", alignItems: "center", gap: 6 }}>
                  Zone detail <span className="arr">{I2.arrow()}</span>
                </div>
              </button>
            ))}
          </div>

          <div className="mono" style={{ marginTop: 24, color: "var(--steel)" }}>
            * Indicative roster. Authority logos & partner status confirmed before publication.
          </div>
        </div>
      </section>

      <CTABand t={t} openConsult={openConsult} nav={nav} />

      {active && (
        <div className="modal-scrim" onClick={() => setActive(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()} style={{ width: "min(640px, 100%)" }}>
            <div style={{ padding: "22px 28px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--line)" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <span className="chip chip-ink">{active.name}</span>
                <span className="caps" style={{ color: "var(--steel)" }}>{active.loc}</span>
              </div>
              <button onClick={() => setActive(null)} style={{ background: "transparent", border: "none", color: "var(--steel)" }}>{I2.close()}</button>
            </div>
            <div style={{ padding: 28 }}>
              <h3 className="h2">{active.name} — {active.focus}</h3>
              <p className="body" style={{ marginTop: 14, color: "var(--steel)" }}>
                A focused free-zone option for {active.focus.toLowerCase()}. Indicative setup: license, lease (flexi-desk to fitted office), and a visa quota scaling with workspace.
              </p>
              <div className="mono" style={{ marginTop: 14, color: "var(--steel)" }}>Final fees set by the free-zone authority — confirmed live.</div>
              <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={() => { setActive(null); openConsult({ jurisdiction: "Free Zone" }); }}>Get an estimate for {active.name} <span className="arr">{I2.arrow()}</span></button>
                <button className="btn btn-ghost" onClick={() => setActive(null)}>Close</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}
window.JurisdictionsPage = JurisdictionsPage;


/* ====================================================================
   COST ESTIMATOR
   ==================================================================== */
function CalculatorPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  const [form, setForm] = uS2({
    jurisdiction: "Free Zone",
    activity: "Trading",
    visas: 2,
    office: "Flexi-desk",
  });
  const [contact, setContact] = uS2({ name: "", email: "", phone: "" });
  const [step, setStep] = uS2("config"); // config | reveal | save

  const range = uM2(() => {
    // Indicative ranges. NO claim that these are official.
    const base = {
      "Free Zone": [11000, 13500],
      "Mainland":  [18500, 24500],
      "Offshore":  [9500, 12500],
    }[form.jurisdiction] || [12000, 16000];

    const visa = form.jurisdiction === "Offshore"
      ? [0, 0]
      : [form.visas * 3200, form.visas * 4500];

    const office = {
      "Flexi-desk":      [5900, 9300],
      "Shared desk":     [8500, 13000],
      "Private office":  [22000, 42000],
      "Virtual office":  [3500, 6000],
    }[form.office] || [0, 0];

    const lo = base[0] + visa[0] + office[0];
    const hi = base[1] + visa[1] + office[1];
    return { lo, hi, base, visa, office };
  }, [form]);

  return (
    <main>
      <section style={{ padding: "80px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "end" }}>
          <div>
            <span className="eyebrow">{t.sections.calculator.eyebrow}</span>
            <h1 className="h1" style={{ margin: "20px 0 14px", maxWidth: 700 }}>{t.sections.calculator.title}</h1>
            <p className="body-lg" style={{ maxWidth: 600 }}>{t.sections.calculator.sub}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "end", gap: 8 }}>
            <span className="pill"><span className="dot" />Indicative ranges only</span>
            <div className="mono" style={{ color: "var(--steel)", textAlign: "end", maxWidth: 280 }}>
              Government & free-zone fees change. Final figure confirmed on a free consultation.
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 48, alignItems: "start" }}>
          {/* LEFT — configurator */}
          <div className="card" style={{ padding: 28 }}>
            <SegmentField label="Jurisdiction" value={form.jurisdiction} onChange={(v) => setForm({ ...form, jurisdiction: v })}
              options={["Free Zone", "Mainland", "Offshore"]} />
            <SegmentField label="Activity" value={form.activity} onChange={(v) => setForm({ ...form, activity: v })}
              options={["Trading", "Services / Consulting", "Tech / SaaS", "Industrial", "Holding"]} />
            <NumberField label="Number of visas" value={form.visas} setValue={(v) => setForm({ ...form, visas: v })}
              max={form.jurisdiction === "Offshore" ? 0 : 12}
              disabled={form.jurisdiction === "Offshore"} />
            <SegmentField label="Office type" value={form.office} onChange={(v) => setForm({ ...form, office: v })}
              options={["Flexi-desk", "Shared desk", "Private office", "Virtual office"]}
              disabled={form.jurisdiction === "Offshore"} />

            <div style={{ marginTop: 26, padding: 16, background: "var(--mist)", borderRadius: 12, fontSize: 12.5, color: "var(--steel)" }}>
              <strong style={{ color: "var(--ink)" }}>Heads up.</strong> Year-one all-in, before activity-specific approvals (e.g. CB licensing, food-handling, financial-services regulator fees) or third-party services (audit, insurance, translation).
            </div>
          </div>

          {/* RIGHT — output */}
          <div>
            <div className="card" style={{ padding: 32, background: "var(--ink)", color: "white", borderColor: "var(--ink)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="pill pill-dark"><span className="dot" />Indicative</span>
                <span className="mono" style={{ color: "rgba(255,255,255,0.6)" }}>Year-one all-in · AED</span>
              </div>

              <div style={{ marginTop: 22 }}>
                <div className="caps" style={{ color: "rgba(255,255,255,0.7)" }}>
                  {form.jurisdiction} · {form.activity} · {form.visas} visa{form.visas !== 1 ? "s" : ""} · {form.office}
                </div>
                <div style={{ fontFamily: "var(--font-display)", letterSpacing: "-0.035em", fontWeight: 700, marginTop: 12, lineHeight: 1, fontSize: 64 }}>
                  <span className="tnum">{range.lo.toLocaleString()}</span>
                  <span style={{ color: "rgba(255,255,255,0.4)", fontSize: 32, margin: "0 14px" }}>—</span>
                  <span className="tnum">{range.hi.toLocaleString()}</span>
                </div>
                <div className="mono" style={{ color: "rgba(255,255,255,0.6)", marginTop: 10 }}>
                  ≈ USD {Math.round(range.lo / 3.673).toLocaleString()} – {Math.round(range.hi / 3.673).toLocaleString()} · 60-second indicative range
                </div>
              </div>

              <hr style={{ margin: "26px 0", border: "none", borderTop: "1px dashed rgba(255,255,255,0.18)" }} />

              <BreakdownRow label="License & registration" lo={range.base[0]} hi={range.base[1]} />
              <BreakdownRow label="Visas (investor + employees)" lo={range.visa[0]} hi={range.visa[1]} dim={form.jurisdiction==="Offshore"} />
              <BreakdownRow label="Office / lease (year 1)" lo={range.office[0]} hi={range.office[1]} dim={form.jurisdiction==="Offshore"} />

              <div style={{ marginTop: 22, padding: 14, background: "rgba(255,255,255,0.07)", borderRadius: 10, fontSize: 12.5, color: "rgba(255,255,255,0.7)" }}>
                Indicative only. <strong style={{ color: "white" }}>Government and free-zone fees change.</strong> Final figure confirmed on consultation.
              </div>
            </div>

            <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => openConsult({ jurisdiction: form.jurisdiction, service: "Company Formation" })}>
                Send to a specialist <span className="arr">{I2.arrow()}</span>
              </button>
              <a className="btn btn-whatsapp" href={`https://wa.me/97144578220?text=${encodeURIComponent(`Hi Virtuzone, I ran the estimator: ${form.jurisdiction} / ${form.activity} / ${form.visas} visa(s) / ${form.office}.`)}`} target="_blank" rel="noreferrer">{I2.wa()} On WhatsApp</a>
              <button className="btn btn-ghost" onClick={() => setStep("save")}>Email me this estimate</button>
            </div>

            {step === "save" && (
              <div className="card" style={{ padding: 24, marginTop: 14 }}>
                <h4 className="h4">Send me this estimate</h4>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14 }}>
                  <input className="input" placeholder="Full name" value={contact.name} onChange={(e) => setContact({ ...contact, name: e.target.value })} />
                  <input className="input" placeholder="Email" value={contact.email} onChange={(e) => setContact({ ...contact, email: e.target.value })} />
                  <input className="input" style={{ gridColumn: "1/-1" }} placeholder="Phone (with country code)" value={contact.phone} onChange={(e) => setContact({ ...contact, phone: e.target.value })} />
                </div>
                <div style={{ marginTop: 14, display: "flex", gap: 10 }}>
                  <button className="btn btn-primary" disabled={!contact.name || !contact.email} onClick={() => { setStep("reveal"); }}>Send it <span className="arr">{I2.arrow()}</span></button>
                  <button className="btn btn-ghost" onClick={() => setStep("config")}>Cancel</button>
                </div>
                {step === "reveal" && <div className="mono" style={{ marginTop: 14, color: "var(--vz-red)" }}>✓ Sent. A specialist will follow up within one business day.</div>}
              </div>
            )}

            {/* Sources callout */}
            <div className="card" style={{ padding: 20, marginTop: 18, background: "var(--mist)" }}>
              <span className="caps" style={{ color: "var(--steel)" }}>What this doesn't include</span>
              <ul style={{ margin: "10px 0 0", paddingInlineStart: 18, fontSize: 14, color: "var(--ink)", lineHeight: 1.65 }}>
                <li>Activity-specific approvals (food, health, financial services regulators)</li>
                <li>Bank account opening — typically separate engagement</li>
                <li>Year-2 renewals (lower than year 1)</li>
                <li>Bookkeeping, audit, corporate tax filings</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <CTABand t={t} openConsult={openConsult} nav={nav} variant="mist" />
    </main>
  );
}
window.CalculatorPage = CalculatorPage;

function SegmentField({ label, value, onChange, options, disabled }) {
  return (
    <div style={{ marginBottom: 22, opacity: disabled ? 0.45 : 1, pointerEvents: disabled ? "none" : "auto" }}>
      <div className="caps" style={{ color: "var(--steel)", marginBottom: 10 }}>{label}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {options.map((o) => (
          <button key={o} onClick={() => onChange(o)}
            style={{
              padding: "9px 14px", borderRadius: 999,
              fontSize: 13.5, fontWeight: 540,
              border: "1px solid " + (value === o ? "var(--ink)" : "var(--line-2)"),
              background: value === o ? "var(--ink)" : "white",
              color: value === o ? "white" : "var(--ink)",
            }}>{o}</button>
        ))}
      </div>
    </div>
  );
}

function NumberField({ label, value, setValue, min = 0, max = 20, disabled }) {
  return (
    <div style={{ marginBottom: 22, opacity: disabled ? 0.45 : 1, pointerEvents: disabled ? "none" : "auto" }}>
      <div className="caps" style={{ color: "var(--steel)", marginBottom: 10 }}>{label}</div>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 14, border: "1px solid var(--line-2)", borderRadius: 999, padding: "6px 8px" }}>
        <button onClick={() => setValue(Math.max(min, value - 1))} style={{ width: 32, height: 32, borderRadius: 999, border: "none", background: "var(--mist)" }}>{I2.minus()}</button>
        <span className="tnum" style={{ fontSize: 18, fontWeight: 600, minWidth: 26, textAlign: "center" }}>{value}</span>
        <button onClick={() => setValue(Math.min(max, value + 1))} style={{ width: 32, height: 32, borderRadius: 999, border: "none", background: "var(--mist)" }}>{I2.plus()}</button>
      </div>
    </div>
  );
}

function BreakdownRow({ label, lo, hi, dim }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid rgba(255,255,255,0.08)", opacity: dim ? 0.4 : 1 }}>
      <span style={{ color: "rgba(255,255,255,0.78)", fontSize: 14 }}>{label}</span>
      <span className="tnum" style={{ fontWeight: 540 }}>
        {lo === 0 && hi === 0 ? "Included" : `AED ${lo.toLocaleString()} – ${hi.toLocaleString()}`}
      </span>
    </div>
  );
}


/* ====================================================================
   GOLDEN VISA — eligibility assessment
   ==================================================================== */
function GoldenVisaPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  const [step, setStep] = uS2(0);
  const [a, setA] = uS2({});

  const questions = [
    { id: "cat",     q: "Which best describes you?",
      opts: ["Investor (real estate or business)","Founder / entrepreneur","Skilled professional","Specialised talent / scientist","Outstanding student","Just exploring"] },
    { id: "invest",  q: "Approximate UAE investment / business interest",
      opts: ["AED 2M+ real estate","AED 2M+ business / capital","AED 500k – 2M","Under AED 500k","Not applicable"] },
    { id: "salary",  q: "If employed, monthly UAE salary",
      opts: ["AED 30,000+","AED 15,000 – 30,000","Under AED 15,000","Not employed"] },
    { id: "country", q: "Current residence",
      opts: ["UAE","GCC","Europe / UK","North America","Asia","Other"] },
    { id: "depend",  q: "Will you include dependants?",
      opts: ["Yes — spouse + children","Yes — spouse","Yes — parents too","No"] },
  ];

  const q = questions[step];
  const finished = step >= questions.length;

  // crude eligibility scoring — illustrative only
  const verdict = uM2(() => {
    if (!finished) return null;
    const c = a.cat || "";
    if (c.startsWith("Investor")) return { tier: "Strong indicator", category: "Investor pathway", note: "Real estate or business capital at AED 2M+ typically supports investor eligibility." };
    if (c.startsWith("Founder"))  return { tier: "Likely route",     category: "Entrepreneur pathway", note: "Founders with approved projects or established UAE companies often qualify." };
    if (c.startsWith("Skilled"))  return { tier: "Possible route",    category: "Skilled professional",  note: "Eligibility scales with field, salary band, and qualifications." };
    if (c.startsWith("Specialised") || c.startsWith("Outstanding"))   return { tier: "Strong indicator", category: "Specialised talent", note: "Specialised talent and outstanding student categories carry their own criteria." };
    return { tier: "Worth exploring", category: "Multiple pathways", note: "Best to walk through your situation with a specialist." };
  }, [a, finished]);

  return (
    <main>
      <section style={{ padding: "80px 0 32px", borderBottom: "1px solid var(--line)", background: "var(--paper)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <span className="eyebrow">{t.sections.goldenVisa.eyebrow}</span>
            <h1 className="h1" style={{ margin: "20px 0 12px", maxWidth: 640 }}>{t.sections.goldenVisa.title}</h1>
            <p className="body-lg" style={{ maxWidth: 580 }}>{t.sections.goldenVisa.sub}</p>
          </div>
          <div style={{ height: 280, borderRadius: 18, backgroundImage: "url(media/business-lifestyle.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
        </div>
      </section>

      <section className="section">
        <div className="wrap-sm">
          {/* progress */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 26 }}>
            <div style={{ display: "flex", gap: 6 }}>
              {questions.map((_, i) => (
                <span key={i} style={{ width: 32, height: 4, borderRadius: 999, background: i <= step ? "var(--vz-red)" : "var(--line)" }} />
              ))}
            </div>
            <span className="mono" style={{ color: "var(--steel)" }}>
              {finished ? "Assessment complete" : `Question ${step + 1} of ${questions.length}`}
            </span>
          </div>

          {!finished ? (
            <div className="card" style={{ padding: "36px 40px" }}>
              <h2 className="h2" style={{ marginTop: 0 }}>{q.q}</h2>
              <div style={{ display: "grid", gap: 10, marginTop: 22 }}>
                {q.opts.map((opt) => (
                  <button key={opt} onClick={() => { setA({ ...a, [q.id]: opt }); setTimeout(() => setStep(step + 1), 100); }}
                    style={{
                      padding: "16px 20px", textAlign: "start", borderRadius: 12,
                      border: "1px solid " + (a[q.id] === opt ? "var(--ink)" : "var(--line-2)"),
                      background: a[q.id] === opt ? "var(--ink)" : "white",
                      color: a[q.id] === opt ? "white" : "var(--ink)",
                      fontSize: 15.5, fontWeight: 540, transition: "all .12s ease",
                      cursor: "pointer",
                    }}>
                    <span style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      {opt}
                      <span style={{ opacity: a[q.id] === opt ? 1 : 0.4 }}>{I2.arrow()}</span>
                    </span>
                  </button>
                ))}
              </div>
              {step > 0 && <button className="btn btn-ghost" style={{ marginTop: 22 }} onClick={() => setStep(step - 1)}>← Back</button>}
            </div>
          ) : (
            <div className="card" style={{ padding: "44px 48px", background: "var(--ink)", color: "white", borderColor: "var(--ink)" }}>
              <span className="pill pill-dark"><span className="dot" />Indicative assessment</span>
              <h2 className="display" style={{ color: "white", fontSize: "clamp(36px, 4.8vw, 56px)", margin: "22px 0 8px" }}>{verdict.tier}.</h2>
              <p className="h4" style={{ color: "rgba(255,255,255,0.78)", fontWeight: 540 }}>{verdict.category} · 10-year residency</p>
              <p className="body-lg" style={{ color: "rgba(255,255,255,0.72)", maxWidth: 600, marginTop: 18 }}>{verdict.note}</p>

              <div className="mono" style={{ marginTop: 16, color: "rgba(255,255,255,0.55)" }}>
                Indicative only. Final eligibility is confirmed by the General Directorate of Residency & Foreigners Affairs (GDRFA).
              </div>

              <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={() => openConsult({ service: "Golden Visa", intent: "Apply for the Golden Visa" })}>
                  Talk to a Golden Visa specialist <span className="arr">{I2.arrow()}</span>
                </button>
                <button className="btn btn-light btn-lg" onClick={() => { setStep(0); setA({}); }}
                  style={{ background: "rgba(255,255,255,0.08)", color: "white", borderColor: "rgba(255,255,255,0.18)" }}>
                  Re-run the assessment
                </button>
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
window.GoldenVisaPage = GoldenVisaPage;


/* ====================================================================
   RESOURCES
   ==================================================================== */
function ResourcesPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  const kinds = ["All", ...Array.from(new Set(G2.map((g) => g.kind)))];
  const [k, setK] = uS2("All");
  const list = k === "All" ? G2 : G2.filter((g) => g.kind === k);

  return (
    <main>
      <section style={{ padding: "80px 0 40px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <span className="eyebrow">{t.sections.resources.eyebrow}</span>
          <h1 className="h1" style={{ margin: "20px 0 14px", maxWidth: 700 }}>Guides for UAE founders, written for humans.</h1>
          <p className="body-lg" style={{ maxWidth: 600 }}>Authoritative, plain-language reads on setup, tax, visas, and structuring — updated as authority rules change.</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 28 }}>
            {kinds.map((x) => (
              <button key={x} className={"btn " + (k === x ? "btn-dark" : "btn-light") + " btn-sm"} onClick={() => setK(x)}>{x}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {list.map((g, i) => (
            <a key={i} href="#" className="card card-hover" style={{ padding: 28, textDecoration: "none", display: "block" }}>
              <span className="chip">{g.kind}</span>
              <h3 className="h3" style={{ marginTop: 16, fontSize: 22 }}>{g.title}</h3>
              <p className="body-sm" style={{ marginTop: 10 }}>An authoritative read covering rules, timelines, and the practical trade-offs founders weigh.</p>
              <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 {I2.arrow()}</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <CTABand t={t} openConsult={openConsult} nav={nav} variant="mist" />
    </main>
  );
}
window.ResourcesPage = ResourcesPage;


/* ====================================================================
   ABOUT
   ==================================================================== */
function AboutPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  return (
    <main>
      <section style={{ padding: "80px 0 40px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "end" }}>
          <div>
            <span className="eyebrow">{t.sections.about.eyebrow}</span>
            <h1 className="h1" style={{ margin: "20px 0 14px" }}>{t.sections.about.title}</h1>
            <p className="body-lg" style={{ maxWidth: 640 }}>
              Founded in 2009 by <strong>Neil Petch</strong> (Chairman) and <strong>Geoff Rapp</strong> (Executive Director). Today led by Group CEO <strong>George Hojeige</strong>. Part of the Singapore-headquartered <strong>Ascentium</strong> group since January 2025.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 22 }}>
              <span className="chip">First independent UAE formation specialist</span>
              <span className="chip">Self-reported: 80,000+ entrepreneurs</span>
              <span className="chip">180+ countries served</span>
              <span className="chip">Ascentium group</span>
              <span className="chip">Etisalat e& partner</span>
            </div>
          </div>
          <div style={{ borderRadius: 18, overflow: "hidden" }}>
            <img src="media/office-reception.webp" alt="" style={{ width: "100%", height: 380, objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="wrap">
          <span className="eyebrow">A short history</span>
          <h2 className="h1" style={{ margin: "18px 0 36px" }}>16 years of UAE formation.</h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--line)" }}>
            {[
              { y: "2009", k: "Founded", one: "Neil Petch & Geoff Rapp launch Virtuzone as a UAE formation specialist." },
              { y: "2014", k: "Scaled team", one: "Multi-jurisdiction PRO desk, in-house compliance, dedicated banking liaison." },
              { y: "2019", k: "Cross-service", one: "Full corporate-services stack: tax, accounting, legal, advisory, IT, insurance." },
              { y: "2025", k: "Ascentium", one: "Acquired by Ascentium (Singapore, Hillhouse-backed). Sister brands: TaxReady.ae, Next Generation Equity, MAKTABI." },
            ].map((m, i) => (
              <div key={i} style={{ padding: "32px 26px 0 0", borderRight: i < 3 ? "1px solid var(--line)" : "none", paddingInlineEnd: i < 3 ? 26 : 0, paddingInlineStart: i > 0 ? 26 : 0 }}>
                <div className="mono" style={{ color: "var(--vz-red)" }}>{m.y}</div>
                <h3 className="h3" style={{ marginTop: 8, fontSize: 22 }}>{m.k}</h3>
                <p className="body" style={{ marginTop: 12, color: "var(--steel)", fontSize: 14.5 }}>{m.one}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Leadership */}
      <section className="section" style={{ background: "var(--mist)" }}>
        <div className="wrap">
          <span className="eyebrow">{t.sections.team.eyebrow}</span>
          <h2 className="h1" style={{ margin: "18px 0 36px" }}>{t.sections.team.title}</h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
            {TEAM2.map((p, i) => (
              <div key={i} className="card" style={{ background: "white", overflow: "hidden" }}>
                <img src={p.photo} alt={p.name} style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", display: "block", background: "var(--mist)" }} />
                <div style={{ padding: "16px 18px 20px" }}>
                  <h4 className="h4" style={{ margin: 0 }}>{p.name}</h4>
                  <div style={{ marginTop: 4, color: "var(--steel)", fontSize: 13 }}>{p.role}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="mono" style={{ marginTop: 18, color: "var(--steel)" }}>
            * Portrait images and titles to be consent-confirmed before publishing.
          </div>
        </div>
      </section>

      {/* Office gallery */}
      <section className="section">
        <div className="wrap">
          <span className="eyebrow">Inside the office</span>
          <h2 className="h1" style={{ margin: "18px 0 32px" }}>Souk Al Bahar, Burj Khalifa district.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "260px 260px", gap: 14 }}>
            <div style={{ gridRow: "1 / span 2", borderRadius: 18, backgroundImage: "url(media/team-office-03.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-06.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-08.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-01.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
            <div style={{ borderRadius: 18, backgroundImage: "url(media/team-office-09.webp)", backgroundSize: "cover", backgroundPosition: "center" }} />
          </div>
        </div>
      </section>

      <CTABand t={t} openConsult={openConsult} nav={nav} />
    </main>
  );
}
window.AboutPage = AboutPage;


/* ====================================================================
   CONTACT
   ==================================================================== */
function ContactPage({ locale, nav, openConsult }) {
  const t = T2[locale] || T2.en;
  const [sent, setSent] = uS2(false);
  const [form, setForm] = uS2({ name: "", email: "", phone: "", topic: "Company Formation", msg: "" });

  return (
    <main>
      <section style={{ padding: "80px 0 40px", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <span className="eyebrow">{t.sections.contact.eyebrow}</span>
          <h1 className="h1" style={{ margin: "20px 0 14px", maxWidth: 720 }}>{t.sections.contact.title}</h1>
          <p className="body-lg" style={{ maxWidth: 600 }}>Talk to a senior advisor — free 30-min call. We cover structure, jurisdiction, and an indicative range.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          {/* form */}
          {!sent ? (
            <form className="card" style={{ padding: 32 }} onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div style={{ display: "grid", gap: 14, gridTemplateColumns: "1fr 1fr" }}>
                <div className="field" style={{ gridColumn: "1/-1" }}><label>Full name</label><input className="input" value={form.name} onChange={(e)=>setForm({...form,name:e.target.value})} required placeholder="Sara Almenhali" /></div>
                <div className="field"><label>Email</label><input className="input" type="email" value={form.email} onChange={(e)=>setForm({...form,email:e.target.value})} required placeholder="you@email.com" /></div>
                <div className="field"><label>Phone</label><input className="input" value={form.phone} onChange={(e)=>setForm({...form,phone:e.target.value})} required placeholder="+971 50 000 0000" /></div>
                <div className="field" style={{ gridColumn: "1/-1" }}>
                  <label>What can we help with</label>
                  <select className="select" value={form.topic} onChange={(e)=>setForm({...form,topic:e.target.value})}>
                    {SRV2.map((s) => <option key={s.id}>{s.name}</option>)}
                  </select>
                </div>
                <div className="field" style={{ gridColumn: "1/-1" }}><label>Message</label><textarea className="textarea" value={form.msg} onChange={(e)=>setForm({...form,msg:e.target.value})} placeholder="A few lines on what you're building" /></div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 22 }} type="submit">Send enquiry <span className="arr">{I2.arrow()}</span></button>
              <div className="body-sm" style={{ marginTop: 14, display: "flex", gap: 8, alignItems: "center" }}>{I2.check({ stroke: "var(--vz-red)" })} CRM-ready · No spam · Reply within 1 business day.</div>
            </form>
          ) : (
            <div className="card" style={{ padding: 40 }}>
              <div style={{ width: 56, height: 56, borderRadius: 56, background: "var(--vz-grad)", color: "white", display: "grid", placeItems: "center" }}>{I2.check({ width: 22, height: 22 })}</div>
              <h3 className="h2" style={{ marginTop: 18 }}>Got it, {form.name.split(" ")[0]}.</h3>
              <p className="body-lg" style={{ marginTop: 10 }}>A specialist for <strong>{form.topic}</strong> will reach out within one business day. For anything urgent — WhatsApp is fastest.</p>
              <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
                <a className="btn btn-whatsapp" href="https://wa.me/97144578220" target="_blank" rel="noreferrer">{I2.wa()} Continue on WhatsApp</a>
                <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", topic: "Company Formation", msg: "" }); }}>New enquiry</button>
              </div>
            </div>
          )}

          {/* sidebar */}
          <aside style={{ display: "grid", gap: 22 }}>
            <div className="card" style={{ padding: 28 }}>
              <span className="caps" style={{ color: "var(--steel)" }}>Office</span>
              <h3 className="h3" style={{ marginTop: 8, fontSize: 22 }}>Souk Al Bahar, Burj Khalifa district</h3>
              <p className="body-sm" style={{ marginTop: 8 }}>{t.foot.addr}</p>
              {/* faux map */}
              <div style={{ marginTop: 18, height: 220, borderRadius: 12, position: "relative", overflow: "hidden", background: "linear-gradient(135deg, #DDE6F0 0%, #F1F4F9 100%)" }}>
                <svg viewBox="0 0 400 220" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
                  <path d="M0,160 C60,170 120,140 200,150 S360,160 400,140" stroke="white" strokeWidth="20" fill="none" opacity="0.8"/>
                  <path d="M0,80 C100,60 180,110 260,90 S380,40 400,60" stroke="white" strokeWidth="14" fill="none" opacity="0.6"/>
                  <rect x="40" y="120" width="60" height="40" fill="#C9D1DE" />
                  <rect x="160" y="140" width="50" height="50" fill="#C9D1DE" />
                  <rect x="260" y="100" width="60" height="40" fill="#C9D1DE" />
                  {/* burj khalifa silhouette */}
                  <path d="M210 200 L218 50 L222 50 L226 30 L228 28 L232 50 L240 200 Z" fill="#0B1220" opacity="0.85" />
                  <circle cx="225" cy="180" r="10" fill="var(--vz-red)" />
                  <circle cx="225" cy="180" r="20" fill="var(--vz-red)" opacity="0.18" />
                </svg>
                <div className="mono" style={{ position: "absolute", bottom: 10, left: 12, color: "var(--steel)" }}>Map preview · live map on production</div>
              </div>
            </div>

            <div className="card" style={{ padding: 28 }}>
              <span className="caps" style={{ color: "var(--steel)" }}>Direct lines</span>
              <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
                <a href="tel:+97144578200" className="btn btn-ghost" style={{ justifyContent: "start" }}>{I2.phone()} Call &nbsp;<strong>+971 4 457 8200</strong></a>
                <a href="https://wa.me/97144578220" target="_blank" rel="noreferrer" className="btn btn-whatsapp" style={{ justifyContent: "start" }}>{I2.wa()} WhatsApp &nbsp;<strong>+971 4 457 8220</strong></a>
                <div className="mono" style={{ color: "var(--steel)", padding: "4px 4px 0" }}>* WhatsApp routing on this line to be confirmed.</div>
              </div>
            </div>

            <div className="card" style={{ padding: 28, background: "var(--ink)", color: "white", borderColor: "var(--ink)" }}>
              <span className="caps" style={{ color: "rgba(255,255,255,0.6)" }}>Prefer to skip the form?</span>
              <h4 className="h4" style={{ marginTop: 6, color: "white" }}>Book a 30-min call directly.</h4>
              <button className="btn btn-primary" style={{ marginTop: 14 }} onClick={openConsult}>{t.cta.consult} <span className="arr">{I2.arrow()}</span></button>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}
window.ContactPage = ContactPage;


/* ── Shared CTA band ─────────────────────────────────────────────────── */
function CTABand({ t, openConsult, nav, variant = "ink" }) {
  const dark = variant === "ink";
  return (
    <section className="section" style={{ background: dark ? "var(--ink)" : "var(--mist)", color: dark ? "white" : "var(--ink)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <span className="eyebrow" style={{ color: dark ? "rgba(255,255,255,0.65)" : "var(--steel)" }}>Next step</span>
          <h2 className="h1" style={{ color: dark ? "white" : "var(--ink)", marginTop: 16 }}>Talk to a senior advisor — free.</h2>
          <p className="body-lg" style={{ color: dark ? "rgba(255,255,255,0.75)" : "var(--steel)", marginTop: 14, maxWidth: 540 }}>
            30-minute consultation. Structure, jurisdiction, indicative range, what to do next. 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">{I2.arrow()}</span></button>
          <a className="btn btn-whatsapp btn-lg" href="https://wa.me/97144578220" target="_blank" rel="noreferrer">{I2.wa()} {t.cta.whatsapp}</a>
        </div>
      </div>
    </section>
  );
}
window.CTABand = CTABand;