// HomeScreen — narrative homepage. Uses DS components off the namespace.
function HomeScreen({ go }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { Section, CTASection, EventCard, ArticleCard, Button, StatBlock, Badge } = NS;
  const Icon = window.EVMIcon;
  const { events, articles } = window.EVM_DATA;

  return (
    <div>
      {/* HERO */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 60% at 78% 8%, var(--rose-soft), transparent 60%), radial-gradient(50% 50% at 12% 90%, var(--lavender-soft), transparent 60%), radial-gradient(40% 40% at 50% 40%, var(--gold-soft), transparent 70%)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '112px var(--container-pad) 96px', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 48, alignItems: 'center' }} className="evm-hero">
          <div style={{ maxWidth: 620 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', marginBottom: 20 }}>
              <Icon name="sparkles" size={14} /> Guida curata · Lombardia
            </span>
            <h1 style={{ fontSize: 'var(--fs-hero)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-hero)', lineHeight: 1.02, margin: 0, color: 'var(--text-primary)' }}>
              Il vino in Lombardia, <span style={{ color: 'var(--vino)' }}>fuori dalla bottiglia.</span>
            </h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.4, color: 'var(--text-muted)', margin: '22px 0 0', maxWidth: 500 }}>
              Degustazioni, masterclass, fiere e incontri con i produttori: gli eventi che vale la pena conoscere, scelti da una sommelier AIS.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 32 }}>
              <Button variant="primary" size="lg" onClick={() => go('Eventi')} iconRight={<Icon name="arrow-right" size={17} />}>Scopri gli eventi</Button>
              <Button variant="outline" size="lg" onClick={() => go('Contatti')}>Segnala un evento</Button>
            </div>
            <div style={{ display: 'flex', gap: 48, marginTop: 48 }}>
              <StatBlock value="40+" label="eventi ogni mese" />
              <StatBlock value="11" label="province coperte" />
              <StatBlock value="9 anni" label="di esperienza AIS" />
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <img src="immagini/calice-vino-rosato.png" alt="Calice acquerello Eventi Vino Milano" style={{ width: '78%', maxWidth: 360, filter: 'drop-shadow(0 20px 40px rgba(235,40,119,0.18))' }} />
          </div>
        </div>
      </div>

      {/* EVENTI IN EVIDENZA */}
      <Section overline="Eventi in evidenza" title="Cosa vale la pena, adesso" intro="Una selezione settimanale tra decine di appuntamenti. Editorialmente scelti — mai un semplice elenco."
        action={<Button variant="outline" onClick={() => go('Eventi')}>Vedi tutti gli eventi</Button>} style={{ paddingBottom: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
          {events.slice(0, 3).map((e) => (
            <EventCard key={e.id} {...e} onClick={() => go('EventDetail', e.id)} style={{ cursor: 'pointer' }} />
          ))}
        </div>
      </Section>

      {/* TROVA IL TUO EVENTO */}
      <Section overline="Trova il tuo prossimo evento" title="Dimmi dove, quando e cosa ti va" intro="Filtra per città, data e tipologia. In pochi secondi arrivi all’evento giusto per te." align="center" tint="rose">
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={{ background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }} className="evm-grid-3">
            {[['Città', ['Milano', 'Brescia', 'Bergamo', 'Pavia']], ['Tipologia', ['Degustazioni', 'Masterclass', 'Cene con produttore', 'Verticali', "Banchi d'assaggio", 'Wine event']]].map(([label, opts]) => (
              <label key={label} style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--fs-sm)', color: 'var(--text-primary)', order: label === 'Città' ? 0 : 2 }}>
                {label}
                <select style={{ appearance: 'none', background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', padding: '10px 12px', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--charcoal)', cursor: 'pointer' }}>
                  {opts.map((o) => <option key={o}>{o}</option>)}
                </select>
              </label>
            ))}
            <fieldset style={{ order: 1, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 'var(--fs-sm)', color: 'var(--text-primary)', border: 0, padding: 0, margin: 0 }}>
              <legend style={{ padding: 0 }}>Quando</legend>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <input type="date" aria-label="Dal" style={{ minWidth: 0, flex: 1, appearance: 'none', background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', padding: '10px 10px', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--charcoal)', cursor: 'pointer' }} />
                <span style={{ color: 'var(--text-secondary)', flex: '0 0 auto' }}>→</span>
                <input type="date" aria-label="Al" style={{ minWidth: 0, flex: 1, appearance: 'none', background: 'var(--cream)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', padding: '10px 10px', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--charcoal)', cursor: 'pointer' }} />
              </div>
            </fieldset>
          </div>
          <div style={{ textAlign: 'center', marginTop: 20 }}>
            <Button variant="accent" size="lg" onClick={() => go('Eventi')} icon={<Icon name="search" size={17} color="#fff" />}>Cerca eventi</Button>
          </div>
        </div>
      </Section>

      {/* PERCHÉ */}
      <Section overline="Perché Eventi Vino Milano" title="Non un calendario. Una selezione." intro={<>Di eventi dedicati al vino ce ne sono tantissimi. Il punto è capire quali meritano davvero un posto in agenda. Perché sapere dove andare è utile. <strong style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-primary)' }}>Sapere perché andarci è tutta un’altra storia.</strong></>}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
          {[
            ['users', 'Scelti da chi il vino lo studia', 'Ogni evento passa dal filtro di una sommelier AIS. Se è in lista, un motivo c’è.'],
            ['calendar', 'Cosa, quando, dove — subito', 'Niente PDF, niente locandine illeggibili. Le informazioni che servono, nel formato giusto.'],
            ['sparkles', 'Il contesto, non solo la data', 'Ti racconto perché quell’evento conta: il produttore, il territorio, cosa aspettarti nel calice.'],
          ].map(([icon, t, d]) => (
            <div key={t} style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: 'var(--space-5)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', background: 'var(--cream)' }}>
              <span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-pill)', background: 'var(--vino-soft)', color: 'var(--vino-strong)', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={20} /></span>
              <h3 style={{ fontSize: 'var(--fs-card-title)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.3px', margin: 0 }}>{t}</h3>
              <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* DAL BLOG */}
      <Section overline="Dal blog" title="Fuori di Vino" intro="Idee, storie e consigli per chi il vino non lo beve soltanto: lo cerca, lo scopre e ogni tanto ci costruisce intorno un weekend. Destinazioni per winelovers, regali per aspiranti sommelier, libri, film, podcast e tutto quello che vale la pena stappare… anche fuori dalla bottiglia."
        action={<Button variant="outline" onClick={() => go('Blog')}>Leggi il blog</Button>}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="evm-grid-4">
          {articles.map((a) => <ArticleCard key={a.id} {...a} onClick={() => go('ArticleDetail', a.id)} style={{ cursor: 'pointer' }} />)}
        </div>
      </Section>

      <CTASection />
    </div>
  );
}
window.HomeScreen = HomeScreen;
