// Page À propos

const AboutStory = () => (
  <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:24,letterSpacing:-1.2,lineHeight:1.1}}>
          Seize ans à <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'}}>regarder Google</em> changer.
        </h2>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:17,color:v4Theme.inkSoft,lineHeight:1.7,
          display:'flex',flexDirection:'column',gap:20}}>
          <p style={{margin:0}}>
            Vue360 est fondé par Jacob Bédard, consultant en référencement depuis seize ans. Au fil des mandats, un constat revient : la fiche Google et les images d'un commerce pèsent autant que son site web dans le choix d'un client, et la plupart des entreprises des Laurentides ne les exploitent pas encore.
          </p>
          <p style={{margin:0}}>
            On vit dans les Laurentides. On connaît la région : les commerces saisonniers, les chalets, les restos qui se cachent sur des chemins de terre, les boutiques qui dépendent du touriste qui passe une fin de semaine. Et on connaît Google : ses humeurs, ses mises à jour, ce qu'il valorise vraiment quand quelqu'un cherche « café Mont-Tremblant ».
          </p>
          <p style={{margin:0}}>
            On ne fait pas de marketing en gros. On ne sous-traite pas à une équipe à l'autre bout du monde. On débarque chez vous, caméra à la main, on capture votre commerce comme il faut, et on s'assure que Google le montre bien. C'est tout. C'est simple. Et ça marche.
          </p>
        </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.teal,
            letterSpacing:2,fontWeight:700,marginBottom:16,textTransform:'uppercase'}}>Vue 360 en chiffres</div>
          {[
            ['16 ans','En référencement'],
            ['100 %','Québécois, basé dans les Laurentides'],
            ['QC','Service en français, d\'ici'],
          ].map(([n,t])=>(
            <div key={n} style={{padding:'20px 0',borderBottom:`1px solid ${v4Theme.border}`,
              display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div style={{fontFamily:v4Theme.fontDisplay,fontSize:36,fontWeight:700,
                color:v4Theme.ink,letterSpacing:-1}}>{n}</div>
              <div style={{fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.inkSoft,textAlign:'right',maxWidth:140}}>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const AboutValues = () => (
  <section style={{padding:'120px 56px',background:v4Theme.bg2}}>
    <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'}}>
        Ce qu'on <em style={{
          background:`linear-gradient(135deg, ${v4Theme.purple}, ${v4Theme.teal})`,
          WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
          fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>refuse</em> de faire.
      </h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
        {[
          {h:'Pas de devis qui s\'étire',d:'Un prix annoncé, c\'est le prix payé. Pas de "options en plus", pas de surprise sur la facture finale.',c:v4Theme.blue},
          {h:'Pas de contrat 12 mois',d:'On vous garde parce que ça marche, pas parce que vous êtes coincé. Sans engagement : vous restez parce que les résultats sont là.',c:v4Theme.teal},
          {h:'Pas de promesses creuses',d:'On ne promet pas la première position Google. On promet une fiche optimisée, des visites mesurables, un suivi régulier.',c:v4Theme.purple},
        ].map(v=>(
          <div key={v.h} style={{background:v4Theme.surface,padding:36,borderRadius:24,
            border:`1px solid ${v4Theme.border}`,boxShadow:'0 4px 20px rgba(10,24,64,0.04)'}}>
            <div style={{width:6,height:32,background:v.c,borderRadius:3,marginBottom:24}}/>
            <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:24,fontWeight:600,color:v4Theme.ink,
              margin:0,marginBottom:12,letterSpacing:-0.5}}>{v.h}</h3>
            <p style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.inkSoft,lineHeight:1.6,margin:0}}>{v.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const AboutApp = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="about"/>
    <V4PageHero
      eyebrow="À propos · Laurentides"
      title="On rend visible"
      gradient="ce qui mérite de l'être."
      subtitle="Vue360 accompagne les commerces et les lieux touristiques des Laurentides : tours virtuels 360°, fiche Google et avis, pour reprendre le contrôle de leur visibilité sur Google."
      accent={v4Theme.purple}/>
    <AboutStory/>
    <AboutValues/>
    <V4FinalCTA title="Travaillons" gradientPart="ensemble." body="On regarde votre fiche Google, on en discute, et vous décidez. Pas de pression, pas d'engagement."/>
    <V4Footer/>
  </div>
);
ReactDOM.createRoot(document.getElementById('root')).render(<AboutApp/>);