// ============================================================
// HOMEPAGE — Hub sintetico
// Hero + Filosofia + Ecosistema prodotti + Servizi + CTA
// Tweaks: layout product cards (bento | grid4 | minimal)
// ============================================================
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;
const motionH = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] });
const useInViewH = (...a) => window.FramerMotion.useInView(...a);

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "productsLayout": "bento",
  "showCircuitBoard": true,
  "accentMode": "gold-green"
}/*EDITMODE-END*/;

// ============================================================
// HERO — pulito, V1 con animazioni V2
// ============================================================
function HomeHero({ tweaks }) {
  const ref = useRefH(null);
  const isInView = useInViewH(ref, { once: true });

  const counters = [
    { end: 95, suffix: '%', label: 'Accuratezza AiKo' },
    { end: 10, suffix: 'x', label: 'Più veloce' },
    { end: 100, suffix: '%', label: 'Business continuity' },
  ];

  return (
    <section ref={ref} style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      justifyContent: 'center', alignItems: 'center',
      position: 'relative', overflow: 'hidden',
      padding: '140px 5% 80px',
    }}>
      {tweaks.showCircuitBoard && <CircuitBoard />}

      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `
          radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,215,0,0.05) 0%, transparent 70%),
          radial-gradient(ellipse 60% 80% at 80% 60%, rgba(0,230,118,0.04) 0%, transparent 70%)
        `,
        pointerEvents: 'none',
      }} aria-hidden="true" />

      <div style={{
        position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 400, height: 2,
        background: `linear-gradient(90deg, transparent, ${colors.brandGold}, ${colors.brandGreen}, transparent)`,
        opacity: 0.6,
      }} aria-hidden="true" />

      <div style={{
        position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 920,
        padding: '20px 24px',
      }}>
        <motionH.div
          initial={{ opacity: 0, y: -10 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '8px 18px', marginBottom: 32,
            border: `1px solid rgba(255,215,0,0.25)`,
            borderRadius: 999,
            background: 'rgba(15,15,35,0.6)',
            backdropFilter: 'blur(10px)',
          }}
        >
          <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.72rem', color: colors.textGold,
            letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
          }}>Modernizzazione IBM i — Powered by AiKo Engine</span>
        </motionH.div>

        <motionH.h1
          initial={{ opacity: 0, y: 24 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.2 }}
          style={{
            fontFamily: "'Cinzel', serif",
            fontSize: 'clamp(2.2rem, 5.5vw, 4.2rem)',
            fontWeight: 500, color: '#fff',
            lineHeight: 1.15, marginBottom: 28,
            textShadow: '0 2px 30px rgba(0,0,0,0.5)',
            textWrap: 'balance',
          }}
        >
          Dove l'esperienza<br />
          <span style={{
            background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGreen})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontStyle: 'italic',
          }}>incontra l'innovazione</span>
        </motionH.h1>

        <motionH.p
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.4 }}
          style={{
            fontSize: 'clamp(1rem, 1.7vw, 1.2rem)',
            color: '#c8c5bd', lineHeight: 1.7,
            maxWidth: 720, margin: '0 auto 44px', fontWeight: 300,
            textWrap: 'pretty',
          }}
        >
          Un ecosistema italiano per la modernizzazione IBM i enterprise.
          Quattro brand specializzati, una pipeline AI multi-agente,
          <span style={{ color: colors.textGold }}> zero disruption.</span>
        </motionH.p>

        <motionH.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.6 }}
          style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}
        >
          <a href="prodotti/aiko.html" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 600,
            padding: '14px 28px',
            background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGoldMuted})`,
            color: colors.bgPrimary, border: 'none',
            borderRadius: 6, cursor: 'pointer',
            letterSpacing: 0.5, textDecoration: 'none',
            boxShadow: `0 0 30px rgba(255,215,0,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(255,215,0,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(255,215,0,0.25)'; }}
          >Esplora AiKo Engine <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>

          <a href="#prodotti" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 500,
            padding: '14px 28px',
            background: 'transparent',
            color: colors.textPrimary,
            border: `1px solid rgba(255,215,0,0.35)`,
            borderRadius: 6, textDecoration: 'none',
            letterSpacing: 0.5, 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,215,0,0.35)'; e.currentTarget.style.color = colors.textPrimary; }}
          >Scopri i prodotti</a>
        </motionH.div>
      </div>

      <motionH.div
        initial={{ opacity: 0, y: 30 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8, delay: 0.9 }}
        style={{
          position: 'relative', zIndex: 1,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
          gap: 16, marginTop: 90, width: '100%', maxWidth: 760,
        }}
      >
        {counters.map((c, i) => (
          <CounterCard key={i} {...c} triggered={isInView} delay={i * 0.1} />
        ))}
      </motionH.div>

      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        color: colors.textDim, fontSize: '0.7rem', letterSpacing: 2,
        textTransform: 'uppercase', opacity: 0.7,
      }}>
        <span style={{ fontFamily: "'Courier Prime', monospace" }}>scroll</span>
        <Icon name="chevron-down" size={18} />
      </div>
    </section>
  );
}

