// es/services-page-es.jsx — Spanish Services Page override.
// Loaded AFTER services-page.jsx. Replaces window.ServicesPage with Spanish version.

const SERVICE_OFFERINGS_ES = [
  {
    n: "01",
    title: "Certificaciones Trazables",
    body: "Certificados de calibración trazables para tanques probadores, medidas de prueba, sistemas water draw y equipos del cliente — emitidos en coordinación con el INTI, trazables a OIML R117, API MPMS y NIST Handbook 105-3.",
    bullets: ["Certificado de calibración INTI", "Trazabilidad OIML R117 / API / NIST", "Bajo pedido: inspección testigo Bureau Veritas o SGS"],
    icon: "seal",
  },
  {
    n: "02",
    title: "Talleres y Capacitación",
    body: "Talleres de calibración prácticos para operadores de planta, técnicos de talleres de medidores y personal de metrología. Incluye uso de tanques probadores, procedimiento water draw, evaluación de exactitud y normas aplicables.",
    bullets: ["Programas de capacitación para operadores", "Revisión de normas (OIML / API MPMS)", "En sitio o en el taller de Buenos Aires"],
    icon: "document",
  },
  {
    n: "03",
    title: "Ingeniería Personalizada",
    body: "Cada producto Lonetti es a medida. Indique a nuestro equipo de ingeniería la restricción — peso, altura, diámetro, exactitud, tipo de válvula, montaje, jurisdicción — y diseñaremos la configuración.",
    bullets: ["Límites de peso / altura / diámetro", "Escalas graduadas especializadas", "Montaje en skid, tráiler o carrito", "Precios FOB / CIF"],
    icon: "cog",
  },
  {
    n: "04",
    title: "Envíos Internacionales",
    body: "Embalado para transporte internacional. Factura comercial, certificado de origen, certificado de calibración y fichas técnicas incluidos. Coordinamos con agentes de carga a puertos de destino en todo el mundo.",
    bullets: ["Embalaje para transporte internacional", "Kit de documentación completo", "Seguimiento de pedidos semanal / quincenal"],
    icon: "shipping",
  },
  {
    n: "05",
    title: "Tanques de Almacenamiento en Alquiler",
    body: "Planta con tanques de almacenamiento en alquiler sobre el Río Paraná, Argentina. 45.000 m³ con modulación según necesidades, puerto con profundidad natural para barcos Panamax, plataforma de carga para camiones cisterna.",
    bullets: ["45.000 m³ sobre el Río Paraná", "Puerto apto para Panamax", "Plataforma de carga para camiones cisterna"],
    icon: "factory",
  },
  {
    n: "06",
    title: "Asociaciones con Distribuidores",
    body: "Lonetti trabaja con empresas establecidas en países de destino para representar la marca localmente. Acceso a toda la gama de productos, recursos de marketing, capacitación y la red global Lonetti.",
    bullets: ["Exclusividad por país / región", "Soporte de marketing y técnico", "Capacitación e incorporación"],
    icon: "globe",
  },
];

const TRACEABILITY_FLOW_ES = [
  { label: "Norma internacional",    body: "OIML R117 · NIST Handbook 105-3 · API MPMS Cap. 4.4" },
  { label: "Instituto nacional",     body: "INTI (Argentina) — mantiene los estándares de referencia nacionales" },
  { label: "Taller Lonetti",         body: "Cada instrumento calibrado contra referencias trazables al INTI" },
  { label: "Su medidor",             body: "Certificado, trazable, listo para auditoría de custody transfer" },
];

