/* global React */
// Top navigation + footer + magic-link sign-in modal.
const { Icon, Wordmark, Btn, Access } = window;

// ---- mega-menu panels ----
function OnBoardMenu({ go, close }) {
  const items = [
    { icon: "Bot", name: "Yachting Agents", desc: "AI agents connected to your data — deployed on board.", act: () => go("onboard", "agents") },
    { icon: "Boxes", name: "Modular Architecture", desc: "Select from the marketplace or customize.", act: () => go("onboard", "modules") },
    { icon: "Radio", name: "IoT", desc: "Connect to your vessel's data — sensors, navigation and systems.", act: () => go("onboard", "iot") },
    { icon: "Cloud", name: "Local & Cloud Deployments", desc: "Run on board or in the cloud — with or without connectivity.", act: () => go("onboard", "runs") }];
  return (
    <div style={{ padding: 14, width: 460 }}>
      <div style={{ padding: "4px 10px 14px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".16em",
          textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 9 }}>For yachts</div>
        <div style={{ fontFamily: "var(--font-head)", fontSize: 18.5, color: "var(--ink)", lineHeight: 1.2 }}>Deploy AI Agents in your Yacht Operations</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 12 }}>
          {["New builds & retrofit", "End-to-end solutions"].map((t) => (
            <span key={t} style={{ fontFamily: "var(--font-ui)", fontSize: 12, color: "var(--ink-2)",
              padding: "5px 11px", borderRadius: 999, border: "1px solid var(--hairline-2)", background: "var(--panel)" }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map((m) => (
          <button key={m.name} onClick={() => { m.act(); close(); }} className="menu-item"
            style={{ all: "unset", cursor: "pointer", display: "flex", alignItems: "flex-start", gap: 12, padding: "11px 10px",
              borderRadius: 11, transition: "background .2s" }}>
            <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 11, background: "rgba(250,204,21,.06)", border: "1px solid rgba(250,204,21,.2)",
              display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={m.icon} size={18} /></span>
            <span style={{ flex: 1 }}>
              <span style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: 14.5, fontWeight: 600, color: "var(--ink)" }}>{m.name}</span>
              <span style={{ display: "block", fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 12.5, color: "var(--ink-3)", marginTop: 3, lineHeight: 1.5 }}>{m.desc}</span>
            </span>
          </button>
        ))}
      </div>
      <button onClick={() => { go("onboard"); close(); }} className="menu-foot"
        style={{ all: "unset", cursor: "pointer", display: "flex", alignItems: "center", gap: 7, marginTop: 10, padding: "9px 10px",
          borderRadius: 9, fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--ink-2)", transition: "color .2s" }}>
        About onboard deployments <Icon name="ArrowRight" size={14} />
      </button>
    </div>
  );
}