function CounterCard({ end, suffix, label, triggered, delay }) {
  const count = useCounterAnimation(end, 2200, triggered);
  return (
    <motionH.div
      initial={{ opacity: 0, y: 20 }}
      animate={triggered ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.5, delay: 0.6 + delay }}
      style={{
        textAlign: 'center', padding: '20px 12px',
        background: 'rgba(15,15,35,0.85)',
        border: `1px solid rgba(255,215,0,0.2)`, borderRadius: 8,
        backdropFilter: 'blur(8px)',
        position: 'relative', overflow: 'hidden',
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, ${colors.brandGold}, transparent)`,
        opacity: 0.5,
      }} />
      <div style={{
        fontFamily: "'Cinzel', serif",
        fontSize: 'clamp(1.7rem, 2.8vw, 2.3rem)',
        fontWeight: 600, color: colors.brandGold,
      }}>{count}{suffix}</div>
      <div style={{
        fontSize: '0.72rem', color: colors.textMuted,
        marginTop: 4, fontWeight: 400, letterSpacing: 0.5,
      }}>{label}</div>
    </motionH.div>
  );
}

// ============================================================
// FILOSOFIA — sintesi di Chi Siamo
// ============================================================
function HomePhilosophy() {
  return (
    <AnimatedSection style={{
      padding: '110px 5%', background: colors.bgSecondary,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: "'Courier Prime', monospace",
          fontSize: '0.72rem', color: colors.textGold,
          letterSpacing: 3, textTransform: 'uppercase',
          marginBottom: 20, fontWeight: 600,
        }}>// Chi siamo</div>

        <h2 style={{
          fontFamily: "'Cinzel', serif",
          fontSize: 'clamp(1.9rem, 3.4vw, 2.7rem)',
          color: colors.textPrimary, fontWeight: 500,
          lineHeight: 1.3, marginBottom: 28, textWrap: 'balance',
        }}>
          Modernizzazione non significa sostituzione —<br />
          <span style={{ color: colors.textGold, fontStyle: 'italic' }}>è evoluzione.</span>
        </h2>

        <p style={{
          fontSize: 'clamp(1rem, 1.4vw, 1.1rem)',
          color: colors.textMuted, lineHeight: 1.85,
          fontWeight: 300, marginBottom: 36, textWrap: 'pretty',
        }}>
          Lumikode nasce dalla convinzione che i sistemi IBM i possano rimanere il cuore operativo
          delle aziende moderne. Nessuna riscrittura totale, nessuna interruzione: la logica di business
          resta dove funziona, le interfacce diventano contemporanee.
        </p>

        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 16, flexWrap: 'wrap', marginBottom: 36,
        }}>
          <div style={{
            padding: '10px 20px', background: `rgba(255,215,0,0.08)`,
            border: `1px solid rgba(255,215,0,0.25)`, borderRadius: 6,
            fontSize: '0.82rem', color: colors.brandGold,
            fontFamily: "'Courier Prime', monospace", letterSpacing: 1,
          }}>30+ anni di IBM i</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 24, height: 1, background: `linear-gradient(90deg, ${colors.brandGold}, ${colors.brandGreen})` }} />
            <div style={{ width: 8, height: 8, transform: 'rotate(45deg)',
              background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGreen})`,
            }} />
            <div style={{ width: 24, height: 1, background: `linear-gradient(90deg, ${colors.brandGreen}, ${colors.brandGold})` }} />
          </div>
          <div style={{
            padding: '10px 20px', background: `rgba(0,230,118,0.08)`,
            border: `1px solid rgba(0,230,118,0.25)`, borderRadius: 6,
            fontSize: '0.82rem', color: colors.brandGreen,
            fontFamily: "'Courier Prime', monospace", letterSpacing: 1,
          }}>AI multi-agente</div>
        </div>

        <a href="chi-siamo.html" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: '0.85rem', color: colors.brandGold,
          textDecoration: 'none', fontWeight: 600, letterSpacing: 0.5,
          padding: '10px 16px',
          border: `1px solid rgba(255,215,0,0.3)`,
          borderRadius: 6, transition: 'all 0.2s',
        }}
          onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,215,0,0.06)'; e.currentTarget.style.borderColor = colors.brandGold; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,215,0,0.3)'; }}
        >
          Conosci i fondatori e la nostra storia
          <Icon name="arrow-right" size={14} color={colors.brandGold} />
        </a>
      </div>
    </AnimatedSection>
  );
}

