// ============================================================
// Westerbeek Consultancy — Subpages
// ============================================================

function PageHero({ kicker, title, accent, lead, primary, primaryAction, secondary, secondaryAction }) {
  return (
    <section className="page-hero container">
      {kicker && <div className="kicker"><span className="dash" /><span className="txt">{kicker}</span></div>}
      <h1>{title} <span className="accent">{accent}</span></h1>
      <div className="page-hero-grid">
        {lead && <p className="lead">{lead}</p>}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "flex-end" }}>
          {primary && <a className="brand-btn" onClick={primaryAction}>{primary} <span className="arrow">→</span></a>}
          {secondary && <a className="brand-btn-outline" onClick={secondaryAction}>{secondary}</a>}
        </div>
      </div>
    </section>);

}

// ----------- AI Pagina -----------
function AIPage({ setRoute }) {
  const [scanOpen, setScanOpen] = React.useState(false);
  const ai = ASSESSMENTS[0];
  return (
    <div className="page-enter">
      <PageHero kicker="AI · Roadmap, kennis & use cases"
      title="Een AI-roadmap" accent="op maat van uw organisatie."
      lead="Niet beginnen bij een tool, maar bij uw werkprocessen. Ik help u use cases identificeren waar AI écht verschil maakt — van dagelijkse winsten voor medewerkers tot grotere AI-toepassingen voor uw organisatie. Inclusief het verhogen van AI-kennis bij uw mensen, zodat het ook beklijft."
      primary="Plan kennismaking" primaryAction={() => setRoute("contact")}
      secondary="Doe de AI-scan" secondaryAction={() => setScanOpen(true)} />

      <section className="container" style={{ padding: "60px 0" }}>
        <div className="section-label"><span className="txt">── Wat het assessment oplevert</span><span className="line" /></div>
        <div className="three-paths">
          <div className="path"><div className="path-n">A</div><h4>Roadmap met concrete use cases</h4><p>5–10 toepassingen voor úw organisatie, geprioriteerd op opbrengst en haalbaarheid. Geen generieke lijst — toegespitst op hoe uw mensen werken.</p></div>
          <div className="path"><div className="path-n">B</div><h4>Voorstellen per medewerker­groep</h4><p>Hoe AI in het dagelijks werk past — per afdeling. Kleine, snel uit te rollen winsten naast de grotere strategische use cases.</p></div>
          <div className="path"><div className="path-n">C</div><h4>Kennisverhoging in uw organisatie</h4><p>Interactieve werksessies waarin uw mensen niet alleen leren wát AI kan, maar zelf meedenken over wat het voor hen betekent.</p></div>
        </div>
      </section>

      <section className="container" style={{ padding: "40px 0 60px" }}>
        <div className="section-label"><span className="txt">── Hoofdpropositie</span><span className="line" /></div>
        <div className="big-offer">
          <div>
            <div className="offer-num">── {ai.num}</div>
            <h2>{ai.title}</h2>
            <p className="lead">{ai.deepDive}</p>
            <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="brand-btn" onClick={() => setRoute("contact")}>Vraag toelichting <span className="arrow">→</span></a>
              <a className="brand-btn-outline" onClick={() => setRoute("approach")}>Bekijk aanpak</a>
            </div>
          </div>
          <div className="big-offer-side">
            <div className="bos-block">
              <h5>── Wat u krijgt</h5>
              <ul>{ai.deliverables.map((d) => <li key={d}>✓ {d}</li>)}</ul>
            </div>
          </div>
        </div>
      </section>

      <section className="not-now container">
        <div className="section-label"><span className="txt">── Eerlijk advies</span><span className="line" /></div>
        <h2>Wanneer u beter <span className="accent">(nog) niet</span> met AI begint.</h2>
        <div className="nn-grid">
          <div className="nn"><div className="nn-n">01</div><p>Er is geen mandaat of budget en u doet dit "naast uw werk". AI vraagt focus — anders strandt het.</p></div>
          <div className="nn"><div className="nn-n">02</div><p>Uw probleem is een proces­probleem, geen kennis­probleem. AI lost geen organisatorische chaos op.</p></div>
          <div className="nn"><div className="nn-n">03</div><p>Het ontbreekt aan een concrete vraag of pijn. "Iets met AI doen" is geen doel — eerst de vraag scherp.</p></div>
        </div>
      </section>

      <section className="container" style={{ padding: "60px 0 40px" }}>
        <div className="section-label"><span className="txt">── Toepassingen</span><span className="line" /></div>
        <div className="ucp-grid">
          {USECASES.filter((u) => u.cat.startsWith("AI")).map((u, i) =>
          <div className="ucp-card" key={i} onClick={() => setRoute("usecases")}>
              <div className="ucp-cat">{u.cat}</div>
              <h4>{u.title}</h4>
              <p>{u.summary}</p>
              <div className="ucp-result">→ {u.result}</div>
            </div>
          )}
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
      <MiniScan open={scanOpen} onClose={() => setScanOpen(false)} />
    </div>);

}

