const pillarStyles = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', marginTop: '3.5rem' },
  card: {
    border: '1px solid rgba(255,255,255,0.05)', padding: '2.5rem 2rem',
    background: 'var(--bg-2)', borderRadius: 16,
    transition: 'transform .4s cubic-bezier(0.22,1,0.36,1), border-color .3s',
    cursor: 'default',
  },
  num: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '2.2rem', fontWeight: 300, color: 'var(--fg-faint)',
    lineHeight: 1, marginBottom: '1rem', display: 'block', letterSpacing: '-.02em',
  },
  rule: { width: 40, height: 1, background: 'var(--gold)', marginBottom: 20 },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.3rem', fontWeight: 700, marginBottom: '.7rem', color: 'var(--fg)',
    letterSpacing: '-0.01em', lineHeight: 1.25,
  },
  desc: { fontSize: '.9rem', color: 'var(--fg-muted)', lineHeight: 1.5 },
};

const PILLARS = [
  ['01', "Design assistito dall'AI", "Chiedi all'AI integrata di creare la planimetria o arredare gli spazi in automatico."],
  ['02', 'Catalogo arredi certificato', 'Scegli gli arredi migliori da un catalogo esclusivo di brand selezionati e certificati.'],
  ['03', 'VR immersiva', "Genera con un click un'esperienza VR immersiva con un livello di qualità senza precedenti."],
];

function PillarGrid() {
  const [hover, setHover] = React.useState(-1);
  return (
    <div className="pillars-grid" style={pillarStyles.grid}>
      {PILLARS.map((p, i) => (
        <div key={p[0]}
          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
          style={{
            ...pillarStyles.card,
            borderColor: hover === i ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.05)',
            transform: hover === i ? 'translateY(-4px)' : 'translateY(0)',
          }}>
          <span style={pillarStyles.num}>{p[0]}</span>
          <div style={pillarStyles.rule} />
          <p style={pillarStyles.title}>{p[1]}</p>
          <p style={pillarStyles.desc}>{p[2]}</p>
        </div>
      ))}
    </div>
  );
}

window.PillarGrid = PillarGrid;