/* global React */
// YachtingStack storefront — Home (the "Passerelle" BrandScript spine, hi-fi + animated).
const { Icon, Eyebrow, Btn, Access, Reveal, useReveal, useCountUp } = window;

const Section = ({ children, id, style = {}, max = 1120 }) =>
<section id={id} className="snap-sec" style={{ minHeight: "100vh", padding: "100px 32px", position: "relative",
  display: "flex", flexDirection: "column", justifyContent: "center", ...style }}>
    <div style={{ width: "100%", maxWidth: max, margin: "0 auto", position: "relative" }}>{children}</div>
  </section>;

const Beam = () =>
<div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 1, height: 90,
  background: "linear-gradient(to bottom, transparent, rgba(250,204,21,.28), transparent)" }} />;

const H2 = ({ children, style = {} }) =>
<h2 style={{ fontFamily: "var(--font-head)", fontWeight: 700, fontSize: "clamp(30px,3.6vw,46px)",
  lineHeight: 1.12, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0, ...style }}>{children}</h2>;


// ---------------- Hero ----------------
function Hero({ go }) {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const on = () => {cancelAnimationFrame(raf);raf = requestAnimationFrame(() => setY(window.scrollY));};
    window.addEventListener("scroll", on, { passive: true });
    return () => {window.removeEventListener("scroll", on);cancelAnimationFrame(raf);};
  }, []);
  const p = Math.min(y, 600);
  const dark = Math.min(y / 850, 0.55); // hero image darkens as you scroll down, recovers on scroll up
  return (
    <section className="snap-sec" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center",
      overflow: "hidden", background: "var(--bg-deep)" }}>
      {/* full-bleed boarding photo */}
      <img src="assets/images/hero-wire.png" alt="Wireframe illustration of a guest welcomed aboard a superyacht via the passerelle"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
        objectPosition: "center 40%", transform: `translateY(${p * 0.06}px) scale(1.005)`,
        filter: `brightness(${1 - dark})`, transition: "filter .12s linear" }} />
      {/* legibility scrims — light; the artwork is already dark cyan-on-navy */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(96deg, rgba(4,14,22,.82) 0%, rgba(4,14,22,.42) 34%, rgba(4,14,22,0) 62%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(4,14,22,.4) 0%, transparent 22%, transparent 60%, var(--bg) 100%)" }} />

      <div style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: 1240, margin: "0 auto", padding: "150px 32px 110px" }}>
        <div className="hero-copy" style={{ maxWidth: 680 }}>
          <h1 className="rise" style={{ animationDelay: ".14s", fontFamily: "var(--font-head)", fontWeight: 700,
            fontSize: "clamp(42px,6vw,76px)", lineHeight: 1.04, letterSpacing: "-0.02em", color: "#fff", margin: "20px 0 0" }}>
            Welcome aboard <span style={{ color: "var(--cyan)" }}>AI</span>
          </h1>
          <p className="rise" style={{ animationDelay: ".26s", fontFamily: "var(--font-ui)", fontWeight: 300,
            lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 470, margin: "26px 0 0", width: "470px", fontSize: "24px" }}>End-to-end AI-Powered solutions for Yachts &amp; Yachting Businesses
          </p>
          <div className="rise" style={{ animationDelay: ".38s", display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
            <Btn size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">Begin Onboarding</Btn>
          </div>
        </div>
      </div>

      <div style={{ position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%)", zIndex: 2 }} className="bob">
        <Icon name="ChevronDown" size={22} color="rgba(255,255,255,.22)" />
      </div>
    </section>);

}

// ---------------- Problem ----------------
function PainRow({ icon, text }) {
  return (
    <div style={{ display: "flex", gap: 16, alignItems: "center", paddingBottom: 20,
      borderBottom: "1px solid var(--hairline)" }}>
      <div style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 11, background: "rgba(248,113,113,.07)",
        border: "1px solid rgba(248,113,113,.16)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--bad)" }}>
        <Icon name={icon} size={18} />
      </div>
      <span style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.5 }}>
        {text}
      </span>
    </div>);
}

// ---- buzzword network: lightning bolts firing off, several at once ----
function ymRand(seed) {let s = seed % 2147483647;if (s <= 0) s += 2147483646;return () => (s = s * 16807 % 2147483647) / 2147483647;}

const BOLT_SPECS = [
{ ox: 24, oy: 30, dir: 20, seed: 7 },
{ ox: 74, oy: 25, dir: 160, seed: 23 },
{ ox: 22, oy: 70, dir: -40, seed: 51 },
{ ox: 78, oy: 72, dir: 205, seed: 89 },
{ ox: 50, oy: 18, dir: 96, seed: 113 },
{ ox: 52, oy: 84, dir: -84, seed: 137 }];

const BOLTS = BOLT_SPECS.map((spec, bi) => {
  const rand = ymRand(spec.seed);
  const nodes = [],edges = [];
  const root = { x: spec.ox, y: spec.oy, d: 0 };
  nodes.push(root);
  const grow = (from, dir, seg, depth, dist) => {
    if (depth <= 0) return;
    const ang = (dir + (rand() - 0.5) * 38) * Math.PI / 180;
    const len = seg * (0.8 + rand() * 0.45);
    const nx = Math.max(3, Math.min(97, from.x + Math.cos(ang) * len * 1.45));
    const ny = Math.max(5, Math.min(94, from.y + Math.sin(ang) * len));
    const nd = dist + len;
    nodes.push({ x: nx, y: ny, d: nd });
    edges.push({ x1: from.x, y1: from.y, x2: nx, y2: ny, d: dist });
    grow({ x: nx, y: ny }, dir + (rand() - 0.5) * 26, seg * 0.92, depth - 1, nd);
    if (depth > 1 && rand() < 0.62) grow({ x: nx, y: ny }, dir + (rand() < 0.5 ? 1 : -1) * (30 + rand() * 30), seg * 0.72, depth - 1, nd);
  };
  grow(root, spec.dir, 7.5, 5, 0);
  const L = edges.reduce((m, e) => Math.max(m, e.d), 0) + 8;
  return { nodes, edges, L, offset: bi % 2 / 2 };
});