function ServicesHeroES() {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 80, position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>Nuestros servicios</div>
            <h1 style={{ color: "#fff", maxWidth: "16ch" }}>
              Servicios de calibración y <span style={{ color: "var(--red)" }}>certificaciones trazables</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "52ch" }}>
              Más allá de la fabricación. Lonetti provee calibración trazable INTI, talleres prácticos,
              ingeniería personalizada, envíos internacionales y capacidad de almacenamiento en nuestra planta del Río Paraná.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#contact">Hablar con nosotros <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="#offerings">Explorar servicios</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/3", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.technicians} alt="Técnicos Lonetti en el taller de Buenos Aires"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(11,15,26,0.5) 100%)" }}/>
            <div style={{ position: "absolute", bottom: 18, left: 18, color: "#fff", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Taller Buenos Aires
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceOfferingsES() {
  return (
    <section id="offerings">
      <div className="container">
        <SectionHead
          eyebrow="Cartera de servicios"
          h2="Seis formas en que Lonetti apoya su programa de medición."
          lede="Desde el certificado de calibración que acompaña cada producto hasta asociaciones de representación y alquiler de almacenamiento — Lonetti es más que un fabricante de tanques."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {SERVICE_OFFERINGS_ES.map((s) => (
            <div key={s.title} style={{
              padding: "36px 32px",
              borderRight: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              background: "#fff",
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)" }}>{s.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={s.icon} size={22}/>
                </div>
              </div>
              <h3 className="h3" style={{ fontSize: 22, marginBottom: 14 }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 20 }}>{s.body}</p>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                {s.bullets.map((b) => (
                  <li key={b} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text-2)" }}>
                    <Icon name="check" size={14} stroke="var(--red)" strokeWidth={2}/>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertificationOptionsES() {
  const certs = [
    {
      name: "Certificación Lonetti®",
      logo: "images/Lonetti-logo-red.png",
      body: "En Lonetti, las pruebas y calibración meticulosas de cada producto son nuestra máxima prioridad. Nuestro riguroso proceso de calibración sigue normas trazables al NIST. Cada medida de prueba, tanque probador, water draw y otros productos se entrega con un certificado de calibración de fábrica.",
      url: "info@lonetti.com.ar",
    },
    {
      name: "INTI",
      logo: "images/INTI-logo.png",
      body: "Lonetti se asocia con el Instituto Nacional de Tecnología Industrial (INTI) para calibraciones acreditadas de medidas de prueba y probadores. Nuestra certificación cumple con OIML R-120, API y NIST Handbook 105-3.",
      url: "inti.gob.ar",
    },
    {
      name: "Bureau Veritas",
      logo: "images/Bureau-Veritas-logo.png",
      body: "Lonetti se asocia con Bureau Veritas para pruebas y análisis exhaustivos. Los productos se someten a un examen riguroso siguiendo OIML R-120, API y NIST Handbook 105-3. Los informes Bureau Veritas brindan garantía de calidad y cumplimiento internacional.",
      url: "bureauveritas.com.ar",
    },
    {
      name: "SGS",
      logo: "images/SGS-logo.png",
      body: "Bajo pedido, Lonetti colabora con SGS para servicios de inspección, prueba y certificación — asegurando el cumplimiento de OIML R-120, API y NIST Handbook 105-3. Calidad, seguridad y desempeño garantizados.",
      url: "ar.sgs.com",
    },
  ];
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Opciones de certificación"
          h2="Elija el organismo de certificación que se ajuste a su requisito de auditoría."
          lede="Cada producto Lonetti se entrega con un certificado de calibración de fábrica. Para licitaciones reguladas, solicite inspección testigo adicional por tercero independiente."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {certs.map((c) => (
            <div key={c.name} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 6, padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
              <div style={{ height: 56, display: "flex", alignItems: "center" }}>
                <img src={c.logo} alt={c.name} style={{ maxHeight: 56, maxWidth: 140, objectFit: "contain" }}/>
              </div>
              <h3 className="h3" style={{ fontSize: 19 }}>{c.name}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6 }}>{c.body}</p>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)", marginTop: "auto" }}>{c.url}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TraceabilitySectionES() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="El camino de la precisión"
          h2="Entendiendo la trazabilidad en la medición."
          lede="La trazabilidad es la cadena documentada que vincula la lectura de su instrumento con una norma internacional reconocida. Es cómo sabe que su medición es real, y cómo un auditor puede verificarla."
        />
        <div style={{
          marginTop: 64, display: "grid", gridTemplateColumns: `repeat(${TRACEABILITY_FLOW_ES.length}, 1fr) auto`,
          alignItems: "stretch",
        }}>
          {TRACEABILITY_FLOW_ES.map((step, i) => (
            <React.Fragment key={step.label}>
              <div style={{
                padding: "28px 24px",
                border: "1px solid rgba(255,255,255,0.18)",
                borderRadius: 6,
                background: "rgba(255,255,255,0.04)",
                display: "flex", flexDirection: "column",
              }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)", marginBottom: 18 }}>PASO 0{i + 1}</div>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18, color: "#fff", marginBottom: 12 }}>{step.label}</div>
                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>{step.body}</div>
              </div>
              {i < TRACEABILITY_FLOW_ES.length - 1 && (
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 8px", color: "var(--red)" }}>
                  <Icon name="arrow" size={18}/>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function StorageRentalSectionES() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "4/3", borderRadius: 6, overflow: "hidden", background: "var(--navy-2)" }}>
            <img src={LONETTI_PHOTOS.fuelStorage} alt="Tanques de almacenamiento sobre el Río Paraná, Argentina"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Almacenamiento en alquiler</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 24, maxWidth: "16ch" }}>
              ¿Necesita un tanque de almacenamiento en el Paraná?
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              45.000 m³ con modulación según necesidades. La planta tiene un puerto con profundidad natural que permite
              el atraque de barcos Panamax, y está ubicada junto a una ruta nacional importante con acceso a todas las rutas argentinas.
              Ideal para transferencia a barcazas de menor calado para navegar hacia Paraguay y Brasil.
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {[
                "45.000 m³ capacidad de tanques",
                "Puerto apto para Panamax",
                "Plataforma de carga para camiones",
                "Ruta nacional adyacente",
                "Transferencia a barcazas Paraguay / Brasil",
                "Paquetes de volumen modulares",
              ].map((b) => (
                <li key={b} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--text)" }}>
                  <Icon name="check" size={16} stroke="var(--red)" strokeWidth={2}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <a className="btn btn-ghost-dark" href="#contact" style={{ marginTop: 32 }}>
              Consultar almacenamiento <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomCapabilitiesSectionES() {
  const items = [
    "Límites de peso, altura, diámetro",
    "Lecturas intermedias (p. ej. tanque de 500L con marcas de ~100L)",
    "Capacidad de carga ventral",
    "Lector nominal cero",
    "Bomba de retorno integrada",
    "Sistemas presurizados",
    "Mayor exactitud y sensibilidad (cuellos más estrechos)",
    "Válvulas esféricas o de mariposa, bridadas o roscadas",
    "Incertidumbre reducida",
    "Escalas graduadas especializadas",
    "Tubos de llenado opcionales (antiespuma)",
    "Recipientes con cuello (anti-salpicaduras)",
    "Cuerpo bridado para acceso de limpieza",
    "Placas de identificación / escalas en cualquier idioma",
    "Montaje en skid, tráiler o carrito",
    "Tráiler + suspensión, frenos, luces",
    "Servicios de instalación local",
    "Juegos personalizados con capacidades variadas",
    "Precios FOB / CIF",
    "Seguimiento de pedidos semanal o quincenal",
  ];
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Soluciones a medida"
          h2="Descubra el enfoque flexible de Lonetti."
          lede="En Lonetti, nos enorgullecemos de ofrecer soluciones flexibles y personalizadas para cada necesidad de medición de precisión. Con profundo conocimiento de diversas industrias, adaptamos los instrumentos a sus normas y reglamentos."
        />
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {items.map((it, i) => (
            <div key={it} style={{
              padding: "20px 22px",
              borderRight: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              background: "#fff",
              display: "flex", alignItems: "center", gap: 12,
              fontSize: 14, color: "var(--text-2)",
            }}>
              <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", minWidth: 22 }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesPageES() {
  return (
    <>
      <Nav active="services"/>
      <main>
        <ServicesHeroES/>
        <ServiceOfferingsES/>
        <CertificationOptionsES/>
        <TraceabilitySectionES/>
        <StorageRentalSectionES/>
        <CustomCapabilitiesSectionES/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { ServicesPage: ServicesPageES });