/* LeadPixel — shared site chrome (header, footer, contact modal) used by every page. */
const _DS = window.LeadPixelDesignSystem_6ae30d;
const { Button } = _DS;

/* ── Google Apps Script endpoint ──────────────────────────────────────────────
   After deploying Code.gs, replace the placeholder below with your Web app URL.
   Format: https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec            */
const LP_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzk1iEtXqCN9ZkeVrhf3IoszszhG-F7xGmIjiLMgG0hONdIQwmQOIZvf6y1esSKSJ2MIw/exec';

/* On the homepage anchors scroll; on subpages they jump back to the homepage. */
const LP_HREF = (home, anchor) => (home ? '#' + anchor : '/#' + anchor);

/* Shared contact-modal opener (provided by SiteChrome) */
const ContactContext = React.createContext(() => {});
const useContact = () => React.useContext(ContactContext);

/* ——— Scroll reveal hook (rect-based; robust across embed contexts) ——— */
function useReveal() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    let raf = 0;
    const check = () => {
      raf = 0;
      const vh = window.innerHeight || document.documentElement.clientHeight;
      for (let i = els.length - 1; i >= 0; i--) {
        const el = els[i];
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0) {
          el.classList.add('in');
          els.splice(i, 1);
        }
      }
      if (els.length === 0) detach();
    };
    const onScroll = () => {if (!raf) raf = requestAnimationFrame(check);};
    const detach = () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    check();
    const t = setTimeout(() => {els.forEach((e) => e.classList.add('in'));}, 1400);
    return () => {detach();clearTimeout(t);if (raf) cancelAnimationFrame(raf);};
  }, []);
}

