// Public-facing pages. Reads approved/published content from the store.

const S = window.OSS_STYLE;
const U = window.OssComponents;
const Store = window.OssStore;

function useStoreData() {
  const [, force] = React.useState(0);
  React.useEffect(() => Store.subscribe(() => force((x) => x + 1)), []);
  return Store.load();
}

function PublicApp() {
  const [route, setRoute] = React.useState(parseHash());
  React.useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const setRouteSafe = (r) => { window.location.hash = '#/' + (r.name === 'home' ? '' : r.name + (r.id ? '/' + r.id : '')); };

  const P = window.OssPublic;
  let content;
  if (route.name === 'home') content = <P.Home setRoute={setRouteSafe} />;
  else if (route.name === 'article') content = <P.Article id={route.id} setRoute={setRouteSafe} />;
  else if (route.name === 'analisi') content = <P.Analisi setRoute={setRouteSafe} />;
  else if (route.name === 'radar') content = <P.Radar setRoute={setRouteSafe} />;
  else if (route.name === 'database') content = <P.Database setRoute={setRouteSafe} />;
  else if (route.name === 'dashboard') content = <P.Dashboard setRoute={setRouteSafe} />;
  else if (route.name === 'about') content = <P.About setRoute={setRouteSafe} />;
  else if (route.name === 'carta') content = <P.Carta setRoute={setRouteSafe} articleId={route.id} />;
  else content = <P.Home setRoute={setRouteSafe} />;
  return <U.Shell route={route} setRoute={setRouteSafe}>{content}</U.Shell>;
}

