/* ============================================================
   Services index page content + renderer.
   Uses SiteHeader/SiteFooter, SERVICE_GROUPS, serviceHref from
   site-nav.jsx. Exposes window.renderServicesPage().
   Load AFTER site-nav.jsx.
   ============================================================ */

const { useState } = React;

/* one-line intro per service group */
const GROUP_INTRO = {
  formation: "Incorporate in the right jurisdiction — licence, registered agent, corporate bank account and attested documents, handled end to end.",
  relocation: "Residency and visas that establish genuine tax residency for you and your family.",
  banking: "Corporate and private account introductions with banks that actually accept your profile.",
  foundations: "Civil- and common-law foundations for succession planning and long-term asset protection.",
  cbi: "A second citizenship by investment — family included, the whole process managed for you."
};

/* short count label per group */
const GROUP_COUNT = {
  formation: "4 jurisdictions",
  relocation: "4 programmes",
  banking: "4 jurisdictions",
  foundations: "2 structures",
  cbi: "6 passports"
};

const PROCESS = [
  ["01", "Discovery call", "A senior advisor reviews your activity, goals and tax position — then recommends the structure that actually fits."],
  ["02", "Fixed-fee proposal", "You receive a clear proposal in writing within five working days. No hourly billing, no surprises."],
  ["03", "Execution", "We prepare and file everything — formation, banking, residency or foundation — and keep you posted at every step."],
  ["04", "Live & compliant", "You receive the full pack, and we handle renewals and ongoing compliance from there."]];

/* ===================== buttons ===================== */
function PillButton({ children, light, href }) {
  const [h, setH] = useState(false);
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 24px", borderRadius: 999, fontSize: 13,
    fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", whiteSpace: "nowrap",
    cursor: "pointer", transition: "all .2s ease", border: "1px solid transparent"
  };
  const style = light
    ? { ...base, background: h ? "#fff" : "#ffffffea", color: "var(--ink)" }
    : { ...base, background: h ? "var(--steel)" : "var(--ink)", color: "#fff" };
  return <a href={href || "#"} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={style}>{children}</a>;
}
function ArrowCircle({ light }) {
  return (
    <span style={{
      width: 44, height: 44, borderRadius: 999, flexShrink: 0,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: light ? "#fff" : "var(--ink)", color: light ? "var(--ink)" : "#fff"
    }}>
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 12 L12 4 M5.5 4 H12 V10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
    </span>);
}

/* ===================== hero ===================== */
function HeroIndexRow({ g }) {
  const [h, setH] = useState(false);
  const count = g.items ? g.items.length : null;
  return (
    <a href={"#" + g.key} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", borderRadius: 14,
        background: h ? "#ffffff14" : "transparent", transition: "background .15s", color: "#eaf1f6" }}>
      <span style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "#ffffff14", border: "1px solid var(--line-d)" }}>
        {g.icon("#cfe0ee")}
      </span>
      <span style={{ flex: 1, fontSize: 15.5, fontWeight: 500 }}>{g.label}</span>
      <span style={{ flexShrink: 0, whiteSpace: "nowrap", fontSize: 12.5, color: "var(--muted-d)" }}>{count ? count + " →" : "Advisory →"}</span>
    </a>);
}

function Hero() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "center", padding: "40px 32px 60px" }}>
      <div>
        <div className="label" style={{ color: "var(--muted-d)", marginBottom: 22 }}>Our services</div>
        <h1 className="h-display" style={{ margin: 0, fontSize: "clamp(40px, 5.2vw, 74px)", maxWidth: "15ch" }}>
          Everything you need to go <em style={{ fontStyle: "italic", fontWeight: 400 }}>global</em>, under one roof.
        </h1>
        <p style={{ margin: "26px 0 0", fontSize: 17.5, lineHeight: 1.55, color: "#cdd7de", maxWidth: "48ch" }}>
          Company formation, relocation, banking, foundations and second citizenship across 27 jurisdictions — coordinated end to end by one team, on fixed fees.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
          <PillButton light href="Contact.html">Book a consultation</PillButton>
          <a href="#directory" style={{ fontSize: 14.5, color: "#cdd7de", borderBottom: "1px solid #ffffff44", paddingBottom: 4 }}>Browse all services</a>
        </div>
      </div>
      <div style={{ background: "#ffffff0e", border: "1px solid var(--line-d)", borderRadius: "var(--r-md)", padding: "12px 12px" }}>
        <div className="label" style={{ color: "var(--muted-d)", padding: "12px 16px 8px" }}>Service lines</div>
        {SERVICE_GROUPS.map((g) => <HeroIndexRow key={g.key} g={g} />)}
      </div>
    </div>);
}

/* ===================== directory ===================== */
function SvcRow({ it }) {
  const [h, setH] = useState(false);
  return (
    <a href={serviceHref(it)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
        padding: "14px 0", borderTop: "1px solid var(--line)", color: h ? "var(--ink)" : "var(--ink-soft)", transition: "color .15s" }}>
      <span style={{ fontSize: 16, fontWeight: 500 }}>{it.name}</span>
      <span style={{ flexShrink: 0, color: h ? "var(--sky-1)" : "var(--muted-d)", transform: h ? "translateX(3px)" : "none", transition: "transform .15s, color .15s" }}>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M4 12 L12 4 M5.5 4 H12 V10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </span>
    </a>);
}

