// pt/shared-pt.jsx — Portuguese Nav and Footer overrides.
// Loaded AFTER shared.jsx. Overrides window.Nav, window.Footer, and window.PRODUCT_CARD_MAP.

const { useState: useStatePT, useEffect: useEffectPT, useRef: useRefPT } = React;

const NAV_PRODUCTS_PT = [
  { name: "Tanques Provadores",         href: "pt/tanques-provadores",          desc: "Recipientes volumétricos em aço inoxidável, 50L–5.000L+" },
  { name: "Medidas de Teste",           href: "pt/medidas-de-teste",            desc: "Medidas portáteis de calibração, 1L–50L" },
  { name: "Sistemas Water Draw",        href: "pt/sistemas-water-draw",         desc: "Sistemas de calibração para provadores de tubulação" },
  { name: "Torres para Caminhões-Tanque", href: "pt/torres-calibracao-cisternas", desc: "Torres multicâmara para frotas de caminhões-tanque" },
  { name: "Bancadas de Calibração",    href: "pt/bancadas-calibracao",         desc: "Configurações fixas e móveis para laboratórios e oficinas" },
  { name: "Furgões MINILAB®",          href: "pt/minilab",                     desc: "Laboratórios móveis autônomos" },
];

const NAV_INDUSTRIES_PT = [
  { name: "Petróleo e Gás",            href: "pt/industrias/petroleo-gas",     desc: "Transferência de custódia, medição fiscal, conformidade API MPMS" },
  { name: "Indústria Química",         href: "pt/industrias/industria-quimica",desc: "Calibração em aço inox 304/316" },
  { name: "Água e Saneamento",         href: "pt/industrias/agua-saneamento",  desc: "Medição volumétrica para companhias de saneamento" },
];

