// shared.jsx — Logo, Nav, Footer, icon helpers
// Loaded BEFORE page-specific scripts. Exposes components on window.

const { useState, useEffect, useRef } = React;

/* ─── Logo ──────────────────────────────────────────────────────────── */
function Logo({ height = 36 }) {
  return (
    <a href="index.html" aria-label="Lonetti home" style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <img
        src="images/Lonetti-logo-red.png"
        alt="Lonetti"
        style={{
          height: height,
          width: "auto",
          display: "block",
          background: "transparent",
        }}
      />
      <span style={{
        fontFamily: "var(--f-display)",
        fontWeight: 700,
        fontSize: height * 0.7,
        letterSpacing: "-0.01em",
        color: "var(--red)",
        lineHeight: 1,
      }}>
        LONETTI
      </span>
    </a>
  );
}

/* ─── Icons (Lucide-style strokes) ──────────────────────────────────── */
function Icon({ name, size = 20, stroke = "currentColor", strokeWidth = 1.6 }) {
  const paths = {
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></>,
    chevron: <polyline points="6 9 12 15 18 9" />,
    chevronUp: <polyline points="6 15 12 9 18 15" />,
    chevronRight: <polyline points="9 6 15 12 9 18" />,
    menu: <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>,
    check: <polyline points="4 12 10 18 20 6"/>,
    globe: <><circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3 C 8 7 8 17 12 21 M12 3 C 16 7 16 17 12 21"/></>,
    factory: <><path d="M2 21 V11 L8 13 V9 L14 11 V7 L20 9 V21 Z"/><line x1="6" y1="17" x2="6" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="17" y1="17" x2="17" y2="21"/></>,
    droplet: <path d="M12 3 C 7 9 5 13 5 16 a7 7 0 0 0 14 0 c0 -3 -2 -7 -7 -13 Z"/>,
    truck: <><rect x="1" y="6" width="13" height="11"/><polyline points="14 10 19 10 22 13 22 17 14 17"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></>,
    lab: <><line x1="9" y1="3" x2="9" y2="9"/><line x1="15" y1="3" x2="15" y2="9"/><path d="M9 9 L4 19 a2 2 0 0 0 2 3 h12 a2 2 0 0 0 2 -3 L15 9 Z"/><line x1="7.5" y1="14" x2="16.5" y2="14"/></>,
    van: <><rect x="2" y="8" width="14" height="9"/><polyline points="16 10 20 10 22 13 22 17 16 17"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/><line x1="2" y1="13" x2="16" y2="13"/></>,
    gauge: <><path d="M21 12 a9 9 0 1 0 -18 0"/><line x1="12" y1="12" x2="17" y2="9"/><circle cx="12" cy="12" r="1.5" fill={stroke} stroke="none"/></>,
    cog: <><circle cx="12" cy="12" r="3"/><path d="M12 2 v3 M12 19 v3 M2 12 h3 M19 12 h3 M5 5 l2 2 M17 17 l2 2 M5 19 l2 -2 M17 7 l2 -2"/></>,
    shipping: <><rect x="2" y="6" width="14" height="11"/><polyline points="16 9 21 9 22 17 16 17"/><circle cx="6" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></>,
    seal: <><polygon points="12 2 14.5 6 19 6 16 10 18 15 12 12 6 15 8 10 5 6 9.5 6"/></>,
    document: <><path d="M5 3 H15 L19 7 V21 H5 Z"/><polyline points="14 3 14 8 19 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></>,
    download: <><line x1="12" y1="3" x2="12" y2="15"/><polyline points="6 11 12 17 18 11"/><line x1="4" y1="21" x2="20" y2="21"/></>,
    plus: <><line x1="5" y1="12" x2="19" y2="12"/><line x1="12" y1="5" x2="12" y2="19"/></>,
    minus: <line x1="5" y1="12" x2="19" y2="12"/>,
    close: <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>,
    whatsapp: <><path d="M12 3 a9 9 0 0 0 -7.6 13.8 L3 21 l4.4 -1.3 A9 9 0 1 0 12 3 Z"/><path d="M8.5 9 c0 4 3 6.5 7 7 l1 -2 l-2.5 -1 l-1.5 1.5 c-1.2 -.6 -2.4 -1.8 -3 -3 l1.5 -1.5 l-1 -2.5 z" fill={stroke} stroke="none"/></>,
    mail: <><rect x="3" y="5" width="18" height="14"/><polyline points="3 7 12 13 21 7"/></>,
    pin: <><path d="M12 22 s-7 -7 -7 -12 a7 7 0 0 1 14 0 c0 5 -7 12 -7 12 Z"/><circle cx="12" cy="10" r="2.5"/></>,
    flag: <><polyline points="5 3 5 21"/><path d="M5 4 H19 L15 9 L19 14 H5"/></>,
    search: <><circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="21" y2="21"/></>,
    play: <polygon points="7 4 19 12 7 20"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
}

/* ─── Flag (rounded rect) ─────────────────────────────────────────────── */
function Flag({ code, size = 16 }) {
  const flags = {
    en: <><rect width="24" height="16" fill="#012169"/><path d="M0 0 L24 16 M24 0 L0 16" stroke="#fff" strokeWidth="3"/><path d="M0 0 L24 16 M24 0 L0 16" stroke="#C8102E" strokeWidth="1.5"/><path d="M12 0 V16 M0 8 H24" stroke="#fff" strokeWidth="4"/><path d="M12 0 V16 M0 8 H24" stroke="#C8102E" strokeWidth="2"/></>,
    es: <><rect width="24" height="16" fill="#AA151B"/><rect y="4" width="24" height="8" fill="#F1BF00"/></>,
    pt: <><rect width="24" height="16" fill="#009C3B"/><polygon points="12,1.5 22.5,8 12,14.5 1.5,8" fill="#FFCC29"/><circle cx="12" cy="8" r="3.8" fill="#002776"/></>,
  };
  return (
    <span style={{ display: "inline-flex", overflow: "hidden", borderRadius: 2, width: size * 1.5, height: size, lineHeight: 0 }}>
      <svg width={size * 1.5} height={size} viewBox="0 0 24 16" aria-hidden="true">
        {flags[code]}
      </svg>
    </span>
  );
}

/* ─── Nav ───────────────────────────────────────────────────────────── */
const NAV_PRODUCTS = [
  { name: "Prover Tanks",                   href: "prover-tanks.html",                  desc: "Stainless steel volumetric vessels, 50L–5,000L+" },
  { name: "Test Measures",                  href: "test-measures.html",                 desc: "Handheld calibration cans, 1L–50L" },
  { name: "Water Draw Systems",             href: "water-draw-systems.html",            desc: "Pipe prover calibration rigs" },
  { name: "Tanker Truck Calibration Towers",href: "tanker-truck-calibration-towers.html",desc: "Multi-tank tower systems for fleets" },
  { name: "Calibration Test Benches",       href: "calibration-test-benches.html",      desc: "Fixed and mobile test setups" },
  { name: "MINILAB® Vans",                  href: "minilab.html",                       desc: "Self-contained mobile labs on wheels" },
];

const NAV_INDUSTRIES = [
  { name: "Oil & Gas / Petroleum",  href: "industry-oil-gas.html",             desc: "Custody transfer, fiscal metering, API MPMS" },
  { name: "Chemical Processing",    href: "industry-chemical.html",            desc: "Process calibration, 304/316 SS" },
  { name: "Water & Utilities",      href: "industry-water-utilities.html",     desc: "Bulk water measurement, public utilities" },
  { name: "Government Metrology",   href: "industry-government-metrology.html",desc: "INTI, INMETRO, national standards bodies" },
];

const NAV_RESOURCES = [
  { name: "Blog & Knowledge Hub",  href: "#" },
  { name: "Frequently Asked Questions", href: "#" },
  { name: "Datasheet Downloads",   href: "#" },
  { name: "Calibration Standards Guide", href: "#" },
];

function Nav({ active = "home" }) {
  const [open, setOpen] = useState(null);   // 'products' | 'industries' | 'resources' | 'lang' | null
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [lang, setLang] = useState("en");
  const navRef = useRef(null);

  // Lock body scroll when mobile drawer is open
  useEffect(() => {
    if (mobileOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [mobileOpen]);

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

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

  const toggle = (name) => setOpen(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 nav-bar" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72, gap: 24 }}>
        <Logo />

        {/* Desktop nav */}
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }} className="desktop-nav">
          <NavTrigger label="Products"   active={active === "products"}   open={open === "products"}   onClick={() => toggle("products")} hasChevron />
          <NavTrigger label="Industries" active={active === "industries"} open={open === "industries"} onClick={() => toggle("industries")} hasChevron />
          <NavLink    label="Services"   href="services.html" active={active === "services"} />
          <NavLink    label="About"      href="about.html" active={active === "about"} />
          <NavLink    label="Contact"    href="contact.html" active={active === "contact"} />
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }} className="nav-right">
          {/* Language */}
          <div className="nav-lang" style={{ position: "relative" }}>
            <button onClick={() => toggle("lang")} aria-label="Language" 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={lang} size={14} />
              <span style={{ textTransform: "uppercase" }}>{lang}</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", background: lang === l.code ? "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="contact.html">Request a Quote</a>

          {/* Mobile burger */}
          <button className="burger" onClick={() => setMobileOpen(true)} aria-label="Open menu" style={{
            display: "none",
            background: "transparent", border: "1px solid var(--line)", borderRadius: 4,
            width: 40, height: 40, alignItems: "center", justifyContent: "center",
            color: "var(--text)",
          }}>
            <Icon name="menu" size={22} />
          </button>
        </div>
      </div>

      {/* Dropdown panels — products / industries */}
      {open === "products" && <MegaDropdown title="Products" cols={2} items={NAV_PRODUCTS} onClose={() => setOpen(null)} />}
      {open === "industries" && <MegaDropdown title="Industries" cols={2} items={NAV_INDUSTRIES} onClose={() => setOpen(null)} />}

      {/* Mobile drawer — portaled to body so the nav's backdrop-filter doesn't constrain its position:fixed */}
      {mobileOpen && ReactDOM.createPortal(
        <MobileDrawer
          active={active}
          lang={lang}
          setLang={setLang}
          onClose={() => setMobileOpen(false)}
        />,
        document.body
      )}

      <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; }
        }
        @media (max-width: 768px) {
          .nav-bar { height: 60px !important; gap: 12px !important; }
          .nav-bar img { height: 28px !important; }
          .nav-bar span[style*="font-weight: 700"] { font-size: 19px !important; }
        }
      `}</style>
    </header>
  );
}

function NavTrigger({ label, active, open, onClick, hasChevron }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "10px 14px", border: 0, background: "transparent",
      fontSize: 14, fontWeight: 500, color: active || open ? "var(--red)" : "var(--text)",
      borderRadius: 4,
    }}>
      {label}
      {hasChevron && <Icon name={open ? "chevronUp" : "chevron"} size={14} />}
    </button>
  );
}

function NavLink({ label, href, active }) {
  return (
    <a href={href} style={{
      display: "inline-flex", alignItems: "center",
      padding: "10px 14px",
      fontSize: 14, fontWeight: 500, color: active ? "var(--red)" : "var(--text)",
      borderRadius: 4,
    }}>
      {label}
    </a>
  );
}

function MobileDrawer({ active, lang, setLang, onClose }) {
  const [section, setSection] = useState(null); // 'products' | 'industries' | 'lang' | null

  // Close drawer when navigating
  const go = (href) => { onClose(); if (href && href !== "#") window.location.href = href; };

  const flagFor = { en: "English", es: "Espa\u00f1ol", pt: "Portugu\u00eas" };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "#fff", display: "flex", flexDirection: "column",
      animation: "drawerIn 220ms cubic-bezier(.2,.7,.2,1)",
    }}>
      <style>{`
        @keyframes drawerIn {
          from { transform: translateX(100%); opacity: 0.6; }
          to   { transform: translateX(0); opacity: 1; }
        }
      `}</style>

      {/* Header */}
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 60, borderBottom: "1px solid var(--line)", flexShrink: 0,
      }}>
        <Logo height={28} />
        <button onClick={onClose} aria-label="Close menu" style={{
          width: 40, height: 40, borderRadius: 4,
          background: "transparent", border: "1px solid var(--line)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: "var(--text)",
        }}>
          <Icon name="close" size={20} />
        </button>
      </div>

      {/* Scrollable body */}
      <div style={{ flex: 1, overflowY: "auto", padding: "8px 0 24px" }}>
        {section === null && (
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            <DrawerRow label="Products"   onClick={() => setSection("products")} hasMore active={active === "products"} />
            <DrawerRow label="Industries" onClick={() => setSection("industries")} hasMore active={active === "industries"} />
            <DrawerRow label="Services"   onClick={() => go("services.html")} active={active === "services"} />
            <DrawerRow label="About"      onClick={() => go("about.html")}    active={active === "about"} />
            <DrawerRow label="Contact"    onClick={() => go("contact.html")}  active={active === "contact"} />
            <li style={{ borderTop: "1px solid var(--line)", marginTop: 12, paddingTop: 12 }}>
              <DrawerRow label={"Language \u00b7 " + flagFor[lang]} onClick={() => setSection("lang")} hasMore subdued />
            </li>
          </ul>
        )}

        {section === "products" && (
          <DrawerSubmenu title="Products" items={NAV_PRODUCTS} onBack={() => setSection(null)} go={go} />
        )}
        {section === "industries" && (
          <DrawerSubmenu title="Industries" items={NAV_INDUSTRIES} onBack={() => setSection(null)} go={go} />
        )}
        {section === "lang" && (
          <DrawerLang lang={lang} setLang={(l) => { setLang(l); setSection(null); }} onBack={() => setSection(null)} />
        )}
      </div>

      {/* Sticky CTA footer */}
      <div style={{
        padding: "16px var(--gutter) calc(16px + env(safe-area-inset-bottom))",
        borderTop: "1px solid var(--line)", flexShrink: 0,
        display: "flex", flexDirection: "column", gap: 10,
      }}>
        <a className="btn btn-primary" href="contact.html" onClick={onClose}
          style={{ justifyContent: "center", width: "100%" }}>
          Request a Quote <Icon name="arrow" size={16} stroke="#fff" />
        </a>
        <a className="btn btn-ghost-dark" href="https://wa.me/5491127884190"
          target="_blank" rel="noopener noreferrer"
          style={{ justifyContent: "center", width: "100%" }}>
          <Icon name="whatsapp" size={16} /> WhatsApp
        </a>
      </div>
    </div>
  );
}

function DrawerRow({ label, onClick, hasMore, active, subdued }) {
  return (
    <li>
      <button onClick={onClick} style={{
        width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 12, padding: "18px var(--gutter)",
        background: "transparent", border: 0, textAlign: "left",
        fontFamily: "var(--f-body)", fontSize: 16, fontWeight: 500,
        color: active ? "var(--red)" : (subdued ? "var(--text-2)" : "var(--text)"),
        borderBottom: "1px solid var(--line)",
      }}>
        <span>{label}</span>
        {hasMore && <Icon name="chevronRight" size={18} stroke="var(--text-3)" />}
      </button>
    </li>
  );
}

function DrawerSubmenu({ title, items, onBack, go }) {
  return (
    <div>
      <button onClick={onBack} style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "14px var(--gutter)", border: 0, background: "transparent",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em",
        color: "var(--text-2)", textTransform: "uppercase", width: "100%",
        borderBottom: "1px solid var(--line)", textAlign: "left",
      }}>
        <span style={{ display: "inline-flex", transform: "rotate(180deg)" }}>
          <Icon name="arrow" size={14} stroke="var(--text-2)" strokeWidth={2} />
        </span>
        <span>{"Back \u00b7 "}{title}</span>
      </button>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {items.map((it) => (
          <li key={it.name}>
            <button onClick={() => go(it.href)} style={{
              width: "100%", display: "flex", flexDirection: "column", gap: 4,
              padding: "18px var(--gutter)",
              background: "transparent", border: 0, textAlign: "left",
              borderBottom: "1px solid var(--line)",
            }}>
              <span style={{ fontSize: 16, fontWeight: 600, color: "var(--text)" }}>{it.name}</span>
              {it.desc && <span style={{ fontSize: 13, color: "var(--text-3)" }}>{it.desc}</span>}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function DrawerLang({ lang, onBack }) {
  const langs = [
    { code: "en", name: "English",   href: "/" },
    { code: "es", name: "Espa\u00f1ol",   href: "/es/" },
    { code: "pt", name: "Portugu\u00eas", href: "/pt/" },
  ];
  return (
    <div>
      <button onClick={onBack} style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "14px var(--gutter)", border: 0, background: "transparent",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em",
        color: "var(--text-2)", textTransform: "uppercase", width: "100%",
        borderBottom: "1px solid var(--line)", textAlign: "left",
      }}>
        <span style={{ display: "inline-flex", transform: "rotate(180deg)" }}>
          <Icon name="arrow" size={14} stroke="var(--text-2)" strokeWidth={2} />
        </span>
        <span>{"Back \u00b7 Language"}</span>
      </button>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {langs.map((l) => (
          <li key={l.code}>
            <a href={l.href} style={{
              width: "100%", display: "flex", alignItems: "center", gap: 14,
              padding: "18px var(--gutter)",
              background: "transparent", textDecoration: "none",
              borderBottom: "1px solid var(--line)",
              fontSize: 16, color: lang === l.code ? "var(--red)" : "var(--text)",
              fontWeight: lang === l.code ? 600 : 500,
            }}>
              <Flag code={l.code} size={18} />
              <span>{l.name}</span>
              {lang === l.code && <Icon name="check" size={18} stroke="var(--red)" strokeWidth={2} />}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function MegaDropdown({ title, cols, items, onClose }) {
  return (
    <>
      <div onClick={onClose} 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 }}>{title}</div>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: "8px 32px" }}>
            {items.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>
    </>
  );
}

function SimpleDropdown({ items, onClose }) {
  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "transparent", zIndex: 90 }}/>
      <div style={{
        position: "absolute", top: "calc(100% - 1px)", right: "calc(var(--gutter) + 100px)", zIndex: 95,
        background: "#fff", border: "1px solid var(--line)", borderRadius: 6,
        boxShadow: "0 24px 48px -16px rgba(11,15,26,0.18)",
        padding: 6, minWidth: 240,
      }}>
        {items.map((it) => (
          <a key={it.name} href={it.href} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "10px 12px", borderRadius: 4, fontSize: 14, color: "var(--text)"
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-alt)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <span>{it.name}</span>
            <Icon name="arrow" size={14} stroke="var(--text-3)"/>
          </a>
        ))}
      </div>
    </>
  );
}

/* ─── Footer ────────────────────────────────────────────────────────── */
function Footer() {
  const cols = [
    { title: "Products", items: [
      { label: "Prover Tanks",         href: "/prover-tanks" },
      { label: "Test Measures",        href: "/test-measures" },
      { label: "Water Draw Systems",   href: "/water-draw-systems" },
      { label: "Calibration Towers",   href: "/tanker-truck-calibration-towers" },
      { label: "Test Benches",         href: "/calibration-test-benches" },
      { label: "MINILAB® Vans",        href: "/minilab" },
    ]},
    { title: "Industries", items: [
      { label: "Oil & Gas",            href: "/industries/oil-gas" },
      { label: "Chemical Processing",  href: "/industries/chemical" },
      { label: "Water & Utilities",    href: "/industries/water-utilities" },
      { label: "Government Metrology", href: "/industries/government-metrology" },
    ]},
    { title: "Company", items: [
      { label: "About",                href: "/about" },
      { label: "Services",             href: "/services" },
      { label: "Contact",              href: "/contact" },
    ]},
    { title: "Resources", items: [
      { label: "FAQ",                  href: "/faq" },
    ]},
  ];
  return (
    <footer style={{ background: "var(--navy-3)", color: "#fff", paddingTop: 80 }}>
      <div className="container">
        <div className="footer-cols" style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 48, paddingBottom: 56 }}>
          <div className="footer-brand">
            <Logo height={32}/>
            <p style={{ marginTop: 24, color: "rgba(255,255,255,0.62)", fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
              Precision liquid calibration equipment, manufactured in Buenos Aires since 1960.
              Exporting to 47 countries.
            </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((i) => (
                  <li key={i.label}><a href={i.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)"}>
                    {i.label}
                  </a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

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

        <div className="footer-bottom" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "28px 0", gap: 24, flexWrap: "wrap" }}>
          <div className="footer-certs" 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.9)", fontWeight: 600 }}>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.7)" }}>PT</a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ─── Floating WhatsApp ─────────────────────────────────────────────── */
function FloatingWhatsApp() {
  return (
    <a href="https://wa.me/5491127884190" target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp" className="float-whatsapp" style={{
      position: "fixed", right: 24, bottom: 24, zIndex: 80,
      width: 56, height: 56, borderRadius: "50%",
      background: "#25D366", color: "#fff",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 12px 32px -8px rgba(37,211,102,0.55)",
    }}>
      <Icon name="whatsapp" size={26} strokeWidth={1.8}/>
    </a>
  );
}

/* ─── Real Lonetti photos (local) ──────────────────────────────────── */
const LONETTI_PHOTOS = {
  // Prover Tanks
  proverTank:           "images/large-open-prover-tank.jpeg",
  proverTank_500:       "images/500-liter-prover-tank-microblasted.png",
  proverTank_workshop:  "images/1000-liter-prover-tanks-workshop.jpeg",
  proverTank_row:       "images/multiple-prover-tanks-arranged.jpeg",
  proverTank_storage:   "images/multiple-prover-tanks-storage.jpeg",
  proverTank_tall:      "images/tall-prover-tanks-workshop.jpeg",
  proverTank_detail:    "images/prover-tank-stainless-detail.jpeg",
  proverTank_gauges:    "images/prover-tanks-gauges-closeup.jpeg",
  proverTank_shipping:  "images/prover-tank-wooden-crate-shipping.jpeg",
  proverTank_outdoor:   "images/prover-tank-outdoor-facility.jpg",
  proverTank_blue:      "images/prover-tank-interior-blue.jpeg",
  proverTank_cart:      "images/20-liter-prover-tank-on-cart.jpeg",
  proverTank_install:   "images/multiple-prover-tanks-installation.jpg",

  // Test Measures
  testMeasure:          "images/stainless-test-measure-funnel-detail.png",
  testMeasure_angled:   "images/stainless-test-measure-angled.png",
  testMeasure_funnel:   "images/stainless-test-measure-funnel-2.png",
  testMeasure_10L:      "images/10-liter-test-measure.png",
  testMeasure_20L:      "images/20-liter-measure-with-gas-cylinders.jpeg",
  testMeasure_polished: "images/polished-prover-measure.jpeg",
  testMeasure_funnelLg: "images/10-liter-stainless-funnel.jpeg",

  // Water Draw
  waterDraw:            "images/water-draw-stainless-equipment.jpeg",
  waterDraw_glass:      "images/water-draw-glass-measuring-vessel.jpeg",
  waterDraw_workshop:   "images/water-draw-prover-vessel-workshop.jpeg",
  waterDraw_drawing:    "images/water-draw-technical-drawing.jpeg",

  // Tanker Truck Calibration Towers
  tankerTower:          "images/large-calibration-tank-truck.jpeg",
  tankerTower_transport:"images/large-calibration-tower-truck-transport.jpeg",
  tankerTower_white:    "images/white-truck-calibration-tanks.jpeg",
  tankerTower_night:    "images/white-truck-calibration-night.jpeg",
  tankerTower_semi:     "images/white-semi-truck-daytime.jpeg",
  tankerTower_station:  "images/tanker-truck-gas-station.webp",
  tankerTower_sunset:   "images/tank-truck-sunset.jpg",

  // Test Benches
  testBench:            "images/flowmeter-test-bench-full.jpg",
  testBench_side:       "images/calibration-test-bench-side.jpeg",
  testBench_detail:     "images/flowmeter-test-bench-detail.jpg",
  testBench_gauges:     "images/flowmeter-test-bench-gauges.jpg",
  testBench_horizontal: "images/flowmeter-test-bench-horizontal.jpg",
  testBench_overview:   "images/flowmeter-test-bench-overview.jpg",
  testBench_pipes:      "images/flowmeter-test-bench-pipes.jpeg",
  testBench_tech:       "images/measurement-platform-with-technician.jpeg",

  // MINILAB Vans
  minilab:              "images/calibration-van-exterior-rear.jpeg",
  minilab_open:         "images/calibration-van-open-equipment.jpeg",
  minilab_equip:        "images/calibration-van-rear-equipment.jpeg",
  minilab_interior:     "images/van-interior-measurement-equipment.jpeg",
  minilab_trailer:      "images/mobile-calibration-trailer.jpeg",

  // Hero / facility / industrial
  heroFacility:         "images/industrial-facility-prover-tanks.jpeg",
  workshopDome:         "images/workshop-dome-prover-tanks.jpeg",
  workshopIndustrial:   "images/workshop-industrial-calibration.jpeg",
  workshopOverview:     "images/workshop-calibration-equipment-overview.jpeg",
  facilityExterior:     "images/industrial-building-exterior.jpeg",
  fuelStorage:          "images/fuel-storage-tanks-industrial.jpeg",
  industrialInfra:      "images/industrial-infrastructure-tanks.jpg",

  // History (for About)
  history_1959:         "images/4000-liter-measure-vintage-black-white.jpg",
  history_vehicle:      "images/old-measurement-vehicle-sepia.jpg",
  technicians:          "images/technicians-Lonetti-workshop.jpg",
  welder:               "images/welder-closeup-sparks.jpg",
  welder_sparks:        "images/welder-sparks-workshop.jpg",
  welders_bench:        "images/welders-at-bench.jpg",
  metal_worker:         "images/metal-worker-PPE-safety.webp",
  expoADIPEC:           "images/Lonetti-expo-ADIPEC-Abu-Dhabi.jpg",
  expoBooth:            "images/expo-booth-calibration-equipment.jpeg",
};

const CLIENT_LOGOS = [
  { name: "YPF",         src: "images/YPF-logo.png" },
  { name: "Shell",       src: "images/Shell-logo.png" },
  { name: "Petrobras",   src: "images/Petrobras-BR-logo.jpg" },
  { name: "Axion Energy",src: "images/Axion-Energy-logo.jpg" },
  { name: "Esso",        src: "images/Esso-Axion-logo.png" },
  { name: "Air BP",      src: "images/Air-BP-logo.png" },
  { name: "Toyota",      src: "images/Toyota-logo.png" },
  { name: "Chevrolet",   src: "images/Chevrolet-logo.png" },
  { name: "ACA",         src: "images/ACA-Automovil-Club-Argentino-logo.png" },
  { name: "Milkaut",     src: "images/Milkaut-logo.jpg" },
  { name: "Nieri",       src: "images/Nieri-Surtidores-logo.jpg" },
];

const CERT_LOGOS = [
  { name: "INTI",          src: "images/INTI-logo.png" },
  { name: "SGS",           src: "images/SGS-logo.png" },
  { name: "Bureau Veritas",src: "images/Bureau-Veritas-logo.png" },
  { name: "SGS Certification",src: "images/SGS-system-certification-logo.png" },
];

/* ─── Form submission (Resend via /api/send-email) ───────────────────── */
async function submitForm(data) {
  const res = await fetch("/api/send-email", {
    method: "POST",
    headers: { "Content-Type": "application/json", "Accept": "application/json" },
    body: JSON.stringify(data),
  });
  if (!res.ok) throw new Error("Submission failed");
  return res.json();
}

/* ─── Export to global ──────────────────────────────────────────────── */
Object.assign(window, {
  Logo, Icon, Flag, Nav, Footer, FloatingWhatsApp,
  LONETTI_PHOTOS, CLIENT_LOGOS, CERT_LOGOS,
  submitForm,
});