/* declarer2035 — section components (top half of page) */

const Header = () => (
  <header className="site-header">
    <div className="wrap">
      <div className="row">
        <div className="brand">
          <span className="brand-name mono">declarer<span className="accent">2035</span></span>
          <span className="brand-sep">/</span>
          <span className="brand-sub mono">déclaration BNC 2035-A</span>
        </div>
        <div className="nav-links">
          <span className="live-badge">
            <span className="live-dot"></span>
            BÊTA OUVERTE
          </span>
          <a className="nav-link mono" href="#contact">Contact</a>
          <a className="nav-link mono" href="#download" aria-label="GitHub">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
            GitHub
          </a>
        </div>
      </div>
    </div>
  </header>
);

const ParrainBlock = () => {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText('XFBLBF');
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="parrain-card">
      <div className="parrain-card-header">
        <span className="parrain-card-title">30 € de réduction sur Teledec</span>
        <a href="https://www.teledec.fr" target="_blank" rel="noopener noreferrer"
           className="parrain-card-link">Aller sur teledec.fr →</a>
      </div>
      <div className="parrain-card-body">
        <code className="parrain-card-code" onClick={handleCopy} title="Cliquer pour copier">
          XFBLBF
        </code>
        <button className="btn btn-sm parrain-copy-btn" onClick={handleCopy}>
          {copied ? '✓ Copié' : (
            <><svg width="12" height="12" viewBox="0 0 16 16" fill="none"
                  stroke="currentColor" strokeWidth="2">
                <rect x="5" y="5" width="9" height="9" rx="1"/>
                <path d="M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1"/>
              </svg> Copier</>
          )}
        </button>
      </div>
      <div className="parrain-card-footer">
        valable jusqu'au 31/12/2027 · à entrer lors de l'inscription sur Teledec
      </div>
    </div>
  );
};

const Hero = () => (
  <section className="hero">
    <div className="wrap">
      <div className="hero-eyebrow">
        <span className="tag">v0.1</span>
        <span>· Outil informatique BNC déclaration contrôlée · Saison fiscale 2025</span>
      </div>
      <h1>
        Votre 2035 BNC.<br/>
        Calculée <span className="green">en local.</span><br/>
        <span className="strike">Sans expert-comptable.</span>
      </h1>
      <p className="lede">
        Glissez votre balance comptable Mensoft, votre PDF URSSAF, ou votre <code>FEC.txt</code>.
        Récupérez les 9 cases du formulaire <strong>2035-A</strong>. Recopiez sur <code>impots.gouv.fr</code> ou <a href="https://teledec.fr" target="_blank" rel="noopener noreferrer" className="ext-link">Teledec</a><span style={{color:'#4ade80', fontSize:'0.8em', whiteSpace:'nowrap'}}> (-30 € avec code parrain <code>XFBLBF</code>)</span>. C'est tout.
      </p>
      <div className="hero-cta">
        <a href="outil-declarer2035-v0.2.zip" download className="btn btn-primary">
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 1v10m0 0l-4-4m4 4l4-4M2 14h12"/></svg>
          Télécharger la bêta gratuite
          <span style={{opacity:0.6, fontWeight: 400}}>(.zip · 421 Ko)</span>
        </a>
        <a href="#download" className="btn btn-ghost">
          Voir le code sur GitHub
          <span style={{opacity:0.5}}>→</span>
        </a>
      </div>
      <div className="hero-meta">
        v0.1 <span className="sep">·</span>
        Windows / macOS / Linux <span className="sep">·</span>
        Chrome / Firefox <span className="sep">·</span>
        Aucune installation <span className="sep">·</span>
        <span className="green">100 % local</span>
      </div>

      <div className="terminal">
        <div className="head">
          <div className="dots"><i className="dot"></i><i className="dot"></i><i className="dot"></i></div>
          <span>~/declarer2035 — bash — saison 2025</span>
        </div>
        <div className="body">
          <div><span className="prompt">$</span> <span className="cmd">declarer2035 --in ./mensoft-2025.pdf ./urssaf-2025.pdf ./fec-2025.txt</span></div>
          <div className="out"><span className="ok">✓</span> Mensoft 2025 reconnu — recettes <span className="ok">38 420,50 €</span></div>
          <div className="out"><span className="ok">✓</span> URSSAF 2025 reconnu — Cot.N <span className="ok">8 240 €</span> · Régul N-1 <span className="ok">3 180 €</span></div>
          <div className="out"><span className="ok">✓</span> FEC 2025 reconnu — 1 247 écritures, équilibre <span className="ok">OK</span></div>
          <div className="out"><span className="info">→</span> Calcul cases 2035-A en cours...</div>
          <div className="out"><span className="ok">✓</span> AA · BS · BV · BH · BJ · BK · BM · BN · CP — <span className="ok">prêtes</span></div>
          <div className="out" style={{marginTop: 8}}><span className="info">i</span> Résultat fiscal : <span className="info">22 184,50 €</span> (écart vs réel : <span className="ok">0,00 €</span>)</div>
          <div><span className="prompt">$</span> <span style={{display:'inline-block', width:8, height:13, background:'#4ade80', verticalAlign:'text-bottom', animation:'blink 1s step-end infinite'}}></span></div>
        </div>
      </div>

      <ParrainBlock />
    </div>
  </section>
);

const Problem = () => (
  <section className="block" id="probleme">
    <div className="wrap">
      <div className="section-label">
        <span className="num">01</span>
        <span>Le problème</span>
        <span className="line"></span>
      </div>
      <h2 className="section-title">Trois mauvaises options pour faire sa 2035.</h2>
      <p className="section-intro">
        Vous êtes en BNC déclaration contrôlée. Tous les ans, vous devez sortir 9 cases d'un tableau Excel
        et les recopier sur impots.gouv.fr. Aujourd'hui, vous avez le choix entre :
      </p>

      <div className="card-grid-3">
        <div className="problem-card">
          <div className="x">€</div>
          <p>
            <strong>600 à 800 €/an</strong><br/>
            <span className="muted">chez un expert-comptable, pour une saisie qu'il ne fait même plus — c'est vous qui lui envoyez Mensoft.</span>
          </p>
          <div className="price mono">— solution traditionnelle</div>
        </div>
        <div className="problem-card">
          <div className="x">↻</div>
          <p>
            <strong>Un SaaS qui aspire vos comptes</strong><br/>
            <span className="muted">en continu (Indy, Pennylane, Macompta…). Synchro bancaire imposée, données chez l'éditeur, abonnement à vie.</span>
          </p>
          <div className="price mono">— solution moderne</div>
        </div>
        <div className="problem-card">
          <div className="x">×</div>
          <p>
            <strong>BNC Express, qui marchait</strong><br/>
            <span className="muted">installé en local, achat unique, pas de cloud — arrêté en juin 2024. Plus de mises à jour, plus de support.</span>
          </p>
          <div className="price mono">— solution disparue</div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Header, Hero, ParrainBlock, Problem });