function GroupCard({ g }) {
  return (
    <div id={g.key} style={{ scrollMarginTop: 24, background: "var(--tint)", borderRadius: "var(--r-md)", padding: "30px 30px 14px", display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 13, marginBottom: 14 }}>
        <span style={{ width: 46, height: 46, borderRadius: 13, flexShrink: 0, background: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          {g.icon("var(--ink)")}
        </span>
        <div>
          <h3 className="h-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{g.label}</h3>
          <div style={{ fontSize: 12.5, color: "var(--steel)", marginTop: 3 }}>{GROUP_COUNT[g.key]}</div>
        </div>
      </div>
      <p style={{ margin: "0 0 14px", fontSize: 14.5, lineHeight: 1.55, color: "var(--muted)" }}>{GROUP_INTRO[g.key]}</p>
      <div style={{ marginTop: "auto" }}>
        {g.items.map((it) => <SvcRow key={it.name} it={it} />)}
      </div>
    </div>);
}

function AdvisoryCard({ g }) {
  return (
    <div id={g.key} style={{ scrollMarginTop: 24, background: "var(--ink)", color: "#fff", borderRadius: "var(--r-md)", padding: "30px 30px 32px", display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 13, marginBottom: 16 }}>
        <span style={{ width: 46, height: 46, borderRadius: 13, flexShrink: 0, background: "#ffffff14", border: "1px solid var(--line-d)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          {g.icon("#cfe0ee")}
        </span>
        <h3 className="h-display" style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{g.label}</h3>
      </div>
      <p style={{ margin: "0 0 24px", fontSize: 15, lineHeight: 1.6, color: "#cdd7de" }}>{g.promo.text}</p>
      <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12 }}>
        <PillButton light href={g.promo.href}>{g.promo.cta}</PillButton>
        <ArrowCircle light />
      </div>
    </div>);
}

function Directory() {
  return (
    <section id="directory" style={{ scrollMarginTop: 24, background: "var(--card)", borderRadius: "var(--r-lg)", padding: "56px 48px 60px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 40 }}>
        <div>
          <div className="label" style={{ color: "var(--steel)", marginBottom: 16 }}>What we do</div>
          <h2 className="h-display" style={{ margin: 0, fontSize: "clamp(28px,3.4vw,48px)", fontWeight: 500, maxWidth: "16ch" }}>
            Six service lines, one point of contact.
          </h2>
        </div>
        <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, color: "var(--muted)", maxWidth: "38ch" }}>
          Pick a destination or structure below. Every engagement begins with a discovery call and a fixed-fee proposal in writing within five working days.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
        {SERVICE_GROUPS.map((g) => g.promo ? <AdvisoryCard key={g.key} g={g} /> : <GroupCard key={g.key} g={g} />)}
      </div>
    </section>);
}

/* ===================== process ===================== */
function Process() {
  return (
    <section style={{ background: "var(--ink)", color: "#fff", borderRadius: "var(--r-lg)", padding: "56px 48px" }}>
      <div className="label" style={{ color: "var(--muted-d)", marginBottom: 16 }}>How we work</div>
      <h2 className="h-display" style={{ margin: "0 0 40px", fontSize: "clamp(28px,3.4vw,48px)", fontWeight: 500, maxWidth: "18ch" }}>
        From first call to done, in four steps.
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
        {PROCESS.map(([n, t, d]) =>
          <div key={n} style={{ borderTop: "1px solid var(--line-d)", paddingTop: 22 }}>
            <div className="h-display" style={{ fontSize: 40, fontWeight: 300, color: "var(--sky-1)" }}>{n}</div>
            <h3 className="h-display" style={{ margin: "16px 0 10px", fontSize: 22, fontWeight: 500, lineHeight: 1.12, minHeight: "2.24em" }}>{t}</h3>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "#c2ccd3" }}>{d}</p>
          </div>
        )}
      </div>
    </section>);
}

/* ===================== CTA ===================== */
function CTA() {
  return (
    <section style={{ background: "var(--ink)", borderRadius: "var(--r-lg)", overflow: "hidden", position: "relative", color: "#fff" }}>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg,#0e4c7d,#0A3C64)", opacity: 0.9 }}></div>
      <div style={{ position: "relative", padding: "76px 48px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 22 }}>
        <h2 className="h-display" style={{ margin: 0, fontSize: "clamp(30px,4.2vw,56px)", maxWidth: "18ch" }}>Not sure where to start?</h2>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: "#cdd7de", maxWidth: "50ch" }}>
          Book a free 30-minute call with a senior advisor. We'll map the cleanest route for your goals — and send a fixed-fee proposal within five working days.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
          <PillButton light href="Contact.html">Book a call</PillButton>
          <ArrowCircle light />
        </div>
      </div>
    </section>);
}

/* ===================== page ===================== */
function ServicesPage() {
  return (
    <div>
      <SiteHeader active="services">
        <Hero />
      </SiteHeader>
      <div style={{ maxWidth: 1340, margin: "0 auto", padding: "26px 26px 0", display: "flex", flexDirection: "column", gap: 26 }}>
        <Directory />
        <Process />
        <CTA />
        <SiteFooter />
      </div>
    </div>);
}

function renderServicesPage() {
  document.title = "Services — Global Setup";
  ReactDOM.createRoot(document.getElementById("root")).render(<ServicesPage />);
}
window.renderServicesPage = renderServicesPage;