/* global React */
// YachtingStack — Yachting Privacy landing, recreated inside the storefront.
// A deliberate COPY of the privacy app's public landing (yachting-privacy →
// client/src/pages/landing.tsx), kept separate and maintained in both places —
// the landing is a full-height scroll-snap deck, and a snap deck cannot be
// iframed (no viewport to snap inside; see the ?embed=1 notes in that file),
// so the sections live natively in this document and snap like the home page
// (product:privacy is a snapRoute in index.html). Edit copy there and here
// together. Section imagery comes from the shared /assets/images selection.
const { Icon, Btn, Reveal } = window;

// ---------- content (mirrors the privacy app's landing data) ----------

const YPV_HERO_CARDS = [
  ["Eye", "Per-LLM matrix", "GPT-5-mini, Claude Sonnet 4, Gemini 2.5 Flash, Perplexity — all probed."],
  ["AlertTriangle", "Prioritised advisories", "Plain-English actions: who to delist, what to lock down."],
  ["FileText", "Complete report", "A full PDF dossier you can hand to your principal, insurer, or counsel."],
];

const YPV_CATEGORIES = [
  ["User", "Owner", "Beneficial-owner names, family members, and the holding companies most often named alongside the vessel."],
  ["MapPin", "Location", "Current and historic ports, AIS-disclosed routes, anchorages, and patterns that reveal the principal's movements."],
  ["Users", "Crew", "Captain, officers, and crew names — including LinkedIn footprints and crewing-agency listings."],
  ["Briefcase", "Principals", "Associated executives, advisors, and entourage that researchers tie to the yacht's ownership structure."],
  ["DollarSign", "Valuation", "Public estimates of build cost, refit spend, brokerage listings, and insured value figures circulating online."],
  ["Ship", "Charter", "Charter availability, weekly rates, broker pages, and crew tip-line mentions that signal commercial use."],
  ["Newspaper", "Controversies", "Press coverage, sanctions chatter, lawsuits, and activist tracking that elevate reputational and physical risk."],
  ["Share2", "Social media", "Publicly shared content across major social platforms that can reveal details about the vessel, where it is, and who is connected to it."],
];

const YPV_RISKS = [
  ["Crosshair", "Targeted intrusions & physical threats", "Combining real-time AIS with named owner data turns a yacht into a known location for the principal — a starting point for piracy, paparazzi, protest boarding, or worse."],
  ["BellRing", "Coordinated activist tracking", "Climate and sanctions campaigners actively scrape AIS and LLMs to build call-out lists. Your yacht appearing on one drives press cycles and dock-side incidents."],
  ["Gavel", "Sanctions, tax & regulatory exposure", "Mismatches between leaked beneficial ownership, flag, and management entity invite enforcement attention — even when the underlying structure is fully compliant."],
  ["Building2", "Commercial leverage against the principal", "Counterparties searching the principal's name find the yacht, its valuation, and its charter rates — and price every negotiation accordingly."],
  ["TrendingDown", "Insurance & charter-rate erosion", "Public valuation chatter and incident coverage push premiums up and broker confidence down. Quiet vessels command better terms."],
  ["ShieldAlert", "Crew-led data leakage", "Crew CVs, agency profiles, and social posts routinely name the vessel, the owner, and the itinerary — closing the loop for any researcher who started from the yacht's name."],
];

const YPV_VALUE = [
  ["Target", "See exactly what's leaking", "A per-LLM, per-category matrix shows which model named your owner, which named your route, and the exact text — so you know what to dispute, delist, or correct."],
  ["ListChecks", "Prioritised, plain-English actions", "Every advisory tells you what to do next: which broker page to take down, which crew profile to scrub, which AIS gap to address — ranked by impact."],
  ["ShieldCheck", "Proof you've done the work", "A complete PDF report covering every sensitive-information exposure, plus an immutable audit trail you can hand to the principal, your insurer, or counsel — evidence of an active privacy posture, not just intent."],
];

const YPV_WHITE_LABEL = [
  ["Palette", "Your logo, your colours", "Reports, dashboard, and PDFs branded as your firm — no YachtingPrivacy mark unless you want one."],
  ["Ship", "Multi-yacht workspace", "Manage scans, claims, and report delivery across every yacht in your portfolio from a single console."],
  ["ShieldCheck", "Verified-manager fast track", "A single firm-level attestation unlocks every yacht under management — no per-vessel re-verification."],
];

// ---------- building blocks (privacy app look, storefront tokens) ----------

