From 63864a991be0a6f3886fb4c97f82adac36df5715 Mon Sep 17 00:00:00 2001
From: lfirmin <lfirmin@student.42.fr>
Date: Thu, 26 Feb 2026 03:39:49 +0100
Subject: [PATCH] edit mutuel panel

---
 public/mutuelles.json                |  95 +++++++++++++++++
 src/components/ComparisonSection.jsx | 146 ++++++++++++++++-----------
 src/components/Footer.jsx            |  12 +--
 src/components/GuideSection.jsx      |   2 +-
 src/components/MutuelleCard.jsx      |  88 ++++++++--------
 src/components/Navbar.jsx            |   2 +-
 src/hooks/useMutuelles.js            |  25 +++++
 7 files changed, 263 insertions(+), 107 deletions(-)
 create mode 100644 public/mutuelles.json
 create mode 100644 src/hooks/useMutuelles.js

diff --git a/public/mutuelles.json b/public/mutuelles.json
new file mode 100644
index 0000000..8254de4
--- /dev/null
+++ b/public/mutuelles.json
@@ -0,0 +1,95 @@
+{
+  "mutuelles": [
+    {
+      "rang": 1,
+      "nom": "Experia conseil",
+      "slogan": "Experia conseil",
+      "couleur": "#2563EB",
+      "initiales": "NCA",
+      "meilleurChoix": true,
+      "tags": ["Actifs", "Seniors"],
+      "couvertures": { "soins": 3, "dentaire": 2, "optique": 3 },
+      "score": 9.8,
+      "promo": null,
+      "lien": "https://experia-conseils.fr/"
+    },
+    {
+      "rang": 2,
+      "nom": "ECG",
+      "slogan": "groupe pereire",
+      "couleur": "#1444ff",
+      "initiales": "ID",
+      "meilleurChoix": false,
+      "tags": ["Actifs"],
+      "couvertures": { "soins": 3, "dentaire": 2, "optique": 3 },
+      "score": 9.5,
+      "promo": null,
+      "lien": "https://pereire.co/"
+    },
+    {
+      "rang": 3,
+      "nom": "JSC santé",
+      "slogan": "Excellent rapport qualité-prix",
+      "couleur": "#FF1111",
+      "initiales": "YE",
+      "meilleurChoix": false,
+      "tags": ["Actifs", "Familles"],
+      "couvertures": { "soins": 3, "dentaire": 3, "optique": 2 },
+      "score": 9.3,
+      "promo": null,
+      "lien": "https://www.jscsante.fr/"
+    },
+    {
+      "rang": 4,
+      "nom": "Biomay",
+      "slogan": "Excellence pour seniors",
+      "couleur": "#2563EB",
+      "initiales": "SM",
+      "meilleurChoix": false,
+      "tags": ["Seniors"],
+      "couvertures": { "soins": 3, "dentaire": 3, "optique": 3 },
+      "score": 9.1,
+      "promo": null,
+      "lien": "https://www.biomay.fr/"
+    },
+    {
+      "rang": 5,
+      "nom": "NCA",
+      "slogan": "Flexibilité maximale",
+      "couleur": "#0891B2",
+      "initiales": "AP",
+      "meilleurChoix": false,
+      "tags": ["Seniors", "Indépendants"],
+      "couvertures": { "soins": 2, "dentaire": 3, "optique": 3 },
+      "score": 8.9,
+      "promo": null,
+      "lien": "https://ncassurances.net/"
+    },
+    {
+      "rang": 6,
+      "nom": "Helse",
+      "slogan": "Rapport qualité-prix optimal",
+      "couleur": "#059669",
+      "initiales": "HE",
+      "meilleurChoix": false,
+      "tags": ["Actifs", "Étudiants"],
+      "couvertures": { "soins": 2, "dentaire": 2, "optique": 3 },
+      "score": 8.7,
+      "promo": null,
+      "lien": "https://www.helse.fr"
+    },
+    {
+      "rang": 7,
+      "nom": "Helse",
+      "slogan": "Rapport qualité-prix optimal",
+      "couleur": "#059669",
+      "initiales": "HE",
+      "meilleurChoix": false,
+      "tags": ["Actifs", "Étudiants"],
+      "couvertures": { "soins": 2, "dentaire": 2, "optique": 3 },
+      "score": 8.7,
+      "promo": null,
+      "lien": "https://www.helse.fr"
+    }
+  ]
+}
diff --git a/src/components/ComparisonSection.jsx b/src/components/ComparisonSection.jsx
index bda99ca..221554a 100644
--- a/src/components/ComparisonSection.jsx
+++ b/src/components/ComparisonSection.jsx
@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion'
 import { FiAward, FiArrowRight } from 'react-icons/fi'
