/* global React */
window.FactoryHero = function FactoryHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Tecnolife Factory™",
    h1a: "Portiamo l'AI",
    h1b: "in produzione.",
    lead: "Sei settimane. Quattro fasi. Un team. La Factory è il nostro metodo per portare AI in produzione con pricing fisso, milestone tracciate e codice in vostro repository.",
    cta1: "Contattaci", cta2: "Free Blueprint",
  } : {
    eyebrow: "Tecnolife Factory™",
    h1a: "We industrialise",
    h1b: "AI delivery.",
    lead: "Six weeks. Four phases. One team. The Factory is our method for shipping AI to production with fixed pricing, tracked milestones and code in your repository.",
    cta1: "Contact us", cta2: "Free Blueprint",
  };
  return (
    <div style={{ position: "relative", overflow: "hidden", color: "#fff", paddingTop: 160, paddingBottom: 120 }}>
      <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="fcgrid" 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(#fcgrid)" />
      </svg>
      <window.Container style={{ position: "relative", zIndex: 2, maxWidth: 920 }}>
        <window.Eyebrow light>{t.eyebrow}</window.Eyebrow>
        <h1 style={{ fontSize: "clamp(40px, 6.5vw, 84px)", fontWeight: 800, lineHeight: 1.02, 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: 680, marginTop: 28 }}>{t.lead}</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 32 }}>
          <window.Button size="lg" href="contatti.html" icon={<window.Icon name="arrow" size={16} />}>{t.cta1}</window.Button>
          <window.Button variant="glass" size="lg" href="blueprint.html" icon={<window.Icon name="arrow-up-right" size={14} />}>{t.cta2}</window.Button>
        </div>
      </window.Container>
    </div>
  );
};

