/* global React, Reveal, MiniFlame, useReveal */
const { useState: useSPSt, useEffect: useSPEf, useRef: useSPRef } = React;
const { motion: _sfm } = window.Motion || {};
const _SPMD = (_sfm && _sfm.div) || 'div';
const _spReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* ============================================================
   Animated count-up — fires when scrolled in
   ============================================================ */
const useCountUp = (target, { duration = 1400, decimals = 0 } = {}) => {
  const ref = useSPRef(null);
  const [val, setVal] = useSPSt(0);
  useSPEf(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target]);
  return [ref, val.toFixed(decimals)];
};

/* ============================================================
   Animated heatmap — cells light up sequentially when in view
   ============================================================ */
const AnimatedHeatmap = ({ weeks = 26, cellSize = 14, gap = 3 }) => {
  const ref = useSPRef(null);
  const [shown, setShown] = useSPSt(false);

  useSPEf(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(el); } });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  useSPEf(() => {
    const scaleHeatmap = () => {
      const wrapper = document.querySelector('.heatmap-wrapper');
      const heatmap = document.querySelector('.heatmap-grid');
      if (!wrapper || !heatmap) return;
      // Natural width stored as data attr — avoids unreliable scrollWidth on
      // overflow:visible flex containers (returns clientWidth in most browsers).
      const naturalWidth = parseInt(heatmap.dataset.naturalWidth, 10);
      const scale = wrapper.offsetWidth / naturalWidth;
      if (scale < 1) {
        heatmap.style.transform = `scale(${scale})`;
        heatmap.style.transformOrigin = 'top left';
        // offsetHeight is layout height, unaffected by transforms — correct here.
        wrapper.style.height = `${heatmap.offsetHeight * scale}px`;
      } else {
        heatmap.style.transform = '';
        heatmap.style.transformOrigin = '';
        wrapper.style.height = '';
      }
    };
    scaleHeatmap();
    window.addEventListener('resize', scaleHeatmap, { passive: true });
    return () => window.removeEventListener('resize', scaleHeatmap);
  }, []);

  const cells = [];
  for (let i = 0; i < weeks * 7; i++) {
    const v = Math.floor((Math.sin(i * 12.9898) * 43758.5453) % 1 * 7);
    cells.push(Math.max(0, Math.min(5, Math.abs(v) - 1)));
  }
  const palette = ['#0a0a0a', '#1d1d1d', '#3a3a3a', '#666', '#a3a3a3', '#fff'];

  return (
    <div ref={ref} className="heatmap-wrapper" style={{ width: '100%', overflow: 'hidden' }}>
      <div
        className="heatmap-grid"
        data-natural-width={weeks * cellSize + (weeks - 1) * gap}
        style={{ display: 'flex', flexDirection: 'column', gap: 12 }}
      >
        <div style={{
          display: 'grid', gridTemplateRows: `repeat(7, ${cellSize}px)`,
          gridAutoFlow: 'column', gap,
        }}>
          {cells.map((v, i) => (
            <div key={i} style={{
              width: cellSize, height: cellSize, borderRadius: 3,
              background: palette[v],
              opacity: shown ? 1 : 0,
              transform: shown ? 'scale(1)' : 'scale(0.6)',
              transition: `opacity 300ms var(--ease-out) ${i * 6}ms, transform 300ms var(--ease-out) ${i * 6}ms`,
              boxShadow: v === 5 ? '0 0 6px rgba(255,255,255,calc(0.45 * var(--site-glow-mul, 1)))' : 'none',
            }} />
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.06em',
        }}>
          <span>Last {weeks} weeks</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            Less
            {[1, 2, 3, 4, 5].map((v) => (
              <span key={v} style={{ width: 10, height: 10, background: palette[v], borderRadius: 2 }} />
            ))}
            More
          </span>
        </div>
      </div>
    </div>
  );
};

const BigStat = ({ label, value, suffix, decimals = 0 }) => {
  const [ref, v] = useCountUp(value, { decimals });
  return (
    <div ref={ref} style={{
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <span style={{
        fontFamily: 'var(--font-display)', fontWeight: 'var(--display-weight, 800)',
        fontSize: 'clamp(48px, 6vw, 72px)', letterSpacing: '-0.04em',
        color: 'var(--fg)', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      }}>{v}{suffix}</span>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        letterSpacing: '0.12em', textTransform: 'uppercase',
      }}>{label}</span>
    </div>
  );
};