// ============================================================
// ECOSYSTEM — 4 prodotti come card linkabili
// ============================================================
const productCards = [
  {
    id: 'aiko', name: 'AiKo', Logo: AiKoLogo,
    role: 'AI Orchestration Engine',
    tagline: 'Il modello che corregge il modello',
    desc: 'Pipeline multi-agente che converte programmi RPG legacy in applicazioni web moderne con 95% di accuratezza.',
    color: colors.brandGoldMuted,
    colorBg: 'rgba(201,168,76,0.08)',
    colorBorder: 'rgba(201,168,76,0.4)',
    nameFont: "'Orbitron', sans-serif", nameWeight: 900, nameLetter: 4,
    href: 'prodotti/aiko.html',
    flagship: true,
    features: ['95% accuratezza', 'Pipeline a 12 stage', 'Self-audit + memory'],
  },
  {
    id: 'kodari', name: 'Kodari', Logo: KodariLogo,
    role: 'Technology Platform',
    tagline: 'Precisione del codice, eleganza della soluzione',
    desc: 'Backend tecnico e piattaforma. Framework RPG ILE, API Gateway Node.js con JWT+MFA, Kodari Bridge per parsing JSON.',
    color: colors.brandGreen,
    colorBg: 'rgba(0,230,118,0.08)',
    colorBorder: 'rgba(0,230,118,0.4)',
    nameFont: "'Courier Prime', monospace", nameWeight: 700, nameLetter: 1,
    href: 'prodotti/kodari.html',
    features: ['RPG ILE Free', 'API Gateway', 'Kodari Bridge'],
  },
  {
    id: 'lumiere', name: 'Lumiere', Logo: LumiereLogo,
    role: 'Frontend Enterprise',
    tagline: 'Illuminiamo il sentiero verso l\'eccellenza',
    desc: 'Frontend React enterprise per IBM i. Webpack Module Federation, SDK proprietario, microfrontend dinamici, design system condiviso.',
    color: colors.brandGold,
    colorBg: 'rgba(255,215,0,0.08)',
    colorBorder: 'rgba(255,215,0,0.4)',
    nameFont: "'Cinzel', serif", nameWeight: 500, nameLetter: 2,
    href: 'prodotti/lumiere.html',
    features: ['React + Module Federation', '@lumiere/sdk', 'Microfrontend'],
  },
  {
    id: 'lestage', name: 'Lestage', Logo: LestageLogo,
    role: 'File Flow Orchestration',
    tagline: 'Stivaggio digitale di flussi multi-protocollo',
    desc: 'Gateway che riceve file via FTP/SFTP/API, li trasforma (CSV, fixed → JSON), li smista con retry, logging e gestione errori.',
    color: colors.brandAmber,
    colorBg: 'rgba(244,208,63,0.08)',
    colorBorder: 'rgba(244,208,63,0.4)',
    nameFont: "'Cinzel', serif", nameWeight: 400, nameLetter: 2,
    href: 'prodotti/lestage.html',
    features: ['FTP/SFTP/API', 'Trasformazione automatica', 'Retry & logging'],
  },
];

