// Agency Audit — landing met intake: website + e-mail (verplicht), bedrijfsnaam en branche optioneel.
function AuditIntake({ onStart, serverError, busy }) {
  const { useState } = React;
  const [website, setWebsite] = useState('');
  const [email, setEmail] = useState('');
  const [companyName, setCompanyName] = useState('');
  const [more, setMore] = useState(false);
  const [industry, setIndustry] = useState('');
  const [agencyName, setAgencyName] = useState('');
  const [error, setError] = useState('');

  function submit(e) {
    e.preventDefault();
    const w = website.trim();
    if (!w || !w.includes('.')) { setError('Vul een geldige website in, bijv. jouwbedrijf.nl'); return; }
    if (!/^\S+@\S+\.\S+$/.test(email.trim())) { setError('Vul een geldig e-mailadres in'); return; }
    setError('');
    onStart({ website: w.replace(/^https?:\/\//, '').replace(/\/$/, ''), email: email.trim(), companyName: companyName.trim(), industry: industry.trim(), agencyName: agencyName.trim() });
  }

  const checks = [
    'Draaien er nog nieuwe advertenties in Google en op Meta?',
    'Groeit je zichtbaarheid mee met vergelijkbare bedrijven?',
    'Wordt er gemeten wat de campagnes opleveren?',
    'Pakt een concurrent klanten die naar jóu zoeken?',
  ];

  return (
    <div data-screen-label="Audit intake" style={{ minHeight: '100vh', background: 'var(--bm-dark)' }}>
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px clamp(20px, 6vw, 72px)' }}>
        <BmLogo light />
        <span style={{ color: '#B7D2CF', fontSize: 14 }}>Onafhankelijke audit door Brandmerck</span>
      </header>
      <section className="gs-hero" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(320px, 0.85fr)', gap: 'clamp(28px, 5vw, 72px)', alignItems: 'center', padding: '30px clamp(20px, 6vw, 72px) 80px', maxWidth: 1240, margin: '0 auto' }}>
        <div>
          <SectionTag>Gratis agency audit</SectionTag>
          <h1 style={{ fontFamily: "'Lato', sans-serif", fontWeight: 900, fontSize: 'clamp(30px, 4vw, 46px)', lineHeight: 1.12, color: '#fff', margin: '18px 0 18px', textWrap: 'balance' }}>
            Doet je marketingbureau wat het belooft?
          </h1>
          <p style={{ color: '#C6DBD9', fontSize: 17, lineHeight: 1.65, maxWidth: 520, margin: '0 0 26px' }}>
            Je betaalt elke maand. Maar gebeurt er ook wat? Wij meten het van buitenaf, met publieke data
            die je bureau niet kan mooier maken. In een paar minuten weet je waar je staat.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, color: '#E4F0EF', fontSize: 15 }}>
            {checks.map((c) => <li key={c}><Check />{c}</li>)}
          </ul>
          <p style={{ color: '#fff', fontSize: 15.5, fontWeight: 800, margin: '22px 0 0' }}>Feitelijk, onafhankelijk en gratis. Je bureau merkt er niets van.</p>
          <ReviewBadge style={{ marginTop: 22 }} />
        </div>

        <NotchCard style={{ padding: '34px 32px 30px' }}>
          <h2 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 900 }}>Start de audit</h2>
          <p style={{ margin: '0 0 20px', color: '#5A7472', fontSize: 14 }}>Gratis · duurt 2 tot 4 minuten · geen accounttoegang nodig</p>
          <form onSubmit={submit} style={{ display: 'grid', gap: 14 }}>
            <label style={{ display: 'grid', gap: 6, fontSize: 13, fontWeight: 700, color: '#2E4A48' }}>
              Jouw website
              <input value={website} onChange={(e) => setWebsite(e.target.value)} placeholder="jouwbedrijf.nl" className="gs-input" />
            </label>
            <label style={{ display: 'grid', gap: 6, fontSize: 13, fontWeight: 700, color: '#2E4A48' }}>
              E-mailadres
              <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="naam@jouwbedrijf.nl" type="email" className="gs-input" />
            </label>
            <label style={{ display: 'grid', gap: 6, fontSize: 13, fontWeight: 700, color: '#2E4A48' }}>
              Bedrijfsnaam <span style={{ fontWeight: 400, color: '#8AA3A1' }}>(optioneel, zoals klanten je googelen)</span>
              <input value={companyName} onChange={(e) => setCompanyName(e.target.value)} placeholder="Bijv. Stinstra Kozijnen" className="gs-input" />
            </label>
            {more ? (
              <React.Fragment>
                <label style={{ display: 'grid', gap: 6, fontSize: 13, fontWeight: 700, color: '#2E4A48' }}>
                  Branche <span style={{ fontWeight: 400, color: '#8AA3A1' }}>(optioneel)</span>
                  <input value={industry} onChange={(e) => setIndustry(e.target.value)} placeholder="Bijv. kozijnen, installatie, accountancy" className="gs-input" />
                </label>
                <label style={{ display: 'grid', gap: 6, fontSize: 13, fontWeight: 700, color: '#2E4A48' }}>
                  Naam van je bureau <span style={{ fontWeight: 400, color: '#8AA3A1' }}>(optioneel, komt nooit in het rapport)</span>
                  <input value={agencyName} onChange={(e) => setAgencyName(e.target.value)} placeholder="Alleen voor onze eigen administratie" className="gs-input" />
                </label>
              </React.Fragment>
            ) : (
              <button type="button" onClick={() => setMore(true)} style={{ background: 'none', border: 'none', padding: 0, textAlign: 'left', color: 'var(--bm-teal-ink)', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: "'Lato', sans-serif" }}>+ Branche of bureau toevoegen</button>
            )}
            {(error || serverError) && <div style={{ color: '#C4441C', fontSize: 13, fontWeight: 700 }}>{error || serverError}</div>}
            <CtaButton type="submit" big style={{ width: '100%', marginTop: 4, opacity: busy ? 0.6 : 1 }}>
              {busy ? 'Even geduld…' : 'Start de gratis audit'}
            </CtaButton>
          </form>
          <p style={{ margin: '16px 0 0', fontSize: 12, color: '#7B918F', lineHeight: 1.5 }}>
            Je rapport staat binnen een paar minuten klaar en komt ook per mail. We gebruiken je e-mailadres nergens anders voor. Geen spam, geen verplichtingen.
          </p>
        </NotchCard>
      </section>

      <section style={{ background: 'var(--bm-mist)', padding: '64px clamp(20px, 6vw, 72px) 80px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <SectionTag>Zo werkt het</SectionTag>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, marginTop: 24 }}>
            {[
              ['1', 'Vul je website in', 'Meer hebben we niet nodig. Tijdens het wachten stellen we drie korte vragen over wat je afneemt.'],
              ['2', 'Wij meten van buitenaf', 'Twaalf publieke bronnen: Google Ads Transparency, de Meta Ad Library, Semrush, je website, het Wayback-archief en meer.'],
              ['3', 'Jij krijgt een eerlijk beeld', 'Vijf scores, een conclusie en vijf vragen die je aan je bureau kunt stellen. Zonder dat we het bureau ooit bij naam noemen. Wil je meer zekerheid, dan kun je daarna een onafhankelijke second opinion aanvragen.'],
            ].map(([n, t, b]) => (
              <NotchCard key={n} style={{ padding: '26px 24px' }} notch={14}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--bm-teal)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 900, marginBottom: 12 }}>{n}</div>
                <h3 style={{ margin: '0 0 6px', fontSize: 17, fontWeight: 900 }}>{t}</h3>
                <p style={{ margin: 0, color: '#5A7472', fontSize: 14.5, lineHeight: 1.6 }}>{b}</p>
              </NotchCard>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AuditIntake });