// page-voor-jou.jsx — Voor jou persoonlijk (Mental / Life / Executive)

function VoorJouPage() {
  return (
    <div className="page">
      <SiteNav />
      <PageRail index={2} slug="Voor jou persoonlijk" />

      <section className="pillar-hero">
        <div className="container">
          <div>
            <Label>Pijler 01</Label>
            <h1 style={{ marginTop: 20 }}>
              <span className="green italic">Voor jou</span><br/>persoonlijk.
            </h1>
          </div>
          <p className="intro">
            Naast zijn rol als ondernemer en adviseur is Werner ook actief als coach.
            Hij begeleidt zowel particulieren als professionals in hun persoonlijke
            en professionele ontwikkeling.
          </p>
        </div>
      </section>

      <div className="container">
        <Service
          num="01"
          tag="Mental Coach"
          intro="Een Mental Coach is een professionele begeleider die mensen helpt hun mentale weerbaarheid, mindset en persoonlijke effectiviteit te vergroten."
          body={[
            <p key="p1">
              Waar een psycholoog zich vaak richt op het herstellen van trauma's of stoornissen,
              focust een mental coach zich op het heden en de toekomst om (prestatie)doelen te bereiken.
            </p>
          ]}
          listTitle="Kerntaken van een Mental Coach"
          list={[
            ['MINDSET', 'Mindset optimaliseren', 'Het identificeren en ombuigen van belemmerende overtuigingen naar stimulerende gedachten.'],
            ['VERTROUWEN', 'Vergroten van zelfvertrouwen', 'Mensen helpen om over blokkades of angsten (zoals faalangst) heen te stappen.'],
            ['STRESS', 'Stressmanagement', 'Begeleiding bij het omgaan met hoge werkdruk, spanning of psychische druk.'],
            ['FOCUS', 'Motivatie en focus', 'Het (terug)vinden van intrinsieke motivatie en het stellen van heldere, haalbare doelen.'],
            ['GEDRAG', 'Gedragsverandering', 'Inzicht bieden in huidige patronen en helpen bij het aanleren van nieuwe, effectievere gewoontes.'],
          ]}
          footer={(
            <>
              <h3>Voor wie is het bedoeld?</h3>
              <p>
                Oorspronkelijk werd mental coaching vooral ingezet in de topsport om onder hoge druk te presteren.
                Tegenwoordig is het echter gangbaar voor:
              </p>
              <ul style={{ paddingLeft: 18, marginTop: 0, maxWidth: '60ch' }}>
                <li style={{ marginBottom: 6 }}>Werknemers en leidinggevenden die kampen met stress of hun communicatie willen verbeteren.</li>
                <li>Particulieren die vastlopen in hun loopbaan, relatie of persoonlijke ontwikkeling.</li>
              </ul>
            </>
          )}
        />

        <Service
          num="02"
          tag="Life Coach"
          intro="Een Life Coach (of levenscoach) is een professional die mensen begeleidt bij het vormgeven van hun leven en het vinden van een gezonde balans op verschillende levensgebieden."
          body={[
            <p key="p1">
              Terwijl een mental coach vaak gericht is op prestaties en mindset, kijkt een life coach holistisch
              naar de persoon: werk, relaties, zingeving en persoonlijk geluk staan centraal.
            </p>,
            <div key="q" className="pullquote green italic" style={{ fontSize: 17, lineHeight: 1.55 }}>
              Holistisch betekent dat je kijkt naar het geheel, in plaats van alleen naar losse onderdelen.
              Het kernidee is: het geheel is meer dan de som der delen.
            </div>
          ]}
          listTitle="Wat doet een Life Coach concreet?"
          list={[
            ['BALANS', 'Balans herstellen', 'Helpen bij het vinden van een evenwicht tussen privé, werk, familie en vrije tijd.'],
            ['INZICHT', 'Zelfonderzoek faciliteren', 'Het beantwoorden van de drie kernvragen: Wie ben ik? · Wat kan ik? · Wat wil ik (nu echt)?'],
            ['KEUZE', 'Keuzes maken', 'Ondersteuning bieden bij grote levensbeslissingen of een carrièreswitch.'],
            ['ZIN', 'Zingeving en geluk', 'Cliënten helpen om hun leven in te richten volgens hun eigen diepste waarden en wensen.'],
            ['ACTIE', 'Actie stimuleren', 'Geen kant-en-klare oplossingen, maar kritische vragen zodat de cliënt zelf tot actie en verandering overgaat.'],
          ]}
        />

        <Service
          num="03"
          tag="Executive Coach"
          intro="Een Executive Coach is een gespecialiseerde coach die zich richt op het begeleiden van leiders, directieleden en ondernemers."
          body={[
            <p key="p1">
              Het doel is om hun professionele prestaties, leiderschapskwaliteiten en strategisch inzicht
              te versterken, vaak binnen de context van de organisatie.
            </p>
          ]}
          listTitle="Een Executive Coach"
          list={[
            ['LEIDERSCHAP', 'Werkt op leiderschapsontwikkeling', 'Het aanscherpen van leiderschapsstijl, delegeren en het inspireren van teams.'],
            ['KLANKBORD', 'Is een strategisch klankbord', 'Fungeren als vertrouwenspersoon voor complexe besluitvorming, met een objectieve, externe blik.'],
            ['EQ', 'Werkt op emotionele intelligentie', 'Het vergroten van zelfbewustzijn en empathie om effectiever te communiceren met stakeholders en medewerkers.'],
            ['ISOLATIE', 'Leert omgaan met isolatie', 'De top van een organisatie kan eenzaam zijn. De coach biedt een veilige plek voor reflectie die intern vaak niet mogelijk is.'],
          ]}
        />

        <PageEndCTA primaryParam="mental-coaching" />
      </div>

      <SiteFooter />
    </div>
  );
}

// ──────── Reusable service block (used on all pillar pages) ────────
function Service({ num, tag, intro, body, listTitle, list, footer }) {
  return (
    <div className="service" id={tag.toLowerCase().replace(/\s+/g, '-')}>
      <aside className="service-aside">
        <div className="num">{num}</div>
        <Label noMark>{tag}</Label>
      </aside>
      <div className="service-body">
        {intro && <p className="intro">{intro}</p>}
        {body}
        {listTitle && <h3>{listTitle}</h3>}
        {list && (
          <ul className="service-list">
            {list.map(([lead, head, rest]) => (
              <li key={head}>
                <span className="lead-word">{lead}</span>
                <span className="item"><strong>{head}.</strong> {rest}</span>
              </li>
            ))}
          </ul>
        )}
        {footer}
      </div>
    </div>
  );
}

function PageEndCTA({ primaryParam, secondaryButton }) {
  const { go } = useRouter();
  return (
    <div className="page-end-cta">
      <Label red>Volgende stap</Label>
      <h3 className="display display-3" style={{ maxWidth: '24ch' }}>
        Eerst kennismaken, dan kijken of er een klik is.
      </h3>
      <div className="page-end-cta-double">
        <CTA to="/contact" params={primaryParam ? { onderwerp: primaryParam } : null}>
          Boek een kennismakingsgesprek
        </CTA>
        {secondaryButton}
        <button className="btn ghost" onClick={() => go('/wat-is-coaching')}>
          Niet zeker welk type coaching? <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { VoorJouPage, Service, PageEndCTA });