// Index page (V4 home), refers to existing v4-clair-aquatique.jsx but using shared chrome
// We re-mount V4 sections without nav/footer, then wrap with V4Nav/V4Footer from _shared

const HomeHero = () => {
  const [drag,setDrag] = React.useState(0);
  React.useEffect(()=>{
    const id = setInterval(()=>setDrag(d=>(d+0.15)%100),60);
    return ()=>clearInterval(id);
  },[]);
  return (
    <section style={{position:'relative',padding:'80px 56px 0',background:v4Theme.bg,overflow:'hidden'}}>
      <div style={{position:'absolute',top:-200,right:-200,width:700,height:700,borderRadius:'50%',
        background:`radial-gradient(circle, ${v4Theme.warm}50, transparent 65%)`,filter:'blur(20px)'}}/>
      <div style={{position:'absolute',top:200,left:-100,width:400,height:400,borderRadius:'50%',
        background:`radial-gradient(circle, ${v4Theme.teal}30, transparent 65%)`,filter:'blur(40px)'}}/>
      <div style={{maxWidth:1440,margin:'0 auto',position:'relative'}}>
        <div style={{display:'inline-flex',alignItems:'center',gap:8,
          padding:'8px 14px',borderRadius:999,
          background:'rgba(255,255,255,0.7)',border:`1px solid ${v4Theme.teal}40`,backdropFilter:'blur(10px)',
          fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.ink,fontWeight:500,marginBottom:48}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:v4Theme.teal,
            boxShadow:`0 0 0 4px ${v4Theme.teal}30`}}/>
          Tours 360°, visibilité locale, sites web et avis · Laurentides
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:64,alignItems:'center',marginBottom:80}}>
          <div>
            <h1 style={{fontFamily:v4Theme.fontDisplay,fontWeight:700,fontSize:64,lineHeight:1.1,
              letterSpacing:-2,color:v4Theme.ink,margin:0,textWrap:'balance'}}>
              Visible sur Google,{' '}
              <span style={{
                background:`linear-gradient(135deg, ${v4Theme.blue} 0%, ${v4Theme.purple} 55%, ${v4Theme.pink} 100%)`,
                WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
                fontStyle:'italic',fontWeight:600,display:'inline',whiteSpace:'nowrap'}}>de Mirabel à Tremblant.</span>
            </h1>
            <p style={{fontFamily:v4Theme.fontBody,fontSize:18,lineHeight:1.65,color:v4Theme.inkSoft,
              maxWidth:520,marginTop:24,marginBottom:24,textWrap:'pretty'}}>
              Tours virtuels 360°, visibilité locale, sites web et avis pour les commerces{' '}
              <strong style={{color:v4Theme.ink}}>des Laurentides</strong>. Seule exception : les stations de ski, qu'on capte partout au Québec.
            </p>
            <div style={{display:'flex',flexDirection:'column',gap:9,marginBottom:32}}>
              {[
                {label:'Tours virtuels 360°', desc:'Visite Street View + photos HDR · Laurentides',   href:'tour-virtuel-360/index.html',            c:v4Theme.blue,   bg:'#e8eeff'},
                {label:"Système d'avis",  desc:'Bientôt disponible · Récoltez et gérez vos avis',         href:'services-avis.html',         c:v4Theme.teal,   bg:'#e2f6f6'},
                {label:'Visibilité locale', desc:'Cartes Google, Apple, Bing et recherches locales · Laurentides',      href:'services-fiche-google.html', c:v4Theme.purple, bg:'#f2e8ff'},
                {label:'Conception de site web', desc:'Sites rapides, pensés pour être trouvés · Laurentides',      href:'services-site-web.html', c:v4Theme.pink, bg:'#fbeefe'},
              ].map((s,i)=>(
                <a key={i} href={s.href} style={{
                  display:'flex',alignItems:'center',gap:13,padding:'11px 15px',
                  background:'rgba(255,255,255,.88)',borderRadius:13,
                  border:`1px solid ${v4Theme.border}`,
                  textDecoration:'none',color:v4Theme.ink,
                  boxShadow:'0 3px 10px rgba(10,24,64,.04)',
                  transition:'transform .15s,box-shadow .15s',
                }}
                  onMouseEnter={e=>{e.currentTarget.style.transform='translateX(5px)';e.currentTarget.style.boxShadow='0 7px 22px rgba(10,24,64,.11)';}}
                  onMouseLeave={e=>{e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='0 3px 10px rgba(10,24,64,.04)';}}>
                  <div style={{width:34,height:34,borderRadius:10,flexShrink:0,
                    background:s.bg,display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <div style={{width:10,height:10,borderRadius:'50%',background:s.c,
                      boxShadow:`0 0 0 3.5px ${s.c}28`}}/>
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontFamily:v4Theme.fontDisplay,fontSize:14,fontWeight:700,
                      color:v4Theme.ink,letterSpacing:-.2}}>{s.label}</div>
                    <div style={{fontFamily:v4Theme.fontBody,fontSize:12,color:v4Theme.muted,
                      lineHeight:1.35,marginTop:1}}>{s.desc}</div>
                  </div>
                  <span style={{color:s.c,fontSize:14,flexShrink:0,fontWeight:700}}>→</span>
                </a>
              ))}
            </div>
            <div style={{display:'flex',gap:12,alignItems:'center',flexWrap:'wrap'}}>
              <V4Button primary href="contact.html">Réserver un appel gratuit →</V4Button>
              <V4Button href="ressources.html">Ressources gratuites</V4Button>
            </div>
          </div>
          <div style={{position:'relative',height:560}}>
            <div style={{position:'absolute',inset:0,borderRadius:32,overflow:'hidden',
              background:`linear-gradient(180deg, #b8e6e8 0%, #7dc8d4 30%, ${v4Theme.teal} 60%, ${v4Theme.blue} 100%)`,
              boxShadow:`0 30px 80px -20px ${v4Theme.blue}40, 0 0 0 1px rgba(255,255,255,0.5) inset`}}>
              <div style={{position:'absolute',top:'15%',right:'15%',width:80,height:80,borderRadius:'50%',
                background:`radial-gradient(circle, ${v4Theme.warm}, ${v4Theme.warm}80 60%, transparent)`,
                boxShadow:`0 0 60px ${v4Theme.warm}80`}}/>
              <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.4}} viewBox="0 0 600 560" preserveAspectRatio="none">
                {[...Array(8)].map((_,i)=>(
                  <ellipse key={i} cx={`${(50+drag*0.5+i*30)%100}%`} cy={`${65+i*4}%`}
                    rx={`${20+i*5}%`} ry="1%" fill="#fff" opacity={0.3-i*0.02}/>
                ))}
              </svg>
              <svg style={{position:'absolute',bottom:'40%',left:0,width:'100%',height:'25%',opacity:0.3}} viewBox="0 0 600 140" preserveAspectRatio="none">
                <path d="M0,140 L80,60 L160,90 L260,40 L360,80 L460,30 L600,80 L600,140 Z" fill={v4Theme.blue}/>
              </svg>
              <div style={{position:'absolute',top:'58%',left:'62%'}}>
                <div style={{width:48,height:48,borderRadius:'50%',background:'#fff',
                  display:'flex',alignItems:'center',justifyContent:'center',
                  animation:'v4pulse 2s infinite'}}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2v6m0 8v6M2 12h6m8 0h6" stroke={v4Theme.blue} strokeWidth="2.5" strokeLinecap="round"/>
                  </svg>
                </div>
              </div>
              <div style={{position:'absolute',top:20,left:20,display:'flex',gap:8,alignItems:'center',
                background:'rgba(255,255,255,0.95)',padding:'8px 14px',borderRadius:999,backdropFilter:'blur(10px)',
                fontFamily:v4Theme.fontBody,fontSize:12,fontWeight:500,color:v4Theme.ink}}>
                Exemple · Visite 360° sur Google Maps
              </div>
            </div>
            <div style={{position:'absolute',top:-20,right:-20,
              background:v4Theme.surface,borderRadius:20,padding:'18px 22px',
              boxShadow:'0 12px 40px rgba(10,24,64,0.15)',fontFamily:v4Theme.fontBody}}>
              <div style={{fontSize:11,color:v4Theme.muted,letterSpacing:1,fontWeight:600,textTransform:'uppercase'}}>Visite 360°</div>
              <div style={{fontFamily:v4Theme.fontDisplay,fontSize:28,fontWeight:700,
                color:v4Theme.ink,lineHeight:1.1,marginTop:4}}>Publiée sur Google</div>
              <div style={{fontSize:12,color:v4Theme.teal,fontWeight:600,marginTop:4}}>Maps et recherche</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@keyframes v4pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.7)}70%{box-shadow:0 0 0 28px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}`}</style>
    </section>
  );
};

const HomeServices = () => {
  const services = [
    {h:'Tours virtuels 360°',d:'Visite Google Street View + photos HDR. Approche dédiée par secteur : restaurants, hôtels, spas, pourvoiries, sentiers, stations de ski.',c:v4Theme.blue,href:'tour-virtuel-360/index.html',price:'495 $'},
    {h:'Système d\'avis',d:'Bientôt disponible. Récolter, suivre et répondre aux avis. Vos clients deviennent vos meilleurs vendeurs.',c:v4Theme.teal,href:'services-avis.html',price:'25 $/mois'},
    {h:'Visibilité locale',d:'Être trouvé quand on cherche votre service près de chez soi : fiches Google, Apple et Bing, répertoires, avis et site web, gérés chaque mois.',c:v4Theme.purple,href:'services-fiche-google.html',price:'375 $/mois'},
    {h:'Conception de site web',d:'Un site rapide sur cellulaire, une page par service, bâti pour sortir dans les recherches de votre région.',c:v4Theme.pink,href:'services-site-web.html',price:'2 950 $'},
  ];
  return (
    <section style={{padding:'140px 56px',background:v4Theme.bg2}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',marginBottom:64,gap:40,flexWrap:'wrap'}}>
          <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:80,fontWeight:700,letterSpacing:-2.5,
            color:v4Theme.ink,margin:0,maxWidth:780,lineHeight:1.1,textWrap:'balance'}}>
            Quatre leviers. <span style={{
              background:`linear-gradient(135deg, ${v4Theme.blue}, ${v4Theme.teal})`,
              WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
              fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>Une seule équipe.</span>
          </h2>
          <p style={{fontFamily:v4Theme.fontBody,fontSize:16,color:v4Theme.muted,maxWidth:340,margin:0,lineHeight:1.5}}>
            Combinez-les ou prenez-les séparément. On vous dit honnêtement ce dont vous avez besoin avant de vous vendre quoi que ce soit.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24}}>
          {services.map(s=>(
            <a key={s.h} href={s.href} style={{
              textDecoration:'none',background:v4Theme.surface,borderRadius:28,padding:36,
              border:`1px solid ${v4Theme.border}`,minHeight:340,
              display:'flex',flexDirection:'column',
              boxShadow:'0 4px 20px rgba(10,24,64,0.04)'}}>
              <div style={{width:56,height:56,borderRadius:16,background:`${s.c}15`,
                display:'flex',alignItems:'center',justifyContent:'center',marginBottom:24}}>
                <div style={{width:24,height:24,borderRadius:'50%',background:s.c}}/>
              </div>
              <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:28,fontWeight:600,
                color:v4Theme.ink,margin:0,marginBottom:12,letterSpacing:-0.5}}>{s.h}</h3>
              <p style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.inkSoft,
                lineHeight:1.6,margin:0,marginBottom:24}}>{s.d}</p>
              <div style={{marginTop:'auto',display:'flex',justifyContent:'space-between',alignItems:'center',
                paddingTop:24,borderTop:`1px solid ${v4Theme.border}`}}>
                <div style={{fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted}}>
                  <span style={{textTransform:'uppercase',letterSpacing:1,fontWeight:600,fontSize:10,color:v4Theme.muted}}>À partir de</span>
                  <div style={{fontFamily:v4Theme.fontDisplay,fontSize:24,fontWeight:700,color:s.c,marginTop:2}}>{s.price}</div>
                </div>
                <span style={{color:s.c,fontWeight:600,fontFamily:v4Theme.fontBody,fontSize:14}}>En savoir plus →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Sectors teaser strip, surfaces the 9 sectors from tours-360 ────────
const HomeSectors = () => {
  const sectors = [
    {n:'Restaurants & cafés',     c:v4Theme.blue,   s:'restaurants', d:'L\'ambiance vend autant que le menu.'},
    {n:'Hôtels & auberges',       c:v4Theme.teal,   s:'hotels', d:'Une chambre qu\'on voit, c\'est une chambre qu\'on prend.'},
    {n:'Spas & bien-être',        c:v4Theme.purple, s:'spas', d:'L\'expérience commence avant la porte.'},
    {n:'Salles de réception',     c:v4Theme.warm,   s:'salles-reception', d:'Choisir un lieu sans se déplacer.'},
    {n:'Boutiques & détaillants', c:v4Theme.blue,   s:'boutiques', d:'Donnez envie de pousser la porte.'},
    {n:'Cliniques & dentaires',   c:v4Theme.teal,   s:'cliniques', d:'Rassurer avant le rendez-vous.'},
    {n:'Pourvoiries & chalets',   c:v4Theme.purple, s:'pourvoiries', d:'Le lac, la quiétude, vus de chez eux.'},
    {n:'Microbrasseries & vignobles', c:v4Theme.warm, s:'microbrasseries', d:'L\'atelier, c\'est la moitié de l\'histoire.'},
    {n:'Loisirs et tourisme',     c:v4Theme.blue,   s:'loisirs', d:'Le sentier, le panorama, déjà visibles.'},
  ];
  return (
    <section style={{padding:'120px 56px',background:v4Theme.bg,
      borderTop:`1px solid ${v4Theme.border}`}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',
          marginBottom:48,gap:40,flexWrap:'wrap'}}>
          <div style={{maxWidth:780}}>
            <div style={{fontFamily:v4Theme.fontBody,fontSize:11,letterSpacing:1.5,
              textTransform:'uppercase',color:v4Theme.muted,fontWeight:600,marginBottom:14}}>
              Nouveau · Par secteur d'activité
            </div>
            <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:64,fontWeight:700,
              color:v4Theme.ink,margin:0,letterSpacing:-2,lineHeight:1.05,textWrap:'balance'}}>
              Pensé pour <em style={{
                background:`linear-gradient(135deg, ${v4Theme.blue}, ${v4Theme.purple})`,
                WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
                fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>
                votre commerce.</em>
            </h2>
          </div>
          <a href="tour-virtuel-360/index.html#secteurs" style={{display:'inline-flex',alignItems:'center',gap:8,
            fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.ink,fontWeight:600,
            textDecoration:'none',borderBottom:`2px solid ${v4Theme.teal}`,paddingBottom:4}}>
            Voir les 9 secteurs en détail →
          </a>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16}}>
          {sectors.map(s=>(
            <a key={s.n} href={`tour-virtuel-360/${s.s}/index.html`} style={{
              textDecoration:'none',background:v4Theme.surface,borderRadius:20,
              padding:'22px 24px',border:`1px solid ${v4Theme.border}`,
              display:'flex',alignItems:'center',gap:18,color:v4Theme.ink,
              boxShadow:'0 4px 16px rgba(10,24,64,0.03)'}}>
              <div style={{width:46,height:46,borderRadius:14,flexShrink:0,
                background:`linear-gradient(135deg, ${s.c}, ${s.c}80)`,
                display:'flex',alignItems:'center',justifyContent:'center',
                boxShadow:`0 4px 12px ${s.c}40`}}>
                <div style={{width:14,height:14,borderRadius:'50%',background:'#fff',
                  boxShadow:'0 0 0 3px rgba(255,255,255,0.35)'}}/>
              </div>
              <div style={{minWidth:0,flex:1}}>
                <div style={{fontFamily:v4Theme.fontDisplay,fontSize:17,fontWeight:600,
                  color:v4Theme.ink,letterSpacing:-0.3,marginBottom:3,
                  whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{s.n}</div>
                <div style={{fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.inkSoft,
                  lineHeight:1.4,textWrap:'pretty'}}>{s.d}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Mountain tours feature, promotes the dedicated ski-resort page ─────
const HomeMountain = () => (
  <section style={{padding:'120px 56px',background:'#0a1840',position:'relative',
    overflow:'hidden',borderTop:`1px solid ${v4Theme.border}`}}>
    {/* sky gradient overlay */}
    <div style={{position:'absolute',inset:0,
      background:'linear-gradient(180deg, #6ea2c6 0%, #9cc8e2 35%, #cfe9f8 65%, #f5f0e0 100%)'}}/>
    {/* sun */}
    <div style={{position:'absolute',top:80,right:'18%',width:120,height:120,borderRadius:'50%',
      background:`radial-gradient(circle at 35% 35%, #fff7d6, ${v4Theme.warm} 50%, ${v4Theme.warm}80 75%, transparent)`,
      boxShadow:`0 0 100px ${v4Theme.warm}aa, 0 0 200px ${v4Theme.warm}55`}}/>
    {/* mountain silhouettes */}
    <svg style={{position:'absolute',bottom:0,left:0,width:'100%',height:'55%',
      pointerEvents:'none'}} viewBox="0 0 1440 360" preserveAspectRatio="none">
      <path d="M0,360 L0,250 L180,150 L320,200 L460,120 L580,180 L720,80 L860,170 L1000,140 L1180,200 L1320,160 L1440,210 L1440,360 Z"
        fill="#5a7090" opacity="0.5"/>
      <path d="M0,360 L0,290 L120,210 L260,260 L400,180 L540,240 L680,160 L820,230 L960,190 L1120,250 L1280,220 L1440,260 L1440,360 Z"
        fill="#2a3d66" opacity="0.85"/>
      <path d="M0,360 L0,320 L180,280 L380,310 L580,270 L780,300 L1000,260 L1200,300 L1440,280 L1440,360 Z"
        fill="#0a1840"/>
      {/* snow caps on far peaks */}
      <path d="M180,150 L210,170 L250,165 L290,180 L320,200 L300,190 L260,185 L220,180 Z" fill="#fff" opacity="0.85"/>
      <path d="M460,120 L490,140 L530,135 L560,160 L580,180 L555,170 L515,160 L490,150 Z" fill="#fff" opacity="0.9"/>
      <path d="M720,80 L750,100 L790,95 L820,120 L860,170 L820,140 L780,130 L750,115 Z" fill="#fff" opacity="0.95"/>
    </svg>
    {/* falling snow */}
    {[12,28,42,58,72,86,18,36,52,68,82,94].map((x,i)=>{
      const dur = 8 + (i%5)*3;
      return (
        <div key={i} style={{position:'absolute',top:-20,left:`${x}%`,
          width:4,height:4,borderRadius:'50%',background:'#fff',
          opacity:0.75,
          animation:`v4snow-${i} ${dur}s linear infinite`,
          animationDelay:`${-i*0.7}s`,
          boxShadow:'0 0 4px rgba(255,255,255,0.7)'}}/>
      );
    })}
    <style>{`
      ${[12,28,42,58,72,86,18,36,52,68,82,94].map((x,i)=>`
        @keyframes v4snow-${i} { to { transform: translate3d(${(i%2?20:-20)}px, 700px, 0); opacity: 0; } }
      `).join('')}
    `}</style>

    <div style={{maxWidth:1440,margin:'0 auto',position:'relative',
      display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:80,alignItems:'center'}}>
      <div>
        <div style={{display:'inline-flex',alignItems:'center',gap:8,
          padding:'8px 14px',borderRadius:999,
          background:'rgba(255,255,255,0.7)',border:`1px solid rgba(10,24,64,0.15)`,
          backdropFilter:'blur(10px)',
          fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.ink,fontWeight:600,marginBottom:32}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:v4Theme.warm,
            boxShadow:`0 0 0 4px ${v4Theme.warm}40`}}/>
          Nouveau · Service dédié
        </div>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:88,fontWeight:700,letterSpacing:-3,
          color:v4Theme.ink,margin:0,lineHeight:1.02,marginBottom:24,textWrap:'balance'}}>
          Vous opérez<br/>
          <em style={{
            background:`linear-gradient(135deg, ${v4Theme.blue}, ${v4Theme.purple})`,
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
            fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>
            une montagne ?</em>
        </h2>
        <p style={{fontFamily:v4Theme.fontBody,fontSize:19,color:v4Theme.inkSoft,
          maxWidth:560,margin:'0 0 32px',lineHeight:1.55,textWrap:'pretty'}}>
          Stations de ski, centres de plein air, sentiers, pourvoiries. On capte les sommets, les remontées, les départs et les panoramas, en pleine saison. Page dédiée avec calendrier, forfaits et exemples.
        </p>
        <div style={{display:'flex',gap:12,alignItems:'center',flexWrap:'wrap'}}>
          <a href="tour-virtuel-360/montagne-ski/index.html" style={{display:'inline-flex',alignItems:'center',gap:8,
            background:v4Theme.ink,color:'#fff',border:'none',borderRadius:999,
            padding:'18px 30px',fontFamily:v4Theme.fontBody,fontWeight:700,fontSize:16,
            textDecoration:'none',boxShadow:'0 8px 24px rgba(10,24,64,0.25)'}}>
            Voir Tours de montagne →
          </a>
          <a href="contact.html" style={{display:'inline-flex',alignItems:'center',gap:8,
            background:'rgba(255,255,255,0.7)',color:v4Theme.ink,
            border:'1px solid rgba(10,24,64,0.15)',borderRadius:999,
            padding:'18px 26px',fontFamily:v4Theme.fontBody,fontWeight:600,fontSize:15,
            textDecoration:'none',backdropFilter:'blur(10px)'}}>
            Devis station
          </a>
        </div>
      </div>
      {/* stats card stack */}
      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        {[
          {n:'Hiver',l:'captation en saison, pistes enneigées et remontées en marche',c:v4Theme.warm},
          {n:'2 jours',l:'sur place selon la taille du domaine',c:v4Theme.teal},
          {n:'Google',l:'images publiées sur Google Maps et intégrables à votre site',c:v4Theme.blue},
        ].map((s,i)=>(
          <div key={i} style={{
            padding:'24px 28px',background:'rgba(255,255,255,0.85)',
            borderRadius:20,backdropFilter:'blur(14px)',
            border:'1px solid rgba(255,255,255,0.6)',
            boxShadow:'0 12px 30px rgba(10,24,64,0.12)',
            display:'flex',alignItems:'baseline',gap:18}}>
            <div style={{fontFamily:v4Theme.fontDisplay,fontSize:44,fontWeight:700,
              color:s.c,letterSpacing:-1.5,lineHeight:1,flexShrink:0,minWidth:120}}>{s.n}</div>
            <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.inkSoft,
              lineHeight:1.45}}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HomeStats = () => {
  const stats = [
    {n:'85 %',t:'des consommateurs sont plus enclins à choisir un commerce après avoir lu des avis positifs',c:v4Theme.blue},
    {n:'80 %',t:'préfèrent un commerce qui répond à tous ses avis',c:v4Theme.teal},
    {n:'74 %',t:'recherchent des avis publiés dans les trois derniers mois',c:v4Theme.purple},
    {n:'41 %',t:'lisent toujours les avis avant de choisir un commerce',c:v4Theme.warm},
  ];
  return (
    <section style={{padding:'120px 56px',background:v4Theme.surface,borderTop:`1px solid ${v4Theme.border}`}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:64,fontWeight:700,letterSpacing:-2,
          color:v4Theme.ink,margin:0,marginBottom:64,maxWidth:900,lineHeight:1.1,textWrap:'balance'}}>
          Vos clients vous cherchent <em style={{
            background:`linear-gradient(135deg, ${v4Theme.blue}, ${v4Theme.teal})`,
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
            fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>maintenant.</em> Vous trouvent-ils ?
        </h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:24}}>
          {stats.map((s,i)=>(
            <div key={i} style={{padding:'32px 0',borderTop:`2px solid ${s.c}`}}>
              <div style={{fontFamily:v4Theme.fontDisplay,fontSize:80,fontWeight:700,
                letterSpacing:-3,color:s.c,lineHeight:1,marginBottom:16}}>{s.n}</div>
              <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.inkSoft,lineHeight:1.5}}>
                {s.t}
              </div>
            </div>
          ))}
        </div>
        <p style={{fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted,marginTop:32}}>
          Source : <a href="https://www.brightlocal.com/research/local-consumer-review-survey/" rel="noopener" style={{color:v4Theme.muted}}>BrightLocal, Local Consumer Review Survey 2026</a> (1 002 consommateurs américains).
        </p>
      </div>
    </section>
  );
};

const HomeApp = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="home"/>
    <HomeHero/>
    <HomeServices/>
    <HomeSectors/>
    <HomeMountain/>
    <HomeStats/>
    <V4FinalCTA title="Prêt à devenir" gradientPart="populaire dans votre localité ?"/>
    <V4Footer/>
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp/>);