/* global React */
window.ChiSiamoHero = function ChiSiamoHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Chi siamo",
    h1a: "Una digital company al servizio della",
    h1b: "trasformazione AI-Digital",
    lead: "Una digital company al servizio della trasformazione AI-Digital delle aziende italiane.",
  } : {
    eyebrow: "About",
    h1a: "A digital company supporting",
    h1b: "AI-Digital transformation",
    lead: "A digital company supporting the AI-Digital transformation of Italian companies.",
  };
  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.1, letterSpacing: "-0.03em", margin: 0 }}>
          <span style={{ display: "block", color: "#fff" }}>{t.h1a}</span>
          <span style={{ display: "block", paddingBottom: "0.12em", 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.ChiSiamoMission = function ChiSiamoMission({ lang }) {
  // Real values from chi_siamo.values + vision
  const values = lang === "it" ? [
    { icon: "spark", t: "Innovazione", d: "Ci prendiamo cura di ogni dettaglio proattivamente secondo il core dell'azienda: l'innovazione." },
    { icon: "cpu", t: "AI applicata al business", d: "Ci proponiamo di utilizzare le nostre competenze e soluzioni AI per automatizzare ed ottimizzare i processi di business, direzionali, gestionali ed operativi, dalla logistica interna alla gestione dei clienti." },
    { icon: "shield-check", t: "Approccio AI sostenibile", d: "Trasparenza, responsabilità e inclusività al centro del modo in cui costruiamo e integriamo soluzioni AI." },
  ] : [
    { icon: "spark", t: "Innovation", d: "We proactively take care of every detail in line with the company's core: innovation." },
    { icon: "cpu", t: "AI applied to business", d: "We use our skills and AI solutions to automate and optimise business, directional, managerial and operational processes — from internal logistics to customer management." },
    { icon: "shield-check", t: "Sustainable AI approach", d: "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.2fr", gap: 80, alignItems: "start" }} className="mission-grid">
          <div>
            <window.Eyebrow>{lang === "it" ? "Chi siamo" : "Who we are"}</window.Eyebrow>
            <h2 style={{ fontSize: "clamp(28px,3.5vw,44px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.15, margin: 0 }}>
              {lang === "it" ? "Soluzioni enterprise-ready di nuova generazione." : "Next-generation enterprise-ready solutions."}
            </h2>
            <p style={{ fontSize: 17, color: "var(--fg-2)", marginTop: 18, lineHeight: 1.6 }}>
              {lang === "it"
                ? "Progettiamo e sviluppiamo soluzioni enterprise-ready di nuova generazione grazie alla nostra esperienza consolidata nell'utilizzo di tecnologie all'avanguardia come Microsoft, Java, PHP e Mobile Native. Siamo il partner ideale per la tua trasformazione digitale."
                : "We design and develop next-generation enterprise-ready solutions thanks to our consolidated experience with cutting-edge technologies like Microsoft, Java, PHP and Mobile Native. We are the ideal partner for your digital transformation."}
            </p>
            <div style={{ marginTop: 24, padding: "20px 22px", background: "var(--bg-subtle)", borderRadius: 14, borderLeft: "3px solid var(--tl-blue-primary)" }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--tl-blue-primary)", marginBottom: 8 }}>{lang === "it" ? "La nostra vision" : "Our vision"}</div>
              <p style={{ fontSize: 15, color: "var(--fg-1)", lineHeight: 1.55, margin: 0, fontStyle: "italic" }}>
                {lang === "it"
                  ? "Vogliamo essere un punto di riferimento per i nostri clienti nell'approccio ad una AI-Digital Transformation sostenibile, misurabile e funzionale, impegnandoci ad ottenere un risultato inclusivo, affidabile, responsabile e trasparente."
                  : "We want to be a reference point for our clients in their approach to a sustainable, measurable and functional AI-Digital Transformation — committed to delivering an inclusive, reliable, responsible and transparent result."}
              </p>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 14 }} className="value-cards">
            {values.map((v) => (
              <div key={v.t} style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 14, padding: 24, boxShadow: "var(--shadow-sm)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 18 }}>
                <div style={{ width: 44, height: 44, borderRadius: 11, background: "linear-gradient(135deg,#0228A3,#1E8BFF)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <window.Icon name={v.icon} size={20} />
                </div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: "var(--fg-1)", marginBottom: 6, letterSpacing: "-0.005em" }}>{v.t}</div>
                  <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55 }}>{v.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) { .mission-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
        `}</style>
      </window.Container>
    </window.Section>
  );
};

/* "Cosa facciamo" platforms — coerente con la logo-strip della home (v0.4.0):
   Adobe Commerce/Magento, Microsoft Dynamics 365, Microsoft Power Platform.
   Salesforce rimosso (non più nel portafoglio promosso). */
window.ChiSiamoTimeline = function ChiSiamoPlatforms({ lang }) {
  const platforms = lang === "it" ? [
    { n: "Adobe Commerce / Magento", d: "Adobe Commerce con tecnologia Magento offre soluzioni e-Commerce personalizzabili, flessibili e scalabili sia per le aziende B2B che B2C." },
    { n: "Microsoft Dynamics 365", d: "Suite CRM ed ERP cloud-native di Microsoft: vendite, marketing, customer service e operations integrati nativamente con Microsoft 365, Power Platform e Azure." },
    { n: "Microsoft Power Platform", d: "Strumenti di sviluppo low-code basati sull'AI per creare applicazioni aziendali personalizzate, automatizzare i flussi di lavoro ed analizzare i dati." },
  ] : [
    { n: "Adobe Commerce / Magento", d: "Adobe Commerce, powered by Magento, offers customisable, flexible, scalable e-Commerce solutions for both B2B and B2C companies." },
    { n: "Microsoft Dynamics 365", d: "Microsoft's cloud-native CRM and ERP suite: sales, marketing, customer service and operations natively integrated with Microsoft 365, Power Platform and Azure." },
    { n: "Microsoft Power Platform", d: "AI-driven low-code development tools to build tailored business applications, automate workflows and analyse your data." },
  ];
  return (
    <window.Section dark style={{ overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 80% 20%, rgba(40,209,254,.12) 0%, transparent 50%)", pointerEvents: "none" }} />
      <window.Container style={{ position: "relative" }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <window.Eyebrow light>{lang === "it" ? "Cosa facciamo" : "What we do"}</window.Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,44px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0, color: "#fff" }}>
            {lang === "it" ? "Le piattaforme con cui lavoriamo." : "The platforms we work with."}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 1, background: "rgba(255,255,255,.08)", borderRadius: 20, overflow: "hidden", border: "1px solid rgba(255,255,255,.10)" }}>
          {platforms.map((p, i) => (
            <div key={p.n} style={{ background: "rgba(8,12,26,.65)", padding: 28 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--tl-cyan)", letterSpacing: ".1em", marginBottom: 16 }}>{String(i + 1).padStart(2, "0")} / {String(platforms.length).padStart(2, "0")}</div>
              <h3 style={{ fontSize: 19, fontWeight: 700, color: "#fff", margin: "0 0 10px", letterSpacing: "-0.01em" }}>{p.n}</h3>
              <p style={{ fontSize: 13.5, color: "rgba(255,255,255,.65)", lineHeight: 1.55, margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};

/* Real team roles from chi_siamo.team_section.roles */
window.ChiSiamoTeam = function ChiSiamoTeam({ lang }) {
  const roles = lang === "it" ? [
    { role: "UX/UI Designer", description: "È il responsabile della progettazione delle interfacce, fondamentale negli e-Commerce e in tutti i servizi all'utente.", icon: "spark", g1: "#0228A3", g2: "#28D1FE", image: "assets/team/uxui-designer.jpg" },
    { role: "Solution Architect / Technical Lead", description: "È il responsabile del progetto, affianca il PM per l'intera durata. È inoltre l'interfaccia tecnica per tutti gli stakeholder.", icon: "network", g1: "#0B57E0", g2: "#7EE3FF", image: "assets/team/solution-architect.jpg" },
    { role: "Sviluppatori Certificati", description: "Sono figure specializzate e certificate nei vari applicativi dedicate allo sviluppo back-end e front-end dei singoli progetti.", icon: "code", g1: "#1E8BFF", g2: "#28D1FE", image: "assets/team/sviluppatori-certificati.jpg" },
  ] : [
    { role: "UX/UI Designer", description: "Responsible for interface design — fundamental in e-Commerce and all user-facing services.", icon: "spark", g1: "#0228A3", g2: "#28D1FE", image: "assets/team/uxui-designer.jpg" },
    { role: "Solution Architect / Technical Lead", description: "Responsible for the project, working alongside the PM for the whole duration. The technical interface for all stakeholders.", icon: "network", g1: "#0B57E0", g2: "#7EE3FF", image: "assets/team/solution-architect.jpg" },
    { role: "Certified Developers", description: "Specialised, certified figures across the various applications, dedicated to back-end and front-end development of each project.", icon: "code", g1: "#1E8BFF", g2: "#28D1FE", image: "assets/team/sviluppatori-certificati.jpg" },
  ];
  return (
    <window.Section style={{ background: "var(--bg-subtle)" }}>
      <window.Container>
        <div style={{ maxWidth: 720, marginBottom: 44 }}>
          <window.Eyebrow>{lang === "it" ? "Il nostro Team" : "Our team"}</window.Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,44px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>
            {lang === "it" ? "Competenze diverse, soluzioni scalabili." : "Diverse skills, scalable solutions."}
          </h2>
          <p style={{ fontSize: 17, color: "var(--fg-2)", marginTop: 16, maxWidth: 640 }}>
            {lang === "it"
              ? "All'interno del nostro Team sono racchiuse diverse competenze, essenziali per creare soluzioni scalabili e personalizzate."
              : "Our team brings together diverse skills — essential to create scalable, tailored solutions."}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
          {roles.map((p) => (
            <div key={p.role} style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 16, padding: 26, boxShadow: "var(--shadow-sm)" }}>
              <div style={{ width: "100%", aspectRatio: "16/9", borderRadius: 12, background: p.image ? "#050E2B" : `linear-gradient(135deg, ${p.g1} 0%, ${p.g2} 100%)`, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", marginBottom: 20, position: "relative", overflow: "hidden" }}>
                {p.image ? (
                  <img src={p.image} alt={p.role} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                ) : (
                  <React.Fragment>
                    <svg style={{ position: "absolute", inset: 0, opacity: 0.25 }} viewBox="0 0 100 60" preserveAspectRatio="none">
                      <defs><pattern id={`p-${p.role.replace(/[^a-z]/gi,"")}`} width="12" height="12" patternUnits="userSpaceOnUse"><path d="M12 0H0V12" fill="none" stroke="white" strokeWidth="0.4" /></pattern></defs>
                      <rect width="100%" height="100%" fill={`url(#p-${p.role.replace(/[^a-z]/gi,"")})`} />
                    </svg>
                    <window.Icon name={p.icon} size={42} strokeWidth={1.4} />
                  </React.Fragment>
                )}
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, color: "var(--fg-1)", letterSpacing: "-0.01em", marginBottom: 8 }}>{p.role}</div>
              <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55 }}>{p.description}</div>
            </div>
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};