// Full-height snap section — product:privacy is a snapRoute (index.html), so
// the page scrolls one section per wheel like home / custom-dev / simulation.
// `overlay` swaps the default scrim for a custom wash gradient (the hero uses
// the standalone landing's wash so the two heroes stay visually identical).
const YpvSection = ({ children, bg, bgOpacity = 0.07, scrim = false, overlay = null, style = {} }) => (
  <section className="snap-sec" style={{ position: "relative", overflow: "hidden", minHeight: "100vh", padding: "110px 32px 84px",
    display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--bg-deep)", ...style }}>
    {bg && <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: `url(${bg})`,
      backgroundSize: "cover", backgroundPosition: "center", opacity: bgOpacity, pointerEvents: "none" }} />}
    {bg && (overlay || scrim) && <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none",
      background: overlay || "linear-gradient(180deg, rgba(7,12,21,0.5), rgba(7,12,21,0.82))" }} />}
    <div style={{ position: "relative", width: "100%", maxWidth: 1080, margin: "0 auto" }}>{children}</div>
  </section>
);

// Section heading — DM Sans light with the accent phrase in brand blue,
// mirroring the landing's SectionHeader (storefront --font-ui IS DM Sans).
const YpvHead = ({ title, intro }) => (
  <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto" }}>
    <h2 style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: "clamp(26px,3.4vw,40px)", lineHeight: 1.16,
      letterSpacing: "-0.01em", color: "var(--ink)", margin: 0 }}>{title}</h2>
    {intro && <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 15.5, lineHeight: 1.7,
      color: "var(--ink-3)", margin: "16px auto 0", maxWidth: 620 }}>{intro}</p>}
  </div>
);

// Icon-led card — the landing's category/risk/value cards, storefront-toned.
// `tint` shifts the ring toward the landing's red (risk) / emerald (value).
const YpvCard = ({ icon, title, body, tint }) => {
  const ring = tint === "red" ? "rgba(229,99,77,.28)" : tint === "emerald" ? "rgba(52,211,153,.28)" : "var(--hairline)";
  const iconColor = tint === "red" ? "#E5634D" : tint === "emerald" ? "#34D399" : "var(--cyan)";
  const iconBg = tint === "red" ? "rgba(229,99,77,.1)" : tint === "emerald" ? "rgba(52,211,153,.1)" : "rgba(80,134,182,.08)";
  return (
    <div className="ypv-card" style={{ height: "100%", padding: "18px 18px 16px", borderRadius: 12, border: `1px solid ${ring}` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
        <span style={{ width: 34, height: 34, borderRadius: 10, background: iconBg, flexShrink: 0,
          display: "inline-flex", alignItems: "center", justifyContent: "center", color: iconColor }}>
          <Icon name={icon} size={17} />
        </span>
        <span style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, fontWeight: 600, color: "var(--ink)" }}>{title}</span>
      </div>
      <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 12.5, lineHeight: 1.6, color: "var(--ink-3)" }}>{body}</div>
    </div>
  );
};

// ---------- page ----------