// lightning — bolts fire from origins, jag and fork; several fire at once
function LightningNet() {
  const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [, force] = React.useReducer((x) => (x + 1) % 1000000, 0);
  const tRef = React.useRef(0);
  React.useEffect(() => {
    if (reduce) return;
    let raf,start = null,last = 0;
    const tick = (t) => {
      if (start === null) start = t;
      tRef.current = (t - start) / 1000;
      if (t - last > 33) {last = t;force();}
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [reduce]);
  const PERIOD = 2.6,FIRE = 0.62,TRAIL = 12;
  const s = tRef.current;
  const frontOf = (b) => {if (reduce) return null;const ph = (s / PERIOD + b.offset) % 1 * PERIOD;return ph < FIRE ? ph / FIRE * (b.L + TRAIL) : null;};
  const segF = (front, d) => {if (front == null || front < d) return 0;return Math.max(0, 1 - (front - d) / TRAIL);};
  return (
    <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {BOLTS.map((b, bi) => {const front = frontOf(b);return (
            <g key={bi}>
            {b.edges.map((e, k) => {const f = reduce ? 0.12 : segF(front, e.d);
                return <line key={k} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2} stroke="#FDE047" strokeLinecap="round"
                strokeOpacity={0.025 + f * 0.85} strokeWidth={0.8 + f * 2.2} vectorEffect="non-scaling-stroke" />;})}
          </g>);})}
      </svg>
      {BOLTS.map((b, bi) => {const front = frontOf(b);return b.nodes.map((n, k) => {const f = reduce ? 0.2 : segF(front, n.d);
          return <div key={bi + "d" + k} style={{ position: "absolute", left: n.x + "%", top: n.y + "%", transform: "translate(-50%,-50%)",
            width: 2 + f * 3.5, height: 2 + f * 3.5, borderRadius: "50%", background: "#FDE047", opacity: f * 0.9,
            boxShadow: f > 0.15 ? `0 0 ${4 + f * 12}px rgba(253,224,71,${f * 0.7})` : "none" }} />;});})}
    </div>);

}

function Problem() {
  const pains = [
  ["Layers3", "A hundred AI tools — and a new one every week."],
  ["Gauge", "Hype you can't tell apart from real value."],
  ["ShieldAlert", "Genuine risk to your data, clients and reputation."],
  ["Clock", "No time to test, integrate and keep it current."]];

  // buzzwords drift up the screen and fade — readable noise over the firing network
  const WORDS = ["LLMs", "GPUs", "agents", "autonomous", "open-weights", "privacy", "security",
  "RAG", "fine-tuning", "embeddings", "vector DBs", "multimodal", "inference", "prompts",
  "hallucinations", "alignment", "copilots", "cloud", "local", "on-device", "quantization", "tokens",
  "orchestration", "memory", "loops", "ChatGPT", "Gemini", "Claude", "OpenClaw", "Codex", "Hermes", "skills", "robustness"];
  const noise = WORDS.map((w, i) => {
    const a = (i * 9301 + 49297) % 233280 / 233280;
    const b = ((i + 5) * 49297 + 9301) % 233280 / 233280;
    return { w, left: 2 + a * 94, top: 8 + b * 82, size: 13 + i % 4 * 3,
      dur: 5.5 + i % 6 * 1.1, delay: -(i * 1.9 % 11), peak: 0.2 + i % 3 * 0.07 };
  });

  return (
    <section className="snap-sec" style={{ position: "relative", minHeight: "100vh", padding: "120px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>

      {/* buzzwords drift up the screen and fade */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
        {noise.map((n, i) =>
        <span key={i} className="ymrise" style={{ position: "absolute", left: n.left + "%", top: n.top + "%",
          fontFamily: "var(--font-mono)", fontSize: n.size, letterSpacing: ".02em", whiteSpace: "nowrap",
          color: "var(--cyan-2)", opacity: n.peak, "--peak": n.peak,
          animationDuration: n.dur + "s", animationDelay: n.delay + "s" }}>{n.w}</span>
        )}
      </div>

      {/* soft scrim so the words fade out behind the centered text */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1,
        background: "radial-gradient(ellipse 60% 48% at 50% 50%, rgba(11,31,51,.96), rgba(11,31,51,.68) 45%, transparent 76%)" }} />

      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 2, textAlign: "center" }}>
        <Reveal>
          <H2 style={{ marginTop: 0, maxWidth: 780, marginLeft: "auto", marginRight: "auto" }}>The AI era is loud, fast and confusing.<br />
            <span style={{ color: "var(--ink-3)" }}>It's easy to drown in it.</span></H2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: "20px 48px", marginTop: 44, maxWidth: 840, marginLeft: "auto", marginRight: "auto", textAlign: "left" }}>
          {pains.map(([ic, t], i) => <Reveal key={t} delay={i * 90}><PainRow icon={ic} text={t} /></Reveal>)}
        </div>
      </div>
    </section>);

}

// ---------------- Guide ----------------
// maritime radar scope — the sweep is driven by scroll; each target blooms (and its
// legend item flashes) as the beam rotates past it, with radar-style persistence.
const RADAR_TARGETS = [
{ ang: 15, r: 33, label: "Yachting" },
{ ang: 45, r: 38, label: "Technology" },
{ ang: 75, r: 30, label: "Artificial Intelligence" },
{ ang: 105, r: 37, label: "Data" },
{ ang: 135, r: 32, label: "Analytics" },
{ ang: 165, r: 38, label: "Engineering" },
{ ang: 195, r: 30, label: "Security" },
{ ang: 225, r: 36, label: "Privacy" },
{ ang: 255, r: 31, label: "Compliance" },
{ ang: 285, r: 38, label: "Luxury" },
{ ang: 315, r: 29, label: "Research & Development" },
{ ang: 345, r: 35, label: "Innovation" }];

function Radar() {
  const targets = RADAR_TARGETS;
  const N = targets.length;
  const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [, force] = React.useReducer((x) => (x + 1) % 1000000, 0);
  const sweepRef = React.useRef(0);
  const flashRef = React.useRef(targets.map(() => -1e9));
  const PERIOD = 5000; // ms per full revolution — the beam spins constantly
  const DUR = 780; // ms a flash takes to fade after the beam passes

  React.useEffect(() => {
    if (reduce) {sweepRef.current = 142;force();return;}
    let raf,start = null,prev = 0;
    const tick = (t) => {
      if (start === null) start = t;
      const next = (t - start) / PERIOD * 360;
      for (let i = 0; i < N; i++) {
        const a = targets[i].ang;
        const v = a + 360 * Math.ceil((prev - a) / 360); // next time the beam reaches this target
        if (v > prev && v <= next) flashRef.current[i] = t;
      }
      prev = next;sweepRef.current = next;
      force();
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [reduce]);

  const flashOf = (i) => {
    if (reduce) return 0;
    const dt = performance.now() - flashRef.current[i];
    if (dt < 0 || dt >= DUR) return 0;
    const t = 1 - dt / DUR;
    return t * t;
  };
  const pos = (ang, r) => ({ left: 50 + r * Math.sin(ang * Math.PI / 180), top: 50 - r * Math.cos(ang * Math.PI / 180) });
  const sweep = sweepRef.current;

  return (
    <div>
      {/* scope */}
      <div style={{ position: "relative", width: "100%", maxWidth: 380, aspectRatio: "1 / 1", margin: "0 auto",
        borderRadius: "50%", background: "radial-gradient(circle at 50% 50%, rgba(250,204,21,.05), rgba(7,26,44,.35) 70%, transparent 78%)" }}>
        {/* concentric rings */}
        {[100, 70, 40].map((s) =>
        <div key={s} style={{ position: "absolute", left: "50%", top: "50%", width: s + "%", height: s + "%",
          transform: "translate(-50%,-50%)", borderRadius: "50%", border: "1px solid rgba(253,224,71,.14)" }} />
        )}
        {/* cross hairs */}
        <div style={{ position: "absolute", left: "50%", top: "6%", bottom: "6%", width: 1, transform: "translateX(-50%)", background: "rgba(253,224,71,.1)" }} />
        <div style={{ position: "absolute", top: "50%", left: "6%", right: "6%", height: 1, transform: "translateY(-50%)", background: "rgba(253,224,71,.1)" }} />
        {/* scroll-driven sweep wedge (bright leading edge, trailing afterglow) */}
        <div style={{ position: "absolute", inset: 0, borderRadius: "50%", transform: `rotate(${sweep}deg)`,
          background: "conic-gradient(from 0deg, transparent 0deg, transparent 292deg, rgba(253,224,71,.05) 320deg, rgba(253,224,71,.17) 345deg, rgba(253,224,71,.42) 360deg)",
          WebkitMaskImage: "radial-gradient(circle at 50% 50%, #000 78%, transparent 79%)",
          maskImage: "radial-gradient(circle at 50% 50%, #000 78%, transparent 79%)" }} />
        {/* crisp leading-edge line */}
        <div style={{ position: "absolute", left: "50%", top: "50%", width: "39%", height: 1, transformOrigin: "0 50%",
          transform: `rotate(${sweep - 90}deg)`, background: "linear-gradient(90deg, rgba(253,224,71,0), rgba(253,224,71,.55))" }} />
        {/* faint static contacts */}
        {[[44, 16], [206, 22], [332, 12], [150, 25]].map(([a, r], i) => {
          const p = pos(a, r);
          return <span key={i} style={{ position: "absolute", left: p.left + "%", top: p.top + "%", width: 3, height: 3,
            transform: "translate(-50%,-50%)", borderRadius: "50%", background: "rgba(253,224,71,.28)" }} />;
        })}
        {/* target blips — bloom + ping ring on the beam pass */}
        {targets.map((b, i) => {
          const p = pos(b.ang, b.r);const f = flashOf(i);
          return (
            <div key={i} style={{ position: "absolute", left: p.left + "%", top: p.top + "%", transform: "translate(-50%,-50%)" }}>
              {f > 0.02 && <span style={{ position: "absolute", left: "50%", top: "50%", width: 10 + f * 30, height: 10 + f * 30,
                transform: "translate(-50%,-50%)", borderRadius: "50%", border: `1px solid rgba(253,224,71,${f * 0.5})` }} />}
              <span style={{ display: "block", width: 6 + f * 5, height: 6 + f * 5, borderRadius: "50%",
                background: `rgba(253,224,71,${0.42 + f * 0.58})`,
                boxShadow: f > 0.02 ? `0 0 ${6 + f * 16}px ${1 + f * 3}px rgba(253,224,71,${0.34 + f * 0.5})` : "none" }} />
            </div>);
        })}
        {/* center YachtingStack mark */}
        <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", zIndex: 2 }}>
          <div className="radar-core-ring" style={{ position: "absolute", left: "50%", top: "50%", marginLeft: -30, marginTop: -30, width: 60, height: 60,
            borderRadius: "50%", border: "1px solid rgba(253,224,71,.5)" }} />
          <div style={{ position: "relative", width: 52, height: 52, borderRadius: "50%", background: "rgba(7,26,44,.9)",
            border: "1px solid rgba(253,224,71,.35)", display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 0 22px rgba(250,204,21,.35)" }}>
            <img src="assets/logo/YachtingStack_Logo.svg" alt="YachtingStack" style={{ width: 28, height: 28, objectFit: "contain" }} />
          </div>
        </div>
      </div>
      {/* legend — each item flashes in sync with its blip */}
      <div style={{ maxWidth: 380, margin: "26px auto 0" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".18em",
          textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 13 }}>Always on the Radar</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 18px" }}>
          {targets.map((b, i) => {
            const f = flashOf(i);
            return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ width: 7, height: 7, flexShrink: 0, borderRadius: "50%", background: `rgba(253,224,71,${0.4 + f * 0.6})`,
                  boxShadow: f > 0.02 ? `0 0 ${4 + f * 12}px rgba(253,224,71,${0.4 + f * 0.5})` : "none" }} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".03em",
                  color: f > 0.08 ? "var(--cyan-2)" : "var(--ink-3)", transition: "color .15s" }}>{b.label}</span>
              </div>);
          })}
        </div>
      </div>
    </div>);
}

function Guide() {
  const creds = [
  ["Anchor", "Fluent in yachting", "Built around how you actually run — on board and on shore."],
  ["Cpu", "Two decades in technology", "Real platforms, shipped, scaled and supported."],
  ["Radar", "AI, filtered for yachting", "Tracked, tested and deployed since before the hype."]];

  return (
    <Section id="guide"><Beam />
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 64, alignItems: "center" }}>
        <Reveal>
          <H2 style={{ marginTop: 16, maxWidth: 520 }}>We navigate the complexity to ensure your safe passage to AI adoption.</H2>
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px 0 30px", maxWidth: 470 }}>
            YachtingStack is the layer between the noise and your operation. We track, test and deploy AI as it emerges — keeping only what earns its place aboard.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {creds.map(([ic, t, s], i) =>
            <div key={t} style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 0",
              borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
                <div style={{ width: 40, height: 40, flexShrink: 0, borderRadius: 11, background: "rgba(250,204,21,.08)",
                border: "1px solid rgba(250,204,21,.18)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}>
                  <Icon name={ic} size={17} />
                </div>
                <div><div style={{ fontFamily: "var(--font-ui)", fontSize: 15, fontWeight: 500, color: "var(--ink)" }}>{t}</div>
                  <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, color: "var(--ink-4)" }}>{s}</div></div>
              </div>
            )}
          </div>
        </Reveal>
        <Reveal delay={140}><Radar /></Reveal>
      </div>
    </Section>);

}

