/* global React, LinaryMark, LinaryWordmark, PhoneFrame, PhoneStatsScreen, useReveal, BlobField */
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ── Luna AI ─────────────────────────────────────────────────
function LunaSection() {
  const ref = useReveal();
  return (
    <section ref={ref} id="luna" className="scene scene--cream2">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 80, alignItems: 'center' }} className="two-col">
          <div>
            <div className="reveal eyebrow"><span className="dot" /> Luna · jouw AI-reflectie</div>
            <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
              Inzichten op basis van wat <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>jij</em> schreef.
            </h2>
            <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 22, maxWidth: 520 }}>
              Luna leest je entries (alleen als jij dat wil) en genereert maandrapporten met thema's, terugkerende emoties en zachte observaties — namen worden lokaal geanonimiseerd voor er iets de deur uit gaat.
            </p>

            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
              ['Maandrapport', 'Een korte synthese van je maand met thema\'s en hoogtepunten.'],
              ['Reflectievragen', 'Zachte vragen op basis van wat je schreef — niet generiek.'],
              ['PII-anonimisatie', 'Namen, plaatsen en gevoelige termen worden lokaal vervangen.'],
              ['Aan/uit per moment', 'Schakel Luna uit per entry, of helemaal — je entries blijven.']].
              map(([t, d], i) =>
              <div key={t} className="reveal" style={{ '--rev-delay': `${0.16 + i * 0.05}s`, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ width: 26, height: 26, borderRadius: 999, background: 'var(--clay)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0, marginTop: 2 }}>✓</div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 17 }}>{t}</div>
                    <div style={{ fontSize: 15, color: 'var(--soft)', marginTop: 2, lineHeight: 1.5 }}>{d}</div>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="reveal" style={{ '--rev-delay': '0.2s' }}>
            <div style={{
              background: 'var(--cream)', borderRadius: 32,
              padding: 24, boxShadow: 'var(--shadow-md)',
              border: '1px solid var(--line)',
              display: 'flex', flexDirection: 'column',
            }}>
              {/* Chat header */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 16, borderBottom: '1px solid var(--line)', marginBottom: 20 }}>
                <svg
                  viewBox="0 0 1024 1024"
                  style={{ width: 36, height: 36, flexShrink: 0, display: 'block', color: 'var(--clay-deep)' }}
                  aria-label="Luna"
                  role="img"
                >
                  <path fill="currentColor" d="M 859.01,101.14 C 888.01,110.65 892.41,114.75 901.39,143.40 910.52,114.46 915.21,110.25 943.72,101.05 914.62,92.14 910.72,87.83 901.39,58.70 891.91,88.43 888.61,92.14 859.01,101.14 Z" />
                  <path fill="currentColor" d="M 843.92,256.32 C 883.00,269.12 888.94,274.65 901.04,313.24 913.34,274.25 919.67,268.58 958.10,256.19 918.87,244.18 913.61,238.38 901.04,199.14 888.27,239.19 883.81,244.18 843.92,256.32 Z" />
                  <path fill="currentColor" d="M 705.41,174.19 C 759.88,192.02 768.15,199.72 785.01,253.45 802.15,199.16 810.97,191.27 864.50,174.01 809.85,157.29 802.52,149.22 785.01,94.56 767.21,150.35 761.01,157.29 705.41,174.19 Z" />
                  <path fill="currentColor" d="M 413.13,177.70 C 342.30,238.00 297.45,327.84 297.52,428.33 297.68,609.80 444.71,757.26 626.51,757.29 659.56,757.28 690.62,752.35 720.73,743.25 720.73,743.25 573.33,904.78 364.06,832.55 185.34,772.37 122.38,603.85 135.34,481.63 165.90,220.52 413.13,177.70 413.13,177.70 Z" />
                  <path fill="none" stroke="currentColor" strokeWidth="20" d="M 130.20,512.80 C 130.36,701.56 283.30,854.95 472.40,854.98 661.20,854.95 814.61,701.53 814.61,512.80 814.61,323.52 661.42,170.61 472.40,170.61 283.11,170.61 130.06,323.54 130.20,512.80 Z" />
                </svg>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em' }}>Luna</div>
                  <div style={{ fontSize: 12, color: 'var(--soft)' }}>Online</div>
                </div>
              </div>

              {/* Chat messages */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 360 }}>

                {/* User message 1 */}
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <div style={{
                    maxWidth: '78%',
                    padding: '12px 16px',
                    background: 'var(--clay)',
                    color: '#fff',
                    borderRadius: '20px 20px 4px 20px',
                    fontSize: 15, lineHeight: 1.45,
                    boxShadow: '0 2px 8px rgba(200, 149, 109, 0.18)',
                  }}>
                    Wat schreef ik vorige week toen ik me zo onrustig voelde?
                  </div>
                </div>

                {/* Luna message 1 */}
                <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                  <div style={{
                    maxWidth: '85%',
                    padding: '12px 16px',
                    background: '#fff',
                    color: 'var(--ink)',
                    border: '1px solid var(--line)',
                    borderRadius: '4px 20px 20px 20px',
                    fontSize: 15, lineHeight: 1.5,
                    boxShadow: '0 2px 8px rgba(74, 55, 40, 0.05)',
                  }}>
                    Op dinsdag schreef je over een drukke vergaderdag — drie deadlines tegelijk, weinig tijd om te eten. Donderdag noemde je dat je slecht had geslapen door diezelfde week.
                  </div>
                </div>

                {/* User message 2 */}
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <div style={{
                    maxWidth: '78%',
                    padding: '12px 16px',
                    background: 'var(--clay)',
                    color: '#fff',
                    borderRadius: '20px 20px 4px 20px',
                    fontSize: 15, lineHeight: 1.45,
                    boxShadow: '0 2px 8px rgba(200, 149, 109, 0.18)',
                  }}>
                    Zie je een patroon in wanneer ik me het lichtst voel?
                  </div>
                </div>

                {/* Luna message 2 */}
                <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                  <div style={{
                    maxWidth: '85%',
                    padding: '12px 16px',
                    background: '#fff',
                    color: 'var(--ink)',
                    border: '1px solid var(--line)',
                    borderRadius: '4px 20px 20px 20px',
                    fontSize: 15, lineHeight: 1.5,
                    boxShadow: '0 2px 8px rgba(74, 55, 40, 0.05)',
                  }}>
                    Bijna altijd na een lange wandeling — vooral als die in de ochtend valt. Je toon is dan merkbaar zachter, en je schrijft korter, alsof je minder hoeft uit te leggen.
                  </div>
                </div>

              </div>

              {/* Chat input */}
              <div style={{
                marginTop: 18,
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px',
                background: 'var(--cream-2)',
                borderRadius: 999,
                border: '1px solid var(--line)',
              }}>
                <span style={{ flex: 1, fontSize: 14, color: 'var(--soft)', fontStyle: 'italic' }}>Stel Luna een vraag...</span>
                <div style={{
                  width: 32, height: 32, borderRadius: 999,
                  background: 'var(--clay)', color: '#fff',
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Stats showcase — phone mock + supporting data viz ───────
function StatsShowcase() {
  const ref = useReveal();
  return (
    <section ref={ref} id="stats" className="scene scene--cream" >
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="two-col">
          <div className="reveal" style={{ display: 'flex', justifyContent: 'center', position: 'relative', minHeight: 540 }}>
            {/* Soft breathing backdrop */}
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', zIndex: 0 }}>
              <div className="breathe" style={{ width: 420, height: 420, background: 'var(--peach)', borderRadius: '54% 46% 50% 50% / 48% 52% 48% 52%', opacity: 0.55 }} />
            </div>

            <div style={{
              position: 'relative',
              transform: 'rotate(-2deg)',
              width: 560, height: 420,
              borderRadius: 8,
              boxShadow: '0 30px 70px rgba(62, 42, 28, 0.22), 0 8px 22px rgba(62, 42, 28, 0.12)',
              zIndex: 1,
              overflow: 'hidden',
            }}>
              <img
                src="assets/images/stats_screenshot.png"
                alt="Linary statistieken"
                draggable={false}
                style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  objectPosition: 'top center',
                  display: 'block',
                  userSelect: 'none',
                  WebkitUserDrag: 'none',
                }}
              />
            </div>
          </div>

          <div>
            <div className="reveal eyebrow"><span className="dot" /> Statistieken</div>
            <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
              Patronen die je niet wist <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>dat ze er waren.</em>
            </h2>
            <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 22, maxWidth: 520 }}>
              Linary rekent je stemmingen, labels en activiteit door. Per week, maand en jaar — altijd in jouw kleuren.
            </p>

            <div className="reveal" style={{ '--rev-delay': '0.2s', marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
              { l: 'Gem. dagen op rij', v: '12' },
              { l: 'Stemmingen gevolgd', v: '14' },
              { l: 'Labels mogelijk', v: '∞' },
              { l: 'Locaties bewaard', v: 'lokaal' }].
              map((s, i) =>
              <div key={i} style={{ background: 'var(--cream-2)', borderRadius: 22, padding: 22 }}>
                  <div style={{ fontSize: 11, color: 'var(--soft)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>{s.l}</div>
                  <div style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.03em', marginTop: 10 }}>{s.v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── Pricing — Free / Premium / Elite ────────────────────────
function PricingSection() {
  const ref = useReveal();
  const [yearly, setYearly] = useStateB(true);
  const tiers = [
  {
    name: 'Gratis',
    tag: 'Voor wie begint',
    price: { m: '€0', y: '€0' },
    sub: 'Voor altijd gratis',
    features: [
    'Onbeperkt schrijven, lokaal',
    'Stemming & basislabels',
    'Op deze dag-herinneringen',
    'Export naar Markdown',
    'Eén thema (Warm)'],

    cta: 'Begin nu',
    tone: 'cream2'
  },
  {
    name: 'Premium',
    tag: 'Voor de toegewijden',
    price: { m: '€4,99', y: '€39' },
    sub: yearly ? 'Per jaar — 2 maanden gratis' : 'Per maand',
    features: [
    'Alles in Gratis',
    'Uitgebreide statistieken & rapporten',
    'Onbeperkt labels & tags',
    'Versleutelde cloud sync',
    'Alle 6 thema\'s · dark mode',
    'PDF-export met cover'],

    cta: 'Probeer 7 dagen gratis',
    tone: 'peach',
    featured: true
  },
  {
    name: 'Elite',
    tag: 'Voor wie verder kijkt',
    price: { m: '€8,99', y: '€69' },
    sub: yearly ? 'Per jaar — 3 maanden gratis' : 'Per maand',
    features: [
    'Alles in Premium',
    'Onbeperkte Luna AI-inzichten',
    'AI-reflecties bij elk maandrapport',
    'Sentiment-analyse over jaren',
    'Prioriteitsondersteuning',
    'Vroege toegang tot nieuwe features'],

    cta: 'Word Elite',
    tone: 'bark'
  }];


  return (
    <section ref={ref} id="pricing" className="scene scene--cream2">
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
          <div className="reveal eyebrow" style={{ justifyContent: 'center' }}><span className="dot" /> Prijzen</div>
          <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
            Eerlijk, transparant, <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>zonder advertenties.</em>
          </h2>
          <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 22 }}>
            Linary is gratis te gebruiken. Premium en Elite ondersteunen ons werk en geven jou meer.
          </p>

          <div className="reveal" style={{ '--rev-delay': '0.18s', display: 'inline-flex', marginTop: 34, padding: 5, background: 'var(--cream)', borderRadius: 999, border: '1px solid var(--line)', gap: 4 }}>
            <button onClick={() => setYearly(false)} style={{
              padding: '10px 22px', borderRadius: 999, border: 'none', cursor: 'pointer',
              background: !yearly ? 'var(--ink)' : 'transparent',
              color: !yearly ? 'var(--cream)' : 'var(--ink)',
              font: 'inherit', fontWeight: 700, fontSize: 14
            }}>Maandelijks</button>
            <button onClick={() => setYearly(true)} style={{
              padding: '10px 22px', borderRadius: 999, border: 'none', cursor: 'pointer',
              background: yearly ? 'var(--ink)' : 'transparent',
              color: yearly ? 'var(--cream)' : 'var(--ink)',
              font: 'inherit', fontWeight: 700, fontSize: 14,
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              Jaarlijks
              <span style={{ background: 'var(--clay)', color: '#fff', fontSize: 11, padding: '2px 7px', borderRadius: 999, letterSpacing: '0.02em' }}>−20%</span>
            </button>
          </div>
        </div>

        <div className="pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, alignItems: 'stretch' }}>
          {tiers.map((t, i) => {
            const isBark = t.tone === 'bark';
            const isPeach = t.tone === 'peach';
            return (
              <div key={t.name} className="reveal" style={{
                '--rev-delay': `${i * 0.08}s`,
                background: isBark ? 'var(--bark)' : isPeach ? 'var(--peach)' : 'var(--cream)',
                color: isBark ? 'var(--cream)' : 'var(--ink)',
                borderRadius: 32, padding: 36,
                border: t.featured ? '2px solid var(--ink)' : '1px solid var(--line)',
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                boxShadow: t.featured ? '0 30px 60px -20px rgba(62,42,28,0.18)' : 'none',
                transform: t.featured ? 'translateY(-12px)' : 'none'
              }}>
                {t.featured &&
                <div style={{
                  position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                  padding: '6px 14px', background: 'var(--ink)', color: 'var(--cream)',
                  fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
                  borderRadius: 999
                }}>Meest gekozen</div>
                }
                <div>
                  <div style={{ fontSize: 13, color: isBark ? 'var(--peach-deep)' : 'var(--clay-deep)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>{t.tag}</div>
                  <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', marginTop: 6 }}>{t.name}</div>
                </div>

                <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.95 }}>
                    {yearly ? t.price.y : t.price.m}
                  </div>
                  {t.price.m !== '€0' &&
                  <div style={{ fontSize: 14, opacity: 0.6 }}>{yearly ? '/jaar' : '/maand'}</div>
                  }
                </div>
                <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>{t.sub}</div>

                <div style={{ height: 1, background: isBark ? 'rgba(250,246,238,0.15)' : 'var(--line)', margin: '24px 0' }} />

                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                  {t.features.map((f, j) =>
                  <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, lineHeight: 1.45 }}>
                      <span style={{
                      width: 20, height: 20, borderRadius: 999, flexShrink: 0,
                      background: isBark ? 'var(--clay)' : isPeach ? 'var(--ink)' : 'var(--clay)',
                      color: isBark ? '#fff' : isPeach ? 'var(--cream)' : '#fff',
                      display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, marginTop: 2
                    }}>✓</span>
                      {f}
                    </li>
                  )}
                </ul>

                <a href="#download" className={`btn ${isBark ? 'btn-on-bark' : t.featured ? 'btn-primary' : 'btn-clay'}`} style={{ marginTop: 28, width: '100%' }}>
                  {t.cta}
                </a>
              </div>);

          })}
        </div>

        <p className="reveal" style={{ '--rev-delay': '0.3s', textAlign: 'center', fontSize: 14, color: 'var(--soft)', marginTop: 40 }}>
          Studenten en docenten: <a href="#" style={{ color: 'var(--clay-deep)', fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 4 }}>50% korting</a> op Premium &amp; Elite via je e-mail.
        </p>
      </div>
      <style>{`
        @media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr !important; }
          .pricing-grid > div { transform: none !important; }
        }
      `}</style>
    </section>);

}

// ── Testimonials ────────────────────────────────────────────
function TestimonialsSection() {
  const ref = useReveal();
  const quotes = [
  { q: 'Ik open Linary elke ochtend met mijn koffie. Drie minuten, en ik weet wie ik gisteren was.', a: 'Anouk · Amsterdam · 2 jaar gebruiker' },
  { q: 'Andere apps voelen als werk. Linary voelt als een vriend die luistert zonder te onderbreken.', a: 'Sven · Gent · 8 maanden' },
  { q: 'Op deze dag-functie raakte me harder dan verwacht. Ik las wat ik 4 jaar geleden schreef en huilde.', a: 'Maaike · Utrecht · 4 jaar' },
  { q: 'Eindelijk een journal-app waarin AI niet aanvoelt als een chatbot. Luna stelt me de juiste vragen.', a: 'Joris · Eindhoven · 1 jaar' },
  { q: 'De rust van het ontwerp matched de rust die ik probeer te creëren. Geen prikkels, geen prompts.', a: 'Lina · Rotterdam · 3 jaar' },
  { q: 'Ik heb mijn vorige journals (5 jaar Day One) erin geïmporteerd en houd het hier voorgoed.', a: 'Tom · Berlijn · 6 maanden' }];

  return (
    <section ref={ref} className="scene scene--cream">
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div className="reveal eyebrow"><span className="dot" /> Wat lezers zeggen</div>
          <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
            2.300+ mensen schrijven dagelijks <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>Linary.</em>
          </h2>
        </div>
        <div className="t-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {quotes.map((t, i) => {
            return (
              <div key={i} className="reveal" style={{
                '--rev-delay': `${i * 0.05}s`,
                background: 'var(--cream-2)',
                borderRadius: 24, padding: 28,
                display: 'flex', flexDirection: 'column', gap: 18
              }}>
                <svg width="28" height="22" viewBox="0 0 28 22" fill="none" style={{ color: 'var(--clay)' }}>
                  <path d="M0 22V14C0 6.27 4.27 1 11 0L12 4C7.6 5.6 5 8.27 5 13H10V22H0ZM16 22V14C16 6.27 20.27 1 27 0L28 4C23.6 5.6 21 8.27 21 13H26V22H16Z" fill="currentColor" />
                </svg>
                <p className="serif" style={{ fontSize: 19, lineHeight: 1.45, color: 'var(--ink)', margin: 0, fontWeight: 400, flex: 1 }}>
                  {t.q}
                </p>
                <div style={{ fontSize: 13, color: 'var(--soft)', fontWeight: 700, letterSpacing: '0.01em' }}>— {t.a}</div>
              </div>);

          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { .t-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 700px)  { .t-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

// ── Themes ──────────────────────────────────────────────────
function ThemesSection({ onPick, current }) {
  const ref = useReveal();
  const themes = [
  { id: 'warm', name: 'Warm', sw: ['#FAF6EE', '#F4D9C4', '#D4936B', '#3E2A1C'] },
  { id: 'sage', name: 'Sage', sw: ['#F4F6EE', '#D9E5C7', '#87A96B', '#29381F'] },
  { id: 'lavender', name: 'Lavendel', sw: ['#F7F4FA', '#DCCCE6', '#9D8DB3', '#2E2440'] },
  { id: 'ocean', name: 'Oceaan', sw: ['#F0F6FA', '#C3DCE8', '#5B8FA8', '#16323F'] },
  { id: 'bloom', name: 'Bloesem', sw: ['#FCF1EE', '#F1C2BD', '#C97570', '#401D1B'] },
  { id: 'stone', name: 'Stone', sw: ['#F4F2EC', '#D6CFBF', '#8C8780', '#2A2825'] }];

  return (
    <section ref={ref} id="themes" className="scene scene--peach">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="reveal eyebrow"><span className="dot" /> Zes thema's, donker en licht</div>
            <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
              Een kleur die <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: "var(--clay-deep)" }}>past.</em>
            </h2>
          </div>
          <p className="reveal lede" style={{ maxWidth: 380, margin: 0, '--rev-delay': '0.12s' }}>
            Tik op een kleur om de hele site in dat thema te zien. In de app vind je dezelfde set, plus dark mode.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14 }}>
          {themes.map((t, i) => {
            const active = current === t.id;
            return (
              <button key={t.id} onClick={() => onPick && onPick(t.id)} className="reveal" style={{
                '--rev-delay': `${i * 0.05}s`,
                background: 'var(--cream)',
                border: active ? '2px solid var(--ink)' : '1px solid var(--line)',
                borderRadius: 22, padding: 18, textAlign: 'left',
                cursor: 'pointer', font: 'inherit', color: 'inherit',
                display: 'flex', flexDirection: 'column', gap: 14,
                transition: 'all 0.3s cubic-bezier(.2,.7,.2,1)'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = 'var(--shadow-md)';}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
                
                <div style={{ display: 'flex', gap: 4, height: 52 }}>
                  {t.sw.map((c, j) =>
                  <div key={j} style={{ flex: 1, background: c, borderRadius: 10, border: '1px solid rgba(0,0,0,0.05)' }} />
                  )}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontWeight: 700, fontSize: 16 }}>{t.name}</span>
                  {active && <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--clay-deep)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>● actief</span>}
                </div>
              </button>);

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

}

// ── FAQ ─────────────────────────────────────────────────────
function FaqSection() {
  const ref = useReveal();
  const [open, setOpen] = useStateB(0);
  const items = [
  { q: 'Wat is Linary?', a: 'Linary is een privacygerichte dagboek-app waarmee je dagelijks je gedachten, gevoelens en ervaringen kunt vastleggen. Met stemmingstracking, labels en optionele AI-inzichten krijg je meer inzicht in je welzijn.' },
  { q: 'Zijn mijn gegevens veilig?', a: 'Ja. Je entries worden lokaal op je apparaat opgeslagen. Als je cloud sync inschakelt, worden je gegevens versleuteld met een persoonlijke encryptiesleutel voordat ze je apparaat verlaten. Niemand, ook wij niet, kan je entries lezen.' },
  { q: 'Wat doet de AI-functie?', a: 'Luna kan je helpen met reflectie, geeft inzichten op basis van je entries en beantwoordt vragen over je dagboek. Je entries worden geanonimiseerd voordat ze naar de AI worden gestuurd. Je kunt AI op elk moment in- of uitschakelen via Instellingen.' },
  { q: 'Kan ik Linary zonder internet gebruiken?', a: 'Ja. Linary werkt volledig offline. Je entries worden lokaal opgeslagen en je hebt geen internetverbinding nodig om te schrijven. Alleen cloud sync en AI-functies vereisen een internetverbinding.' },
  { q: 'Hoe werkt cloud sync?', a: 'Je kunt kiezen tussen Linary Server of Google Drive als cloudopslag. Bij het inschakelen stel je een 4-cijferige PIN in waarmee je entries versleuteld worden. Sync gebeurt automatisch op de achtergrond.' },
  { q: 'Wat als ik mijn PIN vergeet?', a: 'Bij het instellen van cloud sync wordt een hersteloptie aangemaakt. Je kunt via je accountinstellingen een verificatiecode aanvragen om je PIN te resetten. Je bestaande cloud-entries blijven hierbij behouden.' },
  { q: 'Wat is het verschil tussen Premium en Elite?', a: 'Premium geeft je toegang tot uitgebreide statistieken, rapporten en meer labels. Elite bevat alles van Premium plus onbeperkte AI-inzichten via Luna, geavanceerde rapporten met AI-reflecties en prioriteitsondersteuning.' },
  { q: 'Kan ik mijn data exporteren?', a: 'Ja. Je kunt rapporten exporteren als PDF via het statistiekenscherm. Daarnaast kun je een back-up maken via Google Drive in de instellingen onder Data & Cloud.' },
  { q: 'Hoe verwijder ik mijn account?', a: 'Ga naar Instellingen → Account → Account verwijderen. Je gegevens worden na een wachttijd van 30 dagen definitief verwijderd. Binnen die periode kun je het verzoek annuleren.' },
  { q: 'Kan ik meerdere entries per dag schrijven?', a: 'Linary is ontworpen voor één entry per dag, zodat je een duidelijk dagelijks overzicht houdt. Je kunt je entry gedurende de dag bijwerken en aanvullen.' },
  { q: 'In welke talen is Linary beschikbaar?', a: 'Linary is beschikbaar in het Nederlands, Engels, Duits, Spaans en Frans. De app past zich automatisch aan op basis van je apparaatinstellingen.' }];


  return (
    <section ref={ref} id="faq" className="scene scene--cream">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }} className="two-col faq-grid">
          <div className="reveal" style={{ position: 'sticky', top: 100 }}>
            <div className="eyebrow"><span className="dot" /> Veelgestelde vragen</div>
            <h2 className="h-section" style={{ marginTop: 22 }}>
              Vragen die we <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>vaker</em> krijgen.
            </h2>
            <p className="lede" style={{ marginTop: 22 }}>
              Antwoorden zijn dezelfde als die in de app onder Help &amp; Ondersteuning. Mis je iets? <a href="#" style={{ color: 'var(--clay-deep)', fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 4 }}>Stuur ons een bericht.</a>
            </p>
          </div>

          <div className="reveal" style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%', textAlign: 'left', cursor: 'pointer',
                      background: 'transparent', border: 'none', padding: '22px 0',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      gap: 20, color: 'var(--ink)', font: 'inherit', fontStyle: "inherit", fontVariant: "inherit", fontWeight: "500", fontStretch: "inherit", fontSize: "inherit", lineHeight: "inherit", fontFamily: "inherit", fontOpticalSizing: "inherit", fontVariationSettings: "inherit", fontSizeAdjust: "inherit", fontKerning: "inherit", fontLanguageOverride: "inherit", fontFeatureSettings: "inherit"
                    }}>
                    
                    <span style={{ fontSize: 19, letterSpacing: '-0.015em', fontWeight: "500" }}>{it.q}</span>
                    <span style={{
                      flexShrink: 0, width: 36, height: 36, borderRadius: 999,
                      border: '1.5px solid var(--line-strong)',
                      display: 'grid', placeItems: 'center',
                      transition: 'background 0.2s ease, color 0.2s ease, border-color 0.2s ease',
                      background: isOpen ? 'var(--ink)' : 'transparent',
                      color: isOpen ? 'var(--cream)' : 'var(--ink)',
                      borderColor: isOpen ? 'var(--ink)' : 'var(--line-strong)'
                    }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s cubic-bezier(0.2,0.7,0.2,1)' }}>
                        <path d="M6 9l6 6 6-6" />
                      </svg>
                      </span>
                  </button>
                  <div style={{
                    overflow: 'hidden',
                    maxHeight: isOpen ? 320 : 0,
                    transition: 'max-height 0.5s cubic-bezier(0.2,0.7,0.2,1), opacity 0.3s ease',
                    opacity: isOpen ? 1 : 0
                  }}>
                    <p style={{
                      fontSize: 16, lineHeight: 1.65, color: 'var(--soft)',
                      margin: 0, paddingBottom: 24, paddingRight: 52, fontWeight: 400
                    }}>{it.a}</p>
                  </div>
                </div>);

            })}
          </div>
        </div>
      </div>
    <style>{`
        @media (max-width: 900px) {
          .faq-grid { gap: 80px !important; }
        }
      `}</style>
    </section>);

}

