// Shared primitives for the three landing-page directions.
// Hi-fi wireframe components built on YachtWay tokens.

const { useState, useRef, useEffect, useMemo } = React;

// ── Tiny inline icons (1.5px stroke) ─────────────────────────────
const Ic = {
  check: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4 10-10"/></svg>
  ),
  x: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
  ),
  arrow: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14m-5-5 5 5-5 5"/></svg>
  ),
  plus: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>
  ),
  minus: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/></svg>
  ),
  chevron: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  ),
  play: (p={}) => (
    <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7Z"/></svg>
  ),
};

// ── YachtWay logo lockup (text + brand strip) ─────────────────────
const YwLogo = ({ light = false }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    <div style={{ width: 4, height: 22, background: "var(--brand-500)", borderRadius: 2 }}/>
    <div style={{
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18,
      letterSpacing: "-0.02em", color: light ? "#fff" : "var(--gray-900)"
    }}>
      YachtWay
    </div>
  </div>
);

// ── Top nav, shared across directions ─────────────────────────────
const Nav = ({ tone = "light" }) => {
  const isDark = tone === "dark";
  const fg = isDark ? "rgba(255,255,255,.85)" : "var(--gray-700)";
  return (
    <nav style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "20px 64px",
      background: isDark ? "transparent" : "rgba(255,255,255,.92)",
      backdropFilter: "blur(8px)",
      borderBottom: isDark ? "1px solid rgba(255,255,255,.08)" : "1px solid var(--border-subtle)",
      position: "sticky", top: 0, zIndex: 50,
    }}>
      <YwLogo light={isDark}/>
      <div style={{ display: "flex", gap: 32, fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 14, color: fg }}>
        <span>Platform</span>
        <span>Pricing</span>
        <span>Reach</span>
        <span>Tools</span>
        <span>Studio</span>
      </div>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 14, color: fg }}>Sign in</span>
        <button style={{
          padding: "10px 18px", background: "var(--brand-500)", color: "#fff",
          border: "none", borderRadius: 8, fontFamily: "var(--font-body)",
          fontWeight: 600, fontSize: 14, cursor: "pointer",
        }}>Get Started</button>
      </div>
    </nav>
  );
};

// ── Footer (light) ────────────────────────────────────────────────
const Footer = () => (
  <footer style={{
    padding: "64px 64px 40px",
    background: "var(--gray-950)", color: "rgba(255,255,255,.6)",
    fontFamily: "var(--font-body)", fontSize: 13,
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 48 }}>
      <YwLogo light/>
      <div style={{ display: "flex", gap: 56 }}>
        {["Platform","Pricing","Studio","Live","Company"].map(c => (
          <div key={c} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ color: "#fff", fontWeight: 600, marginBottom: 6 }}>{c}</div>
            <span>Link</span><span>Link</span><span>Link</span>
          </div>
        ))}
      </div>
    </div>
    <div style={{
      display: "flex", justifyContent: "space-between",
      paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.08)",
      fontSize: 13,
    }}>
      <span>© 2026 YachtWay. Monaco.</span>
      <span>Privacy · Terms · Contact</span>
    </div>
  </footer>
);

// ── Eyebrow ───────────────────────────────────────────────────────
const Eyebrow = ({ children, tone="default" }) => (
  <div style={{
    fontFamily: "var(--font-ui)", fontWeight: 500, fontSize: 13,
    letterSpacing: ".12em", textTransform: "uppercase",
    color: tone === "light" ? "rgba(255,255,255,.6)" : "var(--brand-500)",
    marginBottom: 20,
  }}>
    {children}
  </div>
);

