// ============================================================
// Westerbeek Consultancy — Homepage
// ============================================================

function Hero({ setRoute, openScan }) {
  return (
    <section className="hero">
      <div className="hero-bg" />
      <div className="hero-glow-1" />
      <div className="hero-glow-2" />
      <div className="container">
        <div className="hero-meta">
          <span className="pulse"><span className="dot" /> Beschikbaar voor nieuwe trajecten</span>
          <span>WESTERBEEK CONSULTANCY · RAALTE NL</span>
        </div>
        <div className="kicker">
          <span className="dash" />
          <span className="txt">Microsoft 365 · AI · Data</span>
        </div>
        <h1 className="hero-title">
          Van AI-ambitie<br/>
          naar AI <span className="accent">in productie.</span>
        </h1>
        <div className="hero-sub">
          <p className="lead">
            Onafhankelijk advies en regie voor organisaties die meer willen halen uit Microsoft 365
            of serieus aan de slag willen met AI. Geen leveranciers­praat, geen verkooppakket — wel
            een strateeg die schakelt tussen business en techniek, en die u vertelt wanneer iets nu
            nog niet aan de orde is.
          </p>
          <div className="hero-cta">
            <a className="brand-btn" onClick={() => setRoute("contact")}>Plan kennismaking <span className="arrow">→</span></a>
            <a className="brand-btn-outline" onClick={openScan}>Doe de AI-scan</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function TwoEntries({ setRoute }) {
  return (
    <section className="two-entries container">
      <div className="entry" onClick={() => setRoute("ai")}>
        <div className="num">── 01 / Ingang AI</div>
        <h2>U wilt iets met AI<br/><span className="accent">— maar wat precies?</span></h2>
        <p>
          Iedereen praat over AI, weinigen weten waar te beginnen. Ik help u door de hype heen prikken,
          identificeer samen met uw mensen welke toepassingen écht waarde toevoegen, en zorg dat de
          kennis ook landt in uw organisatie.
        </p>
        <ul className="entry-list">
          <li>AI Readiness Assessment + roadmap</li>
          <li>Use cases per medewerker­groep</li>
          <li>Werksessies + onafhankelijke regie</li>
        </ul>
        <div className="entry-cta">Ga naar AI <span>→</span></div>
      </div>
      <div className="entry" onClick={() => setRoute("m365")}>
        <div className="num">── 02 / Ingang Microsoft 365</div>
        <h2>U haalt te weinig<br/><span className="accent">uit Microsoft 365.</span></h2>
        <p>
          Een eerlijke beoordeling van uw huidige inzet en een verbeterplan dat uw IT-team of
          leverancier kan uitvoeren. Ik vertaal tussen business en techniek, en houd de regie zodat
          het ook gebeurt zoals afgesproken.
        </p>
        <ul className="entry-list">
          <li>MS365 Strategie & adviestraject</li>
          <li>Tweede mening op offertes en plannen</li>
          <li>Onafhankelijke regie op uw leverancier</li>
        </ul>
        <div className="entry-cta">Ga naar Microsoft 365 <span>→</span></div>
      </div>
    </section>
  );
}

function Foundation() {
  return (
    <section className="foundation container">
      <div className="section-label"><span className="txt">── De rode draad</span><span className="line"/></div>
      <h2 className="foundation-h">
        Twee aparte wegen,<br/>één <span className="accent">eerlijk advies.</span>
      </h2>
      <p className="lead">
        Een AI-traject en een Microsoft 365-traject zijn twee zelfstandige verhalen. U heeft niet
        eerst het één nodig om aan het ander te beginnen. Wat ik wél doe: kijken wat bij úw organisatie
        past, een roadmap maken die u zelf kunt volgen, en u eerlijk vertellen wanneer iets nu nog
        niet aan de orde is. Soms versterken de trajecten elkaar — als dat zo is, hoort u dat van mij.
      </p>
    </section>
  );
}

function PainsRecognition({ setRoute }) {
  const all = [
    { p: "We willen iets met AI, maar weten niet waar te beginnen.", to: "ai" },
    { p: "Onze medewerkers gebruiken AI eigen-wijs. Geen lijn, geen kennis.", to: "ai" },
    { p: "We hebben Copilot-licenties, maar het rendement valt tegen.", to: "ai" },
    { p: "Welke AI-toepassingen passen écht bij ons werk?", to: "ai" },
    { p: "We hebben het idee dat we te weinig uit Microsoft 365 halen.", to: "m365" },
    { p: "Onze IT-leverancier praat technisch. Wij willen weten of het klopt.", to: "m365" },
    { p: "Er ligt een offerte. Is dit redelijk of betalen we te veel?", to: "m365" },
    { p: "Wie kan ons helpen schakelen tussen IT en business?", to: "m365" },
  ];
  return (
    <section className="pains container">
      <div className="section-label"><span className="txt">── Herkent u dit?</span><span className="line"/></div>
      <div className="section-head">
        <h2>Tegen welke<br/><span className="accent">muur loopt u aan?</span></h2>
        <p className="lead">
          Klikken op de uitspraak die voor u herkenbaar is — ik laat u zien hoe ik daar mee help.
        </p>
      </div>
      <div className="pains-grid">
        {all.map((item, i) => (
          <button key={i} className="pain-card" onClick={() => setRoute(item.to)}>
            <span>"{item.p}"</span>
            <span className="arrow">→</span>
          </button>
        ))}
      </div>
    </section>
  );
}

function Offerings({ setRoute }) {
  return (
    <section className="offerings container">
      <div className="section-label"><span className="txt">── Aanbod</span><span className="line"/></div>
      <div className="section-head">
        <h2>Vier manieren<br/>om <span className="accent">samen te werken.</span></h2>
        <p className="lead">
          Van een korte sparring tot een volledig implementatietraject. Beginnen kan klein —
          en het volgende stapje pas als het zin heeft.
        </p>
      </div>
      <div className="offer-grid">
        {SERVICES.map((s, i) => (
          <div className="offer-card" key={s.id} onClick={() => setRoute(s.id === "ai" ? "ai" : s.id === "m365" ? "m365" : "approach")}>
            <div className="offer-num">── {s.num}</div>
            <h3>{s.title}</h3>
            <p className="offer-sub">{s.sub}</p>
            <ul>
              {s.deliverables.slice(0, 3).map((d, j) => <li key={j}>— {d}</li>)}
            </ul>
            <div className="offer-foot">
              <span className="dur">{s.duration}</span>
              <span className="arrow">Lees meer →</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function UseCasesPreview({ setRoute }) {
  return (
    <section className="ucp container">
      <div className="section-label"><span className="txt">── Praktijkvoorbeelden</span><span className="line"/></div>
      <div className="section-head" style={{gridTemplateColumns:"1fr auto", alignItems:"end"}}>
        <h2>Hoe het er <span className="accent">in de praktijk</span> uitziet.</h2>
        <a className="brand-btn-outline" onClick={() => setRoute("usecases")}>Alle use cases <span className="arrow">→</span></a>
      </div>
      <div className="ucp-grid">
        {USECASES.slice(0, 3).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>
  );
}

function ProofQuote() {
  return (
    <section className="proof">
      <div className="container">
        <div className="section-label"><span className="txt">── Wat opdrachtgevers zeggen</span><span className="line"/></div>
        <blockquote>
          "Sander hielp ons in twee gesprekken zien dat onze IT-leverancier ons twee keer factureerde
          voor hetzelfde onderdeel. Zonder hem hadden we getekend voor een uitbreiding van vier ton."
        </blockquote>
        <div className="proof-attr">
          ── Directeur familiebedrijf · 80 medewerkers · Salland
        </div>
      </div>
    </section>
  );
}

function LeadMagnets({ openScan }) {
  return (
    <section className="leads container">
      <div className="section-label"><span className="txt">── Begin laagdrempelig</span><span className="line"/></div>
      <div className="leads-grid">
        <div className="lead-card lead-card-yellow">
          <div className="lead-num">── Lead magnet 01</div>
          <h3>AI-readiness in 5 minuten.</h3>
          <p>Tien vragen, een score, en een rapportje met concrete aanbevelingen — direct in uw mailbox.</p>
          <button className="brand-btn dark-on-yellow" onClick={openScan}>Start de scan <span className="arrow">→</span></button>
        </div>
        <div className="lead-card">
          <div className="lead-num">── Lead magnet 02</div>
          <h3>MS365 Governance checklist.</h3>
          <p>De acht domeinen waar uw M365-volwassenheid op afgemeten wordt. PDF, geen e-mail vereist.</p>
          <button className="brand-btn-outline">Download PDF <span className="arrow">↓</span></button>
        </div>
      </div>
    </section>
  );
}

function AboutPreview({ setRoute }) {
  return (
    <section className="about-preview container">
      <div className="ap-grid">
        <div className="ap-photo">
          <div className="photo-placeholder">
            <span>SW</span>
            <span className="hint">Foto volgt</span>
          </div>
          <div className="ap-cap">── Sander Westerbeek</div>
        </div>
        <div>
          <div className="kicker"><span className="dash"/><span className="txt">Wie u tegenover zich krijgt</span></div>
          <h2>Eén persoon.<br/><span className="accent">Geen verkooporganisatie.</span></h2>
          <p className="lead">
            Ik ben Sander, oprichter van Westerbeek Consultancy. Adviseur en strateeg die schakelt
            tussen business en techniek — sinds 2019 voor mezelf. Ik werk één klant tegelijk, vanuit
            Raalte, vertel u eerlijk wanneer u beter níet met AI moet beginnen, en weet wanneer ik
            beter een specialist erbij haal dan zelf aan de knoppen ga draaien.
          </p>
          <div style={{marginTop: 24, display:"flex", gap: 10, flexWrap:"wrap"}}>
            <a className="brand-btn" onClick={() => setRoute("about")}>Lees mijn verhaal <span className="arrow">→</span></a>
            <a className="brand-btn-outline" onClick={() => setRoute("contact")}>Plan kennismaking</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTAStrip({ setRoute }) {
  return (
    <section className="cta-strip">
      <div className="container">
        <h3>Een vrijblijvend gesprek —<br/><span className="accent">altijd kosteloos.</span></h3>
        <a className="brand-btn" onClick={() => setRoute("contact")}>Plan in agenda <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

function Home({ setRoute }) {
  const [scanOpen, setScanOpen] = React.useState(false);
  return (
    <div className="page-enter">
      <Hero setRoute={setRoute} openScan={() => setScanOpen(true)} />
      <TwoEntries setRoute={setRoute} />
      <Foundation />
      <PainsRecognition setRoute={setRoute} />
      <Offerings setRoute={setRoute} />
      <UseCasesPreview setRoute={setRoute} />
      <ProofQuote />
      <LeadMagnets openScan={() => setScanOpen(true)} />
      <CTAStrip setRoute={setRoute} />
      <MiniScan open={scanOpen} onClose={() => setScanOpen(false)} />
    </div>
  );
}

Object.assign(window, { Home, CTAStrip });