function parseHash() {
  const h = (window.location.hash || '').replace(/^#\/?/, '');
  if (!h) return { name: 'home' };
  const [name, id] = h.split('/');
  return { name, id };
}

const OssPublic = {};

// Small reusable notice for sections still showing demo data.
function DemoNotice({ text }) {
  return (
    <div style={{
      display: 'inline-block',
      padding: '10px 16px',
      background: S.soft,
      borderLeft: `3px solid ${S.warn}`,
      fontFamily: S.serif,
      fontSize: 14,
      fontStyle: 'italic',
      color: S.muted,
      lineHeight: 1.5,
    }}>
      {text}
    </div>
  );
}

// Empty state for sections that wait for real content (no articles yet,
// no signals yet). Sober, not apologetic.
function EmptyState({ title, body }) {
  return (
    <div style={{ padding: '60px 0 40px', borderTop: `1px solid ${S.rule}`, borderBottom: `1px solid ${S.rule}` }}>
      <div style={{ fontFamily: S.display, fontSize: 26, fontStyle: 'italic', fontWeight: 400, letterSpacing: -0.3, marginBottom: 14, color: S.ink }}>{title}</div>
      <div style={{ fontFamily: S.serif, fontSize: 16, color: S.muted, lineHeight: 1.6, maxWidth: 560 }}>{body}</div>
    </div>
  );
}

OssPublic.Home = function ({ setRoute }) {
  const data = useStoreData();
  const articles = Store.listArticles({ status: 'published' });
  const feature = articles[0];
  const signals = Store.listSignals({ status: 'approved' });
  const [hovered, setHovered] = React.useState(null);

  if (!feature) {
    return (
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '120px 64px' }}>
        <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 18 }}>—— Osservatorio in formazione</div>
        <h1 style={{ fontFamily: S.display, fontSize: 60, fontWeight: 400, letterSpacing: -1.5, lineHeight: 1.05, margin: '0 0 28px' }}>
          Un punto di orientamento<br />che si sta prendendo il tempo di nascere.
        </h1>
        <div style={{ fontFamily: S.serif, fontSize: 19, lineHeight: 1.6, color: S.muted, maxWidth: 680 }}>
          <p style={{ margin: '0 0 18px' }}>
            L'Osservatorio CDTI sulla Intelligenza Artificiale è stato fondato il 21 aprile 2026, con la ratifica della
            sua Carta costitutiva. Nei prossimi mesi prenderanno forma il comitato editoriale, gli agenti di monitoraggio
            che alimenteranno il Radar, e i primi editoriali di analisi.
          </p>
          <p style={{ margin: '0 0 18px' }}>
            Questo sito è la casa dell'Osservatorio dal primo giorno: resterà sobrio finché non avrà cose vere da dire.
          </p>
          <p style={{ margin: '0' }}>
            Il <a href="#/about" onClick={(e) => { e.preventDefault(); setRoute({ name: 'about' }); }} style={{ color: S.accent2 }}>Manifesto</a> descrive la nostra missione;
            la <a href="#/carta" onClick={(e) => { e.preventDefault(); setRoute({ name: 'carta' }); }} style={{ color: S.accent2 }}>Carta</a> ne fissa le regole di condotta.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div>
      <section style={{ padding: '72px 64px 60px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72, alignItems: 'start' }}>
          <div onClick={() => setRoute({ name: 'article', id: feature.id })} style={{ cursor: 'pointer' }}>
            <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 18 }}>—— {feature.kicker}</div>
            <h1 style={{ fontFamily: S.display, fontSize: 64, fontWeight: 400, lineHeight: 1.02, letterSpacing: -1.5, margin: '0 0 24px' }}>{feature.title}</h1>
            <p style={{ fontFamily: S.serif, fontSize: 21, lineHeight: 1.5, color: S.muted, margin: '0 0 28px', maxWidth: 580 }}>{feature.dek}</p>
            <div style={{ fontFamily: S.sans, fontSize: 13, color: S.muted, letterSpacing: 0.5 }}>
              <span>di <strong style={{ color: S.ink }}>{feature.author}</strong></span>
              <span style={{ margin: '0 14px', color: S.dim }}>·</span>
              <span>{feature.role}</span>
              <span style={{ margin: '0 14px', color: S.dim }}>·</span>
              <span>{feature.readTime || 5} min</span>
            </div>
          </div>

          <div>
            <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: S.muted, marginBottom: 16, textAlign: 'center' }}>
              Radar · {signals.length} segnali verificati
            </div>
            <U.RadialRadar items={signals} onHover={setHovered} onSelect={() => setRoute({ name: 'radar' })} />
            <div style={{ marginTop: 16, minHeight: 64, padding: '12px 16px', background: S.soft, fontFamily: S.serif, fontSize: 13.5, lineHeight: 1.4 }}>
              {hovered ? (
                <>
                  <div style={{ fontFamily: S.mono, fontSize: 10, color: S.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 4 }}>{hovered.time} · {hovered.source} · {hovered.region}</div>
                  <div>{hovered.headline}</div>
                </>
              ) : (
                <div style={{ color: S.muted, fontStyle: 'italic' }}>Passa il mouse su un punto per leggerne la fonte, clicca per entrare nel radar.</div>
              )}
            </div>
          </div>
        </div>
      </section>

      {articles.length > 1 && (
        <section style={{ padding: '48px 64px', maxWidth: 1200, margin: '0 auto', borderTop: `1px solid ${S.rule}` }}>
          <div style={{ fontFamily: S.display, fontSize: 28, fontStyle: 'italic', fontWeight: 400, marginBottom: 32, letterSpacing: -0.3 }}>Letture del numero</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
            {articles.slice(1, 4).map((f) => (
              <article key={f.id} onClick={() => setRoute({ name: 'article', id: f.id })} style={{ cursor: 'pointer' }}>
                <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 12 }}>{f.kicker}</div>
                <h3 style={{ fontFamily: S.display, fontSize: 26, fontWeight: 400, lineHeight: 1.15, letterSpacing: -0.4, margin: '0 0 12px' }}>{f.title}</h3>
                <p style={{ fontFamily: S.serif, fontSize: 15, lineHeight: 1.55, color: S.muted, margin: '0 0 14px' }}>{f.dek}</p>
                <div style={{ fontFamily: S.sans, fontSize: 11, color: S.muted, letterSpacing: 0.5 }}>{f.author} · {f.readTime || 5} min</div>
              </article>
            ))}
          </div>
        </section>
      )}

      <section style={{ padding: '56px 64px', background: S.soft, marginTop: 48 }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 36 }}>
            <h3 style={{ fontFamily: S.display, fontSize: 32, fontStyle: 'italic', fontWeight: 400, margin: 0, letterSpacing: -0.4 }}>Il panorama in quattro numeri</h3>
            <button onClick={() => setRoute({ name: 'dashboard' })} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: S.sans, fontSize: 13, color: S.accent2, letterSpacing: 0.5 }}>Dashboard completa →</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 56 }}>
            {window.OSS_DATA.metrics.adoption.map((m) => (
              <div key={m.label}>
                <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: S.muted, marginBottom: 14 }}>{m.label}</div>
                <div style={{ fontFamily: S.display, fontSize: 64, fontWeight: 300, lineHeight: 0.95, letterSpacing: -2 }}>{m.value}</div>
                <div style={{ fontFamily: S.mono, fontSize: 11, color: m.delta > 0 ? S.success : S.accent2, marginTop: 10, letterSpacing: 0.5 }}>{m.delta > 0 ? '▲' : '▼'} {Math.abs(m.delta)} pp</div>
                <div style={{ fontFamily: S.serif, fontSize: 13, fontStyle: 'italic', color: S.muted, marginTop: 8 }}>{m.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

OssPublic.Article = function ({ id, setRoute }) {
  useStoreData();
  const f = Store.getArticle(id) || Store.listArticles({ status: 'published' })[0];
  if (!f) return <div style={{ padding: 80, textAlign: 'center' }}>Articolo non trovato.</div>;
  return (
    <article style={{ maxWidth: 720, margin: '0 auto', padding: '72px 48px 100px' }}>
      <button onClick={() => setRoute({ name: 'home' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: S.accent2, fontFamily: S.sans, fontSize: 13, letterSpacing: 0.5, marginBottom: 40, padding: 0 }}>← Osservatorio</button>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 20 }}>—— {f.kicker}</div>
      <h1 style={{ fontFamily: S.display, fontSize: 56, fontWeight: 400, lineHeight: 1.02, letterSpacing: -1.4, margin: '0 0 28px' }}>{f.title}</h1>
      <p style={{ fontFamily: S.serif, fontSize: 22, lineHeight: 1.5, color: S.muted, margin: '0 0 36px', fontStyle: 'italic' }}>{f.dek}</p>
      <div style={{ display: 'flex', gap: 24, fontFamily: S.sans, fontSize: 12, color: S.muted, letterSpacing: 0.5, paddingBottom: 28, borderBottom: `1px solid ${S.rule}`, marginBottom: 44 }}>
        <span>Di <strong style={{ color: S.ink }}>{f.author}</strong>, {f.role}</span>
        <span>{f.date}</span>
        <span>{f.readTime || 5} min</span>
      </div>
      <div style={{ fontFamily: S.serif, fontSize: 19, lineHeight: 1.75, color: S.ink }}>
        {(f.body && f.body.length ? f.body : ['Il corpo dell\'articolo non è ancora stato redatto.']).map((p, i) => (
          <p key={i} style={{ margin: '0 0 26px' }}>
            {i === 0 && p ? <span style={{ fontFamily: S.display, fontSize: 84, float: 'left', lineHeight: 0.8, margin: '10px 12px 0 0', fontWeight: 300, color: S.accent2 }}>{p[0]}</span> : null}
            {i === 0 && p ? p.slice(1) : p}
          </p>
        ))}
        {f.pullQuote && (
          <blockquote style={{ fontFamily: S.display, fontSize: 32, fontWeight: 400, fontStyle: 'italic', lineHeight: 1.25, letterSpacing: -0.4, textAlign: 'center', margin: '48px 0', padding: '32px 0', borderTop: `1px solid ${S.rule}`, borderBottom: `1px solid ${S.rule}` }}>
            "{f.pullQuote}"
          </blockquote>
        )}
      </div>
    </article>
  );
};

OssPublic.Analisi = function ({ setRoute }) {
  useStoreData();
  const list = Store.listArticles({ status: 'published' });
  return (
    <div style={{ maxWidth: 1000, margin: '0 auto', padding: '64px 64px 80px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Analisi</div>
      <h1 style={{ fontFamily: S.display, fontSize: 56, fontWeight: 400, letterSpacing: -1.2, margin: '0 0 48px' }}>Editoriali</h1>
      {list.length === 0 ? (
        <EmptyState
          title="Nessun editoriale pubblicato"
          body={<>L'Osservatorio è in formazione e i primi editoriali saranno pubblicati nei prossimi mesi. Gli articoli porteranno la firma dei loro autori: nessun testo compare qui finché non è scritto, rivisto, e ratificato dalla redazione.</>}
        />
      ) : list.map((f) => (
        <article key={f.id} onClick={() => setRoute({ name: 'article', id: f.id })} style={{ cursor: 'pointer', padding: '36px 0', borderBottom: `1px solid ${S.rule}` }}>
          <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 12 }}>{f.kicker}</div>
          <h2 style={{ fontFamily: S.display, fontSize: 38, fontWeight: 400, lineHeight: 1.1, letterSpacing: -0.8, margin: '0 0 14px' }}>{f.title}</h2>
          <p style={{ fontFamily: S.serif, fontSize: 18, lineHeight: 1.55, color: S.muted, fontStyle: 'italic', margin: '0 0 14px', maxWidth: 720 }}>{f.dek}</p>
          <div style={{ fontFamily: S.sans, fontSize: 12, color: S.muted, letterSpacing: 0.5 }}>{f.author} · {f.readTime || 5} min · {f.date}</div>
        </article>
      ))}
    </div>
  );
};

OssPublic.Radar = function () {
  useStoreData();
  const [query, setQuery] = React.useState(''); const [region, setRegion] = React.useState('all'); const [tag, setTag] = React.useState('all');
  const items = Store.listSignals({ status: 'approved' });
  const regions = ['all', ...new Set(items.map((n) => n.region))];
  const tags = ['all', ...new Set(items.map((n) => n.tag))];
  const filtered = items.filter((n) =>
    (region === 'all' || n.region === region) && (tag === 'all' || n.tag === tag) &&
    (!query || n.headline.toLowerCase().includes(query.toLowerCase())));
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 64px 80px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Radar</div>
      <h1 style={{ fontFamily: S.display, fontSize: 56, fontWeight: 400, letterSpacing: -1.2, margin: '0 0 16px' }}>Segnali dal mondo</h1>
      <p style={{ fontFamily: S.serif, fontSize: 19, color: S.muted, fontStyle: 'italic', margin: '0 0 40px', maxWidth: 680 }}>
        Selezione di notizie rilevanti raccolte dai nostri agenti di monitoraggio e verificate dalla redazione.
        Organizzata per regione e per tema.
      </p>
      {items.length === 0 ? (
        <EmptyState
          title="Gli agenti sono in ascolto"
          body={<>I sei agenti di monitoraggio dell'Osservatorio — Radar EU, US, IT, APAC, il Sintetizzatore settimanale e il Verificatore fonti — sono configurati ma non ancora operativi. I primi segnali compariranno qui quando il primo ciclo editoriale entrerà in servizio. Ogni segnale recherà il nome dell'agente che l'ha ingerito e il livello di confidenza con cui è stato classificato.</>}
        />
      ) : (
      <>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 16, marginBottom: 28, paddingBottom: 20, borderBottom: `1px solid ${S.rule}` }}>
        <input placeholder="Cerca nel radar..." value={query} onChange={(e) => setQuery(e.target.value)}
          style={{ padding: '10px 0', background: 'transparent', border: 'none', borderBottom: `1px solid ${S.rule}`, fontFamily: S.serif, fontSize: 16, color: 'inherit', outline: 'none' }} />
        <select value={region} onChange={(e) => setRegion(e.target.value)} style={{ padding: '10px 0', background: 'transparent', border: 'none', borderBottom: `1px solid ${S.rule}`, fontFamily: S.sans, fontSize: 14, color: 'inherit', outline: 'none' }}>
          {regions.map((r) => <option key={r} value={r}>Regione: {r}</option>)}
        </select>
        <select value={tag} onChange={(e) => setTag(e.target.value)} style={{ padding: '10px 0', background: 'transparent', border: 'none', borderBottom: `1px solid ${S.rule}`, fontFamily: S.sans, fontSize: 14, color: 'inherit', outline: 'none' }}>
          {tags.map((t) => <option key={t} value={t}>Tema: {t}</option>)}
        </select>
      </div>
      {filtered.map((n) => (
        <article key={n.id} style={{ display: 'grid', gridTemplateColumns: '90px 80px 1fr 140px', gap: 32, padding: '24px 0', borderBottom: `1px solid ${S.rule}`, alignItems: 'baseline' }}>
          <span style={{ fontFamily: S.mono, fontSize: 12, color: S.muted, letterSpacing: 0.5 }}>{n.time} {n.date}</span>
          <span style={{ fontFamily: S.mono, fontSize: 11, color: S.accent, letterSpacing: 2, textTransform: 'uppercase' }}>{n.region}</span>
          <div>
            <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: S.accent2, marginBottom: 6 }}>{n.tag}</div>
            <div style={{ fontFamily: S.serif, fontSize: 18, lineHeight: 1.4 }}>{n.headline}</div>
          </div>
          <span style={{ fontFamily: S.sans, fontSize: 12, color: S.muted, textAlign: 'right', fontStyle: 'italic' }}>{n.source}</span>
        </article>
      ))}
      </>
      )}
    </div>
  );
};