function OnShoreMenu({ go, close }) {
  const P = window.PRODUCTS || {};
  const custom = P.custom;
  const items = (window.ONSHORE_MENU || []).map((k) => P[k]).filter(Boolean);
  return (
    <div style={{ padding: 14, width: 620, display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 14 }}>
      {/* featured */}
      <button onClick={() => { go("product:custom"); close(); }} className="menu-feature"
        style={{ all: "unset", cursor: "pointer", padding: 18, borderRadius: 15, border: "1px solid rgba(250,204,21,.26)",
          background: "linear-gradient(165deg, rgba(250,204,21,.1), rgba(250,204,21,.02))", display: "flex", flexDirection: "column", transition: "border-color .2s" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase",
          color: "var(--cyan-2)", marginBottom: "auto" }}>Core service</div>
        <span style={{ width: 42, height: 42, borderRadius: 12, background: "rgba(250,204,21,.12)", border: "1px solid rgba(250,204,21,.28)",
          display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)", margin: "20px 0 13px" }}><Icon name={custom.icon} size={21} /></span>
        <div style={{ fontFamily: "var(--font-head)", fontSize: 21, color: "var(--ink)", lineHeight: 1.1 }}>{custom.name}</div>
        <div style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, color: "var(--ink-2)", marginTop: 7, lineHeight: 1.5 }}>{custom.tagline}</div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 14, fontFamily: "var(--font-ui)", fontSize: 13,
          fontWeight: 500, color: "var(--cyan-2)" }}>Learn more <Icon name="ArrowRight" size={14} /></span>
      </button>
      {/* list */}
      <div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".16em", textTransform: "uppercase",
          color: "var(--ink-4)", padding: "4px 8px 8px" }}>Tools, data & foundation</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {items.map((p) => (
            <button key={p.key} onClick={() => { go("product:" + p.key); close(); }} className="menu-item"
              style={{ all: "unset", cursor: "pointer", display: "flex", alignItems: "center", gap: 12, padding: "10px 10px",
                borderRadius: 11, transition: "background .2s" }}>
              <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: 9, background: "rgba(250,204,21,.07)", border: "1px solid rgba(250,204,21,.15)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={p.icon} size={16} /></span>
              <span style={{ flex: 1 }}>
                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{p.name}</span>
                  <Access state={p.access} mini />
                </span>
                <span style={{ display: "block", fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{p.tagline}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---- Resources mega-menu ----
function ResourcesMenu({ go, close }) {
  const items = [
    { icon: "Newspaper", name: "Yachting News", desc: "An AI + yachting digest — the tools, models and developments that matter, in plain terms.", badge: "Free forever" },
    { icon: "Workflow", name: "Simulation", desc: "Test scenarios, generate SOPs and benchmark models before anything goes live." },
    { icon: "Building2", name: "AI in Yachting Companies", desc: "How real yachting businesses are putting AI to work — a growing directory." }];
  return (
    <div style={{ padding: 14, width: 400 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600, letterSpacing: ".16em", textTransform: "uppercase",
        color: "var(--ink-4)", padding: "4px 8px 10px" }}>Resources</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {items.map((r) => (
          <button key={r.name} onClick={close} className="menu-item"
            style={{ all: "unset", cursor: "pointer", display: "flex", alignItems: "flex-start", gap: 12, padding: "11px 10px",
              borderRadius: 11, transition: "background .2s" }}>
            <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: 9, background: "rgba(250,204,21,.07)", border: "1px solid rgba(250,204,21,.15)",
              display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}><Icon name={r.icon} size={16} /></span>
            <span style={{ flex: 1 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{r.name}</span>
                {r.badge && <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase",
                  color: "var(--good)", padding: "2px 7px", borderRadius: 999, background: "rgba(52,211,153,.1)", border: "1px solid rgba(52,211,153,.28)" }}>{r.badge}</span>}
              </span>
              <span style={{ display: "block", fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 12, color: "var(--ink-3)", marginTop: 3, lineHeight: 1.5 }}>{r.desc}</span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function Nav({ route, go, solid, onSignIn, progress }) {
  const [open, setOpen] = React.useState(null); // 'board' | 'shore' | null
  const closeT = React.useRef(null);
  const enter = (k) => { clearTimeout(closeT.current); setOpen(k); };
  const leave = () => { clearTimeout(closeT.current); closeT.current = setTimeout(() => setOpen(null), 140); };
  const close = () => { clearTimeout(closeT.current); setOpen(null); };

  const isBoard = route === "onboard";
  const isShore = route.indexOf("product:") === 0;

  const trigger = (label, k, active) => (
    <button onMouseEnter={() => enter(k)} onClick={() => enter(open === k ? null : k)}
      style={{ all: "unset", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 13.5, fontWeight: 400, letterSpacing: ".01em",
        color: active || open === k ? "var(--ink)" : "var(--ink-3)", transition: "color .25s", padding: "6px 2px",
        display: "inline-flex", alignItems: "center", gap: 5, whiteSpace: "nowrap" }}>
      {label}<Icon name="ChevronDown" size={14} style={{ opacity: .7, transform: open === k ? "rotate(180deg)" : "none", transition: "transform .25s" }} />
    </button>
  );

  return (
    <nav onMouseLeave={leave} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      background: solid || open ? "rgba(11,31,51,.82)" : "transparent",
      borderBottom: `1px solid ${solid || open ? "var(--hairline)" : "transparent"}`,
      backdropFilter: solid || open ? "blur(16px) saturate(1.2)" : "none", transition: "background .4s, border-color .4s" }}>
      <div style={{ height: 3, background: "rgba(255,255,255,.04)" }}>
        <div style={{ height: "100%", width: `${progress * 100}%`, background: "linear-gradient(90deg, var(--cyan-deep), var(--cyan))",
          transition: "width .1s linear", opacity: progress > 0.005 ? 1 : 0 }} />
      </div>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 32px", height: 69, display: "flex",
        alignItems: "center", justifyContent: "space-between" }}>
        <button onClick={() => { go("home"); close(); }} style={{ all: "unset", cursor: "pointer" }}><Wordmark /></button>
        <div style={{ display: "flex", alignItems: "center", gap: 30 }}>
          <div className="nav-links" style={{ display: "flex", gap: 28, position: "relative" }}>
            {trigger("For Yachts", "board", isBoard)}
            {trigger("For Yachting Businesses", "shore", isShore)}
            {trigger("Resources", "resources", false)}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <button onClick={onSignIn} title="Sign in" style={{ all: "unset", cursor: "pointer", display: "inline-flex",
              padding: 9, borderRadius: 10, color: "var(--ink-3)", border: "1px solid var(--hairline)", transition: "all .25s" }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.borderColor = "var(--hairline-2)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-3)"; e.currentTarget.style.borderColor = "var(--hairline)"; }}>
              <Icon name="Lock" size={15} />
            </button>
            <Btn size="sm" onClick={() => { go("onboarding"); close(); }} iconRight="ArrowRight">Begin Onboarding</Btn>
          </div>
        </div>
      </div>

      {/* dropdown panel */}
      {open && (
        <div onMouseEnter={() => enter(open)} className="ymdrop" style={{ position: "absolute", top: 69,
          left: 0, right: 0, display: "flex", justifyContent: "center", pointerEvents: "none" }}>
          <div style={{ pointerEvents: "auto", marginTop: 8, borderRadius: 18, background: "rgba(13,29,46,.97)",
            border: "1px solid var(--hairline-2)", boxShadow: "0 36px 90px -34px rgba(0,0,0,.85)", overflow: "hidden" }}>
            {open === "board" ? <OnBoardMenu go={go} close={close} /> : open === "shore" ? <OnShoreMenu go={go} close={close} /> : <ResourcesMenu go={go} close={close} />}
          </div>
        </div>
      )}
    </nav>
  );
}

function SignInModal({ open, onClose }) {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (open) { setSent(false); setEmail(""); } }, [open]);
  if (!open) return null;
  const valid = /.+@.+\..+/.test(email);
  return (
    <div onClick={onClose} className="ymfade" style={{ position: "fixed", inset: 0, zIndex: 90, background: "rgba(4,12,20,.72)",
      backdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 420, background: "var(--surface)",
        border: "1px solid var(--hairline-2)", borderRadius: 20, padding: 32, boxShadow: "0 40px 120px -30px rgba(0,0,0,.8)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, background: "rgba(250,204,21,.1)",
            border: "1px solid rgba(250,204,21,.24)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cyan-2)" }}>
            <Icon name={sent ? "MailCheck" : "Lock"} size={20} />
          </div>
          <button onClick={onClose} style={{ all: "unset", cursor: "pointer", color: "var(--ink-3)" }}><Icon name="X" size={18} /></button>
        </div>
        {!sent ? (
          <>
            <h3 style={{ fontFamily: "var(--font-head)", fontSize: 23, color: "var(--ink)", margin: "0 0 6px" }}>Sign in</h3>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 20px" }}>
              No passwords. We'll email you a secure magic link.
            </p>
            <form onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@yourcompany.yachts" autoFocus
                style={{ width: "100%", fontFamily: "var(--font-ui)", fontSize: 14.5, color: "var(--ink)", padding: "13px 15px",
                  borderRadius: 11, border: "1px solid var(--hairline-2)", background: "var(--panel)", outline: "none", marginBottom: 14 }}
                onFocus={(e) => e.target.style.borderColor = "var(--cyan)"} onBlur={(e) => e.target.style.borderColor = "var(--hairline-2)"} />
              <Btn full disabled={!valid} iconRight="ArrowRight">Send magic link</Btn>
            </form>
          </>
        ) : (
          <>
            <h3 style={{ fontFamily: "var(--font-head)", fontSize: 23, color: "var(--ink)", margin: "0 0 6px" }}>Check your inbox</h3>
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 20px" }}>
              A secure sign-in link is on its way to<br /><span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--cyan-2)" }}>{email}</span>
            </p>
            <Btn full variant="ghost" onClick={onClose}>Done</Btn>
          </>
        )}
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--hairline)", display: "flex", gap: 8,
          alignItems: "center", fontFamily: "var(--font-ui)", fontSize: 11.5, color: "var(--ink-4)" }}>
          <Icon name="ShieldCheck" size={14} color="var(--ink-3)" /> GDPR · EU data residency · privacy by design
        </div>
      </div>
    </div>
  );
}

