/* 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(80,134,182,.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>;

// Full-bleed, very subtle stylised coastal-map underlay — decorative, not a surveyed coastline.
// Reused wherever a section wants a faint "map" texture spanning the full section width.
const CoastalMapBg = ({ opacity = 0.03 }) =>
<svg aria-hidden="true" viewBox="0 0 1600 500" preserveAspectRatio="none"
  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity, pointerEvents: "none" }}>
  <g fill="#94C1DA">
    <path d="M 0,0 L 0,140 C 120,155 220,120 320,140 C 460,165 540,110 640,130 C 720,150 760,220 810,260 C 850,290 880,230 920,180 C 980,130 1080,150 1180,120 C 1300,85 1420,130 1600,95 L 1600,0 Z" />
    <path d="M 0,500 L 0,400 C 140,375 260,410 380,385 C 540,350 680,400 820,375 C 960,350 1100,395 1240,370 C 1360,350 1460,385 1600,360 L 1600,500 Z" />
    <ellipse cx="700" cy="215" rx="20" ry="11" />
    <ellipse cx="930" cy="245" rx="16" ry="9" />
    <circle cx="1080" cy="220" r="7" />
    <circle cx="1140" cy="240" r="6" />
    <circle cx="1200" cy="255" r="7" />
  </g>
</svg>;

// Full-bleed, very discreet dot-matrix world map — decorative, simplified continent
// silhouettes (unions of a few overlapping ellipses per landmass) sampled onto a dot
// grid. Not a surveyed atlas. Used behind the "one platform, yacht to shore" diagram
// in place of the coastal-basin texture. preserveAspectRatio="none" stretches to fill
// so nothing gets cropped off the edges the way a "slice" fit would.
const WORLD_DOTS = (() => {
  const ell = (cx, cy, rx, ry) => (x, y) => {
    const dx = (x - cx) / rx, dy = (y - cy) / ry;
    return dx * dx + dy * dy <= 1;
  };
  const union = (...fns) => (x, y) => fns.some((f) => f(x, y));
  const continents = [
    union(ell(160, 110, 95, 70), ell(135, 178, 62, 62), ell(195, 208, 30, 36)), // North America
    union(ell(255, 300, 55, 60), ell(245, 395, 38, 66)), // South America
    union(ell(512, 108, 46, 40)), // Europe
    union(ell(530, 218, 60, 55), ell(518, 325, 46, 78)), // Africa
    union(ell(690, 115, 115, 70), ell(790, 175, 92, 58), ell(650, 215, 50, 45), ell(650, 268, 32, 38), ell(835, 228, 45, 33)), // Asia
    union(ell(862, 390, 66, 40)), // Australia
  ];
  const pts = [];
  const step = 13;
  const W = 1000, H = 500;
  for (let y = 20; y < H - 10; y += step) {
    const rowOffset = (y / step) % 2 ? step / 2 : 0;
    for (let x = 20; x < W - 10; x += step) {
      const px = x + rowOffset;
      if (continents.some((f) => f(px, y))) pts.push([px, y]);
    }
  }
  return pts;
})();
const WorldMapBg = ({ opacity = 0.05 }) =>
<svg aria-hidden="true" viewBox="0 0 1000 500" preserveAspectRatio="none"
  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity, pointerEvents: "none" }}>
  <g fill="#94C1DA">
    {WORLD_DOTS.map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.6" />)}
  </g>
</svg>;


// ---------------- Hero ----------------
function Hero({ go }) {
  const ctaText = useRotatingCTA();
  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 home-hero" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center",
      overflow: "hidden", background: "var(--bg-deep)" }}>
      {/* full-bleed boarding photo */}
      <img fetchpriority="high" decoding="async" src="/assets/images/boarding.webp" alt="A guest walks toward a superyacht at sunset as the scene shifts into an AI-rendered wireframe view of the vessel and crew"
      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%)" }} />
      {/* tempers the bright cyan wireframe on the right half */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, transparent 45%, rgba(4,14,22,.4) 100%)" }} />
      <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 hero-title" 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: "100%", fontSize: "clamp(18px,2.4vw,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 data-hide-nav-cta="true" size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">{ctaText}</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 }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", gap: 16, alignItems: "center", height: "100%", padding: "10px 12px 20px", margin: "-10px -12px 0",
        borderBottom: "1px solid var(--hairline)", borderRadius: 12,
        background: h ? "rgba(248,113,113,.05)" : "transparent",
        transform: h ? "translateX(4px)" : "none",
        transition: "background .25s var(--ease), transform .25s var(--ease)" }}>
      <div style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 11,
        background: h ? "rgba(248,113,113,.14)" : "rgba(248,113,113,.07)",
        border: `1px solid ${h ? "rgba(248,113,113,.32)" : "rgba(248,113,113,.16)"}`,
        display: "flex", alignItems: "center", justifyContent: "center", color: "var(--bad)", transition: "background .25s, border-color .25s" }}>
        <Icon name={icon} size={18} />
      </div>
      <span style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, color: h ? "var(--ink)" : "var(--ink-2)", lineHeight: 1.5, transition: "color .25s" }}>
        {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="#94C1DA" 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: "#94C1DA", opacity: f * 0.9,
            boxShadow: f > 0.15 ? `0 0 ${4 + f * 12}px rgba(148,193,218,${f * 0.7})` : "none" }} />;});})}
    </div>);

}

