/* ============================================================
   Soy Marinero — Landing page · DAY-context sections
   Card demo, module list, how-it-works, pricing, season strip.
   Composes design-system components from window.<Namespace>.
   ============================================================ */
const SM = window.SoyMarineroDesignSystem_4bcf40;
const { Badge, Button, Pill, FlipCard, ModuleCard, PriceCard } = SM;

const container = { maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' };
const dayH2 = {
  fontFamily: 'var(--font-display)', fontWeight: 700,
  fontSize: 'clamp(28px, 4vw, 40px)', lineHeight: 1.12,
  color: 'var(--teal-dim)', textAlign: 'center', margin: '0 0 12px',
};
const sub = {
  textAlign: 'center', color: 'var(--text-day-secondary)', fontWeight: 300,
  fontSize: '16px', lineHeight: 1.65, maxWidth: '520px', margin: '0 auto 56px',
};

/* ---- 4 · CARD DEMO (linen) — rotating 5-card preview deck ---- */
const DEMO_CARDS = [
  {
    moduleTag: '💨 Wind & Points of Sail',
    question: 'The wind is directly behind the boat, mainsail eased wide. What point of sail?',
    answer: <><strong>Running</strong> — sailing dead downwind, mainsail eased fully. Watch for an accidental gybe — the most dramatic thing to get wrong.</>,
  },
  {
    moduleTag: '🪢 Lines & Ropework',
    question: 'One knot to tie a fender to the rail, fast, and undo it just as fast. Which one?',
    answer: <><strong>Clove hitch</strong> — two turns, crossing over itself. Quick on, quick off. Finish with a half hitch if it’s staying a while.</>,
  },
  {
    moduleTag: '⛵ Right of Way',
    question: 'Two sailboats approach — you’re on starboard tack, they’re on port. Who holds course?',
    answer: <><strong>You do</strong> — starboard tack has right of way. Hold your course and speed so they can plan their move.</>,
  },
  {
    moduleTag: '⚓ Mooring & Anchoring',
    question: 'Coming into the berth, the skipper calls for a spring line. Which line is that?',
    answer: <><strong>The diagonal one</strong> — it runs aft or forward at an angle and stops the boat surging along the dock.</>,
  },
  {
    moduleTag: '🌊 Weather & Sea',
    question: 'The forecast says Force 6. Roughly how much wind is that — and should you worry?',
    answer: <><strong>22–27 knots</strong> — a strong breeze. Not dangerous, but reef early and expect spray. Charter companies start paying attention here.</>,
  },
];

function CardDemo() {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const touchX = React.useRef(null);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setActive((a) => (a + 1) % DEMO_CARDS.length), 5200);
    return () => clearInterval(t);
  }, [paused]);

  const go = (i) => { setActive(i); setPaused(true); };

  return (
    <section id="cards" className="sm-carddemo" style={{ position: 'relative', background: 'var(--day-base)', padding: 'var(--section-pad-y) 0 calc(var(--section-pad-y) + 150px)', overflow: 'hidden' }}>
      {/* graphite sketch — chart compass rose, left of the copy/card */}
      <svg className="sm-sketch" width="280" height="280" viewBox="0 0 280 280" aria-hidden="true" style={{ top: '110px', left: '3.5%', opacity: 0.8, transform: 'rotate(-8deg)' }}>
        <g fill="none" stroke="rgba(72,62,52,0.20)" strokeWidth="1.8">
          {/* rings */}
          <circle cx="140" cy="140" r="112" />
          <circle cx="140" cy="140" r="96" strokeWidth="1.2" />
          <circle cx="140" cy="140" r="30" strokeWidth="1.2" />
        </g>
        {/* degree ticks */}
        <g stroke="rgba(72,62,52,0.16)" strokeWidth="1.4">
          <line x1="140" y1="28" x2="140" y2="40" /><line x1="140" y1="240" x2="140" y2="252" />
          <line x1="28" y1="140" x2="40" y2="140" /><line x1="240" y1="140" x2="252" y2="140" />
          <line x1="61" y1="61" x2="69" y2="69" /><line x1="211" y1="69" x2="219" y2="61" />
          <line x1="61" y1="219" x2="69" y2="211" /><line x1="211" y1="211" x2="219" y2="219" />
        </g>
        {/* intercardinal points — shorter, open */}
        <g fill="none" stroke="rgba(72,62,52,0.20)" strokeWidth="1.6">
          <path d="M140,140 L92,92 M140,140 L188,92 M140,140 L92,188 M140,140 L188,188" />
        </g>
        {/* cardinal star — long points, half-shaded like chart roses */}
        <g stroke="rgba(72,62,52,0.26)" strokeWidth="1.6">
          <path d="M140,44 L148,132 L140,140 Z" fill="rgba(72,62,52,0.14)" />
          <path d="M140,44 L132,132 L140,140 Z" fill="none" />
          <path d="M236,140 L148,148 L140,140 Z" fill="rgba(72,62,52,0.14)" />
          <path d="M236,140 L148,132 L140,140 Z" fill="none" />
          <path d="M140,236 L132,148 L140,140 Z" fill="rgba(72,62,52,0.14)" />
          <path d="M140,236 L148,148 L140,140 Z" fill="none" />
          <path d="M44,140 L132,132 L140,140 Z" fill="rgba(72,62,52,0.14)" />
          <path d="M44,140 L132,148 L140,140 Z" fill="none" />
        </g>
        {/* cardinal letters */}
        <g fill="rgba(72,62,52,0.30)" fontFamily="Georgia, serif" fontSize="15" fontStyle="italic" textAnchor="middle">
          <text x="140" y="20">N</text>
          <text x="266" y="145">E</text>
          <text x="140" y="272">S</text>
          <text x="14" y="145">W</text>
        </g>
      </svg>
      <div style={container}>
        <h2 style={dayH2}>Know the answer<br />before the captain asks.</h2>
        <p style={sub}>Short card sessions that make you own that watch. Real knowledge, not exam theory — the stuff you'll actually be asked to do on deck.</p>

        <p style={{ textAlign: 'center', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(16px, 2vw, 20px)', color: 'rgba(26,18,8,0.68)', margin: '-26px auto 34px', maxWidth: '440px' }}>
          Yo no soy marinero... am studying.
        </p>

        <div
          style={{ display: 'flex', justifyContent: 'center', marginBottom: '24px' }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          onTouchStart={(e) => { touchX.current = e.touches[0].clientX; }}
          onTouchEnd={(e) => {
            if (touchX.current == null) return;
            const dx = e.changedTouches[0].clientX - touchX.current;
            if (Math.abs(dx) > 40) go((active + (dx < 0 ? 1 : DEMO_CARDS.length - 1)) % DEMO_CARDS.length);
            touchX.current = null;
          }}
        >
          {/* keyed remount resets each card to its question face */}
          <FlipCard key={active} {...DEMO_CARDS[active]} xp="+10 XP" />
        </div>
        <p style={{ textAlign: 'center', fontSize: '13px', color: 'var(--text-day-muted)', margin: '0 0 22px' }}>tap the card to flip ↑</p>

        {/* slideable preview points */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}>
          {DEMO_CARDS.map((c, i) => (
            <button
              key={i}
              onClick={() => go(i)}
              aria-label={`Preview card ${i + 1}`}
              style={{
                width: i === active ? '26px' : '9px', height: '9px', borderRadius: 'var(--radius-full)',
                border: 'none', padding: 0, cursor: 'pointer',
                background: i === active ? 'var(--teal)' : 'rgba(107,79,53,0.25)',
                transition: 'width var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default)',
              }}
            />
          ))}
        </div>
        <p style={{ textAlign: 'center', fontSize: '13px', color: 'var(--text-day-muted)', marginTop: '22px' }}>330+ cards across 10 modules</p>
      </div>
    </section>
  );
}

/* ---- 8 · MODULE LIST (linen) — tiles expand to show module content ---- */
const MODULES = [
  { icon: '⛵', name: 'The Boat Itself', sample: ["What's the difference between standing and running rigging?", "Standing rigging holds the mast up and doesn't move — forestay, backstay, shrouds. Running rigging is everything you pull: halyards, sheets, control lines."], count: '59 cards', state: 'default',
    blurb: 'Walk aboard knowing what everything is called — and what it does.',
    topics: ['Bow, stern, beam & draft', 'Standing vs running rigging', 'Winches, clutches & jammers', 'Below deck: heads, galley, berths', 'Cockpit layout on a charter boat'] },
  { icon: '💨', name: 'Wind & Points of Sail', sample: ["What is the no-go zone?", "Roughly 45° either side of the wind, where the boat simply can't sail. Point into it and the sails just flap — you're in irons."], count: '38 cards', state: 'default',
    blurb: 'Read the wind and know where the boat can — and can’t — go.',
    topics: ['True vs apparent wind', 'Close-hauled to running', 'The no-go zone', 'Telltales & what they tell you', 'Why the boat heels (and when to worry)'] },
  { icon: '🪁', name: 'Sail Trim', sample: ["What is the golden rule of trimming a sail?", "Ease it out until the front edge starts to luff, then trim back until it stops. That's the fastest setting on any point of sail."], count: '39 cards', state: 'default',
    blurb: 'The difference between being aboard and being crew.',
    topics: ['Ease until luff, trim back', 'Mainsheet, traveller & vang', 'Headsail cars & sheet tension', 'Reefing: when and how', 'Sail shape in light vs heavy air'] },
  { icon: '🪢', name: 'Lines & Ropework', sample: ["Which knot makes a fixed loop that never slips or jams?", "The bowline. Up through the rabbit hole, round the tree, back down again — and it still unties after being loaded."], count: '29 cards', state: 'default',
    blurb: 'Six knots cover 95% of charter life. Tie them without thinking.',
    topics: ['Bowline, clove hitch, cleat hitch', 'Round turn & two half hitches', 'Coiling and throwing a line', 'Winch wraps without overrides', 'Illustrated step-by-step guides'] },
  { icon: '⚓', name: 'Mooring & Anchoring', sample: ["What is a spring line for?", "Stopping the boat shuffling fore and aft along the quay. Bow and stern lines hold you in; the springs stop the movement."], count: '28 cards', state: 'default',
    blurb: 'Stopping the boat gracefully — marina, buoy, or open bay.',
    topics: ['Med-mooring step by step', 'Spring lines & why they matter', 'Anchor scope & swing radius', 'Setting and checking the hook', 'Picking up a mooring buoy'] },
  { icon: '🏄', name: 'On Deck Manoeuvres', sample: ["Where does your head go during a gybe?", "Down, and clear of the boom's path and the mainsheet. Nobody sits where the boom or its tackle can sweep across."], count: '33 cards', state: 'default',
    blurb: 'Tacks, gybes, and where to put your body when it all happens.',
    topics: ['Crewing a tack: the sequence', 'Controlled gybes', 'Grinding & tailing a winch', 'Hoisting, dropping & reefing', 'Moving safely on a heeling deck'] },
  { icon: '🧭', name: 'Navigation Basics', sample: ["What do COG and SOG tell you?", "Course and speed over the ground — where you're really going and how fast, wind and current included. Not where the bow points."], count: '35 cards', state: 'default',
    blurb: 'Enough chart sense to be useful at the nav table.',
    topics: ['Reading a chart & depth contours', 'Buoyage: IALA A in 5 minutes', 'What the plotter is telling you', 'Tides, springs & neaps', 'VHF: channel 16, Mayday & Pan-Pan'] },
  { icon: '🌊', name: 'Weather & Sea', sample: ["What does Force 6 look like on the water?", "Strong breeze: whitecaps everywhere, spray off the tops, a reefed and lively sail. Most charter crews stay in."], count: '20 cards', state: 'default',
    blurb: 'What the forecast actually means for your afternoon.',
    topics: ['Beaufort scale in real terms', 'Reading clouds & wind shifts', 'Sea state vs wind speed', 'Meltemi, mistral & local winds', 'When the skipper says we stay'] },
  { icon: '🚨', name: 'Safety & Emergency', sample: ["Someone goes overboard. What are the first four actions?", "Shout, point, throw, press. Shout \"man overboard\", point and never stop pointing, throw buoyancy, press the MOB button."], count: '19 cards', state: 'default',
    blurb: 'The calm, competent answer when it matters most.',
    topics: ['Lifejackets & tethers: when', 'MOB: shout, point, throw, press', 'Bilge, bungs & the gas locker', 'Fire: PASS with an extinguisher', 'Flares, EPIRB & abandon ship'] },
  { icon: '🏆', name: 'Charter Culture', sample: ["Who has the final word on board, even if you're paying?", "The skipper. Always. Split-second decisions need one person in charge — you agreed to that when you stepped aboard."], count: '37 cards', state: 'default',
    blurb: 'Don’t be that crew. The unwritten rules everyone else already knows.',
    topics: ['The skipper has the final word', 'Shoes off, winch handle stowed', 'Night watch handovers', 'Galley, water & provisioning', 'Soft bags only — what to pack'] },
];
function ModuleList() {
  const [open, setOpen] = React.useState(null);
  const [flip, setFlip] = React.useState(false);
  React.useEffect(() => { setFlip(false); }, [open]);
  const sel = open != null ? MODULES[open] : null;
  React.useEffect(() => {
    if (open == null) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);
  return (
    <section id="modules" style={{ background: 'var(--day-base)', padding: 'var(--section-pad-y) 0 var(--space-16)' }}>
      <div style={container}>
        <h2 style={dayH2}>10 modules. 330+ cards.<br />Everything you need on deck.</h2>
        <p style={{ textAlign: 'center', fontSize: '13px', color: 'var(--text-day-muted)', margin: '14px 0 40px' }}>tap a module to see what’s inside</p>
        <div className="sm-modgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px', maxWidth: '720px', margin: '0 auto' }}>
          {MODULES.map((m, i) => (
            <div key={m.name} onClick={() => setOpen(open === i ? null : i)} style={{ cursor: 'pointer', borderRadius: 'var(--radius-lg)', outline: open === i ? '2px solid var(--teal)' : 'none', outlineOffset: '2px' }}>
              <ModuleCard {...m} state={m.state} />
            </div>
          ))}
        </div>
        {/* expanded module content — overlay modal */}
        {sel && (
          <div
            onClick={() => setOpen(null)}
            style={{
              position: 'fixed', inset: 0, zIndex: 200, display: 'flex', alignItems: 'center',
              justifyContent: 'center', padding: '24px',
              background: 'rgba(10,30,40,0.45)', backdropFilter: 'blur(3px)', WebkitBackdropFilter: 'blur(3px)',
            }}
          >
            <div
              onClick={(e) => e.stopPropagation()}
              role="dialog"
              aria-label={sel.name}
              style={{
                width: '100%', maxWidth: '520px', background: 'var(--day-raised)',
                border: '1px solid var(--border-day)', borderRadius: 'var(--radius-xl)',
                boxShadow: 'var(--shadow-lg)', padding: '28px 30px', position: 'relative',
              }}
            >
              <button onClick={() => setOpen(null)} aria-label="Close" style={{
                position: 'absolute', top: '16px', right: '18px', border: 'none', background: 'none',
                fontSize: '20px', color: 'var(--text-day-muted)', cursor: 'pointer', lineHeight: 1, padding: '4px',
              }}>×</button>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: '10px', flexWrap: 'wrap', marginBottom: '8px' }}>
                <span style={{ fontSize: '26px' }}>{sel.icon}</span>
                <span style={{ fontSize: '19px', fontWeight: 600, color: 'var(--text-day-primary)' }}>{sel.name}</span>
                <span style={{ fontSize: '13px', color: 'var(--text-day-muted)' }}>{sel.count}</span>
              </div>
              <p style={{ fontSize: '15px', fontWeight: 300, color: 'var(--text-day-secondary)', lineHeight: 1.6, margin: '0 0 18px' }}>{sel.blurb}</p>
              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                {sel.topics.map((t) => (
                  <span key={t} style={{
                    fontSize: '13px', color: 'var(--text-day-secondary)', background: 'var(--day-terra)',
                    border: '1px solid var(--border-day)', borderRadius: 'var(--radius-full)', padding: '5px 13px',
                  }}>{t}</span>
                ))}
              </div>
              {sel.sample && (
                <div style={{ marginTop: '20px' }}>
                  <div style={{ fontSize: '10.5px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-day-muted)', marginBottom: '8px' }}>
                    A card from this module · tap to {flip ? 'hide' : 'answer'}
                  </div>
                  <div onClick={() => setFlip((f) => !f)} style={{
                    cursor: 'pointer', borderRadius: '18px', padding: '20px 22px', minHeight: '132px',
                    display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '10px',
                    background: flip ? 'linear-gradient(150deg, #C85A2A 0%, #A03820 100%)' : 'var(--night-surface, #12283A)',
                    transition: 'background 300ms var(--ease-default)',
                  }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '17.5px', lineHeight: 1.28, color: '#fff' }}>{sel.sample[0]}</div>
                    {flip
                      ? <div style={{ fontSize: '14px', lineHeight: 1.6, color: 'rgba(255,255,255,0.92)', fontWeight: 300 }}>{sel.sample[1]}</div>
                      : <div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.5)' }}>Tap for the answer →</div>}
                  </div>
                </div>
              )}

            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---- 9 · HOW IT WORKS (linen) ---- */
const STEPS = [
  { icon: '⚡', title: 'Start free', body: 'Modules 1–4 as a free preview, ad-free. No card needed.' },
  { icon: '🔁', title: 'Learn daily', body: '10 min a day. Learn, practise, then type it from memory.' },
  { icon: '🎸', title: 'Earn Capitán', body: 'Master all 337 cards. Then the song plays.' },
];
function HowItWorks() {
  return (
    <section style={{ background: 'var(--day-base)', padding: 'var(--section-pad-y) 0' }}>
      <div style={{ ...container, maxWidth: '860px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '32px' }}>
          {STEPS.map((s) => (
            <div key={s.title} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <div style={{ width: '44px', height: '44px', borderRadius: 'var(--radius-md)', background: 'rgba(200,90,42,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '22px' }}>{s.icon}</div>
              <div style={{ fontSize: '16px', fontWeight: 600, color: 'var(--terracotta)' }}>{s.title}</div>
              <div style={{ fontSize: '14px', color: 'var(--text-day-secondary)', lineHeight: 1.6, fontWeight: 300 }}>{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- 11 · PRICING — the Med bay: azure water, anchored monohull (left),
   stylized Greek fisher town on the coastline (right). Day ends in port. ---- */
function Pricing() {
  return (
    <section id="pricing" style={{ position: 'relative', background: 'var(--day-terra)', padding: 'var(--section-pad-y) 0 0', overflow: 'hidden' }}>
      {/* sky haze down to the horizon */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '340px', background: 'linear-gradient(to bottom, var(--day-terra) 0%, #EFEADB 48%, #D6E7E6 82%, #BFDFE3 100%)' }} />
      {/* the bay */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '340px', bottom: 0, background: 'linear-gradient(to bottom, #66BCCF 0%, #3FA2B8 30%, #23808F 65%, #14505E 100%)', borderTop: '1px solid rgba(255,255,255,0.55)' }}>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1600 600" preserveAspectRatio="none" aria-hidden="true">
          <g className="ds-w1" stroke="rgba(255,255,255,0.25)" strokeWidth="1.4" fill="none">
            <path d="M-40,40 Q330,32 700,38 T1480,35 T1700,37" />
            <path d="M-70,130 Q360,120 780,127 T1540,122 T1720,125" />
            <path d="M-50,300 Q380,288 820,296 T1560,290 T1740,294" />
          </g>
          <g className="ds-w2" stroke="rgba(255,255,255,0.16)" strokeWidth="1.4" fill="none">
            <path d="M-60,80 Q310,72 720,78 T1500,74 T1700,76" />
            <path d="M-80,200 Q340,190 760,197 T1520,192 T1730,195" />
            <path d="M-90,430 Q400,416 840,426 T1580,418 T1760,423" />
          </g>
        </svg>
      </div>

      {/* the bay's right arm — coastline sweeping from the horizon around the
         cove into the foreground, fisher town nestled on the slope */}
      <svg width="760" height="430" viewBox="0 0 760 430" aria-hidden="true" style={{ position: 'absolute', right: 0, top: '218px', maxWidth: '60vw', height: 'auto' }}>
        {/* hazy ridge rising above the horizon */}
        <path d="M150,122 C300,104 460,86 760,62 L760,122 Z" fill="rgba(158,150,128,0.30)" />
        <path d="M330,122 C470,108 600,96 760,86 L760,122 Z" fill="rgba(150,138,110,0.38)" />
        {/* the bay arm — land curving from the horizon down around the cove */}
        <path d="M240,122 C400,126 540,160 630,222 C700,270 740,340 760,430 L760,122 Z" fill="rgba(150,130,98,0.55)" />
        <path d="M400,140 C520,156 610,206 668,268 C712,316 738,370 752,430 L760,430 L760,140 Z" fill="rgba(128,108,78,0.45)" />
        {/* shoreline — pale sand where the water laps the cove */}
        <path d="M240,122 C400,126 540,160 630,222 C700,270 740,340 760,430" fill="none" stroke="rgba(246,238,222,0.75)" strokeWidth="3" strokeLinecap="round" />
        <path d="M300,131 C430,140 540,178 620,238" fill="none" stroke="rgba(255,255,255,0.30)" strokeWidth="1.6" strokeLinecap="round" />
        {/* windmill on the ridge */}
        <path d="M396,118 L410,118 L408,96 L398,96 Z" fill="#F7F0E4" />
        <path d="M395,96 L411,96 L403,90 Z" fill="#8A7A62" />
        <g stroke="rgba(90,80,64,0.7)" strokeWidth="1.4">
          <line x1="403" y1="93" x2="414" y2="82" /><line x1="403" y1="93" x2="392" y2="82" />
          <line x1="403" y1="93" x2="414" y2="104" /><line x1="403" y1="93" x2="392" y2="104" />
        </g>

        {/* town — whitewashed cubes, terracotta roofs, aegean blue details */}
        <g>
          {/* upper terrace */}
          <rect x="433" y="96" width="30" height="36" fill="#F5EEE0" />
          <path d="M431,96 L448,83 L466,96 Z" fill="#BE5B33" />
          <rect x="440" y="104" width="5" height="7" fill="#2A6478" />
          <rect x="451" y="104" width="5" height="7" fill="#2A6478" />
          <rect x="444" y="119" width="7" height="13" rx="3" fill="#2E7E95" />
          <rect x="452" y="86" width="4" height="7" fill="#B25530" />
          <rect x="466" y="104" width="26" height="32" fill="#EDE3D1" />
          <path d="M464,104 L479,93 L494,104 Z" fill="#B25530" />
          <rect x="472" y="112" width="5" height="7" fill="#2A6478" />
          <rect x="482" y="112" width="5" height="7" fill="#2A6478" />
          {/* bougainvillea spilling down the corner */}
          <g fill="#B43E76">
            <circle cx="467" cy="112" r="4" opacity="0.85" /><circle cx="464" cy="118" r="3.2" opacity="0.8" />
            <circle cx="468" cy="124" r="2.6" opacity="0.75" /><circle cx="471" cy="117" r="2.4" opacity="0.7" />
          </g>
          <rect x="494" y="88" width="34" height="44" fill="#F7F0E4" />
          <path d="M492,88 L511,73 L530,88 Z" fill="#C3633A" />
          <rect x="500" y="96" width="5" height="7" fill="#2A6478" />
          <rect x="512" y="96" width="5" height="7" fill="#2A6478" />
          <rect x="500" y="110" width="5" height="7" fill="#2A6478" />
          <rect x="510" y="118" width="7" height="14" rx="3" fill="#2E7E95" />
          {/* campanile + church with blue dome */}
          <rect x="524" y="74" width="10" height="26" fill="#FAF4E8" />
          <rect x="526.5" y="79" width="5" height="7" rx="2.5" fill="#2A6478" />
          <path d="M522,74 L529,67 L536,74 Z" fill="#2E7E95" />
          <rect x="536" y="100" width="28" height="38" fill="#FAF4E8" />
          <path d="M536,100 a14,12 0 0 1 28,0 Z" fill="#2E7E95" />
          <line x1="550" y1="81" x2="550" y2="88" stroke="#2E7E95" strokeWidth="2" />
          <line x1="547" y1="84" x2="553" y2="84" stroke="#2E7E95" strokeWidth="2" />
          <rect x="546" y="122" width="8" height="16" rx="4" fill="#2E7E95" />
          {/* mid terrace */}
          <rect x="566" y="112" width="26" height="32" fill="#EFE6D6" />
          <path d="M564,112 L579,101 L594,112 Z" fill="#B25530" />
          <rect x="572" y="120" width="5" height="7" fill="#2A6478" />
          <rect x="582" y="120" width="5" height="7" fill="#2A6478" />
          <rect x="594" y="124" width="32" height="38" fill="#F5EEE0" />
          <path d="M592,124 L610,110 L628,124 Z" fill="#BE5B33" />
          <rect x="600" y="132" width="5" height="7" fill="#2A6478" />
          <rect x="612" y="132" width="5" height="7" fill="#2A6478" />
          <rect x="606" y="148" width="7" height="14" rx="3" fill="#2E7E95" />
          <rect x="614" y="114" width="4" height="7" fill="#B25530" />
          {/* laundry line */}
          <line x1="628" y1="130" x2="656" y2="148" stroke="rgba(255,255,255,0.55)" strokeWidth="0.9" />
          <rect x="634" y="133" width="3" height="4" fill="#FDFDFB" />
          <rect x="641" y="138" width="3" height="4" fill="#18A8BA" />
          <rect x="648" y="142" width="3" height="4" fill="#E8A020" />
          <rect x="628" y="146" width="28" height="36" fill="#F0E8D8" />
          <path d="M626,146 L642,133 L658,146 Z" fill="#C3633A" />
          <rect x="634" y="154" width="5" height="7" fill="#2A6478" />
          <rect x="644" y="154" width="5" height="7" fill="#2A6478" />
          {/* lower terrace — taverna with awning */}
          <rect x="658" y="176" width="34" height="40" fill="#F7F0E4" />
          <path d="M656,176 L675,161 L694,176 Z" fill="#B25530" />
          <rect x="664" y="184" width="5" height="7" fill="#2A6478" />
          <rect x="676" y="184" width="5" height="7" fill="#2A6478" />
          <path d="M656,196 L694,196 L690,205 L660,205 Z" fill="#D98E3B" />
          <line x1="665" y1="196" x2="663" y2="205" stroke="#F7F0E4" strokeWidth="1.6" />
          <line x1="675" y1="196" x2="674" y2="205" stroke="#F7F0E4" strokeWidth="1.6" />
          <line x1="685" y1="196" x2="685" y2="205" stroke="#F7F0E4" strokeWidth="1.6" />
          <circle cx="666" cy="212" r="2" fill="#F5EEE0" /><circle cx="678" cy="214" r="2" fill="#F5EEE0" />
          <rect x="694" y="214" width="28" height="36" fill="#EDE3D1" />
          <path d="M692,214 L708,201 L724,214 Z" fill="#B25530" />
          <rect x="700" y="222" width="5" height="7" fill="#2A6478" />
          <rect x="710" y="222" width="5" height="7" fill="#2A6478" />
          <g fill="#C25589">
            <circle cx="720" cy="226" r="3.6" opacity="0.85" /><circle cx="723" cy="232" r="2.8" opacity="0.8" /><circle cx="718" cy="237" r="2.3" opacity="0.7" />
          </g>
          <rect x="726" y="258" width="30" height="40" fill="#F5EEE0" />
          <path d="M724,258 L741,244 L758,258 Z" fill="#C3633A" />
          <rect x="732" y="266" width="5" height="7" fill="#2A6478" />
          <rect x="744" y="266" width="5" height="7" fill="#2A6478" />
          <rect x="738" y="282" width="7" height="16" rx="3" fill="#2E7E95" />
        </g>

        {/* cypress trees tucked between houses */}
        <g fill="#4A6A4F">
          <path d="M461,132 C457,122 457,112 461,106 C465,112 465,122 461,132 Z" />
          <path d="M654,182 C650,172 650,162 654,156 C658,162 658,172 654,182 Z" />
          <path d="M716,254 C712,245 712,236 716,230 C720,236 720,245 716,254 Z" />
        </g>

        {/* quay along the waterfront below the town */}
        <path d="M428,134 C500,140 560,162 614,196" fill="none" stroke="rgba(246,239,227,0.9)" strokeWidth="4" strokeLinecap="round" />
        {/* stone mole curving into the cove, little lighthouse at its head */}
        <path d="M612,200 C580,222 552,236 524,246" fill="none" stroke="rgba(214,202,182,0.85)" strokeWidth="5" strokeLinecap="round" />
        <rect x="512" y="228" width="9" height="18" fill="#FAF4E8" />
        <path d="M510,228 L516.5,221 L523,228 Z" fill="#C24A38" />
        <circle cx="516.5" cy="226" r="1.3" fill="#E8A020" />
        {/* fishing boats moored in the cove — the first one shifted clear of the mole */}
        <g transform="translate(-26 36)">
          <path d="M560,224 q10,9 22,0 l-2,-3 l-18,0 Z" fill="#F8F6F0" />
          <rect x="560" y="219" width="22" height="2.4" fill="#2E7E95" />
          <line x1="571" y1="206" x2="571" y2="219" stroke="#3A4A50" strokeWidth="1.4" />
        </g>
        <path d="M600,262 q11,10 24,0 l-2,-3 l-20,0 Z" fill="#EFE9DC" />
        <rect x="600" y="257" width="24" height="2.4" fill="#C24A38" />
        <line x1="612" y1="243" x2="612" y2="257" stroke="#3A4A50" strokeWidth="1.4" />
        <path d="M548,290 q9,8 20,0 l-2,-3 l-16,0 Z" fill="#F5EEE0" />
        <rect x="548" y="285.5" width="20" height="2.2" fill="#E8A020" />
      </svg>

      {/* sleek monohull at anchor on its mooring buoy (left, in the bay) */}
      <svg className="ds-anch" width="200" height="160" viewBox="0 0 200 160" aria-hidden="true" style={{ position: 'absolute', left: 'max(2%, calc(50% - 650px))', top: '420px' }}>
        {/* mast + stays (bow left) */}
        <line x1="88" y1="6" x2="88" y2="118" stroke="#23343C" strokeWidth="2" />
        <line x1="88" y1="10" x2="34" y2="116" stroke="rgba(35,52,60,0.5)" strokeWidth="1" />
        <line x1="88" y1="10" x2="138" y2="114" stroke="rgba(35,52,60,0.5)" strokeWidth="1" />
        {/* boom with furled main */}
        <line x1="88" y1="96" x2="130" y2="99" stroke="#23343C" strokeWidth="3" strokeLinecap="round" />
        <path d="M88,91 L126,96 L88,99 Z" fill="#E9E3D5" />
        {/* hull — bow left */}
        <path d="M148,118 L32,113 C25,113 23,116 26,120 C33,129 48,134 68,134 L128,134 C139,134 146,127 148,118 Z" fill="#22343C" />
        <path d="M148,118 L32,113 C25,113 23,116 26,120 L27,121 L147,124 Z" fill="#F8F6F0" />
        {/* mooring line to buoy */}
        <path d="M30,118 C22,126 17,134 14,141 " stroke="rgba(248,246,240,0.65)" strokeWidth="1.5" fill="none" />
        <circle cx="13" cy="146" r="5.5" fill="#F3EFE6" />
        <path d="M7.5,146 A5.5,5.5 0 0 1 18.5,146 Z" fill="#C24A38" />
        {/* waterline ripples */}
        <path d="M20,142 Q70,138 120,141 T196,140" stroke="rgba(255,255,255,0.5)" strokeWidth="2" fill="none" strokeLinecap="round" />
        <path d="M48,151 Q98,147 152,150" stroke="rgba(255,255,255,0.3)" strokeWidth="1.6" fill="none" strokeLinecap="round" />
      </svg>

      <div style={{ ...container, maxWidth: '680px', position: 'relative', zIndex: 1, paddingBottom: 'var(--section-pad-y)' }}>
        <h2 style={dayH2}>Simple pricing,<br />no knots attached.</h2>
        <p style={sub}>Start free. Pay once when you're hooked — then own it forever.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '16px', alignItems: 'stretch' }}>
          <PriceCard name="Marinero" amount="€0" period="forever"
            features={['Modules 1–4, free preview', 'Every knot guide', 'Sailing test & glossary', 'XP, streaks & ranks', 'Daily challenge', 'No ads. Ever.']}
            desc="Free forever. Upgrade anytime." ctaLabel="Start free"
            onCta={() => { window.location.href = 'https://app.soymarinero.com'; }} />
          <PriceCard featured name="Capitán" amount="€34.99" period="one-time"
            features={['All 10 modules · 330+ cards', 'Practice & Master modes', 'Offline mode', 'Charter-Ready certificate', 'Shareable rank cards', 'No ads. Ever.']}
            desc="Own it forever. No subscription." ctaLabel="Unlock everything →"
            onCta={() => { window.location.href = 'https://app.soymarinero.com'; }} />
        </div>
      </div>
    </section>
  );
}
function SeasonStrip() {
  return (
    <section style={{ background: 'var(--harbour)', padding: '16px var(--gutter)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px', flexWrap: 'wrap' }}>
        <Pill>🇭🇷 Croatia</Pill>
        <Pill>🇬🇷 Greece</Pill>
        <Pill>🇹🇷 Turkey</Pill>
        <span style={{ color: 'rgba(255,255,255,0.25)' }}>·</span>
        <span style={{ fontSize: '14px', color: 'rgba(255,255,255,0.75)' }}><strong style={{ color: '#fff' }}>Med season open now.</strong> Caribbean takes over in November.</span>
        <span style={{ color: 'rgba(255,255,255,0.25)' }}>·</span>
        <Pill>🌴 BVI</Pill>
        <Pill>🏝 Grenadines</Pill>
        <Pill>⛵ St Martin</Pill>
      </div>
    </section>
  );
}

Object.assign(window, { CardDemo, ModuleList, HowItWorks, Pricing, SeasonStrip });