const StatsPreview = () => (
  <section className="section" style={{
    display: 'flex', flexDirection: 'column', gap: 56,
    borderTop: '1px solid var(--border)',
  }}>
    <Reveal>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 720 }}>
        <span className="eyebrow">Progress · Built-in</span>
        <h2 className="h-display">
          Numbers that go up. <span className="dim">For real reasons.</span>
        </h2>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', letterSpacing: '-0.011em', maxWidth: 600 }}>
          Every Recall stat measures something that matters for exam day: accuracy on hard cards, time invested, days kept up. No vanity metrics, no badges for showing up.
        </p>
      </div>
    </Reveal>

    <Reveal delay={120}>
      <div className="stats-panel-grid" style={{
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 16, padding: 32,
        display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32,
      }}>
        {/* Left: big numbers + streak */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 18px', background: 'var(--surface-2)',
            border: '1px solid var(--border)', borderRadius: 12, alignSelf: 'flex-start',
          }}>
            <span className="breathe" style={{
              display: 'inline-flex',
              filter: 'drop-shadow(0 0 8px rgba(255,170,80,0.5))',
            }}>
              <MiniFlame size={22} />
            </span>
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 22, letterSpacing: '-0.025em', color: 'var(--fg)',
              }}>14 day streak</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)',
                letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4,
              }}>Personal best · 42 days</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            <BigStat label="Cards reviewed" value={8423} />
            <BigStat label="Accuracy" value={87.4} suffix="%" decimals={1} />
            <BigStat label="Best streak" value={42} suffix="d" />
            <BigStat label="Hours studied" value={62.5} decimals={1} />
          </div>
        </div>
        {/* Right: heatmap */}
        <div style={{
          background: 'var(--surface-2)', border: '1px solid var(--border)',
          borderRadius: 12, padding: '24px 24px 20px',
          display: 'flex', flexDirection: 'column', gap: 20,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)',
                letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>Activity heatmap</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 20, letterSpacing: '-0.025em', color: 'var(--fg)',
              }}>167 days active</span>
            </div>
            <div style={{
              padding: '4px 10px', background: 'var(--surface)',
              border: '1px solid var(--border)', borderRadius: 999,
              fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)',
              letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>26 weeks</div>
          </div>
          <AnimatedHeatmap weeks={26} cellSize={13} />
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
            paddingTop: 12, borderTop: '1px solid var(--border)',
          }}>
            {[
              ['Today', '52 cards'],
              ['Avg/day', '38 cards'],
              ['Hardest deck', 'Anatomy'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--fg-3)',
                  letterSpacing: '0.1em', textTransform: 'uppercase',
                }}>{k}</div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 14, color: 'var(--fg)', marginTop: 3, letterSpacing: '-0.02em',
                }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Reveal>
  </section>
);

/* ============================================================
   Comparison table
   ============================================================ */
const Check = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);
const Cross = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
  </svg>
);

const COMPARISON_ROWS = [
  ['Beautiful modern UI', 'check', 'cross'],
  ['Spaced repetition (FSRS-6 + SM-2)', 'check', 'Some apps'],
  ['Import from other apps', 'check', 'cross'],
  ['Type & Speed mode', 'check', 'cross'],
  ['XP, streaks & heatmap', 'check', 'cross'],
  ['Native desktop (no browser)', 'check', 'cross'],
  ['Local-first storage', 'check', 'Cloud-only'],
  ['Setup difficulty', 'Easy', 'Complex'],
  ['Selling your study habits?', 'Never', 'Probably'],
];

const renderCell = (v, isRecall) => {
  if (v === 'check') return <span style={{ color: 'var(--accent)' }}><Check /></span>;
  if (v === 'cross') return <span style={{ color: 'var(--fg-3)' }}><Cross /></span>;
  return (
    <span style={{
      fontSize: 14, color: isRecall ? 'var(--fg)' : 'var(--fg-3)',
      letterSpacing: '-0.011em', fontFamily: 'var(--font-body)',
    }}>{v}</span>
  );
};

