// page-wat-is-coaching.jsx — Coaching primer

function WatIsCoachingPage() {
  return (
    <div className="page">
      <SiteNav />
      <PageRail index={5} slug="Wat is coaching?" />

      <section className="pillar-hero">
        <div className="container">
          <div>
            <Label>Primer</Label>
            <h1 style={{ marginTop: 20 }}>
              <span className="green italic">Wat is</span><br/>coaching?
            </h1>
          </div>
          <p className="intro">
            Een korte uitleg van de verschillen tussen Mental, Life en Executive coaching —
            en hoe een kennismakingsgesprek bij Werner verloopt.
          </p>
        </div>
      </section>

      <div className="container">
        {/* Comparison table */}
        <div className="section tight">
          <div className="section-head">
            <Label>Drie soorten coach — drie verschillende focuspunten</Label>
            <h2 className="display display-3" style={{ marginTop: 18 }}>
              Welke past bij wat u nu nodig heeft?
            </h2>
          </div>
          <div className="compare">
            <CompareCell
              num="01"
              title="Mental Coach"
              desc="Werkt vanuit het heden en de toekomst. Doel: (prestatie)doelen halen — onder druk, na een blokkade, of in een fase van versnelling."
              focus="Focus · Veerkracht · Doel"
            />
            <CompareCell
              num="02"
              title="Life Coach"
              desc="Werkt holistisch: werk, relaties, zingeving, geluk. Stelt vragen die je zelf naar inzicht en actie brengen."
              focus="Balans · Zingeving · Keuze"
            />
            <CompareCell
              num="03"
              title="Executive Coach"
              desc="Begeleidt leiders en ondernemers. Strategisch klankbord op moeilijke beslissingen, leiderschapsontwikkeling, omgaan met isolatie aan de top."
              focus="Leiderschap · EQ · Klankbord"
            />
          </div>
          <p className="muted" style={{ maxWidth: '64ch', fontSize: 15 }}>
            Werner werkt in alle drie de rollen. Welke rol best aansluit, bepaalt u
            niet zelf — dat hoort bij het intake-gesprek hieronder.
          </p>
        </div>

        {/* Voor wie */}
        <div className="section tight">
          <div className="section-head">
            <Label>Voor wie is het bedoeld?</Label>
            <h2 className="display display-3" style={{ marginTop: 18 }}>
              Oorspronkelijk topsport, vandaag breed.
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.6, maxWidth: '60ch', margin: '0 0 24px' }}>
            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, maxWidth: '60ch', fontSize: 16.5, lineHeight: 1.7 }}>
            <li>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>
        </div>

        {/* Intake flow */}
        <div className="section">
          <div className="section-head">
            <Label red>Het kennismakingsgesprek — vijf stappen</Label>
            <h2 className="display display-2" style={{ marginTop: 18 }}>
              Een intake duurt <span className="italic" style={{ color: 'var(--green)' }}>30 tot 60 minuten</span>.
            </h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Het doel is bepalen of er een klik is tussen coach en cliënt — en vaststellen
              of de hulpvraag aansluit bij de expertise van de coach.
            </p>
          </div>

          <div className="intake-flow">
            <IntakeStep
              num="01"
              title="Kennismaken en klik voelen"
              text="Eerst gaan we kennismaken en kijken of er een wederzijdse klik is. Jij zal aanvoelen of er voldoende vertrouwen is in de coach — zonder vertrouwen kan er niet gewerkt worden."
            />
            <IntakeStep
              num="02"
              title="De kern achterhalen"
              text="Daarna gaan we met enkele gerichte vragen de kern van je probleem of wens achterhalen."
            />
            <IntakeStep
              num="03"
              title="Verwachtingen en methode"
              text="Vervolgens lichten we de verwachtingen en methode toe — hoe zal je traject eruit zien en welke tools zullen er gebruikt kunnen worden. Wat verwacht de coach van u? En wat kan jij van je traject en coach verwachten?"
            />
            <IntakeStep
              num="04"
              title="Praktische zaken"
              text="Na de toelichting van enkele praktische zaken — aantal sessies (inschatting), frequentie, tarieven, annuleringsvoorwaarden en privacybeleid — ronden we het gesprek af."
            />
            <IntakeStep
              num="05"
              title="Go of No-Go?"
              text="Uiteraard verwachten wij niet direct een beslissing. U krijgt een paar dagen bedenktijd."
            />
          </div>

          <div className="pullquote" style={{ maxWidth: '60ch' }}>
            Als de coach merkt dat jouw vraag buiten zijn expertise valt — bijvoorbeeld
            als er therapie nodig is in plaats van coaching — zal de coach je in dit
            gesprek doorverwijzen.
          </div>
        </div>

        <div className="page-end-cta">
          <Label red>Volgende stap</Label>
          <h3 className="display display-3" style={{ maxWidth: '24ch' }}>
            Klaar voor het eerste gesprek?
          </h3>
          <div className="page-end-cta-double">
            <CTA to="/contact">Boek een kennismakingsgesprek</CTA>
          </div>
        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function CompareCell({ num, title, desc, focus }) {
  return (
    <div className="compare-cell">
      <Label noMark>{num}</Label>
      <h3>{title}</h3>
      <p>{desc}</p>
      <div className="focus">{focus}</div>
    </div>
  );
}

function IntakeStep({ num, title, text }) {
  return (
    <div className="intake-step">
      <div className="step-num">{num}</div>
      <div>
        <h3>{title}</h3>
        <p>{text}</p>
      </div>
    </div>
  );
}

Object.assign(window, { WatIsCoachingPage, CompareCell, IntakeStep });