// EventDetailScreen — single event page.
function EventDetailScreen({ go, eventId }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { Breadcrumb, Badge, Button, IconButton, EventCard } = NS;
  const Icon = window.EVMIcon;
  const { events } = window.EVM_DATA;
  const ev = events.find((e) => e.id === eventId) || events[0];
  const related = events.filter((e) => e.id !== ev.id).slice(0, 3);

  const InfoRow = ({ icon, label, value }) => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '14px 0', borderBottom: '1px solid var(--border-subtle)' }}>
      <span style={{ color: 'var(--vino-strong)', marginTop: 1 }}><Icon name={icon} size={18} /></span>
      <div>
        <div style={{ fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--ink-muted)' }}>{label}</div>
        <div style={{ fontSize: 'var(--fs-body)', color: 'var(--text-primary)', marginTop: 2 }}>{value}</div>
      </div>
    </div>
  );

  return (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '32px var(--container-pad) 96px' }}>
      <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Eventi', href: '#' }, { label: ev.title }]} />

      {/* Hero image */}
      <div style={{ position: 'relative', aspectRatio: '21 / 9', borderRadius: 'var(--radius-xl)', overflow: 'hidden', marginTop: 20, border: '1px solid var(--border-subtle)', background: 'linear-gradient(135deg, var(--rose-soft), var(--lavender-soft), var(--gold-soft))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ color: '#c98a99', fontSize: 'var(--fs-sm)' }}>immagine evento</span>
        <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', gap: 8 }}>
          <Badge tone="dark">{ev.type}</Badge>
          {ev.sponsored && <Badge tone="gold">Sponsor</Badge>}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 0.9fr', gap: 48, marginTop: 40 }} className="evm-detail">
        {/* Main */}
        <div>
          <span style={{ display: 'block', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', marginBottom: 12 }}>{ev.dateLong} · {ev.location}</span>
          <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', lineHeight: 1.03, margin: 0 }}>{ev.title}</h1>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '20px 0 28px' }}>
            {ev.tags.map((t) => <Badge key={t} tone="neutral">{t}</Badge>)}
          </div>
          <div style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.55, color: 'var(--ink-82)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ margin: 0 }}>{ev.blurb}</p>
            <p style={{ margin: 0 }}>Un appuntamento pensato per chi vuole andare oltre l’assaggio: il produttore racconta le annate, il territorio e le scelte in cantina, mentre la degustazione guidata mette a fuoco cosa cercare in ogni calice. Adatto sia agli appassionati sia a chi si avvicina per la prima volta.</p>
            <p style={{ margin: 0 }}>Posti limitati. La prenotazione è consigliata con qualche giorno di anticipo.</p>
          </div>

          <h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.4px', margin: '40px 0 8px' }}>Perché te lo consigliamo</h2>
          <div style={{ borderLeft: '2px solid var(--vino)', paddingLeft: 20, color: 'var(--ink-82)', fontSize: 'var(--fs-body-lg)', lineHeight: 1.5, fontStyle: 'italic' }}>
            «Una verticale ben fatta è il modo più veloce per capire un territorio. Qui c’è un produttore che sa spiegarsi, senza salire in cattedra.» — la redazione
          </div>
        </div>

        {/* Sticky booking card */}
        <aside>
          <div style={{ position: 'sticky', top: 80, background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-5)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.4px' }}>{ev.price}</span>
              <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>a persona</span>
            </div>
            <InfoRow icon="calendar" label="Data" value={`${ev.dateLong}`} />
            <InfoRow icon="clock" label="Ora" value={`${ev.time}`} />
            <InfoRow icon="map-pin" label="Luogo" value={ev.venue} />
            <InfoRow icon="users" label="Organizzatore" value={ev.organizer} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20 }}>
              <Button variant="accent" size="lg" icon={<Icon name="ticket" size={17} color="#fff" />}>Prenota ora</Button>
              <Button variant="outline" iconRight={<Icon name="external" size={15} />}>Sito dell’evento</Button>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 16, justifyContent: 'center' }}>
              <IconButton label="Salva evento" variant="cream"><Icon name="heart" size={18} /></IconButton>
              <IconButton label="Condividi" variant="cream"><Icon name="share" size={17} /></IconButton>
            </div>
          </div>
        </aside>
      </div>

      {/* Related */}
      <div style={{ marginTop: 80 }}>
        <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', margin: '0 0 28px' }}>Eventi correlati</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
          {related.map((e) => <EventCard key={e.id} {...e} onClick={() => go('EventDetail', e.id)} style={{ cursor: 'pointer' }} />)}
        </div>
      </div>
    </div>
  );
}
window.EventDetailScreen = EventDetailScreen;