function Corporate({ setView }) {
  const packages = [
    {
      key: 'team',
      naam: 'Team Scan',
      prijs: '€2.950',
      onder: 'tot 12 deelnemers · 4 weken',
      tag: 'Eén team in beeld.',
      bullets: [
        'Individuele analyse per teamlid',
        'Geaggregeerde teamkaart',
        'Workshop van een halve dag',
        'Aanbevelingen op één A4',
      ],
    },
    {
      key: 'leadership',
      naam: 'Leadership Alignment',
      prijs: '€7.500',
      onder: 'directie of MT · 6–8 weken',
      tag: 'Wanneer aan de top de neuzen schuren.',
      bullets: [
        'Diepteanalyse per leidinggevende',
        'Twee sessies van een dagdeel',
        '1-op-1 terugkoppeling per persoon',
        'Verslag voor de raad / aandeelhouders',
      ],
      hl: true,
    },
    {
      key: 'org',
      naam: 'Organisatie Scan',
      prijs: '€12.000 — 18.000',
      onder: '50–250 medewerkers · 8–12 weken',
      tag: 'Voor wie cultuur niet meer voelt als één ding.',
      bullets: [
        'Organisatiebrede vragenlijst',
        'Kleurenkaart per afdeling',
        'Interviews met sleutelposities',
        'Implementatie-advies in 3 horizonten',
      ],
    },
  ];

  return (
    <main className="pt-40 pb-24 bg-yel-50">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        {/* Hero — meer business */}
        <div className="grid md:grid-cols-12 gap-10 items-end mb-24">
          <div className="md:col-span-8">
            <div className="eyebrow mb-6">— Bedrijven & organisaties</div>
            <h1 className="hero-display">Wat <em>drijft</em> uw mensen,<br/>en wat schuurt?</h1>
            <p className="mt-10 text-[18px] text-yel-soft max-w-[60ch] leading-relaxed">
              Yelloow werkt met directies, HR-teams en leidinggevenden om beter te begrijpen waarom samenwerking soms loopt en soms vastloopt — en wat daar in concrete termen aan te doen is.
            </p>
          </div>
          <div className="md:col-span-4">
            <div className="bg-white border border-black/10 p-8">
              <div className="eyebrow mb-3">Geen abonnement</div>
              <div className="font-display text-[22px] leading-tight">
                Eén traject met een begin en een einde. Greet en haar team werken in opdracht — niet als platform.
              </div>
            </div>
          </div>
        </div>

        {/* Diagnostic */}
        <div className="border-t border-b border-black/15 py-10 mb-20 grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-2 md:col-start-1">
            <div className="font-mono-x text-[11px] uppercase tracking-widest text-yel-mute">— Instap</div>
            <div className="font-display text-3xl mt-2">€1.250 — 2.000</div>
          </div>
          <div className="md:col-span-7 md:col-start-4">
            <div className="font-display text-[24px] leading-snug">
              <em className="font-serif-italic">Paid Diagnostic</em> — een eerste, betaalde verkenning. We brengen de organisatievraag in kaart voordat we een traject voorstellen. Het bedrag wordt verrekend als u doorgaat.
            </div>
          </div>
          <div className="md:col-span-3">
            <button onClick={() => alert('Plan een gesprek — gemockt.')} className="btn-primary w-full justify-center">
              <span className="dot"></span>
              Plan een gesprek
            </button>
          </div>
        </div>

        {/* Packages */}
        <div className="grid md:grid-cols-3 gap-6">
          {packages.map(p => (
            <div key={p.key} className={`p-8 md:p-10 flex flex-col ${p.hl ? 'bg-yel-ink text-yel-50' : 'bg-white'} border border-black/10`}>
              <div className={`eyebrow mb-4 ${p.hl ? 'text-yel-50/60' : ''}`}>{p.tag}</div>
              <div className="font-display text-3xl">{p.naam}</div>
              <div className="font-display text-5xl mt-6">{p.prijs}</div>
              <div className={`text-xs mt-2 ${p.hl ? 'text-yel-50/60' : 'text-yel-mute'}`}>{p.onder}</div>
              <ul className="mt-8 space-y-3 flex-1">
                {p.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: p.hl ? '#FFD60A' : '#1A1A1A' }}></span>
                    <span className={p.hl ? 'text-yel-50/90' : 'text-yel-soft'}>{b}</span>
                  </li>
                ))}
              </ul>
              <button
                className={`mt-10 ${p.hl ? 'btn-yellow' : 'btn-ghost'}`}
                onClick={() => alert(`Aanvraag ${p.naam} — gemockt.`)}
              >
                Vraag een offerte
                <span aria-hidden="true">→</span>
              </button>
            </div>
          ))}
        </div>

        {/* Cases */}
        <div className="mt-32">
          <div className="grid md:grid-cols-12 gap-10 mb-12">
            <div className="md:col-span-5">
              <div className="eyebrow mb-6">— Cases</div>
              <h2 className="display-md">Drie trajecten, kort.</h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 self-end">
              <p className="text-[16px] text-yel-soft">Anoniem, met toestemming van de opdrachtgever.</p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {[
              { sec: 'Bouw', titel: 'Familiebedrijf, derde generatie', meta: '90 medewerkers · 2024', kleur: '#EA580C',
                tekst: 'Zoon (Oranje, prestatie) en vader (Blauw, orde) bleven hangen op opvolging. Een gemeenschappelijke kleurenkaart maakte het verschil bespreekbaar.' },
              { sec: 'Tech', titel: 'Scale-up na fusie', meta: '180 medewerkers · 2025', kleur: '#16A34A',
                tekst: 'Twee culturen in één organisatie. We brachten de spanning tussen Groen (consensus) en Rood (snelheid) in kaart en stelden andere overlegritmes voor.' },
              { sec: 'Zorg', titel: 'Directie ziekenhuisgroep', meta: '5 directieleden · 2025', kleur: '#2563EB',
                tekst: 'Beslissingen werden uitgesteld. De analyse liet zien dat vier van de vijf hoofdzakelijk Blauw stonden — niemand durfde het Rood op zich te nemen.' },
            ].map((c, i) => (
              <article key={i} className="bg-white border border-black/10 p-8 flex flex-col">
                <div className="flex items-center justify-between mb-6">
                  <div className="font-mono-x text-[11px] uppercase tracking-widest text-yel-mute">{c.sec}</div>
                  <span className="w-3 h-3 rounded-full" style={{ background: c.kleur }}></span>
                </div>
                <h3 className="font-display text-[24px] leading-tight">{c.titel}</h3>
                <div className="text-xs text-yel-mute mt-1">{c.meta}</div>
                <p className="mt-6 text-[15px] text-yel-soft leading-relaxed flex-1">{c.tekst}</p>
                <button className="mt-8 text-sm ulink self-start" onClick={() => alert('Volledige case op aanvraag.')}>Lees verder →</button>
              </article>
            ))}
          </div>
        </div>

        {/* Why us */}
        <div className="mt-32 grid md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-5">
            <div className="eyebrow mb-6">— Werkwijze</div>
            <h2 className="display-md">Drie principes.</h2>
          </div>
          <div className="md:col-span-7">
            <div className="space-y-8">
              {[
                { n: '01', t: 'Geen tools verkopen, wel inzichten leveren.', d: 'U krijgt geen platform om mee te werken. U krijgt een gespreksverslag dat in uw context zinnig is.' },
                { n: '02', t: 'Greet leest mee, niet alleen het model.', d: 'AI ondersteunt — een mens interpreteert. Bij elke organisatie-analyse zit menselijke duiding in de lus.' },
                { n: '03', t: 'Uw data blijft uw data.', d: 'Antwoorden worden niet gebruikt om externe modellen te trainen. Op verzoek volledig gewist na afronding.' },
              ].map(p => (
                <div key={p.n} className="grid grid-cols-12 gap-4 border-t border-black/15 pt-6">
                  <div className="col-span-2 font-mono-x text-yel-mute text-sm">{p.n}</div>
                  <div className="col-span-10">
                    <div className="font-display text-[22px] leading-snug">{p.t}</div>
                    <p className="text-[15px] text-yel-soft mt-2 leading-relaxed">{p.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Final CTA */}
        <div className="mt-32 bg-yel-ink text-yel-50 p-10 md:p-16 grid md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-7">
            <div className="eyebrow text-yel-50/60 mb-6">— Volgende stap</div>
            <h2 className="display-md">Plan een gesprek met Greet.</h2>
            <p className="mt-6 text-[16.5px] text-yel-50/80 leading-relaxed max-w-[55ch]">
              Een half uur, kosteloos, zonder verplichting. We bespreken uw vraag en kijken of een Paid Diagnostic zinnig is.
            </p>
          </div>
          <div className="md:col-span-5 md:text-right">
            <button onClick={() => alert('Open agenda — gemockt.')} className="btn-yellow text-base">
              Plan een gesprek
              <span aria-hidden="true">→</span>
            </button>
            <div className="mt-4 text-xs text-yel-50/50">Antwoord binnen één werkdag.</div>
          </div>
        </div>
      </div>
    </main>
  );
}

window.Corporate = Corporate;