function HomeProducts({ tweaks }) {
  return (
    <AnimatedSection id="prodotti" style={{
      padding: '120px 5%', background: colors.bgPrimary,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="// Ecosistema"
          title="Quattro brand, una visione"
          sub="Ogni prodotto risolve uno strato preciso della modernizzazione IBM i. Combinati, formano un ecosistema completo. Separati, si specializzano."
        />

        <div style={{ marginTop: 60 }}>
          {tweaks.productsLayout === 'bento' && <BentoLayout />}
          {tweaks.productsLayout === 'grid4' && <Grid4Layout />}
          {tweaks.productsLayout === 'minimal' && <MinimalLayout />}
        </div>
      </div>
    </AnimatedSection>
  );
}

// LAYOUT 1: BENTO (AiKo flagship grande, gli altri 3 più piccoli)
function BentoLayout() {
  const aiko = productCards.find(p => p.id === 'aiko');
  const others = productCards.filter(p => p.id !== 'aiko');
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1.4fr 1fr',
      gap: 20,
    }} className="bento-grid">
      <ProductCardBig product={aiko} />
      <div style={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)', gap: 20 }}>
        {others.map(p => <ProductCardSmall key={p.id} product={p} />)}
      </div>

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

function ProductCardBig({ product: p }) {
  return (
    <motionH.a
      href={p.href}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6 }}
      style={{
        padding: 40,
        background: `linear-gradient(135deg, ${p.colorBg}, rgba(15,15,35,0.4))`,
        border: `1px solid ${p.colorBorder}`,
        borderRadius: 14, position: 'relative', overflow: 'hidden',
        textDecoration: 'none',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: 460,
        transition: 'all 0.3s',
      }}
      onMouseEnter={e => {
        e.currentTarget.style.borderColor = p.color;
        e.currentTarget.style.boxShadow = `0 0 40px ${p.color}25`;
        e.currentTarget.style.transform = 'translateY(-3px)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.borderColor = p.colorBorder;
        e.currentTarget.style.boxShadow = 'none';
        e.currentTarget.style.transform = 'translateY(0)';
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: `linear-gradient(90deg, transparent, ${p.color}, transparent)`,
        opacity: 0.7,
      }} />
      {p.flagship && (
        <div style={{
          position: 'absolute', top: 18, right: 18,
          fontSize: '0.6rem', padding: '4px 12px',
          background: `${p.color}20`,
          border: `1px solid ${p.color}50`,
          borderRadius: 20, color: p.color,
          fontWeight: 700, letterSpacing: 1.5,
          fontFamily: "'Courier Prime', monospace",
        }}>★ FLAGSHIP</div>
      )}

      <div>
        <p.Logo size={88} />
        <div style={{
          fontFamily: "'Courier Prime', monospace",
          fontSize: '0.7rem', color: colors.textDim,
          letterSpacing: 2, textTransform: 'uppercase',
          marginTop: 24, marginBottom: 8, fontWeight: 600,
        }}>{p.role}</div>
        <h3 style={{
          fontFamily: p.nameFont, fontWeight: p.nameWeight,
          letterSpacing: p.nameLetter,
          fontSize: 'clamp(2.2rem, 4vw, 3.2rem)',
          color: p.color, marginBottom: 14, lineHeight: 1,
        }}>{p.name}</h3>
        <p style={{
          fontFamily: "'Cinzel', serif",
          fontSize: '1.1rem', color: colors.textGold,
          fontStyle: 'italic', lineHeight: 1.5, marginBottom: 18,
          textWrap: 'balance',
        }}>"{p.tagline}"</p>
        <p style={{
          fontSize: '0.95rem', color: colors.textMuted,
          lineHeight: 1.75, fontWeight: 300, marginBottom: 24,
          textWrap: 'pretty',
        }}>{p.desc}</p>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
          {p.features.map(f => (
            <span key={f} style={{
              padding: '5px 11px',
              fontSize: '0.72rem',
              background: `${p.color}10`,
              border: `1px solid ${p.color}30`,
              borderRadius: 4, color: p.color,
              fontFamily: "'Courier Prime', monospace", letterSpacing: 0.5,
            }}>{f}</span>
          ))}
        </div>
      </div>

      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        fontSize: '0.9rem', color: p.color, fontWeight: 600,
        letterSpacing: 0.5,
      }}>
        Esplora {p.name}
        <Icon name="arrow-right" size={16} color={p.color} />
      </div>
    </motionH.a>
  );
}