// ----------- M365 Pagina -----------
function M365Page({ setRoute }) {
  const m = ASSESSMENTS[1];
  return (
    <div className="page-enter">
      <PageHero kicker="Microsoft 365 · Strategie & onafhankelijk advies"
      title="Krijg meer uit Microsoft 365." accent="Zonder verkooppraatje."
      lead="Een strategisch traject — geen technische implementatie. Ik kijk in begrijpelijke taal naar uw huidige inzet, vertel u eerlijk waar de risico's en kansen zitten en lever een verbeterplan op dat uw IT-team of leverancier kan uitvoeren. Onder mijn regie als u dat wilt."
      primary="Plan kennismaking" primaryAction={() => setRoute("contact")}
      secondary="Download checklist" secondaryAction={() => {}} />

      <section className="container" style={{ padding: "60px 0" }}>
        <div className="section-label"><span className="txt">── Vier herkenbare situaties</span><span className="line" /></div>
        <div className="four-probs">
          <div className="prob"><div className="prob-n">01</div><h4>"We benutten het niet."</h4><p>U betaalt elke maand voor M365 — het gevoel zegt dat het meer kan opleveren, maar wat precies?</p><div className="prob-fix">→ Beoordeling per thema + verbeterplan met prioriteiten</div></div>
          <div className="prob"><div className="prob-n">02</div><h4>"We weten niet of het veilig is."</h4><p>Iemand beheert uw omgeving, maar u kunt zelf niet beoordelen of het op orde is.</p><div className="prob-fix">→ Onafhankelijke risico-analyse in begrijpelijke taal</div></div>
          <div className="prob"><div className="prob-n">03</div><h4>"De leverancier praat technisch."</h4><p>U krijgt offertes en rapporten waar u zelf geen oordeel over kunt vellen.</p><div className="prob-fix">→ Vertaling naar business-taal + tweede mening</div></div>
          <div className="prob"><div className="prob-n">04</div><h4>"We willen het beter aanpakken."</h4><p>U weet dat het beter kan, maar mist iemand die de regie pakt en met de leverancier schakelt.</p><div className="prob-fix">→ Onafhankelijke regie op uw IT-traject</div></div>
        </div>
      </section>

      <section className="container" style={{ padding: "40px 0 60px" }}>
        <div className="section-label"><span className="txt">── Hoofdpropositie</span><span className="line" /></div>
        <div className="big-offer">
          <div>
            <div className="offer-num">── {m.num}</div>
            <h2>{m.title}</h2>
            <p className="lead">{m.deepDive}</p>
            <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="brand-btn" onClick={() => setRoute("contact")}>Vraag toelichting <span className="arrow">→</span></a>
              <a className="brand-btn-outline" onClick={() => setRoute("approach")}>Bekijk aanpak</a>
            </div>
          </div>
          <div className="big-offer-side">
            <div className="bos-block">
              <h5>── Wat u krijgt</h5>
              <ul>{m.deliverables.map((d) => <li key={d}>✓ {d}</li>)}</ul>
            </div>
          </div>
        </div>
      </section>

      <section className="container" style={{ padding: "60px 0 40px" }}>
        <div className="section-label"><span className="txt">── Toepassingen</span><span className="line" /></div>
        <div className="ucp-grid">
          {USECASES.filter((u) => u.cat.startsWith("M365")).map((u, i) =>
          <div className="ucp-card" key={i} onClick={() => setRoute("usecases")}>
              <div className="ucp-cat">{u.cat}</div>
              <h4>{u.title}</h4>
              <p>{u.summary}</p>
              <div className="ucp-result">→ {u.result}</div>
            </div>
          )}
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
    </div>);

}

