/* declarer2035 — middle sections (solution / honest / features) */

const CASES_2035 = ['AA', 'BS', 'BV', 'BH', 'BJ', 'BK', 'BM', 'BN', 'CP'];

const Solution = () => {
  const [over, setOver] = React.useState(false);
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % 4), 1800);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="block" id="solution">
      <div className="wrap">
        <div className="section-label">
          <span className="num">02</span>
          <span>La solution</span>
          <span className="line"></span>
        </div>
        <h2 className="section-title">Un seul outil. Trois entrées. Neuf cases en sortie.</h2>
        <p className="section-intro">
          declarer2035 tourne dans votre navigateur, en <code className="mono" style={{background:'var(--bg-2)', padding:'1px 6px', border:'1px solid var(--border)', borderRadius:4, fontSize:13}}>file://</code>.
          Aucun serveur. Aucun envoi réseau. Vous fermez l'onglet, l'outil disparaît avec.
        </p>

        <div className="flow">
          <div className="flow-node">
            <h3>Entrée — Vos fichiers</h3>
            <ul>
              <li><span className="dot">·</span> mensoft-2025.pdf</li>
              <li><span className="dot">·</span> urssaf-2025.pdf</li>
              <li><span className="dot">·</span> fec-2025.txt</li>
            </ul>
            <div className="mono dim" style={{fontSize:11, marginTop:'auto'}}>balance · appel · écritures</div>
          </div>
          <div className="flow-arrow mono">━━▶</div>
          <div className="flow-node is-process">
            <h3>declarer2035 · v0.1</h3>
            <div className="flow-engine">
              {['parse pdf...', 'parse fec...', 'compute...', 'cases ✓'][step]}
              <span className="blink"></span>
            </div>
            <div className="mono dim" style={{fontSize:11, marginTop:'auto'}}>
              file:// · 100 % navigateur<br/>
              0 octet sortant
            </div>
          </div>
          <div className="flow-arrow mono">━━▶</div>
          <div className="flow-node">
            <h3>Sortie — 9 cases 2035-A</h3>
            <div className="cases">
              {CASES_2035.map(c => <div key={c} className="case-pill on">{c}</div>)}
            </div>
            <div className="mono dim" style={{fontSize:11, marginTop:'auto'}}>au centime · prêtes à recopier</div>
          </div>
        </div>

        <div
          className={"dropzone-demo " + (over ? "over" : "")}
          onDragOver={e => { e.preventDefault(); setOver(true); }}
          onDragLeave={() => setOver(false)}
          onDrop={e => { e.preventDefault(); setOver(false); }}
          onClick={() => setOver(o => !o)}
        >
          <div className="icon mono">⌒</div>
          <div className="label">{over ? "Relâchez pour reconnaissance auto." : "Glissez vos fichiers ici"} <span className="dim mono">— Mensoft PDF · URSSAF PDF · FEC .TXT</span></div>
          <div className="hint">ou <span className="green">Parcourir…</span> — sélection multiple avec Ctrl+clic</div>
        </div>

        <div className="recognized-grid">
          <div className="rec-card">
            <span className="check mono">✓</span>
            <div>
              <div className="title">Mensoft 2025</div>
              <div className="v on">recettes 38 420,50 €</div>
            </div>
          </div>
          <div className="rec-card">
            <span className="check mono">✓</span>
            <div>
              <div className="title">URSSAF 2025</div>
              <div className="v on">Cot.N 8 240 € · Régul N-1 3 180 €</div>
            </div>
          </div>
          <div className="rec-card idle">
            <span className="check mono">○</span>
            <div>
              <div className="title">FEC 2025</div>
              <div className="v">optionnel · .txt Mensoft Oxygène</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Honest = () => (
  <section className="block" id="honest">
    <div className="wrap">
      <div className="section-label">
        <span className="num">03</span>
        <span>Pourquoi c'est gratuit en bêta</span>
        <span className="line"></span>
      </div>
      <h2 className="section-title">Validé sur ma propre 2035. À valider sur la vôtre.</h2>

      <div className="honest">
        <div className="panel">
          <p>
            Cet outil a été développé pour mon usage personnel — moniteur de ski BNC en Savoie,
            saturé de devoir choisir entre payer un comptable qui ne fait plus rien,
            ou laisser un SaaS aspirer mon compte bancaire.
          </p>
          <p>
            J'ai personnellement testé l'outil sur ma propre déclaration <span className="num">2025</span> (déjà déposée).
            Le résultat est tombé <strong>au centime près</strong> contre le bénéfice CP officiel.
          </p>
          <p>
            Avant de le commercialiser, je veux le valider sur d'autres profils BNC :
            kiné, ostéo, formateur, traducteur, consultant. La bêta est gratuite,
            sans engagement, sans CGV. <strong>En échange : votre retour honnête.</strong>
          </p>
          <div className="quote-meta">— Auteur · BNC libéral · Savoie</div>
        </div>

        <div className="calc-card">
          <div className="row-between" style={{paddingBottom:12, borderBottom:'1px solid var(--border)', marginBottom:8}}>
            <span className="dim mono" style={{fontSize:11, letterSpacing:'0.08em'}}>2035-A · MILLÉSIME 2025</span>
            <span className="green mono" style={{fontSize:11}}>● calculé</span>
          </div>
          <div className="row"><span className="label">AA — Recettes encaissées</span><span className="v">38 420,50</span></div>
          <div className="row"><span className="label">BH — Cotisations sociales</span><span className="v">11 420,00</span></div>
          <div className="row"><span className="label">BJ — Frais de véhicule</span><span className="v">2 116,00</span></div>
          <div className="row"><span className="label">BK — Charges sociales perso</span><span className="v">880,00</span></div>
          <div className="row"><span className="label">BM — Frais divers</span><span className="v">1 820,00</span></div>
          <div className="row"><span className="label">CP — Bénéfice / Résultat</span><span className="v green">22 184,50</span></div>
          <div className="delta mono">Δ vs déclaration officielle : <strong>0,00 €</strong></div>
        </div>
      </div>
    </div>
  </section>
);