// Legal content — grounded in the facts stated on yachtmind.ai + Metamaxis Analytics (Ibiza, ES).
// NOTE: summaries to make the footer functional; replace `body` with the authoritative full text.
const LEGAL = {
  privacy: {
    title: "Privacy Policy",
    updated: "Last updated: 4 March 2026",
    body: [
      { h: "1. Introduction", p: [
        "YachtingStack (\"we\", \"us\", \"our\") is committed to protecting your privacy and ensuring the security of your Personal Data. This Privacy Policy explains how we collect, use, store, and protect your information in compliance with the EU General Data Protection Regulation (GDPR), the ePrivacy Directive, and other applicable data protection laws.",
        "The Data Controller for the Personal Data we process through our Service is:"],
        box: ["Metamaxis Analytics SL", "Ibiza, Balearic Islands, Spain", "CIF: ESB16994972", "Email: privacy@YachtingStack.ai"] },
      { h: "2. Data We Collect", p: ["We collect the following categories of Personal Data:"], sub: [
        { h: "2.1 Information You Provide", items: [
          ["Account Data", "Name and email address when you create an account. Authentication is handled securely via our centralised identity provider (Supabase Auth)."],
          ["Business Data", "Business name, website URL, industry segment, geographic regions, and services offered."],
          ["Competitor Data", "Names and websites of competitors you choose to track."],
          ["Preference Data", "Language preferences and subscription tier selection."]] },
        { h: "2.2 Information We Generate", items: [
          ["AI Analysis Data", "Results from AI visibility checks, including brand mentions, sentiment analysis, competitor mentions, and positioning data."],
          ["Analytics Data", "Aggregated visibility scores and trend data derived from AI responses."]] },
        { h: "2.3 Automatically Collected Data", items: [
          ["Session Data", "Session identifiers for authentication purposes."],
          ["Usage Data", "Pages visited, features used, and timestamps of interactions."],
          ["Analytics Data (with consent)", "Page views, navigation patterns, scroll behaviour, clicks, and key events (e.g., login, report download) collected via Google Analytics and Contentsquare. This data is only collected if you accept analytics cookies."]] }] },
      { h: "3. Legal Basis for Processing", p: ["Under GDPR Article 6, we process your Personal Data on the following legal bases:"], items: [
        ["Contractual Necessity (Art. 6(1)(b))", "Processing your account and business data is necessary to provide the Service you have subscribed to."],
        ["Legitimate Interest (Art. 6(1)(f))", "We process usage and analytics data to improve the Service, ensure security, and prevent fraud. We have conducted a balancing test to ensure our interests do not override your rights."],
        ["Consent (Art. 6(1)(a))", "Where required, we obtain your explicit consent before processing (e.g., for marketing communications). You may withdraw consent at any time."],
        ["Legal Obligation (Art. 6(1)(c))", "We may process data to comply with legal requirements such as tax regulations or court orders."]] },
      { h: "4. How We Use Your Data", items: [
        "To provide and maintain the AI visibility tracking Service.",
        "To authenticate your identity and manage your account.",
        "To run AI visibility checks using your business information.",
        "To generate analytics and reports about your AI visibility.",
        "To track competitor mentions and provide comparative insights.",
        "To improve and develop new features for the Service.",
        "To communicate with you about your account, service updates, and (with consent) marketing.",
        "To ensure the security and integrity of the Service."] },
      { h: "5. Data Sharing and Third Parties", p: ["We share your data with the following categories of third parties:"], items: [
        ["AI Service Providers", "We send business-related query data (not personal identification data) to OpenAI, Anthropic, and Google to perform AI visibility analysis. These providers process data according to their respective privacy policies."],
        ["Analytics Providers (with consent)", "If you accept analytics cookies, we use Google Analytics (GA4) to collect page views and usage events, and Contentsquare for session recording and heatmaps. Google processes analytics data according to their privacy policy. Contentsquare processes data according to their privacy centre. These services are only activated after you explicitly consent via our cookie banner."],
        ["Email Service Provider", "We use Mailjet to send transactional and notification emails. Mailjet processes your email address and name according to their privacy policy."],
        ["Hosting Providers", "Our Service is hosted on infrastructure that may store data in data centres within and outside the EEA, with appropriate safeguards in place."],
        ["Payment Processors", "If you purchase a paid subscription, payment data is processed by our payment provider. We do not store full payment card details."]],
        note: "We do not sell your Personal Data to any third party. We do not share your data for advertising purposes." },
      { h: "6. International Data Transfers", p: ["Some of our third-party service providers (including AI providers) may process data outside the European Economic Area (EEA). Where this occurs, we ensure appropriate safeguards are in place, including:"], items: [
        "EU Standard Contractual Clauses (SCCs) approved by the European Commission.",
        "Adequacy decisions by the European Commission where applicable.",
        "Binding Corporate Rules where applicable."],
        note: "You may request a copy of the safeguards we use by contacting us." },
      { h: "7. Data Retention", p: ["We retain your Personal Data only for as long as necessary to fulfil the purposes for which it was collected:"], items: [
        ["Account Data", "Retained for the duration of your account. Deleted within 30 days of account deletion request."],
        ["AI Analysis Data", "Retained for 24 months to provide historical trend analysis, unless you request earlier deletion."],
        ["Usage Data", "Retained in anonymised or aggregated form for up to 24 months for service improvement purposes."],
        ["Billing Data", "Retained for 7 years as required by applicable tax and accounting regulations."]] },
      { h: "8. Your Rights Under GDPR", p: ["Under the GDPR, you have the following rights regarding your Personal Data:"], items: [
        ["Right of Access (Art. 15)", "You can request a copy of the Personal Data we hold about you."],
        ["Right to Rectification (Art. 16)", "You can request correction of inaccurate or incomplete data."],
        ["Right to Erasure (Art. 17)", "You can request deletion of your Personal Data (\"right to be forgotten\"), subject to legal retention requirements."],
        ["Right to Restrict Processing (Art. 18)", "You can request that we limit how we process your data."],
        ["Right to Data Portability (Art. 20)", "You can request your data in a structured, commonly used, machine-readable format."],
        ["Right to Object (Art. 21)", "You can object to processing based on legitimate interests or for direct marketing."],
        ["Right to Withdraw Consent (Art. 7(3))", "Where processing is based on consent, you can withdraw it at any time without affecting the lawfulness of prior processing."],
        ["Right to Lodge a Complaint", "You have the right to lodge a complaint with your local Data Protection Authority (DPA)."]],
        sub: [{ p: ["You can exercise several of these rights directly within the application:"], items: [
          ["Data Export", "Go to Settings and click \"Export Data\" to download all your Personal Data in a machine-readable JSON format."],
          ["Account Deletion", "Go to Settings and click \"Delete Account\" to permanently erase your account and all associated data."],
          ["Email Preferences", "Manage your email notification preferences in Settings to control marketing and digest communications."]] }],
        note: "For any other requests, please contact us at privacy@YachtingStack.ai. We will respond within 30 days." },
      { h: "9. Data Security", p: ["We implement appropriate technical and organisational measures to protect your Personal Data, including:"], items: [
        "Encryption of data in transit using TLS/SSL.",
        "JWT-based authentication with cryptographic signature verification (JWKS).",
        "Centralised identity management via Supabase Auth with secure token handling.",
        "Regular security assessments and monitoring.",
        "Access controls limiting data access to authorised personnel only."] },
      { h: "10. Cookies and Tracking", p: [
        "We use essential cookies that are strictly necessary for the functioning of the Service (e.g., session cookies for authentication). These do not require consent under the ePrivacy Directive as they are necessary for the service you have requested.",
        "We do not use advertising cookies, tracking pixels, or third-party analytics cookies. A cookie consent banner is displayed on your first visit, allowing you to accept or decline non-essential cookies. If we introduce non-essential cookies in the future, we will obtain your prior consent through this mechanism."] },
      { h: "11. Children's Privacy", p: ["The Service is not intended for individuals under the age of 16. We do not knowingly collect Personal Data from children. If we become aware that we have collected data from a child under 16, we will take steps to delete it promptly."] },
      { h: "12. Data Protection Officer", p: ["For all data protection enquiries, you may contact our Data Protection Officer at:"],
        box: ["Fabrizio Ottoni Limena, CEO", "Data Protection Officer", "Metamaxis Analytics SL", "Ibiza, Balearic Islands, Spain", "Email: privacy@YachtingStack.ai"] },
      { h: "13. Changes to This Policy", p: ["We may update this Privacy Policy from time to time. We will notify you of material changes by email or through the Service at least 30 days before the changes take effect. Your continued use of the Service after the effective date constitutes acceptance. We encourage you to review this page periodically."] },
      { h: "14. Contact Us", p: ["If you have any questions about this Privacy Policy or wish to exercise your data protection rights, please contact us at:"],
        box: ["Metamaxis Analytics SL", "Ibiza, Balearic Islands, Spain", "CIF: ESB16994972", "Email: privacy@YachtingStack.ai"],
        note: "You also have the right to lodge a complaint with your national Data Protection Authority. A list of EEA DPAs can be found on the European Data Protection Board website." },
    ],
  },
  terms: {
    title: "Terms & Conditions",
    updated: "Last updated: 4 March 2026",
    body: [
      { h: "1. Introduction", p: ["Welcome to YachtingStack (\"Service\"), operated by YachtingStack (\"we\", \"us\", \"our\"). These Terms and Conditions (\"Terms\") govern your use of our website and services. By accessing or using the Service, you agree to be bound by these Terms. If you do not agree, please do not use the Service."] },
      { h: "2. Definitions", items: [
        "\"User\" refers to any individual or entity that registers for or uses the Service.",
        "\"Personal Data\" has the meaning given under the EU General Data Protection Regulation (GDPR).",
        "\"Data Controller\" means YachtingStack, which determines the purposes and means of processing Personal Data.",
        "\"Processing\" means any operation performed on Personal Data, as defined by the GDPR."] },
      { h: "3. Account Registration", p: ["To use certain features of the Service, you must create an account. You agree to provide accurate, current, and complete information during registration. You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account."] },
      { h: "4. Service Description", p: ["YachtingStack provides AI visibility tracking and monitoring services for the yachting industry. The Service analyses how businesses appear in AI-generated responses, tracks competitor mentions, and provides analytics and insights. Results are generated by third-party AI models and may not be fully accurate or comprehensive."] },
      { h: "5. Subscription and Payment", p: ["Access to certain features may require a paid subscription. Subscription fees, billing cycles, and payment terms will be clearly displayed at the time of purchase. You authorise us to charge your selected payment method for recurring subscription fees. You may cancel your subscription at any time, with cancellation taking effect at the end of the current billing period."] },
      { h: "6. Acceptable Use", p: ["You agree not to:"], items: [
        "Use the Service for any unlawful purpose or in violation of any applicable laws or regulations.",
        "Attempt to gain unauthorised access to the Service or its related systems.",
        "Interfere with or disrupt the integrity or performance of the Service.",
        "Reproduce, duplicate, copy, sell, or exploit any portion of the Service without express permission.",
        "Use automated scripts or bots to access the Service beyond its intended functionality."] },
      { h: "7. Intellectual Property", p: ["All content, features, and functionality of the Service, including but not limited to text, graphics, logos, and software, are the exclusive property of YachtingStack and are protected by international copyright, trademark, and other intellectual property laws. You retain ownership of your business data that you provide to the Service."] },
      { h: "8. Data Protection and GDPR Compliance", p: ["We process Personal Data in accordance with the EU General Data Protection Regulation (GDPR) and applicable data protection laws. Key points include:"], items: [
        ["Legal Basis", "We process your data based on contractual necessity (to provide the Service), legitimate interests (to improve our Service), and your consent where required."],
        ["Data Minimisation", "We collect only the Personal Data necessary to provide and improve the Service."],
        ["Your Rights", "You have the right to access, rectify, erase, restrict processing, port your data, and object to processing. See our Privacy Policy for full details."],
        ["Data Transfers", "If we transfer data outside the EEA, we ensure appropriate safeguards are in place (e.g., Standard Contractual Clauses)."],
        ["Data Breach", "We will notify the relevant supervisory authority within 72 hours of becoming aware of a personal data breach, and affected users without undue delay where required."]],
        note: "For full details on how we handle your data, please refer to our Privacy Policy." },
      { h: "9. Third-Party Services", p: ["The Service integrates with third-party AI platforms (such as OpenAI) to provide visibility analysis. We are not responsible for the accuracy, availability, or content of third-party services. Your use of such third-party services is subject to their respective terms and privacy policies."] },
      { h: "10. Disclaimers and Limitation of Liability", p: ["The Service is provided \"as is\" and \"as available\" without warranties of any kind, either express or implied. We do not guarantee that:"], items: [
        "AI-generated results will be accurate, complete, or current.",
        "The Service will be uninterrupted, secure, or error-free.",
        "Results will meet your specific requirements or expectations."],
        note: "To the fullest extent permitted by law, YachtingStack shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from your use of the Service." },
      { h: "11. Indemnification", p: ["You agree to indemnify and hold harmless YachtingStack and its officers, directors, employees, and agents from any claims, damages, losses, or expenses (including reasonable legal fees) arising from your use of the Service or violation of these Terms."] },
      { h: "12. Termination", p: ["We may terminate or suspend your access to the Service immediately, without prior notice, if you breach these Terms. Upon termination, your right to use the Service ceases immediately. You may request deletion of your account and associated Personal Data at any time, in accordance with your rights under the GDPR."] },
      { h: "13. Changes to Terms", p: ["We reserve the right to modify these Terms at any time. We will notify you of material changes by email or through the Service. Your continued use of the Service after such changes constitutes acceptance of the updated Terms. If you do not agree to the updated Terms, you must stop using the Service."] },
      { h: "14. Governing Law and Jurisdiction", p: ["These Terms are governed by the laws of the European Union and the applicable member state where YachtingStack is established. Any disputes shall be subject to the exclusive jurisdiction of the competent courts of that jurisdiction, without prejudice to your right to bring proceedings in your member state of residence under the GDPR."] },
      { h: "15. Contact Information", p: ["If you have any questions about these Terms, please contact us at:"],
        box: ["YachtingStack", "Email: legal@YachtingStack.ai"] },
    ],
  },
  gdpr: {
    title: "GDPR (AEPD)",
    updated: "Last updated July 2026",
    body: [
      ["Lawful basis", "We process personal data under the GDPR on the bases of consent, legitimate interest and the performance of a contract, depending on the activity."],
      ["Data residency", "Personal data is processed within the EU. Local deployments keep vessel and business data on owner-controlled infrastructure."],
      ["Exercising your rights", "To exercise any GDPR right, contact privacy@yachtingstack.ai. You also have the right to lodge a complaint with the AEPD (www.aepd.es)."],
    ],
  },
};