// ----------- Aanpak / Methode -----------
function ApproachPage({ setRoute }) {
  const steps = [
  { n: "01", t: "Verkennen", d: "We beginnen met luisteren. Wat is de vraag, wie loopt er tegenaan, en hoe ziet succes eruit? Eén pagina helder voordat er iets gepland wordt — zodat we niet op verkeerde aannames bouwen." },
  { n: "02", t: "Roadmap of plan", d: "Voor AI: een roadmap met use cases en een aanpak om kennis in de organisatie te brengen. Voor M365: een verbeterplan met prioriteiten. Concrete documenten — geen rapporten van 80 pagina's die in een lade verdwijnen." },
  { n: "03", t: "Realisatie", d: "Voor afgebakende AI-toepassingen (een app, agent of tool) bouw ik zelf een werkend prototype. Voor zwaardere bouwwerken en M365-inrichting werk ik samen met specialisten of uw eigen IT-team — onder mijn regie. Klein beginnen, snel waarde laten zien, eerlijk stoppen wat niet werkt." },
  { n: "04", t: "Regie en borging", d: "Trajecten lopen vaker vast op het organisatorische deel dan op de techniek. Ik neem regie waar nodig en draag pas over als uw team het zelfstandig kan voortzetten." }];

  return (
    <div className="page-enter">
      <PageHero kicker="Aanpak · Vier stappen voor élk traject"
      title="Begrijpen, plannen," accent="bouwen, borgen."
      lead="Of het nu over AI, Microsoft 365 of iets daartussenin gaat — dezelfde vier stappen. Geen vaste volgorde tussen de trajecten: u begint waar úw vraag ligt."
      primary="Plan kennismaking" primaryAction={() => setRoute("contact")} />

      <section className="container" style={{ padding: "60px 0" }}>
        <div className="approach-tall">
          {steps.map((s, i) =>
          <div className="atall-step" key={s.n}>
              <div className="atall-n">── STAP {s.n}</div>
              <h2>{s.t}</h2>
              <p className="lead">{s.d}</p>
              {i < steps.length - 1 && <div className="atall-arrow">↓</div>}
            </div>
          )}
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
    </div>);

}

// ----------- Use Cases -----------
function UseCasesPage({ setRoute }) {
  const [filter, setFilter] = React.useState("Alle");
  const tags = ["Alle", "AI", "Microsoft 365"];
  const filtered = USECASES.filter((u) => filter === "Alle" || u.cat.startsWith(filter === "AI" ? "AI" : "M365"));
  return (
    <div className="page-enter">
      <PageHero kicker="Use cases · Wat ik bouw"
      title="Hoe het er" accent="in de praktijk uitziet."
      lead="Geen klantnamen — wel concrete voorbeelden van AI- en Microsoft 365-oplossingen die ik samen met opdrachtgevers heb gebouwd. Type oplossing, aanpak, resultaat."
      primary="Plan kennismaking" primaryAction={() => setRoute("contact")} />

      <section className="container" style={{ padding: "40px 0 24px" }}>
        <div className="filter-chips" style={{ justifyContent: "flex-start" }}>
          {tags.map((t) => <button key={t} className={filter === t ? "on" : ""} onClick={() => setFilter(t)}>{t}</button>)}
        </div>
      </section>

      <section className="container" style={{ padding: "0 0 60px" }}>
        <div className="uc-list">
          {filtered.map((u, i) =>
          <div className="uc-row" key={i}>
              <div className="uc-cat">{u.cat}</div>
              <div>
                <h3>{u.title}</h3>
                <p>{u.summary}</p>
                <div className="uc-detail">{u.detail}</div>
              </div>
              <div className="uc-result">
                <small>── Resultaat</small>
                {u.result}
              </div>
            </div>
          )}
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
    </div>);

}

