// ChiSonoScreen, BlogScreen, ContattiScreen
function ChiSonoScreen({ go }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { Button, StatBlock, Badge, CTASection } = NS;
  const Icon = window.EVMIcon;
  return (
    <div>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '80px var(--container-pad)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="evm-detail">
        <div style={{ maxWidth: 540 }}>
          <span style={{ display: 'block', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', marginBottom: 16 }}>Chi sono</span>
          <h1 style={{ fontSize: 'var(--fs-hero)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-hero)', lineHeight: 1.02, margin: 0 }}>Vino e comunicazione, nello stesso calice.</h1>
          <p style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.45, color: 'var(--ink-82)', margin: '24px 0 0' }}>
            Sono una sommelier certificata AIS e una content strategist. Da nove anni lavoro con parole, contenuti e progetti digitali — siti, SEO, newsletter e tutto quello che serve per raccontare bene una storia.
          </p>
          <p style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.45, color: 'var(--ink-82)', margin: '16px 0 0' }}>
            <strong style={{ fontWeight: 'var(--fw-semibold)', color: 'var(--text-primary)' }}>Fuori di Vino</strong> nasce proprio dall’incontro di queste due passioni: conoscere il vino, ma anche tutto quello che gli gira intorno. Eventi da scoprire, posti dove andare, libri da leggere, film da vedere, podcast da ascoltare e, naturalmente, qualche buona bottiglia.
          </p>
          <p style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.45, color: 'var(--ink-82)', margin: '16px 0 0' }}>
            Insomma, la competenza per capire cosa vale la pena stappare e il mestiere per raccontarlo senza prendersi troppo sul serio.
          </p>
          <div style={{ display: 'flex', gap: 40, marginTop: 40 }}>
            <StatBlock value="AIS" label="sommelier certificata" />
            <StatBlock value="9 anni" label="digital & content" />
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <img src="immagini/sommelier-fondatrice-vigneto.png" alt="Ritratto della fondatrice tra i vigneti, calice di bianco in mano" style={{ display: 'block', width: '100%', aspectRatio: '4 / 5', objectFit: 'cover', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-subtle)' }} />
        </div>
      </div>

      <div style={{ background: 'linear-gradient(180deg, var(--cream), var(--rose-soft))', padding: '96px 0' }}>
        <div style={{ maxWidth: 860, margin: '0 auto', padding: '0 var(--container-pad)', textAlign: 'center' }}>
          <span style={{ display: 'block', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', marginBottom: 16 }}>La visione</span>
          <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', lineHeight: 1.1, margin: 0 }}>Rendere il vino un’occasione per incontrarsi, non una materia da esame.</h2>
          <p style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.5, color: 'var(--ink-82)', margin: '24px auto 0', maxWidth: 640 }}>
            Niente snobismo, niente tecnicismi fini a sé stessi. Solo eventi scelti bene e raccontati in modo che venga voglia di esserci — che tu sia un appassionato di lungo corso o alla tua prima degustazione.
          </p>
        </div>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '96px var(--container-pad)' }}>
        <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', margin: '0 0 40px', textAlign: 'center' }}>Cosa faccio, in concreto</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
          {[
            ['sparkles', 'Selezione editoriale', 'Filtro decine di eventi ogni settimana e pubblico solo quelli che valgono davvero il tuo tempo.'],
            ['users', 'Racconto dei produttori', 'Do voce a cantine, enoteche e organizzatori, con il contesto che rende un evento memorabile.'],
            ['mail', 'Strategia e visibilità', 'Aiuto le realtà del settore a farsi trovare: SEO, contenuti, newsletter e collaborazioni.'],
          ].map(([icon, t, d]) => (
            <div key={t} style={{ 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', marginBottom: 14 }}><Icon name={icon} size={20} /></span>
              <h3 style={{ fontSize: 'var(--fs-card-title)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.3px', margin: '0 0 8px' }}>{t}</h3>
              <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
      <CTASection overline="Lavoriamo insieme" title="Hai un progetto sul vino da far crescere?" body="Che tu organizzi eventi o gestisca una cantina, posso aiutarti a raccontarlo e a farlo trovare. Scrivimi: rispondo di persona." primary="Parliamo di una collaborazione" secondary="Scopri gli eventi" />
    </div>
  );
}
window.ChiSonoScreen = ChiSonoScreen;

function BlogScreen({ go }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { ArticleCard, Tag, Breadcrumb, Button } = NS;
  const { articles } = window.EVM_DATA;
  const cats = ['Tutti', 'Film', 'Guide', 'Degustazioni', 'Cantine', 'Esperienze'];
  const [cat, setCat] = React.useState('Tutti');
  const list = cat === 'Tutti' ? articles : articles.filter((a) => a.category === cat);
  const feat = articles.find((a) => a.id === 'franciacorta-gite') || articles[0];
  const rest = articles.filter((a) => a.id !== feat.id);
  return (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '32px var(--container-pad) 96px' }}>
      <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Blog' }]} />
      <div style={{ margin: '20px 0 36px', maxWidth: 760 }}>
        <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', lineHeight: 1.02, margin: 0 }}>Fuori di Vino</h1>
        <p style={{ fontSize: 'var(--fs-body-lg)', color: 'var(--text-muted)', margin: '14px 0 0' }}>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.</p>
      </div>

      {/* Featured */}
      <div onClick={() => go('ArticleDetail', feat.id)} style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 0, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', marginBottom: 44, cursor: 'pointer' }} className="evm-detail">
        {feat.image
          ? <img src={feat.image} alt={feat.title} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', aspectRatio: '16 / 10' }} />
          : <div style={{ aspectRatio: '16 / 10', background: 'linear-gradient(135deg, var(--lavender-soft), var(--rose-soft))' }} />}
        <div style={{ padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <span style={{ fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)' }}>In evidenza · {feat.category}</span>
          <h2 style={{ fontSize: 'var(--fs-h2)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', lineHeight: 1.1, margin: '14px 0 12px' }}>{feat.title}</h2>
          <p style={{ fontSize: 'var(--fs-body-lg)', color: 'var(--text-muted)', lineHeight: 1.45, margin: 0 }}>{feat.excerpt}</p>
          <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', marginTop: 18 }}>{feat.date} · {feat.readingTime}</span>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 28 }}>
        {cats.map((c) => <Tag key={c} active={c === cat} onClick={() => setCat(c)}>{c}</Tag>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
        {(cat === 'Tutti' ? rest : list).map((a) => <ArticleCard key={a.id} {...a} onClick={() => go('ArticleDetail', a.id)} style={{ cursor: 'pointer' }} />)}
      </div>
    </div>
  );
}
window.BlogScreen = BlogScreen;

function ArticleDetailScreen({ go, articleId }) {
  const NS = window.EventiVinoMilanoDesignSystem_98fdb6;
  const { Breadcrumb, Button, ArticleCard } = NS;
  const { articles } = window.EVM_DATA;
  const a = articles.find((x) => x.id === articleId) || articles[0];
  const related = articles.filter((x) => x.id !== a.id).slice(0, 3);

  const renderP = (b, i) => {
    if (b.nodes) return (
      <p key={i} style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.6, color: 'var(--ink-82)', margin: '0 0 22px' }}>
        {b.nodes.map((n, j) => n.link
          ? <a key={j} href={n.link} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--vino-strong)', textDecoration: 'underline', textUnderlineOffset: 3 }}>{n.t}</a>
          : <React.Fragment key={j}>{n.t}</React.Fragment>)}
      </p>
    );
    return <p key={i} style={{ fontSize: 'var(--fs-body-lg)', lineHeight: 1.6, color: 'var(--ink-82)', margin: '0 0 22px' }}>{b.text}</p>;
  };

  return (
    <div>
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '32px var(--container-pad) 0' }}>
        <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Blog', href: '#' }, { label: a.title }]} />
        <span style={{ display: 'block', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', margin: '24px 0 14px' }}>{a.category}</span>
        <h1 style={{ fontSize: 'var(--fs-h1)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h1)', lineHeight: 1.05, margin: 0 }}>{a.title}</h1>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', margin: '18px 0 0' }}>
          <span>{a.date}</span><span style={{ opacity: 0.5 }}>·</span><span>{a.readingTime} di lettura</span>
        </div>
      </div>

      {a.image && (
        <div style={{ maxWidth: 760, margin: '32px auto 0', padding: '0 var(--container-pad)' }}>
          <img src={a.image} alt={a.title} style={{ display: 'block', width: '100%', maxHeight: 520, objectFit: 'contain', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-subtle)', background: 'var(--cream)' }} />
        </div>
      )}

      <article style={{ maxWidth: 680, margin: '0 auto', padding: '40px var(--container-pad) 24px' }}>
        {(a.body || [{ type: 'p', text: a.excerpt }]).map((b, i) => {
          if (b.type === 'h2') return <h2 key={i} style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', lineHeight: 1.15, margin: '18px 0 20px' }}>{b.text}</h2>;
          if (b.type === 'h3') return <h3 key={i} style={{ fontSize: 'var(--fs-card-title)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.3px', lineHeight: 1.25, margin: '14px 0 16px' }}>{b.text}</h3>;
          if (b.type === 'h4') return <h4 key={i} style={{ fontSize: 'var(--fs-xs)', fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase', letterSpacing: 'var(--ls-overline)', color: 'var(--vino-strong)', margin: '6px 0 14px' }}>{b.text}</h4>;
          if (b.type === 'caption') return <p key={i} style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', fontStyle: 'italic', margin: '-8px 0 26px' }}>{b.text}</p>;
          if (b.type === 'quote') return (
            <blockquote key={i} style={{ margin: '8px 0 30px', padding: '4px 0 4px 22px', borderLeft: '3px solid var(--vino-strong)' }}>
              <p style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-medium)', lineHeight: 1.3, color: 'var(--text-primary)', margin: 0 }}>“{b.text}”</p>
              {b.cite && <cite style={{ display: 'block', fontStyle: 'normal', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', marginTop: 12 }}>— {b.cite}</cite>}
            </blockquote>
          );
          if (b.type === 'image') return (
            <div key={i} style={{ aspectRatio: '16 / 9', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'linear-gradient(135deg, var(--lavender-soft), var(--rose-soft))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b57', fontSize: 'var(--fs-sm)', margin: '4px 0 30px' }}>{b.placeholder || 'immagine'}</div>
          );
          return renderP(b, i);
        })}
      </article>

      <div style={{ maxWidth: 680, margin: '0 auto', padding: '0 var(--container-pad) 8px' }}>
        <Button variant="outline" onClick={() => go('Blog')}>← Torna al blog</Button>
      </div>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px var(--container-pad) 96px' }}>
        <h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-h2)', margin: '0 0 28px' }}>Continua a leggere</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="evm-grid-3">
          {related.map((r) => <ArticleCard key={r.id} {...r} onClick={() => go('ArticleDetail', r.id)} style={{ cursor: 'pointer' }} />)}
        </div>
      </div>
    </div>
  );
}
window.ArticleDetailScreen = ArticleDetailScreen;