function LegalList({ items }) {
  return (
    <ul style={{ margin: "8px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((it, i) => (
        <li key={i} style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
          <span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: "50%", background: "var(--cyan-2)", marginTop: 8 }} />
          <span style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, lineHeight: 1.65, color: "var(--ink-2)" }}>
            {Array.isArray(it) ? <span><span style={{ fontWeight: 600, color: "var(--ink)" }}>{it[0]}:</span> {it[1]}</span> : it}
          </span>
        </li>
      ))}
    </ul>
  );
}

function LegalModal({ doc, onClose }) {
  if (!doc) return null;
  const d = LEGAL[doc];
  return (
    <div onClick={onClose} className="ymfade" style={{ position: "fixed", inset: 0, zIndex: 95, background: "rgba(4,12,20,.72)",
      backdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 620, maxHeight: "82vh", overflow: "auto", background: "var(--surface)",
        border: "1px solid var(--hairline-2)", borderRadius: 20, padding: "30px 34px 34px", boxShadow: "0 40px 120px -30px rgba(0,0,0,.8)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", position: "sticky", top: 0 }}>
          <div>
            <h3 style={{ fontFamily: "var(--font-head)", fontSize: 25, color: "var(--ink)", margin: 0 }}>{d.title}</h3>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", marginTop: 6, letterSpacing: ".04em" }}>{d.updated}</div>
          </div>
          <button onClick={onClose} style={{ all: "unset", cursor: "pointer", color: "var(--ink-3)" }}><Icon name="X" size={20} /></button>
        </div>
        <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 22 }}>
          {d.body.map((row, si) => {
            const s = Array.isArray(row) ? { h: row[0], p: [row[1]] } : row;
            const lp = { fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 14, lineHeight: 1.7, color: "var(--ink-2)", margin: "0 0 8px" };
            return (
              <div key={si}>
                {s.h && <div style={{ fontFamily: "var(--font-ui)", fontSize: 15.5, fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>{s.h}</div>}
                {s.p && s.p.map((para, i) => <p key={i} style={lp}>{para}</p>)}
                {s.box && (
                  <div style={{ margin: "10px 0", padding: "13px 15px", borderRadius: 11, background: "var(--panel)", border: "1px solid var(--hairline)" }}>
                    {s.box.map((line, i) => <div key={i} style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: i === 0 ? "var(--ink)" : "var(--ink-3)", lineHeight: 1.7 }}>{line}</div>)}
                  </div>
                )}
                {s.items && <LegalList items={s.items} />}
                {s.sub && s.sub.map((g, gi) => (
                  <div key={gi} style={{ marginTop: 12 }}>
                    {g.h && <div style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, fontWeight: 600, color: "var(--ink-2)", marginBottom: 6 }}>{g.h}</div>}
                    {g.p && g.p.map((para, i) => <p key={i} style={lp}>{para}</p>)}
                    {g.items && <LegalList items={g.items} />}
                  </div>
                ))}
                {s.note && <p style={{ ...lp, margin: "12px 0 0" }}>{s.note}</p>}
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 26, paddingTop: 16, borderTop: "1px solid var(--hairline)", display: "flex", gap: 8,
          alignItems: "center", fontFamily: "var(--font-ui)", fontSize: 11.5, color: "var(--ink-4)" }}>
          <Icon name="ShieldCheck" size={14} color="var(--ink-3)" /> Metamaxis Analytics · Ibiza, Spain · GDPR · AEPD
        </div>
      </div>
    </div>
  );
}

