/* declarer2035 — bottom sections (roadmap / contact / footer) + app shell */

const Roadmap = () => (
  <section className="block" id="roadmap">
    <div className="wrap">
      <div className="section-label">
        <span className="num">05</span>
        <span>Roadmap</span>
        <span className="line"></span>
      </div>
      <h2 className="section-title">Trois jalons. Pas de promesse en l'air.</h2>

      <div className="roadmap">
        <div className="roadmap-track">
          <div className="rm-step now">
            <div className="marker"></div>
            <div className="v">V0.1 · MAI 2026</div>
            <h4>Bêta gratuite</h4>
            <p>Calcul 2035-A complet (cadres 1–7), saison fiscale 2025, drag-drop Mensoft + URSSAF + FEC.</p>
            <span className="you-here">● Vous êtes ici</span>
          </div>
          <div className="rm-step">
            <div className="marker"></div>
            <div className="v">V1.0 · AUTOMNE 2026</div>
            <h4>Version stable</h4>
            <p>Achat unique <strong style={{color:'var(--text)'}}>79 € HT</strong> — couvre le millésime de l'année. Maintenance annuelle optionnelle <strong style={{color:'var(--text)'}}>29 € HT</strong> pour accéder aux nouveaux millésimes. Installeur Windows, doc complète, support email.</p>
          </div>
          <div className="rm-step">
            <div className="marker"></div>
            <div className="v">V1.1 · JANVIER 2027</div>
            <h4>Millésime 2026</h4>
            <p>Cadre 8 RBS 2026 (cases DE/DB/DC/DD). Prêt pour la déclaration de printemps 2027.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Contact = () => {
  const [email, setEmail] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [honeypot, setHoneypot] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (honeypot) { setSent(true); return; }
    if (!email.includes('@')) { setErr('Email invalide.'); return; }
    if (msg.trim().length < 10) { setErr('Merci d\'être un peu plus précis (10 caractères mini).'); return; }
    setErr('');
    setLoading(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, message: msg, website: honeypot }),
      });
      const data = await res.json();
      if (res.ok) {
        setSent(true);
      } else {
        setErr(data.error || "Erreur lors de l'envoi.");
      }
    } catch {
      setErr('Erreur réseau. Réessayez ou écrivez directement à contact@declarer2035.fr.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="block" id="contact">
      <div className="wrap">
        <div className="section-label">
          <span className="num">06</span>
          <span>Contact / Retour</span>
          <span className="line"></span>
        </div>
        <h2 className="section-title">Vous avez testé ? Dites-moi.</h2>
        <p className="section-intro">
          Ce qui marche, ce qui plante, ce qui manque, ce qui vous fait dire « ah non, là c'est pas pour moi ».
          Je lis tout, je réponds à tout. Pas de mailing list, pas de relance, pas de pixel de tracking.
        </p>

        <div className="contact">
          <form onSubmit={submit} aria-label="Formulaire de retour">
            <div className="field">
              <label htmlFor="email">Email</label>
              <input id="email" type="email" placeholder="vous@cabinet.fr"
                value={email} onChange={e => setEmail(e.target.value)} required />
            </div>
            <div className="field">
              <label htmlFor="msg">Votre retour</label>
              <textarea id="msg" rows={6} placeholder="Profil BNC + ce que vous avez testé + ce qui a marché ou pas."
                value={msg} onChange={e => setMsg(e.target.value)} required />
            </div>
            <input type="text" name="website" value={honeypot} onChange={e => setHoneypot(e.target.value)}
              tabIndex={-1} autoComplete="off" aria-hidden="true"
              style={{position:'absolute',left:'-9999px',top:'auto',width:1,height:1,overflow:'hidden'}} />
            {err && (
              <div className="toast" style={{background:'rgba(239,68,68,0.08)', borderColor:'rgba(239,68,68,0.3)', color:'#f87171'}}>
                {err}{' — '}
                <a href={`mailto:contact@declarer2035.fr?subject=${encodeURIComponent('[declarer2035] Retour bêta')}&body=${encodeURIComponent(msg)}`}
                   style={{color:'#f87171',textDecoration:'underline'}}>écrire directement ↗</a>
              </div>
            )}
            {sent
              ? <div className="toast">✓ Reçu. Réponse sous 48 h ouvrées.</div>
              : <button type="submit" disabled={loading} className="btn btn-primary" style={{marginTop:6}}>
                  {loading ? 'Envoi…' : <React.Fragment>Envoyer le retour <span style={{opacity:0.6}}>↵</span></React.Fragment>}
                </button>
            }
          </form>

          <div className="contact-side">
            <h3>Autres canaux</h3>
            <p>Si vous préférez court-circuiter le formulaire :</p>
            <div className="link-row">
              <span className="key">mailto</span>
              <a href="mailto:contact@declarer2035.fr">contact@declarer2035.fr</a>
            </div>
            <div className="link-row">
              <span className="key">github</span>
              <a href="#">github.com/declarer2035/declarer2035</a>
            </div>
            <div className="link-row">
              <span className="key">issues</span>
              <a href="#">github.com/.../issues</a>
            </div>
            <p className="dim mono" style={{fontSize:11, marginTop:18, lineHeight:1.6}}>
              SLA bêta : réponse sous 48 h ouvrées.<br/>
              Auteur unique, pas une équipe support.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="wrap">
      <div className="top">
        <div>
          <span className="green">●</span> declarer2035.fr
          <span style={{color:'var(--border-strong)', margin:'0 8px'}}>·</span>
          Bêta gratuite v0.1
          <span style={{color:'var(--border-strong)', margin:'0 8px'}}>·</span>
          2026
        </div>
        <div style={{display:'flex', gap:14}}>
          <a href="#contact" className="dim">Contact</a>
          <a href="#download" className="dim">GitHub</a>
          <a href="#roadmap" className="dim">Roadmap</a>
        </div>
      </div>
      <p className="legal">
        Outil informatique non substituable à un avis professionnel.
        L'utilisateur est seul responsable de la vérification des résultats produits par declarer2035
        et de la transmission de sa déclaration à l'administration fiscale.
        declarer2035 ne stocke, ne transmet, ni ne traite aucune donnée fiscale en dehors du navigateur de l'utilisateur.
      </p>
      <p className="legal mono" style={{marginTop:14, fontSize:11, color:'var(--text-3)'}}>
        $ build 2026.05.01 · git@a8f3c2d · made in Savoie
      </p>
    </div>
  </footer>
);

/* TWEAKS */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "density": "regular"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.dataset.accent = tweaks.accent;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.accent, tweaks.density]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <Honest />
        <Features />
        <Roadmap />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={[
              { value: 'green', label: 'Vert (terminal)' },
              { value: 'cyan',  label: 'Cyan' },
              { value: 'amber', label: 'Ambre' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Densité verticale">
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'regular', label: 'Standard' },
              { value: 'airy',    label: 'Aéré' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);