// ----------- Over Sander -----------
function AboutPage({ setRoute }) {
  return (
    <div className="page-enter">
      <PageHero kicker="Over Sander · Eén persoon, 7 jaar zelfstandig"
      title="Het verhaal achter" accent="Westerbeek Consultancy."
      lead=""
      primary="Plan kennismaking" primaryAction={() => setRoute("contact")} />

      <section className="container about-main">
        <div className="about-grid">
          <div className="about-photo">
            <div className="photo-placeholder big">
              <span>SW</span>
              <span className="hint">Foto volgt</span>
            </div>
            <div className="ap-cap">── Sander Westerbeek · Raalte</div>
            <div className="about-quick">
              <div><strong>Sinds</strong><span>2019</span></div>
              <div><strong>Vestiging</strong><span>Raalte</span></div>
              <div><strong>Werkgebied</strong><span>NL</span></div>
              <div><strong>Specialisatie</strong><span>M365 + AI + data</span></div>
            </div>
          </div>
          <div className="about-story">
            <h2>Hoe ik <span className="accent">hier kwam.</span></h2>
            <p className="lead">
              Ik kom uit een ondernemersfamilie in Salland. Op mijn zestiende werkte ik bij een lokaal
              IT-bedrijf — toen heette dat nog "computers maken" en betekende het kabels trekken op
              vrijdagmiddag. Wat me toen al opviel: de techniek was zelden het probleem. De mensen wel.
            </p>
            <p>
              Daarna ruim tien jaar in dienst — als consultant, projectleider en strateeg bij grotere
              IT-dienstverleners. Ik werkte aan migraties, M365-trajecten en de eerste AI-pilots. En zag
              steeds hetzelfde: de organisatie waar het écht over ging, kwam er bekaaid van af. Te veel
              slides, te weinig keuzes, en altijd een leverancier met een eigen pakket onder de arm.
            </p>
            <p>
              In 2019 ben ik voor mezelf begonnen. Niet omdat ik per se ondernemer wilde zijn, maar
              omdat ik vond dat het anders moest. Eén klant tegelijk. Eerlijk advies. En een rol die
              past bij waar ik goed in ben: schakelen tussen business en techniek, vertalen, regie
              voeren — niet zelf aan de knoppen draaien.
            </p>
            <p>
              Sinds 2023 zit AI er steeds prominenter bij. Niet omdat het hip is, maar omdat ik zie
              dat dezelfde fout zich herhaalt: leveranciers verkopen oplossingen, organisaties weten
              niet wat ze écht nodig hebben. Daar zit mijn rol — een onafhankelijke meedenker die uw
              vraag scherp krijgt en helpt om de juiste keuzes te maken.
            </p>

            <h3>Wat ik wél doe</h3>
            <ul className="creed">
              <li><span>✓</span><p>Adviseren en strateeg zijn — schakelen tussen business en IT.</p></li>
              <li><span>✓</span><p>Roadmaps en verbeterplannen schrijven die uw MT in één vergadering kan volgen.</p></li>
              <li><span>✓</span><p>Eenvoudige AI-prototypes zelf bouwen (chat-app, agent, tool zoals deze site).</p></li>
              <li><span>✓</span><p>Regie voeren op uw IT-leverancier of beheer­partij.</p></li>
              <li><span>✓</span><p>Tweede mening geven op offertes, rapporten en plannen.</p></li>
            </ul>

            <h3>Wat ik níet doe</h3>
            <ul className="creed">
              <li><span>×</span><p>Software verkopen of licenties doorverkopen.</p></li>
              <li><span>×</span><p>Provisie aannemen van leveranciers waar ik u naar verwijs.</p></li>
              <li><span>×</span><p>Zelf de Microsoft 365-omgeving inrichten (Purview, security policies, SharePoint-bouw) — daar heeft u uw beheer­partij voor; ik regisseer.</p></li>
              <li><span>×</span><p>Complexe AI-modellen of zware integraties zelf bouwen — daar werk ik mee samen met specialisten.</p></li>
              <li><span>×</span><p>Met meerdere klanten tegelijk werken — u krijgt mijn focus.</p></li>
            </ul>

            <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a className="brand-btn" onClick={() => setRoute("contact")}>Plan kennismaking <span className="arrow">→</span></a>
              <a className="brand-btn-outline" onClick={() => setRoute("approach")}>Bekijk aanpak</a>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
    </div>);

}

