// industry-page.jsx — Industry landing pages for Lonetti
// Loaded after shared.jsx, homepage.jsx. Exposes IndustryPage and INDUSTRY_DATA on window.

const IP_LOCALE = window.location.pathname.includes('/es/') ? 'es'
               : window.location.pathname.includes('/pt/') ? 'pt'
               : 'en';
const IP_CONTACT = IP_LOCALE === 'es' ? 'es/contacto' : IP_LOCALE === 'pt' ? 'pt/contato' : 'contact.html';
const IP_REQUEST_QUOTE = IP_LOCALE === 'es' ? 'Solicitar Cotización' : IP_LOCALE === 'pt' ? 'Solicitar Cotação' : 'Request a Quote';

/* ─── Industry Data ─────────────────────────────────────────────────── */
const INDUSTRY_DATA = {
  "oil-gas": {
    slug: "oil-gas",
    active: "industries",
    h1: "Liquid Calibration Equipment for the Petroleum Industry",
    eyebrow: "Industry · Oil & Gas / Petroleum",
    lede: "Custody transfer accuracy and fiscal metering compliance across refineries, terminals, and pipeline infrastructure — Lonetti equipment in service with YPF, ExxonMobil, Shell, and Petrobras since 1960.",
    heroPhoto: "proverTank_outdoor",
    heroStats: [
      { stat: "65+",     label: "Years serving petroleum" },
      { stat: "API MPMS",label: "Ch. 4.4 & 4.9 certified" },
      { stat: "47",      label: "Countries of deployment" },
      { stat: "±0.05%",  label: "Measurement accuracy" },
    ],
    overviewEyebrow: "The measurement challenge",
    overviewH2: "Custody transfer accuracy is the law in petroleum.",
    overviewParas: [
      "In the petroleum industry, every liter measured at a transfer point has a dollar value. Refineries, terminals, and pipeline operators are legally required to use traceable, certified measurement equipment for custody transfer — the process of transferring ownership of a liquid product from one party to another.",
      "Incorrect calibration means incorrect billing. Over the volumes moved by a petroleum terminal, even a 0.1% error represents significant monetary loss. Regulatory frameworks (API MPMS, OIML R117, NIST) define exactly what accuracy class, traceability, and documentation is required.",
      "Lonetti has supplied calibration equipment to the petroleum industry since our first Exxon Mobil order in 1960. Our products are built to the API and OIML standards that govern custody transfer — calibrated by INTI and traceable to international metrology references.",
    ],
    challenges: [
      { n: "01", title: "Custody transfer accuracy",    body: "Prove meter accuracy to the legal standard required by your jurisdiction and trading counterparty. API MPMS, OIML R117, or NIST HB 105-3." },
      { n: "02", title: "Fiscal metering compliance",    body: "Demonstrate to tax authorities that your meters are within tolerance. A traceable calibration certificate is the documentary evidence." },
      { n: "03", title: "Fleet and tanker verification", body: "Verify individual compartments of tanker trucks, railcars, and vessels at your terminal. Multi-tier tower systems handle entire fleets." },
      { n: "04", title: "Pipe prover base volume",       body: "Establish and periodically re-verify the base volume of pipe provers per API MPMS Ch. 4.9 — using water draw calibration." },
    ],
    products: ["prover-tanks", "water-draw-systems", "tanker-truck-calibration-towers", "calibration-test-benches", "minilab"],
    standards: [
      { code: "API MPMS Ch. 4.4",  full: "Tank Provers — design, construction, and use" },
      { code: "API MPMS Ch. 4.9",  full: "Methods of Calibration of Tank Provers by Water Draw" },
      { code: "OIML R117",         full: "Dynamic Measuring Systems for Liquids Other Than Water" },
      { code: "NIST HB 105-3",     full: "Specifications for Field Standard Weights and Measures" },
      { code: "API MPMS Ch. 12.2", full: "Calculation of Petroleum Quantities — volume correction factors" },
      { code: "INTI",              full: "Argentina National Metrology Institute — traceable calibration certificates" },
    ],
    applications: [
      { title: "Refinery terminals",       body: "Prover tanks for custody transfer of crude and refined products at loading racks and marine terminals." },
      { title: "Pipeline takeoffs",        body: "MINILAB® vans and test benches for periodic proving of turbine and PD meters at remote pipeline stations." },
      { title: "Tanker truck fleets",      body: "Calibration towers for annual compartment verification of petroleum tanker trucks and road cisterns." },
      { title: "Gas station inspection",   body: "Test measures for weights & measures inspectors verifying fuel dispenser accuracy at retail stations." },
      { title: "Aviation fuel operations", body: "Stainless steel test measures and prover tanks for jet fuel volume verification at airports." },
      { title: "LPG distribution",         body: "Pressurized prover tank configurations for LPG custody transfer and tanker truck calibration." },
    ],
    clients: ["YPF", "Shell", "Petrobras", "Axion Energy", "Esso", "Air BP"],
    clientChips: ["YPF", "ExxonMobil", "Petrobras", "Shell", "TotalEnergies", "Pluspetrol", "Axion", "Air BP"],
    faq: [
      {
        q: "What is custody transfer measurement in the petroleum industry?",
        a: "Custody transfer is the process of measuring liquid volume when ownership changes hands — at a pipeline takeoff, terminal loading arm, or tanker truck filling point. The measurement must be traceable to a recognized standard (API MPMS, OIML R117) and certified by an accredited laboratory. Lonetti prover tanks and test measures are the reference instruments used to prove that custody transfer meters are accurate.",
      },
      {
        q: "Which Lonetti products are used in oil refineries and petroleum terminals?",
        a: "The most common configuration at a petroleum terminal is a Lonetti prover tank (50L–5,000L) for proving loading rack meters, combined with a water draw system for pipe prover base-volume determination. Tanker truck calibration towers are installed at terminals with large road tanker fleets. MINILAB® vans serve remote pipeline stations where meters cannot be removed from service.",
      },
      {
        q: "What API MPMS standards do Lonetti products comply with?",
        a: "Lonetti prover tanks and water draw systems are designed and manufactured to API MPMS Chapter 4.4 (Tank Provers) and Chapter 4.9 (Calibration of Provers by Water Draw). Test measures comply with NIST Handbook 105-3. All products carry INTI calibration certificates traceable to international metrology standards.",
      },
      {
        q: "How do you calibrate a flow meter at a petroleum terminal?",
        a: "A flow meter is calibrated by passing a known volume of liquid through it and comparing the meter's reading to the certified volume of a prover tank or test measure. At a petroleum terminal, a Lonetti prover tank is connected downstream of the meter under test; product flows through the meter and fills the prover to its certified mark. The difference between the meter reading and the tank volume gives the meter factor.",
      },
    ],
    ctaTitle: "Calibrating petroleum meters? Talk to our engineering team.",
  },

  "water-utilities": {
    slug: "water-utilities",
    active: "industries",
    h1: "Calibration Equipment for Water Treatment & Utilities",
    eyebrow: "Industry · Water & Utilities",
    lede: "Bulk water flow measurement verification for public utilities, treatment plants, and regulatory inspectors — built in 304 stainless steel, certified to OIML R117.",
    heroPhoto: "waterDraw",
    heroStats: [
      { stat: "OIML R117", label: "Dynamic liquid measurement" },
      { stat: "±0.05%",    label: "Volumetric accuracy" },
      { stat: "304 SS",    label: "Standard construction" },
      { stat: "INTI",      label: "Traceable certification" },
    ],
    overviewEyebrow: "The measurement challenge",
    overviewH2: "Accurate water measurement underpins billing, compliance, and conservation.",
    overviewParas: [
      "Water utilities bill millions of customers based on metered consumption. Municipal authorities track network losses. Regulators require verified measurement to enforce environmental and trade standards. In every case, the accuracy of the flow meter at the point of measurement determines the reliability of the outcome.",
      "Calibrating water meters requires a certified volumetric reference that can handle large volumes under pressure, with appropriate materials for potable or industrial water. Lonetti manufactures prover tanks and test measures in 304 stainless steel — hygienic, corrosion-resistant, and certified to OIML R117.",
      "From a 5-liter handheld test measure for field inspection of household meters to a 5,000-liter prover tank for bulk transfer verification, Lonetti builds the reference standard to your specification.",
    ],
    challenges: [
      { n: "01", title: "Bulk transfer verification", body: "Verify the accuracy of large-diameter water meters at pump stations, treatment plants, and inter-utility transfer points." },
      { n: "02", title: "Retail meter inspection",    body: "Field inspection of domestic and commercial water meters by weights & measures inspectors using portable test measures." },
      { n: "03", title: "Non-revenue water analysis", body: "Calibrate the reference meters used in network balance calculations to quantify losses and improve distribution efficiency." },
      { n: "04", title: "Regulatory compliance",      body: "Demonstrate meter accuracy to national regulators and certification bodies as required by utility operating licenses." },
    ],
    products: ["test-measures", "prover-tanks", "calibration-test-benches"],
    standards: [
      { code: "OIML R117",  full: "Dynamic Measuring Systems for Liquids — the primary standard" },
      { code: "OIML R49",   full: "Water Meters for Cold Potable Water and Hot Water" },
      { code: "ISO 4064",   full: "Measurement of Water Flow in Fully Charged Closed Conduits" },
      { code: "NIST HB 105-3", full: "Specifications for Field Standard Weights and Measures" },
      { code: "OIML R120",  full: "Test Measures — volumetric accuracy class" },
      { code: "INTI",       full: "Argentina National Metrology Institute — traceable certification" },
    ],
    applications: [
      { title: "Pump station bulk metering", body: "Large prover tanks for verifying electromagnetic and ultrasonic bulk meters at treatment plant inlets and outlets." },
      { title: "Field inspector kits",        body: "Portable 5L–50L test measure sets for municipal inspectors verifying commercial and industrial meter accuracy." },
      { title: "Meter shop calibration",      body: "Fixed test benches for workshop-based meter verification before new installations and after maintenance." },
      { title: "Irrigation and agriculture",  body: "Calibration of flow meters on agricultural water allocations and irrigation canal metering." },
      { title: "Inter-utility transfer",      body: "Large-capacity prover tanks for custody transfer of bulk water between utilities and wholesale customers." },
      { title: "Environmental monitoring",    body: "Traceable reference standards for calibrating effluent and river flow meters used in regulatory reporting." },
    ],
    clients: ["Milkaut"],
    clientChips: ["Argentine municipal utilities", "National weights & measures agencies", "Water treatment operators", "INTI"],
    faq: [
      {
        q: "Can Lonetti prover tanks be used for water measurement, not just petroleum?",
        a: "Yes. Lonetti manufactures prover tanks and test measures in 304 stainless steel for any liquid application — petroleum, water, chemical, food. For potable water applications, materials comply with relevant hygiene standards. The calibration certificate is issued per OIML R117, which covers liquids other than water as well as water itself.",
      },
      {
        q: "What test measures are used by water meter inspectors?",
        a: "Municipal weights & measures inspectors typically use 5L, 10L, or 20L Lonetti stainless steel test measures for field verification of commercial and industrial water meters. Each unit carries an INTI calibration certificate traceable to OIML R120. Portable carry cases are available for inspector field kits.",
      },
      {
        q: "How accurate are Lonetti prover tanks for water measurement?",
        a: "Lonetti prover tanks achieve ±0.05% volumetric accuracy (OIML R117 class 0.05). Each unit is individually calibrated by INTI, Argentina's national metrology institute, and carries a traceable calibration certificate. This accuracy class satisfies the reference-instrument requirements of OIML R49, ISO 4064, and most national water utility regulations.",
      },
      {
        q: "Are Lonetti test measures suitable for electromagnetic meter verification?",
        a: "Yes. Lonetti test measures (1L–50L) and prover tanks (50L–5,000L+) are the reference standard against which electromagnetic, turbine, positive-displacement, and ultrasonic meters are all verified — regardless of meter technology. The reference vessel doesn't interact with the meter's sensing technology; it simply measures the volume that passed through.",
      },
    ],
    ctaTitle: "Specifying calibration equipment for your water utility?",
  },

  "chemical": {
    slug: "chemical",
    active: "industries",
    h1: "Precision Calibration Equipment for Chemical Processing",
    eyebrow: "Industry · Chemical & Process",
    lede: "Process flow calibration in 304 and 316 stainless steel for aggressive media, corrosive liquids, and high-purity chemical applications — built to specification, certified to OIML R117.",
    heroPhoto: "workshopIndustrial",
    heroStats: [
      { stat: "316 SS",    label: "For aggressive media" },
      { stat: "±0.05%",   label: "Process accuracy" },
      { stat: "Custom",   label: "Any fluid, any spec" },
      { stat: "OIML R117",label: "Certified standard" },
    ],
    overviewEyebrow: "The measurement challenge",
    overviewH2: "Chemical processes demand accuracy in hostile environments.",
    overviewParas: [
      "Chemical manufacturing depends on precise volumetric measurement for raw material intake, product transfer, recipe batching, and regulatory reporting. Flow meters in chemical plants face challenges that don't exist in petroleum: aggressive solvents, high-purity requirements, extreme temperatures, and corrosive media that attack conventional materials.",
      "Lonetti manufactures prover tanks and test measures in 316 stainless steel — standard for chemical and pharmaceutical applications — with optional polished internal surfaces, specialized valve materials (PTFE, Hastelloy), and custom neck configurations for high-precision accuracy.",
      "Every unit is built to customer specification and calibrated to OIML R117. Lonetti has supplied chemical and food-grade calibration equipment to clients across South America and internationally for over 60 years.",
    ],
    challenges: [
      { n: "01", title: "Corrosive media",           body: "Solvents, acids, and aggressive chemicals require 316 SS construction and corrosion-resistant valve materials (PTFE, Hastelloy)." },
      { n: "02", title: "High-purity measurement",   body: "Pharmaceutical and fine-chemical applications require electropolished internal surfaces and validated cleaning procedures." },
      { n: "03", title: "Process billing accuracy",  body: "Chemical custody transfer and contract manufacturing require the same traceable accuracy as petroleum: OIML R117 or API MPMS." },
      { n: "04", title: "Regulatory documentation",  body: "Demonstrate meter accuracy for GMP audits, ISO compliance, and national weights & measures requirements." },
    ],
    products: ["prover-tanks", "test-measures", "calibration-test-benches"],
    standards: [
      { code: "OIML R117",  full: "Dynamic Measuring Systems for Liquids — primary standard" },
      { code: "OIML R120",  full: "Test Measures — volumetric accuracy class" },
      { code: "ISO 9001",   full: "Quality Management System — Lonetti certified" },
      { code: "NIST HB 105-3", full: "Specifications for Field Standard Weights and Measures" },
      { code: "INTI",       full: "Argentina National Metrology Institute — traceable certification" },
      { code: "GMP-ready",  full: "316 SS, electropolished, cleanable — pharmaceutical process applications" },
    ],
    applications: [
      { title: "Solvent and feedstock intake",   body: "Large-capacity prover tanks for verifying bulk delivery meters for solvents, alcohols, and chemical feedstocks." },
      { title: "Process flow verification",      body: "Calibration test benches for workshop verification of DN15–DN100 meters before commissioning in process lines." },
      { title: "Batch recipe control",           body: "Test measures for verifying fill meters and batching systems in chemical and food manufacturing." },
      { title: "Contract manufacturing",         body: "Traceable measurement documentation for third-party chemical manufacturing and toll blending." },
      { title: "Food & beverage liquids",        body: "304/316 SS construction suitable for ethanol, edible oils, syrups, and dairy liquid measurement." },
      { title: "Pharmaceutical primary mfg.",    body: "Electropolished 316 SS prover tanks for API and excipient custody transfer in pharmaceutical plants." },
    ],
    clients: ["Milkaut"],
    clientChips: ["Chemical manufacturers", "Food & beverage producers", "Pharmaceutical companies", "Contract manufacturers"],
    faq: [
      {
        q: "Can Lonetti build prover tanks in 316 stainless steel for chemical applications?",
        a: "Yes. 316 stainless steel is available for any Lonetti product — prover tanks, test measures, and test bench reference vessels. 316 SS offers superior resistance to chlorides and many organic acids compared to 304 SS. Duplex stainless and other specialty alloys are also available for highly aggressive media.",
      },
      {
        q: "Are Lonetti test measures suitable for food-grade or pharmaceutical liquids?",
        a: "Yes. Lonetti manufactures test measures and prover tanks in 304 and 316 SS with optional electropolished internal surfaces. These are suitable for ethanol, edible oils, dairy liquids, and pharmaceutical excipients. Ra surface finish can be specified to GMP requirements.",
      },
      {
        q: "What accuracy class do Lonetti instruments achieve for chemical process measurement?",
        a: "Lonetti prover tanks achieve ±0.05% volumetric accuracy (OIML R117 class 0.05). Test measures achieve OIML R120 class 0.025. All instruments carry INTI calibration certificates traceable to international metrology standards — suitable for regulated process billing and GMP documentation.",
      },
      {
        q: "Can the valves and fittings be specified for chemical compatibility?",
        a: "Yes. Drain valves and fittings are specified to the application: PTFE-seated ball valves for solvents, Hastelloy for acids, sanitary tri-clamp fittings for food/pharma. Neck seals and gaskets can also be specified in appropriate materials. Contact our engineering team with your fluid data sheet.",
      },
    ],
    ctaTitle: "Specifying calibration equipment for a chemical process?",
  },

  "government-metrology": {
    slug: "government-metrology",
    active: "industries",
    h1: "Reference Standards Equipment for Government Metrology Institutes",
    eyebrow: "Industry · Government Metrology",
    lede: "National metrology institutes, weights & measures agencies, and government inspection bodies — Lonetti has supplied reference standard equipment to INTI, INMETRO, and equivalent bodies across 47 countries since 1960.",
    heroPhoto: "technicians",
    heroStats: [
      { stat: "1960",     label: "Supplying metrology institutes" },
      { stat: "OIML",     label: "R117 · R120 certified" },
      { stat: "47",       label: "Countries served" },
      { stat: "INTI",     label: "National reference partner" },
    ],
    overviewEyebrow: "The reference standard challenge",
    overviewH2: "National institutes require instruments traceable to the international system.",
    overviewParas: [
      "National metrology institutes (NMIs) and legal metrology authorities are the apex of the traceability chain — their reference standards must be traceable to the SI system and to OIML recommendations, and must serve as the reference for all downstream calibration in the country.",
      "Lonetti has a long history of supplying prover tanks, test measures, and water draw systems to NMIs and legal metrology authorities — including INTI (Argentina), INMETRO (Brazil), and equivalent agencies across Latin America, the Middle East, and Africa. Our equipment is designed and manufactured to the OIML recommendations that govern national reference standards.",
      "For government procurement, Lonetti provides full documentation: material certificates, dimensional inspection reports, INTI calibration certificates, and the technical file required for import and homologation.",
    ],
    challenges: [
      { n: "01", title: "SI-traceable accuracy",        body: "Reference standards must be traceable to BIPM, OIML, and the SI system. Lonetti calibration certificates establish this chain from INTI to the instrument." },
      { n: "02", title: "OIML R117 / R120 compliance",  body: "National reference standards for liquid measurement must comply with OIML R117 (dynamic systems) and R120 (test measures) — Lonetti's standard build." },
      { n: "03", title: "Field inspection equipment",   body: "Weights & measures inspectors require portable, certified test measures for retail fuel, water, and chemical meter inspection across their territory." },
      { n: "04", title: "International audit support",  body: "OIML mutual recognition and peer-review audits require documentation of reference standards and full calibration records." },
    ],
    products: ["prover-tanks", "test-measures", "water-draw-systems", "calibration-test-benches", "minilab"],
    standards: [
      { code: "OIML R117",     full: "Dynamic Measuring Systems for Liquids" },
      { code: "OIML R120",     full: "Test Measures for Liquids — volumetric reference cans" },
      { code: "OIML R34",      full: "Accuracy Classes of Measuring Instruments" },
      { code: "BIPM CIPM MRA", full: "Mutual Recognition Arrangement — international measurement traceability" },
      { code: "NIST HB 105-3", full: "US National Standard for Field Standard Weights and Measures" },
      { code: "INTI",          full: "Argentina's NMI — partner for certificate issuance and traceability chain" },
    ],
    applications: [
      { title: "National reference standards",    body: "Primary and secondary reference prover tanks for national metrology institutes, calibrated directly to BIPM/OIML recommendations." },
      { title: "Inspector field kits",            body: "Portable test measure sets (1L–50L) for weights & measures inspectors conducting retail fuel and water meter checks." },
      { title: "Regional calibration centers",    body: "Complete test bench installations for regional metrology laboratories serving multiple provinces or states." },
      { title: "Training and education",          body: "Reference equipment for metrology training academies and university measurement programs." },
      { title: "Pipe prover verification",        body: "Water draw systems for NMIs verifying pipe provers at petroleum terminals under their jurisdiction." },
      { title: "MINILAB® inspector vehicles",     body: "Mobile calibration laboratories for national inspection bodies serving remote areas and distributed meter populations." },
    ],
    clients: ["INTI", "SGS", "Bureau Veritas"],
    clientChips: ["INTI (Argentina)", "INMETRO (Brazil)", "Weights & measures agencies", "Regional metrology labs"],
    faq: [
      {
        q: "Does Lonetti supply equipment to national metrology institutes?",
        a: "Yes. Lonetti has a long history of supplying prover tanks, test measures, and water draw systems to national metrology institutes (NMIs) and legal metrology authorities — including INTI (Argentina), INMETRO (Brazil), and agencies across Latin America, the Middle East, and Africa. All products are certified to OIML R117 and R120, with full documentation for import and homologation.",
      },
      {
        q: "Are Lonetti calibration certificates accepted internationally?",
        a: "Yes. Lonetti calibration certificates are issued in coordination with INTI (Argentina's NMI), which participates in the OIML Mutual Recognition Arrangement and the BIPM CIPM-MRA. Certificates are traceable to the SI and to OIML recommendations, making them internationally recognized in OIML member states.",
      },
      {
        q: "What documentation comes with a Lonetti reference standard for government procurement?",
        a: "Lonetti provides: INTI calibration certificate (traceable, OIML-compliant), material certificate (EN 10204 3.1 or 3.2), dimensional inspection report, technical datasheet, and user manual. For government import, we also provide a certificate of origin. Third-party witness inspection by Bureau Veritas or SGS is available on request.",
      },
      {
        q: "Can Lonetti supply a complete mobile inspection kit for weights & measures inspectors?",
        a: "Yes. A typical inspector kit includes a set of Lonetti stainless steel test measures (2L, 5L, 10L, 20L), individual INTI calibration certificates, a carrying frame or transport case, and a documented procedure card. For larger programs, the MINILAB® mobile calibration van carries a complete reference prover, master meter, pump, and instrumentation.",
      },
    ],
    ctaTitle: "Equipping a metrology institute or inspection agency?",
  },
};

