// ============================================================
// PRODOTTO — Kodari
// Backend tecnico · API Gateway · Bridge Layer
// Accent: brandGreen (#00E676)
// ============================================================
const { useState: useStateKD, useEffect: useEffectKD, useRef: useRefKD } = React;
const motionKD = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] });
const useInViewKD = (...a) => window.FramerMotion.useInView(...a);

// ── HERO ────────────────────────────────────────────────
function KodariHero() {
  const ref = useRefKD(null);
  const isInView = useInViewKD(ref, { once: true });
  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: '160px 5% 90px', background: colors.bgPrimary,
    }}>
      <SteelHexGrid />
      <Cartouche accent="#00ff88" text="KODARI · 基盤" top={130} right={36} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse 60% 40% at 25% 30%, rgba(0,230,118,0.1), transparent 70%),
          radial-gradient(ellipse 40% 50% at 75% 70%, rgba(0,180,216,0.05), transparent 70%)
        `,
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center',
      }} className="kd-hero-grid">
        <div>
          <motionKD.div
            initial={{ opacity: 0, y: -10 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '6px 14px', marginBottom: 24,
              border: `1px solid rgba(0,230,118,0.3)`,
              borderRadius: 999, background: 'rgba(15,15,35,0.6)',
            }}
          >
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: colors.brandGreen,
              boxShadow: `0 0 10px ${colors.brandGreen}`,
              animation: 'blink 1.6s ease-in-out infinite',
            }} />
            <span style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.7rem', color: colors.brandGreen,
              letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
            }}>Technology Platform</span>
          </motionKD.div>

          <motionKD.h1
            initial={{ opacity: 0, y: 24 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.15 }}
            style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: 'clamp(2.8rem, 6vw, 5rem)',
              fontWeight: 700, letterSpacing: 2, lineHeight: 1,
              color: colors.brandGreen,
              marginBottom: 18,
              textShadow: `0 0 30px rgba(0,230,118,0.3)`,
            }}
          >Kodari</motionKD.h1>

          <motionKD.p
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(1.2rem, 2vw, 1.55rem)',
              color: colors.textGold, fontStyle: 'italic',
              lineHeight: 1.4, marginBottom: 26, textWrap: 'balance',
            }}
          >Precisione del Codice, Eleganza della Soluzione.</motionKD.p>

          <motionKD.p
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.45 }}
            style={{
              fontSize: '1.05rem', color: '#c8c5bd',
              lineHeight: 1.75, marginBottom: 36, fontWeight: 300,
              maxWidth: 580, textWrap: 'pretty',
            }}
          >
            La piattaforma tecnica dell'ecosistema. Framework RPG ILE, API Gateway Node.js
            con sicurezza enterprise, Kodari Bridge per il dialogo strutturato fra IBM i e il mondo moderno.
          </motionKD.p>

          <motionKD.div
            initial={{ opacity: 0, y: 16 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}
          >
            <a href="../contatti.html" style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem', fontWeight: 600,
              padding: '14px 28px',
              background: `linear-gradient(135deg, ${colors.brandGreen}, ${colors.brandEmerald})`,
              color: colors.bgPrimary, borderRadius: 6,
              textDecoration: 'none', letterSpacing: 0.5,
              boxShadow: `0 0 30px rgba(0,230,118,0.25)`,
              transition: 'all 0.3s',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 40px rgba(0,230,118,0.4)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(0,230,118,0.25)'; }}
            >Parla con un tecnico <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
            <a href="#stack" style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.95rem', fontWeight: 500,
              padding: '14px 28px',
              background: 'transparent', color: colors.textPrimary,
              border: `1px solid rgba(0,230,118,0.35)`,
              borderRadius: 6, textDecoration: 'none',
              letterSpacing: 0.5, transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = colors.brandGreen; e.currentTarget.style.color = colors.brandGreen; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,230,118,0.35)'; e.currentTarget.style.color = colors.textPrimary; }}
            >Stack tecnico</a>
          </motionKD.div>
        </div>

        <motionKD.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={isInView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 1, delay: 0.4 }}
          style={{ display: 'flex', justifyContent: 'center' }}
          className="kd-hero-logo"
        >
          <div style={{ position: 'relative' }}>
            <KodariLogo size={260} />
            <div style={{
              position: 'absolute', inset: -40,
              background: `radial-gradient(circle, rgba(0,230,118,0.12), transparent 70%)`,
              zIndex: -1, pointerEvents: 'none',
            }} />
          </div>
        </motionKD.div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .kd-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .kd-hero-logo { order: -1; }
        }
      `}</style>
    </section>
  );
}