function PrivacyPage({ go }) {
  return (
    <div style={{ background: "var(--bg-deep)" }}>
      <style>{`
        .ypv-card { background: var(--wa-018); transition: transform .24s var(--ease), border-color .24s var(--ease), background-color .24s var(--ease); }
        .ypv-card:hover { transform: translateY(-4px); background-color: rgba(80,134,182,.06); }
        .ypv-hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
        .ypv-categories { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
        .ypv-risks      { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
        .ypv-value      { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
        @media (max-width: 920px) { .ypv-categories { grid-template-columns: repeat(2, minmax(0,1fr)); } }
        @media (max-width: 720px) {
          .ypv-hero-cards, .ypv-categories, .ypv-risks, .ypv-value { grid-template-columns: 1fr; }
        }
      `}</style>

      {/* 1 ── Hero — the standalone landing's flowing-water particle field
             (privacy-hero.webp, converted from the privacy app's hero PNG)
             under the same dark wash, fading into the deck below. */}
      <YpvSection bg="/assets/images/privacy/privacy-hero.webp" bgOpacity={1}
        overlay="linear-gradient(to bottom, rgba(7,12,21,0.55) 0%, rgba(7,12,21,0.7) 60%, #070c15 100%)"
        style={{ padding: "130px 32px 84px" }}>
        <button onClick={() => go("home")} style={{ all: "unset", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7,
          fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--ink-3)", marginBottom: 26 }}
          onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"} onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-3)"}>
          <Icon name="ArrowLeft" size={15} /> Home
        </button>
        <Reveal>
          <header style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
            {/* The product lockup lives in the nav header (chrome.jsx lockupProduct),
                not here — the hero opens straight on the question headline. */}
            <h1 style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: "clamp(30px,4.4vw,52px)", lineHeight: 1.1,
              letterSpacing: "-0.015em", color: "var(--ink)", margin: 0, maxWidth: 840 }}>
              What does the <span style={{ color: "var(--cyan)" }}>AI ecosystem</span> know about your yacht?
            </h1>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: "clamp(15px,1.6vw,17px)", color: "var(--ink-3)",
              margin: 0, maxWidth: 640, lineHeight: 1.7 }}>
              We scan four leading LLMs, the open web, and AIS for every leak tied to your yacht — owner, ports, crew,
              principals, value — and distil it into a single Privacy Exposure Score. Detailed findings are only released
              once we've verified your relationship to the vessel.
            </p>
            <Btn size="lg" onClick={() => go("contact-sales")} iconRight="ArrowRight">Contact sales</Btn>
          </header>
          <div className="ypv-hero-cards" style={{ maxWidth: 840, margin: "44px auto 0" }}>
            {YPV_HERO_CARDS.map(([icon, title, body]) => <YpvCard key={title} icon={icon} title={title} body={body} />)}
          </div>
        </Reveal>
      </YpvSection>

      {/* 2 ── What we monitor — eight leak categories */}
      <YpvSection bg="/assets/images/world.webp" bgOpacity={0.09}>
        <Reveal>
          <YpvHead title={<>Every scan checks <span style={{ color: "var(--cyan)" }}>eight categories</span> of leaks.</>}
            intro="Every scan probes four leading LLMs, sweeps the open web, and pulls 90 days of AIS — checking each of these categories for leaks tied to your vessel." />
          <div className="ypv-categories" style={{ marginTop: 36 }}>
            {YPV_CATEGORIES.map(([icon, title, body]) => <YpvCard key={title} icon={icon} title={title} body={body} />)}
          </div>
        </Reveal>
      </YpvSection>

      {/* 3 ── Risks of an exposed vessel */}
      <YpvSection bg="/assets/images/storm-background.webp" bgOpacity={0.11}>
        <Reveal>
          <YpvHead title={<>The risks of an <span style={{ color: "#E5634D" }}>exposed</span> vessel.</>}
            intro="Aggregated yacht data is now trivially accessible — an LLM, an open-web search, and a free AIS feed are enough for a journalist, an activist, or a hostile actor to build a complete picture of your principal's movements, holdings, and inner circle." />
          <div className="ypv-risks" style={{ marginTop: 36 }}>
            {YPV_RISKS.map(([icon, title, body]) => <YpvCard key={title} icon={icon} title={title} body={body} tint="red" />)}
          </div>
        </Reveal>
      </YpvSection>

      {/* 4 ── The value of knowing */}
      <YpvSection bg="/assets/images/route-planning-blue.webp" bgOpacity={0.09}>
        <Reveal>
          <YpvHead title={<>The value of <span style={{ color: "#34D399" }}>knowing</span> your exposure.</>}
            intro="You can't fix what you can't see. YachtingPrivacy gives you the same view a hostile researcher would assemble — but in 90 seconds, with prioritised actions and the audit trail to prove you took them." />
          <div className="ypv-value" style={{ maxWidth: 980, margin: "36px auto 0" }}>
            {YPV_VALUE.map(([icon, title, body]) => <YpvCard key={title} icon={icon} title={title} body={body} tint="emerald" />)}
          </div>
        </Reveal>
      </YpvSection>

      {/* 5 ── White-label */}
      <YpvSection bg="/assets/images/yachting-business.webp" bgOpacity={0.09}>
        <Reveal>
          <YpvHead title={<>Offer YachtingPrivacy<br /><span style={{ color: "var(--cyan)" }}>under your own brand</span>.</>}
            intro="YachtingPrivacy is available as a white-labelled product for yacht managers, family offices, and maritime security advisors. Run privacy-exposure scans across your entire managed fleet, deliver reports under your own logo and domain, and bake routine exposure monitoring into the service you already provide your principals." />
          <div className="ypv-value" style={{ maxWidth: 980, margin: "36px auto 0" }}>
            {YPV_WHITE_LABEL.map(([icon, title, body]) => <YpvCard key={title} icon={icon} title={title} body={body} />)}
          </div>
          <div style={{ textAlign: "center", marginTop: 34 }}>
            <Btn size="lg" onClick={() => go("contact-sales")} iconRight="ArrowRight">Talk to sales</Btn>
          </div>
        </Reveal>
      </YpvSection>

      {/* 6 ── Closing CTA — safe harbour behind; the suite footer follows in
             normal document flow (snap-foot). */}
      <YpvSection bg="/assets/images/harbor.webp" bgOpacity={0.35} scrim>
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: 560, margin: "0 auto" }}>
            <h2 style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: "clamp(24px,3vw,36px)", lineHeight: 1.2,
              letterSpacing: "-0.01em", color: "var(--ink)", margin: 0 }}>
              Ready to understand<br />
              your yacht's <span style={{ color: "var(--cyan)" }}>exposure</span>?
            </h2>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 15.5, lineHeight: 1.7, color: "var(--ink-2)",
              margin: "16px auto 28px", maxWidth: 460 }}>
              Talk to our team about a privacy-exposure scan for your vessel — or continuous monitoring across a managed fleet.
            </p>
            <Btn size="lg" onClick={() => go("contact-sales")} iconRight="ArrowRight">Contact sales</Btn>
          </div>
        </Reveal>
      </YpvSection>
    </div>
  );
}

Object.assign(window, { PrivacyPage });