/* ─── Product slug → display mapping ───────────────────────────────── */
const PRODUCT_CARD_MAP = {
  "prover-tanks":                    { name: "Prover Tanks",              tag: "50L–5,000L+",    href: "prover-tanks.html",                     photo: "proverTank" },
  "test-measures":                   { name: "Test Measures",             tag: "1L–50L",         href: "test-measures.html",                    photo: "testMeasure_polished" },
  "water-draw-systems":              { name: "Water Draw Systems",        tag: "Pipe provers",   href: "water-draw-systems.html",               photo: "waterDraw" },
  "tanker-truck-calibration-towers": { name: "Tanker Truck Towers",       tag: "Multi-tier",     href: "tanker-truck-calibration-towers.html",  photo: "tankerTower" },
  "calibration-test-benches":        { name: "Calibration Test Benches",  tag: "Fixed/mobile",   href: "calibration-test-benches.html",         photo: "testBench" },
  "minilab":                         { name: "MINILAB® Vans",             tag: "Mobile lab",     href: "minilab.html",                          photo: "minilab" },
};

/* ─── IndustryHero ───────────────────────────────────────────────────── */
function IndustryHero({ data }) {
  const photoSrc = LONETTI_PHOTOS[data.heroPhoto];
  return (
    <section className="surface-dark" style={{ position: "relative", overflow: "hidden" }}>
      {/* Full-bleed background photo */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <img
          src={photoSrc}
          alt={data.h1}
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        />
        {/* Heavy left gradient */}
        <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%)",
        }}/>
        {/* Bottom fade */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 60%, rgba(11,15,26,0.75) 100%)",
        }}/>
      </div>

      {/* Content */}
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        {/* Top chip row */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 80, marginBottom: 48 }}>
          <span className="chip on-dark">
            <span className="chip-dot"/> {data.eyebrow}
          </span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(255,255,255,0.5)", textTransform: "uppercase" }}>
            Since 1960
          </span>
        </div>

        {/* Copy */}
        <div style={{ paddingBottom: 96, maxWidth: 760 }}>
          <h1 style={{ color: "#fff", maxWidth: "18ch", marginBottom: 24 }}>
            {data.h1}
          </h1>
          <p className="lede" style={{ color: "rgba(255,255,255,0.72)", maxWidth: "56ch", marginBottom: 40 }}>
            {data.lede}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href={IP_CONTACT}>
              {IP_REQUEST_QUOTE} <Icon name="arrow" size={16} stroke="#fff"/>
            </a>
            <a className="btn btn-ghost-light" href="#products">
              View Products <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>
      </div>

      {/* Trust bar */}
      <div style={{
        borderTop: "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 }}>
            {data.heroStats.map((s, i) => (
              <div key={i} style={{
                padding: "28px 24px",
                borderLeft: i === 0 ? 0 : "1px solid rgba(255,255,255,0.1)",
              }}>
                <div style={{
                  fontFamily: "var(--f-display)", fontSize: 28, 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>
  );
}

/* ─── IndustryOverview ───────────────────────────────────────────────── */
function IndustryOverview({ data }) {
  return (
    <section style={{ background: "#fff" }}>
      <div className="container">
        <SectionHead
          eyebrow={data.overviewEyebrow}
          h2={data.overviewH2}
        />

        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          {/* Left: paragraphs */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {data.overviewParas.map((para, i) => (
              <p key={i} style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: "var(--text-2)" }}>
                {para}
              </p>
            ))}
          </div>

          {/* Right: 2x2 challenge cards */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {data.challenges.map((c) => (
              <div key={c.n} style={{
                border: "1px solid var(--line)",
                borderRadius: 6,
                padding: "24px 20px",
                background: "#fff",
              }}>
                <div className="mono" style={{
                  fontSize: 10, fontWeight: 500, letterSpacing: "0.08em",
                  color: "var(--red)", marginBottom: 12, textTransform: "uppercase",
                }}>
                  {c.n}
                </div>
                <div style={{
                  fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 16,
                  color: "var(--text)", marginBottom: 10, lineHeight: 1.3,
                }}>
                  {c.title}
                </div>
                <p style={{ margin: 0, fontSize: 13, color: "var(--text-2)", lineHeight: 1.55 }}>
                  {c.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── IndustryProducts ───────────────────────────────────────────────── */
function IndustryProducts({ data }) {
  const cols = data.products.length <= 3 ? data.products.length : 3;

  return (
    <section id="products" style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Equipment portfolio"
          h2="Lonetti products for this industry."
          lede="All products manufactured in 304 stainless steel as standard, calibrated to OIML R117, with full documentation. Custom configurations and 316 SS available on request."
        />

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: `repeat(${cols}, 1fr)`,
          gap: 0,
          border: "1px solid var(--line)",
          borderRadius: 6,
          overflow: "hidden",
        }}>
          {data.products.map((slug, i) => {
            const p = PRODUCT_CARD_MAP[slug];
            if (!p) return null;
            const isRightEdge = (i + 1) % cols === 0;
            const isBottomRow = i >= cols;
            return (
              <a key={slug} href={p.href} className="prod-card" style={{
                display: "flex", flexDirection: "column",
                background: "#fff",
                borderRight: isRightEdge ? 0 : "1px solid var(--line)",
                borderTop: isBottomRow ? "1px solid var(--line)" : 0,
                overflow: "hidden",
                transition: "background 200ms ease",
              }}>
                <div style={{
                  height: 200,
                  background: "var(--bg-mid)",
                  position: "relative",
                  overflow: "hidden",
                  borderBottom: "1px solid var(--line)",
                }}>
                  <img
                    src={LONETTI_PHOTOS[p.photo]}
                    alt={p.name}
                    loading="lazy"
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                  />
                  <span className="chip" style={{
                    position: "absolute", top: 14, left: 14,
                    background: "rgba(255,255,255,0.95)",
                    backdropFilter: "blur(4px)",
                  }}>
                    {p.tag}
                  </span>
                </div>
                <div style={{ padding: "22px 26px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                  <h3 className="h3" style={{ margin: 0, fontSize: 17 }}>{p.name}</h3>
                  <Icon name="arrow" size={16} stroke="var(--text-3)"/>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        .prod-card:hover { background: var(--bg-alt) !important; }
        .prod-card:hover h3 { color: var(--red); }
      `}</style>
    </section>
  );
}

/* ─── IndustryStandards ──────────────────────────────────────────────── */
function IndustryStandards({ data }) {
  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="Standards & compliance"
          h2="The measurement standards that apply to this industry."
          lede="Lonetti products are designed and built to the applicable OIML, API, and NIST standards — every unit ships with traceable documentation."
        />

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid rgba(255,255,255,0.14)",
        }}>
          {data.standards.map((s, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            return (
              <div key={i} style={{
                padding: "32px 28px",
                borderRight: col < 2 ? "1px solid rgba(255,255,255,0.1)" : 0,
                borderBottom: "1px solid rgba(255,255,255,0.1)",
              }}>
                <div className="mono" style={{
                  fontSize: 13, fontWeight: 500, letterSpacing: "0.04em",
                  color: "var(--red)", marginBottom: 10, textTransform: "uppercase",
                }}>
                  {s.code}
                </div>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.65)" }}>
                  {s.full}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── IndustryApplications ───────────────────────────────────────────── */
function IndustryApplications({ data }) {
  return (
    <section style={{ background: "#fff" }}>
      <div className="container">
        <SectionHead
          eyebrow="Applications"
          h2="Where Lonetti equipment is deployed in this industry."
        />

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--line)",
          borderLeft: "1px solid var(--line)",
        }}>
          {data.applications.map((app, i) => (
            <div key={i} style={{
              padding: 28,
              borderRight: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              background: "#fff",
            }}>
              <h3 style={{
                fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18,
                color: "var(--text)", marginBottom: 12, lineHeight: 1.3,
              }}>
                {app.title}
              </h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.6 }}>
                {app.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── IndustryClients ────────────────────────────────────────────────── */
function IndustryClients({ data }) {
  // Filter CLIENT_LOGOS and CERT_LOGOS by case-insensitive match on data.clients
  const allLogos = [...CLIENT_LOGOS, ...CERT_LOGOS];
  const filteredLogos = allLogos.filter((logo) =>
    data.clients.some((client) =>
      logo.name.toLowerCase().includes(client.toLowerCase()) ||
      client.toLowerCase().includes(logo.name.toLowerCase())
    )
  );

  return (
    <section style={{ background: "var(--bg-alt)", paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 48, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 360 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Reference clients</div>
            <h2 style={{
              fontFamily: "var(--f-display)", fontSize: 36, fontWeight: 700,
              letterSpacing: "-0.02em", color: "var(--text)", lineHeight: 1.15, margin: 0,
            }}>
              Trusted across the industry.
            </h2>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", paddingTop: 8 }}>
            {data.clientChips.map((chip) => (
              <span key={chip} className="chip">{chip}</span>
            ))}
          </div>
        </div>

        {filteredLogos.length > 0 && (
          <>
            <hr className="hr-line" style={{ margin: "40px 0 32px" }}/>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 24, alignItems: "center" }}>
              {filteredLogos.map((logo) => (
                <div key={logo.name} style={{ height: 48, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <img
                    src={logo.src}
                    alt={logo.name}
                    loading="lazy"
                    style={{
                      maxHeight: 40, maxWidth: 120,
                      objectFit: "contain",
                      filter: "grayscale(100%)",
                      opacity: 0.6,
                    }}
                  />
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  );
}

/* ─── IndustryFAQ ────────────────────────────────────────────────────── */
function IndustryFAQ({ data }) {
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <section style={{ background: "#fff" }}>
      <div className="container">
        <SectionHead
          eyebrow="FAQ"
          h2="Questions about calibration in this industry."
        />

        <div style={{ marginTop: 64, maxWidth: 820 }}>
          {data.faq.map((item, i) => (
            <div key={i}>
              <div style={{ borderTop: "1px solid var(--line)" }}>
                <button
                  onClick={() => setOpenIdx(openIdx === i ? null : i)}
                  style={{
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    gap: 24,
                    padding: "22px 0",
                    background: "transparent",
                    border: 0,
                    textAlign: "left",
                    cursor: "pointer",
                  }}
                >
                  <span style={{
                    fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 17,
                    color: "var(--text)", lineHeight: 1.4,
                  }}>
                    {item.q}
                  </span>
                  <span style={{ flexShrink: 0, color: "var(--text-3)" }}>
                    <Icon name={openIdx === i ? "chevronUp" : "chevron"} size={18}/>
                  </span>
                </button>
                {openIdx === i && (
                  <p style={{
                    margin: 0, paddingBottom: 24,
                    fontSize: 15, lineHeight: 1.65, color: "var(--text-2)",
                  }}>
                    {item.a}
                  </p>
                )}
              </div>
            </div>
          ))}
          <div style={{ borderTop: "1px solid var(--line)" }}/>
        </div>
      </div>
    </section>
  );
}

/* ─── IndustryCTA ────────────────────────────────────────────────────── */
function IndustryCTA({ data }) {
  return (
    <section style={{ background: "var(--red)", padding: "80px 0", position: "relative", overflow: "hidden" }}>
      {/* Diagonal pattern accent */}
      <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", textAlign: "center" }}>
        <div className="eyebrow on-dark" style={{ color: "#fff", opacity: 0.7, marginBottom: 20 }}>
          Talk to engineering
        </div>
        <h2 style={{
          fontFamily: "var(--f-display)", fontWeight: 700,
          fontSize: "clamp(32px, 4vw, 52px)",
          letterSpacing: "-0.02em", lineHeight: 1.15,
          color: "#fff", maxWidth: "22ch", margin: "0 auto", marginBottom: 24,
        }}>
          {data.ctaTitle}
        </h2>
        <p style={{
          fontSize: 17, lineHeight: 1.6, color: "rgba(255,255,255,0.85)",
          maxWidth: "50ch", margin: "0 auto", marginBottom: 36,
        }}>
          Tell us what you need to measure and at what accuracy. Our Buenos Aires engineering team will respond within two business days.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <a className="btn" href={IP_CONTACT} style={{
            background: "#fff", color: "var(--red)",
            fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            {IP_REQUEST_QUOTE} <Icon name="arrow" size={16} stroke="var(--red)"/>
          </a>
          <a className="btn btn-ghost-light" href="https://wa.me/5491127884190" target="_blank" rel="noopener noreferrer"
            style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <Icon name="whatsapp" size={16}/> WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─── IndustryPage ───────────────────────────────────────────────────── */
function IndustryPage({ tweaks }) {
  const slug = window.__INDUSTRY_SLUG;
  const data = INDUSTRY_DATA[slug];

  if (!data) {
    return (
      <>
        <Nav active="industries"/>
        <main style={{ padding: "120px 0", textAlign: "center" }}>
          <div className="container">
            <h1 style={{ color: "var(--text)" }}>Industry not found: {slug}</h1>
          </div>
        </main>
        <Footer/>
      </>
    );
  }

  return (
    <>
      <Nav active="industries"/>
      <main>
        <IndustryHero data={data}/>
        <IndustryOverview data={data}/>
        <IndustryProducts data={data}/>
        <IndustryStandards data={data}/>
        <IndustryApplications data={data}/>
        <IndustryClients data={data}/>
        <IndustryFAQ data={data}/>
        <IndustryCTA data={data}/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

/* ─── Expose on window ───────────────────────────────────────────────── */
Object.assign(window, { IndustryPage, INDUSTRY_DATA });