const FEATURES_IN = [
  { t: 'Drag-and-drop Mensoft', d: 'balance comptable PDF · reconnaissance auto', tag: 'pdf' },
  { t: 'Drag-and-drop URSSAF', d: 'PDF Régul N-1 · Appel N · annexes', tag: 'pdf' },
  { t: 'Drag-and-drop FEC', d: '.txt — format légal opposable à l\'administration', tag: 'fec' },
  { t: 'Calcul des 9 cases 2035-A', d: 'AA · BS · BV · BH · BJ · BK · BM · BN · CP', tag: 'auto' },
  { t: 'Vue popup côte à côte', d: 'avec impots.gouv.fr / Teledec — recopie en 2 minutes', tag: 'ui' },
  { t: 'Aucune donnée envoyée nulle part', d: 'tout reste en mémoire dans votre navigateur', tag: '100% local' },
];

const FEATURES_OUT = [
  { t: 'Cadre 8 — RBS 2026 (DE/DB/DC/DD)', d: 'en cours d\'implémentation', tag: 'q3 2026' },
  { t: 'Installeur Windows automatique', d: 'pour l\'instant : un .zip à dézipper', tag: 'q3 2026' },
  { t: 'Documentation utilisateur', d: 'rédaction en cours', tag: 'q4 2026' },
  { t: 'Tutoriels vidéo', d: 'prévus pour la V1.0', tag: 'v1.0' },
];

const Features = () => (
  <section className="block" id="features">
    <div className="wrap">
      <div className="section-label">
        <span className="num">04</span>
        <span>Inclus / Pas encore</span>
        <span className="line"></span>
      </div>
      <h2 className="section-title">Ce qui marche aujourd'hui — et ce qui arrive.</h2>
      <p className="section-intro">
        Honnête, sans fioritures. Si c'est cassé ou manquant, c'est dit. Si ça marche, c'est testé sur ma propre déclaration.
      </p>

      <div style={{display:'grid', gridTemplateColumns:'1fr', gap: 32}}>
        <div>
          <div className="mono" style={{fontSize:12, color:'var(--green)', letterSpacing:'0.08em', marginBottom:14, textTransform:'uppercase'}}>● Inclus dans la bêta v0.1</div>
          <div className="feature-list">
            {FEATURES_IN.map((f, i) => (
              <div className="item" key={i}>
                <span className="check mono">✓</span>
                <div style={{flex:1}}>
                  <div className="title">{f.t}</div>
                  <div className="desc">{f.d}</div>
                </div>
                <span className="mono dim" style={{fontSize:10, padding:'2px 8px', border:'1px solid var(--border)', borderRadius:999, alignSelf:'center'}}>{f.tag}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="mono" style={{fontSize:12, color:'var(--text-3)', letterSpacing:'0.08em', marginBottom:14, textTransform:'uppercase'}}>○ Pas encore là</div>
          <div className="feature-list">
            {FEATURES_OUT.map((f, i) => (
              <div className="item todo" key={i}>
                <span className="check mono todo">○</span>
                <div style={{flex:1}}>
                  <div className="title">{f.t}</div>
                  <div className="desc">{f.d}</div>
                </div>
                <span className="mono dim" style={{fontSize:10, padding:'2px 8px', border:'1px solid var(--border)', borderRadius:999, alignSelf:'center'}}>{f.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Solution, Honest, Features });