// home.jsx — fintech-tone homepage with diagnostic question

const { useState: useStateH } = React;

const DIAG_ICONS = {
  'a-zero':
  <svg viewBox="0 0 40 40" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="40" height="40" rx="10" fill="var(--accent-soft)" />
      <path d="M20 30c0-8 0-10 0-10" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
      <path d="M20 20c-3-3-6-3-8-1" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
      <path d="M20 22c3-3 6-4 8-2" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
      <circle cx="20" cy="13" r="3" fill="var(--accent)" opacity="0.3" />
      <path d="M17 11c1-2 3-3 5-2" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" />
    </svg>,

  qualcosa:
  <svg viewBox="0 0 40 40" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="40" height="40" rx="10" fill="var(--accent-soft)" />
      <rect x="10" y="10" width="20" height="20" rx="3" stroke="var(--accent)" strokeWidth="1.8" />
      <path d="M13 24l5-5 4 3 5-7" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M24 14l4 0 0 4" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  'broker-tasse':
  <svg viewBox="0 0 40 40" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="40" height="40" rx="10" fill="var(--accent-soft)" />
      <rect x="12" y="9" width="16" height="22" rx="3" stroke="var(--accent)" strokeWidth="1.8" />
      <path d="M16 15h8M16 19h8M16 23h5" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
      <rect x="15" y="7" width="10" height="4" rx="2" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1.5" />
    </svg>,

  analisi:
  <svg viewBox="0 0 40 40" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="40" height="40" rx="10" fill="var(--accent-soft)" />
      <rect x="10" y="24" width="5" height="7" rx="1.5" fill="var(--accent)" opacity="0.5" />
      <rect x="17" y="18" width="5" height="13" rx="1.5" fill="var(--accent)" opacity="0.75" />
      <rect x="24" y="12" width="5" height="19" rx="1.5" fill="var(--accent)" />
    </svg>

};

function HomeView({ chapters, progressData, onNav, onArticle, onChapter, brandName, freeBrowse, pathStyle }) {
  const totalArticles = chapters.reduce((n, c) => n + c.articles.length, 0);
  const totalMinutes = chapters.reduce((n, c) => n + c.articles.reduce((m, a) => m + a.minutes, 0), 0);
  const [picked, setPicked] = useStateH(null);

  const diag = window.SF_DATA.DIAGNOSTIC;
  const suggested = picked ? diag.find((d) => d.id === picked) : null;

  return (
    <div className="home">
      {/* HERO */}
      <section className="hero">
        <div className="hero-eyebrow">
          <span className="dot-pulse" /> EDUCAZIONE FINANZIARIA · INDIPENDENTE
        </div>
        <h1 className="hero-title">
          Investire <em>consapevole</em><br />
          è capire per agire.
        </h1>
        <p className="hero-lede" style={{ fontWeight: "400" }}>Un percorso chiaro e gratuito per capire come funzionano davvero i mercati, i broker, la tassazione e la costruzione di un portafoglio. Per chi vuole partire informato, non convinto.



        </p>
        <div className="hero-cta">
          <button className="btn accent" onClick={() => onNav({ view: 'path' })}>
            Vai al percorso
            <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <button className="btn ghost" onClick={() => onNav({ view: 'library' })}>
            Sfoglia tutti gli articoli
          </button>
        </div>

        <div className="hero-stats">
          <div className="hero-stat"><span className="hs-val">{chapters.length}</span><span className="hs-lbl">CAPITOLI</span></div>
          <div className="hero-stat"><span className="hs-val">{totalArticles}</span><span className="hs-lbl">ARTICOLI</span></div>
          <div className="hero-stat"><span className="hs-val">{totalMinutes}<span style={{ fontSize: '14px', color: 'var(--ink-3)', marginLeft: '2px', fontWeight: 400 }}>min</span></span><span className="hs-lbl">LETTURA TOTALE</span></div>
          <div className="hero-stat"><span className="hs-val">€0</span><span className="hs-lbl">COSTO · NO ACCOUNT</span></div>
        </div>
      </section>

      {/* DIAGNOSTIC */}
      <section style={{ paddingBottom: 40 }}>
        <div className="diagnostic">
          <div className="diag-head">
            <span className="diag-eyebrow">IL TUO LIVELLO</span>
          </div>
          <h3 style={{ marginBottom: 24 }}>Da dove vuoi partire?</h3>
          <div className="diag-grid">
            {diag.map((d) =>
            <button key={d.id} className={`diag-card ${picked === d.id ? 'active' : ''}`} onClick={() => setPicked(d.id)}>
                <div className="diag-card-icon">{DIAG_ICONS[d.id]}</div>
                <h4>{d.label}</h4>
                <p>{d.detail}</p>
              </button>
            )}
          </div>
          {suggested &&
          <div className="diag-suggest">
              <div className="diag-suggest-meta">
                <span className="diag-suggest-eyebrow">Ti consigliamo di iniziare da</span>
                <h4>{chapters.find((c) => c.id === suggested.suggest.chapterId).title} → {chapters.find((c) => c.id === suggested.suggest.chapterId).articles.find((a) => a.id === suggested.suggest.articleId)?.title}</h4>
                <p>{suggested.suggest.why}</p>
              </div>
              <button className="btn" onClick={() => onArticle(suggested.suggest.articleId)}>
                Apri l'articolo
                <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
            </div>
          }
        </div>
      </section>

      {/* PATH PREVIEW */}
      <section className="section">
        <header className="section-head">
          <div>
            <span className="sh-eyebrow">IL PERCORSO</span>
            <h2>Diversi capitoli, in ordine, se vuoi.</h2>
          </div>
          <p className="sh-lede">
            Pensati per costruire concetto su concetto. Puoi seguirli in ordine o saltare a quello che ti serve.
          </p>
        </header>
        <PathRoadmap chapters={chapters} progressData={progressData} onArticle={onArticle} onChapter={onChapter} variant={pathStyle || 'roadmap'} />
      </section>

      {/* HOW IT WORKS */}
      <section className="section">
        <header className="section-head">
          <div>
            <span className="sh-eyebrow">COME FUNZIONA</span>
            <h2>Tre principi, niente trucchi.</h2>
          </div>
        </header>
        <div className="how-grid">
          <div className="how-card">
            <span className="how-num">01</span>
            <h3>Niente registrazione</h3>
            <p>Nessun account, nessuna email da lasciare. Il tuo progresso è salvato solo sul tuo dispositivo.</p>
          </div>
          <div className="how-card">
            <span className="how-num">02</span>
            <h3>Ordine consigliato, non imposto</h3>
            <p>Il percorso è progettato per costruire le idee una sull'altra, ma puoi leggere quello che vuoi quando vuoi.</p>
          </div>
          <div className="how-card">
            <span className="how-num">03</span>
            <h3>Contesto italiano</h3>
            <p>BTP, regime amministrato, broker disponibili in Italia. Quando il contesto cambia tutto, lo spieghiamo.</p>
          </div>
        </div>
      </section>

      <footer className="site-footer">
        <div>{brandName} · educazione finanziaria indipendente</div>
        <div>I contenuti hanno finalità esclusivamente divulgative ed educative. Non
            costituiscono consulenza finanziaria, raccomandazione di investimento,
            sollecitazione al pubblico risparmio o offerta di servizi finanziari.
            Le decisioni di investimento sono tue, ricordando che investire 
            comporta rischi, inclusa la possibile perdita totale del capitale. 
            I rendimenti passati non sono indicativi di quelli futuri.</div>
      </footer>
    </div>);

}

window.HomeView = HomeView;