/* global React */
/* Single source of truth: file VERSION nella root del repo.
   Aggiornare qui ad ogni release in coordinamento con VERSION + CHANGELOG.md.
   Letto via window.SITE_VERSION se settato altrove, altrimenti fallback hardcoded. */
window.SITE_VERSION = window.SITE_VERSION || "0.12.3";
window.SITE_BUILD_DATE = window.SITE_BUILD_DATE || "2026-05-08";

window.Footer = function Footer({ lang }) {
  // From content JSON: footer.menu_columns, company_block, copyright.
  const cols = lang === "it" ? [
    { h: "Azienda", items: [
      { label: "Chi siamo", href: "chi-siamo.html" },
      { label: "Cosa facciamo", href: "factory.html" },
      { label: "Mercati", href: "servizi.html#mercati" },
    ] },
    { h: "Soluzioni", items: [
      { label: "Servizi AI", href: "servizi.html#ai" },
      { label: "E-Commerce Magento", href: "servizi.html#ecommerce" },
      { label: "Sviluppo applicazioni custom", href: "servizi.html#custom" },
    ] },
    { h: "Risorse", items: [
      { label: "Ci hanno scelto", href: "clienti.html" },
      { label: "Lavora con noi", href: "lavora-con-noi.html" },
      { label: "Blog", href: "#" },
      { label: "Contatti", href: "contatti.html" },
    ] },
    { h: "Legal", items: [
      { label: "Privacy Policy", href: "privacy.html" },
      { label: "Cookie Policy", href: "cookie-policy.html" },
      { label: "Preferenze cookie", href: "#cookie-prefs", onClick: "openPrefs" },
    ] },
  ] : [
    { h: "Company", items: [
      { label: "About", href: "chi-siamo.html" },
      { label: "What we do", href: "factory.html" },
      { label: "Markets", href: "servizi.html#mercati" },
    ] },
    { h: "Solutions", items: [
      { label: "AI Services", href: "servizi.html#ai" },
      { label: "E-Commerce Magento", href: "servizi.html#ecommerce" },
      { label: "Custom application development", href: "servizi.html#custom" },
    ] },
    { h: "Resources", items: [
      { label: "They chose us", href: "clienti.html" },
      { label: "Careers", href: "lavora-con-noi.html" },
      { label: "Blog", href: "#" },
      { label: "Contact", href: "contatti.html" },
    ] },
    { h: "Legal", items: [
      { label: "Privacy Policy", href: "privacy.html" },
      { label: "Cookie Policy", href: "cookie-policy.html" },
      { label: "Cookie preferences", href: "#cookie-prefs", onClick: "openPrefs" },
    ] },
  ];
  // Social channels confirmed in footer.social_inferred
  const social = [
    { name: "linkedin", href: "https://www.linkedin.com" },
    { name: "youtube", href: "#" },
  ];
  return (
    <footer style={{ background: "#080C1A", color: "#fff", padding: "80px 0 40px", position: "relative", overflow: "hidden" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.06 }}>
        <defs>
          <pattern id="footergrid" width="60" height="60" patternUnits="userSpaceOnUse">
            <path d="M60 0H0V60" fill="none" stroke="#7EE3FF" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#footergrid)" />
      </svg>
      <window.Container style={{ position: "relative" }}>
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 32, marginBottom: 56 }}>
          <div>
            <img src="assets/Logo_Esteso_Bianco.png" alt="Tecnolife" style={{ height: 36, marginBottom: 18 }} />
            <p style={{ fontSize: 13.5, color: "rgba(255,255,255,.62)", lineHeight: 1.6, maxWidth: 320, margin: 0 }}>
              {lang === "it"
                ? "Digital Accelerator & Business Partner. Società specializzata nella consulenza strategica a supporto della trasformazione digitale ed accelerazione dei processi digitali."
                : "Digital Accelerator & Business Partner. Strategic consulting partner supporting digital transformation and the acceleration of digital processes."}
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 22 }}>
              {social.map((s) => (
                <a key={s.name} href={s.href} aria-label={s.name} style={{
                  width: 36, height: 36, borderRadius: 10,
                  border: "1px solid rgba(255,255,255,.12)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "rgba(255,255,255,.7)",
                  transition: "all 220ms cubic-bezier(.22,1,.36,1)",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "rgba(126,227,255,.5)"; e.currentTarget.style.background = "rgba(40,209,254,.08)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,.7)"; e.currentTarget.style.borderColor = "rgba(255,255,255,.12)"; e.currentTarget.style.background = "transparent"; }}
                >
                  <window.Icon name={s.name} size={16} />
                </a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--tl-cyan-soft)", marginBottom: 16 }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.map((it) => {
                  const isPrefsLink = it.onClick === "openPrefs";
                  const handleClick = isPrefsLink
                    ? (e) => {
                        e.preventDefault();
                        if (typeof window.openCookiePreferences === "function") {
                          window.openCookiePreferences();
                        }
                      }
                    : undefined;
                  return (
                    <li key={it.label}>
                      <a
                        style={{ fontSize: 13.5, color: "rgba(255,255,255,.78)", transition: "color 140ms", cursor: "pointer" }}
                        href={it.href}
                        onClick={handleClick}
                        onMouseEnter={(e) => e.currentTarget.style.color = "#7EE3FF"}
                        onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,.78)"}
                      >{it.label}</a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 24,
          borderTop: "1px solid rgba(255,255,255,.08)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 12, color: "rgba(255,255,255,.5)", flexWrap: "wrap", gap: 12,
        }}>
          <div>© Tecnolife IT Consulting S.r.l. — {lang === "it" ? "Tutti i diritti riservati" : "All rights reserved"} · P.IVA 11747341003 · Via del Serafico 200, 00142 Roma (RM) — Italia</div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "rgba(255,255,255,.4)", letterSpacing: ".04em",
          }}>
            <span aria-label={lang === "it" ? "Versione del sito" : "Site version"}>v{window.SITE_VERSION}</span>
            <span aria-hidden="true" style={{ opacity: 0.5 }}>·</span>
            <span>{window.SITE_BUILD_DATE}</span>
          </div>
        </div>
      </window.Container>
      <style>{`
        @media (max-width: 1080px) {
          .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
        }
        @media (max-width: 720px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};