/* global React */

/* ======================================================================
   PAGE — Clienti / "Ci hanno scelto"
   Pagina dedicata che ospita il contenuto "Hanno scelto Tecnolife".
   Hero scuro coerente con le altre pagine + sezione clienti per cluster.
   Solo nomi: nessun progetto, nessuna metrica, nessuna descrizione tecnica.
   Approvazione cliente: confermata. Citazione del nome consentita.
   ====================================================================== */

window.ClientiHero = function ClientiHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Clienti",
    h1a: "Hanno scelto",
    h1b: "Tecnolife",
    lead: "Aziende e istituzioni che si affidano a noi. Dal lusso del Made in Italy alle infrastrutture critiche del Paese, dai grandi gruppi energy alle eccellenze del retail.",
  } : {
    eyebrow: "They chose us",
    h1a: "They chose",
    h1b: "Tecnolife",
    lead: "Companies and institutions that trust us. From Italian luxury icons to critical national infrastructures, from major energy groups to retail excellence.",
  };
  return (
    <div style={{ position: "relative", overflow: "hidden", color: "#fff", paddingTop: 160, paddingBottom: 110 }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--tl-gradient-mesh)", zIndex: 0 }} />
      <window.Container style={{ position: "relative", zIndex: 2, maxWidth: 880 }}>
        <window.Eyebrow light>{t.eyebrow}</window.Eyebrow>
        <h1 style={{ fontSize: "clamp(40px, 6vw, 76px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0 }}>
          <span style={{ display: "block", color: "#fff" }}>{t.h1a}</span>
          <span style={{ display: "block", background: "linear-gradient(135deg,#7EE3FF 0%,#28D1FE 40%,#1E8BFF 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{t.h1b}</span>
        </h1>
        <p style={{ fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.55, color: "rgba(255,255,255,0.78)", maxWidth: 700, marginTop: 28 }}>{t.lead}</p>
      </window.Container>
    </div>
  );
};

window.ClientiList = function ClientiList({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Hanno scelto Tecnolife",
    title: "Aziende e istituzioni che si affidano a noi",
    subtitle:
      "Dal lusso del Made in Italy alle infrastrutture critiche del Paese, dai grandi gruppi energy alle eccellenze del retail. Una selezione di clienti che hanno scelto Tecnolife.",
    clusters: [
      { name: "Trasporti & Mobilità",              clients: ["ADR — Aeroporti di Roma", "ANAS"] },
      { name: "Difesa & Pubblica Amministrazione", clients: ["Presidenza del Consiglio", "Aeronautica Militare", "Corte dei Conti", "Sogei", "Rheinmetall"] },
      { name: "Lusso & Made in Italy",             clients: ["Bulgari", "Campari", "Cassina", "Cappellini", "Poltrona Frau"] },
      { name: "Energy, Industria & Telco",         clients: ["Enel", "Vodafone", "Sielte", "Nippon Gases"] },
      { name: "Retail & E-Commerce",               clients: ["Buffetti", "GLS", "BricoBravo"] },
      { name: "Education",                         clients: ["LUISS Guido Carli", "Università UniMarconi"] },
    ],
  } : {
    eyebrow: "They chose Tecnolife",
    title: "Companies and institutions that trust us",
    subtitle:
      "From Italian luxury icons to critical national infrastructures, from major energy groups to retail excellence. A selection of clients who chose Tecnolife.",
    clusters: [
      { name: "Transport & Mobility",              clients: ["ADR — Rome Airports", "SEA — Milan Airports", "ANAS — Italian National Roads"] },
      { name: "Defence & Public Administration",   clients: ["Presidency of the Council of Ministers", "Italian Air Force", "Italian Court of Auditors", "Sogei", "Rheinmetall"] },
      { name: "Luxury & Made in Italy",            clients: ["Bulgari", "Campari", "Cassina", "Cappellini", "Poltrona Frau"] },
      { name: "Energy, Industry & Telco",          clients: ["Enel", "Vodafone", "Sielte", "Nippon Gases"] },
      { name: "Retail & E-Commerce",               clients: ["Buffetti", "GLS", "BricoBravo"] },
      { name: "Education",                         clients: ["LUISS Guido Carli University", "UniMarconi University"] },
    ],
  };

  return (
    <window.Section id="Clienti" style={{ background: "var(--bg-subtle)" }}>
      <window.Container>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <window.Eyebrow>{t.eyebrow}</window.Eyebrow>
          <h2 style={{
            fontSize: "clamp(32px,4vw,52px)",
            fontWeight: 700,
            letterSpacing: "-0.02em",
            lineHeight: 1.1,
            margin: 0,
          }}>
            {t.title}
          </h2>
          <p style={{ fontSize: 18, color: "var(--fg-2)", marginTop: 18, lineHeight: 1.55 }}>
            {t.subtitle}
          </p>
        </div>

        {/* TODO: switch to logo variant when assets/clients/*.svg are ready */}
        <div style={{ display: "grid", gap: 20 }}>
          {t.clusters.map((cluster, i) => (
            <div key={i} style={{
              background: "#fff",
              border: "1px solid var(--border)",
              borderRadius: 18,
              padding: "26px 30px",
              boxShadow: "var(--shadow-sm)",
            }}>
              <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 12,
                color: "var(--tl-blue-primary)",
                letterSpacing: ".1em",
                textTransform: "uppercase",
                fontWeight: 700,
                marginBottom: 18,
              }}>
                {String(i + 1).padStart(2, "0")} — {cluster.name}
              </div>
              <div style={{
                display: "flex",
                flexWrap: "wrap",
                gap: "14px 32px",
                alignItems: "baseline",
              }}>
                {cluster.clients.map((c, j) => (
                  <span key={j} style={{
                    fontSize: "clamp(18px, 1.8vw, 22px)",
                    fontWeight: 600,
                    letterSpacing: "-0.01em",
                    color: "var(--fg-1)",
                    lineHeight: 1.3,
                  }}>
                    {c}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};