// ----------- Insights -----------
function InsightsPage({ setRoute }) {
  const [active, setActive] = React.useState(0);
  const f = INSIGHTS[active];
  return (
    <div className="page-enter">
      <PageHero kicker="Insights · Mensentaal over AI, M365 en data"
      title="Lezen voor" accent="tussendoor."
      lead="Korte stukken — geen vakjargon, geen marketingpraat. Over AI in de praktijk, slim gebruik van Microsoft 365 en waarom databeleid het saaie maar essentiële fundament onder alles is."
      primary="Maandelijkse update" primaryAction={() => {}} />

      <section className="container">
        <div className="ins-featured">
          <div className="ins-hero-card">
            <div className="meta">
              <span className="cat">{f.cat}</span>
              <span>{f.date} · {f.read}</span>
            </div>
            <div style={{ position: "relative" }}>
              <h2>{f.title}</h2>
              <p className="lead">{f.excerpt}</p>
              <div style={{ marginTop: 32 }}>
                <a className="brand-btn">Lees verder <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
          <div className="ins-list">
            {INSIGHTS.map((ins, i) =>
            <div className={"ins-row " + (i === active ? "active" : "")} key={i} onClick={() => setActive(i)}>
                <div className="meta">
                  <span className="cat">{ins.cat}</span>
                  <span>{ins.date}</span>
                  <span>{ins.read}</span>
                </div>
                <h4>{ins.title}</h4>
              </div>
            )}
          </div>
        </div>
      </section>

      <CTAStrip setRoute={setRoute} />
    </div>);

}

// ----------- Contact -----------
function ContactPage({ setRoute }) {
  const [topics, setTopics] = React.useState([]);
  const [status, setStatus] = React.useState("idle");
  const [form, setForm] = React.useState({ name: "", org: "", email: "", message: "" });
  const topicsList = ["AI Readiness Assessment", "MS365 Governance Assessment", "Sparringsessie"];
  const toggle = (t) => setTopics((p) => p.includes(t) ? p.filter((x) => x !== t) : [...p, t]);

  const submit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          org: form.org,
          email: form.email,
          topics,
          message: form.message,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success) {
        setStatus("sent");
        setForm({ name: "", org: "", email: "", message: "" });
        setTopics([]);
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  return (
    <div className="page-enter">
      <PageHero kicker="Contact"
      title="Plan een" accent="kennismaking."
      lead="Bel, app, mail of vul het formulier in om een kennismakingsgesprek in te plannen." />

      <section className="contact-main container">
        <div className="contact-grid">
          <div className="contact-details">
            <div className="contact-block">
              <h5>── Bellen of appen</h5>
              <a className="big" href="tel:+31612979503" style={{ fontSize: "22px" }}>+31 (0)6 12 97 95 03</a>
            </div>
            <div className="contact-block">
              <h5>── E-mail</h5>
              <a className="big" href="mailto:sander@westerbeekconsultancy.nl" style={{ fontSize: "22px" }}>sander@westerbeekconsultancy.nl</a>
            </div>
          </div>

          <form className="contact-form" onSubmit={submit}>
            <div className="field">
              <label>── Uw naam</label>
              <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Hoe mag ik u noemen?" />
            </div>
            <div className="field">
              <label>── Organisatie</label>
              <input value={form.org} onChange={(e) => setForm({ ...form, org: e.target.value })} placeholder="Bedrijf, school of instelling" />
            </div>
            <div className="field">
              <label>── E-mail</label>
              <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="u@organisatie.nl" />
            </div>
            <div className="field">
              <label>── Waar wilt u over sparren? (meerdere mag)</label>
              <div className="chips">
                {topicsList.map((t) =>
                <button type="button" key={t} className={"chip " + (topics.includes(t) ? "on" : "")}
                onClick={() => toggle(t)}>{t}</button>
                )}
              </div>
            </div>
            <div className="field">
              <label>── Vertel kort waar het over gaat</label>
              <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
              placeholder="Een paar zinnen is genoeg — ik bel u vanzelf terug om door te vragen." />
            </div>
            <div className="submit-row">
              {status === "sent" && <span className="sent">✓ Verzonden — ik reageer zo snel mogelijk</span>}
              {status === "error" && <span className="sent" style={{color:"#ff6b6b"}}>✗ Versturen mislukt — mail s.v.p. direct naar sander@westerbeekconsultancy.nl</span>}
              {status === "sending" && <span className="note">VERSTUREN…</span>}
              {status === "idle" && <span className="note">GEEN NIEUWSBRIEF · GEEN TRACKERS</span>}
              <button type="submit" className="brand-btn" disabled={status === "sending"}>Verstuur <span className="arrow">→</span></button>
            </div>
          </form>
        </div>
      </section>
    </div>);

}

Object.assign(window, { AIPage, M365Page, ApproachPage, UseCasesPage, AboutPage, InsightsPage, ContactPage });