// ── Section heading ───────────────────────────────────────────────
const SectionHead = ({ eyebrow, title, sub, align="left", tone="default" }) => (
  <div style={{
    textAlign: align, maxWidth: align==="center" ? 880 : 760,
    marginLeft: align==="center" ? "auto" : 0, marginRight: align==="center" ? "auto" : 0,
    marginBottom: 64,
  }}>
    {eyebrow && <Eyebrow tone={tone}>{eyebrow}</Eyebrow>}
    <h2 style={{
      fontFamily: "var(--font-display)", fontWeight: 700,
      fontSize: 64, lineHeight: 1.05, letterSpacing: "-0.025em",
      color: tone === "light" ? "#fff" : "var(--gray-900)",
      margin: 0, marginBottom: sub ? 24 : 0,
      textWrap: "balance",
    }}>{title}</h2>
    {sub && (
      <p style={{
        fontFamily: "var(--font-body)", fontWeight: 400,
        fontSize: 20, lineHeight: 1.5,
        color: tone === "light" ? "rgba(255,255,255,.7)" : "var(--gray-600)",
        margin: 0, textWrap: "pretty",
      }}>{sub}</p>
    )}
  </div>
);

// ── Primary / Secondary CTA ───────────────────────────────────────
const CTA = ({ variant="primary", children, size="lg", tone="light" }) => {
  const styles = {
    primary: { background: "var(--brand-500)", color: "#fff", border: "none" },
    secondary: tone === "dark"
      ? { background: "rgba(255,255,255,.08)", color: "#fff", border: "1px solid rgba(255,255,255,.18)" }
      : { background: "#fff", color: "var(--gray-900)", border: "1px solid var(--border)" },
    ghost: { background: "transparent",
      color: tone==="dark" ? "rgba(255,255,255,.85)" : "var(--gray-900)",
      border: "none" },
  }[variant];
  const sizing = {
    lg: { padding: "16px 26px", fontSize: 15 },
    md: { padding: "12px 20px", fontSize: 14 },
  }[size];
  return (
    <button style={{
      ...styles, ...sizing, borderRadius: 10,
      fontFamily: "var(--font-body)", fontWeight: 600,
      cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8,
      lineHeight: 1, transition: "all .15s",
    }}>
      {children}
    </button>
  );
};

// ── Count-up number on viewport entry ─────────────────────────────
const CountUp = ({ to, suffix="", prefix="", duration=1200, decimals=0, style }) => {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!ref.current) return;
    let started = false;
    const start = () => {
      if (started) return;
      started = true;
      const t0 = performance.now();
      const tick = (t) => {
        const p = Math.min((t - t0) / duration, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        setN(to * eased);
        if (p < 1) requestAnimationFrame(tick);
        else setN(to);
      };
      requestAnimationFrame(tick);
    };
    if (typeof IntersectionObserver === "undefined") { start(); return; }
    // If already on-screen at mount, just go.
    const r = ref.current.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh && r.bottom > 0) { start(); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) start(); });
    }, { threshold: 0, rootMargin: "0px 0px -10% 0px" });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  const formatted = decimals > 0
    ? n.toFixed(decimals)
    : Math.round(n).toLocaleString("en-US");
  return <span ref={ref} style={style}>{prefix}{formatted}{suffix}</span>;
};

