// Centre de ressources Google, Vue360
// Pas un blogue. Un centre d'outils, guides et modèles pour la visibilité Google des PME.

// ─── Type & category config ────────────────────────────────────────────────────
const RES_TYPES = {
  outil:     { label:'Outil',     color:v4Theme.blue,   bg:'#e8eeff' },
  checklist: { label:'Checklist', color:v4Theme.teal,   bg:'#e2f6f6' },
  guide:     { label:'Guide',     color:v4Theme.purple, bg:'#f2e8ff' },
  modele:    { label:'Modèle',    color:v4Theme.warm,   bg:'#fff5e0' },
};

const RES_CATS = ['Tous','Fiche Google','Avis','Photos & visites','SEO local','Modèles'];

// ─── Demande de diagnostic (formulaire envoyé par SendGrid via /api/contact) ──
const DField = ({label, name, type='text', required, placeholder, span}) => (
  <label style={{display:'block', gridColumn: span ? '1 / -1' : undefined}}>
    <div style={{fontFamily:v4Theme.fontBody, fontSize:12.5, fontWeight:600,
      color:v4Theme.ink, marginBottom:7, letterSpacing:0.2}}>
      {label}{required && <span style={{color:v4Theme.purple, marginLeft:3}}>*</span>}
    </div>
    <input name={name} type={type} required={required} placeholder={placeholder}
      style={{width:'100%', padding:'13px 15px', borderRadius:11,
        border:`1.5px solid ${v4Theme.border}`, background:v4Theme.bg,
        fontFamily:v4Theme.fontBody, fontSize:14.5, color:v4Theme.ink,
        boxSizing:'border-box', outline:'none'}}/>
  </label>
);

