function Private({ setView }) {
  const tiers = [
    {
      key: 'essential',
      naam: 'Essential',
      prijs: '€59',
      tag: 'Voor wie wil weten waar te beginnen.',
      bullets: [
        'Volledige vragenlijst (≈30 min)',
        'Geschreven rapport van 8 pagina’s',
        'Profiel van je drie sterkste kleuren',
        'Per e-mail bezorgd binnen 48u',
      ],
      hl: false,
    },
    {
      key: 'deep',
      naam: 'Deep Dive',
      prijs: '€69',
      tag: 'Het pakket waar de meeste mensen voor kiezen.',
      bullets: [
        'Alles uit Essential',
        'Verfijnd rapport van 16 pagina’s',
        'Hoe je kleuren onder druk veranderen',
        'Schriftelijke vraag-en-antwoord nadien',
      ],
      hl: true,
    },
    {
      key: 'complete',
      naam: 'Complete',
      prijs: '€89',
      tag: 'Voor wie het gesprek wil voeren.',
      bullets: [
        'Alles uit Deep Dive',
        'Gesprek van 45 minuten met Greet',
        'Toegepast op één concrete situatie',
        'Audio van het gesprek terug te horen',
      ],
      hl: false,
    },
  ];

  return (
    <main className="pt-40 pb-24">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-10 mb-20">
          <div className="md:col-span-7">
            <div className="eyebrow mb-6">— Particulier</div>
            <h1 className="hero-display">De volledige analyse.</h1>
            <p className="mt-8 text-[18px] text-yel-soft max-w-[55ch] leading-relaxed">
              Drie pakketten. Hetzelfde fundament — de volledige drijfveren-analyse — met meer of minder gesprek erbij. Je kiest wat past bij waar je nu staat.
            </p>
          </div>
          <div className="md:col-span-4 md:col-start-9 self-end">
            <window.SpectrumRule length={260} thickness={6} />
            <div className="mt-3 text-xs font-mono-x text-yel-mute uppercase tracking-widest">Yelloow · Particulier · 2026</div>
          </div>
        </div>

        {/* Tiers */}
        <div className="grid md:grid-cols-3 gap-6">
          {tiers.map(t => (
            <div
              key={t.key}
              className={`p-8 md:p-10 flex flex-col ${t.hl ? 'bg-yel-ink text-yel-50' : 'bg-white'} `}
              style={{ border: '1px solid rgba(26,26,26,0.1)' }}
            >
              <div className="flex items-center justify-between mb-6">
                <div className={`eyebrow ${t.hl ? 'text-yel-50/60' : ''}`}>{t.tag}</div>
                {t.hl && <span className="text-[10px] font-mono-x px-2 py-1" style={{ background: '#FFD60A', color: '#1A1A1A' }}>POPULAIR</span>}
              </div>
              <div className="font-display text-4xl">{t.naam}</div>
              <div className="font-display text-6xl mt-6">{t.prijs}</div>
              <div className={`text-xs mt-2 ${t.hl ? 'text-yel-50/60' : 'text-yel-mute'}`}>eenmalig · incl. btw</div>
              <ul className="mt-8 space-y-3 flex-1">
                {t.bullets.map((b, i) => (
                  <li key={i} className="flex items-start gap-3 text-[15px] leading-relaxed">
                    <span className="mt-2 w-1.5 h-1.5 rounded-full" style={{ background: t.hl ? '#FFD60A' : '#1A1A1A' }}></span>
                    <span className={t.hl ? 'text-yel-50/90' : 'text-yel-soft'}>{b}</span>
                  </li>
                ))}
              </ul>
              <button
                className={`mt-10 ${t.hl ? 'btn-yellow' : 'btn-primary'}`}
                onClick={() => alert(`Bestel ${t.naam} — gemockt.`)}
              >
                <span className="dot" style={{ background: t.hl ? '#1A1A1A' : '#FFD60A' }}></span>
                Kies {t.naam}
              </button>
            </div>
          ))}
        </div>

        {/* Comparison */}
        <div className="mt-32">
          <div className="eyebrow mb-6">— Vergelijken</div>
          <h2 className="display-md mb-12">Wat zit er in?</h2>
          <div className="overflow-x-auto no-scrollbar">
            <table className="w-full min-w-[720px] text-left">
              <thead>
                <tr className="border-b border-black/20">
                  <th className="py-4 pr-6 font-mono-x text-xs uppercase tracking-widest text-yel-mute font-normal">Onderdeel</th>
                  <th className="py-4 px-4 font-display text-xl">Essential</th>
                  <th className="py-4 px-4 font-display text-xl">Deep Dive</th>
                  <th className="py-4 px-4 font-display text-xl">Complete</th>
                </tr>
              </thead>
              <tbody className="text-[15px]">
                {[
                  ['Vragenlijst', '✓', '✓', '✓'],
                  ['Geschreven rapport', '8 pp.', '16 pp.', '16 pp.'],
                  ['Drie dominante kleuren', '✓', '✓', '✓'],
                  ['Kleuren onder druk', '—', '✓', '✓'],
                  ['Vraag-en-antwoord schriftelijk', '—', '✓', '✓'],
                  ['Gesprek met Greet', '—', '—', '45 min'],
                  ['Doorlooptijd', '48u', '5 dagen', '7–10 dagen'],
                ].map((row, i) => (
                  <tr key={i} className="border-b border-black/10">
                    <td className="py-4 pr-6 text-yel-soft">{row[0]}</td>
                    <td className="py-4 px-4">{row[1]}</td>
                    <td className="py-4 px-4">{row[2]}</td>
                    <td className="py-4 px-4">{row[3]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Report preview */}
        <div className="mt-32 grid md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <div className="eyebrow mb-6">— Voorbeeld</div>
            <h2 className="display-md">Zo ziet jouw rapport eruit.</h2>
            <p className="mt-6 text-[16px] text-yel-soft leading-relaxed">
              Geen scorekaart met balkjes. Een leesbaar verhaal, opgebouwd rond drie hoofdkleuren, met concrete voorbeelden uit je eigen antwoorden — herkenbaar, niet algemeen.
            </p>
          </div>
          <div className="md:col-span-7">
            <div className="aspect-[4/3] bg-white border border-black/10 p-8 md:p-12 relative overflow-hidden">
              <div className="font-mono-x text-[10px] uppercase tracking-widest text-yel-mute">Yelloow Rapport · Voorbeeld</div>
              <div className="font-display text-3xl md:text-4xl mt-3 leading-tight">Voor: <em className="font-serif-italic">M.</em></div>
              <div className="mt-6 flex gap-2">
                <span className="w-12 h-3 rounded-full" style={{ background: '#EA580C' }}></span>
                <span className="w-8 h-3 rounded-full" style={{ background: '#2563EB' }}></span>
                <span className="w-5 h-3 rounded-full" style={{ background: '#16A34A' }}></span>
              </div>
              <div className="mt-6 space-y-2">
                {[100, 92, 78, 60, 88, 70].map((w, i) => (
                  <div key={i} className="h-[6px] bg-yel-200" style={{ width: `${w}%` }}></div>
                ))}
              </div>
              <div className="mt-6 font-display text-[15px] text-yel-soft italic max-w-[40ch]">
                “Onder druk verschuift M. van Oranje naar Blauw — een herkenbaar patroon bij…”
              </div>
              <div className="absolute bottom-6 right-6 font-mono-x text-[10px] text-yel-mute">— pag. 04 / 16</div>
            </div>
          </div>
        </div>

        {/* FAQ */}
        <div className="mt-32">
          <div className="grid md:grid-cols-12 gap-10 mb-10">
            <div className="md:col-span-5">
              <div className="eyebrow mb-6">— Vragen</div>
              <h2 className="display-md">Wat mensen ons vragen.</h2>
            </div>
          </div>
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-10 md:col-start-2">
              {[
                { q: 'Hoe lang doe ik over de vragenlijst?', a: 'Reken op een half uur, ongestoord. Het werkt niet als je er tussendoor doorheen klikt.' },
                { q: 'Is dit hetzelfde als een MBTI-test?', a: 'Nee. MBTI sorteert in vaste types. Wij kijken naar waardesystemen — die kunnen per context verschillen, en bewegen mee met wat het leven van je vraagt.' },
                { q: 'Wat doen jullie met mijn antwoorden?', a: 'Ze worden gebruikt om jouw rapport te maken. Ze worden niet gedeeld, niet gebruikt voor training van externe modellen, en op verzoek volledig gewist.' },
                { q: 'Kan ik dit voor mijn partner of een familielid bestellen?', a: 'Ja, mits zij zelf de vragenlijst invullen. Zonder hun eigen antwoorden heeft een rapport geen betekenis.' },
                { q: 'Wanneer is Complete de moeite waard?', a: 'Wanneer je een concrete vraag hebt — een carrièrewissel, een terugkerend conflict, een team dat vastloopt. Het gesprek is geen extraatje, het is waar het inzicht landt.' },
              ].map((f, i) => (
                <details key={i} className="border-b border-black/15 py-5">
                  <summary className="flex items-center justify-between gap-6">
                    <span className="font-display text-[20px] md:text-[22px] leading-snug">{f.q}</span>
                    <span className="chev font-display text-3xl text-yel-mute leading-none">+</span>
                  </summary>
                  <p className="mt-4 text-[15.5px] text-yel-soft leading-relaxed max-w-[64ch]">{f.a}</p>
                </details>
              ))}
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

window.Private = Private;