// page-home.jsx — Home: hero, pillars, closing CTA band.

function HomePage() {
  const { go } = useRouter();
  return (
    <div className="page page-home">
      <SiteNav />
      <PageRail index={1} slug="Home" />

      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <Label>Werner Bruyns — De Betermaker</Label>
              <h1 className="display display-1" style={{ marginTop: 36 }}>
                Van goed,{' '}
                <span className="arrow" aria-hidden="true">naar</span>{' '}
                <span className="beter italic">beter.</span>
              </h1>
            </div>
            <div className="hero-meta">
              <div className="hero-portrait">
                <img src={window.__res('faceshot', 'branding/werner-faceshot.jpeg')} alt="Werner Bruyns" />
              </div>
            </div>
          </div>

          <div className="hero-sub">
            <div className="hero-etym">
              <p style={{ margin: 0 }}>
                <span className="latin">Melior</span> komt uit het Latijn en betekent <em>beter</em>.
                Elke dag gaan we aan de slag met dat ene kernwoord. Dat is geen toeval, maar onze belofte.
                Of het nu gaat om het versterken van mensen of het optimaliseren van bedrijfsprocessen —
                samen maken we van goed, beter.
              </p>
            </div>
            <div className="hero-cta">
              <CTA to="/contact">Boek een kennismakingsgesprek</CTA>
              <span className="muted" style={{ fontSize: 13.5, paddingLeft: 4 }}>
                30 tot 60 minuten · vrijblijvend
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* PILLARS */}
      <section className="pillars">
        <div className="container">
          <div className="pillars-head">
            <div>
              <Label red>Drie pijlers — even gewichtig</Label>
              <h2 className="display display-2" style={{ marginTop: 22 }}>
                Werner werkt met de mens centraal — in de spelerskleedkamer,
                op de directiestoel en aan de keukentafel.
              </h2>
            </div>
          </div>

          <div className="pillars-grid">
            <PillarTile
              num="01"
              title="Voor jou persoonlijk"
              teaser="Mentale weerbaarheid, mindset en persoonlijke effectiviteit — voor wie even vastloopt of een knoop wil doorhakken."
              sub={['Mental Coach', 'Life Coach', 'Executive Coach']}
              to="/voor-jou-persoonlijk" />
            
            <PillarTile
              num="02"
              title="In de sport"
              teaser="Wat zich tussen de oren afspeelt op de momenten dat de druk het hoogst is — individueel of voor de hele ploeg."
              sub={['Mental Coach — individueel', 'Mental Coach — ploeg / club']}
              to="/in-de-sport" />
            
            <PillarTile
              num="03"
              title="Voor bedrijven"
              teaser="Strategisch klankbord voor wie het bedrijf, het team of de klantbeleving naar een volgende stap wil brengen."
              sub={['Advies & consultancy', 'Groepssessies']}
              to="/voor-bedrijven" />
            
          </div>
        </div>
      </section>

      {/* CLOSING CTA */}
      <section className="cta-band">
        <div className="container">
          <h2>
            Eerst een gesprek.{' '}
            <span className="arrow">→</span>{' '}
            <span className="beter italic">Dan pas een traject.</span>
          </h2>
          <div className="cta-band-cluster">
            <p className="reassure">Een vrijblijvend gesprek van 30 tot 60 minuten. Geen verplichtingen, gewoon kijken of er een klik is.


            </p>
            <CTA to="/contact">Boek een kennismakingsgesprek</CTA>
          </div>
        </div>
      </section>

      <SiteFooter noTop />
    </div>);

}

function PillarTile({ num, title, teaser, sub, to }) {
  const { go } = useRouter();
  return (
    <div className="pillar" onClick={() => go(to)}>
      <div className="pillar-num">{num}</div>
      <h3 className="pillar-title">{title}</h3>
      <p className="pillar-teaser">{teaser}</p>
      <ul className="pillar-sub">
        {sub.map((s) => <li key={s}>{s}</li>)}
      </ul>
      <span className="pillar-more">
        Meer weten <span className="arrow">→</span>
      </span>
    </div>);

}

Object.assign(window, { HomePage, PillarTile });