// BatiSpot — Sections
const Pourquoi = () => (
  <section id="pourquoi" className="bs-pourquoi">
    <div className="section-inner">
      <div className="section-head">
        <span className="tag">Pourquoi BatiSpot</span>
        <h2>La sérénité, du début à la fin</h2>
        <p>BatiSpot cadre votre projet, sélectionne les bons artisans et vous accompagne jusqu'à la réception des travaux.</p>
      </div>
      <div className="pourquoi-grid">
        {[
          { i:"shield", t:"Artisans certifiés", d:"Chaque artisan est vérifié avant d'accéder à la plateforme : KBIS, assurance RC Pro, Décennale et pièce d'identité du gérant." },
          { i:"zap", t:"Réponse en 24h", d:"Votre demande est transmise aux artisans de votre secteur. Vous recevez vos premiers devis sous 24 heures." },
          { i:"phone", t:"Suivi en temps réel", d:"Votre artisan poste des photos à chaque étape clé du chantier directement dans l'application BatiSpot." },
          { i:"folder", t:"Coffre-fort numérique", d:"Tous vos documents — devis, factures, plans, attestations — sont centralisés et accessibles 24h/24." },
        ].map((c,i)=>(
          <div key={i} className="pourquoi-card">
            <div className="p-icon"><Icon name={c.i} size={28} color="var(--g2)"/></div>
            <h3>{c.t}</h3><p>{c.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Services = () => (
  <section id="services" className="bs-services">
    <div className="section-inner">
      <div className="section-head">
        <span className="tag">Tous types de travaux</span>
        <h2>Un artisan pour chaque besoin</h2>
        <p>Du dépannage d'urgence à la rénovation complète — BatiSpot couvre l'ensemble des corps de métier.</p>
      </div>
      <div className="services-grid">
        {[
          { i:"briefcase", t:"Gros œuvre", d:"Construction, extension, maçonnerie" },
          { i:"layers", t:"Rénovation", d:"Peinture, cloisons, revêtements" },
          { i:"bath", t:"Salle de bain", d:"Plomberie, carrelage, agencement" },
          { i:"zap", t:"Électricité", d:"Mise aux normes, tableau, domotique" },
          { i:"drop", t:"Isolation / Chauffage", d:"Combles, PAC, chaudière, clim" },
          { i:"roof", t:"Toiture", d:"Réfection, charpente, zinguerie" },
          { i:"coffee", t:"Extérieur", d:"Terrasse, clôture, portail, allée" },
          { i:"wrench", t:"Dépannage", d:"Fuite, panne, urgences" },
        ].map((s,i)=>(
          <a key={i} href="#" className="svc">
            <span className="svc-ico"><Icon name={s.i} size={32} stroke={1.8} color="var(--g2)"/></span>
            <h3>{s.t}</h3><p>{s.d}</p>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const Parcours = () => (
  <section id="parcours" className="bs-parcours">
    <div className="section-inner">
      <div className="section-head">
        <span className="tag">Simple & rapide</span>
        <h2>3 étapes, et c'est parti</h2>
        <p>De la demande à la réception des travaux, BatiSpot gère tout depuis l'application.</p>
      </div>
      <div className="steps">
        {[
          { n:1, t:"Décrivez votre projet", d:"Type de travaux, photos du chantier, adresse et délais — en moins de 2 minutes." },
          { n:2, t:"Comparez les devis", d:"Des artisans certifiés de votre région vous envoient leurs offres sous 24h." },
          { n:3, t:"Suivez votre chantier", d:"Photos d'avancement, messagerie, documents — tout dans votre poche." },
        ].map((s)=>(
          <div key={s.n} className="step">
            <div className="step-num">{s.n}</div>
            <h3>{s.t}</h3><p>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CtaFinal = ({ onClick }) => (
  <section className="bs-cta-final">
    <h2>Prêt à démarrer votre projet ?</h2>
    <p>Décrivez vos travaux en 2 minutes, recevez vos premiers devis sous 24h.</p>
    <a href="#devis" className="cta-final-btn" onClick={onClick}>Déposer mon projet gratuitement →</a>
  </section>
);

const Footer = () => (
  <footer className="bs-footer">
    <a href="#" className="f-logo">BatiSpot</a>
    <div className="footer-links">
      <a href="#">CGU</a><a href="#">Mentions légales</a><a href="#">Confidentialité</a>
      <a href="#">contact@batispot.pro</a>
    </div>
    <span style={{color:"rgba(255,255,255,0.5)"}}>© 2026 BatiSpot · Île-de-France</span>
  </footer>
);

Object.assign(window, { Pourquoi, Services, Parcours, CtaFinal, Footer });