/* global React */
const { useState: useCSState } = React;

window.CasiHero = function CasiHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Case history",
    h1a: "Case history",
    h1b: "di successo",
    lead: "Approfondisci tutte le case history di Tecnolife e scopri come le nostre soluzioni hanno trasformato le sfide in successi.",
  } : {
    eyebrow: "Case history",
    h1a: "Successful",
    h1b: "case histories",
    lead: "Explore Tecnolife's case histories and discover how our solutions turned challenges into successes.",
  };
  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: 640, marginTop: 28 }}>{t.lead}</p>
      </window.Container>
    </div>
  );
};

window.CasiGrid = function CasiGrid({ lang }) {
  const [filter, setFilter] = useCSState("all");
  // Six REAL case histories from JSON.
  const cases = lang === "it" ? [
    { id: 1, sector: "Aeroportuale", client: "ADR — Aeroporti di Roma", title: "Gestione e Manutenzione Portali ADR", lead: "Gestione end-to-end di adr.it (Liferay) e shop.adr.it (Magento 2): contesto enterprise mission-critical.", stack: ["Liferay", "Magento 2"], img: "assets/cases/aeroportuale.svg" },
    { id: 2, sector: "Energy", client: "Enel", title: "Sentiment & Brand Monitoring", lead: "Piattaforma proprietaria di Sentiment Analysis e Business Intelligence integrata col Data Lake Enel.", stack: ["AI/NLP", "Data Lake", "BI"], img: "assets/cases/energy.svg" },
    { id: 3, sector: "Logistica", client: "GLS", title: "store.gls-italy.com", lead: "E-commerce Adobe Commerce per la vendita di spedizioni a privati con integrazioni Azure, Nexi, PayPal e API GLS.", stack: ["Magento", "Azure", "Nexi/PayPal"], img: "assets/cases/logistica.svg" },
    { id: 4, sector: "Retail", client: "Buffetti", title: "Migrazione e ottimizzazione e-Commerce", lead: "Migrazione del CMS a Magento 2 con miglior performance, UX più intuitiva e gestione ordini più efficiente.", stack: ["Magento 2", "B2C"], img: "assets/cases/retail.svg" },
    { id: 5, sector: "Education", client: "Università UniMarconi", title: "Rinnovo portale e marketing digitale", lead: "Restyling completo del portale, integrazione HubSpot CRM e marketing automation per la formazione a distanza.", stack: ["HubSpot", "Marketing Automation", "SEO"], img: "assets/cases/education.svg" },
    { id: 6, sector: "PA", client: "Pubblica Amministrazione", title: "Digitalizzazione e interoperabilità nella PA", lead: "Piattaforma digitale per il ciclo dei procedimenti di finanziamento, in cooperazione applicativa con banche dati nazionali.", stack: ["Workflow", "Cooperazione applicativa"], img: "assets/cases/pa.svg" },
  ] : [
    { id: 1, sector: "Airports", client: "ADR — Aeroporti di Roma", title: "ADR portals management and maintenance", lead: "End-to-end management of adr.it (Liferay) and shop.adr.it (Magento 2): a mission-critical enterprise context.", stack: ["Liferay", "Magento 2"], img: "assets/cases/aeroportuale.svg" },
    { id: 2, sector: "Energy", client: "Enel", title: "Sentiment & Brand Monitoring", lead: "Proprietary Sentiment Analysis and Business Intelligence platform integrated with the Enel Data Lake.", stack: ["AI/NLP", "Data Lake", "BI"], img: "assets/cases/energy.svg" },
    { id: 3, sector: "Logistics", client: "GLS", title: "store.gls-italy.com", lead: "Adobe Commerce e-commerce selling shipments to private customers, integrated with Azure, Nexi, PayPal and GLS APIs.", stack: ["Magento", "Azure", "Nexi/PayPal"], img: "assets/cases/logistica.svg" },
    { id: 4, sector: "Retail", client: "Buffetti", title: "E-Commerce migration & optimisation", lead: "CMS migration to Magento 2 with better performance, more intuitive UX and more efficient order management.", stack: ["Magento 2", "B2C"], img: "assets/cases/retail.svg" },
    { id: 5, sector: "Education", client: "UniMarconi University", title: "Portal renewal and digital marketing", lead: "Full portal restyling, HubSpot CRM integration and marketing automation for distance learning.", stack: ["HubSpot", "Marketing Automation", "SEO"], img: "assets/cases/education.svg" },
    { id: 6, sector: "Public sector", client: "Public Administration", title: "PA digitalisation and interoperability", lead: "Digital platform for the funding-procedures lifecycle, in application cooperation with national databases.", stack: ["Workflow", "Application cooperation"], img: "assets/cases/pa.svg" },
  ];
  const sectors = ["all", ...Array.from(new Set(cases.map((c) => c.sector)))];
  const filtered = filter === "all" ? cases : cases.filter((c) => c.sector === filter);
  return (
    <window.Section style={{ background: "var(--bg)" }}>
      <window.Container>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 36 }}>
          {sectors.map((s) => (
            <button key={s} onClick={() => setFilter(s)} style={{
              border: "1px solid var(--border)",
              background: filter === s ? "var(--tl-blue-deep)" : "#fff",
              color: filter === s ? "#fff" : "var(--fg-1)",
              padding: "8px 16px", borderRadius: 999, fontSize: 13, fontWeight: 500,
              cursor: "pointer", transition: "all 220ms cubic-bezier(.22,1,.36,1)",
            }}>{s === "all" ? (lang === "it" ? "Tutti" : "All") : s}</button>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 18 }}>
          {filtered.map((c) => <CaseCard key={c.id} c={c} lang={lang} />)}
        </div>
      </window.Container>
    </window.Section>
  );
};

function CaseCard({ c, lang }) {
  const [hover, setHover] = useCSState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      borderRadius: 18, overflow: "hidden", background: "#fff",
      border: "1px solid var(--border)",
      boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-sm)",
      transform: hover ? "translateY(-4px)" : "translateY(0)",
      transition: "all 220ms cubic-bezier(.22,1,.36,1)",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{ height: 200, position: "relative", overflow: "hidden", padding: 22, display: "flex", alignItems: "flex-end", backgroundColor: "#0a1530" }}>
        <img src={c.img} alt={c.sector} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", transform: hover ? "scale(1.04)" : "scale(1)", transition: "transform 600ms cubic-bezier(.22,1,.36,1)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(2,40,163,0.05) 0%, rgba(2,40,163,0) 40%, rgba(10,21,48,0.6) 100%)" }} />
        <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", color: "#fff" }}>
          <window.Tag color="glass">{c.sector}</window.Tag>
        </div>
      </div>
      <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        <div style={{ fontSize: 13, color: "var(--tl-blue-primary)", fontWeight: 700 }}>{c.client}</div>
        <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--fg-1)", margin: 0, lineHeight: 1.25 }}>{c.title}</h3>
        <p style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55, margin: 0, flex: 1 }}>{c.lead}</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 4 }}>
          {c.stack.map((s) => (
            <span key={s} style={{ fontFamily: "var(--font-mono)", fontSize: 11, padding: "3px 8px", borderRadius: 6, background: "var(--tl-grey-100)", color: "var(--fg-2)" }}>{s}</span>
          ))}
        </div>
        <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600, color: "var(--tl-blue-primary)" }}>
          {lang === "it" ? "Leggi la case history" : "Read case history"} <window.Icon name="arrow" size={13} />
        </div>
      </div>
    </div>
  );
}