// ============================================================
// PAGE — Chi Siamo
// Hero + Origini + Manifesto (3 pilastri) + Co-fondatori + CTA
// ============================================================
const { useRef: useRefCS } = React;
const motionCS = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] });
const useInViewCS = (...a) => window.FramerMotion.useInView(...a);

// ──────────────────────────────────────────────
// 1 · HERO BACKDROP — "Portico della continuità"
// Portico in line art dorata (3 colonne + 2 archi) — il monumento
// che NON si demolisce. Sopra, nuovi moduli moderni (verde) si
// AGGANCIANO al portico senza alterarlo: + API, + Web, + AI.
// Le colonne sono "incise" con strate legacy (RPG/RPG IV/SQLRPGLE).
// Visibile, monumentale, non un decoro tecnico generico.
// ──────────────────────────────────────────────
function HeritageStrata() {
  // Three columns
  const cols = [
    { x: 280, code: ['RPG III', '1988', 'OPM'] },
    { x: 640, code: ['RPG IV', '1998', 'ILE'] },
    { x: 1000, code: ['SQLRPGLE', '2008', 'DB2/400'] },
  ];
  // Modern modules attaching above the portico (non-destructive)
  const modules = [
    { x: 460, y: 95, label: 'WEB · 2015', tether: 460, tetherY: 175 },
    { x: 820, y: 70, label: 'API · 2020', tether: 820, tetherY: 175 },
    { x: 1130, y: 110, label: 'AI · 2025', tether: 1000, tetherY: 195 },
  ];
  const G = 'rgba(255,215,0,';
  const Gd = 'rgba(201,168,76,';
  const Gr = 'rgba(0,230,118,';
  const baseY = 580;     // ground line
  const capY = 200;      // column tops / arch springline
  const archTop = 140;   // arch crown
  const colW = 38;       // column shaft width
  const capH = 18;
  const baseH = 22;

  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      <svg viewBox="0 0 1280 680" preserveAspectRatio="xMidYMid slice"
        style={{ width: '100%', height: '100%' }}>
        <defs>
          <pattern id="bp-grid-cs" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke={Gd + '0.07)'} strokeWidth="0.5" />
          </pattern>
          <linearGradient id="col-grad" x1="0" x2="1">
            <stop offset="0" stopColor={G + '0.55)'} />
            <stop offset="0.5" stopColor={G + '0.85)'} />
            <stop offset="1" stopColor={G + '0.55)'} />
          </linearGradient>
        </defs>
        <rect width="1280" height="680" fill="url(#bp-grid-cs)" opacity="0.7" />

        {/* annotations */}
        <text x="80" y="42" fill={Gd + '0.7)'} fontSize="11"
          fontFamily="'Courier Prime', monospace" letterSpacing="2.5">
          PORTICO · IBM i CONTINUITY
        </text>
        <text x="1200" y="42" fill={Gr + '0.75)'} fontSize="11"
          fontFamily="'Courier Prime', monospace" letterSpacing="2.5" textAnchor="end">
          ✓ STRUTTURA PRESERVATA
        </text>

        {/* ground line + ticks */}
        <line x1="60" y1={baseY} x2="1220" y2={baseY}
          stroke={G + '0.5)'} strokeWidth="1.2" />
        {Array.from({ length: 30 }).map((_, i) => (
          <line key={i} x1={70 + i * 40} y1={baseY} x2={70 + i * 40} y2={baseY + 6}
            stroke={Gd + '0.4)'} strokeWidth="0.7" />
        ))}
        <text x="60" y={baseY + 24} fill={Gd + '0.6)'} fontSize="9.5"
          fontFamily="'Courier Prime', monospace" letterSpacing="1.5">
          // legacy substrate · S/38 → IBM i · 1980 →
        </text>

        {/* arches connecting columns */}
        <path d={`M ${cols[0].x + colW / 2},${capY} Q ${(cols[0].x + cols[1].x) / 2},${archTop} ${cols[1].x - colW / 2},${capY}`}
          fill="none" stroke="url(#col-grad)" strokeWidth="2.2"
          strokeLinecap="round" />
        <path d={`M ${cols[1].x + colW / 2},${capY} Q ${(cols[1].x + cols[2].x) / 2},${archTop} ${cols[2].x - colW / 2},${capY}`}
          fill="none" stroke="url(#col-grad)" strokeWidth="2.2"
          strokeLinecap="round" />
        {/* keystone marks */}
        {[(cols[0].x + cols[1].x) / 2, (cols[1].x + cols[2].x) / 2].map((kx, i) => (
          <g key={i}>
            <rect x={kx - 8} y={archTop - 4} width="16" height="14"
              fill="none" stroke={G + '0.65)'} strokeWidth="1.1" />
            <line x1={kx} y1={archTop + 10} x2={kx} y2={archTop + 22}
              stroke={G + '0.4)'} strokeWidth="0.8" strokeDasharray="2 3" />
          </g>
        ))}

        {/* columns */}
        {cols.map((c, i) => (
          <g key={c.x}>
            {/* base */}
            <rect x={c.x - colW / 2 - 8} y={baseY - baseH} width={colW + 16} height={baseH}
              fill="none" stroke={G + '0.7)'} strokeWidth="1.4" />
            {/* shaft */}
            <line x1={c.x - colW / 2} y1={baseY - baseH} x2={c.x - colW / 2} y2={capY + capH}
              stroke={G + '0.85)'} strokeWidth="1.6" />
            <line x1={c.x + colW / 2} y1={baseY - baseH} x2={c.x + colW / 2} y2={capY + capH}
              stroke={G + '0.85)'} strokeWidth="1.6" />
            {/* fluting */}
            {[-10, 0, 10].map(o => (
              <line key={o} x1={c.x + o} y1={baseY - baseH} x2={c.x + o} y2={capY + capH}
                stroke={Gd + '0.35)'} strokeWidth="0.6" strokeDasharray="3 5" />
            ))}
            {/* capital */}
            <rect x={c.x - colW / 2 - 10} y={capY} width={colW + 20} height={capH}
              fill="none" stroke={G + '0.75)'} strokeWidth="1.4" />
            <line x1={c.x - colW / 2 - 14} y1={capY + capH} x2={c.x + colW / 2 + 14} y2={capY + capH}
              stroke={G + '0.6)'} strokeWidth="1" />
            {/* code stratigraphy on shaft (rotated text, dim) */}
            {c.code.map((txt, j) => (
              <text key={j}
                x={c.x + colW / 2 + 16}
                y={capY + capH + 60 + j * 130}
                fill={Gd + '0.45)'} fontSize="10"
                fontFamily="'Courier Prime', monospace" letterSpacing="2"
                transform={`rotate(90 ${c.x + colW / 2 + 16} ${capY + capH + 60 + j * 130})`}>
                {txt}
              </text>
            ))}
            {/* footing dimension */}
            <text x={c.x} y={baseY + 24} fill={Gd + '0.55)'} fontSize="8.5"
              fontFamily="'Courier Prime', monospace" textAnchor="middle" letterSpacing="1">
              C{i + 1}
            </text>
          </g>
        ))}

        {/* MODERN MODULES — attach without altering the portico */}
        {modules.map((m, i) => (
          <g key={i}>
            {/* tether — dashed line from column cap to module */}
            <line x1={m.tether} y1={m.tetherY} x2={m.x} y2={m.y}
              stroke={Gr + '0.55)'} strokeWidth="1" strokeDasharray="3 4"
              style={{ animation: `cs-tether 4s linear ${i * 0.5}s infinite` }} />
            {/* module box */}
            <rect x={m.x - 42} y={m.y - 12} width="84" height="24" rx="3"
              fill="rgba(0,230,118,0.08)"
              stroke={Gr + '0.7)'} strokeWidth="1.1" />
            <text x={m.x} y={m.y + 4} fill={Gr + '0.95)'} fontSize="10.5"
              fontFamily="'Courier Prime', monospace" letterSpacing="1.5"
              textAnchor="middle" fontWeight="700">
              + {m.label}
            </text>
            {/* connection node */}
            <circle cx={m.tether} cy={m.tetherY} r="3.5"
              fill={Gr + '0.9)'} />
            <circle cx={m.tether} cy={m.tetherY} r="8" fill="none"
              stroke={Gr + '0.4)'} strokeWidth="1"
              style={{ animation: `cs-pulse 2.4s ease-in-out ${i * 0.3}s infinite` }} />
          </g>
        ))}

        {/* "non destructive" note */}
        <text x="640" y={baseY + 50} fill={Gr + '0.6)'} fontSize="10"
          fontFamily="'Courier Prime', monospace" letterSpacing="3" textAnchor="middle">
          + ADD · NEVER REPLACE
        </text>

        {/* corner brackets */}
        {[[60, 60], [1220, 60], [60, 640], [1220, 640]].map(([x, y], i) => {
          const dx = x < 640 ? 14 : -14;
          const dy = y < 340 ? 14 : -14;
          return (
            <g key={i} stroke={G + '0.55)'} strokeWidth="1.2" fill="none">
              <line x1={x} y1={y} x2={x + dx} y2={y} />
              <line x1={x} y1={y} x2={x} y2={y + dy} />
            </g>
          );
        })}
      </svg>

      <style>{`
        @keyframes cs-tether {
          0%, 100% { stroke-dashoffset: 0; opacity: 0.5; }
          50%      { stroke-dashoffset: -28; opacity: 0.95; }
        }
        @keyframes cs-pulse {
          0%, 100% { opacity: 0.35; transform-box: fill-box; transform-origin: center; }
          50%      { opacity: 1; }
        }
      `}</style>
    </div>
  );
}


