const audStyles = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginTop: '3rem' },
  card: {
    background: 'var(--bg-2)', padding: '2.5rem 2rem',
    border: '1px solid rgba(255,255,255,0.05)', borderRadius: 16,
    transition: 'transform .4s cubic-bezier(0.22,1,0.36,1), border-color .3s',
  },
  tag: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '1rem', display: 'block',
  },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.6rem', fontWeight: 700, marginBottom: '.8rem', lineHeight: 1.1,
    letterSpacing: '-0.01em', color: 'var(--fg)',
  },
  desc: { fontSize: '.88rem', color: 'var(--fg-muted)', lineHeight: 1.5 },
  link: {
    display: 'inline-block', marginTop: '1.2rem',
    fontSize: '.78rem', letterSpacing: '.08em', textTransform: 'uppercase',
    color: 'var(--gold)', textDecoration: 'none',
    borderBottom: '1px solid var(--border)', paddingBottom: '.15rem',
    transition: 'border-color .25s, color .25s',
  },
};

const AUDIENCES = [
  ['Agenzie immobiliari', ['Acquisisci', 'più mandati'], "Differenziati già al sopralluogo. REnderia ti dà uno strumento concreto per acquisire più mandati e rendere ogni presentazione più coinvolgente e più memorabile.", 'Scopri come acquisire più mandati →'],
  ['Costruttori e sviluppatori', ['Vendi prima', 'della consegna'], "Fai vedere la casa, non il progetto. Con REnderia il cliente vive lo spazio prima che esista. Decide più velocemente.", 'Valorizza il tuo progetto in prevendita →'],
];

function AudienceGrid() {
  const [hov, setHov] = React.useState(-1);
  return (
    <div className="audience-grid" style={audStyles.grid}>
      {AUDIENCES.map((a, i) => (
        <div key={i}
          onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(-1)}
          style={{
            ...audStyles.card,
            borderColor: hov === i ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.05)',
            transform: hov === i ? 'translateY(-4px)' : 'translateY(0)',
          }}>
          <span style={audStyles.tag}>{a[0]}</span>
          <h3 style={audStyles.title}>{a[1][0]}<br/>{a[1][1]}</h3>
          <p style={audStyles.desc}>{a[2]}</p>
          <a href="#registrati"
            style={{ ...audStyles.link, color: hov === i ? 'var(--gold-light)' : 'var(--gold)', borderColor: hov === i ? 'var(--gold)' : 'var(--border)' }}>
            {a[3]}
          </a>
        </div>
      ))}
    </div>
  );
}

window.AudienceGrid = AudienceGrid;