window.FactoryTimeline = function FactoryTimeline({ lang }) {
  const phases = lang === "it" ? [
    { n: "01", w: "sett. 1", t: "Discovery", d: "Workshop di 2 giorni con il vostro team. Mappiamo sistemi, dati, KPI, vincoli, rischi.", outs: ["Mappa stack as-is", "Backlog ipotesi", "Lista stakeholder", "Carta dei rischi"] },
    { n: "02", w: "sett. 2", t: "Blueprint", d: "Architettura target, scelte tecnologiche, budget e timeline vincolante.", outs: ["Architettura target", "Costi puntuali", "SLA proposti", "Piano di rollout"] },
    { n: "03", w: "sett. 3-5", t: "Build", d: "Sprint settimanali, demo dal vivo ogni venerdì, codice in vostro repo dal giorno uno.", outs: ["Codice in CI/CD", "Documentazione viva", "Test coverage > 80%", "Demo settimanali"] },
    { n: "04", w: "sett. 6", t: "Run", d: "Go-live assistito. Monitoring, retraining, governance, transfer di conoscenza.", outs: ["Production ready", "Runbook", "Dashboard SLO", "Knowledge transfer"] },
  ] : [
    { n: "01", w: "wk 1", t: "Discovery", d: "Two-day workshop with your team. We map systems, data, KPIs, constraints, risks.", outs: ["As-is stack map", "Hypothesis backlog", "Stakeholder list", "Risk register"] },
    { n: "02", w: "wk 2", t: "Blueprint", d: "Target architecture, tech choices, binding budget and timeline.", outs: ["Target architecture", "Itemised costs", "Proposed SLAs", "Rollout plan"] },
    { n: "03", w: "wk 3-5", t: "Build", d: "Weekly sprints, live demos every Friday, code in your repo from day one.", outs: ["Code in CI/CD", "Living docs", "Test coverage > 80%", "Weekly demos"] },
    { n: "04", w: "wk 6", t: "Run", d: "Assisted go-live. Monitoring, retraining, governance, knowledge transfer.", outs: ["Production ready", "Runbook", "SLO dashboards", "Knowledge transfer"] },
  ];
  return (
    <window.Section dark style={{ overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 70%, rgba(40,209,254,.12) 0%, transparent 50%)", pointerEvents: "none" }} />
      <window.Container style={{ position: "relative" }}>
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <window.Eyebrow light>{lang === "it" ? "Il metodo" : "The method"}</window.Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,48px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0, color: "#fff" }}>
            {lang === "it" ? "Quattro fasi tracciate, una promessa: 6 settimane." : "Four tracked phases, one promise: 6 weeks."}
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0, position: "relative" }}>
          <div style={{ position: "absolute", left: 30, top: 30, bottom: 30, width: 2, background: "linear-gradient(to bottom, #28D1FE, rgba(40,209,254,.15))" }} />
          {phases.map((p, i) => (
            <div key={p.n} className="fc-row" style={{ display: "grid", gridTemplateColumns: "60px 200px 1fr", gap: 28, padding: "32px 0", alignItems: "start", borderBottom: i < phases.length - 1 ? "1px solid rgba(255,255,255,.08)" : "none", position: "relative" }}>
              <div style={{ width: 60, height: 60, borderRadius: 16, background: "linear-gradient(135deg,#0228A3,#28D1FE)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 18, boxShadow: "0 10px 28px rgba(40,209,254,.35)", position: "relative", zIndex: 2 }}>{p.n}</div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--tl-cyan)", letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 8 }}>{p.w}</div>
                <h3 style={{ fontSize: 26, fontWeight: 700, color: "#fff", margin: 0, letterSpacing: "-0.01em" }}>{p.t}</h3>
              </div>
              <div>
                <p style={{ fontSize: 15, color: "rgba(255,255,255,.78)", lineHeight: 1.55, margin: "0 0 18px", maxWidth: 560 }}>{p.d}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {p.outs.map((o) => (
                    <span key={o} style={{ fontSize: 12, padding: "5px 12px", borderRadius: 999, background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.12)", color: "rgba(255,255,255,.85)" }}>{o}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 720px) { .fc-row { grid-template-columns: 60px 1fr !important; } .fc-row > div:nth-child(3) { grid-column: 1 / -1; padding-left: 88px; } }
        `}</style>
      </window.Container>
    </window.Section>
  );
};

window.FactoryGuarantees = function FactoryGuarantees({ lang }) {
  const items = lang === "it" ? [
    { icon: "shield", t: "Pricing fisso", d: "Prezzo concordato in Blueprint. Niente cost-overrun, niente sorprese in fattura." },
    { icon: "git", t: "Codice vostro", d: "Repository sotto vostra ownership dal sprint 1. Niente vendor lock-in." },
    { icon: "shield-check", t: "ISO 27001 · GDPR", d: "Process certificati, audit log, data residency in EU. CISO-friendly." },
    { icon: "users", t: "Stesso team end-to-end", d: "Discovery, Build e Run con le stesse persone. Niente knowledge handoff." },
    { icon: "chart", t: "SLA enterprise", d: "99.9% di uptime garantito post go-live. Penali contrattuali." },
    { icon: "rocket", t: "Go/No-go a settimana 2", d: "Fine del Blueprint: andiamo avanti o vi ridiamo i soldi del Discovery." },
  ] : [
    { icon: "shield", t: "Fixed pricing", d: "Price set at Blueprint. No cost-overruns, no invoice surprises." },
    { icon: "git", t: "Your code", d: "Repo under your ownership from sprint 1. No vendor lock-in." },
    { icon: "shield-check", t: "ISO 27001 · GDPR", d: "Certified process, audit logs, EU data residency. CISO-friendly." },
    { icon: "users", t: "Same team end-to-end", d: "Discovery, Build and Run with the same people. No handoff." },
    { icon: "chart", t: "Enterprise SLA", d: "99.9% uptime post go-live. Contractual penalties." },
    { icon: "rocket", t: "Go/No-go at week 2", d: "End of Blueprint: we proceed or we refund Discovery." },
  ];
  return (
    <window.Section style={{ background: "var(--bg-subtle)" }}>
      <window.Container>
        <div style={{ maxWidth: 720, marginBottom: 44 }}>
          <window.Eyebrow>{lang === "it" ? "Garanzie" : "Guarantees"}</window.Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,44px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>
            {lang === "it" ? "Sei punti fermi del nostro approccio." : "Six firm points of our approach."}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 14 }}>
          {items.map((it) => (
            <div key={it.t} style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 16, padding: 24, boxShadow: "var(--shadow-sm)" }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: "linear-gradient(135deg,#0228A3,#1E8BFF)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
                <window.Icon name={it.icon} size={20} />
              </div>
              <div style={{ fontSize: 17, fontWeight: 600, color: "var(--fg-1)", marginBottom: 6, letterSpacing: "-0.01em" }}>{it.t}</div>
              <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};

window.FactoryStats = function FactoryStats({ lang }) {
  const stats = [
    { v: "6", l: lang === "it" ? "settimane medie su Ai Factory" : "median weeks on Ai Factory", s: "delivery" },
    { v: "94%", l: lang === "it" ? "progetti on-time" : "on-time projects", s: "performance" },
    { v: "100+", l: lang === "it" ? "progetti consegnati" : "projects delivered", s: "track record" },
    { v: "99.9%", l: "SLA uptime", s: "operations" },
  ];
  return (
    <window.Section style={{ background: "var(--bg)" }}>
      <window.Container>
        <div style={{ background: "linear-gradient(135deg,#050E2B 0%,#0228A3 50%,#0B57E0 100%)", borderRadius: 28, padding: "clamp(40px, 6vw, 72px)", color: "#fff", position: "relative", overflow: "hidden" }}>
          <svg style={{ position: "absolute", inset: 0, opacity: 0.12 }} viewBox="0 0 800 400" preserveAspectRatio="none">
            <defs><pattern id="fcstats" width="48" height="48" patternUnits="userSpaceOnUse"><path d="M48 0H0V48" fill="none" stroke="#7EE3FF" strokeWidth="0.4" /></pattern></defs>
            <rect width="100%" height="100%" fill="url(#fcstats)" />
          </svg>
          <div style={{ position: "absolute", top: 30, right: 60, width: 26, height: 26, borderRadius: 6, background: "linear-gradient(135deg,#1E8BFF,#28D1FE)", boxShadow: "0 8px 24px rgba(40,209,254,.5)" }} />
          <div style={{ position: "absolute", top: 90, right: 30, width: 14, height: 14, borderRadius: 4, background: "#28D1FE", opacity: 0.6 }} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 32 }}>
            {stats.map((s, i) => (
              <div key={i}>
                <div style={{ fontSize: 12, color: "var(--tl-cyan-soft)", letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 12, fontWeight: 600 }}>{s.s}</div>
                <div style={{ fontSize: "clamp(40px, 5vw, 64px)", fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1, background: "linear-gradient(135deg,#fff,#7EE3FF)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{s.v}</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.7)", marginTop: 10 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </window.Container>
    </window.Section>
  );
};