// ── CTA ─────────────────────────────────────────────────────
function DownloadCTA() {
  const ref = useReveal();
  return (
    <section ref={ref} id="download" className="scene scene--clay" style={{ paddingTop: 'clamp(80px, 10vw, 140px)', paddingBottom: 'clamp(80px, 10vw, 140px)' }}>
      <div className="container">
        <div className="reveal reveal-scale" style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
<LinaryWordmark size={'clamp(48px, 5vw, 72px)'} color="#fff" style={{ margin: '0 auto 32px' }} />          <h2 className="h-display" style={{ color: '#fff' }}>
            Een dagboek voor het <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--peach)' }}>lange spel.</em>
          </h2>
          <p className="lede" style={{ color: '#fff', opacity: 0.9, marginTop: 26, maxWidth: 600, marginLeft: 'auto', marginRight: 'auto' }}>
            Gratis te beginnen. Geen account nodig. Je hebt over een jaar verdomd interessante dingen te lezen.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a href="#" className="btn btn-on-clay">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 12.5c0-2.6 2.1-3.9 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.1 2.5-1.8 3.1-.4 7.7 1.3 10.2.8 1.2 1.8 2.6 3.1 2.6 1.2-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.5.9-1.4 1.3-2.8 1.3-2.9 0-.1-2.5-1-2.5-3.9zM15 4.5c.7-.8 1.1-2 1-3.1-1 .1-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.5 2.9-1.4z" /></svg>
              App Store
            </a>
            <a href="#" className="btn" style={{ background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.6)' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.7C3.2 2.1 3 2.7 3 3.5v17c0 .8.2 1.4.6 1.8l.1.1L13 13l-9.4-11.3zM17.4 9.7l-3.1-1.8L4.7 1.5c.4-.1.9 0 1.4.3l11.3 6.5v1.4zM4.7 22.5L14.3 16l3.1-1.8v1.4L6.1 22.2c-.5.3-1 .4-1.4.3zM14.3 8l3.1-1.8 3.7 2.1c1 .6 1 1.8 0 2.4l-3.7 2.1-3.1-1.8L18.4 12 14.3 8z" /></svg>
              Google Play
            </a>
            <a href="#" className="btn" style={{ background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.6)' }}>
              Open in browser →
            </a>
          </div>
          <div style={{ marginTop: 28, fontSize: 14, color: '#fff', opacity: 0.7 }}>
            Beschikbaar op iOS 16+ &amp; Android 11+ &amp; web
          </div>
        </div>
      </div>
    </section>);

}

// ── Footer ──────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="scene scene--cream" style={{ padding: '64px 0 40px' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 40 }}>
        <div style={{ maxWidth: 320 }}>
<LinaryWordmark size={36} color="var(--clay-deep)" />          <p style={{ fontSize: 15, color: 'var(--soft)', marginTop: 18, lineHeight: 1.55 }}>
            Een dagboek voor het lange spel.<br />Privé. Slim. Mooi langzaam.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {['I', 'M', 'X', 'B'].map((c, i) =>
            <a key={i} href="#" style={{
              width: 38, height: 38, borderRadius: 999,
              background: 'var(--cream-2)', display: 'grid', placeItems: 'center',
              color: 'var(--ink)', textDecoration: 'none',
              fontWeight: 700, fontSize: 13
            }}>{c}</a>
            )}
          </div>
        </div>
        {[
        ['Product', ['Functies', 'Luna AI', 'Privacy', 'Prijzen', 'Thema\'s']],
        ['Bedrijf', ['Over ons', 'Manifesto', 'Pers', 'Contact']],
        ['Legal', [['Privacybeleid', 'privacy.html'], ['Voorwaarden', 'voorwaarden.html'], ['Beveiliging', '#'], ['Imprint', '#']]]].
         map(([title, links], i) =>
        <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--soft)', fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>{title}</div>
            {links.map((l, j) => {
              const [label, href] = Array.isArray(l) ? l : [l, '#'];
              return (
                <a key={j} href={href} style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 15 }}>{label}</a>
              );
            })}
          </div>
        )}
      </div>
      <div className="container" style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <div style={{ fontSize: 13, color: 'var(--soft)' }}>© 2026 Linary. Gemaakt met aandacht in Nederland.</div>
        <div style={{ fontSize: 13, color: 'var(--soft)', fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>v1.0.0+2</div>
      </div>
      <style>{`
        @media (max-width: 900px) { footer.scene > .container { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { footer.scene > .container { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>);

}

Object.assign(window, { LunaSection, StatsShowcase, PricingSection, TestimonialsSection, ThemesSection, FaqSection, DownloadCTA, Footer });