function NavPT({ active = "home" }) {
  const [open, setOpenPT] = useStatePT(null);
  const [scrolled, setScrolledPT] = useStatePT(false);
  const [mobileOpen, setMobileOpenPT] = useStatePT(false);
  const navRef = useRefPT(null);

  useEffectPT(() => {
    const onScroll = () => setScrolledPT(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectPT(() => {
    const onClick = (e) => {
      if (navRef.current && !navRef.current.contains(e.target)) setOpenPT(null);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const toggle = (name) => setOpenPT(open === name ? null : name);

  return (
    <header ref={navRef} style={{
      position: "sticky",
      top: 0,
      zIndex: 100,
      background: scrolled ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.78)",
      backdropFilter: "blur(16px) saturate(160%)",
      WebkitBackdropFilter: "blur(16px) saturate(160%)",
      borderBottom: `1px solid ${scrolled ? "var(--line)" : "rgba(228,231,235,0.6)"}`,
      transition: "background 160ms ease, border-color 160ms ease",
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72, gap: 24 }}>
        <a href="pt/" aria-label="Lonetti início" style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
          <img
            src="images/Lonetti-logo-red.png"
            alt="Lonetti"
            style={{ height: 36, width: "auto", display: "block", background: "transparent" }}
          />
          <span style={{
            fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 25,
            letterSpacing: "-0.01em", color: "var(--red)", lineHeight: 1,
          }}>LONETTI</span>
        </a>

        {/* Desktop nav */}
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }} className="desktop-nav">
          <button onClick={() => toggle("products")} style={{
            display: "inline-flex", alignItems: "center", gap: 4,
            padding: "10px 14px", border: 0, background: "transparent",
            fontSize: 14, fontWeight: 500, color: (active === "products" || open === "products") ? "var(--red)" : "var(--text)", borderRadius: 4,
          }}>
            Produtos <Icon name={open === "products" ? "chevronUp" : "chevron"} size={14} />
          </button>
          <button onClick={() => toggle("industries")} style={{
            display: "inline-flex", alignItems: "center", gap: 4,
            padding: "10px 14px", border: 0, background: "transparent",
            fontSize: 14, fontWeight: 500, color: (active === "industries" || open === "industries") ? "var(--red)" : "var(--text)", borderRadius: 4,
          }}>
            Indústrias <Icon name={open === "industries" ? "chevronUp" : "chevron"} size={14} />
          </button>
          <a href="pt/servicos" style={{
            display: "inline-flex", alignItems: "center", padding: "10px 14px",
            fontSize: 14, fontWeight: 500, color: active === "services" ? "var(--red)" : "var(--text)", borderRadius: 4,
          }}>Serviços</a>
          <a href="pt/sobre-nos" style={{
            display: "inline-flex", alignItems: "center", padding: "10px 14px",
            fontSize: 14, fontWeight: 500, color: active === "about" ? "var(--red)" : "var(--text)", borderRadius: 4,
          }}>Sobre Nós</a>
          <a href="pt/contato" style={{
            display: "inline-flex", alignItems: "center", padding: "10px 14px",
            fontSize: 14, fontWeight: 500, color: active === "contact" ? "var(--red)" : "var(--text)", borderRadius: 4,
          }}>Contato</a>
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }} className="nav-right">
          {/* Language switcher */}
          <div className="nav-lang" style={{ position: "relative" }}>
            <button onClick={() => toggle("lang")} aria-label="Idioma" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "8px 10px", border: "1px solid var(--line)", borderRadius: 4,
              background: "transparent", fontSize: 13, fontWeight: 500, color: "var(--text-2)"
            }}>
              <Flag code="pt" size={14} />
              <span>PT</span>
              <Icon name="chevron" size={14} />
            </button>
            {open === "lang" && (
              <div style={{ position: "absolute", top: "calc(100% + 6px)", right: 0,
                background: "#fff", border: "1px solid var(--line)", borderRadius: 6,
                boxShadow: "0 12px 32px -8px rgba(11,15,26,0.18)", padding: 4, minWidth: 160 }}>
                {[
                  { code: "en", name: "English",    href: "/" },
                  { code: "es", name: "Español",    href: "/es/" },
                  { code: "pt", name: "Português",  href: "/pt/" },
                ].map((l) => (
                  <a key={l.code} href={l.href} style={{
                    display: "flex", alignItems: "center", gap: 10, width: "100%",
                    padding: "8px 10px", border: 0, background: l.code === "pt" ? "var(--bg-alt)" : "transparent",
                    borderRadius: 4, fontSize: 13, color: "var(--text)", textDecoration: "none",
                  }}>
                    <Flag code={l.code} size={14} />
                    <span>{l.name}</span>
                  </a>
                ))}
              </div>
            )}
          </div>

          <a className="btn btn-primary btn-sm nav-cta" href="#quote">Solicitar Cotação</a>

          <button className="burger" onClick={() => setMobileOpenPT(true)} aria-label="Abrir menu" style={{
            display: "none",
            background: "transparent", border: "1px solid var(--line)", borderRadius: 4,
            width: 38, height: 38, alignItems: "center", justifyContent: "center"
          }}>
            <Icon name="cog" />
          </button>
        </div>
      </div>

      {/* Dropdown panels */}
      {open === "products" && (
        <>
          <div onClick={() => setOpenPT(null)} style={{ position: "fixed", inset: 0, background: "rgba(11,15,26,0.25)", zIndex: 90 }}/>
          <div style={{
            position: "absolute", top: "100%", left: 0, right: 0, zIndex: 95,
            background: "#fff", borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
            boxShadow: "0 24px 48px -16px rgba(11,15,26,0.12)",
          }}>
            <div className="container" style={{ padding: "32px var(--gutter) 40px" }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Produtos</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "8px 32px" }}>
                {NAV_PRODUCTS_PT.map((it) => (
                  <a key={it.name} href={it.href} style={{
                    display: "flex", flexDirection: "column", gap: 4,
                    padding: "14px 16px", borderRadius: 6, border: "1px solid transparent",
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-alt)"}
                  onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontWeight: 600, fontSize: 15, color: "var(--text)" }}>{it.name}</span>
                      <Icon name="arrow" size={14} stroke="var(--red)"/>
                    </div>
                    <span style={{ fontSize: 13, color: "var(--text-3)" }}>{it.desc}</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </>
      )}
      {open === "industries" && (
        <>
          <div onClick={() => setOpenPT(null)} style={{ position: "fixed", inset: 0, background: "rgba(11,15,26,0.25)", zIndex: 90 }}/>
          <div style={{
            position: "absolute", top: "100%", left: 0, right: 0, zIndex: 95,
            background: "#fff", borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
            boxShadow: "0 24px 48px -16px rgba(11,15,26,0.12)",
          }}>
            <div className="container" style={{ padding: "32px var(--gutter) 40px" }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Indústrias</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "8px 32px" }}>
                {NAV_INDUSTRIES_PT.map((it) => (
                  <a key={it.name} href={it.href} style={{
                    display: "flex", flexDirection: "column", gap: 4,
                    padding: "14px 16px", borderRadius: 6, border: "1px solid transparent",
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-alt)"}
                  onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontWeight: 600, fontSize: 15, color: "var(--text)" }}>{it.name}</span>
                      <Icon name="arrow" size={14} stroke="var(--red)"/>
                    </div>
                    <span style={{ fontSize: 13, color: "var(--text-3)" }}>{it.desc}</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </>
      )}

      <style>{`
        @media (max-width: 1024px) {
          .desktop-nav { display: none !important; }
          .burger { display: inline-flex !important; }
          .nav-cta { display: none !important; }
          .nav-lang { display: none !important; }
        }
      `}</style>
    </header>
  );
}

function FooterPT() {
  const cols = [
    {
      title: "Produtos",
      items: [
        { label: "Tanques Provadores",           href: "pt/tanques-provadores" },
        { label: "Medidas de Teste",             href: "pt/medidas-de-teste" },
        { label: "Sistemas Water Draw",          href: "pt/sistemas-water-draw" },
        { label: "Torres para Caminhões-Tanque", href: "pt/torres-calibracao-cisternas" },
        { label: "Bancadas de Calibração",       href: "pt/bancadas-calibracao" },
        { label: "Furgões MINILAB®",             href: "pt/minilab" },
      ],
    },
    {
      title: "Indústrias",
      items: [
        { label: "Petróleo e Gás",    href: "pt/industrias/petroleo-gas" },
        { label: "Indústria Química", href: "pt/industrias/industria-quimica" },
        { label: "Água e Saneamento", href: "pt/industrias/agua-saneamento" },
      ],
    },
    {
      title: "Empresa",
      items: [
        { label: "Sobre Nós", href: "pt/sobre-nos" },
        { label: "Serviços",  href: "pt/servicos" },
        { label: "Contato",   href: "pt/contato" },
      ],
    },
    {
      title: "Recursos",
      items: [
        { label: "Perguntas Frequentes",    href: "pt/perguntas-frequentes" },
      ],
    },
  ];

  return (
    <footer style={{ background: "var(--navy-3)", color: "#fff", paddingTop: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 48, paddingBottom: 56 }}>
          <div>
            <a href="pt/" aria-label="Lonetti início" style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
              <img src="images/Lonetti-logo-red.png" alt="Lonetti" style={{ height: 32, width: "auto", display: "block" }}/>
              <span style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.01em", color: "var(--red)", lineHeight: 1 }}>LONETTI</span>
            </a>
            <p style={{ marginTop: 24, color: "rgba(255,255,255,0.62)", fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
              Equipamentos de calibração de precisão fabricados em Buenos Aires desde 1960. Exportamos para 47 países.
            </p>
            <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "rgba(255,255,255,0.7)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Icon name="pin" size={14}/> Buenos Aires, Argentina</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Icon name="mail" size={14}/> info@lonetti.com.ar</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}><Icon name="whatsapp" size={14}/> +54 9 11 2788 4190</span>
            </div>
          </div>
          {cols.map((col) => (
            <div key={col.title}>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 18 }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {col.items.map((item) => (
                  <li key={item.label}>
                    <a href={item.href} style={{ fontSize: 14, color: "rgba(255,255,255,0.78)" }}
                      onMouseEnter={(e) => e.currentTarget.style.color = "#fff"}
                      onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.78)"}>
                      {item.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <hr className="hr-line-dark" />

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "28px 0", gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
            {["OIML", "API MPMS", "INTI", "INMETRO", "ISO 9001"].map((c) => (
              <span key={c} style={{
                fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em",
                color: "rgba(255,255,255,0.55)", textTransform: "uppercase"
              }}>{c}</span>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 20, fontSize: 12, color: "rgba(255,255,255,0.5)" }}>
            <span>© 1960–2026 Lonetti</span>
            <span style={{ display: "inline-flex", gap: 12 }}>
              <a href="/" style={{ color: "rgba(255,255,255,0.7)" }}>EN</a>
              <a href="/es/" style={{ color: "rgba(255,255,255,0.7)" }}>ES</a>
              <a href="/pt/" style={{ color: "rgba(255,255,255,0.9)", fontWeight: 600 }}>PT</a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.PRODUCT_CARD_MAP = {
  "prover-tanks":                    { name: "Tanques Provadores",            tag: "50L–5.000L+",   href: "pt/tanques-provadores",          photo: "proverTank" },
  "test-measures":                   { name: "Medidas de Teste",              tag: "1L–50L",        href: "pt/medidas-de-teste",            photo: "testMeasure_polished" },
  "water-draw-systems":              { name: "Sistemas Water Draw",           tag: "Provadores",    href: "pt/sistemas-water-draw",         photo: "waterDraw" },
  "tanker-truck-calibration-towers": { name: "Torres para Caminhões-Tanque", tag: "Multicâmara",   href: "pt/torres-calibracao-cisternas", photo: "tankerTower" },
  "calibration-test-benches":        { name: "Bancadas de Calibração",       tag: "Fixo / móvel",  href: "pt/bancadas-calibracao",         photo: "testBench" },
  "minilab":                         { name: "Furgões MINILAB®",             tag: "Lab móvel",     href: "pt/minilab",                     photo: "minilab" },
};

Object.assign(window, { Nav: NavPT, Footer: FooterPT });