-import { mutuelles } from '../data/mutuelles'
-import MutuelleCard from './MutuelleCard'
+import { useMutuelles } from '../hooks/useMutuelles'
+import MutuelleCard, { LogoMutuelle } from './MutuelleCard'
 
 const medals = ['🏆', '🥈', '🥉']
 
@@ -16,36 +16,31 @@ function TopCard({ mutuelle, index }) {
           : 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
       }`}
     >
-      {/* Badge */}
-      {isFirst && (
+      {/* Badge meilleur choix */}
+      {mutuelle.meilleurChoix && (
         <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
           ⭐ Meilleur Choix 2026
         </div>
       )}
 
       <div className="flex items-start justify-between mb-5 mt-1">
-        {/* Logo */}
-        <div
-          className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-lg shadow-md"
-          style={{ backgroundColor: mutuelle.primaryColor }}
-        >
-          {mutuelle.initials}
-        </div>
+        {/* Logo (favicon ou initiales) */}
+        <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-lg" />
 
-        {/* Medal + rank */}
+        {/* Médaille */}
         <span className="text-2xl">{medals[index]}</span>
       </div>
 
-      <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.name}</div>
-      <div className="text-xs text-slate-500 mb-4">{mutuelle.tagline}</div>
+      <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.nom}</div>
+      <div className="text-xs text-slate-500 mb-4">{mutuelle.slogan}</div>
 
       {/* Tags */}
       <div className="flex gap-1.5 flex-wrap mb-5">
-        {mutuelle.idealFor.map((tag) => (
+        {mutuelle.tags.map((tag) => (
           <span
             key={tag}
             className="text-[11px] font-medium px-2 py-0.5 rounded-full"
-            style={{ backgroundColor: mutuelle.lightBg, color: mutuelle.primaryColor }}
+            style={{ backgroundColor: `${mutuelle.couleur}18`, color: mutuelle.couleur }}
           >
             {tag}
           </span>
@@ -53,33 +48,55 @@ function TopCard({ mutuelle, index }) {
       </div>
 
       {/* Promo */}
-      {mutuelle.offer && (
+      {mutuelle.promo && (
         <div className="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold text-center py-2 rounded-xl">
-          🎁 {mutuelle.offer}
+          🎁 {mutuelle.promo}
         </div>
       )}
 
       {/* Score + CTA */}
       <div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100">
         <div>
-          <div className="text-3xl font-extrabold" style={{ color: mutuelle.primaryColor }}>
+          <div className="text-3xl font-extrabold" style={{ color: mutuelle.couleur }}>
             {mutuelle.score}
             <span className="text-sm font-medium text-slate-400"> /10</span>
           </div>
           <div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div>
         </div>
-        <button
+        <a
+          href={mutuelle.lien}
+          target="_blank"
+          rel="noopener noreferrer"
           className="flex items-center gap-1.5 text-sm font-bold text-white px-4 py-2 rounded-xl hover:opacity-90 transition-opacity shadow-md"
-          style={{ backgroundColor: mutuelle.primaryColor }}
+          style={{ backgroundColor: mutuelle.couleur }}
         >
           Voir l'offre <FiArrowRight size={13} />
-        </button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="grid md:grid-cols-3 gap-6">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-64 bg-slate-100 rounded-3xl" />
+        ))}
+      </div>
+      <div className="space-y-3 mt-14">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className="h-20 bg-slate-100 rounded-2xl" />
+        ))}
       </div>
     </div>
   )
 }
 
 export default function ComparisonSection() {
+  const { mutuelles, loading, error } = useMutuelles()
+
   return (
     <section id="classement" className="pt-10 pb-20 bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -99,44 +116,57 @@ export default function ComparisonSection() {
           </p>
         </div>
 
-        {/* Top 3 grid */}
-        <div className="grid md:grid-cols-3 gap-6 mb-14">
-          {mutuelles.slice(0, 3).map((m, i) => (
-            <motion.div
-              key={m.id}
-              initial={{ opacity: 0, y: 24 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.1, duration: 0.45 }}
-            >
-              <TopCard mutuelle={m} index={i} />
-            </motion.div>
-          ))}
-        </div>
+        {/* Erreur */}
+        {error && (
+          <div className="text-center text-red-500 py-10">{error}</div>
+        )}
 
-        {/* Divider */}
-        <div className="flex items-center gap-4 mb-8">
-          <div className="flex-1 h-px bg-slate-100" />
-          <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
-            Classement complet
-          </span>
-          <div className="flex-1 h-px bg-slate-100" />
-        </div>
+        {/* Chargement */}
+        {loading && !error && <LoadingSkeleton />}
 
-        {/* Full list */}
-        <div className="space-y-3">
-          {mutuelles.map((m, i) => (
-            <motion.div
-              key={m.id}
-              initial={{ opacity: 0, x: -16 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.06, duration: 0.4 }}
-            >
-              <MutuelleCard mutuelle={m} />
-            </motion.div>
-          ))}
-        </div>
+        {/* Contenu */}
+        {!loading && !error && (
+          <>
+            {/* Top 3 */}
+            <div className="grid md:grid-cols-3 gap-6 mb-14">
+              {mutuelles.slice(0, 3).map((m, i) => (
+                <motion.div
+                  key={m.rang}
+                  initial={{ opacity: 0, y: 24 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1, duration: 0.45 }}
+                >
+                  <TopCard mutuelle={m} index={i} />
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Séparateur */}
+            <div className="flex items-center gap-4 mb-8">
+              <div className="flex-1 h-px bg-slate-100" />
+              <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
+                Classement complet
+              </span>
+              <div className="flex-1 h-px bg-slate-100" />
+            </div>
+
+            {/* Liste complète */}
+            <div className="space-y-3">
+              {mutuelles.map((m, i) => (
+                <motion.div
+                  key={m.rang}
+                  initial={{ opacity: 0, x: -16 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.06, duration: 0.4 }}
+                >
+                  <MutuelleCard mutuelle={m} />
+                </motion.div>
+              ))}
+            </div>
+          </>
+        )}
       </div>
     </section>
   )
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 3e38984..2f2e8af 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -36,7 +36,7 @@ const socials = [
 
 export default function Footer() {
   return (
-    <footer className="bg-slate-900 text-slate-400">
+    <footer className="bg-slate-900 text-slate-400 relative z-10">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
         {/* Main grid */}
@@ -49,26 +49,26 @@ export default function Footer() {
                 <MdPets className="text-white text-lg" />
               </div>
               <span className="font-extrabold text-xl text-white tracking-tight">
-                Mon <span className="text-indigo-400">Gaston</span>
+                Assurez<span className="text-indigo-400">Moi</span>
               </span>
             </div>
             <address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
               Votre comparateur d'assurances<br />
-              33 avenue Roger Salengro<br />
+              1 Rue john doe<br />
               59100 Roubaix, France
             </address>
             <a
               href="mailto:contact@mongaston.com"
               className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
             >
-              contact@mongaston.com
+              contact@assurezmoi.com
             </a>
             <div className="mt-2">
               <a
                 href="tel:+33180891030"
                 className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
               >
-                01 80 89 10 30
+                01 02 03 04 05
               </a>
             </div>
           </div>
@@ -133,7 +133,7 @@ export default function Footer() {
         {/* Bottom bar */}
         <div className="border-t border-slate-800 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
           <p className="text-xs text-slate-600 text-center sm:text-left">
-            © 2026 Mon Gaston — Tous droits réservés.
+            © 2026 AssurezMoi — Tous droits réservés.
             <span className="mx-2 text-slate-700">·</span>
             Comparateur de mutuelles santé & assurances
           </p>
diff --git a/src/components/GuideSection.jsx b/src/components/GuideSection.jsx
index c1998e6..b11eae1 100644
--- a/src/components/GuideSection.jsx
+++ b/src/components/GuideSection.jsx
@@ -82,7 +82,7 @@ export default function GuideSection() {
           </div>
 
           {/* Sidebar */}
-          <div className="lg:col-span-1">
+          <div className="lg:col-span-1 self-start">
             <div className="sticky top-24 space-y-4">
 
               {/* Guides card */}
diff --git a/src/components/MutuelleCard.jsx b/src/components/MutuelleCard.jsx
index 51670c7..3fa3cc7 100644
--- a/src/components/MutuelleCard.jsx
+++ b/src/components/MutuelleCard.jsx
@@ -1,22 +1,32 @@
+import { useState } from 'react'
 import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi'
-import { MdLocalHospital } from 'react-icons/md'
 
-const hospConfig = {
-  orange: {
-    bg: 'bg-orange-50',
-    text: 'text-orange-700',
-    border: 'border-orange-200',
-  },
-  green: {
-    bg: 'bg-emerald-50',
-    text: 'text-emerald-700',
-    border: 'border-emerald-200',
-  },
-  teal: {
-    bg: 'bg-teal-50',
-    text: 'text-teal-700',
-    border: 'border-teal-200',
-  },
+// Favicon auto-chargé depuis le lien, fallback sur les initiales
+export function LogoMutuelle({ mutuelle, className = '' }) {
+  const [faviconError, setFaviconError] = useState(false)
+
+  const faviconUrl =
+    mutuelle.lien && !faviconError
+      ? `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(mutuelle.lien)}`
+      : null
+
+  return (
+    <div
+      className={`rounded-2xl flex items-center justify-center font-extrabold text-white flex-shrink-0 shadow-md overflow-hidden ${className}`}
+      style={{ backgroundColor: faviconUrl ? 'transparent' : mutuelle.couleur }}
+    >
+      {faviconUrl ? (
+        <img
+          src={faviconUrl}
+          alt=""
+          className="w-full h-full object-contain"
+          onError={() => setFaviconError(true)}
+        />
+      ) : (
+        <span>{mutuelle.initiales}</span>
+      )}
+    </div>
+  )
 }
 
 function FeatureDots({ count }) {
@@ -54,8 +64,7 @@ function ScoreBar({ score, color }) {
 }
 
 export default function MutuelleCard({ mutuelle }) {
-  const hosp = hospConfig[mutuelle.hospColor] || hospConfig.teal
-  const isFirst = mutuelle.rank === 1
+  const isFirst = mutuelle.rang === 1
 
   return (
     <div
@@ -65,35 +74,30 @@ export default function MutuelleCard({ mutuelle }) {
           : 'border-slate-100 hover:border-slate-200'
       }`}
     >
