// EventiScreen — the directory. FilterBar + result grid.
function EventiScreen({ go }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { EventCard, Breadcrumb, Tag, Button } = NS;
  const Icon = window.EVMIcon;
  const { events } = window.EVM_DATA;
  const cats = ['Tutti', 'Degustazioni', 'Masterclass', 'Cene con produttore', 'Verticali', "Banchi d'assaggio", 'Wine event'];
  const [cat, setCat] = React.useState('Tutti');
  const [q, setQ] = React.useState('');
  const filtered = events.filter((e) =>
    (cat === 'Tutti' || e.type === cat) &&
    (q === '' || (e.title + e.location + e.type).toLowerCase().includes(q.toLowerCase())));

  return (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '32px var(--container-pad) 96px' }}>
      <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Eventi' }]} />
      <div style={{ margin: '20px 0 8px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 620 }}>
          <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', lineHeight: 1.02, margin: 0 }}>Tutti gli eventi del vino in Lombardia</h1>
          <p style={{ fontSize: 'var(--fs-body-lg)', color: 'var(--text-muted)', margin: '14px 0 0' }}>Filtra per città, data e tipologia. Aggiornato ogni settimana.</p>
        </div>
      </div>

      {/* Controls */}
      <div style={{ position: 'sticky', top: 60, zIndex: 10, background: 'var(--cream)', paddingTop: 20, paddingBottom: 16, marginTop: 20, borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', padding: '10px 10px 10px 18px' }}>
          <Icon name="search" size={18} color="var(--ink-muted)" />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Cerca eventi, degustazioni, cantine…" aria-label="Cerca"
            style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', color: 'var(--charcoal)' }} />
          <Button variant="primary" size="sm">Cerca</Button>
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 14 }}>
          {cats.map((c) => <Tag key={c} active={c === cat} onClick={() => setCat(c)}>{c}</Tag>)}
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
            <select style={selStyle}><option>Tutte le province</option><option>Milano</option><option>Brescia</option><option>Bergamo</option></select>
            <select style={selStyle}><option>Qualsiasi data</option><option>Oggi</option><option>Weekend</option></select>
          </div>
        </div>
      </div>

      <p style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', margin: '20px 0' }}>{filtered.length} eventi trovati</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
        {filtered.map((e) => <EventCard key={e.id} {...e} onClick={() => go('EventDetail', e.id)} style={{ cursor: 'pointer' }} />)}
      </div>
      {filtered.length === 0 && <p style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '48px 0' }}>Nessun evento per questi filtri. Prova ad allargare la ricerca.</p>}
    </div>
  );
}
const selStyle = { appearance: 'none', background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', padding: '8px 16px', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--charcoal)', cursor: 'pointer' };
window.EventiScreen = EventiScreen;