function Methodiek({ setView }) {
  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-24">
          <div className="md:col-span-8">
            <div className="eyebrow mb-6">— Methodiek &amp; transparantie</div>
            <h1 className="hero-display">Wat we wél, en niet, beweren.</h1>
          </div>
          <div className="md:col-span-4 self-end">
            <p className="text-[15px] text-yel-soft leading-relaxed">
              Een persoonlijkheidsanalyse is een gereedschap, geen orakel. Deze pagina legt uit waar het op rust en waar onze grenzen liggen.
            </p>
          </div>
        </div>

        {/* Graves intro */}
        <section className="grid md:grid-cols-12 gap-10 mb-24 border-t border-black/15 pt-12">
          <div className="md:col-span-3">
            <div className="font-mono-x text-xs uppercase tracking-widest text-yel-mute">§ 01</div>
            <div className="font-display text-2xl mt-2">Graves</div>
          </div>
          <div className="md:col-span-9">
            <h2 className="display-sm mb-6">Wat zijn waardesystemen?</h2>
            <div className="prose prose-lg max-w-none text-yel-soft">
              <p className="text-[16.5px] leading-[1.7]">
                Clare W. Graves was een Amerikaanse psycholoog die in de jaren ’60 en ’70 onderzocht hoe mensen omgaan met de eisen die hun omgeving aan hen stelt. Zijn observatie: er bestaat geen vaste hiërarchie van waarden, maar een reeks <em>systemen</em> die mensen ontwikkelen wanneer een bepaalde levensvraag dwingend genoeg wordt. Iemand kan tegelijkertijd in meerdere systemen functioneren, afhankelijk van de situatie.
              </p>
              <p className="text-[16.5px] leading-[1.7] mt-4">
                Yelloow vertaalt zeven van die systemen in kleuren — een visuele taal die gespreksbaar is zonder vakjargon. We zijn geen academisch instituut; we zijn praktijkmensen die met deze lens werken in organisaties.
              </p>
            </div>
          </div>
        </section>

        {/* Wel / Niet */}
        <section className="grid md:grid-cols-2 gap-6 mb-24">
          <div className="bg-white border border-black/10 p-8 md:p-10">
            <div className="flex items-center gap-3 mb-6">
              <span className="w-3 h-3 rounded-full bg-gv-groen"></span>
              <div className="eyebrow">Wat we wél beweren</div>
            </div>
            <ul className="space-y-4 text-[15.5px] text-yel-soft">
              {[
                'Het model maakt patronen zichtbaar in hoe iemand naar werk en samenleven kijkt.',
                'Het levert taal op om verschillen in een team bespreekbaar te maken zonder oordeel.',
                'Het kan helpen verklaren waarom iets dat goed bedoeld is, slecht landt.',
                'Het is herhaalbaar genoeg om over de tijd te zien wat verschuift.',
              ].map((t, i) => (
                <li key={i} className="flex gap-3">
                  <span className="mt-2 w-1.5 h-1.5 rounded-full bg-gv-groen flex-shrink-0"></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="bg-white border border-black/10 p-8 md:p-10">
            <div className="flex items-center gap-3 mb-6">
              <span className="w-3 h-3 rounded-full bg-gv-rood"></span>
              <div className="eyebrow">Wat we niet beweren</div>
            </div>
            <ul className="space-y-4 text-[15.5px] text-yel-soft">
              {[
                'Geen psychiatrische of klinische diagnose. We zijn geen vervanging voor een psycholoog.',
                'Geen voorspelling van iemands gedrag in elke mogelijke situatie.',
                'Geen oordeel over welke kleur "beter" of "hoger" zou zijn — die rangschikking bestaat niet.',
                'Geen instrument voor selectie of beoordeling. Yelloow wordt niet ingezet om mensen aan te nemen of weg te sturen.',
              ].map((t, i) => (
                <li key={i} className="flex gap-3">
                  <span className="mt-2 w-1.5 h-1.5 rounded-full bg-gv-rood flex-shrink-0"></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* Privacy */}
        <section className="grid md:grid-cols-12 gap-10 mb-24 border-t border-black/15 pt-12">
          <div className="md:col-span-3">
            <div className="font-mono-x text-xs uppercase tracking-widest text-yel-mute">§ 02</div>
            <div className="font-display text-2xl mt-2">Privacy &amp; GDPR</div>
          </div>
          <div className="md:col-span-9">
            <h2 className="display-sm mb-6">Wat we met je antwoorden doen.</h2>
            <div className="space-y-5 text-[16px] text-yel-soft leading-[1.7]">
              <p>
                Je antwoorden worden opgeslagen onder een door jouzelf opgegeven e-mailadres, in een database in de Europese Unie. Ze worden gebruikt om jouw eigen analyse te maken — meer niet.
              </p>
              <p>
                We gebruiken externe taalmodellen voor interpretatie. Antwoorden worden hierbij geanonimiseerd doorgestuurd; persoonlijke gegevens (naam, e-mail, organisatie) gaan niet mee. We gebruiken geen modellen die jouw data hergebruiken voor training.
              </p>
              <p>
                Je hebt op elk moment recht op inzage, correctie en wissing. Eén mail naar <span className="ulink">privacy@yelloow.be</span> volstaat. We bevestigen binnen vijf werkdagen.
              </p>
            </div>
          </div>
        </section>

        {/* CTA */}
        <div className="mt-32 text-center max-w-[680px] mx-auto">
          <h2 className="display-md">Vragen over hoe we werken?</h2>
          <p className="mt-6 text-[16px] text-yel-soft">Stuur Greet een bericht — niet via een formulier, gewoon per mail.</p>
          <div className="mt-8">
            <a href="mailto:greet@yelloow.be" className="btn-primary">
              <span className="dot"></span>
              greet@yelloow.be
            </a>
          </div>
        </div>
      </div>
    </main>
  );
}

window.Methodiek = Methodiek;