-      {/* Rank badge */}
+      {/* Rang */}
       <div
         className={`w-8 h-8 rounded-xl flex items-center justify-center text-sm font-bold flex-shrink-0 ${
           isFirst ? 'bg-indigo-600 text-white shadow-md shadow-indigo-300' : 'bg-slate-100 text-slate-500'
         }`}
       >
-        {mutuelle.rank}
+        {mutuelle.rang}
       </div>
 
-      {/* Logo */}
-      <div
-        className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-sm flex-shrink-0 shadow-md"
-        style={{ backgroundColor: mutuelle.primaryColor }}
-      >
-        {mutuelle.initials}
-      </div>
+      {/* Logo (favicon ou initiales) */}
+      <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-sm" />
 
-      {/* Name + tags */}
+      {/* Nom + tags */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 flex-wrap mb-1">
-          <span className="font-bold text-slate-900 truncate">{mutuelle.name}</span>
-          {isFirst && (
+          <span className="font-bold text-slate-900 truncate">{mutuelle.nom}</span>
+          {mutuelle.meilleurChoix && (
             <span className="bg-amber-50 text-amber-600 border border-amber-200 text-[10px] font-extrabold px-2 py-0.5 rounded-full whitespace-nowrap">
               ⭐ Meilleur Choix
             </span>
           )}
         </div>
         <div className="flex items-center gap-1.5 flex-wrap">
-          {mutuelle.idealFor.map((tag) => (
+          {mutuelle.tags.map((tag) => (
             <span
               key={tag}
               className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
@@ -104,39 +108,41 @@ export default function MutuelleCard({ mutuelle }) {
         </div>
       </div>
 
-      {/* Features */}
+      {/* Points de couverture */}
       <div className="hidden md:flex flex-col gap-2 flex-shrink-0">
         <div className="flex items-center gap-2">
           <FiActivity className="text-slate-300 text-xs flex-shrink-0" />
           <span className="text-[11px] text-slate-500 w-12">Soins</span>
-          <FeatureDots count={mutuelle.soins} />
+          <FeatureDots count={mutuelle.couvertures.soins} />
         </div>
         <div className="flex items-center gap-2">
           <FiSmile className="text-slate-300 text-xs flex-shrink-0" />
           <span className="text-[11px] text-slate-500 w-12">Dentaire</span>
-          <FeatureDots count={mutuelle.dentaire} />
+          <FeatureDots count={mutuelle.couvertures.dentaire} />
         </div>
         <div className="flex items-center gap-2">
           <FiEye className="text-slate-300 text-xs flex-shrink-0" />
           <span className="text-[11px] text-slate-500 w-12">Optique</span>
-          <FeatureDots count={mutuelle.optique} />
+          <FeatureDots count={mutuelle.couvertures.optique} />
         </div>
       </div>
 
-
       {/* Score */}
       <div className="hidden lg:block flex-shrink-0">
-        <ScoreBar score={mutuelle.score} color={mutuelle.primaryColor} />
+        <ScoreBar score={mutuelle.score} color={mutuelle.couleur} />
       </div>
 
       {/* CTA */}
-      <button
+      <a
+        href={mutuelle.lien}
+        target="_blank"
+        rel="noopener noreferrer"
         className="flex items-center gap-2 text-white font-bold text-sm px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
-        style={{ backgroundColor: mutuelle.primaryColor }}
+        style={{ backgroundColor: mutuelle.couleur }}
       >
         Voir l'offre
         <FiArrowRight />
-      </button>
+      </a>
     </div>
   )
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 0fd1ea3..f022f42 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -25,7 +25,7 @@ export default function Navbar() {
               <MdPets className="text-white text-lg" />
             </div>
             <span className="font-extrabold text-xl tracking-tight text-slate-900">
-              Mon <span className="text-indigo-600">Gaston</span>
+              Assurez<span className="text-indigo-600">Moi</span>
             </span>
           </a>
 
diff --git a/src/hooks/useMutuelles.js b/src/hooks/useMutuelles.js
new file mode 100644
index 0000000..4fbd812
--- /dev/null
+++ b/src/hooks/useMutuelles.js
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+
+export function useMutuelles() {
+  const [mutuelles, setMutuelles] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetch('/mutuelles.json')
+      .then((res) => {
+        if (!res.ok) throw new Error('Impossible de charger les données')
+        return res.json()
+      })
+      .then((data) => {
+        setMutuelles(data.mutuelles)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError(err.message)
+        setLoading(false)
+      })
+  }, [])
+
+  return { mutuelles, loading, error }
+}