const venueStyles = {
  grid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5rem', alignItems: 'center' },
  data: { display: 'flex', flexDirection: 'column', gap: '1.2rem' },
  row: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    paddingBottom: '1.2rem', borderBottom: '1px solid var(--border)',
  },
  key: { fontSize: '0.7rem', letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
  val: { fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: '1.3rem', fontWeight: 400, color: 'var(--fg)' },
};

const VENUE = [
  ['Data', '23 Giugno 2026', false],
  ['Sede', 'UNA Hotels MH Matera', false],
  ['Indirizzo', 'Via Germania SN, Matera', false],
  ['Registrazioni', '17:30', false],
  ['Inizio lavori', '18:00', false],
  ['Fine', '20:00', false],
  ['Ingresso', 'Gratuito · Su registrazione', true],
];

function VenueBlock() {
  return (
    <div className="venue-grid" style={venueStyles.grid}>
      <div>
        <p style={{ fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '1.5rem' }}>Dove e quando</p>
        <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 'clamp(2rem, 4vw, 3.5rem)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px' }}>
          Matera,<br/><em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>23 Giugno</em>
        </h2>
        <div style={{ width: 40, height: 1, background: 'var(--border)', margin: '2rem 0' }}></div>
        <p style={{ fontSize: '1.05rem', color: 'var(--fg-muted)', maxWidth: 580, lineHeight: 1.6 }}>
          Una serata nel cuore della Città dei Sassi, all'UNA Hotels MH Matera. Un contesto fuori dall'ordinario per un evento che guarda avanti. I posti sono limitati.
        </p>
      </div>
      <div style={venueStyles.data}>
        {VENUE.map(([k, v, gold], i) => (
          <div key={k} style={{ ...venueStyles.row, borderBottom: i === VENUE.length - 1 ? 'none' : '1px solid var(--border)' }}>
            <span style={venueStyles.key}>{k}</span>
            <span style={{ ...venueStyles.val, color: gold ? 'var(--gold)' : 'var(--fg)' }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.VenueBlock = VenueBlock;