const Comparison = () => (
  <section className="section section-tight" style={{ display: 'flex', flexDirection: 'column', gap: 40, borderTop: '1px solid var(--border)' }}>
    <Reveal>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, textAlign: 'center', alignItems: 'center' }}>
        <span className="eyebrow">Recall vs. legacy</span>
        <h2 className="h-display" style={{ textAlign: 'center' }}>
          What we do <span className="dim">different.</span>
        </h2>
      </div>
    </Reveal>
    <Reveal delay={120}>
      <div className="comparison-scroll" style={{
        background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 16, overflow: 'hidden', minWidth: 460,
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
          padding: '18px 24px', borderBottom: '1px solid var(--border)',
          background: 'var(--surface-2)',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Feature
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <img src="assets/logo-mark.png" style={{ width: 16, height: 16 }} alt="" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, letterSpacing: '-0.02em', color: 'var(--fg)' }}>Recall</span>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Other apps
          </div>
        </div>
        {COMPARISON_ROWS.map((row, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
            padding: '18px 24px',
            borderTop: i === 0 ? 'none' : '1px solid var(--border)',
            alignItems: 'center',
          }}>
            <div style={{ fontSize: 15, color: 'var(--fg)', letterSpacing: '-0.011em' }}>{row[0]}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{renderCell(row[1], true)}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{renderCell(row[2], false)}</div>
          </div>
        ))}
      </div>
    </Reveal>
  </section>
);

/* ============================================================
   Privacy Promise
   ============================================================ */
const PrivacyPromise = () => (
  <section className="section" style={{
    display: 'flex', flexDirection: 'column', gap: 48,
    borderTop: '1px solid var(--border)',
  }}>
    <Reveal>
      <div className="privacy-row" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <span className="eyebrow">Privacy · By default</span>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-display)',
            fontWeight: 'var(--display-weight, 800)',
            fontSize: 'clamp(40px, 6vw, 88px)',
            lineHeight: 0.95, letterSpacing: '-0.045em',
            color: 'var(--fg)', textWrap: 'balance',
          }}>
            We never sell<br />
            your data.<br />
            <span className="dim">Never will.</span>
          </h2>
          <p style={{
            margin: 0, maxWidth: 480,
            fontSize: 17, lineHeight: 1.6,
            color: 'var(--fg-2)', letterSpacing: '-0.011em',
          }}>
            Your flashcards never leave your computer. Recall uses Supabase for sign-in. That's it. No analytics, no third-party trackers, no harvest-and-resell business model.
          </p>
        </div>
        <PrivacyDiagram />
      </div>
    </Reveal>
  </section>
);

const PrivacyDiagram = () => (
  <div style={{
    background: 'var(--surface)', border: '1px solid var(--border)',
    borderRadius: 16, padding: 32,
    display: 'flex', flexDirection: 'column', gap: 18,
  }}>
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
      Where your data lives
    </div>
    {[
      { k: 'Your flashcards', v: 'Your PC', ok: true, note: 'SQLite, local only' },
      { k: 'Your study history', v: 'Your PC', ok: true, note: 'Never uploaded' },
      { k: 'Your streak & XP', v: 'Your PC', ok: true, note: 'Never uploaded' },
      { k: 'Your email (sign-in only)', v: 'Supabase', ok: 'auth', note: 'Required for account' },
      { k: 'Behavioral analytics', v: 'Nowhere', ok: 'never', note: 'We don\'t collect this' },
      { k: 'Sold to advertisers', v: 'Never', ok: 'never', note: 'Not the business model' },
    ].map((r, i) => (
      <div key={r.k} style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr auto', gap: 16, alignItems: 'center',
        padding: '14px 0',
        borderTop: i === 0 ? 'none' : '1px solid var(--border)',
      }}>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg)',
          letterSpacing: '-0.011em',
        }}>{r.k}</div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)',
          letterSpacing: '0.04em',
        }}>{r.v}</div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 999,
          background: r.ok === 'never' ? 'var(--surface-2)' : 'var(--surface-2)',
          border: '1px solid var(--border)',
          fontFamily: 'var(--font-mono)', fontSize: 10,
          color: r.ok === true ? 'var(--fg)' : (r.ok === 'never' ? 'var(--fg-2)' : 'var(--fg-2)'),
          letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>{r.note}</span>
      </div>
    ))}
  </div>
);

/* ============================================================
   FAQ
   ============================================================ */
