// BatiSpot — Hero + Form
const Hero = ({ submitted, onSubmit }) => (
  <section id="hero" className="bs-hero">
    <div className="bs-hero-inner">
      <div className="bs-hero-text">
        <div className="bs-eyebrow">Plateforme vérifiée — artisans certifiés</div>
        <h1>Vos travaux entre<br/>de <em>bonnes mains</em></h1>
        <p>Décrivez votre projet, recevez des devis d'artisans vérifiés près de chez vous et suivez votre chantier en temps réel depuis votre téléphone.</p>
        <div className="bs-hero-trust">
          {[
            "Artisans vérifiés — KBIS, RC Pro, Décennale",
            "Devis gratuit, sans engagement",
            "Réponse sous 24h dans votre département",
            "Suivi chantier par photos dans l'application",
            "Coffre-fort numérique — devis & factures",
          ].map((t,i)=>(
            <div key={i} className="trust-item"><div className="trust-check">✓</div>{t}</div>
          ))}
        </div>
        <div className="bs-hero-stats">
          <div className="stat"><span className="num">0 €</span><span className="lbl">Service gratuit</span></div>
          <div className="stat"><span className="num">&lt; 24h</span><span className="lbl">Premiers devis</span></div>
          <div className="stat"><span className="num">260+</span><span className="lbl">Guides experts</span></div>
        </div>
      </div>
      <FormCard submitted={submitted} onSubmit={onSubmit} />
    </div>
  </section>
);

const FormCard = ({ submitted, onSubmit }) => {
  const [data, setData] = React.useState({ prenom:"", nom:"", email:"", tel:"", type:"", cp:"", budget:"", desc:"" });
  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
  return (
    <div className="form-card" id="devis">
      <div className="form-card-header">
        <div className="pulse"><span></span>Artisans en ligne · Île-de-France</div>
        <h2>Déposez votre projet gratuitement</h2>
        <p>Recevez vos premiers devis sous 24h</p>
      </div>
      {submitted ? (
        <div style={{background:"var(--g-soft)",color:"var(--g1)",border:"1.5px solid rgba(76,175,130,0.3)",padding:"1rem",borderRadius:10,textAlign:"center",fontWeight:800,fontSize:".95rem"}}>
          ✓ Parfait ! Un expert vous contacte sous 24h.
        </div>
      ) : (
        <form onSubmit={(e)=>{e.preventDefault();onSubmit(data)}}>
          <div className="form-row">
            <div className="fg"><label>Prénom *</label><input value={data.prenom} onChange={set("prenom")} placeholder="Jean" required/></div>
            <div className="fg"><label>Nom *</label><input value={data.nom} onChange={set("nom")} placeholder="Dupont" required/></div>
          </div>
          <div className="fg"><label>Email *</label><input type="email" value={data.email} onChange={set("email")} placeholder="jean@email.com" required/></div>
          <div className="fg"><label>Téléphone *</label><input type="tel" value={data.tel} onChange={set("tel")} placeholder="06 00 00 00 00" required/></div>
          <div className="fg">
            <label>Type de travaux *</label>
            <select value={data.type} onChange={set("type")} required>
              <option value="">— Choisir votre projet —</option>
              <option>Rénovation complète</option>
              <option>Plomberie</option>
              <option>Salle de bain</option>
              <option>Électricité</option>
              <option>Cuisine (pose)</option>
              <option>Peinture</option>
              <option>Isolation</option>
              <option>Fuite d'eau</option>
              <option>Autre</option>
            </select>
          </div>
          <div className="form-row">
            <div className="fg"><label>Code postal *</label><input value={data.cp} onChange={set("cp")} placeholder="75001" maxLength="5" required/></div>
            <div className="fg">
              <label>Budget estimé</label>
              <select value={data.budget} onChange={set("budget")}>
                <option value="">— Fourchette —</option>
                <option>Moins de 1 000 €</option>
                <option>1 000 – 5 000 €</option>
                <option>5 000 – 15 000 €</option>
                <option>15 000 – 50 000 €</option>
                <option>Plus de 50 000 €</option>
              </select>
            </div>
          </div>
          <div className="fg"><label>Décrivez votre projet</label><textarea value={data.desc} onChange={set("desc")} placeholder="Superficie, état actuel, délai souhaité…"/></div>
          <button type="submit" className="btn-submit">Recevoir mes devis gratuits →</button>
          <p className="form-note"><Icon name="lock" size={12} stroke={2.5}/> &nbsp;Données sécurisées · Aucun engagement · Gratuit</p>
        </form>
      )}
    </div>
  );
};

Object.assign(window, { Hero, FormCard });