const DiagnosticTool = () => {
  const [res, setRes] = React.useState(null);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState('');
  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setSending(true);
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    try {
      const r = await fetch(v4Href('api/diagnostic'), {method:'POST',
        headers:{'Content-Type':'application/json'}, body:JSON.stringify(data)});
      const j = await r.json().catch(() => ({}));
      if (r.ok && j.ok) setRes(j);
      else setErr(j.error || "L'analyse n'a pas fonctionné. Réessayez dans un instant.");
    } catch (_) {
      setErr("L'analyse n'a pas fonctionné. Réessayez dans un instant.");
    }
    setSending(false);
  };

  const lvlColor = (n) => n >= 85 ? v4Theme.teal : n >= 65 ? v4Theme.blue : n >= 40 ? v4Theme.warm : '#e03c3c';
  const R = 52, CIRC = 2 * Math.PI * R;

  return (
    <div id="diagnostic" style={{
      background:v4Theme.surface, borderRadius:28, scrollMarginTop:100,
      border:`1px solid ${v4Theme.border}`,
      boxShadow:'0 8px 40px rgba(10,24,64,0.08)', overflow:'hidden',
    }}>
      <div style={{height:4, background:`linear-gradient(90deg, ${v4Theme.blue}, ${v4Theme.purple}, ${v4Theme.pink})`}}/>
      {!res ? (
      <div style={{padding:'52px 56px', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:64, alignItems:'start'}}>
        <div>
          <div style={{
            display:'inline-flex', alignItems:'center', gap:8,
            padding:'6px 13px', borderRadius:999, marginBottom:24,
            background:RES_TYPES.outil.bg,
            fontFamily:v4Theme.fontBody, fontSize:12, color:v4Theme.blue, fontWeight:700,
            letterSpacing:0.4, textTransform:'uppercase',
          }}>Gratuit · Analyse en 30 secondes</div>
          <h2 style={{
            fontFamily:v4Theme.fontDisplay, fontSize:52, fontWeight:700,
            color:v4Theme.ink, margin:'0 0 16px', letterSpacing:-1.5, lineHeight:1.1,
          }}>Diagnostic de fiche Google</h2>
          <p style={{
            fontFamily:v4Theme.fontBody, fontSize:17, color:v4Theme.inkSoft,
            margin:'0 0 28px', lineHeight:1.65, maxWidth:460,
          }}>
            Entrez le nom de votre commerce : notre outil lit votre fiche Google, l'analyse et vous donne un score et vos 3 priorités, en mots simples.
          </p>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {[
              {n:'1', l:'On trouve votre fiche sur Google Maps', c:v4Theme.blue},
              {n:'2', l:'On analyse catégorie, avis, photos, horaires, site', c:v4Theme.purple},
              {n:'3', l:'Vous voyez votre score et quoi faire en premier', c:v4Theme.pink},
            ].map(s => (
              <div key={s.n} style={{display:'flex', alignItems:'center', gap:16,
                padding:'14px 18px', background:v4Theme.bg2, borderRadius:14}}>
                <div style={{width:32, height:32, borderRadius:'50%', background:s.c, color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:v4Theme.fontDisplay, fontWeight:700, fontSize:15, flexShrink:0}}>{s.n}</div>
                <div style={{fontFamily:v4Theme.fontBody, fontSize:15, color:v4Theme.ink}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <form onSubmit={submit} style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, position:'relative'}}>
          <V4PlaceInput label="Nom du commerce" name="commerce" required span placeholder="Commencez à taper le nom…"
            onPick={(it) => { const v = document.querySelector('#diagnostic [name=ville]'); if (v) v.value = it.secondary; }}/>
          <DField label="Ville ou adresse" name="ville" required span placeholder="Ex : Val-David"/>
          <DField label="Prénom" name="prenom" required/>
          <DField label="Courriel" name="courriel" type="email" required/>
          <input type="text" name="site_web" tabIndex={-1} autoComplete="off" aria-hidden="true"
            style={{position:'absolute', left:'-9999px', width:1, height:1, opacity:0}}/>
          <div style={{gridColumn:'1 / -1'}}>
            {err && <div role="alert" style={{fontFamily:v4Theme.fontBody, fontSize:14, color:'#b42318',
              marginBottom:12}}>{err}</div>}
            <button type="submit" disabled={sending} style={{width:'100%', background:v4Theme.ink,
              color:'#fff', border:'none', borderRadius:999, padding:'18px', opacity: sending ? 0.7 : 1,
              fontFamily:v4Theme.fontBody, fontWeight:700, fontSize:15.5, cursor:'pointer'}}>
              {sending ? 'Analyse de votre fiche en cours…' : 'Analyser ma fiche gratuitement →'}
            </button>
            <div style={{fontFamily:v4Theme.fontBody, fontSize:12, color:v4Theme.muted, marginTop:12, lineHeight:1.5}}>
              Analyse faite à partir des données publiques de Google. Vos coordonnées servent seulement à vous recontacter.
            </div>
          </div>
        </form>
      </div>
      ) : (
      <div style={{padding:'48px 56px', display:'grid', gridTemplateColumns:'220px 1fr', gap:56, alignItems:'start'}}>
        <div style={{textAlign:'center'}}>
          <svg width={140} height={140} viewBox="0 0 140 140" style={{display:'block', margin:'0 auto 16px'}}>
            <circle cx={70} cy={70} r={R} fill="none" stroke={`${lvlColor(res.analyse.score)}22`} strokeWidth={12}/>
            <circle cx={70} cy={70} r={R} fill="none" stroke={lvlColor(res.analyse.score)} strokeWidth={12}
              strokeDasharray={CIRC} strokeDashoffset={CIRC - CIRC * res.analyse.score / 100}
              strokeLinecap="round" transform="rotate(-90 70 70)"/>
            <text x={70} y={64} textAnchor="middle" style={{fontFamily:v4Theme.fontDisplay, fontSize:34, fontWeight:700, fill:v4Theme.ink}}>{res.analyse.score}</text>
            <text x={70} y={84} textAnchor="middle" style={{fontFamily:v4Theme.fontBody, fontSize:13, fill:v4Theme.muted}}>/ 100</text>
          </svg>
          <div style={{display:'inline-flex', padding:'8px 18px', borderRadius:999,
            background:`${lvlColor(res.analyse.score)}18`, fontFamily:v4Theme.fontBody,
            fontSize:14, fontWeight:700, color:v4Theme.ink, marginBottom:16}}>{res.analyse.niveau}</div>
          <div style={{fontFamily:v4Theme.fontBody, fontSize:13, color:v4Theme.inkSoft, lineHeight:1.6}}>
            <strong style={{color:v4Theme.ink}}>{res.fiche.nom}</strong><br/>{res.fiche.adresse}<br/>
            {res.fiche.note != null && <span>{res.fiche.note} ★ · {res.fiche.avis} avis</span>}
          </div>
          {res.fiche.maps && <a href={res.fiche.maps} target="_blank" rel="noopener"
            style={{display:'inline-block', marginTop:10, fontFamily:v4Theme.fontBody, fontSize:13, color:v4Theme.blue}}>Voir la fiche →</a>}
          <div><button onClick={() => setRes(null)} style={{marginTop:16, background:'none',
            border:`1px solid ${v4Theme.border}`, borderRadius:999, padding:'10px 18px',
            fontFamily:v4Theme.fontBody, fontSize:13, cursor:'pointer', color:v4Theme.muted}}>Analyser une autre fiche</button></div>
        </div>
        <div>
          <p style={{fontFamily:v4Theme.fontBody, fontSize:17, color:v4Theme.ink, lineHeight:1.65, margin:'0 0 24px'}}>{res.analyse.resume}</p>
          {(res.analyse.forces || []).length > 0 && (
            <div style={{marginBottom:24}}>
              <div style={{fontFamily:v4Theme.fontBody, fontSize:11, letterSpacing:1.5, textTransform:'uppercase',
                color:v4Theme.muted, fontWeight:600, marginBottom:10}}>Vos forces</div>
              {res.analyse.forces.map((t, i) => (
                <div key={i} style={{fontFamily:v4Theme.fontBody, fontSize:14.5, color:v4Theme.inkSoft, lineHeight:1.6}}>✓ {t}</div>
              ))}
            </div>
          )}
          <div style={{fontFamily:v4Theme.fontBody, fontSize:11, letterSpacing:1.5, textTransform:'uppercase',
            color:v4Theme.muted, fontWeight:600, marginBottom:14}}>Vos 3 priorités</div>
          <div style={{display:'flex', flexDirection:'column', gap:12, marginBottom:24}}>
            {res.analyse.priorites.map((p, i) => (
              <div key={i} style={{display:'flex', gap:16, padding:'18px 22px', background:v4Theme.bg,
                borderRadius:18, border:`1px solid ${v4Theme.border}`, alignItems:'flex-start'}}>
                <div style={{width:30, height:30, borderRadius:'50%', flexShrink:0,
                  background:[v4Theme.blue, v4Theme.purple, v4Theme.pink][i], color:'#fff',
                  fontFamily:v4Theme.fontDisplay, fontSize:14, fontWeight:700,
                  display:'flex', alignItems:'center', justifyContent:'center'}}>{i + 1}</div>
                <div>
                  <div style={{fontFamily:v4Theme.fontBody, fontSize:15, fontWeight:700, color:v4Theme.ink, marginBottom:4}}>{p.titre}</div>
                  <div style={{fontFamily:v4Theme.fontBody, fontSize:14, color:v4Theme.inkSoft, lineHeight:1.55}}>{p.pourquoi} <strong style={{color:v4Theme.ink}}>{p.action}</strong></div>
                </div>
              </div>
            ))}
          </div>
          {(res.analyse.a_verifier || []).length > 0 && (
            <div style={{fontFamily:v4Theme.fontBody, fontSize:13, color:v4Theme.muted, lineHeight:1.6, marginBottom:24}}>
              À vérifier dans votre fiche : {res.analyse.a_verifier.join(' · ')}
            </div>
          )}
          <V4Button primary href="contact.html">Faire corriger ma fiche par Vue360 →</V4Button>
        </div>
      </div>
      )}
    </div>
  );
};

// ─── Resource card data ────────────────────────────────────────────────────────
const RES_ITEMS = [
  {
    type:'checklist', cat:'Fiche Google',
    title:'Les 12 points d\'une fiche Google parfaite',
    desc:'Le minimum requis pour chaque élément, nom, catégories, heures, attributs, produits, description. Imprimable, case à cocher.',
    tags:['Fiche Google','Débutant'], time:'10 min',
  },
  {
    type:'guide', cat:'Avis',
    title:'Répondre aux mauvais avis sans aggraver la situation',
    desc:'Quatre structures de réponse selon le type d\'avis : insatisfait légitime, mauvaise foi, erreur de commerce, avis sans texte.',
    tags:['Avis','Communication'], time:'8 min',
  },
  {
    type:'modele', cat:'Modèles',
    title:'12 réponses aux avis, prêtes à copier',
    desc:'Modèles prêts à personnaliser : 4 pour les 5 étoiles, 4 pour les critiques légitimes, 4 pour les avis injustes ou hors sujet.',
    tags:['Modèles','Avis'], time:'Prêt à utiliser',
  },
  {
    type:'guide', cat:'Fiche Google',
    title:'Choisir les bonnes catégories Google par secteur',
    desc:'Les catégories exactes pour restaurants, hôtels, spas, cliniques, boutiques et pourvoiries des Laurentides, avec exemples.',
    tags:['Fiche Google','SEO local'], time:'12 min',
  },
  {
    type:'guide', cat:'Photos & visites',
    title:'Photos qui convertissent : angles, lumière, ordre',
    desc:'Les 7 photos que Google valorise le plus, dans quel ordre les publier, et comment nommer vos fichiers pour le référencement local.',
    tags:['Photos & visites','SEO local'], time:'15 min',
  },
  {
    type:'checklist', cat:'Fiche Google',
    title:'Audit mensuel de votre fiche Google',
    desc:'8 vérifications à faire le premier lundi du mois : heures, photos, avis, questions-réponses, publications, catégories, attributs, description.',
    tags:['Fiche Google','Maintenance'], time:'5 min / mois',
  },
  {
    type:'guide', cat:'SEO local',
    title:'Fiche Google vs. site web : quoi prioriser en 2026',
    desc:'Pour beaucoup de PME locales, la fiche Google génère plus de contacts que le site. On explique pourquoi, et comment répartir vos efforts.',
    tags:['SEO local','Stratégie'], time:'10 min',
  },
  {
    type:'guide', cat:'Avis',
    title:'Obtenir plus d\'avis, légitimement',
    desc:'Le bon moment pour demander, le canal le plus efficace (SMS vs. email vs. carte), et ce que les CGU Google interdisent formellement.',
    tags:['Avis','Stratégie'], time:'12 min',
  },
  {
    type:'modele', cat:'Modèles',
    title:'Description de fiche Google par secteur',
    desc:'9 descriptions optimisées pour le SEO local : restaurants, hôtels, spas, boutiques, cliniques, pourvoiries, microbrasseries, salles de réception, immobilier.',
    tags:['Modèles','Fiche Google'], time:'Prêt à utiliser',
  },
];

// ─── ResourceCard ──────────────────────────────────────────────────────────────
const ResCard = ({ item }) => {
  const t = RES_TYPES[item.type];
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background:v4Theme.surface, borderRadius:24, border:`1px solid ${v4Theme.border}`,
        padding:'28px', display:'flex', flexDirection:'column',
        boxShadow: hovered ? '0 14px 44px rgba(10,24,64,0.11)' : '0 4px 20px rgba(10,24,64,0.04)',
        transform: hovered ? 'translateY(-4px)' : 'none',
        transition:'transform 0.2s, box-shadow 0.2s',
      }}
    >
      <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
        <span style={{
          padding:'5px 11px', borderRadius:999, background:t.bg,
          fontFamily:v4Theme.fontBody, fontSize:11, fontWeight:700,
          color:t.color, letterSpacing:0.5, textTransform:'uppercase',
        }}>{t.label}</span>
        <span style={{fontFamily:v4Theme.fontBody, fontSize:12, color:v4Theme.muted}}>{item.time}</span>
      </div>

      <h3 style={{
        fontFamily:v4Theme.fontDisplay, fontSize:22, fontWeight:600,
        color:v4Theme.ink, margin:'0 0 12px', letterSpacing:-0.4,
        lineHeight:1.2, textWrap:'balance',
      }}>{item.title}</h3>

      <p style={{
        fontFamily:v4Theme.fontBody, fontSize:14, color:v4Theme.inkSoft,
        lineHeight:1.65, margin:'0 0 22px', flex:1,
      }}>{item.desc}</p>

      <div style={{display:'flex', gap:6, flexWrap:'wrap', marginBottom:20}}>
        {item.tags.map(tag => (
          <span key={tag} style={{
            padding:'4px 10px', borderRadius:999,
            background:v4Theme.bg, border:`1px solid ${v4Theme.border}`,
            fontFamily:v4Theme.fontBody, fontSize:11, color:v4Theme.muted, fontWeight:500,
          }}>{tag}</span>
        ))}
      </div>

      <div style={{paddingTop:18, borderTop:`1px solid ${v4Theme.border}`}}>
        <a href="contact.html" style={{
          fontFamily:v4Theme.fontBody, fontSize:13, fontWeight:700,
          color:t.color, textDecoration:'none',
          display:'inline-flex', alignItems:'center', gap:6,
        }}>Accéder →</a>
      </div>
    </div>
  );
};

