/* global React, LinaryMark, LinaryWordmark, PhoneFrame, PhoneTodayScreen, PhoneComposerScreen, PhoneStatsScreen, useReveal, Blob, BlobField */
const { useState, useEffect, useRef } = React;

// ── Hero ────────────────────────────────────────────────────
function Hero() {
  const ref = useReveal();
  return (
    <section ref={ref} id="top" className="scene scene--cream" style={{ paddingTop: 'clamp(120px, 14vw, 200px)', paddingBottom: 'clamp(60px, 7vw, 100px)' }}>
      <BlobField items={[
      { top: '8%', left: '-6%', size: 360, color: 'var(--peach)', opacity: 0.7, anim: 'drift-a', shape: 0 },
      { top: '50%', right: '-4%', size: 280, color: 'var(--peach-deep)', opacity: 0.4, anim: 'drift-b', shape: 1, blur: 10 },
      { bottom: '-10%', left: '30%', size: 220, color: 'var(--clay)', opacity: 0.18, anim: 'drift-c', shape: 2, blur: 6 }]
      } />
      <div className="container">
        <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
          <div className="reveal" style={{ display: 'flex', justifyContent: 'center' }}>
            <LinaryWordmark
              color="var(--clay-deep)"
              style={{ height: 'clamp(80px, 10vw, 140px)' }}
            />
          </div>
          <h1 className="reveal h-display" style={{ '--rev-delay': '0.05s', marginTop: 24, fontSize: 'clamp(35px, 6.5vw, 92px)' }}>
            Wat deed jij <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>vorig jaar</em><br/>op deze datum?
          </h1>
          <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 28, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
            Linary opent elke ochtend met dezelfde dag uit eerdere jaren. Privé op je toestel, zacht ondersteund door Luna AI, met statistieken die patronen tonen die je zelf niet ziet.
          </p>
          <div className="reveal" style={{ '--rev-delay': '0.18s', display: 'flex', gap: 12, marginTop: 38, justifyContent: 'center', flexWrap: 'wrap' }}>
<a href="#download" className="btn btn-primary" style={{ fontWeight: "600", backgroundColor: "var(--ink)" }}>
              Probeer Linary gratis
              <svg width="14" height="14" 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>
            </a>
            <a href="#meet" className="btn btn-ghost" style={{ fontWeight: "600" }}>Bekijk hoe het werkt</a>
          </div>
          <div className="reveal" style={{ '--rev-delay': '0.24s', display: 'inline-flex', gap: 22, marginTop: 22, alignItems: 'center', fontSize: 13, color: 'var(--soft)', flexWrap: 'wrap', justifyContent: 'center' }}>
            <span style={{ display: 'flex', gap: 2 }}>
              {Array.from({ length: 5 }).map((_, i) => <span key={i} style={{ color: 'var(--clay)', fontSize: 14 }}>★</span>)}
            </span>
            <span><b style={{ color: 'var(--ink)' }}>4.8</b> · 2.300+ recensies</span>
            <span style={{ height: 12, width: 1, background: 'var(--line-strong)' }} />
            <span>End-to-end versleuteld</span>
            <span style={{ height: 12, width: 1, background: 'var(--line-strong)' }} />
            <span>Geen account nodig</span>
          </div>
        </div>

        <div className="reveal float1" style={{ '--rev-delay': '0.3s', marginTop: 80, display: 'flex', justifyContent: 'center', position: 'relative' }}>
          {/* Halo behind phone */}
          <svg viewBox="0 0 800 500" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -42%)', width: 'min(880px, 100%)', height: 'auto', zIndex: 0, opacity: 0.6 }} aria-hidden="true">
            <defs>
              <radialGradient id="halo" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="var(--peach-deep)" stopOpacity="0.7" />
                <stop offset="60%" stopColor="var(--peach)" stopOpacity="0.4" />
                <stop offset="100%" stopColor="var(--cream)" stopOpacity="0" />
              </radialGradient>
            </defs>
            <ellipse cx="400" cy="250" rx="380" ry="220" fill="url(#halo)" />
          </svg>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <PhoneFrame scale={0.92}>
              <PhoneTodayScreen />
            </PhoneFrame>
          </div>
          {/* satellite cards */}
          <div className="float1" style={{ position: 'absolute', top: '12%', left: 'calc(50% - 350px)', animation: 'float1 7s ease-in-out infinite', animationDelay: '-1.5s' }}>
            <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 18, padding: '12px 16px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--peach)', display: 'grid', placeItems: 'center', fontSize: 16 }}>🌿</span>
              <div>
                <div style={{ fontSize: 11, color: 'var(--soft)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700 }}>Streak</div>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em' }}>14 dagen</div>
              </div>
            </div>
          </div>
          {/* Satellite card 2 — Luna (rechtsmidden, ACHTER de telefoon).
              Zelfde Luna sparkle-icoon als v1 i.p.v. een "L"-bolletje. */}
          <div className="float1" style={{ position: 'absolute', top: '36%', right: 'calc(50% - 360px)', animation: 'float1 7s ease-in-out infinite', animationDelay: '-3s', maxWidth: 220 }}>
            <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 18, padding: '12px 16px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, color: 'var(--soft)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700 }}>Luna</div>
                <div className="serif" style={{ fontSize: 13, lineHeight: 1.4, color: 'var(--ink)', fontStyle: 'italic', marginTop: 2 }}>
                  'Welk patroon zie je?'
                </div>
              </div>
              <svg
                viewBox="0 0 1024 1024"
                style={{ width: 32, height: 32, 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>
          </div>
        </div>
      </div>
    </section>);

}

