// Footer — every link wired to a real onNav target. Static pages live in
// StaticPages.jsx; App.jsx renders the right one based on the view name.
function Footer({ onNav }) {
  const [newsEmail, setNewsEmail] = useState("");
  const [newsDone, setNewsDone] = useState(false);
  const subscribe = (e) => {
    e.preventDefault();
    if (!newsEmail.trim()) return;
    // No real provider wired yet — mock the success state so the UI feels
    // finished. Replace with Mailchimp / Brevo / Klaviyo call later.
    setNewsDone(true);
    setNewsEmail("");
  };

  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr__top">
          <div className="ftr__brand">
            <Logo className="ftr__logo-mark" />
            <p>{t("footer.claim")}</p>
            {newsDone ? (
              <p style={{ marginTop: 14, color: "var(--clay-300)", fontSize: 14 }}>{t("footer.news.done")}</p>
            ) : (
              <form className="ftr__news" onSubmit={subscribe}>
                <input placeholder={t("footer.news.ph")} type="email" value={newsEmail} onChange={(e) => setNewsEmail(e.target.value)} aria-label="E-Mail für Newsletter" required />
                <Button variant="primary" size="sm" type="submit">{t("footer.news.cta")}</Button>
              </form>
            )}
          </div>
          <div>
            <h4>{t("footer.shop")}</h4>
            <ul>
              <li><a onClick={() => onNav("collection")}>{t("mega.all")}</a></li>
              {TAXONOMY.anlass.map((a) => (
                <li key={a.key}><a onClick={() => onNav("collection", { anlass: a.key })}>{taxLabel("anlass", a.key)}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{t("footer.garden")}</h4>
            <ul>
              <li><a onClick={() => onNav("about")}>{t("nav.about")}</a></li>
              <li><a onClick={() => onNav("produzenten")}>{t("nav.producers")}</a></li>
              <li><a onClick={() => onNav("stories")}>{t("nav.stories")}</a></li>
              <li><a onClick={() => onNav("recipes")}>{t("footer.recipes")}</a></li>
              <li><a onClick={() => onNav("nachhaltigkeit")}>{t("footer.sustain")}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t("footer.service")}</h4>
            <ul>
              <li><a onClick={() => onNav("versand")}>{t("footer.shipping")}</a></li>
              <li><a onClick={() => onNav("faq")}>{t("footer.faq")}</a></li>
              <li><a onClick={() => onNav("kontakt")}>{t("footer.contact")}</a></li>
              <li><a onClick={() => onNav("geschaeftskunden")}>{t("footer.b2b")}</a></li>
              <li><a onClick={() => onNav("haendler")}>{t("footer.haendler")}</a></li>
            </ul>
          </div>
        </div>
        <div className="ftr__bottom">
          <span>© 2026 The Apéro Garden · aperogarden.ch</span>
          <div className="links">
            <a onClick={() => onNav("impressum")}>Impressum</a>
            <a onClick={() => onNav("datenschutz")}>Datenschutz</a>
            <a onClick={() => onNav("agb")}>AGB</a>
            <a onClick={() => onNav("cookies")}>Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });