// ============================================================
// Westerbeek Consultancy — shared
// ============================================================

const PAINS_AI = [
"We willen iets met AI, maar weten niet waar te beginnen.",
"Onze pilots blijven hangen — niets bereikt productie.",
"Iedereen gebruikt ChatGPT in z'n eentje. Geen beleid, geen lijn.",
"We hebben Copilot-licenties, maar het rendement valt tegen.",
"Hoe weten we of onze data klaar is voor AI?"];


const PAINS_M365 = [
"SharePoint is een digitaal rommelhok geworden.",
"Iedereen werkt anders in Teams. Niemand weet meer waar wat staat.",
"We hebben geen idee wie waar bij kan — en dat zorgt al jaren voor stress.",
"Adoptie is laag: we betalen voor licenties die nauwelijks gebruikt worden.",
"Compliance loopt achter: AVG, Purview, retentie staan op de wensenlijst."];


const ASSESSMENTS = [
{
  id: "ai",
  num: "01",
  title: "AI Readiness Assessment",
  sub: "Een concrete AI-roadmap met use cases voor úw organisatie.",
  deliverables: [
  "Inventarisatie van werkprocessen en kansen per afdeling",
  "Geprioriteerde roadmap met 5–10 concrete AI-use cases",
  "Per use case: doel, opbrengst, complexiteit, go/no-go",
  "Voorstellen voor medewerkers: hoe AI dagelijks te gebruiken",
  "Kennisverhoging via interactieve werksessies",
  "Ondersteunend hoofdstuk: data- en governance-readiness"],

  duration: "3–4 weken",
  deepDive: "Het assessment is opgebouwd rond uw organisatie — niet rond een tool. We kijken naar werkprocessen en bedenken samen waar AI echt waarde toevoegt. Het eindigt in een roadmap met use cases (van kleine winsten voor medewerkers tot grotere AI-toepassingen) plús een aanpak om kennis in de organisatie te laten groeien. Governance en data komen aan bod waar het de roadmap raakt — niet als doel op zich."
},
{
  id: "m365",
  num: "02",
  title: "MS365 Strategie & Adviestraject",
  sub: "Krijg meer uit Microsoft 365 — zonder dat ik er aan de knoppen draai.",
  deliverables: [
  "Beoordeling van uw huidige M365-inzet langs 8 thema's",
  "Risico- en kansen­analyse (security, AVG, retentie, adoptie)",
  "Helder verbeterplan met prioriteiten en fases",
  "Quick wins die uw team direct kan oppakken",
  "Onafhankelijke regie op uw IT-leverancier of beheer­partij"],

  duration: "2–3 weken",
  deepDive: "Een strategisch traject, geen technische implementatie. Ik breng uw M365-omgeving in kaart, vertel u in begrijpelijke taal 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."
}];


const SERVICES = [
ASSESSMENTS[0],
ASSESSMENTS[1],
{
  id: "sparring",
  num: "03",
  title: "Sparringsessie",
  sub: "90 minuten, vaste prijs, eerlijk advies.",
  deliverables: [
  "Voorbereiding op basis van uw vraag",
  "90 minuten gesprek (locatie of online)",
  "Eén-pagina samenvatting met aanbevelingen",
  "Geen vervolgverplichting"],

  duration: "1–2 weken",
  deepDive: "Voor wie eerst wil verkennen voordat een traject start. U vertelt waar u tegenaan loopt, ik stel vragen en geef een eerlijke richting mee — ook als dat is: nu nog niets doen."
},
{
  id: "second",
  num: "04",
  title: "Tweede mening",
  sub: "Onafhankelijke review op offerte, plan of implementatie.",
  deliverables: [
  "Doorname van uw documenten/offerte",
  "Korte interviews met betrokkenen",
  "Reviewdocument met bevindingen",
  "Concrete onderhandel-/aanpassingspunten"],

  duration: "1–2 weken",
  deepDive: "Een offerte van €80k op tafel? Een traject dat niet loopt zoals beloofd? Ik geef u een onafhankelijk, schriftelijk oordeel zonder leveranciersbelang."
}];


