/* global React */

window.Hero = function Hero({ lang }) {
  // From content JSON: pages.home.hero (real headline & subheadline)
  const copy = lang === "it" ? {
    eyebrow: "Digital Accelerator & Business Partner",
    h1: "Il partner ideale per la tua",
    h1grad: "trasformazione digitale",
    lead: "AI sostenibile, facile da integrare e comprendere. Siamo pronti per accompagnarvi OGGI nel FUTURO.",
    cta1: "Contattaci",
    cta2: "Scopri i servizi",
    badge: "Roma · IT Consulting dal 2012",
  } : {
    eyebrow: "Digital Accelerator & Business Partner",
    h1: "The ideal partner for your",
    h1grad: "digital transformation",
    lead: "Sustainable AI, easy to integrate and understand. We are ready to take you from TODAY into the FUTURE.",
    cta1: "Contact us",
    cta2: "Explore services",
    badge: "Rome · IT Consulting since 2012",
  };

  return (
    <div id="top" style={{ position: "relative", overflow: "hidden", color: "#fff", paddingTop: 140, paddingBottom: 110 }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--tl-gradient-mesh)", zIndex: 0 }} />
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18, zIndex: 1 }}>
        <defs>
          <pattern id="grid" width="56" height="56" patternUnits="userSpaceOnUse">
            <path d="M56 0H0V56" fill="none" stroke="#7EE3FF" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>
      <FloatingChips />

      <window.Container style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "6px 14px 6px 8px", background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.16)", borderRadius: 999, backdropFilter: "blur(12px)", marginBottom: 28, fontSize: 12, color: "rgba(255,255,255,.85)" }}>
          <span style={{ width: 22, height: 22, borderRadius: 6, background: "linear-gradient(135deg,#1E8BFF,#28D1FE)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            <window.Icon name="sparkles" size={12} color="#fff" />
          </span>
          <span style={{ fontWeight: 500, letterSpacing: ".06em" }}>{copy.badge}</span>
        </div>
        <div style={{ maxWidth: 920 }}>
          <h1 style={{ fontSize: "clamp(40px, 6.4vw, 80px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0 }}>
            <span style={{ display: "block", color: "#fff" }}>{copy.h1}</span>
            <span style={{ display: "block", background: "linear-gradient(135deg,#7EE3FF 0%,#28D1FE 40%,#1E8BFF 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{copy.h1grad}</span>
          </h1>
          <p style={{ fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.55, color: "rgba(255,255,255,0.78)", maxWidth: 640, marginTop: 28 }}>{copy.lead}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 36 }}>
            <window.Button size="lg" href="contatti.html" icon={<window.Icon name="arrow" size={16} />}>{copy.cta1}</window.Button>
            <window.Button variant="glass" size="lg" href="servizi.html">{copy.cta2}</window.Button>
          </div>
        </div>
      </window.Container>
      <style>{`
        @media (max-width: 720px) { .hero-pillars { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
};

function FloatingChips() {
  const chips = [
    { x: "6%",  y: "18%", size: 22, delay: 0 },
    { x: "12%", y: "62%", size: 16, delay: 100 },
    { x: "82%", y: "20%", size: 28, delay: 220 },
    { x: "92%", y: "55%", size: 14, delay: 340 },
    { x: "76%", y: "78%", size: 20, delay: 480 },
    { x: "20%", y: "84%", size: 12, delay: 600 },
  ];
  return (
    <>
      <style>{`
        @keyframes tl-chip-in { from { opacity: 0; transform: translate(-30px, 30px) scale(.6); } to { opacity: 1; transform: translate(0,0) scale(1); } }
        @keyframes tl-chip-drift { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
        .tl-chip-wrap { animation: tl-chip-in .9s cubic-bezier(.34,1.56,.64,1) both; }
        .tl-chip-inner { animation: tl-chip-drift 6s ease-in-out infinite; }
      `}</style>
      {chips.map((c, i) => (
        <div key={i} className="tl-chip-wrap" style={{ position: "absolute", left: c.x, top: c.y, zIndex: 1, animationDelay: `${c.delay}ms` }}>
          <div className="tl-chip-inner" style={{
            width: c.size, height: c.size,
            borderRadius: c.size > 18 ? 6 : 4,
            background: "linear-gradient(135deg,#1E8BFF,#28D1FE)",
            boxShadow: "0 6px 20px rgba(40,209,254,0.45), inset 0 1px 0 rgba(255,255,255,.4)",
            animationDelay: `${c.delay + 200}ms`,
          }} />
        </div>
      ))}
    </>
  );
}

/* ----- PARTNERS / PLATFORMS STRIP -----
   Tecnolife reseller-certified platforms (con referenze attive):
   e-commerce (Adobe Commerce, Shopify), CRM/ERP (MS Dynamics, HubSpot),
   social listening (Hootsuite, Talkwalker), DXP (Liferay), automation (MS Power Platform).
   Salesforce dismesso dal portafoglio promosso. Magento resta come tech-stack
   nelle case histories (ADR shop, Buffetti, GLS) ma non più come "piattaforma" autonoma. */
window.LogoStrip = function LogoStrip({ lang }) {
  const labels = [
    "ADOBE COMMERCE",
    "SHOPIFY",
    "MICROSOFT DYNAMICS",
    "HUBSPOT",
    "HOOTSUITE",
    "TALKWALKER",
    "LIFERAY",
    "MICROSOFT POWER PLATFORM",
  ];
  return (
    <div style={{ background: "var(--bg-subtle)", padding: "44px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <window.Container>
        <div style={{ textAlign: "center", fontSize: 12, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 28 }}>
          {lang === "it" ? "Le piattaforme con cui lavoriamo" : "The platforms we work with"}
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "32px 56px" }}>
          {labels.map((l) => (
            <div key={l} style={{
              fontFamily: "var(--font-sans)", fontWeight: 700,
              fontSize: 15, letterSpacing: ".08em",
              color: "var(--tl-grey-400)",
              transition: "color 220ms",
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--tl-blue-deep)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--tl-grey-400)"}
            >{l}</div>
          ))}
        </div>
      </window.Container>
    </div>
  );
};

/* ----- "Why" section: based on real values from Chi Siamo (Innovazione, AI applicata al business, Approccio AI sostenibile) ----- */
window.WhySection = function WhySection({ lang }) {
  const items = lang === "it" ? [
    { icon: "spark", title: "Innovazione", body: "Ci prendiamo cura di ogni dettaglio proattivamente secondo il core dell'azienda: l'innovazione." },
    { icon: "cpu", title: "AI applicata al business", body: "Utilizziamo le nostre competenze e soluzioni AI per automatizzare ed ottimizzare i processi di business, direzionali, gestionali ed operativi." },
    { icon: "shield-check", title: "Approccio AI sostenibile", body: "Trasparenza, responsabilità e inclusività al centro del modo in cui costruiamo e integriamo soluzioni AI." },
  ] : [
    { icon: "spark", title: "Innovation", body: "We proactively take care of every detail in line with the company's core: innovation." },
    { icon: "cpu", title: "AI applied to business", body: "We use our skills and AI solutions to automate and optimise business, directional, managerial and operational processes." },
    { icon: "shield-check", title: "Sustainable AI approach", body: "Transparency, responsibility and inclusiveness at the centre of the way we build and integrate AI solutions." },
  ];
  return (
    <window.Section style={{ background: "var(--bg)" }}>
      <window.Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="why-grid">
          <div className="why-sticky" style={{ position: "sticky", top: 100 }}>
            <window.Eyebrow>{lang === "it" ? "Chi siamo" : "Who we are"}</window.Eyebrow>
            <h2 style={{ fontSize: "clamp(32px,4vw,52px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>
              {lang === "it" ? "Una digital company al servizio della trasformazione AI-Digital." : "A digital company supporting AI-Digital transformation."}
            </h2>
            <p style={{ fontSize: 17, color: "var(--fg-2)", marginTop: 18, lineHeight: 1.6 }}>
              {lang === "it"
                ? "Vogliamo essere un punto di riferimento per i nostri clienti nell'approccio ad una AI-Digital Transformation sostenibile, misurabile e funzionale."
                : "We want to be a reference point for our clients in their approach to a sustainable, measurable and functional AI-Digital Transformation."}
            </p>
            <div style={{ marginTop: 28 }}>
              <window.Button variant="secondary" href="chi-siamo.html" icon={<window.Icon name="arrow" size={14} />}>
                {lang === "it" ? "Scopri di più" : "Learn more"}
              </window.Button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
            {items.map((it, i) => (
              <div key={i} style={{
                background: "#fff",
                border: "1px solid var(--border)",
                borderRadius: 16,
                padding: 28,
                boxShadow: "var(--shadow-sm)",
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 20,
                alignItems: "start",
              }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: "linear-gradient(135deg,rgba(11,87,224,.08),rgba(40,209,254,.18))", color: "var(--tl-blue-primary)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <window.Icon name={it.icon} size={22} />
                </div>
                <div>
                  <h3 style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", margin: "0 0 8px", color: "var(--fg-1)" }}>{it.title}</h3>
                  <p style={{ fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.6, margin: 0 }}>{it.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .why-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .why-sticky { position: static !important; top: auto !important; }
          }
        `}</style>
      </window.Container>
    </window.Section>
  );
};