/* global React, Logo, Icon */
const { useState: useStateChrome, useEffect: useEffectChrome } = React;

const NAV = [
  { id: "home", label: "Home", labelEs: "Inicio" },
  { id: "about", label: "About", labelEs: "Nosotros" },
  { id: "reps", label: "Our Leaders", labelEs: "Nuestros Líderes" },
  { id: "action", label: "Take Action", labelEs: "Participa" },
  { id: "contact", label: "Contact", labelEs: "Contacto" },
];

function Header({ route, setRoute, lang, setLang }) {
  const [scrolled, setScrolled] = useStateChrome(false);
  const [open, setOpen] = useStateChrome(false);

  useEffectChrome(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body when mobile menu open
  useEffectChrome(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const go = (id) => {
    setRoute(id);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  return (
    <>
      <a href="#main" className="skip-link">Skip to main content</a>
      <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
        <div className="header-strip" aria-hidden="true"></div>
        <div className="container header-inner">
          <button className="logo-btn" onClick={() => go("home")} aria-label="DCSMV — Home">
            <Logo />
          </button>

          <nav className="primary-nav" aria-label="Primary">
            {NAV.map(item => (
              <button
                key={item.id}
                onClick={() => go(item.id)}
                className={`nav-link ${route === item.id ? "active" : ""}`}
                aria-current={route === item.id ? "page" : undefined}
              >
                {lang === "es" ? item.labelEs : item.label}
              </button>
            ))}
          </nav>

          <div className="header-actions">
            <div className="lang-toggle" role="group" aria-label="Language">
              <button
                className={lang === "en" ? "active" : ""}
                onClick={() => setLang("en")}
                aria-pressed={lang === "en"}
              >EN</button>
              <span aria-hidden="true">·</span>
              <button
                className={lang === "es" ? "active" : ""}
                onClick={() => setLang("es")}
                aria-pressed={lang === "es"}
              >ES</button>
            </div>
            <a
              className="btn btn-primary btn-sm"
              href="https://secure.actblue.com/donate/dcsmvdonate"
              target="_blank"
              rel="noopener noreferrer"
            >
              {lang === "es" ? "Donar" : "Donate"}
            </a>
            <button className="hamburger" onClick={() => setOpen(true)} aria-label="Open menu">
              <Icon.Menu />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={`mobile-drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="md-head">
          <Logo />
          <button className="md-close" onClick={() => setOpen(false)} aria-label="Close menu">
            <Icon.Close />
          </button>
        </div>
        <nav className="md-nav" aria-label="Mobile">
          {NAV.map(item => (
            <button
              key={item.id}
              onClick={() => go(item.id)}
              className={`md-link ${route === item.id ? "active" : ""}`}
            >
              <span>{lang === "es" ? item.labelEs : item.label}</span>
              <Icon.Arrow />
            </button>
          ))}
        </nav>
        <div className="md-foot">
          <div className="lang-toggle big" role="group" aria-label="Language">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>English</button>
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>Español</button>
          </div>
          <a className="btn btn-primary btn-lg" href="https://secure.actblue.com/donate/dcsmvdonate" target="_blank" rel="noopener noreferrer">
            {lang === "es" ? "Donar" : "Donate"}
          </a>
        </div>
      </div>
    </>
  );
}

function Footer({ lang, setRoute }) {
  const t = (en, es) => (lang === "es" ? es : en);
  return (
    <footer className="site-footer" role="contentinfo">
      <div className="footer-stripe" aria-hidden="true"></div>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo light />
            <p style={{ color: "rgba(255,255,255,0.78)", marginTop: 18, fontSize: 15, maxWidth: 320 }}>
              {t(
                "Chartered by the Santa Barbara County Democratic Central Committee. Serving the Santa Maria Valley since 1968.",
                "Reconocido por el Comité Central Demócrata del Condado de Santa Bárbara. Sirviendo al Valle de Santa María desde 1968."
              )}
            </p>
            <div className="social-row" aria-label="Social media">
              <a href="https://www.facebook.com/DemocraticClubOfSantaMariaValley" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                <Icon.Facebook />
              </a>
              <a href="https://www.instagram.com/demclubsmv/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <Icon.Instagram />
              </a>
            </div>
          </div>

          <div className="footer-col">
            <h5 className="footer-h">{t("Visit", "Visítanos")}</h5>
            <address>
              327 E. Plaza Drive, Suite 2<br/>
              Santa Maria, CA 93454<br/>
              <a href="tel:+18053492708">(805) 349‑2708</a><br/>
              <a href="mailto:dcsmv@dcsmv.net">dcsmv@dcsmv.net</a>
            </address>
            <p className="hours">
              {t("Mon–Fri, 11 AM – 2 PM", "Lun–Vie, 11 a.m. – 2 p.m.")}
            </p>
          </div>

          <div className="footer-col">
            <h5 className="footer-h">{t("Site", "Sitio")}</h5>
            <ul className="footer-links">
              {NAV.map(n => (
                <li key={n.id}>
                  <button onClick={() => { setRoute(n.id); window.scrollTo({ top: 0 }); }}>
                    {lang === "es" ? n.labelEs : n.label}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          <div className="footer-col">
            <h5 className="footer-h">{t("Get Involved", "Participa")}</h5>
            <ul className="footer-links">
              <li><a href="https://secure.actblue.com/contribute/page/dcsmvjoin" target="_blank" rel="noopener noreferrer">{t("Join or Pay Dues", "Únete o paga cuotas")} <Icon.External size={11}/></a></li>
              <li><a href="https://secure.actblue.com/donate/dcsmvdonate" target="_blank" rel="noopener noreferrer">{t("Donate", "Donar")} <Icon.External size={11}/></a></li>
              <li><a href="https://bit.ly/DemsOfSantaMariaValley" target="_blank" rel="noopener noreferrer">{t("Campaign Store", "Tienda")} <Icon.External size={11}/></a></li>
              <li><a href="https://action.dccc.org/page/s/free-proud-democrat-sticker" target="_blank" rel="noopener noreferrer">{t("Free sticker", "Calcomanía gratis")} <Icon.External size={11}/></a></li>
            </ul>
          </div>

          <div className="footer-col footer-seal">
            <img
              src={window.__resources.dcsmvLogo}
              alt="Democratic Club of Santa Maria Valley logo"
              className="footer-seal-img"
            />
          </div>
        </div>

        <div className="footer-meta">
          <p className="disclaimer">
            <strong>FPPC #743865.</strong> Paid for by the California Democratic Council. Not authorized by any candidate or candidate committee.
          </p>
          <p className="copyright">
            © {new Date().getFullYear()} Democratic Club of Santa Maria Valley. {t("All rights reserved.", "Todos los derechos reservados.")}
          </p>
          <p className="site-by">{t("Site by Justin Wested", "Sitio por Justin Wested")}</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, NAV });