// ---------------- Plan ----------------
function Plan() {
  const steps = [
  ["01", "Map your operation", "On board and on shore — we find where AI actually helps."],
  ["02", "Deploy custom AI", "We build for you, and select the suite products that fit your needs."],
  ["03", "Supervise & adapt", "You stay in command. It adapts to your processes, not the reverse."]];

  return (
    <Section id="plan"><Beam />
      <Reveal><H2 style={{ marginTop: 16 }}>Three steps aboard</H2></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28, marginTop: 48 }}>
        {steps.map(([n, t, d], i) =>
        <Reveal key={n} delay={i * 130} style={{ position: "relative", padding: "28px 26px", borderRadius: 18,
          background: "var(--surface)", border: "1px solid var(--hairline)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 30, color: "var(--cyan)", letterSpacing: "-.02em" }}>{n}</div>
            <h3 style={{ fontFamily: "var(--font-head)", fontSize: 21, color: "var(--ink)", margin: "12px 0 8px" }}>{t}</h3>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, lineHeight: 1.6, color: "var(--ink-3)", margin: 0 }}>{d}</p>
            {i < 2 && <div style={{ position: "absolute", right: -18, top: "50%", color: "var(--ink-4)", zIndex: 2 }} className="nudge">
              <Icon name="ArrowRight" size={18} /></div>}
          </Reveal>
        )}
      </div>
    </Section>);

}

