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

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

  // Track phone clicks via dataLayer (Google Tag Manager)
  React.useEffect(() => {
    const handler = (e) => {
      const a = e.target.closest('a[href^="tel:"]');
      if (!a) return;
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'phone_click',
        phone_number: a.getAttribute('href').replace('tel:', '')
      });
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  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="#adas" onClick={() => setMobMenu(false)}>Calibrage ADAS</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">Je prends RDV →</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">Rapid Pare-Brise · Luçon</div>
            <h1>Votre pare-brise <em>remplacé</em> en 1h30, à Luçon.</h1>
            <a href="#devis" className="v1-hero-mobile-img">
              <img src="/lucon/rapid-pare-brise-lucon.png" alt="Rapid Pare-Brise Luçon — 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="clock" size={16} /></div>
                Intervention en 1h30
              </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="clock" size={16} /></div>
                Intervention en 1h30
            </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 Sud Vendée</div>
          </div>
          <div className="v1-strip-item">
            <div className="v1-strip-num">4,7<small style={{ fontSize: 14, color: 'var(--rp-muted)' }}>/5</small></div>
            <div className="v1-strip-lbl">note Google<br />sur 119 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: 'Rendez-vous en 2 minutes ou un appel au 07 84 08 28 18.' }, { n: '02', t: 'On confirme', d: 'Rappel sous 1h pour fixer date et adresse.' }, { n: '03', t: 'On intervient', d: 'Dans notre centre de Sainte-Gemme-la-Plaine, en 1h30.' },
            { n: '04', t: 'On gère le reste', d: 'On gère votre dossier assurance de A à Z.' }].
            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>

      {/* ADAS calibration */}
      <section id="adas" className="v1-section v1-section-alt adas-section">
        <div className="rp-container adas-grid">
          <div className="adas-media">
            <img src="/lucon/atelier-calibrage-adas.png" alt="Calibrage ADAS dans l'atelier Rapid Pare-Brise Luçon" />
          </div>
          <div className="adas-content">
            <span className="adas-eyebrow">Technologie & sécurité</span>
            <h2>Un atelier équipé des <em>dernières technologies</em> pour votre sécurité</h2>
            <p>Les véhicules récents embarquent des aides à la conduite (freinage d'urgence, maintien de voie, lecture des panneaux) pilotées par une caméra fixée au pare-brise. Notre atelier de Luçon dispose d'équipements de calibrage ADAS de dernière génération pour garantir leur parfait fonctionnement.</p>
            <ul className="adas-list">
              <li><Icon name="check-circle" size={18} /> Équipements de calibrage dernière génération</li>
              <li><Icon name="check-circle" size={18} /> Techniciens formés aux systèmes ADAS</li>
              <li><Icon name="check-circle" size={18} /> Contrôle complet des aides à la conduite</li>
              <li><Icon name="check-circle" size={18} /> Toutes marques, tous véhicules</li>
            </ul>
            <a href="#devis" className="rp-btn rp-btn-primary rp-btn-lg">Je prends RDV <Icon name="arrow-right" size={16} /></a>
          </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 du Sud Vendée</h2>
            <p>4,7/5 sur 119 avis Google. Quelques retours de nos clients.</p>
          </div>
          <div className="v1-reviews">
            {[
            { i: 'S', n: 'Steph', m: 'Avis Google', q: "Super accueil, formalités simples, pas de reste à charge, prêt d'un véhicule, travail soigné et rapide sur un changement de pare-brise. Je recommande cet établissement sans réserve." },
            { i: 'BM', n: 'Benoit M.', m: 'Avis Google', q: "Très bon accueil, prêt d'une voiture, travail nickel, je recommande et en plus un bon d'achat offert suite à un contact dans une grande surface 😊" },
            { i: 'QG', n: 'Quentin G.', m: 'Avis Google', q: "La disponibilité pour un rendez-vous très rapide ! L'accueil est super. Changement d'un pare-brise fissuré : travail propre et rapide. Véhicule de prêt à disposition sans même avoir demandé, et le café offert. Étant sans franchise, un cadeau de qualité est à choisir sur place, ou 100 € en dématérialisé. Bref, super expérience dans ce centre !" }].
            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: "Comment se passe l'intervention&nbsp;?", a: "Vous déposez votre véhicule dans notre centre de Sainte-Gemme-la-Plaine (ZA de Mocque Panier, à côté de Luçon). Notre technicien remplace votre pare-brise en 1h30 environ, avec des vitrages de qualité d'origine. Vous pouvez patienter sur place." },
            { 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: "Tout le Sud Vendée depuis notre centre de Sainte-Gemme-la-Plaine (Luçon) : Fontenay-le-Comte, Sainte-Hermine, Chaillé-les-Marais, L'Aiguillon-sur-Mer, La Tranche-sur-Mer, Vendée 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€ en carte cadeau, 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)' }}>Luçon · Vendée</small></div>
              </div>
              <p>Spécialiste vitrage auto à Luçon et dans le Sud 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:rpblucon@gmail.com">rpblucon@gmail.com</a></li>
                <li>1A rue du Moulin Chapitre<br />ZA de Mocque Panier<br />85400 Sainte-Gemme-la-Plaine</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 · SIREN 914 354 634</span>
            <span>
              <a href="/lucon/mentions-legales.html">Mentions légales</a>
              &nbsp;·&nbsp;
              <a href="/lucon/politique-confidentialite.html">Politique de confidentialité</a>
              &nbsp;·&nbsp;
              <a href="#" data-rpb-cookies="1">Gérer les cookies</a>
            </span>
          </div>
        </div>
      </footer>
    </div>);

};

window.V1 = V1;