function Problem() {
  const pains = [
  ["Layers3", "Too many options, no way to compare them."],
  ["Gauge", "Demos impress. Results don't follow."],
  ["Building2", "You run a business, not a research lab."],
  ["ShieldAlert", "Real risk to your data, clients and reputation."]];

  // 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 className="problem-subtitle" style={{ color: "var(--ink-3)" }}>It's easy to lose your bearings.</span></H2>
        </Reveal>
        <div className="responsive-grid" 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} style={{ height: "100%" }}><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(80,134,182,.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(148,193,218,.14)" }} />
        )}
        {/* cross hairs */}
        <div style={{ position: "absolute", left: "50%", top: "6%", bottom: "6%", width: 1, transform: "translateX(-50%)", background: "rgba(148,193,218,.1)" }} />
        <div style={{ position: "absolute", top: "50%", left: "6%", right: "6%", height: 1, transform: "translateY(-50%)", background: "rgba(148,193,218,.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(148,193,218,.05) 320deg, rgba(148,193,218,.17) 345deg, rgba(148,193,218,.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(148,193,218,0), rgba(148,193,218,.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(148,193,218,.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(148,193,218,${f * 0.5})` }} />}
              <span style={{ display: "block", width: 6 + f * 5, height: 6 + f * 5, borderRadius: "50%",
                background: `rgba(148,193,218,${0.42 + f * 0.58})`,
                boxShadow: f > 0.02 ? `0 0 ${6 + f * 16}px ${1 + f * 3}px rgba(148,193,218,${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(148,193,218,.5)" }} />
          <div style={{ position: "relative", width: 52, height: 52, borderRadius: "50%", background: "rgba(7,26,44,.9)",
            border: "1px solid rgba(148,193,218,.35)", display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 0 22px rgba(80,134,182,.35)" }}>
            <img loading="lazy" decoding="async" src="/assets/logo/YachtingStack-Logo.png" 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(148,193,218,${0.4 + f * 0.6})`,
                  boxShadow: f > 0.02 ? `0 0 ${4 + f * 12}px rgba(148,193,218,${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", "20+ years delivering yacht services worldwide."],
  ["Cpu", "Deep technology background", "Delivering systems for over a decade."],
  ["Radar", "Research & development", "We test everything so you don't have to."]];

  return (
    <div className="split-scroll" style={{ alignItems: "center", position: "relative" }}>
      <img loading="lazy" decoding="async" src="/assets/images/route-planning.webp" alt="A route-planning chart overlaid with AI-driven waypoints and course annotations"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.08 }} />
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, var(--bg) 85%)" }} />
      <section id="guide" className="snap-sec split-scroll-part" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
        display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
          <Reveal>
            <H2 style={{ marginTop: 16, maxWidth: 640, fontSize: "clamp(26px,3.1vw,38px)" }}>We navigate the complexity to ensure your safe passage to<br /><span style={{ color: "var(--cyan)", whiteSpace: "nowrap" }}>AI adoption</span>.</H2>
            <p className="gd-copy" style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px 0 30px", maxWidth: 600 }}>
              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 on board and on shore.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {creds.map(([ic, t, s], i) =>
              <div key={t} className="gd-row" 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(80,134,182,.08)",
                  border: "1px solid rgba(80,134,182,.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>
        </div>
      </section>

      <section className="snap-sec split-scroll-part" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <Reveal>
          <Radar />
        </Reveal>
      </section>
    </div>);

}

// ---------------- 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(80,134,182,.06)" : "var(--surface)",
    border: `1px solid ${accent ? "rgba(80,134,182,.3)" : "var(--hairline)"}` }}>
      <div style={{ width: 46, height: 46, margin: "0 auto 12px", borderRadius: 13,
      background: accent ? "var(--cyan)" : "var(--wa-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 className="cd-row" 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(80,134,182,.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(80,134,182,.08)", border: h ? "1px solid var(--cyan)" : "1px solid rgba(80,134,182,.18)",
        color: h ? "var(--cyan-ink)" : "var(--cyan-2)", transform: h ? "scale(1.08)" : "none",
        boxShadow: h ? "0 0 18px rgba(80,134,182,.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: "var(--ink)", 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 ctaText = useRotatingCTA();
  const builds = [
    ["Compass", "Strategy, SOPs & data structuring", "Your AI-adoption roadmap, procedures and data — mapped and structured."],
    ["Wrench", "Custom software build", "Bespoke tools built around how you actually work."],
    ["Boxes", "Integration with the YachtingStack suite", "Agents, Visibility, Privacy and more — wired into your build."],
    ["Settings", "Ongoing AI & systems management", "Kept current, monitored and adapted as your operation evolves."]];
  return (
    <section className="snap-sec compact-mobile-section" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <img loading="lazy" decoding="async" src="/assets/images/yard.webp" alt="A wireframe rendering of a superyacht under construction inside a shipyard"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.08 }} />
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(90deg, var(--bg) 0%, rgba(11,17,30,.94) 16%, rgba(11,17,30,.82) 30%, rgba(11,17,30,.62) 44%, rgba(11,17,30,.42) 58%, rgba(11,17,30,.24) 72%, rgba(11,17,30,.1) 86%, transparent 100%)" }} />
      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <div className="responsive-grid" style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 56, alignItems: "center" }}>
          <Reveal>
            <H2 style={{ marginTop: 14, 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 for yachting businesses: we map how your operation runs, apply our expertise, and use AI to build and power your systems — then assemble the right products from the suite around it.
            </p>
            <Btn className="hide-mobile-cta" size="lg" onClick={() => go("product:custom")} iconRight="ArrowRight">Learn more</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>
      </div>
    </section>
  );
}

function OnboardAgents({ go }) {
  const ctaText = useRotatingCTA();
  const features = [
    ["Bot", "AI agents connected to your data", "Trained on how your vessel actually operates — navigation, engines, guest ops and more."],
    ["Boxes", "Modular architecture", "Select department modules from the marketplace, or customize your own."],
    ["Radio", "IoT & vessel systems", "Connected to sensors, navigation and onboard systems — streamed straight to your agents."],
    ["Cloud", "Local & cloud deployment", "Runs on board or in the cloud — with or without connectivity."],
    ["ShieldCheck", "Privacy & security by design", "Your data stays yours — encrypted, access-controlled and GDPR-aligned, on board and ashore."]];
  return (
    <section className="snap-sec compact-mobile-section" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <img loading="lazy" decoding="async" src="/assets/images/passarelle-boarding.webp" alt="Wireframe illustration of a guest boarding a superyacht via the passerelle, at sunset"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.06 }} />
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(90deg, var(--bg) 0%, rgba(11,17,30,.94) 16%, rgba(11,17,30,.82) 30%, rgba(11,17,30,.62) 44%, rgba(11,17,30,.42) 58%, rgba(11,17,30,.24) 72%, rgba(11,17,30,.1) 86%, transparent 100%)" }} />
      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <div className="responsive-grid" style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 56, alignItems: "center" }}>
          <Reveal>
            <H2 style={{ marginTop: 14, maxWidth: 420 }}><span style={{ color: "var(--cyan)" }}>AI Agents</span>,<br />deployed on board</H2>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 15, lineHeight: 1.7, color: "var(--ink-3)", margin: "18px 0 28px", maxWidth: 440 }}>
              Semi-autonomous AI agents connected to your vessel's data and operations, deployed on board. Your bespoke AI deployment, helping you run your yacht.
            </p>
            <Btn className="hide-mobile-cta" size="lg" onClick={() => go("onboard")} iconRight="ArrowRight">Learn more</Btn>
          </Reveal>
          <Reveal delay={120} style={{ display: "flex", flexDirection: "column" }}>
            {features.map(([ic, t, s], i) => (
              <CDRow key={t} ic={ic} t={t} s={s} i={i} />
            ))}
          </Reveal>
        </div>
      </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 className="snap-sec suite-preview" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <img loading="lazy" decoding="async" src="/assets/images/marina.webp" alt="" aria-hidden="true"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.1 }} />
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, var(--bg) 85%)" }} />
      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <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 className="responsive-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 40 }}>
          {items.map((s, i) => {
            // Yachting Dev is Custom-Development-only: no public product page link.
            const linked = s.key !== "dev";
            const blurb = linked ? s.blurb :
              "Build AI strategy, build specs and integrate with legacy systems. Available for Custom Development clients.";
            const card =
              <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={{ width: 40, height: 40, borderRadius: 11, background: "rgba(80,134,182,.08)", border: "1px solid rgba(80,134,182,.16)",
                  display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)", marginBottom: 16 }}><Icon name={s.icon} size={18} /></div>
                <h4 style={{ fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 600, margin: "0 0 7px" }}>
                  <span style={{ color: "var(--ink)" }}>Yachting </span>
                  <span style={{ color: "var(--cyan)" }}>{s.name.replace(/^Yachting /, "")}</span>
                </h4>
                <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-3)", margin: 0 }}>{blurb}</p>
              </div>;
            return (
              <Reveal key={s.key} delay={i * 70} style={{ height: "100%" }}>
                {linked ?
                <button onClick={() => go("product:" + s.key)} style={{ all: "unset", cursor: "pointer", display: "block", width: "100%", height: "100%" }}>{card}</button> :
                card}
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>);

}

// ---------------- Success ----------------
// ---------------- Deployment map: YachtingStack hub, served + supported ----------------
function DeploymentMap({ id } = {}) {
  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: "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: "sensors", t: "Sensors", x: 140, y: 50, to: agents[0], tip: "Live sensor feeds from the vessel's systems, streamed straight into your agents." },
    { id: "localdata", t: "Local Data", x: 28, y: 182, to: agents[0], tip: "Data and documents that stay on the vessel — available to your agents without ever leaving it." },
    { id: "localcloud", t: "Local / Cloud", x: 340, y: 60, to: agents[0], tip: "Runs on board or in the cloud — the same agents, deployed either way." },
    { id: "custom", t: "Custom Systems", x: 470, y: 50, to: agents[1], tip: "Your bespoke and in-house systems, integrated into the business agents." },
    { id: "legacyS", t: "Legacy Systems", x: 652, y: 22, to: agents[1], tip: "Older platforms you still rely on, connected so nothing is left behind." },
    { id: "dataB", t: "Data", x: 792, y: 48, to: agents[1], tip: "Your operational data, unified and made available to the agents." },
    { id: "corpknow", t: "Corporate Knowledge", x: 824, y: 124, to: agents[1], tip: "Company know-how and documents, turned into a knowledge base the agents can use." },
    { id: "sops", t: "SOPs", x: 832, y: 206, 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: 84, y: 248, 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(148,193,218,.13)" strokeWidth="1.1" />
        <circle r="1.8" fill="#94C1DA" 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="#94C1DA" 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 id={id} className="snap-sec hide-diagram-mobile" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <img loading="lazy" decoding="async" src="/assets/images/world.webp" alt="" aria-hidden="true"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.06 }} />
      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
      <Reveal style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
        <div className="diagram-heading">
          <H2 style={{ marginTop: 0 }}>One platform, <span style={{ color: "var(--cyan)" }}>yacht to shore</span>.</H2>
        </div>
      </Reveal>

      <Reveal delay={120} style={{ marginTop: 18 }}>
        <div className="diagram-scroll">
        <div className="diagram-inner" 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(80,134,182,.16)" /><stop offset="70%" stopColor="rgba(80,134,182,.04)" /><stop offset="100%" stopColor="rgba(80,134,182,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(148,193,218,.1)" strokeWidth="1" />
                <circle r="1.6" fill="#94C1DA" 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="#94C1DA" 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(148,193,218,.1)" strokeWidth="1" />
                <circle r="1.6" fill="#94C1DA" 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="#94C1DA" 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(80,134,182,.4)", boxShadow: "0 0 44px rgba(80,134,182,.32)" }}>
              <div className="ym-orbit" style={{ position: "absolute", inset: -7, borderRadius: "50%", background: "conic-gradient(from 0deg, transparent 0deg, rgba(148,193,218,.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(148,193,218,.5)" }} />
              <img loading="lazy" decoding="async" src="/assets/logo/YachtingStack-Logo.png" 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 style={{ fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--cyan-2)", marginTop: 4 }}>Local–Cloud AI</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: a.id === "vessel" ? "rgba(7,22,37,.92)" : "#0B1320", border: "1px solid rgba(80,134,182,.4)", boxShadow: "0 0 36px rgba(80,134,182,.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(148,193,218,.5)" }} />
                {a.id === "vessel"
                  ? <img loading="lazy" decoding="async" src="/assets/images/yacht2.webp" alt="Vessel" style={{ position: "relative", width: 96, height: "auto", display: "block",
                      filter: "drop-shadow(0 0 5px rgba(148,193,218,.4))" }} />
                  : <div style={{ position: "relative", width: 94, height: 94, borderRadius: "50%", overflow: "hidden" }}>
                      <img loading="lazy" decoding="async" src="/assets/images/yachting-business-3.webp" alt="Yachting Business" style={{ width: "100%", height: "100%",
                        objectFit: "cover", objectPosition: "50% 50%", transform: "scale(1.15)", 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(80,134,182,.12)", border: "1px solid rgba(80,134,182,.3)", fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--cyan-2)" }}><Icon name="Bot" size={11} />AI 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(80,134,182,.28)", color: "var(--cyan-2)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 16px rgba(80,134,182,.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>
        </div>
      </Reveal>
      </div>
    </section>
  );
}

function SuccessBand({ go }) {
  const ctaText = useRotatingCTA();
  return (
    <section className="snap-sec" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center" }}>
      {/* soft flashing lights in the clouds, top-left — sit BEHIND the photo, showing through the masked-transparent patch below */}
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, width: "42%", height: "52%", overflow: "hidden", pointerEvents: "none" }}>
        {[
          { left: "18%", top: "20%", size: 90, delay: "0s", rgb: "255,255,255" },
          { left: "32%", top: "10%", size: 120, delay: "-2.3s", rgb: "125,211,252" },
          { left: "9%", top: "36%", size: 75, delay: "-4.1s", rgb: "96,165,250" },
          { left: "24%", top: "30%", size: 100, delay: "-5.4s", rgb: "224,242,254" },
        ].map((f, i) => (
          <span key={i} className="radar-blip" style={{ position: "absolute", left: f.left, top: f.top, width: f.size, height: f.size,
            borderRadius: "50%", filter: "blur(10px)", background: `radial-gradient(circle, rgba(${f.rgb},.35), rgba(${f.rgb},0) 55%)`,
            "--flash-color": `rgba(${f.rgb},.4)`, animationDelay: f.delay }} />
        ))}
      </div>
      {/* the photo — masked so just the top-left cloud patch (where the flashes sit) is more see-through; the rest is untouched */}
      <img loading="lazy" decoding="async" src="/assets/images/storm-background.webp" alt="A stormy sky over a digital data-wave ocean, clearing to a calm sunset horizon"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center",
          WebkitMaskImage: "radial-gradient(ellipse 48% 58% at 20% 24%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,1) 78%)",
          maskImage: "radial-gradient(ellipse 48% 58% at 20% 24%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,1) 78%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(7,22,37,.55) 0%, rgba(7,22,37,.72) 55%, var(--bg) 100%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(7,22,37,.6) 0%, rgba(7,22,37,.15) 45%, rgba(7,22,37,.6) 100%)" }} />
      {/* rising data-particles, spread wide around the 25% mark, drifting up from mid-screen and fading quickly */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
        {[
          { left: "8%", delay: "-0.8s", dur: "5.2s", size: 4 },
          { left: "13%", delay: "-3.6s", dur: "6.1s", size: 3 },
          { left: "17%", delay: "-1.9s", dur: "5.6s", size: 5 },
          { left: "21%", delay: "-5.0s", dur: "6.8s", size: 3 },
          { left: "25%", delay: "-0.3s", dur: "5.4s", size: 4 },
          { left: "29%", delay: "-4.2s", dur: "6.3s", size: 5 },
          { left: "33%", delay: "-2.6s", dur: "5.9s", size: 3 },
          { left: "37%", delay: "-6.1s", dur: "6.6s", size: 4 },
          { left: "41%", delay: "-1.2s", dur: "5.3s", size: 3 },
        ].map((b, i) => (
          <span key={i} className="pbubble" style={{ position: "absolute", left: b.left, top: "50%", width: b.size, height: b.size,
            borderRadius: "50%", background: "#94C1DA", boxShadow: "0 0 8px rgba(148,193,218,.6)",
            /* base opacity 0: the .pbubble keyframes drive visibility while animating;
               with animations off (reduced motion) the dots must not sit over the copy */
            opacity: 0,
            animationDuration: b.dur, animationDelay: b.delay }} />
        ))}
      </div>
      <div style={{ width: "100%", maxWidth: 1120, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <Beam />
        <Reveal style={{ maxWidth: 860 }}>
          <H2 style={{ marginTop: 0, fontSize: "clamp(32px,4vw,52px)" }}>
            <span style={{ color: "var(--cyan)" }}>AI deployed effectively</span> — 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 data-hide-nav-cta="true" size="lg" onClick={() => go("onboarding")} iconRight="ArrowRight">{ctaText}</Btn>
        </Reveal>
      </div>
    </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(80,134,182,.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>);

}

// ---------------- Who we serve ----------------
// One full-height section per audience — same internal structure for both,
// so alignment (tags, core-offer button) stays consistent between them.
// Audience tag — a non-clickable pill that just lights up on hover.
function ServeTag({ icon, label }) {
  const [h, setH] = React.useState(false);
  return (
    <span onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-ui)", fontSize: 11,
        color: h ? "var(--ink)" : "var(--ink-2)", padding: "3px 8px 3px 5px", borderRadius: 999,
        border: `1px solid ${h ? "rgba(80,134,182,.55)" : "var(--hairline-2)"}`,
        background: h ? "rgba(80,134,182,.14)" : "var(--panel)",
        transition: "color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease)" }}>
      <Icon name={icon} size={11} color="var(--cyan-2)" />{label}
    </span>
  );
}

function ServeSection({ go, img, imgAlt, title, info, tags, featured, glowDelay = "0s" }) {
  const [featH, setFeatH] = React.useState(false);
  return (
    <section className="snap-sec split-scroll-part serve-card-section compact-mobile-section" style={{ position: "relative", minHeight: "100vh", padding: "100px 32px", overflow: "hidden",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
      <div style={{ width: "100%", maxWidth: 560 }}>
        <Reveal>
          <div className="serve-card" style={{ padding: "22px 24px", borderRadius: 18, background: "rgba(16,42,66,.82)", border: "1px solid var(--hairline)",
            backdropFilter: "blur(6px)", display: "flex", flexDirection: "column" }}>
            <div>
              {/* same line-art as the mega-menu featured tiles, so home and menu read as one pair */}
              <img loading="lazy" decoding="async" src={img} alt={imgAlt} className="serve-card-img"
                style={{ width: 210, maxWidth: "70%", height: "auto", display: "block", margin: "0 0 2px", filter: "drop-shadow(0 0 6px rgba(148,193,218,.4))" }} />
              <h3 style={{ fontFamily: "var(--font-head)", fontWeight: 400, fontSize: 21, color: "var(--ink)", margin: "14px 0 10px" }}>{title}</h3>
              {info}

              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 13 }}>
                {tags.map(([ic, t]) => (
                  <ServeTag key={t} icon={ic} label={t} />
                ))}
              </div>
            </div>

            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--hairline)" }}>
              <button onClick={featured.onClick} onMouseEnter={() => setFeatH(true)} onMouseLeave={() => setFeatH(false)} className="liftcard core-glow" style={{ all: "unset", cursor: "pointer", display: "flex", alignItems: "center", gap: 12,
                padding: "11px 14px", borderRadius: 13, animationDelay: glowDelay,
                border: `1px solid ${featH ? "var(--cyan)" : "rgba(80,134,182,.28)"}`,
                background: featH ? "rgba(80,134,182,.14)" : "rgba(80,134,182,.06)", width: "100%", boxSizing: "border-box",
                transition: "border-color .2s var(--ease), background .2s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease)" }}>
                <span style={{ width: 32, height: 32, borderRadius: 10, background: "rgba(80,134,182,.14)", display: "flex", alignItems: "center",
                  justifyContent: "center", color: "var(--cyan-2)", flexShrink: 0 }}><Icon name={featured.icon} size={15} /></span>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 600, color: "var(--ink)", flex: 1, minWidth: 0 }}>{featured.label}</span>
                <Icon name="ArrowRight" size={15} color="var(--cyan-2)" />
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function WhoWeServe({ go }) {
  // Onboard department segments — local copy (the For Yachts page no longer
  // carries a modules list of its own).
  const crewSegments = [
    ["ShieldCheck", "Safety & Compliance"], ["UtensilsCrossed", "Galley & Provisioning"], ["Plane", "Heli Ops"],
    ["Compass", "Bridge & Navigation"], ["Wine", "Guest Experience"], ["Wrench", "Engineering"],
    ["Users", "Crew & HR"], ["Receipt", "Accounts"], ["Sparkles", "Interior"], ["Anchor", "Deck"],
  ];
  const businessTags = [
    ["Anchor", "Ports & Marinas"], ["Handshake", "Brokerage"], ["Sailboat", "Charter"], ["Shield", "Insurance"],
    ["Hammer", "Build & Refit"], ["Briefcase", "Management"], ["Users", "Crew"], ["Calculator", "Finance & Tax"],
    ["Wrench", "Technical Services"], ["Headset", "Support Services"], ["Activity", "Operations"],
  ];

  return (
    <div className="split-scroll split-scroll-compact" style={{ position: "relative" }}>
      <img loading="lazy" decoding="async" src="/assets/images/marina2.webp" alt="A wireframe aerial view of superyachts docked in a marina"
        style={{ position: "absolute", top: 0, left: "50%", width: "100vw", height: "100%", transform: "translateX(-50%)", objectFit: "cover", objectPosition: "center", opacity: 0.1 }} />
      <div style={{ position: "absolute", top: 0, left: "50%", width: "100vw", height: "100%", transform: "translateX(-50%)",
        background: "linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%)" }} />
      <div className="split-scroll-heading" style={{ position: "relative" }}>
        <Reveal style={{ textAlign: "center", marginBottom: 20 }}>
          <H2 style={{ marginTop: 0 }}>AI Powered Systems, deployed <span style={{ color: "var(--cyan)" }}>on board and on shore</span>.</H2>
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 15, lineHeight: 1.6, color: "var(--ink-3)", margin: "12px 0 0" }}>
            AI shaped around how you actually operate — on board your yacht and across your shore team — powered by deep, yachting-oriented technology.
          </p>
        </Reveal>
      </div>
      <ServeSection go={go} img="/assets/images/yacht2.webp" imgAlt="Line-art superyacht" title="Yacht"
        info={
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 15, color: "var(--ink-2)" }}><span style={{ fontFamily: "var(--font-mono)", color: "var(--cyan-2)" }}>30-100+m</span></div>
          </div>
        }
        tags={crewSegments}
        featured={{ icon: "Bot", label: "AI Agents, On Board", onClick: () => go("onboard") }}
        glowDelay="0s"
      />
      <ServeSection go={go} img="/assets/images/yachting-business.webp" imgAlt="Line-art yachting business workstation" title="Yachting Businesses"
        info={<div style={{ fontFamily: "var(--font-ui)", fontSize: 15, color: "var(--ink-2)" }}><span style={{ fontFamily: "var(--font-mono)", color: "var(--cyan-2)" }}>Any yachting segment</span></div>}
        tags={businessTags}
        featured={{ icon: "Wrench", label: "Custom Development + AI Agents", onClick: () => go("product:custom") }}
        glowDelay="2.6s"
      />
    </div>
  );
}

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

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