// V1 — Express & Confiance : layout clair, pro, formulaire dans hero
const V1 = ({ tweaks }) => {
  const phone = '07 88 66 56 39';
  const phoneLink = 'tel:' + phone.replace(/\s/g, '');

  const [openFaq, setOpenFaq] = React.useState(0);
  const [mobMenu, setMobMenu] = React.useState(false);

  return (
    <div className={`v1 rp-root ${tweaks.dense ? 'dense' : ''} ${mobMenu ? 'menu-open' : ''}`} style={{ '--rp-primary': tweaks.primary, '--rp-primary-deep': tweaks.primaryDeep }}>
      {/* Top bar */}
      <header className="v1-bar">
        <div className="rp-container v1-bar-inner">
          <a href="#top" className="v1-logo" aria-label="Retour à l'accueil"
            onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); setMobMenu(false); }}>
            <img src="logo-rapid-pare-brise.jpg" alt="Rapid Pare-Brise" className="v1-logo-img" />
          </a>
          <nav className="v1-nav">
            <a href="#services" onClick={() => setMobMenu(false)}>Services</a>
            <a href="#offre" onClick={() => setMobMenu(false)}>Offre 100€</a>
            <a href="#processus" onClick={() => setMobMenu(false)}>Comment ça marche</a>
            <a href="#avis" onClick={() => setMobMenu(false)}>Avis</a>
            <a href="#faq" onClick={() => setMobMenu(false)}>FAQ</a>
          </nav>
          <div className="v1-bar-cta">
            <a href={phoneLink} className="v1-phone">
              <Icon name="phone" size={16} /> {phone}
            </a>
            <a href="#devis" className="rp-btn rp-btn-ink">Devis gratuit</a>
          </div>
          <button type="button" className="v1-burger" aria-label="Menu" onClick={() => setMobMenu(!mobMenu)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>

      {/* Hero */}
      <section className="v1-hero">
        <div className="rp-container v1-hero-grid">
          <div className="v1-hero-content">
            <div className="v1-eyebrow">Pose à domicile · Vendée</div>
            <h1>Un pare-brise <em>impeccable</em>, sans bouger de chez vous.</h1>
            <a href="#devis" className="v1-hero-mobile-img">
              <img src="assets/rapid-domicile-offre.png" alt="Rapid Pare-Brise — pose à domicile, 100€ offerts" />
            </a>
            <p className="v1-hero-sub">
              Aucune avance de frais, <strong>100€ offerts</strong> ou franchise prise en charge.
            </p>
            <div className="v1-hero-ctas">
              <a href="#devis" className="rp-btn rp-btn-primary rp-btn-lg">
                Je prends RDV <Icon name="arrow-right" size={16} />
              </a>
              <a href={phoneLink} className="rp-btn rp-btn-outline rp-btn-lg">
                <Icon name="phone" size={16} /> {phone}
              </a>
            </div>
            <div className="v1-hero-trust v1-hero-trust-desktop">
              <div className="v1-trust-item">
                <div className="v1-trust-icon"><Icon name="home" size={16} /></div>
                Pose à domicile incluse
              </div>
              <div className="v1-trust-item">
                <div className="v1-trust-icon"><Icon name="shield" size={16} /></div>
                Toutes Assurances
              </div>
              <div className="v1-trust-item">
                <div className="v1-trust-icon"><Icon name="badge" size={16} /></div>
                Garantie à vie sur la pose
              </div>
              <div className="v1-trust-item">
                <div className="v1-trust-icon"><Icon name="sparkles" size={16} /></div>
                Nettoyage du véhicule offert
              </div>
            </div>
          </div>

          {/* Form card */}
          <div id="devis" className="v1-formcard">
            <div className="v1-formcard-head">
              <div>
                <h3>1 Pare-Brise = 100€ ou Franchise Offerte
</h3>
                <small>Sans engagement · Réponse sous 1h ouvrée</small>
              </div>
              <Icon name="zap" size={28} />
            </div>
            <div className="v1-formcard-body">
              <QuoteForm variant="v1" />
            </div>
          </div>

          {/* Trust badges — mobile only, displayed AFTER form */}
          <div className="v1-hero-trust v1-hero-trust-mobile">
            <div className="v1-trust-item">
              <div className="v1-trust-icon"><Icon name="home" size={16} /></div>
              Pose à domicile incluse
            </div>
            <div className="v1-trust-item">
              <div className="v1-trust-icon"><Icon name="shield" size={16} /></div>
              Toutes Assurances
            </div>
            <div className="v1-trust-item">
              <div className="v1-trust-icon"><Icon name="badge" size={16} /></div>
              Garantie à vie sur la pose
            </div>
            <div className="v1-trust-item">
              <div className="v1-trust-icon"><Icon name="sparkles" size={16} /></div>
              Nettoyage du véhicule offert
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="v1-strip">
        <div className="rp-container v1-strip-grid">
          <div className="v1-strip-item">
            <div className="v1-strip-num">2&nbsp;800+</div>
            <div className="v1-strip-lbl">interventions<br />en Vendée</div>
          </div>
          <div className="v1-strip-item">
            <div className="v1-strip-num">4,9<small style={{ fontSize: 14, color: 'var(--rp-muted)' }}>/5</small></div>
            <div className="v1-strip-lbl">note Google<br />sur 312 avis</div>
          </div>
          <div className="v1-strip-item">
            <div className="v1-strip-num">1h30</div>
            <div className="v1-strip-lbl">temps moyen<br />d'intervention</div>
          </div>
          <div className="v1-strip-item">
            <div className="v1-strip-num"><Icon name="check" size={28} stroke={3} /></div>
            <div className="v1-strip-lbl">Aucune avance<br />de frais</div>
          </div>
        </div>
      </section>

      {/* Cadeaux carousel */}
      <section id="services" className="v1-section v1-section-cadeaux">
        <div className="rp-container">
          <CadeauxCarousel />
        </div>
      </section>

      {/* Process */}
      <section id="processus" className="v1-section">
        <div className="rp-container">
          <div className="v1-section-head">
            <h2>Comment ça marche</h2>
            <p>Quatre étapes, zéro stress. On gère tout — y compris la déclaration assurance.</p>
          </div>
          <div className="v1-process">
            {[{ n: '01', t: 'Vous demandez', d: 'Devis en 2 min ou un appel au 07 88 66 56 39.' }, { n: '02', t: 'On confirme', d: 'Rappel sous 1h pour fixer date et adresse.' }, { n: '03', t: 'On intervient', d: 'À votre domicile ou bureau, en 1 à 2 heures.' },
            { n: '04', t: 'On gère le reste', d: 'Déclaration assurance et 100€ versés.' }].
            map((s) =>
            <div key={s.n} className="v1-process-step">
                <div className="v1-process-num">{s.n}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Reviews */}
      <ZoneContact phoneLink={phoneLink} phone={phone} />
      <section id="avis" className="v1-section v1-section-alt">
        <div className="rp-container">
          <div className="v1-section-head">
            <h2>Ce que disent nos clients vendéens</h2>
            <p>4,9/5 sur 312 avis Google. Quelques retours récents.</p>
          </div>
          <div className="v1-reviews">
            {[
            { i: 'CM', n: 'Camille M.', m: 'Challans · il y a 3 j', q: "Pris en charge en 24h, intervention chez moi à Challans en 1h. Le technicien était nickel, propre, ponctuel. Les 100€ versés directement, rien à dire." },
            { i: 'TR', n: 'Thomas R.', m: 'Saint-Jean-de-Monts · 1 sem', q: "Impact sur l'A87, devis en 5 minutes par téléphone. Réparation gratuite avec mon assurance, j'ai même eu droit à un kit auto." },
            { i: 'SL', n: 'Sandra L.', m: 'Beauvoir · 2 sem', q: "Je redoutais la galère assurance. Ils ont tout fait à ma place, j'ai juste signé. Service au top, je recommande à 1000%." }].
            map((r) =>
            <div key={r.n} className="v1-review">
                <div className="v1-review-stars">★★★★★</div>
                <div className="v1-review-quote">"{r.q}"</div>
                <div className="v1-review-author">
                  <div className="v1-review-avatar">{r.i}</div>
                  <div>
                    <div className="v1-review-name">{r.n}</div>
                    <div className="v1-review-meta">{r.m}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="v1-section">
        <div className="rp-container">
          <div className="v1-section-head">
            <h2>Questions fréquentes</h2>
            <p>Tout ce que vous voulez savoir avant de réserver.</p>
          </div>
          <div className="v1-faq">
            {[
            { q: "Mon assurance prend-elle en charge le remplacement&nbsp;?", a: "Si vous avez l'option 'bris de glace' (présente dans 95% des contrats tous risques), oui. On s'occupe de la déclaration auprès de votre assureur. Reste à votre charge : la franchise éventuelle, que nous prenons en charge à 100% dans le cadre de notre offre." },
            { q: "La pose à domicile, comment ça se passe&nbsp;?", a: "Notre technicien vient sur le lieu que vous indiquez (domicile, lieu de travail, parking) avec un véhicule équipé. L'intervention dure 1 à 2 heures. Il faut juste un endroit accessible et un peu d'espace autour de la voiture." },
            { q: "Combien de temps pour avoir mon nouveau pare-brise&nbsp;?", a: "Pour les modèles courants, sous 24 à 48h. Pour les véhicules récents avec capteurs ADAS, comptez 2 à 5 jours pour la commande du vitrage d'origine et le calibrage." },
            { q: "Quelle est la zone d'intervention&nbsp;?", a: "Toute la Vendée Nord depuis notre base de Challans : Saint-Jean-de-Monts, Beauvoir-sur-Mer, Saint-Gilles-Croix-de-Vie, Machecoul, La Roche-sur-Yon nord. Nous demander pour les autres communes." },
            { q: "L'offre 100€ est-elle cumulable avec ma franchise&nbsp;?", a: "L'offre est au choix : soit on prend votre franchise en charge (jusqu'à 100€), soit vous recevez 100€ par virement, soit vous choisissez un cadeau dans notre catalogue. Vous décidez le jour de l'intervention." }].
            map((f, i) =>
            <div key={i} className={`v1-faq-item ${openFaq === i ? 'open' : ''}`}>
                <button className="v1-faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span dangerouslySetInnerHTML={{ __html: f.q }} />
                  <span className="v1-faq-toggle"><Icon name="plus" size={14} /></span>
                </button>
                {openFaq === i && <div className="v1-faq-a">{f.a}</div>}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="v1-contact">
        <div className="rp-container">
          <div className="v1-contact-grid">
            <div className="v1-contact-brand">
              <div className="v1-logo" style={{ color: 'white' }}>
                <div className="v1-logo-mark" style={{ background: 'var(--rp-accent)', color: 'var(--rp-ink)' }}><Icon name="shield" size={18} stroke={2.5} /></div>
                <div>Rapid Pare-Brise<small style={{ color: 'rgba(255,255,255,.5)' }}>Challans · Vendée</small></div>
              </div>
              <p>Spécialiste vitrage auto à domicile en Vendée. Tous véhicules, tous assureurs, intervention rapide.</p>
            </div>
            <div>
              <h4>Contact</h4>
              <ul>
                <li><a href={phoneLink}>{phone}</a></li>
                <li><a href="mailto:Rpbchallans@gmail.com">Rpbchallans@gmail.com</a></li>
                <li>Pose à domicile · 85</li>
              </ul>
            </div>
            <div>
              <h4>Horaires</h4>
              <ul>
                <li>Lun – Ven : 8h – 19h</li>
                <li>Samedi : 9h – 17h</li>
                <li>Dimanche : urgences</li>
              </ul>
            </div>
            <div>
              <h4>Services</h4>
              <ul>
                <li>Remplacement pare-brise</li>
                <li>Réparation impact</li>
                <li>Vitres latérales</li>
                <li>Calibrage ADAS</li>
              </ul>
            </div>
          </div>
          <div className="v1-contact-bottom">
            <span>© 2026 Rapid Pare-Brise Challans · CHALLANS VITRAGES AUTOMOBILES · SIREN 914 354 634</span>
            <span>
              <a href="mentions-legales.html">Mentions légales</a>
              &nbsp;·&nbsp;
              <a href="politique-confidentialite.html">Politique de confidentialité</a>
            </span>
          </div>
        </div>
      </footer>
    </div>);

};

window.V1 = V1;