/* LeadPixel — service detail pages. One template, data-driven per service. */
const SDS = window.LeadPixelDesignSystem_6ae30d;
const { Button } = SDS;
const { SiteChrome } = window;

/* headline: array of lines; { t: text, m: true } renders the champagne italic accent */
const SERVICE_PAGES = {
  'seo': {
    title: 'SEO',
    eyebrow: 'Dienst · SEO',
    headline: [{ t: 'Hoger in Google.' }, { t: 'Meer verkeer.' }, { t: 'Meer klanten.', m: true }],
    sub: 'Onze datagedreven SEO-aanpak zorgt dat jouw bedrijf bovenaan staat, precies daar waar je klanten zoeken.',
    cta: 'Gratis SEO-check',
    secondary: 'Bekijk onze resultaten',
    secondaryHref: '/#cases',
    badge: '+218%', badgeLabel: 'organisch verkeer',
    img: 'assets/seo-dashboard.png', imgAlt: 'Google zoekresultaten',
    benEyebrow: 'Wat je krijgt',
    benTitle: 'SEO die zich', benAccent: 'terugverdient.',
    benLead: 'Geen vage beloften over posities, maar een aanpak die je terugziet in aanvragen en omzet.',
    benefits: [
      { icon: IconSeo, title: 'Technische basis', body: 'Een snelle, foutloze site die Google moeiteloos begrijpt en hoger waardeert.' },
      { icon: IconTarget, title: 'De juiste zoekwoorden', body: 'We richten ons op zoekopdrachten met de juiste intentie.' },
      { icon: IconBook, title: 'Content die rankt', body: 'Pagina\u2019s en artikelen die autoriteit opbouwen en je structureel hoger laten staan.' }],
    ctaTitle: 'Klaar om', ctaAccent: 'bovenaan te staan?',
    ctaLead: 'Vraag een gratis SEO-audit aan. Je ontdekt precies waar jouw grootste groeikansen liggen.',
    mag: {
      pill: 'Gratis SEO-gids · PDF',
      pre: '7 SEO-fouten die jou ', accent: 'onderaan Google', post: ' houden',
      copy: [
        'Een gratis E-book die de zeven meest gemaakte SEO-fouten laat zien en hoe je ze één voor één oplost.',
        'Vul je e-mail in en ontvang de gids binnen 1 minuut']
    },
    faqTag: 'Vragen over SEO',
    faqLead: 'Nog vragen over SEO? Stel gerust je vraag.',
    faqs: [
      { q: 'Hoe lang duurt het voordat ik resultaat zie van SEO?', a: 'SEO is een investering op de middellange termijn. De eerste verbeteringen zie je vaak binnen enkele weken, maar serieuze posities en structureel meer verkeer bouwen we doorgaans op in drie tot zes maanden.' },
      { q: 'Garanderen jullie een nummer 1-positie in Google?', a: 'Nee, niemand kan een vaste positie garanderen, en wie dat wél belooft moet je wantrouwen. Wat we wél doen is sturen op zoekwoorden met de juiste intentie en je structureel hoger laten ranken. Dit meten we in verkeer en aanvragen.' },
      { q: 'Werkt SEO ook voor een klein of lokaal bedrijf?', a: 'Juist dan. Lokale SEO zorgt dat je gevonden wordt door mensen in jouw omgeving die nú zoeken naar wat jij aanbiedt. Vaak met minder concurrentie dan landelijk.' },
      { q: 'Moet ik mijn website laten aanpassen voor SEO?', a: 'Soms. We beginnen met een technische analyse; als er aanpassingen nodig zijn aan snelheid, structuur of content bespreken we dat vooraf, inclusief wat het oplevert.' },
      { q: 'Wat is het verschil tussen SEO en Google Ads?', a: 'Met Ads betaal je voor directe zichtbaarheid bovenaan; met SEO bouw je verkeer op dat ook zonder advertentiebudget blijft binnenkomen. Ze versterken elkaar, veel klanten zetten zowel advertenties als SEO in.' }]
  },
  'google-ads': {
    title: 'Google Ads',
    eyebrow: 'Dienst · Google Ads',
    headline: [{ t: 'Meer aanvragen,' }, { t: 'Meer klanten,' }, { t: 'Direct zichtbaar.', m: true }],
    sub: 'Word gevonden op het moment dat iemand zoekt naar jouw product of dienst. Wij bouwen Google Ads-campagnes met één doel: meer winst voor jouw bedrijf.',
    cta: 'Gratis Google Ads advies',
    secondary: 'Zo halen we meer uit je budget',
    secondaryHref: '/#aanpak',
    badge: '4,18×', badgeLabel: 'return on ad spend',
    img: 'assets/google-ads-dashboard.png', imgAlt: 'Google Ads dashboard',
    benEyebrow: 'Wat je krijgt',
    benTitle: 'Advertenties die', benAccent: 'presteren',
    benLead: 'Geen budget dat verdampt, maar campagnes die scherp gestuurd worden op resultaat.',
    benefits: [
      { icon: IconAds, title: 'Bereik de juiste klanten', body: 'Opgezet rond zoekwoorden met koopintentie, zodat je budget naar échte kansen gaat.' },
      { icon: IconTarget, title: 'Haal meer uit je budget', body: 'We sturen dagelijks bij op wat werkt en snijden weg wat geld kost zonder op te leveren.' },
      { icon: IconZap, title: 'Snel resultaat', body: 'Binnen dagen zichtbaar bovenaan Google. Niet pas over maanden.' }],
    ctaTitle: 'Klaar voor', ctaAccent: 'meer aanvragen?',
    ctaLead: 'Vraag een gratis analyse aan van je huidige Google Ads account of een plan als je nog niet adverteert.',
    mag: {
      pill: 'Gratis Ads-gids · PDF',
      pre: '3 tips om meer te halen uit ', accent: 'Google Ads', post: '',
      copy: [
        'Waarschijnlijk laat jij op dit moment geld liggen. Met deze 3 tips laten we je zien hoe je meer rendement uit Google Ads kan halen.',
        'Inclusief een checklist waar jij vandaag nog mee aan de slag kan gaan.',
        'Vul je e-mail in en ontvang de gids binnen 1 minuut']
    },
    faqTag: 'Vragen over Google Ads',
    faqLead: 'Nog vragen over Google Ads? Neem gerust contact met ons op om je vraag te stellen!',
    faqs: [
      { q: 'Hoe snel zie ik resultaat met Google Ads?', a: 'Vrijwel direct. Zodra je campagnes live staan verschijn je bovenaan in Google en stroomt het verkeer binnen op je website.' },
      { q: 'Hoeveel budget heb ik nodig?', a: 'Dat hangt af van je markt en doelen. We werken ook met kleinere budgetten en schalen op zodra een campagne winstgevend draait. In de gratis analyse bepalen we samen een realistisch startbudget.' },
      { q: 'Betaal ik ook als er niet op mijn advertentie wordt geklikt?', a: 'Nee. Bij Google Ads betaal je alleen wanneer iemand daadwerkelijk klikt. Vertoningen zijn gratis,  je betaalt dus alleen voor mensen die je site bezoeken.' },
      { q: 'Ik heb Google Ads al eens geprobeerd maar het werkt niet voor mij', a: 'Als het niet werkt heeft dit altijd een oorzaak. Vaak zit er veel verspilling in verkeerde zoekwoorden of slechte instellingen. We kijken gratis naar je account en laten je zien wat er beter kan.' },
      { q: 'Zit ik vast aan een lang contract?', a: 'Nee. Het moet ten alle tijden een win-win situatie zijn. Je kunt maandelijks bijsturen of stoppen.' }]
  },
  'website': {
    title: 'Website',
    eyebrow: 'Dienst · Website',
    headline: [{ t: 'Een website die niet alleen mooi is,' }, { t: 'maar klanten oplevert.', m: true }],
    sub: 'We bouwen snelle, mooie websites die bezoekers omzetten in aanvragen.',
    cta: 'Gratis advies',
    secondary: 'Bekijk ons werk',
    secondaryHref: '/#cases',
    badge: '+63%', badgeLabel: 'meer conversie',
    img: 'assets/website-dashboard.png', imgAlt: 'Website voorbeeld',
    benEyebrow: 'Wat je krijgt',
    benTitle: 'Alles wat een website', benAccent: 'nodig heeft',
    benLead: 'Een website is niet alleen een visitekaartje. Er moeten ook aanvragen uitkomen',
    benefits: [
      { icon: IconWebsite, title: 'Conversiegericht ontwerp', body: 'Elke pagina stuurt de bezoeker richting de volgende stap: contact opnemen of kopen.' },
      { icon: IconZap, title: 'Razendsnel', body: 'Laadt in een oogwenk beter voor je bezoekers én voor je positie in Google.' },
      { icon: IconContact, title: 'Onderhoud zonder zorgen', body: 'We houden je site veilig, snel en up-to-date, zodat jij je richt op ondernemen.' }],
    ctaTitle: 'Klaar voor een', ctaAccent: 'nieuwe website?',
    ctaLead: 'Plan een vrijblijvend gesprek. We laten je zien wat we voor je kunnen betekenen.',
    mag: {
      pill: 'Gratis website-gids · PDF',
      pre: '3 tips om meer aanvragen uit ', accent: 'jouw website', post: ' te halen',
      copy: [
        'Een gratis E-book met 3 tips die jij vandaag nog kunt toepassen om je huidige website beter te laten presteren',
        'Inclusief een checklist die je zelf kunt nalopen.',
        'Vul je e-mail in en ontvang de gids binnen 1 minuut']
    },
    faqTag: 'Vragen over je website',
    faqLead: 'Nog twijfels over je website? Stel gerust je vraag',
    faqs: [
      { q: 'Hoe lang duurt het om een website te bouwen?', a: 'Een goede website staat doorgaans binnen vier tot acht weken live, afhankelijk van de omvang. Uiteraard houden we je op de hoogte gedurende het hele traject.' },
      { q: 'Krijg ik een website die ik zelf kan aanpassen?', a: 'Ja. Als hier behoefte aan is bouwen wij een systeem waarmee je zelf altijd aanpassingen kan maken. Wil je liever dat wij het onderhoud doen? Dan houden wij je website up-to-date!' },
      { q: 'Wat kost een nieuwe website?', a: 'Dat hangt af van wat je nodig hebt. We werken met heldere afspraken vooraf, zonder verrassingen achteraf. In een kort gesprek geven we je een concreet beeld van de investering en wat die oplevert.' },
      { q: 'Wordt mijn website ook goed gevonden in Google?', a: 'Ja. We bouwen elke site technisch sterk en snel, met een opzet die zoekmachines begrijpen.' },
      { q: 'Wat gebeurt er met mijn huidige website en inhoud?', a: 'Het verhuizen van je website is zeker mogelijk! Je verliest niets, we zorgen voor een soepele overgang zonder dat je vindbaarheid eronder lijdt.' }]
  },
  'social-media-ads': {
    title: 'Social Media Ads',
    eyebrow: 'Dienst · Social Media Ads',
    headline: [{ t: 'Jouw aanbod.' }, { t: 'De juiste mensen.' }, { t: 'Het juiste moment.', m: true }],
    sub: 'Bereik mensen die klaar zijn om te kopen, ook al kennen ze je nog niet. Met advertenties op Instagram, Facebook en TikTok zetten we aandacht om in aanvragen.',
    cta: 'Gratis advies',
    secondary: 'Zo schalen we campagnes',
    secondaryHref: '/#aanpak',
    badge: '€8,40', badgeLabel: 'kosten per lead',
    img: 'assets/social-media-ads-dashboard.png', imgAlt: 'Meta Ads dashboard',
    benEyebrow: 'Wat je krijgt',
    benTitle: 'Campagnes die', benAccent: 'blijven schalen.',
    benLead: 'Social media advertenties die niet alleen zichtbaarheid creëren, maar ook aanvragen en verkopen opleveren.',
    benefits: [
      { icon: IconSocial, title: 'Scroll-stoppende creatives', body: 'Beeld en tekst die opvallen tussen de ruis en mensen aanzetten tot actie.' },
      { icon: IconTarget, title: 'Haarscherpe targeting', body: 'We tonen je aanbod precies aan de mensen die er klaar voor zijn.' },
      { icon: IconRocket, title: 'Schaalbaar resultaat', body: 'We doen meer van wat werkt en elimineren wat niet werkt.' }],
    ctaTitle: 'Klaar om', ctaAccent: 'te groeien?',
    ctaLead: 'Vraag een gratis consult aan. Je weet binnen 30 minuten welke kansen er liggen.',
    mag: {
      pill: 'Gratis Social Ads-gids · PDF',
      pre: '3 meest gemaakte fouten bij ', accent: 'Social Media Advertenties', post: '',
      copy: [
        'Een gratis E-book die laat zien waarom de meeste social ads worden genegeerd en hoe je beeldmateriaal maakt waar mensen op klikken.',
        'Inclusief een checklist waar jij gelijk een campagne mee kan opzetten',
        'Vul je e-mail in en ontvang de gids binnen 1 minuut']
    },
    faqTag: 'Vragen over Social Media Ads',
    faqLead: 'Nog twijfels over social media ads? Stel gerust je vraag.',
    faqs: [
      { q: 'Op welke platforms adverteren jullie?', a: 'Wij adverteren op de kanalen waar jouw klanten zijn. Denk aan Facebook, Instagram & Tiktok. We kiezen kanalen op basis van jouw doelgroep.' },
      { q: 'Werken social ads ook als mensen mijn merk nog niet kennen?', a: 'Juist dan. Met scherpe targeting tonen we je aanbod aan mensen die er klaar voor zijn, ook al kenden ze je nog niet. Zo bereik je nieuwe klanten buiten je bestaande netwerk.' },
      { q: 'Moet ik zelf de advertenties en beelden aanleveren?', a: 'Nee. Wij maken scroll-stoppende creatives voor je. Heb je eigen beeld of video? Dan gebruiken we dat graag als basis.' },
      { q: 'Hoeveel budget heb ik nodig om te starten?', a: 'In het gratis consult bepalen we samen een realistisch startbudget. Wij raden altijd een advertentiebudget aan van minimaal 1500 euro per maand.' },
      { q: 'Hoe weet ik of het werkt?', a: 'Je krijgt heldere rapportage op wat telt: aanvragen of sales. Geen statistieken die niks betekenen zoals likes.' }]
  },
  'automatiseringen': {
    title: 'Automatiseringen',
    eyebrow: 'Dienst · Automatiseringen',
    headline: [{ t: 'Minder handwerk.' }, { t: 'Meer overzicht.' }, { t: 'Meer tijd.', m: true }],
    sub: 'Laat terugkerende taken vanzelf verlopen. We koppelen je tools, automatiseren de opvolging van leads en zorgen dat niets meer tussen wal en schip valt zodat jij je richt op groei.',
    cta: 'Meer informatie',
    secondary: 'Voorbeelden van workflows',
    secondaryHref: '/#aanpak',
    badge: '12u', badgeLabel: 'bespaard per week',
    img: 'assets/automatiseringen-dashboard.png', imgAlt: 'Automatisering workflow',
    benEyebrow: 'Wat je krijgt',
    benTitle: 'Bespaar tijd en', benAccent: 'energie',
    benLead: 'Verspil geen tijd meer aan taken die zich herhalen. Met automatiseringen focus jij je op het werk wat echt belangrijk is en groei je sneller.',
    benefits: [
      { icon: IconChat, title: 'Chatbots', body: 'Een slimme chatbot die jouw websitebezoekers helpt, vragen beantwoordt en bezoekers omzet in leads.' },
      { icon: IconZap, title: 'Directe leadopvolging', body: 'Elke aanvraag krijgt automatisch een snelle, persoonlijke opvolging, 24/7.' },
      { icon: IconContact, title: 'Persoonlijk CRM', body: 'Eén centraal CRM-systeem waarin je al je klanten, leads en werkzaamheden overzichtelijk beheert.' }],
    ctaTitle: 'Klaar om', ctaAccent: 'te groeien?',
    ctaLead: 'Ontdek in een gratis gesprek welke processen we voor je kunnen automatiseren.',
    mag: {
      pill: 'Gratis automatiserings-gids · PDF',
      pre: '10 taken die je deze week ', accent: 'kunt automatiseren', post: '',
      copy: [
        'Een gratis E-book met tien terugkerende taken die je vandaag al kunt automatiseren.',
        'Inclusief een stappenplan om je eerste automatiseringen zelf op te zetten.',
        'Vul je e-mail in en ontvang de gids binnen 1 minuut']
    },
    faqTag: 'Vragen over automatiseringen',
    faqLead: 'Nog twijfels over automatiseringen? Stel gerust je vraag.',
    faqs: [
      { q: 'Welke processen kan ik automatiseren?', a: 'Bijna alles wat je herhaalt: leadopvolging, offertes, afspraken inplannen, gegevens overzetten tussen systemen, herinneringen versturen. In een kort gesprek brengen we jouw grootste tijdvreters in kaart.' },
      { q: 'Moet ik mijn huidige software vervangen?', a: 'Meestal niet. We koppelen juist de tools die je al gebruikt, zodat ze met elkaar gaan samenwerken. Alleen als iets je echt tegenwerkt, adviseren we een alternatief.' },
      { q: 'Is automatisering niet onpersoonlijk naar mijn klanten toe?', a: 'Integendeel. Door snelle, consistente opvolging te automatiseren krijgt elke aanvraag direct aandacht. Jij houdt tijd over voor het persoonlijke contact dat er echt toe doet.' },
      { q: 'Hoeveel tijd levert het me op?', a: 'Dat verschilt per bedrijf, maar veel klanten winnen al snel meerdere uren per week terug. We rekenen vooraf voor je uit waar de grootste winst zit.' },
      { q: 'Heb ik technische kennis nodig?', a: 'Nee. Wij bouwen en onderhouden de automatiseringen op de achtergrond. Jij ziet alleen het resultaat: minder handwerk en meer overzicht.' }]
  }
};

