// Service: conception de site web pensé pour être trouvé localement

const SiteDetail = () => (
  <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}}>
          Un site qui <em style={{color:v4Theme.pink,fontStyle:'italic'}}>fait sonner le téléphone.</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}}>
            Un beau site qui ne sort pas dans les recherches de votre région ne rapporte rien. On conçoit le vôtre pour qu'il soit <strong style={{color:v4Theme.ink}}>trouvé localement</strong> dès sa mise en ligne : une page claire par service, les villes que vous desservez, vos coordonnées identiques à celles de vos fiches Google, Apple et Bing.
          </p>
          <p style={{margin:0}}>
            Il est pensé d'abord pour le cellulaire, là où vos clients vous cherchent. Rapide, simple à lire, avec un appel ou une demande de soumission à portée de pouce sur chaque page.
          </p>
          <p style={{margin:0}}>
            Les textes sont écrits pour vos clients, dans leurs mots, et structurés pour que Google et les assistants IA comprennent exactement ce que vous offrez et où.
          </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}}>
          {[
            'Design sur mesure aux couleurs de votre commerce',
            'Site rapide, conçu d\'abord pour le cellulaire',
            'Une page par service, structurée pour les recherches de votre région',
            'Textes rédigés pour vos clients',
            'Appel en un clic et formulaire de demande sur chaque page',
            'Site relié à vos fiches Google, Apple et Bing',
            'Mise en ligne incluse',
          ].map(t=>(
            <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:24,height:24,borderRadius:'50%',background:`${v4Theme.pink}15`,
                color:v4Theme.pink,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.pink,
            letterSpacing:-2,lineHeight:1,marginBottom:8}}>2 950<span style={{fontSize:24,color:v4Theme.muted,fontWeight:500}}> $</span></div>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.muted,marginBottom:24}}>soumission gratuite selon votre projet</div>
          <a href={v4Href('contact.html')} style={{display:'block',width:'100%',background:v4Theme.pink,
            color:v4Theme.ink,border:'none',borderRadius:999,padding:'16px',
            fontFamily:v4Theme.fontBody,fontWeight:600,fontSize:15,cursor:'pointer',
            textDecoration:'none',textAlign:'center',boxSizing:'border-box',marginBottom:12}}>
            Demander une soumission
          </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'}}>
            Parler de mon projet
          </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 la Visibilité locale et un tour virtuel 360° intégré au site. On vous fait un prix d'ensemble.
          </div>
        </div>
      </div>
    </div>
  </section>
);

const SiteApp = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="site"/>
    <V4PageHero
      eyebrow="Service · Conception de site web"
      title="Un site conçu"
      gradient="pour être trouvé."
      subtitle="Un site rapide, clair sur cellulaire et bâti pour sortir quand on cherche votre service dans votre région. Pas juste une vitrine : un outil qui amène des appels."
      accent={v4Theme.pink}/>
    <SiteDetail/>
    <V4FinalCTA title="Votre prochain site," gradientPart="trouvé dès le jour 1 ?"/>
    <V4Footer/>
  </div>
);
ReactDOM.createRoot(document.getElementById('root')).render(<SiteApp/>);