// ---------------- Connection diagram ----------------
function Connect() {
  const node = (icon, title, sub, accent) =>
  <div style={{ flex: 1, padding: "24px 22px", borderRadius: 18, textAlign: "center",
    background: accent ? "rgba(250,204,21,.06)" : "var(--surface)",
    border: `1px solid ${accent ? "rgba(250,204,21,.3)" : "var(--hairline)"}` }}>
      <div style={{ width: 46, height: 46, margin: "0 auto 12px", borderRadius: 13,
      background: accent ? "var(--cyan)" : "rgba(255,255,255,.05)", color: accent ? "var(--cyan-ink)" : "var(--cyan-2)",
      display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={icon} size={21} /></div>
      <div style={{ fontFamily: "var(--font-ui)", fontSize: 15, fontWeight: 600, color: "var(--ink)" }}>{title}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", marginTop: 4 }}>{sub}</div>
    </div>;

  const link = () =>
  <div style={{ position: "relative", width: 64, alignSelf: "center", height: 2, background: "var(--hairline-2)" }}>
      <span className="travel" style={{ position: "absolute", top: -2.5, left: 0, width: 7, height: 7, borderRadius: "50%",
      background: "var(--cyan)", boxShadow: "0 0 10px var(--cyan)" }} />
    </div>;

  return (
    <Section><Beam />
      <Reveal><H2 style={{ marginTop: 16 }}>One deployment, vessel to office</H2>
        <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px 0 0", maxWidth: 560 }}>
          The same AI runs across your fleet and your shore team — connected through one ontology, so on-board and on-shore always see the same picture.
        </p>
      </Reveal>
      <Reveal delay={120} style={{ display: "flex", alignItems: "stretch", gap: 6, marginTop: 44 }}>
        {node("Anchor", "On board", "crew · ops · AIS")}
        {link()}
        {node("Hexagon", "YachtingStack", "deployed AI", true)}
        {link()}
        {node("Building2", "On shore", "management · CRM")}
      </Reveal>
    </Section>);

}

// ---------------- Custom Development (the core service) ----------------
function CDRow({ ic, t, s, i }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", gap: 15, alignItems: "flex-start", padding: "15px 12px", margin: "0 -12px",
        borderTop: i === 0 ? "none" : "1px solid var(--hairline)", borderRadius: 12, cursor: "default",
        background: h ? "rgba(250,204,21,.05)" : "transparent", transform: h ? "translateX(6px)" : "none",
        transition: "background .25s var(--ease), transform .25s var(--ease)" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 13, color: h ? "var(--ink)" : "var(--cyan)", letterSpacing: ".04em", paddingTop: 4, minWidth: 22, transition: "color .25s" }}>{"0" + (i + 1)}</span>
      <div style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 11,
        background: h ? "var(--cyan)" : "rgba(250,204,21,.08)", border: h ? "1px solid var(--cyan)" : "1px solid rgba(250,204,21,.18)",
        color: h ? "var(--cyan-ink)" : "var(--cyan-2)", transform: h ? "scale(1.08)" : "none",
        boxShadow: h ? "0 0 18px rgba(250,204,21,.4)" : "none", transition: "all .25s var(--ease)",
        display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={ic} size={17} /></div>
      <div>
        <div style={{ fontFamily: "var(--font-ui)", fontSize: 15, fontWeight: 600, color: h ? "var(--ink)" : "var(--cyan-2)", transition: "color .25s" }}>{t}</div>
        <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, color: h ? "var(--ink-3)" : "var(--ink-4)", marginTop: 3, lineHeight: 1.5, transition: "color .25s" }}>{s}</div>
      </div>
    </div>
  );
}

function CustomDev({ go }) {
  const builds = [
    ["Compass", "Strategy", "Your AI-adoption roadmap — mapped and prioritised."],
    ["ClipboardList", "SOPs management", "Procedures captured, structured and kept current."],
    ["Wrench", "Custom software", "Bespoke tools built around how you actually work."],
    ["Bot", "Integration with Yachting Agents", "Agents wired into your build, under your supervision."],
    ["BrainCircuit", "Leverage YachtingStack Intelligence", "Market data and signal feeding your AI."],
    ["Boxes", "Connect the rest of the suite", "Visibility, Privacy, Simulation and more, plugged in."]];
  return (
    <Section>
      <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 56, alignItems: "center" }}>
        <Reveal>
          <Access state="onboard" />
          <H2 style={{ marginTop: 18, maxWidth: 420 }}>Custom <span style={{ color: "var(--cyan)" }}>Development</span></H2>
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px 0 28px", maxWidth: 440 }}>
            The core service: we map how your business runs — on board and on shore — then build AI tailored to it, and assemble the right products from the suite around it.
          </p>
          <Btn size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">Begin Onboarding</Btn>
        </Reveal>
        <Reveal delay={120} style={{ display: "flex", flexDirection: "column" }}>
          {builds.map(([ic, t, s], i) => (
            <CDRow key={t} ic={ic} t={t} s={s} i={i} />
          ))}
        </Reveal>
      </div>
    </Section>
  );
}

