// Service: Système d'avis

const AvisDetail = () => (
  <section style={{padding:'40px 56px 100px',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}}>
          Vos meilleurs clients deviennent <em style={{color:v4Theme.teal,fontStyle:'italic'}}>vos meilleurs vendeurs.</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}}>
            <strong style={{color:v4Theme.ink}}>85 % des consommateurs</strong> se disent plus enclins à choisir un commerce après avoir lu des avis positifs, et 74 % cherchent des avis des trois derniers mois (<a href="https://www.brightlocal.com/research/local-consumer-review-survey/" rel="noopener" style={{color:v4Theme.inkSoft}}>BrightLocal, 2026</a>). Et pourtant, la plupart des commerces locaux laissent leurs clients satisfaits repartir sans jamais leur demander un avis.
          </p>
          <p style={{margin:0}}>
            On installe un système simple : carte NFC à présenter au comptoir, code QR sur l'addition, courriel automatique post-achat. Le client tape une fois, son avis Google se publie. Vous recevez une notification, vous répondez en deux clics depuis notre tableau de bord.
          </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}}>
          {[
            'Carte NFC personnalisée à votre commerce (1 incluse)',
            'Code QR + lien direct vers vos avis Google',
            'Tableau de bord pour suivre les avis et y répondre',
            'Notifications par courriel à chaque nouvel avis',
            'Modèles de réponses pour avis positifs et négatifs',
            'Suivi mensuel : tendances, mots-clés, alertes',
          ].map(t=>(
            <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:24,height:24,borderRadius:'50%',background:`${v4Theme.teal}15`,
                color:v4Theme.teal,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={{display:'inline-flex',alignItems:'center',gap:8,marginBottom:20,
            padding:'6px 12px',borderRadius:999,background:`${v4Theme.warm}26`,border:`1px solid ${v4Theme.warm}`,
            fontFamily:v4Theme.fontBody,fontSize:12,fontWeight:700,color:v4Theme.ink,letterSpacing:0.5,textTransform:'uppercase'}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:v4Theme.warm}}/>Bientôt disponible
          </div>
          <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.teal,
            letterSpacing:-2,lineHeight:1,marginBottom:8}}>25<span style={{fontSize:24,color:v4Theme.muted,fontWeight:500}}>$/mois</span></div>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.muted,marginBottom:20}}>sans engagement · 2 mois offerts en paiement annuel</div>
          <div style={{display:'flex',flexDirection:'column',gap:8,marginBottom:24}}>
            {[['Essentiel','25'],['Croissance','45'],['Pro','95']].map(([n,p],i)=>(
              <div key={n} style={{display:'flex',justifyContent:'space-between',alignItems:'center',
                padding:'12px 16px',borderRadius:14,
                background: i===1 ? `${v4Theme.teal}14` : v4Theme.bg,
                border:`1px solid ${i===1 ? v4Theme.teal+'50' : v4Theme.border}`,
                fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.ink}}>
                <span style={{fontWeight:600}}>{n}{i===1 && <span style={{marginLeft:8,fontSize:11,fontWeight:700,
                  color:v4Theme.teal,textTransform:'uppercase',letterSpacing:1}}>Populaire</span>}</span>
                <span style={{fontFamily:v4Theme.fontDisplay,fontWeight:700,fontSize:18}}>{p} $/mois</span>
              </div>
            ))}
          </div>
          <a href={v4Href('contact.html')} style={{display:'block',width:'100%',background:v4Theme.teal,
            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}}>
            Être avisé du lancement
          </a>
          <a href={v4Href('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'}}>
            Réserver ma place
          </a>
          <div style={{marginTop:24,paddingTop:24,borderTop:`1px solid ${v4Theme.border}`,
            fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted,lineHeight:1.5}}>
            Lancement prochain : inscrivez-vous pour être parmi les premiers commerces équipés.
          </div>
        </div>
      </div>
    </div>
  </section>
);

const AvisApp = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="avis"/>
    <V4PageHero
      eyebrow="Bientôt disponible · Système d'avis Google"
      title="Multipliez vos avis"
      gradient="sans y penser."
      subtitle="Carte NFC, code QR, courriel automatique. Vos clients satisfaits laissent un avis en un tap. Vous suivez tout depuis un tableau de bord simple."
      accent={v4Theme.teal}/>
    <AvisDetail/>
    <V4FinalCTA title="Vos meilleurs clients" gradientPart="parlent déjà de vous."/>
    <V4Footer/>
  </div>
);
ReactDOM.createRoot(document.getElementById('root')).render(<AvisApp/>);