// ── Marquee — "trusted by" / press ──────────────────────────
function PressMarquee() {
  const items = ['Bright Magazine', '★★★★★ App Store', 'Gids voor Mindfulness', '"Een rustige plek"', 'Het Parool', 'Designers United', 'Slow Tech NL', 'Indie App Awards 2025'];
  const list = [...items, ...items];
  return (
    <section className="scene scene--cream" style={{ paddingTop: 32, paddingBottom: 32, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ overflow: 'hidden', position: 'relative' }}>
        <div className="marquee">
          {list.map((it, i) =>
          <span key={i} style={{ fontSize: 17, color: 'var(--soft)', whiteSpace: 'nowrap', letterSpacing: '-0.01em', display: 'inline-flex', alignItems: 'center', gap: 64 }}>
              {it}
              <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--clay)', opacity: 0.5 }} />
            </span>
          )}
        </div>
      </div>
    </section>);

}

// ── Meet Linary — three core gestures, big illustrative scene ──
function MeetSection() {
  const ref = useReveal();
  const beats = [
  { n: '01', t: 'Reis terug in de tijd', d: 'Eén tik en je leest wat je vandaag schreef — vorig jaar, drie jaar terug, vijf jaar geleden. Je herinneringen liggen niet weg te stoffen in een doos. Ze openen vanzelf.' },
  { n: '02', t: 'Praat met je dagboek', d: 'Luna leest mee en stelt vragen die je jezelf nooit zou stellen. Geen lege bladzijde meer, geen writer\'s block — alleen jij, je gedachten, en een zachte spiegel.' },
  { n: '03', t: 'Zie wat je niet zag', d: 'Linary toont je stemmingen, schrijfritmes en patronen door de jaren heen. Welke maand was zwaar? Wanneer voelde je je het lichtst? De cijfers vertellen wat je gevoel niet kon benoemen.' }];
  
  return (
    <section ref={ref} id="meet" className="scene scene--peach">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="two-col">
          <div>
            <div className="reveal eyebrow"><span className="dot" /> Maak kennis met Linary</div>
            <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
              Drie minuten per dag.<br />
              <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>Een leven aan herinneringen.</em>
            </h2>
            <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 22, maxWidth: 520 }}>
              Linary is geen leeg vel papier. Het is je verleden dat terugkomt, een AI die de juiste vragen stelt, en statistieken die patronen zien die jij mist. Drie minuten investeren — een leven lang dividend.
            </p>

            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {beats.map((b, i) =>
              <div key={b.n} className="reveal" style={{ '--rev-delay': `${0.18 + i * 0.06}s`, display: 'flex', gap: 18, alignItems: 'flex-start' }}>
                  <div style={{
                  flexShrink: 0, width: 48, height: 48, borderRadius: 999,
                  background: 'var(--ink)', color: 'var(--cream)',
                  display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14,
                  fontFamily: 'JetBrains Mono, ui-monospace, monospace', letterSpacing: '0.02em'
                }}>{b.n}</div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em' }}>{b.t}</div>
                    <div style={{ fontSize: 16, color: 'var(--soft)', marginTop: 4, lineHeight: 1.55 }}>{b.d}</div>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="reveal" style={{ '--rev-delay': '0.2s', display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{ position: 'relative' }}>
              {/* organic backdrop circle */}
              <div className="breathe" style={{
                position: 'absolute', top: '50%', left: '50%',
                width: 460, height: 460, transform: 'translate(-50%, -50%)',
                background: 'var(--cream)', borderRadius: '46% 54% 50% 50% / 50% 50% 46% 54%',
                opacity: 0.65, zIndex: 0
              }} />
              <div style={{ position: 'relative', zIndex: 1 }}>
                <PhoneFrame scale={0.85} tilt="3deg">
                  <PhoneComposerScreen />
                </PhoneFrame>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .two-col { grid-template-columns: 1fr !important; gap: 56px !important; } }`}</style>
    </section>);

}

// ── On This Day card — interactieve versie zoals echte CurrentEntryCard
// Heeft eigen state voor verbergen (oogje) en AI-uitsluiting (sterretje).
// Volgt patroon uit current_entry_card.dart.
function OnThisDayCard({ year, index }) {
  const [isHidden, setIsHidden] = useState(false);
  const [isAiExcluded, setIsAiExcluded] = useState(false);

  // Hover-state voor de twee icon-buttons
  const [hoverEye, setHoverEye] = useState(false);
  const [hoverAi, setHoverAi] = useState(false);

  // Stop propagation zodat klik op icoon niet de hele card als 'tap' triggert
  const onEyeClick = (e) => {
    e.stopPropagation();
    setIsHidden((v) => !v);
  };
  const onAiClick = (e) => {
    e.stopPropagation();
    setIsAiExcluded((v) => !v);
  };

  return (
    <div className="reveal" style={{
      '--rev-delay': `${0.1 + index * 0.08}s`,
      background: 'var(--cream)',
      color: 'var(--ink)',
      borderRadius: 24, padding: 24,
      boxShadow: '0 4px 20px rgba(74, 55, 40, 0.06), 0 1px 3px rgba(74, 55, 40, 0.04)',
      display: 'flex', flexDirection: 'column',
      transform: index === 1 ? 'translateY(-22px)' : 'none',
    }}>
      {/* Header: date + visibility/AI icons */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', lineHeight: 1.3, color: 'var(--ink)' }}>{year.date}</div>
        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
          {/* Oogje — toggle zichtbaarheid */}
          <button
            type="button"
            onClick={onEyeClick}
            onMouseEnter={() => setHoverEye(true)}
            onMouseLeave={() => setHoverEye(false)}
            aria-label={isHidden ? 'Toon tekst' : 'Verberg tekst'}
            title={isHidden ? 'Toon tekst' : 'Verberg tekst'}
            style={{
              width: 32, height: 32, borderRadius: 8,
              border: 'none', background: hoverEye ? 'color-mix(in srgb, var(--clay) 12%, transparent)' : 'transparent',
              display: 'grid', placeItems: 'center', cursor: 'pointer',
              color: 'var(--soft)',
              transition: 'background 0.15s ease',
              padding: 0,
            }}
          >
            {isHidden ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
              </svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
              </svg>
            )}
          </button>

          {/* Sterretje — AI uitsluiten (strikethrough wanneer uitgesloten) */}
          <button
            type="button"
            onClick={onAiClick}
            onMouseEnter={() => setHoverAi(true)}
            onMouseLeave={() => setHoverAi(false)}
            aria-label={isAiExcluded ? 'Voor AI inschakelen' : 'Uitsluiten van AI'}
            title={isAiExcluded ? 'Voor AI inschakelen' : 'Uitsluiten van AI'}
            style={{
              width: 32, height: 32, borderRadius: 8,
              border: 'none', background: hoverAi ? 'color-mix(in srgb, var(--clay) 12%, transparent)' : 'transparent',
              display: 'grid', placeItems: 'center', cursor: 'pointer',
              color: 'var(--soft)',
              transition: 'background 0.15s ease',
              padding: 0, position: 'relative',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z"/>
            </svg>
            {/* Strikethrough lijntje wanneer uitgesloten — matcht _StrikethroughPainter in HoverIconButton (linksboven naar rechtsonder) */}
            {isAiExcluded && (
              <span style={{
                position: 'absolute',
                left: 6, right: 6, top: '50%',
                height: 1.6,
                background: 'var(--soft)',
                transform: 'rotate(45deg)',
                pointerEvents: 'none',
              }} />
            )}
          </button>
        </div>
      </div>

      <div style={{ height: 13 }} />

      {/* Mood indicator */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ width: 16, height: 16, borderRadius: 8, background: year.moodColor }} />
        <div style={{ width: 12 }} />
        <div style={{ fontSize: 14, color: 'var(--soft)' }}>{year.mood}</div>
      </div>

      {/* Content: zichtbaar of verborgen */}
      {!isHidden ? (
        <>
          <p className="serif" style={{
            fontSize: 17, lineHeight: 1.3, margin: 0, fontWeight: 400,
            color: 'var(--ink)', opacity: 0.92,
            display: '-webkit-box', WebkitLineClamp: 6, WebkitBoxOrient: 'vertical', overflow: 'hidden',
          }}>{year.text}</p>

          {/* Labels chips */}
          {year.labels && year.labels.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
              {year.labels.map((l) => (
                <span key={l} style={{
                  padding: '6px 12px',
                  fontSize: 12, fontWeight: 600,
                  color: 'color-mix(in srgb, var(--ink) 80%, transparent)',
                  background: 'color-mix(in srgb, var(--peach-deep) 30%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--peach-deep) 50%, transparent)',
                  borderRadius: 16,
                }}>{l}</span>
              ))}
            </div>
          )}

          {/* AI uitsluitingsmelding (alleen als content zichtbaar én uitgesloten) */}
          {isAiExcluded && (
            <div style={{
              marginTop: 12,
              fontSize: 13, fontStyle: 'italic',
              color: 'var(--soft)',
            }}>
              Uitgesloten van AI
            </div>
          )}
        </>
      ) : (
        // Verborgen content placeholder — zoals l10n.textHidden in de app
        <div style={{ paddingTop: 4, paddingBottom: 4 }}>
          <div style={{
            fontSize: 15, fontStyle: 'italic',
            color: 'var(--soft)',
          }}>
            Tekst verborgen
          </div>
          {isAiExcluded && (
            <div style={{
              marginTop: 4,
              fontSize: 13, fontStyle: 'italic',
              color: 'var(--soft)',
            }}>
              Uitgesloten van AI
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── On This Day scene — full-bleed bark ─────────────────────
function OnThisDayScene() {
  const ref = useReveal();
  const years = [
    { date: 'Donderdag 6 maart 2025', mood: 'Fijn', moodColor: '#A8C09A', labels: ['thuis', 'ochtend'], text: 'Eerste keer in het nieuwe huis. De zon viel precies door het keukenraam toen we koffie zetten. Voor het eerst sinds maanden voelde het stil — op een goede manier.' },
    { date: 'Maandag 6 maart 2024', mood: 'Geweldig', moodColor: '#E5A89B', labels: ['marathon', 'sanne', 'mijlpaal'], text: 'Marathon gelopen. Bij km 32 dacht ik dat het voorbij was, maar Sanne stond bij de hoek met een bord. Daarna voelden mijn benen niet meer als die van mij.' },
    { date: 'Vrijdag 6 maart 2022', mood: 'Neutraal', moodColor: '#9D8DB3', labels: ['lockdown', 'familie'], text: 'Lockdown dag 54. Brood gebakken dat eindelijk gerezen is. Pa belde — eerste keer sinds we niet langs konden. Hij klonk lichter dan ik had verwacht.' },
  ];

  return (
    <section ref={ref} className="scene scene--cream2" id="onthisday">
      <div className="container">
        <div style={{ maxWidth: 760, margin: '0 auto 64px', textAlign: 'center' }}>
          <div className="reveal eyebrow"><span className="dot" /> Op deze dag</div>
          <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
            Tijd loopt door.<br />
            <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--peach-deep)' }}>Je herinneringen niet.</em>
          </h2>
          <p className="reveal lede" style={{ '--rev-delay': '0.12s', marginTop: 22 }}>
            Elke ochtend opent Linary met dezelfde dag uit eerdere jaren. Soms een glimlach. Soms een dankbaar moment. Altijd een herinnering dat je leven groter is dan deze week.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="otd-grid">
          {years.map((y, i) => (
            <OnThisDayCard key={y.date} year={y} index={i} />
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .otd-grid { grid-template-columns: 1fr !important; }
          .otd-grid > div:nth-child(2) { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

// ── Privacy section — 6 principles in soft grid ─────────────
function FeatureSection() {
  const ref = useReveal();
  const stroke = 'var(--clay-deep)';
  const Icon = {
    lock:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="11" width="16" height="10" rx="2" />
        <path d="M8 11V7a4 4 0 0 1 8 0v4" />
      </svg>,

    device:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="6" y="3" width="12" height="18" rx="2.5" />
        <circle cx="12" cy="17.5" r="0.6" fill={stroke} />
      </svg>,

    eyeOff:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 3l18 18" />
        <path d="M10.6 6.2A10 10 0 0 1 12 6c5 0 9 4.5 10 6a14 14 0 0 1-3 3.6" />
        <path d="M6.5 7.5C4.3 9 2.5 11 2 12c1 1.5 5 6 10 6 1.4 0 2.7-.3 3.9-.8" />
        <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
      </svg>,

    sparkleLock:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3l1.4 3.4L17 8l-3.6 1.6L12 13l-1.4-3.4L7 8l3.6-1.6z" />
        <rect x="9" y="14" width="6" height="6" rx="1.2" />
        <path d="M10.5 14v-1.2a1.5 1.5 0 0 1 3 0V14" />
      </svg>,

    download:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 4v11" />
        <path d="M7 10l5 5 5-5" />
        <path d="M5 19h14" />
      </svg>,

    code:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 7l-5 5 5 5" />
        <path d="M16 7l5 5-5 5" />
        <path d="M14 5l-4 14" />
      </svg>

  };

  const features = [
  { icon: Icon.lock, t: 'End-to-end versleuteld', d: 'Elke regel wordt op je toestel versleuteld vóór synchronisatie. Niemand — ook wij niet — kan meelezen.', tone: 'cream2' },
  { icon: Icon.device, t: 'Lokaal eerst', d: 'Linary werkt volledig offline. Synchronisatie is optioneel; je toestel is altijd de bron van waarheid.', tone: 'peach' },
  { icon: Icon.eyeOff, t: 'Geen tracking, geen ads', d: 'Geen analytics, geen advertenties, geen gedragsprofielen. We bouwen voor jou, niet voor adverteerders.', tone: 'cream2' },
  { icon: Icon.sparkleLock, t: 'Privacy-eerste AI', d: 'Luna draait waar mogelijk on-device. Alles wat naar buiten gaat wordt eerst geanonimiseerd — namen, plekken, contacten.', tone: 'cream2' },
  { icon: Icon.download, t: 'Jouw data, exporteerbaar', d: 'Eén klik en je hele dagboek staat als Markdown of PDF op je toestel. Geen lock-in, geen kleine lettertjes.', tone: 'peach' },
  { icon: Icon.code, t: 'Open & controleerbaar', d: 'Onze cryptografie en datamodellen zijn open source. Onafhankelijke security audits zijn publiek inzichtelijk.', tone: 'cream2' }];


  const bg = (tone) => tone === 'peach' ? 'var(--peach)' : 'var(--cream-2)';
  return (
    <section ref={ref} id="features" className="scene scene--cream" >
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="reveal eyebrow"><span className="dot" /> Privacy by design</div>
            <h2 className="reveal h-section" style={{ '--rev-delay': '0.06s', marginTop: 22 }}>
              Een dagboek dat echt <em className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--clay-deep)' }}>privé is.</em>
            </h2>
          </div>
          <p className="reveal lede" style={{ '--rev-delay': '0.1s', maxWidth: 360, margin: 0 }}>
            Zes principes waarmee we elke beslissing toetsen — van encryptie tot AI tot exportformaat.
          </p>
        </div>

        <div className="features-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {features.map((f, i) =>
          <div key={f.t} className="reveal" style={{
            '--rev-delay': `${i * 0.05}s`,
            background: 'var(--cream-2)',
            borderRadius: 28, padding: 32,
            minHeight: 280,
            display: 'flex', flexDirection: 'column',
            transition: 'transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease',
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = 'var(--shadow-md)';}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
            
              <div style={{
              width: 60, height: 60, borderRadius: 999,
              background: 'var(--cream)', display: 'grid', placeItems: 'center',
              marginBottom: 24,
border: '1px solid var(--line)',
            }}>{f.icon}</div>
              <div style={{ fontWeight: 700, fontSize: 24, letterSpacing: '-0.02em', marginBottom: 10 }}>{f.t}</div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--soft)', margin: 0, marginTop: 'auto' }}>{f.d}</p>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 700px)  { .features-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

Object.assign(window, { Hero, PressMarquee, MeetSection, OnThisDayScene, FeatureSection });