const PARTNER_COUNT = 6;

function ServiceHero({ d, slug }) {
  const openContact = useContact();
  return (
    <section className="lp-section lp-shero" id="home">
      <div className="lp-container">
        <div className="lp-shero__grid">
          <div className="lp-shero__copy reveal">
            <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">{d.eyebrow}</span></div>
            <h1>
              {d.headline.map((l, i) =>
              <React.Fragment key={i}>
                  {l.m ? <span className="metal">{l.t}</span> : l.t}
                  {i < d.headline.length - 1 ? <br /> : null}
                </React.Fragment>
              )}
            </h1>
            <p className="lp-shero__sub">{d.sub}</p>
            <div className="lp-shero__actions">
              <Button variant="primary" size="lg" dot onClick={openContact}>{d.cta}</Button>
            </div>
          </div>
          <div className="lp-shero__visual reveal">
            <div className="lp-shero__glow" aria-hidden="true"></div>
            <div className="lp-shero__card lp-glass lp-glass--strong">
              <div className="lp-shero__media">
                {d.img
                  ? <img src={d.img} alt={d.imgAlt || ''} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '8px' }} />
                  : <div style={{ width: '100%', height: '100%', background: 'linear-gradient(135deg, var(--glass-tint-strong) 0%, rgba(0,0,0,0.18) 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                    </div>
                }
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>);

}