// ── PRD content (single source of truth) ──────────────────────────
const CONTENT = {
  hero: {
    eyebrow: "For dealers, brokers, and shipyards",
    headline: "Stop paying to list your own inventory.",
    sub: "YachtWay is the operating system for the yacht trade. List free, run your team, close deals, and reach the buyers who are already watching.",
    stats: [
      { v: 450, suffix: "+", label: "Active dealers" },
      { v: 27, suffix: "", label: "Countries" },
      { v: 20, suffix: "M+", label: "Monthly reach" },
      { v: 500, suffix: "K", label: "YouTube subscribers" },
      { v: 0, prefix: "$", label: "Cost to list" },
    ],
  },
  journey: [
    { n: "01", phase: "Social Media", who: "Facebook, Instagram, TikTok", desc: "The buyer scrolls. They see a vessel they have not seen before. The decision begins here, before any search query is typed.", yw: "2.18M followers across IG, YouTube, FB, TikTok. 4.4M impressions in 90 days." },
    { n: "02", phase: "Search", who: "Google", desc: "The buyer searches a model name, a length, a manufacturer. They want a list of options to compare.", yw: "15.7% of YachtWay keywords land on Page 1. The largest competing inventory site lands at 1.0%." },
    { n: "03", phase: "Marketplace", who: "Listing platforms", desc: "The buyer opens listings, compares specs, photos, prices.", yw: "4.07 visits per listing per month. 9.3 times the per-listing visibility of the next platform." },
    { n: "04", phase: "Long-form video", who: "YouTube", desc: "Lean-back research. The buyer wants to see the vessel underway, hear the engine, watch a walkthrough.", yw: "500,000 subscribers. 7:07 average view duration. 54.3% of views happen on a TV, not a phone." },
    { n: "05", phase: "Broker call", who: "You", desc: "The buyer arrives knowing what they want. The conversation is closing logistics, not selling.", yw: "EasyFund pre-approval, MasterCover quote, EasySign contracts. The deal closes the same day." },
    { n: "06", phase: "Boat show", who: "In person", desc: "The handshake. The signature. The walk-around. The decision was made weeks ago.", yw: "Platform Events publishes your show calendar to the same audience. No paid ads needed." },
  ],
  reach: [
    { metric: "Monthly social and content reach", yw: "20,000,000+", legacy: "Listing traffic only" },
    { metric: "YouTube subscribers", yw: "500,000", legacy: "None" },
    { metric: "Total video views", yw: "100,000,000+", legacy: "None" },
    { metric: "Editorial coverage", yw: "Fortune, Robb Report, Daily Mail, Red Dot Award", legacy: "Wikipedia listing links" },
    { metric: "Organic traffic trend", yw: "Growing", legacy: "Declining year over year" },
    { metric: "Visits per listing", yw: "4.07", legacy: "0.44" },
    { metric: "Domain authority", yw: "27, 100% editorial", legacy: "27, footer-link inflated" },
    { metric: "Content type", yw: "Original editorial, market reports, vessel features", legacy: "Listings only" },
  ],
  features: [
    { f: "Listing inventory", yw: "Free, unlimited", lp: "Paid subscription, tiered" },
    { f: "Listing cost", yw: "$0", lp: "$200 to $2,000+/month" },
    { f: "Broker team seats", yw: "$19/seat/month", lp: "Not offered" },
    { f: "Live streaming to buyers", yw: "YachtWay LIVE", lp: "Not offered" },
    { f: "Built-in buyer financing", yw: "EasyFund", lp: "Not offered" },
    { f: "Built-in insurance estimation", yw: "MasterCover", lp: "Not offered" },
    { f: "Digital contracts", yw: "EasySign", lp: "Not offered" },
    { f: "Vessel valuation at listing", yw: "VATO, free", lp: "Not offered" },
    { f: "Buyer scheduling", yw: "Schedule a Tour", lp: "Not offered" },
    { f: "Content production", yw: "YachtWay Studio", lp: "Not offered" },
    { f: "Dealer website with inventory sync", yw: "$2,500 setup + $250/mo", lp: "Not offered" },
    { f: "Listing analytics", yw: "NautiX, free", lp: "Basic or none" },
    { f: "3D Tour support", yw: "Free to embed", lp: "Not offered" },
    { f: "Editorial reach", yw: "20M+ monthly", lp: "None" },
    { f: "Dealer earns referral income", yw: "EasyFund and MasterCover", lp: "Not offered" },
    { f: "Red Dot Award recognition", yw: "Yes", lp: "No" },
    { f: "Fortune editorial coverage", yw: "Yes", lp: "No" },
    { f: "Organic traffic trend", yw: "Growing", lp: "Declining year over year" },
  ],
  pricing: {
    free: [
      "Unlimited listings",
      "Schedule a Tour",
      "NautiX range calculator",
      "Create Events",
      "3D Tour embedding",
      "Broker-friendly listing links",
    ],
    paid: [
      { name: "EasyFund", price: "Free", unit: "to enroll", desc: "Contact us to learn about the earning opportunity for your dealership.",
        details: {
          label: "How it works",
          headline: "We match qualified buyers with the right lender. You earn referral income on every funded deal.",
          intro: "EasyFund is YachtWay's loan-matching system. We match qualified buyers with the right bank from our wide selection of lenders. All loan applications are done through the YachtWay EasyFund system and matched using our proprietary AI underwriting tool.",
          bullets: [
            { k: "One application", v: "The buyer applies once through EasyFund. We route the file to the lenders most likely to approve, at the best rate, for their profile." },
            { k: "AI-matched underwriting", v: "Our proprietary AI underwriting tool scores the file in seconds and selects the right lender from our wide network of yacht-specialist banks." },
            { k: "Pre-approval before the broker call", v: "Buyers walk into the conversation with funding ready, so the deal closes faster and more often." },
            { k: "Dealer earns referral income", v: "Every EasyFund deal that funds pays the originating dealer. Free to enroll, no minimum volume." },
          ],
          bottom: "EasyFund is built into your YachtWay listings, your Dealer Website, and your EasySign workflow. Buyers find financing where they find the boat.",
        },
      },
      { name: "MasterCover", price: "Free", unit: "to enroll", desc: "Contact us to learn about the earning opportunity for your dealership." },
      { name: "EasySign", price: "$269", priceSuffix: "/mo", unit: "per month", desc: "Five deals included. YachtWay contract templates. Powered by DocuSign." },
      { name: "Dealer Website", price: "$250", priceSuffix: "/mo", unit: "+ initial setup $2,500", desc: "Custom site, live inventory sync, EasyFund and MasterCover embedded. One-time setup fee $2,500." },
      { name: "YachtWay Studio", price: "$21/ft", unit: "member rate", desc: "Photo, video, 3D Tour. 48-hour turnaround. Promoted to 1.9M followers." },
      { name: "Studio Pass", price: "$199", priceSuffix: "/mo", unit: "per month", desc: "Loyalty program for industry pros. Preferred Studio rates, 48h delivery, priority booking.",
        details: {
          headline: "Save up to $500 per shoot. Pays for itself in one boat.",
          intro: "Studio Pass is a loyalty program for industry professionals who want to save money and get content faster. Preferred rates, 48-hour delivery, and priority booking ensure your listings hit the market ASAP.",
          perks: [
            { k: "Photo & Video", member: "$21/ft", nonMember: "$31/ft", save: "Save $10/ft" },
            { k: "3D Tour packages", member: "$8/ft", nonMember: "$11/ft", save: "Save $3/ft" },
            { k: "Turnaround", member: "48 hours", nonMember: "Standard queue", save: "Priority" },
            { k: "Booking", member: "First slot", nonMember: "Next available", save: "Front of line" },
          ],
          roi: { non: "$1,550", member: "$1,050", save: "$500", boat: "One 50ft vessel every two months" },
          bottom: "One shoot covers 2.5 months of membership. List 5+ boats a year and the Pass is net profit.",
        }
      },
      { name: "Broker Seats", price: "$19", priceSuffix: "/seat/mo", unit: "per seat / month", desc: "Create listings, manage leads, create contracts (requires org EasySign subscription)." },
      { name: "YachtWay LIVE", price: "$75", priceSuffix: "/stream", unit: "per stream", desc: "First two streams free. Unlimited viewers, real-time Q and A.",
        details: {
          label: "Pricing details",
          noStrike: true,
          headline: "Two free streams. $75 each after, no matter how big the audience.",
          intro: "Live broadcast events, designed for yachts. Demo a vessel, host an open boat, run a Q&A. Unlimited viewers, real-time chat, recorded automatically and reusable as listing video.",
          col1: "What is included",
          col2: "Streams 1 - 2",
          col3: "Streams 3+",
          perks: [
            { k: "Per stream", member: "$75", nonMember: "Free", save: "Two on us" },
            { k: "Concurrent viewers", member: "Unlimited", nonMember: "Unlimited", save: "No cap" },
            { k: "Stream length", member: "Up to 4 hours", nonMember: "Up to 4 hours", save: "Same for both" },
            { k: "Recording & replay", member: "Auto-saved", nonMember: "Auto-saved", save: "Yours to keep" },
          ],
          bottom: "Every stream is also shared to the YachtWay YouTube channel — 550K+ subscribers, evergreen reach long after the live event ends.",
        }
      },
      { name: "VATO", price: "$99", priceSuffix: "/mo", unit: "per month, org-wide", desc: "Vessel Valuation Tool. Know the market price for every vessel." },
      { name: "YachtWay Connect", price: "Soon", unit: "launching 2026", desc: "Purpose-built CRM for marine sales teams. Inventory, leads, deals and more." },
    ],
  },
  legacyPlatforms: [
    { name: "YachtWorld", default: 800 },
    { name: "Boats.com", default: 600 },
    { name: "BoatTrader", default: 400 },
    { name: "YATCO", default: 350 },
    { name: "Other", default: 200 },
  ],
};