// ─── Main page ─────────────────────────────────────────────────────────────────
const RessourcesPage = () => {
  const [activeFilter, setActiveFilter] = React.useState('Tous');

  const filtered = activeFilter === 'Tous'
    ? RES_ITEMS
    : RES_ITEMS.filter(r => r.tags.includes(activeFilter) || r.cat === activeFilter);

  return (
    <div style={{background:v4Theme.bg, color:v4Theme.ink, fontFamily:v4Theme.fontBody}}>
      <V4Nav active="ressources"/>

      {/* ── HERO ─────────────────────────────────────────────────────────── */}
      <section style={{
        padding:'80px 56px 64px', background:v4Theme.bg, position:'relative', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', top:-160, right:-80, width:520, height:520, borderRadius:'50%',
          background:`radial-gradient(circle, ${v4Theme.teal}28, transparent 65%)`, filter:'blur(40px)',
        }}/>
        <div style={{
          position:'absolute', bottom:-60, left:-80, width:420, height:420, borderRadius:'50%',
          background:`radial-gradient(circle, ${v4Theme.warm}35, 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:36,
          }}>
            <span style={{width:6, height:6, borderRadius:'50%', background:v4Theme.teal,
              boxShadow:`0 0 0 4px ${v4Theme.teal}30`}}/>
            Gratuit · Mis à jour régulièrement · Fait pour les PME des Laurentides
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:80, alignItems:'center'}}>
            <div>
              <h1 style={{
                fontFamily:v4Theme.fontDisplay, fontWeight:700, fontSize:88, lineHeight:1.05,
                letterSpacing:-3, color:v4Theme.ink, margin:'0 0 24px', textWrap:'balance',
              }}>
                Votre fiche 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-block', paddingRight:'0.08em',
                }}>de A à Z.</span>
              </h1>
              <p style={{
                fontFamily:v4Theme.fontBody, fontSize:19, lineHeight:1.65, color:v4Theme.inkSoft,
                maxWidth:560, margin:0, textWrap:'pretty',
              }}>
                Pas un blogue. Des outils interactifs, des checklists et des modèles prêts à copier pour que votre commerce soit impossible à rater sur Google, sans agence, sans jargon.
              </p>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              {[
                {n:'9',     l:'guides et outils',    c:v4Theme.blue},
                {n:'Gratuit', l:'diagnostic de fiche Google',  c:v4Theme.teal},
                {n:'100%',  l:'gratuit et local',    c:v4Theme.purple},
                {n:'0',     l:'jargon marketing',    c:v4Theme.warm},
              ].map((s,i) => (
                <div key={i} style={{
                  padding:'24px 20px', background:v4Theme.surface,
                  borderRadius:18, border:`1px solid ${v4Theme.border}`,
                  boxShadow:'0 4px 16px rgba(10,24,64,0.04)',
                }}>
                  <div style={{
                    fontFamily:v4Theme.fontDisplay, fontSize:44, fontWeight:700,
                    color:s.c, letterSpacing:-1.5, lineHeight:1, marginBottom:6,
                  }}>{s.n}</div>
                  <div style={{fontFamily:v4Theme.fontBody, fontSize:13, color:v4Theme.inkSoft}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── DIAGNOSTIC (outil vedette) ────────────────────────────────────── */}
      <section style={{padding:'0 56px 80px', background:v4Theme.bg}}>
        <div style={{maxWidth:1440, margin:'0 auto'}}>
          <div style={{
            fontFamily:v4Theme.fontBody, fontSize:11, letterSpacing:1.5,
            textTransform:'uppercase', color:v4Theme.muted, fontWeight:600, marginBottom:16,
          }}>Outil vedette</div>
          <DiagnosticTool/>
        </div>
      </section>

      {/* ── BIBLIOTHÈQUE ─────────────────────────────────────────────────── */}
      <section style={{
        padding:'80px 56px 120px', background:v4Theme.bg2,
        borderTop:`1px solid ${v4Theme.border}`,
      }}>
        <div style={{maxWidth:1440, margin:'0 auto'}}>
          {/* header + filters */}
          <div style={{
            display:'flex', alignItems:'flex-end', justifyContent:'space-between',
            marginBottom:40, gap:24, flexWrap:'wrap',
          }}>
            <div>
              <div style={{
                fontFamily:v4Theme.fontBody, fontSize:11, letterSpacing:1.5,
                textTransform:'uppercase', color:v4Theme.muted, fontWeight:600, marginBottom:10,
              }}>Guides & modèles</div>
              <h2 style={{
                fontFamily:v4Theme.fontDisplay, fontSize:52, fontWeight:700,
                color:v4Theme.ink, margin:0, letterSpacing:-2, lineHeight:1.1,
              }}>La bibliothèque</h2>
            </div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
              {RES_CATS.map(cat => (
                <button key={cat} onClick={() => setActiveFilter(cat)} style={{
                  padding:'10px 18px', borderRadius:999, cursor:'pointer',
                  fontFamily:v4Theme.fontBody, fontSize:13, fontWeight:600,
                  background: activeFilter === cat ? v4Theme.ink : v4Theme.surface,
                  color: activeFilter === cat ? '#fff' : v4Theme.inkSoft,
                  border:`1px solid ${activeFilter === cat ? v4Theme.ink : v4Theme.border}`,
                  transition:'all 0.15s',
                }}>{cat}</button>
              ))}
            </div>
          </div>

          {/* grid */}
          {filtered.length > 0 ? (
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
              {filtered.map((r,i) => <ResCard key={i} item={r}/>)}
            </div>
          ) : (
            <div style={{
              textAlign:'center', padding:'60px 0',
              fontFamily:v4Theme.fontBody, fontSize:16, color:v4Theme.muted,
            }}>Aucune ressource dans cette catégorie, revenez bientôt.</div>
          )}
        </div>
      </section>

      {/* ── CTA ──────────────────────────────────────────────────────────── */}
      <V4FinalCTA
        title="On regarde votre fiche ensemble"
        gradientPart="gratuitement ?"
        body="15 minutes au téléphone. On analyse votre fiche, on identifie les 3 actions qui changeront le plus de choses. Sans engagement."
      />
      <V4Footer/>
    </div>
  );
};

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