// Service: visibilité locale (cartes Google, Apple, Bing + recherches locales sur le web)

const FicheSignals = () => (
  <section style={{padding:'0 56px 80px',background:v4Theme.bg}}>
    <div style={{maxWidth:1440,margin:'0 auto'}}>
      <div style={{background:v4Theme.surface,borderRadius:28,padding:'40px 48px',
        border:`1px solid ${v4Theme.border}`,boxShadow:'0 4px 20px rgba(10,24,64,0.05)'}}>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:11,color:v4Theme.purple,
          letterSpacing:2,fontWeight:700,marginBottom:16,textTransform:'uppercase'}}>
          Comment Google et les cartes décident qui apparaît en premier
        </div>
        <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:28,fontWeight:600,color:v4Theme.ink,
          margin:0,marginBottom:28,letterSpacing:-0.5,maxWidth:700,lineHeight:1.2}}>
          Quand un client cherche « resto Saint-Sauveur » ou « coiffeur Mont-Tremblant », une décision se prend en une fraction de seconde.
        </h3>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
          {[
            {t:'Catégorie et attributs',d:'Chaque carte vérifie si votre fiche correspond exactement à ce que le client cherche. « Accessible en fauteuil », « terrasse chauffée », « Wi-Fi » : chaque attribut coché élargit les recherches où vous apparaissez.',c:v4Theme.purple},
            {t:'Photos récentes et variées',d:'Les fiches avec des photos fraîches et en nombre reçoivent beaucoup plus de clics. Google l\'a mesuré, pas nous. Une fiche sans photos récentes est reléguée derrière celles qui en ont.',c:v4Theme.blue},
            {t:'Vos coordonnées partout identiques',d:'Si votre adresse ou votre numéro de téléphone diffère d\'un répertoire à l\'autre sur le web, Google, Apple et Bing perdent confiance et vous affichent moins. La cohérence sur tous les sites compte autant que le contenu de votre fiche.',c:v4Theme.teal},
            {t:'Avis récents avec réponses',d:'La quantité d\'avis compte. Leur fraîcheur aussi. Et les plateformes regardent si vous prenez la peine de répondre. Un commerce actif qui écoute ses clients est perçu comme plus fiable qu\'un commerce silencieux.',c:v4Theme.warm},
          ].map(p=>(
            <div key={p.t} style={{display:'grid',gridTemplateColumns:'8px 1fr',gap:16}}>
              <div style={{background:p.c,borderRadius:4}}/>
              <div>
                <div style={{fontFamily:v4Theme.fontBody,fontSize:15,fontWeight:600,
                  color:v4Theme.ink,marginBottom:6}}>{p.t}</div>
                <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.inkSoft,lineHeight:1.6}}>{p.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const FicheDetail = () => (
  <section style={{padding:'40px 56px 20px',background:v4Theme.bg}}>
    <div style={{maxWidth:1440,margin:'0 auto',display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:64,alignItems:'flex-start'}}>
      <div>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:48,fontWeight:600,color:v4Theme.ink,
          margin:0,marginBottom:32,letterSpacing:-1.2,lineHeight:1.1}}>
          Être trouvé près de chez vous, <em style={{color:v4Theme.purple,fontStyle:'italic'}}>sur les cartes et sur le web.</em>
        </h2>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:17,color:v4Theme.inkSoft,lineHeight:1.7,
          display:'flex',flexDirection:'column',gap:20,marginBottom:40}}>
          <p style={{margin:0}}>
            Tout commence par une <strong style={{color:v4Theme.ink}}>analyse de visibilité locale de plus de 200 points</strong> : votre fiche Google, vos fiches Apple Plans et Bing Maps, souvent oubliées ou en double, vos inscriptions dans les répertoires en ligne et les pages de votre site qui devraient sortir quand on cherche votre service dans votre région. On corrige ensuite tout ce qui freine votre visibilité.
          </p>
          <p style={{margin:0}}>
            Puis on prend le relais, mois après mois. Google et les cartes favorisent les commerces actifs : on publie des nouvelles, on ajoute des photos récentes, on répond aux avis, on garde vos coordonnées identiques partout et on améliore les pages de votre site pour les recherches comme « plombier Saint-Jérôme » ou « spa près de Tremblant ».
          </p>
          <p style={{margin:0}}>
            Chaque mois, un rapport simple vous montre les chiffres : vues de vos fiches, appels, clics vers votre site, demandes d'itinéraire et vos positions dans les recherches de votre région. Des données réelles, pas des estimations. Vous n'avez rien à gérer.
          </p>
        </div>
        <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:24,fontWeight:600,color:v4Theme.ink,
          margin:0,marginBottom:20,letterSpacing:-0.5}}>Ce qui est inclus</h3>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {[
            'Analyse de visibilité locale (200+ points) et optimisation de votre fiche Google',
            'Fiches Apple Plans et Bing Maps créées, réclamées et tenues à jour',
            'Inscription et coordonnées identiques dans les principaux répertoires',
            'Pages de votre site ajustées pour les recherches de votre région',
            'Publications régulières, photos récentes, horaires à jour',
            'Réponses aux avis et surveillance des modifications suggérées',
            'Rapport mensuel : appels, itinéraires, clics et positions',
          ].map(t=>(
            <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:24,height:24,borderRadius:'50%',background:`${v4Theme.purple}15`,
                color:v4Theme.purple,display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:700,fontSize:13,flexShrink:0,marginTop:2}}>✓</div>
              <div style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.ink,lineHeight:1.5}}>{t}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{position:'sticky',top:120}}>
        <div style={{background:v4Theme.surface,borderRadius:28,padding:32,
          border:`1px solid ${v4Theme.border}`,boxShadow:'0 4px 20px rgba(10,24,64,0.05)'}}>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:11,color:v4Theme.muted,
            letterSpacing:1.5,textTransform:'uppercase',fontWeight:600,marginBottom:8}}>À partir de</div>
          <div style={{fontFamily:v4Theme.fontDisplay,fontSize:64,fontWeight:700,color:v4Theme.purple,
            letterSpacing:-2,lineHeight:1,marginBottom:8}}>375<span style={{fontSize:24,color:v4Theme.muted,fontWeight:500}}>$/mois</span></div>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.muted,marginBottom:24}}>sans engagement · 2 mois offerts en paiement annuel</div>
          <a href="contact.html" style={{display:'block',width:'100%',background:v4Theme.purple,
            color:v4Theme.bg,border:'none',borderRadius:999,padding:'16px',
            fontFamily:v4Theme.fontBody,fontWeight:600,fontSize:15,cursor:'pointer',
            textDecoration:'none',textAlign:'center',boxSizing:'border-box',marginBottom:12}}>
            Améliorer ma visibilité
          </a>
          <a href="contact.html" style={{display:'block',width:'100%',background:'transparent',
            color:v4Theme.ink,border:`1px solid ${v4Theme.border}`,borderRadius:999,padding:'16px',
            fontFamily:v4Theme.fontBody,fontWeight:500,fontSize:15,cursor:'pointer',
            textDecoration:'none',textAlign:'center',boxSizing:'border-box'}}>
            Voir un rapport exemple
          </a>
          <div style={{marginTop:24,paddingTop:24,borderTop:`1px solid ${v4Theme.border}`,
            fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted,lineHeight:1.5}}>
            Combinable avec un tour virtuel 360° et le Système d'avis. On vous fait un prix d'ensemble.
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FicheApp = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="fiche"/>
    <V4PageHero
      eyebrow="Service · Visibilité locale sur les cartes et le web"
      title="On optimise. On entretient."
      gradient="On mesure."
      subtitle="Quand quelqu'un cherche votre service près de chez lui, sur Google, sur une carte ou dans un assistant IA, on fait en sorte que ce soit vous qu'il trouve. Fiches Google, Apple et Bing, répertoires, avis et site web, entretenus chaque mois."
      accent={v4Theme.purple}/>
    <FicheDetail/>
    <FicheSignals/>
    <V4FinalCTA title="Curieux de voir où" gradientPart="vous apparaissez ?"/>
    <V4Footer/>
  </div>
);
ReactDOM.createRoot(document.getElementById('root')).render(<FicheApp/>);