// services-page.jsx — /services/ Lonetti page.

const SERVICE_OFFERINGS = [
  {
    n: "01",
    title: "Calibration Certification",
    body: "Traceable calibration certificates for prover tanks, test measures, water draw systems, and customer-supplied equipment — issued in coordination with INTI, traceable to OIML R117, API MPMS, and NIST Handbook 105-3.",
    bullets: ["INTI calibration certificate", "OIML R117 / API / NIST traceability", "On-request: Bureau Veritas or SGS witness inspection"],
    icon: "seal",
  },
  {
    n: "02",
    title: "Workshops & Training",
    body: "Hands-on calibration workshops for plant operators, meter shop technicians, and metrology staff. Covers prover-tank use, water draw procedure, accuracy assessment, and the relevant standards.",
    bullets: ["Operator training programs", "Standards walkthrough (OIML / API MPMS)", "On-site or at the Buenos Aires workshop"],
    icon: "document",
  },
  {
    n: "03",
    title: "Custom Engineering",
    body: "Every Lonetti product is custom. Tell our engineering team the constraint — weight, height, diameter, accuracy, valve type, mounting, jurisdiction — and we'll engineer the configuration around it.",
    bullets: ["Weight / height / diameter limits", "Specialized graduated scales", "Skid, trailer, or trolley mounting", "FOB / CIF pricing"],
    icon: "cog",
  },
  {
    n: "04",
    title: "Global Shipping",
    body: "Crated for international freight. Commercial invoice, certificate of origin, calibration certificate, and datasheets included. We coordinate with freight forwarders to ports of destination worldwide.",
    bullets: ["Crating for international freight", "Full documentation kit", "Weekly / bi-weekly order tracking"],
    icon: "shipping",
  },
  {
    n: "05",
    title: "Rental Storage Tanks",
    body: "Plant with rental storage tanks on the Paraná River, Argentina. 45,000 m³ with modulation according to needs, port with natural depth for Panamax ships, loading dock for tank trucks.",
    bullets: ["45,000 m³ on the Paraná River", "Panamax-capable port", "Tank-truck loading dock"],
    icon: "factory",
  },
  {
    n: "06",
    title: "Distributor Partnerships",
    body: "Lonetti partners with established companies in target countries to represent the brand locally. Access to the full product range, marketing resources, training, and the global Lonetti network.",
    bullets: ["Country / region exclusivity", "Marketing & technical support", "Training & onboarding"],
    icon: "globe",
  },
];

const TRACEABILITY_FLOW = [
  { label: "International standard", body: "OIML R117 · NIST Handbook 105-3 · API MPMS Ch. 4.4" },
  { label: "National institute",     body: "INTI (Argentina) — maintains national reference standards" },
  { label: "Lonetti workshop",       body: "Each instrument calibrated against INTI-traceable references" },
  { label: "Your meter",             body: "Certified, traceable, ready for custody-transfer audit" },
];

