// es/homepage-es.jsx — Spanish Homepage override.
// Loaded AFTER homepage.jsx. Replaces window.Homepage with Spanish version.

const PRODUCTS_ES = [
  { name: "Tanques Probadores",    tag: "50L – 5.000L+",  desc: "Recipientes volumétricos de acero inoxidable para calibración de medidores y custody transfer.",                      art: "tank",    photo: LONETTI_PHOTOS.proverTank,          href: "es/tanques-probadores" },
  { name: "Medidas de Prueba / Medidas Patrón", tag: "1L – 50L",        desc: "Latas de calibración portátiles para verificación de surtidores y medidores en campo.",                              art: "measure", photo: LONETTI_PHOTOS.testMeasure_polished, href: "es/medidas-de-prueba" },
  { name: "Sistemas Water Draw",   tag: "Probadores",      desc: "Sistemas completos de water draw gravimétrico y volumétrico para calibración de probadores de tubería.",              art: "water",   photo: LONETTI_PHOTOS.waterDraw,            href: "es/sistemas-water-draw" },
  { name: "Torres para Cisternas", tag: "Multicámara",     desc: "Torres multicámara para verificación de cisternas de transporte de líquidos.",                                        art: "tower",   photo: LONETTI_PHOTOS.tankerTower,          href: "es/torres-calibracion-cisternas" },
  { name: "Bancos de Calibración", tag: "Fijo / móvil",   desc: "Bancos de prueba a medida para verificación de medidores en laboratorio y taller.",                                    art: "bench",   photo: LONETTI_PHOTOS.testBench,            href: "es/bancos-calibracion" },
  { name: "Furgones MINILAB®",     tag: "Lab móvil",       desc: "Laboratorios de calibración móviles autónomos instalados en un furgón. Trazables, en cualquier lugar.",               art: "lab",     photo: LONETTI_PHOTOS.minilab,              href: "es/minilab" },
];

const ART_MAP_ES = {
  tank: ProverTankArt, measure: TestMeasureArt, water: WaterDrawArt,
  tower: TankerTowerArt, bench: TestBenchArt, lab: MinilabArt,
};

const INDUSTRIES_ES = [
  { name: "Petróleo y Gas",             blurb: "Custody transfer, medición fiscal y cumplimiento API MPMS para refinerías y terminales.",                  icon: "factory", n: "01", href: "es/industrias/petroleo-gas" },
  { name: "Industria Química",          blurb: "Calibración de proceso en acero inoxidable 304/316 para líquidos agresivos y corrosivos.",                  icon: "droplet", n: "02", href: "es/industrias/industria-quimica" },
  { name: "Agua y Servicios Públicos",  blurb: "Verificación de la medición volumétrica de agua para empresas de servicios públicos y plantas de tratamiento.", icon: "droplet", n: "03", href: "es/industrias/agua-servicios" },
  { name: "Metrología Legal",           blurb: "Equipos de referencia e instrumentos de campo para organismos nacionales de pesas y medidas.",              icon: "seal",    n: "04", href: "industry-government-metrology.html" },
];

const WHY_ES = [
  { title: "Fabricación a Medida",       n: "01", body: "Cada tanque Lonetti se fabrica según sus especificaciones exactas. Cualquier capacidad, geometría y norma." },
  { title: "Cumplimiento OIML y API",    n: "02", body: "Todos los productos cumplen con OIML R117, API MPMS Cap. 4.4 y los requisitos del NIST Handbook 105-3." },
  { title: "Envíos Internacionales",     n: "03", body: "Exportamos a 47 países — embalaje completo, certificados de origen y coordinación de flete incluidos." },
  { title: "Certificación Trazable",     n: "04", body: "Certificados de calibración emitidos en coordinación con el INTI, trazables a normas internacionales." },
];

const CERTS_ES = ["OIML", "API MPMS", "INTI", "INMETRO", "ISO 9001", "NIST"];

const BLOG_ES = [
  { tag: "Guía de compra", date: "28 Abr 2026", read: "9 min",
    title: "Cómo seleccionar el tanque probador adecuado: Guía completa para el comprador",
    excerpt: "Capacidad, clase de exactitud, especificación de material y certificación — las cuatro decisiones que determinan si su tanque probador servirá para una aplicación de custody transfer." },
  { tag: "Técnico",         date: "14 Abr 2026", read: "12 min",
    title: "API MPMS Capítulo 4.4 explicado: Lo que los operadores necesitan saber",
    excerpt: "El capítulo que rige la construcción, calibración y uso de tanques probadores — traducido del lenguaje normativo a guía práctica para operadores." },
  { tag: "Comparativa",     date: "30 Mar 2026", read: "7 min",
    title: "Water draw vs. probación volumétrica: Diferencias clave",
    excerpt: "Cuándo utilizar cada método y qué equipos Lonetti son compatibles con ambos — escrito para ingenieros de medición de refinerías y técnicos de talleres de medidores." },
];