const USECASES = [
{
  cat: "AI · Kennis & ideatie",
  title: "AI-roadmap voor uw organisatie",
  summary: "Samen met uw team kansen vinden waar AI écht waarde toevoegt — van kleine winsten voor medewerkers tot strategische toepassingen.",
  result: "5–10 use cases, geprioriteerd",
  detail: "Werksessies met afdelingen, gevolgd door een geprioriteerde roadmap. Per use case: doel, opbrengst, complexiteit en eerlijk go/no-go-advies. Géén implementatie­offerte, wél een plan dat u zelf of met een leverancier kunt uitvoeren."
},
{
  cat: "AI · Klein bouwwerk",
  title: "Een werkende AI-app of -agent",
  summary: "Voor wie wil zien hoe een idee in de praktijk werkt: een eenvoudig prototype dat ik zelf bouw — een chat-app, een formulier-helper of een eenvoudige agent.",
  result: "Werkend prototype in 2–4 weken",
  detail: "Voor afgebakende toepassingen kan ik zelf een werkend prototype maken. Voor zwaardere bouwwerken (complexe workflows, eigen modellen of integraties met meerdere systemen) zoeken we samen een specialistische bouwer — onder mijn regie."
},
{
  cat: "AI · Adoptie",
  title: "AI-kennis in uw organisatie",
  summary: "Werksessies waarin medewerkers leren wat AI voor hun werk kan betekenen — geen passieve uitleg maar actief meedenken.",
  result: "Mensen die zelf met AI aan de slag gaan",
  detail: "Per afdeling 1–2 sessies. Mensen ontdekken concrete toepassingen voor hun eigen werk en leren waar AI wel en níet zinvol is. Onmisbaar onderdeel van een AI-traject — anders blijft het een papieren plan."
},
{
  cat: "M365 · Strategie",
  title: "Krijg meer uit Microsoft 365",
  summary: "Een eerlijke beoordeling van uw huidige inzet, met een verbeterplan dat uw IT-team of leverancier kan uitvoeren.",
  result: "Helder plan + onafhankelijke regie",
  detail: "Ik kijk waar het in uw omgeving rommelig of risicovol is en schrijf een verbeterplan in begrijpelijke taal. De technische uitvoering doet uw beheer­partij — ik kan de regie houden zodat het ook gebeurt zoals afgesproken."
},
{
  cat: "M365 · Tweede mening",
  title: "Onafhankelijk oordeel over uw IT",
  summary: "Een offerte van €80k op tafel? Een traject dat niet loopt zoals beloofd? Een beoordeling zonder leveranciers­belang.",
  result: "Helder advies + onderhandel­punten",
  detail: "Ik ben geen leverancier, krijg geen provisie en heb geen pakket te verkopen. Daardoor kan ik u eerlijk vertellen wat een aanbieding waard is en wat u beter anders kunt aanpakken."
},
{
  cat: "Strategie · Sparring",
  title: "Sparringpartner voor directie",
  summary: "Voor directies, MT's en bestuurders die periodiek willen klankborden over IT-strategie, AI-keuzes of leveranciers­vraagstukken.",
  result: "Een eerlijke meedenker buiten uw team",
  detail: "Maandelijks of per kwartaal — flexibel afgesproken. Ik schakel makkelijk tussen techniek en business, wat handig is als u zelf vooral aan de business-kant zit en uw IT-leverancier vooral aan de techniek-kant."
}];


const INSIGHTS = [
{ cat: "AI", date: "14.04.26", read: "7 min", title: "Vijf AI-toepassingen voor het MKB die meer doen dan een chatbot",
  excerpt: "Copilot is een prima begin, maar AI kan zoveel meer voor uw organisatie betekenen. Vijf concrete voorbeelden — van offertes opstellen tot e-mails sorteren." },
{ cat: "Databeleid", date: "02.04.26", read: "6 min", title: "Waarom u eerst uw data op orde moet hebben vóór u met AI begint",
  excerpt: "AI klinkt aantrekkelijk, maar zonder goed databeleid bouwt u op drijfzand. Wat houdt 'data op orde' eigenlijk in, zonder een meerjarig project op te tuigen?" },
{ cat: "Microsoft 365", date: "10.03.26", read: "5 min", title: "U betaalt voor Microsoft 365 — gebruikt u het ook?",
  excerpt: "Veel organisaties zetten M365 in als duurdere Outlook en Word. Een rondje door uw eigen omgeving levert vaak verrassende quick wins op." },
{ cat: "AI", date: "21.03.26", read: "5 min", title: "Wanneer u beter (nog) niet met AI moet beginnen",
  excerpt: "Soms is het eerlijke advies: nu niet. Drie situaties waarin AI uw geld en aandacht niet waard is — en wat u in plaats daarvan beter kunt doen." },
{ cat: "Governance", date: "28.02.26", read: "8 min", title: "AVG en AI: wat moet u nu écht regelen?",
  excerpt: "Een praktische uitleg zonder juridisch jargon. Drie principes die u helpen om verantwoord met AI te starten zonder boetes te riskeren." }];


// ============================================================
// Logo
// ============================================================
function LogoLockup() {
  return (
    <span className="brand-lockup">
      <img src="assets/logo-mark.png" alt="" style={{ height: 32, width: 32 }} />
      <span className="divider" />
      <span className="word">
        <span className="w1">WESTERBEEK</span>
        <span className="w2">CONSULTANCY</span>
      </span>
    </span>);

}

// ============================================================
// Chrome
// ============================================================
function Chrome({ route, setRoute }) {
  const items = [
  { id: "ai", label: "AI" },
  { id: "m365", label: "Microsoft 365" },
  { id: "approach", label: "Aanpak" },
  { id: "usecases", label: "Use cases" },
  { id: "insights", label: "Insights" }];

  return (
    <header className="chrome">
      <div className="container chrome-inner">
        <a onClick={() => setRoute("home")}><LogoLockup /></a>
        <nav className="nav">
          {items.map((it) =>
          <a key={it.id}
          className={route === it.id ? "active" : ""}
          onClick={() => setRoute(it.id)}>
              {it.label}
            </a>
          )}
        </nav>
        <div className="chrome-actions">
          <a className="brand-btn" onClick={() => setRoute("contact")}>
            Plan kennismaking <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>);

}