function ProductCardSmall({ product: p }) {
  return (
    <motionH.a
      href={p.href}
      initial={{ opacity: 0, x: 20 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      style={{
        padding: 24,
        background: 'rgba(255,255,255,0.02)',
        border: `1px solid ${p.colorBorder}`,
        borderLeft: `3px solid ${p.color}`,
        borderRadius: 10, position: 'relative', overflow: 'hidden',
        textDecoration: 'none',
        display: 'flex', alignItems: 'center', gap: 20,
        transition: 'all 0.3s',
      }}
      onMouseEnter={e => {
        e.currentTarget.style.background = p.colorBg;
        e.currentTarget.style.transform = 'translateX(4px)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.background = 'rgba(255,255,255,0.02)';
        e.currentTarget.style.transform = 'translateX(0)';
      }}
    >
      <div style={{ flexShrink: 0 }}>
        <p.Logo size={56} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: p.nameFont, fontWeight: p.nameWeight,
          letterSpacing: p.nameLetter,
          fontSize: '1.4rem', color: p.color, marginBottom: 4,
        }}>{p.name}</div>
        <div style={{
          fontFamily: "'Courier Prime', monospace",
          fontSize: '0.68rem', color: colors.textDim,
          letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 8,
        }}>{p.role}</div>
        <p style={{
          fontSize: '0.82rem', color: colors.textMuted,
          lineHeight: 1.6, fontWeight: 300,
        }}>{p.tagline}</p>
      </div>
      <Icon name="arrow-right" size={18} color={p.color} style={{ flexShrink: 0 }} />
    </motionH.a>
  );
}

// LAYOUT 2: 4 grandi card uguali in griglia 2x2
function Grid4Layout() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
      gap: 20,
    }} className="grid4">
      {productCards.map((p, i) => (
        <motionH.a key={p.id}
          href={p.href}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: i * 0.08, duration: 0.5 }}
          style={{
            padding: 32,
            background: `linear-gradient(135deg, ${p.colorBg}, rgba(15,15,35,0.4))`,
            border: `1px solid ${p.colorBorder}`,
            borderRadius: 12, position: 'relative', overflow: 'hidden',
            textDecoration: 'none',
            display: 'flex', flexDirection: 'column',
            transition: 'all 0.3s',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.borderColor = p.color;
            e.currentTarget.style.boxShadow = `0 0 30px ${p.color}20`;
            e.currentTarget.style.transform = 'translateY(-3px)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.borderColor = p.colorBorder;
            e.currentTarget.style.boxShadow = 'none';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 2,
            background: p.color, opacity: 0.6,
          }} />
          {p.flagship && (
            <div style={{
              position: 'absolute', top: 14, right: 14,
              fontSize: '0.58rem', padding: '3px 10px',
              background: `${p.color}20`,
              border: `1px solid ${p.color}50`,
              borderRadius: 20, color: p.color,
              fontWeight: 700, letterSpacing: 1.5,
              fontFamily: "'Courier Prime', monospace",
            }}>★ FLAGSHIP</div>
          )}
          <p.Logo size={64} />
          <div style={{
            fontFamily: "'Courier Prime', monospace",
            fontSize: '0.66rem', color: colors.textDim,
            letterSpacing: 2, textTransform: 'uppercase',
            marginTop: 18, marginBottom: 6, fontWeight: 600,
          }}>{p.role}</div>
          <h3 style={{
            fontFamily: p.nameFont, fontWeight: p.nameWeight,
            letterSpacing: p.nameLetter,
            fontSize: '1.9rem', color: p.color, marginBottom: 10, lineHeight: 1,
          }}>{p.name}</h3>
          <p style={{
            fontFamily: "'Cinzel', serif",
            fontSize: '0.92rem', color: colors.textGold,
            fontStyle: 'italic', lineHeight: 1.5, marginBottom: 14,
          }}>"{p.tagline}"</p>
          <p style={{
            fontSize: '0.85rem', color: colors.textMuted,
            lineHeight: 1.7, fontWeight: 300, flex: 1, marginBottom: 20,
          }}>{p.desc}</p>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: '0.82rem', color: p.color, fontWeight: 600,
            paddingTop: 14,
            borderTop: `1px solid ${p.color}20`,
          }}>
            Scopri {p.name} <Icon name="arrow-right" size={14} color={p.color} />
          </div>
        </motionH.a>
      ))}

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