function Footer({ go }) {
  const [legal, setLegal] = React.useState(null);
  const cols = [
    ["For Yachts", [["Yachting Agents", () => go("onboard", "agents")], ["Department Modules", () => go("onboard", "modules")], ["IoT & Integrations", () => go("onboard", "iot")], ["Cloud & Local", () => go("onboard", "runs")]]],
    ["For Yachting Businesses", [["Custom Development", () => go("product:custom")], ["Yachting Agents", () => go("product:agents")], ["Yachting Visibility", () => go("product:visibility")], ["Yachting Privacy", () => go("product:privacy")]]],
    ["Resources", [["Yachting News", () => {}], ["Simulation", () => {}], ["AI in Yachting Companies", () => {}]]],
    ["Legal", [["Privacy Policy", () => setLegal("privacy")], ["Terms & Conditions", () => setLegal("terms")], ["GDPR (AEPD)", () => setLegal("gdpr")]]],
  ];
  return (
    <footer className="snap-foot" style={{ position: "relative", borderTop: "1px solid var(--hairline)", background: "var(--bg-deep)" }}>
      <LegalModal doc={legal} onClose={() => setLegal(null)} />
      <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 160, height: 1,
        background: "linear-gradient(90deg, transparent, rgba(250,204,21,.4), transparent)" }} />
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "72px 32px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1.1fr 1fr 1fr", gap: 32 }}>
          <div>
            <Wordmark />
            <p style={{ fontFamily: "var(--font-ui)", fontWeight: 300, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.6, margin: "16px 0 0", maxWidth: 230 }}>
              End-to-end AI for yachts and yachting businesses.
            </p>
          </div>
          {cols.map(([h, links]) => (
            <div key={h}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: ".16em",
                textTransform: "uppercase", color: "var(--ink-4)", marginBottom: 16 }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {links.map(([l, fn]) => (
                  <button key={l} onClick={fn} style={{ all: "unset", cursor: "pointer", fontFamily: "var(--font-ui)",
                    fontSize: 13.5, color: "var(--ink-3)", transition: "color .25s", textAlign: "left" }}
                    onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"}
                    onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-3)"}>{l}</button>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--hairline)", display: "flex",
          justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: 12, color: "var(--ink-4)" }}>© {new Date().getFullYear()} YachtingStack · Ibiza, Spain</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, SignInModal, Footer });