function ServicesHero() {
  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 }}>Our services</div>
            <h1 style={{ color: "#fff", maxWidth: "16ch" }}>
              Calibration services &amp; <span style={{ color: "var(--red)" }}>traceable certifications</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "52ch" }}>
              Beyond manufacturing. Lonetti provides INTI-traceable calibration, hands-on workshops,
              custom engineering, global shipping, and storage capacity at our Paraná River facility.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#contact">Talk to us <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="#offerings">Explore services</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/3", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.technicians} alt="Lonetti technicians at the Buenos Aires workshop"
              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" }}>
              Buenos Aires workshop
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceOfferings() {
  return (
    <section id="offerings">
      <div className="container">
        <SectionHead
          eyebrow="Services portfolio"
          h2="Six ways Lonetti supports your measurement program."
          lede="From the calibration certificate that comes with every product to representation partnerships and storage rental — Lonetti is more than a tank manufacturer."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {SERVICE_OFFERINGS.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 CertificationOptions() {
  const certs = [
    {
      name: "Lonetti® Certification",
      logo: "images/Lonetti-logo-red.png",
      body: "At Lonetti, meticulous testing and calibration of each product is our top priority. Our rigorous calibration process follows standards traceable to NIST. Every test measure, prover tank, water-draw, and other offering ships with a factory calibration certificate.",
      url: "info@lonetti.com.ar",
    },
    {
      name: "INTI",
      logo: "images/INTI-logo.png",
      body: "Lonetti partners with Argentina's National Institute of Industrial Technology (INTI) for accredited test measure and prover calibrations. Our certification adheres to OIML R-120, API, and NIST Handbook 105-3.",
      url: "inti.gob.ar",
    },
    {
      name: "Bureau Veritas",
      logo: "images/Bureau-Veritas-logo.png",
      body: "Lonetti partners with Bureau Veritas for thorough testing and analysis. Products undergo rigorous examination following OIML R-120, API, and NIST Handbook 105-3. Bureau Veritas reports provide assurance of quality and international compliance.",
      url: "bureauveritas.com.ar",
    },
    {
      name: "SGS",
      logo: "images/SGS-logo.png",
      body: "On request, Lonetti collaborates with SGS for comprehensive inspection, testing, and certification services — ensuring adherence to OIML R-120, API, and NIST Handbook 105-3. Quality, safety, and performance you can trust.",
      url: "ar.sgs.com",
    },
  ];
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Certification options"
          h2="Choose the certification body that matches your audit requirement."
          lede="Every Lonetti product ships with a factory calibration certificate. For regulated procurement, request additional witness inspection by an independent third party."
        />
        <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 TraceabilitySection() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="Path of precision"
          h2="Understanding traceability in measurement."
          lede="Traceability is the documented chain linking your instrument's reading to a recognized international standard. It's how you know your measurement is real, and how an auditor can verify it."
        />
        <div style={{
          marginTop: 64, display: "grid", gridTemplateColumns: `repeat(${TRACEABILITY_FLOW.length}, 1fr) auto`,
          alignItems: "stretch",
        }}>
          {TRACEABILITY_FLOW.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 }}>STEP 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.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 StorageRentalSection() {
  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="Storage tanks on the Paraná River, Argentina"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Storage rental</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 24, maxWidth: "16ch" }}>
              Need a rental storage tank on the Paraná?
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              45,000 m³ with modulation according to needs. The plant has a port with a natural depth that allows
              Panamax ships to dock, and is located next to a major national route with access to all Argentine roads.
              Ideal for transferring to shallower-draft barges to navigate to Paraguay and Brazil.
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {[
                "45,000 m³ tank capacity",
                "Panamax-capable port",
                "Tank-truck loading dock",
                "Adjacent national highway",
                "Barge transfer to Paraguay / Brazil",
                "Modular volume packages",
              ].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 }}>
              Enquire about storage <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomCapabilitiesSection() {
  const items = [
    "Weight, height, diameter limits",
    "Intermediate readings (e.g. 500L tank with ~100L marks)",
    "Ventral loading capability",
    "Nominal zero reader",
    "Built-in return pump",
    "Pressurized systems",
    "Higher accuracy & sensitivity (narrower necks)",
    "Spherical or butterfly valves, flanged or threaded",
    "Reduced uncertainty",
    "Specialized graduated scales",
    "Optional filling tubes (anti-foaming)",
    "Neck containers (anti-splashing)",
    "Bridged body for cleaning access",
    "ID plates / scales in any language",
    "Skid, trailer, or trolley mounting",
    "Trailer + suspension, brakes, lights",
    "Local installation services",
    "Custom sets with varied capacities",
    "FOB / CIF pricing",
    "Weekly or bi-weekly order tracking",
  ];
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Tailored solutions"
          h2="Discover Lonetti's flexible approach."
          lede="At Lonetti, we pride ourselves on flexible, customized solutions for every precision measurement need. With deep understanding of diverse industries, we adapt instruments to your standards and regulations."
        />
        <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 ServicesPage() {
  return (
    <>
      <Nav active="services"/>
      <main>
        <ServicesHero/>
        <ServiceOfferings/>
        <CertificationOptions/>
        <TraceabilitySection/>
        <StorageRentalSection/>
        <CustomCapabilitiesSection/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { ServicesPage });