// LAYOUT 3: minimal — focus tipografico, list-style elegante
function MinimalLayout() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {productCards.map((p, i) => (
        <motionH.a key={p.id}
          href={p.href}
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ delay: i * 0.08, duration: 0.5 }}
          style={{
            padding: '38px 32px',
            borderTop: i === 0 ? `1px solid rgba(255,255,255,0.08)` : 'none',
            borderBottom: `1px solid rgba(255,255,255,0.08)`,
            display: 'grid', gridTemplateColumns: '80px 1fr auto',
            gap: 32, alignItems: 'center',
            textDecoration: 'none',
            transition: 'background 0.3s',
            position: 'relative',
          }}
          className="minimal-row"
          onMouseEnter={e => { e.currentTarget.style.background = p.colorBg; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
        >
          <p.Logo size={64} />
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 6, flexWrap: 'wrap' }}>
              <h3 style={{
                fontFamily: p.nameFont, fontWeight: p.nameWeight,
                letterSpacing: p.nameLetter,
                fontSize: 'clamp(1.6rem, 3vw, 2.4rem)',
                color: p.color, lineHeight: 1, margin: 0,
              }}>{p.name}</h3>
              <div style={{
                fontFamily: "'Courier Prime', monospace",
                fontSize: '0.7rem', color: colors.textDim,
                letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
              }}>{p.role}</div>
              {p.flagship && (
                <span style={{
                  fontSize: '0.58rem', padding: '3px 10px',
                  background: `${p.color}20`,
                  border: `1px solid ${p.color}50`,
                  borderRadius: 20, color: p.color,
                  fontWeight: 700, letterSpacing: 1.5,
                  fontFamily: "'Courier Prime', monospace",
                }}>★ FLAGSHIP</span>
              )}
            </div>
            <p style={{
              fontFamily: "'Cinzel', serif",
              fontSize: '1rem', color: colors.textGold,
              fontStyle: 'italic', marginBottom: 10,
            }}>"{p.tagline}"</p>
            <p style={{
              fontSize: '0.88rem', color: colors.textMuted,
              lineHeight: 1.65, fontWeight: 300, maxWidth: 720,
            }}>{p.desc}</p>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 18px',
            border: `1px solid ${p.colorBorder}`,
            borderRadius: 6, fontSize: '0.82rem',
            color: p.color, fontWeight: 600,
            transition: 'all 0.2s',
            whiteSpace: 'nowrap',
          }}>
            Esplora <Icon name="arrow-right" size={14} color={p.color} />
          </div>
        </motionH.a>
      ))}

      <style>{`
        @media (max-width: 880px) {
          .minimal-row { grid-template-columns: 1fr !important; gap: 20px !important; padding: 28px 20px !important; }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// SERVIZI — riassunto sintetico
// ============================================================
function HomeServices() {
  const services = [
    {
      icon: 'search', title: 'Strategic Assessment',
      desc: 'Analisi dell\'ecosistema IBM i, definizione architettura target, roadmap incrementale.',
      color: colors.brandGold,
    },
    {
      icon: 'book-open', title: 'Documentazione & Knowledge Base',
      desc: 'Documentazione tecnica e funzionale del patrimonio IBM i. La conoscenza tribale diventa artefatto mantenibile.',
      color: colors.brandGoldMuted,
    },
    {
      icon: 'workflow', title: 'Consulenza sui Processi Aziendali',
      desc: 'Analisi e ridisegno dei processi di business: ordini, fatturazione, supply chain, magazzino, qualità.',
      color: colors.brandGreen,
    },
    {
      icon: 'layout-dashboard', title: 'Sviluppo web',
      desc: 'Applicazioni web sopra il vostro core IBM i: architetture moderne, microfrontend, design system condiviso.',
      color: colors.brandGold, featured: true,
    },
    {
      icon: 'graduation-cap', title: 'Formazione & Coaching',
      desc: 'Percorsi formativi su misura: RPG ILE moderno, React, IBM i. Workshop, pair programming, mentoring.',
      color: colors.brandAmber,
    },
  ];

  return (
    <AnimatedSection style={{
      padding: '120px 5%', background: colors.bgSecondary,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <SectionHeading
          eyebrow="// Servizi"
          title="Cosa facciamo"
          sub="Cinque aree di intervento che coprono l'intero ciclo della modernizzazione IBM i."
        />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 18, marginTop: 56,
        }}>
          {services.map((svc, i) => (
            <motionH.div key={svc.title}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.08, duration: 0.5 }}
              style={{
                padding: 26,
                background: svc.featured ? `linear-gradient(135deg, ${svc.color}10, rgba(45,106,79,0.04))` : 'rgba(255,255,255,0.02)',
                border: `1px solid ${svc.featured ? svc.color + '40' : 'rgba(255,255,255,0.06)'}`,
                borderRadius: 12, transition: 'all 0.3s',
                position: 'relative', overflow: 'hidden',
                display: 'flex', flexDirection: 'column',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = svc.color;
                e.currentTarget.style.boxShadow = `0 0 25px ${svc.color}15`;
                e.currentTarget.style.transform = 'translateY(-2px)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = svc.featured ? svc.color + '40' : 'rgba(255,255,255,0.06)';
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
            >
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: svc.color, opacity: 0.6,
              }} />
              <Icon name={svc.icon} size={26} color={svc.color} style={{ marginBottom: 14 }} />
              <h3 style={{
                fontFamily: "'DM Sans', sans-serif",
                fontSize: '1.05rem', fontWeight: 600,
                color: colors.textPrimary, marginBottom: 8, lineHeight: 1.3,
              }}>{svc.title}</h3>
              <p style={{
                fontSize: '0.85rem', color: colors.textMuted,
                lineHeight: 1.65, fontWeight: 300, flex: 1,
              }}>{svc.desc}</p>
            </motionH.div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 44 }}>
          <a href="servizi.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: '0.88rem', color: colors.brandGold,
            textDecoration: 'none', fontWeight: 600, letterSpacing: 0.5,
            padding: '12px 22px',
            border: `1px solid rgba(255,215,0,0.3)`,
            borderRadius: 6, transition: 'all 0.2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,215,0,0.06)'; e.currentTarget.style.borderColor = colors.brandGold; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,215,0,0.3)'; }}
          >
            Tutti i servizi in dettaglio
            <Icon name="arrow-right" size={14} color={colors.brandGold} />
          </a>
        </div>
      </div>
    </AnimatedSection>
  );
}

// ============================================================
// CTA finale
// ============================================================
function HomeCta() {
  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 80% 30%, rgba(255,215,0,0.06), transparent 70%),
          radial-gradient(ellipse 40% 50% at 10% 80%, rgba(0,230,118,0.04), transparent 70%)
        `,
        pointerEvents: 'none',
      }} />
      <div style={{
        maxWidth: 820, margin: '0 auto', textAlign: 'center',
        position: 'relative',
      }}>
        <div style={{
          fontFamily: "'Courier Prime', monospace",
          fontSize: '0.72rem', color: colors.textGold,
          letterSpacing: 3, textTransform: 'uppercase',
          marginBottom: 20, fontWeight: 600,
        }}>// Iniziamo</div>

        <h2 style={{
          fontFamily: "'Cinzel', serif",
          fontSize: 'clamp(2rem, 4vw, 3rem)',
          color: colors.textPrimary, fontWeight: 500,
          lineHeight: 1.25, marginBottom: 24, textWrap: 'balance',
        }}>
          Ogni progetto inizia con una <span style={{
            background: `linear-gradient(135deg, ${colors.brandGold}, ${colors.brandGreen})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontStyle: 'italic',
          }}>conversazione</span>
        </h2>

        <p style={{
          fontSize: '1.05rem', color: colors.textMuted,
          lineHeight: 1.75, fontWeight: 300, marginBottom: 36,
          maxWidth: 620, margin: '0 auto 36px', textWrap: 'pretty',
        }}>
          Raccontateci il vostro ecosistema IBM i e costruiremo insieme il percorso di modernizzazione.
        </p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="contatti.html" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 600,
            padding: '15px 30px',
            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)`,
            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(255,215,0,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(255,215,0,0.25)'; }}
          >Inizia la partnership <Icon name="arrow-right" size={16} color={colors.bgPrimary} /></a>
          <a href="tecnologia.html" style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.95rem', fontWeight: 500,
            padding: '15px 30px',
            background: 'transparent',
            color: colors.textPrimary,
            border: `1px solid rgba(255,215,0,0.35)`,
            borderRadius: 6, textDecoration: 'none',
            letterSpacing: 0.5, 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,215,0,0.35)'; e.currentTarget.style.color = colors.textPrimary; }}
          >Scopri la tecnologia</a>
        </div>
      </div>
    </AnimatedSection>
  );
}

