// variant-b.jsx — "Carica PDF → vedi"
// Hero = animated mini product demo. The action is the value prop.
// More product-forward, less editorial.

function VariantB() {
  return (
    <div className="cbamy-root" style={{ background: 'var(--bg)', minHeight: '100%', scrollBehavior: 'smooth' }}>
      <style>{`
        html { scroll-behavior: smooth; }
        .cbamy-root section[id] { scroll-margin-top: 80px; }
      `}</style>
      <Nav />

      {/* ── HERO ─────────────────────────────────────────────────────────── */}
      <section id="hero" style={{ padding: '64px 64px 40px', background: 'var(--bg)', position: 'relative' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.95fr 1.1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              background: 'var(--slate-100)', color: 'var(--ink-soft)',
              fontSize: 12, fontWeight: 500, marginBottom: 24,
              fontFamily: 'var(--font-mono)', letterSpacing: 0
            }}>
              <span className="mono">●</span> CBAM 2026 · live
            </div>

            <h1 className="serif" style={{
              margin: 0, fontSize: 60, lineHeight: 1.04, letterSpacing: '-0.02em',
              fontWeight: 500, color: 'var(--ink)'
            }}>
              Carica il PDF.<br />
              Vedi il costo.<br />
              <span style={{ color: 'var(--accent)' }}>Punto.</span>
            </h1>

            <p style={{
              margin: '24px 0 0', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)',
              maxWidth: 480
            }}>CBAMy legge la dichiarazione doganale ADM, individua le voci doganali soggette a CBAM e ti restituisce in pochi secondi i certificati richiesti e il costo previsto.



            </p>

            <div style={{ marginTop: 32, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href="mailto:cbamy@cmconsulting.app?subject=Richiesta%20demo%20CBAMy" style={{ ...btnPrimary('lg'), textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Prova CBAMy <IconArrowRight size={14} /></a>
            </div>

            <div style={{ marginTop: 36, display: 'flex', gap: 28, fontSize: 13, color: 'var(--ink-soft)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <IconCheck size={14} color="var(--accent)" /> Zero data entry
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <IconCheck size={14} color="var(--accent)" /> Nessun ERP
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <IconCheck size={14} color="var(--accent)" /> Chiarezza immediata
              </div>
            </div>
          </div>

          <PdfDemo />
        </div>
      </section>

      {/* ── Differenziatore strip ─────────────────────────────────────────── */}
      <section id="differenza" style={{ padding: '40px 64px', background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 40, alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 48, height: 48, borderRadius: 10, background: 'var(--accent-bg)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--teal-200)'
            }}>
              <IconFile size={22} color="var(--accent)" />
            </div>
            <div>
              <div className="serif" style={{ fontSize: 20, color: 'var(--ink)', fontWeight: 500 }}>L'unico che parte dal PDF ADM.

              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 2 }}>
                Tutti gli altri chiedono di reinserire articoli o di integrare l'ERP. Noi no.
              </div>
            </div>
          </div>
          <div style={{ borderLeft: '1px solid var(--line)', paddingLeft: 40, fontSize: 13, color: 'var(--ink-mute)', lineHeight: 1.7 }}>
            <div>Riconosce le voci doganali soggette <span className="mono" style={{ color: 'var(--ink-soft)' }}>(codici CN · Allegato I)</span></div>
            <div>Prezzo certificato aggiornato <span className="mono" style={{ color: 'var(--ink-soft)' }}>75,36 € · Q1 2026</span></div>
          </div>
          <a href="#come-funziona" style={{ fontSize: 13, color: 'var(--accent-ink)', fontWeight: 500, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Come funziona <IconArrowRight size={12} />
          </a>
        </div>
      </section>

      {/* ── 3 STEP COME FUNZIONA ─────────────────────────────────────────── */}
      <section id="come-funziona" style={{ padding: '80px 64px', background: 'var(--bg)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent-ink)', marginBottom: 14 }}>
              FLUSSO
            </div>
            <h2 className="serif" style={{ margin: 0, fontSize: 44, lineHeight: 1.1, color: 'var(--ink)', fontWeight: 500 }}>Dal documento al numero in 20 secondi.

            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
            {
              n: '01',
              t: 'Carichi il PDF ADM',
              d: 'Il prospetto di sintesi ufficiale di ADM è già completo di tutte le informazioni. CBAMy le legge e le analizza.',
              k: { l: 'Tempo medio', v: '< 8 s' },
              visual: <UploadCard />
            },
            {
              n: '02',
              t: 'Identifica le righe CBAM',
              d: 'Tra tutti gli articoli importati, CBAMy isola quelli soggetti a CBAM. Gli altri vengono ignorati: vedi solo quello che conta davvero.',
              k: { l: 'Su 8 articoli', v: '3 CBAM' },
              visual: <ClassifyCard />
            },
            {
              n: '03',
              t: 'Scegli tra Default UE e Dati reali',
              d: 'Per ogni riga: emissioni × riduzione ETS × prezzo certificato − carbon price terzo. Tutta la formula è in chiaro nell\'audit log, sovrascrivibile con dati reali.',
              k: { l: 'Costo stimato', v: '2.863,68 €' },
              visual: <CalcCard />
            }].
            map((s, i) =>
            <div key={i} style={{
              padding: 0, borderRadius: 14, border: '1px solid var(--line)', background: '#fff',
              overflow: 'hidden', display: 'flex', flexDirection: 'column'
            }}>
                <div style={{ background: 'var(--bg-soft)', padding: 24, borderBottom: '1px solid var(--line)' }}>
                  {s.visual}
                </div>
                <div style={{ padding: '24px 24px 28px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                    <span className="mono" style={{
                    fontSize: 11, fontWeight: 600, padding: '3px 7px', borderRadius: 4,
                    background: 'var(--accent-bg)', color: 'var(--accent-ink)'
                  }}>{s.n}</span>
                    <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--ink-mute)' }}>
                      {s.k.l} <span className="mono" style={{ color: 'var(--ink)' }}>{s.k.v}</span>
                    </span>
                  </div>
                  <h3 className="serif" style={{ margin: 0, fontSize: 19, color: 'var(--ink)', fontWeight: 500 }}>{s.t}</h3>
                  <p style={{ margin: '10px 0 0', fontSize: 13.5, lineHeight: 1.6, color: 'var(--ink-soft)' }}>{s.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── PANORAMICA ANNUA (dashboard senza sidebar) ───────────────────── */}
      <section id="cosa-vedi" style={{ padding: '96px 64px 88px', background: 'var(--bg-soft)', borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1fr', gap: 56, marginBottom: 48, alignItems: 'end' }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent-ink)', marginBottom: 14 }}>
                PANORAMICA ANNUA
              </div>
              <h2 className="serif" style={{ margin: 0, fontSize: 44, lineHeight: 1.1, color: 'var(--ink)', fontWeight: 500 }}>
                A fine anno,<br />una sola pagina.
              </h2>
            </div>
            <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, maxWidth: 540 }}>
              Soglia annua, certificati dovuti, costo stimato, distribuzione per categoria
              merceologica e per fornitore, andamento trimestrale: tutto si aggiorna ad ogni
              PDF caricato. Niente da chiudere, niente da consolidare.
            </p>
          </div>

          <DashboardNoSidebar />

          <div style={{
            marginTop: 28, display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', fontSize: 12, color: 'var(--ink-mute)'
          }}>
            <span className="mono">↑ Dati di esempio · valori reali sono visibili solo al titolare EORI</span>
            <a href="#dichiarazione" style={{ color: 'var(--accent-ink)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500 }}>
              Vedi anche dettaglio dichiarazione <IconArrowRight size={12} />
            </a>
          </div>
        </div>
      </section>

      {/* ── COSA VEDI — DICHIARAZIONE DETAIL ─────────────────────────────── */}
      <section id="dichiarazione" style={{ padding: '88px 64px', background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, marginBottom: 48, alignItems: 'end' }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent-ink)', marginBottom: 14 }}>
                DALLA RIGA AL CALCOLO
              </div>
              <h2 className="serif" style={{ margin: 0, fontSize: 42, lineHeight: 1.1, color: 'var(--ink)', fontWeight: 500 }}>Ogni risultato è spiegato con la formula.

              </h2>
            </div>
            <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, maxWidth: 520 }}>
              Apri una riga della dichiarazione: vedi tutti i parametri normativi che hanno
              prodotto il costo — benchmark ETS, fattore di riduzione, emissioni nette, prezzo
              certificato, carbon price del paese terzo. Citabili, esportabili, sovrascrivibili
              con i dati reali del produttore.
            </p>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.05fr 28px 1fr', gap: 0, alignItems: 'stretch'
          }}>
            <DeclarationPreview highlightCN="72179020" />
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              gap: 8, padding: '0 4px', position: 'relative'
            }}>
              <div style={{ flex: 1, width: 1, background: 'var(--line)' }} />
              <div style={{
                width: 28, height: 28, borderRadius: '50%', background: 'var(--accent)',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 0 0 6px rgba(13,148,136,0.10)'
              }}>
                <IconArrowRight size={14} color="#fff" />
              </div>
              <div style={{ flex: 1, width: 1, background: 'var(--line)' }} />
              <span className="mono" style={{
                position: 'absolute', top: '50%', transform: 'translate(28px, -50%)',
                fontSize: 10, color: 'var(--ink-mute)', whiteSpace: 'nowrap'
              }}>apri riga</span>
            </div>
            <FormulaTable />
          </div>

          <ul style={{
            marginTop: 36, padding: 0, listStyle: 'none',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20
          }}>
            {[
            ['Formula in chiaro', 'tutti i parametri normativi sono visibili e citabili'],
            ['Toggle Default ↔ Reali', 'switch riga per riga, audit log automatico'],
            ['Snapshot per audit', 'ogni calcolo conserva i parametri usati al momento']].
            map(([t, d]) =>
            <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <IconCheckCircle size={16} color="var(--accent)" />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{t}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 2 }}>{d}</div>
                </div>
              </li>
            )}
          </ul>
        </div>
      </section>

      {/* ── SIMULAZIONI PRE-ACQUISTO ─────────────────────────────────────── */}
      <section id="simulazioni" style={{ padding: '88px 64px', background: 'var(--slate-950)', color: '#fff', borderTop: '1px solid var(--slate-800)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 56, marginBottom: 48, alignItems: 'end' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: 'var(--teal-300)', marginBottom: 14 }}>
                SIMULAZIONI · PRIMA DELL'ORDINE
              </div>
              <h2 className="serif" style={{ margin: 0, fontSize: 44, lineHeight: 1.08, fontWeight: 500, letterSpacing: '-0.02em' }}>
                Sai quanto costerà<br />
                <span style={{ color: 'var(--teal-300)', fontStyle: 'italic' }}>prima</span> di firmare l'ordine.
              </h2>
            </div>
            <p style={{ margin: 0, fontSize: 16, color: 'var(--slate-300)', lineHeight: 1.65, maxWidth: 520 }}>
              Il <strong style={{ color: '#fff', fontWeight: 600 }}>Simulatore</strong> calcola il costo certificato
              di un acquisto prima che diventi dichiarazione doganale. Confronta scenari per
              fornitore, paese, peso e modalità di calcolo. Tutto resta in storico per
              ripescare quando serve.
            </p>
          </div>

          {/* Mockup screenshots from the real product — two stacked panels */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{
              background: '#fff', borderRadius: 14,
              border: '1px solid rgba(255,255,255,0.08)',
              boxShadow: '0 24px 60px -20px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.30)',
              overflow: 'hidden'
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '11px 16px', borderBottom: '1px solid var(--line-soft)',
                background: 'var(--bg-soft)'
              }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fda4af' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fcd34d' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#86efac' }} />
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', marginLeft: 8 }}>
                  cbamy.cmconsulting.app / simulatore
                </span>
              </div>
              <img src="assets/sim-form.png" alt="Simulatore CBAM" style={{ display: 'block', width: '100%', height: 'auto' }} />
            </div>

            <div style={{
              background: '#fff', borderRadius: 14,
              border: '1px solid rgba(255,255,255,0.08)',
              boxShadow: '0 24px 60px -20px rgba(0,0,0,0.45), 0 8px 24px -8px rgba(0,0,0,0.30)',
              overflow: 'hidden'
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '11px 16px', borderBottom: '1px solid var(--line-soft)',
                background: 'var(--bg-soft)'
              }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fda4af' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fcd34d' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#86efac' }} />
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', marginLeft: 8 }}>
                  cbamy.cmconsulting.app / simulatore / storico
                </span>
              </div>
              <img src="assets/sim-storico-detail.png" alt="Storico simulazioni con dettaglio del calcolo" style={{ display: 'block', width: '100%', height: 'auto' }} />
            </div>
          </div>

        </div>
      </section>

      {/* ── PER CHI ──────────────────────────────────────────────────────── */}
      <section id="per-chi" style={{ padding: '80px 64px', background: 'var(--bg-soft)', borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ maxWidth: 760, marginBottom: 48 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', color: 'var(--accent-ink)', marginBottom: 14 }}>
              PER CHI È
            </div>
            <h2 className="serif" style={{ margin: 0, fontSize: 38, lineHeight: 1.15, color: 'var(--ink)', fontWeight: 500 }}>PMI italiane sopra o vicine alla soglia 50 t/anno.

            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
            { ic: '⚙️', t: 'Responsabile dogana', d: 'Vuole un numero subito, prima che l\'anno chiuda. CBAMy gli dà la fotografia trimestrale aggiornata ad ogni dichiarazione importata.' },
            { ic: '€', t: 'CFO / Ufficio finanza', d: 'Vuole sapere quanto vale l\'esposizione CBAM nel prossimo budget. Vede il costo stimato anno-su-anno, con scenari Default vs Reali.' },
            { ic: '📦', t: 'Ufficio import', d: 'Deve dire al fornitore "i tuoi dati reali fanno questa differenza in €". CBAMy mostra il delta riga per riga, pronto da inoltrare.' }].
            map((p, i) =>
            <div key={i} style={{
              padding: 28, borderRadius: 12, border: '1px solid var(--line)', background: '#fff'
            }}>
                <h3 className="serif" style={{ margin: 0, fontSize: 18, color: 'var(--ink)', fontWeight: 600 }}>{p.t}</h3>
                <p style={{ margin: '10px 0 0', fontSize: 13.5, lineHeight: 1.6, color: 'var(--ink-soft)' }}>{p.d}</p>
              </div>
            )}
          </div>

          <div style={{
            marginTop: 32, padding: '14px 20px', background: 'var(--accent-bg)', border: '1px solid var(--teal-200)',
            borderRadius: 10, fontSize: 13, color: 'var(--accent-ink)',
            display: 'flex', alignItems: 'center', gap: 10
          }}>
            <IconInfo size={14} color="var(--accent)" />
            <span><strong>Settori coperti:</strong> acciaio, alluminio, cemento, fertilizzanti, idrogeno, energia elettrica.</span>
            <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--ink-mute)' }}>Reg. UE 2023/956 — Allegato I</span>
          </div>
        </div>
      </section>

      {/* ── FAQ ──────────────────────────────────────────────────────────── */}
      <section id="faq" style={{ padding: '80px 64px', background: '#fff', borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <h2 className="serif" style={{ margin: 0, fontSize: 36, lineHeight: 1.15, color: 'var(--ink)', fontWeight: 500, textAlign: 'center', marginBottom: 40 }}>
            Domande frequenti
          </h2>
          <FAQItem defaultOpen q="Dati reali del fornitore tardi: cosa succede?" a={
          <>Calcoliamo subito con i Default UE. È un tetto massimo. Quando arrivano i dati reali, ricalcoli la riga.</>
          } />
          <FAQItem q="Quanto è diverso da Excel?" a={
          <>Excel non conosce i benchmark ETS 2026, i Default Values per paese, il prezzo certificato trimestrale ufficiale e la lista di voci doganali soggette inoltre sei obbligato ad inserire manualmente riga per riga. CBAMy aggiorna  tutto automaticamente.</>
          } />
          <FAQItem q="Cosa cambia nel periodo definitivo 2026+?" a={
          <>Fattore di riduzione 97,5% (in fase iniziale, decrescente nei prossimi anni), obbligo certificati, prezzo certificato pubblicato trimestralmente. Necessità di sapere quanto costa il CBAM.</>
          } />
        </div>
      </section>

      {/* ── CTA FINALE ───────────────────────────────────────────────────── */}
      <section id="cta" style={{ padding: '88px 64px', background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
        <div style={{
          maxWidth: 1100, margin: '0 auto', padding: '56px 56px',
          background: 'linear-gradient(135deg, var(--teal-50) 0%, #ffffff 70%)',
          border: '1px solid var(--teal-200)', borderRadius: 18,
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center'
        }}>
          <div>
            <h2 className="serif" style={{ margin: 0, fontSize: 40, lineHeight: 1.1, color: 'var(--ink)', fontWeight: 500 }}>Una demo di 15 minuti sul tuo PDF reale.

            </h2>
            <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, maxWidth: 540 }}>Mandaci un prospetto di sintesi di una dichiarazione doganale: te lo restituiamo con il costo CBAM stimato e la formula dettagliata per ogni riga.


            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href="mailto:cbamy@cmconsulting.app?subject=Richiesta%20demo%20CBAMy" style={{ ...btnPrimary('lg'), width: '100%', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, boxSizing: 'border-box' }}>
              Richiedi demo <IconArrowRight size={14} />
            </a>
            <a href="mailto:cbamy@cmconsulting.app" style={{ ...btnGhost('lg'), width: '100%', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#fff', boxSizing: 'border-box' }}>
              cbamy@cmconsulting.app
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>);

}

// ─── Hero PDF demo (animated, ~10s loop) ────────────────────────────────────
function PdfDemo() {
  const { phase, progress } = useFakeUploadCycle();
  // phase: idle | upload | parse | done
  const stepIdx = { idle: 0, upload: 1, parse: 2, done: 3 }[phase];

  return (
    <div style={{
      background: '#fff', borderRadius: 16, border: '1px solid var(--line)',
      boxShadow: 'var(--shadow-lg)', overflow: 'hidden', position: 'relative'
    }}>
      {/* Top bar */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 16px', borderBottom: '1px solid var(--line-soft)',
        background: 'var(--bg-soft)'
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fda4af' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fcd34d' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#86efac' }} />
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', marginLeft: 6 }}>
          cbamy.cmconsulting.app / nuova-dichiarazione
        </span>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            width: 7, height: 7, borderRadius: '50%',
            background: phase === 'done' ? 'var(--accent)' : '#fcd34d',
            boxShadow: phase === 'done' ? '0 0 0 4px rgba(13,148,136,.15)' : 'none',
            transition: 'all .3s'
          }} />
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-mute)' }}>
            {phase === 'done' ? 'pronto' : 'elaboro…'}
          </span>
        </div>
      </div>

      <div style={{ padding: 32, minHeight: 460, display: 'flex', flexDirection: 'column', gap: 24 }}>
        {/* Step indicator */}
        <div style={{ display: 'flex', gap: 6 }}>
          {['Carica', 'Estrai', 'Calcola', 'Pronto'].map((l, i) =>
          <div key={l} style={{ flex: 1 }}>
              <div style={{
              height: 4, borderRadius: 2,
              background: i <= stepIdx ? 'var(--accent)' : 'var(--slate-200)',
              transition: 'background .3s'
            }} />
              <div style={{ marginTop: 6, fontSize: 11, color: i <= stepIdx ? 'var(--ink-soft)' : 'var(--ink-dim)', fontWeight: i === stepIdx ? 600 : 400 }}>
                {l}
              </div>
            </div>
          )}
        </div>

        {/* Stage */}
        {phase === 'idle' &&
        <div style={{
          flex: 1, border: '2px dashed var(--slate-300)', borderRadius: 12,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14,
          background: 'var(--bg-soft)', padding: 32, textAlign: 'center'
        }}>
            <div style={{
            width: 56, height: 56, borderRadius: 12, background: '#fff', border: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'var(--shadow-sm)'
          }}>
              <IconUpload size={22} color="var(--accent)" />
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>Trascina qui il PDF ADM</div>
              <div style={{ marginTop: 4, fontSize: 12.5, color: 'var(--ink-mute)' }}>oppure clicca per selezionare · max 25 MB</div>
            </div>
          </div>
        }

        {(phase === 'upload' || phase === 'parse') &&
        <div style={{
          flex: 1, border: '1px solid var(--line)', borderRadius: 12,
          display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 14,
          background: 'var(--bg-soft)', padding: 24
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%' }}>
              <div style={{
              width: 40, height: 50, borderRadius: 4, background: '#fff', border: '1px solid var(--line)',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 6,
              fontSize: 8, fontWeight: 700, color: '#dc2626', position: 'relative'
            }}>
                PDF
                <span style={{ position: 'absolute', top: 0, right: 0, width: 10, height: 10, background: 'var(--bg-soft)', borderLeft: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  dichiarazione_q2_2026_demo.pdf
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 2 }}>
                  {phase === 'upload' ? `Upload ${Math.round(progress * 100)}%` : 'Parsing righe doganali…'}
                </div>
                <div style={{ marginTop: 8, height: 4, background: 'var(--slate-200)', borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{
                  width: `${progress * 100}%`, height: '100%', background: 'var(--accent)',
                  transition: 'width .15s linear'
                }} />
                </div>
              </div>
            </div>

            {phase === 'parse' &&
          <div style={{ width: '100%', marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--ink-soft)', lineHeight: 1.85 }}>
                <div>✓ EORI estratto: <span style={{ color: 'var(--ink)' }}>IT●●●●●●●●●●●</span></div>
                <div>✓ Articoli totali: <span style={{ color: 'var(--ink)' }}>8</span></div>
                <div style={{ opacity: progress > 0.4 ? 1 : 0, transition: 'opacity .3s' }}>
                  ✓ Match Allegato I: <span style={{ color: 'var(--accent-ink)' }}>3 righe CBAM</span>
                </div>
                <div style={{ opacity: progress > 0.7 ? 1 : 0, transition: 'opacity .3s' }}>
                  ✓ Default UE applicati · Q1 2026 · 75,36 €/cert.
                </div>
              </div>
          }
          </div>
        }

        {phase === 'done' &&
        <div style={{
          flex: 1, border: '1px solid var(--teal-200)', borderRadius: 12,
          background: 'linear-gradient(180deg, var(--accent-bg) 0%, #ffffff 60%)',
          padding: 24, display: 'flex', flexDirection: 'column', gap: 18,
          animation: 'cbamyFade .4s ease-out'
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <IconCheckCircle size={20} color="var(--accent)" />
              <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--accent-ink)' }}>Tutte le 3 righe calcolate</span>
              <span style={{ marginLeft: 'auto', fontSize: 11, padding: '3px 8px', borderRadius: 999, background: 'var(--accent-bg)', color: 'var(--accent-ink)', border: '1px solid var(--teal-200)' }}>
                Valori default
              </span>
            </div>
            <div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>Costo CBAM stimato</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
                <span className="num" style={{ fontSize: 56, lineHeight: 1, color: 'var(--ink)' }}>2.863<span style={{ color: 'var(--ink-mute)' }}>,</span>68</span>
                <span className="mono" style={{ fontSize: 14, color: 'var(--ink-mute)' }}>EUR</span>
              </div>
              <div style={{ display: 'flex', gap: 20, marginTop: 10, fontSize: 12, color: 'var(--ink-soft)' }}>
                <span className="mono">38 cert. · 75,36 €/cert.</span>
                <span className="mono">21,266542 tCO₂</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-soft)' }}>
              {[
            ['72179020', 'Fili di ferro non legati', '452,16 €'],
            ['73089098', 'Costruzioni e parti', '1.130,40 €'],
            ['73269098', 'Altri lavori ferro/acciaio', '75,36 €']].
            map(([cn, t, eur]) =>
            <div key={cn} style={{ display: 'flex', gap: 12, padding: '6px 10px', background: '#fff', borderRadius: 6, border: '1px solid var(--line-soft)' }}>
                  <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{cn}</span>
                  <span style={{ flex: 1, color: 'var(--ink-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</span>
                  <span className="num" style={{ color: 'var(--ink)' }}>{eur}</span>
                </div>
            )}
            </div>
          </div>
        }
      </div>

      <style>{`@keyframes cbamyFade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }`}</style>
    </div>);

}

// ─── Step visual cards ──────────────────────────────────────────────────────
function UploadCard() {
  return (
    <div style={{
      height: 120, border: '1.5px dashed var(--slate-300)', borderRadius: 10,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      background: '#fff'
    }}>
      <div style={{
        width: 36, height: 44, background: '#fff', border: '1px solid var(--slate-300)', borderRadius: 4,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 4,
        fontSize: 8, fontWeight: 700, color: '#dc2626'
      }}>PDF</div>
      <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>
        <div>Dichiarazione doganale</div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-dim)' }}>ADM.it · PDF</div>
      </div>
    </div>);

}
function ClassifyCard() {
  const rows = [
  { cn: '72179020', cbam: true, desc: 'Fili di ferro' },
  { cn: '84713000', cbam: false, desc: 'Computer portatile' },
  { cn: '73089098', cbam: true, desc: 'Strutture acciaio' },
  { cn: '94036010', cbam: false, desc: 'Mobili in legno' },
  { cn: '73269098', cbam: true, desc: 'Altri ferro/acciaio' }];

  return (
    <div style={{ height: 120, display: 'flex', flexDirection: 'column', gap: 4 }}>
      {rows.map((r) =>
      <div key={r.cn} style={{
        display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, padding: '4px 8px',
        borderRadius: 4, background: r.cbam ? 'var(--accent-bg)' : '#fff',
        border: `1px solid ${r.cbam ? 'var(--teal-200)' : 'var(--line)'}`
      }}>
          <span className="mono" style={{ fontWeight: 600, color: r.cbam ? 'var(--accent-ink)' : 'var(--ink-mute)' }}>{r.cn}</span>
          <span style={{ flex: 1, color: 'var(--ink-soft)' }}>{r.desc}</span>
          <span className="mono" style={{ fontSize: 9.5, color: r.cbam ? 'var(--accent-ink)' : 'var(--ink-dim)' }}>
            {r.cbam ? 'CBAM' : 'skip'}
          </span>
        </div>
      )}
    </div>);

}
function CalcCard() {
  return (
    <div style={{
      height: 120, background: '#fff', border: '1px solid var(--line)', borderRadius: 8, padding: 12,
      fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-soft)', lineHeight: 1.7
    }}>
      <div style={{ color: 'var(--ink-mute)', fontSize: 9.5, marginBottom: 4 }}>FORMULA · 72179020</div>
      <div>quantità  <span style={{ color: 'var(--ink)' }}>2,603 t</span></div>
      <div>× DV     <span style={{ color: 'var(--ink)' }}>3,4857 tCO₂/t</span></div>
      <div>− ETS bench × 97,5%</div>
      <div>× cert.  <span style={{ color: 'var(--ink)' }}>75,36 €</span></div>
      <div style={{ marginTop: 6, paddingTop: 6, borderTop: '1px solid var(--line-soft)' }}>
        = <span className="num" style={{ fontSize: 13, color: 'var(--ink)' }}>452,16 €</span>
      </div>
    </div>);

}

// ─── Dichiarazione preview ───────────────────────────────────────────────────
function DeclarationPreview({ highlightCN } = {}) {
  return (
    <div style={{
      border: '1px solid var(--line)', borderRadius: 14, background: '#fff',
      boxShadow: 'var(--shadow-md)', padding: '28px 28px 32px'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-mute)', marginBottom: 14 }}>
        <span>← Dichiarazioni</span>
      </div>
      <h3 className="serif" style={{ margin: 0, fontSize: 24, fontWeight: 600, color: 'var(--ink)' }}>
        Dichiarazione del 2 apr 2026
      </h3>
      <div className="mono" style={{ fontSize: 11.5, color: 'var(--ink-mute)', marginTop: 4 }}>26IT••••••••••••R2</div>
      <div style={{ marginTop: 4, fontSize: 12, color: 'var(--ink-soft)', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <span>EORI: <span className="mono">IT●●●●●●●●●●●</span></span>
        <span>Spedizione: <span className="mono">CN</span></span>
        <span>8 articoli · 3 CBAM</span>
      </div>

      <div style={{
        marginTop: 18, padding: '10px 14px', background: 'var(--accent-bg)',
        border: '1px solid var(--teal-200)', borderRadius: 8,
        display: 'flex', alignItems: 'center', gap: 10
      }}>
        <IconCheckCircle size={16} color="var(--accent)" />
        <span style={{ fontSize: 13, color: 'var(--accent-ink)', fontWeight: 500 }}>Tutte le 3 righe calcolate</span>
        <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 999, background: '#fff', color: 'var(--ink-soft)', border: '1px solid var(--line)' }}>Valori default</span>
      </div>

      <div style={{ marginTop: 18 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginBottom: 4 }}>Emissioni incorporate</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span className="num" style={{ fontSize: 30, color: 'var(--ink)' }}>21<span style={{ color: 'var(--ink-mute)' }}>,</span>266542</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>tCO₂</span>
        </div>
      </div>

      <div style={{ marginTop: 22, fontSize: 13, fontWeight: 500, color: 'var(--ink)', marginBottom: 12 }}>Righe CBAM (3)</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <DeclLine cn="72179020" kg="2603" eur="452,16" certs="6" highlight={highlightCN === '72179020'}
        desc="Fili di ferro o di acciai non legati-altri-contenenti, in peso, meno di 0,25% di carbonio…" />
        <DeclLine cn="73089098" kg="2880" eur="1.130,40" certs="15" highlight={highlightCN === '73089098'}
        desc="Costruzioni e parti di costruzioni (per esempio ponti, porte di cariche, torri, piloni…)" />
        <DeclLine cn="73269098" kg="418" eur="75,36" certs="1" highlight={highlightCN === '73269098'}
        desc="Altri lavori di ferro o acciaio-altri-altri-altri-altri" />
      </div>
    </div>);

}

Object.assign(window, { VariantB, PdfDemo, DeclarationPreview, DashboardNoSidebar });

// ─── Dashboard senza sidebar — pseudonimizzato per landing ────────────────
function DashboardNoSidebar() {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--line)', borderRadius: 14,
      boxShadow: '0 24px 60px -20px rgba(15,23,42,0.18), 0 8px 24px -8px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04)',
      overflow: 'hidden'
    }}>
      {/* Window chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '11px 16px', borderBottom: '1px solid var(--line-soft)',
        background: 'var(--bg-soft)'
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fda4af' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#fcd34d' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#86efac' }} />
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', marginLeft: 8 }}>
          cbamy.cmconsulting.app / dashboard
        </span>
      </div>

      <div style={{ padding: '36px 44px 48px', minWidth: 0 }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 30 }}>
          <div>
            <h3 className="serif" style={{ margin: 0, fontSize: 32, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.02em' }}>Dashboard</h3>
            <div style={{ marginTop: 4, fontSize: 13.5, color: 'var(--ink-mute)' }}>Panoramica CBAM 2026</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{
              padding: '8px 14px', border: '1px solid var(--line)', borderRadius: 7,
              fontSize: 13, color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 8,
              background: '#fff', cursor: 'default', userSelect: 'none'
            }}>
              <span className="mono">2026</span> <IconChevron size={13} color="var(--ink-mute)" />
            </div>
            <div style={{ ...btnPrimary('md'), display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'default', userSelect: 'none' }}>
              <IconPlus size={12} /> Importa
            </div>
          </div>
        </div>

        <SogliaBar value={32.4} max={50} sub="Sopra soglia in proiezione Q4 — calcolo CBAM attivo" />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48, marginTop: 36 }}>
          <KPI
            label="Certificati dovuti"
            value="142"
            unit="cert."
            sub="anno fiscale 2026" />
          
          <KPI
            label="Costo stimato"
            value={<>10.701<span style={{ color: 'var(--ink-mute)' }}>,</span>12</>}
            unit="EUR"
            sub="75,36 EUR/cert. · Q1 2026" />
          
          <KPI
            label="Emissioni incorporate"
            value={<>78<span style={{ color: 'var(--ink-mute)' }}>,</span>4</>}
            unit="tCO₂"
            sub="su 3 dichiarazioni" />
          
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 56, alignItems: 'start' }}>
          <Donut
            title="Contributo per categoria"
            subtitle="Emissioni per categoria merceologica"
            size={200} thickness={28}
            data={[
            { label: 'Acciaio', v: 64, color: 'var(--c-teal)' },
            { label: 'Alluminio', v: 22, color: 'var(--c-indigo)' },
            { label: 'Cemento', v: 9, color: 'var(--c-amber)' },
            { label: 'Fertilizzanti', v: 5, color: 'var(--c-lavender)' }]
            } />
          
          <Donut
            title="Contributo per fornitore"
            subtitle="Emissioni per esportatore"
            size={200} thickness={28}
            data={[
            { label: 'Fornitore A · CN', v: 58, color: 'var(--c-sky)' },
            { label: 'Fornitore B · TR', v: 24, color: 'var(--c-lavender)' },
            { label: 'Fornitore C · IN', v: 12, color: 'var(--c-rose)' },
            { label: 'Altri', v: 6, color: 'var(--slate-300)' }]
            } />
          
        </div>

        <div style={{ marginTop: 56 }}>
          <Bars
            title="Certificati per trimestre"
            subtitle="Distribuzione anno 2026"
            data={[
            { label: 'Q1 2026', v: 18 },
            { label: 'Q2 2026', v: 41 },
            { label: 'Q3 2026', v: 53 },
            { label: 'Q4 2026', v: 30, color: 'var(--slate-300)' }]
            }
            height={140} />
          
        </div>

        {/* Quarterly table — like a small ledger */}
        <div style={{ marginTop: 56 }}>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>Riepilogo trimestrale</div>
          <div style={{ marginTop: 4, fontSize: 12, color: 'var(--ink-mute)' }}>Valori cumulativi · acquisti CBAM importati</div>
          <div style={{
            marginTop: 18, border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden'
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1.1fr',
              padding: '10px 16px', background: 'var(--bg-soft)',
              fontSize: 11, fontWeight: 600, color: 'var(--ink-mute)',
              letterSpacing: '0.06em', textTransform: 'uppercase',
              borderBottom: '1px solid var(--line)'
            }}>
              <span>Trimestre</span>
              <span style={{ textAlign: 'right' }}>Tonnellate</span>
              <span style={{ textAlign: 'right' }}>tCO₂</span>
              <span style={{ textAlign: 'right' }}>Certificati</span>
              <span style={{ textAlign: 'right' }}>Costo stimato</span>
            </div>
            {[
            ['Q1 2026', '8,12', '9,98', '18', '1.356,48'],
            ['Q2 2026', '18,73', '22,76', '41', '3.089,76'],
            ['Q3 2026', '24,55', '29,42', '53', '3.994,08'],
            ['Q4 2026', '14,21', '16,24', '30', '2.260,80', true]].
            map(([q, t, co, c, e, proj]) =>
            <div key={q} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1.1fr',
              padding: '12px 16px', fontSize: 13, alignItems: 'baseline',
              background: '#fff', borderBottom: '1px solid var(--line-soft)'
            }}>
                <span style={{ color: 'var(--ink)', fontWeight: 500 }}>
                  {q} {proj && <span className="mono" style={{ marginLeft: 6, fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'var(--bg-muted)', color: 'var(--ink-mute)', fontWeight: 400 }}>proiezione</span>}
                </span>
                <span className="mono" style={{ textAlign: 'right', color: 'var(--ink-soft)' }}>{t}</span>
                <span className="mono" style={{ textAlign: 'right', color: 'var(--ink-soft)' }}>{co}</span>
                <span className="mono" style={{ textAlign: 'right', color: 'var(--ink-soft)' }}>{c}</span>
                <span className="num" style={{ textAlign: 'right', color: 'var(--ink)', fontSize: 14 }}>{e} <span className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>€</span></span>
              </div>
            )}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1.1fr',
              padding: '14px 16px', fontSize: 13, alignItems: 'baseline',
              background: 'var(--bg-soft)'
            }}>
              <span style={{ color: 'var(--ink)', fontWeight: 600 }}>Anno 2026</span>
              <span className="mono" style={{ textAlign: 'right', color: 'var(--ink)' }}>65,61</span>
              <span className="mono" style={{ textAlign: 'right', color: 'var(--ink)' }}>78,40</span>
              <span className="mono" style={{ textAlign: 'right', color: 'var(--ink)' }}>142</span>
              <span className="num" style={{ textAlign: 'right', color: 'var(--ink)', fontSize: 16, fontWeight: 600 }}>10.701,12 <span className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', fontWeight: 400 }}>€</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>);

}