// ============================================================
// Footer
// ============================================================
function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-quote">
          Van AI-ambitie<br />naar AI <span className="accent">in productie.</span>
        </div>
        <div className="footer-grid">
          <div>
            <div style={{ marginBottom: 20 }}><LogoLockup /></div>
            <p style={{ margin: 0, maxWidth: "36ch", color: "var(--brand-text-secondary)", fontSize: 13 }}>
              Onafhankelijk advies, strategie en regie op het gebied van AI en Microsoft 365.
              Voor MKB en onderwijs. Vanuit Raalte.
            </p>
            <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--brand-text-faint)", letterSpacing: "0.15em" }}>KVK 93478275 · BTW NL005022339B52

            </div>
          </div>
          <div>
            <h4>Wat ik doe</h4>
            <ul>
              <li><a onClick={() => setRoute("ai")}>AI</a></li>
              <li><a onClick={() => setRoute("m365")}>Microsoft 365</a></li>
              <li><a onClick={() => setRoute("approach")}>Aanpak</a></li>
              <li><a onClick={() => setRoute("usecases")}>Use cases</a></li>
            </ul>
          </div>
          <div>
            <h4>Over</h4>
            <ul>
              <li><a onClick={() => setRoute("insights")}>Insights</a></li>
              <li><a onClick={() => setRoute("contact")}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Direct</h4>
            <ul>
              <li>+31 (0)6 12 97 95 03</li>
              <li>sander@westerbeekconsultancy.nl</li>
              <li style={{ marginTop: 8, color: "var(--brand-text-muted)" }}></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Westerbeek Consultancy</span>
          <span></span>
        </div>
      </div>
    </footer>);

}

// ============================================================
// Lead-magnet: AI Readiness Mini-scan
// ============================================================
function MiniScan({ open, onClose }) {
  const questions = [
  { q: "Heeft uw organisatie een vastgesteld AI-beleid?", opts: ["Ja, vastgesteld", "In ontwikkeling", "Nog niet"] },
  { q: "Weet u welke data u heeft en wie eigenaar is?", opts: ["Volledig in beeld", "Deels", "Niet"] },
  { q: "Gebruiken medewerkers nu al AI-tools (ChatGPT/Copilot)?", opts: ["Ja, met afspraken", "Ja, zonder afspraken", "Nauwelijks"] },
  { q: "Heeft u al concrete AI-use-cases benoemd?", opts: ["3 of meer", "1 of 2", "Geen"] },
  { q: "Is er budget en mandaat voor een AI-traject?", opts: ["Ja, beide", "Mandaat wel, budget nog niet", "Nog niet"] }];

  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);

  if (!open) return null;
  const total = questions.length;
  const onPick = (idx) => {
    const next = [...answers, idx];
    setAnswers(next);
    if (step + 1 < total) setStep(step + 1);else setStep(total);
  };
  const score = () => {
    const max = total * 2;
    const got = answers.reduce((a, i) => a + (2 - i), 0);
    return Math.round(got / max * 100);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div className="modal-meta">
          <span>── AI Readiness Mini-scan</span>
          <span>{step < total ? `${step + 1} / ${total}` : "Resultaat"}</span>
        </div>

        {step < total &&
        <>
            <h3>{questions[step].q}</h3>
            <div className="modal-opts">
              {questions[step].opts.map((o, i) =>
            <button key={i} onClick={() => onPick(i)}>{o}</button>
            )}
            </div>
          </>
        }
        {step >= total && !done &&
        <>
            <h3>Uw AI-readiness: <span style={{ color: "var(--brand-yellow)" }}>{score()}%</span></h3>
            <p className="lead" style={{ marginBottom: 24 }}>
              Wilt u het volledige rapport met aanbevelingen? Vul uw e-mail in — geen nieuwsbrief, geen tracker, alleen het rapport.
            </p>
            <form onSubmit={(e) => {e.preventDefault();setDone(true);}}>
              <input required type="email" placeholder="u@organisatie.nl" value={email} onChange={(e) => setEmail(e.target.value)}
            style={{ width: "100%", padding: "14px 0", background: "transparent", border: 0, borderBottom: "1px solid var(--brand-border)", color: "var(--brand-text)", fontSize: 16, marginBottom: 24 }} />
              <button type="submit" className="brand-btn">Stuur rapport <span className="arrow">→</span></button>
            </form>
          </>
        }
        {done &&
        <>
            <h3>Verzonden ✓</h3>
            <p className="lead">U ontvangt het rapport binnen één werkdag — handmatig, niet automatisch. Mocht u eerder willen sparren, bel gerust direct: +31 (0)6 12 97 95 03.</p>
            <div style={{ marginTop: 24 }}>
              <button className="brand-btn-outline" onClick={onClose}>Sluiten</button>
            </div>
          </>
        }
      </div>
    </div>);

}

Object.assign(window, {
  PAINS_AI, PAINS_M365, ASSESSMENTS, SERVICES, USECASES, INSIGHTS,
  Chrome, Footer, LogoLockup, MiniScan
});