const FAQ_ITEMS = [
  { q: 'When is Recall launching?',
    a: 'Early access opens 1 July 2026. The official launch date is still TBA. Join the waitlist above to be among the first to get access.' },
  { q: 'Does it work offline?',
    a: 'Yes. Recall is a native desktop app for Windows, Mac, and Linux. All your cards and study data are stored locally on your device. No internet connection required to study.' },
  { q: 'Can I import cards from other apps?',
    a: 'Yes. You can import decks directly from other flashcard apps including Anki and Quizlet. Cards, including formatting, come across automatically. CSV is supported too.' },
  { q: 'How does the spaced repetition work?',
    a: 'Recall uses spaced repetition to schedule your reviews at the optimal time for long-term retention. The app includes two industry-leading algorithms: FSRS-6, the state-of-the-art default that models your personal forgetting curve for maximum accuracy, and SM-2, the proven classic used by millions of learners. You can switch algorithms any time in the app settings.' },
  { q: 'Is there a free trial?',
    a: 'Yes. Recall includes a 14-day free trial with no credit card required. After the trial, a one-time payment of $24 AUD unlocks Recall permanently. No subscription, no recurring charges.' },
  { q: 'Is my data private?',
    a: 'Your flashcard data is stored locally on your device. We use Supabase for account authentication only. No analytics, no third-party trackers. We never sell your data and never will.' },
  { q: 'Will there be a web version?',
    a: 'Recall is a native desktop app available on Windows, Mac, and Linux. A web version is not currently planned. Native means faster, offline-first, and your data stays on your device.' },
  { q: 'Will I get spam?',
    a: 'When you join the waitlist we\'ll only send one launch announcement. No spam, ever.' },
];

const FAQItem = ({ q, a, isOpen, onToggle }) => (
  <div style={{ borderTop: '1px solid var(--border)' }}>
    <button onClick={onToggle} style={{
      width: '100%', textAlign: 'left', padding: '20px 4px',
      minHeight: 64, boxSizing: 'border-box',
      background: 'transparent', border: 'none', cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      color: 'var(--fg)', fontFamily: 'var(--font-body)',
      fontSize: 17, fontWeight: 500, letterSpacing: '-0.011em',
    }}>
      <span>{q}</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 28, height: 28, borderRadius: 999, flexShrink: 0,
        background: 'var(--surface-2)', border: '1px solid var(--border)',
        color: 'var(--fg-2)',
        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </span>
    </button>
    <div style={{
      display: 'grid',
      gridTemplateRows: isOpen ? '1fr' : '0fr',
      transition: 'grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1)',
    }}>
      <div style={{ overflow: 'hidden' }}>
        <div style={{
          padding: '0 4px 22px',
          opacity: isOpen ? 1 : 0,
          transition: 'opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)',
        }}>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: 'var(--fg-2)', maxWidth: 720, textWrap: 'pretty' }}>{a}</p>
        </div>
      </div>
    </div>
  </div>
);

const FAQ = () => {
  const [openIdx, setOpenIdx] = useSPSt(0);
  const toggle = (i) => setOpenIdx((cur) => cur === i ? -1 : i);
  return (
    <section id="faq" className="section section-tight" style={{
      display: 'flex', flexDirection: 'column', gap: 32,
      borderTop: '1px solid var(--border)',
    }}>
      <Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, textAlign: 'center', alignItems: 'center' }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="h-display" style={{ textAlign: 'center' }}>
            Frequently asked <span className="dim">questions.</span>
          </h2>
        </div>
      </Reveal>
      <Reveal delay={100}>
        <div style={{ borderBottom: '1px solid var(--border)' }}>
          {FAQ_ITEMS.map((f, i) => (
            <FAQItem key={f.q} q={f.q} a={f.a} isOpen={openIdx === i} onToggle={() => toggle(i)} />
          ))}
        </div>
      </Reveal>
    </section>
  );
};

/* ============================================================
   Bold Statement — "It's just better."
   ============================================================ */
