// page-bedrijven.jsx — Voor bedrijven (Advies & consultancy + Groepssessies)

function BedrijvenPage() {
  const { go } = useRouter();
  return (
    <div className="page">
      <SiteNav />
      <PageRail index={4} slug="Voor bedrijven" />

      <section className="pillar-hero">
        <div className="container">
          <div>
            <Label>Pijler 03</Label>
            <h1 style={{ marginTop: 20 }}>
              <span className="green italic">Voor</span><br/>bedrijven.
            </h1>
          </div>
          <p className="intro">
            Strategisch advies, hands-on aanwezigheid op de werkvloer, en groepssessies
            rond mentale veerkracht en samenwerking — voor wie het bedrijf, het team
            of de klantbeleving een stap verder wil brengen.
          </p>
        </div>
      </section>

      <div className="container">
        {/* Credibility / context block */}
        <div className="service">
          <aside className="service-aside">
            <div className="num">—</div>
            <Label noMark>Context</Label>
          </aside>
          <div className="service-body">
            <p className="intro" style={{ maxWidth: '62ch' }}>
              Werner combineert ondernemerservaring met strategisch advies. Hij heeft
              jarenlang aan beide kanten van de tafel gezeten — als bouwer van de Belgische
              tak van Coolblue (2007–2015), als COO bij Leapp, en sinds 2019 als
              Retail-verantwoordelijke bij Thribe — en weet wat een team op de werkvloer
              nodig heeft én wat een directieteam moet zien om beslissingen te nemen.
            </p>
            <div className="stage-shots" style={{ marginTop: 24 }}>
              <div className="stage-shot">
                <img src={window.__res('stage1', 'branding/werner-stage-1.jpeg')} alt="Werner — Q&A op het podium" />
              </div>
              <div className="stage-shot">
                <img src={window.__res('stage2', 'branding/werner-stage-2.jpeg')} alt="Werner — keynote" />
              </div>
            </div>
          </div>
        </div>

        <Service
          num="01"
          tag="Advies & consultancy"
          intro="Voor directieteams en SMB-eigenaars die een ervaren externe blik willen op groei, retail-strategie en klantbeleving."
          body={[]}
          listTitle="Vier vlakken waar Werner concreet meewerkt"
          list={[
            ['STRATEGIE', 'Managementadvies', 'Strategische ondersteuning bij de bedrijfsvoering — agenda van de directie, prioriteiten, opvolging.'],
            ['RETAIL', 'Retail & Beleving', 'Groei en optimalisatie van de klant- en medewerkerservaring, B2B én B2C.'],
            ['HANDS-ON', 'Operationele ondersteuning', 'Hands-on aanwezigheid op de werkvloer — zoals Werner sinds 2019 doet bij Thribe.'],
            ['MENSEN', 'People management & klantcommunicatie', 'De brug tussen wat het team voelt en wat de klant ervaart.'],
          ]}
        />

        <Service
          num="02"
          tag="Groepssessies"
          intro="Binnen bedrijven biedt Werner begeleiding op maat — zowel individuele trajecten als groepssessies rond mentale veerkracht, samenwerking en doelgericht werken."
          body={[
            <p key="p1">
              Geen klassikale workshops. Werner werkt met kleine groepen (5–15 mensen)
              rond concrete bedrijfsthema's: mentale veerkracht onder druk, samenwerking
              in een team in verandering, doelgericht werken na een reorganisatie of versnelling.
            </p>,
            <div key="q" className="pullquote">
              Met de mens die altijd centraal staat — in de spelerskleedkamer,
              op de directiestoel en aan de keukentafel.
            </div>
          ]}
        />

        <div className="page-end-cta">
          <Label red>Volgende stap</Label>
          <h3 className="display display-3" style={{ maxWidth: '26ch' }}>
            Beginnen we met een gesprek, of plant u meteen een sessie?
          </h3>
          <div className="page-end-cta-double">
            <CTA to="/contact" params={{ onderwerp: 'bedrijven-advies' }}>
              Vraag een adviesgesprek aan
            </CTA>
            <CTA to="/contact" params={{ onderwerp: 'bedrijven-groepssessies' }} variant="ghost">
              Plan een groepssessie
            </CTA>
          </div>
        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

Object.assign(window, { BedrijvenPage });