/* ============================ HEADER ============================ */
function Header({ home = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [svcOpen, setSvcOpen] = React.useState(false);
  const openContact = useContact();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const SERVICES_NAV = [
  { label: 'Google Ads', href: 'google-ads' },
  { label: 'Website', href: 'website' },
  { label: 'Social Media Ads', href: 'social-media-ads' },
  { label: 'SEO', href: 'seo' },
  { label: 'Automatiseringen', href: 'automatiseringen' }];

  return (
    <header className={'lp-header' + (scrolled ? ' is-scrolled' : '')}>
      <div className="lp-container">
        <div className="lp-header__inner">
          <a className="lp-logo" href={"/"} aria-label="LeadPixel home">
            <img src="assets/leadpixel-wordmark-dark.png" alt="LeadPixel" />
          </a>
          <nav className="lp-nav">
            <a href={"/"}>Home</a>
            <div className="lp-nav__drop">
              <a href={LP_HREF(home, 'diensten')} className="lp-nav__drop-trigger">
                Diensten
                <svg className="lp-nav__chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
              </a>
              <div className="lp-nav__menu">
                <div className="lp-nav__menu-inner lp-glass lp-glass--strong">
                  {SERVICES_NAV.map((s) => <a key={s.href} href={s.href}>{s.label}</a>)}
                </div>
              </div>
            </div>
            <a href="over-ons">Over ons</a>
            <a href="contact">Contact</a>
          </nav>
          <div className="lp-header__cta">
            <Button variant="primary" size="sm" dot as="a" href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Gratis advies</Button>
            <button className="lp-burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
              {open ? <IconClose /> : <IconMenu />}
            </button>
          </div>
        </div>
        <div className={'lp-mobile' + (open ? ' is-open' : '')}>
          <div className="lp-mobile__panel lp-glass lp-glass--strong">
            <a href={"/"} onClick={() => setOpen(false)}>Home</a>
            <div className="lp-mobile__group">
              <button type="button" className={'lp-mobile__drop' + (svcOpen ? ' is-open' : '')} aria-expanded={svcOpen} onClick={() => setSvcOpen((v) => !v)}>
                Diensten
                <svg className="lp-mobile__chev" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
              </button>
              <div className={'lp-mobile__sub' + (svcOpen ? ' is-open' : '')}>
                {SERVICES_NAV.map((s) => <a key={s.href} href={s.href} onClick={() => setOpen(false)}>{s.label}</a>)}
              </div>
            </div>
            <a href="over-ons" onClick={() => setOpen(false)}>Over ons</a>
            <a href="contact" onClick={() => setOpen(false)}>Contact</a>
          </div>
        </div>
      </div>
    </header>);

}

/* ============================ FOOTER ============================ */
function Footer({ home = false }) {
  const openContact = useContact();
  return (
    <footer className="lp-footer" id="over-ons">
      <div className="lp-container">
        <div className="lp-footer__top">
          <div className="lp-footer__brand">
            <img src="assets/leadpixel-wordmark-dark.png" alt="LeadPixel" loading="lazy" />
            <p>Het online marketingbureau dat marketing afrekent op één ding: meer klanten en meer omzet voor jou.</p>
          </div>
          <div className="lp-footer__col">
            <h4>Diensten</h4>
            <ul>
              <li><a href="google-ads">Google Ads</a></li>
              <li><a href="website">Website</a></li>
              <li><a href="social-media-ads">Social Media Ads</a></li>
              <li><a href="seo">SEO</a></li>
              <li><a href="automatiseringen">Automatiseringen</a></li>
            </ul>
          </div>
          <div className="lp-footer__col">
            <h4>Bedrijf</h4>
            <ul>
              <li><a href="over-ons">Over ons</a></li>
              <li><a href="contact">Contact</a></li>
            </ul>
          </div>
          <div className="lp-footer__col">
            <h4>Contact</h4>
            <ul>
              <li><a href="contact">Contactpagina</a></li>
              <li><a href="#contact" onClick={(e) => {e.preventDefault();openContact();}}>Plan een intake</a></li>
              <li><a href="mailto:info@leadpixel.nl">info@leadpixel.nl</a></li>
            </ul>
          </div>
        </div>
        <div className="lp-footer__bottom">
          <span>© {new Date().getFullYear()} LeadPixel — Alle rechten voorbehouden</span>
        </div>
      </div>
    </footer>);

}

/* ============================ CONTACT MODAL ============================ */
function ContactModal({ open, onClose }) {
  const [mounted, setMounted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);
  const [form, setForm] = React.useState({ naam: '', email: '', tel: '', website: '', marketing: '' });
  const firstRef = React.useRef(null);

  React.useEffect(() => {
    if (open) {
      setMounted(true);
      const r = requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
      return () => cancelAnimationFrame(r);
    }
    if (mounted) {
      setVisible(false);
      const t = setTimeout(() => {setMounted(false);setSent(false);setSending(false);setSendError(false);setForm({ naam: '', email: '', tel: '', website: '', marketing: '' });}, 300);
      return () => clearTimeout(t);
    }
  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps

  React.useEffect(() => {
    if (!mounted) return;
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    document.addEventListener('keydown', onKey);
    document.body.classList.add('lp-modal-open');
    const t = setTimeout(() => {if (firstRef.current) firstRef.current.focus();}, 90);
    return () => {document.removeEventListener('keydown', onKey);document.body.classList.remove('lp-modal-open');clearTimeout(t);};
  }, [mounted, onClose]);

  if (!mounted) return null;

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const valid = form.naam.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
  const submit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setSending(true);
    setSendError(false);
    try {
      await fetch(LP_SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        body: new URLSearchParams({ ...form, bron: 'intake-modal' }),
      });
      const firstName = form.naam.trim().split(' ')[0];
      window.location.href = 'bedankt?naam=' + encodeURIComponent(firstName);
    } catch (_) {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <div className={'lp-modal' + (visible ? ' is-open' : '')} role="dialog" aria-modal="true" aria-label="Kom met ons in contact">
      <div className="lp-modal__scrim" onClick={onClose}></div>
      <div className="lp-modal__dialog lp-glass lp-glass--strong">
        <div className="lp-modal__glow" aria-hidden="true"></div>
        <button className="lp-modal__close" aria-label="Sluiten" onClick={onClose}><IconClose /></button>
        {!sent ?
        <React.Fragment>
          <div className="lp-modal__head">
            <div className="lp-eyebrow-row"><span className="lp-dot"></span><span className="lp-eyebrow">Contact</span></div>
            <h2>Kom met ons <span className="lp-em">in contact.</span></h2>
            <p className="lp-modal__sub">Vul het formulier in en wij gaan je helpen.</p>
          </div>
          <form className="lp-modal__form" onSubmit={submit}>
            <div className="lp-modal__row">
              <div className="lp-fld">
                <label htmlFor="cm-naam">Naam</label>
                <input id="cm-naam" ref={firstRef} type="text" placeholder="Voor- en achternaam" value={form.naam} onChange={set('naam')} required />
              </div>
              <div className="lp-fld">
                <label htmlFor="cm-email">E-mailadres</label>
                <input id="cm-email" type="email" inputMode="email" placeholder="jouw@email.nl" value={form.email} onChange={set('email')} required />
              </div>
            </div>
            <div className="lp-modal__row">
              <div className="lp-fld">
                <label htmlFor="cm-tel">Telefoonnummer</label>
                <input id="cm-tel" type="tel" inputMode="tel" placeholder="06 12 34 56 78" value={form.tel} onChange={set('tel')} />
              </div>
              <div className="lp-fld">
                <label htmlFor="cm-web">Website</label>
                <input id="cm-web" type="text" placeholder="jouwbedrijf.nl" value={form.website} onChange={set('website')} />
              </div>
            </div>
            <div className="lp-fld">
              <label htmlFor="cm-mkt">Wat doe je op dit moment aan jouw marketing?</label>
              <textarea id="cm-mkt" placeholder="Vertel kort wat je nu doet — of juist nog niet." value={form.marketing} onChange={set('marketing')}></textarea>
            </div>
            <Button variant="primary" size="lg" type="submit" block dot className="lp-modal__submit" disabled={sending}>
              {sending ? 'Bezig met verzenden…' : 'Neem contact met ons op!'}
            </Button>
            {sendError && (
              <div style={{ color: 'var(--champagne-400, #c0975f)', fontSize: 13, marginTop: 10, textAlign: 'center' }}>
                Verzenden mislukt. Probeer het opnieuw of mail naar{' '}
                <a href="mailto:info@leadpixel.nl" style={{ color: 'inherit', textDecoration: 'underline' }}>info@leadpixel.nl</a>.
              </div>
            )}
            <div className="lp-modal__fine"><IconCheck style={{ width: 14, height: 14 }} />We reageren meestal binnen één werkdag.</div>
          </form>
        </React.Fragment> :

        <div className="lp-modal__done">
          <div className="lp-modal__badge"><IconCheck /></div>
          <h2>Bedankt, {form.naam.trim().split(' ')[0] || 'we spreken je snel'}!</h2>
          <p className="lp-modal__sub">Je bericht is binnen. We nemen snel contact met je op — meestal binnen één werkdag.</p>
          <Button variant="glass" size="lg" onClick={onClose} className="lp-modal__submit">Sluiten</Button>
        </div>
        }
      </div>
    </div>);

}

/* ============================ SITE CHROME ============================ */
/* Wraps any page: provides the contact opener and renders header/footer/modal. */
function SiteChrome({ home = false, children }) {
  useReveal();
  const [contactOpen, setContactOpen] = React.useState(false);
  const open = React.useCallback(() => setContactOpen(true), []);
  const close = React.useCallback(() => setContactOpen(false), []);
  return (
    <ContactContext.Provider value={open}>
      <Header home={home} />
      <main>{children}</main>
      <Footer home={home} />
      <ContactModal open={contactOpen} onClose={close} />
    </ContactContext.Provider>);

}

Object.assign(window, {
  LP_SCRIPT_URL, LP_HREF, ContactContext, useContact, useReveal,
  Header, Footer, ContactModal, SiteChrome });