/* ─── Hero ES ─────────────────────────────────────────────────────────── */
function HeroES({ heroVariant }) {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 0, position: "relative", overflow: "hidden" }}>
      {heroVariant === "photo" && (
        <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
          <img src={LONETTI_PHOTOS.proverTank} alt="Tanque probador Lonetti sobre ruedas"
            style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(11,15,26,0.94) 0%, rgba(11,15,26,0.82) 36%, rgba(11,15,26,0.45) 66%, rgba(11,15,26,0.12) 100%)" }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 65%, rgba(11,15,26,0.7) 100%)" }}/>
        </div>
      )}
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 56 }}>
          <span className="chip on-dark"><span className="chip-dot"/> Exportando a todo el mundo</span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(255,255,255,0.5)", textTransform: "uppercase" }}>
            Cat. 2026 · Rev 04
          </span>
        </div>
        <HeroPhotoES/>
      </div>
      {/* Trust bar */}
      <div style={{
        marginTop: 96,
        borderTop: "1px solid rgba(255,255,255,0.12)",
        borderBottom: "1px solid rgba(255,255,255,0.12)",
        background: "rgba(0,0,0,0.5)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        position: "relative", zIndex: 1,
      }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              { stat: "Desde 1960",         label: "Fundados en Buenos Aires" },
              { stat: "47",                 label: "Países en todo el mundo" },
              { stat: "Certificado OIML",   label: "R117 / API MPMS certificado" },
              { stat: "Acero Inox 304",     label: "Material de construcción estándar" },
            ].map((s, i) => (
              <div key={s.stat} style={{
                padding: "28px 24px",
                borderLeft: i === 0 ? 0 : "1px solid rgba(255,255,255,0.1)",
              }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff", lineHeight: 1 }}>
                  {s.stat}
                </div>
                <div style={{ marginTop: 8, fontSize: 13, color: "rgba(255,255,255,0.6)" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroPhotoES() {
  return (
    <div style={{ position: "relative", minHeight: 560, padding: "56px 0 64px" }}>
      <div style={{ maxWidth: 720 }}>
        <div className="eyebrow on-dark" style={{ marginBottom: 24 }}>Instrumentos de precisión · Fund. 1960</div>
        <h1 style={{ color: "#fff", maxWidth: "12ch" }}>
          Equipos de Calibración de Líquidos de Precisión{" "}
          <span style={{ color: "var(--red)" }}>Desde 1960</span>.
        </h1>
        <p className="lede" style={{ marginTop: 28, color: "rgba(255,255,255,0.72)", maxWidth: "52ch" }}>
          Tanques Probadores · Medidas de Prueba · Sistemas Water Draw · Torres de Calibración
        </p>
        <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
          <a className="btn btn-primary" href="#quote">
            Solicitar Cotización <Icon name="arrow" size={16} stroke="#fff" />
          </a>
          <a className="btn btn-ghost-light" href="#products">
            Ver Productos <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>
    </div>
  );
}

/* ─── Products Section ES ─────────────────────────────────────────────── */
function ProductsSectionES() {
  return (
    <section id="products">
      <div className="container">
        <SectionHead
          eyebrow="Línea de productos"
          h2="Equipos de calibración para cada aplicación."
          lede="Desde medidas de prueba portátiles de 1L hasta torres de calibración multicámara para flotas de cisternas — cada producto Lonetti se fabrica en acero inoxidable, certificado a normas internacionales y personalizado para su aplicación."
          cta={{ label: "Catálogo completo", href: "#" }}
        />
        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          border: "1px solid var(--line)",
          borderRadius: 6,
          overflow: "hidden",
        }}>
          {PRODUCTS_ES.map((p, i) => {
            const ArtComp = ART_MAP_ES[p.art];
            const isRightEdge = (i + 1) % 3 === 0;
            const isBottomRow = i >= 3;
            return (
              <a key={p.name} href={p.href} className="prod-card" style={{
                display: "flex", flexDirection: "column",
                padding: "0 0 28px",
                background: "#fff",
                borderRight: isRightEdge ? 0 : "1px solid var(--line)",
                borderTop: isBottomRow ? "1px solid var(--line)" : 0,
                position: "relative", overflow: "hidden",
                transition: "background 200ms ease",
              }}>
                <div style={{
                  height: 240,
                  background: p.photo ? "var(--bg-mid)" : "var(--bg-alt)",
                  position: "relative", overflow: "hidden",
                  borderBottom: "1px solid var(--line)",
                }}>
                  {p.photo ? (
                    <img src={p.photo} alt={p.name} loading="lazy"
                      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                  ) : (
                    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--charcoal)" }}>
                      <ArtComp size={200}/>
                    </div>
                  )}
                  <span className="chip" style={{
                    position: "absolute", top: 14, left: 14, background: "rgba(255,255,255,0.95)",
                    backdropFilter: "blur(4px)",
                  }}>
                    0{i + 1} / {p.tag}
                  </span>
                </div>
                <div style={{ padding: "24px 28px 0", display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                    <h3 className="h3" style={{ margin: 0 }}>{p.name}</h3>
                    <Icon name="arrow" size={16} stroke="var(--text-3)"/>
                  </div>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.6 }}>{p.desc}</p>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        .prod-card:hover { background: var(--bg-alt) !important; }
        .prod-card:hover h3 { color: var(--red); }
      `}</style>
    </section>
  );
}

/* ─── Industries Section ES ───────────────────────────────────────────── */
function IndustriesSectionES() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Industrias"
          h2="Servimos a las industrias que necesitan exactitud."
          lede="Equipos Lonetti en servicio en YPF, ExxonMobil, Petrobras y refineras Shell — además de institutos nacionales de metrología y empresas de agua en cuatro continentes."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {INDUSTRIES_ES.map((ind, i) => (
            <a key={ind.name} href={ind.href} style={{
              display: "flex", flexDirection: "column",
              padding: 28,
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 6,
              position: "relative",
              transition: "all 200ms ease",
              minHeight: 280,
              textDecoration: "none",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--navy)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
            >
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)" }}>{ind.n}</span>
                <div style={{ width: 44, height: 44, borderRadius: 4, background: "var(--bg-alt)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--navy)" }}>
                  <Icon name={ind.icon} size={22}/>
                </div>
              </div>
              <div style={{ flex: 1 }}/>
              <h3 className="h3" style={{ fontSize: 20, marginBottom: 10 }}>{ind.name}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.55 }}>{ind.blurb}</p>
              <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 8, color: "var(--red)", fontSize: 13, fontWeight: 500 }}>
                <span>Ver industria</span><Icon name="arrow" size={14} stroke="var(--red)"/>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Why Section ES ──────────────────────────────────────────────────── */
function WhySectionES() {
  return (
    <section className="surface-dark" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} className="grid-bg"/>
      <div className="container" style={{ position: "relative" }}>
        <SectionHead
          dark
          eyebrow="¿Por qué Lonetti?"
          h2="Precisión, confiabilidad y fabricación a medida — desde Buenos Aires para el mundo."
          lede="Nuestros clientes vuelven porque el equipo dura más que los contratos. Fabricado a medida, certificado y revisado por el mismo taller que entregó el primer probador de Exxon Mobil en 1960."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.14)" }}>
          {WHY_ES.map((w, i) => (
            <div key={w.title} style={{
              padding: "40px 28px 32px",
              borderRight: i < WHY_ES.length - 1 ? "1px solid rgba(255,255,255,0.1)" : 0,
              borderBottom: "1px solid rgba(255,255,255,0.14)",
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)", marginBottom: 36 }}>{w.n}</div>
              <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 22, color: "#fff", marginBottom: 14, letterSpacing: "-0.01em" }}>
                {w.title}
              </h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.65)" }}>{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Certifications Section ES ───────────────────────────────────────── */
function CertificationsSectionES() {
  return (
    <section style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ maxWidth: 360 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Certificaciones y normas</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 24, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--text)", margin: 0, lineHeight: 1.3 }}>
              Todos los productos Lonetti son trazables a normas metrológicas nacionales e internacionales.
            </h3>
          </div>
          <div data-mobile-cols="2" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
            {CERTS_ES.map((c, i) => (
              <div key={c} style={{
                padding: "28px 12px", textAlign: "center",
                borderRight: i < CERTS_ES.length - 1 ? "1px solid var(--line)" : 0,
                fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 18, letterSpacing: "0.04em",
                color: "var(--text)",
              }}>{c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Reference Section ES ────────────────────────────────────────────── */
function ReferenceSectionES() {
  return (
    <section style={{ background: "var(--bg-alt)", paddingTop: 96, paddingBottom: 96 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Instalaciones de referencia</div>
            <h2 className="h2" style={{ fontSize: 40, maxWidth: "18ch", marginBottom: 24 }}>
              Confiado por empresas petroleras en 47 países.
            </h2>
            <p className="lede" style={{ marginBottom: 32 }}>
              Desde el primer pedido de Exxon Mobil en 1960 hasta los despliegues actuales con YPF, Petrobras y Shell —
              los equipos Lonetti sirven en refinerías, terminales e institutos de metrología en cuatro continentes.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              {["YPF", "ExxonMobil", "Petrobras", "Shell", "TotalEnergies", "Pluspetrol", "Axion", "INTI"].map((n) => (
                <span key={n} className="chip">{n}</span>
              ))}
            </div>
          </div>
          <WorldMap/>
        </div>
      </div>
    </section>
  );
}

/* ─── Blog Section ES ─────────────────────────────────────────────────── */
function BlogSectionES() {
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Blog y base de conocimiento"
          h2="Perspectivas técnicas del equipo de ingeniería."
          lede="Normas explicadas en lenguaje claro, guías de compra y notas de campo de seis décadas de práctica de calibración."
          cta={{ label: "Todos los artículos", href: "#" }}
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {BLOG_ES.map((b, i) => {
            const blogPhoto = [LONETTI_PHOTOS.proverTank, LONETTI_PHOTOS.waterDraw, LONETTI_PHOTOS.testMeasure][i];
            return (
              <a key={b.title} href="#" style={{
                display: "flex", flexDirection: "column",
                border: "1px solid var(--line)",
                borderRadius: 6,
                background: "#fff",
                overflow: "hidden",
                transition: "all 200ms ease",
                textDecoration: "none",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--charcoal)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                <div style={{ aspectRatio: "16/10", background: "var(--bg-mid)", position: "relative", overflow: "hidden" }}>
                  <img src={blogPhoto} alt={b.title} loading="lazy"
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 100%)" }}/>
                  <span className="chip on-dark" style={{ position: "absolute", top: 16, left: 16, background: "rgba(11,15,26,0.7)", backdropFilter: "blur(6px)" }}>{b.tag}</span>
                </div>
                <div style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text-3)", textTransform: "uppercase" }}>
                    {b.date} · {b.read} de lectura
                  </div>
                  <h3 className="h3" style={{ fontSize: 19, lineHeight: 1.3 }}>{b.title}</h3>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.55 }}>{b.excerpt}</p>
                  <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 8, color: "var(--red)", fontSize: 13, fontWeight: 500 }}>
                    <span>Seguir leyendo</span><Icon name="arrow" size={14} stroke="var(--red)"/>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── CTA Quote Section ES ────────────────────────────────────────────── */
function CtaQuoteSectionES() {
  const [submitted, setSubmittedES] = React.useState(false);
  const [loading, setLoadingES] = React.useState(false);
  const [serverError, setServerErrorES] = React.useState(null);
  const [errors, setErrorsES] = React.useState({});
  const [data, setDataES] = React.useState({ name: "", company: "", country: "", email: "", product: "", message: "" });

  const onSubmit = async (e) => {
    e.preventDefault();
    const next = {};
    ["name", "company", "country", "email"].forEach((k) => { if (!data[k]) next[k] = "Requerido"; });
    if (data.email && !/^\S+@\S+\.\S+$/.test(data.email)) next.email = "Email inválido";
    setErrorsES(next);
    if (Object.keys(next).length > 0) return;
    setLoadingES(true);
    setServerErrorES(null);
    try {
      await submitForm({ ...data, _subject: `Solicitud de cotización — ${data.product || "General"} — ${data.company}` });
      setSubmittedES(true);
    } catch {
      setServerErrorES("Algo salió mal. Por favor intente nuevamente o envíenos un email a info@lonetti.com.ar");
    } finally {
      setLoadingES(false);
    }
  };

  const field = (k, label, type = "text") => (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>{label}</span>
      <input type={type} value={data[k]} onChange={(e) => setDataES({...data, [k]: e.target.value})}
        style={{
          padding: "12px 14px", background: "rgba(255,255,255,0.08)",
          border: `1px solid ${errors[k] ? "#FFDC8A" : "rgba(255,255,255,0.2)"}`,
          borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)",
        }}/>
      {errors[k] && <span style={{ fontSize: 11, color: "#FFDC8A" }}>{errors[k]}</span>}
    </label>
  );

  return (
    <section id="quote" style={{ background: "var(--red)", color: "#fff", padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.08, pointerEvents: "none",
        backgroundImage: "linear-gradient(45deg, #fff 1px, transparent 1px)",
        backgroundSize: "10px 10px",
      }}/>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow on-dark" style={{ color: "#fff", opacity: 0.7, marginBottom: 24 }}>Hablar con ingeniería</div>
            <h2 className="h2" style={{ color: "#fff", maxWidth: "14ch", marginBottom: 28, fontSize: "clamp(40px, 4.4vw, 64px)" }}>
              ¿Listo para mejorar su medición de líquidos?
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", marginBottom: 36 }}>
              Envíenos su caudal requerido, clase de exactitud y las normas que debe cumplir. Devolvemos una configuración y cotización en dos días hábiles.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, color: "rgba(255,255,255,0.9)", fontSize: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="whatsapp" size={20}/>
                <span><b>WhatsApp:</b> +54 9 11 2788 4190 · EN / ES / PT</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="mail" size={20}/>
                <span><b>Email:</b> info@lonetti.com.ar</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="pin" size={20}/>
                <span><b>Taller:</b> Buenos Aires, Argentina</span>
              </div>
            </div>
          </div>

          {submitted ? (
            <div style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 6, padding: 36, minHeight: 480, display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "#fff", color: "var(--red)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                <Icon name="check" size={28} stroke="var(--red)" strokeWidth={2}/>
              </div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 28, color: "#fff", marginBottom: 12 }}>Solicitud recibida.</h3>
              <p style={{ margin: 0, color: "rgba(255,255,255,0.85)" }}>Un ingeniero se pondrá en contacto dentro de dos días hábiles. Para requisitos urgentes, escríbanos por WhatsApp.</p>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ background: "rgba(0,0,0,0.18)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 6, padding: 36, display: "flex", flexDirection: "column", gap: 18 }}>
              <div className="eyebrow on-dark" style={{ color: "#fff", opacity: 0.85, marginBottom: 4 }}>Solicitud de cotización</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {field("name", "Nombre completo")}
                {field("company", "Empresa")}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {field("country", "País")}
                {field("email", "Email laboral", "email")}
              </div>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Producto de interés</span>
                <select value={data.product} onChange={(e) => setDataES({...data, product: e.target.value})}
                  style={{ padding: "12px 14px", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)" }}>
                  <option value="" style={{ color: "#333" }}>Seleccionar…</option>
                  {PRODUCTS_ES.map((p) => <option key={p.name} value={p.name} style={{ color: "#333" }}>{p.name}</option>)}
                  <option value="Otro" style={{ color: "#333" }}>Otro / no estoy seguro</option>
                </select>
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Requerimientos (opcional)</span>
                <textarea rows="3" value={data.message} onChange={(e) => setDataES({...data, message: e.target.value})}
                  placeholder="Capacidad, clase de exactitud, normas requeridas, aplicación…"
                  style={{ padding: "12px 14px", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)", resize: "vertical" }}/>
              </label>
              {serverError && (
                <p style={{ margin: 0, fontSize: 13, color: "#FFDC8A", background: "rgba(255,220,138,0.1)", padding: "10px 14px", borderRadius: 4 }}>{serverError}</p>
              )}
              <button type="submit" disabled={loading} style={{
                marginTop: 6, padding: "14px 22px", background: loading ? "rgba(255,255,255,0.6)" : "#fff", color: "var(--red)",
                border: 0, borderRadius: 4, fontFamily: "var(--f-body)", fontSize: 14,
                fontWeight: 700, letterSpacing: "0.01em", display: "inline-flex", justifyContent: "center", alignItems: "center", gap: 10,
                cursor: loading ? "not-allowed" : "pointer",
              }}>
                {loading ? "Enviando…" : <><span>Enviar solicitud</span><Icon name="arrow" size={16} stroke="var(--red)"/></>}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─── Homepage ES root ────────────────────────────────────────────────── */
function HomepageES({ tweaks }) {
  return (
    <>
      <Nav active="home"/>
      <main>
        <HeroES heroVariant={tweaks ? tweaks.heroVariant : "photo"}/>
        <ProductsSectionES/>
        <IndustriesSectionES/>
        <WhySectionES/>
        <CertificationsSectionES/>
        <ReferenceSectionES/>
        <BlogSectionES/>
        <CtaQuoteSectionES/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { Homepage: HomepageES, CtaQuoteSection: CtaQuoteSectionES });