OssPublic.Database = function ({ setRoute }) {
  return (
    <div style={{ maxWidth: 780, margin: '0 auto', padding: '96px 64px 100px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Database · in costruzione</div>
      <h1 style={{ fontFamily: S.display, fontSize: 48, fontWeight: 400, letterSpacing: -1.0, margin: '0 0 28px', lineHeight: 1.1 }}>Il registro dei modelli<br />sarà curato.</h1>
      <div style={{ fontFamily: S.serif, fontSize: 19, lineHeight: 1.7, color: S.muted }}>
        <p style={{ margin: '0 0 22px' }}>
          Quando sarà pubblicato, il Database dell'Osservatorio riporterà i modelli di frontiera con parametri,
          finestre di rilascio, contesto, regime di accesso. Le fonti saranno citate per ogni riga: card
          ufficiali dei provider, papers, registri istituzionali come <em>Epoch AI</em>, <em>ENISA AI Knowledge Database</em>,
          <em> Artificial Analysis</em>.
        </p>
        <p style={{ margin: '0 0 22px' }}>
          Non pubblichiamo una tabella finché non abbiamo un agente Statistico che la aggiorna
          automaticamente da fonti verificabili e la rende citabile dalla redazione. Stiamo disegnando
          il flusso.
        </p>
        <p style={{ margin: 0 }}>
          Intanto puoi leggere la <a href="#/carta" onClick={(e) => { e.preventDefault(); setRoute && setRoute({ name: 'carta' }); }} style={{ color: S.accent2 }}>Carta</a> o seguire il <a href="#/radar" onClick={(e) => { e.preventDefault(); setRoute && setRoute({ name: 'radar' }); }} style={{ color: S.accent2 }}>Radar</a>.
        </p>
      </div>
    </div>
  );
};

// Legacy Database (hidden) — kept only as code reference during Opzione 4 build.
OssPublic._DatabaseLegacy = function () {
  const models = window.OSS_DATA.metrics.models;
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 64px 80px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Database</div>
      <h1 style={{ fontFamily: S.display, fontSize: 56, fontWeight: 400, letterSpacing: -1.2, margin: '0 0 20px' }}>Registro modelli</h1>
      <DemoNotice text="Dati dimostrativi, non verificati. Il registro ufficiale sarà curato dalla redazione e aggiornato a partire dal primo numero." />
      <div style={{ marginBottom: 36 }} />
      <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: S.serif }}>
        <thead>
          <tr style={{ borderBottom: `2px solid ${S.ink}` }}>
            {['Modello', 'Organizzazione', 'Paese', 'Parametri', 'Rilascio', 'Contesto', 'Accesso'].map((h) =>
              <th key={h} style={{ textAlign: 'left', padding: '14px 16px', fontFamily: S.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: S.muted, fontWeight: 500 }}>{h}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {models.map((m) => (
            <tr key={m.name} style={{ borderBottom: `1px solid ${S.rule}` }}>
              <td style={{ padding: '18px 16px', fontFamily: S.display, fontSize: 19, fontWeight: 500 }}>{m.name}</td>
              <td style={{ padding: '18px 16px', fontSize: 15, fontStyle: 'italic', color: S.muted }}>{m.org}</td>
              <td style={{ padding: '18px 16px', fontFamily: S.mono, fontSize: 13 }}>{m.country}</td>
              <td style={{ padding: '18px 16px', fontFamily: S.mono, fontSize: 13 }}>{m.params}</td>
              <td style={{ padding: '18px 16px', fontFamily: S.mono, fontSize: 13 }}>{m.release}</td>
              <td style={{ padding: '18px 16px', fontFamily: S.mono, fontSize: 13 }}>{m.context}</td>
              <td style={{ padding: '18px 16px', fontSize: 13 }}>
                <U.Chip color={m.access === 'Aperto' ? S.accent : S.ink} dim={m.access === 'Aperto'}>{m.access}</U.Chip>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

OssPublic.Dashboard = function ({ setRoute }) {
  return (
    <div style={{ maxWidth: 780, margin: '0 auto', padding: '96px 64px 100px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Dashboard · in costruzione</div>
      <h1 style={{ fontFamily: S.display, fontSize: 48, fontWeight: 400, letterSpacing: -1.0, margin: '0 0 28px', lineHeight: 1.1 }}>Le metriche arriveranno<br />quando saranno misurate.</h1>
      <div style={{ fontFamily: S.serif, fontSize: 19, lineHeight: 1.7, color: S.muted }}>
        <p style={{ margin: '0 0 22px' }}>
          La Dashboard mostrerà indicatori di adozione, infrastruttura, investimenti, consumo energetico dei data
          center. Ogni numero porterà la sua fonte citabile: Osservatorio Politecnico di Milano, OECD AI Policy
          Observatory, IEA Energy Reports, Dealroom, Epoch AI.
        </p>
        <p style={{ margin: '0 0 22px' }}>
          Preferiamo una Dashboard piccola, aggiornata e verificabile piuttosto che una grande, ampia,
          non fondata. Un agente Statistico dedicato è in disegno; curerà le letture periodiche e
          manterrà l'aggregato aggiornato con cadenza mensile.
        </p>
        <p style={{ margin: 0 }}>
          Nel frattempo, <a href="#/radar" onClick={(e) => { e.preventDefault(); setRoute && setRoute({ name: 'radar' }); }} style={{ color: S.accent2 }}>il Radar</a> raccoglie i singoli segnali; i pattern quantitativi emergeranno quando sarà tempo.
        </p>
      </div>
    </div>
  );
};

// Legacy Dashboard (hidden) — kept only as code reference during Opzione 4 build.
OssPublic._DashboardLegacy = function () {
  const t = window.OSS_DATA.metrics.trends;
  const max = Math.max(...t.map((x) => x.inference));
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 64px 80px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 14 }}>—— Dashboard</div>
      <h1 style={{ fontFamily: S.display, fontSize: 56, fontWeight: 400, letterSpacing: -1.2, margin: '0 0 16px' }}>Metriche e trend</h1>
      <p style={{ fontFamily: S.serif, fontSize: 19, color: S.muted, fontStyle: 'italic', margin: '0 0 24px', maxWidth: 680 }}>Indicatori selezionati sull'adozione, l'infrastruttura e l'impatto economico dell'AI.</p>
      <DemoNotice text="Dati dimostrativi, non ancora verificati. La Dashboard diventerà operativa quando la redazione stabilirà la prima baseline misurata." />
      <div style={{ marginBottom: 36 }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 48, paddingBottom: 56, borderBottom: `1px solid ${S.rule}`, marginBottom: 56 }}>
        {window.OSS_DATA.metrics.adoption.map((m) => (
          <div key={m.label}>
            <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: S.muted, marginBottom: 14 }}>{m.label}</div>
            <div style={{ fontFamily: S.display, fontSize: 72, fontWeight: 300, lineHeight: 0.9, letterSpacing: -2.5 }}>{m.value}</div>
            <div style={{ fontFamily: S.mono, fontSize: 11, color: m.delta > 0 ? S.success : S.accent2, marginTop: 10 }}>{m.delta > 0 ? '▲' : '▼'} {Math.abs(m.delta)}</div>
            <div style={{ fontFamily: S.serif, fontSize: 13, fontStyle: 'italic', color: S.muted, marginTop: 8 }}>{m.sub}</div>
          </div>
        ))}
      </div>
      <div style={{ marginBottom: 56 }}>
        <h3 style={{ fontFamily: S.display, fontSize: 30, fontWeight: 400, fontStyle: 'italic', margin: '0 0 28px', letterSpacing: -0.3 }}>Capacità computazionale per trimestre</h3>
        <div style={{ position: 'relative', height: 280, paddingLeft: 50 }}>
          {[0, 0.25, 0.5, 0.75, 1].map((y) => (
            <div key={y} style={{ position: 'absolute', left: 50, right: 0, bottom: y * 260, borderTop: `0.5px solid ${S.rule}`, fontFamily: S.mono, fontSize: 9, color: S.muted }}>
              <span style={{ position: 'absolute', left: -44 }}>{Math.round(max * y)}</span>
            </div>
          ))}
          <svg viewBox={`0 0 ${t.length * 80} 260`} preserveAspectRatio="none" style={{ width: '100%', height: 260, display: 'block' }}>
            <polyline points={t.map((q, i) => `${i * 80 + 40},${260 - (q.training / max) * 250}`).join(' ')} fill="none" stroke={S.accent} strokeWidth="1.5" />
            <polyline points={t.map((q, i) => `${i * 80 + 40},${260 - (q.inference / max) * 250}`).join(' ')} fill="none" stroke={S.accent2} strokeWidth="1.5" />
            {t.map((q, i) => <circle key={q.quarter} cx={i * 80 + 40} cy={260 - (q.inference / max) * 250} r="3" fill={S.accent2} />)}
            {t.map((q, i) => <circle key={'t' + q.quarter} cx={i * 80 + 40} cy={260 - (q.training / max) * 250} r="3" fill={S.accent} />)}
          </svg>
          <div style={{ display: 'flex', paddingLeft: 0 }}>{t.map((q) => <div key={q.quarter} style={{ flex: 1, textAlign: 'center', fontFamily: S.mono, fontSize: 10, color: S.muted, padding: '10px 0' }}>{q.quarter}</div>)}</div>
        </div>
        <div style={{ display: 'flex', gap: 24, fontFamily: S.serif, fontSize: 14, fontStyle: 'italic', color: S.muted, marginTop: 14, paddingLeft: 50 }}>
          <span><span style={{ display: 'inline-block', width: 12, height: 12, background: S.accent, marginRight: 8, verticalAlign: 'middle' }} />Training</span>
          <span><span style={{ display: 'inline-block', width: 12, height: 12, background: S.accent2, marginRight: 8, verticalAlign: 'middle' }} />Inferenza</span>
        </div>
      </div>
      <div>
        <h3 style={{ fontFamily: S.display, fontSize: 30, fontWeight: 400, fontStyle: 'italic', margin: '0 0 28px', letterSpacing: -0.3 }}>Consumo energetico per regione</h3>
        {window.OSS_DATA.metrics.energy.map((e) => (
          <div key={e.region} style={{ display: 'grid', gridTemplateColumns: '140px 1fr 100px', gap: 24, padding: '18px 0', borderBottom: `1px solid ${S.rule}`, alignItems: 'center' }}>
            <div style={{ fontFamily: S.display, fontSize: 20 }}>{e.region}</div>
            <div style={{ height: 6, background: S.soft, position: 'relative' }}>
              <div style={{ height: '100%', width: `${e.share * 2.3}%`, background: e.region === 'UE' ? S.accent2 : S.accent }} />
            </div>
            <div style={{ fontFamily: S.mono, fontSize: 14, textAlign: 'right' }}>{e.twh} TWh</div>
          </div>
        ))}
      </div>
    </div>
  );
};

OssPublic.About = function ({ setRoute }) {
  return (
    <div style={{ maxWidth: 720, margin: '0 auto', padding: '96px 48px 100px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 20 }}>—— Manifesto</div>
      <h1 style={{ fontFamily: S.display, fontSize: 72, fontWeight: 400, fontStyle: 'italic', lineHeight: 1, letterSpacing: -2, margin: '0 0 48px' }}>Quando l'orientamento<br />è tutto.</h1>
      <div style={{ fontFamily: S.serif, fontSize: 20, lineHeight: 1.7, color: S.ink }}>
        <p style={{ margin: '0 0 26px' }}>L'intelligenza artificiale non è un'onda che attraversa il nostro tempo: è la marea che ne ridisegna la topografia. Ogni settimana nuove capacità, nuovi modelli, nuove norme.</p>
        <p style={{ margin: '0 0 26px' }}>L'Osservatorio CDTI nasce per offrire ai decisori italiani un punto di orientamento stabile in un panorama che cambia ogni ora. Non rincorriamo le notizie: le leggiamo, le collochiamo, ne estraiamo il significato.</p>
        <p style={{ margin: '0 0 26px' }}>Crediamo che le tecnologie profonde si governino con la profondità dello sguardo, non con la velocità del commento.</p>
      </div>
      <div style={{ marginTop: 40, padding: '24px 28px', background: S.soft, borderLeft: `3px solid ${S.accent2}` }}>
        <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: S.accent2, marginBottom: 10 }}>Carta costitutiva</div>
        <div style={{ fontFamily: S.serif, fontSize: 16, color: S.ink, lineHeight: 1.55, marginBottom: 14 }}>
          Le regole di condotta dell'Osservatorio — missione, tono, limiti di autonomia, trattamento delle fonti e dei soggetti,
          economia, memoria, trasparenza — sono raccolte in una Carta di 48 articoli, ratificata il 21 aprile 2026.
          La Carta è pubblica ed è il fondamento a cui ogni editore, agente e lettore può fare appello.
        </div>
        <a href="#/carta" onClick={(e) => { e.preventDefault(); setRoute && setRoute({ name: 'carta' }); }}
          style={{ fontFamily: S.sans, fontSize: 14, color: S.accent2, textDecoration: 'none', fontWeight: 500, letterSpacing: 0.3 }}>
          Leggi la Carta →
        </a>
      </div>
      <div style={{ marginTop: 48, paddingTop: 32, borderTop: `1px solid ${S.rule}`, fontFamily: S.serif, fontSize: 15, color: S.muted, lineHeight: 1.7 }}>
        <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 12, color: S.accent2 }}>Struttura redazionale</div>
        L'Osservatorio è una redazione mista, umana e agentica. Gli articoli di analisi sono firmati dai loro autori.
        Il radar delle notizie sarà prodotto da <em>agenti di monitoraggio</em> (Radar EU, US, IT, APAC, Sintetizzatore,
        Verificatore fonti) che la redazione vaglierà ogni mattina prima della pubblicazione: ogni segnale recherà
        il nome dell'agente che l'ha ingerito e il livello di confidenza con cui è stato classificato.
        Nessuna pubblicazione raggiunge il lettore senza un umano nel ciclo, salvo i segnali del Radar approvati
        entro i parametri previsti dalla Carta (art. 18).
        <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px dashed ${S.rule}`, fontSize: 14 }}>
          <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 8, color: S.muted }}>Direttore</div>
          Francesco Marinuzzi
          <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', marginTop: 18, marginBottom: 8, color: S.muted }}>Stato</div>
          Osservatorio in formazione. Il comitato scientifico e la redazione allargata si comporranno nei prossimi mesi;
          i primi agenti entreranno in servizio con il primo ciclo operativo.
        </div>
      </div>
    </div>
  );
};

OssPublic.Carta = function ({ setRoute, articleId }) {
  const data = useStoreData();
  const carta = data.carta;
  const identity = data.identity;

  // Deep-link scroll: if ?#/carta/art-14, focus that article.
  React.useEffect(() => {
    if (!articleId) return;
    const el = document.getElementById('art-' + articleId);
    if (el) {
      setTimeout(() => {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        el.style.background = S.soft;
        setTimeout(() => { el.style.background = ''; }, 2200);
      }, 120);
    }
  }, [articleId, carta]);

  if (!carta) {
    return (
      <div style={{ maxWidth: 820, margin: '0 auto', padding: '96px 48px' }}>
        <div style={{ fontFamily: S.serif, fontSize: 18, color: S.muted, fontStyle: 'italic' }}>
          Caricamento della Carta…
        </div>
      </div>
    );
  }

  const capi = carta.capi || [];
  const preambolo = carta.preambolo || [];
  const clausole = carta.clausole_finali || [];

  return (
    <article style={{ maxWidth: 820, margin: '0 auto', padding: '72px 48px 120px' }}>
      <div style={{ fontFamily: S.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 18 }}>—— Carta costitutiva</div>
      <h1 style={{ fontFamily: S.display, fontSize: 54, fontWeight: 400, lineHeight: 1.05, letterSpacing: -1.3, margin: '0 0 14px' }}>
        La Carta dell'Osservatorio
      </h1>
      <p style={{ fontFamily: S.serif, fontSize: 20, fontStyle: 'italic', color: S.muted, margin: '0 0 40px', lineHeight: 1.5 }}>
        {identity?.full || 'Osservatorio CDTI sulla Intelligenza Artificiale'}
      </p>

      <div style={{ display: 'flex', gap: 24, paddingBottom: 24, borderBottom: `1px solid ${S.rule}`, marginBottom: 40, fontFamily: S.mono, fontSize: 11, color: S.muted, letterSpacing: 1, textTransform: 'uppercase', flexWrap: 'wrap' }}>
        <span>Versione {carta.version || '1.0'}</span>
        <span>·</span>
        <span>Ratificata {carta.ratified_at ? new Date(carta.ratified_at).toLocaleDateString('it-IT', { day: 'numeric', month: 'long', year: 'numeric' }) : '—'}</span>
        <span>·</span>
        <span>Da {carta.ratified_by || '—'}</span>
      </div>

      {/* Indice */}
      <div style={{ background: S.soft, padding: '24px 28px', marginBottom: 48 }}>
        <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: S.muted, marginBottom: 14 }}>Indice</div>
        <div style={{ fontFamily: S.serif, fontSize: 15, lineHeight: 1.9, color: S.ink }}>
          <a href="#preambolo" onClick={(e) => { e.preventDefault(); scrollToAnchor('preambolo'); }} style={linkStyle}>Preambolo</a><br />
          {capi.map((c) => (
            <React.Fragment key={c.n}>
              <a href={`#capo-${c.n}`} onClick={(e) => { e.preventDefault(); scrollToAnchor('capo-' + c.n); }} style={linkStyle}>
                Capo {c.n} · {c.titolo}
              </a>
              <span style={{ color: S.dim, fontSize: 13, marginLeft: 8 }}>
                (artt. {(c.articoli || []).map((a) => a.n).join(', ')})
              </span>
              <br />
            </React.Fragment>
          ))}
          {clausole.length > 0 && (
            <a href="#clausole" onClick={(e) => { e.preventDefault(); scrollToAnchor('clausole'); }} style={linkStyle}>
              Clausole finali <span style={{ color: S.dim, fontSize: 13 }}>(artt. {clausole.map((c) => c.n).join(', ')})</span>
            </a>
          )}
        </div>
      </div>

      {/* Preambolo */}
      <section id="preambolo" style={{ scrollMarginTop: 120, marginBottom: 64 }}>
        <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: S.muted, marginBottom: 12 }}>Preambolo</div>
        <div style={{ fontFamily: S.serif, fontSize: 19, lineHeight: 1.75, color: S.ink }}>
          {preambolo.map((para, i) => (
            <p key={i} style={{ margin: '0 0 22px' }}>{para}</p>
          ))}
        </div>
      </section>

      {/* Capi */}
      {capi.map((capo) => (
        <section key={capo.n} id={`capo-${capo.n}`} style={{ scrollMarginTop: 120, marginBottom: 64 }}>
          <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 10 }}>Capo {capo.n}</div>
          <h2 style={{ fontFamily: S.display, fontSize: 32, fontWeight: 400, lineHeight: 1.15, letterSpacing: -0.4, margin: '0 0 28px' }}>{capo.titolo}</h2>
          {(capo.articoli || []).map((art) => (
            <ArticoloCarta key={art.n} articolo={art} />
          ))}
        </section>
      ))}

      {/* Clausole finali */}
      {clausole.length > 0 && (
        <section id="clausole" style={{ scrollMarginTop: 120, marginBottom: 64 }}>
          <div style={{ fontFamily: S.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: S.accent2, marginBottom: 10 }}>Clausole finali</div>
          {clausole.map((cl) => (
            <div key={cl.n} id={`art-${cl.n}`} style={{ marginBottom: 28, scrollMarginTop: 120, transition: 'background .4s' }}>
              {cl.titolo && (
                <h3 style={{ fontFamily: S.display, fontSize: 22, fontWeight: 500, fontStyle: 'italic', margin: '0 0 8px', color: S.ink }}>{cl.titolo}</h3>
              )}
              <div style={{ display: 'flex', gap: 14, alignItems: 'baseline', marginBottom: 6 }}>
                <span style={{ fontFamily: S.mono, fontSize: 11, color: S.accent2, letterSpacing: 1, whiteSpace: 'nowrap' }}>Art. {cl.n}</span>
                <span style={{ fontFamily: S.sans, fontSize: 14, fontWeight: 500, color: S.ink, letterSpacing: 0.2 }}>{cl.rubrica}</span>
              </div>
              <div style={{ fontFamily: S.serif, fontSize: 17, lineHeight: 1.7, color: S.ink, paddingLeft: 0 }}>{cl.testo}</div>
            </div>
          ))}
        </section>
      )}

      {/* Footer di ratifica */}
      <div style={{ marginTop: 80, paddingTop: 32, borderTop: `2px solid ${S.ink}`, fontFamily: S.serif, fontSize: 15, color: S.muted, lineHeight: 1.6 }}>
        <p style={{ margin: '0 0 14px' }}>
          Questa Carta è il fondamento dell'Osservatorio. Ogni articolo è citabile — es. "art. 14 del Capo IV" — e
          vincola umani e agenti. Emendamenti richiedono la procedura di cui all'art. 34.
        </p>
        <p style={{ margin: 0, fontStyle: 'italic' }}>
          Ratificata il {carta.ratified_at ? new Date(carta.ratified_at).toLocaleDateString('it-IT', { day: 'numeric', month: 'long', year: 'numeric' }) : '—'} da <strong style={{ color: S.ink, fontStyle: 'normal' }}>{carta.ratified_by || '—'}</strong>, editore fondatore.
        </p>
      </div>
    </article>
  );
};

// Singolo articolo della Carta (rubrica + testo), con id per deep-link.
function ArticoloCarta({ articolo }) {
  return (
    <div id={`art-${articolo.n}`} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 22, padding: '16px 0 18px', borderBottom: `1px solid ${S.rule}`, alignItems: 'baseline', scrollMarginTop: 120, transition: 'background .4s' }}>
      <div style={{ fontFamily: S.mono, fontSize: 12, color: S.accent2, letterSpacing: 1, fontWeight: 500 }}>Art. {articolo.n}</div>
      <div>
        <div style={{ fontFamily: S.sans, fontSize: 14, fontWeight: 600, color: S.ink, letterSpacing: 0.2, marginBottom: 6 }}>{articolo.rubrica}</div>
        {articolo.sezione && (
          <div style={{ fontFamily: S.mono, fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: S.muted, marginBottom: 8 }}>§ {articolo.sezione}</div>
        )}
        <div style={{ fontFamily: S.serif, fontSize: 17, lineHeight: 1.7, color: S.ink }}>{articolo.testo}</div>
      </div>
    </div>
  );
}

const linkStyle = { color: S.accent2, textDecoration: 'none' };

function scrollToAnchor(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

window.OssPublic = OssPublic;
window.PublicApp = PublicApp;