function Footer({ setView }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return;
    setDone(true);
  }

  return (
    <footer className="bg-yel-ink text-yel-50 mt-0">
      {/* Newsletter */}
      <section className="py-20 md:py-28 border-b border-white/10">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 grid md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-7">
            <div className="eyebrow text-yel-50/60 mb-6">— Brief van Greet</div>
            <h2 className="display-md text-yel-50">Eén keer per maand, geen meer.</h2>
            <p className="mt-6 text-[16px] text-yel-50/70 max-w-[55ch] leading-relaxed">
              Een korte brief: één observatie uit de praktijk, één leestip, geen aanbiedingen. Uitschrijven met één klik.
            </p>
          </div>
          <div className="md:col-span-5">
            {!done ? (
              <form onSubmit={submit} className="flex items-end gap-3 border-b border-white/30 pb-3">
                <input
                  type="email"
                  required
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="je@adres.be"
                  className="flex-1 bg-transparent font-display text-2xl text-yel-50 placeholder:text-yel-50/30 focus:outline-none"
                />
                <button type="submit" className="text-sm text-yel-primary ulink">Inschrijven →</button>
              </form>
            ) : (
              <div className="font-display text-2xl text-yel-primary">Genoteerd. Tot volgende maand.</div>
            )}
          </div>
        </div>
      </section>

      {/* Links */}
      <section className="py-16">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 grid md:grid-cols-12 gap-10">
          <div className="md:col-span-4">
            <button onClick={() => setView('home')} className="flex items-center gap-3" aria-label="Yelloow home">
              <div className="flex items-end gap-1" aria-hidden="true">
                {window.COLORS.map((c, i) => (
                  <span key={c.key} style={{ width: 5, height: 10 + (i % 3) * 5, background: c.hex, borderRadius: 1 }}></span>
                ))}
              </div>
              <span className="font-display text-2xl">yelloow<span className="text-yel-primary">.</span></span>
            </button>
            <p className="mt-6 text-sm text-yel-50/60 max-w-[40ch] leading-relaxed">
              Yelloow BV · Antwerpen, België.<br/>BTW BE 0xxx.xxx.xxx · Opgericht 2014.
            </p>
          </div>

          <div className="md:col-span-2">
            <div className="eyebrow text-yel-50/60 mb-4">Particulier</div>
            <ul className="space-y-2 text-sm">
              <li><button onClick={() => setView('test')} className="hover:text-yel-primary">Mini-test</button></li>
              <li><button onClick={() => setView('private')} className="hover:text-yel-primary">Pakketten</button></li>
              <li><button onClick={() => setView('private')} className="hover:text-yel-primary">FAQ</button></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <div className="eyebrow text-yel-50/60 mb-4">Bedrijven</div>
            <ul className="space-y-2 text-sm">
              <li><button onClick={() => setView('corporate')} className="hover:text-yel-primary">Trajecten</button></li>
              <li><button onClick={() => setView('corporate')} className="hover:text-yel-primary">Cases</button></li>
              <li><button onClick={() => setView('corporate')} className="hover:text-yel-primary">Plan een gesprek</button></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <div className="eyebrow text-yel-50/60 mb-4">Over</div>
            <ul className="space-y-2 text-sm">
              <li><button onClick={() => setView('methodiek')} className="hover:text-yel-primary">Methodiek</button></li>
              <li><button onClick={() => setView('methodiek')} className="hover:text-yel-primary">Privacy</button></li>
              <li><a href="mailto:greet@yelloow.be" className="hover:text-yel-primary">Contact</a></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <div className="eyebrow text-yel-50/60 mb-4">Volg</div>
            <ul className="space-y-2 text-sm">
              <li><a href="#" className="hover:text-yel-primary">LinkedIn</a></li>
              <li><a href="#" className="hover:text-yel-primary">Substack</a></li>
            </ul>
          </div>
        </div>

        {/* Bottom strip */}
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 mt-16 pt-6 border-t border-white/10 flex flex-wrap items-center justify-between gap-4">
          <div className="text-xs text-yel-50/40 font-mono-x uppercase tracking-widest">© 2014–2026 · Yelloow · Made in Antwerp</div>
          <div className="flex">
            {window.COLORS.map(c => (
              <span key={c.key} style={{ width: 28, height: 4, background: c.hex }}></span>
            ))}
          </div>
        </div>
      </section>
    </footer>
  );
}

window.Footer = Footer;