// Agency Audit — landing met intake (ontwerp Kevin, sept 2026): vinkjes voor
// wat de bezoeker niet zeker weet, alleen de website verplicht, een
// voorbeeldrapport, eerlijke vragen en echte reviews. E-mail komt pas tijdens
// het wachten. Extra velden (branche, zoektermen, bureau) blijven optioneel.
const LANDING_DEFAULT = {
  badge: 'Gratis agency audit',
  headline: 'Je betaalt elke maand. Weet je wat je ervoor krijgt?',
  lead: 'Vink aan wat je niet zeker weet. Wij meten het van buitenaf, met publieke data die je bureau niet kan bijkleuren, en je krijgt een rapport zoals hiernaast.',
  concerns: ['Draaien er nog nieuwe advertenties in Google en Meta?', 'Groeit mijn zichtbaarheid mee met vergelijkbare bedrijven?', 'Wordt gemeten wat de campagnes opleveren?', 'Pakt een concurrent klanten die naar mij zoeken?'],
  cta: 'Meet alles gratis',
  micro: 'Gratis · 2 tot 4 minuten · geen account, geen e-mail nodig · alleen publieke data',
  moreLink: '+ Meer info toevoegen voor een scherpere audit (bedrijfsnaam, branche, zoektermen, bureau)',
  showReport: true, showMascot: true, showFaq: true, showReviews: true, showConcerns: true,
  faq: [
    { q: 'Ziet mijn bureau dat ik dit doe?', a: 'Nee. We gebruiken alleen publieke bronnen: het Google Ads Transparantiecentrum, de Meta Ad Library, zoekresultaten en je eigen website. Niemand krijgt een melding en we noemen je bureau nooit bij naam.' },
    { q: 'En als het gewoon goed gaat?', a: 'Dan zie je dat ook, met de cijfers erbij. Een groen rapport is net zo waardevol als een rood: dan weet je dat je geld goed besteed wordt.' },
    { q: 'Waarom is dit gratis?', a: 'De audit is volledig automatisch. Wil je daarna meer zekerheid, dan kun je bij ons een second opinion op je accounts aanvragen. Dat is een keuze, geen voorwaarde.' },
  ],
};

// ── Bredere signalen (ook van wie niet invult) ────────────────────────────
// Per bezoeker één keer per signaal, gebatcht naar de server (beacon bij
// verlaten). Geen persoonsgegevens: alleen wat er op de pagina gebeurt.
const lpSignals = (() => {
  const sent = new Set(); let queue = []; let timer = null;
  const url = '/api/audit/landing/signal';
  function flush(beacon) {
    if (!queue.length) return;
    const body = JSON.stringify({ events: queue }); queue = []; clearTimeout(timer); timer = null;
    try {
      if (beacon && navigator.sendBeacon) { if (navigator.sendBeacon(url, new Blob([body], { type: 'application/json' }))) return; }
      fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body, keepalive: true }).catch(() => {});
    } catch { /* meting is bijzaak */ }
  }
  function push(event, ref = null, value = null) {
    if (window.LP_PREVIEW) return false; // voorvertoning vanuit beheer telt niet mee
    const key = event === 'exit' ? null : event;
    if (key && sent.has(key)) return false;
    if (key) sent.add(key);
    queue = queue.filter((q) => q.event !== event);
    queue.push({ event, ref, value });
    if (!timer) timer = setTimeout(() => flush(false), 1500);
    return true;
  }
  return { push, flush, has: (e) => sent.has(e) };
})();
Object.assign(window, { lpSignals });

