// Landingspagina: hero met formulier, vertrouwen, hoe-het-werkt

// Klantlogo's uit de marquee op brandmerck.nl (images/klanten/)
const KLANT_LOGOS = [
  { file: 'Pata-Negra-1.png', name: 'Pata Negra' },
  { file: 'GetTested.png', name: 'GetTested' },
  { file: 'Poiesz.png', name: 'Poiesz Supermarkten' },
  { file: 'Slijpstra-Verhuur-Brandmerck-3.png', name: 'Sijperda Verhuur' },
  { file: 'Frisia-Financieringen.png', name: 'Frisia Financieringen' },
  { file: 'Haaima-service-en-autos-Brandmerck-1.png', name: "Haaima Service en Auto's" },
  { file: 'Museum-Zuidwest-Friesland-Brandmerck-1.png', name: 'Museum Zuidwest Friesland' },
];

function Landing({ onStart, t, serverError, busy }) {
  const { useState } = React;
  const [website, setWebsite] = useState('');
  const [email, setEmail] = 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() });
  }

  const steps = [
    { n: '1', title: 'Vul je gegevens in', body: 'Alleen je website en e-mailadres. Meer hebben we niet nodig om te starten.' },
    { n: '2', title: 'Wij scannen je online aanwezigheid', body: 'We analyseren zoekvolumes, je huidige posities en wat vergelijkbare bedrijven investeren.' },
    { n: '3', title: 'Jij krijgt een concreet groeiplan', body: 'Met de kanalen die bij jouw bedrijf passen, de benchmark en het potentieel, direct op je scherm.' },
  ];

  return (
    <div data-screen-label="Landing" style={{ minHeight: '100vh', background: 'var(--bm-dark)' }}>
      {/* Top bar */}
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px clamp(20px, 6vw, 72px)' }}>
        <BmLogo light />
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, color: '#B7D2CF', fontSize: 14 }}>
          <span style={{ display: window.innerWidth < 640 ? 'none' : 'inline' }}>Onderdeel van het gratis groeiplan van Brandmerck</span>
        </div>
      </header>

      {/* Hero */}
      <section 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'
      }} className="gs-hero">
        <div>
          <SectionTag>Gratis groeiscan</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'
          }}>
            Wat zou jouw bedrijf moeten investeren in online marketing?
          </h1>
          <p style={{ color: '#C6DBD9', fontSize: 17, lineHeight: 1.65, maxWidth: 520, margin: '0 0 26px' }}>
            Vul je website in en zie binnen twee minuten wat vergelijkbare bedrijven maandelijks
            uitgeven, waar jij nu staat en welke kanalen voor jou het meeste opleveren.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, color: '#E4F0EF', fontSize: 15 }}>
            <li><Check />Benchmark: wat geven bedrijven zoals jij uit?</li>
            <li><Check />Echte data over zoekvolumes en je huidige posities</li>
            <li><Check />Kanaaladvies opgesteld door 40+ marketingdeskundigen</li>
          </ul>
          <ReviewBadge style={{ marginTop: 26 }} />
        </div>

        {/* Formulier */}
        <NotchCard style={{ padding: '34px 32px 30px' }}>
          <h2 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 900, letterSpacing: '0.3px' }}>
            Start je scan
          </h2>
          <p style={{ margin: '0 0 20px', color: '#5A7472', fontSize: 14 }}>Gratis en vrijblijvend · klaar in ± 2 minuten</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>
            {(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 scan'}
            </CtaButton>
          </form>
          <p style={{ margin: '16px 0 0', fontSize: 12, color: '#7B918F', lineHeight: 1.5 }}>
            We gebruiken je e-mailadres alleen om je groeiplan toe te sturen. Geen spam, geen verplichtingen.
          </p>
        </NotchCard>
      </section>

      {/* Klantlogo's — scrollende marquee, zoals op brandmerck.nl */}
      <section style={{ background: 'var(--bm-darker)', padding: '30px 0 34px', overflow: 'hidden' }}>
        <style>{`
          @keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
          .gs-marquee-track { display: flex; width: max-content; animation: gs-marquee 26s linear infinite; }
          .gs-marquee-track:hover { animation-play-state: paused; }
        `}</style>
        <div className="gs-marquee-track">
          {/* De PNG's zijn zelf al complete witte kaartjes (incl. hoeken/schaduw) — direct renderen */}
          {[...KLANT_LOGOS, ...KLANT_LOGOS].map((k, i) => (
            <img key={i} src={`images/klanten/${k.file}`} alt={k.name}
              style={{ height: 92, width: 'auto', display: 'block', marginRight: 28, flex: '0 0 auto' }} />
          ))}
        </div>
      </section>

      {/* Hoe het werkt */}
      <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>
          <h2 style={{ fontWeight: 900, fontSize: 'clamp(24px, 3vw, 32px)', color: '#12302E', margin: '16px 0 32px' }}>
            Van website naar groeiplan in drie stappen
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
            {steps.map(s => (
              <NotchCard key={s.n} style={{ padding: '28px 26px' }} notch={16}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%', background: 'var(--bm-teal)', color: '#fff',
                  display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: 18, marginBottom: 16
                }}>{s.n}</div>
                <h3 style={{ margin: '0 0 8px', fontSize: 17, fontWeight: 900 }}>{s.title}</h3>
                <p style={{ margin: 0, color: '#5A7472', fontSize: 14.5, lineHeight: 1.6 }}>{s.body}</p>
              </NotchCard>
            ))}
          </div>

          {/* Teamfoto — echte mensen achter de scan */}
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(280px, 1fr)', gap: 'clamp(24px, 4vw, 48px)', alignItems: 'center' }} className="gs-two-col">
            <NotchCard style={{ padding: 0, overflow: 'hidden' }} notch={22}>
              <img src="images/teamfoto.jpg" alt="Het team van Brandmerck"
                style={{ display: 'block', width: '100%', height: 'auto' }} />
            </NotchCard>
            <div>
              <SectionTag>Het team</SectionTag>
              <h3 style={{ fontWeight: 900, fontSize: 'clamp(20px, 2.4vw, 26px)', color: '#12302E', margin: '14px 0 10px' }}>
                40+ deskundigen kijken met je mee
              </h3>
              <p style={{ margin: 0, color: '#5A7472', fontSize: 15, lineHeight: 1.65 }}>
                Achter deze scan zit geen anonieme tool, maar het voltallige team van Brandmerck:
                strategen, SEO- en advertentiespecialisten die elke dag voor MKB-bedrijven werken.
                Nuchter, eerlijk en met korte lijntjes.
              </p>
            </div>
          </div>
          <p style={{ marginTop: 36, color: '#5A7472', fontSize: 14, textAlign: 'center' }}>
            Liever direct sparren met een strateeg? Dat kan ook: samenwerken met Brandmerck kan al vanaf €1.000 per maand.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Landing });