/* === Header + Footer === */

function Header({ route, navigate }) {
  const nav = [
    { id: "home", label: "Sistema" },
    { id: "compatibilita", label: "Compatibilità" },
    { id: "azienda", label: "Azienda & Qualità" },
    { id: "listini", label: "Listini" },
    { id: "contatti", label: "Contatti" },
  ];
  const isHomeContext = route === "home" || route === "famiglie" || route === "family";
  return (
    <header className="site-header">
      <div className="inner">
        <a className="logo" href="#home" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
          <img src="assets/logos/LOGO MARKETPROTECT BLACK.png" alt="MarketProtect" />
        </a>
        <nav>
          {nav.map(n => {
            const active = n.id === "home" ? isHomeContext : route === n.id;
            return (
              <a key={n.id} href={`#${n.id}`}
                className={active ? "active" : ""}
                onClick={(e) => { e.preventDefault(); navigate(n.id); }}>
                {n.label}
              </a>
            );
          })}
        </nav>
        <div className="spacer"></div>
        <div className="header-cta-row">
          <a className="header-cta shop" href="https://conrad.com" target="_blank" rel="noreferrer">
            Shop · Conrad ↗
          </a>
          <a className="header-cta" href="https://wa.me/393668248457" target="_blank" rel="noreferrer">
            <img src="assets/icons/whatsapp.svg" alt="" />
            WhatsApp
          </a>
        </div>
      </div>
    </header>
  );
}

function Footer({ navigate }) {
  return (
    <footer className="site-footer">
      <div className="inner">
        <div>
          <img src="assets/logos/LOGO MARKETPROTECT BLACK.png" alt="MarketProtect" />
          <div className="disclaimer">
            <strong style={{ color: "var(--c-ink-soft)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, fontSize: 10 }}>Marchi e compatibilità</strong><br />
            Tutti i nomi, modelli e codici descritti sono citati unicamente per indicare la compatibilità funzionale dei nostri articoli con i sistemi di altri produttori (rif. C. Cass. Pen. Sez. V 5957/2012). I marchi citati appartengono ai rispettivi proprietari.
          </div>
        </div>
        <div>
          <h4>Sistema</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 1); }}>01 · Targhette rotoli</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 2); }}>02 · Targhette card</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 3); }}>03 · Tubetti trasparenti</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 4); }}>04 · Fascettabili</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 5); }}>05 · Tubetti adesivi</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 6); }}>06 · Per binari</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 7); }}>07 · Binari porta-targhetta</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("family", 8); }}>08 · Supporti pulsanti</a></li>
          </ul>
        </div>
        <div>
          <h4>Risorse</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("compatibilita"); }}>Compatibilità</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("azienda"); }}>Azienda & Qualità</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); navigate("listini"); }}>Listini · Download</a></li>
            <li><a href="https://conrad.com" target="_blank" rel="noreferrer">Shop · Conrad ↗</a></li>
          </ul>
        </div>
        <div>
          <h4>Contatti</h4>
          <ul>
            <li><a href="https://wa.me/393668248457" target="_blank" rel="noreferrer">WhatsApp +39 366 824 8457</a></li>
            <li><a href="mailto:commerciale@mktp.eu">commerciale@mktp.eu</a></li>
            <li><span style={{ color: "var(--c-mute)" }}>Via Circonvallazione, 178<br />10026 Santena (TO)</span></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <div>© 2026 MarketProtect Srl · P. IVA 12986690019</div>
        <div><a href="#" style={{ color: "var(--c-mute)" }}>Privacy</a> · <a href="#" style={{ color: "var(--c-mute)" }}>Cookie</a></div>
      </div>
    </footer>
  );
}

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