function ServiceBenefits({ d }) {
  return (
    <section className="lp-section lp-band">
      <div className="lp-container">
        <div className="lp-head reveal">
          <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">{d.benEyebrow}</span></div>
          <h2 className="lp-h2">{d.benTitle} <span className="lp-em">{d.benAccent}</span></h2>
          <p className="lp-lead">{d.benLead}</p>
        </div>
        <div className="lp-ben-grid">
          {d.benefits.map((b, i) => {
            const Icon = b.icon;
            return (
              <article className="lp-ben lp-glass reveal" key={i} style={{ transitionDelay: i * 80 + 'ms' }}>
                <span className="lp-ben__icon"><Icon /></span>
                <h3>{b.title}</h3>
                <p>{b.body}</p>
              </article>);

          })}
        </div>
      </div>
    </section>);

}

/* ===================== LEAD MAGNET (per service) ===================== */
function ServiceLeadMagnet({ d, slug }) {
  const m = d.mag;
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | error
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const submit = async (e) => {
    e.preventDefault();
    if (!valid || status === 'sending') return;
    setStatus('sending');
    try {
      await fetch(window.LP_SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        body: new URLSearchParams({ email, bron: 'gids-' + slug }),
      });
      window.location.href = 'bedankt-gids';
    } catch (_) {
      setStatus('error');
    }
  };
  if (!m) return null;
  return (
    <section className="lp-section" id="gids">
      <div className="lp-container">
        <div className="lp-magnet lp-glass lp-glass--strong reveal">
          <div className="lp-magnet__glow" aria-hidden="true"></div>
          <div className="lp-magnet__inner">
            <div className="lp-magnet__badge"><IconDownload /></div>
            <h2>{m.pre}<span className="metal">{m.accent}</span>{m.post}</h2>
            <div className="lp-magnet__copy">
              {m.copy.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <form className="lp-magnet__form" onSubmit={submit} noValidate>
              <div className="lp-magnet__field">
                <input
                  type="email" inputMode="email" placeholder="jouw@email.nl"
                  value={email} onChange={(e) => setEmail(e.target.value)} aria-label="E-mailadres"
                  disabled={status === 'sending'} />
                <Button variant="primary" type="submit" iconRight={<IconArrow />} disabled={status === 'sending'}>
                  {status === 'sending' ? 'Bezig…' : 'Stuur de gids'}
                </Button>
              </div>
              {status === 'error'
                ? <div className="lp-magnet__fine" style={{ color: 'var(--champagne-400,#c0975f)' }}>Verzenden mislukt — probeer opnieuw of mail info@leadpixel.nl.</div>
                : <div className="lp-magnet__fine"><IconMail style={{ width: 14, height: 14 }} />Direct in je inbox. Geen spam.</div>
              }
            </form>
          </div>
        </div>
      </div>
    </section>);

}

/* ===================== FAQ (per service) ===================== */
function ServiceFaqItem({ item, open, onToggle }) {
  const ref = React.useRef(null);
  return (
    <div className={'lp-faq__item lp-glass' + (open ? ' is-open' : '')}>
      <button className="lp-faq__q" aria-expanded={open} onClick={onToggle}>
        <span>{item.q}</span>
        <span className="lp-faq__icon"><IconPlus /></span>
      </button>
      <div className="lp-faq__a" style={{ maxHeight: open ? ref.current ? ref.current.scrollHeight + 'px' : '500px' : '0px' }}>
        <p ref={ref}>{item.a}</p>
      </div>
    </div>);

}

function ServiceFaq({ d }) {
  const openContact = useContact();
  const [open, setOpen] = React.useState(0);
  if (!d.faqs || !d.faqs.length) return null;
  return (
    <section className="lp-section" id="faq">
      <div className="lp-container">
        <div className="lp-faq">
          <div className="lp-faq__intro reveal">
            <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">FAQ</span></div>
            <h2 className="lp-h2">Veelgestelde <span className="lp-em">vragen.</span></h2>
            <p className="lp-lead">{d.faqLead || `Nog twijfels over ${d.title.toLowerCase()}? Hieronder de vragen die ondernemers ons het vaakst stellen. Staat die van jou er niet bij? Stel hem gerust.`}</p>
            <div className="lp-faq__cta">
              <Button variant="glass" iconRight={<IconArrow />} onClick={openContact}>Stel je vraag</Button>
            </div>
          </div>
          <div className="lp-faq__list reveal">
            {d.faqs.map((f, i) =>
            <ServiceFaqItem key={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            )}
          </div>
        </div>
      </div>
    </section>);

}

function ServiceCta({ d }) {
  const openContact = useContact();
  return (
    <section className="lp-section lp-section--tight lp-cta" id="contact">
      <div className="lp-cta__glow" aria-hidden="true"></div>
      <div className="lp-container">
        <div className="lp-head lp-head--center reveal">
          <div className="lp-eyebrow-row" style={{ justifyContent: 'center' }}><span className="lp-dot"></span><span className="lp-eyebrow">Klaar om te groeien?</span></div>
          <h2 className="lp-h2">{d.ctaTitle} <span className="lp-em">{d.ctaAccent}</span></h2>
          <p className="lp-lead">{d.ctaLead}</p>
          <div className="lp-hero__actions" style={{ marginTop: '32px' }}>
            <Button variant="primary" size="lg" dot iconRight={<IconArrow />} onClick={openContact}>{d.cta}</Button>
          </div>
        </div>
      </div>
    </section>);

}

function ServicePage({ slug }) {
  const d = SERVICE_PAGES[slug];
  React.useEffect(() => {
    if (d) document.title = 'LeadPixel — ' + d.title;
  }, [d]);
  if (!d) return <section className="lp-section"><div className="lp-container"><h1 className="lp-h2">Dienst niet gevonden.</h1></div></section>;
  return (
    <React.Fragment>
      <ServiceHero d={d} slug={slug} />
      <ServiceBenefits d={d} />
      <ServiceLeadMagnet d={d} slug={slug} />
      <ServiceFaq d={d} />
      <ServiceCta d={d} />
    </React.Fragment>);

}

/* ============================ MOUNT ============================ */
const _root = document.getElementById('root');
const _slug = _root.dataset.service;
ReactDOM.createRoot(_root).render(
  <SiteChrome>
    <ServicePage slug={_slug} />
  </SiteChrome>
);
