function Home({ setView }) {
  const [hoverColor, setHoverColor] = React.useState(null);
  const [activeColor, setActiveColor] = React.useState('oranje'); // for keyboard / touch
  const current = window.colorByKey(hoverColor || activeColor);

  // reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <main>
      {/* HERO */}
      <section className="pt-40 md:pt-48 pb-24 md:pb-32">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-8 md:gap-12 items-end">
            <div className="md:col-span-8">
              <div className="eyebrow mb-8">— Persoonlijkheidsanalyse · sinds 2014</div>
              <h1 className="hero-display text-yel-ink">
                Begrijp wat<br/>
                mensen <em className="font-serif-italic">écht</em><br/>
                drijft.
              </h1>
              <p className="mt-10 text-[17px] md:text-[19px] text-yel-soft max-w-[52ch] leading-relaxed">
                Yelloow leest waardesystemen — niet karaktertrekjes. Op basis van het werk van Clare Graves, ondersteund met taalmodellen die helpen interpreteren wat mensen schrijven en zeggen. Zeven kleuren, één gesprek.
              </p>
              <div className="mt-10 flex flex-wrap gap-4">
                <button onClick={() => setView('test')} className="btn-primary">
                  <span className="dot"></span>
                  Doe de gratis mini-test
                </button>
                <button onClick={() => setView('corporate')} className="btn-ghost">
                  Voor bedrijven
                  <span aria-hidden="true">→</span>
                </button>
              </div>
            </div>

            <div className="md:col-span-4 hidden md:block">
              <div className="border-t border-black/15 pt-6">
                <div className="eyebrow mb-3">Voor wie</div>
                <div className="font-display text-[22px] leading-tight">
                  Mensen die met mensen werken — en zichzelf liever begrijpen voor het scheef gaat.
                </div>
                <div className="mt-8 grid grid-cols-3 gap-3">
                  <div>
                    <div className="font-display text-3xl">7</div>
                    <div className="text-xs text-yel-mute mt-1">drijfveren</div>
                  </div>
                  <div>
                    <div className="font-display text-3xl">10<span className="text-yel-primary">+</span></div>
                    <div className="text-xs text-yel-mute mt-1">jaar werk</div>
                  </div>
                  <div>
                    <div className="font-display text-3xl">BE</div>
                    <div className="text-xs text-yel-mute mt-1">vanuit Vlaanderen</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* full-width signature spectrum */}
          <div className="mt-20 md:mt-28 reveal in">
            <window.SpectrumArc height={360} animate={true} highlight={hoverColor} />
            <div className="mt-3 flex justify-between text-[11px] font-mono-x text-yel-mute uppercase tracking-widest">
              <span>← verbinding</span>
              <span>holistisch →</span>
            </div>
          </div>
        </div>
      </section>

      {/* DE 7 DRIJFVEREN */}
      <section className="py-24 md:py-36 border-t border-black/10">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-10 mb-16">
            <div className="md:col-span-5">
              <div className="eyebrow mb-6">— 01 / Het spectrum</div>
              <h2 className="display-md">De 7 drijfveren.</h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 self-end">
              <p className="text-[17px] text-yel-soft leading-relaxed">
                Geen typetjes. Geen hokjes. Een kleur is een manier waarop iemand op een bepaald moment naar de wereld kijkt — en de meeste mensen dragen er meerdere bij zich. Beweeg over een kleur om te lezen hoe ze klinkt.
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-12 gap-10 reveal">
            {/* Color list */}
            <div className="md:col-span-5">
              <div className="border-t border-black/15">
                {window.COLORS.map((c, i) => {
                  const isActive = (hoverColor || activeColor) === c.key;
                  return (
                    <button
                      key={c.key}
                      onMouseEnter={() => setHoverColor(c.key)}
                      onMouseLeave={() => setHoverColor(null)}
                      onClick={() => setActiveColor(c.key)}
                      className="w-full text-left flex items-center gap-5 py-5 border-b border-black/15 transition-colors"
                      style={{ background: isActive ? 'rgba(26,26,26,0.02)' : 'transparent' }}
                    >
                      <span className="font-mono-x text-xs text-yel-mute w-6">0{i+1}</span>
                      <span
                        style={{
                          width: isActive ? 36 : 14,
                          height: 14,
                          background: c.hex,
                          borderRadius: 999,
                          transition: 'width .35s cubic-bezier(.2,.7,.2,1)'
                        }}
                      />
                      <span className="font-display text-2xl md:text-3xl flex-1">{c.naam}</span>
                      <span className="text-sm text-yel-mute hidden sm:inline">{c.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Detail panel */}
            <div className="md:col-span-6 md:col-start-7">
              <div
                className="sticky top-24 p-8 md:p-10 rounded-[2px]"
                style={{ background: '#FFFFFF', border: '1px solid rgba(26,26,26,0.08)' }}
              >
                <div className="flex items-center gap-4 mb-6">
                  <span style={{ width: 56, height: 56, borderRadius: 999, background: current.hex }}></span>
                  <div>
                    <div className="eyebrow">{current.label}</div>
                    <div className="font-display text-3xl mt-1">{current.naam}</div>
                  </div>
                </div>
                <p className="font-display text-[22px] leading-snug text-yel-ink">
                  {current.kort}
                </p>
                <p className="mt-5 text-[15.5px] text-yel-soft leading-relaxed">
                  {current.lang}
                </p>
                <div className="mt-8 pt-6 border-t border-black/10">
                  <div className="eyebrow mb-2">Klinkt als</div>
                  <div className="font-display italic text-[19px] text-yel-ink">{current.voorbeeld}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* HOE HET WERKT */}
      <section className="py-24 md:py-36 border-t border-black/10 bg-yel-100/40">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-10 mb-16">
            <div className="md:col-span-5">
              <div className="eyebrow mb-6">— 02 / Werkwijze</div>
              <h2 className="display-md">Hoe het werkt.</h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 self-end">
              <p className="text-[17px] text-yel-soft leading-relaxed">
                Drie stappen. Geen vragenlijst die uren duurt, geen rapporten die niemand leest.
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-10 reveal">
            {[
              { n: '01', titel: 'Je beantwoordt vragen.', tekst: 'Korte, open situaties — geen schaal van 1 tot 5. Hoe je iets formuleert telt mee, niet alleen wát je kiest.' },
              { n: '02', titel: 'AI helpt interpreteren.', tekst: 'Een taalmodel leest mee om patronen op te merken die in vrije antwoorden zitten. Greet houdt de inhoudelijke regie.' },
              { n: '03', titel: 'Je krijgt een gesprek.', tekst: 'Geen scorekaart, maar een leesbaar verhaal: welke kleuren spreken in jou, in welke context, en wat dat betekent.' },
            ].map(s => (
              <div key={s.n} className="border-t border-black/20 pt-6">
                <div className="step-num">{s.n}</div>
                <div className="font-display text-[26px] mt-3 leading-tight">{s.titel}</div>
                <p className="text-[15px] text-yel-soft mt-3 leading-relaxed">{s.tekst}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GREET */}
      <section className="py-24 md:py-40 border-t border-black/10">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-10 items-center">
            <div className="md:col-span-5 reveal">
              <div className="aspect-[4/5] placeholder-photo relative overflow-hidden">
                <div className="absolute inset-0 grid place-items-center">
                  <div className="text-center px-6" aria-label="Portretfoto Greet Leemans, oprichter Yelloow">
                    <div className="font-mono-x text-[11px] text-yel-mute uppercase tracking-widest">Portret</div>
                    <div className="font-display text-3xl mt-3">Greet Leemans</div>
                    <div className="text-xs text-yel-mute mt-1">[ foto plaatst hier ]</div>
                  </div>
                </div>
                <div className="absolute bottom-4 left-4 right-4 flex items-center justify-between">
                  <window.SpectrumRule length={120} thickness={4} />
                  <span className="font-mono-x text-[10px] text-yel-mute">YL · 01</span>
                </div>
              </div>
            </div>

            <div className="md:col-span-6 md:col-start-7 reveal">
              <div className="eyebrow mb-6">— 03 / Oprichter</div>
              <blockquote className="font-display text-[clamp(1.8rem,3.2vw,2.6rem)] leading-[1.1] tracking-tight text-yel-ink">
                <span className="text-yel-primary">“</span>Mensen vertellen je niet wie ze zijn. Ze vertellen je waar ze tegenaan lopen. Mijn werk is om dáár goed naar te luisteren.<span className="text-yel-primary">”</span>
              </blockquote>
              <div className="mt-10 grid grid-cols-3 gap-6 border-t border-black/15 pt-6">
                <div>
                  <div className="font-display text-4xl">70</div>
                  <div className="text-xs text-yel-mute mt-2 leading-snug">jaar oud — en nog lang niet uitgekeken op mensen.</div>
                </div>
                <div>
                  <div className="font-display text-4xl">10</div>
                  <div className="text-xs text-yel-mute mt-2 leading-snug">jaar gespecialiseerd in waardesystemen.</div>
                </div>
                <div>
                  <div className="font-display text-4xl">1</div>
                  <div className="text-xs text-yel-mute mt-2 leading-snug">missie — wat mensen drijft begrijpelijk maken.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF */}
      <section className="py-24 md:py-32 border-t border-black/10 bg-yel-100/40">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="eyebrow mb-12">— 04 / Stem van anderen</div>
          <div className="grid md:grid-cols-3 gap-8 reveal">
            {[
              { quote: 'Wat me opviel: ik herkende mezelf, maar ook mijn collega’s. Voor het eerst hadden we taal voor wat altijd onuitgesproken bleef.', naam: 'M.D.', rol: 'HR-directeur, scale-up Antwerpen', kleur: '#16A34A' },
              { quote: 'Ik dacht dat ik blauw was — orde, structuur. De analyse liet zien hoe vaak ik eigenlijk in oranje stond. Dat verklaarde veel.', naam: 'P.V.', rol: 'Zaakvoerder, familiebedrijf', kleur: '#EA580C' },
              { quote: 'Wij gebruiken het sinds twee jaar bij elke nieuwe leidinggevende. Geen test om te beoordelen — wel om beter samen te werken.', naam: 'L.B.', rol: 'COO, financiële sector', kleur: '#2563EB' },
            ].map((t, i) => (
              <figure key={i} className="bg-white p-8 border border-black/10">
                <div style={{ width: 32, height: 4, background: t.kleur, marginBottom: 24 }}></div>
                <blockquote className="font-display text-[20px] leading-[1.35] text-yel-ink">
                  {t.quote}
                </blockquote>
                <figcaption className="mt-6 pt-4 border-t border-black/10 text-sm">
                  <div className="font-medium">{t.naam}</div>
                  <div className="text-yel-mute">{t.rol}</div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section className="py-20 md:py-28 border-t border-black/10">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-10 items-center">
            <div className="md:col-span-7">
              <h2 className="display-md">Begin bij <em>jezelf</em>. <br className="hidden md:block"/>Vijf vragen, een paar minuten.</h2>
            </div>
            <div className="md:col-span-5 md:text-right">
              <button onClick={() => setView('test')} className="btn-primary text-base">
                <span className="dot"></span>
                Start de mini-test
              </button>
              <div className="mt-3 text-xs text-yel-mute">Gratis · geen account · resultaat in je inbox.</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;