// ── COSA FA ────────────────────────────────────────────
function KodariWhatItDoes() {
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgSecondary,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <div style={{
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.72rem', color: colors.brandGreen,
            letterSpacing: 3, textTransform: 'uppercase',
            marginBottom: 16, fontWeight: 600,
          }}>// Cosa fa</div>
          <h2 style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(1.9rem, 3.4vw, 2.7rem)',
            color: colors.textPrimary, fontWeight: 500,
            lineHeight: 1.3, marginBottom: 20, textWrap: 'balance',
          }}>
            Backend e dati IBM i, esposti come API moderne —<br />
            <span style={{ color: colors.brandGreen, fontStyle: 'italic' }}>senza tradurre, senza rompere, senza compromessi.</span>
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20,
        }}>
          {[
            { icon: 'shield', title: 'Bridge Layer', desc: 'RPG ILE + SQLRPGLE Free-Format. WebServices nativi che parlano JSON senza middleware esterni.' },
            { icon: 'server', title: 'API Gateway', desc: 'Node.js con JWT + MFA + Refresh Tokens, ODBC verso DB2/400, gestito in produzione con PM2.' },
            { icon: 'code-2', title: 'Framework RPG', desc: 'Pattern e librerie codificate per accelerare lo sviluppo IBM i mantenendo la qualità del codice nativo.' },
          ].map((c, i) => (
            <motionKD.div key={i}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              style={{
                padding: 28,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(0,230,118,0.18)`,
                borderRadius: 12, position: 'relative', overflow: 'hidden',
              }}
            >
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: `linear-gradient(90deg, transparent, ${colors.brandGreen}, transparent)`,
                opacity: 0.5,
              }} />
              <Icon name={c.icon} size={28} color={colors.brandGreen} style={{ marginBottom: 14 }} />
              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.15rem', color: colors.textPrimary,
                fontWeight: 500, marginBottom: 10,
              }}>{c.title}</h3>
              <p style={{
                fontSize: '0.9rem', color: colors.textMuted,
                lineHeight: 1.7, fontWeight: 300,
              }}>{c.desc}</p>
            </motionKD.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

// ── ARCHITETTURA Bridge ────────────────────────────────
function KodariArchitecture() {
  const flow = [
    { label: 'API Gateway', sub: 'Node.js · JWT+MFA · ODBC', icon: 'server', color: colors.brandGreen },
    { label: 'Kodari Bridge', sub: 'RPG ILE · SQLRPGLE · WebServices', icon: 'shield', color: colors.brandCyan },
    { label: 'Data Layer', sub: 'DB2/400 · IBM i · Audit Journal', icon: 'database', color: colors.brandGoldMuted },
  ];

  return (
    <AnimatedSection id="stack" style={{
      padding: '110px 5%', background: colors.bgPrimary, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <SectionHeading
          eyebrow="// Architettura"
          title="Tre layer, zero middleware"
          sub="Calcolo e dati coesistono sullo stesso server IBM i. Gateway, Bridge e Data Layer parlano in process, senza middleware esterni."
        />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 60 }}>
          {flow.map((layer, i) => (
            <React.Fragment key={i}>
              <motionKD.div
                initial={{ opacity: 0, x: i % 2 === 0 ? -30 : 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.12, duration: 0.5 }}
                style={{
                  padding: '24px 28px',
                  background: 'rgba(255,255,255,0.02)',
                  border: `1px solid ${layer.color}25`,
                  borderLeft: `3px solid ${layer.color}`,
                  borderRadius: 8,
                  display: 'flex', alignItems: 'center', gap: 22,
                }}
              >
                <div style={{
                  width: 50, height: 50, flexShrink: 0,
                  borderRadius: 8,
                  background: `${layer.color}10`,
                  border: `1px solid ${layer.color}30`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={layer.icon} size={22} color={layer.color} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <h3 style={{
                    fontFamily: "'DM Sans', sans-serif",
                    fontSize: '1.05rem', fontWeight: 600,
                    color: colors.textPrimary, marginBottom: 4,
                  }}>{layer.label}</h3>
                  <div style={{
                    fontSize: '0.78rem', color: layer.color,
                    fontFamily: "'Courier Prime', monospace",
                    fontWeight: 600, letterSpacing: 0.5,
                  }}>{layer.sub}</div>
                </div>
                <div style={{
                  fontFamily: "'Courier Prime', monospace",
                  fontSize: '0.75rem', color: colors.textDim,
                  letterSpacing: 1,
                }}>L{String(i + 1).padStart(2, '0')}</div>
              </motionKD.div>
              {i < flow.length - 1 && (
                <div style={{ display: 'flex', justifyContent: 'center', padding: '6px 0' }}>
                  <svg width="2" height="22">
                    <line x1="1" y1="0" x2="1" y2="22"
                      stroke={colors.brandGreen} strokeWidth="2"
                      strokeDasharray="3 3" opacity="0.6"
                      style={{ animation: 'dash-flow 1.5s linear infinite' }} />
                  </svg>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

// ── SECURITY ────────────────────────────────────────────
function KodariSecurity() {
  const features = [
    { icon: 'key-round', title: 'JWT + Refresh Tokens', desc: 'Access token short-lived, refresh rotation, revoca centralizzata.' },
    { icon: 'fingerprint', title: 'MFA opzionale', desc: 'Multi-factor authentication integrabile per ruoli sensibili.' },
    { icon: 'plug', title: 'ODBC nativo IBM i', desc: 'Connessione diretta DB2/400 senza middleware terzi.' },
    { icon: 'history', title: 'Audit Journal', desc: 'Tracciatura nativa IBM i di ogni operazione, immutabile.' },
    // { icon: 'shield-check', title: 'NIS2 Compliant', desc: 'Architettura allineata ai requisiti normativi europei.' },
  ];
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgSecondary,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="// Sicurezza"
          title="Enterprise-grade by default"
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16, marginTop: 56,
        }} className="kd-feat-grid">
          {features.map((f, i) => (
            <motionKD.div key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08, duration: 0.45 }}
              style={{
                padding: 22,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(0,230,118,0.15)`,
                borderRadius: 10,
                display: 'flex', alignItems: 'flex-start', gap: 14,
              }}
            >
              <div style={{
                width: 38, height: 38, flexShrink: 0,
                borderRadius: 6,
                background: `rgba(0,230,118,0.08)`,
                border: `1px solid rgba(0,230,118,0.25)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={f.icon} size={18} color={colors.brandGreen} />
              </div>
              <div>
                <h4 style={{
                  fontSize: '0.95rem', color: colors.textPrimary,
                  fontWeight: 600, marginBottom: 4,
                  fontFamily: "'DM Sans', sans-serif",
                }}>{f.title}</h4>
                <p style={{
                  fontSize: '0.82rem', color: colors.textMuted,
                  lineHeight: 1.6, fontWeight: 300,
                }}>{f.desc}</p>
              </div>
            </motionKD.div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .kd-feat-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .kd-feat-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </AnimatedSection>
  );
}

// ── USE CASES ───────────────────────────────────────────
function KodariUseCases() {
  const cases = [
    {
      title: 'Esposizione di logiche IBM i a frontend moderni',
      problem: 'I dati e la logica vivono dentro l\'IBM i, ma il mondo (web, mobile, partner) parla solo REST.',
      solution: 'Kodari Bridge espone WebServices RPG come endpoint JSON sicuri tramite l\'API Gateway.',
      kpi: 'API REST native, autenticate, performanti',
    },
    {
      title: 'Integrazione con sistemi terzi e marketplace',
      problem: 'Connettere un ERP IBM i a piattaforme esterne richiede di solito middleware costosi e fragili.',
      solution: 'Il Gateway gestisce le integrazioni in/out con autenticazione granulare e logging completo.',
      kpi: 'Integrazioni dirette, audit journal nativo',
    },
    {
      title: 'Co-esistenza moderno + legacy',
      problem: 'Vuoi modernizzare ma non puoi spegnere niente: 5250 e React devono convivere.',
      solution: 'Kodari permette ai due mondi di parlare la stessa lingua sui dati, senza duplicare logica.',
      kpi: 'Zero riscritture, single source of truth',
    },
  ];
  return (
    <AnimatedSection style={{ padding: '110px 5%', background: colors.bgPrimary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading eyebrow="// Casi d'uso" title="Quando Kodari fa la differenza" />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20, marginTop: 56,
        }}>
          {cases.map((c, i) => (
            <motionKD.div key={i}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              style={{
                padding: 28,
                background: 'rgba(255,255,255,0.02)',
                border: `1px solid rgba(0,230,118,0.15)`,
                borderRadius: 12, display: 'flex', flexDirection: 'column',
              }}
            >
              <div style={{
                fontFamily: "'Courier Prime', monospace",
                fontSize: '0.65rem', color: colors.brandGreen,
                letterSpacing: 2, marginBottom: 12, fontWeight: 600,
              }}>CASO {String(i + 1).padStart(2, '0')}</div>
              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.1rem', color: colors.textPrimary,
                fontWeight: 500, marginBottom: 18, lineHeight: 1.35,
              }}>{c.title}</h3>
              <div style={{ fontSize: '0.7rem', color: colors.textDim, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 6, fontWeight: 600 }}>Problema</div>
              <p style={{ fontSize: '0.85rem', color: colors.textMuted, lineHeight: 1.65, fontWeight: 300, marginBottom: 14 }}>{c.problem}</p>
              <div style={{ fontSize: '0.7rem', color: colors.brandGreen, textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 6, fontWeight: 600 }}>Soluzione</div>
              <p style={{ fontSize: '0.85rem', color: colors.textMuted, lineHeight: 1.65, fontWeight: 300, marginBottom: 18, flex: 1 }}>{c.solution}</p>
              <div style={{
                padding: '10px 14px',
                background: 'rgba(0,230,118,0.06)',
                border: `1px solid rgba(0,230,118,0.25)`,
                borderRadius: 6, fontSize: '0.78rem',
                color: colors.brandGreen, fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Icon name="check" size={14} color={colors.brandGreen} />
                {c.kpi}
              </div>
            </motionKD.div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

// ── CROSS LINKS ─────────────────────────────────────────
function KodariCrossLinks() {
  const others = [
    { name: 'AiKo Engine', role: 'AI Orchestration', href: 'aiko.html', Logo: AiKoLogo, color: colors.brandGold },
    { name: 'Lumiere', role: 'Frontend Enterprise', href: 'lumiere.html', Logo: LumiereLogo, color: colors.brandGold },
    { name: 'Lestage', role: 'File Flow Orchestration', href: 'lestage.html', Logo: LestageLogo, color: colors.brandAmber },
  ];
  return (
    <AnimatedSection style={{ padding: '90px 5%', background: colors.bgSecondary }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.72rem', color: colors.brandGreen,
            letterSpacing: 3, textTransform: 'uppercase',
            marginBottom: 16, fontWeight: 600,
          }}>// Ecosistema</div>
          <h2 style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(1.6rem, 2.6vw, 2.1rem)',
            color: colors.textPrimary, fontWeight: 500, marginBottom: 14,
          }}>Kodari è la spina dorsale</h2>
          <p style={{ color: colors.textMuted, lineHeight: 1.7, fontWeight: 300, maxWidth: 640, margin: '0 auto' }}>
            AiKo genera codice che gira su Kodari. Lumiere lo consuma. Lestage ci si appoggia per i flussi.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16,
        }}>
          {others.map(o => (
            <a key={o.name} href={o.href} style={{
              padding: 20,
              background: 'rgba(255,255,255,0.02)',
              border: `1px solid rgba(255,255,255,0.06)`,
              borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 16,
              textDecoration: 'none', transition: 'all 0.3s',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = o.color; e.currentTarget.style.background = `${o.color}08`; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; e.currentTarget.style.background = 'rgba(255,255,255,0.02)'; }}
            >
              <o.Logo size={48} />
              <div style={{ flex: 1 }}>
                <div style={{ color: o.color, fontWeight: 600, fontSize: '1rem', marginBottom: 2 }}>{o.name}</div>
                <div style={{ color: colors.textDim, fontSize: '0.78rem', fontFamily: "'Courier Prime', monospace" }}>{o.role}</div>
              </div>
              <Icon name="arrow-right" size={16} color={o.color} />
            </a>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}

// ── CTA ─────────────────────────────────────────────────
function KodariCta() {
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgPrimary, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,230,118,0.06), transparent 70%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <KodariLogo size={80} />
        <h2 style={{
          fontFamily: "'Cinzel', serif",
          fontSize: 'clamp(1.9rem, 3.6vw, 2.7rem)',
          color: colors.textPrimary, fontWeight: 500,
          lineHeight: 1.3, margin: '28px 0 20px', textWrap: 'balance',
        }}>
          Costruiamo il <span style={{ color: colors.brandGreen, fontStyle: 'italic' }}>bridge</span><br />
          tra il vostro IBM i e il futuro
        </h2>
        <p style={{
          fontSize: '1rem', color: colors.textMuted,
          lineHeight: 1.7, fontWeight: 300, marginBottom: 32,
          maxWidth: 560, margin: '0 auto 32px',
        }}>
          Una call tecnica con il nostro team per analizzare il vostro stack attuale e disegnare il percorso di integrazione.
        </p>
        <a href="../contatti.html" style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: '0.95rem', fontWeight: 600,
          padding: '15px 32px',
          background: `linear-gradient(135deg, ${colors.brandGreen}, ${colors.brandEmerald})`,
          color: colors.bgPrimary, borderRadius: 6, textDecoration: 'none',
          letterSpacing: 0.5,
          boxShadow: `0 0 30px rgba(0,230,118,0.3)`,
          transition: 'all 0.3s',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 40px rgba(0,230,118,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(0,230,118,0.3)'; }}
        >Prenota una call tecnica <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
      </div>
    </AnimatedSection>
  );
}

// ── APP ─────────────────────────────────────────────────
function KodariApp() {
  return (
    <React.Fragment>
      <SiteNav depth={1} current="prodotti" />
      <main>
        <KodariHero />
        <KodariWhatItDoes />
        <KodariArchitecture />
        <KodariSecurity />
        <KodariUseCases />
        <KodariCrossLinks />
        <KodariCta />
      </main>
      <SiteFooter depth={1} />
    </React.Fragment>
  );
}

function mountKodari() {
  const ready =
    typeof colors !== 'undefined' &&
    typeof CompassLogo !== 'undefined' &&
    typeof SiteNav !== 'undefined' &&
    typeof SiteFooter !== 'undefined' &&
    window.FramerMotion && window.lucide;
  if (!ready) return setTimeout(mountKodari, 50);
  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<KodariApp />);
  if (window.lucide) {
    const observer = new MutationObserver(() => window.lucide.createIcons());
    observer.observe(document.body, { childList: true, subtree: true });
    window.lucide.createIcons();
  }
}
mountKodari();