/* global React */

window.ServiziHero = function ServiziHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Servizi",
    h1a: "Scopri i servizi, gli approcci",
    h1b: "e le metodologie AI",
    lead: "Garantiamo prodotti e soluzioni all'avanguardia ottimizzati per le specifiche esigenze e dispositivi moderni.",
  } : {
    eyebrow: "Services",
    h1a: "Discover our services, approaches",
    h1b: "and AI methodologies",
    lead: "We deliver cutting-edge products and solutions optimised for specific needs and modern devices.",
  };
  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.15, zIndex: 1 }}>
        <defs><pattern id="srvgrid" 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(#srvgrid)" />
      </svg>
      <window.Container style={{ position: "relative", zIndex: 2, maxWidth: 920 }}>
        <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.ServiziDetail = function ServiziDetail({ lang }) {
  // Service blocks: AI, E-Commerce, Custom Apps
  const services = lang === "it" ? [
    {
      id: "ai", icon: "cpu", tag: "Soluzioni AI", title: "Soluzioni AI",
      image: "assets/services/ai-solutions.jpg",
      lead: "Tecnolife progetta e integra soluzioni di AI generativa e agentica enterprise: dai modelli di frontiera ai modelli open self-hosted, con pattern RAG, knowledge base aziendali, agenti e orchestrazione, sempre con governance, sicurezza e compliance.",
      points: [
        "LLM di frontiera — Anthropic Claude, OpenAI GPT, Google Gemini — per copilot, contact center automation e knowledge work",
        "Modelli open & self-hosted — Llama, Mistral, DeepSeek, Qwen — deploy on-prem o private cloud per dati sensibili e sovranità",
        "RAG su knowledge base aziendali con vector DB (Pinecone, Weaviate, pgvector) e ricerca ibrida semantica + keyword",
        "AI agents & workflow orchestration — tool use, function calling, MCP, multi-step automation di processi business",
        "AI Gateway, observability, prompt management, LLMOps, valutazione qualità e guardrail su output",
        "Integrazione con dato aziendale — ERP, CRM, data lake — via API, eventi e architetture event-driven",
      ],
      stack: ["Claude", "GPT-4o", "Gemini", "Llama", "Mistral", "DeepSeek", "RAG", "Vector DB", "MCP", "LangChain"],
    },
    {
      id: "ecommerce", icon: "box", tag: "E-Commerce", title: "Soluzioni E-Commerce",
      image: "assets/services/ecommerce.jpg",
      lead: "E-Commerce custom con Adobe Magento, integrato con CRM, ERP e marketplace per esperienze omnichannel.",
      points: [
        "Adobe Commerce / Magento — piattaforma principale per soluzioni custom",
        "Elasticsearch / Redis per ricerca prodotti e cache ottimizzate",
        "PWA con React o Vue Storefront per e-commerce mobile veloci",
        "Adobe Commerce Cloud per scalabilità e backup automatico",
        "Headless Commerce con API REST/GraphQL",
        "Integrazione con CRM, ERP, App Mobile, Marketplace",
        "Architettura Omnichannel",
        "Metodologia Kanban per delivery flessibile",
      ],
      stack: ["Magento 2", "Adobe Commerce Cloud", "Elasticsearch", "Redis", "React", "Vue Storefront"],
    },
    {
      id: "custom", icon: "code", tag: "Custom", title: "Sviluppo applicazioni custom",
      image: "assets/services/custom-software.jpg",
      lead: "Combiniamo le più recenti tecnologie di sviluppo software con approcci di design che massimizzano manutenibilità, estensibilità e user experience.",
      points: [
        "Frontend: React.js, Angular, Vue.js per interfacce reattive",
        ".NET Core, Node.js, Java Spring Boot per back-end scalabili",
        "Mobile: Swift (iOS), Kotlin (Android), Flutter cross-platform",
        "PostgreSQL, MongoDB, Redis — relazionali e non-relazionali",
        "Pattern architetturali per business logic e UI",
        "CQRS per scalabilità nelle operazioni di lettura/scrittura",
      ],
      stack: ["React", "Angular", "Vue", ".NET Core", "Node.js", "Spring Boot", "Swift", "Kotlin", "Flutter"],
    },
  ] : [
    {
      id: "ai", icon: "cpu", tag: "AI Solutions", title: "AI Solutions",
      image: "assets/services/ai-solutions.jpg",
      lead: "Tecnolife designs and integrates enterprise generative and agentic AI: from frontier models to self-hosted open models, with RAG patterns, corporate knowledge bases, agents and orchestration — always with governance, security and compliance.",
      points: [
        "Frontier LLMs — Anthropic Claude, OpenAI GPT, Google Gemini — for copilots, contact-center automation and knowledge work",
        "Open & self-hosted models — Llama, Mistral, DeepSeek, Qwen — deployed on-prem or private cloud for sensitive data and data sovereignty",
        "RAG over corporate knowledge bases with vector DBs (Pinecone, Weaviate, pgvector) and hybrid semantic + keyword search",
        "AI agents & workflow orchestration — tool use, function calling, MCP, multi-step automation of business processes",
        "AI Gateway, observability, prompt management, LLMOps, output quality evaluation and guardrails",
        "Integration with enterprise data — ERP, CRM, data lake — via APIs, events and event-driven architectures",
      ],
      stack: ["Claude", "GPT-4o", "Gemini", "Llama", "Mistral", "DeepSeek", "RAG", "Vector DB", "MCP", "LangChain"],
    },
    {
      id: "ecommerce", icon: "box", tag: "E-Commerce", title: "E-Commerce Solutions",
      image: "assets/services/ecommerce.jpg",
      lead: "Custom E-Commerce with Adobe Magento, integrated with CRM, ERP and marketplaces for omnichannel experiences.",
      points: [
        "Adobe Commerce / Magento — main platform for custom solutions",
        "Elasticsearch / Redis for product search and optimised cache",
        "PWA with React or Vue Storefront for fast mobile e-commerce",
        "Adobe Commerce Cloud for scalability and automatic backup",
        "Headless Commerce with REST/GraphQL APIs",
        "Integration with CRM, ERP, Mobile Apps, Marketplaces",
        "Omnichannel architecture",
        "Kanban methodology for flexible delivery",
      ],
      stack: ["Magento 2", "Adobe Commerce Cloud", "Elasticsearch", "Redis", "React", "Vue Storefront"],
    },
    {
      id: "custom", icon: "code", tag: "Custom", title: "Custom application development",
      image: "assets/services/custom-software.jpg",
      lead: "We combine the latest software development technologies with design approaches that maximise maintainability, extensibility and user experience.",
      points: [
        "Frontend: React.js, Angular, Vue.js for reactive interfaces",
        ".NET Core, Node.js, Java Spring Boot for scalable back-ends",
        "Mobile: Swift (iOS), Kotlin (Android), Flutter cross-platform",
        "PostgreSQL, MongoDB, Redis — relational and non-relational",
        "Architectural patterns for business logic and UI",
        "CQRS for read/write scalability",
      ],
      stack: ["React", "Angular", "Vue", ".NET Core", "Node.js", "Spring Boot", "Swift", "Kotlin", "Flutter"],
    },
  ];

  return (
    <window.Section style={{ background: "var(--bg)" }}>
      <window.Container>
        <div style={{ display: "flex", flexDirection: "column", gap: 80 }}>
          {services.map((s, i) => (
            <ServiceRow key={s.id} {...s} reverse={i % 2 === 1} lang={lang} />
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};

function ServiceRow({ id, icon, tag, title, lead, points, stack, image, reverse, lang }) {
  return (
    <div id={id} className="srv-row" style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center",
      direction: reverse ? "rtl" : "ltr",
    }}>
      <div style={{ direction: "ltr" }}>
        <window.Tag color="cyan">{tag}</window.Tag>
        <h2 style={{ fontSize: "clamp(28px,3vw,42px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.15, margin: "16px 0 14px", color: "var(--fg-1)" }}>{title}</h2>
        <p style={{ fontSize: 18, color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>{lead}</p>
        <ul style={{ marginTop: 22, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 0 }}>
          {points.map((p, i) => (
            <window.Bullet key={p} n={i + 1}>{p}</window.Bullet>
          ))}
        </ul>
        <div style={{ marginTop: 24, display: "flex", flexWrap: "wrap", gap: 8 }}>
          {stack.map((s) => (
            <span key={s} style={{ fontFamily: "var(--font-mono)", fontSize: 12, padding: "4px 10px", borderRadius: 999, background: "var(--tl-grey-100)", color: "var(--fg-2)" }}>{s}</span>
          ))}
        </div>
      </div>
      <ServiceVisual icon={icon} reverse={reverse} image={image} />
      <style>{`
        @media (max-width: 880px) { .srv-row { grid-template-columns: 1fr !important; direction: ltr !important; gap: 30px !important; } }
      `}</style>
    </div>
  );
}

function ServiceVisual({ icon, reverse, image }) {
  if (image) {
    return (
      <div style={{
        direction: "ltr", borderRadius: 24, aspectRatio: "4/3",
        position: "relative", overflow: "hidden", boxShadow: "var(--shadow-lg)",
        backgroundColor: "#050E2B",
      }}>
        <img src={image} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(2,40,163,0.18) 0%, rgba(40,209,254,0.05) 50%, rgba(11,87,224,0.18) 100%)" }} />
      </div>
    );
  }
  return (
    <div style={{
      direction: "ltr", borderRadius: 24, aspectRatio: "4/3",
      background: "linear-gradient(135deg,#050E2B 0%,#0228A3 50%,#0B57E0 100%)",
      position: "relative", overflow: "hidden", boxShadow: "var(--shadow-lg)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg style={{ position: "absolute", inset: 0, opacity: 0.25 }} viewBox="0 0 400 300" preserveAspectRatio="none">
        <defs><pattern id={`g-${icon}`} width="32" height="32" patternUnits="userSpaceOnUse"><path d="M32 0H0V32" fill="none" stroke="#7EE3FF" strokeWidth="0.5" /></pattern></defs>
        <rect width="100%" height="100%" fill={`url(#g-${icon})`} />
        {Array.from({length: 8}).map((_, i) => (<circle key={i} cx={50 + i * 40} cy={60 + (i % 3) * 80} r="2" fill="#28D1FE" />))}
        {Array.from({length: 6}).map((_, i) => (<line key={i} x1={50 + i * 40} y1={60 + (i % 3) * 80} x2={50 + (i+1) * 40} y2={60 + ((i+1) % 3) * 80} stroke="#7EE3FF" strokeWidth="0.6" opacity="0.5" />))}
      </svg>
      <div style={{ position: "absolute", top: 24, left: reverse ? "auto" : 24, right: reverse ? 24 : "auto" }}><window.Chip size={22} /></div>
      <div style={{ position: "absolute", top: 60, left: reverse ? "auto" : 60, right: reverse ? 60 : "auto" }}><window.Chip size={14} /></div>
      <div style={{
        width: 120, height: 120, borderRadius: 30,
        background: "linear-gradient(135deg,#28D1FE,#1E8BFF)",
        boxShadow: "0 20px 50px rgba(40,209,254,.45), inset 0 2px 0 rgba(255,255,255,.3)",
        display: "flex", alignItems: "center", justifyContent: "center", color: "#fff",
        position: "relative", zIndex: 2,
      }}>
        <window.Icon name={icon} size={56} strokeWidth={1.4} />
      </div>
      <div style={{ position: "absolute", bottom: 30, right: reverse ? "auto" : 30, left: reverse ? 30 : "auto" }}><window.Chip size={18} /></div>
    </div>
  );
}

/* Markets — REAL 12 markets from JSON */
window.ServiziIndustries = function ServiziIndustries({ lang }) {
  const inds = lang === "it" ? [
    { icon: "network", t: "Telecomunicazioni", d: "Soluzioni AI per analisi avanzate, automazione di processi e ottimizzazione dei servizi." },
    { icon: "users", t: "Pubblica Amministrazione", d: "Modernizzazione dei processi, miglioramento dei servizi ai cittadini, gestione efficiente." },
    { icon: "shield-check", t: "Sanità", d: "AI e sistemi integrati per gestione dati, efficienza operativa e supporto decisionale." },
    { icon: "activity", t: "Aeroportuale", d: "Soluzioni digitali per canali di comunicazione e infrastrutture aeroportuali complesse." },
    { icon: "factory", t: "Industria", d: "Automazione e ottimizzazione dei processi, dalla produzione alla logistica." },
    { icon: "box", t: "Retail / GDO", d: "Personalizzazione customer experience, gestione inventario, ottimizzazione vendite." },
    { icon: "shield", t: "Finance & Insurance", d: "Gestione rischi, analisi predittive e miglioramento dell'esperienza cliente." },
    { icon: "spark", t: "E-Commerce", d: "Soluzioni custom con Adobe Magento e AI per dati, analisi clienti e personalizzazione." },
    { icon: "cpu", t: "Automotive", d: "Soluzioni dedicate al settore automotive." },
    { icon: "layers", t: "Trasporto e Logistica", d: "Soluzioni AI per logistica e trasporto." },
    { icon: "git", t: "Legale", d: "Soluzioni IT per studi legali e legaltech." },
    { icon: "code", t: "Servizi Informativi", d: "Soluzioni dedicate a editoria, media e servizi informativi." },
  ] : [
    { icon: "network", t: "Telecommunications", d: "AI solutions for advanced analytics, process automation and service optimisation." },
    { icon: "users", t: "Public Administration", d: "Process modernisation, improving services to citizens, efficient management." },
    { icon: "shield-check", t: "Healthcare", d: "AI and integrated systems for data management, operational efficiency and decision support." },
    { icon: "activity", t: "Airports", d: "Digital solutions for communication channels and complex airport infrastructures." },
    { icon: "factory", t: "Industry", d: "Automation and optimisation of processes, from production to logistics." },
    { icon: "box", t: "Retail / Large Distribution", d: "Customer experience personalisation, inventory and sales optimisation." },
    { icon: "shield", t: "Finance & Insurance", d: "Risk management, predictive analytics and customer experience." },
    { icon: "spark", t: "E-Commerce", d: "Custom solutions with Adobe Magento and AI for data, customer analysis, personalisation." },
    { icon: "cpu", t: "Automotive", d: "Tailored solutions for the automotive sector." },
    { icon: "layers", t: "Transport & Logistics", d: "AI solutions for logistics and transport." },
    { icon: "git", t: "Legal", d: "IT solutions for law firms and legaltech." },
    { icon: "code", t: "Information Services", d: "Solutions for publishing, media and information services." },
  ];
  return (
    <window.Section id="mercati" style={{ background: "var(--bg-subtle)" }}>
      <window.Container>
        <div style={{ maxWidth: 720, marginBottom: 44 }}>
          <window.Eyebrow>{lang === "it" ? "Mercati" : "Markets"}</window.Eyebrow>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,44px)", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>
            {lang === "it" ? "Soluzioni AI per ogni mercato." : "AI solutions for every market."}
          </h2>
          <p style={{ fontSize: 17, color: "var(--fg-2)", marginTop: 16, maxWidth: 640 }}>
            {lang === "it"
              ? "Tecnolife supporta ogni tipo di mercato: da Telco alla Logistica al Retail e tanto altro, con competenze certificate e soluzioni su misura."
              : "Tecnolife supports every market: from Telco to Logistics, Retail and beyond — with certified expertise and tailored solutions."}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 14 }}>
          {inds.map((it) => (
            <div key={it.t} style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 14, padding: 22 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(11,87,224,.08)", color: "var(--tl-blue-primary)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
                <window.Icon name={it.icon} size={18} />
              </div>
              <div style={{ fontSize: 15.5, fontWeight: 600, color: "var(--fg-1)", marginBottom: 6 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.5 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </window.Container>
    </window.Section>
  );
};