// ============================================================
// HOME APP
// ============================================================
function HomeApp() {
  const [tweaks, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  return (
    <React.Fragment>
      <SiteNav depth={0} current="home" />
      <main>
        <HomeHero tweaks={tweaks} />
        <HomePhilosophy />
        <HomeProducts tweaks={tweaks} />
        <HomeServices />
        <HomeCta />
      </main>
      <SiteFooter depth={0} />

      <TweaksPanel title="Tweaks — Homepage">
          <TweakSection title="Layout prodotti">
            <TweakRadio
              label="Disposizione card"
              value={tweaks.productsLayout}
              onChange={v => setTweak('productsLayout', v)}
              options={[
                { value: 'bento', label: 'Bento' },
                { value: 'grid4', label: '2×2' },
                { value: 'minimal', label: 'Minimal' },
              ]}
            />
          </TweakSection>
          <TweakSection title="Hero">
            <TweakToggle
              label="Circuit board animato"
              value={tweaks.showCircuitBoard}
              onChange={v => setTweak('showCircuitBoard', v)}
            />
          </TweakSection>
        </TweaksPanel>
      </React.Fragment>
  );
}

function mountHome() {
  const ready =
    typeof colors !== 'undefined' &&
    typeof CompassLogo !== 'undefined' &&
    typeof SiteNav !== 'undefined' &&
    typeof SiteFooter !== 'undefined' &&
    typeof useTweaks !== 'undefined' &&
    typeof TweaksPanel !== 'undefined' &&
    window.FramerMotion &&
    window.lucide;
  if (!ready) return setTimeout(mountHome, 50);

  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<HomeApp />);

  if (window.lucide) {
    const observer = new MutationObserver(() => window.lucide.createIcons());
    observer.observe(document.body, { childList: true, subtree: true });
    window.lucide.createIcons();
  }
}
mountHome();