// ── Cost Estimator (controlled, reused across directions) ─────────
function useCostEstimator() {
  const [rows, setRows] = useState(
    CONTENT.legacyPlatforms.map(p => ({ name: p.name, monthly: p.default }))
  );
  const total = rows.reduce((a,r) => a + (Number(r.monthly)||0), 0);
  const annual = total * 12;
  const update = (i, v) => setRows(rs => rs.map((r,idx) => idx===i ? { ...r, monthly: v } : r));
  return { rows, total, annual, update };
}

// ── CPL Calculator ────────────────────────────────────────────────
function useCPL() {
  const [rows, setRows] = useState([
    { name: "Platform A", spend: 800, leads: 12 },
    { name: "Platform B", spend: 1200, leads: 18 },
    { name: "Platform C", spend: 350, leads: 4 },
  ]);
  const totalSpend = rows.reduce((a,r) => a + (Number(r.spend)||0), 0);
  const totalLeads = rows.reduce((a,r) => a + (Number(r.leads)||0), 0);
  const blended = totalLeads > 0 ? (totalSpend / totalLeads) : 0;
  const update = (i, k, v) => setRows(rs => rs.map((r,idx) => idx===i ? { ...r, [k]: v } : r));
  const add = () => setRows(rs => [...rs, { name: `Platform ${String.fromCharCode(65+rs.length)}`, spend: 0, leads: 0 }]);
  const remove = (i) => setRows(rs => rs.filter((_,idx) => idx!==i));
  return { rows, totalSpend, totalLeads, blended, update, add, remove };
}