// ---------------- Suite preview ----------------
function SuitePreview({ go }) {
  const pick = ["dev", "agents", "visibility", "privacy", "simulation", "news"];
  const items = pick.map((k) => window.SUITE.find((s) => s.key === k));
  return (
    <Section>
      <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 600 }}>
          <H2 style={{ marginTop: 16 }}>The YachtingStack Suite</H2>
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 15.5, lineHeight: 1.65, color: "var(--ink-3)", margin: "14px 0 0" }}>
            Real technology you can leverage today — already built, deployed and working at your service.
          </p>
        </div>
      </Reveal>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 40 }}>
        {items.map((s, i) =>
        <Reveal key={s.key} delay={i * 70}>
            <div className="liftcard" style={{ height: "100%", padding: "24px 24px",
            borderRadius: 18, background: "var(--surface)", border: "1px solid var(--hairline)", transition: "transform .3s var(--ease), border-color .3s, background .3s" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
                <div style={{ width: 40, height: 40, borderRadius: 11, background: "rgba(250,204,21,.08)", border: "1px solid rgba(250,204,21,.16)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={s.icon} size={18} /></div>
                <Access state={s.state} />
              </div>
              <h4 style={{ fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 600, color: "var(--ink)", margin: "0 0 7px" }}>{s.name}</h4>
              <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-3)", margin: 0 }}>{s.blurb}</p>
            </div>
          </Reveal>
        )}
      </div>
    </Section>);

}

// ---------------- Success ----------------
// ---------------- Deployment map: YachtingStack hub, served + supported ----------------
function DeploymentMap() {
  const [hov, setHov] = React.useState(null);
  const W = 860, Ht = 560, HUB = [430, 286];
  const px = (v, m) => (v / m * 100) + "%";
  const SPEED = 54; // viewBox units/sec — every dot travels at the Onboard IoT pace
  const segDur = (a, b) => Math.max(1.6, Math.hypot(b[0] - a[0], b[1] - a[1]) / SPEED);
  const agents = [
    { id: "vessel", ic: "Anchor", t: "Yacht", s: "", x: 232, y: 158, tip: "Runs YachtingStack Agents on board — Cloud or Local AI, working with or without connectivity." },
    { id: "business", ic: "Building2", t: "Yachting Business", s: "", x: 628, y: 158, tip: "Runs YachtingStack Agents on shore — management, CRM and day-to-day operations." }];
  const supports = [
    { id: "interfaces", ic: "AppWindow", t: "Interfaces", x: 64, y: 446, tip: "The apps and surfaces your team works in — web, mobile and extensions — all talking to YachtingStack." },
    { id: "intel", ic: "BrainCircuit", t: "Intelligence", x: 168, y: 480, tip: "Yachting market intelligence — listings, businesses, people, flags — fed to your agents." },
    { id: "sec", ic: "ShieldCheck", t: "Security", x: 272, y: 502, tip: "One verified identity, least-privilege access and enforced MFA across everything." },
    { id: "models", ic: "Cpu", t: "AI Models", x: 376, y: 512, tip: "Private, yachting-tuned models — the engines behind your agents, never pooled." },
    { id: "sim", ic: "Workflow", t: "Simulation", x: 484, y: 512, tip: "Test scenarios, generate SOPs and benchmark before anything goes live." },
    { id: "data", ic: "Database", t: "Data", x: 588, y: 502, tip: "A shared data ontology — one source of truth across the suite." },
    { id: "identity", ic: "Fingerprint", t: "Identity", x: 692, y: 480, tip: "Identity management — one YachtingStack ID governing who and what can act, everywhere." },
    { id: "priv", ic: "ShieldAlert", t: "Privacy", x: 796, y: 446, tip: "Exposure scanning and monitoring — your data, your jurisdiction." }];
  const systems = [
    { id: "y2", t: "AIS data", x: 220, y: 44, to: agents[0], tip: "Live vessel positions and movements, integrated as a data feed." },
    { id: "iot", t: "Onboard IoT", x: 64, y: 108, to: agents[0], tip: "Onboard sensors and IoT — navigation, engines, tanks, alarms — streamed to your agents." },
    { id: "custom", t: "Custom Systems", x: 500, y: 46, to: agents[1], tip: "Your bespoke and in-house systems, integrated into the business agents." },
    { id: "legacyS", t: "Legacy Systems", x: 642, y: 32, to: agents[1], tip: "Older platforms you still rely on, connected so nothing is left behind." },
    { id: "dataB", t: "Data", x: 766, y: 54, to: agents[1], tip: "Your operational data, unified and made available to the agents." },
    { id: "corpknow", t: "Corporate Knowledge", x: 786, y: 126, to: agents[1], tip: "Company know-how and documents, turned into a knowledge base the agents can use." },
    { id: "sops", t: "SOPs", x: 808, y: 200, to: agents[1], tip: "Standard operating procedures, captured and kept current for the agents to follow." }];
  const outputs = [
    { id: "dash", ic: "LayoutDashboard", t: "Dedicated Modules", x: 96, y: 232, from: agents[0], bi: true, tip: "Purpose-built modules and dashboards — the vessel's AI exchanged both ways with shore." },
    { id: "crew", ic: "Users", t: "Crew", x: 128, y: 312, from: agents[0], tip: "Crew get a simple interface to the onboard agents — ask, log and act." },
    { id: "pros", ic: "Users", t: "Professionals", x: 800, y: 272, from: agents[1], tip: "Brokers, managers and staff get a simple interface to the business agents." }];
  const tips = {};
  [...agents, ...supports, ...systems, ...outputs].forEach((n) => { tips[n.id] = n; });
  tips.hub = { t: "YachtingStack", x: HUB[0], y: HUB[1], tip: "The platform connecting vessel and shore and running your agents — powered by a platform of shared capabilities." };

  const beam = (k, a, b) => {
    const d = segDur(a, b);
    return (
      <g key={k}>
        <line x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} stroke="rgba(253,224,71,.13)" strokeWidth="1.1" />
        <circle r="1.8" fill="#FDE047" fillOpacity="0.55" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} repeatCount="indefinite" path={`M ${a[0]},${a[1]} L ${b[0]},${b[1]}`} /></circle>
        <circle r="1.8" fill="#FDE047" fillOpacity="0.55" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} begin={(-d / 2).toFixed(2) + "s"} repeatCount="indefinite" path={`M ${b[0]},${b[1]} L ${a[0]},${a[1]}`} /></circle>
      </g>
    );
  };
  const arc = `M ${agents[0].x},${agents[0].y} Q ${HUB[0]},92 ${agents[1].x},${agents[1].y}`;

  return (
    <Section>
      <Reveal style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
        <H2 style={{ marginTop: 0 }}>One platform, <span style={{ color: "var(--cyan)" }}>vessel to shore</span>.</H2>
      </Reveal>

      <Reveal delay={120} style={{ marginTop: 18 }}>
        <div style={{ position: "relative", width: "100%", maxWidth: W, aspectRatio: `${W} / ${Ht}`, margin: "0 auto" }}>
          <svg viewBox={`0 0 ${W} ${Ht}`} preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible" }}>
            <defs>
              <filter id="ymsoft" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1.1" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
              <radialGradient id="ymhub" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="rgba(250,204,21,.16)" /><stop offset="70%" stopColor="rgba(250,204,21,.04)" /><stop offset="100%" stopColor="rgba(250,204,21,0)" /></radialGradient>
            </defs>
            <circle cx={HUB[0]} cy={HUB[1]} r="150" fill="url(#ymhub)" />
            {agents.map((a, i) => beam("a" + i, [a.x, a.y], HUB))}
            {systems.map((sy, i) => {
              const d = segDur([sy.x, sy.y], [sy.to.x, sy.to.y]);
              return (
              <g key={"sy" + i}>
                <line x1={sy.x} y1={sy.y} x2={sy.to.x} y2={sy.to.y} stroke="rgba(253,224,71,.1)" strokeWidth="1" />
                <circle r="1.6" fill="#FDE047" fillOpacity="0.5" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} repeatCount="indefinite" path={`M ${sy.x},${sy.y} L ${sy.to.x},${sy.to.y}`} /></circle>
                <circle r="1.6" fill="#FDE047" fillOpacity="0.5" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} begin={(-d / 2).toFixed(2) + "s"} repeatCount="indefinite" path={`M ${sy.to.x},${sy.to.y} L ${sy.x},${sy.y}`} /></circle>
              </g>
              );
            })}
            {supports.map((u, i) => beam("u" + i, [u.x, u.y], HUB))}
            {outputs.map((o, i) => {
              const d = segDur([o.from.x, o.from.y], [o.x, o.y]);
              return (
              <g key={"o" + i}>
                <line x1={o.from.x} y1={o.from.y} x2={o.x} y2={o.y} stroke="rgba(253,224,71,.1)" strokeWidth="1" />
                <circle r="1.6" fill="#FDE047" fillOpacity="0.5" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} repeatCount="indefinite" path={`M ${o.from.x},${o.from.y} L ${o.x},${o.y}`} /></circle>
                <circle r="1.6" fill="#FDE047" fillOpacity="0.5" filter="url(#ymsoft)"><animateMotion dur={d.toFixed(2) + "s"} begin={(-d / 2).toFixed(2) + "s"} repeatCount="indefinite" path={`M ${o.x},${o.y} L ${o.from.x},${o.from.y}`} /></circle>
              </g>
              );
            })}
          </svg>

          <div onMouseEnter={() => setHov("hub")} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(HUB[0], W), top: px(HUB[1], Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", cursor: "default" }}>
            <div style={{ position: "relative", width: 104, height: 104, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(7,22,37,.92)", border: "1px solid rgba(250,204,21,.4)", boxShadow: "0 0 44px rgba(250,204,21,.32)" }}>
              <div className="ym-orbit" style={{ position: "absolute", inset: -7, borderRadius: "50%", background: "conic-gradient(from 0deg, transparent 0deg, rgba(253,224,71,.55) 70deg, transparent 150deg)", WebkitMaskImage: "radial-gradient(circle, transparent 58%, #000 60%)", maskImage: "radial-gradient(circle, transparent 58%, #000 60%)" }} />
              <div className="radar-core-ring" style={{ position: "absolute", left: "50%", top: "50%", marginLeft: -52, marginTop: -52, width: 104, height: 104, borderRadius: "50%", border: "1px solid rgba(253,224,71,.5)" }} />
              <img src="assets/logo/YachtingStack_Logo.svg" alt="YachtingStack" style={{ width: 52, height: 52, objectFit: "contain" }} />
            </div>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 600, color: "var(--ink)", marginTop: 8 }}>YachtingStack</div>
          </div>

          {agents.map((a) => (
            <div key={a.id} onMouseEnter={() => setHov(a.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(a.x, W), top: px(a.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, width: 104, cursor: "default" }}>
              <div style={{ position: "relative", width: 104, height: 104, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(7,22,37,.92)", border: "1px solid rgba(250,204,21,.4)", boxShadow: "0 0 36px rgba(250,204,21,.28)" }}>
                <div className="radar-core-ring" style={{ position: "absolute", left: "50%", top: "50%", width: 104, height: 104, marginLeft: -52, marginTop: -52, borderRadius: "50%", border: "1px solid rgba(253,224,71,.5)" }} />
                {a.id === "vessel"
                  ? <img src="assets/images/yacht-cyan.png" alt="Vessel" style={{ position: "relative", width: 74, height: "auto", display: "block" }} />
                  : <div style={{ position: "absolute", inset: 0, borderRadius: "50%", overflow: "hidden" }}>
                      <img src="assets/images/harbor.png" alt="Yachting Business" style={{ width: "100%", height: "100%", objectFit: "cover", transform: "scale(1.45)", display: "block" }} />
                    </div>}
              </div>
              <div style={{ position: "absolute", top: "calc(100% + 11px)", left: "50%", transform: "translateX(-50%)", width: 150, textAlign: "center" }}>
                <div style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, fontWeight: 600, color: "var(--ink)", lineHeight: 1.15 }}>{a.t}</div>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 4, marginTop: 7, padding: "2px 8px", borderRadius: 999, background: "rgba(250,204,21,.12)", border: "1px solid rgba(250,204,21,.3)", fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--cyan-2)" }}><Icon name="Bot" size={11} />Agents</span>
              </div>
            </div>
          ))}

          {systems.map((sy) => (
            <div key={sy.id} onMouseEnter={() => setHov(sy.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(sy.x, W), top: px(sy.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, padding: "6px 11px", borderRadius: 999, background: "var(--panel)", border: "1px solid var(--hairline-2)", whiteSpace: "nowrap", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)", cursor: "default" }}>{sy.t}</div>
          ))}

          {supports.map((u) => (
            <div key={u.id} onMouseEnter={() => setHov(u.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(u.x, W), top: px(u.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", width: 96, cursor: "default" }}>
              <div className="aura" style={{ width: 44, height: 44, margin: "0 auto", borderRadius: "50%", background: "rgba(10,27,44,.92)", border: "1px solid rgba(250,204,21,.28)", color: "var(--cyan-2)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 16px rgba(250,204,21,.18)" }}><Icon name={u.ic} size={18} /></div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ink-3)", marginTop: 7 }}>{u.t}</div>
            </div>
          ))}

          {outputs.map((o) => (
            <div key={o.id} onMouseEnter={() => setHov(o.id)} onMouseLeave={() => setHov(null)} style={{ position: "absolute", left: px(o.x, W), top: px(o.y, Ht), transform: "translate(-50%,-50%)", zIndex: 4, textAlign: "center", width: 106, cursor: "default" }}>
              <div style={{ width: 40, height: 40, margin: "0 auto 6px", borderRadius: 11, background: "rgba(10,27,44,.92)", border: "1px solid var(--hairline-2)", color: "var(--cyan-2)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={o.ic} size={17} /></div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-3)", lineHeight: 1.3 }}>{o.t}</div>
            </div>
          ))}

          {hov && tips[hov] && (
            <div style={{ position: "absolute", left: px(tips[hov].x, W), top: px(tips[hov].y, Ht), zIndex: 9, width: 220, pointerEvents: "none",
              transform: `translate(-50%, ${tips[hov].y < Ht * 0.5 ? "20px" : "calc(-100% - 20px)"})`,
              padding: "11px 13px", borderRadius: 12, background: "rgba(6,16,27,.98)", border: "1px solid var(--hairline-2)", boxShadow: "0 20px 50px -20px rgba(0,0,0,.85)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--cyan-2)", marginBottom: 5 }}>{tips[hov].t}</div>
              <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 12.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{tips[hov].tip}</div>
            </div>
          )}
        </div>
      </Reveal>
    </Section>
  );
}

function SuccessBand({ go }) {
  return (
    <Section><Beam />
      <Reveal style={{ maxWidth: 860 }}>
        <H2 style={{ marginTop: 0, fontSize: "clamp(32px,4vw,52px)" }}>
          AI deployed effectively — under your supervision, adapted to your processes.
        </H2>
        <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 17, lineHeight: 1.7, color: "var(--ink-3)", margin: "22px 0 36px", maxWidth: 600 }}>
          Built on your pre-existing processes and products — not replacing them. Backed by thousands of hours of R&amp;D, kept current as the models move.
        </p>
        <Btn size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">Begin Onboarding</Btn>
      </Reveal>
    </Section>);

}

// ---------------- Proof band ----------------
function Proof() {
  const [ref, run] = useReveal(0.4);
  const a = useCountUp(120, run),b = useCountUp(20, run),c = useCountUp(3, run),d = useCountUp(9, run);
  const stats = [[`${a}+`, "AI tools filtered to what works"], [`${b}+`, "years in technology & platforms"],
  [`${c}`, "years dedicated to AI for yachting"], [`${d}`, "products live across the suite"]];
  return (
    <section className="snap-sec" style={{ minHeight: "100vh", padding: "80px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div ref={ref} style={{ width: "100%", maxWidth: 1120, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
        {stats.map(([n, l]) =>
        <div key={l} style={{ padding: "28px 24px", borderRadius: 18, background: "var(--surface)", border: "1px solid var(--hairline)", textAlign: "center" }}>
            <div style={{ fontFamily: "var(--font-head)", fontWeight: 700, fontSize: 40, color: "var(--ink)", lineHeight: 1 }}>{n}</div>
            <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, color: "var(--ink-3)", marginTop: 10, lineHeight: 1.4 }}>{l}</div>
          </div>
        )}
      </div>
    </section>);

}

// ---------------- Closing CTA ----------------
function Closing({ go }) {
  return (
    <section className="snap-sec" style={{ position: "relative", minHeight: "100vh", padding: "120px 32px", overflow: "hidden", textAlign: "center",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 70% at 50% 50%, rgba(250,204,21,.08), transparent 70%)" }} />
      <Reveal style={{ position: "relative", maxWidth: 680, margin: "0 auto" }}>
        <H2 style={{ marginTop: 16, fontSize: "clamp(34px,4.4vw,56px)" }}>Start the conversation.</H2>
        <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 17, lineHeight: 1.7, color: "var(--ink-3)", margin: "20px auto 36px", maxWidth: 480 }}>
          Tell us about your operation. We'll map where AI fits and walk you aboard — no jargon, no hype.
        </p>
        <Btn size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">Begin Onboarding</Btn>
      </Reveal>
    </section>);

}

function Home({ go }) {
  return (
    <div>
      <Hero go={go} /><Problem /><Guide />
      <CustomDev go={go} /><SuitePreview go={go} /><DeploymentMap go={go} /><SuccessBand go={go} />
    </div>);

}
Object.assign(window, { Home });