const BoldStatement = () => (
  <Reveal>
    <section style={{
      borderTop: '1px solid #222222',
      borderBottom: '1px solid #222222',
      background: '#0d0d0d',
      padding: 'clamp(60px, 10vw, 120px) 32px',
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <p style={{
          margin: 0,
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 'clamp(28px, 5vw, 56px)',
          lineHeight: 1.15,
          letterSpacing: '-0.035em',
          color: 'var(--fg)',
        }}>
          Anki is powerful. Quizlet is popular.<br />
          Recall is neither.{' '}
          <span style={{
            background: 'var(--accent-gradient)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>It's just better.</span>
        </p>
      </div>
    </section>
  </Reveal>
);

/* ============================================================
   Home pricing - single card
   ============================================================ */
const HOME_PRICING_FEATURES = [
  'Classic, Type, and Speed study modes',
  'FSRS-6 and SM-2 spaced repetition',
  '7 card types',
  'Streaks, XP, and activity heatmap',
  'Unlimited local decks',
  'Import from Anki and CSV',
  'Windows, Mac and Linux',
];

const HomePricing = () => {
  const [hover, setHover] = useSPSt(false);
  return (
    <section id="pricing" className="section" style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 48,
    }}>
      <Reveal>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <span className="eyebrow">Pricing</span>
          <h2 className="h-display">Simple pricing.</h2>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', letterSpacing: '-0.011em', maxWidth: 480 }}>
            Try everything free for 14 days. No credit card required.
          </p>
        </div>
      </Reveal>

      <_SPMD {...(!_spReduced && _sfm ? {
        initial: { opacity: 0, scale: 0.97 },
        whileInView: { opacity: 1, scale: 1 },
        viewport: { once: true, amount: 0.2 },
        transition: { duration: 0.5, ease: 'easeOut', delay: 0.08 },
      } : {})}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, width: '100%', maxWidth: 480 }}>
          <div
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
            style={{
              width: '100%', boxSizing: 'border-box',
              background: 'var(--surface)',
              border: '1px solid rgba(255,107,107,0.3)',
              borderRadius: 16, padding: '36px 36px 32px',
              display: 'flex', flexDirection: 'column', gap: 24,
              boxShadow: '0 0 60px rgba(255,107,107,0.08)',
              transition: 'transform var(--dur-3) var(--ease-out)',
              transform: hover ? 'translateY(-2px)' : 'translateY(0)',
            }}>

            <div style={{
              alignSelf: 'flex-start', padding: '4px 12px', borderRadius: 999,
              background: 'rgba(255,107,107,0.1)', border: '1px solid rgba(255,107,107,0.25)',
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
              color: 'rgba(255,107,107,0.85)', letterSpacing: '0.06em', textTransform: 'uppercase',
            }}>First 100 users · 50% off</div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 22,
                  color: 'var(--fg-3)', textDecoration: 'line-through', letterSpacing: '-0.01em',
                }}>$24</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 72, letterSpacing: '-0.045em', color: 'var(--fg)', lineHeight: 1,
                }}>$12</span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: 'var(--fg-3)', letterSpacing: '0.04em',
                }}>AUD</span>
              </div>
              <p style={{ margin: 0, fontSize: 13, color: 'var(--fg-3)', letterSpacing: '-0.005em' }}>
                One-time payment. Lifetime access. No subscription.
              </p>
            </div>

            <div style={{ height: 1, background: 'var(--border)' }} />

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {HOME_PRICING_FEATURES.map((f) => (
                <li key={f} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 12,
                  fontSize: 15, color: 'var(--fg-2)', letterSpacing: '-0.011em',
                }}>
                  <span style={{ flexShrink: 0, marginTop: 2, color: 'var(--accent)' }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </span>
                  {f}
                </li>
              ))}
            </ul>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 10 }}>
              <a href="waitlist.html"
                style={{
                  height: 52,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: 'var(--accent-gradient)', color: '#fff', borderRadius: 12,
                  textDecoration: 'none',
                  fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, letterSpacing: '-0.011em',
                  transition: 'box-shadow var(--dur-2) var(--ease-out)',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 0 20px rgba(255,107,107,0.25)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
              >Join the Waitlist</a>
              <p style={{ margin: 0, fontSize: 12, color: 'var(--fg-3)', textAlign: 'center', letterSpacing: '-0.005em' }}>
                14-day free trial included. Pay once, use forever.
              </p>
            </div>
          </div>
        </div>
      </_SPMD>
    </section>
  );
};

Object.assign(window, {
  StatsPreview, AnimatedHeatmap, BigStat,
  Comparison, COMPARISON_ROWS,
  PrivacyPromise, FAQ, FAQ_ITEMS, FAQItem,
  HomePricing, BoldStatement,
});