// Leadinfo herkent het bezoekende bedrijf op IP (Liquid Content, na whitelisting van dit domein).
// Geeft { name, domain } terug of null; nooit een fout, hooguit stilte. Eén keer per pagina.
let leadinfoPromise = null;
function leadinfoCompany() {
  if (leadinfoPromise) return leadinfoPromise;
  leadinfoPromise = (async () => {
    try {
      // Testschakelaar: ?li=jouwbedrijf.nl bootst een herkenning na (zonder signaal)
      const sim = new URLSearchParams(location.search).get('li');
      if (sim && sim.includes('.')) return { name: 'Testweergave', domain: sim.toLowerCase().replace(/^www\./, ''), simulated: true };
      if (window.LP_PREVIEW) return null;
      const uitkomst = (u) => { window.LI_UITKOMST = u; try { window.lpSignals?.push('leadinfo_checked', u); } catch { /* bijzaak */ } };
      const started = new Date();
      const res = await fetch('https://api.leadinfo.com/v1/identify', { headers: { Accept: 'application/json' }, signal: AbortSignal.timeout(3000), credentials: 'omit' });
      const raw = await res.text();
      // diagnose voor ?li_debug=1 (tijdstip, status, zichtbare headers, antwoord)
      window.LI_DEBUG = { tijd: started.toISOString(), status: res.status, headers: ['content-type', 'cache-control', 'date', 'content-length'].map((h) => `${h}: ${res.headers.get(h) ?? '-'}`).join(' · '), body: raw.slice(0, 300), url: location.href, ua: navigator.userAgent };
      if (!res.ok) { uitkomst(`fout-${res.status}`); return null; }
      let d = null; try { d = JSON.parse(raw); } catch { d = null; }
      const domain = String(d?.domain || '').trim().toLowerCase().replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/.*$/, '');
      if (!d?.name || !domain.includes('.')) { uitkomst('leeg'); return null; }
      uitkomst('herkend');
      return { name: String(d.name).slice(0, 80), domain };
    } catch (e) { try { window.lpSignals?.push('leadinfo_checked', /abort|timeout/i.test(String(e?.name || e)) ? 'timeout' : 'fout'); } catch { /* bijzaak */ } return null; }
  })();
  return leadinfoPromise;
}
// Toont een aanklikbare suggestie onder het websiteveld als Leadinfo het bedrijf herkent.
// Het veld wordt pas gevuld als de bezoeker de suggestie aanklikt (Kevin, 22 okt 2026).
function useLeadinfoSuggest(setRecognized) {
  const { useEffect } = React;
  useEffect(() => {
    let alive = true;
    leadinfoCompany().then((c) => {
      if (!alive || !c) return;
      setRecognized(c);
      if (c.simulated) return;
      try { window.lpSignals?.push('leadinfo_prefill', c.domain); } catch { /* bijzaak */ }
      gsTrack('leadinfo_recognized', { product: 'audit', company: c.name }, 'landing');
    });
    return () => { alive = false; };
  }, []);
}
function leadinfoPick(c, setWebsite, fieldId) {
  setWebsite(c.domain);
  if (!c.simulated) { try { window.lpSignals?.push('leadinfo_click', c.domain); } catch { /* bijzaak */ } gsTrack('leadinfo_suggestion_clicked', { product: 'audit' }, 'landing'); }
  setTimeout(() => document.getElementById(fieldId)?.focus(), 50);
}
// Suggestiechip: "Is dit jouw website? brandmerck.nl"
function LeadinfoSuggestion({ company, website, onPick, className }) {
  // ?li_debug=1: toon wat Leadinfo antwoordde (voor het testen bij een klant)
  if (new URLSearchParams(location.search).get('li_debug')) {
    const { useState, useEffect } = React; const [u, setU] = useState(window.LI_UITKOMST || 'wachten');
    useEffect(() => { const t = setInterval(() => setU(window.LI_UITKOMST || 'wachten'), 500); return () => clearInterval(t); }, []);
    const dbg = window.LI_DEBUG;
    if (!company) return (
      <p className={className} style={{ margin: '0 0 10px', wordBreak: 'break-all' }}>
        Leadinfo-check: <b>{u}</b>
        {dbg && <><br />tijd: {dbg.tijd} (UTC)<br />request: GET https://api.leadinfo.com/v1/identify · Accept: application/json · credentials omit · Origin: {location.origin}<br />status: {dbg.status} · {dbg.headers}<br />antwoord: {dbg.body || '(leeg)'}<br />pagina: {dbg.url}<br />browser: {dbg.ua}</>}
      </p>
    );
  }
  if (!company || (website && website.trim().toLowerCase().replace(/^www\./, '') === company.domain)) return null;
  return (
    <p className={className} style={{ margin: '0 0 10px', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
      <span>Is dit jouw website?</span>
      <button type="button" onClick={onPick} style={{ font: 'inherit', fontWeight: 700, cursor: 'pointer', border: '1px solid currentColor', background: 'transparent', color: 'inherit', borderRadius: 999, padding: '4px 12px' }}>{company.domain} →</button>
    </p>
  );
}

function useLandingSignals(rootRef) {
  const { useEffect } = React;
  useEffect(() => {
    const push = lpSignals.push;
    push('device', window.matchMedia('(max-width: 720px)').matches ? 'mobile' : 'desktop');
    let maxScroll = 0; let seconds = 0; let lastActive = Date.now();
    const engaged = () => { if (push('engaged')) gsTrack('audit_engaged', { product: 'audit' }, 'landing'); };
    const onScroll = () => {
      const doc = document.documentElement; const max = doc.scrollHeight - window.innerHeight;
      const pct = max > 0 ? Math.round(((window.scrollY + window.innerHeight * 0.1) / max) * 100) : 100;
      maxScroll = Math.max(maxScroll, Math.min(100, pct)); lastActive = Date.now();
      if (maxScroll >= 50) { push('scroll_50'); engaged(); }
      if (maxScroll >= 90) push('scroll_90');
    };
    const onActive = () => { lastActive = Date.now(); };
    const tick = setInterval(() => {
      if (document.visibilityState !== 'visible' || Date.now() - lastActive > 30_000) return; // stilstaand tabblad telt niet
      seconds += 1;
      if (seconds >= 10) { push('time_10'); engaged(); }
      if (seconds >= 30) push('time_30');
      if (seconds >= 60) push('time_60');
    }, 1000);
    const exit = () => { lpSignals.push('exit', `scroll:${maxScroll}`, seconds); lpSignals.flush(true); };
    const onVis = () => { if (document.visibilityState === 'hidden') exit(); };
    window.addEventListener('scroll', onScroll, { passive: true });
    for (const ev of ['pointerdown', 'keydown', 'touchstart', 'mousemove']) window.addEventListener(ev, onActive, { passive: true });
    window.addEventListener('pagehide', exit); document.addEventListener('visibilitychange', onVis);
    // secties in beeld: voorbeeldrapport, FAQ, reviews
    let io = null;
    if ('IntersectionObserver' in window && rootRef.current) {
      io = new IntersectionObserver((entries) => entries.forEach((e) => { if (e.isIntersecting) { push(e.target.dataset.signal); lastActive = Date.now(); } }), { threshold: 0.4 });
      rootRef.current.querySelectorAll('[data-signal]').forEach((el) => io.observe(el));
    }
    onScroll();
    return () => { clearInterval(tick); window.removeEventListener('scroll', onScroll); for (const ev of ['pointerdown', 'keydown', 'touchstart', 'mousemove']) window.removeEventListener(ev, onActive); window.removeEventListener('pagehide', exit); document.removeEventListener('visibilitychange', onVis); io?.disconnect(); lpSignals.flush(false); };
  }, []);
}

function AuditIntake({ onStart, serverError, busy, landing }) {
  const { useState, useRef } = React;
  const rootRef = useRef(null);
  useLandingSignals(rootRef);
  const cfg = { ...LANDING_DEFAULT, ...(landing?.config || {}) };
  const [website, setWebsite] = useState('');
  const [concerns, setConcerns] = useState([]);
  const [more, setMore] = useState(false);
  const [companyName, setCompanyName] = useState('');
  const [industry, setIndustry] = useState('');
  const [agencyName, setAgencyName] = useState('');
  const [keywords, setKeywords] = useState('');
  const [error, setError] = useState('');
  const [recognized, setRecognized] = useState(null);
  const reviews = useReviewsData();
  useLeadinfoSuggest(setRecognized);

  const CONCERNS = ['advertenties', 'zichtbaarheid', 'meting', 'concurrentie'].map((k, i) => [k, cfg.concerns[i]]);
  // dataLayer-events (één keer per pagina) zodat GTM er een Meta-gebeurtenis van kan maken
  const interacted = () => gsTrack('audit_interacted', { product: 'audit' }, 'landing');
  const toggle = (k) => { lpSignals.push(`concern_${k}`); interacted(); setConcerns((c) => (c.includes(k) ? c.filter((x) => x !== k) : [...c, k])); };
  const showConcerns = cfg.showConcerns !== false;
  const cta = !showConcerns || concerns.length === 0 ? `${cfg.cta} →` : concerns.length === 1 ? 'Meet dit punt gratis →' : `Meet deze ${concerns.length} punten gratis →`;

  function submit(e) {
    e.preventDefault();
    const w = website.trim();
    lpSignals.push('cta_click', concerns.length ? concerns.join(',') : null);
    if (!w || !w.includes('.')) { lpSignals.push('form_error', w ? 'geen-punt' : 'leeg'); setError('Vul een geldige website in, bijv. jouwbedrijf.nl'); return; }
    setError(''); lpSignals.flush(false);
    const kws = keywords.split(/[,;\n]+/).map((k) => k.trim()).filter(Boolean).slice(0, 3);
    // zonder vinkjes boven de vouw worden de vier twijfels tijdens het wachten gevraagd
    onStart({ website: w.replace(/^https?:\/\//, '').replace(/\/$/, ''), email: '', concerns: showConcerns ? concerns : [], companyName: companyName.trim(), industry: industry.trim(), agencyName: agencyName.trim(), keywords: kws }, showConcerns ? null : CONCERNS);
  }

  // Drie echte reviews (Google en The Feedback Company) met een leesbare lengte
  const picked = (reviews?.reviews || []).filter((r) => r.text && r.text.length >= 80 && r.text.length <= 260 && r.rating5 >= 4.5).slice(0, 3);
  const combined = reviews?.combined;

  return (
    <div data-screen-label="Audit intake" className="al" ref={rootRef}>
      <header className="al-hero">
        <div className="al-wrap">
          <nav className="al-nav"><BmLogo light /><span>Buitenkant-audit door Brandmerck</span></nav>
          <div className="al-hero-grid">
            <div>
              <span className="al-badge">{cfg.badge}</span>
              <h1>{cfg.headline}</h1>
              <p className="al-lead">{cfg.lead}</p>
              <form className={`al-fold${showConcerns ? ' al-check' : ''}`} id="audit-form" onSubmit={submit}>
                {showConcerns && <div className="al-check-list">
                  {CONCERNS.map(([k, label]) => (
                    <label key={k} className={`al-check-item${concerns.includes(k) ? ' is-on' : ''}`}>
                      <input type="checkbox" checked={concerns.includes(k)} onChange={() => toggle(k)} />
                      <span>{label}</span>
                    </label>
                  ))}
                </div>}
                <LeadinfoSuggestion company={recognized} website={website} className="al-micro" onPick={() => { leadinfoPick(recognized, setWebsite, 'al-url'); interacted(); }} />
                <div className="al-form">
                  <input type="text" id="al-url" value={website} onFocus={() => { lpSignals.push('field_focus'); interacted(); }} onChange={(e) => { if (e.target.value.trim()) lpSignals.push('field_typed'); setWebsite(e.target.value); }} placeholder="jouwbedrijf.nl" autoComplete="url" inputMode="url" aria-label="Jouw website" />
                  <button className="al-btn" type="submit" style={{ opacity: busy ? 0.6 : 1 }}>{busy ? 'Even geduld…' : cta}</button>
                </div>
                {(error || serverError) && <p className="al-error">{error || serverError}</p>}

                {more ? (
                  <div className="al-more">
                    <label>Bedrijfsnaam <small>(zoals klanten je googelen)</small><input value={companyName} onChange={(e) => setCompanyName(e.target.value)} placeholder="Bijv. Stinstra Kozijnen" /></label>
                    <label>Branche<input value={industry} onChange={(e) => setIndustry(e.target.value)} placeholder="Bijv. kozijnen, installatie, accountancy" /></label>
                    <label>Zoektermen waarop je gevonden wilt worden <small>(maximaal 3, gescheiden door komma's)</small><input value={keywords} onChange={(e) => setKeywords(e.target.value)} placeholder="Bijv. boxspring kopen, bedden outlet" /></label>
                    <label>Naam van je bureau <small>(komt nooit in het rapport)</small><input value={agencyName} onChange={(e) => setAgencyName(e.target.value)} placeholder="Alleen voor onze administratie" /></label>
                  </div>
                ) : (
                  <button type="button" className="al-more-link" onClick={() => { lpSignals.push('more_opened'); interacted(); setMore(true); }}>{cfg.moreLink}</button>
                )}
                <p className="al-micro">{cfg.micro}</p>
              </form>
            </div>
            <div>
              {cfg.showReport && <aside className="al-report" aria-label="Voorbeeldrapport" data-signal="seen_report">
                <span className="al-report-tag">Voorbeeldrapport</span>
                <div className="al-report-head"><strong>voorbeeldbedrijf.nl</strong><span>12 bronnen · 3 min</span></div>
                <ul className="al-scores">
                  <li><i className="al-dot al-g"></i><span>Nieuwe advertenties (Google &amp; Meta)</span><strong className="al-tg">Actief</strong></li>
                  <li><i className="al-dot al-a"></i><span>Zichtbaarheid vs. vergelijkbare bedrijven</span><strong className="al-ta">Blijft achter</strong></li>
                  <li><i className="al-dot al-r"></i><span>Meting van campagnes</span><strong className="al-tr">Ontbreekt</strong></li>
                  <li><i className="al-dot al-a"></i><span>Concurrenten op jouw zoektermen</span><strong className="al-ta">2 pakken klanten</strong></li>
                  <li><i className="al-dot al-g"></i><span>Landingspagina's van je advertenties</span><strong className="al-tg">In orde</strong></li>
                </ul>
                <div className="al-conclusion"><strong>Conclusie in gewone taal:</strong> er draaien advertenties, maar niemand meet wat ze opleveren. Twee concurrenten staan boven je op je eigen merknaam.</div>
              </aside>}
              {cfg.showMascot && <img className="al-mascot" src="/images/hoekie-audit.jpg" alt="Hoekie, de speurhond van Brandmerck" width="1100" height="1473" />}
            </div>
          </div>
        </div>
      </header>

      <section className="al-proof">
        <div className="al-wrap al-proof-grid">
          <div>
            <span className="al-badge">Eerlijke vragen</span>
            {cfg.showFaq && <div className="al-faq" data-signal="seen_faq">
              {cfg.faq.map((f, i) => <div key={i}><strong>{f.q}</strong><p>{f.a}</p></div>)}
            </div>}
          </div>
          {cfg.showReviews && <div className="al-quote" data-signal="seen_reviews">
            <span className="al-badge al-badge--light">Wat klanten over ons zeggen</span>
            {picked.length ? picked.map((r, i) => (
              <blockquote key={i} className="al-review">
                <div className="al-stars" aria-label={`${nlRating(r.rating5)} van 5`}>{'★★★★★'.slice(0, Math.round(r.rating5))}<span>{'★★★★★'.slice(Math.round(r.rating5))}</span></div>
                <p>{r.text}</p>
                <div className="al-who"><strong>{r.name}</strong><span>{r.source === 'google' ? 'via Google' : 'via The Feedback Company'}</span></div>
              </blockquote>
            )) : <p className="al-review-fallback">Reviews worden geladen…</p>}
            <div className="al-stats">
              {combined && <div><b>{nlRating(combined.rating5)}</b><small>gemiddeld uit {combined.total} reviews</small></div>}
              <div><b>12</b><small>publieke bronnen</small></div>
              <div><b>0</b><small>verplichtingen</small></div>
            </div>
          </div>}
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { AuditIntake, LANDING_DEFAULT, useLandingSignals, useLeadinfoSuggest, leadinfoPick, LeadinfoSuggestion, leadinfoCompany });