// All page sections except hero.

const IMG = {
  port:       "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=2000&q=85&auto=format&fit=crop",
  crane:      "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=2000&q=85&auto=format&fit=crop",
  ship:       "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=2400&q=85&auto=format&fit=crop",
  containers: "https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=2000&q=85&auto=format&fit=crop",
  truck:      "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=2000&q=85&auto=format&fit=crop",

  mendoza:    "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=2000&q=85&auto=format&fit=crop",
  operations: "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=1800&q=85&auto=format&fit=crop",
  flexitank:  "https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=1400&q=85&auto=format&fit=crop",
  isotank:    "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=1400&q=85&auto=format&fit=crop",
  reefer:     "https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1400&q=85&auto=format&fit=crop",
  dry:        "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=1400&q=85&auto=format&fit=crop",
  maritime:   "https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=2400&q=85&auto=format&fit=crop",
  land:       "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=2000&q=85&auto=format&fit=crop",
  land2:      "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=1400&q=85&auto=format&fit=crop",
  worldShip:  "https://images.unsplash.com/photo-1605745341112-85968b19335b?w=2400&q=85&auto=format&fit=crop",
  // Ruta de la Cordillera de los Andes (AR ↔ CL). Swapeable si la empresa tiene foto propia.
  cordillera: "https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=2400&q=85&auto=format&fit=crop",
};

// (Removed EQUIPMENT_IMG and INDUSTRIES arrays — sections are now image-free per client feedback)