// ── Mock dealer dashboard preview (used in hero) ──────────────────
const DashboardMock = ({ scale = 1, dark = false }) => (
  <div style={{
    transform: `scale(${scale})`, transformOrigin: "top left",
    width: 1100, height: 660,
    background: "#fff", borderRadius: 16,
    boxShadow: dark
      ? "0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06)"
      : "0 40px 80px rgba(10,13,18,.18), 0 0 0 1px var(--border-subtle)",
    overflow: "hidden", display: "grid", gridTemplateColumns: "220px 1fr",
    fontFamily: "var(--font-body)", color: "var(--gray-900)",
  }}>
    {/* Side */}
    <aside style={{ background: "var(--gray-100)", padding: "20px 14px", borderRight: "1px solid var(--border-subtle)" }}>
      <div style={{ marginBottom: 24 }}>
        <YwLogo/>
      </div>
      {[
        ["Inventory","12 active"],
        ["Leads","8 new"],
        ["Tours","4 scheduled"],
        ["LIVE","Next: Friday"],
        ["EasyFund","2 in progress"],
        ["MasterCover","Quote ready"],
        ["EasySign","1 pending"],
        ["NautiX","Up 18%"],
        ["Studio","48h delivery"],
      ].map(([k,v],i) => (
        <div key={i} style={{
          display:"flex", justifyContent:"space-between",
          padding: "10px 8px", borderRadius: 6,
          background: i===0 ? "var(--brand-50)" : "transparent",
          color: i===0 ? "var(--brand-800)" : "var(--gray-700)",
          fontSize: 13, fontWeight: i===0 ? 600 : 500, marginBottom: 2,
        }}>
          <span>{k}</span><span style={{ opacity: .7 }}>{v}</span>
        </div>
      ))}
    </aside>
    {/* Main */}
    <main style={{ padding: 24, overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 4 }}>Inventory</div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22 }}>Active listings</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span style={{ padding: "6px 12px", border: "1px solid var(--border)", borderRadius: 6, fontSize: 13 }}>All vessels</span>
          <span style={{ padding: "6px 12px", background: "var(--brand-500)", color: "#fff", borderRadius: 6, fontSize: 13, fontWeight: 600 }}>+ New listing</span>
        </div>
      </div>
      {/* Stat tiles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 18 }}>
        {[
          ["Visits this month","12,840","↑ 22%"],
          ["Tour requests","38","↑ 12%"],
          ["Pre-approved buyers","9","↑ 4"],
          ["Avg listing CPL","$0","baseline"],
        ].map(([k,v,d],i) => (
          <div key={i} style={{ padding: 14, border: "1px solid var(--border-subtle)", borderRadius: 10 }}>
            <div style={{ fontSize: 13, color: "var(--gray-500)", marginBottom: 6 }}>{k}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, marginBottom: 2 }}>{v}</div>
            <div style={{ fontSize: 13, color: "var(--success-ink)" }}>{d}</div>
          </div>
        ))}
      </div>
      {/* Listing rows */}
      <div style={{ border: "1px solid var(--border-subtle)", borderRadius: 12, overflow: "hidden" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.6fr .8fr .9fr .8fr .8fr",
          padding: "10px 14px", background: "var(--gray-100)",
          fontSize: 13, color: "var(--gray-600)", fontWeight: 600,
          textTransform: "uppercase", letterSpacing: ".08em",
        }}>
          <span>Vessel</span><span>Length</span><span>Price</span><span>Views</span><span>Status</span>
        </div>
        {[
          ["Wajer 77 · 2024","23.5 m","€ 4,950,000","1,204","Active"],
          ["Sunseeker 88 · 2022","26.8 m","€ 6,200,000","890","Active"],
          ["Princess Y95 · 2023","29.0 m","€ 8,400,000","1,540","Tour pending"],
          ["Riva 76 · 2021","23.2 m","€ 3,800,000","672","Pre-approved"],
          ["Ferretti 920 · 2024","27.5 m","€ 7,100,000","2,012","LIVE Friday"],
          ["Pershing 8X · 2023","25.3 m","€ 5,650,000","430","Active"],
        ].map(([n,l,p,v,s],i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "1.6fr .8fr .9fr .8fr .8fr",
            padding: "12px 14px",
            borderTop: i ? "1px solid var(--border-subtle)" : "none",
            fontSize: 13, alignItems: "center",
          }}>
            <span style={{ fontWeight: 600 }}>{n}</span>
            <span style={{ color: "var(--gray-600)" }}>{l}</span>
            <span style={{ color: "var(--gray-700)" }}>{p}</span>
            <span style={{ color: "var(--gray-700)" }}>{v}</span>
            <span style={{
              padding: "3px 10px", borderRadius: 999,
              background: s.includes("LIVE") ? "var(--brand-50)" :
                          s.includes("pending") ? "var(--warning-100)" :
                          s.includes("Pre") ? "var(--success-100)" : "var(--gray-150)",
              color: s.includes("LIVE") ? "var(--brand-800)" :
                     s.includes("pending") ? "var(--warning-700)" :
                     s.includes("Pre") ? "var(--success-ink)" : "var(--gray-700)",
              fontSize: 13, fontWeight: 600, justifySelf: "start",
            }}>{s}</span>
          </div>
        ))}
      </div>
    </main>
  </div>
);

Object.assign(window, {
  Ic, YwLogo, Nav, Footer, Eyebrow, SectionHead, CTA, CountUp,
  CONTENT, useCostEstimator, useCPL, DashboardMock,
});