// 1 · HERO
// ──────────────────────────────────────────────
function ChiSiamoHero() {
  const ref = useRefCS(null);
  const isInView = useInViewCS(ref, { once: true });
  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: '160px 5% 90px',
      background: colors.bgPrimary,
    }}>
      <HeritageStrata />
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 50% 30% at 50% 38%, rgba(15,15,35,0.65), rgba(15,15,35,0.15) 70%, transparent 100%)`,
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.06), transparent 70%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 920, margin: '0 auto', position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <motionCS.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: 28,
            border: `1px solid rgba(201,168,76,0.3)`,
            borderRadius: 999, background: 'rgba(15,15,35,0.6)',
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.7rem', color: colors.textGold,
            letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
          }}
        >
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: colors.brandGold, boxShadow: `0 0 8px ${colors.brandGold}` }} />
          Chi siamo
        </motionCS.div>
        <motionCS.h1
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.1 }}
          style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(2.6rem, 5.5vw, 4rem)',
            fontWeight: 500, color: colors.textPrimary,
            lineHeight: 1.1, marginBottom: 22, letterSpacing: -0.5,
          }}
        >
          Modernizzare<br />
          <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>senza demolire.</span>
        </motionCS.h1>
        <motionCS.p
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : {}}
          transition={{ duration: 0.7, delay: 0.3 }}
          style={{
            fontSize: '1.15rem', color: colors.textMuted,
            lineHeight: 1.7, fontWeight: 300, maxWidth: 760, margin: '0 auto',
          }}
        >
          Lumikode nasce da una convinzione semplice: il software gestionale che fa funzionare
          le aziende italiane non va buttato. Va capito, modernizzato e messo in condizione di
          parlare con il resto del mondo.
        </motionCS.p>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────
// 2 · ORIGINI
// ──────────────────────────────────────────────
function ChiSiamoOrigini() {
  const ref = useRefCS(null);
  const isInView = useInViewCS(ref, { once: true, margin: '-100px' });
  return (
    <section ref={ref} style={{
      padding: '90px 5%',
      background: colors.bgPrimary,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <motionCS.div
          initial={{ opacity: 0, y: 14 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          style={{
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.72rem', color: colors.textGold,
            letterSpacing: 3, textTransform: 'uppercase',
            marginBottom: 18, fontWeight: 600,
          }}
        >// origini</motionCS.div>
        <motionCS.h2
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.1 }}
          style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(2rem, 4vw, 2.8rem)',
            fontWeight: 500, color: colors.textPrimary,
            lineHeight: 1.2, marginBottom: 36, letterSpacing: -0.3,
          }}
        >
          Da dove <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>veniamo</span>
        </motionCS.h2>

        <div style={{
          display: 'flex', flexDirection: 'column', gap: 22,
          fontSize: '1.05rem', color: colors.textMuted,
          lineHeight: 1.8, fontWeight: 300,
        }}>
          {[
            <>Lumikode è fondata da <strong style={{ color: colors.textPrimary, fontWeight: 600 }}>Gianfranco Zamboni</strong> e <strong style={{ color: colors.textPrimary, fontWeight: 600 }}>Giacomo Leonelli</strong>, due co-fondatori con ruoli complementari — uno dal lato tecnologico (CTO), uno dal lato operativo (COO) — uniti da anni di lavoro su sistemi IBM i in produzione presso aziende italiane di fascia industriale.</>,
            <>Abbiamo visto da vicino quello che succede quando si prova a "rifare tutto da zero": progetti pluriennali, budget che esplodono, logiche di business critiche che si perdono nella traduzione, utenti che rimpiangono il vecchio sistema. E abbiamo visto anche l'altro estremo: aziende paralizzate su tecnologie degli anni '90 perché nessuno sa più metterci mano.</>,
            <>Lumikode esiste per il <strong style={{ color: colors.brandGold, fontWeight: 600, fontStyle: 'italic' }}>terzo modo</strong>: modernizzare senza demolire. Aprire l'IBM i al web, alle API, all'AI — mantenendo intatto il valore che trent'anni di RPG hanno depositato dentro quei sistemi.</>,
          ].map((p, i) => (
            <motionCS.p key={i}
              initial={{ opacity: 0, y: 14 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.2 + i * 0.1 }}
            >{p}</motionCS.p>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────
// 3 · MANIFESTO — 3 PILASTRI
// ──────────────────────────────────────────────
function ChiSiamoManifesto() {
  const ref = useRefCS(null);
  const isInView = useInViewCS(ref, { once: true, margin: '-100px' });

  const pillars = [
    {
      num: '01',
      kicker: 'Artigianato tecnico',
      title: "Conosciamo veramente il sistema IBM i",
      body: "RPG III, RPG IV free-format, SQLRPGLE, DB2/400, activation groups, CCSID, service programs. Non è una checklist su LinkedIn: è il livello a cui lavoriamo ogni giorno. Modernizzare un sistema gestionale richiede di capirlo prima — e di rispettare le decisioni architetturali di chi l'ha costruito, anche quando hanno trent'anni.",
      icon: 'wrench',
    },
    {
      num: '02',
      kicker: 'AI seria, non slide-ware',
      title: "L'AI che usiamo funziona davvero",
      body: "Il mercato è pieno di demo accuratamente coreografate su programmi-giocattolo. Noi lavoriamo su programmi RPG reali da migliaia di righe, con logiche fiscali, magazzino, contabilità che non perdonano approssimazioni. Il nostro motore di modernizzazione (AiKo Engine) è progettato attorno a questo vincolo: produrre output verificabile su codice di produzione, non screenshot da conferenza.",
      icon: 'brain',
    },
    {
      num: '03',
      kicker: 'Continuità prima di tutto',
      title: 'Il valore sta nella logica, non nel linguaggio',
      body: "Trent'anni di codice RPG sono trent'anni di regole di business cristallizzate. Sostituirle con una \"rewrite\" significa quasi sempre perderle, riscoprirle a caro prezzo, e ricostruirle peggio. Il nostro approccio preserva la logica esistente e la rende disponibile a interfacce moderne — web, mobile, API, agenti AI — senza riscrivere quello che funziona.",
      icon: 'shield-check',
    },
  ];

  return (
    <section ref={ref} style={{
      padding: '110px 5%',
      background: `linear-gradient(180deg, ${colors.bgPrimary}, ${colors.bgSecondary})`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 80% 20%, rgba(201,168,76,0.06), transparent 50%), radial-gradient(circle at 20% 80%, rgba(0,230,118,0.04), transparent 50%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1120, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <motionCS.div
            initial={{ opacity: 0, y: 14 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.72rem', color: colors.textGold,
              letterSpacing: 3, textTransform: 'uppercase',
              marginBottom: 18, fontWeight: 600,
            }}
          >// manifesto</motionCS.div>
          <motionCS.h2
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.1 }}
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(2rem, 4vw, 2.8rem)',
              fontWeight: 500, color: colors.textPrimary,
              lineHeight: 1.2, letterSpacing: -0.3,
            }}
          >
            In cosa <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>crediamo</span>
          </motionCS.h2>
        </div>

        <div className="manifesto-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {pillars.map((p, i) => (
            <motionCS.div key={p.num}
              initial={{ opacity: 0, y: 24 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.2 + i * 0.12 }}
              style={{
                position: 'relative',
                padding: 32,
                background: 'rgba(255,255,255,0.025)',
                border: `1px solid rgba(201,168,76,0.15)`,
                borderRadius: 14,
                display: 'flex', flexDirection: 'column', gap: 14,
              }}
            >
              <div style={{
                display: 'flex', alignItems: 'center', gap: 14, marginBottom: 4,
              }}>
                <div style={{
                  fontFamily: "'Orbitron', sans-serif",
                  fontSize: '0.78rem', color: colors.brandGold,
                  letterSpacing: 2, fontWeight: 700,
                }}>{p.num}</div>
                <div style={{
                  flex: 1, height: 1,
                  background: `linear-gradient(90deg, ${colors.brandGold}40, transparent)`,
                }} />
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: `linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05))`,
                  border: `1px solid rgba(201,168,76,0.25)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={p.icon} size={16} color={colors.brandGold} />
                </div>
              </div>
              <div style={{
                fontFamily: "'Courier Prime', monospace",
                fontSize: '0.72rem', color: colors.textGold,
                letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
              }}>{p.kicker}</div>
              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.35rem', fontWeight: 500,
                color: colors.textPrimary, lineHeight: 1.3, letterSpacing: -0.2,
              }}>{p.title}</h3>
              <p style={{
                fontSize: '0.95rem', color: colors.textMuted,
                lineHeight: 1.7, fontWeight: 300, marginTop: 4,
              }}>{p.body}</p>
            </motionCS.div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .manifesto-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
        }
      `}</style>
    </section>
  );
}

// ──────────────────────────────────────────────
// 4 · CO-FONDATORI
// ──────────────────────────────────────────────
function ChiSiamoFounders() {
  const ref = useRefCS(null);
  const isInView = useInViewCS(ref, { once: true, margin: '-100px' });

  const founders = [
    {
      initials: 'GZ',
      name: 'Gianfranco Zamboni',
      role: 'Co-CEO & CTO',
      bio: "Responsabile dell'architettura tecnologica dell'ecosistema Lumikode: il bridge IBM i Kodari, il motore AI AiKo, il framework frontend Lumiere, il gateway di flussi Lestage. Background ventennale su sistemi IBM i in produzione.",
      tag: 'Architettura · AI · IBM i',
      linkedin: 'https://www.linkedin.com/in/gianfranco-zamboni-4138b2149',
    },
    {
      initials: 'GL',
      name: 'Giacomo Leonelli',
      role: 'Co-CEO & COO',
      bio: 'Responsabile della direzione operativa e commerciale: relazioni con i clienti industriali, gestione dei progetti di modernizzazione, struttura dei servizi. Garantisce che ogni proposta tecnica abbia un percorso di delivery reale.',
      tag: 'Delivery · Clienti · Operazioni',
      linkedin: 'https://www.linkedin.com/in/leonelligiacomo/',
    },
  ];

  return (
    <section ref={ref} style={{
      padding: '110px 5%',
      background: colors.bgPrimary,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <motionCS.div
            initial={{ opacity: 0, y: 14 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            style={{
              fontFamily: "'Courier Prime', monospace",
              fontSize: '0.72rem', color: colors.textGold,
              letterSpacing: 3, textTransform: 'uppercase',
              marginBottom: 18, fontWeight: 600,
            }}
          >// founders</motionCS.div>
          <motionCS.h2
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.1 }}
            style={{
              fontFamily: "'Cinzel', serif",
              fontSize: 'clamp(2rem, 4vw, 2.8rem)',
              fontWeight: 500, color: colors.textPrimary,
              lineHeight: 1.2, letterSpacing: -0.3,
            }}
          >
            Chi guida{' '}
            <span style={{ fontFamily: "'Cinzel', serif", color: colors.brandGold, fontWeight: 500 }}>Lumi</span><span style={{ fontFamily: "'Courier Prime', monospace", color: colors.brandGreen, fontWeight: 700 }}>Kode</span>
          </motionCS.h2>
        </div>

        <div className="founders-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28,
        }}>
          {founders.map((f, i) => (
            <motionCS.div key={f.initials}
              initial={{ opacity: 0, y: 24 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.2 + i * 0.15 }}
              style={{
                padding: 40,
                background: `linear-gradient(140deg, rgba(255,255,255,0.025), rgba(201,168,76,0.025))`,
                border: `1px solid rgba(201,168,76,0.18)`,
                borderRadius: 16,
                position: 'relative', overflow: 'hidden',
              }}
            >
              {/* Avatar placeholder */}
              <div style={{
                width: 96, height: 96, borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, rgba(201,168,76,0.35), rgba(15,15,35,0.9) 70%)`,
                border: `1.5px solid rgba(201,168,76,0.4)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
                boxShadow: `0 0 30px rgba(201,168,76,0.15), inset 0 0 20px rgba(201,168,76,0.1)`,
                position: 'relative',
              }}>
                {/* concentric ring */}
                <div style={{
                  position: 'absolute', inset: -6,
                  borderRadius: '50%',
                  border: `1px solid rgba(201,168,76,0.18)`,
                }} />
                <div style={{
                  fontFamily: "'Cinzel', serif",
                  fontSize: '1.8rem', color: colors.brandGold,
                  letterSpacing: 1, fontWeight: 600,
                  textShadow: `0 0 12px rgba(255,215,0,0.3)`,
                }}>{f.initials}</div>
              </div>

              <h3 style={{
                fontFamily: "'Cinzel', serif",
                fontSize: '1.55rem', fontWeight: 500,
                color: colors.textPrimary, lineHeight: 1.2, letterSpacing: -0.2,
                marginBottom: 6,
              }}>{f.name}</h3>
              <div style={{
                fontFamily: "'Courier Prime', monospace",
                fontSize: '0.82rem', color: colors.brandGold,
                letterSpacing: 1.5, fontWeight: 600, marginBottom: 18,
              }}>{f.role}</div>

              <p style={{
                fontSize: '0.98rem', color: colors.textMuted,
                lineHeight: 1.7, fontWeight: 300, marginBottom: 22,
              }}>{f.bio}</p>

              <div style={{
                display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '6px 12px',
                  background: 'rgba(201,168,76,0.08)',
                  border: `1px solid rgba(201,168,76,0.2)`,
                  borderRadius: 999,
                  fontFamily: "'Courier Prime', monospace",
                  fontSize: '0.72rem', color: colors.textGold,
                  letterSpacing: 1.5,
                }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: colors.brandGold, boxShadow: `0 0 6px ${colors.brandGold}` }} />
                  {f.tag}
                </div>
                {f.linkedin && (
                  <a
                    href={f.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={`LinkedIn di ${f.name}`}
                    style={{
                      display: 'inline-flex', alignItems: 'center', gap: 7,
                      padding: '6px 12px',
                      background: 'rgba(255,255,255,0.03)',
                      border: `1px solid rgba(255,255,255,0.12)`,
                      borderRadius: 999,
                      fontFamily: "'Courier Prime', monospace",
                      fontSize: '0.72rem', color: colors.textPrimary,
                      letterSpacing: 1.5, textDecoration: 'none',
                      transition: 'all 0.25s',
                    }}
                    onMouseEnter={e => {
                      e.currentTarget.style.borderColor = colors.brandGold;
                      e.currentTarget.style.color = colors.brandGold;
                      e.currentTarget.style.background = 'rgba(201,168,76,0.08)';
                    }}
                    onMouseLeave={e => {
                      e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
                      e.currentTarget.style.color = colors.textPrimary;
                      e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
                    }}
                  >
                    <LinkedinIcon size={13} />
                    LinkedIn
                  </a>
                )}
              </div>
            </motionCS.div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .founders-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ──────────────────────────────────────────────
// 5 · CTA
// ──────────────────────────────────────────────
function ChiSiamoCta() {
  const ref = useRefCS(null);
  const isInView = useInViewCS(ref, { once: true, margin: '-80px' });
  return (
    <section ref={ref} style={{
      padding: '100px 5%',
      background: `linear-gradient(135deg, ${colors.bgSecondary}, #1a1a3a)`,
      borderTop: `1px solid rgba(255,215,0,0.12)`,
      textAlign: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 50% 40% at 50% 50%, rgba(201,168,76,0.08), transparent 70%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 760, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <motionCS.h2
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7 }}
          style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(1.9rem, 3.8vw, 2.6rem)',
            fontWeight: 500, color: colors.textPrimary,
            marginBottom: 20, lineHeight: 1.25, letterSpacing: -0.2,
          }}
        >
          Vuoi capire se Lumikode<br />
          <span style={{ color: colors.brandGold, fontStyle: 'italic' }}>può aiutare la tua azienda?</span>
        </motionCS.h2>
        <motionCS.p
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : {}}
          transition={{ duration: 0.7, delay: 0.2 }}
          style={{
            fontSize: '1.05rem', color: colors.textMuted,
            lineHeight: 1.7, fontWeight: 300,
            maxWidth: 580, margin: '0 auto 36px',
          }}
        >
          Partiamo sempre da un'analisi del sistema esistente.
          Niente preventivi al buio, niente proposte standard.
        </motionCS.p>
        <motionCS.div
          initial={{ opacity: 0, y: 12 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.35 }}
          style={{ display: 'inline-flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}
        >
          <a href="contatti.html" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 600,
            padding: '15px 32px',
            background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGoldMuted})`,
            color: colors.bgPrimary, borderRadius: 6, textDecoration: 'none',
            letterSpacing: 0.5,
            boxShadow: `0 0 30px rgba(255,215,0,0.25)`,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            transition: 'all 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
          >Parla con noi <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
          <a href="servizi.html" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 500,
            padding: '15px 28px',
            background: 'transparent',
            color: colors.textPrimary, borderRadius: 6, textDecoration: 'none',
            border: `1px solid rgba(255,255,255,0.15)`,
            letterSpacing: 0.5,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'all 0.3s',
          }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = colors.brandGold; e.currentTarget.style.color = colors.brandGold; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)'; e.currentTarget.style.color = colors.textPrimary; }}
          >Vedi i servizi</a>
        </motionCS.div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────
// APP
// ──────────────────────────────────────────────
function ChiSiamoApp() {
  return (
    <React.Fragment>
      <SiteNav depth={0} current="chi-siamo" />
      <main>
        <ChiSiamoHero />
        <ChiSiamoOrigini />
        <ChiSiamoManifesto />
        <ChiSiamoFounders />
        <ChiSiamoCta />
      </main>
      <SiteFooter depth={0} />
    </React.Fragment>
  );
}

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