// ─────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────
function Nav({ t }) {
  const { pal, typo } = t;
  const { lang, setLang } = useLang();
  const s = I18N[lang].nav;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? "12px 48px" : "18px 48px",
      background: pal.inverseBg,
      color: pal.inverseInk,
      borderBottom: `1px solid ${pal.inverseInk}1f`,
      boxShadow: scrolled ? "0 8px 24px rgba(0,0,0,0.18)" : "none",
      transition: "padding .3s cubic-bezier(.4,.0,.2,1), box-shadow .3s ease",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontFamily: typo.body,
    }} className="ls-nav-row">
      <a href="#top" style={{ display: "inline-flex", background: "#fff", borderRadius: 6, padding: "6px 10px", lineHeight: 0 }}>
        <img src="logo.png" alt="Liquid Solutions Argentina" style={{ height: 34, width: "auto", display: "block" }} />
      </a>
      <div className="ls-nav-links" style={{ display: "flex", gap: 36, fontSize: 14, fontWeight: 500 }}>
        {s.links.map(([label, href]) => (
          <a key={label} href={href} className="ls-nav-link" style={{ color: "inherit", textDecoration: "none", opacity: 0.85 }}>{label}</a>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <button
          onClick={() => setLang(lang === "es" ? "en" : "es")}
          aria-label="Switch language"
          style={{
            background: "none", border: `1px solid ${pal.inverseInk}44`,
            color: pal.inverseInk, padding: "6px 12px",
            fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.18em",
            cursor: "pointer", transition: "border-color .2s ease, opacity .2s ease",
            opacity: 0.8,
          }}
        >{lang === "es" ? "EN" : "ES"}</button>
        <a href="#contacto" className="ls-nav-cta ls-cta-primary"
          onClick={() => window.va?.('event', { name: 'click_cotizar', data: { source: 'nav' } })}
          style={{
            padding: "12px 22px", background: pal.accent, color: pal.inverseBg, textDecoration: "none",
            fontSize: 13, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase",
          }}>{s.cta}</a>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stats strip
// ─────────────────────────────────────────────────────────────
function Stats({ t }) {
  const { pal, typo } = t;
  const { lang } = useLang();
  const stats = I18N[lang].stats;
  return (
    <section className="ls-section" style={{ background: pal.inverseBg, color: pal.inverseInk, position: "relative", zIndex: 2 }}>
      <div className="ls-grid-stats ls-fade" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: "32px 32px",
            borderRight: i < 3 ? `1px solid ${pal.inverseInk}1a` : "none",
            position: "relative",
          }}>
            <div style={{ fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: pal.accent, marginBottom: 12 }}>
              0{i + 1} · {s.unit}
            </div>
            <div style={{
              fontFamily: typo.display, fontWeight: typo.displayWeight,
              fontSize: "clamp(32px, 3.8vw, 56px)", lineHeight: 0.95, letterSpacing: typo.displayTracking,
            }}>{s.val}</div>
            <div style={{ fontFamily: typo.body, fontSize: 14, marginTop: 10, opacity: 0.78 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Equipment
// ─────────────────────────────────────────────────────────────
function EquipmentCard({ e, i, total, pal, typo, mobile, open, onToggle }) {
  return (
    <div className={mobile ? "" : "ls-card"} style={{
      background: pal.bg, border: `1px solid ${pal.line}`,
      display: "flex", flexDirection: "column",
      borderRadius: mobile ? 2 : 0,
      overflow: "hidden",
      minHeight: mobile ? 0 : 280,
    }}>
      {mobile ? (
        /* ── Mobile: collapsed row + smooth expand (text-only) ── */
        <>
          <button onClick={onToggle} style={{
            display: "flex", alignItems: "center", gap: 14,
            padding: "16px 18px", background: "none", border: "none",
            cursor: "pointer", width: "100%", boxSizing: "border-box", textAlign: "left",
          }}>
            <span style={{
              fontFamily: typo.mono, fontSize: 10, letterSpacing: "0.18em",
              color: pal.accent, background: `${pal.accent}18`,
              border: `1px solid ${pal.accent}55`,
              padding: "4px 8px", flexShrink: 0,
            }}>{e.code}</span>
            <span style={{
              fontFamily: typo.display, fontWeight: typo.displayWeight,
              fontSize: 22, lineHeight: 1.0, letterSpacing: typo.displayTracking,
              color: pal.ink, flex: 1, whiteSpace: "nowrap",
              overflow: "hidden", textOverflow: "ellipsis",
            }}>{e.name}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
              style={{ flexShrink: 0, transition: "transform .35s cubic-bezier(.2,.6,.2,1)", transform: open ? "rotate(45deg)" : "rotate(0deg)" }}>
              <path d="M7 1v12M1 7h12" stroke={pal.accent} strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </button>
          <div style={{
            display: "grid",
            gridTemplateRows: open ? "1fr" : "0fr",
            transition: "grid-template-rows .45s cubic-bezier(.2,.6,.2,1)",
          }}>
            <div style={{ overflow: "hidden" }}>
              <div style={{ padding: "4px 18px 24px" }}>
                <div style={{ fontFamily: typo.mono, fontSize: 11, color: pal.accent, marginBottom: 10, letterSpacing: "0.06em" }}>{e.cap}</div>
                <p style={{ fontFamily: typo.body, fontSize: 14, lineHeight: 1.6, color: pal.inkSoft, margin: "0 0 14px" }}>{e.desc}</p>
                <div style={{
                  fontFamily: typo.body, paddingTop: 12,
                  borderTop: `1px solid ${pal.line}`, fontSize: 11,
                  letterSpacing: "0.14em", textTransform: "uppercase", color: pal.ink, fontWeight: 600,
                }}>{e.use}</div>
              </div>
            </div>
          </div>
        </>
      ) : (
        /* ── Desktop: text-only card ── */
        <div style={{ padding: "32px 28px 32px", flex: 1, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
            <span style={{
              fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.16em",
              padding: "5px 10px", background: `${pal.accent}10`, color: pal.accent,
              border: `1px solid ${pal.accent}`,
            }}>{e.code}</span>
            <span style={{ fontFamily: typo.mono, fontSize: 11, color: pal.muted }}>0{i + 1} / 0{total}</span>
          </div>
          <h4 style={{
            fontFamily: typo.display, fontWeight: typo.displayWeight,
            fontSize: 32, lineHeight: 1.0, letterSpacing: typo.displayTracking,
            margin: "0 0 6px", color: pal.ink,
          }}>{e.name}</h4>
          <div style={{ fontFamily: typo.mono, fontSize: 12, color: pal.accent, marginBottom: 16, letterSpacing: "0.06em" }}>{e.cap}</div>
          <p style={{ fontFamily: typo.body, fontSize: 14, lineHeight: 1.6, color: pal.inkSoft, margin: 0, flex: 1 }}>{e.desc}</p>
          <div style={{
            fontFamily: typo.body, marginTop: 20, paddingTop: 14,
            borderTop: `1px solid ${pal.line}`, fontSize: 11,
            letterSpacing: "0.14em", textTransform: "uppercase", color: pal.ink, fontWeight: 600,
          }}>{e.use}</div>
        </div>
      )}
    </div>
  );
}

function Equipment({ t }) {
  const { pal, typo, dens } = t;
  const { lang } = useLang();
  const eq = I18N[lang].equipment;
  const mobile = useMobile();
  const [openIdx, setOpenIdx] = React.useState(null);

  const toggle = (i) => setOpenIdx(prev => prev === i ? null : i);

  return (
    <section id="equipamiento" className="ls-section ls-snap" style={{ background: pal.surface, color: pal.ink, paddingTop: dens.sectionY, paddingBottom: dens.sectionY, paddingLeft: mobile ? 20 : dens.pad.split(" ")[1], paddingRight: mobile ? 20 : dens.pad.split(" ")[1], display: mobile ? "block" : "flex", flexDirection: "column", justifyContent: mobile ? undefined : "center" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 48, flexWrap: "wrap" }}>
        <div>
          <div style={{ fontFamily: typo.mono, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: pal.muted, marginBottom: 24 }}>
            {eq.eyebrow}
          </div>
          <h2 className="ls-h2" style={{
            fontFamily: typo.display, fontWeight: typo.displayWeight,
            fontSize: "clamp(48px, 5.5vw, 84px)", lineHeight: 0.95, letterSpacing: typo.displayTracking, margin: 0,
          }}>
            {eq.h2a}<br />
            <span style={{ color: pal.accent, fontStyle: typo.italicFor === "accent" ? "italic" : "normal" }}>
              {eq.h2b}
            </span>
          </h2>
        </div>
        <p style={{ fontFamily: typo.body, fontSize: 16, lineHeight: 1.6, color: pal.inkSoft, maxWidth: 360, margin: 0 }}>
          {eq.body}
        </p>
      </div>

      <div className="ls-grid-eq ls-fade" style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(5, 1fr)", gap: mobile ? 0 : 20, border: mobile ? `1px solid ${pal.line}` : "none", borderRadius: mobile ? 2 : 0, boxSizing: "border-box", width: "100%" }}>
        {eq.items.map((e, i) => (
          <div key={i} style={mobile && i > 0 ? { borderTop: `1px solid ${pal.line}` } : {}}>
            <EquipmentCard e={e} i={i} total={eq.items.length} pal={pal} typo={typo} mobile={mobile} open={openIdx === i} onToggle={() => toggle(i)} />
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Industries → "Sectores" (6 cards + Cordillera background)
// ─────────────────────────────────────────────────────────────
function Industries({ t }) {
  const { pal, typo, dens } = t;
  const { lang } = useLang();
  const ind = I18N[lang].industries;
  const mobile = useMobile();
  return (
    <section id="industrias" className="ls-section ls-snap" style={{ position: "relative", overflow: "hidden", background: pal.bg, color: pal.ink, padding: `${dens.sectionY}px ${dens.pad.split(" ")[1]}`, display: mobile ? "block" : "flex", flexDirection: "column", justifyContent: mobile ? undefined : "center" }}>
      {/* Cordillera de los Andes — fondo anclado al pie, fundido con el bg para no afectar legibilidad */}
      <div aria-hidden="true" className="ls-industries-mountain-bg" style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: mobile ? "58%" : "74%",
        backgroundImage: `url(${IMG.cordillera})`,
        backgroundSize: "cover", backgroundPosition: mobile ? "center 42%" : "center 40%",
        zIndex: 0, pointerEvents: "none",
      }} />
      <div aria-hidden="true" className="ls-industries-mountain-wash" style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: mobile ? "58%" : "74%",
        background: `linear-gradient(180deg, ${pal.bg} 0%, ${pal.bg}e6 24%, ${pal.bg}80 52%, ${pal.bg}1a 100%)`,
        zIndex: 0, pointerEvents: "none",
      }} />
      <div className="ls-grid-2 ls-fade" style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1.4fr", gap: 48, marginBottom: 32, alignItems: "flex-end" }}>
        <div>
          <div style={{ fontFamily: typo.mono, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: pal.muted, marginBottom: 24 }}>
            {ind.eyebrow}
          </div>
          <h2 className="ls-h2" style={{
            fontFamily: typo.display, fontWeight: typo.displayWeight,
            fontSize: "clamp(44px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: typo.displayTracking, margin: 0,
          }}>
            {ind.h2a}<br />
            <span style={{ color: pal.accent, fontStyle: typo.italicFor === "accent" ? "italic" : "normal" }}>
              {ind.h2b}
            </span>
          </h2>
        </div>
        <p style={{ fontFamily: typo.body, fontSize: 17, lineHeight: 1.65, color: pal.inkSoft, margin: 0, maxWidth: 520 }}>
          {ind.body}
        </p>
      </div>

      <div className="ls-grid-industries ls-fade" style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 16 }}>
        {ind.items.map((c, i) => (
          <div key={i} className="ls-card" style={{
            background: pal.surface, border: `1px solid ${pal.line}`,
            padding: "32px 28px 36px",
            display: "flex", flexDirection: "column", gap: 14,
            minHeight: mobile ? 0 : 260,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{
                fontFamily: typo.mono, fontSize: 10, letterSpacing: "0.18em",
                color: pal.accent,
              }}>0{i + 1}</span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: pal.accent }} />
            </div>
            <div style={{
              fontFamily: typo.display, fontWeight: typo.displayWeight,
              fontSize: "clamp(26px, 2.2vw, 34px)", lineHeight: 1.0,
              letterSpacing: typo.displayTracking, color: pal.ink,
            }}>{c.name}</div>
            <p style={{
              fontFamily: typo.body, fontSize: 16, lineHeight: 1.6,
              color: pal.inkSoft, margin: 0, flex: 1,
            }}>{c.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// (MaritimeServices removed — replaced by Modos)

// (LandServices and Coverage removed — replaced by Modos + hero marquee, per client feedback)

// ─────────────────────────────────────────────────────────────
// Contact
// ─────────────────────────────────────────────────────────────
function Contact({ t }) {
  const { pal, typo, dens } = t;
  const { lang } = useLang();
  const con = I18N[lang].contact;
  const mobile = useMobile();
  const SHEETS_URL = "https://script.google.com/macros/s/AKfycbzOGex_TjQ8aROGjkjJTKT2c2OcrS__TR_CfEX-JXmpa9po0zPm_akKqX92_2muvBNZ/exec";

  const [form, setForm] = React.useState({ nombre: "", empresa: "", telefono: "", email: "", mensaje: "" });
  const [error, setError] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | error

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.nombre.trim() || !form.email.trim()) {
      setError(con.error);
      return;
    }
    setError("");
    setStatus("sending");
    try {
      await fetch(SHEETS_URL, {
        method: "POST",
        mode: "no-cors",
        body: JSON.stringify({
          nombre: form.nombre,
          empresa: form.empresa,
          telefono: form.telefono,
          email: form.email,
          mensaje: form.mensaje,
        }),
      });
      window.va?.('event', { name: 'form_submit' });
      setStatus("ok");
      setForm({ nombre: "", empresa: "", telefono: "", email: "", mensaje: "" });
    } catch {
      setStatus("error");
    }
  };

  return (
    <section id="contacto" className="ls-section ls-snap ls-contact-section" style={{ position: "relative", overflow: "hidden", background: pal.bg, color: pal.ink, scrollSnapAlign: "start", display: mobile ? "block" : "flex", flexDirection: "column", justifyContent: mobile ? undefined : "center" }}>
      <div className="ls-contact-dark ls-contact-bg" style={{
        position: "absolute", top: 0, left: 0, width: "52%", height: "100%",
        backgroundImage: `url(${IMG.port})`,
        backgroundSize: "cover", backgroundPosition: "center",
      }} />
      <div className="ls-contact-dark ls-contact-bg" style={{
        position: "absolute", top: 0, left: 0, width: "52%", height: "100%",
        background: `linear-gradient(115deg, ${pal.inverseBg}f5 0%, ${pal.inverseBg}ee 60%, ${pal.inverseBg}f0 100%)`,
      }} />
      <div className="ls-contact-divider" style={{
        position: "absolute", top: 0, left: "52%", width: 1, height: "100%",
        background: pal.line, opacity: 0.4,
      }} />

      <div style={{ position: "relative", padding: `${dens.sectionY}px ${dens.pad.split(" ")[1]}` }}>
        <div className="ls-grid-contact ls-fade" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: typo.mono, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: pal.accent, marginBottom: 24 }}>
              {con.eyebrow}
            </div>
            <h2 className="ls-h2" style={{
              fontFamily: typo.display, fontWeight: typo.displayWeight,
              fontSize: "clamp(38px, 4vw, 66px)", lineHeight: 0.92, letterSpacing: typo.displayTracking,
              margin: "0 0 20px", color: pal.inverseInk,
            }}>
              {con.h2a}<br />
              <span style={{ color: pal.accent, fontStyle: typo.italicFor === "accent" ? "italic" : "normal" }}>
                {con.h2b}
              </span>
            </h2>
            <p style={{ fontFamily: typo.body, fontSize: 16, lineHeight: 1.5, color: pal.inverseInk, opacity: 0.9, maxWidth: 480, margin: "0 0 28px" }}>
              {con.body}
            </p>

            <div style={{ fontFamily: typo.body, display: "grid", gap: 24, color: pal.inverseInk }}>
              {con.infoLabels.map((k, i) => (
                <div key={i}>
                  <div style={{ fontFamily: typo.mono, fontSize: 11, color: pal.accent, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 6 }}>
                    {k}
                  </div>
                  <div style={{ fontSize: 18 }}>{con.infoVals[i]}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: pal.bg, padding: "24px 28px 24px", border: `1px solid ${pal.line}`, boxShadow: "0 20px 60px rgba(0,0,0,0.08)" }}>
            <div style={{ fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: pal.muted, marginBottom: 24 }}>
              {con.formTitle}
            </div>
            <form onSubmit={handleSubmit} style={{ display: "grid", gap: 16, fontFamily: typo.body }}>
              {con.fields.map(([key, p, type, req]) => (
                <input
                  key={key}
                  type={type}
                  name={key}
                  placeholder={p + (req ? " *" : "")}
                  value={form[key]}
                  onChange={update(key)}
                  required={req}
                  aria-label={p}
                  className="ls-input"
                  style={{
                    padding: "16px 18px", background: pal.surface,
                    border: `1px solid ${pal.line}`, color: pal.ink, fontSize: 15,
                    fontFamily: "inherit", outline: "none",
                    transition: "border-color .2s ease, box-shadow .2s ease",
                  }}
                />
              ))}
              <textarea
                rows="3"
                name="mensaje"
                placeholder={con.msgPlaceholder}
                value={form.mensaje}
                onChange={update("mensaje")}
                aria-label="Mensaje"
                className="ls-input"
                style={{
                  padding: "16px 18px", background: pal.surface,
                  border: `1px solid ${pal.line}`, color: pal.ink, fontSize: 15,
                  fontFamily: "inherit", outline: "none", resize: "vertical",
                  transition: "border-color .2s ease, box-shadow .2s ease",
                }}
              />
              {/* honeypot */}
              <input type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true"
                     style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
              {error && (
                <div role="alert" style={{ fontFamily: typo.mono, fontSize: 12, color: pal.accent, letterSpacing: "0.06em" }}>
                  ⚠ {error}
                </div>
              )}
              {status === "ok" ? (
                <div style={{
                  padding: "20px 24px", background: `${pal.accent}18`,
                  border: `1px solid ${pal.accent}55`, color: pal.ink,
                  fontFamily: typo.mono, fontSize: 12, letterSpacing: "0.12em",
                  textAlign: "center", lineHeight: 1.6,
                }}>
                  ✓ {lang === "es" ? "Consulta recibida. Te contactamos a la brevedad." : "Message received. We'll be in touch shortly."}
                </div>
              ) : (
                <>
                  <button
                    type="submit"
                    disabled={status === "sending"}
                    className="ls-cta-primary"
                    style={{
                      padding: "18px 28px", background: status === "sending" ? pal.muted : pal.ink,
                      color: pal.inverseInk, border: "none", fontSize: 13, fontWeight: 600,
                      letterSpacing: "0.12em", textTransform: "uppercase",
                      cursor: status === "sending" ? "not-allowed" : "pointer", marginTop: 8,
                      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                      transition: "transform .15s ease, background .2s ease", opacity: status === "sending" ? 0.7 : 1,
                    }}
                  >
                    {status === "sending"
                      ? (lang === "es" ? "Enviando…" : "Sending…")
                      : (lang === "es" ? "Enviar consulta" : "Send message")}
                  </button>
                  {status === "error" && (
                    <div role="alert" style={{ fontFamily: typo.mono, fontSize: 11, color: pal.accent, letterSpacing: "0.06em", textAlign: "center" }}>
                      ⚠ {lang === "es" ? "Error al enviar. Intentá de nuevo." : "Send error. Please try again."}
                    </div>
                  )}
                  <div style={{ fontFamily: typo.mono, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: pal.muted, marginTop: 4, textAlign: "center" }}>
                    {con.submitHint}
                  </div>
                </>
              )}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer({ t }) {
  const { pal, typo } = t;
  const { lang } = useLang();
  const ft = I18N[lang].footer;
  return (
    <footer className="ls-section" style={{ background: pal.inverseBg, color: pal.inverseInk, padding: "72px 64px 32px" }}>
      <div className="ls-grid-footer" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48, marginBottom: 64 }}>
        <div>
          <span style={{ display: "inline-flex", background: "#fff", borderRadius: 6, padding: "8px 12px", lineHeight: 0 }}>
            <img src="logo.png" alt="Liquid Solutions Argentina" style={{ height: 44, width: "auto", display: "block" }} />
          </span>
          <p style={{ fontFamily: typo.body, fontSize: 14, lineHeight: 1.6, marginTop: 20, opacity: 0.7, maxWidth: 320 }}>
            {ft.desc}
          </p>
        </div>
        {ft.sections.map(([title, items], i) => (
          <div key={i}>
            <div style={{ fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: pal.accent, marginBottom: 18 }}>
              {title}
            </div>
            <div style={{ fontFamily: typo.body, fontSize: 14, lineHeight: 2, opacity: 0.85 }}>
              {items.map(([label, href], j) => (
                href ? (
                  <div key={j}>
                    <a href={href} className="ls-nav-link" style={{ color: "inherit", textDecoration: "none" }}>{label}</a>
                  </div>
                ) : (<div key={j}>{label}</div>)
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${pal.inverseInk}1f`, paddingTop: 24, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontFamily: typo.mono, fontSize: 11, letterSpacing: "0.14em", opacity: 0.5 }}>
        <span>{ft.copy}</span>
        <span style={{ display: "flex", gap: 24 }}>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>{ft.privacy}</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>{ft.terms}</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Stats, Equipment, Industries, Contact, Footer,
});