/* LeadPixel homepage. Chrome from shared.jsx. */
const DS = window.LeadPixelDesignSystem_6ae30d;
const { Button } = DS;

/* ============================ HERO ============================ */
function Hero() {
  const openContact = useContact();
  return (
    <section className="lp-hero" id="home">
      <div className="lp-hero__glow" aria-hidden="true"></div>
      <div className="lp-container">
        <div className="hb-hero__grid">
          <div className="hb-hero__copy">
            <div className="lp-eyebrow-row reveal"><span className="lp-dot"></span><span className="lp-eyebrow">Online marketingbureau</span></div>
            <h1 className="reveal">
              Meer klanten, Meer Omzet,<br /><span className="metal">Gegarandeerd.</span>
            </h1>
            <p className="lp-hero__sub reveal">Wij zijn er voor ondernemers die willen investeren in resultaat, niet in loze beloftes. Ons doel is om het maximale uit jouw marketing te halen. Ben jij klaar om gas te geven?</p>
            <div className="lp-hero__actions reveal">
              <Button variant="primary" size="lg" iconRight={<IconArrow />} as="a" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Meer informatie</Button>
            </div>
          </div>
          <div className="hb-hero__visual reveal">
            <div className="hb-hero__card">
              <img
                src="assets/images/home-hero.webp"
                alt="LeadPixel — Online marketing resultaat"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ SERVICES ============================ */
const SERVICES = [
{ icon: IconAds, title: 'Google Ads', href: 'google-ads', body: 'Word gevonden op het moment dat iemand zoekt naar jouw product of dienst en betaal alleen als ze klikken.' },
{ icon: IconWebsite, title: 'Website', href: 'website', body: 'Een website die niet alleen mooi oogt, maar er ook voor zorgt dat bezoekers klant worden.' },
{ icon: IconSocial, title: 'Social Media Ads', href: 'social-media-ads', body: 'Jouw aanbod precies voor de neus van mensen die er klaar voor zijn, ook al kennen ze je nog niet.' },
{ icon: IconSeo, title: 'SEO', href: 'seo', body: 'Zorg dat jouw bedrijf bovenaan staat in Google zodat klanten bij jou komen in plaats van je concurrent.' },
{ icon: IconAuto, title: 'Automatiseringen', href: 'automatiseringen', body: 'Laat tijdrovende taken automatisch verlopen, zodat jij je tijd steekt in wat écht belangrijk is.' }];

function Services() {
  const openContact = useContact();
  return (
    <section className="lp-section" id="diensten">
      <div className="lp-container">
        <div className="hb-head reveal">
          <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Wat we doen</span></div>
          <h2 className="lp-h2">Waar kunnen we je mee helpen?</h2>

        </div>
        <div className="hb-svc reveal">
          {SERVICES.map((s) => {
            const Icon = s.icon;
            return (
              <a className="hb-svc-item" key={s.title} href={s.href}>
                <span className="hb-svc-ico"><Icon width={32} height={32} /></span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                <span className="hb-svc-arrow"><IconArrow /></span>
              </a>);
          })}
          <a className="hb-svc-item hb-svc-cta" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>
            <span className="hb-svc-ico"><IconSpark width={32} height={32} /></span>
            <h3>Niet zeker welke?</h3>
            <p>Plan een gratis intake! We wijzen je in 30 minuten de snelste route naar groei.</p>
            <span className="hb-svc-arrow"><IconArrow /></span>
          </a>
        </div>
      </div>
    </section>);
}

/* ============================ USPs ============================ */
const USPS = [
{ icon: IconContact, n: '01', title: 'Direct contact', body: 'We schuilen niet achter een anoniem callcenter. Je hebt een vast aanspreekpunt bij een vast persoon.' },
{ icon: IconTarget, n: '02', title: 'Resultaatgericht', body: 'Wij vinden dat marketing maar één doel heeft: geld opleveren. Alles wat we doen rekenen we daarop af.' },
{ icon: IconZap, n: '03', title: 'Snel schakelen', body: 'Geen lange wachttijden. Als je iets nodig hebt, kan dat snel geregeld zijn.' }];

function Usps() {
  return (
    <section className="lp-section lp-section--tight">
      <div className="lp-container">
        <div className="hb-why reveal">
          <div className="hb-why__lead">
            <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Waarom LeadPixel</span></div>
            <h2 className="lp-h2">Geen valse beloftes. <span className="lp-em">Gewoon resultaat.</span></h2>
            <p className="hb-why__copy">Met deze drie principes bepalen we alles wat we doen en mag je ons elke dag afmeten.</p>
          </div>
          <div className="hb-why__list">
            {USPS.map((u) =>
            <div className="hb-why__item" key={u.n}>
                <span className="hb-why__n">{u.n}</span>
                <h3>{u.title}</h3>
                <p>{u.body}</p>
              </div>)}
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ HOW WE WORK ============================ */
const STEPS = [
{ icon: IconChat, idx: '1', title: 'Intake', body: 'We leren je bedrijf kennen: je doelen, je markt en waar de groei vandaan moet komen.' },
{ icon: IconCoffee, idx: '2', title: 'Gratis adviesgesprek', body: 'Je krijgt een helder plan met concrete kansen. Vrijblijvend en zonder verplichtingen.' },
{ icon: IconRocket, idx: '3', title: 'Aan de slag', body: 'Wij doen waar we goed in zijn, jij ziet de klanten binnenkomen!' }];

function HowWeWork() {
  return (
    <section className="lp-section" id="aanpak">
      <div className="lp-container">
        <div className="hb-head reveal">
          <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Hoe we werken</span></div>
          <h2 className="lp-h2">Van kennismaking tot <span className="lp-em">klanten in drie stappen.</span></h2>
          <p className="lp-lead">Geen ingewikkelde trajecten. Een duidelijk pad waarbij je vanaf dag één weet waar je aan toe bent.</p>
        </div>
        <div className="hb-timeline reveal">
          {STEPS.map((s) =>
          <div className="hb-tl" key={s.idx}>
              <div className="hb-tl__node">{s.idx}</div>
              <div className="hb-tl__txt">
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>)}
        </div>
      </div>
    </section>);
}

/* ============================ LEAD MAGNET ============================ */
function LeadMagnet() {
  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-home' }),
      });
      window.location.href = 'bedankt-gids';
    } catch (_) {
      setStatus('error');
    }
  };
  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>3 manieren om meer klanten binnen te halen zonder geld uit te geven</h2>
            <div className="lp-magnet__copy">
              <p>Download ons gratis e-book en ontdek de 3 tactieken die wij dagelijks inzetten om meer klanten aan te trekken.</p>
              <p>Inclusief een praktische checklist die je vandaag nog zelf kunt nalopen.</p>
              <p>Vul je e-mail in en ontvang de gids binnen 1 minuut</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 ============================ */
const FAQS = [
{ q: 'Wat kost het om met LeadPixel samen te werken?', a: 'Dat hangt af van je doelen en welke diensten je inzet. We werken zonder lange contracten en bespreken vooraf helder wat je investeert en wat het oplevert. In de gratis intake krijg je een concreet voorstel.' },
{ q: 'Wat is het voordeel van een vrijblijvend adviesgesprek?', a: 'Je krijgt binnen 30 minuten een helder beeld van je grootste groeikansen zonder verplichtingen. Ook als je daarna niet met ons in zee gaat, loop je weg met bruikbaar advies.' },
{ q: 'Hoe snel kunnen jullie aan de slag?', a: 'Na de intake kunnen we doorgaans binnen een week starten. Geen lange wachttijden: als het nodig is, schakelen we snel.' },
{ q: 'Werken jullie met lange contracten?', a: 'Alle samenwerkingen die wij aangaan, moeten een win-winsituatie zijn. Daarom kun je bij ons elke maand opzeggen.' },
{ q: 'Met welke bedrijven werken jullie?', a: "Van zzp'ers tot mkb-bedrijven die serieus willen groeien. Of je nu lokaal klanten zoekt of landelijk wilt opschalen we stemmen de aanpak af op jouw markt." },
{ q: 'Waarom zou ik kiezen voor LeadPixel?', a: 'Bij ons heb je direct contact met de mensen die het werk doen, geen anoniem callcenter. We rekenen marketing af op één ding: meer klanten en omzet voor jou.' }];

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

function Faq() {
  const openContact = useContact();
  const [open, setOpen] = React.useState(0);
  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">Heb je een vraag? Laat het ons weten.</p>
            <div className="lp-faq__cta">
              <a className="hb-link" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Stel je vraag <IconArrow /></a>
            </div>
          </div>
          <div className="hb-faq__list reveal">
            {FAQS.map((f, i) =>
            <FaqItem key={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            )}
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ FINAL CTA ============================ */
function FinalCta() {
  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">Laten we je volgende <span className="lp-em">klant binnenhalen.</span></h2>
          <p className="lp-lead">Plan een vrijblijvende intake. Binnen 30 minuten weet je precies waar jouw grootste groeikansen liggen.</p>
          <div className="lp-hero__actions" style={{ marginTop: '32px', justifyContent: 'center' }}>
            <Button variant="primary" size="lg" dot iconRight={<IconArrow />} as="a" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Plan een intake</Button>
          </div>
        </div>
      </div>
    </section>);
}

/* ============================ MOUNT ============================ */
ReactDOM.createRoot(document.getElementById('root')).render(
  <SiteChrome home>
    <Hero />
    <hr className="lp-rule" />
    <Services />
    <Usps />
    <hr className="lp-rule" />
    <HowWeWork />
    <LeadMagnet />
    <Faq />
    <FinalCta />
  </SiteChrome>
);