108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_Z66giR2s1nG",null],["b_I2hJYMzomic",null],["b_ItbkNRqoaOn",null]] 10e:[["b_Z66giR2s1nG",{"templateVersionId":null,"templateCanonId":null}],["b_I2hJYMzomic",{"templateVersionId":null,"templateCanonId":null}],["b_ItbkNRqoaOn",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["U0dQAfqNGGp","$D2025-07-28T11:35:24.769Z"],["b_5RCMKws7VVN","$D2025-07-28T11:36:52.002Z"],["b_FpvgWVt4kiK","$D2025-07-28T11:37:24.048Z"],["b_ZTC6DQ7QGDg","$D2025-07-28T11:40:45.404Z"],["b_wR8lO5N0qz6","$D2025-07-28T11:42:21.523Z"],["b_uf9aURYMFZ7","$D2025-07-28T11:43:21.200Z"],["b_nitdYi4A5un","$D2025-07-28T11:44:11.240Z"],["b_Z51imEhsFTd","$D2025-07-28T11:45:13.727Z"],["b_h0dVMc2gNau","$D2025-07-28T11:47:08.125Z"],["b_FaDHwMGj43V","$D2025-07-28T11:48:28.608Z"],["b_xQdLJJlEe2m","$D2025-07-28T11:49:51.515Z"],["b_9gUpOiztrQX","$D2025-07-28T11:51:06.595Z"],["b_SLNGcim8EnZ","$D2025-07-28T11:52:38.724Z"],["b_NfPdgE3dt0Y","$D2025-07-28T11:53:26.706Z"],["b_bTAdU1Ncltg","$D2025-07-28T11:54:07.715Z"],["b_S2CF88l8s1e","$D2025-07-28T11:56:45.878Z"],["b_UXf8uENVzqf","$D2025-07-28T11:59:18.595Z"],["b_cJCt4RrPO4l","$D2025-07-28T12:02:24.499Z"],["b_avQqHCr8nfF","$D2025-07-28T12:04:43.128Z"],["b_CJpoZdzBWnR","$D2025-07-28T12:06:39.785Z"],["b_OxFIwQL4JZE","$D2025-07-28T12:07:56.097Z"],["b_GpYkwAKzUO3","$D2025-07-28T12:13:12.204Z"],["b_xlw3vW3DC2M","$D2025-07-28T12:28:37.827Z"],["b_LXObzee4t1B","$D2025-07-28T12:30:45.553Z"],["b_4hcXnpXiorZ","$D2025-07-28T12:32:00.979Z"],["b_zILbYk91eEl","$D2025-07-28T12:33:27.883Z"],["b_sbMFc6FW6Rv","$D2025-07-28T12:34:28.261Z"],["b_ioXLw9aOMHL","$D2025-07-28T12:37:28.347Z"],["b_TTqZh2I6TlT","$D2025-07-28T12:40:04.893Z"],["b_kdFSLFWNOV6","$D2025-07-28T12:40:50.246Z"],["b_c0vvpJ49sJS","$D2025-07-28T12:41:54.866Z"],["b_hjVlmow8rwE","$D2025-07-28T12:42:43.312Z"],["b_idd1ncMkgyC","$D2025-07-28T12:53:56.304Z"],["b_svXJgXauHCx","$D2025-07-28T12:54:46.873Z"],["b_bLRwXgiuriN","$D2025-07-28T12:56:31.609Z"],["b_x6V16spLy0T","$D2025-07-28T12:57:05.659Z"],["b_WF1oqX8PCs9","$D2025-07-28T12:58:11.821Z"],["b_M9OgW3jsbfb","$D2025-07-28T12:59:16.338Z"],["b_rv1sJN3cKSk","$D2025-07-28T13:00:15.651Z"],["b_7VndXk7CDy2","$D2025-07-28T13:02:18.434Z"],["b_dn1ffUG3cb0","$D2025-07-28T13:03:28.920Z"],["b_vOFl6fpGK2g","$D2025-07-28T13:04:12.898Z"],["b_xxeQUq7JBhH","$D2025-07-28T13:04:43.529Z"],["b_uZw64LtBLO0","$D2025-07-28T13:06:29.143Z"],["b_GnWdKqxZFaD","$D2025-07-28T13:07:27.990Z"],["b_pwlpEV6cbwD","$D2025-07-28T13:08:26.655Z"],["b_j5PiJWUYp1j","$D2025-07-28T13:10:05.946Z"],["b_mE8QkxdiVDu","$D2025-07-28T13:10:46.096Z"],["b_bEhUQKTWv3o","$D2025-07-28T13:35:57.815Z"],["b_DdfvmZMeO4d","$D2025-07-28T13:42:18.008Z"],["b_kKDGYbKrXpw","$D2025-07-28T13:49:20.371Z"],["b_MpRnU8S9s4z","$D2025-07-28T13:52:06.668Z"],["b_E56o8nsgX32","$D2025-07-28T13:54:05.674Z"],["b_QIqZyecxCw9","$D2025-07-28T13:55:51.693Z"],["b_wVT1xG1EveN","$D2025-07-28T13:57:25.023Z"],["b_oSLxEDiXDNq","$D2025-07-28T13:59:09.592Z"],["b_LEMkJcxQFTG","$D2025-07-28T14:01:48.972Z"],["b_OYaB8qcZMt3","$D2025-07-28T14:23:59.052Z"],["b_OgxVxeuY0mH","$D2025-07-28T14:29:47.303Z"],["b_h3gRw1baqVl","$D2025-07-28T14:31:33.315Z"],["b_zERl4Lr7q6E","$D2025-07-28T14:32:37.946Z"],["b_WXFybH4CRiJ","$D2025-07-28T14:33:53.655Z"],["b_t0eVrx1fLPb","$D2025-07-28T14:35:10.195Z"],["b_idlhoVBGDQA","$D2025-07-28T14:36:39.195Z"],["b_fczFmrybT8k","$D2025-07-28T14:38:23.643Z"],["b_1LYoVwnf51c","$D2025-07-28T14:41:51.776Z"],["b_J4JJf9sBKuN","$D2025-07-28T14:45:38.362Z"],["b_zcQ0RSO2dE5","$D2025-07-28T14:47:39.204Z"],["b_cxt0IAP8Abe","$D2025-07-28T14:49:30.372Z"],["b_csajGFOXtX5","$D2025-07-28T15:25:05.216Z"],["b_NS7Uh4GuuoD","$D2025-07-29T10:39:34.262Z"],["b_NVoVmhdOUQC","$D2025-07-29T10:47:28.520Z"],["b_pYi93TfCaIe","$D2025-07-29T10:48:12.133Z"],["b_KjjDy0qHfMW","$D2025-07-29T10:55:11.849Z"],["b_Ul53QcNcbge","$D2025-07-29T13:48:16.120Z"],["b_Dh2fVsdNA1t","$D2025-07-29T13:54:23.630Z"],["b_gtEf7LPEEIU","$D2025-07-29T13:56:25.017Z"],["b_L7Y3VuxQLb4","$D2025-07-29T13:59:04.373Z"],["b_ssYSaeXu6Ac","$D2025-07-29T14:01:30.465Z"],["b_0nOOArz3HTo","$D2025-07-29T14:03:43.524Z"],["b_xwKJftSivLf","$D2025-07-29T14:06:07.174Z"],["b_LKNPQL1DEHZ","$D2025-07-29T14:08:13.784Z"],["b_kJKdkIgmZNY","$D2025-07-29T14:10:46.523Z"],["b_Oxk6Xd5uWsA","$D2025-07-29T14:16:16.911Z"],["b_5cAuAIRR6za","$D2025-07-29T14:20:25.282Z"],["b_iZCqniOo0u9","$D2025-07-29T14:21:05.559Z"],["b_A2s9n9asuSy","$D2025-07-29T14:23:13.460Z"],["b_sfSwYBbs5FX","$D2025-07-29T14:45:57.089Z"],["b_E9F3zCn0DSI","$D2025-07-29T14:46:25.859Z"],["b_ZcP3u5Jb6Th","$D2025-07-29T14:55:36.435Z"],["b_UIxmPrZpI6L","$D2025-07-29T15:00:13.488Z"],["b_Mi08V5LYtUi","$D2025-07-29T15:06:22.514Z"],["b_4KgJJYVRFgY","$D2025-07-29T15:08:21.684Z"],["b_3jeSxoNQr8r","$D2025-07-29T15:10:06.704Z"],["b_gC5uQydFbrR","$D2025-07-29T15:16:35.182Z"],["b_UDlpsZxPsXI","$D2025-07-29T15:18:05.464Z"],["b_cL6z2tLWvAS","$D2025-07-29T15:19:03.737Z"],["b_wZmUeNAPWDU","$D2025-07-29T15:20:11.209Z"],["b_Xp084k8tZ6k","$D2025-07-29T15:28:47.401Z"],["b_hv5eLNJZy9u","$D2025-07-29T15:30:58.463Z"],["b_EiWpD7pIjFJ","$D2025-07-29T15:32:21.747Z"],["b_d8nNeDosv32","$D2025-07-29T15:33:02.258Z"],["b_y1yJtQvuAjv","$D2025-07-29T15:33:45.366Z"],["b_8aZ6ranUiFQ","$D2025-07-29T15:34:41.125Z"],["b_A0wXA9f1WBo","$D2025-07-29T15:37:03.800Z"],["b_ntkyCaigjDP","$D2025-07-29T15:37:43.995Z"],["b_PlgpSI7Rx2K","$D2025-07-29T15:49:17.441Z"],["b_C6jGF749npK","$D2025-07-29T15:50:38.909Z"],["b_yZmK1WJMonn","$D2025-07-29T15:59:03.630Z"],["b_HUZNYvcHb5k","$D2025-07-29T16:02:24.201Z"],["b_cgXDnTgjnll","$D2025-07-29T16:04:46.283Z"],["b_Uq4TwhaFAac","$D2025-07-29T16:05:17.724Z"],["b_cLlf4q4Fi7B","$D2025-07-29T16:06:18.285Z"],["b_QHKJhLgvwft","$D2025-07-29T16:10:09.117Z"],["b_1JeJOgccBGl","$D2025-07-29T16:15:36.202Z"],["b_RuUfAbYXe4K","$D2025-08-05T18:01:49.737Z"],["b_4EqYWt877Qu","$D2025-08-25T09:06:07.895Z"],["b_NyibyqBzXIq","$D2025-08-25T09:08:21.416Z"],["b_8EDy2YBppv3","$D2025-08-25T09:08:44.598Z"],["b_wBazE9RcGix","$D2025-08-25T09:09:15.644Z"],["b_5axPDJPZv6o","$D2025-08-25T09:10:43.971Z"],["b_k5X5WGi84Ef","$D2025-08-25T09:11:09.161Z"],["b_vyXipb5uypd","$D2025-08-25T09:16:42.563Z"],["b_wgD9Tdo2Evk","$D2025-08-25T09:16:43.981Z"],["b_B0aaVEJcYHD","$D2025-08-25T09:19:07.233Z"],["b_Mxr7vBgXMBh","$D2025-08-25T09:20:47.188Z"],["b_E7m4XbkVVfq","$D2025-08-25T09:22:10.596Z"],["b_8xh8jfqHCg1","$D2025-08-25T09:24:20.503Z"],["b_ViQ9zDePaAf","$D2025-08-25T09:26:19.062Z"],["b_kt1OOVoAmCM","$D2025-08-25T09:27:59.694Z"],["b_5XHiQgDL8sC","$D2025-08-25T09:32:44.560Z"],["b_xs0dmBuY0tZ","$D2025-08-25T10:55:49.255Z"],["b_YZo9A0oupvR","$D2025-08-25T10:57:19.420Z"],["b_jk1Orzngx2o","$D2025-08-25T21:09:40.858Z"],["b_UO4KMt5og9r","$D2025-08-25T21:12:32.711Z"],["b_NOFUoEZt9PH","$D2025-08-25T21:15:35.279Z"],["b_vM6wxRnp7VM","$D2025-08-25T21:16:54.980Z"],["b_GlqM4YU8cms","$D2025-08-25T21:18:23.240Z"],["b_MKG2XlbnZ4c","$D2025-08-25T21:20:11.806Z"],["b_Iqk32vY2eGR","$D2025-08-25T21:22:15.992Z"],["b_PkP9ppmyPce","$D2025-08-25T21:24:29.079Z"],["b_c4TP6aTIVYn","$D2025-08-27T14:54:35.925Z"],["b_E4t0dYFdY13","$D2025-08-27T14:55:45.435Z"],["b_OXcFIScQNLH","$D2025-08-27T15:02:21.142Z"],["b_cP2xq5fHVKG","$D2025-08-27T15:03:00.612Z"],["b_nGvtdLQwg4p","$D2025-08-27T15:06:08.166Z"],["b_OTc4MKTXVWm","$D2025-08-27T15:23:56.731Z"],["b_QyO8H84dmtl","$D2025-08-30T06:57:53.338Z"],["b_bfkaHEwzKp1","$D2025-08-30T07:05:36.706Z"],["b_QgbK1jowUiF","$D2025-08-30T07:21:58.089Z"],["b_VycHemhOLnD","$D2025-10-21T08:52:56.790Z"],["b_DoAmQ1GpTir","$D2025-10-21T08:54:13.834Z"],["b_WkmoD2Y4FPc","$D2025-10-21T10:09:28.226Z"],["b_iqKQNVyTqZs","$D2025-10-21T10:10:25.032Z"],["b_ZlP83Xwjp7N","$D2025-10-25T03:33:28.622Z"],["b_VZuBOvDuWx3","$D2025-10-25T03:35:20.004Z"],["b_Z66giR2s1nG","$D2025-10-25T03:38:05.608Z"],["b_I2hJYMzomic","$D2025-10-25T04:23:59.506Z"],["b_ItbkNRqoaOn","$D2025-10-25T04:41:59.922Z"]] 110:[["b_Z66giR2s1nG",false],["b_I2hJYMzomic",false],["b_ItbkNRqoaOn",false]] 111:[["b_Z66giR2s1nG","$undefined"],["b_I2hJYMzomic","$undefined"],["b_ItbkNRqoaOn","$undefined"]] 112:[["b_Z66giR2s1nG",null],["b_I2hJYMzomic",null],["b_ItbkNRqoaOn",null]] 113:[["b_Z66giR2s1nG",true],["b_I2hJYMzomic",true],["b_ItbkNRqoaOn",true]] 114:[["b_Z66giR2s1nG",true],["b_I2hJYMzomic",true],["b_ItbkNRqoaOn",true]] 115:[] 116:T9a0c4,[V0_FILE]markdown:file="README.md" isMerged="true" # careerpilotpro21 *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/Fllyi5Gyj9D) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21](https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/Fllyi5Gyj9D](https://v0.dev/chat/projects/Fllyi5Gyj9D)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/client-page.tsx" isMerged="true" "use client" import dynamic from "next/dynamic" // Skeleton loader amélioré function SkeletonLoader() { return (

{/* Header skeleton */}

{/* Logo skeleton */}

{/* Navigation skeleton */}

{[1, 2, 3, 4, 5].map((i) => (

))}

{/* Mobile menu button skeleton */}

{/* Hero section skeleton */}

{/* Hero text content skeleton */}

{/* CTA buttons skeleton */}

{/* Hero image skeleton */}

{/* Simulating the slideshow with overlapping rectangles */}

{/* Features section skeleton */}

{/* Section title skeleton */}

{/* Features grid skeleton */}

{[1, 2, 3, 4, 5, 6].map((i) => (

))}

{/* Services section skeleton */}

{/* Section title skeleton */}

{/* Pricing cards skeleton */}

{[1, 2, 3].map((i) => (

{[1, 2, 3, 4, 5].map((j) => (

))}

) } // Import dynamique du composant client (sans SSR) const CareerPilotProClient = dynamic(() => import("@/components/career-pilot-pro-client"), { ssr: false, // Désactive le rendu côté serveur pour ce composant loading: () => , }) export default function ClientPage() { return } [V0_FILE]typescriptreact:file="app/comment-ca-se-passe/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard-roi/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/formation-infographie/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/formation-simple/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/formation-visuelle/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/formation/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/notre-methodologie/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import ClientPage from "./client-page" export default function HomePage() { return } [V0_FILE]typescriptreact:file="app/quiz/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Clock, Users, Briefcase, Building, TrendingUp, Lightbulb, Target, Rocket, CheckCircle, ChevronLeft, ChevronRight, } from "lucide-react" import Link from "next/link" const quizSteps = [ { id: 1, question: "Combien d'heures passez-vous en recherche par dossier en moyenne ?", options: [ { text: "Moins de 5h", value: "lt5" }, { text: "5-10h", value: "5-10" }, { text: "10-15h", value: "10-15" }, { text: "Plus de 15h", value: "gt15" }, ], icon: Clock, }, { id: 2, question: "Quel est votre profil principal ?", options: [ { text: "Coach indépendant", value: "coach", icon: Users }, { text: "Cabinet d'outplacement", value: "outplacement", icon: Briefcase }, { text: "DRH / Responsable Mobilité en entreprise", value: "hr", icon: Building }, { text: "Consultant en évolution professionnelle", value: "consultant", icon: Lightbulb }, ], icon: Users, }, { id: 3, question: "Quelle est votre priorité actuelle pour votre activité ?", options: [ { text: "Gagner du temps", value: "time", icon: Clock }, { text: "Améliorer la qualité de mes accompagnements", value: "quality", icon: Target }, { text: "Accélérer le placement de mes clients", value: "placement", icon: Rocket }, { text: "Développer mon volume d'activité", value: "growth", icon: TrendingUp }, ], icon: Target, }, ] const serviceRecommendations = { fondation: { name: "Fondation", description: "Idéal pour structurer vos accompagnements et gagner en efficacité sur les dossiers standards.", roiBase: 150, }, momentum: { name: "Momentum", description: "Parfait pour accélérer la transition de vos clients et optimiser votre personal branding.", roiBase: 220, }, premium: { name: "Premium", description: "La solution complète pour un changement fondamental et une collaboration continue à haute valeur ajoutée.", roiBase: 280, }, } type Answer = string | null type Answers = { q1: Answer q2: Answer q3: Answer } const initialAnswers: Answers = { q1: null, q2: null, q3: null } export default function QualificationQuizPage() { const [currentStep, setCurrentStep] = useState(1) const [answers, setAnswers] = useState(initialAnswers) const [recommendedService, setRecommendedService] = useState(null) const [estimatedROI, setEstimatedROI] = useState(null) useEffect(() => { const storedAnswers = localStorage.getItem("careerPilotQuizAnswers") if (storedAnswers) { setAnswers(JSON.parse(storedAnswers)) } }, []) useEffect(() => { localStorage.setItem("careerPilotQuizAnswers", JSON.stringify(answers)) }, [answers]) const handleSelectOption = (questionKey: keyof Answers, value: string) => { setAnswers((prev) => ({ ...prev, [questionKey]: value })) } const nextStep = () => { if (currentStep < quizSteps.length) { setCurrentStep(currentStep + 1) } else if (currentStep === quizSteps.length) { // Calculate recommendation calculateRecommendation() setCurrentStep(currentStep + 1) // Move to results view } } const prevStep = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) } } const calculateRecommendation = () => { let score = 0 // Q1: Time if (answers.q1 === "lt5") score += 1 else if (answers.q1 === "5-10") score += 2 else if (answers.q1 === "10-15") score += 3 else if (answers.q1 === "gt15") score += 4 // Q2: Profile if (answers.q2 === "coach") score += 2 else if (answers.q2 === "consultant") score += 2 else if (answers.q2 === "outplacement") score += 3 else if (answers.q2 === "hr") score += 4 // Q3: Priority if (answers.q3 === "quality") score += 2 else if (answers.q3 === "time") score += 3 else if (answers.q3 === "placement") score += 4 else if (answers.q3 === "growth") score += 4 let serviceKey: keyof typeof serviceRecommendations if (score <= 6) { serviceKey = "fondation" } else if (score <= 9) { serviceKey = "momentum" } else { serviceKey = "premium" } setRecommendedService(serviceKey) const baseRoi = serviceRecommendations[serviceKey].roiBase const calculatedRoi = baseRoi + score * 5 // Add 5% ROI for each score point setEstimatedROI(calculatedRoi) } const resetQuiz = () => { setAnswers(initialAnswers) setCurrentStep(1) setRecommendedService(null) setEstimatedROI(null) localStorage.removeItem("careerPilotQuizAnswers") } const progress = (currentStep / (quizSteps.length + 1)) * 100 const currentQuestionData = quizSteps[currentStep - 1] const isCurrentStepValid = currentStep <= quizSteps.length ? answers[`q${currentStep}` as keyof Answers] !== null : true const pageVariants = { initial: { opacity: 0, x: 50 }, in: { opacity: 1, x: 0 }, out: { opacity: 0, x: -50 }, } const pageTransition = { type: "tween", ease: "anticipate", duration: 0.5, } return (

Votre Diagnostic Personnalisé {currentStep <= quizSteps.length && ( Étape {currentStep}/{quizSteps.length} )}

{currentStep <= quizSteps.length && currentQuestionData && (

{currentQuestionData.question}

{currentQuestionData.options.map((option) => ( handleSelectOption(`q${currentStep}` as keyof Answers, option.value)} className={`p-4 sm:p-5 border-2 rounded-lg text-left transition-all duration-200 ease-in-out flex items-center space-x-3 ${ answers[`q${currentStep}` as keyof Answers] === option.value ? "bg-primary/10 border-primary ring-2 ring-primary shadow-lg" : "bg-white hover:bg-stone-50 border-stone-300 hover:border-primary/70" }`} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} > {option.icon && ( )} {option.text} ))}

)} {currentStep > quizSteps.length && recommendedService && serviceRecommendations[recommendedService] && (

Votre Recommandation Personnalisée

{serviceRecommendations[recommendedService].name}

{serviceRecommendations[recommendedService].description}

{estimatedROI !== null && (

Estimation du ROI : {estimatedROI}%

)}

Cette recommandation est basée sur vos réponses. Pour une analyse plus approfondie et découvrir comment CareerPilotPro peut transformer votre activité :

)}

{currentStep <= quizSteps.length ? ( ) : ( )}

Propulsé par CareerPilotPro |{" "} Politique de confidentialité

) } [V0_FILE]typescriptreact:file="app/ressources/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/comparison-modal.tsx" isMerged="true" "use client" import { TrendingUp, Clock, Users, Target, Zap } from "lucide-react" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts" interface ComparisonModalProps { isOpen: boolean onClose: () => void useColors400?: boolean } const ComparisonModal = ({ isOpen, onClose, useColors400 }: ComparisonModalProps) => { // Données pour les graphiques const employersData = [ { name: "Employeurs Identifiés", traditional: 17.5, ai: 50, }, ] const qualityData = [ { name: "Méthode Traditionnelle", value: 30, color: "#B8860B" }, // gold-sienna-400 { name: "IA Career Intelligence Pack", value: 70, color: "#788D63" }, // tilleul-dense-400 ] const radarData = [ { subject: "Nombre d'Employeurs", traditional: 35, ai: 90, }, { subject: "Qualité des Données", traditional: 30, ai: 95, }, { subject: "Mise à Jour", traditional: 20, ai: 100, }, { subject: "Analyse Prédictive", traditional: 10, ai: 95, }, { subject: "Taux de Réussite", traditional: 40, ai: 85, }, { subject: "Rapidité", traditional: 30, ai: 90, }, { subject: "Satisfaction Client", traditional: 35, ai: 90, }, ] const insights = [ { value: "+35%", label: "Taux de Réussite Placement", icon: Target, color: "text-green-500", }, { value: "-40%", label: "Temps de Recherche", icon: Clock, color: "text-blue-500", }, { value: "+60%", label: "Satisfaction Client", icon: Users, color: "text-purple-500", }, { value: "+167%", label: "Plus d'Employeurs Qualifiés", icon: TrendingUp, color: "text-gold-sienna-400", }, ] const CustomTooltip = ({ active, payload, label }: any) => { if (active && payload && payload.length) { return (

{label}

{payload.map((entry: any, index: number) => (

{entry.dataKey === "traditional" ? "Méthode Traditionnelle" : "IA Career Intelligence Pack"}:{" "} {entry.value}

))}

) } return null } return (

{/* Remove the overlay and modal wrapper, show content directly */}

{/* Header - simplified for embedded view */}

Analyse Comparative

Outils Traditionnels vs Career Intelligence Pack

{/* Legend */}

Méthode Traditionnelle

Career Intelligence Pack

{/* Compact Charts Grid */}

{/* Employeurs Chart - Compact */}

Opportunités Identifiées

} />

{/* Quality Chart - Compact */}

Repositionnements < 3 mois

{qualityData.map((entry, index) => ( ))}

{/* Key Insights - Compact */}

Gains de Performance

{insights.map((insight, index) => (

{insight.value}

{insight.label}

))}

) } export default ComparisonModal [V0_FILE]typescriptreact:file="components/dashboard-previews.tsx" isMerged="true" export const AnalysisPreview = () => (

Analyse Express Content

Detailed content for Analyse Express would go here. This might include charts, key figures, and summaries, demonstrating the quick insights provided.

) export const PlaybookPreview = () => (

Career Intelligence Pack Content

Content showcasing the comprehensive Career Intelligence Pack, perhaps with steps, timelines, and resource examples. More extensive than the express analysis.

) export const DashboardLivePreview = () => (

Dashboard Live Content

A mock-up or key elements of what the live dashboard would display, emphasizing real-time data and interactive elements.

Live

Temps réel

) [V0_FILE]typescriptreact:file="components/final-cta-comment-ca-marche.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Zap, ShieldCheck } from "lucide-react" interface FinalCtaProps { onStartFirstPack: () => void onScheduleDemo: () => void } const avatarUrls = [ "/placeholder.svg?height=40&width=40", "/placeholder.svg?height=40&width=40", "/placeholder.svg?height=40&width=40", "/placeholder.svg?height=40&width=40", "/placeholder.svg?height=40&width=40", ] export default function FinalCtaCommentCaMarche({ onStartFirstPack, onScheduleDemo }: FinalCtaProps) { const sectionVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }, } return (

Prêt à tester sur votre prochain dossier ? Découvrez votre gain de temps et l'impact sur vos résultats en seulement 48h.

47 professionnels ont commencé cette semaine

Satisfait ou remboursé • Sans engagement

{avatarUrls.map((url, index) => ( ))}

+150

"CareerPilotPro a divisé par 10 mon temps de recherche. Indispensable !" - Sophie D., Coach Carrière

) } [V0_FILE]typescriptreact:file="components/flexible-engagement-visual.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Calendar, Package, Zap, HandCoins, CheckCircle, Lock, Unlock } from "lucide-react" export default function FlexibleEngagementVisual() { return (

{/* En-tête avec titre et sous-titre */}

Modèle sans engagement

Flexibilité totale adaptée à vos besoins

{/* Visualisation principale */}

{/* Ligne de temps */}

{/* Commande flexible */}

Commandez selon vos besoins réels

{[1, 10, 100].map((num, i) => ( {num} cahier{num > 1 ? "s" : ""}/mois ))}

Aucun minimum requis, adaptez vos commandes à votre activité

{/* Packs pré-payés */}

Packs pré-payés optionnels

Remises volumétriques Jusqu'à 15%

5% 10% 15%

Valable 12 mois

Entièrement optionnels, uniquement si avantageux pour vous

{/* Notre engagement */}

Nos intérêts alignés avec les vôtres

Nous devons prouver notre valeur à chaque dossier

Vous ne payez que si vous êtes satisfait de nos services

{/* Résumé visuel */}

Flexibilité totale

Sans engagement de durée

Aucun volume minimum

Commandez selon vos besoins

) } [V0_FILE]typescriptreact:file="components/impact-metrics-comment-ca-marche.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { TrendingUp, Users, Clock, CheckCircle, Percent } from "lucide-react" import CountUp from "react-countup" const metrics = [ { value: 10, suffix: "min", label: "Temps de recherche / dossier", subLabel: "(vs 15h avant)", icon: Clock, color: "text-blue-slate", prevValue: 900, }, { value: 280, suffix: "%", label: "ROI Moyen Constaté", subLabel: "Dès le premier mois", icon: TrendingUp, color: "text-gold-sienna", }, { value: 200, suffix: "+", label: "Professionnels Utilisateurs", subLabel: "Experts en transition", icon: Users, color: "text-tilleul-dense", }, { value: 37, suffix: "%", label: "Réduction Délai Placement", subLabel: "Accélération significative", icon: Percent, color: "text-red-500", }, // Using Percent as a placeholder { value: 93, suffix: "%", label: "Taux de Réussite", subLabel: "Des repositionnements", icon: CheckCircle, color: "text-green-500", }, ] export default function ImpactMetricsCommentCaMarche() { const sectionVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } }, } const cardVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: (i: number) => ({ opacity: 1, scale: 1, transition: { delay: i * 0.1, duration: 0.4, ease: "easeOut" }, }), } return (

{/* Background pattern */}

L'impact en chiffres

Des résultats concrets qui transforment la pratique de nos clients.

{/* Central Metric */}

Professionnels

Nous font confiance

{/* Other Metrics */} {metrics .filter((m) => m.label !== "Professionnels Utilisateurs") .map((metric, index) => (

{metric.prevValue !== undefined ? ( <> `${val}h`} enableScrollSpy scrollSpyOnce /> → ) : ( )}

{metric.label}

{metric.subLabel &&

{metric.subLabel}

}

))}

) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-economic-context.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { TrendingUp, Users, Briefcase, Building } from "lucide-react" // Assuming icons for metrics const MetricCard = ({ title, value, change, icon: Icon, }: { title: string; value: string; change?: string; icon: React.ElementType }) => (

{title}

{value}

{change &&

{change}

} ) export default function SlideEconomicContext() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Contexte Économique IA - France 2025 L'économie française en 2025 est marquée par une forte croissance des compétences digitales et IA.

Paris = épicentre européen de l'IA Business

Plus de 70% des investissements IA en France sont concentrés à Paris, avec une forte présence des sièges européens des géants de l'IA.

Initiatives Publiques Clés

France 2030: 2 Md€ pour l'IA Appels à projets BPI France

) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-feasibility-matrix.tsx" isMerged="true" "use client" import { motion } from "framer-motion" const transitionsData = [ { sector: "Sales Enablement AI", difficulty: "Moyenne", color: "bg-accent-ochre-400", duration: "3-6 mois", priority: "Haute", }, { sector: "AI pour RH Tech", difficulty: "Faible", color: "bg-accent-green-400", duration: "2-4 mois", priority: "Haute", }, { sector: "AI Product Management", difficulty: "Moyenne", color: "bg-accent-ochre-400", duration: "4-7 mois", priority: "Moyenne", }, { sector: "Process Automation (AI)", difficulty: "Élevée", color: "bg-accent-alert-400", duration: "6-9 mois", priority: "Faible", }, ] const ChallengeItem = ({ type, challenge, remediation }: { type: string; challenge: string; remediation: string }) => (

{type}

Challenge: {challenge}

Remédiation: {remediation}

) export default function SlideFeasibilityMatrix() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Matrice de Faisabilité des Transitions {transitionsData.map((item, index) => (

{item.sector}

Difficulté: {item.difficulty}

Durée estimée: {item.duration}

Priorité: {item.priority}

))}

Barrières et Challenges Identifiés

Considérations spécifiques pour un profil Senior Executive. ) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-personalized-recommendations.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight, CheckCircle } from "lucide-react" const recommendations = [ { sector: "Sales Enablement AI", match: "90%", reason: "Maîtrise des cycles de vente B2B complexes.", companies: "Gong.io, Outreach.io", color: "emerald", }, { sector: "AI pour RH Tech", match: "85%", reason: "Ancien CHRO + leadership transformation digitale RH.", companies: "Phenom AI, SmartRecruiters", color: "sky", }, { sector: "AI Product Management", match: "80%", reason: "Pilotage transversal de projets software + approche data-driven.", companies: "Aircall AI Labs, Meero", color: "purple", }, { sector: "Business Process Automation (avec AI)", match: "75%", reason: "Vision processus métier, optimisation opérationnelle.", companies: "UiPath, Automation Anywhere", color: "red", }, { sector: "AI-driven Customer Success & Retention", match: "70%", reason: "Expérience VP Operations + Management international.", companies: "Planhat, Gainsight", color: "blue", }, ] const colorMap = { emerald: "accent-green", sky: "accent-sky", purple: "accent-lavender", red: "accent-alert", blue: "accent-blue", } const RecommendationItem = ({ sector, match, reason, companies, color }: (typeof recommendations)[0]) => { const accentColor = colorMap[color as keyof typeof colorMap] || "accent-primary" return (

{sector}

{match} Match

{reason}

Exemples: {companies}

) } export default function SlidePersonalizedRecommendations() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Top 5 Recommandations pour Votre Profil Basé sur votre parcours Business/Management (Microsoft, ContentSquare) et scale-ups (Mollie, Greenhouse).

{recommendations.map((rec, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-strategic-plan.tsx" isMerged="true" "use client" import { motion } from "framer-motion" const timelineData = [ { quarter: "T2 2025", title: "Acquisition fondamentaux", tasks: ["Formation INSEAD", "MàJ profil LinkedIn"], align: "left", }, { quarter: "T3 2025", title: "Immersion écosystème", tasks: ["Formation MIT Sloan", "Vivatech (Networking)"], align: "right", }, { quarter: "T4 2025", title: "Projets & réseaux", tasks: ["Formation ESCP", "Mission consulting"], align: "left" }, { quarter: "T1 2026", title: "Candidatures & intégration", tasks: ["Candidatures scale-ups", "Intégration poste"], align: "right", }, ] export default function SlideStrategicPlan() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.15, delayChildren: 0.2 }, }, } const itemVariants = (align: string) => ({ hidden: { opacity: 0, x: align === "left" ? -50 : 50 }, visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 80 } }, }) return ( Plan Stratégique de Transition - 12 Mois

{/* Central Line */}

{timelineData.map((item, index) => (

{/* Dot on the line */}

{item.quarter}

{item.title}

{task}

))}

Objectif final: Intégrer une scale-up AI à Paris dans un rôle exécutif. ) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-training-path.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Award, CheckCircle } from "lucide-react" const trainingPhases = [ { level: "Fondation", name: "AI For Business Leaders", institution: "INSEAD", modality: "Online (Self-paced)", comment: "Excellent pour Executive Mindset IA", duration: "6 sem", }, { level: "Approfondissement", name: "Artificial Intelligence: Business Strategies and Applications", institution: "MIT Sloan Executive Education", modality: "Online (Cohort)", comment: "Forte valeur de marque internationale", duration: "8 sem", }, { level: "Spécialisation", name: "AI and Machine Learning for Business", institution: "ESCP Business School", modality: "Présentiel Paris", comment: "Mise en pratique sur cas réels", duration: "3 jours", }, ] const certifications = [ "Certification INSEAD AI Business Leader", 'Certification MIT Sloan "AI Business Applications"', 'Attestation Sciences Po "AI Responsible Leadership"', ] export default function SlideTrainingPath() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Parcours de Formation Recommandé

{trainingPhases.map((phase, index) => (

{index + 1}

{index < trainingPhases.length - 1 && (

)}

{phase.level}: {phase.name}

{phase.institution} • {phase.modality} • {phase.duration}

{phase.comment}

))}

Certifications Clés à Viser

{cert}

Positionnement immédiat "AI Business Executive" de haut niveau.

) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-value-added.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { CheckCircle, XCircle, TrendingUp } from "lucide-react" export default function SlideValueAdded() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Valeur Ajoutée Démontrée

AVANT CareerPilotPro

15-20 heures de recherche manuelle
Informations dispersées et non structurées
Données souvent obsolètes ou génériques
Risque de passer à côté d'opportunités clés

APRÈS CareerPilotPro

Plan d'action complet en 48h
Analyse de +2000 sources en temps réel
Recommandations 100% personnalisées
Stratégie claire et actionnable

+280% ROI Prouvé ) } [V0_FILE]typescriptreact:file="components/new-hero-comment-ca-marche.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Upload, Zap, Download, ArrowRight, Calculator } from "lucide-react" import { Button } from "@/components/ui/button" interface NewHeroProps { onShowExample: () => void onCalculateTimeSaving: () => void } const timelineSteps = [ { step: 1, title: "ENVOYEZ", description: "Le profil", duration: "5 minutes", icon: Upload, bgColor: "bg-blue-slate/10", textColor: "text-blue-slate", borderColor: "border-blue-slate/30", }, { step: 2, title: "ANALYSONS", description: "Nos experts", duration: "24-48h", icon: Zap, bgColor: "bg-gold-sienna/10", textColor: "text-gold-sienna", borderColor: "border-gold-sienna/30", }, { step: 3, title: "RECEVEZ", description: "Votre plan", duration: "Actionnable", icon: Download, bgColor: "bg-tilleul-dense/10", textColor: "text-tilleul-dense", borderColor: "border-tilleul-dense/30", }, ] export default function NewHeroCommentCaMarche({ onShowExample, onCalculateTimeSaving }: NewHeroProps) { const sectionVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3 }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }, } const timelineItemVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: (i: number) => ({ opacity: 1, scale: 1, transition: { delay: i * 0.2, duration: 0.5, type: "spring", stiffness: 100 }, }), } return (

Méthode éprouvée • 200+ clients Comment ça marche en 3 étapes simples De votre profil client à son nouveau poste en 48h chrono {/* Timeline Visuelle */}

{timelineSteps.map((item, index) => (

{item.step}. {item.title}

{item.description}

{item.duration}

{index < timelineSteps.length - 1 && (

)} {index < timelineSteps.length - 1 && (

)} ))}

) } [V0_FILE]typescriptreact:file="components/pricing-model-visual.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Check, BarChart3, Package, CalendarClock, Clock, HelpCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import Link from "next/link" const pricingPlans = [ { name: "Starter", price: "À partir de 480€", subPrice: "par dossier", features: [ "Analyse de marché ciblée (1 secteur)", "Identification jusqu'à 50 employeurs potentiels", "Rapport de synthèse PDF", "Livraison standard sous 72h", "Support par email", ], ctaText: "Obtenir mon devis", ctaLink: "/contact?plan=starter", note: "Prix final selon volume", color: "blue-slate", isRecommended: false, }, { name: "Pro", price: "À partir de 700€", subPrice: "par dossier", features: [ "Toutes les fonctionnalités Starter", "Analyse multi-secteurs (jusqu'à 3)", "Identification jusqu'à 150 employeurs", "Profils d'entreprises détaillés", "Tendances du secteur et compétences clés", "Suggestions de mots-clés CV/LM", "Accès plateforme en ligne (1 utilisateur)", "Livraison prioritaire sous 48h", "Support prioritaire (email & chat)", "1 session Q&R de 30 min/dossier", "Mises à jour trimestrielles des données", ], ctaText: "Calculer mon ROI", ctaLink: "/quiz?source=pricing-pro", note: "Remises volume disponibles", color: "gold-sienna", isRecommended: true, }, { name: "Expert", price: "Sur devis", subPrice: "solution sur-mesure", features: [ "Toutes les fonctionnalités Pro", "Analyse illimitée et personnalisée", "Accompagnement stratégique dédié", "Intégration CRM/ATS (option)", "Rapports sur mesure illimités", "Veille stratégique continue", "Ateliers de formation pour équipes", "Support dédié avec expert référent", ], ctaText: "Étude gratuite", ctaLink: "/contact?plan=expert", note: "Accompagnement dédié", color: "tilleul-dense", isRecommended: false, }, ] export default function PricingModelVisual() { const fadeInUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } return (

Choisissez le plan adapté à vos ambitions

Des solutions flexibles pour les coachs indépendants, cabinets d'outplacement et services RH.

{pricingPlans.map((plan, i) => ( {plan.isRecommended && ( Recommandé )}

{plan.name}

{plan.price}

{plan.subPrice}

{feature}

{plan.note}

))}

Tous nos devis sont gratuits et sans engagement.

Bénéficiez de remises progressives en fonction du volume de dossiers commandés.

Le paiement s'effectue après la livraison et validation des dossiers.

{/* Section "Avantages Clés" (conservée pour l'instant, peut être revue) */}

Vos Avantages Exclusifs

{[ { icon: , title: "Sans engagement", desc: "Aucun minimum de commande, flexibilité totale.", }, { icon: , title: "Remises Volumétriques", desc: "Plus vous commandez, plus vous économisez.", }, { icon: , title: "Facturation Mensuelle", desc: "Une seule facture consolidée pour simplifier votre gestion.", }, { icon: , title: "Paiement à 30 jours", desc: "Conditions de paiement souples pour votre trésorerie.", }, ].map((advantage, i) => (

{advantage.icon}

{advantage.title}

{advantage.desc}

))}

) } [V0_FILE]typescriptreact:file="components/qualification-quiz-comment-ca-marche.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Users, Building, Briefcase, Target, BarChart3, TrendingUp, CheckCircle, ChevronLeft, ChevronRight, Clock, Award, Zap, } from "lucide-react" const quizStepsContent = [ { id: 1, question: "Vous êtes...", options: [ { text: "Coach indépendant", value: "coach", icon: Users }, { text: "Cabinet d'outplacement", value: "outplacement", icon: Building }, { text: "DRH / Responsable Mobilité en entreprise", value: "hr", icon: Briefcase }, { text: "Consultant en évolution professionnelle", value: "consultant", icon: Target }, ], answerKey: "profile", }, { id: 2, question: "Combien de dossiers traitez-vous par mois en moyenne ?", options: [ { text: "1-5 dossiers", value: "1-5" }, { text: "5-15 dossiers", value: "5-15" }, { text: "15-50 dossiers", value: "15-50" }, { text: "50+ dossiers", value: "gt50" }, ], icon: BarChart3, answerKey: "volume", }, { id: 3, question: "Votre priorité #1 actuellement ?", options: [ { text: "Gagner du temps", value: "time", icon: Clock }, { text: "Améliorer la qualité des accompagnements", value: "quality", icon: Award }, { text: "Accélérer le placement de mes clients", value: "placement", icon: Zap }, { text: "Réduire les coûts opérationnels", value: "costs", icon: TrendingUp }, ], answerKey: "priority", }, ] type Answers = { profile: string | null volume: string | null priority: string | null } const initialAnswers: Answers = { profile: null, volume: null, priority: null } interface QualificationQuizProps { onViewPersonalizedPlan: (recommendation: any) => void } export default function QualificationQuizCommentCaMarche({ onViewPersonalizedPlan }: QualificationQuizProps) { const [currentStep, setCurrentStep] = useState(1) const [answers, setAnswers] = useState(initialAnswers) const [recommendation, setRecommendation] = useState(null) const handleSelectOption = (questionKey: keyof Answers, value: string) => { setAnswers((prev) => ({ ...prev, [questionKey]: value })) } const calculateRecommendation = () => { // Simplified recommendation logic let score = 0 if (answers.profile === "hr" || answers.profile === "outplacement") score += 2 if (answers.volume === "15-50" || answers.volume === "gt50") score += 2 if (answers.priority === "placement" || answers.priority === "time") score += 2 let service, roi, timeline if (score <= 2) { service = "STARTER" roi = "150%" timeline = "24-48h" } else if (score <= 4) { service = "PRO" roi = "220%" timeline = "48h" } else { service = "EXPERT" roi = "300%+" timeline = "72h (personnalisé)" } return { service, roi, timeline, originalAnswers: answers } } const nextStep = () => { if (currentStep < quizStepsContent.length) { setCurrentStep(currentStep + 1) } else if (currentStep === quizStepsContent.length) { const rec = calculateRecommendation() setRecommendation(rec) setCurrentStep(currentStep + 1) // Move to results view } } const prevStep = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) if (currentStep > quizStepsContent.length) { // if coming back from results setRecommendation(null) } } } const resetQuiz = () => { setAnswers(initialAnswers) setCurrentStep(1) setRecommendation(null) } const progress = (currentStep / (quizStepsContent.length + 1)) * 100 const currentQuestionData = quizStepsContent[currentStep - 1] const isCurrentStepValid = currentStep <= quizStepsContent.length && currentQuestionData ? answers[currentQuestionData.answerKey as keyof Answers] !== null : true const pageVariants = { initial: { opacity: 0, x: 30 }, in: { opacity: 1, x: 0 }, out: { opacity: 0, x: -30 }, } const pageTransition = { type: "tween", ease: "anticipate", duration: 0.4 } return (

Quel est votre besoin ? {currentStep <= quizStepsContent.length && ( Étape {currentStep}/{quizStepsContent.length} )}

{currentStep <= quizStepsContent.length && currentQuestionData && (

{currentQuestionData.icon && ( )} {!currentQuestionData.icon && quizStepsContent[currentStep - 1].icon && React.createElement(quizStepsContent[currentStep - 1].icon as any, { className: "w-7 h-7 text-primary mr-3 mt-0.5 flex-shrink-0", })} {currentQuestionData.question}

2 ? "sm:grid-cols-2" : "sm:grid-cols-1 sm:max-w-md sm:mx-auto"} gap-3 sm:gap-4`} > {currentQuestionData.options.map((option) => ( handleSelectOption(currentQuestionData.answerKey as keyof Answers, option.value)} className={`p-4 border-2 rounded-lg text-left transition-all duration-200 ease-in-out flex items-center space-x-3 ${ answers[currentQuestionData.answerKey as keyof Answers] === option.value ? "bg-primary/10 border-primary ring-2 ring-primary shadow-md" : "bg-white hover:bg-stone-50 border-stone-300 hover:border-primary/70" }`} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > {option.icon && ( )} {option.text} ))}

)} {currentStep > quizStepsContent.length && recommendation && (

Votre Recommandation Personnalisée

Service Recommandé : {recommendation.service}

ROI Estimé : {recommendation.roi}

Timeline : {recommendation.timeline}

Basé sur vos réponses, le pack {recommendation.service} semble le plus adapté.

)}

{currentStep <= quizStepsContent.length ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="components/roi-dashboard-infographic.tsx" isMerged="true" "use client" import { useRef, useEffect, useState } from "react" import { motion, useInView, useAnimation } from "framer-motion" import { Clock, TrendingDown, Users, DollarSign, BarChart3, Activity, Target, Percent, Calendar, ChevronRight, Info, } from "lucide-react" interface AnimatedCounterProps { value: number suffix?: string prefix?: string duration?: number decimals?: number } function AnimatedCounter({ value, suffix = "", prefix = "", duration = 2, decimals = 0 }: AnimatedCounterProps) { const [count, setCount] = useState(0) const ref = useRef(null) const isInView = useInView(ref, { once: true }) useEffect(() => { if (isInView) { let start = 0 const end = value const increment = end / (duration * 60) const timer = setInterval(() => { start += increment if (start >= end) { setCount(end) clearInterval(timer) } else { setCount(start) } }, 1000 / 60) return () => clearInterval(timer) } }, [isInView, value, duration]) return ( {prefix} {count.toFixed(decimals)} {suffix} ) } export default function ROIDashboardInfographic() { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-50px 0px" }) const controls = useAnimation() useEffect(() => { if (isInView) { controls.start("visible") } }, [isInView, controls]) const kpis = [ { id: "time-saved", title: "Temps économisé", subtitle: "par dossier", value: 15, unit: "h", icon: Clock, color: "blue-slate", bgGradient: "from-blue-slate/20 to-blue-slate/5", description: "Automatisation complète de la recherche et analyse", percentage: 75, // 15h sur 20h habituelles }, { id: "placement-speed", title: "Accélération placement", subtitle: "réduction du délai", value: 37, unit: "%", prefix: "-", icon: TrendingDown, color: "gold-sienna", bgGradient: "from-gold-sienna/20 to-gold-sienna/5", description: "Ciblage précis et approche optimisée", percentage: 37, }, { id: "satisfaction", title: "Satisfaction client", subtitle: "amélioration moyenne", value: 42, unit: "%", prefix: "+", icon: Users, color: "tilleul-dense", bgGradient: "from-tilleul-dense/20 to-tilleul-dense/5", description: "Accompagnement plus qualitatif et personnalisé", percentage: 42, }, ] const premiumMetrics = [ { label: "Impact marge opérationnelle", value: "+18%", icon: DollarSign }, { label: "Taux conversion commerciale", value: "+25%", icon: Target }, { label: "Productivité consultants", value: "+32%", icon: Activity }, ] const roiTimeline = [ { month: 1, label: "Mise en place", roi: 0, status: "setup" }, { month: 2, label: "Optimisation", roi: 45, status: "growth" }, { month: 3, label: "ROI positif", roi: 94, status: "positive" }, ] return (

{/* Header Section */}

Dashboard Analytics

Mesurez votre performance en temps réel

Notre tableau de bord personnalisé suit trois indicateurs clés pour optimiser votre ROI

{/* Main KPIs Grid */}

{kpis.map((kpi, index) => (

{/* Header */}

{kpi.title}

{kpi.subtitle}

{/* Value Display */}

{kpi.description}

{/* Progress Bar */}

0 {kpi.percentage}%

))}

{/* Premium Analysis Section */} {/* Background Pattern */}

Analyse ROI Premium

Rapport trimestriel détaillé pour optimiser votre performance

Clients Premium uniquement

{premiumMetrics.map((metric, index) => (

{metric.value}

{metric.label}

))}

{/* ROI Timeline */}

Évolution du ROI

94% de nos clients constatent un ROI positif dès le 3ème mois

Suivi trimestriel

{/* Timeline */}

{roiTimeline.map((item, index) => (

{item.roi > 0 && } {item.roi === 0 && "0%"}

ROI

Mois {item.month}

{item.label}

))}

{/* Success Message */}

94% de nos clients constatent un ROI positif dès le troisième mois d'utilisation

{/* CTA */}

Disponible dès l'activation de votre compte

) } [V0_FILE]typescriptreact:file="components/roi-measurement-visual.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Clock, TrendingDown, Users, BarChart3, DollarSign, Target, Calendar, CheckCircle, ChevronRight, } from "lucide-react" export default function ROIMeasurementVisual() { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" }) // Animation variants const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } // KPI data const kpis = [ { id: "time-saved", title: "Temps économisé", value: "15h", description: "par dossier en moyenne", icon: Clock, color: "blue-slate", }, { id: "placement-speed", title: "Accélération placement", value: "-37%", description: "réduction du délai", icon: TrendingDown, color: "gold-sienna", }, { id: "satisfaction", title: "Satisfaction client", value: "+42%", description: "amélioration moyenne", icon: Users, color: "tilleul-dense", }, ] // Premium analytics data const premiumAnalytics = [ { title: "Analyse ROI trimestrielle", description: "Rapport détaillé et personnalisé", icon: BarChart3, }, { title: "Impact marge opérationnelle", description: "Mesure précise de l'amélioration", icon: DollarSign, }, { title: "Taux conversion commerciale", description: "Suivi de l'augmentation des ventes", icon: Target, }, ] // ROI timeline data const roiTimeline = [ { month: 1, label: "Mise en place", roi: "Déploiement" }, { month: 2, label: "Optimisation", roi: "Ajustements" }, { month: 3, label: "ROI positif", roi: "94% des clients", highlight: true }, ] return (

{/* Header */}

Mesure de Performance

Dashboard ROI personnalisé

Suivez précisément l'impact de CareerPilot Pro sur votre activité

{/* KPI Cards */} {kpis.map((kpi) => (

{kpi.title}

{kpi.value}

{kpi.description}

))} {/* Premium Analytics */}

Analyse Premium

Clients Premium

{premiumAnalytics.map((item, index) => (

{item.title}

{item.description}

))}

{/* ROI Timeline */}

Évolution du ROI

{/* Timeline */}

{/* Timeline line */}

{roiTimeline.map((item, index) => (

Mois

{item.month}

{item.label}

{item.roi}

))}

{/* Success Message */}

94% de nos clients constatent un{" "} ROI positif dès le troisième mois d'utilisation

{/* CTA */} Découvrir votre potentiel ROI

) } [V0_FILE]typescriptreact:file="components/simple-faq-comment-ca-marche.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Button } from "@/components/ui/button" import { CreditCard, Clock, PlayCircle, ChevronDown } from "lucide-react" const faqItems = [ { id: "prix", question: "Combien ça coûte vraiment ?", answerShort: "À partir de 480€ par dossier, sans engagement.", icon: CreditCard, ctaText: "Calculer mon prix exact", actionKey: "calculatePrice", expandableContent: () => (

Notre tarification est transparente et s'adapte à vos besoins. Utilisez notre simulateur pour une estimation précise.

Le calculateur interactif sera bientôt disponible ici.

), }, { id: "delais", question: "Combien de temps ça prend ?", answerShort: "24h à 72h selon votre urgence et le pack choisi.", icon: Clock, ctaText: "Voir les délais détaillés", actionKey: "viewDelays", expandableContent: () => (

Pack STARTER: Livré en 48h.
Pack PRO: Livré en 48h.
Pack EXPERT: Livré en 72h.

Une timeline visuelle plus détaillée sera bientôt disponible.

), }, { id: "commencer", question: "Comment on commence ?", answerShort: "5 minutes pour briefer, 48h en moyenne pour recevoir votre plan d'action.", icon: PlayCircle, ctaText: "Commencer maintenant", actionKey: "startNow", expandableContent: () => (

Choisissez le pack adapté (ou laissez-nous vous guider).
Remplissez un court formulaire sur votre client (5-10 min).
Nos experts analysent et construisent le plan.
Recevez votre Career Intelligence Pack complet.

), }, ] interface SimpleFaqProps { onCalculatePrice: () => void onViewDelays: () => void onStartNow: () => void } export default function SimpleFaqCommentCaMarche({ onCalculatePrice, onViewDelays, onStartNow }: SimpleFaqProps) { const [openItem, setOpenItem] = useState(null) const handleAction = (actionKey: string) => { if (actionKey === "calculatePrice") onCalculatePrice() else if (actionKey === "viewDelays") onViewDelays() else if (actionKey === "startNow") onStartNow() } return (

3 questions essentielles

Les réponses claires à vos interrogations les plus fréquentes.

{faqItems.map((item) => (

{item.question}

{openItem !== item.id && ( {item.answerShort} )}

{item.expandableContent()}

))}

) } [V0_FILE]typescriptreact:file="components/social-plans-pricing-visual.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Users, TrendingDown, Shield, UserCheck, Palette, Clock, Building2, Sparkles, ChevronRight } from "lucide-react" export default function SocialPlansPricingVisual() { const fadeInUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } return (

{/* En-tête avec seuil d'activation */}

Plans Sociaux & Grands Volumes

À partir de 20 collaborateurs

{/* Grille des avantages */}

{/* Tarification dégressive */}

Tarifs dégressifs

-30%

Jusqu'à 30% de réduction

{/* SLA renforcés */}

SLA renforcés

Garanties de service prioritaires

{/* Account Manager dédié */}

Account Manager

Interlocuteur unique dédié

{/* Personnalisation */}

Sur mesure

Livrables personnalisés

{/* Échelle de réduction */}

Économies selon le volume

{[ { range: "20-50", discount: "10%", color: "blue-slate" }, { range: "51-100", discount: "20%", color: "gold-sienna" }, { range: "100+", discount: "30%", color: "tilleul-dense" }, ].map((tier, index) => (

{tier.range} collaborateurs {tier.discount}

))}

{/* Timeline du processus */}

Processus rapide et simple

Contact initial

Votre demande

Étude personnalisée

Analyse des besoins

Proposition finale

Sous 48h

{/* Call to action */}

Transformez votre plan social en opportunité de rebond pour vos collaborateurs

Étude sur-mesure gratuite

Réponse sous 48h

) } [V0_FILE]typescriptreact:file="components/solution-scenarios-comment-ca-marche.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { MapPin, RotateCcw, Zap, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" const scenarios = [ { icon: MapPin, situation: "Mon client veut évoluer dans son domaine actuel, trouver de nouvelles opportunités alignées.", solution: "STARTER - Repositionnement Express", benefit: "15+ opportunités ciblées. Livré en 48h.", result: "Repositionné et focus en 4-6 semaines.", price: "À partir de 480€", cta: "C'est ma situation", key: "starter", color: "blue-slate", features: [ "Cartographie compétences transférables", "Analyse besoins marché", "Évaluation adéquation projet/besoins", ], }, { icon: RotateCcw, situation: "Mon client envisage une reconversion, un changement de métier ou de secteur.", solution: "PRO - Changement de Métier", benefit: "30+ employeurs + CV optimisé. Livré en 48h.", result: "Transition réussie et sécurisée en 3-4 mois.", price: "À partir de 700€", cta: "Parfait pour nous", key: "pro", highlighted: true, color: "gold-sienna", features: [ "Tout STARTER inclus", "Identification 30+ employeurs", "Stratégies réseau et scripts", "Optimisation CV & LinkedIn", ], }, { icon: Zap, situation: "Mon client est un dirigeant, ou il s'agit d'un plan social nécessitant une approche complète.", solution: "EXPERT - Transformation Premium", benefit: "50+ opportunités + accompagnement. Livré selon volume.", result: "Leadership affirmé ou plan social maîtrisé en 6-8 mois.", price: "Sur devis", cta: "Solution complète", key: "expert", color: "tilleul-dense", features: [ "Tout PRO inclus", "Pack entraînements entretiens", "Validation projet mobilité", "Plan onboarding 30/60/90", ], }, ] interface SolutionScenariosProps { onSelectScenario: (scenarioKey: string) => void } export default function SolutionScenariosCommentCaMarche({ onSelectScenario }: SolutionScenariosProps) { const sectionVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } }, } const cardVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }, } return (

La solution adaptée à votre situation

Nous avons conçu trois packs pour répondre précisément à chaque type de besoin en outplacement.

{scenarios.map((scenario) => ( {scenario.highlighted && ( Plus populaire )}

"{scenario.situation}"

{scenario.solution}

{feature}
Et plus...

Bénéfice clé : {scenario.benefit}

Résultat type : {scenario.result}

{scenario.price}

))}

) } [V0_FILE]typescriptreact:file="components/training-formation-visual.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Clock, BookOpen, Users, Award, CheckCircle, GraduationCap, Lightbulb, Target } from "lucide-react" export default function TrainingFormationVisual() { // Référence pour l'animation const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.3 }) // État pour le compteur animé const [count, setCount] = useState(0) // Animation du compteur useEffect(() => { if (isInView && count < 97) { const interval = setInterval(() => { setCount((prev) => { const next = prev + 1 if (next >= 97) { clearInterval(interval) return 97 } return next }) }, 20) return () => clearInterval(interval) } }, [isInView, count]) return (

{/* Section principale */}

Notre programme de formation

Adapté à votre niveau d'intégration

{/* Formation initiale */}

Formation initiale

Pour tous les nouveaux clients

{[ { icon: , text: "Interprétation des données" }, { icon: , text: "Utilisation optimale des recommandations", }, { icon: , text: "Intégration dans vos entretiens clients", }, ].map((item, i) => (

{item.icon}

{item.text} ))}

{/* Sessions approfondies */}

Sessions approfondies

Pour les offres Complet et Premium

{[ { icon: , text: "Cas pratiques spécifiques à vos secteurs", }, { icon: , text: "Stratégies avancées d'utilisation" }, { icon: , text: "Personnalisation approfondie des approches", }, ].map((item, i) => (

{item.icon}

{item.text} ))}

{/* Résultats et satisfaction */}

{count} %

Taux de satisfaction

La majorité des utilisateurs déclarent se sentir à l'aise avec notre méthodologie après une seule session.

) } [V0_FILE]png:file="public/carousselhero/Image_fx (44).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2844%29.jpg-17uYqE8E33uFbTPNsVigB39ng0TVVN.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_ (45).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2845%29.jpg-55lzB3FfKwhNGPkAwJ8f59WBxMikMK.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_fx (42).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2842%29.jpg-lxImdyp7Lm7srHHRe2VZf7Cpf3xZP4.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_fx (37).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2837%29.jpg-Y71R2d8Pkvgiu9HFH2nyB6IEzmcdQm.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_fx (39).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2839%29.jpg-YxHn08WBNckchv7BFx7FcFVtCY2mqS.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/coach diversity MB.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coach%20diversity%20MB.jpg-lfDlrHFrMKa8yDYXUPsAmCGeCb3m2L.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_ (28).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2828%29.jpg-cAMpAp75Fres4OE9P1P0Ke0NrtBXEn.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_ (85).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2885%29.jpg-gV8aIY22o8OIOP7EeFB7gwtYAliy2V.png" isMerged="true" [V0_FILE]png:file="public/carousselhero/Image_ (35).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2835%29.jpg-JRHGaN3OvcEMHCSDHjyRnSPBPnRN73.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (36).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2836%29.jpg-us2wcFnbFiQLmMy15a79mwPA63nsJi.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (29).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2829%29.jpg-gcvLsruHC23OhNqeSeVEbIHQ6YNT1f.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_fx (43).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2843%29.jpg-2wK99gm5dpRy60A8zpTir50xgx784L.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_fx (40).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2840%29.jpg-Gl7wMrgeZqGVZsJejm4PkFNaszJGWL.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_fx (38).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2838%29.jpg-flmfLWEhTDYPFRf8CWxT1SJiFVrpk3.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (84).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2884%29.jpg-QxiZCOLAWgOsscc2gRJUBDhHiKzynJ.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (86).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2886%29.jpg-O8hcHAlQrtiNrXesl15px5KBRA9Wrz.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (82).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2882%29.jpg-khBc8gng4DHvLQsENTrrZeYOpWZZrg.png" isMerged="true" [V0_FILE]jpg:file="public/carousselhero/Image_ (78).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2878%29.jpg-7PjeNFAlX7sA5FgC1tHduLHMy3IWBW.png" isMerged="true" [V0_FILE]sql:file="scripts/create-prompts-table.sql" type="script" isMerged="true" -- Création de la table prompts pour stocker les demandes des utilisateurs CREATE TABLE IF NOT EXISTS prompts ( id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY, user_id UUID REFERENCES auth.users(id) NOT NULL, context TEXT NOT NULL, files TEXT[], -- Array de chemins de fichiers created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL ); -- Politique de sécurité : les utilisateurs ne peuvent voir que leurs propres prompts ALTER TABLE prompts ENABLE ROW LEVEL SECURITY; CREATE POLICY "Users can view own prompts" ON prompts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert own prompts" ON prompts FOR INSERT WITH CHECK (auth.uid() = user_id); -- Index pour améliorer les performances CREATE INDEX IF NOT EXISTS prompts_user_id_idx ON prompts(user_id); CREATE INDEX IF NOT EXISTS prompts_created_at_idx ON prompts(created_at DESC); [V0_FILE]png:file="public/logo/careerpilot-pro-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ivoirev%20CCareer%20Pilot%20500%20180-xX3oPmqxoa1ukoHw2D3um8SqKuu6z0.png" isMerged="true" [V0_FILE]png:file="public/logo/careerpilot-pro-logo-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/T%20tilleul%20%20CCareer%20Pilot%20500%20180%20%28500%20x%20500%20px%29-6dDgF7Z8hwW4lxC9iJRkKh8WJAFVRw.png" isMerged="true" [V0_FILE]plaintext:file="public/equipe/.gitkeep" isMerged="true" # This file ensures the equipe directory is preserved in version control [V0_FILE]png:file="public/equipe/portraits-xm-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20XM%20CPP-XwePV86U47ULKRIPV1czs86v9lRYEW.png" isMerged="true" [V0_FILE]png:file="public/equipe/portraits-jb-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TPortraits%20JB%20CPP-6SvBwuifJ43RSNRkH5fVxSsMa13uCp.png" isMerged="true" [V0_FILE]png:file="public/equipe/portraits-ep-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20EP%20CPP-piz5nHZV51XcaMcgD2Arpr6Sr8PIpK.png" isMerged="true" [V0_FILE]png:file="public/equipe/portraits-gs-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20GS%20CPP-kfS2NNVcYwaqvgY8KrUnNCG1XsbnJQ.png" isMerged="true" [V0_FILE]png:file="public/equipe/portraits-cb-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/portraits-cb-cpp-pcQzX0D4Vq2IzSsSaL1vSn647cd5Kr.png" isMerged="true" [V0_FILE]plaintext:file="public/" isMerged="true" [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams } from "next/navigation" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalendarDays, Clock, User, ArrowLeft } from "lucide-react" import { getBlogPostBySlug } from "@/lib/blog-api" import type { BlogPost } from "@/lib/supabase" import Link from "next/link" export default function BlogPostPage() { const params = useParams() const [post, setPost] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { async function loadPost() { try { if (params.slug) { const postData = await getBlogPostBySlug(params.slug as string) setPost(postData) } } catch (error) { console.error("Erreur lors du chargement de l'article:", error) } finally { setLoading(false) } } loadPost() }, [params.slug]) if (loading) { return (

Chargement...

) } if (!post) { return (

Article non trouvé

) } return (

{/* Navigation */}

{/* Article */}

{/* Header */}

{post.featured_image_url && (

)}

{post.category && ( {post.category.name} )} {post.featured && En vedette}

{post.title}

{post.excerpt &&

{post.excerpt}

}

{post.author && (

{post.author.avatar_url && (

)}

{post.author.name}

)} {post.reading_time && (

{post.reading_time} min de lecture

)} {post.published_at && (

{new Date(post.published_at).toLocaleDateString("fr-FR", { year: "numeric", month: "long", day: "numeric", })}

)}

{/* Contenu */}

{/* Tags */} {post.tags && post.tags.length > 0 && (

À propos de l'auteur

{post.author.avatar_url && (

)}

{post.author.name}

{post.author.bio}

{post.author.linkedin_url && ( Voir le profil LinkedIn )}

)}

) } [V0_FILE]typescriptreact:file="app/ressources/page.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView } from "framer-motion" import { Search, Filter, Clock, Download, ArrowRight, CalendarDays, Bookmark } from "lucide-react" import Header from "../../components/header" // Sample data for resources const resourceCategories = [ "Tous", "Études sectorielles", "Guides pratiques", "Webinaires", "Livres blancs", "Podcasts", ] const resources = [ { id: 1, title: "Analyse du marché de l'emploi Tech post-COVID", category: "Études sectorielles", description: "Une analyse approfondie des nouvelles dynamiques du marché de l'emploi dans le secteur technologique suite à la pandémie. Opportunités, défis et prévisions.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "15 Mai 2023", readTime: "12 min", premium: true, }, { id: 2, title: "Guide de reconversion vers les métiers à impact environnemental", category: "Guides pratiques", description: "Découvrez les opportunités de carrière dans le secteur de la transition écologique et les compétences transférables les plus valorisées.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "3 Avril 2023", readTime: "18 min", premium: false, }, { id: 3, title: "Les soft skills déterminantes pour 2024", category: "Livres blancs", description: "Notre étude sur l'évolution des compétences comportementales recherchées par les recruteurs, basée sur l'analyse de 15 000 offres d'emploi.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "21 Juin 2023", readTime: "15 min", premium: false, }, { id: 4, title: "Webinaire : Accompagner la transition professionnelle des cadres seniors", category: "Webinaires", description: "Replay de notre webinaire sur les stratégies d'accompagnement des cadres de plus de 50 ans, avec des experts du secteur.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "7 Mars 2023", readTime: "45 min", premium: true, }, { id: 5, title: "Podcast : L'IA dans le recrutement - opportunité ou menace ?", category: "Podcasts", description: "Une discussion avec des experts RH et IA sur l'impact de l'intelligence artificielle dans les processus de recrutement et d'accompagnement.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "12 Juillet 2023", readTime: "32 min", premium: false, }, { id: 6, title: "Baromètre 2023 des salaires par secteur", category: "Études sectorielles", description: "Notre rapport annuel détaillant les évolutions salariales dans 25 secteurs d'activité, avec des focus sur les métiers en tension.", imageUrl: "/placeholder.svg?height=300&width=500", downloadUrl: "#", date: "9 Février 2023", readTime: "20 min", premium: true, }, ] export default function Resources() { const [activeCategory, setActiveCategory] = useState("Tous") const [searchTerm, setSearchTerm] = useState("") const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" }) const filteredResources = resources.filter( (resource) => (activeCategory === "Tous" || resource.category === activeCategory) && (resource.title.toLowerCase().includes(searchTerm.toLowerCase()) || resource.description.toLowerCase().includes(searchTerm.toLowerCase())), ) return (

Centre de Ressources

Explorez notre bibliothèque d'études, guides et analyses pour approfondir votre expertise et optimiser votre accompagnement.

setSearchTerm(e.target.value)} />

{resourceCategories.map((category) => ( setActiveCategory(category)} className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${ activeCategory === category ? "bg-gold-sienna text-white-serene" : "bg-white-serene text-slate-deep hover:bg-gold-sienna/10" }`} whileHover={{ scale: activeCategory === category ? 1 : 1.05 }} whileTap={{ scale: 0.98 }} > {category} ))}

{filteredResources.length > 0 ? (

{filteredResources.map((resource, index) => (

{resource.premium && (

Premium

)}

{resource.category}

{resource.date}

{resource.readTime}

{resource.title}

{resource.description}

Lire plus {resource.premium ? : }

))}

) : (

Aucune ressource trouvée

Essayez de modifier vos critères de recherche

)}

Vous cherchez une ressource spécifique ?

Notre équipe peut vous aider à trouver les informations dont vous avez besoin ou à créer une analyse personnalisée pour votre secteur.

Demander une ressource sur-mesure

) } [V0_FILE]typescriptreact:file="app/equipe/page.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Linkedin, Mail, ArrowRight, Award, BarChart3, Shield, Lightbulb } from "lucide-react" import Header from "../../components/header" // Sample data for team members const teamMembers = [ { name: "Gilles Stephan", role: "CEO & Fondateur", bio: "Ancien directeur du recrutement global pour des leqders de la tech et du e-commerce, Gilles a conçu Career Pilot Pack après avoir mis en place des cellules de reclassements, recrutés plus de 25 000 personnes à travers le monde et observé les limites des méthodes traditionnelles de la mobilité des talents. Diplômé de Paris IX-Dauphine et passionné par l'IA appliquée au développement professionnel.", expertise: ["Stratégie RH", "Outplacement", "IA & Data"], imageUrl: "/equipe/portraits-gs-cpp.png", linkedin: "https://www.linkedin.com/in/gillesstephan/", email: "gilles@careerpilotpro.com", }, { name: "Elisabeth Pasteur", role: "Partner", bio: "Diplômée de l'ESSEC en management des organisations, elle a dirigé des opérations complexes dans le secteur aérien pendant plus de 20 ans. En 2014, elle cofonde 3.0 Coaching Pro pour accompagner dirigeants et équipes en transformation. Elle allie expertise stratégique, exigence opérationnelle et accompagnement humain.", expertise: ["Coaching", "Complex Operations", "Leadership"], imageUrl: "/equipe/portraits-ep-cpp.png", linkedin: "https://www.linkedin.com/in/epasteur/", email: "elisabeth@careerpilotpro.com", }, { name: "Jérémy Bezault", role: "Partner", bio: "Jérémy Bezault dirige depuis plus de 20 ans des projets de transformation à grande échelle dans les secteurs du BPO et de la digitalisation. Titulaire d'un Master en Droit Bancaire et d'une spécialisation INSEAD, il a structuré et piloté des organisations complexes en France et à l'international, dans des contextes de croissance, de LBO et d'intégrations post-acquisition.", expertise: ["Software", "Transition - Réorganisation", "BPO"], imageUrl: "/equipe/portraits-jb-cpp.png", linkedin: "https://www.linkedin.com/in/jeremy-bezault/", email: "jeremy@careerpilotpro.com", }, { name: "Xavier Molinie", role: "Partner", bio: "Avec plus de 25 ans de direction RH dans des environnements internationaux en forte croissance, Xavier accompagne aujourd'hui dirigeants et organisations dans leurs transformations humaines et stratégiques.Son approche conjugue structuration, accompagnement du changement et vision engagée du leadership au service de la performance durable.", expertise: ["Leadership", "Métiers Émergents", "Innovation RH"], imageUrl: "/equipe/portraits-xm-cpp.png", linkedin: "https://www.linkedin.com/in/xavier-molinie-3b9844/", email: "xavier@careerpilotpro.com", }, { name: "Cédric Brochard", role: "Partner", bio: "Diplômé de l'Université Paris 8 et de l'INALCO, il a dirigé des transformations RH complexes dans les secteurs industriels, logistique et énergie pendant plus de 25 ans. Précédemment CHRO EMEA chez GEFCO, il accompagne les organisations dans leur mutation digitale et culturelle à l'échelle internationale. Il allie vision stratégique, excellence opérationnelle et développement du potentiel humain.", expertise: ["HR Transformation", "Talent Management", "Cross-Cultural Leadership"], imageUrl: "/equipe/portraits-cb-cpp.png", linkedin: "https://www.linkedin.com/in/cedric-brochard/", email: "cedric@careerpilotpro.com", }, ] const values = [ { title: "Excellence Augmentée", description: "Nous croyons que la technologie doit amplifier l'expertise humaine, pas la remplacer. Chaque analyse est augmentée par l'IA mais validée par nos experts.", icon: Award, // Changed to actual component }, { title: "Impact Mesurable", description: "Nous nous engageons à créer une valeur tangible et quantifiable pour nos clients et leurs candidats, avec des métriques claires et transparentes.", icon: BarChart3, // Changed to actual component }, { title: "Éthique & Confidentialité", description: "La confiance est notre fondation. Nous appliquons les standards les plus stricts en matière de protection des données et d'utilisation responsable de l'IA.", icon: Shield, // Changed to actual component }, { title: "Innovation Pragmatique", description: "Nous innovons constamment, mais toujours avec un objectif concret d'amélioration de l'expérience utilisateur et de l'efficacité opérationnelle.", icon: Lightbulb, // Changed to actual component }, ] export default function Team() { const sectionRef = useRef(null) const valuesRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" }) const isValuesInView = useInView(valuesRef, { once: true, margin: "-100px 0px" }) return (

Notre Équipe

Découvrez les experts passionnés qui combinent expertise métier et maîtrise technologique pour révolutionner l'accompagnement professionnel.

{teamMembers.map((member, index) => (

{member.name}

{member.role}

{member.bio}

Expertises :

{member.expertise.map((skill) => ( {skill} ))}

))}

Nos Valeurs Les principes qui guident notre approche et définissent notre culture d'entreprise

{values.map((value, index) => (

{value.title}

{value.description}

))}

Rejoignez l'Aventure CareerPilot Pro

Nous recherchons constamment des talents passionnés par l'innovation, l'IA éthique et la transformation des parcours professionnels. Découvrez nos opportunités actuelles et futures.

Partagez votre intérêt

) } [V0_FILE]typescriptreact:file="components/dashboard-infographic.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Clock, TrendingUp, BarChart3, PieChart, LineChart, DollarSign, Award, BarChartIcon as ChartBar, Zap, Users, ArrowRight, } from "lucide-react" // Default export export default function DashboardInfographic() { const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" }) const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, } const circleVariants = { hidden: { pathLength: 0 }, visible: { pathLength: 1, transition: { duration: 1.5, ease: "easeInOut" } }, } return (

Dashboard Personnalisé

Mesurez votre ROI en temps réel

Notre tableau de bord analytique vous permet de suivre précisément l'impact de notre solution

Temps économisé

Par dossier client

15h en moyenne

Accélération placement

Réduction du délai

-37% en moyenne

Satisfaction client

Amélioration constatée

+42% en moyenne

Analyse Premium

Exclusivité clients Premium

Analyse ROI trimestrielle détaillée

{[ { title: "Impact sur la marge", value: "+18%", color: "#B8860B", icon: DollarSign }, { title: "Conversion commerciale", value: "+25%", color: "#788D63", icon: TrendingUp }, { title: "Productivité équipe", value: "+32%", color: "#4A5568", icon: LineChart }, ].map((item, idx) => (

{item.title}

))}

Retour sur investissement rapide

Évolution du ROI sur les 3 premiers mois

{[ { month: 1, label: "Mise en place", roi: "+15%", color: "blue-slate", delay: 0.3, size: "w-8 h-8" }, { month: 2, label: "Optimisation", roi: "+52%", color: "tilleul-dense", delay: 0.5, size: "w-8 h-8" }, { month: 3, label: "ROI positif", roi: "+94%", color: "gold-sienna", delay: 0.7, size: "w-12 h-12", roiClass: "text-xl", }, ].map((item) => (

{item.month}

Mois {item.month}

{item.label}

{item.roi}

))}

94% de nos clients constatent un ROI positif dès le troisième mois d'utilisation.

Demander une démo du dashboard

) } [V0_FILE]typescriptreact:file="components/formation-info.tsx" isMerged="true" interface FormationInfoProps { title?: string description?: string } // Default export export default function FormationInfo({ title = "Career Pilot Pack", description = "Explore the Career Pilot Pack and discover valuable insights.", }: FormationInfoProps) { return (

{title}

{description}

This Career Pilot Pack is designed to help you succeed.

) } [V0_FILE]typescriptreact:file="components/training-infographic.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView, useScroll, useTransform } from "framer-motion" import { Clock, Users, BarChart3, CheckCircle2, BookOpen, Award, Zap, Lightbulb, Target } from "lucide-react" // Default export export default function TrainingInfographic() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start end", "end start"], }) const progressScale = useTransform(scrollYProgress, [0, 0.5], [0, 1]) const satisfactionOpacity = useTransform(scrollYProgress, [0.3, 0.6], [0, 1]) const satisfactionScale = useTransform(scrollYProgress, [0.3, 0.6], [0.8, 1]) const CounterAnimation = ({ value }: { value: number }) => { return ( {({ count }) => <>{Math.floor(count)}} % ) } const initialModules = [ { icon: , title: "Interprétation des données", description: "Comprendre et analyser les insights générés", }, { icon: , title: "Utilisation des recommandations", description: "Exploiter efficacement les suggestions", }, { icon: , title: "Intégration aux entretiens", description: "Incorporer les insights dans vos échanges", }, ] const advancedModules = [ { icon: , title: "Cas pratiques sectoriels", description: "Adaptés à vos domaines d'intervention", }, { icon: , title: "Stratégies avancées", description: "Techniques d'accompagnement optimisées", }, { icon: , title: "Personnalisation approfondie", description: "Adapter les outils à chaque profil client", }, ] return (

Notre Programme de Formation

Une approche structurée pour maîtriser rapidement notre solution et maximiser votre efficacité

{[ { type: "Initiale", duration: "2h", audience: "Pour tous les nouveaux clients", description: "Session complète couvrant les fondamentaux pour une prise en main rapide et efficace", modules: initialModules, color: "primary", icon: Clock, delay: 0.1, xOffset: -50, }, { type: "Avancées", duration: "4h", audience: "Pour les offres Complet et Premium", description: "Formation approfondie avec des cas pratiques spécifiques à vos secteurs d'intervention", modules: advancedModules, color: "secondary", icon: BookOpen, delay: 0.3, xOffset: 50, }, ].map((formation, formIdx) => (

Formation {formation.type}

{formation.duration}

{formation.audience}

{formation.description}

{formation.modules.map((module, index) => (

{module.icon}

{module.title}

{module.description}

))}

Taux de satisfaction post-formation

{[...Array(5)].map((_, star) => ( ))}

{[ { icon: CheckCircle2, title: "Maîtrise rapide", desc: "La majorité des utilisateurs se sentent à l'aise après une seule session", delay: 1.2, }, { icon: Award, title: "Certification", desc: "Attestation de formation délivrée à tous les participants", delay: 1.3, }, { icon: Zap, title: "Impact immédiat", desc: "Mise en application directe dans vos processus existants", delay: 1.4, }, { icon: Users, title: "Support continu", desc: "Assistance post-formation pour tous vos collaborateurs", delay: 1.5, }, ].map((benefit, idx) => (

{benefit.title}

{benefit.desc}

))}

) } [V0_FILE]typescriptreact:file="components/training-highlights.tsx" isMerged="true" // Default export export default function TrainingHighlights() { const highlights = [ { title: "Comprehensive Curriculum", description: "Our curriculum is designed to provide you with a solid foundation in all aspects of aviation, from aerodynamics to meteorology.", }, { title: "Experienced Instructors", description: "Learn from seasoned pilots and aviation professionals with years of experience in the field.", }, { title: "State-of-the-Art Facilities", description: "Train in modern classrooms and flight simulators equipped with the latest technology.", }, { title: "Career Pilot Pack", description: "Get access to our exclusive Career Pilot Pack, which includes resources and support to help you launch your aviation career.", }, { title: "Personalized Training", description: "We tailor our training programs to meet your individual needs and learning style.", }, { title: "Industry Connections", description: "Benefit from our strong relationships with airlines and other aviation companies.", }, ] return (

Training Highlights

{highlights.map((highlight, index) => (

{highlight.title}

{highlight.description}

))}

) } [V0_FILE]typescriptreact:file="components/training-visual-explanation.tsx" isMerged="true" "use client" import { useRef, useState } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { Clock, Users, BarChart3, CheckCircle2, GraduationCap, Award, BookOpen, type LucideIcon, BrainCircuit, ArrowRight, Zap, } from "lucide-react" // Default export export default function TrainingVisualExplanation() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.3 }) const [activeTab, setActiveTab] = useState<"initial" | "advanced">("initial") const Counter = ({ from = 0, to, duration = 2 }: { from?: number; to: number; duration?: number }) => { const nodeRef = useRef(null) return ( {/* @ts-ignore Framer Motion's custom prop 'count' */} {({ count }) => Math.floor(count)} % ) } interface TrainingModule { id: string title: string icon: LucideIcon description: string } const initialModules: TrainingModule[] = [ { id: "data-interpretation", title: "Interprétation des données", icon: BrainCircuit, description: "Analyser et comprendre les insights générés", }, { id: "recommendations", title: "Utilisation des recommandations", icon: CheckCircle2, description: "Exploiter efficacement les suggestions proposées", }, { id: "integration", title: "Intégration aux entretiens", icon: Users, description: "Incorporer les insights dans vos échanges clients", }, ] const advancedModules: TrainingModule[] = [ { id: "sectoral", title: "Cas pratiques sectoriels", icon: BookOpen, description: "Adaptés à vos domaines d'intervention spécifiques", }, { id: "advanced", title: "Stratégies avancées", icon: BarChart3, description: "Techniques d'accompagnement optimisées", }, { id: "personalization", title: "Personnalisation approfondie", icon: Zap, description: "Adapter les outils à chaque profil client", }, ] const benefits = [ { icon: CheckCircle2, title: "Maîtrise rapide", desc: "Dès la première session", delay: 0.6 }, { icon: Award, title: "Attestation fournie", desc: "Certification de compétence", delay: 0.7 }, { icon: Zap, title: "Impact immédiat", desc: "ROI dès la première utilisation", delay: 0.8 }, ] return (

Formation Career Pilot Pro

Une approche structurée pour maîtriser rapidement notre solution

{(["initial", "advanced"] as const).map((tab) => ( ))}

{activeTab === "initial" ? "2h" : "4h"}

{activeTab === "initial" ? "Pour tous les nouveaux clients" : "Pour les offres Complet et Premium"}

{[ { icon: Users, title: "Public cible", textInitial: "Accessible à tous vos consultants et recruteurs, sans limitation de participants.", textAdvanced: "Sessions en groupes restreints pour maximiser l'apprentissage pratique et personnalisé.", delay: 0.4, }, { icon: GraduationCap, title: "Résultat", textInitial: "Autonomie opérationnelle et maîtrise des fonctions essentielles dès la première utilisation.", textAdvanced: "Expertise avancée et capacité à maximiser le potentiel de la plateforme pour des cas complexes.", delay: 0.5, }, ].map((item, idx) => ( 0 ? "mt-4" : ""}`} >

{item.title}

{activeTab === "initial" ? item.textInitial : item.textAdvanced}

))}

Programme de formation

{(activeTab === "initial" ? initialModules : advancedModules).map((module, index) => (

{module.title}

{module.description}

))}

Taux de satisfaction

{isInView && }

de satisfaction post-formation

{benefits.map((benefit) => (

{benefit.title}

{benefit.desc}

))}

Réserver une formation

) } [V0_FILE]typescriptreact:file="app/Ghost/dashboard-roi/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Header from "@/components/header" import DashboardInfographic from "@/components/dashboard-infographic" export default function DashboardRoiPage() { return (

Mesurez votre Impact

Notre dashboard personnalisé vous permet de suivre précisément le retour sur investissement de CareerPilot Pro

) } [V0_FILE]typescriptreact:file="app/Ghost/formation-simple/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Header from "@/components/header" import TrainingHighlights from "@/components/training-highlights" export default function FormationSimplePage() { return (

Notre Formation

Montez rapidement en compétence pour tirer le meilleur parti de Career Pilot Pack

) } [V0_FILE]typescriptreact:file="app/Ghost/formation/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Header from "@/components/header" import FormationInfo from "@/components/formation-info" export default function FormationPage() { return (

) } [V0_FILE]typescriptreact:file="app/Ghost/formation-infographie/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" const FormationInfographiePage = () => { return (

Formation Infographie

Pourquoi l'infographie ?

L'infographie est un outil puissant pour communiquer visuellement des informations complexes. Elle permet de :

Simplifier des données
Captiver l'attention
Améliorer la compréhension
Renforcer la mémorisation

Cette formation vous donnera les compétences nécessaires pour créer des infographies percutantes et professionnelles.

Contenu de la formation

La formation couvre les aspects suivants :

Principes de design graphique
Choix des couleurs et des typographies
Utilisation d'outils de création (ex: Canva, Adobe Illustrator)
Structuration de l'information
Création de graphiques et d'illustrations
Optimisation pour différents supports (web, print)

Prérequis

Aucun prérequis technique n'est nécessaire. Une appétence pour le design et la communication visuelle est un plus.

Public cible

Cette formation s'adresse à :

Professionnels du marketing et de la communication
Créateurs de contenu
Étudiants
Toute personne souhaitant améliorer ses compétences en communication visuelle

Modalités

La formation est proposée en présentiel et en ligne.

Durée : [Indiquer la durée]

Tarif : [Indiquer le tarif]

Inscription

Pour vous inscrire, veuillez contacter [Indiquer les coordonnées].

Retour à l'accueil

) } export default FormationInfographiePage [V0_FILE]typescriptreact:file="app/Ghost/formation-visuelle/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" const FormationVisuelle = () => { return (

Formation Visuelle

{/* Section 1: Introduction */}

Introduction à la Formation

Cette formation est conçue pour vous initier aux principes fondamentaux de la communication visuelle. Vous apprendrez à créer des designs percutants et efficaces pour divers supports.

{/* Section 2: Objectifs */}

Objectifs de la Formation

Comprendre les bases de la théorie des couleurs.
Maîtriser les principes de la typographie.
Concevoir des mises en page équilibrées et attrayantes.
Utiliser les outils de design graphique.

{/* Section 3: Contenu de la Formation */}

Contenu de la Formation

{/* Module 1 */}

Module 1: Les Fondamentaux du Design

Introduction aux éléments de base du design: lignes, formes, couleurs, etc.

{/* Module 2 */}

Module 2: Typographie

Apprendre à choisir et à utiliser les polices de caractères de manière efficace.

{/* Module 3 */}

Module 3: Théorie des Couleurs

Comprendre l'impact des couleurs et comment les combiner harmonieusement.

{/* Section 4: Inscription */}

Inscrivez-vous dès maintenant!

Contactez-nous

) } export default FormationVisuelle [V0_FILE]typescriptreact:file="app/calculateur-roi/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import Header from "../../components/header" import ROICalculator from "../../components/roi-calculator" export default function CalculateurROIPage() { return (

Calculateur de ROI

Découvrez l'impact financier concret de CareerPilot Pro sur votre activité

) } [V0_FILE]typescriptreact:file="app/admin/blog/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Edit, Trash2, Eye } from "lucide-react" import { getBlogPosts, deleteBlogPost } from "@/lib/blog-api" import type { BlogPost } from "@/lib/supabase" import Link from "next/link" export default function AdminBlogPage() { const [posts, setPosts] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { async function loadPosts() { try { const postsData = await getBlogPosts({ status: undefined }) // Tous les statuts setPosts(postsData) } catch (error) { console.error("Erreur lors du chargement:", error) } finally { setLoading(false) } } loadPosts() }, []) const handleDelete = async (id: string) => { if (confirm("Êtes-vous sûr de vouloir supprimer cet article ?")) { try { await deleteBlogPost(id) setPosts(posts.filter((post) => post.id !== id)) } catch (error) { console.error("Erreur lors de la suppression:", error) } } } if (loading) { return (

Chargement...

) } return (

{/* Header */}

Administration du Blog

{/* Liste des articles */}

{posts.map((post) => (

{post.status} {post.featured && En vedette} {post.category && ( {post.category.name} )}

{post.title}

{post.excerpt}

{post.author && Par {post.author.name}} Créé le {new Date(post.created_at).toLocaleDateString("fr-FR")} {post.published_at && ( Publié le {new Date(post.published_at).toLocaleDateString("fr-FR")} )}

{post.status === "published" && ( )}

))}

{posts.length === 0 && (

Aucun article trouvé.

)}

) } [V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-target-companies.tsx" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Star, UserCircle } from "lucide-react" // Entreprises mises à jour pour D A C S (Dataiku, Alan, Contentsquare, Shift Technology) const companies = [ { name: "Dataiku", field: "AI/ML for Business", rating: 3, site: "dataiku.com", logoUrl: "/placeholder.svg?height=40&width=120", contactPerson: "Alex Moreau, VP Stratégie IA", }, { name: "Alan", field: "HealthTech AI Assurance", rating: 3, site: "alan.com", logoUrl: "/placeholder.svg?height=40&width=100", contactPerson: "Béatrice Dubois, Directrice Innovation", }, { name: "Contentsquare", field: "UX Analytics AI", rating: 3, site: "contentsquare.com", logoUrl: "/placeholder.svg?height=40&width=150", contactPerson: "Charles Petit, Responsable Partenariats Tech", }, { name: "Shift Technology", field: "AI for Insurance Fraud Detection", rating: 3, site: "shift-technology.com", logoUrl: "/placeholder.svg?height=40&width=140", contactPerson: "Sophie Lambert, Lead Data Scientist", }, ] const RatingStars = ({ rating }: { rating: number }) => (

{[...Array(3)].map((_, i) => ( ))}

) export default function SlideTargetCompanies() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.07, delayChildren: 0.2 }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } }, } return ( Dimension 4: Entreprises Cibles (Top Tier Paris) Sélection basée sur l'adéquation profil senior et impact immédiat. {companies.map((company) => (

{" "} {/* min-h pour alignement vertical des logos */} {`${company.name}

{company.name}

{company.field}

{company.site}

Contacter: {company.contactPerson}

))} Ces 4 entreprises sont des exemples. Le rapport complet analyse +16 autres scale-ups pertinentes.

Actions immédiates recommandées:

Cibler 8-10 dirigeants sur LinkedIn dans ces scale-ups et d'autres identifiées.
Préparer un pitch senior orienté "Orchestration de croissance IA B2B".
Participer à 2 événements AI parisiens dans les 3 mois.

) } [V0_FILE]png:file="public/logo/careerpilot-pro-compass-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20500%2A500%20b-QCGyyasm6sPDUDZgAooZ5myqSucZnJ.png" isMerged="true" [V0_FILE]png:file="public/logo/careerpilot-pro-complete-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CPP%20500%2A500%20c-M26EOTyr0NUC41acvUJO3p1fui72EP.png" isMerged="true" [V0_FILE]sql:file="scripts/create-client-info-table.sql" isMerged="true" -- Create client_information table CREATE TABLE IF NOT EXISTS client_information ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_email VARCHAR(255) NOT NULL, -- Personal Information first_name VARCHAR(100) NOT NULL, last_name VARCHAR(100) NOT NULL, phone VARCHAR(20), linkedin_url VARCHAR(255), -- Current Professional Situation current_position VARCHAR(150), current_company VARCHAR(150), current_industry VARCHAR(100), years_experience INTEGER, current_salary_range VARCHAR(50), -- Career Goals target_position VARCHAR(150), target_industry VARCHAR(100), target_salary_range VARCHAR(50), career_change_timeline VARCHAR(50), -- Skills and Preferences key_skills TEXT[], preferred_work_mode VARCHAR(50), -- remote, hybrid, on-site preferred_company_size VARCHAR(50), geographic_preferences TEXT[], -- Additional Information biggest_career_challenges TEXT, previous_coaching_experience BOOLEAN DEFAULT FALSE, additional_notes TEXT, -- Metadata created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_client_info_email ON client_information(user_email); CREATE INDEX IF NOT EXISTS idx_client_info_created_at ON client_information(created_at); [V0_FILE]typescriptreact:file="components/client-info-form.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { submitClientInfo } from "@/app/client-info/actions" import { Loader2, CheckCircle, AlertCircle, User, Briefcase, Target, MapPin, MessageSquare } from "lucide-react" interface ClientInfoFormProps { userEmail: string existingData?: any } export default function ClientInfoForm({ userEmail, existingData }: ClientInfoFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null) const handleSubmit = async (formData: FormData) => { setIsSubmitting(true) setSubmitResult(null) // Add user email to form data formData.set("user_email", userEmail) const result = await submitClientInfo(formData) setSubmitResult(result) setIsSubmitting(false) } const salaryRanges = [ "Moins de 30k€", "30k€ - 40k€", "40k€ - 50k€", "50k€ - 60k€", "60k€ - 80k€", "80k€ - 100k€", "100k€ - 120k€", "Plus de 120k€", ] const timelines = ["Immédiatement", "Dans les 3 mois", "Dans les 6 mois", "Dans l'année", "Plus d'un an"] const workModes = ["Télétravail complet", "Hybride", "Présentiel", "Flexible"] const companySizes = [ "Startup (< 50 employés)", "PME (50-250 employés)", "ETI (250-5000 employés)", "Grande entreprise (> 5000 employés)", "Indifférent", ] return (

{/* Header */}

Profil Client CareerPilot Pro

Complétez votre profil pour que nous puissions personnaliser votre accompagnement carrière

{/* Success/Error Messages */} {submitResult && (

{submitResult.success ? ( ) : ( )}

{submitResult.success ? submitResult.message : submitResult.error}

)}

{/* Personal Information */} Informations Personnelles Vos coordonnées et informations de contact

Prénom *

Nom *

Téléphone

Profil LinkedIn

{/* Current Professional Situation */} Situation Professionnelle Actuelle Votre poste et environnement de travail actuels

Poste Actuel

Entreprise Actuelle

Secteur d'Activité

Années d'Expérience

Fourchette Salariale Actuelle

{/* Career Goals */} Objectifs de Carrière Vos aspirations et objectifs professionnels

Poste Visé

Secteur Visé

Fourchette Salariale Visée

Délai de Transition

{/* Skills and Preferences */} Compétences et Préférences Vos compétences clés et préférences de travail

Compétences Clés

Séparez vos compétences par des virgules

Mode de Travail Préféré

Taille d'Entreprise Préférée

Préférences Géographiques

Séparez vos préférences par des virgules

{/* Additional Information */} Informations Complémentaires Partagez vos défis et expériences

Vos Plus Grands Défis Carrière

</div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="previous_coaching_experience"
                name="previous_coaching_experience"
                defaultChecked={existingData?.previous_coaching_experience || false}
                className="focus-ring-primary"
              />
              <Label htmlFor="previous_coaching_experience" className="text-text-primary font-medium">
                J'ai déjà bénéficié d'un accompagnement carrière
              </Label>
            </div>
            <div className="space-y-2">
              <Label htmlFor="additional_notes" className="text-text-primary font-medium">
                Notes Additionnelles
              </Label>
              <Textarea
                id="additional_notes"
                name="additional_notes"
                rows={3}
                placeholder="Toute information supplémentaire que vous souhaitez partager..."
                defaultValue={existingData?.additional_notes || ""}
                className="focus-ring-primary resize-none"
              />
            </div>
          </CardContent>
        </Card>

{/* Submit Button */}
        <div className="flex justify-center pt-6">
          <Button
            type="submit"
            disabled={isSubmitting}
            className="bg-gradient-primary hover:opacity-90 text-white px-8 py-3 text-lg font-semibold rounded-xl shadow-soft-xl hover-lift min-w-[200px]"
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                Enregistrement...
              </>
            ) : (
              "Enregistrer mon Profil"
            )}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]sql:file="scripts/create-fillout-responses-table.sql" isMerged="true"
-- Create table for Fillout form responses
CREATE TABLE IF NOT EXISTS fillout_responses (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  user_email TEXT NOT NULL,
  form_id TEXT NOT NULL DEFAULT '2fU73i875Eus',
  response_data JSONB NOT NULL,
  submission_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  processed_by_openai BOOLEAN DEFAULT FALSE,
  openai_analysis JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for better performance
CREATE INDEX IF NOT EXISTS idx_fillout_responses_user_email ON fillout_responses(user_email);
CREATE INDEX IF NOT EXISTS idx_fillout_responses_form_id ON fillout_responses(form_id);
CREATE INDEX IF NOT EXISTS idx_fillout_responses_processed ON fillout_responses(processed_by_openai);

-- Enable RLS (Row Level Security)
ALTER TABLE fillout_responses ENABLE ROW LEVEL SECURITY;

-- Create policy to allow users to see only their own responses
CREATE POLICY "Users can view own responses" ON fillout_responses
  FOR SELECT USING (auth.uid() = user_id);

-- Create policy to allow users to insert their own responses
CREATE POLICY "Users can insert own responses" ON fillout_responses
  FOR INSERT WITH CHECK (auth.uid() = user_id);
[V0_FILE]typescript:file="app/evaluation/actions.ts" isMerged="true"
"use server"

import { supabase } from "@/lib/supabase"
import { createClient } from "@supabase/supabase-js"

// Server-side Supabase client with service role for admin operations
const supabaseAdmin = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!)

export interface FilloutResponse {
  user_email: string
  form_id: string
  response_data: Record<string, any>
  user_id?: string
}

export async function saveFilloutResponse(responseData: FilloutResponse) {
  try {
    const { data, error } = await supabaseAdmin
      .from("fillout_responses")
      .insert([
        {
          user_email: responseData.user_email,
          form_id: responseData.form_id,
          response_data: responseData.response_data,
          user_id: responseData.user_id,
        },
      ])
      .select()

if (error) {
      console.error("Supabase error:", error)
      return {
        success: false,
        error: "Erreur lors de la sauvegarde des données.",
      }
    }

return {
      success: true,
      message: "Réponses enregistrées avec succès !",
      data: data[0],
    }
  } catch (error) {
    console.error("Error saving fillout response:", error)
    return {
      success: false,
      error: "Une erreur inattendue s'est produite.",
    }
  }
}

export async function getUserResponses(userEmail: string) {
  try {
    const { data, error } = await supabase
      .from("fillout_responses")
      .select("*")
      .eq("user_email", userEmail)
      .order("created_at", { ascending: false })

if (error) {
      console.error("Supabase error:", error)
      return { success: false, error: "Erreur lors de la récupération des données." }
    }

return {
      success: true,
      data: data || [],
    }
  } catch (error) {
    console.error("Error getting user responses:", error)
    return { success: false, error: "Une erreur inattendue s'est produite." }
  }
}

export async function processWithOpenAI(responseId: string) {
  try {
    // Get the response data
    const { data: response, error: fetchError } = await supabaseAdmin
      .from("fillout_responses")
      .select("*")
      .eq("id", responseId)
      .single()

if (fetchError || !response) {
      return {
        success: false,
        error: "Réponse non trouvée.",
      }
    }

// Here you would integrate with OpenAI
    // For now, we'll simulate the processing
    const mockAnalysis = {
      summary: "Analyse des réponses du formulaire",
      recommendations: ["Recommandation 1", "Recommandation 2"],
      processed_at: new Date().toISOString(),
    }

// Update the response with OpenAI analysis
    const { error: updateError } = await supabaseAdmin
      .from("fillout_responses")
      .update({
        processed_by_openai: true,
        openai_analysis: mockAnalysis,
        updated_at: new Date().toISOString(),
      })
      .eq("id", responseId)

if (updateError) {
      console.error("Update error:", updateError)
      return {
        success: false,
        error: "Erreur lors de la mise à jour.",
      }
    }

return {
      success: true,
      message: "Analyse OpenAI terminée !",
      analysis: mockAnalysis,
    }
  } catch (error) {
    console.error("Error processing with OpenAI:", error)
    return {
      success: false,
      error: "Une erreur inattendue s'est produite.",
    }
  }
}
[V0_FILE]typescriptreact:file="components/evaluation-auth.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle, CheckCircle2, LogOut, User } from "lucide-react"

// Mock session type for preview
interface MockSession {
  user: {
    email: string
    id: string
  }
}

interface EvaluationAuthProps {
  onAuthenticated: (session: MockSession) => void
}

export default function EvaluationAuth({ onAuthenticated }: EvaluationAuthProps) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [authError, setAuthError] = useState<string | null>(null)
  const [authMessage, setAuthMessage] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [session, setSession] = useState<MockSession | null>(null)

useEffect(() => {
    // Check for existing session in localStorage (for preview)
    const savedSession = localStorage.getItem("mock-session")
    if (savedSession) {
      const parsedSession = JSON.parse(savedSession)
      setSession(parsedSession)
      onAuthenticated(parsedSession)
    }
  }, [onAuthenticated])

async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    setAuthError(null)
    setAuthMessage(null)

// Simulate API delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

if (!email || !password) {
      setAuthError("Veuillez remplir tous les champs.")
      setIsLoading(false)
      return
    }

// Mock authentication - accept any email/password for preview
    const mockSession: MockSession = {
      user: {
        email: email,
        id: `user_${Date.now()}`,
      },
    }

localStorage.setItem("mock-session", JSON.stringify(mockSession))
    setSession(mockSession)
    onAuthenticated(mockSession)
    setIsLoading(false)
  }

async function handleSignup(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    setAuthError(null)
    setAuthMessage(null)

if (!email || !password) {
      setAuthError("Veuillez remplir tous les champs.")
      setIsLoading(false)
      return
    }

if (password.length < 6) {
      setAuthError("Le mot de passe doit contenir au moins 6 caractères.")
      setIsLoading(false)
      return
    }

// Simulate API delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

// For preview, directly create session instead of sending confirmation email
    const mockSession: MockSession = {
      user: {
        email: email,
        id: `user_${Date.now()}`,
      },
    }

localStorage.setItem("mock-session", JSON.stringify(mockSession))
    setSession(mockSession)
    onAuthenticated(mockSession)
    setAuthMessage("Compte créé avec succès ! (Mode prévisualisation)")
    setIsLoading(false)
  }

function handleLogout() {
    localStorage.removeItem("mock-session")
    setSession(null)
  }

if (session) {
    return (
      <Card className="border-primary-200 bg-gradient-to-br from-background-primary to-primary-50">
        <CardHeader className="text-center">
          <div className="mx-auto w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full flex items-center justify-center mb-4">
            <User className="w-6 h-6 text-white" />
          </div>
          <CardTitle className="text-text-primary">Authentification réussie</CardTitle>
          <CardDescription className="text-text-secondary">Connecté en tant que {session.user.email}</CardDescription>
        </CardHeader>
        <CardContent className="text-center">
          <Button
            onClick={handleLogout}
            variant="outline"
            className="border-primary-300 text-primary-600 hover:bg-primary-50"
          >
            <LogOut className="w-4 h-4 mr-2" />
            Se déconnecter
          </Button>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="border-primary-200 bg-gradient-to-br from-background-primary to-primary-50">
      <CardHeader className="text-center">
        <div className="mx-auto w-12 h-12 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full flex items-center justify-center mb-4">
          <User className="w-6 h-6 text-white" />
        </div>
        <CardTitle className="text-text-primary">Accès au Formulaire d'Évaluation</CardTitle>
        <CardDescription className="text-text-secondary">
          Connectez-vous pour accéder à votre évaluation personnalisée
        </CardDescription>
        <div className="mt-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
          <p className="text-xs text-blue-600">🔍 Mode prévisualisation : utilisez n'importe quel email/mot de passe</p>
        </div>
      </CardHeader>
      <CardContent>
        <form className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email" className="text-text-primary">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="demo@careerpilotpro.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="border-primary-200 focus:border-primary-400"
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password" className="text-text-primary">
              Mot de passe
            </Label>
            <Input
              id="password"
              type="password"
              placeholder="demo123"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="border-primary-200 focus:border-primary-400"
              required
            />
          </div>

{authError && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Erreur</AlertTitle>
              <AlertDescription>{authError}</AlertDescription>
            </Alert>
          )}

{authMessage && (
            <Alert className="border-primary-200 bg-primary-50">
              <CheckCircle2 className="h-4 w-4 text-primary-600" />
              <AlertTitle className="text-primary-800">Information</AlertTitle>
              <AlertDescription className="text-primary-700">{authMessage}</AlertDescription>
            </Alert>
          )}

<div className="flex space-x-2 pt-2">
            <Button
              onClick={handleLogin}
              type="button"
              disabled={isLoading}
              className="w-full bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white"
            >
              {isLoading ? "Connexion..." : "Se connecter"}
            </Button>
            <Button
              onClick={handleSignup}
              type="button"
              variant="outline"
              disabled={isLoading}
              className="w-full border-primary-300 text-primary-600 hover:bg-primary-50"
            >
              {isLoading ? "Création..." : "Créer un compte"}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import DashboardPageClient from "./DashboardPageClient"

export default function DashboardPage() {
  return <DashboardPageClient />
}

export const metadata = {
  title: "Tableau de Bord Coach - CareerPilot Pro",
  description: "Suivi des clients, évaluations et analyses de progression",
}
[V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 pt-24 pb-12">
      <div className="container mx-auto px-6">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-300 rounded w-1/3 mb-4"></div>
          <div className="h-4 bg-gray-300 rounded w-1/2 mb-8"></div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-24 bg-gray-300 rounded"></div>
            ))}
          </div>

<div className="h-64 bg-gray-300 rounded mb-6"></div>
          <div className="h-96 bg-gray-300 rounded"></div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/evaluation/EvaluationPageClient.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle, FileText, Users, BarChart3 } from "lucide-react"
import CareerEvaluationForm from "@/components/career-evaluation-form"

export default function EvaluationPageClient() {
  const [isAuthenticated, setIsAuthenticated] = useState(true) // Simplified for demo
  const [showForm, setShowForm] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleFormSubmit = (data: any) => {
    // Simulate form submission
    console.log("Form data submitted:", data)

// Simulate saving to localStorage for demo
    localStorage.setItem(
      `evaluation_${Date.now()}`,
      JSON.stringify({
        ...data,
        submittedAt: new Date().toISOString(),
        status: "submitted",
      }),
    )

setIsSubmitted(true)
    setShowForm(false)
  }

if (isSubmitted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 pt-24 pb-12">
        <div className="container mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="max-w-2xl mx-auto text-center"
          >
            <Card className="border-green-200 bg-green-50">
              <CardContent className="pt-8 pb-8">
                <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
                <h1 className="text-2xl font-bold text-green-800 mb-4">Synthèse Parcours Client Soumise !</h1>
                <p className="text-green-700 mb-6">
                  Merci d'avoir complété votre synthèse parcours client. Nos experts vont analyser vos réponses et vous
                  contacteront sous 48h avec des recommandations personnalisées.
                </p>
                <div className="space-y-3 text-sm text-green-600">
                  <div className="flex items-center justify-center">
                    <FileText className="w-4 h-4 mr-2" />
                    <span>Analyse IA en cours de traitement</span>
                  </div>
                  <div className="flex items-center justify-center">
                    <Users className="w-4 h-4 mr-2" />
                    <span>Révision par nos experts carrière</span>
                  </div>
                  <div className="flex items-center justify-center">
                    <BarChart3 className="w-4 h-4 mr-2" />
                    <span>Rapport personnalisé en préparation</span>
                  </div>
                </div>
                <Button
                  onClick={() => (window.location.href = "/")}
                  className="mt-6 bg-[#B4CBA4] hover:bg-[#9BB88A] text-white"
                >
                  Retour à l'accueil
                </Button>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    )
  }

if (showForm) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 pt-24 pb-12">
        <div className="container mx-auto px-6">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <div className="text-center mb-8">
              <h1 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">Synthèse Parcours Client</h1>
              <p className="text-lg text-text-secondary max-w-2xl mx-auto">
                Complétez cette évaluation détaillée pour recevoir une analyse personnalisée de votre parcours
                professionnel
              </p>
            </div>
            <CareerEvaluationForm onSubmit={handleFormSubmit} />
          </motion.div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 pt-24 pb-12">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-text-primary mb-6">Accès Client</h1>
            <p className="text-xl text-text-secondary max-w-3xl mx-auto">
              Bienvenue dans votre espace client. Complétez votre synthèse parcours client pour recevoir une analyse
              personnalisée et des recommandations adaptées à vos objectifs professionnels.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 mb-12">
            <Card className="border-primary-200 hover:shadow-lg transition-shadow duration-300">
              <CardHeader>
                <CardTitle className="flex items-center text-primary-500">
                  <FileText className="w-6 h-6 mr-3" />
                  Synthèse Complète
                </CardTitle>
                <CardDescription>
                  Évaluation approfondie de votre parcours, compétences et objectifs professionnels
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-text-secondary">
                  <li>• 8 sections détaillées</li>
                  <li>• Upload de documents (CV, portfolio)</li>
                  <li>• Enregistrement vocal optionnel</li>
                  <li>• Analyse IA personnalisée</li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-primary-200 hover:shadow-lg transition-shadow duration-300">
              <CardHeader>
                <CardTitle className="flex items-center text-secondary-600">
                  <BarChart3 className="w-6 h-6 mr-3" />
                  Analyse Experte
                </CardTitle>
                <CardDescription>Rapport personnalisé avec recommandations et plan d'action</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-text-secondary">
                  <li>• Analyse par nos experts</li>
                  <li>• Recommandations personnalisées</li>
                  <li>• Plan d'action détaillé</li>
                  <li>• Suivi et accompagnement</li>
                </ul>
              </CardContent>
            </Card>

{/* Nouvelle carte Tableau de Bord */}
            <Card
              className="border-primary-200 hover:shadow-lg transition-shadow duration-300 cursor-pointer"
              onClick={() => (window.location.href = "/dashboard")}
            >
              <CardHeader>
                <CardTitle className="flex items-center text-accent-lavender-600">
                  <Users className="w-6 h-6 mr-3" />
                  Mon Tableau de Bord
                </CardTitle>
                <CardDescription>Accès coach - Suivi des clients et analyses</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-text-secondary">
                  <li>• Gestion des clients</li>
                  <li>• Suivi des évaluations</li>
                  <li>• Rapports et KPI</li>
                  <li>• Analyse de progression</li>
                </ul>
              </CardContent>
            </Card>
          </div>

<div className="text-center space-y-4">
            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button
                onClick={() => setShowForm(true)}
                size="lg"
                className="bg-[#B4CBA4] hover:bg-[#9BB88A] text-white px-8 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
              >
                <FileText className="w-5 h-5 mr-3" />
                Commencer la Synthèse Parcours Client
              </Button>
            </motion.div>

<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
              <Button
                onClick={() => (window.location.href = "/dashboard")}
                size="lg"
                variant="outline"
                className="border-accent-lavender-300 text-accent-lavender-600 hover:bg-accent-lavender-50 px-8 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
              >
                <Users className="w-5 h-5 mr-3" />
                Accéder au Tableau de Bord
              </Button>
            </motion.div>

<p className="text-sm text-text-secondary mt-4">Durée estimée : 15-20 minutes</p>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/career-evaluation-form.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronLeft, ChevronRight, Send, Upload, Mic, MicOff, FileText, Trash2, Plus, X } from "lucide-react"

interface CareerEvaluationFormProps {
  onSubmit: (data: any) => void
}

export default function CareerEvaluationForm({ onSubmit }: CareerEvaluationFormProps) {
  const [currentStep, setCurrentStep] = useState(0)
  const [isRecording, setIsRecording] = useState(false)
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null)
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const [formData, setFormData] = useState({
    // Étape 1: Informations personnelles
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    age: "",
    location: "",
    linkedinProfile: "",
    currentSalary: "",
    desiredSalary: "",

// Étape 2: Situation professionnelle actuelle
    currentPosition: "",
    company: "",
    industry: "",
    experience: "",
    employmentStatus: "",
    jobSatisfaction: "",
    workSchedule: "",
    managementLevel: "",
    teamSize: "",

// Étape 3: Formation et compétences
    education: "",
    fieldOfStudy: "",
    certifications: "",
    languages: [],
    languageLevels: {},
    technicalSkills: ["", "", "", "", "", ""],
    softSkills: ["", "", "", "", "", ""],
    industryKnowledge: [],

// Étape 4: Objectifs et aspirations
    careerGoals: "",
    desiredPosition: "",
    desiredIndustry: "",
    timeframe: "",
    willingToRelocate: "",
    preferredLocation: "",
    careerChange: "",
    entrepreneurialInterest: "",

// Étape 5: Préférences de travail
    workEnvironment: "",
    workStyle: "",
    companySize: "",
    companyCulture: [],
    benefits: [],
    travelWillingness: "",
    remoteWorkPreference: "",

// Étape 6: Défis et développement
    currentChallenges: "",
    skillsToImprove: [],
    learningPreferences: [],
    mentorshipInterest: "",
    networkingComfort: "",

// Étape 7: Motivations et valeurs
    workMotivations: [],
    workValues: [],
    workLifeBalance: "",
    stressManagement: "",
    decisionMakingStyle: "",

// Étape 8: Informations complémentaires
    additionalInfo: "",
    specificConcerns: "",
    previousCoaching: "",
    uploadedFiles: [],
    voiceRecording: null,
  })

const totalSteps = 8
  const progress = ((currentStep + 1) / totalSteps) * 100

const updateFormData = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const updateSkillAtIndex = (skillType: "technicalSkills" | "softSkills", index: number, value: string) => {
    const currentSkills = [...formData[skillType]]
    currentSkills[index] = value
    updateFormData(skillType, currentSkills)
  }

const addSkill = (skillType: "technicalSkills" | "softSkills") => {
    const currentSkills = [...formData[skillType]]
    if (currentSkills.length < 10) {
      currentSkills.push("")
      updateFormData(skillType, currentSkills)
    }
  }

const removeSkill = (skillType: "technicalSkills" | "softSkills", index: number) => {
    const currentSkills = [...formData[skillType]]
    if (currentSkills.length > 6) {
      currentSkills.splice(index, 1)
      updateFormData(skillType, currentSkills)
    }
  }

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || [])
    const fileData = files.map((file) => ({
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified,
    }))
    updateFormData("uploadedFiles", [...formData.uploadedFiles, ...fileData])
  }

const removeFile = (index: number) => {
    const newFiles = formData.uploadedFiles.filter((_, i) => i !== index)
    updateFormData("uploadedFiles", newFiles)
  }

const checkMicrophoneSupport = () => {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      alert(
        "Votre navigateur ne prend pas en charge l'enregistrement audio. Veuillez utiliser un navigateur plus récent comme Chrome, Firefox, ou Edge.",
      )
      return false
    }
    return true
  }

const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const recorder = new MediaRecorder(stream)
      const chunks: BlobPart[] = []

recorder.ondataavailable = (event) => {
        chunks.push(event.data)
      }

recorder.onstop = () => {
        const blob = new Blob(chunks, { type: "audio/wav" })
        setAudioBlob(blob)
        updateFormData("voiceRecording", blob)
        stream.getTracks().forEach((track) => track.stop())
      }

recorder.start()
      setMediaRecorder(recorder)
      setIsRecording(true)
    } catch (error) {
      console.error("Error accessing microphone:", error)
      // Message d'erreur plus convivial et informatif
      alert(
        "Impossible d'accéder au microphone. Veuillez vérifier que vous avez accordé les permissions nécessaires dans votre navigateur et que votre microphone est correctement connecté.",
      )

// Réinitialiser l'état pour éviter des problèmes
      setIsRecording(false)
      setMediaRecorder(null)
    }
  }

const stopRecording = () => {
    if (mediaRecorder && isRecording) {
      mediaRecorder.stop()
      setIsRecording(false)
      setMediaRecorder(null)
    }
  }

const deleteRecording = () => {
    setAudioBlob(null)
    updateFormData("voiceRecording", null)
  }

const handleNext = () => {
    if (currentStep < totalSteps - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const handleSubmit = () => {
    onSubmit(formData)
  }

const renderStep = () => {
    switch (currentStep) {
      case 0:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Informations Personnelles</CardTitle>
              <CardDescription className="text-text-secondary">Commençons par vos informations de base</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="firstName">Prénom *</Label>
                  <Input
                    id="firstName"
                    value={formData.firstName}
                    onChange={(e) => updateFormData("firstName", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
                <div>
                  <Label htmlFor="lastName">Nom *</Label>
                  <Input
                    id="lastName"
                    value={formData.lastName}
                    onChange={(e) => updateFormData("lastName", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="email">Email *</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => updateFormData("email", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
                <div>
                  <Label htmlFor="phone">Téléphone</Label>
                  <Input
                    id="phone"
                    value={formData.phone}
                    onChange={(e) => updateFormData("phone", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="age">Âge</Label>
                  <Select onValueChange={(value) => updateFormData("age", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez votre tranche d'âge" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="18-25">30-35 ans</SelectItem>
                      <SelectItem value="26-35">36-45 ans</SelectItem>
                      <SelectItem value="36-45">46-55 ans</SelectItem>
                      <SelectItem value="46-55">56-60 ans</SelectItem>
                      <SelectItem value="55+">60+ ans</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="location">Localisation actuelle</Label>
                  <Input
                    id="location"
                    value={formData.location}
                    onChange={(e) => updateFormData("location", e.target.value)}
                    placeholder="Ville, Région"
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
              <div>
                <Label htmlFor="linkedinProfile">Profil LinkedIn</Label>
                <Input
                  id="linkedinProfile"
                  value={formData.linkedinProfile}
                  onChange={(e) => updateFormData("linkedinProfile", e.target.value)}
                  placeholder="https://linkedin.com/in/votre-profil"
                  className="border-primary-200 focus:border-primary-500"
                />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="currentSalary">Salaire actuel (optionnel)</Label>
                  <Input
                    id="currentSalary"
                    value={formData.currentSalary}
                    onChange={(e) => updateFormData("currentSalary", e.target.value)}
                    placeholder="Ex: 150000€"
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
                <div>
                  <Label htmlFor="desiredSalary">Salaire souhaité (optionnel)</Label>
                  <Input
                    id="desiredSalary"
                    value={formData.desiredSalary}
                    onChange={(e) => updateFormData("desiredSalary", e.target.value)}
                    placeholder="Ex: 190000€"
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        )

case 1:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Situation Professionnelle Actuelle</CardTitle>
              <CardDescription className="text-text-secondary">
                Décrivez votre situation professionnelle actuelle
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="currentPosition">Poste actuel *</Label>
                  <Input
                    id="currentPosition"
                    value={formData.currentPosition}
                    onChange={(e) => updateFormData("currentPosition", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
                <div>
                  <Label htmlFor="company">Entreprise</Label>
                  <Input
                    id="company"
                    value={formData.company}
                    onChange={(e) => updateFormData("company", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Secteur d'activité</Label>
                  <Select onValueChange={(value) => updateFormData("industry", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez votre secteur" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="tech">Technologie</SelectItem>
                      <SelectItem value="finance">Finance</SelectItem>
                      <SelectItem value="healthcare">Santé</SelectItem>
                      <SelectItem value="education">Éducation</SelectItem>
                      <SelectItem value="marketing">Marketing</SelectItem>
                      <SelectItem value="consulting">Conseil et Services</SelectItem>
                      <SelectItem value="retail">Commerce</SelectItem>
                      <SelectItem value="manufacturing">Industrie</SelectItem>
                      <SelectItem value="government">Secteur public</SelectItem>
                      <SelectItem value="nonprofit">Associatif</SelectItem>
                      <SelectItem value="other">Autre</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Statut d'emploi</Label>
                  <Select onValueChange={(value) => updateFormData("employmentStatus", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez votre statut" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="employed">Salarié(e)</SelectItem>
                      <SelectItem value="unemployed">Sans emploi</SelectItem>
                      <SelectItem value="freelance">Freelance</SelectItem>
                      <SelectItem value="entrepreneur">Entrepreneur</SelectItem>
                      <SelectItem value="manager de transition">manager de transition</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label>Années d'expérience *</Label>
                <RadioGroup
                  value={formData.experience}
                  onValueChange={(value) => updateFormData("experience", value)}
                  className="mt-2 grid grid-cols-2 md:grid-cols-4 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="0-2" id="exp1" />
                    <Label htmlFor="exp1">10-15 ans</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="3-5" id="exp2" />
                    <Label htmlFor="exp2">16-25 ans</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="6-10" id="exp3" />
                    <Label htmlFor="exp3">26-30 ans</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="10+" id="exp4" />
                    <Label htmlFor="exp4">30+ ans</Label>
                  </div>
                </RadioGroup>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Niveau de management</Label>
                  <Select onValueChange={(value) => updateFormData("managementLevel", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez votre niveau" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="individual">Contributeur individuel</SelectItem>
                      <SelectItem value="team-lead">Chef d'équipe</SelectItem>
                      <SelectItem value="manager">Manager</SelectItem>
                      <SelectItem value="senior-manager">Manager senior</SelectItem>
                      <SelectItem value="director">Directeur</SelectItem>
                      <SelectItem value="executive">Cadre dirigeant</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Taille de l'équipe managée</Label>
                  <Select onValueChange={(value) => updateFormData("teamSize", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Nombre de personnes" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="0">Aucune</SelectItem>
                      <SelectItem value="1-5">1-10 personnes</SelectItem>
                      <SelectItem value="6-15">11-50 personnes</SelectItem>
                      <SelectItem value="16-50">51-20 personnes</SelectItem>
                      <SelectItem value="50+">200+ personnes</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label>Satisfaction professionnelle actuelle</Label>
                <RadioGroup
                  value={formData.jobSatisfaction}
                  onValueChange={(value) => updateFormData("jobSatisfaction", value)}
                  className="mt-2 grid grid-cols-2 md:grid-cols-4 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="very-satisfied" id="sat1" />
                    <Label htmlFor="sat1">Très satisfait(e)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="satisfied" id="sat2" />
                    <Label htmlFor="sat2">Satisfait(e)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="neutral" id="sat3" />
                    <Label htmlFor="sat3">Neutre</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="unsatisfied" id="sat4" />
                    <Label htmlFor="sat4">Insatisfait(e)</Label>
                  </div>
                </RadioGroup>
              </div>
            </CardContent>
          </Card>
        )

case 2:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Formation et Compétences</CardTitle>
              <CardDescription className="text-text-secondary">
                Détaillez votre formation et vos compétences
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Niveau d'éducation</Label>
                  <Select onValueChange={(value) => updateFormData("education", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez votre niveau" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="highschool">Baccalauréat</SelectItem>
                      <SelectItem value="bachelor">Licence/Bachelor</SelectItem>
                      <SelectItem value="master">Master / Grande Ecole</SelectItem>
                      <SelectItem value="phd">Doctorat</SelectItem>
                      <SelectItem value="professional">Formation professionnelle</SelectItem>
                      <SelectItem value="other">Autre</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="fieldOfStudy">Domaine d'études</Label>
                  <Input
                    id="fieldOfStudy"
                    value={formData.fieldOfStudy}
                    onChange={(e) => updateFormData("fieldOfStudy", e.target.value)}
                    placeholder="Ex: Informatique, Commerce, etc."
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>

<div>
                <Label>Langues parlées (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
                  {[
                    "Français",
                    "Anglais",
                    "Espagnol",
                    "Allemand",
                    "Italien",
                    "Portugais",
                    "Chinois",
                    "Japonais",
                    "Arabe",
                    "Russe",
                    "Néerlandais",
                    "Autre",
                  ].map((language) => (
                    <div key={language} className="flex items-center space-x-2">
                      <Checkbox
                        id={language}
                        checked={formData.languages.includes(language)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("languages", [...formData.languages, language])
                          } else {
                            updateFormData(
                              "languages",
                              formData.languages.filter((l) => l !== language),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={language} className="text-sm">
                        {language}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

{/* Compétences Techniques */}
              <div className="bg-gradient-to-br from-accent-graphite-50 to-accent-graphite-100 p-6 rounded-xl border border-accent-graphite-200">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="text-lg font-semibold text-accent-graphite-900 mb-1">🔧 Compétences Techniques</h3>
                    <p className="text-sm text-accent-graphite-700">
                      Listez vos compétences métier et techniques (6 à 10 compétences)
                    </p>
                  </div>
                  {formData.technicalSkills.length < 10 && (
                    <Button
                      type="button"
                      onClick={() => addSkill("technicalSkills")}
                      variant="outline"
                      size="sm"
                      className="border-accent-graphite-300 text-accent-graphite-600 hover:bg-accent-graphite-100"
                    >
                      <Plus className="w-4 h-4 mr-1" />
                      Ajouter
                    </Button>
                  )}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {formData.technicalSkills.map((skill, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <div className="flex-1 relative">
                        <Input
                          value={skill}
                          onChange={(e) => updateSkillAtIndex("technicalSkills", index, e.target.value)}
                          placeholder={`Compétence ${index + 1}`}
                          className="border-accent-graphite-200 focus:border-accent-graphite-500 bg-white/70"
                        />
                      </div>
                      {formData.technicalSkills.length > 6 && (
                        <Button
                          type="button"
                          onClick={() => removeSkill("technicalSkills", index)}
                          variant="ghost"
                          size="sm"
                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
                        >
                          <X className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  ))}
                </div>
                <div className="mt-3 text-xs text-accent-graphite-600">
                  Exemples : Python, Excel avancé, CRM, Analyse de données, Photoshop, etc.
                </div>
              </div>

{/* Compétences Relationnelles */}
              <div className="bg-gradient-to-br from-accent-green-50 to-accent-green-100 p-6 rounded-xl border border-accent-green-200">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="text-lg font-semibold text-accent-green-900 mb-1">🤝 Compétences Relationnelles</h3>
                    <p className="text-sm text-accent-green-700">
                      Listez vos soft skills et compétences humaines (6 à 10 compétences)
                    </p>
                  </div>
                  {formData.softSkills.length < 10 && (
                    <Button
                      type="button"
                      onClick={() => addSkill("softSkills")}
                      variant="outline"
                      size="sm"
                      className="border-accent-green-300 text-accent-green-600 hover:bg-accent-green-100"
                    >
                      <Plus className="w-4 h-4 mr-1" />
                      Ajouter
                    </Button>
                  )}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {formData.softSkills.map((skill, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <div className="flex-1 relative">
                        <Input
                          value={skill}
                          onChange={(e) => updateSkillAtIndex("softSkills", index, e.target.value)}
                          placeholder={`Compétence ${index + 1}`}
                          className="border-accent-green-200 focus:border-accent-green-500 bg-white/70"
                        />
                      </div>
                      {formData.softSkills.length > 6 && (
                        <Button
                          type="button"
                          onClick={() => removeSkill("softSkills", index)}
                          variant="ghost"
                          size="sm"
                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
                        >
                          <X className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  ))}
                </div>
                <div className="mt-3 text-xs text-accent-green-600">
                  Exemples : Leadership, Communication, Négociation, Gestion d'équipe, Créativité, etc.
                </div>
              </div>

<div>
                <Label htmlFor="certifications">Certifications et formations</Label>
                <Textarea
                  id="certifications"
                  value={formData.certifications}
                  onChange={(e) => updateFormData("certifications", e.target.value)}
                  placeholder="Listez vos certifications, formations continues, etc."
                  className="border-primary-200 focus:border-primary-500"
                  rows={3}
                />
              </div>
            </CardContent>
          </Card>
        )

case 3:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Objectifs et Aspirations</CardTitle>
              <CardDescription className="text-text-secondary">
                Où souhaitez-vous aller dans votre carrière ?
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="careerGoals">Objectifs de carrière *</Label>
                <Textarea
                  id="careerGoals"
                  value={formData.careerGoals}
                  onChange={(e) => updateFormData("careerGoals", e.target.value)}
                  placeholder="Décrivez vos objectifs professionnels à court et long terme..."
                  className="border-primary-200 focus:border-primary-500"
                  rows={4}
                />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="desiredPosition">Poste souhaité</Label>
                  <Input
                    id="desiredPosition"
                    value={formData.desiredPosition}
                    onChange={(e) => updateFormData("desiredPosition", e.target.value)}
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
                <div>
                  <Label>Secteur d'activité souhaité</Label>
                  <Select onValueChange={(value) => updateFormData("desiredIndustry", value)}>
                    <SelectTrigger className="border-primary-200 bg-[#FDF8F3]">
                      <SelectValue placeholder="Sélectionnez le secteur souhaité" />
                    </SelectTrigger>
                    <SelectContent className="bg-[#FDF8F3]">
                      <SelectItem value="same">Le même que maintenant</SelectItem>
                      <SelectItem value="tech">Technologie</SelectItem>
                      <SelectItem value="finance">Finance</SelectItem>
                      <SelectItem value="healthcare">Santé</SelectItem>
                      <SelectItem value="education">Éducation</SelectItem>
                      <SelectItem value="marketing">Marketing</SelectItem>
                      <SelectItem value="consulting">Conseil</SelectItem>
                      <SelectItem value="startup">Startup</SelectItem>
                      <SelectItem value="other">Autre</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label>Horizon temporel pour vos objectifs</Label>
                <RadioGroup
                  value={formData.timeframe}
                  onValueChange={(value) => updateFormData("timeframe", value)}
                  className="mt-2 grid grid-cols-2 md:grid-cols-4 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="6months" id="time1" />
                    <Label htmlFor="time1">3 à 5 mois</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="1year" id="time2" />
                    <Label htmlFor="time2">6 mois à 11 mois</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="2years" id="time3" />
                    <Label htmlFor="time3">12 à 17 mois</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="5years" id="time4" />
                    <Label htmlFor="time4">18+ mois</Label>
                  </div>
                </RadioGroup>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label>Mobilité géographique</Label>
                  <RadioGroup
                    value={formData.willingToRelocate}
                    onValueChange={(value) => updateFormData("willingToRelocate", value)}
                    className="mt-2"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="yes" id="relocate1" />
                      <Label htmlFor="relocate1">Oui, prêt(e) à déménager</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="maybe" id="relocate2" />
                      <Label htmlFor="relocate2">Peut-être, selon l'opportunité</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="no" id="relocate3" />
                      <Label htmlFor="relocate3">Non, souhaite rester local</Label>
                    </div>
                  </RadioGroup>
                </div>
                <div>
                  <Label htmlFor="preferredLocation">Localisation préférée</Label>
                  <Input
                    id="preferredLocation"
                    value={formData.preferredLocation}
                    onChange={(e) => updateFormData("preferredLocation", e.target.value)}
                    placeholder="Ville, région ou pays souhaité"
                    className="border-primary-200 focus:border-primary-500"
                  />
                </div>
              </div>
              <div>
                <Label>Intérêt pour l'entrepreneuriat</Label>
                <RadioGroup
                  value={formData.entrepreneurialInterest}
                  onValueChange={(value) => updateFormData("entrepreneurialInterest", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-3 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="high" id="entre1" />
                    <Label htmlFor="entre1">Très intéressé(e)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="medium" id="entre2" />
                    <Label htmlFor="entre2">Moyennement intéressé(e)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="low" id="entre3" />
                    <Label htmlFor="entre3">Pas intéressé(e)</Label>
                  </div>
                </RadioGroup>
              </div>
            </CardContent>
          </Card>
        )

case 4:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Préférences de Travail</CardTitle>
              <CardDescription className="text-text-secondary">Comment préférez-vous travailler ?</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label>Environnement de travail préféré</Label>
                <RadioGroup
                  value={formData.workEnvironment}
                  onValueChange={(value) => updateFormData("workEnvironment", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="office" id="env1" />
                    <Label htmlFor="env1">Bureau traditionnel</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="remote" id="env2" />
                    <Label htmlFor="env2">Télétravail complet</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="hybrid" id="env3" />
                    <Label htmlFor="env3">Hybride</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="flexible" id="env4" />
                    <Label htmlFor="env4">Flexible</Label>
                  </div>
                </RadioGroup>
              </div>

<div>
                <Label>Taille d'entreprise préférée</Label>
                <RadioGroup
                  value={formData.companySize}
                  onValueChange={(value) => updateFormData("companySize", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="startup" id="size1" />
                    <Label htmlFor="size1">Startup (1-50 employés)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="small" id="size2" />
                    <Label htmlFor="size2">PME (51-250 employés)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="medium" id="size3" />
                    <Label htmlFor="size3">ETI (251-5000 employés)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="large" id="size4" />
                    <Label htmlFor="size4">Grande entreprise (5000+ employés)</Label>
                  </div>
                </RadioGroup>
              </div>

<div>
                <Label>Culture d'entreprise recherchée (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Innovation",
                    "Collaboration",
                    "Autonomie",
                    "Stabilité",
                    "Croissance rapide",
                    "Équilibre vie-travail",
                    "Diversité",
                    "Impact social",
                    "Excellence",
                    "Entrepreneuriat",
                    "Tradition",
                    "Agilité",
                  ].map((culture) => (
                    <div key={culture} className="flex items-center space-x-2">
                      <Checkbox
                        id={culture}
                        checked={formData.companyCulture.includes(culture)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("companyCulture", [...formData.companyCulture, culture])
                          } else {
                            updateFormData(
                              "companyCulture",
                              formData.companyCulture.filter((c) => c !== culture),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={culture} className="text-sm">
                        {culture}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Avantages importants (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Assurance santé",
                    "Retraite complémentaire",
                    "Tickets restaurant",
                    "Transport",
                    "Formation continue",
                    "Congés supplémentaires",
                    "Télétravail",
                    "Horaires flexibles",
                    "Salle de sport",
                    "Crèche d'entreprise",
                    "Stock-options",
                    "Primes performance",
                  ].map((benefit) => (
                    <div key={benefit} className="flex items-center space-x-2">
                      <Checkbox
                        id={benefit}
                        checked={formData.benefits.includes(benefit)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("benefits", [...formData.benefits, benefit])
                          } else {
                            updateFormData(
                              "benefits",
                              formData.benefits.filter((b) => b !== benefit),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={benefit} className="text-sm">
                        {benefit}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Disponibilité pour les déplacements</Label>
                <RadioGroup
                  value={formData.travelWillingness}
                  onValueChange={(value) => updateFormData("travelWillingness", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="none" id="travel1" />
                    <Label htmlFor="travel1">Aucun déplacement</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="occasional" id="travel2" />
                    <Label htmlFor="travel2">Déplacements occasionnels</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="frequent" id="travel3" />
                    <Label htmlFor="travel3">Déplacements fréquents</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="international" id="travel4" />
                    <Label htmlFor="travel4">Déplacements internationaux</Label>
                  </div>
                </RadioGroup>
              </div>
            </CardContent>
          </Card>
        )

case 5:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Défis et Développement</CardTitle>
              <CardDescription className="text-text-secondary">
                Identifions vos défis et besoins de développement
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label htmlFor="currentChallenges">Défis actuels dans votre carrière</Label>
                <Textarea
                  id="currentChallenges"
                  value={formData.currentChallenges}
                  onChange={(e) => updateFormData("currentChallenges", e.target.value)}
                  placeholder="Quels sont les principaux défis que vous rencontrez actuellement ?"
                  className="border-primary-200 focus:border-primary-500"
                  rows={4}
                />
              </div>

<div>
                <Label>Compétences à améliorer (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Leadership",
                    "Communication publique",
                    "Négociation",
                    "Gestion du temps",
                    "Compétences techniques",
                    "Langues étrangères",
                    "Gestion d'équipe",
                    "Stratégie",
                    "Analyse financière",
                    "Marketing digital",
                    "Vente",
                    "Réseau professionnel",
                  ].map((skill) => (
                    <div key={skill} className="flex items-center space-x-2">
                      <Checkbox
                        id={skill}
                        checked={formData.skillsToImprove.includes(skill)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("skillsToImprove", [...formData.skillsToImprove, skill])
                          } else {
                            updateFormData(
                              "skillsToImprove",
                              formData.skillsToImprove.filter((s) => s !== skill),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={skill} className="text-sm">
                        {skill}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Préférences d'apprentissage (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Formation en ligne",
                    "Formation présentielle",
                    "Coaching individuel",
                    "Mentorat",
                    "Lectures spécialisées",
                    "Conférences",
                    "Ateliers pratiques",
                    "Apprentissage par projet",
                    "Échanges entre pairs",
                    "Certification",
                    "Autoformation",
                    "Formation interne",
                  ].map((preference) => (
                    <div key={preference} className="flex items-center space-x-2">
                      <Checkbox
                        id={preference}
                        checked={formData.learningPreferences.includes(preference)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("learningPreferences", [...formData.learningPreferences, preference])
                          } else {
                            updateFormData(
                              "learningPreferences",
                              formData.learningPreferences.filter((p) => p !== preference),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={preference} className="text-sm">
                        {preference}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Intérêt pour le mentorat</Label>
                <RadioGroup
                  value={formData.mentorshipInterest}
                  onValueChange={(value) => updateFormData("mentorshipInterest", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-3 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="mentor" id="mentor1" />
                    <Label htmlFor="mentor1">Être mentor</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="mentee" id="mentor2" />
                    <Label htmlFor="mentor2">Avoir un mentor</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="both" id="mentor3" />
                    <Label htmlFor="mentor3">Les deux</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="none" id="mentor4" />
                    <Label htmlFor="mentor4">Pas intéressé(e)</Label>
                  </div>
                </RadioGroup>
              </div>

<div>
                <Label>Aisance avec le networking</Label>
                <RadioGroup
                  value={formData.networkingComfort}
                  onValueChange={(value) => updateFormData("networkingComfort", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-4 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="very-comfortable" id="network1" />
                    <Label htmlFor="network1">Très à l'aise</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="comfortable" id="network2" />
                    <Label htmlFor="network2">À l'aise</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="uncomfortable" id="network3" />
                    <Label htmlFor="network3">Mal à l'aise</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="very-uncomfortable" id="network4" />
                    <Label htmlFor="network4">Très mal à l'aise</Label>
                  </div>
                </RadioGroup>
              </div>
            </CardContent>
          </Card>
        )

case 6:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Motivations et Valeurs</CardTitle>
              <CardDescription className="text-text-secondary">
                Qu'est-ce qui vous motive et guide vos choix professionnels ?
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label>Principales motivations au travail (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Reconnaissance",
                    "Autonomie",
                    "Défis intellectuels",
                    "Impact social",
                    "Rémunération",
                    "Sécurité d'emploi",
                    "Évolution de carrière",
                    "Créativité",
                    "Travail d'équipe",
                    "Innovation",
                    "Apprentissage continu",
                    "Équilibre vie-travail",
                  ].map((motivation) => (
                    <div key={motivation} className="flex items-center space-x-2">
                      <Checkbox
                        id={motivation}
                        checked={formData.workMotivations.includes(motivation)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("workMotivations", [...formData.workMotivations, motivation])
                          } else {
                            updateFormData(
                              "workMotivations",
                              formData.workMotivations.filter((m) => m !== motivation),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={motivation} className="text-sm">
                        {motivation}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Valeurs importantes dans le travail (sélectionnez toutes celles qui s'appliquent)</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
                  {[
                    "Intégrité",
                    "Respect",
                    "Transparence",
                    "Excellence",
                    "Innovation",
                    "Collaboration",
                    "Diversité",
                    "Durabilité",
                    "Éthique",
                    "Responsabilité",
                    "Qualité",
                    "Service client",
                  ].map((value) => (
                    <div key={value} className="flex items-center space-x-2">
                      <Checkbox
                        id={value}
                        checked={formData.workValues.includes(value)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            updateFormData("workValues", [...formData.workValues, value])
                          } else {
                            updateFormData(
                              "workValues",
                              formData.workValues.filter((v) => v !== value),
                            )
                          }
                        }}
                      />
                      <Label htmlFor={value} className="text-sm">
                        {value}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label>Équilibre vie professionnelle/personnelle</Label>
                <RadioGroup
                  value={formData.workLifeBalance}
                  onValueChange={(value) => updateFormData("workLifeBalance", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="work-focused" id="balance1" />
                    <Label htmlFor="balance1">Priorité au travail</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="balanced" id="balance2" />
                    <Label htmlFor="balance2">Équilibre important</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="life-focused" id="balance3" />
                    <Label htmlFor="balance3">Priorité à la vie personnelle</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="flexible" id="balance4" />
                    <Label htmlFor="balance4">Selon les périodes</Label>
                  </div>
                </RadioGroup>
              </div>

<div>
                <Label>Gestion du stress</Label>
                <RadioGroup
                  value={formData.stressManagement}
                  onValueChange={(value) => updateFormData("stressManagement", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="excellent" id="stress1" />
                    <Label htmlFor="stress1">Excellente</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="good" id="stress2" />
                    <Label htmlFor="stress2">Bonne</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="average" id="stress3" />
                    <Label htmlFor="stress3">Moyenne</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="poor" id="stress4" />
                    <Label htmlFor="stress4">À améliorer</Label>
                  </div>
                </RadioGroup>
              </div>

<div>
                <Label>Style de prise de décision</Label>
                <RadioGroup
                  value={formData.decisionMakingStyle}
                  onValueChange={(value) => updateFormData("decisionMakingStyle", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="analytical" id="decision1" />
                    <Label htmlFor="decision1">Analytique</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="intuitive" id="decision2" />
                    <Label htmlFor="decision2">Intuitif</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="collaborative" id="decision3" />
                    <Label htmlFor="decision3">Collaboratif</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="quick" id="decision4" />
                    <Label htmlFor="decision4">Rapide</Label>
                  </div>
                </RadioGroup>
              </div>
            </CardContent>
          </Card>
        )

case 7:
        return (
          <Card className="border-primary-200">
            <CardHeader>
              <CardTitle className="text-text-primary">Documents et Informations Complémentaires</CardTitle>
              <CardDescription className="text-text-secondary">
                Ajoutez des documents ou enregistrements pour enrichir votre profil
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label htmlFor="additionalInfo">Informations complémentaires</Label>
                <Textarea
                  id="additionalInfo"
                  value={formData.additionalInfo}
                  onChange={(e) => updateFormData("additionalInfo", e.target.value)}
                  placeholder="Y a-t-il autre chose que vous aimeriez nous faire savoir ?"
                  className="border-primary-200 focus:border-primary-500"
                  rows={4}
                />
              </div>

<div>
                <Label htmlFor="specificConcerns">Préoccupations ou questions spécifiques</Label>
                <Textarea
                  id="specificConcerns"
                  value={formData.specificConcerns}
                  onChange={(e) => updateFormData("specificConcerns", e.target.value)}
                  placeholder="Avez-vous des préoccupations particulières concernant votre carrière ?"
                  className="border-primary-200 focus:border-primary-500"
                  rows={3}
                />
              </div>

<div>
                <Label>Expérience de coaching précédente</Label>
                <RadioGroup
                  value={formData.previousCoaching}
                  onValueChange={(value) => updateFormData("previousCoaching", value)}
                  className="mt-2 grid grid-cols-1 md:grid-cols-3 gap-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="yes" id="coaching1" />
                    <Label htmlFor="coaching1">Oui, déjà fait</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="no" id="coaching2" />
                    <Label htmlFor="coaching2">Non, première fois</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="considering" id="coaching3" />
                    <Label htmlFor="coaching3">J'y réfléchis</Label>
                  </div>
                </RadioGroup>
              </div>

{/* File Upload Section */}
              <div className="border-2 border-dashed border-primary-300 rounded-lg p-6">
                <div className="text-center">
                  <Upload className="mx-auto h-12 w-12 text-primary-400" />
                  <div className="mt-4">
                    <Label className="text-lg font-medium">Télécharger des documents</Label>
                    <p className="text-sm text-text-secondary mt-1">
                      CV, lettre de motivation, portfolio, etc. (PDF, DOC, DOCX, JPG, PNG)
                    </p>
                  </div>
                  <div className="mt-4">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => fileInputRef.current?.click()}
                      className="border-primary-300 text-primary-600 hover:bg-primary-50"
                    >
                      <Upload className="w-4 h-4 mr-2" />
                      Choisir des fichiers
                    </Button>
                    <input
                      ref={fileInputRef}
                      type="file"
                      multiple
                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                      onChange={handleFileUpload}
                      className="hidden"
                    />
                  </div>
                </div>

{/* Uploaded Files List */}
                {formData.uploadedFiles.length > 0 && (
                  <div className="mt-4">
                    <Label className="text-sm font-medium">Fichiers téléchargés :</Label>
                    <div className="mt-2 space-y-2">
                      {formData.uploadedFiles.map((file, index) => (
                        <div key={index} className="flex items-center justify-between bg-primary-50 p-2 rounded">
                          <div className="flex items-center">
                            <FileText className="w-4 h-4 text-primary-600 mr-2" />
                            <span className="text-sm">{file.name}</span>
                            <span className="text-xs text-text-secondary ml-2">
                              ({Math.round(file.size / 1024)} KB)
                            </span>
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            onClick={() => removeFile(index)}
                            className="text-red-500 hover:text-red-700"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

{/* Voice Recording Section */}
              <div className="border-2 border-dashed border-primary-300 rounded-lg p-6">
                <div className="text-center">
                  <Mic className="mx-auto h-12 w-12 text-primary-400" />
                  <div className="mt-4">
                    <Label className="text-lg font-medium">Enregistrement vocal</Label>
                    <p className="text-sm text-text-secondary mt-1">
                      Enregistrez un message pour nous parler de vos objectifs (optionnel)
                    </p>
                  </div>
                  <div className="mt-4 space-y-3">
                    {!audioBlob ? (
                      <Button
                        type="button"
                        onClick={
                          isRecording
                            ? stopRecording
                            : () => {
                                if (checkMicrophoneSupport()) {
                                  startRecording()
                                }
                              }
                        }
                        className={`${
                          isRecording ? "bg-red-500 hover:bg-red-600" : "bg-[#B4CBA4] hover:bg-[#9BB88A]"
                        } text-white`}
                      >
                        {isRecording ? (
                          <>
                            <MicOff className="w-4 h-4 mr-2" />
                            Arrêter l'enregistrement
                          </>
                        ) : (
                          <>
                            <Mic className="w-4 h-4 mr-2" />
                            Commencer l'enregistrement
                          </>
                        )}
                      </Button>
                    ) : (
                      <div className="space-y-2">
                        <div className="flex items-center justify-center space-x-4">
                          <div className="flex items-center bg-green-50 p-2 rounded">
                            <Mic className="w-4 h-4 text-green-600 mr-2" />
                            <span className="text-sm text-green-700">Enregistrement sauvegardé</span>
                          </div>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={deleteRecording}
                            className="text-red-500 border-red-300 hover:bg-red-50"
                          >
                            <Trash2 className="w-4 h-4 mr-1" />
                            Supprimer
                          </Button>
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          onClick={startRecording}
                          className="border-primary-300 text-primary-600 hover:bg-primary-50"
                        >
                          <Mic className="w-4 h-4 mr-2" />
                          Nouvel enregistrement
                        </Button>
                      </div>
                    )}
                    {isRecording && (
                      <div className="flex items-center justify-center">
                        <div className="animate-pulse flex items-center text-red-500">
                          <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                          <span className="text-sm">Enregistrement en cours...</span>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        )

default:
        return null
    }
  }

return (
    <div className="max-w-4xl mx-auto">
      {/* Progress Bar */}
      <div className="mb-8 p-4 bg-white rounded-lg shadow-sm border border-primary-200">
        <div className="flex justify-between items-center mb-3">
          <span className="text-sm font-semibold text-text-primary">
            Étape {currentStep + 1} sur {totalSteps}
          </span>
          <span className="text-sm text-text-secondary font-medium">{Math.round(progress)}% complété</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            className="h-full bg-[#B4CBA4] transition-all duration-500 ease-out rounded-full"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

{/* Form Step */}
      {renderStep()}

{/* Navigation Buttons */}
      <div className="flex justify-between items-center mt-8 pt-6 border-t border-primary-200">
        <Button
          onClick={handlePrevious}
          disabled={currentStep === 0}
          variant="outline"
          className={`
      px-6 py-3 border-2 transition-all duration-200
      ${
        currentStep === 0
          ? "border-gray-300 text-gray-400 cursor-not-allowed bg-gray-50"
          : "border-[#B4CBA4] text-[#B4CBA4] hover:bg-[#B4CBA4] hover:text-white"
      }
    `}
        >
          <ChevronLeft className="w-4 h-4 mr-2" />
          Précédent
        </Button>

<div className="text-center">
          <span className="text-sm text-text-secondary font-medium">
            Étape {currentStep + 1} sur {totalSteps}
          </span>
        </div>

{currentStep === totalSteps - 1 ? (
          <Button
            onClick={handleSubmit}
            className="px-8 py-3 bg-[#B4CBA4] hover:bg-[#9BB88A] text-white font-semibold transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            <Send className="w-4 h-4 mr-2" />
            Soumettre la synthèse
          </Button>
        ) : (
          <Button
            onClick={handleNext}
            className="px-6 py-3 bg-[#B4CBA4] hover:bg-[#9BB88A] text-white font-semibold transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            Suivant
            <ChevronRight className="w-4 h-4 ml-2" />
          </Button>
        )}
      </div>
    </div>
  )
}
[V0_FILE]python:file="scripts/improve-dashboard-analytics.py" isMerged="true"
import matplotlib.pyplot as plt
import seaborn as sns
import pandas as pd
import numpy as np
from matplotlib.patches import Rectangle
import matplotlib.patches as mpatches
from matplotlib.sankey import Sankey

# Configuration des styles pour de meilleurs graphiques
plt.style.use('seaborn-v0_8-whitegrid')
sns.set_palette("husl")

# Données simulées basées sur le dashboard
clients_data = {
    'name': ['Marie Dubois', 'Jean Martin', 'Sophie Laurent', 'Pierre Moreau', 'Isabelle Lefevre',
             'Thomas Garnier', 'Julie Chevalier', 'Antoine Roussel', 'Camille Leclerc', 'Lucas Dubois',
             'Manon Fontaine', 'Hugo Bernard', 'Clara Meunier', 'Nathan Garnier', 'Laura Clement',
             'Quentin Petit', 'Elodie Garnier', 'Romain Leclerc'],
    'gender': ['female', 'male', 'female', 'male', 'female', 'male', 'female', 'male', 'female', 'male',
               'female', 'male', 'female', 'male', 'female', 'male', 'female', 'male'],
    'age': [35, 42, 29, 51, 33, 27, 40, 31, 25, 38, 26, 45, 39, 28, 34, 41, 30, 24],
    'sector': ['Marketing', 'Tech', 'Autres', 'Finance', 'Marketing', 'Tech', 'Autres', 'Finance', 
               'Autres', 'Tech', 'Marketing', 'Tech', 'Finance', 'Marketing', 'Autres', 'Tech', 'RH', 'Tech'],
    'target_job': ['Directrice Marketing', 'Lead Developer', 'Chef de Projet', 'Directeur Général',
                   'Responsable Communication', 'Ingénieur Logiciel', 'Chef de Projet Agile', 'Analyste Financier',
                   'Consultant en Stratégie', 'Développeur Full-Stack', 'Chargée de Marketing Digital',
                   'Gestionnaire de Projet IT', 'Directrice des Opérations', 'Responsable Commercial',
                   'Spécialiste en Marketing de Contenu', 'Ingénieur en Intelligence Artificielle',
                   'Responsable des Ressources Humaines', 'Analyste de Données'],
    'placement_success': [True, False, False, True, False, False, True, False, False, True,
                         False, False, True, False, False, True, False, False],
    'satisfaction_score': [4.5, 4.0, 0, 5.0, 4.2, 0, 4.8, 3.8, 0, 4.6, 4.1, 0, 4.9, 3.9, 0, 4.7, 4.3, 0],
    'salary_increase': [15, 0, 0, 20, 0, 0, 18, 0, 0, 16, 0, 0, 22, 0, 0, 19, 0, 0]
}

df = pd.DataFrame(clients_data)

print("=== ANALYSE QUALITATIVE DES DONNÉES ===\n")

# 1. Analyse de la répartition par genre
gender_analysis = df['gender'].value_counts()
print("1. RÉPARTITION PAR GENRE:")
print(f"   - Femmes: {gender_analysis['female']} ({gender_analysis['female']/len(df)*100:.1f}%)")
print(f"   - Hommes: {gender_analysis['male']} ({gender_analysis['male']/len(df)*100:.1f}%)")
print(f"   - Équilibre genre: {'Bon équilibre' if abs(gender_analysis['female'] - gender_analysis['male']) <= 2 else 'Déséquilibré'}\n")

# 2. Analyse de la distribution par âge
age_groups = pd.cut(df['age'], bins=[20, 30, 40, 50, 60], labels=['20-29', '30-39', '40-49', '50+'])
age_analysis = age_groups.value_counts().sort_index()
print("2. DISTRIBUTION PAR CLASSE D'ÂGE:")
for age_group, count in age_analysis.items():
    print(f"   - {age_group}: {count} clients ({count/len(df)*100:.1f}%)")

# Analyse de la diversité d'âge
age_std = df['age'].std()
print(f"   - Écart-type d'âge: {age_std:.1f} (Diversité: {'Élevée' if age_std > 8 else 'Modérée' if age_std > 5 else 'Faible'})\n")

# 3. Analyse sectorielle avancée
sector_analysis = df['sector'].value_counts()
print("3. ANALYSE SECTORIELLE:")
for sector, count in sector_analysis.items():
    success_rate = df[df['sector'] == sector]['placement_success'].mean() * 100
    avg_satisfaction = df[(df['sector'] == sector) & (df['satisfaction_score'] > 0)]['satisfaction_score'].mean()
    print(f"   - {sector}: {count} clients ({count/len(df)*100:.1f}%)")
    print(f"     * Taux de placement: {success_rate:.1f}%")
    if not pd.isna(avg_satisfaction):
        print(f"     * Satisfaction moyenne: {avg_satisfaction:.1f}/5")
    print()

# 4. Analyse des flux métiers → secteurs (Sankey)
job_sector_mapping = df.groupby(['target_job', 'sector']).size().reset_index(name='count')
print("4. FLUX MÉTIERS → SECTEURS (pour Sankey):")
print("   Relations identifiées:")
for _, row in job_sector_mapping.iterrows():
    print(f"   - {row['target_job']} → {row['sector']}: {row['count']} client(s)")

# 5. Recommandations pour améliorer les visualisations
print("\n=== RECOMMANDATIONS POUR LES VISUALISATIONS ===\n")

print("1. GRAPHIQUE GENRE (Pie Chart):")
print("   ✓ Utiliser des couleurs contrastées (#3B82F6 pour hommes, #EC4899 pour femmes)")
print("   ✓ Ajouter les pourcentages sur les segments")
print("   ✓ Utiliser une légende claire\n")

print("2. DISTRIBUTION ÂGE (Bar Chart):")
print("   ✓ Ordonner les barres par tranche d'âge")
print("   ✓ Utiliser un dégradé de couleurs pour montrer la progression")
print("   ✓ Ajouter des étiquettes de valeurs sur les barres")
print("   ✓ Considérer un histogramme pour plus de précision\n")

print("3. ANALYSE SECTORIELLE:")
print("   ⚠️  REDONDANCE DÉTECTÉE: 'Répartition par Secteur' apparaît 2 fois")
print("   → RECOMMANDATION: Remplacer par 'Performance par Secteur' (taux de placement)")
print("   ✓ Utiliser un graphique en barres horizontales avec métriques de performance\n")

print("4. DIAGRAMME SANKEY:")
print("   ✓ Implémenter un vrai Sankey avec largeurs proportionnelles")
print("   ✓ Utiliser des couleurs cohérentes entre métiers et secteurs")
print("   ✓ Ajouter de l'interactivité (hover pour détails)\n")

# 6. Calcul de métriques de qualité
print("=== MÉTRIQUES DE QUALITÉ DES DONNÉES ===\n")

# Diversité
diversity_score = len(df['sector'].unique()) / len(df) * 100
print(f"Score de diversité sectorielle: {diversity_score:.1f}%")

# Équilibre genre
gender_balance = min(gender_analysis) / max(gender_analysis) * 100
print(f"Équilibre genre: {gender_balance:.1f}%")

# Couverture d'âge
age_range = df['age'].max() - df['age'].min()
age_coverage = age_range / 40 * 100  # Normalisation sur 40 ans de carrière
print(f"Couverture d'âge: {age_coverage:.1f}%")

print(f"\nScore global de qualité des données: {(diversity_score + gender_balance + age_coverage) / 3:.1f}%")

# 7. Suggestions de nouvelles métriques
print("\n=== NOUVELLES MÉTRIQUES SUGGÉRÉES ===\n")
print("1. Taux de placement par secteur")
print("2. Satisfaction moyenne par tranche d'âge") 
print("3. Évolution salariale par genre")
print("4. Temps de placement par secteur")
print("5. Score de matching par profil démographique")

print("\n=== OPTIMISATIONS TECHNIQUES ===\n")
print("1. Utiliser React-Vis ou Victory pour des graphiques plus fluides")
print("2. Implémenter le lazy loading pour les gros datasets")
print("3. Ajouter des animations d'entrée staggerées")
print("4. Optimiser les couleurs pour l'accessibilité (contraste WCAG)")
print("5. Implémenter des graphiques responsifs avec breakpoints")
[V0_FILE]typescriptreact:file="app/dashboard/DashboardPageClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Users,
  FileText,
  Calendar,
  CheckCircle,
  Clock,
  Search,
  Download,
  Eye,
  MessageSquare,
  Star,
  DollarSign,
  TrendingUp,
  Target,
  Award,
} from "lucide-react"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Area,
  AreaChart,
  BarChart,
  Bar,
  ComposedChart,
  Line,
  LineChart,
} from "recharts"

interface Client {
  id: string
  name: string
  email: string
  submissionDate: string
  receptionDate?: string
  status: "submitted" | "in_progress" | "completed" | "pending"
  comments: string
  evaluation: number
  targetJob: string
  currentProfile: number
  targetProfile: number
  reportAccess: boolean
  placementSuccess: boolean
  placementDays: number
  sessionsCount: number
  salaryIncrease: number
  interviewSuccess: number
  recommendationScore: number
  responseTime?: number
  satisfactionPostPlacement?: number
  matchingQuality?: number
  globalPerformance?: number
  gender: "male" | "female"
  age: number
  sector: string
}

export default function DashboardPageClient() {
  const [clients, setClients] = useState<Client[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selectedClient, setSelectedClient] = useState<Client | null>(null)

// Données simulées pour la démo
  useEffect(() => {
    const mockClients: Client[] = [
      {
        id: "1",
        name: "Marie Dubois",
        email: "marie.dubois@email.com",
        submissionDate: "2024-01-15",
        receptionDate: "2024-01-18",
        status: "completed",
        comments: "Profil très prometteur, recommandations de formation en leadership",
        evaluation: 4.5,
        targetJob: "Directrice Marketing",
        currentProfile: 75,
        targetProfile: 90,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 45,
        sessionsCount: 8,
        salaryIncrease: 15,
        interviewSuccess: 85,
        recommendationScore: 9,
        responseTime: 24,
        satisfactionPostPlacement: 92,
        matchingQuality: 88,
        globalPerformance: 8.5,
        gender: "female",
        age: 35,
        sector: "Marketing",
      },
      {
        id: "2",
        name: "Jean Martin",
        email: "jean.martin@email.com",
        submissionDate: "2024-01-20",
        receptionDate: "2024-01-22",
        status: "in_progress",
        comments: "Analyse en cours, compétences techniques solides",
        evaluation: 4.0,
        targetJob: "Lead Developer",
        currentProfile: 80,
        targetProfile: 85,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 5,
        salaryIncrease: 0,
        interviewSuccess: 70,
        recommendationScore: 8,
        responseTime: 36,
        satisfactionPostPlacement: 80,
        matchingQuality: 75,
        globalPerformance: 7.8,
        gender: "male",
        age: 42,
        sector: "Tech",
      },
      {
        id: "3",
        name: "Sophie Laurent",
        email: "sophie.laurent@email.com",
        submissionDate: "2024-01-25",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Chef de Projet",
        currentProfile: 65,
        targetProfile: 85,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 2,
        salaryIncrease: 0,
        interviewSuccess: 60,
        recommendationScore: 7,
        responseTime: 48,
        satisfactionPostPlacement: 0,
        matchingQuality: 60,
        globalPerformance: 6.5,
        gender: "female",
        age: 29,
        sector: "Autres",
      },
      {
        id: "4",
        name: "Pierre Moreau",
        email: "pierre.moreau@email.com",
        submissionDate: "2024-01-28",
        receptionDate: "2024-01-30",
        status: "completed",
        comments: "Excellent potentiel, transition réussie vers le management",
        evaluation: 5.0,
        targetJob: "Directeur Général",
        currentProfile: 85,
        targetProfile: 95,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 30,
        sessionsCount: 10,
        salaryIncrease: 20,
        interviewSuccess: 90,
        recommendationScore: 10,
        responseTime: 12,
        satisfactionPostPlacement: 95,
        matchingQuality: 92,
        globalPerformance: 9.5,
        gender: "male",
        age: 51,
        sector: "Finance",
      },
      {
        id: "5",
        name: "Isabelle Lefevre",
        email: "isabelle.lefevre@email.com",
        submissionDate: "2024-02-01",
        receptionDate: "2024-02-03",
        status: "in_progress",
        comments: "Bonne communication, travaille sur la confiance en soi",
        evaluation: 4.2,
        targetJob: "Responsable Communication",
        currentProfile: 70,
        targetProfile: 80,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 6,
        salaryIncrease: 0,
        interviewSuccess: 75,
        recommendationScore: 8,
        responseTime: 30,
        satisfactionPostPlacement: 85,
        matchingQuality: 78,
        globalPerformance: 7.5,
        gender: "female",
        age: 33,
        sector: "Marketing",
      },
      {
        id: "6",
        name: "Thomas Garnier",
        email: "thomas.garnier@email.com",
        submissionDate: "2024-02-05",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Ingénieur Logiciel",
        currentProfile: 60,
        targetProfile: 80,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 3,
        salaryIncrease: 0,
        interviewSuccess: 55,
        recommendationScore: 6,
        responseTime: 60,
        satisfactionPostPlacement: 0,
        matchingQuality: 55,
        globalPerformance: 6.0,
        gender: "male",
        age: 27,
        sector: "Tech",
      },
      {
        id: "7",
        name: "Julie Chevalier",
        email: "julie.chevalier@email.com",
        submissionDate: "2024-02-08",
        receptionDate: "2024-02-10",
        status: "completed",
        comments: "Excellente adaptation, leadership naturel",
        evaluation: 4.8,
        targetJob: "Chef de Projet Agile",
        currentProfile: 90,
        targetProfile: 95,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 35,
        sessionsCount: 9,
        salaryIncrease: 18,
        interviewSuccess: 88,
        recommendationScore: 9,
        responseTime: 18,
        satisfactionPostPlacement: 90,
        matchingQuality: 85,
        globalPerformance: 8.8,
        gender: "female",
        age: 40,
        sector: "Autres",
      },
      {
        id: "8",
        name: "Antoine Roussel",
        email: "antoine.roussel@email.com",
        submissionDate: "2024-02-12",
        receptionDate: "2024-02-15",
        status: "in_progress",
        comments: "Travaille sur la gestion du stress et la prise de décision",
        evaluation: 3.8,
        targetJob: "Analyste Financier",
        currentProfile: 75,
        targetProfile: 85,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 7,
        salaryIncrease: 0,
        interviewSuccess: 68,
        recommendationScore: 7,
        responseTime: 42,
        satisfactionPostPlacement: 78,
        matchingQuality: 70,
        globalPerformance: 7.2,
        gender: "male",
        age: 31,
        sector: "Finance",
      },
      {
        id: "9",
        name: "Camille Leclerc",
        email: "camille.leclerc@email.com",
        submissionDate: "2024-02-16",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Consultant en Stratégie",
        currentProfile: 55,
        targetProfile: 75,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 4,
        salaryIncrease: 0,
        interviewSuccess: 50,
        recommendationScore: 5,
        responseTime: 54,
        satisfactionPostPlacement: 0,
        matchingQuality: 50,
        globalPerformance: 5.5,
        gender: "female",
        age: 25,
        sector: "Autres",
      },
      {
        id: "10",
        name: "Lucas Dubois",
        email: "lucas.dubois@email.com",
        submissionDate: "2024-02-19",
        receptionDate: "2024-02-22",
        status: "completed",
        comments: "Très motivé, compétences techniques mises à jour",
        evaluation: 4.6,
        targetJob: "Développeur Full-Stack",
        currentProfile: 88,
        targetProfile: 92,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 40,
        sessionsCount: 11,
        salaryIncrease: 16,
        interviewSuccess: 86,
        recommendationScore: 8,
        responseTime: 20,
        satisfactionPostPlacement: 88,
        matchingQuality: 82,
        globalPerformance: 8.2,
        gender: "male",
        age: 38,
        sector: "Tech",
      },
      {
        id: "11",
        name: "Manon Fontaine",
        email: "manon.fontaine@email.com",
        submissionDate: "2024-02-23",
        receptionDate: "2024-02-25",
        status: "in_progress",
        comments: "Améliore sa communication non verbale",
        evaluation: 4.1,
        targetJob: "Chargée de Marketing Digital",
        currentProfile: 68,
        targetProfile: 78,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 8,
        salaryIncrease: 0,
        interviewSuccess: 72,
        recommendationScore: 9,
        responseTime: 33,
        satisfactionPostPlacement: 82,
        matchingQuality: 76,
        globalPerformance: 7.0,
        gender: "female",
        age: 26,
        sector: "Marketing",
      },
      {
        id: "12",
        name: "Hugo Bernard",
        email: "hugo.bernard@email.com",
        submissionDate: "2024-02-26",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Gestionnaire de Projet IT",
        currentProfile: 62,
        targetProfile: 82,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 5,
        salaryIncrease: 0,
        interviewSuccess: 58,
        recommendationScore: 7,
        responseTime: 51,
        satisfactionPostPlacement: 0,
        matchingQuality: 58,
        globalPerformance: 6.2,
        gender: "male",
        age: 45,
        sector: "Tech",
      },
      {
        id: "13",
        name: "Clara Meunier",
        email: "clara.meunier@email.com",
        submissionDate: "2024-03-01",
        receptionDate: "2024-03-04",
        status: "completed",
        comments: "Leadership affirmé, vision stratégique claire",
        evaluation: 4.9,
        targetJob: "Directrice des Opérations",
        currentProfile: 92,
        targetProfile: 96,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 28,
        sessionsCount: 12,
        salaryIncrease: 22,
        interviewSuccess: 92,
        recommendationScore: 10,
        responseTime: 15,
        satisfactionPostPlacement: 94,
        matchingQuality: 90,
        globalPerformance: 9.2,
        gender: "female",
        age: 39,
        sector: "Finance",
      },
      {
        id: "14",
        name: "Nathan Garnier",
        email: "nathan.garnier@email.com",
        submissionDate: "2024-03-05",
        receptionDate: "2024-03-07",
        status: "in_progress",
        comments: "Développe ses compétences en négociation",
        evaluation: 3.9,
        targetJob: "Responsable Commercial",
        currentProfile: 72,
        targetProfile: 82,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 9,
        salaryIncrease: 0,
        interviewSuccess: 70,
        recommendationScore: 8,
        responseTime: 39,
        satisfactionPostPlacement: 76,
        matchingQuality: 68,
        globalPerformance: 6.8,
        gender: "male",
        age: 28,
        sector: "Marketing",
      },
      {
        id: "15",
        name: "Laura Clement",
        email: "laura.clement@email.com",
        submissionDate: "2024-03-08",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Spécialiste en Marketing de Contenu",
        currentProfile: 58,
        targetProfile: 78,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 6,
        salaryIncrease: 0,
        interviewSuccess: 56,
        recommendationScore: 6,
        responseTime: 57,
        satisfactionPostPlacement: 0,
        matchingQuality: 54,
        globalPerformance: 5.8,
        gender: "female",
        age: 34,
        sector: "Autres",
      },
      {
        id: "16",
        name: "Quentin Petit",
        email: "quentin.petit@email.com",
        submissionDate: "2024-03-11",
        receptionDate: "2024-03-14",
        status: "completed",
        comments: "Esprit d'équipe, force de proposition",
        evaluation: 4.7,
        targetJob: "Ingénieur en Intelligence Artificielle",
        currentProfile: 91,
        targetProfile: 95,
        reportAccess: true,
        placementSuccess: true,
        placementDays: 33,
        sessionsCount: 10,
        salaryIncrease: 19,
        interviewSuccess: 89,
        recommendationScore: 9,
        responseTime: 22,
        satisfactionPostPlacement: 91,
        matchingQuality: 86,
        globalPerformance: 8.6,
        gender: "male",
        age: 41,
        sector: "Tech",
      },
      {
        id: "17",
        name: "Elodie Garnier",
        email: "elodie.garnier@email.com",
        submissionDate: "2024-03-15",
        receptionDate: "2024-03-17",
        status: "in_progress",
        comments: "Travaille sur sa présence en public",
        evaluation: 4.3,
        targetJob: "Responsable des Ressources Humaines",
        currentProfile: 71,
        targetProfile: 81,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 7,
        salaryIncrease: 0,
        interviewSuccess: 74,
        recommendationScore: 8,
        responseTime: 27,
        satisfactionPostPlacement: 83,
        matchingQuality: 72,
        globalPerformance: 7.4,
        gender: "female",
        age: 30,
        sector: "RH",
      },
      {
        id: "18",
        name: "Romain Leclerc",
        email: "romain.leclerc@email.com",
        submissionDate: "2024-03-18",
        status: "submitted",
        comments: "",
        evaluation: 0,
        targetJob: "Analyste de Données",
        currentProfile: 59,
        targetProfile: 79,
        reportAccess: false,
        placementSuccess: false,
        placementDays: 0,
        sessionsCount: 4,
        salaryIncrease: 0,
        interviewSuccess: 57,
        recommendationScore: 7,
        responseTime: 45,
        satisfactionPostPlacement: 0,
        matchingQuality: 56,
        globalPerformance: 5.9,
        gender: "male",
        age: 24,
        sector: "Tech",
      },
    ]
    setClients(mockClients)
  }, [])

// Calculs des KPI avancés avec vérifications
  const completedClients = clients.filter((c) => c.status === "completed")
  const placedClients = clients.filter((c) => c.placementSuccess)
  const clientsWithPlacementDays = clients.filter((c) => c.placementDays > 0)
  const clientsWithRecommendation = clients.filter((c) => c.recommendationScore > 0)
  const clientsWithEvaluation = clients.filter((c) => c.evaluation > 0)
  const clientsWithSalaryIncrease = clients.filter((c) => c.salaryIncrease > 0)

const placementRate = clients.length > 0 ? Math.round((placedClients.length / clients.length) * 100) : 0
  const averagePlacementDays =
    clientsWithPlacementDays.length > 0
      ? Math.round(
          clientsWithPlacementDays.reduce((acc, c) => acc + c.placementDays, 0) / clientsWithPlacementDays.length,
        )
      : 0
  const npsScore =
    clientsWithRecommendation.length > 0
      ? Math.round(
          clientsWithRecommendation.reduce((acc, c) => acc + c.recommendationScore, 0) /
            clientsWithRecommendation.length,
        )
      : 0
  const retentionRate = 92 // Simulé
  const conversionRate = 78 // Simulé
  const averageSessions =
    clients.length > 0 ? Math.round(clients.reduce((acc, c) => acc + c.sessionsCount, 0) / clients.length) : 0
  const averageSalaryIncrease =
    clientsWithSalaryIncrease.length > 0
      ? Math.round(
          clientsWithSalaryIncrease.reduce((acc, c) => acc + c.salaryIncrease, 0) / clientsWithSalaryIncrease.length,
        )
      : 0
  const interviewSuccessRate =
    clients.length > 0 ? Math.round(clients.reduce((acc, c) => acc + c.interviewSuccess, 0) / clients.length) : 0
  const averageCoachingDuration = 12 // Simulé

// New KPI calculations
  const clientsWithResponseTime = clients.filter((c) => c.responseTime !== undefined)
  const averageResponseTime =
    clientsWithResponseTime.length > 0
      ? Math.round(
          clientsWithResponseTime.reduce((acc, c) => acc + (c.responseTime || 0), 0) / clientsWithResponseTime.length,
        )
      : 0

const clientsWithPostPlacementSatisfaction = clients.filter((c) => c.satisfactionPostPlacement !== undefined)
  const averagePostPlacementSatisfaction =
    clientsWithPostPlacementSatisfaction.length > 0
      ? Math.round(
          clientsWithPostPlacementSatisfaction.reduce((acc, c) => acc + (c.satisfactionPostPlacement || 0), 0) /
            clientsWithPostPlacementSatisfaction.length,
        )
      : 0

const clientsWithMatchingQuality = clients.filter((c) => c.matchingQuality !== undefined)
  const averageMatchingQuality =
    clientsWithMatchingQuality.length > 0
      ? Math.round(
          clientsWithMatchingQuality.reduce((acc, c) => acc + (c.matchingQuality || 0), 0) /
            clientsWithMatchingQuality.length,
        )
      : 0

const averageGlobalPerformance =
    clients.length > 0
      ? (clients.reduce((acc, c) => acc + (c.globalPerformance || 0), 0) / clients.length).toFixed(1)
      : "0"

// Données pour les graphiques
  const placementEvolution = [
    { month: "Jan", placements: 8 },
    { month: "Fév", placements: 12 },
    { month: "Mar", placements: 15 },
    { month: "Avr", placements: 18 },
    { month: "Mai", placements: 22 },
    { month: "Jun", placements: 25 },
  ]

// COULEURS OPTIMISÉES POUR L'ACCESSIBILITÉ
  const ACCESSIBLE_COLORS = {
    primary: "#1E40AF", // Bleu foncé
    secondary: "#DC2626", // Rouge foncé
    success: "#059669", // Vert foncé
    warning: "#D97706", // Orange foncé
    info: "#0891B2", // Cyan foncé
    purple: "#7C3AED", // Violet foncé
    pink: "#BE185D", // Rose foncé
    teal: "#0F766E", // Sarcelle foncé
  }

const SECTOR_COLORS = {
    Tech: ACCESSIBLE_COLORS.primary,
    Marketing: ACCESSIBLE_COLORS.warning,
    Finance: ACCESSIBLE_COLORS.success,
    RH: ACCESSIBLE_COLORS.purple,
    Autres: ACCESSIBLE_COLORS.info,
  }

// Calculs des KPI de base avec vérifications
  const totalClients = clients.length
  const completedReports = completedClients.length
  const inProgressReports = clients.filter((c) => c.status === "in_progress").length
  const pendingReports = clients.filter((c) => c.status === "submitted").length
  const averageEvaluation =
    clientsWithEvaluation.length > 0
      ? clientsWithEvaluation.reduce((acc, c) => acc + c.evaluation, 0) / clientsWithEvaluation.length
      : 0

const filteredClients = clients.filter((client) => {
    const matchesSearch =
      client.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      client.email.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || client.status === statusFilter
    return matchesSearch && matchesStatus
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge className="bg-accent-green-100 text-accent-green-800">Terminé</Badge>
      case "in_progress":
        return <Badge className="bg-primary-100 text-primary-800">En cours</Badge>
      case "submitted":
        return <Badge className="bg-accent-ochre-100 text-accent-ochre-800">Soumis</Badge>
      default:
        return <Badge className="bg-gray-100 text-gray-800">En attente</Badge>
    }
  }

const getProgressColor = (current: number, target: number) => {
    const percentage = (current / target) * 100
    if (percentage >= 90) return "text-green-600"
    if (percentage >= 70) return "text-yellow-600"
    return "text-red-600"
  }

// Budget simulation (à adapter selon vos besoins)
  const reportsPackage = 50
  const reportsUsed = completedReports + inProgressReports
  const reportsRemaining = Math.max(0, reportsPackage - reportsUsed)
  const budgetPercentage = reportsPackage > 0 ? (reportsUsed / reportsPackage) * 100 : 0

const getPlacementRateColorClass = () => {
    if (placementRate >= 75) {
      return "text-accent-green-900"
    } else if (placementRate >= 50) {
      return "text-primary-900"
    } else {
      return "text-accent-alert-900"
    }
  }

// DONNÉES AMÉLIORÉES POUR LES VISUALISATIONS

// 1. Répartition par genre avec pourcentages
  const genderData = [
    {
      name: "Hommes",
      value: clients.filter((c) => c.gender === "male").length,
      percentage: Math.round((clients.filter((c) => c.gender === "male").length / clients.length) * 100),
    },
    {
      name: "Femmes",
      value: clients.filter((c) => c.gender === "female").length,
      percentage: Math.round((clients.filter((c) => c.gender === "female").length / clients.length) * 100),
    },
  ]

// 2. Distribution par âge avec dégradé
  const ageData = [
    {
      name: "20-29",
      value: clients.filter((c) => c.age >= 20 && c.age <= 29).length,
      color: "#EFF6FF", // Bleu très clair
    },
    {
      name: "30-39",
      value: clients.filter((c) => c.age >= 30 && c.age <= 39).length,
      color: "#DBEAFE", // Bleu clair
    },
    {
      name: "40-49",
      value: clients.filter((c) => c.age >= 40 && c.age <= 49).length,
      color: "#93C5FD", // Bleu moyen
    },
    {
      name: "50+",
      value: clients.filter((c) => c.age >= 50).length,
      color: "#3B82F6", // Bleu foncé
    },
  ]

// 3. Performance par secteur (remplace la redondance)
  const sectorPerformanceData = Object.keys(SECTOR_COLORS)
    .map((sector) => {
      const sectorClients = clients.filter((c) => c.sector === sector)
      const placedInSector = sectorClients.filter((c) => c.placementSuccess).length
      const placementRate = sectorClients.length > 0 ? Math.round((placedInSector / sectorClients.length) * 100) : 0
      const avgSatisfaction =
        sectorClients.filter((c) => c.evaluation > 0).length > 0
          ? sectorClients.filter((c) => c.evaluation > 0).reduce((acc, c) => acc + c.evaluation, 0) /
            sectorClients.filter((c) => c.evaluation > 0).length
          : 0

return {
        sector,
        clients: sectorClients.length,
        placementRate,
        avgSatisfaction: Math.round(avgSatisfaction * 10) / 10,
        color: SECTOR_COLORS[sector as keyof typeof SECTOR_COLORS],
      }
    })
    .filter((item) => item.clients > 0)

// 4. Diagramme Sankey amélioré avec données réelles
  const sankeyFlows = clients.reduce(
    (acc, client) => {
      const key = `${client.targetJob} → ${client.sector}`
      acc[key] = (acc[key] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

const sankeyData = Object.entries(sankeyFlows).map(([flow, count]) => ({
    flow,
    count,
    width: count * 20, // Largeur proportionnelle
  }))

// 5. Tooltip personnalisé
  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-white p-3 border border-gray-300 rounded-lg shadow-lg">
          <p className="font-semibold">{`${label}`}</p>
          {payload.map((entry: any, index: number) => (
            <p key={index} style={{ color: entry.color }}>
              {`${entry.dataKey}: ${entry.value}${entry.dataKey.includes("Rate") ? "%" : ""}`}
            </p>
          ))}
        </div>
      )
    }
    return null
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-lavender-50 pt-24 pb-12">
      <div className="container mx-auto px-6">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
          {/* Header */}
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-text-primary mb-4">Tableau de Bord Coach</h1>
            <p className="text-lg text-text-secondary">Suivi des clients, évaluations et analyses de progression</p>
          </div>

{/* KPI Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Card className="border-accent-graphite-200 bg-accent-graphite-50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-accent-graphite-600 text-sm font-medium">Total Clients</p>
                    <p className="text-3xl font-bold text-accent-graphite-900">{totalClients}</p>
                  </div>
                  <Users className="w-8 h-8 text-blue-600" />
                </div>
              </CardContent>
            </Card>

<Card className="border-accent-green-200 bg-accent-green-50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-accent-green-600 text-sm font-medium">Rapports Terminés</p>
                    <p className="text-3xl font-bold text-accent-green-900">{completedReports}</p>
                  </div>
                  <CheckCircle className="w-8 h-8 text-green-600" />
                </div>
              </CardContent>
            </Card>

<Card className="border-primary-200 bg-primary-50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-primary-600 text-sm font-medium">En Cours</p>
                    <p className="text-3xl font-bold text-primary-900">{inProgressReports}</p>
                  </div>
                  <Clock className="w-8 h-8 text-yellow-600" />
                </div>
              </CardContent>
            </Card>

<Card className="border-accent-lavender-200 bg-accent-lavender-50">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-accent-lavender-600 text-sm font-medium">Note Moyenne</p>
                    <p className="text-3xl font-bold text-accent-lavender-900">
                      {averageEvaluation ? averageEvaluation.toFixed(1) : "0.0"}/5
                    </p>
                  </div>
                  <Star className="w-8 h-8 text-purple-600" />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Budget Overview */}
          <Card className="mb-6 border-accent-ochre-200 bg-accent-ochre-50">
            <CardHeader>
              <CardTitle className="flex items-center text-accent-ochre-900">
                <DollarSign className="w-6 h-6 mr-3" />
                Suivi Budgétaire
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <p className="text-2xl font-bold text-accent-ochre-900">50</p>
                  <p className="text-accent-ochre-700">Rapports Achetés</p>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold text-accent-ochre-900">{completedReports + inProgressReports}</p>
                  <p className="text-accent-ochre-700">Rapports Utilisés</p>
                </div>
                <div className="text-center">
                  <p className="text-2xl font-bold text-accent-ochre-900">
                    {50 - (completedReports + inProgressReports)}
                  </p>
                  <p className="text-accent-ochre-700">Rapports Restants</p>
                </div>
              </div>
              <div className="mt-4">
                <div className="w-full bg-accent-ochre-200 rounded-full h-3">
                  <div
                    className="bg-accent-ochre-600 h-3 rounded-full transition-all duration-300"
                    style={{ width: `${budgetPercentage}%` }}
                  ></div>
                </div>
                <p className="text-sm text-accent-ochre-700 mt-2">{budgetPercentage.toFixed(1)}% du package utilisé</p>
              </div>
            </CardContent>
          </Card>

{/* Filters and Search */}
          <Card className="mb-6">
            <CardContent className="p-6">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      placeholder="Rechercher un client..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger className="w-full md:w-48">
                    <SelectValue placeholder="Filtrer par statut" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Tous les statuts</SelectItem>
                    <SelectItem value="submitted">Soumis</SelectItem>
                    <SelectItem value="in_progress">En cours</SelectItem>
                    <SelectItem value="completed">Terminé</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

{/* Clients Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <FileText className="w-6 h-6 mr-3" />
                Liste des Clients
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left p-4 font-semibold">Client</th>
                      <th className="text-left p-4 font-semibold">Statut</th>
                      <th className="text-left p-4 font-semibold">Soumission</th>
                      <th className="text-left p-4 font-semibold">Réception</th>
                      <th className="text-left p-4 font-semibold">Poste Visé</th>
                      <th className="text-left p-4 font-semibold">Fit Job vs Projet</th>
                      <th className="text-left p-4 font-semibold">Note</th>
                      <th className="text-left p-4 font-semibold">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredClients.map((client) => (
                      <tr key={client.id} className="border-b hover:bg-gray-50">
                        <td className="p-4">
                          <div>
                            <p className="font-medium">{client.name}</p>
                            <p className="text-sm text-gray-500">{client.email}</p>
                          </div>
                        </td>
                        <td className="p-4">{getStatusBadge(client.status)}</td>
                        <td className="p-4">
                          <div className="flex items-center">
                            <Calendar className="w-4 h-4 mr-2 text-gray-400" />
                            {new Date(client.submissionDate).toLocaleDateString("fr-FR")}
                          </div>
                        </td>
                        <td className="p-4">
                          {client.receptionDate ? (
                            <div className="flex items-center">
                              <Calendar className="w-4 h-4 mr-2 text-gray-400" />
                              {new Date(client.receptionDate).toLocaleDateString("fr-FR")}
                            </div>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </td>
                        <td className="p-4">
                          <span className="text-sm">{client.targetJob}</span>
                        </td>
                        <td className="p-4">
                          <div className="flex items-center space-x-2">
                            <div className="w-20 bg-gray-200 rounded-full h-2">
                              <div
                                className={`h-2 rounded-full ${getProgressColor(client.currentProfile, client.targetProfile).replace("text-", "bg-")}`}
                                style={{ width: `${(client.currentProfile / client.targetProfile) * 100}%` }}
                              ></div>
                            </div>
                            <span
                              className={`text-sm font-medium ${getProgressColor(client.currentProfile, client.targetProfile)}`}
                            >
                              {client.currentProfile}/{client.targetProfile}
                            </span>
                          </div>
                        </td>
                        <td className="p-4">
                          {client.evaluation > 0 ? (
                            <div className="flex items-center">
                              <Star className="w-4 h-4 text-yellow-500 mr-1" />
                              <span>{client.evaluation}/5</span>
                            </div>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </td>
                        <td className="p-4">
                          <div className="flex space-x-2">
                            <Button size="sm" variant="outline" onClick={() => setSelectedClient(client)}>
                              <Eye className="w-4 h-4" />
                            </Button>
                            {client.reportAccess && (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => alert(`Téléchargement du rapport pour ${client.name}`)}
                              >
                                <Download className="w-4 h-4" />
                              </Button>
                            )}
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => alert(`Commentaires pour ${client.name}`)}
                            >
                              <MessageSquare className="w-4 h-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

{/* Analytics Section */}
          <div className="mb-8">
            <h2 className="text-2xl font-bold text-text-primary mb-6">Analytiques Avancées</h2>

<Tabs defaultValue="performance" className="w-full">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="performance">Performance</TabsTrigger>
                <TabsTrigger value="demographics">Démographie</TabsTrigger>
                <TabsTrigger value="efficacite">Efficacité</TabsTrigger>
              </TabsList>

<TabsContent value="performance" className="space-y-6">
                {/* KPI Cards Row 1 */}
                <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
                  {/* Taux de Placement */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardContent className="p-4">
                      <div className="text-center">
                        <h3 className="text-lg font-semibold text-accent-graphite-900 mb-2">Taux de Placement</h3>
                        <div className="relative w-20 h-20 mx-auto mb-4">
                          <svg className="w-20 h-20 transform -rotate-90">
                            <circle cx="40" cy="40" r="32" stroke="#dcfce7" strokeWidth="6" fill="none" />
                            <circle
                              cx="40"
                              cy="40"
                              r="32"
                              stroke={placementRate >= 75 ? "#16a34a" : placementRate >= 50 ? "#c2410c" : "#b91c1c"}
                              strokeWidth="6"
                              fill="none"
                              strokeDasharray={`${(placementRate * 201.06) / 100} 201.06`}
                              strokeLinecap="round"
                            />
                          </svg>
                          <div className="absolute inset-0 flex items-center justify-center">
                            <span className={`text-xl font-bold ${getPlacementRateColorClass()}`}>
                              {placementRate || 0}%
                            </span>
                          </div>
                        </div>
                        <p className="text-sm text-accent-graphite-700">Objectif: 85%</p>
                      </div>
                    </CardContent>
                  </Card>

{/* Délai Moyen de Placement */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardContent className="p-4">
                      <div className="text-center">
                        <h3 className="text-lg font-semibold text-accent-graphite-900 mb-2">Délai Moyen</h3>
                        <div className="text-2xl font-bold text-accent-graphite-900 mb-2">{averagePlacementDays}</div>
                        <p className="text-accent-graphite-700 mb-4">jours</p>
                        <Progress value={((90 - averagePlacementDays) / 90) * 100} className="h-2" />
                        <p className="text-sm text-accent-graphite-700 mt-2">Objectif: {"<"} 60 jours</p>
                      </div>
                    </CardContent>
                  </Card>

{/* Satisfaction Client */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardContent className="p-4">
                      <div className="text-center">
                        <h3 className="text-lg font-semibold text-accent-graphite-900 mb-2">Satisfaction</h3>
                        <div className="flex justify-center mb-4">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <Star
                              key={star}
                              className={`w-5 h-5 ${
                                star <= Math.floor(averageEvaluation) ? "text-yellow-500 fill-current" : "text-gray-300"
                              }`}
                            />
                          ))}
                        </div>
                        <div className="text-2xl font-bold text-accent-graphite-900">
                          {averageEvaluation.toFixed(1)}/5
                        </div>
                        <p className="text-sm text-accent-graphite-700">Objectif: {">"} 4.2</p>
                      </div>
                    </CardContent>
                  </Card>

{/* Recommendation Rate */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardContent className="p-4">
                      <div className="text-center">
                        <h3 className="text-lg font-semibold text-accent-graphite-900 mb-2">Recommandation</h3>
                        <div className="text-2xl font-bold text-accent-graphite-900">{npsScore}/10</div>
                        <p className="text-sm text-accent-graphite-700">Clients satisfaits</p>
                      </div>
                    </CardContent>
                  </Card>

{/* Average Response Time */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardContent className="p-4">
                      <div className="text-center">
                        <h3 className="text-lg font-semibold text-accent-graphite-900 mb-2">Temps Réponse</h3>
                        <div className="text-2xl font-bold text-accent-graphite-900">{averageResponseTime}h</div>
                        <p className="text-sm text-accent-graphite-700">Délai moyen</p>
                      </div>
                    </CardContent>
                  </Card>
                </div>

{/* Charts Row */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <TrendingUp className="w-5 h-5 mr-2" />
                        Évolution des Placements
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ResponsiveContainer width="100%" height={300}>
                        <AreaChart data={placementEvolution}>
                          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                          <XAxis dataKey="month" stroke="#6b7280" />
                          <YAxis stroke="#6b7280" />
                          <Tooltip content={<CustomTooltip />} />
                          <Area
                            type="monotone"
                            dataKey="placements"
                            stroke={ACCESSIBLE_COLORS.success}
                            fill={`${ACCESSIBLE_COLORS.success}20`}
                            strokeWidth={3}
                          />
                        </AreaChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>

<Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <Target className="w-5 h-5 mr-2" />
                        Performance par Secteur
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ResponsiveContainer width="100%" height={300}>
                        <ComposedChart data={sectorPerformanceData} layout="horizontal">
                          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                          <XAxis type="number" stroke="#6b7280" />
                          <YAxis dataKey="sector" type="category" stroke="#6b7280" width={80} />
                          <Tooltip content={<CustomTooltip />} />
                          <Bar dataKey="placementRate" fill={ACCESSIBLE_COLORS.primary} name="Taux Placement %" />
                          <Bar dataKey="clients" fill={ACCESSIBLE_COLORS.info} name="Nb Clients" />
                        </ComposedChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

<TabsContent value="demographics" className="space-y-6">
                {/* NOUVELLES VISUALISATIONS AMÉLIORÉES */}
                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
                  {/* 1. Répartition par Genre - Améliorée */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <Users className="w-5 h-5 mr-2" />
                        Répartition par Genre
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ResponsiveContainer width="100%" height={280}>
                        <PieChart>
                          <Pie
                            data={genderData}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            label={({ name, percentage }) => `${name}: ${percentage}%`}
                            outerRadius={80}
                            fill={ACCESSIBLE_COLORS.primary}
                          >
                            {genderData.map((entry, index) => (
                              <Cell
                                key={`cell-${index}`}
                                fill={entry.name === "Hommes" ? ACCESSIBLE_COLORS.primary : ACCESSIBLE_COLORS.secondary}
                              />
                            ))}
                          </Pie>
                        </PieChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>

<TabsContent value="efficacite" className="space-y-6">
                {/* Efficacité Section */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  {/* 2. Distribution par Âge */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <Clock className="w-5 h-5 mr-2" />
                        Distribution par Âge
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ResponsiveContainer width="100%" height={280}>
                        <BarChart data={ageData}>
                          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                          <XAxis dataKey="name" stroke="#6b7280" />
                          <YAxis stroke="#6b7280" />
                          <Tooltip content={<CustomTooltip />} />
                          <Bar dataKey="value" fill={ACCESSIBLE_COLORS.success}>
                            {ageData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={entry.color} />
                            ))}
                          </Bar>
                        </BarChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>

{/* 3. Diagramme Sankey */}
                  <Card className="backdrop-blur-sm bg-white/10 shadow-lg rounded-2xl">
                    <CardHeader>
                      <CardTitle className="flex items-center">
                        <Award className="w-5 h-5 mr-2" />
                        Flux de Placement par Secteur
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ResponsiveContainer width="100%" height={280}>
                        <LineChart data={sankeyData}>
                          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                          <XAxis dataKey="flow" stroke="#6b7280" />
                          <YAxis stroke="#6b7280" />
                          <Tooltip content={<CustomTooltip />} />
                          <Line type="monotone" dataKey="count" stroke={ACCESSIBLE_COLORS.warning} strokeWidth={3} />
                        </LineChart>
                      </ResponsiveContainer>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/results-radar-chart.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useMemo } from "react"
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { cn } from "@/lib/utils"

interface ResultsRadarChartProps {
  data: {
    totalTimeGainHours: number
    potentialAdditionalRevenue: number
    netGain: number
  }
  profileColors: {
    accent: string
    text: string
    bg: string // e.g., "bg-gold-sienna-700"
  }
}

const MAX_TIME_GAIN_REF = 4000
const MAX_ADDITIONAL_REVENUE_REF = 400000
const MAX_NET_GAIN_REF = 250000

const formatNumberForTooltip = (value: number) => Math.round(value).toLocaleString("fr-FR")

export function ResultsRadarChart({ data, profileColors }: ResultsRadarChartProps) {
  const chartData = useMemo(() => {
    const normalizedTimeGain = Math.min(100, Math.max(0, (data.totalTimeGainHours / MAX_TIME_GAIN_REF) * 100))
    const normalizedRevenue = Math.min(
      100,
      Math.max(0, (data.potentialAdditionalRevenue / MAX_ADDITIONAL_REVENUE_REF) * 100),
    )
    const normalizedNetGain = Math.min(100, Math.max(0, (data.netGain / MAX_NET_GAIN_REF) * 100))

return [
      {
        subject: "Temps Gagné",
        value: normalizedTimeGain,
        fullMark: 100,
        actualValue: data.totalTimeGainHours,
        unit: "h",
      },
      {
        subject: "CA Suppl.",
        value: normalizedRevenue,
        fullMark: 100,
        actualValue: data.potentialAdditionalRevenue,
        unit: "€",
      },
      { subject: "Bénéfice Net", value: normalizedNetGain, fullMark: 100, actualValue: data.netGain, unit: "€" },
    ]
  }, [data])

// Utiliser la couleur de fond principale du profil pour le radar.
  // Ex: profileColors.bg = "bg-gold-sienna-700" -> baseColorName = "gold-sienna-700"
  // On suppose que --gold-sienna-700 est une variable CSS HSL définie dans globals.css
  const baseColorName = profileColors.bg.replace(/^bg-/, "") // Supprime "bg-"
  const radarColor = `hsl(var(--${baseColorName}))`
  const profileTextColor = `hsl(var(--${profileColors.text.replace(/^text-/, "")}))`

if (chartData.every((d) => d.value === 0)) {
    return (
      <Card className="bg-card border w-full">
        <CardHeader>
          <CardTitle className={cn("text-xl md:text-2xl text-center", profileColors.text)}>
            Visualisation des Bénéfices Clés
          </CardTitle>
        </CardHeader>
        <CardContent className="h-[300px] md:h-[400px] flex items-center justify-center">
          <p className="text-muted-foreground">Données insuffisantes ou nulles pour afficher le graphique.</p>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="bg-card border w-full">
      <CardHeader>
        <CardTitle className={cn("text-xl md:text-2xl text-center", profileColors.text)}>
          Visualisation des Bénéfices Clés
        </CardTitle>
        <CardDescription className="text-center text-sm text-muted-foreground">
          Performance relative aux potentiels maximums de référence.
        </CardDescription>
      </CardHeader>
      <CardContent className="h-[300px] md:h-[400px] p-4">
        <ResponsiveContainer width="100%" height="100%">
          <RadarChart cx="50%" cy="50%" outerRadius="75%" data={chartData}>
            <PolarGrid stroke="hsl(var(--border))" />
            <PolarAngleAxis dataKey="subject" tick={{ fill: profileTextColor, fontSize: 12 }} />
            <PolarRadiusAxis angle={30} domain={[0, 100]} tickCount={6} tickFormatter={(value) => `${value}%`} />
            <Radar
              name="Performance Estimée"
              dataKey="value"
              stroke={radarColor}
              fill={radarColor}
              fillOpacity={0.3} // Opacité pour le remplissage
              strokeWidth={2}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: "hsl(var(--popover))",
                borderColor: "hsl(var(--border))",
                color: "hsl(var(--popover-foreground))",
                borderRadius: "var(--radius)",
              }}
              formatter={(value, name, props) => [
                `${formatNumberForTooltip(props.payload.actualValue)} ${props.payload.unit}`,
                props.payload.subject, // Utiliser le nom du sujet comme titre dans le tooltip
              ]}
              labelFormatter={() => ""} // Masquer le label par défaut du tooltip (qui est l'index)
            />
            <Legend wrapperStyle={{ paddingTop: "20px" }} />
          </RadarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/results-bar-chart.tsx" isMerged="true"
"use client"

import { useMemo } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from "recharts"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { cn } from "@/lib/utils"

interface ResultsBarChartProps {
  data: {
    investmentCost: number
    potentialAdditionalRevenue: number
    netGain: number
  }
  profileColors: {
    accent: string // Pour le CA et Bénéfice
    text: string
    // Une couleur pour le coût, peut-être un gris ou une couleur neutre
    costColor?: string // e.g., "hsl(var(--muted))" ou une couleur spécifique
  }
}

const formatCurrencyForAxis = (value: number) => {
  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M €`
  if (value >= 1000) return `${(value / 1000).toFixed(0)}k €`
  return `${value} €`
}

const formatNumberForTooltip = (value: number) => Math.round(value).toLocaleString("fr-FR")

export function ResultsBarChart({ data, profileColors }: ResultsBarChartProps) {
  const chartData = useMemo(
    () => [
      { name: "Coût Invest.", value: data.investmentCost, unit: "€", colorKey: "cost" },
      { name: "CA Suppl.", value: data.potentialAdditionalRevenue, unit: "€", colorKey: "revenue" },
      { name: "Bénéfice Net", value: data.netGain, unit: "€", colorKey: "netGain" },
    ],
    [data],
  )

const costColor = profileColors.costColor || "hsl(var(--muted-foreground))" // Gris par défaut pour le coût
  // Utiliser la couleur d'accent du profil pour les gains
  const accentColorName = profileColors.accent.replace("accent-", "")
  const gainColor = `hsl(var(--${accentColorName}))`
  // Pour le bénéfice net, on peut utiliser la même couleur ou une variation
  const netGainColor = gainColor // Ou une autre couleur si vous voulez différencier

const colors = {
    cost: costColor,
    revenue: gainColor,
    netGain: data.netGain >= 0 ? gainColor : "hsl(var(--destructive))", // Rouge si bénéfice négatif
  }

const profileTextColor = `hsl(var(--${profileColors.text.replace(/^text-/, "")}))`

return (
    <Card className="bg-card border w-full">
      <CardHeader>
        <CardTitle className={cn("text-xl md:text-2xl text-center", profileColors.text)}>
          Synthèse Financière des Bénéfices
        </CardTitle>
        <CardDescription className="text-center text-sm text-muted-foreground">
          Comparaison des coûts et gains estimés.
        </CardDescription>
      </CardHeader>
      <CardContent className="h-[300px] md:h-[400px] p-4">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={chartData} layout="vertical" margin={{ left: 10, right: 30 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
            <XAxis
              type="number"
              tickFormatter={formatCurrencyForAxis}
              stroke={profileTextColor}
              tick={{ fill: profileTextColor, fontSize: 12 }}
            />
            <YAxis
              type="category"
              dataKey="name"
              width={100}
              stroke={profileTextColor}
              tick={{ fill: profileTextColor, fontSize: 12 }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: "hsl(var(--popover))",
                borderColor: "hsl(var(--border))",
                color: "hsl(var(--popover-foreground))",
                borderRadius: "var(--radius)",
              }}
              formatter={(value: number, name, props) => [
                `${formatNumberForTooltip(value)} ${props.payload.unit}`,
                props.payload.name,
              ]}
              labelFormatter={() => ""}
            />
            <Legend wrapperStyle={{ paddingTop: "20px" }} />
            <Bar dataKey="value" barSize={35} radius={[0, 6, 6, 0]}>
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={colors[entry.colorKey as keyof typeof colors]} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/evaluation/EvaluationPageDisabledClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { ShieldOff } from "lucide-react" // Changed icon for variety
import { Button } from "@/components/ui/button" // Added Button for manual redirect
import Link from "next/link" // Added Link for manual redirect

export default function EvaluationPageDisabledClient() {
  const router = useRouter()

useEffect(() => {
    const timer = setTimeout(() => {
      router.push("/")
    }, 7000) // Redirect after 7 seconds

return () => clearTimeout(timer) // Cleanup timer on component unmount
  }, [router])

return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-160px)] text-center p-6 bg-gradient-to-br from-gray-50 via-slate-50 to-stone-100 dark:from-gray-900 dark:via-slate-900 dark:to-stone-950">
      <div className="bg-white dark:bg-gray-800 p-8 md:p-12 rounded-xl shadow-2xl max-w-lg w-full">
        <ShieldOff className="w-20 h-20 text-primary-500 mx-auto mb-6" />
        <h1 className="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-4">Accès Suspendu</h1>
        <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
          La page "Accès Client" n'est actuellement pas disponible. Nous nous excusons pour la gêne occasionnée.
        </p>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          Vous allez être redirigé(e) vers la page d'accueil dans quelques instants...
        </p>
        <Button asChild variant="outline" size="lg">
          <Link href="/">Retourner à l'accueil</Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/evaluation/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import EvaluationPageDisabledClient from "./EvaluationPageDisabledClient"

export default function EvaluationPageDisabled() {
  return <EvaluationPageDisabledClient />
}

export const metadata = {
  title: "Accès Suspendu - CareerPilot Pro",
  description: "Cette page n'est actuellement pas disponible.",
}
[V0_FILE]typescriptreact:file="app/tester-careerpilot-pro/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50">
      <div className="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-green-700"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tester-careerpilot-pro/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import TesterCareerPilotProClient from "./TesterCareerPilotProClient"

export const metadata = {
  title: "Testez CareerPilot Pro | Votre Bilan de Compétences Augmenté",
  description:
    "Essayez notre plateforme et découvrez comment CareerPilot Pro peut transformer votre approche du bilan de compétences grâce à l'IA.",
}

export default function TesterCareerPilotProPage() {
  return <TesterCareerPilotProClient />
}
[V0_FILE]typescriptreact:file="components/roi-calculator.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useMemo, useCallback } from "react"
import { motion, AnimatePresence, useSpring, useTransform } from "framer-motion"
import { ArrowLeft, ChevronRight, BuildingIcon, Info, FileText, Users, Calculator, Clock, Target } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// --- Constantes métiers ---
const CPP_PRICE = 999
const CPP_DISCOUNT_RATE = 0.15 // 15% de réduction
const CPP_DISCOUNT_THRESHOLD = 50 // À partir du 50ème
const TIME_WITH_CPP = 1.75 // en heures
const DEFAULT_HOURS_PER_WORKING_DAY = 7 // Hypothèse pour convertir temps gagné en CA
const WORKING_DAYS_PER_YEAR = 200 // Jours ouvrés par an
const SALARY_CHARGES_RATE = 0.43 // 43% de charges salariales

// --- Profils et Couleurs ---
const profiles = [
  {
    key: "outplacement",
    label: "Cabinet de Gestion de Carrières",
    Icon: BuildingIcon,
    description: "Pour les experts en transition de carrière.",
    colors: {
      gradient: "from-gold-sienna-700/20 via-transparent to-transparent",
      accent: "accent-gold-sienna-500",
      bg: "bg-gold-sienna-700",
      hoverBg: "hover:bg-gold-sienna-600",
      ring: "ring-gold-sienna-500",
      text: "text-gold-sienna-700",
      icon: "text-gold-sienna-500",
      buttonText: "text-white",
    },
  },
]

// --- Structure des Questions ---
const timeRanges = [
  { label: "1-4h", value: 2.5 },
  { label: "5-10h", value: 7.5 },
  { label: "11-20h", value: 15.5 },
  { label: "+20h", value: 25 },
]

// Options d'utilisation du temps libéré
const timeUsageOptions = [
  {
    key: "revenue",
    label: "Générer plus de chiffre d'affaires",
    description: "Utiliser le temps libéré pour développer de nouveaux clients ou services",
    Icon: FileText,
  },
  {
    key: "capacity",
    label: "Traiter plus de candidats",
    description: "Augmenter le nombre de dossiers traités avec les mêmes ressources",
    Icon: Users,
  },
]

const baseQuestions = [
  {
    name: "numConsultants",
    question: "Combien de consultants compte votre cabinet ?",
    type: "log_slider",
    min: 1,
    max: 1000,
    step: 1,
  },
  {
    name: "dossiersPerConsultant",
    question: "Combien de dossiers par an par consultant ?",
    type: "log_slider",
    min: 1,
    max: 200,
    step: 1,
  },
  {
    name: "hoursResearchPerDossier",
    question:
      "En moyenne, combien d'heures un(e) consultant(e) consacre-t-il/elle à la recherche manuelle pour un dossier ?",
    type: "range",
    options: timeRanges,
  },
]

const revenueQuestions = [
  {
    name: "consultantHourlyCost",
    question: "Quel est le coût salarial horaire moyen et hors charges d'un(e) Consultant(e) ?",
    type: "slider",
    min: 30,
    max: 400,
    step: 5,
    unit: "€",
    tooltip: `Ce coût sera majoré de ${SALARY_CHARGES_RATE * 100}% (charges patronales) dans les calculs.`,
  },
  {
    name: "consultantAnnualRevenue",
    question: "Quel est votre chiffre d'affaire annuel ?",
    type: "log_slider",
    min: 100000,
    max: 10000000,
    step: 50000,
    unit: "€",
  },
]

// --- Fonctions de formatage ---
const formatCurrency = (value: number) =>
  value.toLocaleString("fr-FR", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  })

const formatCurrencyWithDecimals = (value: number, decimals = 2) =>
  value.toLocaleString("fr-FR", {
    style: "currency",
    currency: "EUR",
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  })

const formatNumber = (value: number) =>
  value.toLocaleString("fr-FR", { minimumFractionDigits: 0, maximumFractionDigits: 0 })

const formatDecimalHours = (decimalHours: number): string => {
  if (typeof decimalHours !== "number" || isNaN(decimalHours)) {
    return ""
  }
  if (decimalHours === 0) {
    return "0h"
  }
  const hours = Math.floor(decimalHours)
  const minutes = Math.round((decimalHours - hours) * 60)

let result = ""
  if (hours > 0) {
    result += `${hours}h`
  }
  if (minutes > 0) {
    if (result.length > 0) {
      result += " "
    }
    result += `${minutes}min`
  }

return result
}

// --- Fonction de calcul du coût d'investissement avec discount ---
const calculateInvestmentCost = (totalDossiers: number): number => {
  if (totalDossiers < 100) {
    return totalDossiers * CPP_PRICE
  }

let cost = 0
  let remainingDossiers = totalDossiers

// Premiers 99 dossiers au prix normal
  const firstTier = Math.min(99, remainingDossiers)
  cost += firstTier * CPP_PRICE
  remainingDossiers -= firstTier

if (remainingDossiers > 0) {
    // À partir du 100ème : 10% de remise
    let currentDiscount = 0.1
    let currentTierStart = 100

while (remainingDossiers > 0 && currentDiscount < 0.19) {
      const currentTierEnd = currentTierStart + 74 // 75 dossiers par tranche
      const currentTierDossiers = Math.min(75, remainingDossiers)
      const discountedPrice = CPP_PRICE * (1 - currentDiscount)

cost += currentTierDossiers * discountedPrice
      remainingDossiers -= currentTierDossiers

// Augmenter la remise de 3% pour la tranche suivante (max 19%)
      currentDiscount = Math.min(0.19, currentDiscount + 0.03)
      currentTierStart = currentTierEnd + 1
    }

// Tous les dossiers restants à 19% de remise
    if (remainingDossiers > 0) {
      const finalDiscountedPrice = CPP_PRICE * (1 - 0.19)
      cost += remainingDossiers * finalDiscountedPrice
    }
  }

return cost
}

// --- Calcul du temps libéré ---
const calculateTimeSaved = (answers: any) => {
  const numConsultants = answers.numConsultants || 1
  const dossiersPerConsultant = answers.dossiersPerConsultant || 0
  const totalDossiers = numConsultants * dossiersPerConsultant
  const hoursPerDossierCurrent = answers.hoursResearchPerDossier || 0
  const timeGainPerDossier = Math.max(0, hoursPerDossierCurrent - TIME_WITH_CPP)
  const totalTimeGainHours = timeGainPerDossier * totalDossiers

return {
    numConsultants,
    dossiersPerConsultant,
    totalDossiers,
    hoursPerDossierCurrent,
    timeGainPerDossier,
    totalTimeGainHours,
  }
}

// --- Logique de Calcul ---
const calculateROI = (answers: any, timeUsage: string) => {
  const timeSavedData = calculateTimeSaved(answers)
  const { totalDossiers, totalTimeGainHours, timeGainPerDossier } = timeSavedData

const investmentCost = calculateInvestmentCost(totalDossiers)

if (timeUsage === "revenue") {
    // Calcul basé sur le chiffre d'affaires
    const annualRevenue = answers.consultantAnnualRevenue || 0
    const dailyRevenue = annualRevenue / WORKING_DAYS_PER_YEAR
    const potentialAdditionalRevenue = (totalTimeGainHours / DEFAULT_HOURS_PER_WORKING_DAY) * dailyRevenue

// Plus de CA = Plus de dossiers à traiter = Plus de coûts
    const currentRevenuePerDossier = totalDossiers > 0 ? annualRevenue / totalDossiers : 0
    const additionalDossiers =
      currentRevenuePerDossier > 0 ? Math.round(potentialAdditionalRevenue / currentRevenuePerDossier) : 0
    const newTotalDossiers = totalDossiers + additionalDossiers

// Coût d'investissement basé sur le nouveau nombre total de dossiers
    const investmentCost = calculateInvestmentCost(newTotalDossiers)

// Coût initial pour les dossiers actuels
    const currentInvestmentCost = calculateInvestmentCost(totalDossiers)

// Coût supplémentaire dû aux nouveaux dossiers
    const additionalInvestmentCost = investmentCost - currentInvestmentCost

// Gain net = CA additionnel - Coût supplémentaire pour les nouveaux dossiers
    const netGain = potentialAdditionalRevenue - additionalInvestmentCost

// ROI basé sur l'investissement total
    const roi = investmentCost > 0 ? (netGain / investmentCost) * 100 : 0

const consultantHourlyCostRaw = answers.consultantHourlyCost || 0
    const consultantHourlyCostCharged = consultantHourlyCostRaw * (1 + SALARY_CHARGES_RATE)
    const valueTimeGainBasedOnCost = totalTimeGainHours * consultantHourlyCostCharged

return {
      roi,
      net: netGain,
      timeUsage: "revenue",
      details: {
        "Gain de temps annuel": totalTimeGainHours,
        "CA Potentiel Additionnel": potentialAdditionalRevenue,
        "Dossiers supplémentaires générés": additionalDossiers,
        "Coût supplémentaire nouveaux dossiers": additionalInvestmentCost,
        "Valeur du temps gagné (coûts salariaux)": valueTimeGainBasedOnCost,
        "Coût total d'investissement": investmentCost,
      },
      explanationData: {
        ...timeSavedData,
        potentialAdditionalRevenue,
        additionalDossiers,
        newTotalDossiers,
        investmentCost,
        currentInvestmentCost,
        additionalInvestmentCost,
        roi,
        hoursPerDay: DEFAULT_HOURS_PER_WORKING_DAY,
        workingDaysPerYear: WORKING_DAYS_PER_YEAR,
        annualRevenue,
        dailyRevenue,
        currentRevenuePerDossier,
        discountApplied: newTotalDossiers >= 100,
        consultantHourlyCostRaw,
        consultantHourlyCostCharged,
        valueTimeGainBasedOnCost,
      },
    }
  } else {
    // Calcul basé sur la capacité (nombre de dossiers)
    const { numConsultants, dossiersPerConsultant, hoursPerDossierCurrent } = timeSavedData
    const additionalDossiersPerConsultant =
      hoursPerDossierCurrent > 0 ? Math.floor(totalTimeGainHours / numConsultants / hoursPerDossierCurrent) : 0
    const newDossiersPerConsultant = dossiersPerConsultant + additionalDossiersPerConsultant
    const capacityIncrease =
      dossiersPerConsultant > 0 ? (additionalDossiersPerConsultant / dossiersPerConsultant) * 100 : 0

// ROI basé sur l'augmentation de capacité vs coût d'investissement
    const valueOfAdditionalCapacity = additionalDossiersPerConsultant * numConsultants * CPP_PRICE // Valeur estimée des dossiers supplémentaires
    const netGain = valueOfAdditionalCapacity - investmentCost
    const roi = investmentCost > 0 ? (netGain / investmentCost) * 100 : 0

return {
      roi,
      net: netGain,
      timeUsage: "capacity",
      details: {
        "Gain de temps annuel": totalTimeGainHours,
        "Dossiers supplémentaires par consultant": additionalDossiersPerConsultant,
        "Nouveaux dossiers par consultant": newDossiersPerConsultant,
        "Augmentation de capacité": capacityIncrease,
        "Coût de l'investissement": investmentCost,
      },
      explanationData: {
        ...timeSavedData,
        investmentCost,
        roi,
        discountApplied: totalDossiers >= CPP_DISCOUNT_THRESHOLD,
        additionalDossiersPerConsultant,
        newDossiersPerConsultant,
        capacityIncrease,
        valueOfAdditionalCapacity,
      },
    }
  }
}

// --- Composants d'Interface ---

const AnimatedNumber = ({ value, unit }: { value: number; unit?: string }) => {
  const springValue = useSpring(value, { mass: 0.8, stiffness: 100, damping: 15 })
  useEffect(() => {
    springValue.set(value)
  }, [springValue, value])
  const formattedValue = useTransform(springValue, (currentValue) => Math.round(currentValue).toLocaleString("fr-FR"))
  return (
    <>
      <motion.span>{formattedValue}</motion.span>
      {unit && <span className="text-3xl ml-2 opacity-70">{unit}</span>}
    </>
  )
}

const LogSliderInput = ({ value, onChange, min, max, unit, colors, tooltip }: any) => {
  const [isEditing, setIsEditing] = useState(false)

const safeValue = typeof value === "number" && !isNaN(value) ? value : min

const minLog = Math.log(min)
  const maxLog = Math.log(max)
  const scale = (maxLog - minLog) / 100

const valueToPosition = (val: number) => (Math.log(Math.max(min, val)) - minLog) / scale
  const positionToValue = (pos: number) => Math.exp(minLog + pos * scale)

const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = Math.round(positionToValue(Number(e.target.value)))
    onChange(newValue)
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = Number.parseInt(e.target.value, 10)
    onChange(isNaN(newValue) ? min : newValue)
  }

const validateAndSet = () => {
    let num = Number(safeValue)
    if (isNaN(num)) num = min
    if (num > max) num = max
    if (num < min) num = min
    onChange(num)
    setIsEditing(false)
  }

const formatDisplayValue = (val: number) => {
    if (val >= 1000000) {
      return `${(val / 1000000).toFixed(1)}M`
    } else if (val >= 1000) {
      return `${(val / 1000).toFixed(0)}k`
    }
    return val.toString()
  }

return (
    <div className="w-full max-w-md flex flex-col items-center gap-8">
      {isEditing ? (
        <Input
          type="number"
          value={safeValue}
          onChange={handleInputChange}
          onBlur={validateAndSet}
          onKeyDown={(e) => {
            if (e.key === "Enter") validateAndSet()
          }}
          className={cn(
            "text-6xl font-bold text-center bg-transparent border-0 border-b-2 rounded-none w-64 h-auto p-0 focus:ring-0",
            "text-cpp-text-primary",
            `border-gray-300 focus:border-cpp-button-range-selected`,
          )}
          autoFocus
        />
      ) : (
        <motion.div
          onClick={() => setIsEditing(true)}
          className="text-6xl font-bold cursor-pointer text-cpp-text-primary"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          {unit === "€" && safeValue >= 1000 ? (
            <span>
              {formatDisplayValue(safeValue)} {unit}
            </span>
          ) : (
            <AnimatedNumber value={safeValue} unit={unit} />
          )}
        </motion.div>
      )}
      <Input
        type="range"
        min="0"
        max="100"
        value={valueToPosition(safeValue)}
        onChange={handleSliderChange}
        className={cn("w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb", colors.accent)}
      />
      {tooltip && (
        <p className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
          <Info size={14} /> {tooltip}
        </p>
      )}
    </div>
  )
}

const SliderInput = ({ value, onChange, min, max, step, unit, colors, tooltip }: any) => {
  const safeValue = typeof value === "number" && !isNaN(value) ? value : min
  const [displayValue, setDisplayValue] = useState(safeValue)
  const [costCharged, setCostCharged] = useState(safeValue * (1 + SALARY_CHARGES_RATE))

useEffect(() => {
    const newSafeValue = typeof value === "number" && !isNaN(value) ? value : min
    setDisplayValue(newSafeValue)
    if (unit === "€") {
      setCostCharged(newSafeValue * (1 + SALARY_CHARGES_RATE))
    }
  }, [value, unit, min])

const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = Number(e.target.value)
    if (!isNaN(newValue)) {
      setDisplayValue(newValue)
      onChange(newValue)
    }
  }

return (
    <div className="w-full max-w-md flex flex-col items-center gap-8">
      <motion.div className="text-6xl font-bold text-cpp-text-primary">
        <AnimatedNumber value={displayValue} unit={unit} />
      </motion.div>
      <Input
        type="range"
        min={min}
        max={max}
        step={step}
        value={displayValue}
        onChange={handleSliderChange}
        className={cn("w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb", colors.accent)}
      />
      {tooltip && (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <p className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1 cursor-help">
                <Info size={14} /> {tooltip}
              </p>
            </TooltipTrigger>
            <TooltipContent>
              <p>Coût horaire chargé estimé : {formatCurrencyWithDecimals(costCharged, 2)}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )}
    </div>
  )
}

const RangeButtons = ({ value, onChange, options }: any) => {
  const safeValue = typeof value === "number" && !isNaN(value) ? value : options[0]?.value || 0

return (
    <div className="flex flex-col sm:flex-row justify-around gap-4 w-full max-w-lg">
      {options.map((option: { label: string; value: number }) => (
        <motion.div key={option.value} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="flex-1">
          <Button
            onClick={() => onChange(option.value)}
            className={cn(
              "w-full py-8 text-xl transition-all duration-200 border-2 text-white",
              safeValue === option.value
                ? `bg-cpp-button-range-selected hover:bg-cpp-button-range-selected/90 border-transparent`
                : `bg-cpp-button-range hover:bg-cpp-button-range/90 border-transparent`,
            )}
          >
            {option.label}
          </Button>
        </motion.div>
      ))}
    </div>
  )
}

const TimeSavedDisplay = ({ answers, colors }: any) => {
  const timeSavedData = calculateTimeSaved(answers)
  const {
    numConsultants,
    dossiersPerConsultant,
    totalDossiers,
    hoursPerDossierCurrent,
    timeGainPerDossier,
    totalTimeGainHours,
  } = timeSavedData

return (
    <div className="w-full max-w-6xl mx-auto mb-12">
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="relative"
      >
        {/* Background avec effet glassmorphism */}
        <div className="absolute inset-0 bg-gradient-to-br from-gold-sienna-100/80 via-gold-sienna-50/60 to-amber-50/40 dark:from-gold-sienna-900/40 dark:via-gold-sienna-800/30 dark:to-amber-900/20 backdrop-blur-sm rounded-3xl border border-gold-sienna-200/50 dark:border-gold-sienna-700/50"></div>

{/* Contenu principal */}
        <div className="relative p-8 md:p-12">
          {/* Header avec icône et titre */}
          <div className="text-center mb-10">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.3, type: "spring", stiffness: 200 }}
              className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-gold-sienna-500 to-gold-sienna-600 rounded-2xl mb-6 shadow-lg"
            >
              <Clock className="w-10 h-10 text-white" />
            </motion.div>

<motion.h3
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gold-sienna-700 via-gold-sienna-600 to-amber-600 bg-clip-text text-transparent mb-4"
            >
              Temps libéré grâce à CareerPilot Pro
            </motion.h3>

{/* Résultat principal avec animation spectaculaire */}
            <motion.div
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 0.6, type: "spring", stiffness: 150 }}
              className="relative inline-block"
            >
              <div className="absolute inset-0 bg-gradient-to-r from-gold-sienna-400 to-amber-400 rounded-2xl blur-lg opacity-30 animate-pulse"></div>
              <div className="relative bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-2xl px-8 py-6 border border-gold-sienna-200 dark:border-gold-sienna-700 shadow-xl">
                <div className="text-7xl md:text-8xl font-black bg-gradient-to-r from-gold-sienna-600 via-gold-sienna-500 to-amber-500 bg-clip-text text-transparent">
                  <AnimatedNumber value={totalTimeGainHours} />
                  <span className="text-5xl md:text-6xl ml-3 opacity-80 text-[#A6773F]">h</span>
                </div>
                <p className="text-xl md:text-2xl font-semibold text-gold-sienna-600 dark:text-gold-sienna-400 mt-2">
                  par an pour votre cabinet
                </p>
              </div>
            </motion.div>
          </div>

{/* Grille des détails avec animations */}
          <div className="grid lg:grid-cols-2 gap-8 mt-12">
            {/* Données du cabinet */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.8 }}
              className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-2xl p-6 border border-gold-sienna-200/50 dark:border-gold-sienna-700/50 shadow-lg"
            >
              <div className="flex items-center mb-6">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mr-4">
                  <Target className="w-6 h-6 text-white" />
                </div>
                <h4 className="text-2xl font-bold text-gray-800 dark:text-gray-200">Données de votre cabinet</h4>
              </div>

<div className="space-y-4">
                {[
                  { label: "Consultants", value: `${formatNumber(numConsultants)}`, icon: "👥" },
                  { label: "Dossiers par consultant/an", value: `${formatNumber(dossiersPerConsultant)}`, icon: "📋" },
                  { label: "Total dossiers annuels", value: `${formatNumber(totalDossiers)}`, icon: "📊" },
                  {
                    label: "Recherche manuelle actuelle",
                    value: `${formatDecimalHours(hoursPerDossierCurrent)}/dossier`,
                    icon: "🔍",
                  },
                ].map((item, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.9 + index * 0.1 }}
                    className="flex items-center justify-between p-3 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-xl"
                  >
                    <div className="flex items-center">
                      <span className="text-2xl mr-3">{item.icon}</span>
                      <span className="font-medium text-gray-700 dark:text-gray-300">{item.label}</span>
                    </div>
                    <span className="font-bold text-gold-sienna-600 dark:text-gold-sienna-400 text-lg">
                      {item.value}
                    </span>
                  </motion.div>
                ))}
              </div>
            </motion.div>

{/* Calcul détaillé */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 1.0 }}
              className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-2xl p-6 border border-gold-sienna-200/50 dark:border-gold-sienna-700/50 shadow-lg"
            >
              <div className="flex items-center mb-6">
                <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
                  <Calculator className="w-6 h-6 text-white" />
                </div>
                <h4 className="text-2xl font-bold text-gray-800 dark:text-gray-200">Calcul détaillé</h4>
              </div>

{/* Formule principale */}
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 1.2 }}
                className="bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-purple-900/30 dark:to-indigo-900/30 p-6 rounded-xl border border-purple-200 dark:border-purple-700 mb-6"
              >
                <p className="font-semibold text-purple-800 dark:text-purple-300 mb-3 text-lg">📐 Formule :</p>
                <div className="font-mono text-sm bg-white/80 dark:bg-gray-800/80 p-3 rounded-lg border mb-3">
                  (Temps actuel - Temps avec CPP) × Nombre de dossiers
                </div>
                <div className="font-mono text-sm bg-gradient-to-r from-gold-sienna-100 to-amber-100 dark:from-gold-sienna-900/50 dark:to-amber-900/50 p-3 rounded-lg border border-gold-sienna-200 dark:border-gold-sienna-700">
                  ({formatDecimalHours(hoursPerDossierCurrent)} - {formatDecimalHours(TIME_WITH_CPP)}) ×{" "}
                  {formatNumber(totalDossiers)} =
                  <span className="font-bold text-gold-sienna-700 dark:text-gold-sienna-300 ml-2 text-lg">
                    {formatNumber(totalTimeGainHours)}h
                  </span>
                </div>
              </motion.div>

{/* Détails du gain */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1.4 }}
                className="space-y-3"
              >
                {[
                  {
                    label: "Avec CareerPilot Pro",
                    value: `${formatDecimalHours(TIME_WITH_CPP)} par dossier`,
                    color: "text-green-600",
                  },
                  {
                    label: "Gain par dossier",
                    value: `${formatDecimalHours(timeGainPerDossier)}`,
                    color: "text-blue-600",
                  },
                  {
                    label: "Gain total annuel",
                    value: `${formatNumber(totalTimeGainHours)}h`,
                    color: "text-gold-sienna-600",
                  },
                ].map((item, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-2 rounded-lg bg-gray-50/50 dark:bg-gray-700/50"
                  >
                    <span className="text-sm font-medium text-gray-600 dark:text-gray-400">• {item.label}</span>
                    <span className={`font-bold ${item.color} dark:opacity-90`}>{item.value}</span>
                  </div>
                ))}
              </motion.div>
            </motion.div>
          </div>

{/* Texte d'opportunité */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1.6 }}
            className="text-center mt-12"
          >
            <h4 className="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
              Qu'allez-vous faire de cette opportunité ?
            </h4>
          </motion.div>
        </div>
      </motion.div>
    </div>
  )
}

const SuggestionTiles = () => {
  const suggestions = [
    {
      title: "Développer de nouveaux services",
      description: "Utilisez ce temps pour créer de nouvelles offres d'accompagnement",
      icon: "🚀",
      color: "from-blue-500 to-blue-600",
    },
    {
      title: "Plus d'accompagnement",
      description: "Consacrez plus de temps à l'accompagnement personnalisé",
      icon: "⭐",
      color: "from-green-500 to-green-600",
    },
    {
      title: "Former vos équipes",
      description: "Investissez dans la montée en compétences",
      icon: "📚",
      color: "from-purple-500 to-purple-600",
    },
    {
      title: "Développer votre réseau",
      description: "Renforcez vos partenariats et votre présence",
      icon: "🤝",
      color: "from-orange-500 to-orange-600",
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mt-12">
      {suggestions.map((suggestion, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 3 + index * 0.2 }}
          className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 border border-gold-sienna-200/50 dark:border-gold-sienna-700/50 shadow-lg"
        >
          <div
            className={`w-12 h-12 bg-gradient-to-br ${suggestion.color} rounded-xl flex items-center justify-center mb-4`}
          >
            <span className="text-2xl">{suggestion.icon}</span>
          </div>
          <h4 className="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">{suggestion.title}</h4>
          <p className="text-gray-600 dark:text-gray-400">{suggestion.description}</p>
        </motion.div>
      ))}
    </div>
  )
}

const CalculationPreview = ({ answers, timeUsage, colors }: any) => {
  // Masquer complètement l'aperçu du calcul
  return null
}

const TimeUsageSelector = ({ value, onChange, colors }: any) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
      {timeUsageOptions.map((option) => (
        <motion.div
          key={option.key}
          whileHover={{ y: -5, scale: 1.02 }}
          transition={{ type: "spring", stiffness: 300 }}
        >
          <Card
            onClick={() => onChange(option.key)}
            className={cn(
              "cursor-pointer bg-card border-2 rounded-2xl p-8 text-center transition-all duration-300 hover:shadow-xl h-full flex flex-col justify-center",
              value === option.key
                ? `border-gold-sienna-500 bg-gold-sienna-50 dark:bg-gold-sienna-900/20`
                : "border-border hover:border-gold-sienna-300",
            )}
          >
            <option.Icon
              className={cn("w-12 h-12 mx-auto mb-4", value === option.key ? "text-gold-sienna-600" : "text-gray-500")}
            />
            <h3
              className={cn(
                "text-2xl font-bold mb-2",
                value === option.key ? "text-gold-sienna-700" : "text-cpp-text-primary",
              )}
            >
              {option.label}
            </h3>
            <p className="text-gray-600">{option.description}</p>
          </Card>
        </motion.div>
      ))}
    </div>
  )
}

// --- Composant Principal ---

export default function CareerPilotProROIQuiz() {
  const [stage, setStage] = useState<"quiz" | "final">("quiz")
  const [step, setStep] = useState(0)
  const [answers, setAnswers] = useState<any>({})
  // Supprimer timeUsage, additionalStep et leurs setters
  // const [timeUsage, setTimeUsage] = useState<string>("")
  // const [additionalStep, setAdditionalStep] = useState(0)

const profileKey = "outplacement"
  const profileData = profiles[0]

const currentQuestions = useMemo(() => baseQuestions, [])
  const currentQuestion = useMemo(() => currentQuestions[step], [currentQuestions, step])

const additionalQuestions = useMemo(() => {
    return []
  }, [])

const currentAdditionalQuestion = useMemo(() => additionalQuestions[0], [additionalQuestions])

// Initialisation des réponses par défaut
  useEffect(() => {
    const initialAnswers = baseQuestions.reduce((acc: any, q: any) => {
      if (q.type === "range") {
        acc[q.name] = q.options[0].value
      } else {
        acc[q.name] = q.min || 1
      }
      return acc
    }, {})
    setAnswers(initialAnswers)
  }, [])

const handleAnswerChange = useCallback(
    (value: any) => {
      if (currentQuestion) {
        const safeValue =
          typeof value === "number" && !isNaN(value)
            ? value
            : currentQuestion.type === "range"
              ? currentQuestion.options[0].value
              : currentQuestion.min || 1
        setAnswers((prev: any) => ({ ...prev, [currentQuestion.name]: safeValue }))
      }
    },
    [currentQuestion],
  )

const handleAdditionalAnswerChange = useCallback(
    (value: any) => {
      if (currentAdditionalQuestion) {
        const safeValue = typeof value === "number" && !isNaN(value) ? value : currentAdditionalQuestion.min || 1
        setAnswers((prev: any) => ({ ...prev, [currentAdditionalQuestion.name]: safeValue }))
      }
    },
    [currentAdditionalQuestion],
  )

const handleTimeUsageChange = useCallback((value: string) => {}, [])

const proceedToNextStep = () => {
    if (stage === "quiz") {
      if (step + 1 < currentQuestions.length) {
        setStep(step + 1)
      } else {
        setStage("final")
      }
    }
  }

const handleBack = () => {
    if (stage === "final") {
      setStage("quiz")
      setStep(currentQuestions.length - 1)
      return
    }
    if (stage === "quiz" && step > 0) {
      setStep(step - 1)
    }
  }

const renderContent = () => {
    if (stage === "quiz" && profileData && currentQuestion) {
      const InputComponent =
        currentQuestion.type === "log_slider"
          ? LogSliderInput
          : currentQuestion.type === "slider"
            ? SliderInput
            : currentQuestion.type === "range"
              ? RangeButtons
              : LogSliderInput

const currentAnswer =
        answers[currentQuestion.name] ??
        (currentQuestion.type === "range" ? currentQuestion.options[0].value : currentQuestion.min || 1)

return (
        <div className="h-full flex flex-col bg-white dark:bg-gray-900">
          <div className="w-full flex items-center justify-between p-4 md:p-8 border-b">
            <Button
              variant="ghost"
              onClick={handleBack}
              className="text-lg text-cpp-text-primary hover:bg-gray-100 dark:hover:bg-gray-800"
              disabled={step === 0}
            >
              <ArrowLeft className="mr-2" /> Retour
            </Button>
            <div className="text-sm text-gray-500 dark:text-gray-400">
              Question {step + 1} / {currentQuestions.length}
            </div>
          </div>
          <div className="flex-grow flex items-center justify-center p-4">
            <AnimatePresence mode="wait">
              <motion.div
                key={step}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -30 }}
                transition={{ duration: 0.4, ease: "easeInOut" }}
                className="w-full flex flex-col items-center justify-center gap-12 text-center"
              >
                <div className="relative">
                  <h2 className="text-3xl md:text-4xl font-semibold max-w-3xl px-2 text-cpp-text-primary">
                    {currentQuestion.question}
                  </h2>
                </div>
                <InputComponent
                  value={currentAnswer}
                  onChange={handleAnswerChange}
                  colors={profileData.colors}
                  tooltip={currentQuestion.tooltip}
                  {...currentQuestion}
                />
              </motion.div>
            </AnimatePresence>
          </div>
          <div className="p-4 md:p-8 border-t">
            <Progress
              value={((step + 1) / currentQuestions.length) * 100}
              className="h-1 bg-gray-200 dark:bg-gray-700"
              indicatorClassName={profileData.colors.bg}
            />
            <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
              <Button
                onClick={proceedToNextStep}
                className={cn(
                  "w-full text-xl font-bold py-6 md:py-8 mt-6",
                  profileData.colors.bg,
                  profileData.colors.hoverBg,
                  profileData.colors.buttonText,
                )}
              >
                {step === currentQuestions.length - 1 ? "Suivant" : "Suivant"}
                <ChevronRight className="w-6 h-6 ml-2" />
              </Button>
            </motion.div>
          </div>
        </div>
      )
    }

if (stage === "final") {
      return (
        <div className="h-full flex flex-col bg-white dark:bg-gray-900 overflow-y-auto">
          <div className="w-full flex items-center justify-between p-4 md:p-8 border-b">
            <Button
              variant="ghost"
              onClick={handleBack}
              className="text-lg text-cpp-text-primary hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              <ArrowLeft className="mr-2" /> Retour
            </Button>
          </div>
          <div className="flex-grow p-4 md:p-8">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              className="w-full flex flex-col items-center"
            >
              {/* Affichage du temps libéré */}
              <TimeSavedDisplay answers={answers} colors={profileData.colors} />

{/* Aperçu du calcul masqué */}
              {/* <CalculationPreview answers={answers} timeUsage={timeUsage} colors={profileData.colors} /> */}

<SuggestionTiles />
            </motion.div>
          </div>
          <div className="p-4 md:p-8 border-t"></div>
        </div>
      )
    }

return null
  }

return (
    <TooltipProvider>
      <div
        className={cn(
          "w-full text-cpp-text-primary rounded-xl md:rounded-3xl flex flex-col transition-all duration-500 overflow-hidden",
          "bg-gray-50 dark:bg-gray-950",
          "min-h-[calc(100vh-100px)] md:min-h-[calc(100vh-40px)]",
        )}
      >
        <div className="relative w-full h-full flex-grow">
          <AnimatePresence mode="wait">{renderContent()}</AnimatePresence>
        </div>
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Montserrat, Open_Sans } from "next/font/google" // Corrected import
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import Header from "@/components/header"
import Footer from "@/components/footer"

const montserrat = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  display: "swap",
})

const openSans = Open_Sans({
  // Corrected font name
  subsets: ["latin"],
  variable: "--font-opensans",
  display: "swap",
})

export const metadata: Metadata = {
  title: "CareerPilotPro - Qualification",
  description: "Découvrez la solution CareerPilotPro adaptée à vos besoins.",
  generator: "v0.dev",
  icons: {
    icon: "/favicon.png",
    shortcut: "/favicon.png",
    apple: "/favicon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="fr" suppressHydrationWarning>
      <head>
        <link rel="icon" href="/favicon.png" type="image/png" />
        <link rel="shortcut icon" href="/favicon.png" type="image/png" />
        <link rel="apple-touch-icon" href="/favicon.png" />
      </head>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased flex flex-col",
          montserrat.variable,
          openSans.variable,
        )}
      >
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <Header />
          <main className="pt-20 flex-1">{children}</main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="app/client-info/actions.ts" isFixed="true" isQuickEdit="true" isMerged="true"
"use server"

import { supabase } from "@/lib/supabase"
import { revalidatePath } from "next/cache"

export interface ClientInfoData {
  user_email: string
  first_name: string
  last_name: string
  phone?: string
  linkedin_url?: string
  current_position?: string
  current_company?: string
  current_industry?: string
  years_experience?: number
  current_salary_range?: string
  target_position?: string
  target_industry?: string
  target_salary_range?: string
  career_change_timeline?: string
  key_skills?: string[]
  preferred_work_mode?: string
  preferred_company_size?: string
  geographic_preferences?: string[]
  biggest_career_challenges?: string
  previous_coaching_experience?: boolean
  additional_notes?: string
}

export async function submitClientInfo(formData: FormData) {
  try {
    // Check if Supabase is properly configured
    if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
      console.error("Supabase configuration missing")
      return {
        success: false,
        error: "Configuration de la base de données manquante.",
      }
    }

// Extract form data
    const clientData: ClientInfoData = {
      user_email: formData.get("user_email") as string,
      first_name: formData.get("first_name") as string,
      last_name: formData.get("last_name") as string,
      phone: (formData.get("phone") as string) || undefined,
      linkedin_url: (formData.get("linkedin_url") as string) || undefined,
      current_position: (formData.get("current_position") as string) || undefined,
      current_company: (formData.get("current_company") as string) || undefined,
      current_industry: (formData.get("current_industry") as string) || undefined,
      years_experience: formData.get("years_experience")
        ? Number.parseInt(formData.get("years_experience") as string)
        : undefined,
      current_salary_range: (formData.get("current_salary_range") as string) || undefined,
      target_position: (formData.get("target_position") as string) || undefined,
      target_industry: (formData.get("target_industry") as string) || undefined,
      target_salary_range: (formData.get("target_salary_range") as string) || undefined,
      career_change_timeline: (formData.get("career_change_timeline") as string) || undefined,
      key_skills: formData.get("key_skills")
        ? (formData.get("key_skills") as string).split(",").map((s) => s.trim())
        : undefined,
      preferred_work_mode: (formData.get("preferred_work_mode") as string) || undefined,
      preferred_company_size: (formData.get("preferred_company_size") as string) || undefined,
      geographic_preferences: formData.get("geographic_preferences")
        ? (formData.get("geographic_preferences") as string).split(",").map((s) => s.trim())
        : undefined,
      biggest_career_challenges: (formData.get("biggest_career_challenges") as string) || undefined,
      previous_coaching_experience: formData.get("previous_coaching_experience") === "on",
      additional_notes: (formData.get("additional_notes") as string) || undefined,
    }

// Validate required fields
    if (!clientData.user_email || !clientData.first_name || !clientData.last_name) {
      return {
        success: false,
        error: "Les champs email, prénom et nom sont obligatoires.",
      }
    }

// Insert into Supabase with timeout
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error("Database timeout")), 10000)
    })

const insertPromise = supabase.from("client_information").insert([clientData]).select()

const { data, error } = (await Promise.race([insertPromise, timeoutPromise])) as any

if (error) {
      console.error("Supabase error:", error)
      return {
        success: false,
        error: "Erreur lors de la sauvegarde des informations. Veuillez réessayer.",
      }
    }

revalidatePath("/client-info")

return {
      success: true,
      message: "Vos informations ont été enregistrées avec succès !",
      data: data[0],
    }
  } catch (error) {
    console.error("Error submitting client info:", error)
    return {
      success: false,
      error: "Service temporairement indisponible. Veuillez réessayer plus tard.",
    }
  }
}

export async function getClientInfo(email: string) {
  try {
    // Check if Supabase is properly configured
    if (!process.env.NEXT_PUBLIC_SUPABASE_URL || !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
      console.error("Supabase configuration missing")
      return {
        success: false,
        error: "Configuration de la base de données manquante.",
        data: null,
      }
    }

// Add timeout to prevent hanging
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error("Database timeout")), 8000)
    })

const queryPromise = supabase
      .from("client_information")
      .select("*")
      .eq("user_email", email)
      .order("created_at", { ascending: false })
      .limit(1)

const { data, error } = (await Promise.race([queryPromise, timeoutPromise])) as any

if (error) {
      console.error("Supabase error:", error)
      return {
        success: false,
        error: "Erreur lors de la récupération des données.",
        data: null,
      }
    }

return {
      success: true,
      data: data[0] || null,
    }
  } catch (error) {
    console.error("Error getting client info:", error)
    return {
      success: false,
      error: "Service temporairement indisponible.",
      data: null,
    }
  }
}
[V0_FILE]typescriptreact:file="app/client-info/ClientInfoPageClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Suspense } from "react"
import ClientInfoForm from "@/components/client-info-form"
import { getClientInfo } from "./actions"
import { Card, CardContent } from "@/components/ui/card"
import { Loader2, AlertTriangle } from "lucide-react"

// Pour cet exemple, nous utilisons un email fictif
// Dans un vrai projet, vous récupéreriez l'email de l'utilisateur connecté
const DEMO_USER_EMAIL = "client@example.com"

async function ClientInfoContent() {
  try {
    const result = await getClientInfo(DEMO_USER_EMAIL)

if (!result.success) {
      return (
        <div className="max-w-4xl mx-auto p-6">
          <Card className="border-amber-200 bg-amber-50">
            <CardContent className="p-8 text-center">
              <AlertTriangle className="h-12 w-12 text-amber-500 mx-auto mb-4" />
              <h2 className="text-xl font-semibold text-amber-800 mb-2">Service temporairement indisponible</h2>
              <p className="text-amber-700 mb-4">
                Nous rencontrons actuellement des difficultés techniques. Veuillez réessayer dans quelques minutes.
              </p>
              <button
                onClick={() => window.location.reload()}
                className="bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700 transition-colors"
              >
                Réessayer
              </button>
            </CardContent>
          </Card>
        </div>
      )
    }

return <ClientInfoForm userEmail={DEMO_USER_EMAIL} existingData={result.data} />
  } catch (error) {
    console.error("Error loading client info:", error)
    return (
      <div className="max-w-4xl mx-auto p-6">
        <Card className="border-red-200 bg-red-50">
          <CardContent className="p-8 text-center">
            <AlertTriangle className="h-12 w-12 text-red-500 mx-auto mb-4" />
            <h2 className="text-xl font-semibold text-red-800 mb-2">Erreur de chargement</h2>
            <p className="text-red-700 mb-4">Une erreur inattendue s'est produite lors du chargement de vos données.</p>
            <button
              onClick={() => window.location.reload()}
              className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors"
            >
              Recharger la page
            </button>
          </CardContent>
        </Card>
      </div>
    )
  }
}

function LoadingFallback() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <Card className="border-blue-200 bg-blue-50">
        <CardContent className="p-8 text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-blue-500" />
          <p className="text-blue-700">Chargement de votre profil...</p>
        </CardContent>
      </Card>
    </div>
  )
}

export default function ClientInfoPageClient() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <Suspense fallback={<LoadingFallback />}>
        <ClientInfoContent />
      </Suspense>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/client-info/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import ClientInfoPageClient from "./ClientInfoPageClient"

export default function ClientInfoPage() {
  return <ClientInfoPageClient />
}

export const metadata = {
  title: "Profil Client - CareerPilot Pro",
  description: "Complétez votre profil pour personnaliser votre accompagnement carrière",
}
[V0_FILE]typescriptreact:file="app/tester-careerpilot-pro/TesterCareerPilotProClient.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { RefreshCw } from "lucide-react"

export default function TesterCareerPilotProClient() {
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)

const loadFilloutScript = () => {
    setIsLoading(true)
    setHasError(false)

// Remove existing script if any
    const existingScript = document.querySelector('script[src="https://server.fillout.com/embed/v1/"]')
    if (existingScript) {
      existingScript.remove()
    }

// Remove existing fillout container
    const existingContainer = document.querySelector('[data-fillout-id="hSYQwQGbYUus"]')
    if (existingContainer) {
      existingContainer.innerHTML = ""
    }

// Create and load new script
    const script = document.createElement("script")
    script.src = "https://server.fillout.com/embed/v1/"
    script.async = true

script.onload = () => {
      setTimeout(() => {
        setIsLoading(false)
      }, 1000)
    }

script.onerror = () => {
      setHasError(true)
      setIsLoading(false)
    }

document.body.appendChild(script)

// Safety timeout
    setTimeout(() => {
      if (isLoading) {
        setIsLoading(false)
      }
    }, 5000)
  }

useEffect(() => {
    loadFilloutScript()
  }, [])

const handleRetry = () => {
    loadFilloutScript()
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="text-center">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">Testez CareerPilot Pro</h1>
          </div>
        </div>
      </div>

{/* Main Content */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
          {/* Loading Overlay */}
          {isLoading && (
            <div className="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center z-10">
              <div className="text-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
                <p className="text-gray-600">Chargement du formulaire...</p>
              </div>
            </div>
          )}

{/* Error State */}
          {hasError && (
            <div className="p-8 text-center">
              <div className="text-red-500 mb-4">
                <svg className="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                  />
                </svg>
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">Erreur de chargement</h3>
              <p className="text-gray-600 mb-4">
                Le formulaire n'a pas pu être chargé. Veuillez vérifier votre connexion internet et réessayer.
              </p>
              <button
                onClick={handleRetry}
                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
              >
                <RefreshCw className="h-4 w-4 mr-2" />
                Réessayer
              </button>
            </div>
          )}

{/* Fillout Form Container */}
          <div className="relative">
            <div
              style={{ width: "100%", height: "500px" }}
              data-fillout-id="hSYQwQGbYUus"
              data-fillout-embed-type="standard"
              data-fillout-inherit-parameters
              data-fillout-dynamic-resize
            ></div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/demo/cpp-website-simon-l-v2.gif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cpp-website-simon-l-v2.gif-Mlr4UcfsRirmzKZ1uXXYr4JP0RWmno.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-opportunity-sectors.tsx" isEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { TrendingUp, Target, Briefcase } from "lucide-react"

export default function SlideOpportunitySectors() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-background-primary via-primary-50 to-secondary-50 dark:from-background-primary dark:via-primary-950 dark:to-secondary-950 p-8 md:p-12 flex flex-col justify-center">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="text-center mb-8"
      >
        <div className="inline-flex items-center gap-2 bg-secondary-100 dark:bg-secondary-900 text-secondary-700 dark:text-secondary-300 px-4 py-2 rounded-full text-sm font-medium mb-4">
          <Target size={16} />
          Analyse Sectorielle
        </div>
        <h2 className="text-3xl md:text-4xl font-bold font-montserrat text-text-primary dark:text-text-inverse mb-4">
          Secteurs à Fort Potentiel
        </h2>
        <p className="text-lg text-text-secondary dark:text-accent-graphite-300 max-w-2xl mx-auto">
          Identification des opportunités les plus prometteuses pour votre profil
        </p>
      </motion.div>

<motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"
      >
        {[
          { name: "Intelligence Artificielle", growth: "+32%", icon: TrendingUp },
          { name: "Data Analytics", growth: "+29%", icon: Briefcase },
          { name: "Automation", growth: "+25%", icon: Target },
        ].map((sector, index) => (
          <motion.div
            key={sector.name}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
            className="bg-white dark:bg-accent-graphite-800 rounded-xl p-6 shadow-lg border border-primary-200 dark:border-primary-700 hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2 bg-primary-100 dark:bg-primary-900 rounded-lg">
                <sector.icon size={20} className="text-primary-600 dark:text-primary-400" />
              </div>
              <div>
                <h3 className="font-semibold text-text-primary dark:text-text-inverse">{sector.name}</h3>
                <p className="text-sm text-primary-600 dark:text-primary-400 font-medium">Croissance {sector.growth}</p>
              </div>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-cover.tsx" isEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"

export default function SlideCover() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-background-primary via-primary-50 to-secondary-50 dark:from-background-primary dark:via-primary-950 dark:to-secondary-950 p-8 md:p-12 flex flex-col justify-center items-center text-center">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        className="w-full max-w-4xl"
      >
        <h2 className="text-4xl md:text-6xl font-bold font-montserrat text-text-primary dark:text-text-inverse mb-8">
          Votre Carrière,
          <br />
          <span className="bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
            Pilotée par la Data
          </span>
        </h2>
      </motion.div>

<div className="w-full max-w-4xl rounded-2xl overflow-hidden shadow-2xl border-2 border-primary-200 dark:border-primary-700 bg-white dark:bg-accent-graphite-900">
        <video src="/demo/cpp-website-simon-l-v2.mp4" autoPlay loop muted playsInline className="w-full h-auto">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/demo/cpp-website-simon-l-v2.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cpp-website-simon-l-v2.gif-Mlr4UcfsRirmzKZ1uXXYr4JP0RWmno.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/video-demo-section.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export default function VideoDemoSection() {
  // This component is now empty and will render nothing.
  return null
}
[V0_FILE]plaintext:file="public/demo/simon.mp4" url="https://blob.v0.dev/t/simon.mp4" isMerged="true"
[V0_FILE]plaintext:file="public/demo/simon.mov" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/simon-kvCRzk5dbdeSs5NdD18cNqL1wkPTad.mov" isMerged="true"
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Quote, Star } from "lucide-react"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel"

const TestimonialsSection = () => {
  const [api, setApi] = useState<CarouselApi>()
  const [current, setCurrent] = useState(0) // Will be 1-indexed for display
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)

const testimonialsData = [
    {
      text: "CareerPilot Pro a révolutionné notre approche de l'outplacement. Les insights data-driven nous permettent d'optimiser chaque parcours de reconversion.",
      name: "Marie-Claire Dubois",
      title: "Directrice Générale",
      company: "Transitions RH",
      rating: 5.0,
    },
    {
      text: "Grâce à cette solution, nous avons réduit de 40% le temps de repositionnement de nos cadres dirigeants. Un ROI exceptionnel.",
      name: "Philippe Moreau",
      title: "Vice-Président Ressources Humaines",
      company: "Groupe Industriel Français",
      rating: 4.9,
    },
    {
      text: "L'intelligence artificielle de CareerPilot Pro nous donne une longueur d'avance sur la concurrence. Nos clients retrouvent confiance plus rapidement.",
      name: "Isabelle Lefebvre",
      title: "Directrice Générale Déléguée",
      company: "Cabinet de Conseil RH",
      rating: 5.0,
    },
  ]

useEffect(() => {
    if (!api) {
      return
    }

// Function to update current slide number (1-indexed)
    const updateCurrentSlide = () => {
      setCurrent(api.selectedScrollSnap() + 1)
    }

// Set initial slide number
    updateCurrentSlide()

// Subscribe to 'select' event
    api.on("select", updateCurrentSlide)

// Autoplay logic
    let intervalId: NodeJS.Timeout | undefined
    if (isAutoPlaying) {
      intervalId = setInterval(() => {
        if (api.canScrollNext()) {
          api.scrollNext()
        } else {
          api.scrollTo(0) // Loop back to the beginning
        }
      }, 5000) // 5 secondes par slide
    }

// Cleanup function
    return () => {
      if (intervalId) {
        clearInterval(intervalId)
      }
      api.off("select", updateCurrentSlide) // Unsubscribe from 'select' event
    }
  }, [api, isAutoPlaying]) // Dependencies for the effect

const renderStars = (rating: number) => {
    const stars = []
    const fullStars = Math.floor(rating)
    const hasHalfStar = rating % 1 !== 0

for (let i = 0; i < fullStars; i++) {
      stars.push(
        <Star key={`full-${i}`} className="w-5 h-5 text-gold-sienna-500 dark:text-gold-sienna-400 fill-current" />,
      )
    }

if (hasHalfStar) {
      stars.push(
        <div key="half" className="relative">
          <Star className="w-5 h-5 text-accent-graphite-300 dark:text-accent-graphite-600" />
          <div className="absolute inset-0 overflow-hidden w-1/2">
            <Star className="w-5 h-5 text-gold-sienna-500 dark:text-gold-sienna-400 fill-current" />
          </div>
        </div>,
      )
    }
    const emptyStarsCount = 5 - (fullStars + (hasHalfStar ? 1 : 0))
    for (let i = 0; i < emptyStarsCount; i++) {
      stars.push(<Star key={`empty-${i}`} className="w-5 h-5 text-accent-graphite-300 dark:text-accent-graphite-600" />)
    }

return stars
  }

const clientLogos = [
    { src: "/placeholder.svg?width=120&height=60", alt: "TechCorp Logo" },
    { src: "/placeholder.svg?width=120&height=60", alt: "InnovateSolutions Logo" },
    { src: "/placeholder.svg?width=120&height=60", alt: "GlobalEnterprises Logo" },
    { src: "/placeholder.svg?width=120&height=60", alt: "FutureWorks Logo" },
    { src: "/placeholder.svg?width=120&height=60", alt: "SynergyGroup Logo" },
  ]

return (
    <section className="relative py-20 overflow-hidden bg-gradient-to-br from-white via-gray-50 to-accent-lavender-50 dark:from-gray-900 dark:via-gray-800 dark:to-accent-lavender-900">
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-gold-sienna-200 to-tilleul-dense-200 rounded-full filter blur-3xl"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-r from-accent-lavender-200 to-gold-sienna-200 rounded-full filter blur-3xl"></div>
      </div>

<div className="container mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <motion.div
            initial={{ scale: 0 }}
            whileInView={{ scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="inline-flex items-center justify-center w-16 h-16 bg-gradient-primary rounded-full mb-6 shadow-lg"
          >
            <Quote className="w-8 h-8 text-text-inverse" />
          </motion.div>
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-gradient-primary">Ce que Nos Utilisateurs Disent</h2>
          <p className="text-lg md:text-xl text-text-secondary dark:text-accent-graphite-300 max-w-3xl mx-auto leading-relaxed">
            Découvrez comment CareerPilot Pro transforme l'accompagnement professionnel.
          </p>
        </motion.div>

<div
          className="relative max-w-2xl mx-auto"
          onMouseEnter={() => setIsAutoPlaying(false)}
          onMouseLeave={() => setIsAutoPlaying(true)}
        >
          <Carousel setApi={setApi} className="w-full">
            <CarouselContent>
              {testimonialsData.map((testimonial, index) => (
                <CarouselItem key={index}>
                  <motion.div className="p-1" whileHover={{ y: -5, scale: 1.02 }} transition={{ duration: 0.3 }}>
                    <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 md:p-8 min-h-[320px] flex flex-col justify-between shadow-lg hover:shadow-xl border border-gray-200 dark:border-gray-700 hover:border-gold-sienna-300 dark:hover:border-gold-sienna-600 transition-all duration-300">
                      <div>
                        <Quote className="w-10 h-10 text-gold-sienna-500 dark:text-gold-sienna-400 opacity-60 mb-3 transform -scale-x-100" />
                        <p className="text-lg text-text-secondary dark:text-accent-graphite-200 italic leading-relaxed mb-6">
                          {testimonial.text}
                        </p>
                      </div>

<div className="mt-auto">
                        <div className="flex items-center mb-4">
                          {renderStars(testimonial.rating)}
                          <span className="text-sm font-medium text-accent-graphite-700 dark:text-accent-graphite-400 ml-2">
                            {testimonial.rating.toFixed(1)}
                          </span>
                        </div>
                        <div className="flex items-center">
                          <div className="w-12 h-12 bg-gradient-to-br from-gold-sienna-500 via-tilleul-dense-500 to-gold-sienna-600 rounded-full flex items-center justify-center mr-4 shadow-md">
                            <span className="text-text-inverse font-bold text-lg">
                              {testimonial.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </span>
                          </div>
                          <div>
                            <p className="font-bold text-text-primary dark:text-text-inverse text-base">
                              {testimonial.name}
                            </p>
                            <p className="text-gold-sienna-600 dark:text-gold-sienna-400 font-semibold">
                              {testimonial.title}
                            </p>
                            <p className="text-accent-graphite-700 dark:text-accent-graphite-300 text-xs">
                              {testimonial.company}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="absolute left-[-20px] sm:left-[-50px] top-1/2 -translate-y-1/2 hidden md:inline-flex bg-card/80 dark:bg-accent-graphite-800/80 hover:bg-card dark:hover:bg-accent-graphite-700 border-gold-sienna-300 dark:border-gold-sienna-600 text-text-secondary dark:text-accent-graphite-300 hover:text-gold-sienna-600 dark:hover:text-gold-sienna-400" />
            <CarouselNext className="absolute right-[-20px] sm:right-[-50px] top-1/2 -translate-y-1/2 hidden md:inline-flex bg-card/80 dark:bg-accent-graphite-800/80 hover:bg-card dark:hover:bg-accent-graphite-700 border-gold-sienna-300 dark:border-gold-sienna-600 text-text-secondary dark:text-accent-graphite-300 hover:text-gold-sienna-600 dark:hover:text-gold-sienna-400" />
          </Carousel>

<div className="flex justify-center space-x-2 mt-8">
            {testimonialsData.map((_, index) => (
              <button
                key={index}
                onClick={() => api?.scrollTo(index)}
                className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                  index === (current - 1) // current is 1-indexed, index is 0-indexed
                    ? "bg-gradient-primary scale-125"
                    : "bg-accent-graphite-300 dark:bg-accent-graphite-600 hover:bg-gold-sienna-300 dark:hover:bg-gold-sienna-600"
                }`}
                aria-label={`Aller au témoignage ${index + 1}`}
              />
            ))}
          </div>
        </div>

<motion.div
          className="mt-20 text-center hidden"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.3 }}
        >
          <p className="text-xl text-text-secondary dark:text-accent-graphite-300 mb-8 font-semibold">
            +200 professionnels nous font confiance
          </p>
          <div className="flex flex-wrap justify-center items-center gap-x-8 gap-y-6 md:gap-x-12">
            {clientLogos.map((logo, i) => (
              <motion.img
                key={i}
                src={logo.src}
                alt={logo.alt}
                className="h-10 md:h-12 object-contain opacity-70 hover:opacity-100 dark:opacity-60 dark:hover:opacity-90 transition-opacity duration-300"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 0.6, y: 0 }}
                viewport={{ once: true, amount: 0.5 }}
                transition={{ delay: i * 0.1, duration: 0.5 }}
              />
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  )
}

export default TestimonialsSection
[V0_FILE]typescriptreact:file="components/example-video-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useRef } from "react"

export default function ExampleVideoSection() {
  const sectionRef = useRef(null)

return (
    <section
      ref={sectionRef}
      className="py-20 md:py-32 relative overflow-hidden bg-gradient-to-br from-primary-50 via-accent-lavender-50 to-secondary-50"
    >
      {/* Subtle background elements */}
      <motion.div
        initial={{ opacity: 0, scale: 0.5 }}
        animate={{ opacity: 0.03, scale: 1 }}
        transition={{ duration: 2, delay: 0.2 }}
        className="absolute top-1/4 -left-32 w-96 h-96 bg-gradient-primary rounded-full blur-3xl pointer-events-none"
      />
      <motion.div
        initial={{ opacity: 0, scale: 0.5 }}
        animate={{ opacity: 0.02, scale: 1 }}
        transition={{ duration: 2.5, delay: 0.5 }}
        className="absolute bottom-1/4 -right-32 w-80 h-80 bg-gradient-secondary rounded-full blur-3xl pointer-events-none"
      />

<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: "easeOut" }}
          className="text-center mb-16 md:mb-20"
        >
          <h2 className="text-3xl sm:text-4xl lg:text-6xl font-bold font-montserrat text-text-primary mb-6 leading-tight">
            Découvrez un exemple de <span className="text-primary-600">CareerPilot Pro</span>
          </h2>
        </motion.div>

{/* Video Container */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="max-w-6xl mx-auto"
        >
          <div className="bg-white/90 backdrop-blur-sm shadow-xl rounded-2xl p-4 border border-primary-200/50">
            <video
              src="/demo/simon.mov"
              autoPlay
              loop
              muted
              playsInline
              controls
              className="w-full h-auto rounded-xl shadow-lg"
              style={{ maxHeight: "600px" }}
            >
              <source src="/demo/simon.mov" type="video/quicktime" />
              <source src="/demo/simon.mp4" type="video/mp4" />
              Votre navigateur ne supporte pas la lecture vidéo.
            </video>
          </div>
        </motion.div>

{/* Debug info (remove in production) */}
        {process.env.NODE_ENV === "development" && (
          <div className="mt-8 text-center text-sm text-gray-500">
            <p>Debug: Video error: No | Loading: No</p>
          </div>
        )}
      </div>
    </section>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============ ULTRA MINIMAL DESIGN SYSTEM - INSPIRED BY EDENRED ============ */
@layer base {
  :root {
    /* Ultra Minimal Color Palette */
    --background-primary-rgb: 248, 248, 246; /* #F8F8F6 - Warm White */
    --background-secondary-rgb: 255, 255, 255; /* #FFFFFF - Pure White */
    --background-subtle-rgb: 250, 250, 248; /* #FAFAF8 - Subtle Warm */

/* Typography Colors */
    --text-primary-rgb: 139, 155, 180; /* #8B9BB4 - Muted Blue Gray */
    --text-secondary-rgb: 160, 170, 190; /* #A0AABE - Lighter Blue Gray */
    --text-accent-rgb: 196, 164, 132; /* #C4A484 - Warm Beige */
    --text-muted-rgb: 180, 185, 195; /* #B4B9C3 - Very Light Gray */

/* Accent Colors */
    --accent-primary-rgb: 196, 164, 132; /* #C4A484 - Warm Beige */
    --accent-secondary-rgb: 139, 155, 180; /* #8B9BB4 - Muted Blue */
    --accent-subtle-rgb: 220, 215, 210; /* #DCD7D2 - Very Light Beige */

/* Borders & Dividers */
    --border-light-rgb: 235, 235, 233; /* #EBEBE9 - Subtle Border */
    --border-medium-rgb: 220, 220, 218; /* #DCDCDA - Medium Border */

/* Shadcn/ui Semantic Colors (Ultra Minimal) */
    --background: var(--background-primary-rgb);
    --foreground: var(--text-primary-rgb);

--card: var(--background-secondary-rgb);
    --card-foreground: var(--text-primary-rgb);

--popover: var(--background-secondary-rgb);
    --popover-foreground: var(--text-primary-rgb);

--primary: var(--accent-primary-rgb);
    --primary-foreground: var(--background-secondary-rgb);

--secondary: var(--accent-secondary-rgb);
    --secondary-foreground: var(--background-secondary-rgb);

--muted: var(--background-subtle-rgb);
    --muted-foreground: var(--text-muted-rgb);

--accent: var(--accent-subtle-rgb);
    --accent-foreground: var(--text-primary-rgb);

--destructive: 220, 38, 38;
    --destructive-foreground: var(--background-secondary-rgb);

--border: var(--border-light-rgb);
    --input: var(--border-medium-rgb);
    --ring: var(--accent-primary-rgb);

--radius: 0.5rem;
  }

.dark {
    /* Dark mode with same minimal approach */
    --background-primary-rgb: 25, 25, 25;
    --background-secondary-rgb: 30, 30, 30;
    --background-subtle-rgb: 35, 35, 35;

--text-primary-rgb: 200, 200, 200;
    --text-secondary-rgb: 160, 160, 160;
    --text-accent-rgb: 196, 164, 132;
    --text-muted-rgb: 120, 120, 120;

--accent-primary-rgb: 196, 164, 132;
    --accent-secondary-rgb: 139, 155, 180;
    --accent-subtle-rgb: 50, 50, 50;

--border-light-rgb: 45, 45, 45;
    --border-medium-rgb: 60, 60, 60;

--background: var(--background-primary-rgb);
    --foreground: var(--text-primary-rgb);
    --card: var(--background-secondary-rgb);
    --card-foreground: var(--text-primary-rgb);
    --popover: var(--background-secondary-rgb);
    --popover-foreground: var(--text-primary-rgb);
    --primary: var(--accent-primary-rgb);
    --primary-foreground: var(--background-secondary-rgb);
    --secondary: var(--accent-secondary-rgb);
    --secondary-foreground: var(--background-secondary-rgb);
    --muted: var(--background-subtle-rgb);
    --muted-foreground: var(--text-muted-rgb);
    --accent: var(--accent-subtle-rgb);
    --accent-foreground: var(--text-primary-rgb);
    --border: var(--border-light-rgb);
    --input: var(--border-medium-rgb);
    --ring: var(--accent-primary-rgb);
  }
}

/* ============ BASE STYLES ============ */
@layer base {
  * {
    @apply border-border;
  }

body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
  }

html {
    scroll-behavior: smooth;
  }

/* Ultra Clean Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

p {
    line-height: 1.6;
    font-weight: 300;
  }
}

/* ============ ULTRA MINIMAL UTILITIES ============ */
@layer utilities {
  /* Clean Gradients */
  .bg-gradient-minimal {
    background: linear-gradient(135deg, rgb(var(--background-primary-rgb)) 0%, rgb(var(--background-subtle-rgb)) 100%);
  }

.bg-gradient-accent {
    background: linear-gradient(135deg, rgb(var(--accent-primary-rgb)) 0%, rgb(var(--accent-secondary-rgb)) 100%);
  }

/* Minimal Shadows */
  .shadow-minimal {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
  }

.shadow-subtle {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
  }

.shadow-clean {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04), 0 3px 10px rgba(0, 0, 0, 0.02);
  }

/* Ultra Clean Hover Effects */
  .hover-minimal {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

.hover-minimal:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  }

/* Clean Borders */
  .border-minimal {
    border: 1px solid rgb(var(--border-light-rgb));
  }

.border-subtle {
    border: 1px solid rgb(var(--border-medium-rgb));
  }

/* Typography Utilities */
  .text-minimal-primary {
    color: rgb(var(--text-primary-rgb));
  }

.text-minimal-secondary {
    color: rgb(var(--text-secondary-rgb));
  }

.text-minimal-accent {
    color: rgb(var(--accent-primary-rgb));
  }

.text-minimal-muted {
    color: rgb(var(--text-muted-rgb));
  }

/* Background Utilities */
  .bg-minimal-primary {
    background-color: rgb(var(--background-primary-rgb));
  }

.bg-minimal-secondary {
    background-color: rgb(var(--background-secondary-rgb));
  }

.bg-minimal-subtle {
    background-color: rgb(var(--background-subtle-rgb));
  }

.bg-minimal-accent {
    background-color: rgb(var(--accent-primary-rgb));
  }

/* Clean Focus States */
  .focus-minimal {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--accent-primary-rgb) / 0.2);
    transition: box-shadow 0.2s ease-in-out;
  }

/* Ultra Minimal Buttons */
  .btn-minimal {
    @apply px-6 py-3 rounded-lg font-light text-sm tracking-wide transition-all duration-200;
    @apply bg-minimal-accent text-white hover:shadow-subtle;
  }

.btn-minimal-outline {
    @apply px-6 py-3 rounded-lg font-light text-sm tracking-wide transition-all duration-200;
    @apply border-minimal text-minimal-primary hover:bg-minimal-subtle;
  }

/* Spacing Utilities for Ultra Clean Layout */
  .section-padding {
    @apply py-24 lg:py-32;
  }

.container-minimal {
    @apply max-w-6xl mx-auto px-6 lg:px-8;
  }

/* Clean Cards */
  .card-minimal {
    @apply bg-minimal-secondary border-minimal rounded-xl p-8 shadow-minimal hover:shadow-subtle transition-all duration-200;
  }
}

/* ============ RESPONSIVE DESIGN ============ */
@media (max-width: 640px) {
  .container-minimal {
    @apply px-4;
  }

h1 {
    @apply text-2xl;
  }

h2 {
    @apply text-xl;
  }

.section-padding {
    @apply py-16;
  }
}

/* ============ MINIMAL ANIMATIONS ============ */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out;
}

/* Remove all heavy animations and effects for ultra clean look */
.animate-pulse-glow,
.animate-float,
.animate-shimmer {
  animation: none;
}
[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, Send, User, Mail, MessageSquare, Building } from "lucide-react"

interface ContactFormProps {
  isOpen: boolean
  onClose: () => void
}

export default function ContactForm({ isOpen, onClose }: ContactFormProps) {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    message: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1500))

setIsSubmitting(false)
    setIsSubmitted(true)

// Reset form after 2 seconds
    setTimeout(() => {
      setIsSubmitted(false)
      setFormData({ name: "", email: "", company: "", message: "" })
      onClose()
    }, 2000)
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[200] flex items-center justify-center p-4"
          style={{ backgroundColor: "rgba(0, 0, 0, 0.4)" }}
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className="bg-white w-full max-w-md rounded-xl shadow-clean border-minimal overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-6 border-b border-minimal">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-light text-minimal-primary">Contactez-nous</h2>
                <button
                  onClick={onClose}
                  className="text-minimal-secondary hover:text-minimal-primary transition-colors duration-200"
                >
                  <X size={20} />
                </button>
              </div>
            </div>

<div className="p-6">
              {isSubmitted ? (
                <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center py-8">
                  <div className="w-16 h-16 bg-minimal-accent rounded-full flex items-center justify-center mx-auto mb-4">
                    <Send className="w-8 h-8 text-white" />
                  </div>
                  <h3 className="text-lg font-light text-minimal-primary mb-2">Message envoyé !</h3>
                  <p className="text-minimal-secondary text-sm">Nous vous recontacterons très bientôt.</p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label htmlFor="name" className="block text-sm font-light text-minimal-primary mb-2">
                      Nom complet
                    </label>
                    <div className="relative">
                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-minimal-muted" />
                      <input
                        type="text"
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        required
                        className="w-full pl-10 pr-4 py-3 border-minimal rounded-lg bg-minimal-subtle text-minimal-primary placeholder-minimal-muted focus:outline-none focus:ring-2 focus:ring-minimal-accent/20 focus:border-minimal-accent transition-all duration-200"
                        placeholder="Votre nom"
                      />
                    </div>
                  </div>

<div>
                    <label htmlFor="email" className="block text-sm font-light text-minimal-primary mb-2">
                      Email
                    </label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-minimal-muted" />
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        className="w-full pl-10 pr-4 py-3 border-minimal rounded-lg bg-minimal-subtle text-minimal-primary placeholder-minimal-muted focus:outline-none focus:ring-2 focus:ring-minimal-accent/20 focus:border-minimal-accent transition-all duration-200"
                        placeholder="votre@email.com"
                      />
                    </div>
                  </div>

<div>
                    <label htmlFor="company" className="block text-sm font-light text-minimal-primary mb-2">
                      Entreprise
                    </label>
                    <div className="relative">
                      <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-minimal-muted" />
                      <input
                        type="text"
                        id="company"
                        name="company"
                        value={formData.company}
                        onChange={handleChange}
                        className="w-full pl-10 pr-4 py-3 border-minimal rounded-lg bg-minimal-subtle text-minimal-primary placeholder-minimal-muted focus:outline-none focus:ring-2 focus:ring-minimal-accent/20 focus:border-minimal-accent transition-all duration-200"
                        placeholder="Votre entreprise"
                      />
                    </div>
                  </div>

<div>
                    <label htmlFor="message" className="block text-sm font-light text-minimal-primary mb-2">
                      Message
                    </label>
                    <div className="relative">
                      <MessageSquare className="absolute left-3 top-3 w-4 h-4 text-minimal-muted" />
                      <textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        required
                        rows={4}
                        className="w-full pl-10 pr-4 py-3 border-minimal rounded-lg bg-minimal-subtle text-minimal-primary placeholder-minimal-muted focus:outline-none focus:ring-2 focus:ring-minimal-accent/20 focus:border-minimal-accent transition-all duration-200 resize-none"
                        placeholder="Décrivez votre projet ou vos besoins..."
                      />
                    </div>
                  </div>

<button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full btn-minimal flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isSubmitting ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                        <span>Envoi en cours...</span>
                      </>
                    ) : (
                      <>
                        <Send className="w-4 h-4" />
                        <span>Envoyer le message</span>
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="components/pain-points-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView, useReducedMotion } from "framer-motion"
import { Clock, RefreshCcw, UserCheck, Zap, Brain, ArrowRight, CheckCircle2, AlertTriangle } from "lucide-react"
import type { ElementType } from "react"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import Autoplay from "embla-carousel-autoplay"

interface Transformation {
  id: number
  title: string
  before: string
  after: string
  description: string
  icon: ElementType
  color: string
  gradient: string
}

const transformationsData: Transformation[] = [
  {
    id: 1,
    title: "Temps & Efficacité",
    before: "Des jours de recherches, recoupements et vérifications manuelles: chronophage",
    after: "quelques minutes pour des données à jour, enrichies et vérifiées",
    description:
      "Concentrez-vous sur l'humain, pas la data. Notre IA libère votre temps précieux pour ce qui compte vraiment : l'accompagnement stratégique de vos clients.",
    icon: Clock,
    color: "gray",
    gradient: "bg-gray-50",
  },
  {
    id: 2,
    title: "Qualité des Données",
    before: "Sources de Données dispersées et souvent dépassées",
    after: "Accès Bases de données temps réel et spécialisées",
    description:
      "Des insights toujours à jour pour des recommandations d'une pertinence inégalée. Fini les informations périmées qui nuisent à vos conseils.",
    icon: RefreshCcw,
    color: "gray",
    gradient: "bg-gray-50",
  },
  {
    id: 3,
    title: "Personnalisation",
    before: "Résultats de Recherches et Recommandations partielles et génériques",
    after: "Résultats 100% personnalisés",
    description:
      "Chaque client est unique. Nos solutions sur-mesure le prouvent à chaque analyse, avec des recommandations qui collent parfaitement au profil.",
    icon: UserCheck,
    color: "gray",
    gradient: "bg-gray-50",
  },
  {
    id: 4,
    title: "Délais de Placement",
    before: "Perte de temps à chercher des informations qui ralentissent le processus de repositionnement",
    after: "Placement accéléré et ciblé (-37% de délai)",
    description:
      "Réduisez drastiquement le temps de transition. Vos clients retrouvent une opportunité plus vite grâce à un ciblage précis et intelligent.",
    icon: Zap,
    color: "gray",
    gradient: "bg-gray-50",
  },
  {
    id: 5,
    title: "Valeur Ajoutée",
    before: "Consultant = Fonction Multitâches",
    after: "Consultant = Coach Stratégique à Forte Valeur Ajoutée",
    description:
      "Soyez le véritable stratège de carrière. L'IA construit le socle de données pour amplifier l'impact de votre expertise",
    icon: Brain,
    color: "gray",
    gradient: "bg-gray-50",
  },
]

const slideVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: "easeOut",
    },
  },
}

export default function PainPointsSection() {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })
  const prefersReducedMotion = useReducedMotion()

return (
    <section
      ref={sectionRef}
      className="py-20 md:py-32 relative overflow-hidden bg-gradient-to-br from-primary-50 via-accent-lavender-50 to-secondary-50"
    >
      {/* Subtle background elements */}
      {!prefersReducedMotion && isInView && (
        <>
          <motion.div
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 0.03, scale: 1 }}
            transition={{ duration: 2, delay: 0.2 }}
            className="absolute top-1/4 -left-32 w-96 h-96 bg-gradient-primary rounded-full blur-3xl pointer-events-none"
          />
          <motion.div
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 0.02, scale: 1 }}
            transition={{ duration: 2.5, delay: 0.5 }}
            className="absolute bottom-1/4 -right-32 w-80 h-80 bg-gradient-secondary rounded-full blur-3xl pointer-events-none"
          />
        </>
      )}

<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, ease: "easeOut" }}
          className="text-center mb-16 md:mb-20"
        >
          <h2 className="text-3xl sm:text-4xl lg:text-6xl font-bold font-montserrat text-text-primary mb-6 leading-tight">
            Transformez vos contraintes en <span className="text-secondary-600">opportunités</span>
          </h2>

<p className="text-lg md:text-xl text-text-secondary max-w-4xl mx-auto leading-relaxed">
            Transformez vos contraintes en opportunités avec une approche révolutionnaire de l'outplacement.
          </p>
        </motion.div>

{/* Carousel */}
        <Carousel
          opts={{
            align: "start",
            loop: true,
          }}
          plugins={[
            Autoplay({
              delay: 8000,
              stopOnInteraction: true,
            }),
          ]}
          className="w-full"
        >
          <CarouselContent className="-ml-4">
            {transformationsData.map((item, index) => (
              <CarouselItem key={item.id} className="pl-4 basis-full">
                <motion.div
                  custom={index}
                  variants={slideVariants}
                  initial="hidden"
                  animate={isInView ? "visible" : "hidden"}
                  className="h-full"
                >
                  <div className="bg-white/90 backdrop-blur-sm shadow-xl hover:shadow-2xl p-8 md:p-10 lg:p-12 flex flex-col text-left h-full min-h-[600px] md:min-h-[550px] transition-all duration-300 border border-primary-200/50 hover:border-primary-400/70 rounded-2xl">
                    {/* Header with icon and title */}
                    <div className="flex items-center mb-8">
                      <div className="p-4 rounded-xl mr-6 bg-gray-50 border border-gray-200 shadow-sm">
                        <item.icon className="w-12 h-12 md:w-14 md:h-14 text-gray-700" />
                      </div>

<h3 className="text-2xl md:text-3xl lg:text-4xl font-bold font-montserrat text-text-primary">
                        {item.title}
                      </h3>
                    </div>

{/* Description */}
                    <p className="text-text-secondary font-opensans text-lg md:text-xl mb-10 flex-grow leading-relaxed">
                      {item.description}
                    </p>

{/* Before/After comparison */}
                    <div className="mt-auto space-y-8 md:space-y-0 md:grid md:grid-cols-2 md:gap-8 lg:gap-12 items-center">
                      {/* Before Section */}
                      <div className="p-6 rounded-xl border-l-4 border-accent-alert-500 shadow-lg bg-accent-alert-50">
                        <div className="flex items-center mb-3">
                          <AlertTriangle className="w-6 h-6 text-accent-alert-500 mr-3" />
                          <h4 className="text-sm font-bold text-accent-alert-700 uppercase tracking-wider">Avant</h4>
                        </div>
                        <p className="text-text-primary font-medium text-lg md:text-xl">{item.before}</p>
                      </div>

{/* Arrow for mobile */}
                      <div className="md:hidden flex justify-center my-6">
                        <ArrowRight className="w-10 h-10 text-primary-600 opacity-70" />
                      </div>

{/* After Section */}
                      <div className="p-6 rounded-xl border-l-4 border-accent-green-600 shadow-lg bg-accent-green-50">
                        <div className="flex items-center mb-3">
                          <CheckCircle2 className="w-6 h-6 text-accent-green-600 mr-3" />
                          <h4 className="text-sm font-bold text-accent-green-700 uppercase tracking-wider">Après</h4>
                        </div>
                        <p className="text-2xl md:text-3xl lg:text-4xl font-bold text-accent-green-700 leading-tight">
                          {item.after}
                        </p>
                      </div>
                    </div>
                  </div>
                </motion.div>
              </CarouselItem>
            ))}
          </CarouselContent>

{/* ROI Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.5, ease: "easeOut" }}
          className="mt-20 text-center"
        ></motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="lib/blog-api.ts" isEdit="true" isMerged="true"
import { supabase } from "./supabase"
import type { BlogPost, BlogCategory, BlogAuthor } from "./supabase"

// API pour récupérer les articles
export async function getBlogPosts(options?: {
  limit?: number
  category?: string
  featured?: boolean
  status?: string
}) {
  try {
    let query = supabase
      .from("blog_posts")
      .select(`
        *,
        author:blog_authors(*),
        category:blog_categories(*),
        tags:blog_post_tags(blog_tags(*))
      `)
      .order("published_at", { ascending: false })

if (options?.status) {
      query = query.eq("status", options.status)
    } else {
      query = query.eq("status", "published")
    }

if (options?.category) {
      // Filter by category slug through the joined table
      query = query.eq("category.slug", options.category)
    }

if (options?.featured) {
      query = query.eq("featured", true)
    }

if (options?.limit) {
      query = query.limit(options.limit)
    }

const { data, error } = await query

if (error) {
      console.error("Error fetching blog posts:", error)
      // Return empty array instead of throwing to prevent page crash
      return []
    }

return (data as BlogPost[]) || []
  } catch (error) {
    console.error("Unexpected error in getBlogPosts:", error)
    return []
  }
}

// API pour récupérer un article par slug
export async function getBlogPostBySlug(slug: string) {
  try {
    const { data, error } = await supabase
      .from("blog_posts")
      .select(`
        *,
        author:blog_authors(*),
        category:blog_categories(*),
        tags:blog_post_tags(blog_tags(*))
      `)
      .eq("slug", slug)
      .eq("status", "published")
      .single()

if (error) {
      console.error("Error fetching blog post by slug:", error)
      throw error
    }
    return data as BlogPost
  } catch (error) {
    console.error("Unexpected error in getBlogPostBySlug:", error)
    throw error
  }
}

// API pour récupérer les catégories
export async function getBlogCategories() {
  try {
    const { data, error } = await supabase.from("blog_categories").select("*").order("name")

if (error) {
      console.error("Error fetching blog categories:", error)
      return []
    }
    return (data as BlogCategory[]) || []
  } catch (error) {
    console.error("Unexpected error in getBlogCategories:", error)
    return []
  }
}

// API pour créer un article
export async function createBlogPost(post: Partial<BlogPost>) {
  try {
    const { data, error } = await supabase.from("blog_posts").insert([post]).select().single()

if (error) {
      console.error("Error creating blog post:", error)
      throw error
    }
    return data as BlogPost
  } catch (error) {
    console.error("Unexpected error in createBlogPost:", error)
    throw error
  }
}

// API pour mettre à jour un article
export async function updateBlogPost(id: string, updates: Partial<BlogPost>) {
  try {
    const { data, error } = await supabase
      .from("blog_posts")
      .update({ ...updates, updated_at: new Date().toISOString() })
      .eq("id", id)
      .select()
      .single()

if (error) {
      console.error("Error updating blog post:", error)
      throw error
    }
    return data as BlogPost
  } catch (error) {
    console.error("Unexpected error in updateBlogPost:", error)
    throw error
  }
}

// API pour supprimer un article
export async function deleteBlogPost(id: string) {
  try {
    const { error } = await supabase.from("blog_posts").delete().eq("id", id)

if (error) {
      console.error("Error deleting blog post:", error)
      throw error
    }
  } catch (error) {
    console.error("Unexpected error in deleteBlogPost:", error)
    throw error
  }
}

// API pour créer une catégorie
export async function createBlogCategory(category: Partial<BlogCategory>) {
  try {
    const { data, error } = await supabase.from("blog_categories").insert([category]).select().single()

if (error) {
      console.error("Error creating blog category:", error)
      throw error
    }
    return data as BlogCategory
  } catch (error) {
    console.error("Unexpected error in createBlogCategory:", error)
    throw error
  }
}

// API pour créer un auteur
export async function createBlogAuthor(author: Partial<BlogAuthor>) {
  try {
    const { data, error } = await supabase.from("blog_authors").insert([author]).select().single()

if (error) {
      console.error("Error creating blog author:", error)
      throw error
    }
    return data as BlogAuthor
  } catch (error) {
    console.error("Unexpected error in createBlogAuthor:", error)
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CalendarDays, Clock, User } from "lucide-react"
import { getBlogPosts, getBlogCategories } from "@/lib/blog-api"
import type { BlogPost, BlogCategory } from "@/lib/supabase"
import Link from "next/link"

export default function BlogPage() {
  const [posts, setPosts] = useState<BlogPost[]>([])
  const [categories, setCategories] = useState<BlogCategory[]>([])
  const [selectedCategory, setSelectedCategory] = useState<string>("")
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function loadData() {
      try {
        setError(null)
        const [postsData, categoriesData] = await Promise.all([
          getBlogPosts({ category: selectedCategory || undefined }),
          getBlogCategories(),
        ])
        setPosts(postsData)
        setCategories(categoriesData)
      } catch (error) {
        console.error("Erreur lors du chargement:", error)
        setError("Erreur lors du chargement des articles")
        // Set empty arrays to prevent further errors
        setPosts([])
        setCategories([])
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [selectedCategory])

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-800 mx-auto"></div>
            <p className="mt-4 text-gray-600">Chargement...</p>
          </div>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">
            <p className="text-red-600 mb-4">{error}</p>
            <Button onClick={() => window.location.reload()}>Réessayer</Button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-3xl md:text-4xl font-light text-gray-800 mb-4">Blog Career Pilot Pro</h1>
          <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto font-light">
            Découvrez nos insights, conseils et analyses sur l'évolution des carrières
          </p>
        </div>

{/* Filtres par catégorie */}
        <div className="flex flex-wrap gap-2 justify-center mb-8">
          <Button
            variant={selectedCategory === "" ? "default" : "outline"}
            onClick={() => setSelectedCategory("")}
            className="mb-2 bg-gray-800 hover:bg-gray-700 text-white border-gray-300"
          >
            Tous les articles
          </Button>
          {categories.map((category) => (
            <Button
              key={category.id}
              variant={selectedCategory === category.slug ? "default" : "outline"}
              onClick={() => setSelectedCategory(category.slug)}
              className="mb-2 bg-gray-800 hover:bg-gray-700 text-white border-gray-300"
            >
              {category.name}
            </Button>
          ))}
        </div>

{/* Articles en vedette */}
        {selectedCategory === "" && posts.some((post) => post.featured) && (
          <div className="mb-12">
            <h2 className="text-2xl font-light text-gray-800 mb-6">Articles en vedette</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {posts
                .filter((post) => post.featured)
                .slice(0, 3)
                .map((post) => (
                  <Card
                    key={post.id}
                    className="overflow-hidden hover:shadow-lg transition-shadow bg-white border-gray-200"
                  >
                    {post.featured_image_url && (
                      <div className="aspect-video overflow-hidden">
                        <img
                          src={post.featured_image_url || "/placeholder.svg?height=200&width=400"}
                          alt={post.title}
                          className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                    )}
                    <CardHeader>
                      <div className="flex items-center gap-2 mb-2">
                        {post.category && (
                          <Badge variant="secondary" className="bg-amber-100 text-amber-800">
                            {post.category.name}
                          </Badge>
                        )}
                      </div>
                      <CardTitle className="line-clamp-2 text-gray-800 font-normal">{post.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-gray-600 mb-4 line-clamp-3 font-light">{post.excerpt}</p>
                      <div className="flex flex-col gap-2 text-sm text-gray-500 mb-4 sm:flex-row sm:justify-between">
                        <div className="flex items-center gap-2 sm:gap-4">
                          {post.author && (
                            <div className="flex items-center gap-1">
                              <User className="w-4 h-4" />
                              {post.author.name}
                            </div>
                          )}
                          {post.reading_time && (
                            <div className="flex items-center gap-1">
                              <Clock className="w-4 h-4" />
                              {post.reading_time} min
                            </div>
                          )}
                        </div>
                        {post.published_at && (
                          <div className="flex items-center gap-1">
                            <CalendarDays className="w-4 h-4" />
                            {new Date(post.published_at).toLocaleDateString("fr-FR")}
                          </div>
                        )}
                      </div>
                      <Link href={`/blog/${post.slug}`}>
                        <Button className="w-full bg-gray-800 hover:bg-gray-700 text-white">Lire l'article</Button>
                      </Link>
                    </CardContent>
                  </Card>
                ))}
            </div>
          </div>
        )}

{/* Tous les articles */}
        <div>
          <h2 className="text-2xl font-light text-gray-800 mb-6">
            {selectedCategory
              ? `Articles - ${categories.find((c) => c.slug === selectedCategory)?.name}`
              : "Tous les articles"}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {posts.map((post) => (
              <Card
                key={post.id}
                className="overflow-hidden hover:shadow-lg transition-shadow bg-white border-gray-200"
              >
                {post.featured_image_url && (
                  <div className="aspect-video overflow-hidden">
                    <img
                      src={post.featured_image_url || "/placeholder.svg?height=200&width=400"}
                      alt={post.title}
                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                )}
                <CardHeader>
                  <div className="flex items-center gap-2 mb-2">
                    {post.category && (
                      <Badge variant="secondary" className="bg-amber-100 text-amber-800">
                        {post.category.name}
                      </Badge>
                    )}
                    {post.featured && <Badge className="bg-gray-800 text-white">En vedette</Badge>}
                  </div>
                  <CardTitle className="line-clamp-2 text-gray-800 font-normal">{post.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4 line-clamp-3 font-light">{post.excerpt}</p>
                  <div className="flex flex-col gap-2 text-sm text-gray-500 mb-4 sm:flex-row sm:justify-between">
                    <div className="flex items-center gap-2 sm:gap-4">
                      {post.author && (
                        <div className="flex items-center gap-1">
                          <User className="w-4 h-4" />
                          {post.author.name}
                        </div>
                      )}
                      {post.reading_time && (
                        <div className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {post.reading_time} min
                        </div>
                      )}
                    </div>
                    {post.published_at && (
                      <div className="flex items-center gap-1">
                        <CalendarDays className="w-4 h-4" />
                        {new Date(post.published_at).toLocaleDateString("fr-FR")}
                      </div>
                    )}
                  </div>
                  <Link href={`/blog/${post.slug}`}>
                    <Button className="w-full bg-gray-800 hover:bg-gray-700 text-white">Lire l'article</Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{posts.length === 0 && !loading && !error && (
          <div className="text-center py-12">
            <p className="text-gray-500">Aucun article trouvé pour cette catégorie.</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/playbook/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-800 mx-auto mb-4"></div>
        <p className="text-gray-600 font-light">Chargement du Playbook...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
"use client"

import { Mail } from "lucide-react"

const footerLinks = {
  company: [
    { name: "À propos", href: "/equipe" },
    { name: "Notre méthodologie", href: "/notre-methodologie" },
    { name: "Playbook", href: "/playbook" },
  ],
  legal: [
    { name: "Mentions légales", href: "/mentions-legales" },
    { name: "Politique de confidentialité", href: "/politique-confidentialite" },
    { name: "CGU", href: "/cgu" },
  ],
}

export default function Footer() {
  return (
    <>
      <footer className="bg-gray-50 pt-16 mt-auto border-t border-gray-200">
        <div className="container mx-auto px-6 mb-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            {/* Company info */}
            <div className="lg:col-span-1">
              <div className="flex items-center mb-6">
                <img src="/logo/careerpilot-pro-complete-logo.png" alt="Career Pilot Pro" className="h-8 w-auto" />
              </div>
              <p className="text-gray-600 mb-6 font-light leading-relaxed">
                {"Concentrez vous sur l'Humain,"}
                <br />
                {"nous apportons la Donnée"}
              </p>
              <div className="space-y-3">
                <div className="flex items-center text-gray-600">
                  <Mail className="w-4 h-4 mr-3 text-amber-600" />
                  <span className="text-sm">contact@careerpilotpro.com</span>
                </div>
              </div>
            </div>

{/* Company Links */}
            <div>
              <h3 className="text-gray-800 font-normal text-lg mb-6">Entreprise</h3>
              <ul className="space-y-3">
                {footerLinks.company.map((link) => (
                  <li key={link.name}>
                    <a
                      href={link.href}
                      className="text-gray-600 hover:text-gray-800 transition-colors font-light text-sm"
                    >
                      {link.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

{/* Legal */}
            <div>
              <h3 className="text-gray-800 font-normal text-lg mb-6">Légal</h3>
              <ul className="space-y-3">
                {footerLinks.legal.map((link) => (
                  <li key={link.name}>
                    <a
                      href={link.href}
                      className="text-gray-600 hover:text-gray-800 transition-colors font-light text-sm"
                    >
                      {link.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>

{/* Bottom section */}
          <div className="border-t border-gray-200 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-500 text-sm font-light mb-4 md:mb-0">
                © 2024 Career Pilot Pro. Tous droits réservés.
              </p>
              <div className="flex space-x-6">
                <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
                  <span className="sr-only">LinkedIn</span>
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fillRule="evenodd"
                      d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                      clipRule="evenodd"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/benefits-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Clock, Database, TrendingUp, DollarSign, Brain, Lightbulb } from "lucide-react"
import type { ElementType } from "react"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import Autoplay from "embla-carousel-autoplay"

interface Benefit {
  icon: ElementType
  iconBgColor: string
  iconColor: string
  title: string
  description: string
  metric: string
}

const benefitsData: Benefit[] = [
  {
    icon: Clock,
    iconBgColor: "bg-gold-sienna-100 dark:bg-gold-sienna-900/50",
    iconColor: "text-gold-sienna-600 dark:text-gold-sienna-400",
    title: "15h → 10min",
    description: "Automatisation complète de la recherche d'informations marché.",
    metric: "Avant: 15h recherche manuelle / Après: 10min d'analyse",
  },
  {
    icon: Database,
    iconBgColor: "bg-accent-lavender-100 dark:bg-accent-lavender-900/50",
    iconColor: "text-sky-600 dark:text-sky-400",
    title: "2000+ sources temps réel",
    description: "Données actualisées quotidiennement vs informations obsolètes.",
    metric: "93% de pertinence des recommandations",
  },
  {
    icon: TrendingUp,
    iconBgColor: "bg-accent-green-100 dark:bg-accent-green-900/50",
    iconColor: "text-emerald-600 dark:text-emerald-400",
    title: "-37% délai placement",
    description: "Ciblage précis des opportunités et employeurs potentiels.",
    metric: "Placement accéléré et ciblé",
  },
  {
    icon: DollarSign,
    iconBgColor: "bg-accent-alert-100 dark:bg-accent-alert-900/50",
    iconColor: "text-rose-600 dark:text-rose-400",
    title: "+280% ROI prouvé",
    description: "Retour sur investissement mesuré chez nos clients.",
    metric: "Résultats visibles dès le 1er mois",
  },
  {
    icon: Brain,
    iconBgColor: "bg-accent-lavender-100 dark:bg-accent-lavender-900/50",
    iconColor: "text-violet-600 dark:text-violet-400",
    title: "100% focus humain",
    description: "Libère le consultant pour l'accompagnement stratégique.",
    metric: "De chercheur d'infos à coach expert",
  },
  {
    icon: Lightbulb,
    iconBgColor: "bg-accent-ochre-100 dark:bg-accent-ochre-900/50",
    iconColor: "text-yellow-600 dark:text-yellow-400",
    title: "Clarté Stratégique",
    description: "Visualisez clairement votre chemin de carrière idéal.",
    metric: "Décisions éclairées, anxiété réduite",
  },
]

const slideVariants = {
  hidden: { opacity: 0, scale: 0.95 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.5,
      ease: "easeOut",
    },
  },
}

export default function BenefitsSection() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
      <section className="py-16 md:py-24 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.3 }}
            transition={{ duration: 0.6, ease: "easeOut" }}
            className="text-3xl lg:text-4xl font-light text-gray-800 mb-12 md:mb-16 text-center tracking-wide"
          >
            Les bénéfices CareerPilot Pro
          </motion.h2>

<Carousel
            opts={{
              align: "start",
              loop: true,
            }}
            plugins={[
              Autoplay({
                delay: 5000,
                stopOnInteraction: true,
              }),
            ]}
            className="w-full max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-3xl mx-auto"
          >
            <CarouselContent>
              {benefitsData.map((benefit, index) => (
                <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
                  <motion.div
                    variants={slideVariants}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, amount: 0.1 }}
                    className="h-full" // Ensure motion.div takes full height for consistent card height
                  >
                    <div className="bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 p-6 md:p-8 flex flex-col items-center text-center h-full">
                      <div className="relative mb-8 group">
                        {/* Ultra-minimal 3D container */}
                        <div className="relative w-20 h-20 mx-auto group cursor-pointer">
                          {/* Ultra-minimal 3D container */}
                          <div
                            className="relative w-full h-full rounded-2xl bg-white border border-gray-100 shadow-sm transform-gpu transition-all duration-500 ease-out group-hover:shadow-md group-hover:scale-105 group-hover:-translate-y-1"
                            style={{
                              transformStyle: "preserve-3d",
                              transform: "rotateX(5deg) rotateY(-5deg)",
                            }}
                          >
                            {/* Subtle depth layer */}
                            <div
                              className="absolute inset-0 rounded-2xl bg-gray-50 opacity-60"
                              style={{ transform: "translateZ(-4px)" }}
                            />

{/* Main icon */}
                            <div className="absolute inset-0 flex items-center justify-center transform transition-all duration-300 group-hover:scale-110">
                              <benefit.icon
                                className="w-10 h-10 text-gray-700 transform transition-all duration-300 group-hover:text-amber-600"
                                style={{
                                  transform: "translateZ(2px)",
                                  filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.1))",
                                }}
                              />
                            </div>

{/* Subtle highlight */}
                            <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/40 to-transparent pointer-events-none" />
                          </div>

{/* Minimal floating indicator */}
                          <div className="absolute -top-1 -right-1 w-2 h-2 bg-amber-400 rounded-full opacity-60 animate-pulse" />
                        </div>
                      </div>
                      <h3 className="text-2xl md:text-3xl font-light text-gray-800 mb-3 tracking-wide">
                        {benefit.title}
                      </h3>
                      <p className="text-gray-600 font-light text-base mb-5 flex-grow leading-relaxed">
                        {benefit.description}
                      </p>
                      <p className="text-sm font-normal text-amber-700 pt-4 border-t border-gray-100 w-full">
                        {benefit.metric}
                      </p>
                    </div>
                  </motion.div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="hidden md:flex text-gold-sienna-500 hover:text-accent-ochre-500 disabled:text-accent-graphite-400" />
            <CarouselNext className="hidden md:flex text-gold-sienna-500 hover:text-accent-ochre-500 disabled:text-accent-graphite-400" />
          </Carousel>
        </div>
      </section>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/notre-methodologie/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef } from "react"
import { motion, useInView } from "framer-motion"
import {
  CheckCircle,
  Lightbulb,
  Database,
  LineChart,
  ChevronDown,
  Users,
  FileSpreadsheet,
  BrainCircuit,
  Clock,
} from "lucide-react"
import Header from "../../components/header"

// Data for methodology steps
const methodologySteps = [
  {
    id: 1,
    name: "Collecte des données",
    icon: Database,
    description:
      "Notre moteur d'analyse collecte et agrège des données provenant de plus de 2000 sources différentes en temps réel pour garantir des informations à jour et pertinentes.",
    subSteps: [
      "Extraction de données marché de sources propriétaires et publiques",
      "Analyse des tendances d'embauche sectorielles",
      "Veille sur les entreprises en croissance",
      "Cartographie des compétences recherchées",
    ],
    color: "blue-slate",
    duration: "2-4 heures",
  },
  {
    id: 2,
    name: "Analyse IA multi-modèles",
    icon: BrainCircuit,
    description:
      "Nos algorithmes d'intelligence artificielle analysent les données collectées et les croisent avec le profil du candidat pour identifier les meilleures opportunités.",
    subSteps: [
      "Analyse sémantique du profil candidat",
      "Identification des compétences transférables",
      "Scoring de compatibilité avec les opportunités",
      "Génération de recommandations personnalisées",
    ],
    color: "gold-sienna",
    duration: "4-6 heures",
  },
  {
    id: 3,
    name: "Vérification par experts",
    icon: Users,
    description:
      "Nos experts sectoriels vérifient et enrichissent les recommandations générées par l'IA pour garantir leur pertinence et leur actualité.",
    subSteps: [
      "Validation des opportunités par experts métiers",
      "Enrichissement des analyses avec insights qualitatifs",
      "Ajustement des recommandations stratégiques",
      "Contrôle qualité des livrables",
    ],
    color: "tilleul-dense",
    duration: "6-8 heures",
  },
  {
    id: 4,
    name: "Production des livrables",
    icon: FileSpreadsheet,
    description:
      "Nous produisons des rapports détaillés, personnalisés et actionnables qui serviront de feuille de route pour l'accompagnement du candidat.",
    subSteps: [
      "Génération du rapport d'analyse de marché",
      "Création des fiches entreprises ciblées",
      "Production des scripts d'approche personnalisés",
      "Élaboration de la roadmap d'accompagnement",
    ],
    color: "ochre-smoky",
    duration: "4-6 heures",
  },
]

// Data for methodology outcomes
const outcomes = [
  {
    title: "Gain de temps significatif",
    description:
      "Gagnez entre 10 et 40 heures par dossier de recherche, d'organisation et de vérification de données stratégiques pour prendre les bonnes décisions de carrière.",
    icon: Clock,
    stat: "40h",
    color: "blue-slate",
  },
  {
    title: "Précision des recommandations",
    description: "Des opportunités parfaitement alignées avec le profil et les aspirations du candidat.",
    icon: CheckCircle,
    stat: "100%",
    color: "gold-sienna",
  },
  {
    title: "Accélération des placements",
    description: "Réduisez le temps nécessaire pour obtenir des entretiens et des offres concrètes.",
    icon: LineChart,
    stat: "-37%",
    color: "tilleul-dense",
  },
  {
    title: "Satisfaction client renforcée",
    description: "Améliorez l'expérience et les résultats pour vos clients et candidats.",
    icon: Users,
    stat: "+42%",
    color: "ochre-smoky",
  },
]

export default function Methodology() {
  const [activeStep, setActiveStep] = useState(0)
  const [expandedSubsteps, setExpandedSubsteps] = useState<Record<number, boolean>>({})
  const sectionRef = useRef(null)
  const stepsRef = useRef(null)
  const outcomeRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })
  const isStepsInView = useInView(stepsRef, { once: true, margin: "-100px 0px" })
  const isOutcomeInView = useInView(outcomeRef, { once: true, margin: "-100px 0px" })

const toggleSubsteps = (stepId: number) => {
    setExpandedSubsteps((prev) => ({
      ...prev,
      [stepId]: !prev[stepId],
    }))
  }

const StepIcon = methodologySteps[activeStep].icon
  const StepColor = methodologySteps[activeStep].color

return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="pt-24 md:pt-32 pb-16 md:pb-24">
        <div className="container mx-auto px-4 sm:px-6 max-w-7xl">
          {/* Hero section */}
          <motion.div
            ref={sectionRef}
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="mb-12 md:mb-20 text-center"
          >
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 mb-4 md:mb-6 font-montserrat">
              Notre <span className="text-amber-700">Méthodologie</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Découvrez comment nous combinons intelligence artificielle et expertise humaine pour transformer
              l'accompagnement des candidats en transition professionnelle.
            </p>
          </motion.div>

{/* Overview animation section */}
          <div className="mb-16 md:mb-24">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.2, ease: "easeOut" }}
              className="bg-white rounded-3xl p-6 md:p-12 shadow-xl relative overflow-hidden"
            >
              {/* Decorative elements */}
              <div className="absolute -top-20 -right-20 w-40 h-40 bg-amber-700/10 rounded-full blur-3xl" />
              <div className="absolute -bottom-20 -left-20 w-40 h-40 bg-amber-600/10 rounded-full blur-3xl" />

<div className="relative z-10">
                <div className="flex flex-col md:flex-row items-center justify-between mb-8 md:mb-10">
                  <div className="mb-6 md:mb-0 md:mr-10">
                    <h2 className="text-2xl md:text-3xl font-bold text-gray-800 mb-4">
                      L'alliance parfaite entre <span className="text-amber-700">IA et expertise humaine</span>
                    </h2>
                    <p className="text-gray-600 leading-relaxed">
                      Notre approche unique combine la puissance de l'intelligence artificielle et la précision de
                      l'expertise humaine pour offrir des analyses de marché pertinentes et actionnables.
                    </p>
                  </div>
                  <div className="w-full md:w-auto">
                    <div className="bg-gradient-to-br from-gray-50/50 to-white rounded-2xl p-5 border border-amber-700/10 shadow-sm hidden">
                      <div className="flex items-center mb-4">
                        <div className="p-3 bg-amber-700/10 rounded-full mr-3">
                          <Lightbulb className="w-6 h-6 text-amber-700" />
                        </div>
                        <div>
                          <h3 className="text-lg font-semibold text-gray-800">Saviez-vous que...</h3>
                        </div>
                      </div>
                      <p className="text-gray-600 text-sm leading-relaxed">
                        Nos algorithmes analysent plus de <strong>37 millions</strong> de données par semaine pour
                        garantir des informations précises et à jour. Chaque rapport est vérifié par nos experts avant
                        d'être livré.
                      </p>
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 mb-8">
                  {/* Process overview cards */}
                  {[
                    { icon: Database, label: "Collecte", color: "blue-600" },
                    { icon: BrainCircuit, label: "Analyse", color: "amber-700" },
                    { icon: Users, label: "Vérification", color: "green-600" },
                    { icon: FileSpreadsheet, label: "Production", color: "orange-600" },
                  ].map((item, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, y: 20 }}
                      animate={isInView ? { opacity: 1, y: 0 } : {}}
                      transition={{ delay: 0.3 + index * 0.1, duration: 0.5 }}
                      className={`bg-gradient-to-br from-${item.color}/10 to-white rounded-2xl p-4 md:p-6 border border-${item.color}/20 shadow-sm hover:shadow-md transition-shadow cursor-pointer`}
                      onClick={() => setActiveStep(index)}
                    >
                      <div
                        className={`flex flex-col items-center text-center ${
                          activeStep === index ? "scale-105 transition-transform duration-300" : ""
                        }`}
                      >
                        <div className={`p-3 md:p-4 bg-${item.color}/20 rounded-full mb-3`}>
                          <item.icon className={`w-7 h-7 md:w-8 md:h-8 text-${item.color}`} />
                        </div>
                        <h3 className="text-lg md:text-xl font-semibold text-gray-800">{item.label}</h3>
                        <div className="mt-2 flex space-x-1">
                          {[...Array(4)].map((_, i) => (
                            <div
                              key={i}
                              className={`w-2 h-2 rounded-full ${
                                i <= index ? `bg-${item.color}` : "bg-gray-300"
                              } transition-all duration-300`}
                            />
                          ))}
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>

{/* Progress indicator */}
                <div className="w-full bg-gray-200 h-2 rounded-full mb-8 relative">
                  <motion.div
                    initial={{ width: "0%" }}
                    animate={{ width: `${(activeStep + 1) * 25}%` }}
                    transition={{ duration: 0.5 }}
                    className="absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-amber-700 to-amber-600"
                  />
                </div>

{/* Active step description */}
                <motion.div
                  key={activeStep}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                  className="bg-gray-50/50 rounded-2xl p-6 border border-gray-200"
                >
                  <div className="flex flex-col md:flex-row items-start">
                    <div className="p-3 md:p-4 bg-amber-700/20 rounded-full mr-0 mb-4 md:mr-6 md:mb-0 flex-shrink-0">
                      <StepIcon className="w-8 h-8 md:w-10 md:h-10 text-amber-700" />
                    </div>
                    <div>
                      <div className="flex flex-wrap items-center mb-3">
                        <h3 className="text-xl md:text-2xl font-bold text-gray-800 mr-3">
                          {methodologySteps[activeStep].name}
                        </h3>
                      </div>
                      <p className="text-gray-600 mb-5">{methodologySteps[activeStep].description}</p>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                        {methodologySteps[activeStep].subSteps.map((subStep, idx) => (
                          <div
                            key={idx}
                            className="flex items-start bg-white p-3 rounded-lg shadow-sm border border-gray-200"
                          >
                            <CheckCircle className="w-5 h-5 text-amber-700 mt-0.5 mr-2 flex-shrink-0" />
                            <span className="text-gray-600 text-sm">{subStep}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </motion.div>

{/* Step navigation */}
                <div className="flex justify-between mt-6">
                  <button
                    onClick={() => setActiveStep((prev) => Math.max(0, prev - 1))}
                    disabled={activeStep === 0}
                    className={`px-4 py-2 rounded-lg flex items-center ${
                      activeStep === 0 ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100"
                    }`}
                  >
                    <ChevronDown className="w-5 h-5 rotate-90 mr-1" />
                    <span>Précédent</span>
                  </button>
                  <button
                    onClick={() => setActiveStep((prev) => Math.min(methodologySteps.length - 1, prev + 1))}
                    disabled={activeStep === methodologySteps.length - 1}
                    className={`px-4 py-2 rounded-lg flex items-center ${
                      activeStep === methodologySteps.length - 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100"
                    }`}
                  >
                    <span>Suivant</span>
                    <ChevronDown className="w-5 h-5 -rotate-90 ml-1" />
                  </button>
                </div>
              </div>
            </motion.div>
          </div>

{/* Outcomes section */}
          <div ref={outcomeRef} className="mb-16 md:mb-24">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={isOutcomeInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.7, ease: "easeOut" }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4 font-montserrat">
                Résultats <span className="text-amber-700">concrets</span>
              </h2>
              <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
                Notre méthodologie éprouvée génère des bénéfices mesurables pour votre cabinet et vos candidats.
              </p>
            </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {outcomes.map((outcome, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 40 }}
                  animate={isOutcomeInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
                  className="bg-white rounded-3xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-amber-700/30"
                >
                  <div className="flex flex-col items-center text-center">
                    <div className="p-3 md:p-4 bg-gray-100 rounded-full mb-4">
                      <outcome.icon className="w-7 h-7 md:w-8 md:h-8 text-gray-700" />
                    </div>

<div className="text-3xl md:text-4xl font-bold text-gray-800 mb-3">{outcome.stat}</div>

<h3 className="text-lg md:text-xl font-semibold text-gray-800 mb-3">{outcome.title}</h3>
                    <p className="text-gray-600 text-sm">{outcome.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Calendar, MessageSquare, Database } from "lucide-react"

const techLogos = [
  { name: "HubSpot", image: "/placeholder.svg?height=32&width=100" },
  { name: "Calendly", image: "/placeholder.svg?height=32&width=100" },
  { name: "Crunchbase", image: "/placeholder.svg?height=32&width=100" },
  { name: "LinkedIn", image: "/placeholder.svg?height=32&width=100" },
  { name: "AngelList", image: "/placeholder.svg?height=32&width=100" },
  { name: "OpenAI", image: "/placeholder.svg?height=32&width=100" },
]

export default function CTASection() {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })

return (
    <section ref={sectionRef} className="py-20 lg:py-32 bg-white">
      <div className="container mx-auto px-6">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold font-montserrat mb-6 text-primary-900 leading-tight">
              Offrez un accompagnement nouvelle génération
            </h2>
            <p className="text-lg md:text-xl text-primary-700 max-w-3xl mx-auto leading-relaxed">
              Prenez une longueur d'avance sur vos concurrents. Adoptez CareerPilot Pro Playbook et mesurez l'impact sur
              votre efficacité et la motivation de vos clients dès la première semaine.
            </p>
          </motion.div>

{/* Main Content Grid */}
          <div className="flex justify-center">
            {/* Left Column - Benefits */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={isInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.2, ease: "easeOut" }}
              className="space-y-8"
            >
              <div className="space-y-6">
                <div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-2xl hover:bg-gray-100 transition-colors duration-300">
                  <div className="bg-gold-sienna-100 p-3 rounded-xl flex-shrink-0">
                    <Calendar className="w-6 h-6 text-gold-sienna-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-xl mb-2 text-primary-900">Intégration rapide</h3>
                    <p className="text-primary-700">Aucune Installation nécessaire, immédiatement opérationnel</p>
                  </div>
                </div>

<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-2xl hover:bg-gray-100 transition-colors duration-300">
                  <div className="bg-tilleul-dense-100 p-3 rounded-xl flex-shrink-0">
                    <MessageSquare className="w-6 h-6 text-tilleul-dense-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-xl mb-2 text-primary-900">Support dédié</h3>
                    <p className="text-primary-700">
                      Dès la première étape, vous pouvez contacter votre référent expert CareerPilot Pro
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-2xl hover:bg-gray-100 transition-colors duration-300">
                  <div className="bg-accent-lavender-100 p-3 rounded-xl flex-shrink-0">
                    <Database className="w-6 h-6 text-accent-lavender-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-xl mb-2 text-primary-900">Données fiables</h3>
                    <p className="text-primary-700">
                      Sources multiples et validées par nos experts métiers pour des analyses précises, actionables et
                      actualisées
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/career-pilot-pro-client.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Play, CheckCircle, Zap, RefreshCcw, MapPin } from "lucide-react"
import { useRouter } from "next/navigation"
import TestimonialsSection from "./testimonials-section"
import PainPointsSection from "./pain-points-section"
import HeroSlideshow from "./hero-slideshow"
import ExampleVideoSection from "./example-video-section"
import BenefitsSection from "@/components/benefits-section"
import CtaSection from "@/components/cta-section"

// Ajouter cette déclaration pour Calendly
declare global {
  interface Window {
    hbspt: any
    Calendly: any
  }
}

const servicesData = [
  {
    icon: MapPin,
    name: "STARTER - Repositionnement Express",
    context: "✅ Votre client reste dans son secteur",
    mainBenefit: "Automatise 10h de recherche par dossier",
    features: ["Analyse complète du profil", "15+ opportunités ciblées", "Scripts de présentation"],
    result: "🎯 Client repositionné en 4-6 semaines",
    price: "À partir de 480€",
    ctaText: "Parfait pour mes dossiers",
    color: "accent-graphite",
    popular: false,
  },
  {
    icon: RefreshCcw,
    name: "PRO - Changement de Métier",
    context: "✅ Votre client change de fonction",
    mainBenefit: "30+ employeurs qualifiés identifiés",
    features: ["Tout Starter +", "Optimisation CV/LinkedIn", "Planning détaillé 6 mois"],
    result: "🎯 Transition sécurisée en 3-4 mois",
    price: "À partir de 700€",
    ctaText: "Idéal pour mes clients",
    color: "primary",
    popular: true,
  },
  {
    icon: Zap,
    name: "EXPERT - Transformation Majeure",
    context: "✅ Dirigeant, plan social, pivot total",
    mainBenefit: "Accompagnement continu 10 mois",
    features: ["Tout Pro +", "50+ opportunités haut niveau", "Benchmark rémunération"],
    result: "🎯 Leadership secured en 6-8 mois",
    price: "Sur devis",
    ctaText: "Solution sur-mesure",
    color: "secondary",
    popular: false,
  },
]

const HeroSection = ({ onPlayDemo }: { onPlayDemo: () => void }) => {
  const router = useRouter()

const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: "easeOut" },
    },
  }

const handleDiscover = () => {
    router.push("/calculateur-roi")
  }

return (
    <motion.section
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="min-h-screen flex items-center justify-center py-20 bg-gray-50"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <motion.div variants={itemVariants} className="space-y-8 text-center lg:text-left">
            {/* <motion.div
              variants={itemVariants}
              className="inline-flex items-center space-x-2 bg-gray-800 text-white text-xs font-light px-4 py-2 rounded-full tracking-wide"
            >
              <Sparkles className="w-4 h-4" />
              <span>Testé par 200+ professionnels</span>
            </motion.div> */}

<motion.h1
              variants={itemVariants}
              className="text-4xl sm:text-5xl lg:text-6xl font-light text-gray-800 leading-tight"
            >
              Concentrez vous sur <span className="text-amber-700 font-normal">l'Humain</span>,
              <br />
              <span className="block h-4"></span>
              nous apportons la <span className="text-amber-700 font-normal">Donnée</span>
            </motion.h1>

<motion.p variants={itemVariants} className="text-lg text-gray-600 leading-relaxed max-w-2xl">
              Notre plateforme unique centralise toutes les données clés : analyse du marché du travail, compétences
              recherchées, pistes de formation et opportunités ciblées. Vous gagnez un temps précieux dans vos
              accompagnements, vos talents gagnent en clarté et en autonomie pour leur avenir.
            </motion.p>

<motion.p variants={itemVariants} className="text-lg text-gray-800 font-normal">
              CareerPilot Pro, partenaire de vos transitions de carrière. Efficace pour vous, essentiel pour eux.
            </motion.p>

<motion.ul variants={itemVariants} className="space-y-4 text-left">
              {[
                { text: "Un ROI de +280% en moyenne" },
                { text: "Solution immédiatement opérationnelle, pas de configuration longue ou complexe" },
                { text: "Plus de 5000 sources consultées en temps réel, pour des résultats ultra précis et à jour" },
              ].map((item, index) => (
                <motion.li
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.5 + index * 0.1 }}
                  className="flex items-center text-gray-600"
                >
                  <CheckCircle className="w-5 h-5 text-amber-700 mr-3 flex-shrink-0" />
                  {item.text}
                </motion.li>
              ))}
            </motion.ul>

<motion.div variants={itemVariants} className="hidden flex flex-col sm:flex-row items-center gap-4 pt-6">
              <button
                onClick={handleDiscover}
                className="px-8 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center space-x-2"
              >
                <span>Calculer mon ROI</span>
                <ArrowRight className="w-4 h-4" />
              </button>

<motion.div variants={itemVariants} className="flex items-center justify-center">
            <motion.div
              className="relative w-full max-w-lg"
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.4, duration: 0.6, ease: "easeOut" }}
            >
              <HeroSlideshow
                width={600}
                height={450}
                className="rounded-xl shadow-lg w-full h-auto"
                placeholderId="hero-dashboard"
              />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  )
}

const ServicesSection = () => {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-150px 0px" })

const [isHubSpotModalOpen, setIsHubSpotModalOpen] = useState(false)

const handleServiceSelection = () => {
    setIsHubSpotModalOpen(true)
    setTimeout(() => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: "48280160",
          formId: "359c8500-1b77-458b-9fd9-7b0de683634a",
          region: "na1",
          target: "#hubspot-form-container",
        })
      }
    }, 100)
  }

const cardVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.1,
        duration: 0.6,
        ease: "easeOut",
      },
    }),
  }

return (
    <section ref={sectionRef} className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-light text-gray-800 mb-6">
            3 <span className="text-amber-700 font-normal">solutions</span> pour répondre aux besoins de{" "}
            <span className="text-amber-700 font-normal">chaque client</span>
          </h2>

<p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Trois niveaux d'accompagnement pour répondre à tous les profils et objectifs de transition professionnelle.
          </p>
        </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {servicesData.map((service, index) => (
            <motion.div
              key={service.name}
              custom={index}
              initial="hidden"
              animate={isInView ? "visible" : "hidden"}
              variants={cardVariants}
              className={`bg-white border border-gray-200 rounded-xl p-8 h-full shadow-sm hover:shadow-md transition-shadow ${service.popular ? `border-2 border-amber-700` : ``}`}
            >
              {service.popular && (
                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                  <div className="bg-amber-700 text-white px-4 py-1 rounded-full text-xs font-light">Recommandé</div>
                </div>
              )}

<div className="flex items-center mb-6">
                <div className="p-3 rounded-lg bg-gray-100 mr-4">
                  <service.icon className="w-6 h-6 text-amber-700" />
                </div>
                <h3 className="text-lg font-normal text-gray-800">{service.name}</h3>
              </div>

<p className="text-sm text-gray-600 mb-4 bg-gray-50 px-3 py-2 rounded-lg">{service.context}</p>

<p className="text-base text-gray-800 mb-6 font-normal">{service.mainBenefit}</p>

<div className="space-y-3 mb-8 flex-grow">
                {service.features.map((feature, featureIndex) => (
                  <div key={featureIndex} className="flex items-start space-x-3">
                    <CheckCircle className="w-4 h-4 text-amber-700 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 text-sm">{feature}</span>
                  </div>
                ))}
              </div>

<button
                onClick={handleServiceSelection}
                className="w-full px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
              >
                {service.ctaText}
              </button>
            </motion.div>
          ))}
        </div>
      </div>

{isHubSpotModalOpen && (
        <div className="fixed inset-0 bg-white/95 flex items-center justify-center z-50 p-4">
          <div className="bg-white border border-gray-200 rounded-xl shadow-lg p-8 max-w-md w-full">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-normal text-gray-800">Demande d'information</h3>
              <button
                onClick={() => setIsHubSpotModalOpen(false)}
                className="text-gray-500 hover:text-gray-800 text-xl"
              >
                ×
              </button>
            </div>
            <div id="hubspot-form-container"></div>
          </div>
        </div>
      )}
    </section>
  )
}

const CareerPilotProClient = () => {
  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false)

const handlePlayDemo = () => {
    setIsVideoModalOpen(true)
  }

const handleCloseVideoModal = () => {
    setIsVideoModalOpen(false)
  }

useEffect(() => {
    const script = document.createElement("script")
    script.src = "//js.hsforms.net/forms/embed/v2.js"
    script.charset = "utf-8"
    script.type = "text/javascript"
    document.head.appendChild(script)

const calendlyCSS = document.createElement("link")
    calendlyCSS.href = "https://assets.calendly.com/assets/external/widget.css"
    calendlyCSS.rel = "stylesheet"
    document.head.appendChild(calendlyCSS)

const calendlyScript = document.createElement("script")
    calendlyScript.src = "https://assets.calendly.com/assets/external/widget.js"
    calendlyScript.type = "text/javascript"
    calendlyScript.async = true
    calendlyScript.defer = true
    document.head.appendChild(calendlyScript)

return () => {
      const existingScript = document.querySelector('script[src="//js.hsforms.net/forms/embed/v2.js"]')
      if (existingScript) document.head.removeChild(existingScript)

const existingCalendlyScript = document.querySelector(
        'script[src="https://assets.calendly.com/assets/external/widget.js"]',
      )
      if (existingCalendlyScript) document.head.removeChild(existingCalendlyScript)

const existingCalendlyCSS = document.querySelector(
        'link[href="https://assets.calendly.com/assets/external/widget.css"]',
      )
      if (existingCalendlyCSS) document.head.removeChild(existingCalendlyCSS)
    }
  }, [])

return (
    <div className="min-h-screen bg-gray-50">
      <HeroSection onPlayDemo={handlePlayDemo} />
      <PainPointsSection />
      <ExampleVideoSection />
      <BenefitsSection />
      <TestimonialsSection />
      <CtaSection />
      {isVideoModalOpen && (
        <VideoModal videoUrl="https://www.youtube.com/embed/dQw4w9WgXcQ" onClose={handleCloseVideoModal} />
      )}
    </div>
  )
}

export default CareerPilotProClient
[V0_FILE]typescriptreact:file="components/hero-slideshow.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import Image from "next/image"

// Curated professional images - duplicates removed, highest quality selection
const slideshowImages = [
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2839%29.jpg-BRi4WzGmJsrBXTfvrkDb8LoEVWBnL9.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2879%29.jpg-7ZKmvjFczv5iwF6zfhKWpsxKxPy1OR.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2858%29.jpg-I9N9Byuz3LxVw0nEdrBG4Mbyl7poV6.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2842%29.jpg-z7ZuscbNaGYI81q6hlH5B4cuFLBNSS.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coach%20diversity%20MB.jpg-VgASgzJfSORysIwMo5wR9Dg9ONGim4.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2828%29.jpg-qqLcPU7vbtZ6lIumzl5qSfnDkr0dS5.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2883%29.jpg-5vEzDuhC08CBu6PXkTR9nGWIC2U0qC.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2886%29.jpg-2Sph06S2XJNuua3xCJ86ebpPeWzAvj.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2844%29.jpg-17uYqE8E33uFbTPNsVigB39ng0TVVN.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2845%29.jpg-55lzB3FfKwhNGPkAwJ8f59WBxMikMK.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2837%29.jpg-Y71R2d8Pkvgiu9HFH2nyB6IEzmcdQm.png",
  "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2885%29.jpg-gV8aIY22o8OIOP7EeFB7gwtYAliy2V.png",
]

export default function HeroSlideshow() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [nextIndex, setNextIndex] = useState(1)
  const [images, setImages] = useState<string[]>([])
  const [usedIndices, setUsedIndices] = useState<number[]>([])
  const [layerOpacity, setLayerOpacity] = useState({ current: 1, next: 0 })

// Initialize images with smart shuffling
  useEffect(() => {
    const shuffled = [...slideshowImages].sort(() => Math.random() - 0.5)
    setImages(shuffled)
    setUsedIndices([0])
    setNextIndex(1)
  }, [])

// Preload all images for seamless experience
  useEffect(() => {
    images.forEach((src) => {
      const img = new window.Image()
      img.src = src
    })
  }, [images])

// Get next index avoiding recent images
  const getNextIndex = (currentIdx: number, used: number[]) => {
    const availableIndices = images.map((_, index) => index).filter((index) => !used.includes(index))

if (availableIndices.length === 0) {
      // Reset if all images used, but avoid current
      const resetIndices = images.map((_, index) => index).filter((index) => index !== currentIdx)
      return resetIndices[Math.floor(Math.random() * resetIndices.length)]
    }

return availableIndices[Math.floor(Math.random() * availableIndices.length)]
  }

// Slow motion continuous film effect
  useEffect(() => {
    if (images.length === 0) return

const interval = setInterval(() => {
      // Start slow crossfade
      setLayerOpacity({ current: 0, next: 1 })

// Complete transition and prepare next
      setTimeout(() => {
        const newCurrentIndex = nextIndex
        const newUsedIndices = [...usedIndices, newCurrentIndex]

// Keep only last 4 images in memory to avoid repetition
        const recentUsed = newUsedIndices.slice(-4)

const newNextIndex = getNextIndex(newCurrentIndex, recentUsed)

setCurrentIndex(newCurrentIndex)
        setNextIndex(newNextIndex)
        setUsedIndices(recentUsed)
        setLayerOpacity({ current: 1, next: 0 })
      }, 4000) // 4 seconds slow crossfade
    }, 8000) // 8 seconds per image for slow motion effect

return () => clearInterval(interval)
  }, [images.length, nextIndex, usedIndices])

if (images.length === 0) {
    return (
      <div className="w-full aspect-[465/580] bg-gradient-to-br from-slate-100 to-slate-200 rounded-2xl animate-pulse" />
    )
  }

return (
    <div className="relative w-full aspect-[465/580] overflow-hidden rounded-2xl shadow-xl">
      {/* Base layer - Current image */}
      <motion.div
        className="absolute inset-0"
        animate={{ opacity: layerOpacity.current }}
        transition={{
          duration: 4,
          ease: [0.25, 0.46, 0.45, 0.94], // Smooth easing for slow motion
        }}
      >
        <Image
          src={images[currentIndex] || "/placeholder.svg"}
          alt="Professional coaching and career development"
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, 465px"
          priority
          quality={95}
        />
      </motion.div>

{/* Overlay layer - Next image */}
      <motion.div
        className="absolute inset-0"
        animate={{ opacity: layerOpacity.next }}
        transition={{
          duration: 4,
          ease: [0.25, 0.46, 0.45, 0.94], // Smooth easing for slow motion
        }}
      >
        <Image
          src={images[nextIndex] || "/placeholder.svg"}
          alt="Professional coaching and career development"
          fill
          className="object-cover"
          sizes="(max-width: 768px) 100vw, 465px"
          quality={95}
        />
      </motion.div>

{/* Subtle film grain overlay */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/5 via-transparent to-transparent pointer-events-none" />

{/* Film-like vignette */}
      <div className="absolute inset-0 bg-gradient-to-r from-black/3 via-transparent to-black/3 pointer-events-none" />
    </div>
  )
}
[V0_FILE]markdown:file="docs/SUPABASE_SETUP.md" isMerged="true"
# Supabase Setup Guide

## Error: "Tenant or user not found"

This error occurs when the Supabase connection isn't properly configured. Follow these steps:

## Step 1: Verify Environment Variables

Make sure you have these environment variables set in your Vercel project or `.env.local`:

\`\`\`
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
\`\`\`

## Step 2: Find Your Supabase Credentials

1. Go to [supabase.com](https://supabase.com)
2. Open your project
3. Go to Settings → API
4. Copy:
   - **Project URL** → `NEXT_PUBLIC_SUPABASE_URL`
   - **anon public** key → `NEXT_PUBLIC_SUPABASE_ANON_KEY`
   - **service_role** key → `SUPABASE_SERVICE_ROLE_KEY`

## Step 3: Execute SQL Scripts Manually

Instead of running scripts from the app, execute them directly in Supabase:

1. Go to your Supabase project
2. Click on **SQL Editor** in the left sidebar
3. Click **New Query**
4. Copy and paste the SQL from each script file:
   - `scripts/create-users-table.sql`
   - `scripts/create-client-info-table.sql`
   - `scripts/create-fillout-responses-table.sql`
   - `scripts/create-prompts-table.sql`
5. Click **Run** for each script

## Step 4: Verify Tables Were Created

1. Go to **Table Editor** in Supabase
2. You should see these tables:
   - `users`
   - `client_info`
   - `fillout_responses`
   - `prompts`

## Step 5: Insert Demo Users

After creating the `users` table, insert the demo accounts by running this SQL in the Supabase SQL Editor:

\`\`\`sql
INSERT INTO users (email, password_hash, role, name, created_at)
VALUES
  ('demouser@demo.com', 'demo_password_hash', 'user', 'Demo User', NOW()),
  ('demosuperuser@demo.com', 'demo_password_hash', 'super_user', 'Demo Super User', NOW()),
  ('demoadmin@demo.com', 'demo_password_hash', 'admin', 'Demo Admin', NOW()),
  ('demosuperadmin@demo.com', 'demo_password_hash', 'super_admin', 'Demo Super Admin', NOW()),
  ('demoowner@demo.com', 'demo_password_hash', 'owner', 'Demo Owner', NOW())
ON CONFLICT (email) DO NOTHING;
\`\`\`

## Troubleshooting

### Still getting "Tenant or user not found"?

1. **Check Project Status**: Make sure your Supabase project is active and not paused
2. **Verify URL Format**: The URL should look like `https://xxxxx.supabase.co`
3. **Test Connection**: Try accessing the Supabase dashboard to confirm the project exists
4. **Region Issues**: Ensure you're using the correct project URL for your region

### Scripts won't execute in the app?

The SQL scripts in the `/scripts` folder are meant to be executed manually in the Supabase SQL Editor, not through the application. This is a security best practice.

## Next Steps

Once all tables are created and demo users are inserted:

1. Restart your Vercel deployment or local dev server
2. Try logging in with one of the demo accounts
3. The password for all demo accounts is: `demo123`
\`\`\`

Now let's update the authentication library to handle errors better:
[V0_FILE]typescriptreact:file="components/auth/supabase-connection-check.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { supabase } from "@/lib/supabase"
import { AlertCircle, CheckCircle, Loader2 } from "lucide-react"

export function SupabaseConnectionCheck() {
  const [status, setStatus] = useState<"checking" | "connected" | "error">("checking")
  const [errorMessage, setErrorMessage] = useState<string>("")

useEffect(() => {
    async function checkConnection() {
      try {
        const { error } = await supabase.from("users").select("count", { count: "exact", head: true })

if (error) {
          setStatus("error")
          setErrorMessage(error.message)
        } else {
          setStatus("connected")
        }
      } catch (err) {
        setStatus("error")
        setErrorMessage(err instanceof Error ? err.message : "Unknown error")
      }
    }

checkConnection()
  }, [])

if (status === "checking") {
    return (
      <div className="flex items-center gap-2 text-sm text-gray-600">
        <Loader2 className="h-4 w-4 animate-spin" />
        Vérification de la connexion...
      </div>
    )
  }

if (status === "error") {
    return (
      <div className="rounded-lg border border-amber-200 bg-amber-50 p-4">
        <div className="flex items-start gap-3">
          <AlertCircle className="h-5 w-5 text-amber-600 mt-0.5" />
          <div className="flex-1">
            <h3 className="font-semibold text-amber-900 mb-1">Problème de connexion à la base de données</h3>
            <p className="text-sm text-amber-800 mb-2">{errorMessage || "Impossible de se connecter à Supabase"}</p>
            <div className="text-sm text-amber-700">
              <p className="font-medium mb-1">Solutions :</p>
              <ul className="list-disc list-inside space-y-1">
                <li>Vérifiez que les variables d'environnement Supabase sont configurées</li>
                <li>Assurez-vous que votre projet Supabase est actif</li>
                <li>Exécutez les scripts SQL dans l'éditeur Supabase</li>
                <li>Consultez le fichier docs/SUPABASE_SETUP.md pour plus d'aide</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex items-center gap-2 text-sm text-green-600">
      <CheckCircle className="h-4 w-4" />
      Base de données connectée
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "framer-motion": "12.23.24",
    "react-countup": "6.5.3",
    "@supabase/supabase-js": "2.76.1",
    "embla-carousel-autoplay": "8.6.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // CareerPilot Pro Custom Colors
        "cpp-text-primary": "#2C2F33",
        "cpp-button-range": "#9BB889",
        "cpp-button-range-selected": "#527F38",
        "gold-sienna": {
          50: "#fefcf7",
          100: "#fdf8ee",
          200: "#faf0db",
          300: "#f6e7c8",
          400: "#f0d9a9",
          500: "#e9cb8a",
          600: "#d9b06d",
          700: "#b68c55",
          800: "#957048",
          900: "#795b3f",
          950: "#443120",
        },
        "accent-lavender": {
          50: "#fbfaff",
          100: "#f7f4ff",
          200: "#f0ebff",
          300: "#e8dfff",
          400: "#d8c8ff",
          500: "#c7aeff",
          600: "#b58fff",
          700: "#a370ef",
          800: "#8558d0",
          900: "#6f4ab3",
          950: "#42276e",
        },
        "accent-ochre": {
          50: "#fffaf0",
          100: "#fef5e1",
          200: "#fdebc8",
          300: "#fbdca4",
          400: "#f9c777",
          500: "#f7b24f",
          600: "#e99935",
          700: "#c57a27",
          800: "#9f6025",
          900: "#7f4e23",
          950: "#462911",
        },
        "accent-green": {
          50: "#f3fcf7",
          100: "#e9f9ef",
          200: "#d3f2e0",
          300: "#b8e8cc",
          400: "#92d9af",
          500: "#6ec993",
          600: "#52b379",
          700: "#439a66",
          800: "#387c54",
          900: "#306547",
          950: "#1a3928",
        },
        "accent-graphite": {
          700: "#4A4A4A",
        },
        "accent-alert": {
          400: "#F87171",
          600: "#DC2626",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
  // Explicitly set future flags to suppress warnings
  future: {
    hoverOnlyWhenSupported: true,
  },
}
[V0_FILE]typescript:file="lib/supabase.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Get environment variables with fallbacks
const getSupabaseUrl = () => {
  if (typeof window === "undefined") {
    // Server-side: can access any env variable
    return process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.SUPABASE_URL || ""
  }
  // Client-side: only NEXT_PUBLIC_ variables
  return process.env.NEXT_PUBLIC_SUPABASE_URL || ""
}

const getSupabaseAnonKey = () => {
  if (typeof window === "undefined") {
    // Server-side
    return process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY || ""
  }
  // Client-side
  return process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
}

const supabaseUrl = getSupabaseUrl()
const supabaseAnonKey = getSupabaseAnonKey()

// Create a singleton client instance
let supabaseClient: ReturnType<typeof createClient> | null = null

export function getSupabase() {
  if (!supabaseClient && supabaseUrl && supabaseAnonKey) {
    supabaseClient = createClient(supabaseUrl, supabaseAnonKey, {
      auth: {
        persistSession: true,
        autoRefreshToken: true,
      },
    })
  }
  return supabaseClient
}

// For backwards compatibility
export const supabase = getSupabase()

// Check if Supabase is configured
export function isSupabaseConfigured(): boolean {
  return !!(supabaseUrl && supabaseAnonKey)
}

// Server-side only: get service role client
export function getSupabaseAdmin() {
  if (typeof window !== "undefined") {
    throw new Error("getSupabaseAdmin can only be called server-side")
  }

const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!supabaseUrl || !serviceRoleKey) {
    console.warn("Supabase admin client not configured")
    return null
  }

return createClient(supabaseUrl, serviceRoleKey, {
    auth: {
      autoRefreshToken: false,
      persistSession: false,
    },
  })
}
[V0_FILE]typescript:file="lib/env.ts" isMerged="true"
// Environment variable helper that works on both client and server
export const env = {
  // Public variables (accessible on client and server)
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL || "",
    anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "",
  },

// Server-only variables
  server: {
    supabaseServiceRoleKey: typeof window === "undefined" ? process.env.SUPABASE_SERVICE_ROLE_KEY || "" : "",
    nodeEnv: typeof window === "undefined" ? process.env.NODE_ENV || "development" : "client",
  },

// Helper to check if we're on the server
  isServer: typeof window === "undefined",

// Helper to check if we're in development
  isDev: typeof window === "undefined" ? process.env.NODE_ENV === "development" : false,
}

// Validate required environment variables on server startup
if (typeof window === "undefined") {
  const requiredEnvVars = ["NEXT_PUBLIC_SUPABASE_URL", "NEXT_PUBLIC_SUPABASE_ANON_KEY"]

const missingVars = requiredEnvVars.filter((varName) => !process.env[varName])

if (missingVars.length > 0) {
    console.warn(
      `⚠️  Missing environment variables: ${missingVars.join(", ")}\n` + `   Some features may not work correctly.`,
    )
  }
}
[V0_FILE]typescript:file="lib/auth.ts" isEdit="true" isMerged="true"
import { getSupabase, isSupabaseConfigured } from "./supabase"

export type UserRole = "bottom_user" | "super_user" | "admin" | "super_admin" | "owner"

export interface User {
  id: string
  email: string
  name: string
  role: UserRole
}

// Demo accounts for testing
export const DEMO_ACCOUNTS = {
  "demouser@demo.com": {
    id: "demo-user-1",
    email: "demouser@demo.com",
    name: "Demo User",
    role: "bottom_user" as UserRole,
    password: "demo123",
  },
  "demosuperuser@demo.com": {
    id: "demo-superuser-1",
    email: "demosuperuser@demo.com",
    name: "Demo Super User",
    role: "super_user" as UserRole,
    password: "demo123",
  },
  "demoadmin@demo.com": {
    id: "demo-admin-1",
    email: "demoadmin@demo.com",
    name: "Demo Admin",
    role: "admin" as UserRole,
    password: "demo123",
  },
  "demosuperadmin@demo.com": {
    id: "demo-superadmin-1",
    email: "demosuperadmin@demo.com",
    name: "Demo Super Admin",
    role: "super_admin" as UserRole,
    password: "demo123",
  },
  "demoowner@demo.com": {
    id: "demo-owner-1",
    email: "demoowner@demo.com",
    name: "Demo Owner",
    role: "owner" as UserRole,
    password: "demo123",
  },
}

// Session storage helper
const SESSION_KEY = "cpp_user_session"

function saveSession(user: User) {
  if (typeof window !== "undefined") {
    sessionStorage.setItem(SESSION_KEY, JSON.stringify(user))
  }
}

function getSession(): User | null {
  if (typeof window === "undefined") return null

const session = sessionStorage.getItem(SESSION_KEY)
  if (!session) return null

try {
    return JSON.parse(session)
  } catch {
    return null
  }
}

function clearSession() {
  if (typeof window !== "undefined") {
    sessionStorage.removeItem(SESSION_KEY)
  }
}

// Login function
export async function login(email: string, password: string): Promise<User> {
  // Check demo accounts first
  const demoAccount = DEMO_ACCOUNTS[email as keyof typeof DEMO_ACCOUNTS]
  if (demoAccount && demoAccount.password === password) {
    const user: User = {
      id: demoAccount.id,
      email: demoAccount.email,
      name: demoAccount.name,
      role: demoAccount.role,
    }
    saveSession(user)
    return user
  }

// Try Supabase if configured
  if (isSupabaseConfigured()) {
    const supabase = getSupabase()
    if (supabase) {
      try {
        const { data: authData, error: authError } = await supabase.auth.signInWithPassword({
          email,
          password,
        })

if (authError) throw authError

// Get user profile from database
        const { data: profile, error: profileError } = await supabase
          .from("users")
          .select("*")
          .eq("email", email)
          .single()

if (profileError) throw profileError

const user: User = {
          id: authData.user.id,
          email: profile.email,
          name: profile.name,
          role: profile.role,
        }

saveSession(user)
        return user
      } catch (error) {
        console.error("Supabase login error:", error)
        throw new Error("Invalid email or password")
      }
    }
  }

throw new Error("Invalid email or password")
}

// Logout function
export async function logout() {
  if (isSupabaseConfigured()) {
    const supabase = getSupabase()
    if (supabase) {
      await supabase.auth.signOut()
    }
  }
  clearSession()
}

// Get current user
export function getCurrentUser(): User | null {
  return getSession()
}

// Check if user is authenticated
export function isAuthenticated(): boolean {
  return getCurrentUser() !== null
}

// Check if user has required role
export function hasRole(user: User | null, requiredRole: UserRole): boolean {
  if (!user) return false

const roleHierarchy: UserRole[] = ["bottom_user", "super_user", "admin", "super_admin", "owner"]

const userRoleIndex = roleHierarchy.indexOf(user.role)
  const requiredRoleIndex = roleHierarchy.indexOf(requiredRole)

return userRoleIndex >= requiredRoleIndex
}
[V0_FILE]javascript:file="next.config.mjs" isFixed="true" isQuickEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    domains: ['placeholder.svg', 'blob.v0.app'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.supabase.co',
      },
    ],
    unoptimized: true,
  },
  // Suppress hydration warnings in development
  ...(process.env.NODE_ENV === 'development' && {
    onDemandEntries: {
      maxInactiveAge: 25 * 1000,
      pagesBufferLength: 2,
    },
  }),
}

export default nextConfig
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Database URLs (provided by Vercel Postgres integration)
POSTGRES_URL=
POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_USER=
POSTGRES_PASSWORD=
POSTGRES_DATABASE=
POSTGRES_HOST=

# Note: All demo accounts use password: demo123
# - demouser@demo.com (Bottom User)
# - demosuperuser@demo.com (Super User)
# - demoadmin@demo.com (Admin)
# - demosuperadmin@demo.com (Super Admin)
# - demoowner@demo.com (Owner)
[V0_FILE]jpg:file="public/logo/careerpilot-pro-next-is-now.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/next%20is%20now%20V613-bdUFpwJQXjZqchQ3WRKwRNeJEZMpsk.jpg" isMerged="true"
[V0_FILE]png:file="public/logo/careerpilot-pro-logo-job-off-talent-on.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/next%20is%20now%20V615%20W-MdBdAbczddmguvmN8GQZiPbQQUalfq.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Menu, X } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

// Calendly modal component
const CalendlyModal = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
  useEffect(() => {
    if (isOpen) {
      // Charger le script Calendly dynamiquement
      const script = document.createElement("script")
      script.src = "https://assets.calendly.com/assets/external/widget.js"
      script.async = true
      document.head.appendChild(script)

return () => {
        // Nettoyer le script quand le modal se ferme
        const existingScript = document.querySelector(
          'script[src="https://assets.calendly.com/assets/external/widget.js"]',
        )
        if (existingScript) {
          document.head.removeChild(existingScript)
        }
      }
    }
  }, [isOpen])

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95 }}
        className="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex justify-between items-center p-6 border-b border-gray-200">
          <h3 className="text-xl font-semibold text-gray-800">Réserver un créneau</h3>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>

<div className="p-6">
          <div
            className="calendly-inline-widget"
            data-url="https://calendly.com/talentvox/decouverte-careerpilotpro"
            style={{ minWidth: "320px", height: "700px" }}
          ></div>
        </div>
      </motion.div>
    </div>
  )
}

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isCalendlyModalOpen, setIsCalendlyModalOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const navigation = [
    { name: "Accueil", href: "/" },
    { name: "Notre méthodologie", href: "/notre-methodologie" },
    { name: "Playbook", href: "/playbook" },
    { name: "Équipe", href: "/equipe" },
  ]

const handleContactClick = () => {
    setIsCalendlyModalOpen(true)
    setIsMenuOpen(false)
  }

return (
    <>
      <header className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 transition-all duration-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <Link href="/" className="flex items-center space-x-3 group">
              <motion.div whileHover={{ scale: 1.05 }} transition={{ type: "spring", stiffness: 400, damping: 17 }}>
                <Image
                  src="/logo/careerpilot-pro-logo-job-off-talent-on.png"
                  alt="CareerPilot Pro - job off, talent on"
                  width={240}
                  height={240}
                  className="h-16 w-auto"
                  priority
                />
              </motion.div>
            </Link>

{/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center space-x-8">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-sm font-light text-gray-800 hover:text-gray-600 transition-colors duration-200"
                >
                  {item.name}
                </Link>
              ))}
            </nav>

{/* Desktop CTA */}
            <div className="hidden lg:flex items-center space-x-4">
              <button
                onClick={handleContactClick}
                className="px-6 py-2 bg-gray-800 text-white text-sm font-light rounded-lg hover:bg-gray-700 transition-colors duration-200"
              >
                Parlons-en
              </button>
            </div>

{/* Mobile menu button */}
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="lg:hidden p-2 text-gray-800 hover:text-gray-600 transition-colors"
            >
              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

{/* Mobile Navigation */}
        <AnimatePresence>
          {isMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="lg:hidden bg-white border-t border-gray-200"
            >
              <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 space-y-4">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    href={item.href}
                    className="block text-gray-800 hover:text-gray-600 transition-colors py-2"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {item.name}
                  </Link>
                ))}
                <button
                  onClick={handleContactClick}
                  className="w-full mt-4 px-6 py-3 bg-gray-800 text-white text-sm font-light rounded-lg hover:bg-gray-700 transition-colors"
                >
                  Parlons-en
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </header>

<CalendlyModal isOpen={isCalendlyModalOpen} onClose={() => setIsCalendlyModalOpen(false)} />
    </>
  )
}

export default Header
[V0_FILE]typescriptreact:file="app/playbook/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect } from "react"
import Header from "../../components/header"

export default function PlaybookPage() {
  useEffect(() => {
    // Load Fillout script
    const script = document.createElement("script")
    script.src = "https://server.fillout.com/embed/v1/"
    script.async = true
    document.body.appendChild(script)

return () => {
      // Cleanup script on unmount
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="pt-24 md:pt-32 pb-16 md:pb-24">
        <div className="container mx-auto px-4 sm:px-6 max-w-4xl">
          {/* Header Section */}
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-light text-gray-800 mb-6">
              Créer un <span className="text-amber-700">Playbook</span>
            </h1>
            <div className="max-w-2xl mx-auto">
              <p className="text-base text-gray-500 font-light">
                Répondez aux questions ci-dessous pour déclencher la préparation du playbook personnalisé et prendre un
                rendez-vous pour le débrief des résultats (45 minutes). Le questionnaire prend environ 6-10 minutes.
              </p>
            </div>
          </div>

{/* Questionnaire Section */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:p-8">
            <div className="mb-6">
              <p className="text-gray-600 font-light">
                Complétez ce formulaire pour recevoir votre playbook personnalisé
              </p>
            </div>

{/* Fillout Embed */}
            <div
              style={{ width: "100%", height: "500px" }}
              data-fillout-id="hSYQwQGbYUus"
              data-fillout-embed-type="standard"
              data-fillout-inherit-parameters
              data-fillout-dynamic-resize
            ></div>
          </div>

*Automatically synced with your [v0.dev](https://v0.dev) deployments*

[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/Fllyi5Gyj9D)

## Overview

This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev).
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev).

## Deployment

Your project is live at:

**[https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21](https://vercel.com/gilles-talentvoxcos-projects/v0-careerpilotpro21)**

## Build your app

Continue building your app on:

**[https://v0.dev/chat/projects/Fllyi5Gyj9D](https://v0.dev/chat/projects/Fllyi5Gyj9D)**

## How It Works

1. Create and modify your project using [v0.dev](https://v0.dev)
2. Deploy your chats from the v0 interface
3. Changes are automatically pushed to this repository
4. Vercel deploys the latest version from this repository
[V0_FILE]typescriptreact:file="app/client-page.tsx" isMerged="true"
"use client"

import dynamic from "next/dynamic"

// Skeleton loader amélioré
function SkeletonLoader() {
  return (
    <div className="min-h-screen bg-white-serene">
      {/* Header skeleton */}
      <div className="border-b border-gray-200 bg-white-serene">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            {/* Logo skeleton */}
            <div className="h-10 w-40 bg-gray-200 rounded-md animate-pulse"></div>

{/* Navigation skeleton */}
            <div className="hidden md:flex space-x-6">
              {[1, 2, 3, 4, 5].map((i) => (
                <div key={i} className="h-4 w-20 bg-gray-200 rounded-md animate-pulse"></div>
              ))}
            </div>

{/* Mobile menu button skeleton */}
            <div className="md:hidden h-8 w-8 bg-gray-200 rounded-md animate-pulse"></div>
          </div>
        </div>
      </div>

{/* Hero section skeleton */}
      <div className="pt-24 pb-16 bg-gradient-to-br from-ivory via-white-serene to-lime-smoky/10">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            {/* Hero text content skeleton */}
            <div className="space-y-6">
              <div className="h-8 w-48 bg-gray-200 rounded-full animate-pulse"></div>
              <div className="h-12 w-full bg-gray-200 rounded-lg animate-pulse"></div>
              <div className="h-12 w-3/4 bg-gray-200 rounded-lg animate-pulse"></div>
              <div className="h-6 w-5/6 bg-gray-200 rounded-md animate-pulse"></div>
              <div className="h-6 w-4/6 bg-gray-200 rounded-md animate-pulse"></div>

{/* CTA buttons skeleton */}
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="h-14 w-48 bg-gray-300 rounded-xl animate-pulse"></div>
                <div className="h-14 w-48 bg-gray-200 rounded-xl animate-pulse"></div>
              </div>
            </div>

{/* Hero image skeleton */}
            <div className="relative">
              {/* Simulating the slideshow with overlapping rectangles */}
              <div className="absolute top-0 left-0 h-64 w-64 bg-gray-200 rounded-lg animate-pulse transform rotate-3"></div>
              <div className="absolute top-10 left-10 h-64 w-64 bg-gray-300 rounded-lg animate-pulse transform -rotate-2"></div>
              <div className="absolute top-20 left-20 h-64 w-64 bg-gray-200 rounded-lg animate-pulse transform rotate-1"></div>
            </div>
          </div>
        </div>
      </div>

{/* Features section skeleton */}
      <div className="py-16 bg-white-serene">
        <div className="container mx-auto px-6">
          {/* Section title skeleton */}
          <div className="text-center mb-12">
            <div className="h-8 w-48 bg-gray-200 rounded-full mx-auto animate-pulse mb-4"></div>
            <div className="h-10 w-96 bg-gray-200 rounded-lg mx-auto animate-pulse"></div>
            <div className="h-6 w-80 bg-gray-200 rounded-md mx-auto animate-pulse mt-4"></div>
          </div>

{/* Features grid skeleton */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="bg-gray-100 rounded-xl p-6 animate-pulse">
                <div className="h-10 w-10 bg-gray-200 rounded-full mb-4"></div>
                <div className="h-6 w-36 bg-gray-200 rounded-md mb-3"></div>
                <div className="h-4 w-full bg-gray-200 rounded-md mb-2"></div>
                <div className="h-4 w-5/6 bg-gray-200 rounded-md mb-2"></div>
                <div className="h-4 w-4/6 bg-gray-200 rounded-md"></div>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Services section skeleton */}
      <div className="py-16 bg-gradient-to-b from-white-serene via-ivory/50 to-white-serene">
        <div className="container mx-auto px-6">
          {/* Section title skeleton */}
          <div className="text-center mb-12">
            <div className="h-10 w-96 bg-gray-200 rounded-lg mx-auto animate-pulse"></div>
            <div className="h-6 w-80 bg-gray-200 rounded-md mx-auto animate-pulse mt-4"></div>
          </div>

{/* Pricing cards skeleton */}
          <div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {[1, 2, 3].map((i) => (
              <div key={i} className="bg-white-serene rounded-3xl p-8 shadow-xl animate-pulse">
                <div className="text-center mb-6">
                  <div className="h-8 w-32 bg-gray-200 rounded-md mx-auto mb-2"></div>
                  <div className="h-6 w-48 bg-gray-200 rounded-md mx-auto mb-4"></div>
                  <div className="h-4 w-full bg-gray-200 rounded-md mx-auto"></div>
                </div>

<div className="h-12 w-full bg-gray-200 rounded-xl"></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

// Import dynamique du composant client (sans SSR)
const CareerPilotProClient = dynamic(() => import("@/components/career-pilot-pro-client"), {
  ssr: false, // Désactive le rendu côté serveur pour ce composant
  loading: () => <SkeletonLoader />,
})

export default function ClientPage() {
  return <CareerPilotProClient />
}
[V0_FILE]typescriptreact:file="app/comment-ca-se-passe/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard-roi/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/formation-infographie/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="min-h-screen bg-gray-50 pt-32 pb-20">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto mb-12 text-center">
          <Skeleton className="h-12 w-3/4 mx-auto mb-6" />
          <Skeleton className="h-6 w-full mx-auto" />
          <Skeleton className="h-6 w-5/6 mx-auto mt-2" />
        </div>

<div className="mt-16 max-w-2xl mx-auto text-center">
          <Skeleton className="h-8 w-64 mx-auto mb-4" />
          <Skeleton className="h-4 w-full mx-auto" />
          <Skeleton className="h-4 w-5/6 mx-auto mt-2" />
          <Skeleton className="h-12 w-48 mx-auto mt-8 rounded-xl" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/formation-simple/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/formation-visuelle/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="min-h-screen bg-ivory p-6">
      <div className="pt-24">
        <div className="container mx-auto">
          <div className="flex flex-col items-center mb-12">
            <Skeleton className="h-12 w-3/4 max-w-md mb-4" />
            <Skeleton className="h-6 w-2/3 max-w-sm" />
          </div>

<div className="mt-16 max-w-3xl mx-auto">
            <Skeleton className="h-8 w-2/3 max-w-md mx-auto mb-4" />
            <Skeleton className="h-4 w-full max-w-lg mx-auto mb-2" />
            <Skeleton className="h-4 w-full max-w-md mx-auto mb-6" />
            <Skeleton className="h-12 w-40 mx-auto rounded-lg" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/formation/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/notre-methodologie/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import ClientPage from "./client-page"

export default function HomePage() {
  return <ClientPage />
}
[V0_FILE]typescriptreact:file="app/quiz/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import {
  Clock,
  Users,
  Briefcase,
  Building,
  TrendingUp,
  Lightbulb,
  Target,
  Rocket,
  CheckCircle,
  ChevronLeft,
  ChevronRight,
} from "lucide-react"
import Link from "next/link"

const quizSteps = [
  {
    id: 1,
    question: "Combien d'heures passez-vous en recherche par dossier en moyenne ?",
    options: [
      { text: "Moins de 5h", value: "lt5" },
      { text: "5-10h", value: "5-10" },
      { text: "10-15h", value: "10-15" },
      { text: "Plus de 15h", value: "gt15" },
    ],
    icon: Clock,
  },
  {
    id: 2,
    question: "Quel est votre profil principal ?",
    options: [
      { text: "Coach indépendant", value: "coach", icon: Users },
      { text: "Cabinet d'outplacement", value: "outplacement", icon: Briefcase },
      { text: "DRH / Responsable Mobilité en entreprise", value: "hr", icon: Building },
      { text: "Consultant en évolution professionnelle", value: "consultant", icon: Lightbulb },
    ],
    icon: Users,
  },
  {
    id: 3,
    question: "Quelle est votre priorité actuelle pour votre activité ?",
    options: [
      { text: "Gagner du temps", value: "time", icon: Clock },
      { text: "Améliorer la qualité de mes accompagnements", value: "quality", icon: Target },
      { text: "Accélérer le placement de mes clients", value: "placement", icon: Rocket },
      { text: "Développer mon volume d'activité", value: "growth", icon: TrendingUp },
    ],
    icon: Target,
  },
]

const serviceRecommendations = {
  fondation: {
    name: "Fondation",
    description: "Idéal pour structurer vos accompagnements et gagner en efficacité sur les dossiers standards.",
    roiBase: 150,
  },
  momentum: {
    name: "Momentum",
    description: "Parfait pour accélérer la transition de vos clients et optimiser votre personal branding.",
    roiBase: 220,
  },
  premium: {
    name: "Premium",
    description:
      "La solution complète pour un changement fondamental et une collaboration continue à haute valeur ajoutée.",
    roiBase: 280,
  },
}

type Answer = string | null
type Answers = {
  q1: Answer
  q2: Answer
  q3: Answer
}

const initialAnswers: Answers = { q1: null, q2: null, q3: null }

export default function QualificationQuizPage() {
  const [currentStep, setCurrentStep] = useState(1)
  const [answers, setAnswers] = useState<Answers>(initialAnswers)
  const [recommendedService, setRecommendedService] = useState<keyof typeof serviceRecommendations | null>(null)
  const [estimatedROI, setEstimatedROI] = useState<number | null>(null)

useEffect(() => {
    const storedAnswers = localStorage.getItem("careerPilotQuizAnswers")
    if (storedAnswers) {
      setAnswers(JSON.parse(storedAnswers))
    }
  }, [])

useEffect(() => {
    localStorage.setItem("careerPilotQuizAnswers", JSON.stringify(answers))
  }, [answers])

const handleSelectOption = (questionKey: keyof Answers, value: string) => {
    setAnswers((prev) => ({ ...prev, [questionKey]: value }))
  }

const nextStep = () => {
    if (currentStep < quizSteps.length) {
      setCurrentStep(currentStep + 1)
    } else if (currentStep === quizSteps.length) {
      // Calculate recommendation
      calculateRecommendation()
      setCurrentStep(currentStep + 1) // Move to results view
    }
  }

const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
    }
  }

const calculateRecommendation = () => {
    let score = 0
    // Q1: Time
    if (answers.q1 === "lt5") score += 1
    else if (answers.q1 === "5-10") score += 2
    else if (answers.q1 === "10-15") score += 3
    else if (answers.q1 === "gt15") score += 4

// Q2: Profile
    if (answers.q2 === "coach") score += 2
    else if (answers.q2 === "consultant") score += 2
    else if (answers.q2 === "outplacement") score += 3
    else if (answers.q2 === "hr") score += 4

// Q3: Priority
    if (answers.q3 === "quality") score += 2
    else if (answers.q3 === "time") score += 3
    else if (answers.q3 === "placement") score += 4
    else if (answers.q3 === "growth") score += 4

let serviceKey: keyof typeof serviceRecommendations
    if (score <= 6) {
      serviceKey = "fondation"
    } else if (score <= 9) {
      serviceKey = "momentum"
    } else {
      serviceKey = "premium"
    }
    setRecommendedService(serviceKey)

const baseRoi = serviceRecommendations[serviceKey].roiBase
    const calculatedRoi = baseRoi + score * 5 // Add 5% ROI for each score point
    setEstimatedROI(calculatedRoi)
  }

const resetQuiz = () => {
    setAnswers(initialAnswers)
    setCurrentStep(1)
    setRecommendedService(null)
    setEstimatedROI(null)
    localStorage.removeItem("careerPilotQuizAnswers")
  }

const progress = (currentStep / (quizSteps.length + 1)) * 100
  const currentQuestionData = quizSteps[currentStep - 1]
  const isCurrentStepValid =
    currentStep <= quizSteps.length ? answers[`q${currentStep}` as keyof Answers] !== null : true

const pageVariants = {
    initial: { opacity: 0, x: 50 },
    in: { opacity: 1, x: 0 },
    out: { opacity: 0, x: -50 },
  }

const pageTransition = {
    type: "tween",
    ease: "anticipate",
    duration: 0.5,
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-stone-100 to-white flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 font-sans">
      <Card className="w-full max-w-2xl shadow-2xl rounded-xl overflow-hidden">
        <CardHeader className="bg-slate-deep text-white-serene p-6">
          <div className="flex justify-between items-center mb-4">
            <CardTitle className="text-2xl font-montserrat">Votre Diagnostic Personnalisé</CardTitle>
            {currentStep <= quizSteps.length && (
              <span className="text-sm font-semibold bg-white-serene/20 px-3 py-1 rounded-full">
                Étape {currentStep}/{quizSteps.length}
              </span>
            )}
          </div>
          <Progress value={progress} className="w-full h-2 [&>div]:bg-gold-sienna" />
        </CardHeader>

<CardContent className="p-6 sm:p-8">
          <AnimatePresence mode="wait">
            {currentStep <= quizSteps.length && currentQuestionData && (
              <motion.div
                key={currentStep}
                initial="initial"
                animate="in"
                exit="out"
                variants={pageVariants}
                transition={pageTransition}
                className="space-y-6"
              >
                <h2 className="text-xl sm:text-2xl font-semibold text-slate-deep flex items-start">
                  <currentQuestionData.icon className="w-7 h-7 text-primary mr-3 mt-1 flex-shrink-0" />
                  {currentQuestionData.question}
                </h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {currentQuestionData.options.map((option) => (
                    <motion.button
                      key={option.value}
                      onClick={() => handleSelectOption(`q${currentStep}` as keyof Answers, option.value)}
                      className={`p-4 sm:p-5 border-2 rounded-lg text-left transition-all duration-200 ease-in-out flex items-center space-x-3
                        ${
                          answers[`q${currentStep}` as keyof Answers] === option.value
                            ? "bg-primary/10 border-primary ring-2 ring-primary shadow-lg"
                            : "bg-white hover:bg-stone-50 border-stone-300 hover:border-primary/70"
                        }`}
                      whileHover={{ scale: 1.03 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      {option.icon && (
                        <option.icon
                          className={`w-6 h-6 flex-shrink-0 ${answers[`q${currentStep}` as keyof Answers] === option.value ? "text-primary" : "text-slate-500"}`}
                        />
                      )}
                      <span
                        className={`font-medium ${answers[`q${currentStep}` as keyof Answers] === option.value ? "text-primary" : "text-slate-700"}`}
                      >
                        {option.text}
                      </span>
                    </motion.button>
                  ))}
                </div>
              </motion.div>
            )}

{currentStep > quizSteps.length && recommendedService && serviceRecommendations[recommendedService] && (
              <motion.div
                key="results"
                initial="initial"
                animate="in"
                exit="out"
                variants={pageVariants}
                transition={pageTransition}
                className="text-center space-y-6"
              >
                <CheckCircle className="w-16 h-16 text-green-500 mx-auto" />
                <h2 className="text-2xl sm:text-3xl font-bold text-slate-deep font-montserrat">
                  Votre Recommandation Personnalisée
                </h2>

<div className="bg-primary/5 p-6 rounded-lg border border-primary/20">
                  <h3 className="text-xl font-semibold text-primary mb-2">
                    {serviceRecommendations[recommendedService].name}
                  </h3>
                  <p className="text-slate-600 mb-4">{serviceRecommendations[recommendedService].description}</p>
                  {estimatedROI !== null && (
                    <p className="text-2xl font-bold text-green-600">
                      Estimation du ROI : <span className="animate-pulse">{estimatedROI}%</span>
                    </p>
                  )}
                </div>

<p className="text-slate-600">
                  Cette recommandation est basée sur vos réponses. Pour une analyse plus approfondie et découvrir
                  comment CareerPilotPro peut transformer votre activité :
                </p>
                <Button
                  size="lg"
                  className="w-full sm:w-auto bg-gold-sienna hover:bg-gold-sienna/90 text-white-serene text-base"
                  onClick={() => alert("Redirection vers formulaire de contact / prise de RDV")}
                >
                  Recevoir mon analyse gratuite
                </Button>
                <Button variant="link" onClick={resetQuiz} className="text-primary">
                  Recommencer le quiz
                </Button>
              </motion.div>
            )}
          </AnimatePresence>
        </CardContent>

<div className="p-6 bg-stone-50 border-t border-stone-200 flex justify-between items-center">
          <Button variant="outline" onClick={prevStep} disabled={currentStep === 1} className="flex items-center">
            <ChevronLeft className="w-4 h-4 mr-1" />
            Précédent
          </Button>
          {currentStep <= quizSteps.length ? (
            <Button
              onClick={nextStep}
              disabled={!isCurrentStepValid}
              className="bg-primary hover:bg-primary/90 flex items-center"
            >
              {currentStep === quizSteps.length ? "Voir mes résultats" : "Suivant"}
              <ChevronRight className="w-4 h-4 ml-1" />
            </Button>
          ) : (
            <Link href="/" passHref>
              <Button className="bg-primary hover:bg-primary/90">Retour à l'accueil</Button>
            </Link>
          )}
        </div>
      </Card>
      <p className="text-center text-xs text-slate-500 mt-6">
        Propulsé par CareerPilotPro |{" "}
        <Link href="/privacy" className="hover:underline">
          Politique de confidentialité
        </Link>
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ressources/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/comparison-modal.tsx" isMerged="true"
"use client"
import { TrendingUp, Clock, Users, Target, Zap } from "lucide-react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts"

interface ComparisonModalProps {
  isOpen: boolean
  onClose: () => void
  useColors400?: boolean
}

const ComparisonModal = ({ isOpen, onClose, useColors400 }: ComparisonModalProps) => {
  // Données pour les graphiques
  const employersData = [
    {
      name: "Employeurs Identifiés",
      traditional: 17.5,
      ai: 50,
    },
  ]

const qualityData = [
    { name: "Méthode Traditionnelle", value: 30, color: "#B8860B" }, // gold-sienna-400
    { name: "IA Career Intelligence Pack", value: 70, color: "#788D63" }, // tilleul-dense-400
  ]

const radarData = [
    {
      subject: "Nombre d'Employeurs",
      traditional: 35,
      ai: 90,
    },
    {
      subject: "Qualité des Données",
      traditional: 30,
      ai: 95,
    },
    {
      subject: "Mise à Jour",
      traditional: 20,
      ai: 100,
    },
    {
      subject: "Analyse Prédictive",
      traditional: 10,
      ai: 95,
    },
    {
      subject: "Taux de Réussite",
      traditional: 40,
      ai: 85,
    },
    {
      subject: "Rapidité",
      traditional: 30,
      ai: 90,
    },
    {
      subject: "Satisfaction Client",
      traditional: 35,
      ai: 90,
    },
  ]

const insights = [
    {
      value: "+35%",
      label: "Taux de Réussite Placement",
      icon: Target,
      color: "text-green-500",
    },
    {
      value: "-40%",
      label: "Temps de Recherche",
      icon: Clock,
      color: "text-blue-500",
    },
    {
      value: "+60%",
      label: "Satisfaction Client",
      icon: Users,
      color: "text-purple-500",
    },
    {
      value: "+167%",
      label: "Plus d'Employeurs Qualifiés",
      icon: TrendingUp,
      color: "text-gold-sienna-400",
    },
  ]

const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-white p-3 border border-gray-200 rounded-lg shadow-lg">
          <p className="font-semibold text-slate-deep">{label}</p>
          {payload.map((entry: any, index: number) => (
            <p key={index} style={{ color: entry.color }} className="text-sm">
              {entry.dataKey === "traditional" ? "Méthode Traditionnelle" : "IA Career Intelligence Pack"}:{" "}
              {entry.value}
            </p>
          ))}
        </div>
      )
    }
    return null
  }

return (
    <div className="w-full h-full">
      {/* Remove the overlay and modal wrapper, show content directly */}
      <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 h-full overflow-y-auto">
        {/* Header - simplified for embedded view */}
        <div className="mb-6">
          <h3 className="text-2xl font-bold font-montserrat text-slate-deep mb-2">Analyse Comparative</h3>
          <p className="text-gray-refined hidden">Outils Traditionnels vs Career Intelligence Pack</p>
        </div>

{/* Legend */}
        <div className="flex justify-center gap-6 mb-6">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-[#B8860B] rounded"></div>
            <span className="text-xs text-gray-refined">Méthode Traditionnelle</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-[#788D63] rounded"></div>
            <span className="text-xs text-gray-refined">Career Intelligence Pack</span>
          </div>
        </div>

{/* Compact Charts Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
          {/* Employeurs Chart - Compact */}
          <div className="bg-white rounded-xl p-4 shadow-md border border-gray-100">
            <h4 className="text-lg font-bold text-slate-deep mb-3 text-center">Opportunités Identifiées</h4>
            <div className="h-48">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={employersData} margin={{ top: 10, right: 20, left: 10, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                  <XAxis dataKey="name" tick={{ fontSize: 10 }} />
                  <YAxis domain={[0, 60]} tick={{ fontSize: 10 }} />
                  <Tooltip content={<CustomTooltip />} />
                  <Bar dataKey="traditional" fill="#B8860B" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="ai" fill="#788D63" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

{/* Quality Chart - Compact */}
          <div className="bg-white rounded-xl p-4 shadow-md border border-gray-100">
            <h4 className="text-lg font-bold text-slate-deep mb-3 text-center">Repositionnements < 3 mois</h4>
            <div className="h-48">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={qualityData}
                    cx="50%"
                    cy="50%"
                    innerRadius={40}
                    outerRadius={80}
                    paddingAngle={5}
                    dataKey="value"
                  >
                    {qualityData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

{/* Key Insights - Compact */}
        <div className="bg-gradient-to-r from-gold-sienna/10 via-tilleul-dense/10 to-blue-slate/10 rounded-xl p-4">
          <h4 className="text-lg font-bold text-slate-deep mb-3 text-center flex items-center justify-center gap-2">
            <Zap className="w-5 h-5 text-gold-sienna-400" />
            Gains de Performance
          </h4>

<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
            {insights.map((insight, index) => (
              <div
                key={index}
                className="bg-white/80 backdrop-blur-sm rounded-lg p-3 text-center border border-gray-200"
              >
                <div className="flex justify-center mb-2">
                  <insight.icon className={`w-5 h-5 ${insight.color}`} />
                </div>
                <div className="text-xl font-bold mb-1 text-slate-deep">{insight.value}</div>
                <div className="text-xs text-gray-refined">{insight.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ComparisonModal
[V0_FILE]typescriptreact:file="components/dashboard-previews.tsx" isMerged="true"
export const AnalysisPreview = () => (
  <div className="p-4 border rounded-lg bg-slate-50 text-slate-700">
    <h4 className="font-semibold mb-2">Analyse Express Content</h4>
    <p className="text-sm">
      Detailed content for Analyse Express would go here. This might include charts, key figures, and summaries,
      demonstrating the quick insights provided.
    </p>
    <div className="mt-3 space-y-2">
      <div className="h-2 bg-gold-sienna/20 rounded w-3/4"></div>
      <div className="h-2 bg-blue-slate/20 rounded w-1/2"></div>
      <div className="h-2 bg-tilleul-dense/20 rounded w-2/3"></div>
    </div>
  </div>
)

export const PlaybookPreview = () => (
  <div className="p-4 border rounded-lg bg-slate-50 text-slate-700">
    <h4 className="font-semibold mb-2">Career Intelligence Pack Content</h4>
    <p className="text-sm">
      Content showcasing the comprehensive Career Intelligence Pack, perhaps with steps, timelines, and resource
      examples. More extensive than the express analysis.
    </p>
    <div className="mt-3 grid grid-cols-2 gap-2">
      <div className="h-8 bg-gold-sienna/20 rounded"></div>
      <div className="h-8 bg-blue-slate/20 rounded"></div>
      <div className="h-8 bg-tilleul-dense/20 rounded"></div>
      <div className="h-8 bg-ochre-smoky/20 rounded"></div>
    </div>
  </div>
)

export const DashboardLivePreview = () => (
  <div className="p-4 border rounded-lg bg-slate-50 text-slate-700">
    <h4 className="font-semibold mb-2">Dashboard Live Content</h4>
    <p className="text-sm">
      A mock-up or key elements of what the live dashboard would display, emphasizing real-time data and interactive
      elements.
    </p>
    <div className="mt-3 flex items-center justify-between">
      <div className="flex space-x-2">
        <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
        <span className="text-xs">Live</span>
      </div>
      <div className="text-xs text-gray-500">Temps réel</div>
    </div>
  </div>
)
[V0_FILE]typescriptreact:file="components/final-cta-comment-ca-marche.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Zap, ShieldCheck } from "lucide-react"

interface FinalCtaProps {
  onStartFirstPack: () => void
  onScheduleDemo: () => void
}

const avatarUrls = [
  "/placeholder.svg?height=40&width=40",
  "/placeholder.svg?height=40&width=40",
  "/placeholder.svg?height=40&width=40",
  "/placeholder.svg?height=40&width=40",
  "/placeholder.svg?height=40&width=40",
]

export default function FinalCtaCommentCaMarche({ onStartFirstPack, onScheduleDemo }: FinalCtaProps) {
  const sectionVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
  }

return (
    <section className="py-20 md:py-32 bg-gradient-to-br from-slate-deep to-pearl-graphite text-white-serene">
      <motion.div
        className="container mx-auto px-6 text-center max-w-3xl"
        variants={sectionVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.3 }}
      >
        <motion.h2 variants={itemVariants} className="text-4xl md:text-5xl font-bold mb-6 font-montserrat">
          Prêt à <span className="text-gold-sienna">tester</span> sur votre prochain dossier ?
        </motion.h2>
        <motion.p variants={itemVariants} className="text-lg md:text-xl text-white-serene/80 mb-10">
          Découvrez votre gain de temps et l'impact sur vos résultats en seulement 48h.
        </motion.p>

<motion.div variants={itemVariants} className="mb-8">
          <Button
            size="xl"
            className="bg-white-serene text-slate-deep hover:bg-white-serene/90 font-semibold text-lg px-12 py-8 shadow-lg hover:shadow-xl transition-all duration-300 w-full sm:w-auto"
            onClick={onStartFirstPack}
          >
            Démarrer mon premier pack
          </Button>
        </motion.div>

<motion.div variants={itemVariants} className="mb-10">
          <Button
            variant="link"
            className="text-white-serene/80 hover:text-white-serene underline text-md"
            onClick={onScheduleDemo}
          >
            Ou planifier une démo gratuite de 15 minutes
          </Button>
        </motion.div>

<motion.div variants={itemVariants} className="space-y-5">
          <div className="inline-flex items-center bg-gold-sienna/20 text-gold-sienna text-sm font-medium px-4 py-2 rounded-full">
            <Zap className="w-4 h-4 mr-2 animate-pulse" />
            47 professionnels ont commencé cette semaine
          </div>

<div className="flex items-center justify-center space-x-2 text-white-serene/70 text-sm">
            <ShieldCheck className="w-4 h-4 text-tilleul-dense" />
            <span>Satisfait ou remboursé</span>
            <span className="text-white-serene/40">•</span>
            <span>Sans engagement</span>
          </div>

<div className="flex justify-center items-center space-x-[-10px] mt-4">
            {avatarUrls.map((url, index) => (
              <motion.img
                key={index}
                src={url}
                alt={`Client avatar ${index + 1}`}
                className="w-10 h-10 rounded-full border-2 border-pearl-graphite object-cover"
                initial={{ opacity: 0, scale: 0.5 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.5 + index * 0.1, type: "spring", stiffness: 100 }}
              />
            ))}
            <div className="w-10 h-10 rounded-full border-2 border-pearl-graphite bg-slate-deep flex items-center justify-center text-xs font-semibold text-white-serene">
              +150
            </div>
          </div>
          <motion.div variants={itemVariants} className="mt-6 text-center text-xs text-white-serene/60 italic">
            "CareerPilotPro a divisé par 10 mon temps de recherche. Indispensable !" - Sophie D., Coach Carrière
          </motion.div>
        </motion.div>
      </motion.div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/flexible-engagement-visual.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Calendar, Package, Zap, HandCoins, CheckCircle, Lock, Unlock } from "lucide-react"

export default function FlexibleEngagementVisual() {
  return (
    <div className="space-y-6">
      <div className="bg-gradient-to-br from-ivory/80 to-white-serene rounded-2xl p-6 shadow-md">
        {/* En-tête avec titre et sous-titre */}
        <div className="flex items-center mb-6">
          <div className="bg-gold-sienna/10 p-3 rounded-full mr-4">
            <Unlock className="w-6 h-6 text-gold-sienna" />
          </div>
          <div>
            <h4 className="text-xl font-bold text-slate-deep">Modèle sans engagement</h4>
            <p className="text-gray-refined">Flexibilité totale adaptée à vos besoins</p>
          </div>
        </div>

{/* Visualisation principale */}
        <div className="relative">
          {/* Ligne de temps */}
          <div className="absolute left-1/2 transform -translate-x-1/2 top-0 bottom-0 w-1 bg-gray-refined/20 rounded-full"></div>

{/* Commande flexible */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="relative z-10 mb-12"
          >
            <div className="flex flex-col md:flex-row items-center">
              <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-6">
                <div className="relative">
                  <div className="w-16 h-16 bg-white-serene rounded-full border-2 border-gold-sienna flex items-center justify-center shadow-md">
                    <Calendar className="w-8 h-8 text-gold-sienna" />
                  </div>
                  <div className="absolute -right-1 -bottom-1 w-8 h-8 bg-gold-sienna rounded-full flex items-center justify-center text-white-serene font-bold shadow-sm">
                    1
                  </div>
                </div>
              </div>

<div className="bg-white-serene rounded-xl p-5 shadow-md border border-gold-sienna/10 md:ml-6 w-full">
                <h5 className="font-semibold text-slate-deep text-lg mb-3">Commandez selon vos besoins réels</h5>

<div className="grid grid-cols-3 gap-3 mb-4">
                  {[1, 10, 100].map((num, i) => (
                    <motion.div
                      key={i}
                      initial={{ scale: 0.8, opacity: 0 }}
                      animate={{ scale: 1, opacity: 1 }}
                      transition={{ delay: i * 0.2, duration: 0.4 }}
                      className={`rounded-lg p-3 flex flex-col items-center justify-center text-center ${
                        i === 0 ? "bg-blue-slate/10" : i === 1 ? "bg-gold-sienna/10" : "bg-tilleul-dense/10"
                      }`}
                    >
                      <span
                        className={`text-2xl font-bold ${
                          i === 0 ? "text-blue-slate" : i === 1 ? "text-gold-sienna" : "text-tilleul-dense"
                        }`}
                      >
                        {num}
                      </span>
                      <span className="text-xs text-gray-refined">cahier{num > 1 ? "s" : ""}/mois</span>
                    </motion.div>
                  ))}
                </div>

<div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-500 mr-2 flex-shrink-0" />
                  <p className="text-gray-refined text-sm">
                    Aucun minimum requis, adaptez vos commandes à votre activité
                  </p>
                </div>
              </div>
            </div>
          </motion.div>

{/* Packs pré-payés */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="relative z-10 mb-12"
          >
            <div className="flex flex-col md:flex-row items-center">
              <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-6 order-1 md:order-2">
                <div className="relative">
                  <div className="w-16 h-16 bg-white-serene rounded-full border-2 border-tilleul-dense flex items-center justify-center shadow-md">
                    <Package className="w-8 h-8 text-tilleul-dense" />
                  </div>
                  <div className="absolute -right-1 -bottom-1 w-8 h-8 bg-tilleul-dense rounded-full flex items-center justify-center text-white-serene font-bold shadow-sm">
                    2
                  </div>
                </div>
              </div>

<div className="bg-white-serene rounded-xl p-5 shadow-md border border-tilleul-dense/10 md:mr-6 w-full order-2 md:order-1">
                <h5 className="font-semibold text-slate-deep text-lg mb-3">Packs pré-payés optionnels</h5>

<div className="relative mb-6 p-4 bg-gradient-to-r from-tilleul-dense/5 to-gold-sienna/5 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium text-gray-refined">Remises volumétriques</span>
                    <span className="text-sm font-bold text-gold-sienna">Jusqu'à 15%</span>
                  </div>

<div className="absolute -top-3 right-3 bg-white-serene px-3 py-1 rounded-full text-xs font-medium text-tilleul-dense border border-tilleul-dense/20 shadow-sm">
                    Valable 12 mois
                  </div>
                </div>

<div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-500 mr-2 flex-shrink-0" />
                  <p className="text-gray-refined text-sm">
                    Entièrement optionnels, uniquement si avantageux pour vous
                  </p>
                </div>
              </div>
            </div>
          </motion.div>

{/* Notre engagement */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.6 }}
            className="relative z-10"
          >
            <div className="flex flex-col md:flex-row items-center">
              <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-6">
                <div className="relative">
                  <div className="w-16 h-16 bg-white-serene rounded-full border-2 border-blue-slate flex items-center justify-center shadow-md">
                    <HandCoins className="w-8 h-8 text-blue-slate" />
                  </div>
                  <div className="absolute -right-1 -bottom-1 w-8 h-8 bg-blue-slate rounded-full flex items-center justify-center text-white-serene font-bold shadow-sm">
                    3
                  </div>
                </div>
              </div>

<div className="bg-white-serene rounded-xl p-5 shadow-md border border-blue-slate/10 md:ml-6 w-full">
                <h5 className="font-semibold text-slate-deep text-lg mb-3">Nos intérêts alignés avec les vôtres</h5>

<motion.div
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: 1 }}
                      className="text-center"
                    >
                      <p className="text-slate-deep font-medium">Nous devons prouver notre valeur à chaque dossier</p>
                    </motion.div>
                  </div>
                </div>

<div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-500 mr-2 flex-shrink-0" />
                  <p className="text-gray-refined text-sm">Vous ne payez que si vous êtes satisfait de nos services</p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>

{/* Résumé visuel */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.2, duration: 0.8 }}
          className="mt-8 bg-gradient-to-r from-slate-deep/5 to-gold-sienna/5 rounded-xl p-4 border border-gold-sienna/10"
        >
          <div className="flex flex-col sm:flex-row items-center justify-between">
            <div className="flex items-center mb-4 sm:mb-0">
              <div className="bg-white-serene p-2 rounded-full shadow-sm mr-3">
                <Unlock className="w-5 h-5 text-gold-sienna" />
              </div>
              <div>
                <h5 className="font-semibold text-slate-deep">Flexibilité totale</h5>
                <p className="text-sm text-gray-refined">Sans engagement de durée</p>
              </div>
            </div>

<div className="flex items-center">
              <div className="bg-white-serene p-2 rounded-full shadow-sm mr-3">
                <Lock className="w-5 h-5 text-red-500" />
              </div>
              <div className="relative">
                <h5 className="font-semibold text-slate-deep">Aucun volume minimum</h5>
                <p className="text-sm text-gray-refined">Commandez selon vos besoins</p>
                <div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white-serene text-xs font-bold">
                  ✕
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/impact-metrics-comment-ca-marche.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { TrendingUp, Users, Clock, CheckCircle, Percent } from "lucide-react"
import CountUp from "react-countup"

const metrics = [
  {
    value: 10,
    suffix: "min",
    label: "Temps de recherche / dossier",
    subLabel: "(vs 15h avant)",
    icon: Clock,
    color: "text-blue-slate",
    prevValue: 900,
  },
  {
    value: 280,
    suffix: "%",
    label: "ROI Moyen Constaté",
    subLabel: "Dès le premier mois",
    icon: TrendingUp,
    color: "text-gold-sienna",
  },
  {
    value: 200,
    suffix: "+",
    label: "Professionnels Utilisateurs",
    subLabel: "Experts en transition",
    icon: Users,
    color: "text-tilleul-dense",
  },
  {
    value: 37,
    suffix: "%",
    label: "Réduction Délai Placement",
    subLabel: "Accélération significative",
    icon: Percent,
    color: "text-red-500",
  }, // Using Percent as a placeholder
  {
    value: 93,
    suffix: "%",
    label: "Taux de Réussite",
    subLabel: "Des repositionnements",
    icon: CheckCircle,
    color: "text-green-500",
  },
]

export default function ImpactMetricsCommentCaMarche() {
  const sectionVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
  }
  const cardVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: (i: number) => ({
      opacity: 1,
      scale: 1,
      transition: { delay: i * 0.1, duration: 0.4, ease: "easeOut" },
    }),
  }

return (
    <section className="py-16 md:py-24 bg-ivory relative overflow-hidden">
      {/* Background pattern */}
      <div className="absolute inset-0 opacity-[0.03]">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern
              id="impact_pattern"
              patternUnits="userSpaceOnUse"
              width="60"
              height="60"
              patternTransform="scale(1) rotate(45)"
            >
              <circle cx="10" cy="10" r="1.5" fill="black" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#impact_pattern)" />
        </svg>
      </div>

<div className="container mx-auto px-6 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12 md:mb-16"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-slate-deep mb-4 font-montserrat">
            L'impact en <span className="text-gold-sienna">chiffres</span>
          </h2>
          <p className="text-lg text-gray-refined max-w-2xl mx-auto">
            Des résultats concrets qui transforment la pratique de nos clients.
          </p>
        </motion.div>

<motion.div
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 justify-center"
          variants={sectionVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.1 }}
        >
          {/* Central Metric */}
          <motion.div
            custom={0}
            variants={cardVariants}
            className="lg:col-span-1 sm:col-span-2 lg:row-start-1 lg:row-span-1 flex items-center justify-center p-2"
          >
            <div className="bg-white p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 text-center w-full max-w-xs transform hover:scale-105">
              <div className={`inline-block p-3 bg-tilleul-dense/10 rounded-full mb-3`}>
                <Users className={`w-8 h-8 text-tilleul-dense`} />
              </div>
              <div className={`text-4xl md:text-5xl font-bold text-tilleul-dense`}>
                <CountUp end={200} duration={2.5} suffix="+" enableScrollSpy scrollSpyOnce />
              </div>
              <p className="text-sm font-semibold text-slate-deep mt-1">Professionnels</p>
              <p className="text-xs text-gray-refined">Nous font confiance</p>
            </div>
          </motion.div>

{/* Other Metrics */}
          {metrics
            .filter((m) => m.label !== "Professionnels Utilisateurs")
            .map((metric, index) => (
              <motion.div
                key={metric.label}
                custom={index + 1} // Adjust delay for staggered animation
                variants={cardVariants}
                className="p-2"
              >
                <div className="bg-white p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 text-center transform hover:scale-105 h-full flex flex-col justify-center">
                  <div
                    className={`inline-block p-3 ${metric.color.replace("text-", "bg-")}/10 rounded-full mb-3 self-center`}
                  >
                    <metric.icon className={`w-7 h-7 ${metric.color}`} />
                  </div>
                  <div className={`text-3xl md:text-4xl font-bold ${metric.color}`}>
                    {metric.prevValue !== undefined ? (
                      <>
                        <CountUp
                          end={metric.prevValue}
                          duration={2.5}
                          formattingFn={(val) => `${val}h`}
                          enableScrollSpy
                          scrollSpyOnce
                        />
                        <span className="text-gray-400 mx-1 text-2xl">→</span>
                        <CountUp
                          end={metric.value}
                          duration={2.5}
                          suffix={metric.suffix}
                          enableScrollSpy
                          scrollSpyOnce
                        />
                      </>
                    ) : (
                      <CountUp end={metric.value} duration={2.5} suffix={metric.suffix} enableScrollSpy scrollSpyOnce />
                    )}
                  </div>
                  <p className="text-sm font-semibold text-slate-deep mt-1">{metric.label}</p>
                  {metric.subLabel && <p className="text-xs text-gray-refined">{metric.subLabel}</p>}
                </div>
              </motion.div>
            ))}
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-economic-context.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { TrendingUp, Users, Briefcase, Building } from "lucide-react" // Assuming icons for metrics

export default function SlideEconomicContext() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }

return (
    <motion.div className="h-full flex flex-col" variants={containerVariants} initial="hidden" animate="visible">
      <motion.h2 variants={itemVariants} className="text-2xl sm:text-3xl font-bold text-slate-800 mb-2 text-center">
        Contexte Économique IA - France 2025
      </motion.h2>
      <motion.p variants={itemVariants} className="text-sm text-slate-500 mb-6 sm:mb-8 text-center">
        L'économie française en 2025 est marquée par une forte croissance des compétences digitales et IA.
      </motion.p>

<motion.div variants={itemVariants} className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
        <MetricCard title="Investissements IA" value="5,2 Md€" change="(+28%)" icon={TrendingUp} />
        <MetricCard title="Start-ups IA Paris" value="450+" change="(+32%)" icon={Building} />
        <MetricCard title="Croissance prévue (2024-2027)" value="+25%" icon={Briefcase} />
        <MetricCard title="Emplois créés (Paris)" value="12K+" icon={Users} />
      </motion.div>

<motion.div
        variants={itemVariants}
        className="bg-gold-sienna-100 text-gold-sienna-700 dark:bg-gold-sienna-900 dark:text-gold-sienna-200 p-4 sm:p-6 rounded-xl shadow-md text-center"
      >
        <h3 className="text-base sm:text-lg font-semibold mb-1">Paris = épicentre européen de l'IA Business</h3>
        <p className="text-xs sm:text-sm">
          Plus de 70% des investissements IA en France sont concentrés à Paris, avec une forte présence des sièges
          européens des géants de l'IA.
        </p>
      </motion.div>

<motion.div variants={itemVariants} className="mt-auto pt-4 text-center">
        <h4 className="text-lg font-semibold text-text-primary mb-2">Initiatives Publiques Clés</h4>
        <div className="flex flex-col sm:flex-row justify-around text-sm text-text-secondary space-y-2 sm:space-y-0">
          <span>France 2030: 2 Md€ pour l'IA</span>
          <span>Appels à projets BPI France</span>
        </div>
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-feasibility-matrix.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"

const transitionsData = [
  {
    sector: "Sales Enablement AI",
    difficulty: "Moyenne",
    color: "bg-accent-ochre-400",
    duration: "3-6 mois",
    priority: "Haute",
  },
  {
    sector: "AI pour RH Tech",
    difficulty: "Faible",
    color: "bg-accent-green-400",
    duration: "2-4 mois",
    priority: "Haute",
  },
  {
    sector: "AI Product Management",
    difficulty: "Moyenne",
    color: "bg-accent-ochre-400",
    duration: "4-7 mois",
    priority: "Moyenne",
  },
  {
    sector: "Process Automation (AI)",
    difficulty: "Élevée",
    color: "bg-accent-alert-400",
    duration: "6-9 mois",
    priority: "Faible",
  },
]

const ChallengeItem = ({ type, challenge, remediation }: { type: string; challenge: string; remediation: string }) => (
  <div className="bg-accent-graphite-50 dark:bg-accent-graphite-800 p-3 rounded-lg">
    <h4 className="font-semibold text-text-primary text-sm">{type}</h4>
    <p className="text-xs text-text-secondary">
      <strong className="text-text-secondary">Challenge:</strong> {challenge}
    </p>
    <p className="text-xs text-accent-green-600">
      <strong className="text-accent-green-500">Remédiation:</strong> {remediation}
    </p>
  </div>
)

export default function SlideFeasibilityMatrix() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }

<motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        {transitionsData.map((item, index) => (
          <motion.div
            key={index}
            className="bg-card p-3 sm:p-4 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 transform hover:scale-105"
            whileHover={{ y: -3 }}
          >
            <h3 className="text-sm sm:text-base font-semibold text-text-primary mb-1">{item.sector}</h3>
            <div className="flex items-center text-xs sm:text-sm mb-1">
              <span className="mr-1.5">Difficulté:</span>
              <span className={`px-2 py-0.5 rounded-full text-white text-xs ${item.color}`}>{item.difficulty}</span>
            </div>
            <p className="text-xs sm:text-sm text-text-secondary">
              Durée estimée: <span className="font-medium">{item.duration}</span>
            </p>
            <p className="text-xs sm:text-sm text-text-secondary">
              Priorité: <span className="font-medium">{item.priority}</span>
            </p>
          </motion.div>
        ))}
      </motion.div>

<motion.div variants={itemVariants}>
        <h3 className="text-lg font-semibold text-text-primary mb-2 mt-2 text-center sm:text-left">
          Barrières et Challenges Identifiés
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <ChallengeItem
            type="Technique"
            challenge="Familiarité avec les algorithmes IA appliqués"
            remediation="Formation rapide sur les fondamentaux ML/LLM"
          />
          <ChallengeItem
            type="Positionnement"
            challenge="Se positionner 'AI Business Expert' vs. 'Data Scientist'"
            remediation="Branding LinkedIn adapté + storytelling"
          />
          <ChallengeItem
            type="Réseau"
            challenge="Accès aux décideurs AI parisiens"
            remediation="Intégration à des hubs AI + événements"
          />
          <ChallengeItem
            type="Culturel"
            challenge="Choc agile/scale-up très rapide"
            remediation="Préparation mindset Lean Startup"
          />
        </div>
      </motion.div>
      <motion.p variants={itemVariants} className="text-xs text-text-secondary mt-3 text-center">
        Considérations spécifiques pour un profil Senior Executive.
      </motion.p>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-personalized-recommendations.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { ArrowRight, CheckCircle } from "lucide-react"

const recommendations = [
  {
    sector: "Sales Enablement AI",
    match: "90%",
    reason: "Maîtrise des cycles de vente B2B complexes.",
    companies: "Gong.io, Outreach.io",
    color: "emerald",
  },
  {
    sector: "AI pour RH Tech",
    match: "85%",
    reason: "Ancien CHRO + leadership transformation digitale RH.",
    companies: "Phenom AI, SmartRecruiters",
    color: "sky",
  },
  {
    sector: "AI Product Management",
    match: "80%",
    reason: "Pilotage transversal de projets software + approche data-driven.",
    companies: "Aircall AI Labs, Meero",
    color: "purple",
  },
  {
    sector: "Business Process Automation (avec AI)",
    match: "75%",
    reason: "Vision processus métier, optimisation opérationnelle.",
    companies: "UiPath, Automation Anywhere",
    color: "red",
  },
  {
    sector: "AI-driven Customer Success & Retention",
    match: "70%",
    reason: "Expérience VP Operations + Management international.",
    companies: "Planhat, Gainsight",
    color: "blue",
  },
]

const colorMap = {
  emerald: "accent-green",
  sky: "accent-sky",
  purple: "accent-lavender",
  red: "accent-alert",
  blue: "accent-blue",
}

const RecommendationItem = ({ sector, match, reason, companies, color }: (typeof recommendations)[0]) => {
  const accentColor = colorMap[color as keyof typeof colorMap] || "accent-primary"
  return (
    <motion.div
      className="bg-card p-4 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-between group"
      whileHover={{ x: 5 }}
    >
      <div>
        <div className="flex items-center mb-1">
          <h3 className={`text-base sm:text-lg font-semibold text-text-primary mr-2`}>{sector}</h3>
          <span
            className={`text-xs font-bold px-2 py-0.5 rounded-full bg-${accentColor}-100 text-${accentColor}-600 flex items-center`}
          >
            <CheckCircle size={12} className="mr-1" /> {match} Match
          </span>
        </div>
        <p className="text-xs sm:text-sm text-text-secondary mb-1">{reason}</p>
        <p className="text-xs text-gold-sienna-600 font-medium">Exemples: {companies}</p>
      </div>
      <ArrowRight size={20} className={`text-accent-graphite-400 group-hover:text-gold-sienna-500 transition-colors`} />
    </motion.div>
  )
}

export default function SlidePersonalizedRecommendations() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { x: -20, opacity: 0 },
    visible: { x: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }
  return (
    <motion.div className="h-full flex flex-col" variants={containerVariants} initial="hidden" animate="visible">
      <motion.h2
        variants={itemVariants}
        className="text-2xl sm:text-3xl font-bold text-text-primary mb-6 sm:mb-8 text-center"
      >
        Top 5 Recommandations pour Votre Profil
      </motion.h2>
      <motion.p variants={itemVariants} className="text-sm text-text-secondary mb-6 text-center">
        Basé sur votre parcours Business/Management (Microsoft, ContentSquare) et scale-ups (Mollie, Greenhouse).
      </motion.p>
      <div className="space-y-3 sm:space-y-4">
        {recommendations.map((rec, index) => (
          <motion.div key={index} variants={itemVariants}>
            <RecommendationItem {...rec} />
          </motion.div>
        ))}
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-strategic-plan.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"

const timelineData = [
  {
    quarter: "T2 2025",
    title: "Acquisition fondamentaux",
    tasks: ["Formation INSEAD", "MàJ profil LinkedIn"],
    align: "left",
  },
  {
    quarter: "T3 2025",
    title: "Immersion écosystème",
    tasks: ["Formation MIT Sloan", "Vivatech (Networking)"],
    align: "right",
  },
  { quarter: "T4 2025", title: "Projets & réseaux", tasks: ["Formation ESCP", "Mission consulting"], align: "left" },
  {
    quarter: "T1 2026",
    title: "Candidatures & intégration",
    tasks: ["Candidatures scale-ups", "Intégration poste"],
    align: "right",
  },
]

export default function SlideStrategicPlan() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.15, delayChildren: 0.2 },
    },
  }
  const itemVariants = (align: string) => ({
    hidden: { opacity: 0, x: align === "left" ? -50 : 50 },
    visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 80 } },
  })

return (
    <motion.div className="h-full flex flex-col" variants={containerVariants} initial="hidden" animate="visible">
      <motion.h2
        variants={itemVariants("left")}
        className="text-2xl sm:text-3xl font-bold text-text-primary mb-8 text-center"
      >
        Plan Stratégique de Transition - 12 Mois
      </motion.h2>

<div className="relative flex-grow px-2 sm:px-4">
        {/* Central Line */}
        <div className="absolute top-0 bottom-0 left-1/2 w-1 bg-gold-sienna-300 rounded-full transform -translate-x-1/2"></div>

{timelineData.map((item, index) => (
          <motion.div
            key={item.quarter}
            variants={itemVariants(item.align)}
            className={`mb-6 sm:mb-8 flex ${item.align === "left" ? "justify-start" : "justify-end"}`}
          >
            <div className={`w-full sm:w-5/12 ${item.align === "left" ? "sm:pr-8" : "sm:pl-8"}`}>
              <div className="bg-card p-3 sm:p-4 rounded-xl shadow-lg relative">
                {/* Dot on the line */}
                <div
                  className={`absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-card border-2 border-gold-sienna-500 rounded-full z-10 
                              ${item.align === "left" ? "-right-3 sm:-right-[calc(2rem+2px)]" : "-left-3 sm:-left-[calc(2rem+2px)]"}`}
                ></div>
                <p className="text-xs font-semibold text-gold-sienna-600 mb-1">{item.quarter}</p>
                <h3 className="text-sm sm:text-base font-semibold text-text-primary mb-1.5">{item.title}</h3>
                <ul className="list-disc list-inside space-y-0.5">
                  {item.tasks.map((task) => (
                    <li key={task} className="text-xs text-text-secondary">
                      {task}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
      <motion.p variants={itemVariants("left")} className="text-xs text-text-secondary mt-4 text-center">
        Objectif final: Intégrer une scale-up AI à Paris dans un rôle exécutif.
      </motion.p>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-training-path.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Award, CheckCircle } from "lucide-react"

const trainingPhases = [
  {
    level: "Fondation",
    name: "AI For Business Leaders",
    institution: "INSEAD",
    modality: "Online (Self-paced)",
    comment: "Excellent pour Executive Mindset IA",
    duration: "6 sem",
  },
  {
    level: "Approfondissement",
    name: "Artificial Intelligence: Business Strategies and Applications",
    institution: "MIT Sloan Executive Education",
    modality: "Online (Cohort)",
    comment: "Forte valeur de marque internationale",
    duration: "8 sem",
  },
  {
    level: "Spécialisation",
    name: "AI and Machine Learning for Business",
    institution: "ESCP Business School",
    modality: "Présentiel Paris",
    comment: "Mise en pratique sur cas réels",
    duration: "3 jours",
  },
]

const certifications = [
  "Certification INSEAD AI Business Leader",
  'Certification MIT Sloan "AI Business Applications"',
  'Attestation Sciences Po "AI Responsible Leadership"',
]

export default function SlideTrainingPath() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }

<div className="flex-grow space-y-4 sm:space-y-6">
        {trainingPhases.map((phase, index) => (
          <motion.div
            key={phase.name}
            variants={itemVariants}
            className="bg-card p-4 rounded-xl shadow-lg relative pl-10 sm:pl-12 group"
          >
            <div
              className={`absolute left-3 sm:left-4 top-4 w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-bold ${index === 0 ? "bg-accent-lavender-500" : index === 1 ? "bg-gold-sienna-500" : "bg-accent-green-500"}`}
            >
              {index + 1}
            </div>
            {index < trainingPhases.length - 1 && (
              <div className="absolute left-[21px] sm:left-[23px] top-10 h-[calc(100%-1.5rem)] w-0.5 bg-accent-graphite-200 group-hover:bg-gold-sienna-300 transition-colors"></div>
            )}

<h3 className="text-sm sm:text-base font-semibold text-text-primary">
              {phase.level}: <span className="text-text-primary">{phase.name}</span>
            </h3>
            <p className="text-xs sm:text-sm text-text-secondary">
              {phase.institution} • {phase.modality} • {phase.duration}
            </p>
            <p className="text-xs text-text-secondary mt-1">{phase.comment}</p>
          </motion.div>
        ))}
      </div>

<motion.div variants={itemVariants} className="mt-6 sm:mt-8">
        <h3 className="text-base sm:text-lg font-semibold text-text-primary mb-2 flex items-center">
          <Award size={20} className="mr-2 text-gold-sienna-500" />
          Certifications Clés à Viser
        </h3>
        <ul className="space-y-1">
          {certifications.map((cert) => (
            <li key={cert} className="flex items-center text-xs sm:text-sm text-text-secondary">
              <CheckCircle size={14} className="mr-2 text-accent-green-500" /> {cert}
            </li>
          ))}
        </ul>
        <p className="text-xs text-gold-sienna-600 font-semibold mt-2 text-center sm:text-left">
          Positionnement immédiat "AI Business Executive" de haut niveau.
        </p>
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-value-added.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { CheckCircle, XCircle, TrendingUp } from "lucide-react"

export default function SlideValueAdded() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }

return (
    <motion.div
      className="h-full flex flex-col items-center justify-center"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      <motion.h2 variants={itemVariants} className="text-2xl sm:text-3xl font-bold text-text-primary mb-8 text-center">
        Valeur Ajoutée Démontrée
      </motion.h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 w-full max-w-3xl mb-8">
        <motion.div
          variants={itemVariants}
          className="bg-accent-alert-50 dark:bg-accent-alert-900 border-accent-alert-200 dark:border-accent-alert-700 p-4 sm:p-6 rounded-xl shadow-lg"
        >
          <h3 className="text-lg sm:text-xl font-semibold text-accent-alert-700 dark:text-accent-alert-300 mb-3 flex items-center">
            <XCircle size={22} className="mr-2" /> AVANT CareerPilotPro
          </h3>
          <ul className="space-y-2 text-sm sm:text-base text-accent-alert-600 dark:text-accent-alert-400">
            <li className="flex items-start">
              <XCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> 15-20 heures de recherche manuelle
            </li>
            <li className="flex items-start">
              <XCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Informations dispersées et non structurées
            </li>
            <li className="flex items-start">
              <XCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Données souvent obsolètes ou génériques
            </li>
            <li className="flex items-start">
              <XCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Risque de passer à côté d'opportunités clés
            </li>
          </ul>
        </motion.div>

<motion.div
          variants={itemVariants}
          className="bg-accent-green-50 dark:bg-accent-green-900 border-accent-green-200 dark:border-accent-green-700 p-4 sm:p-6 rounded-xl shadow-lg"
        >
          <h3 className="text-lg sm:text-xl font-semibold text-accent-green-700 dark:text-accent-green-300 mb-3 flex items-center">
            <CheckCircle size={22} className="mr-2" /> APRÈS CareerPilotPro
          </h3>
          <ul className="space-y-2 text-sm sm:text-base text-accent-green-600 dark:text-accent-green-400">
            <li className="flex items-start">
              <CheckCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Plan d'action complet en 48h
            </li>
            <li className="flex items-start">
              <CheckCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Analyse de +2000 sources en temps réel
            </li>
            <li className="flex items-start">
              <CheckCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Recommandations 100% personnalisées
            </li>
            <li className="flex items-start">
              <CheckCircle size={18} className="mr-2 mt-0.5 flex-shrink-0" /> Stratégie claire et actionnable
            </li>
          </ul>
        </motion.div>
      </div>

<motion.div
        variants={itemVariants}
        className="bg-gold-sienna-500 text-text-inverse px-6 py-3 rounded-full shadow-xl text-base sm:text-lg font-semibold flex items-center"
      >
        <TrendingUp size={24} className="mr-2.5" /> +280% ROI Prouvé
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/new-hero-comment-ca-marche.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Upload, Zap, Download, ArrowRight, Calculator } from "lucide-react"
import { Button } from "@/components/ui/button"

interface NewHeroProps {
  onShowExample: () => void
  onCalculateTimeSaving: () => void
}

const timelineSteps = [
  {
    step: 1,
    title: "ENVOYEZ",
    description: "Le profil",
    duration: "5 minutes",
    icon: Upload,
    bgColor: "bg-blue-slate/10",
    textColor: "text-blue-slate",
    borderColor: "border-blue-slate/30",
  },
  {
    step: 2,
    title: "ANALYSONS",
    description: "Nos experts",
    duration: "24-48h",
    icon: Zap,
    bgColor: "bg-gold-sienna/10",
    textColor: "text-gold-sienna",
    borderColor: "border-gold-sienna/30",
  },
  {
    step: 3,
    title: "RECEVEZ",
    description: "Votre plan",
    duration: "Actionnable",
    icon: Download,
    bgColor: "bg-tilleul-dense/10",
    textColor: "text-tilleul-dense",
    borderColor: "border-tilleul-dense/30",
  },
]

export default function NewHeroCommentCaMarche({ onShowExample, onCalculateTimeSaving }: NewHeroProps) {
  const sectionVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.2, delayChildren: 0.3 },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
  }

const timelineItemVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: (i: number) => ({
      opacity: 1,
      scale: 1,
      transition: { delay: i * 0.2, duration: 0.5, type: "spring", stiffness: 100 },
    }),
  }

return (
    <section className="py-20 md:py-32 bg-gradient-to-b from-stone-50 to-white">
      <motion.div
        className="container mx-auto px-6 text-center max-w-4xl"
        variants={sectionVariants}
        initial="hidden"
        animate="visible"
      >
        <motion.div
          variants={itemVariants}
          className="inline-block bg-tilleul-dense/10 text-tilleul-dense text-sm font-medium px-4 py-1.5 rounded-full mb-6"
        >
          Méthode éprouvée • 200+ clients
        </motion.div>
        <motion.h1
          variants={itemVariants}
          className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-deep mb-6 font-montserrat"
        >
          Comment ça marche en <span className="text-gold-sienna">3 étapes simples</span>
        </motion.h1>
        <motion.p variants={itemVariants} className="text-lg md:text-xl text-gray-refined mb-12 max-w-2xl mx-auto">
          De votre profil client à son nouveau poste en 48h chrono
        </motion.p>

{/* Timeline Visuelle */}
        <div className="grid md:grid-cols-3 gap-6 md:gap-4 mb-16 items-stretch">
          {timelineSteps.map((item, index) => (
            <motion.div
              key={item.step}
              custom={index}
              variants={timelineItemVariants}
              className={`relative p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 flex flex-col items-center text-center border-2 ${item.borderColor} ${item.bgColor}`}
            >
              <div className={`p-4 rounded-full ${item.bgColor} mb-4 inline-block`}>
                <item.icon className={`w-8 h-8 ${item.textColor}`} />
              </div>
              <h3 className={`text-sm font-bold uppercase ${item.textColor} mb-1`}>
                {item.step}. {item.title}
              </h3>
              <p className="text-slate-deep font-semibold text-lg mb-1">{item.description}</p>
              <p className={`text-sm ${item.textColor} font-medium`}>{item.duration}</p>
              {index < timelineSteps.length - 1 && (
                <div className="hidden md:block absolute top-1/2 -right-5 transform -translate-y-1/2">
                  <ArrowRight className="w-8 h-8 text-gray-300" />
                </div>
              )}
              {index < timelineSteps.length - 1 && (
                <div className="md:hidden my-4">
                  <ArrowRight className="w-6 h-6 text-gray-300 rotate-90 mx-auto" />
                </div>
              )}
            </motion.div>
          ))}
        </div>

<motion.div
          variants={itemVariants}
          className="space-y-4 sm:space-y-0 sm:flex sm:flex-row sm:justify-center sm:space-x-6"
        >
          <Button
            size="lg"
            className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white-serene text-lg px-10 py-7"
            onClick={onShowExample}
          >
            Voir un exemple concret
          </Button>
          <Button
            variant="link"
            size="lg"
            className="text-primary hover:text-primary/80 text-lg group"
            onClick={onCalculateTimeSaving}
          >
            Calculer mon gain de temps <Calculator className="w-5 h-5 ml-2 group-hover:animate-pulse" />
          </Button>
        </motion.div>
      </motion.div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/pricing-model-visual.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { Check, BarChart3, Package, CalendarClock, Clock, HelpCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"

const pricingPlans = [
  {
    name: "Starter",
    price: "À partir de 480€",
    subPrice: "par dossier",
    features: [
      "Analyse de marché ciblée (1 secteur)",
      "Identification jusqu'à 50 employeurs potentiels",
      "Rapport de synthèse PDF",
      "Livraison standard sous 72h",
      "Support par email",
    ],
    ctaText: "Obtenir mon devis",
    ctaLink: "/contact?plan=starter",
    note: "Prix final selon volume",
    color: "blue-slate",
    isRecommended: false,
  },
  {
    name: "Pro",
    price: "À partir de 700€",
    subPrice: "par dossier",
    features: [
      "Toutes les fonctionnalités Starter",
      "Analyse multi-secteurs (jusqu'à 3)",
      "Identification jusqu'à 150 employeurs",
      "Profils d'entreprises détaillés",
      "Tendances du secteur et compétences clés",
      "Suggestions de mots-clés CV/LM",
      "Accès plateforme en ligne (1 utilisateur)",
      "Livraison prioritaire sous 48h",
      "Support prioritaire (email & chat)",
      "1 session Q&R de 30 min/dossier",
      "Mises à jour trimestrielles des données",
    ],
    ctaText: "Calculer mon ROI",
    ctaLink: "/quiz?source=pricing-pro",
    note: "Remises volume disponibles",
    color: "gold-sienna",
    isRecommended: true,
  },
  {
    name: "Expert",
    price: "Sur devis",
    subPrice: "solution sur-mesure",
    features: [
      "Toutes les fonctionnalités Pro",
      "Analyse illimitée et personnalisée",
      "Accompagnement stratégique dédié",
      "Intégration CRM/ATS (option)",
      "Rapports sur mesure illimités",
      "Veille stratégique continue",
      "Ateliers de formation pour équipes",
      "Support dédié avec expert référent",
    ],
    ctaText: "Étude gratuite",
    ctaLink: "/contact?plan=expert",
    note: "Accompagnement dédié",
    color: "tilleul-dense",
    isRecommended: false,
  },
]

export default function PricingModelVisual() {
  const fadeInUp = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

return (
    <div className="py-12 bg-gradient-to-br from-stone-50 to-white font-opensans">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-bold font-montserrat text-slate-deep mb-3">
            Choisissez le plan adapté à vos ambitions
          </h2>
          <p className="text-lg text-gray-refined max-w-2xl mx-auto">
            Des solutions flexibles pour les coachs indépendants, cabinets d'outplacement et services RH.
          </p>
        </motion.div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
          {pricingPlans.map((plan, i) => (
            <motion.div
              key={plan.name}
              initial="hidden"
              animate="visible"
              variants={fadeInUp}
              transition={{ duration: 0.5, delay: i * 0.15 }}
              className={`relative flex flex-col rounded-xl border ${
                plan.isRecommended ? `border-${plan.color} shadow-2xl scale-105` : `border-${plan.color}/40 shadow-lg`
              } bg-white transition-all hover:shadow-xl`}
            >
              {plan.isRecommended && (
                <Badge
                  variant="default"
                  className={`absolute -top-3 left-1/2 -translate-x-1/2 bg-${plan.color} text-white px-4 py-1 text-sm font-semibold`}
                >
                  Recommandé
                </Badge>
              )}
              <div className={`bg-${plan.color}/90 text-white p-6 text-center rounded-t-lg`}>
                <h3 className="font-bold font-montserrat text-2xl">{plan.name}</h3>
              </div>
              <div className="p-8 flex flex-col flex-grow">
                <div className="text-center mb-6">
                  <div className={`text-4xl font-bold text-${plan.color} mb-1`}>{plan.price}</div>
                  <p className="text-sm text-gray-refined">{plan.subPrice}</p>
                </div>
                <ul className="space-y-3 text-left mb-8 flex-grow">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-start">
                      <Check className={`w-5 h-5 text-${plan.color} mr-3 mt-1 flex-shrink-0`} />
                      <span className="text-gray-refined text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link href={plan.ctaLink} passHref legacyBehavior>
                  <Button
                    size="lg"
                    className={`w-full bg-${plan.color} hover:bg-${plan.color}/90 text-white font-semibold py-3 text-base`}
                  >
                    {plan.ctaText}
                  </Button>
                </Link>
                <p className="text-xs text-gray-refined text-center mt-4">{plan.note}</p>
              </div>
            </motion.div>
          ))}
        </div>

<motion.div
          initial="hidden"
          animate="visible"
          variants={fadeInUp}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="text-center mt-16 pt-8 border-t border-gray-200"
        >
          <HelpCircle className="w-8 h-8 text-gold-sienna mx-auto mb-4" />
          <p className="text-md text-gray-refined mb-2">Tous nos devis sont gratuits et sans engagement.</p>
          <p className="text-md text-gray-refined mb-2">
            Bénéficiez de remises progressives en fonction du volume de dossiers commandés.
          </p>
          <p className="text-md text-gray-refined">
            Le paiement s'effectue après la livraison et validation des dossiers.
          </p>
        </motion.div>

{/* Section "Avantages Clés" (conservée pour l'instant, peut être revue) */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="mt-16"
        >
          <h4 className="text-2xl font-bold font-montserrat text-slate-deep mb-8 text-center">
            Vos Avantages Exclusifs
          </h4>
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            {[
              {
                icon: <Package className="w-6 h-6 text-blue-slate" />,
                title: "Sans engagement",
                desc: "Aucun minimum de commande, flexibilité totale.",
              },
              {
                icon: <BarChart3 className="w-6 h-6 text-gold-sienna" />,
                title: "Remises Volumétriques",
                desc: "Plus vous commandez, plus vous économisez.",
              },
              {
                icon: <CalendarClock className="w-6 h-6 text-tilleul-dense" />,
                title: "Facturation Mensuelle",
                desc: "Une seule facture consolidée pour simplifier votre gestion.",
              },
              {
                icon: <Clock className="w-6 h-6 text-blue-slate" />,
                title: "Paiement à 30 jours",
                desc: "Conditions de paiement souples pour votre trésorerie.",
              },
            ].map((advantage, i) => (
              <motion.div
                key={i}
                initial="hidden"
                animate="visible"
                variants={fadeInUp}
                transition={{ duration: 0.4, delay: 1 + i * 0.1 }}
                className="bg-white rounded-xl p-6 shadow-lg border border-gray-200/50 hover:shadow-xl transition-shadow"
              >
                <div className="flex items-center mb-3">
                  <div className="p-2 rounded-full mr-4">{advantage.icon}</div>
                  <h5 className="font-semibold font-montserrat text-slate-deep text-lg">{advantage.title}</h5>
                </div>
                <p className="text-sm text-gray-refined">{advantage.desc}</p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/qualification-quiz-comment-ca-marche.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import {
  Users,
  Building,
  Briefcase,
  Target,
  BarChart3,
  TrendingUp,
  CheckCircle,
  ChevronLeft,
  ChevronRight,
  Clock,
  Award,
  Zap,
} from "lucide-react"

const quizStepsContent = [
  {
    id: 1,
    question: "Vous êtes...",
    options: [
      { text: "Coach indépendant", value: "coach", icon: Users },
      { text: "Cabinet d'outplacement", value: "outplacement", icon: Building },
      { text: "DRH / Responsable Mobilité en entreprise", value: "hr", icon: Briefcase },
      { text: "Consultant en évolution professionnelle", value: "consultant", icon: Target },
    ],
    answerKey: "profile",
  },
  {
    id: 2,
    question: "Combien de dossiers traitez-vous par mois en moyenne ?",
    options: [
      { text: "1-5 dossiers", value: "1-5" },
      { text: "5-15 dossiers", value: "5-15" },
      { text: "15-50 dossiers", value: "15-50" },
      { text: "50+ dossiers", value: "gt50" },
    ],
    icon: BarChart3,
    answerKey: "volume",
  },
  {
    id: 3,
    question: "Votre priorité #1 actuellement ?",
    options: [
      { text: "Gagner du temps", value: "time", icon: Clock },
      { text: "Améliorer la qualité des accompagnements", value: "quality", icon: Award },
      { text: "Accélérer le placement de mes clients", value: "placement", icon: Zap },
      { text: "Réduire les coûts opérationnels", value: "costs", icon: TrendingUp },
    ],
    answerKey: "priority",
  },
]

type Answers = {
  profile: string | null
  volume: string | null
  priority: string | null
}

const initialAnswers: Answers = { profile: null, volume: null, priority: null }

interface QualificationQuizProps {
  onViewPersonalizedPlan: (recommendation: any) => void
}

export default function QualificationQuizCommentCaMarche({ onViewPersonalizedPlan }: QualificationQuizProps) {
  const [currentStep, setCurrentStep] = useState(1)
  const [answers, setAnswers] = useState<Answers>(initialAnswers)
  const [recommendation, setRecommendation] = useState<any>(null)

const handleSelectOption = (questionKey: keyof Answers, value: string) => {
    setAnswers((prev) => ({ ...prev, [questionKey]: value }))
  }

const calculateRecommendation = () => {
    // Simplified recommendation logic
    let score = 0
    if (answers.profile === "hr" || answers.profile === "outplacement") score += 2
    if (answers.volume === "15-50" || answers.volume === "gt50") score += 2
    if (answers.priority === "placement" || answers.priority === "time") score += 2

let service, roi, timeline
    if (score <= 2) {
      service = "STARTER"
      roi = "150%"
      timeline = "24-48h"
    } else if (score <= 4) {
      service = "PRO"
      roi = "220%"
      timeline = "48h"
    } else {
      service = "EXPERT"
      roi = "300%+"
      timeline = "72h (personnalisé)"
    }
    return { service, roi, timeline, originalAnswers: answers }
  }

const nextStep = () => {
    if (currentStep < quizStepsContent.length) {
      setCurrentStep(currentStep + 1)
    } else if (currentStep === quizStepsContent.length) {
      const rec = calculateRecommendation()
      setRecommendation(rec)
      setCurrentStep(currentStep + 1) // Move to results view
    }
  }

const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
      if (currentStep > quizStepsContent.length) {
        // if coming back from results
        setRecommendation(null)
      }
    }
  }

const resetQuiz = () => {
    setAnswers(initialAnswers)
    setCurrentStep(1)
    setRecommendation(null)
  }

const progress = (currentStep / (quizStepsContent.length + 1)) * 100
  const currentQuestionData = quizStepsContent[currentStep - 1]
  const isCurrentStepValid =
    currentStep <= quizStepsContent.length && currentQuestionData
      ? answers[currentQuestionData.answerKey as keyof Answers] !== null
      : true

const pageVariants = {
    initial: { opacity: 0, x: 30 },
    in: { opacity: 1, x: 0 },
    out: { opacity: 0, x: -30 },
  }
  const pageTransition = { type: "tween", ease: "anticipate", duration: 0.4 }

return (
    <section className="py-16 md:py-24 bg-ivory">
      <div className="container mx-auto px-6 max-w-4xl">
        <Card className="shadow-xl rounded-xl overflow-hidden">
          <CardHeader className="bg-slate-deep text-white-serene p-6">
            <div className="flex justify-between items-center mb-2">
              <CardTitle className="text-xl sm:text-2xl font-montserrat">Quel est votre besoin ?</CardTitle>
              {currentStep <= quizStepsContent.length && (
                <span className="text-xs sm:text-sm font-semibold bg-white-serene/20 px-3 py-1 rounded-full">
                  Étape {currentStep}/{quizStepsContent.length}
                </span>
              )}
            </div>
            <Progress value={progress} className="w-full h-1.5 [&>div]:bg-gold-sienna" />
          </CardHeader>

<CardContent className="p-6 sm:p-8 min-h-[350px] flex flex-col justify-center">
            <AnimatePresence mode="wait">
              {currentStep <= quizStepsContent.length && currentQuestionData && (
                <motion.div
                  key={currentStep}
                  initial="initial"
                  animate="in"
                  exit="out"
                  variants={pageVariants}
                  transition={pageTransition}
                  className="space-y-6"
                >
                  <h2 className="text-xl sm:text-2xl font-semibold text-slate-deep flex items-start">
                    {currentQuestionData.icon && (
                      <currentQuestionData.icon className="w-7 h-7 text-primary mr-3 mt-0.5 flex-shrink-0" />
                    )}
                    {!currentQuestionData.icon &&
                      quizStepsContent[currentStep - 1].icon &&
                      React.createElement(quizStepsContent[currentStep - 1].icon as any, {
                        className: "w-7 h-7 text-primary mr-3 mt-0.5 flex-shrink-0",
                      })}
                    {currentQuestionData.question}
                  </h2>
                  <div
                    className={`grid grid-cols-1 ${currentQuestionData.options.length > 2 ? "sm:grid-cols-2" : "sm:grid-cols-1 sm:max-w-md sm:mx-auto"} gap-3 sm:gap-4`}
                  >
                    {currentQuestionData.options.map((option) => (
                      <motion.button
                        key={option.value}
                        onClick={() => handleSelectOption(currentQuestionData.answerKey as keyof Answers, option.value)}
                        className={`p-4 border-2 rounded-lg text-left transition-all duration-200 ease-in-out flex items-center space-x-3
                          ${
                            answers[currentQuestionData.answerKey as keyof Answers] === option.value
                              ? "bg-primary/10 border-primary ring-2 ring-primary shadow-md"
                              : "bg-white hover:bg-stone-50 border-stone-300 hover:border-primary/70"
                          }`}
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                      >
                        {option.icon && (
                          <option.icon
                            className={`w-5 h-5 flex-shrink-0 ${answers[currentQuestionData.answerKey as keyof Answers] === option.value ? "text-primary" : "text-slate-500"}`}
                          />
                        )}
                        <span
                          className={`font-medium text-sm sm:text-base ${answers[currentQuestionData.answerKey as keyof Answers] === option.value ? "text-primary" : "text-slate-700"}`}
                        >
                          {option.text}
                        </span>
                      </motion.button>
                    ))}
                  </div>
                </motion.div>
              )}

{currentStep > quizStepsContent.length && recommendation && (
                <motion.div
                  key="results"
                  initial="initial"
                  animate="in"
                  exit="out"
                  variants={pageVariants}
                  transition={pageTransition}
                  className="text-center space-y-5"
                >
                  <CheckCircle className="w-14 h-14 text-green-500 mx-auto" />
                  <h2 className="text-2xl sm:text-3xl font-bold text-slate-deep font-montserrat">
                    Votre Recommandation Personnalisée
                  </h2>
                  <div className="bg-primary/5 p-5 rounded-lg border border-primary/20">
                    <h3 className="text-xl font-semibold text-primary mb-1">
                      Service Recommandé : {recommendation.service}
                    </h3>
                    <p className="text-slate-600 mb-1">
                      ROI Estimé : <span className="font-bold text-green-600">{recommendation.roi}</span>
                    </p>
                    <p className="text-slate-600">
                      Timeline : <span className="font-semibold">{recommendation.timeline}</span>
                    </p>
                  </div>
                  <p className="text-slate-600 text-sm sm:text-base">
                    Basé sur vos réponses, le pack {recommendation.service} semble le plus adapté.
                  </p>
                  <Button
                    size="lg"
                    className="w-full sm:w-auto bg-gold-sienna hover:bg-gold-sienna/90 text-white-serene text-base"
                    onClick={() => onViewPersonalizedPlan(recommendation)}
                  >
                    Voir mon plan personnalisé
                  </Button>
                </motion.div>
              )}
            </AnimatePresence>
          </CardContent>

<div className="p-4 sm:p-6 bg-stone-50 border-t border-stone-200 flex justify-between items-center">
            <Button
              variant="outline"
              onClick={prevStep}
              disabled={currentStep === 1 && !recommendation}
              className="flex items-center text-sm sm:text-base"
            >
              <ChevronLeft className="w-4 h-4 mr-1" />
              {currentStep > quizStepsContent.length ? "Modifier" : "Précédent"}
            </Button>
            {currentStep <= quizStepsContent.length ? (
              <Button
                onClick={nextStep}
                disabled={!isCurrentStepValid}
                className="bg-primary hover:bg-primary/90 flex items-center text-sm sm:text-base"
              >
                {currentStep === quizStepsContent.length ? "Voir mes résultats" : "Suivant"}
                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            ) : (
              <Button onClick={resetQuiz} variant="link" className="text-primary text-sm sm:text-base">
                Recommencer
              </Button>
            )}
          </div>
        </Card>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/roi-dashboard-infographic.tsx" isMerged="true"
"use client"

import { useRef, useEffect, useState } from "react"
import { motion, useInView, useAnimation } from "framer-motion"
import {
  Clock,
  TrendingDown,
  Users,
  DollarSign,
  BarChart3,
  Activity,
  Target,
  Percent,
  Calendar,
  ChevronRight,
  Info,
} from "lucide-react"

interface AnimatedCounterProps {
  value: number
  suffix?: string
  prefix?: string
  duration?: number
  decimals?: number
}

function AnimatedCounter({ value, suffix = "", prefix = "", duration = 2, decimals = 0 }: AnimatedCounterProps) {
  const [count, setCount] = useState(0)
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

useEffect(() => {
    if (isInView) {
      let start = 0
      const end = value
      const increment = end / (duration * 60)

const timer = setInterval(() => {
        start += increment
        if (start >= end) {
          setCount(end)
          clearInterval(timer)
        } else {
          setCount(start)
        }
      }, 1000 / 60)

return () => clearInterval(timer)
    }
  }, [isInView, value, duration])

return (
    <span ref={ref}>
      {prefix}
      {count.toFixed(decimals)}
      {suffix}
    </span>
  )
}

export default function ROIDashboardInfographic() {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-50px 0px" })
  const controls = useAnimation()

useEffect(() => {
    if (isInView) {
      controls.start("visible")
    }
  }, [isInView, controls])

const kpis = [
    {
      id: "time-saved",
      title: "Temps économisé",
      subtitle: "par dossier",
      value: 15,
      unit: "h",
      icon: Clock,
      color: "blue-slate",
      bgGradient: "from-blue-slate/20 to-blue-slate/5",
      description: "Automatisation complète de la recherche et analyse",
      percentage: 75, // 15h sur 20h habituelles
    },
    {
      id: "placement-speed",
      title: "Accélération placement",
      subtitle: "réduction du délai",
      value: 37,
      unit: "%",
      prefix: "-",
      icon: TrendingDown,
      color: "gold-sienna",
      bgGradient: "from-gold-sienna/20 to-gold-sienna/5",
      description: "Ciblage précis et approche optimisée",
      percentage: 37,
    },
    {
      id: "satisfaction",
      title: "Satisfaction client",
      subtitle: "amélioration moyenne",
      value: 42,
      unit: "%",
      prefix: "+",
      icon: Users,
      color: "tilleul-dense",
      bgGradient: "from-tilleul-dense/20 to-tilleul-dense/5",
      description: "Accompagnement plus qualitatif et personnalisé",
      percentage: 42,
    },
  ]

const premiumMetrics = [
    { label: "Impact marge opérationnelle", value: "+18%", icon: DollarSign },
    { label: "Taux conversion commerciale", value: "+25%", icon: Target },
    { label: "Productivité consultants", value: "+32%", icon: Activity },
  ]

const roiTimeline = [
    { month: 1, label: "Mise en place", roi: 0, status: "setup" },
    { month: 2, label: "Optimisation", roi: 45, status: "growth" },
    { month: 3, label: "ROI positif", roi: 94, status: "positive" },
  ]

return (
    <div ref={sectionRef} className="w-full">
      {/* Header Section */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6 }}
        className="text-center mb-12"
      >
        <div className="inline-flex items-center bg-slate-deep/10 rounded-full px-4 py-2 mb-4">
          <BarChart3 className="w-5 h-5 text-slate-deep mr-2" />
          <span className="text-sm font-semibold text-slate-deep">Dashboard Analytics</span>
        </div>
        <h2 className="text-3xl md:text-4xl font-bold text-slate-deep mb-3">
          Mesurez votre <span className="text-gold-sienna">performance</span> en temps réel
        </h2>
        <p className="text-gray-refined max-w-2xl mx-auto">
          Notre tableau de bord personnalisé suit trois indicateurs clés pour optimiser votre ROI
        </p>
      </motion.div>

{/* Main KPIs Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
        {kpis.map((kpi, index) => (
          <motion.div
            key={kpi.id}
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: index * 0.1 }}
            className="relative group"
          >
            <div
              className={`absolute inset-0 bg-gradient-to-br ${kpi.bgGradient} rounded-2xl blur-xl opacity-50 group-hover:opacity-70 transition-opacity`}
            />

<div className="relative bg-white-serene rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100">
              {/* Header */}
              <div className="flex items-start justify-between mb-6">
                <div>
                  <h3 className="text-lg font-semibold text-slate-deep">{kpi.title}</h3>
                  <p className="text-sm text-gray-refined">{kpi.subtitle}</p>
                </div>
                <div className={`p-3 bg-${kpi.color}/10 rounded-xl`}>
                  <kpi.icon className={`w-6 h-6 text-${kpi.color}`} />
                </div>
              </div>

{/* Value Display */}
              <div className="mb-6">
                <div className={`text-4xl font-bold text-${kpi.color} mb-2`}>
                  <AnimatedCounter value={kpi.value} prefix={kpi.prefix} suffix={kpi.unit} duration={1.5} />
                </div>
                <p className="text-xs text-gray-refined">{kpi.description}</p>
              </div>

{/* Progress Bar */}
              <div className="relative">
                <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={isInView ? { width: `${kpi.percentage}%` } : {}}
                    transition={{ duration: 1.5, delay: 0.5 + index * 0.1, ease: "easeOut" }}
                    className={`h-full bg-${kpi.color} rounded-full`}
                  />
                </div>
                <div className="flex justify-between mt-1">
                  <span className="text-xs text-gray-refined">0</span>
                  <span className={`text-xs text-${kpi.color} font-medium`}>{kpi.percentage}%</span>
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>

{/* Premium Analysis Section */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 0.4 }}
        className="bg-gradient-to-br from-slate-deep via-pearl-graphite to-slate-deep rounded-3xl p-8 mb-12 relative overflow-hidden"
      >
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 right-0 w-64 h-64 bg-gold-sienna rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-tilleul-dense rounded-full blur-3xl" />
        </div>

<div className="relative z-10">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-8">
            <div>
              <h3 className="text-2xl font-bold text-white-serene mb-2">Analyse ROI Premium</h3>
              <p className="text-white-serene/70">Rapport trimestriel détaillé pour optimiser votre performance</p>
            </div>
            <div className="mt-4 md:mt-0 bg-gold-sienna/20 backdrop-blur-sm px-4 py-2 rounded-full border border-gold-sienna/30">
              <span className="text-sm font-medium text-gold-sienna">Clients Premium uniquement</span>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {premiumMetrics.map((metric, index) => (
              <motion.div
                key={metric.label}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isInView ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-colors"
              >
                <div className="flex items-center justify-between mb-4">
                  <metric.icon className="w-8 h-8 text-gold-sienna" />
                  <span className="text-2xl font-bold text-white-serene">{metric.value}</span>
                </div>
                <p className="text-sm text-white-serene/80">{metric.label}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </motion.div>

{/* ROI Timeline */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 0.6 }}
        className="bg-gradient-to-br from-ivory to-white-serene rounded-3xl p-8 border border-gold-sienna/10"
      >
        <div className="flex items-center justify-between mb-8">
          <div>
            <h3 className="text-2xl font-bold text-slate-deep mb-2">Évolution du ROI</h3>
            <p className="text-gray-refined">94% de nos clients constatent un ROI positif dès le 3ème mois</p>
          </div>
          <div className="hidden md:flex items-center bg-gold-sienna/10 px-4 py-2 rounded-full">
            <Calendar className="w-5 h-5 text-gold-sienna mr-2" />
            <span className="text-sm font-medium text-gold-sienna">Suivi trimestriel</span>
          </div>
        </div>

{/* Timeline */}
        <div className="relative">
          <div className="absolute top-12 left-8 right-8 h-1 bg-gray-200 rounded-full" />

<div className="flex justify-between relative">
            {roiTimeline.map((item, index) => (
              <motion.div
                key={item.month}
                initial={{ opacity: 0, y: 20 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.8 + index * 0.2 }}
                className="flex flex-col items-center"
              >
                <div
                  className={`
                  w-24 h-24 rounded-full flex items-center justify-center relative z-10
                  ${item.status === "positive" ? "bg-gold-sienna text-white-serene" : "bg-white-serene border-2 border-gray-300"}
                  shadow-lg
                `}
                >
                  <div className="text-center">
                    <div className="text-2xl font-bold">
                      {item.roi > 0 && <AnimatedCounter value={item.roi} suffix="%" duration={1} />}
                      {item.roi === 0 && "0%"}
                    </div>
                    <div className="text-xs">ROI</div>
                  </div>
                </div>

<div className="mt-4 text-center">
                  <p className="font-semibold text-slate-deep">Mois {item.month}</p>
                  <p className="text-sm text-gray-refined">{item.label}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>

{/* Success Message */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={isInView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 0.5, delay: 1.2 }}
          className="mt-8 bg-gold-sienna/10 rounded-xl p-4 border border-gold-sienna/20"
        >
          <div className="flex items-center">
            <div className="bg-gold-sienna/20 p-2 rounded-lg mr-3">
              <Percent className="w-5 h-5 text-gold-sienna" />
            </div>
            <p className="text-slate-deep">
              <span className="font-bold text-gold-sienna">94% de nos clients</span> constatent un ROI positif dès le
              troisième mois d'utilisation
            </p>
          </div>
        </motion.div>
      </motion.div>

{/* CTA */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 1 }}
        className="mt-8 text-center"
      >
        <button className="group bg-gradient-to-r from-gold-sienna to-ochre-smoky text-white-serene px-8 py-4 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 inline-flex items-center">
          <span>Accéder à votre dashboard personnalisé</span>
          <ChevronRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
        </button>
        <p className="mt-3 text-sm text-gray-refined">
          <Info className="w-4 h-4 inline mr-1" />
          Disponible dès l'activation de votre compte
        </p>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/roi-measurement-visual.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import {
  Clock,
  TrendingDown,
  Users,
  BarChart3,
  DollarSign,
  Target,
  Calendar,
  CheckCircle,
  ChevronRight,
} from "lucide-react"

export default function ROIMeasurementVisual() {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })

// Animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 },
    },
  }

// KPI data
  const kpis = [
    {
      id: "time-saved",
      title: "Temps économisé",
      value: "15h",
      description: "par dossier en moyenne",
      icon: Clock,
      color: "blue-slate",
    },
    {
      id: "placement-speed",
      title: "Accélération placement",
      value: "-37%",
      description: "réduction du délai",
      icon: TrendingDown,
      color: "gold-sienna",
    },
    {
      id: "satisfaction",
      title: "Satisfaction client",
      value: "+42%",
      description: "amélioration moyenne",
      icon: Users,
      color: "tilleul-dense",
    },
  ]

// Premium analytics data
  const premiumAnalytics = [
    {
      title: "Analyse ROI trimestrielle",
      description: "Rapport détaillé et personnalisé",
      icon: BarChart3,
    },
    {
      title: "Impact marge opérationnelle",
      description: "Mesure précise de l'amélioration",
      icon: DollarSign,
    },
    {
      title: "Taux conversion commerciale",
      description: "Suivi de l'augmentation des ventes",
      icon: Target,
    },
  ]

// ROI timeline data
  const roiTimeline = [
    { month: 1, label: "Mise en place", roi: "Déploiement" },
    { month: 2, label: "Optimisation", roi: "Ajustements" },
    { month: 3, label: "ROI positif", roi: "94% des clients", highlight: true },
  ]

return (
    <div ref={sectionRef} className="w-full max-w-4xl mx-auto">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6 }}
        className="text-center mb-10"
      >
        <div className="inline-flex items-center bg-slate-deep/10 rounded-full px-4 py-2 mb-4">
          <BarChart3 className="w-5 h-5 text-slate-deep mr-2" />
          <span className="text-sm font-semibold text-slate-deep">Mesure de Performance</span>
        </div>
        <h2 className="text-2xl md:text-3xl font-bold text-slate-deep mb-3">
          Dashboard ROI <span className="text-gold-sienna">personnalisé</span>
        </h2>
        <p className="text-gray-refined max-w-2xl mx-auto">
          Suivez précisément l'impact de CareerPilot Pro sur votre activité
        </p>
      </motion.div>

{/* KPI Cards */}
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate={isInView ? "visible" : "hidden"}
        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"
      >
        {kpis.map((kpi) => (
          <motion.div
            key={kpi.id}
            variants={itemVariants}
            className={`bg-white-serene rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow border-t-4 border-${kpi.color}`}
          >
            <div className="flex items-center mb-4">
              <div className={`p-3 rounded-full bg-${kpi.color}/10 mr-4`}>
                <kpi.icon className={`w-6 h-6 text-${kpi.color}`} />
              </div>
              <h3 className="text-lg font-semibold text-slate-deep">{kpi.title}</h3>
            </div>
            <div className={`text-3xl font-bold text-${kpi.color} mb-2`}>{kpi.value}</div>
            <p className="text-sm text-gray-refined">{kpi.description}</p>
          </motion.div>
        ))}
      </motion.div>

{/* Premium Analytics */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 0.4 }}
        className="bg-gradient-to-br from-slate-deep to-pearl-graphite rounded-xl p-6 mb-10 text-white-serene"
      >
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-bold">Analyse Premium</h3>
          <span className="bg-gold-sienna/20 text-gold-sienna text-sm font-medium px-3 py-1 rounded-full border border-gold-sienna/30">
            Clients Premium
          </span>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {premiumAnalytics.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={isInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
              className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20"
            >
              <div className="flex items-start">
                <div className="bg-gold-sienna/20 p-2 rounded-lg mr-3">
                  <item.icon className="w-5 h-5 text-gold-sienna" />
                </div>
                <div>
                  <h4 className="font-medium text-white-serene mb-1">{item.title}</h4>
                  <p className="text-xs text-white-serene/70">{item.description}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>

{/* Timeline */}
        <div className="relative mb-6">
          {/* Timeline line */}
          <div className="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 rounded-full" />

<div className="flex justify-between relative">
            {roiTimeline.map((item, index) => (
              <motion.div
                key={item.month}
                initial={{ opacity: 0, y: 20 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.8 + index * 0.2 }}
                className="flex flex-col items-center relative z-10"
              >
                <div
                  className={`w-16 h-16 rounded-full flex items-center justify-center text-center 
                  ${
                    item.highlight
                      ? "bg-gold-sienna text-white-serene"
                      : "bg-white-serene border-2 border-gray-300 text-slate-deep"
                  } shadow-md`}
                >
                  <div>
                    <div className="text-sm font-medium">Mois</div>
                    <div className="text-xl font-bold">{item.month}</div>
                  </div>
                </div>

<div className="mt-3 text-center">
                  <p className="font-semibold text-slate-deep">{item.label}</p>
                  <p className={`text-sm ${item.highlight ? "text-gold-sienna font-medium" : "text-gray-refined"}`}>
                    {item.roi}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>

{/* Success Message */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={isInView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 0.5, delay: 1.2 }}
          className="bg-gold-sienna/10 rounded-lg p-4 border border-gold-sienna/20"
        >
          <div className="flex items-center">
            <CheckCircle className="w-5 h-5 text-gold-sienna mr-3 flex-shrink-0" />
            <p className="text-slate-deep">
              <span className="font-bold">94% de nos clients</span> constatent un{" "}
              <span className="font-bold text-gold-sienna">ROI positif</span> dès le troisième mois d'utilisation
            </p>
          </div>
        </motion.div>
      </motion.div>

{/* CTA */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 1 }}
        className="mt-8 text-center"
      >
        <a
          href="/calculateur-roi"
          className="group bg-gradient-to-r from-gold-sienna to-ochre-smoky text-white-serene px-6 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center"
        >
          <span>Découvrir votre potentiel ROI</span>
          <ChevronRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
        </a>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/simple-faq-comment-ca-marche.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { CreditCard, Clock, PlayCircle, ChevronDown } from "lucide-react"

const faqItems = [
  {
    id: "prix",
    question: "Combien ça coûte vraiment ?",
    answerShort: "À partir de 480€ par dossier, sans engagement.",
    icon: CreditCard,
    ctaText: "Calculer mon prix exact",
    actionKey: "calculatePrice",
    expandableContent: () => (
      <div className="p-4 bg-stone-100 rounded-md mt-2">
        <p className="text-sm text-gray-700 mb-2">
          Notre tarification est transparente et s'adapte à vos besoins. Utilisez notre simulateur pour une estimation
          précise.
        </p>
        <p className="text-xs text-gray-500">Le calculateur interactif sera bientôt disponible ici.</p>
      </div>
    ),
  },
  {
    id: "delais",
    question: "Combien de temps ça prend ?",
    answerShort: "24h à 72h selon votre urgence et le pack choisi.",
    icon: Clock,
    ctaText: "Voir les délais détaillés",
    actionKey: "viewDelays",
    expandableContent: () => (
      <div className="p-4 bg-stone-100 rounded-md mt-2">
        <ul className="list-disc list-inside text-sm text-gray-700 space-y-1">
          <li>
            <strong>Pack STARTER:</strong> Livré en 48h.
          </li>
          <li>
            <strong>Pack PRO:</strong> Livré en 48h.
          </li>
          <li>
            <strong>Pack EXPERT:</strong> Livré en 72h.
          </li>
        </ul>
        <p className="text-xs text-gray-500 mt-2">Une timeline visuelle plus détaillée sera bientôt disponible.</p>
      </div>
    ),
  },
  {
    id: "commencer",
    question: "Comment on commence ?",
    answerShort: "5 minutes pour briefer, 48h en moyenne pour recevoir votre plan d'action.",
    icon: PlayCircle,
    ctaText: "Commencer maintenant",
    actionKey: "startNow",
    expandableContent: () => (
      <div className="p-4 bg-stone-100 rounded-md mt-2">
        <ol className="list-decimal list-inside text-sm text-gray-700 space-y-1">
          <li>Choisissez le pack adapté (ou laissez-nous vous guider).</li>
          <li>Remplissez un court formulaire sur votre client (5-10 min).</li>
          <li>Nos experts analysent et construisent le plan.</li>
          <li>Recevez votre Career Intelligence Pack complet.</li>
        </ol>
      </div>
    ),
  },
]

interface SimpleFaqProps {
  onCalculatePrice: () => void
  onViewDelays: () => void
  onStartNow: () => void
}

export default function SimpleFaqCommentCaMarche({ onCalculatePrice, onViewDelays, onStartNow }: SimpleFaqProps) {
  const [openItem, setOpenItem] = useState<string | null>(null)

const handleAction = (actionKey: string) => {
    if (actionKey === "calculatePrice") onCalculatePrice()
    else if (actionKey === "viewDelays") onViewDelays()
    else if (actionKey === "startNow") onStartNow()
  }

return (
    <section className="py-16 md:py-24 bg-white">
      <div className="container mx-auto px-6 max-w-3xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-10 md:mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-slate-deep mb-4 font-montserrat">
            3 questions <span className="text-gold-sienna">essentielles</span>
          </h2>
          <p className="text-lg text-gray-refined">Les réponses claires à vos interrogations les plus fréquentes.</p>
        </motion.div>

<Accordion
          type="single"
          collapsible
          className="w-full space-y-4"
          value={openItem || ""}
          onValueChange={setOpenItem}
        >
          {faqItems.map((item) => (
            <AccordionItem
              value={item.id}
              key={item.id}
              className="bg-stone-50 rounded-xl shadow-md hover:shadow-lg transition-shadow border-b-0"
            >
              <AccordionTrigger className="p-6 text-left hover:no-underline">
                <div className="flex items-start space-x-4">
                  <div
                    className={`p-2 bg-${item.id === "prix" ? "blue-slate" : item.id === "delais" ? "gold-sienna" : "tilleul-dense"}/10 rounded-md`}
                  >
                    <item.icon
                      className={`w-6 h-6 text-${item.id === "prix" ? "blue-slate" : item.id === "delais" ? "gold-sienna" : "tilleul-dense"}`}
                    />
                  </div>
                  <div>
                    <h4 className="text-lg font-semibold text-slate-deep">{item.question}</h4>
                    <AnimatePresence initial={false}>
                      {openItem !== item.id && (
                        <motion.p
                          key="shortAnswer"
                          initial={{ opacity: 0, height: 0, marginTop: 0 }}
                          animate={{ opacity: 1, height: "auto", marginTop: "0.25rem" }}
                          exit={{ opacity: 0, height: 0, marginTop: 0 }}
                          transition={{ duration: 0.2 }}
                          className="text-sm text-gray-refined"
                        >
                          {item.answerShort}
                        </motion.p>
                      )}
                    </AnimatePresence>
                  </div>
                </div>
                <ChevronDown
                  className={`w-5 h-5 text-gray-400 transition-transform duration-200 ${openItem === item.id ? "transform rotate-180" : ""}`}
                />
              </AccordionTrigger>
              <AccordionContent className="px-6 pb-6">
                <div className="border-t border-stone-200 pt-4">
                  {item.expandableContent()}
                  <Button
                    variant="link"
                    className={`mt-3 text-${item.id === "prix" ? "blue-slate" : item.id === "delais" ? "gold-sienna" : "tilleul-dense"} p-0 h-auto`}
                    onClick={() => handleAction(item.actionKey)}
                  >
                    {item.ctaText}
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/social-plans-pricing-visual.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { Users, TrendingDown, Shield, UserCheck, Palette, Clock, Building2, Sparkles, ChevronRight } from "lucide-react"

export default function SocialPlansPricingVisual() {
  const fadeInUp = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  }

return (
    <div className="space-y-8">
      {/* En-tête avec seuil d'activation */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="bg-gradient-to-r from-blue-slate to-slate-deep rounded-2xl p-6 text-white-serene text-center shadow-lg"
      >
        <div className="flex items-center justify-center mb-3">
          <Building2 className="w-8 h-8 mr-3" />
          <h3 className="text-2xl font-bold">Plans Sociaux & Grands Volumes</h3>
        </div>
        <div className="flex items-center justify-center">
          <div className="bg-white-serene/20 rounded-full px-6 py-3 backdrop-blur-sm">
            <span className="text-lg font-medium">À partir de</span>
            <span className="text-3xl font-bold mx-2">20</span>
            <span className="text-lg font-medium">collaborateurs</span>
          </div>
        </div>
      </motion.div>

{/* Grille des avantages */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Tarification dégressive */}
        <motion.div
          initial="hidden"
          animate="visible"
          variants={fadeInUp}
          transition={{ delay: 0.1 }}
          className="bg-white-serene rounded-xl p-5 shadow-md border border-gold-sienna/20 hover:shadow-lg transition-shadow"
        >
          <div className="flex flex-col items-center text-center">
            <div className="bg-gold-sienna/10 p-3 rounded-full mb-3">
              <TrendingDown className="w-6 h-6 text-gold-sienna" />
            </div>
            <h4 className="font-semibold text-slate-deep mb-2">Tarifs dégressifs</h4>
            <div className="text-3xl font-bold text-gold-sienna mb-1">-30%</div>
            <p className="text-sm text-gray-refined">Jusqu'à 30% de réduction</p>
          </div>
        </motion.div>

{/* SLA renforcés */}
        <motion.div
          initial="hidden"
          animate="visible"
          variants={fadeInUp}
          transition={{ delay: 0.2 }}
          className="bg-white-serene rounded-xl p-5 shadow-md border border-tilleul-dense/20 hover:shadow-lg transition-shadow"
        >
          <div className="flex flex-col items-center text-center">
            <div className="bg-tilleul-dense/10 p-3 rounded-full mb-3">
              <Shield className="w-6 h-6 text-tilleul-dense" />
            </div>
            <h4 className="font-semibold text-slate-deep mb-2">SLA renforcés</h4>
            <p className="text-sm text-gray-refined">Garanties de service prioritaires</p>
          </div>
        </motion.div>

{/* Account Manager dédié */}
        <motion.div
          initial="hidden"
          animate="visible"
          variants={fadeInUp}
          transition={{ delay: 0.3 }}
          className="bg-white-serene rounded-xl p-5 shadow-md border border-blue-slate/20 hover:shadow-lg transition-shadow"
        >
          <div className="flex flex-col items-center text-center">
            <div className="bg-blue-slate/10 p-3 rounded-full mb-3">
              <UserCheck className="w-6 h-6 text-blue-slate" />
            </div>
            <h4 className="font-semibold text-slate-deep mb-2">Account Manager</h4>
            <p className="text-sm text-gray-refined">Interlocuteur unique dédié</p>
          </div>
        </motion.div>

{/* Personnalisation */}
        <motion.div
          initial="hidden"
          animate="visible"
          variants={fadeInUp}
          transition={{ delay: 0.4 }}
          className="bg-white-serene rounded-xl p-5 shadow-md border border-ochre-smoky/20 hover:shadow-lg transition-shadow"
        >
          <div className="flex flex-col items-center text-center">
            <div className="bg-ochre-smoky/10 p-3 rounded-full mb-3">
              <Palette className="w-6 h-6 text-ochre-smoky" />
            </div>
            <h4 className="font-semibold text-slate-deep mb-2">Sur mesure</h4>
            <p className="text-sm text-gray-refined">Livrables personnalisés</p>
          </div>
        </motion.div>
      </div>

{/* Échelle de réduction */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
        className="bg-gradient-to-br from-ivory to-white-serene/50 rounded-xl p-6 shadow-md"
      >
        <h4 className="font-semibold text-slate-deep mb-4 flex items-center">
          <Sparkles className="w-5 h-5 mr-2 text-gold-sienna" />
          Économies selon le volume
        </h4>

<div className="space-y-3">
          {[
            { range: "20-50", discount: "10%", color: "blue-slate" },
            { range: "51-100", discount: "20%", color: "gold-sienna" },
            { range: "100+", discount: "30%", color: "tilleul-dense" },
          ].map((tier, index) => (
            <motion.div
              key={tier.range}
              initial={{ width: 0 }}
              animate={{ width: "100%" }}
              transition={{ duration: 0.8, delay: 0.6 + index * 0.1 }}
              className="relative"
            >
              <div className="flex items-center justify-between mb-1">
                <span className="text-sm font-medium text-slate-deep">{tier.range} collaborateurs</span>
                <span className={`text-sm font-bold text-${tier.color}`}>{tier.discount}</span>
              </div>
              <div className="h-2 bg-gray-refined/20 rounded-full overflow-hidden">
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: `${Number.parseInt(tier.discount)}%` }}
                  transition={{ duration: 1, delay: 0.8 + index * 0.1 }}
                  className={`h-full bg-${tier.color} rounded-full`}
                />
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>

{/* Timeline du processus */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.9 }}
        className="bg-white-serene rounded-xl p-6 shadow-md border border-gray-refined/20"
      >
        <h4 className="font-semibold text-slate-deep mb-4 flex items-center">
          <Clock className="w-5 h-5 mr-2 text-gold-sienna" />
          Processus rapide et simple
        </h4>

<div className="flex items-center justify-between">
          <div className="flex-1 text-center">
            <div className="bg-gold-sienna/10 rounded-full p-3 mx-auto mb-2 w-fit">
              <Users className="w-6 h-6 text-gold-sienna" />
            </div>
            <p className="text-sm font-medium text-slate-deep">Contact initial</p>
            <p className="text-xs text-gray-refined mt-1">Votre demande</p>
          </div>

<div className="flex-1 text-center">
            <div className="bg-tilleul-dense/10 rounded-full p-3 mx-auto mb-2 w-fit">
              <Building2 className="w-6 h-6 text-tilleul-dense" />
            </div>
            <p className="text-sm font-medium text-slate-deep">Étude personnalisée</p>
            <p className="text-xs text-gray-refined mt-1">Analyse des besoins</p>
          </div>

<div className="flex-1 text-center">
            <div className="bg-blue-slate/10 rounded-full p-3 mx-auto mb-2 w-fit">
              <Sparkles className="w-6 h-6 text-blue-slate" />
            </div>
            <p className="text-sm font-medium text-slate-deep">Proposition finale</p>
            <p className="text-xs text-gray-refined mt-1">
              <span className="font-bold text-blue-slate">Sous 48h</span>
            </p>
          </div>
        </div>
      </motion.div>

{/* Call to action */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1.1 }}
        className="bg-gradient-to-r from-slate-deep to-blue-slate rounded-xl p-6 text-white-serene text-center shadow-lg"
      >
        <p className="text-lg mb-4">Transformez votre plan social en opportunité de rebond pour vos collaborateurs</p>
        <div className="flex items-center justify-center space-x-4">
          <div className="bg-white-serene/20 backdrop-blur-sm rounded-lg px-4 py-2">
            <p className="text-sm">Étude sur-mesure gratuite</p>
          </div>
          <div className="bg-white-serene/20 backdrop-blur-sm rounded-lg px-4 py-2">
            <p className="text-sm font-bold">Réponse sous 48h</p>
          </div>
        </div>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solution-scenarios-comment-ca-marche.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { MapPin, RotateCcw, Zap, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

const scenarios = [
  {
    icon: MapPin,
    situation: "Mon client veut évoluer dans son domaine actuel, trouver de nouvelles opportunités alignées.",
    solution: "STARTER - Repositionnement Express",
    benefit: "15+ opportunités ciblées. Livré en 48h.",
    result: "Repositionné et focus en 4-6 semaines.",
    price: "À partir de 480€",
    cta: "C'est ma situation",
    key: "starter",
    color: "blue-slate",
    features: [
      "Cartographie compétences transférables",
      "Analyse besoins marché",
      "Évaluation adéquation projet/besoins",
    ],
  },
  {
    icon: RotateCcw,
    situation: "Mon client envisage une reconversion, un changement de métier ou de secteur.",
    solution: "PRO - Changement de Métier",
    benefit: "30+ employeurs + CV optimisé. Livré en 48h.",
    result: "Transition réussie et sécurisée en 3-4 mois.",
    price: "À partir de 700€",
    cta: "Parfait pour nous",
    key: "pro",
    highlighted: true,
    color: "gold-sienna",
    features: [
      "Tout STARTER inclus",
      "Identification 30+ employeurs",
      "Stratégies réseau et scripts",
      "Optimisation CV & LinkedIn",
    ],
  },
  {
    icon: Zap,
    situation: "Mon client est un dirigeant, ou il s'agit d'un plan social nécessitant une approche complète.",
    solution: "EXPERT - Transformation Premium",
    benefit: "50+ opportunités + accompagnement. Livré selon volume.",
    result: "Leadership affirmé ou plan social maîtrisé en 6-8 mois.",
    price: "Sur devis",
    cta: "Solution complète",
    key: "expert",
    color: "tilleul-dense",
    features: [
      "Tout PRO inclus",
      "Pack entraînements entretiens",
      "Validation projet mobilité",
      "Plan onboarding 30/60/90",
    ],
  },
]

interface SolutionScenariosProps {
  onSelectScenario: (scenarioKey: string) => void
}

export default function SolutionScenariosCommentCaMarche({ onSelectScenario }: SolutionScenariosProps) {
  const sectionVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
  }
  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
  }

return (
    <section className="py-16 md:py-24 bg-white">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12 md:mb-16"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-slate-deep mb-4 font-montserrat">
            La solution <span className={`text-gold-sienna`}>adaptée</span> à votre situation
          </h2>
          <p className="text-lg text-gray-refined max-w-2xl mx-auto">
            Nous avons conçu trois packs pour répondre précisément à chaque type de besoin en outplacement.
          </p>
        </motion.div>

<motion.div
          className="grid md:grid-cols-3 gap-8 items-stretch"
          variants={sectionVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
        >
          {scenarios.map((scenario) => (
            <motion.div
              key={scenario.key}
              variants={cardVariants}
              className={`relative flex flex-col bg-gradient-to-br ${scenario.highlighted ? `from-${scenario.color}/20 to-${scenario.color}/5` : "from-stone-50 to-white"} rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 md:p-8 border ${scenario.highlighted ? `border-${scenario.color}/50` : "border-stone-200"}`}
            >
              {scenario.highlighted && (
                <Badge variant="default" className={`absolute -top-3 right-6 bg-${scenario.color} text-white-serene`}>
                  Plus populaire
                </Badge>
              )}
              <div
                className={`mb-5 p-3 bg-${scenario.color}/10 rounded-full w-14 h-14 flex items-center justify-center self-start`}
              >
                <scenario.icon className={`w-7 h-7 text-${scenario.color}`} />
              </div>

<p className="text-sm text-gray-refined mb-2 font-medium italic">"{scenario.situation}"</p>
              <h3 className={`text-xl font-semibold text-${scenario.color} mb-3 font-montserrat`}>
                {scenario.solution}
              </h3>

<ul className="space-y-2 text-sm text-gray-refined mb-4 flex-grow">
                {scenario.features.slice(0, 3).map((feature) => (
                  <li key={feature} className="flex items-start">
                    <CheckCircle className={`w-4 h-4 text-${scenario.color} mr-2 mt-0.5 flex-shrink-0`} />
                    {feature}
                  </li>
                ))}
                {scenario.features.length > 3 && (
                  <li className="flex items-start">
                    <CheckCircle className={`w-4 h-4 text-${scenario.color} mr-2 mt-0.5 flex-shrink-0`} />
                    Et plus...
                  </li>
                )}
              </ul>

<div className="mt-auto">
                <p className="text-sm text-gray-refined mb-1">
                  <span className="font-semibold text-slate-deep">Bénéfice clé :</span> {scenario.benefit}
                </p>
                <p className="text-sm text-gray-refined mb-4">
                  <span className="font-semibold text-slate-deep">Résultat type :</span> {scenario.result}
                </p>
                <p className={`text-2xl font-bold text-slate-deep mb-5`}>{scenario.price}</p>
                <Button
                  className={`w-full ${scenario.highlighted ? `bg-${scenario.color} hover:bg-${scenario.color}/90 text-white-serene` : `bg-white text-${scenario.color} border-2 border-${scenario.color} hover:bg-${scenario.color}/5`}`}
                  onClick={() => onSelectScenario(scenario.key)}
                >
                  {scenario.cta}
                </Button>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/training-formation-visual.tsx" isMerged="true"
"use client"

import { useEffect, useState, useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Clock, BookOpen, Users, Award, CheckCircle, GraduationCap, Lightbulb, Target } from "lucide-react"

export default function TrainingFormationVisual() {
  // Référence pour l'animation
  const containerRef = useRef<HTMLDivElement>(null)
  const isInView = useInView(containerRef, { once: true, amount: 0.3 })

// État pour le compteur animé
  const [count, setCount] = useState(0)

// Animation du compteur
  useEffect(() => {
    if (isInView && count < 97) {
      const interval = setInterval(() => {
        setCount((prev) => {
          const next = prev + 1
          if (next >= 97) {
            clearInterval(interval)
            return 97
          }
          return next
        })
      }, 20)

return () => clearInterval(interval)
    }
  }, [isInView, count])

return (
    <div ref={containerRef} className="space-y-8">
      {/* Section principale */}
      <div className="bg-gradient-to-br from-ivory/80 to-white-serene rounded-2xl p-6 shadow-md">
        <div className="flex items-center mb-6">
          <div className="bg-gold-sienna/10 p-3 rounded-full mr-4">
            <GraduationCap className="w-6 h-6 text-gold-sienna" />
          </div>
          <div>
            <h4 className="text-xl font-bold text-slate-deep">Notre programme de formation</h4>
            <p className="text-gray-refined">Adapté à votre niveau d'intégration</p>
          </div>
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {/* Formation initiale */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="bg-white-serene rounded-xl p-5 shadow-md border-t-4 border-blue-slate"
          >
            <div className="flex justify-between items-start mb-4">
              <div className="flex items-center">
                <div className="bg-blue-slate/15 p-3 rounded-full mr-3">
                  <Clock className="w-5 h-5 text-blue-slate" />
                </div>
                <h5 className="font-semibold text-slate-deep">Formation initiale</h5>
              </div>
              <div className="bg-blue-slate text-white-serene text-lg font-bold px-3 py-1 rounded-lg">2h</div>
            </div>

<p className="text-sm text-gray-refined mb-4 bg-gray-refined/5 p-3 rounded-lg italic">
              Pour tous les nouveaux clients
            </p>

<div className="space-y-3">
              {[
                { icon: <BookOpen className="w-4 h-4 text-blue-slate" />, text: "Interprétation des données" },
                {
                  icon: <Lightbulb className="w-4 h-4 text-blue-slate" />,
                  text: "Utilisation optimale des recommandations",
                },
                {
                  icon: <Users className="w-4 h-4 text-blue-slate" />,
                  text: "Intégration dans vos entretiens clients",
                },
              ].map((item, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, x: -10 }}
                  animate={isInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.4, delay: 0.3 + i * 0.1 }}
                  className="flex items-center space-x-2 bg-white-serene p-2 rounded-lg shadow-sm border border-blue-slate/10"
                >
                  <div className="flex-shrink-0">{item.icon}</div>
                  <span className="text-sm text-gray-refined">{item.text}</span>
                </motion.div>
              ))}
            </div>
          </motion.div>

{/* Sessions approfondies */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="bg-white-serene rounded-xl p-5 shadow-md border-t-4 border-gold-sienna"
          >
            <div className="flex justify-between items-start mb-4">
              <div className="flex items-center">
                <div className="bg-gold-sienna/15 p-3 rounded-full mr-3">
                  <Target className="w-5 h-5 text-gold-sienna" />
                </div>
                <h5 className="font-semibold text-slate-deep">Sessions approfondies</h5>
              </div>
              <div className="bg-gold-sienna text-white-serene text-lg font-bold px-3 py-1 rounded-lg">4h</div>
            </div>

<p className="text-sm text-gray-refined mb-4 bg-gray-refined/5 p-3 rounded-lg italic">
              Pour les offres Complet et Premium
            </p>

<div className="space-y-3">
              {[
                {
                  icon: <Target className="w-4 h-4 text-gold-sienna" />,
                  text: "Cas pratiques spécifiques à vos secteurs",
                },
                { icon: <Lightbulb className="w-4 h-4 text-gold-sienna" />, text: "Stratégies avancées d'utilisation" },
                {
                  icon: <Users className="w-4 h-4 text-gold-sienna" />,
                  text: "Personnalisation approfondie des approches",
                },
              ].map((item, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, x: -10 }}
                  animate={isInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.4, delay: 0.5 + i * 0.1 }}
                  className="flex items-center space-x-2 bg-white-serene p-2 rounded-lg shadow-sm border border-gold-sienna/10"
                >
                  <div className="flex-shrink-0">{item.icon}</div>
                  <span className="text-sm text-gray-refined">{item.text}</span>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>

{/* Résultats et satisfaction */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="mt-8 bg-gradient-to-r from-slate-deep/5 to-gold-sienna/5 rounded-xl p-6 border border-gold-sienna/10"
        >
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="flex items-center mb-6 md:mb-0">
              <div className="bg-white-serene p-3 rounded-full shadow-sm mr-4">
                <Award className="w-8 h-8 text-gold-sienna" />
              </div>
              <div>
                <div className="flex items-baseline">
                  <span className="text-4xl font-bold text-gold-sienna">{count}</span>
                  <span className="text-2xl font-bold text-gold-sienna">%</span>
                </div>
                <h5 className="font-semibold text-slate-deep">Taux de satisfaction</h5>
              </div>
            </div>

<div className="md:ml-6 bg-white-serene p-4 rounded-xl shadow-sm max-w-md">
              <div className="flex items-start">
                <CheckCircle className="w-5 h-5 text-green-500 mt-1 mr-3 flex-shrink-0" />
                <p className="text-sm text-gray-refined">
                  <span className="font-medium">La majorité des utilisateurs</span> déclarent se sentir à l'aise avec
                  notre méthodologie <span className="font-medium text-gold-sienna">après une seule session</span>.
                </p>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/carousselhero/Image_fx (44).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2844%29.jpg-17uYqE8E33uFbTPNsVigB39ng0TVVN.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_ (45).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2845%29.jpg-55lzB3FfKwhNGPkAwJ8f59WBxMikMK.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_fx (42).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2842%29.jpg-lxImdyp7Lm7srHHRe2VZf7Cpf3xZP4.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_fx (37).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2837%29.jpg-Y71R2d8Pkvgiu9HFH2nyB6IEzmcdQm.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_fx (39).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2839%29.jpg-YxHn08WBNckchv7BFx7FcFVtCY2mqS.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/coach diversity MB.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coach%20diversity%20MB.jpg-lfDlrHFrMKa8yDYXUPsAmCGeCb3m2L.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_ (28).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2828%29.jpg-cAMpAp75Fres4OE9P1P0Ke0NrtBXEn.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_ (85).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2885%29.jpg-gV8aIY22o8OIOP7EeFB7gwtYAliy2V.png" isMerged="true"
[V0_FILE]png:file="public/carousselhero/Image_ (35).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2835%29.jpg-JRHGaN3OvcEMHCSDHjyRnSPBPnRN73.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (36).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2836%29.jpg-us2wcFnbFiQLmMy15a79mwPA63nsJi.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (29).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2829%29.jpg-gcvLsruHC23OhNqeSeVEbIHQ6YNT1f.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_fx (43).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2843%29.jpg-2wK99gm5dpRy60A8zpTir50xgx784L.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_fx (40).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2840%29.jpg-Gl7wMrgeZqGVZsJejm4PkFNaszJGWL.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_fx (38).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_fx%20%2838%29.jpg-flmfLWEhTDYPFRf8CWxT1SJiFVrpk3.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (84).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2884%29.jpg-QxiZCOLAWgOsscc2gRJUBDhHiKzynJ.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (86).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2886%29.jpg-O8hcHAlQrtiNrXesl15px5KBRA9Wrz.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (82).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2882%29.jpg-khBc8gng4DHvLQsENTrrZeYOpWZZrg.png" isMerged="true"
[V0_FILE]jpg:file="public/carousselhero/Image_ (78).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image_%20%2878%29.jpg-7PjeNFAlX7sA5FgC1tHduLHMy3IWBW.png" isMerged="true"
[V0_FILE]sql:file="scripts/create-prompts-table.sql" type="script" isMerged="true"
-- Création de la table prompts pour stocker les demandes des utilisateurs
CREATE TABLE IF NOT EXISTS prompts (
  id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  user_id UUID REFERENCES auth.users(id) NOT NULL,
  context TEXT NOT NULL,
  files TEXT[], -- Array de chemins de fichiers
  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL
);

-- Politique de sécurité : les utilisateurs ne peuvent voir que leurs propres prompts
ALTER TABLE prompts ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own prompts" ON prompts
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own prompts" ON prompts
  FOR INSERT WITH CHECK (auth.uid() = user_id);

-- Index pour améliorer les performances
CREATE INDEX IF NOT EXISTS prompts_user_id_idx ON prompts(user_id);
CREATE INDEX IF NOT EXISTS prompts_created_at_idx ON prompts(created_at DESC);
[V0_FILE]png:file="public/logo/careerpilot-pro-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ivoirev%20CCareer%20Pilot%20500%20180-xX3oPmqxoa1ukoHw2D3um8SqKuu6z0.png" isMerged="true"
[V0_FILE]png:file="public/logo/careerpilot-pro-logo-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/T%20tilleul%20%20CCareer%20Pilot%20500%20180%20%28500%20x%20500%20px%29-6dDgF7Z8hwW4lxC9iJRkKh8WJAFVRw.png" isMerged="true"
[V0_FILE]plaintext:file="public/equipe/.gitkeep" isMerged="true"
# This file ensures the equipe directory is preserved in version control
[V0_FILE]png:file="public/equipe/portraits-xm-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20XM%20CPP-XwePV86U47ULKRIPV1czs86v9lRYEW.png" isMerged="true"
[V0_FILE]png:file="public/equipe/portraits-jb-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TPortraits%20JB%20CPP-6SvBwuifJ43RSNRkH5fVxSsMa13uCp.png" isMerged="true"
[V0_FILE]png:file="public/equipe/portraits-ep-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20EP%20CPP-piz5nHZV51XcaMcgD2Arpr6Sr8PIpK.png" isMerged="true"
[V0_FILE]png:file="public/equipe/portraits-gs-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Portraits%20GS%20CPP-kfS2NNVcYwaqvgY8KrUnNCG1XsbnJQ.png" isMerged="true"
[V0_FILE]png:file="public/equipe/portraits-cb-cpp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/portraits-cb-cpp-pcQzX0D4Vq2IzSsSaL1vSn647cd5Kr.png" isMerged="true"
[V0_FILE]plaintext:file="public/" isMerged="true"
[V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CalendarDays, Clock, User, ArrowLeft } from "lucide-react"
import { getBlogPostBySlug } from "@/lib/blog-api"
import type { BlogPost } from "@/lib/supabase"
import Link from "next/link"

export default function BlogPostPage() {
  const params = useParams()
  const [post, setPost] = useState<BlogPost | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadPost() {
      try {
        if (params.slug) {
          const postData = await getBlogPostBySlug(params.slug as string)
          setPost(postData)
        }
      } catch (error) {
        console.error("Erreur lors du chargement de l'article:", error)
      } finally {
        setLoading(false)
      }
    }

loadPost()
  }, [params.slug])

if (loading) {
    return (
      <div className="min-h-screen bg-background-primary">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">Chargement...</div>
        </div>
      </div>
    )
  }

if (!post) {
    return (
      <div className="min-h-screen bg-background-primary">
        <div className="container mx-auto px-4 py-16">
          <div className="text-center">
            <h1 className="text-2xl font-bold mb-4">Article non trouvé</h1>
            <Link href="/blog">
              <Button>Retour au blog</Button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background-primary">
      <div className="container mx-auto px-4 py-16">
        {/* Navigation */}
        <div className="mb-8">
          <Link href="/blog">
            <Button variant="outline" className="flex items-center gap-2">
              <ArrowLeft className="w-4 h-4" />
              Retour au blog
            </Button>
          </Link>
        </div>

{/* Article */}
        <article className="max-w-4xl mx-auto">
          {/* Header */}
          <header className="mb-8">
            {post.featured_image_url && (
              <div className="aspect-video overflow-hidden rounded-lg mb-6">
                <img
                  src={post.featured_image_url || "/placeholder.svg"}
                  alt={post.title}
                  className="w-full h-full object-cover"
                />
              </div>
            )}

<div className="flex items-center gap-2 mb-4">
              {post.category && (
                <Badge
                  variant="secondary"
                  style={{ backgroundColor: post.category.color + "20", color: post.category.color }}
                >
                  {post.category.name}
                </Badge>
              )}
              {post.featured && <Badge variant="default">En vedette</Badge>}
            </div>

<h1 className="text-3xl md:text-4xl font-bold text-pearl-graphite mb-4">{post.title}</h1>

{post.excerpt && <p className="text-lg md:text-xl text-muted-foreground mb-6">{post.excerpt}</p>}

<div className="flex flex-col gap-3 text-sm text-muted-foreground md:flex-row md:items-center md:gap-6">
              {post.author && (
                <div className="flex items-center gap-2">
                  {post.author.avatar_url && (
                    <img
                      src={post.author.avatar_url || "/placeholder.svg"}
                      alt={post.author.name}
                      className="w-8 h-8 rounded-full"
                    />
                  )}
                  <div>
                    <div className="flex items-center gap-1">
                      <User className="w-4 h-4" />
                      {post.author.name}
                    </div>
                  </div>
                </div>
              )}
              {post.reading_time && (
                <div className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  {post.reading_time} min de lecture
                </div>
              )}
              {post.published_at && (
                <div className="flex items-center gap-1">
                  <CalendarDays className="w-4 h-4" />
                  {new Date(post.published_at).toLocaleDateString("fr-FR", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </div>
              )}
            </div>
          </header>

{/* Contenu */}
          <Card>
            <CardContent className="prose prose-lg max-w-none p-6 md:p-8">
              <div dangerouslySetInnerHTML={{ __html: post.content }} />
            </CardContent>
          </Card>

{/* Tags */}
          {post.tags && post.tags.length > 0 && (
            <div className="mt-8">
              <h3 className="text-lg font-semibold mb-4">Tags</h3>
              <div className="flex flex-wrap gap-2">
                {post.tags.map((tag) => (
                  <Badge key={tag.id} variant="outline">
                    {tag.name}
                  </Badge>
                ))}
              </div>
            </div>
          )}

{/* Auteur */}
          {post.author && post.author.bio && (
            <Card className="mt-8">
              <CardHeader>
                <h3 className="text-lg font-semibold">À propos de l'auteur</h3>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col items-center text-center gap-4 md:flex-row md:items-start md:text-left md:gap-4">
                  {post.author.avatar_url && (
                    <img
                      src={post.author.avatar_url || "/placeholder.svg"}
                      alt={post.author.name}
                      className="w-16 h-16 rounded-full flex-shrink-0"
                    />
                  )}
                  <div>
                    <h4 className="font-semibold mb-2">{post.author.name}</h4>
                    <p className="text-muted-foreground mb-2">{post.author.bio}</p>
                    {post.author.linkedin_url && (
                      <a
                        href={post.author.linkedin_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-600 hover:underline"
                      >
                        Voir le profil LinkedIn
                      </a>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </article>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ressources/page.tsx" isMerged="true"
"use client"

import { useState, useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Search, Filter, Clock, Download, ArrowRight, CalendarDays, Bookmark } from "lucide-react"
import Header from "../../components/header"

// Sample data for resources
const resourceCategories = [
  "Tous",
  "Études sectorielles",
  "Guides pratiques",
  "Webinaires",
  "Livres blancs",
  "Podcasts",
]

const resources = [
  {
    id: 1,
    title: "Analyse du marché de l'emploi Tech post-COVID",
    category: "Études sectorielles",
    description:
      "Une analyse approfondie des nouvelles dynamiques du marché de l'emploi dans le secteur technologique suite à la pandémie. Opportunités, défis et prévisions.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "15 Mai 2023",
    readTime: "12 min",
    premium: true,
  },
  {
    id: 2,
    title: "Guide de reconversion vers les métiers à impact environnemental",
    category: "Guides pratiques",
    description:
      "Découvrez les opportunités de carrière dans le secteur de la transition écologique et les compétences transférables les plus valorisées.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "3 Avril 2023",
    readTime: "18 min",
    premium: false,
  },
  {
    id: 3,
    title: "Les soft skills déterminantes pour 2024",
    category: "Livres blancs",
    description:
      "Notre étude sur l'évolution des compétences comportementales recherchées par les recruteurs, basée sur l'analyse de 15 000 offres d'emploi.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "21 Juin 2023",
    readTime: "15 min",
    premium: false,
  },
  {
    id: 4,
    title: "Webinaire : Accompagner la transition professionnelle des cadres seniors",
    category: "Webinaires",
    description:
      "Replay de notre webinaire sur les stratégies d'accompagnement des cadres de plus de 50 ans, avec des experts du secteur.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "7 Mars 2023",
    readTime: "45 min",
    premium: true,
  },
  {
    id: 5,
    title: "Podcast : L'IA dans le recrutement - opportunité ou menace ?",
    category: "Podcasts",
    description:
      "Une discussion avec des experts RH et IA sur l'impact de l'intelligence artificielle dans les processus de recrutement et d'accompagnement.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "12 Juillet 2023",
    readTime: "32 min",
    premium: false,
  },
  {
    id: 6,
    title: "Baromètre 2023 des salaires par secteur",
    category: "Études sectorielles",
    description:
      "Notre rapport annuel détaillant les évolutions salariales dans 25 secteurs d'activité, avec des focus sur les métiers en tension.",
    imageUrl: "/placeholder.svg?height=300&width=500",
    downloadUrl: "#",
    date: "9 Février 2023",
    readTime: "20 min",
    premium: true,
  },
]

export default function Resources() {
  const [activeCategory, setActiveCategory] = useState("Tous")
  const [searchTerm, setSearchTerm] = useState("")
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })

const filteredResources = resources.filter(
    (resource) =>
      (activeCategory === "Tous" || resource.category === activeCategory) &&
      (resource.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        resource.description.toLowerCase().includes(searchTerm.toLowerCase())),
  )

return (
    <div className="min-h-screen bg-ivory">
      <Header />
      <main className="pt-24 md:pt-32 pb-16 md:pb-24">
        <div className="container mx-auto px-4 sm:px-6 max-w-7xl">
          <motion.div
            ref={sectionRef}
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="mb-12 md:mb-16 text-center"
          >
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-deep mb-4 md:mb-6 font-montserrat">
              Centre de <span className="text-gold-sienna">Ressources</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-refined max-w-3xl mx-auto">
              Explorez notre bibliothèque d'études, guides et analyses pour approfondir votre expertise et optimiser
              votre accompagnement.
            </p>
          </motion.div>

<div className="flex flex-col md:flex-row justify-between items-center mb-12 space-y-6 md:space-y-0">
            <div className="relative max-w-md w-full">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-refined" />
              <input
                type="text"
                placeholder="Rechercher une ressource..."
                className="pl-12 pr-4 py-3 w-full rounded-xl border border-gray-refined/30 focus:outline-none focus:border-gold-sienna/50 focus:ring-2 focus:ring-gold-sienna/20 bg-white-serene shadow-sm"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>

<div className="flex items-center space-x-2 overflow-x-auto md:overflow-visible pb-2 md:pb-0 scrollbar-thin scrollbar-thumb-gold-sienna/50 scrollbar-track-transparent">
              <Filter className="text-tilleul-dense mr-1 flex-shrink-0" size={18} />
              {resourceCategories.map((category) => (
                <motion.button
                  key={category}
                  onClick={() => setActiveCategory(category)}
                  className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
                    activeCategory === category
                      ? "bg-gold-sienna text-white-serene"
                      : "bg-white-serene text-slate-deep hover:bg-gold-sienna/10"
                  }`}
                  whileHover={{ scale: activeCategory === category ? 1 : 1.05 }}
                  whileTap={{ scale: 0.98 }}
                >
                  {category}
                </motion.button>
              ))}
            </div>
          </div>

{filteredResources.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredResources.map((resource, index) => (
                <motion.div
                  key={resource.id}
                  initial={{ opacity: 0, y: 50 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
                  className="bg-white-serene rounded-3xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col"
                >
                  <div className="relative">
                    <img
                      src={resource.imageUrl || "/placeholder.svg"}
                      alt={resource.title}
                      className="w-full h-48 object-cover"
                    />
                    {resource.premium && (
                      <div className="absolute top-4 right-4 bg-gold-sienna text-white-serene text-xs font-bold px-3 py-1 rounded-full shadow-md">
                        Premium
                      </div>
                    )}
                    <div className="absolute top-4 left-4 bg-white-serene/90 backdrop-blur-sm text-xs font-medium px-3 py-1 rounded-full shadow-sm text-slate-deep">
                      {resource.category}
                    </div>
                  </div>

<div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center text-xs text-gray-refined mb-3 space-x-4">
                      <div className="flex items-center">
                        <CalendarDays size={14} className="mr-1" />
                        <span>{resource.date}</span>
                      </div>
                      <div className="flex items-center">
                        <Clock size={14} className="mr-1" />
                        <span>{resource.readTime}</span>
                      </div>
                    </div>

<h3 className="text-xl font-bold text-slate-deep mb-3 line-clamp-2">{resource.title}</h3>
                    <p className="text-gray-refined mb-6 line-clamp-3 flex-grow">{resource.description}</p>

<motion.button
                        whileHover={{ scale: 1.1 }}
                        whileTap={{ scale: 0.95 }}
                        className={`flex items-center p-2 rounded-full ${
                          resource.premium
                            ? "bg-gold-sienna/10 text-gold-sienna"
                            : "bg-tilleul-dense/10 text-tilleul-dense"
                        }`}
                      >
                        {resource.premium ? <Bookmark size={18} /> : <Download size={18} />}
                      </motion.button>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          ) : (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="text-center py-16"
            >
              <h3 className="text-xl font-semibold text-slate-deep mb-2">Aucune ressource trouvée</h3>
              <p className="text-gray-refined">Essayez de modifier vos critères de recherche</p>
            </motion.div>
          )}

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.5, ease: "easeOut" }}
            className="mt-16 text-center"
          >
            <h2 className="text-2xl font-bold text-slate-deep mb-4">Vous cherchez une ressource spécifique ?</h2>
            <p className="text-gray-refined mb-6 max-w-2xl mx-auto">
              Notre équipe peut vous aider à trouver les informations dont vous avez besoin ou à créer une analyse
              personnalisée pour votre secteur.
            </p>
            <motion.button
              whileHover={{ scale: 1.05, boxShadow: "0px 8px 15px rgba(0,0,0,0.1)" }}
              whileTap={{ scale: 0.95 }}
              className="bg-gold-sienna text-white-serene px-6 py-3 sm:px-8 sm:py-4 rounded-xl font-semibold shadow-md hover:shadow-lg transition-all duration-300 text-sm sm:text-base"
            >
              Demander une ressource sur-mesure
            </motion.button>
          </motion.div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/equipe/page.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Linkedin, Mail, ArrowRight, Award, BarChart3, Shield, Lightbulb } from "lucide-react"
import Header from "../../components/header"

// Sample data for team members
const teamMembers = [
  {
    name: "Gilles Stephan",
    role: "CEO & Fondateur",
    bio: "Ancien directeur du recrutement global pour des leqders de la tech et du e-commerce, Gilles a conçu Career Pilot Pack après avoir mis en place des cellules de reclassements, recrutés plus de 25 000 personnes à travers le monde et observé les limites des méthodes traditionnelles de la mobilité des talents. Diplômé de Paris IX-Dauphine et passionné par l'IA appliquée au développement professionnel.",
    expertise: ["Stratégie RH", "Outplacement", "IA & Data"],
    imageUrl: "/equipe/portraits-gs-cpp.png",
    linkedin: "https://www.linkedin.com/in/gillesstephan/",
    email: "gilles@careerpilotpro.com",
  },
  {
    name: "Elisabeth Pasteur",
    role: "Partner",
    bio: "Diplômée de l'ESSEC en management des organisations, elle a dirigé des opérations complexes dans le secteur aérien pendant plus de 20 ans. En 2014, elle cofonde 3.0 Coaching Pro pour accompagner dirigeants et équipes en transformation. Elle allie expertise stratégique, exigence opérationnelle et accompagnement humain.",
    expertise: ["Coaching", "Complex Operations", "Leadership"],
    imageUrl: "/equipe/portraits-ep-cpp.png",
    linkedin: "https://www.linkedin.com/in/epasteur/",
    email: "elisabeth@careerpilotpro.com",
  },
  {
    name: "Jérémy Bezault",
    role: "Partner",
    bio: "Jérémy Bezault dirige depuis plus de 20 ans des projets de transformation à grande échelle dans les secteurs du BPO et de la digitalisation. Titulaire d'un Master en Droit Bancaire et d'une spécialisation INSEAD, il a structuré et piloté des organisations complexes en France et à l'international, dans des contextes de croissance, de LBO et d'intégrations post-acquisition.",
    expertise: ["Software", "Transition - Réorganisation", "BPO"],
    imageUrl: "/equipe/portraits-jb-cpp.png",
    linkedin: "https://www.linkedin.com/in/jeremy-bezault/",
    email: "jeremy@careerpilotpro.com",
  },
  {
    name: "Xavier Molinie",
    role: "Partner",
    bio: "Avec plus de 25 ans de direction RH dans des environnements internationaux en forte croissance, Xavier accompagne aujourd'hui dirigeants et organisations dans leurs transformations humaines et stratégiques.Son approche conjugue structuration, accompagnement du changement et vision engagée du leadership au service de la performance durable.",
    expertise: ["Leadership", "Métiers Émergents", "Innovation RH"],
    imageUrl: "/equipe/portraits-xm-cpp.png",
    linkedin: "https://www.linkedin.com/in/xavier-molinie-3b9844/",
    email: "xavier@careerpilotpro.com",
  },
  {
    name: "Cédric Brochard",
    role: "Partner",
    bio: "Diplômé de l'Université Paris 8 et de l'INALCO, il a dirigé des transformations RH complexes dans les secteurs industriels, logistique et énergie pendant plus de 25 ans. Précédemment CHRO EMEA chez GEFCO, il accompagne les organisations dans leur mutation digitale et culturelle à l'échelle internationale. Il allie vision stratégique, excellence opérationnelle et développement du potentiel humain.",
    expertise: ["HR Transformation", "Talent Management", "Cross-Cultural Leadership"],
    imageUrl: "/equipe/portraits-cb-cpp.png",
    linkedin: "https://www.linkedin.com/in/cedric-brochard/",
    email: "cedric@careerpilotpro.com",
  },
]

const values = [
  {
    title: "Excellence Augmentée",
    description:
      "Nous croyons que la technologie doit amplifier l'expertise humaine, pas la remplacer. Chaque analyse est augmentée par l'IA mais validée par nos experts.",
    icon: Award, // Changed to actual component
  },
  {
    title: "Impact Mesurable",
    description:
      "Nous nous engageons à créer une valeur tangible et quantifiable pour nos clients et leurs candidats, avec des métriques claires et transparentes.",
    icon: BarChart3, // Changed to actual component
  },
  {
    title: "Éthique & Confidentialité",
    description:
      "La confiance est notre fondation. Nous appliquons les standards les plus stricts en matière de protection des données et d'utilisation responsable de l'IA.",
    icon: Shield, // Changed to actual component
  },
  {
    title: "Innovation Pragmatique",
    description:
      "Nous innovons constamment, mais toujours avec un objectif concret d'amélioration de l'expérience utilisateur et de l'efficacité opérationnelle.",
    icon: Lightbulb, // Changed to actual component
  },
]

export default function Team() {
  const sectionRef = useRef(null)
  const valuesRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })
  const isValuesInView = useInView(valuesRef, { once: true, margin: "-100px 0px" })

return (
    <div className="min-h-screen bg-ivory">
      <Header />
      <main className="pt-24 md:pt-32 pb-16 md:pb-24">
        <div className="container mx-auto px-4 sm:px-6 max-w-7xl">
          <motion.div
            ref={sectionRef}
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="mb-12 md:mb-16 text-center"
          >
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-deep mb-4 md:mb-6 font-montserrat">
              Notre <span className="text-gold-sienna">Équipe</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-refined max-w-3xl mx-auto">
              Découvrez les experts passionnés qui combinent expertise métier et maîtrise technologique pour
              révolutionner l'accompagnement professionnel.
            </p>
          </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-16 md:mb-20">
            {teamMembers.map((member, index) => (
              <motion.div
                key={member.name}
                initial={{ opacity: 0, y: 50 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{
                  duration: 0.6,
                  delay: index * 0.1,
                  ease: "easeOut",
                }}
                className="bg-white-serene rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 flex flex-col"
              >
                <div className="relative w-36 h-36 md:w-48 md:h-48 mx-auto mt-6 md:mt-8 mb-4 md:mb-6">
                  <img
                    src={member.imageUrl || "/placeholder.svg"}
                    alt={member.name}
                    className="w-full h-full object-cover rounded-full"
                  />
                </div>
                <div className="text-center mb-4">
                  <h3 className="text-xl md:text-2xl font-bold text-slate-deep">{member.name}</h3>
                  <p className="text-gold-sienna font-medium text-sm md:text-base">{member.role}</p>
                </div>

<div className="p-4 md:p-6 flex-grow">
                  <p className="text-gray-refined mb-4 text-sm md:text-base">{member.bio}</p>

<div className="mb-4">
                    <h4 className="text-sm font-semibold text-slate-deep mb-2">Expertises :</h4>
                    <div className="flex flex-wrap gap-2">
                      {member.expertise.map((skill) => (
                        <span
                          key={skill}
                          className="bg-tilleul-dense/10 text-tilleul-dense text-xs font-medium px-2 py-1 md:px-3 rounded-full"
                        >
                          {skill}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

<div ref={valuesRef} className="mt-16 md:mt-24">
            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5 }}
              className="text-3xl font-bold text-slate-deep mb-6 text-center"
            >
              Nos Valeurs
            </motion.h2>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="text-lg md:text-xl text-gray-refined max-w-3xl mx-auto text-center mb-12 md:mb-16"
            >
              Les principes qui guident notre approche et définissent notre culture d'entreprise
            </motion.p>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
              {values.map((value, index) => (
                <motion.div
                  key={value.title}
                  initial={{ opacity: 0, y: 50 }}
                  animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
                  className="rounded-3xl p-6 transition-all duration-300 text-center bg-transparent" // Removed specific bg per index
                >
                  <div
                    className="w-14 h-14 md:w-16 md:h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
                    style={{ backgroundColor: "#A6773F" }} // Common background for all icons
                  >
                    <value.icon className="w-8 h-8 md:w-10 md:h-10 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-slate-deep mb-3">{value.title}</h3>
                  <p className="text-gray-refined text-sm md:text-base">{value.description}</p>
                </motion.div>
              ))}
            </div>
          </div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.5, ease: "easeOut" }}
            className="mt-16 md:mt-24 bg-gradient-to-br from-slate-deep to-pearl-graphite rounded-3xl p-6 md:p-12 text-white-serene shadow-xl"
          >
            <div className="flex flex-col md:flex-row items-center justify-between">
              <div className="mb-8 md:mb-0 md:mr-12 md:w-2/3 text-center md:text-left">
                <h2 className="text-2xl md:text-3xl font-bold mb-4">Rejoignez l'Aventure CareerPilot Pro</h2>
                <p className="text-white-serene/80 text-base md:text-lg">
                  Nous recherchons constamment des talents passionnés par l'innovation, l'IA éthique et la
                  transformation des parcours professionnels. Découvrez nos opportunités actuelles et futures.
                </p>
              </div>
              <motion.button
                whileHover={{ scale: 1.05, boxShadow: "0px 10px 20px rgba(0,0,0,0.2)" }}
                whileTap={{ scale: 0.95 }}
                className="w-full md:w-auto group bg-gold-sienna text-white-serene px-6 py-3 md:px-8 md:py-4 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center text-sm md:text-base"
              >
                <span>Partagez votre intérêt</span>
                <ArrowRight className="w-4 h-4 md:w-5 md:h-5 ml-2 group-hover:translate-x-1 transition-transform duration-200" />
              </motion.button>
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-infographic.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import {
  Clock,
  TrendingUp,
  BarChart3,
  PieChart,
  LineChart,
  DollarSign,
  Award,
  BarChartIcon as ChartBar,
  Zap,
  Users,
  ArrowRight,
} from "lucide-react"

// Default export
export default function DashboardInfographic() {
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })

const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
  }

const circleVariants = {
    hidden: { pathLength: 0 },
    visible: { pathLength: 1, transition: { duration: 1.5, ease: "easeInOut" } },
  }

return (
    <motion.div
      ref={sectionRef}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={containerVariants}
      className="bg-white-serene rounded-3xl p-6 md:p-8 shadow-xl overflow-hidden relative"
    >
      <div className="absolute -top-24 -right-24 w-48 h-48 bg-gold-sienna/10 rounded-full blur-3xl" />
      <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-tilleul-dense/10 rounded-full blur-3xl" />
      <div className="absolute top-1/2 left-1/4 w-24 h-24 bg-blue-slate/10 rounded-full blur-xl" />

<div className="relative z-10">
        <motion.div variants={itemVariants} className="text-center mb-8">
          <div className="inline-flex items-center justify-center bg-slate-deep text-white-serene px-4 py-2 rounded-full mb-4">
            <ChartBar className="w-5 h-5 mr-2" />
            <span className="font-semibold">Dashboard Personnalisé</span>
          </div>
          <h2 className="text-2xl md:text-3xl font-bold text-slate-deep mb-2">
            Mesurez votre <span className="text-gold-sienna">ROI</span> en temps réel
          </h2>
          <p className="text-gray-refined max-w-2xl mx-auto">
            Notre tableau de bord analytique vous permet de suivre précisément l'impact de notre solution
          </p>
        </motion.div>

<motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
          <div className="bg-gradient-to-br from-blue-slate/10 to-white-serene rounded-2xl p-6 border border-blue-slate/20 shadow-sm hover:shadow-md transition-shadow">
            <div className="flex items-start">
              <div className="bg-blue-slate/20 p-3 rounded-xl mr-4">
                <Clock className="w-6 h-6 text-blue-slate" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-slate-deep mb-1">Temps économisé</h3>
                <p className="text-sm text-gray-refined mb-4">Par dossier client</p>
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-blue-slate">15h</span>
                  <span className="ml-2 text-sm text-gray-refined">en moyenne</span>
                </div>
                <div className="mt-4 bg-white-serene/60 h-2 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={isInView ? { width: "85%" } : { width: 0 }}
                    transition={{ duration: 1, delay: 0.3 }}
                    className="h-full bg-blue-slate rounded-full"
                  />
                </div>
              </div>
            </div>
          </div>

<div className="bg-gradient-to-br from-gold-sienna/10 to-white-serene rounded-2xl p-6 border border-gold-sienna/20 shadow-sm hover:shadow-md transition-shadow">
            <div className="flex items-start">
              <div className="bg-gold-sienna/20 p-3 rounded-xl mr-4">
                <Zap className="w-6 h-6 text-gold-sienna" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-slate-deep mb-1">Accélération placement</h3>
                <p className="text-sm text-gray-refined mb-4">Réduction du délai</p>
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-gold-sienna">-37%</span>
                  <span className="ml-2 text-sm text-gray-refined">en moyenne</span>
                </div>
                <div className="mt-4 bg-white-serene/60 h-2 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={isInView ? { width: "37%" } : { width: 0 }}
                    transition={{ duration: 1, delay: 0.4 }}
                    className="h-full bg-gold-sienna rounded-full"
                  />
                </div>
              </div>
            </div>
          </div>

<div className="bg-gradient-to-br from-tilleul-dense/10 to-white-serene rounded-2xl p-6 border border-tilleul-dense/20 shadow-sm hover:shadow-md transition-shadow">
            <div className="flex items-start">
              <div className="bg-tilleul-dense/20 p-3 rounded-xl mr-4">
                <Users className="w-6 h-6 text-tilleul-dense" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-slate-deep mb-1">Satisfaction client</h3>
                <p className="text-sm text-gray-refined mb-4">Amélioration constatée</p>
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-tilleul-dense">+42%</span>
                  <span className="ml-2 text-sm text-gray-refined">en moyenne</span>
                </div>
                <div className="mt-4 bg-white-serene/60 h-2 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={isInView ? { width: "42%" } : { width: 0 }}
                    transition={{ duration: 1, delay: 0.5 }}
                    className="h-full bg-tilleul-dense rounded-full"
                  />
                </div>
              </div>
            </div>
          </div>
        </motion.div>

<motion.div variants={itemVariants} className="mb-10">
          <div className="bg-gradient-to-br from-slate-deep to-pearl-graphite rounded-2xl p-6 text-white-serene overflow-hidden relative">
            <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-xl" />
            <div className="absolute bottom-0 left-0 w-24 h-24 bg-gold-sienna/10 rounded-full blur-xl" />
            <div className="relative z-10">
              <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
                <div className="mb-4 md:mb-0">
                  <div className="flex items-center">
                    <Award className="w-6 h-6 text-gold-sienna mr-2" />
                    <h3 className="text-xl font-bold">Analyse Premium</h3>
                  </div>
                  <p className="text-white-serene/70 mt-1">Exclusivité clients Premium</p>
                </div>
                <div className="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-xl border border-white/20">
                  <span className="text-sm">Analyse ROI trimestrielle détaillée</span>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {[
                  { title: "Impact sur la marge", value: "+18%", color: "#B8860B", icon: DollarSign },
                  { title: "Conversion commerciale", value: "+25%", color: "#788D63", icon: TrendingUp },
                  { title: "Productivité équipe", value: "+32%", color: "#4A5568", icon: LineChart },
                ].map((item, idx) => (
                  <div key={idx} className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/10">
                    <div className="flex items-center mb-3">
                      <item.icon className={`w-5 h-5 text-[${item.color}] mr-2`} />
                      <h4 className="font-semibold">{item.title}</h4>
                    </div>
                    <div className="flex items-center justify-center">
                      <svg width="100" height="100" viewBox="0 0 100 100" className="transform -rotate-90">
                        <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="8" />
                        <motion.circle
                          cx="50"
                          cy="50"
                          r="40"
                          fill="none"
                          stroke={item.color}
                          strokeWidth="8"
                          strokeLinecap="round"
                          strokeDasharray="251.2"
                          strokeDashoffset="0"
                          variants={circleVariants}
                          style={{ rotate: -90, transformOrigin: "center" }}
                        />
                        <text x="50" y="55" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold">
                          {item.value}
                        </text>
                      </svg>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </motion.div>

<motion.div variants={itemVariants} className="mb-8">
          <div className="bg-ivory/50 rounded-2xl p-6 border border-gold-sienna/10">
            <div className="flex items-center mb-6">
              <div className="bg-gold-sienna/10 p-3 rounded-xl mr-4">
                <BarChart3 className="w-6 h-6 text-gold-sienna" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-deep">Retour sur investissement rapide</h3>
                <p className="text-gray-refined">Évolution du ROI sur les 3 premiers mois</p>
              </div>
            </div>
            <div className="relative pt-6 pb-2">
              <div className="absolute top-10 left-0 right-0 h-1 bg-gray-refined/20"></div>
              <div className="flex justify-between relative">
                {[
                  { month: 1, label: "Mise en place", roi: "+15%", color: "blue-slate", delay: 0.3, size: "w-8 h-8" },
                  { month: 2, label: "Optimisation", roi: "+52%", color: "tilleul-dense", delay: 0.5, size: "w-8 h-8" },
                  {
                    month: 3,
                    label: "ROI positif",
                    roi: "+94%",
                    color: "gold-sienna",
                    delay: 0.7,
                    size: "w-12 h-12",
                    roiClass: "text-xl",
                  },
                ].map((item) => (
                  <div key={item.month} className="flex flex-col items-center">
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={isInView ? { scale: 1 } : { scale: 0 }}
                      transition={{ duration: 0.5, delay: item.delay }}
                      className={`${item.size} bg-white-serene rounded-full border-2 border-${item.color} flex items-center justify-center z-10`}
                    >
                      <span className={`text-sm font-bold text-${item.color}`}>{item.month}</span>
                    </motion.div>
                    <div className="mt-2 text-center">
                      <p className="font-medium text-slate-deep">Mois {item.month}</p>
                      <p className="text-sm text-gray-refined">{item.label}</p>
                      <div className={`mt-2 text-${item.color} font-bold ${item.roiClass || ""}`}>{item.roi}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="mt-6 bg-white-serene/80 p-4 rounded-xl">
              <div className="flex items-center">
                <PieChart className="w-5 h-5 text-gold-sienna mr-2 flex-shrink-0" />
                <p className="text-slate-deep">
                  <span className="font-bold">94% de nos clients</span> constatent un ROI positif dès le troisième mois
                  d'utilisation.
                </p>
              </div>
            </div>
          </div>
        </motion.div>

<motion.div variants={itemVariants} className="text-center">
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gradient-to-r from-gold-sienna to-ochre-smoky text-white-serene px-6 py-3 rounded-xl font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center"
          >
            <span>Demander une démo du dashboard</span>
            <ArrowRight className="w-5 h-5 ml-2" />
          </motion.button>
        </motion.div>
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/formation-info.tsx" isMerged="true"
interface FormationInfoProps {
  title?: string
  description?: string
}

// Default export
export default function FormationInfo({
  title = "Career Pilot Pack",
  description = "Explore the Career Pilot Pack and discover valuable insights.",
}: FormationInfoProps) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
      <p>This Career Pilot Pack is designed to help you succeed.</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/training-infographic.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { motion, useInView, useScroll, useTransform } from "framer-motion"
import { Clock, Users, BarChart3, CheckCircle2, BookOpen, Award, Zap, Lightbulb, Target } from "lucide-react"

// Default export
export default function TrainingInfographic() {
  const containerRef = useRef<HTMLDivElement>(null)
  const isInView = useInView(containerRef, { once: true, amount: 0.2 })
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  })

const progressScale = useTransform(scrollYProgress, [0, 0.5], [0, 1])
  const satisfactionOpacity = useTransform(scrollYProgress, [0.3, 0.6], [0, 1])
  const satisfactionScale = useTransform(scrollYProgress, [0.3, 0.6], [0.8, 1])

const CounterAnimation = ({ value }: { value: number }) => {
    return (
      <motion.span
        initial={{ opacity: 0 }}
        animate={isInView ? { opacity: 1 } : { opacity: 0 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <motion.span
          initial={{ count: 0 }}
          animate={isInView ? { count: value } : { count: 0 }}
          transition={{ duration: 2, type: "spring", bounce: 0.2 }}
        >
          {({ count }) => <>{Math.floor(count)}</>}
        </motion.span>
        %
      </motion.span>
    )
  }

const initialModules = [
    {
      icon: <BarChart3 className="w-5 h-5" />,
      title: "Interprétation des données",
      description: "Comprendre et analyser les insights générés",
    },
    {
      icon: <Target className="w-5 h-5" />,
      title: "Utilisation des recommandations",
      description: "Exploiter efficacement les suggestions",
    },
    {
      icon: <Users className="w-5 h-5" />,
      title: "Intégration aux entretiens",
      description: "Incorporer les insights dans vos échanges",
    },
  ]

const advancedModules = [
    {
      icon: <BookOpen className="w-5 h-5" />,
      title: "Cas pratiques sectoriels",
      description: "Adaptés à vos domaines d'intervention",
    },
    {
      icon: <Lightbulb className="w-5 h-5" />,
      title: "Stratégies avancées",
      description: "Techniques d'accompagnement optimisées",
    },
    {
      icon: <Zap className="w-5 h-5" />,
      title: "Personnalisation approfondie",
      description: "Adapter les outils à chaque profil client",
    },
  ]

return (
    <div ref={containerRef} className="relative w-full py-12 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-white to-gray-50 z-0" />
      <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-secondary/5 rounded-full blur-3xl" />

<div className="relative z-10 max-w-6xl mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-gradient-primary">Notre Programme de Formation</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Une approche structurée pour maîtriser rapidement notre solution et maximiser votre efficacité
          </p>
        </motion.div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-20">
          {[
            {
              type: "Initiale",
              duration: "2h",
              audience: "Pour tous les nouveaux clients",
              description: "Session complète couvrant les fondamentaux pour une prise en main rapide et efficace",
              modules: initialModules,
              color: "primary",
              icon: Clock,
              delay: 0.1,
              xOffset: -50,
            },
            {
              type: "Avancées",
              duration: "4h",
              audience: "Pour les offres Complet et Premium",
              description: "Formation approfondie avec des cas pratiques spécifiques à vos secteurs d'intervention",
              modules: advancedModules,
              color: "secondary",
              icon: BookOpen,
              delay: 0.3,
              xOffset: 50,
            },
          ].map((formation, formIdx) => (
            <motion.div
              key={formIdx}
              initial={{ opacity: 0, x: formation.xOffset }}
              animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: formation.xOffset }}
              transition={{ duration: 0.7, delay: formation.delay }}
              className="relative bg-white rounded-2xl shadow-xl overflow-hidden"
            >
              <div className={`bg-${formation.color} text-white p-4 flex items-center justify-between`}>
                <div className="flex items-center">
                  <formation.icon className="w-6 h-6 mr-3" />
                  <h3 className="text-xl font-bold">Formation {formation.type}</h3>
                </div>
                <div
                  className={`bg-white text-${formation.color} font-bold rounded-full h-10 w-10 flex items-center justify-center`}
                >
                  {formation.duration}
                </div>
              </div>
              <div className="p-6">
                <div className="mb-6">
                  <h4 className="font-semibold text-gray-800 mb-2">{formation.audience}</h4>
                  <p className="text-gray-600 text-sm">{formation.description}</p>
                </div>
                <div className="space-y-4">
                  {formation.modules.map((module, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, y: 20 }}
                      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                      transition={{ duration: 0.5, delay: formation.delay + 0.2 + index * 0.1 }}
                      className={`flex p-3 bg-${formation.color}/5 rounded-lg`}
                    >
                      <div
                        className={`bg-${formation.color}/10 text-${formation.color} p-2 rounded-md mr-3 self-start`}
                      >
                        {module.icon}
                      </div>
                      <div>
                        <h5 className="font-medium text-gray-800">{module.title}</h5>
                        <p className="text-sm text-gray-600">{module.description}</p>
                      </div>
                    </motion.div>
                  ))}
                </div>
                <motion.div
                  initial={{ width: 0 }}
                  animate={isInView ? { width: "100%" } : { width: 0 }}
                  transition={{ duration: 1, delay: formation.delay + 0.4 + formation.modules.length * 0.1 }}
                  className={`h-1 bg-${formation.color}/70 rounded-full mt-6`}
                />
              </div>
            </motion.div>
          ))}
        </div>

<motion.div
          style={{ opacity: satisfactionOpacity, scale: satisfactionScale }}
          className="relative bg-gradient-to-br from-slate-800 to-slate-900 text-white rounded-2xl shadow-2xl p-8 overflow-hidden"
        >
          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-secondary/20 rounded-full blur-3xl" />
          <div className="relative z-10 flex flex-col md:flex-row items-center justify-between">
            <div className="text-center md:text-left mb-8 md:mb-0">
              <h3 className="text-lg font-medium text-white/80 mb-2">Taux de satisfaction post-formation</h3>
              <div className="text-6xl md:text-7xl font-bold text-white mb-2">
                <CounterAnimation value={97} />
              </div>
              <div className="flex justify-center md:justify-start space-x-1">
                {[...Array(5)].map((_, star) => (
                  <motion.div
                    key={star}
                    initial={{ opacity: 0, scale: 0 }}
                    animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}
                    transition={{ duration: 0.3, delay: 1 + star * 0.1 }}
                  >
                    <svg
                      className="w-5 h-5 text-yellow-400"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </motion.div>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:w-1/2">
              {[
                {
                  icon: CheckCircle2,
                  title: "Maîtrise rapide",
                  desc: "La majorité des utilisateurs se sentent à l'aise après une seule session",
                  delay: 1.2,
                },
                {
                  icon: Award,
                  title: "Certification",
                  desc: "Attestation de formation délivrée à tous les participants",
                  delay: 1.3,
                },
                {
                  icon: Zap,
                  title: "Impact immédiat",
                  desc: "Mise en application directe dans vos processus existants",
                  delay: 1.4,
                },
                {
                  icon: Users,
                  title: "Support continu",
                  desc: "Assistance post-formation pour tous vos collaborateurs",
                  delay: 1.5,
                },
              ].map((benefit, idx) => (
                <motion.div
                  key={idx}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                  transition={{ duration: 0.5, delay: benefit.delay }}
                  className="bg-white/10 p-4 rounded-lg"
                >
                  <benefit.icon className="w-6 h-6 text-primary mb-2" />
                  <h4 className="font-medium text-white mb-1">{benefit.title}</h4>
                  <p className="text-sm text-white/70">{benefit.desc}</p>
                </motion.div>
              ))}
            </div>
          </div>
          <motion.div
            style={{ scaleX: progressScale }}
            className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary origin-left"
          />
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/training-highlights.tsx" isMerged="true"
// Default export
export default function TrainingHighlights() {
  const highlights = [
    {
      title: "Comprehensive Curriculum",
      description:
        "Our curriculum is designed to provide you with a solid foundation in all aspects of aviation, from aerodynamics to meteorology.",
    },
    {
      title: "Experienced Instructors",
      description: "Learn from seasoned pilots and aviation professionals with years of experience in the field.",
    },
    {
      title: "State-of-the-Art Facilities",
      description: "Train in modern classrooms and flight simulators equipped with the latest technology.",
    },
    {
      title: "Career Pilot Pack",
      description:
        "Get access to our exclusive Career Pilot Pack, which includes resources and support to help you launch your aviation career.",
    },
    {
      title: "Personalized Training",
      description: "We tailor our training programs to meet your individual needs and learning style.",
    },
    {
      title: "Industry Connections",
      description: "Benefit from our strong relationships with airlines and other aviation companies.",
    },
  ]

return (
    <section className="bg-gray-100 py-12">
      <div className="container mx-auto px-4 text-center">
        <h2 className="text-3xl font-semibold mb-8">Training Highlights</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {highlights.map((highlight, index) => (
            <div key={index} className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-2">{highlight.title}</h3>
              <p className="text-gray-700">{highlight.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/training-visual-explanation.tsx" isMerged="true"
"use client"

import { useRef, useState } from "react"
import { motion, useInView, AnimatePresence } from "framer-motion"
import {
  Clock,
  Users,
  BarChart3,
  CheckCircle2,
  GraduationCap,
  Award,
  BookOpen,
  type LucideIcon,
  BrainCircuit,
  ArrowRight,
  Zap,
} from "lucide-react"

// Default export
export default function TrainingVisualExplanation() {
  const containerRef = useRef(null)
  const isInView = useInView(containerRef, { once: true, amount: 0.3 })
  const [activeTab, setActiveTab] = useState<"initial" | "advanced">("initial")

const Counter = ({ from = 0, to, duration = 2 }: { from?: number; to: number; duration?: number }) => {
    const nodeRef = useRef<HTMLSpanElement>(null)
    return (
      <motion.span
        ref={nodeRef}
        initial={{ opacity: 0 }}
        animate={isInView ? { opacity: 1 } : { opacity: 0 }}
        className="text-gold-sienna text-5xl md:text-6xl font-bold inline-block"
      >
        <motion.span
          initial={{ count: from }}
          animate={isInView ? { count: to } : { count: from }}
          transition={{ duration: duration, type: "spring", damping: 20 }}
        >
          {/* @ts-ignore Framer Motion's custom prop 'count' */}
          {({ count }) => Math.floor(count)}
        </motion.span>
        %
      </motion.span>
    )
  }

interface TrainingModule {
    id: string
    title: string
    icon: LucideIcon
    description: string
  }

const initialModules: TrainingModule[] = [
    {
      id: "data-interpretation",
      title: "Interprétation des données",
      icon: BrainCircuit,
      description: "Analyser et comprendre les insights générés",
    },
    {
      id: "recommendations",
      title: "Utilisation des recommandations",
      icon: CheckCircle2,
      description: "Exploiter efficacement les suggestions proposées",
    },
    {
      id: "integration",
      title: "Intégration aux entretiens",
      icon: Users,
      description: "Incorporer les insights dans vos échanges clients",
    },
  ]

const advancedModules: TrainingModule[] = [
    {
      id: "sectoral",
      title: "Cas pratiques sectoriels",
      icon: BookOpen,
      description: "Adaptés à vos domaines d'intervention spécifiques",
    },
    {
      id: "advanced",
      title: "Stratégies avancées",
      icon: BarChart3,
      description: "Techniques d'accompagnement optimisées",
    },
    {
      id: "personalization",
      title: "Personnalisation approfondie",
      icon: Zap,
      description: "Adapter les outils à chaque profil client",
    },
  ]

const benefits = [
    { icon: CheckCircle2, title: "Maîtrise rapide", desc: "Dès la première session", delay: 0.6 },
    { icon: Award, title: "Attestation fournie", desc: "Certification de compétence", delay: 0.7 },
    { icon: Zap, title: "Impact immédiat", desc: "ROI dès la première utilisation", delay: 0.8 },
  ]

return (
    <div ref={containerRef} className="w-full overflow-hidden">
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
        transition={{ duration: 0.7 }}
        className="relative p-6 md:p-8 lg:p-12 rounded-3xl bg-white shadow-xl overflow-hidden"
      >
        <div className="absolute -top-24 -right-24 w-64 h-64 bg-gold-sienna/10 rounded-full blur-3xl" />
        <div className="absolute -bottom-32 -left-32 w-72 h-72 bg-tilleul-dense/10 rounded-full blur-3xl" />

<div className="relative z-10 text-center mb-10 md:mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-deep mb-4">
            Formation <span className="text-gold-sienna">Career Pilot Pro</span>
          </h2>
          <p className="text-gray-refined max-w-2xl mx-auto">
            Une approche structurée pour maîtriser rapidement notre solution
          </p>
        </div>

<div className="relative z-10 flex justify-center mb-10 md:mb-12">
          <div className="bg-gray-100 p-1 rounded-full inline-flex shadow-sm">
            {(["initial", "advanced"] as const).map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`flex items-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-sm font-medium transition-all ${
                  activeTab === tab
                    ? tab === "initial"
                      ? "bg-gold-sienna text-white shadow-md"
                      : "bg-tilleul-dense text-white shadow-md"
                    : "text-slate-deep hover:bg-gray-200"
                }`}
              >
                {tab === "initial" ? <Clock className="w-4 h-4" /> : <BookOpen className="w-4 h-4" />}
                <span className="hidden sm:inline">{tab === "initial" ? "Formation" : "Sessions"}</span>{" "}
                {tab === "initial" ? "Initiale" : "Avancées"}
              </button>
            ))}
          </div>
        </div>

<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-10 md:mb-12">
          <motion.div
            key={activeTab}
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className={`p-6 rounded-2xl ${activeTab === "initial" ? "bg-gold-sienna/10" : "bg-tilleul-dense/10"}`}
          >
            <div className="flex items-center mb-6">
              <div
                className={`p-3 sm:p-4 rounded-full ${
                  activeTab === "initial" ? "bg-gold-sienna" : "bg-tilleul-dense"
                } text-white mr-4 sm:mr-5`}
              >
                <Clock className="w-5 h-5 sm:w-6 sm:h-6" />
              </div>
              <div>
                <h3 className="text-xl sm:text-2xl font-bold text-slate-deep">
                  {activeTab === "initial" ? "2h" : "4h"}
                </h3>
                <p className="text-gray-refined text-sm sm:text-base">
                  {activeTab === "initial" ? "Pour tous les nouveaux clients" : "Pour les offres Complet et Premium"}
                </p>
              </div>
            </div>
            {[
              {
                icon: Users,
                title: "Public cible",
                textInitial: "Accessible à tous vos consultants et recruteurs, sans limitation de participants.",
                textAdvanced: "Sessions en groupes restreints pour maximiser l'apprentissage pratique et personnalisé.",
                delay: 0.4,
              },
              {
                icon: GraduationCap,
                title: "Résultat",
                textInitial:
                  "Autonomie opérationnelle et maîtrise des fonctions essentielles dès la première utilisation.",
                textAdvanced:
                  "Expertise avancée et capacité à maximiser le potentiel de la plateforme pour des cas complexes.",
                delay: 0.5,
              },
            ].map((item, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: item.delay }}
                className={`bg-white rounded-xl p-4 sm:p-5 shadow-sm ${idx > 0 ? "mt-4" : ""}`}
              >
                <h4 className="font-medium text-slate-deep mb-2 flex items-center text-sm sm:text-base">
                  <item.icon className="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
                  {item.title}
                </h4>
                <p className="text-gray-refined text-xs sm:text-sm">
                  {activeTab === "initial" ? item.textInitial : item.textAdvanced}
                </p>
              </motion.div>
            ))}
          </motion.div>

<motion.div
            key={`${activeTab}-modules`}
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 30 }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <h3 className="text-lg sm:text-xl font-bold text-slate-deep mb-5 flex items-center">
              <BookOpen className="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
              Programme de formation
            </h3>
            <div className="space-y-3 sm:space-y-4">
              <AnimatePresence mode="wait">
                {(activeTab === "initial" ? initialModules : advancedModules).map((module, index) => (
                  <motion.div
                    key={module.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    transition={{ delay: index * 0.1 }}
                    className={`p-3 sm:p-4 border-l-4 ${
                      activeTab === "initial"
                        ? "border-gold-sienna bg-gold-sienna/5"
                        : "border-tilleul-dense bg-tilleul-dense/5"
                    } rounded-r-lg`}
                  >
                    <div className="flex items-start">
                      <div
                        className={`p-2 rounded-md ${
                          activeTab === "initial" ? "bg-gold-sienna/10" : "bg-tilleul-dense/10"
                        } mr-3 sm:mr-4`}
                      >
                        <module.icon
                          className={`w-4 h-4 sm:w-5 sm:h-5 ${activeTab === "initial" ? "text-gold-sienna" : "text-tilleul-dense"}`}
                        />
                      </div>
                      <div>
                        <h4 className="font-medium text-slate-deep text-sm sm:text-base">{module.title}</h4>
                        <p className="text-xs sm:text-sm text-gray-refined">{module.description}</p>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>
          </motion.div>
        </div>

<motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.7, delay: 0.5 }}
          className="relative z-10 bg-slate-deep text-white rounded-2xl p-6 sm:p-8 shadow-lg overflow-hidden"
        >
          <div className="absolute top-0 right-0 w-40 h-40 bg-gold-sienna/20 rounded-full blur-3xl" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 items-center">
            <div className="text-center md:text-left">
              <p className="text-white/70 mb-1 sm:mb-2 uppercase text-xs sm:text-sm tracking-wider">
                Taux de satisfaction
              </p>
              <div className="mb-1 sm:mb-2">{isInView && <Counter to={97} />}</div>
              <p className="text-white/90 text-sm sm:text-base">de satisfaction post-formation</p>
            </div>
            <div className="space-y-3 sm:space-y-4">
              {benefits.map((benefit) => (
                <motion.div
                  key={benefit.title}
                  initial={{ opacity: 0, x: 20 }}
                  animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 20 }}
                  transition={{ delay: benefit.delay }}
                  className="flex items-center"
                >
                  <div className="bg-white/10 p-2 rounded-md mr-3">
                    <benefit.icon className="w-4 h-4 sm:w-5 sm:h-5 text-gold-sienna" />
                  </div>
                  <div>
                    <p className="font-medium text-sm sm:text-base">{benefit.title}</p>
                    <p className="text-xs sm:text-sm text-white/70">{benefit.desc}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>

<div className="relative z-10 mt-8 md:mt-10 text-center">
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gold-sienna text-white py-2.5 px-6 sm:py-3 sm:px-8 rounded-xl inline-flex items-center font-medium shadow-lg hover:shadow-xl transition-all text-sm sm:text-base"
          >
            Réserver une formation <ArrowRight className="w-4 h-4 ml-2" />
          </motion.button>
        </div>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/Ghost/dashboard-roi/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Header from "@/components/header"
import DashboardInfographic from "@/components/dashboard-infographic"

export default function DashboardRoiPage() {
  return (
    <div className="min-h-screen bg-ivory">
      <Header />
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6 max-w-5xl">
          <div className="mb-12 text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-slate-deep mb-6 font-montserrat">
              Mesurez votre <span className="text-gold-sienna">Impact</span>
            </h1>
            <p className="text-xl text-gray-refined max-w-2xl mx-auto">
              Notre dashboard personnalisé vous permet de suivre précisément le retour sur investissement de CareerPilot
              Pro
            </p>
          </div>

<DashboardInfographic />
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/Ghost/formation-simple/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Header from "@/components/header"
import TrainingHighlights from "@/components/training-highlights"

export default function FormationSimplePage() {
  return (
    <div className="min-h-screen bg-ivory">
      <Header />
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6 max-w-4xl">
          <div className="mb-12 text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-slate-deep mb-6 font-montserrat">
              Notre <span className="text-gold-sienna">Formation</span>
            </h1>
            <p className="text-xl text-gray-refined max-w-2xl mx-auto">
              Montez rapidement en compétence pour tirer le meilleur parti de Career Pilot Pack
            </p>
          </div>

<TrainingHighlights />
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/Ghost/formation/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Header from "@/components/header"
import FormationInfo from "@/components/formation-info"

export default function FormationPage() {
  return (
    <div className="min-h-screen bg-ivory">
      <Header />
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6 max-w-7xl">
          <div className="my-12">
            <FormationInfo title="Career Pilot Pack" description="Career Intelligence Pack" />
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/Ghost/formation-infographie/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"

const FormationInfographiePage = () => {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-4">Formation Infographie</h1>

<section className="mb-8">
        <h2 className="text-2xl font-semibold mb-2">Pourquoi l'infographie ?</h2>
        <p className="mb-4">
          L'infographie est un outil puissant pour communiquer visuellement des informations complexes. Elle permet de :
        </p>
        <ul className="list-disc list-inside mb-4">
          <li>Simplifier des données</li>
          <li>Captiver l'attention</li>
          <li>Améliorer la compréhension</li>
          <li>Renforcer la mémorisation</li>
        </ul>
        <p>
          Cette formation vous donnera les compétences nécessaires pour créer des infographies percutantes et
          professionnelles.
        </p>
      </section>

<section className="mb-8">
        <h2 className="text-2xl font-semibold mb-2">Contenu de la formation</h2>
        <p className="mb-4">La formation couvre les aspects suivants :</p>
        <ul className="list-disc list-inside mb-4">
          <li>Principes de design graphique</li>
          <li>Choix des couleurs et des typographies</li>
          <li>Utilisation d'outils de création (ex: Canva, Adobe Illustrator)</li>
          <li>Structuration de l'information</li>
          <li>Création de graphiques et d'illustrations</li>
          <li>Optimisation pour différents supports (web, print)</li>
        </ul>
      </section>

<section className="mb-8">
        <h2 className="text-2xl font-semibold mb-2">Prérequis</h2>
        <p>
          Aucun prérequis technique n'est nécessaire. Une appétence pour le design et la communication visuelle est un
          plus.
        </p>
      </section>

<section className="mb-8">
        <h2 className="text-2xl font-semibold mb-2">Public cible</h2>
        <p>Cette formation s'adresse à :</p>
        <ul className="list-disc list-inside mb-4">
          <li>Professionnels du marketing et de la communication</li>
          <li>Créateurs de contenu</li>
          <li>Étudiants</li>
          <li>Toute personne souhaitant améliorer ses compétences en communication visuelle</li>
        </ul>
      </section>

<section className="mb-8">
        <h2 className="text-2xl font-semibold mb-2">Modalités</h2>
        <p>La formation est proposée en présentiel et en ligne.</p>
        <p>Durée : [Indiquer la durée]</p>
        <p>Tarif : [Indiquer le tarif]</p>
      </section>

<section>
        <h2 className="text-2xl font-semibold mb-2">Inscription</h2>
        <p>Pour vous inscrire, veuillez contacter [Indiquer les coordonnées].</p>
        <Link href="/" className="text-blue-500 hover:underline">
          Retour à l'accueil
        </Link>
      </section>
    </div>
  )
}

export default FormationInfographiePage
[V0_FILE]typescriptreact:file="app/Ghost/formation-visuelle/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"

const FormationVisuelle = () => {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-3xl font-bold text-center mb-8">Formation Visuelle</h1>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Section 1: Introduction */}
        <div>
          <h2 className="text-2xl font-semibold mb-4">Introduction à la Formation</h2>
          <p className="text-gray-700">
            Cette formation est conçue pour vous initier aux principes fondamentaux de la communication visuelle. Vous
            apprendrez à créer des designs percutants et efficaces pour divers supports.
          </p>
        </div>

{/* Section 2: Objectifs */}
        <div>
          <h2 className="text-2xl font-semibold mb-4">Objectifs de la Formation</h2>
          <ul className="list-disc list-inside text-gray-700">
            <li>Comprendre les bases de la théorie des couleurs.</li>
            <li>Maîtriser les principes de la typographie.</li>
            <li>Concevoir des mises en page équilibrées et attrayantes.</li>
            <li>Utiliser les outils de design graphique.</li>
          </ul>
        </div>
      </div>

{/* Section 3: Contenu de la Formation */}
      <div className="mt-12">
        <h2 className="text-2xl font-semibold mb-4">Contenu de la Formation</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Module 1 */}
          <div className="p-4 border rounded-lg">
            <h3 className="text-xl font-semibold mb-2">Module 1: Les Fondamentaux du Design</h3>
            <p className="text-gray-700">Introduction aux éléments de base du design: lignes, formes, couleurs, etc.</p>
          </div>

{/* Module 2 */}
          <div className="p-4 border rounded-lg">
            <h3 className="text-xl font-semibold mb-2">Module 2: Typographie</h3>
            <p className="text-gray-700">
              Apprendre à choisir et à utiliser les polices de caractères de manière efficace.
            </p>
          </div>

{/* Module 3 */}
          <div className="p-4 border rounded-lg">
            <h3 className="text-xl font-semibold mb-2">Module 3: Théorie des Couleurs</h3>
            <p className="text-gray-700">Comprendre l'impact des couleurs et comment les combiner harmonieusement.</p>
          </div>
        </div>
      </div>

{/* Section 4: Inscription */}
      <div className="mt-12 text-center">
        <h2 className="text-2xl font-semibold mb-4">Inscrivez-vous dès maintenant!</h2>
        <Link href="/contact" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Contactez-nous
        </Link>
      </div>
    </div>
  )
}

export default FormationVisuelle
[V0_FILE]typescriptreact:file="app/calculateur-roi/page.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { motion } from "framer-motion"
import Header from "../../components/header"
import ROICalculator from "../../components/roi-calculator"

export default function CalculateurROIPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-gray-50">
      <Header />
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6 max-w-5xl">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-12 text-center"
          >
            <h1 className="text-4xl md:text-5xl font-bold text-slate-deep mb-6 font-montserrat">
              Calculateur de <span className="text-primary-600">ROI</span>
            </h1>
            <p className="text-xl text-gray-refined max-w-2xl mx-auto">
              Découvrez l'impact financier concret de CareerPilot Pro sur votre activité
            </p>
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="bg-white rounded-2xl shadow-xl overflow-hidden"
          >
            <div className="p-2 sm:p-6 md:p-8">
              <ROICalculator />
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/blog/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, Eye } from "lucide-react"
import { getBlogPosts, deleteBlogPost } from "@/lib/blog-api"
import type { BlogPost } from "@/lib/supabase"
import Link from "next/link"

export default function AdminBlogPage() {
  const [posts, setPosts] = useState<BlogPost[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadPosts() {
      try {
        const postsData = await getBlogPosts({ status: undefined }) // Tous les statuts
        setPosts(postsData)
      } catch (error) {
        console.error("Erreur lors du chargement:", error)
      } finally {
        setLoading(false)
      }
    }

loadPosts()
  }, [])

const handleDelete = async (id: string) => {
    if (confirm("Êtes-vous sûr de vouloir supprimer cet article ?")) {
      try {
        await deleteBlogPost(id)
        setPosts(posts.filter((post) => post.id !== id))
      } catch (error) {
        console.error("Erreur lors de la suppression:", error)
      }
    }
  }

return (
    <div className="min-h-screen bg-background-primary">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-pearl-graphite">Administration du Blog</h1>
          <Link href="/admin/blog/new">
            <Button className="flex items-center gap-2">
              <Plus className="w-4 h-4" />
              Nouvel article
            </Button>
          </Link>
        </div>

{/* Liste des articles */}
        <div className="space-y-4">
          {posts.map((post) => (
            <Card key={post.id}>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <Badge variant={post.status === "published" ? "default" : "secondary"}>{post.status}</Badge>
                      {post.featured && <Badge variant="outline">En vedette</Badge>}
                      {post.category && (
                        <Badge
                          variant="secondary"
                          style={{ backgroundColor: post.category.color + "20", color: post.category.color }}
                        >
                          {post.category.name}
                        </Badge>
                      )}
                    </div>
                    <h3 className="text-lg font-semibold mb-1">{post.title}</h3>
                    <p className="text-muted-foreground text-sm mb-2">{post.excerpt}</p>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      {post.author && <span>Par {post.author.name}</span>}
                      <span>Créé le {new Date(post.created_at).toLocaleDateString("fr-FR")}</span>
                      {post.published_at && (
                        <span>Publié le {new Date(post.published_at).toLocaleDateString("fr-FR")}</span>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {post.status === "published" && (
                      <Link href={`/blog/${post.slug}`}>
                        <Button variant="outline" size="sm">
                          <Eye className="w-4 h-4" />
                        </Button>
                      </Link>
                    )}
                    <Link href={`/admin/blog/edit/${post.id}`}>
                      <Button variant="outline" size="sm">
                        <Edit className="w-4 h-4" />
                      </Button>
                    </Link>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleDelete(post.id)}
                      className="text-red-600 hover:text-red-700"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{posts.length === 0 && (
          <div className="text-center py-12">
            <p className="text-muted-foreground mb-4">Aucun article trouvé.</p>
            <Link href="/admin/blog/new">
              <Button>Créer le premier article</Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/interactive-slideshow/slide-target-companies.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Star, UserCircle } from "lucide-react"

// Entreprises mises à jour pour D A C S (Dataiku, Alan, Contentsquare, Shift Technology)
const companies = [
  {
    name: "Dataiku",
    field: "AI/ML for Business",
    rating: 3,
    site: "dataiku.com",
    logoUrl: "/placeholder.svg?height=40&width=120",
    contactPerson: "Alex Moreau, VP Stratégie IA",
  },
  {
    name: "Alan",
    field: "HealthTech AI Assurance",
    rating: 3,
    site: "alan.com",
    logoUrl: "/placeholder.svg?height=40&width=100",
    contactPerson: "Béatrice Dubois, Directrice Innovation",
  },
  {
    name: "Contentsquare",
    field: "UX Analytics AI",
    rating: 3,
    site: "contentsquare.com",
    logoUrl: "/placeholder.svg?height=40&width=150",
    contactPerson: "Charles Petit, Responsable Partenariats Tech",
  },
  {
    name: "Shift Technology",
    field: "AI for Insurance Fraud Detection",
    rating: 3,
    site: "shift-technology.com",
    logoUrl: "/placeholder.svg?height=40&width=140",
    contactPerson: "Sophie Lambert, Lead Data Scientist",
  },
]

const RatingStars = ({ rating }: { rating: number }) => (
  <div className="flex">
    {[...Array(3)].map((_, i) => (
      <Star
        key={i}
        size={14}
        className={i < rating ? "text-gold-sienna-400 fill-gold-sienna-400" : "text-accent-graphite-300"}
      />
    ))}
  </div>
)

export default function SlideTargetCompanies() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.07, delayChildren: 0.2 },
    },
  }
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 100 } },
  }

return (
    <motion.div className="h-full flex flex-col" variants={containerVariants} initial="hidden" animate="visible">
      <motion.h2 variants={itemVariants} className="text-2xl sm:text-3xl font-bold text-text-primary mb-2 text-center">
        Dimension 4: Entreprises Cibles (Top Tier Paris)
      </motion.h2>
      <motion.p variants={itemVariants} className="text-sm text-text-secondary mb-6 sm:mb-8 text-center">
        Sélection basée sur l'adéquation profil senior et impact immédiat.
      </motion.p>

<motion.div variants={itemVariants} className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        {companies.map((company) => (
          <motion.div
            key={company.name}
            className="bg-card p-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex flex-col justify-between"
            whileHover={{ y: -5 }}
          >
            <div>
              <div className="flex items-center mb-3 min-h-[40px]">
                {" "}
                {/* min-h pour alignement vertical des logos */}
                <img
                  src={company.logoUrl || "/placeholder.svg"}
                  alt={`${company.name} logo`}
                  className="max-h-10 w-auto mr-3 object-contain" // max-h pour s'adapter à la hauteur
                />
                <h3 className="text-base sm:text-lg font-semibold text-text-primary">{company.name}</h3>
              </div>
              <p className="text-xs sm:text-sm text-text-secondary mb-1">{company.field}</p>
              <RatingStars rating={company.rating} />
              <a
                href={`https://${company.site}`}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-gold-sienna-600 hover:underline mt-2 block"
              >
                {company.site}
              </a>
            </div>
            <div className="mt-3 pt-3 border-t border-accent-graphite-200 dark:border-accent-graphite-700">
              <p className="text-xs text-text-secondary flex items-center">
                <UserCircle size={14} className="mr-1.5 text-gold-sienna-500" />
                Contacter: {company.contactPerson}
              </p>
            </div>
          </motion.div>
        ))}
      </motion.div>

<motion.p variants={itemVariants} className="text-center text-sm text-text-secondary mt-6 sm:mt-8 font-medium">
        Ces 4 entreprises sont des exemples. Le rapport complet analyse +16 autres scale-ups pertinentes.
      </motion.p>
      <motion.div variants={itemVariants} className="mt-auto pt-4">
        <h4 className="text-md font-semibold text-text-primary mb-1 text-center sm:text-left">
          Actions immédiates recommandées:
        </h4>
        <ul className="list-disc list-inside text-xs text-text-secondary space-y-0.5 pl-4 sm:pl-0">
          <li>Cibler 8-10 dirigeants sur LinkedIn dans ces scale-ups et d'autres identifiées.</li>
          <li>Préparer un pitch senior orienté "Orchestration de croissance IA B2B".</li>
          <li>Participer à 2 événements AI parisiens dans les 3 mois.</li>
        </ul>
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]png:file="public/logo/careerpilot-pro-compass-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo%20500%2A500%20b-QCGyyasm6sPDUDZgAooZ5myqSucZnJ.png" isMerged="true"
[V0_FILE]png:file="public/logo/careerpilot-pro-complete-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/CPP%20500%2A500%20c-M26EOTyr0NUC41acvUJO3p1fui72EP.png" isMerged="true"
[V0_FILE]sql:file="scripts/create-client-info-table.sql" isMerged="true"
-- Create client_information table
CREATE TABLE IF NOT EXISTS client_information (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_email VARCHAR(255) NOT NULL,
  
  -- Personal Information
  first_name VARCHAR(100) NOT NULL,
  last_name VARCHAR(100) NOT NULL,
  phone VARCHAR(20),
  linkedin_url VARCHAR(255),
  
  -- Current Professional Situation
  current_position VARCHAR(150),
  current_company VARCHAR(150),
  current_industry VARCHAR(100),
  years_experience INTEGER,
  current_salary_range VARCHAR(50),
  
  -- Career Goals
  target_position VARCHAR(150),
  target_industry VARCHAR(100),
  target_salary_range VARCHAR(50),
  career_change_timeline VARCHAR(50),
  
  -- Skills and Preferences
  key_skills TEXT[],
  preferred_work_mode VARCHAR(50), -- remote, hybrid, on-site
  preferred_company_size VARCHAR(50),
  geographic_preferences TEXT[],
  
  -- Additional Information
  biggest_career_challenges TEXT,
  previous_coaching_experience BOOLEAN DEFAULT FALSE,
  additional_notes TEXT,
  
  -- Metadata
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster queries
CREATE INDEX IF NOT EXISTS idx_client_info_email ON client_information(user_email);
CREATE INDEX IF NOT EXISTS idx_client_info_created_at ON client_information(created_at);
[V0_FILE]typescriptreact:file="components/client-info-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { submitClientInfo } from "@/app/client-info/actions"
import { Loader2, CheckCircle, AlertCircle, User, Briefcase, Target, MapPin, MessageSquare } from "lucide-react"

interface ClientInfoFormProps {
  userEmail: string
  existingData?: any
}

export default function ClientInfoForm({ userEmail, existingData }: ClientInfoFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null)

const handleSubmit = async (formData: FormData) => {
    setIsSubmitting(true)
    setSubmitResult(null)

// Add user email to form data
    formData.set("user_email", userEmail)

const result = await submitClientInfo(formData)
    setSubmitResult(result)
    setIsSubmitting(false)
  }

const salaryRanges = [
    "Moins de 30k€",
    "30k€ - 40k€",
    "40k€ - 50k€",
    "50k€ - 60k€",
    "60k€ - 80k€",
    "80k€ - 100k€",
    "100k€ - 120k€",
    "Plus de 120k€",
  ]

const timelines = ["Immédiatement", "Dans les 3 mois", "Dans les 6 mois", "Dans l'année", "Plus d'un an"]

const workModes = ["Télétravail complet", "Hybride", "Présentiel", "Flexible"]

const companySizes = [
    "Startup (< 50 employés)",
    "PME (50-250 employés)",
    "ETI (250-5000 employés)",
    "Grande entreprise (> 5000 employés)",
    "Indifférent",
  ]

return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      {/* Header */}
      <div className="text-center space-y-4">
        <h1 className="text-3xl md:text-4xl font-bold text-text-primary">Profil Client CareerPilot Pro</h1>
        <p className="text-lg text-text-secondary max-w-2xl mx-auto">
          Complétez votre profil pour que nous puissions personnaliser votre accompagnement carrière
        </p>
      </div>

{/* Success/Error Messages */}
      {submitResult && (
        <Card
          className={`border-2 ${submitResult.success ? "border-accent-green-500 bg-accent-green-50" : "border-accent-alert-500 bg-accent-alert-50"}`}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              {submitResult.success ? (
                <CheckCircle className="h-5 w-5 text-accent-green-600" />
              ) : (
                <AlertCircle className="h-5 w-5 text-accent-alert-600" />
              )}
              <p className={`font-medium ${submitResult.success ? "text-accent-green-800" : "text-accent-alert-800"}`}>
                {submitResult.success ? submitResult.message : submitResult.error}
              </p>
            </div>
          </CardContent>
        </Card>
      )}

<form action={handleSubmit} className="space-y-8">
        {/* Personal Information */}
        <Card className="border-primary-200 shadow-soft-xl">
          <CardHeader className="bg-gradient-primary text-white rounded-t-lg">
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              Informations Personnelles
            </CardTitle>
            <CardDescription className="text-primary-100">Vos coordonnées et informations de contact</CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="first_name" className="text-text-primary font-medium">
                  Prénom *
                </Label>
                <Input
                  id="first_name"
                  name="first_name"
                  defaultValue={existingData?.first_name || ""}
                  required
                  className="focus-ring-primary"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="last_name" className="text-text-primary font-medium">
                  Nom *
                </Label>
                <Input
                  id="last_name"
                  name="last_name"
                  defaultValue={existingData?.last_name || ""}
                  required
                  className="focus-ring-primary"
                />
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="phone" className="text-text-primary font-medium">
                  Téléphone
                </Label>
                <Input
                  id="phone"
                  name="phone"
                  type="tel"
                  defaultValue={existingData?.phone || ""}
                  className="focus-ring-primary"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="linkedin_url" className="text-text-primary font-medium">
                  Profil LinkedIn
                </Label>
                <Input
                  id="linkedin_url"
                  name="linkedin_url"
                  type="url"
                  placeholder="https://linkedin.com/in/votre-profil"
                  defaultValue={existingData?.linkedin_url || ""}
                  className="focus-ring-primary"
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Current Professional Situation */}
        <Card className="border-secondary-200 shadow-soft-xl">
          <CardHeader className="bg-gradient-secondary text-white rounded-t-lg">
            <CardTitle className="flex items-center gap-2">
              <Briefcase className="h-5 w-5" />
              Situation Professionnelle Actuelle
            </CardTitle>
            <CardDescription className="text-secondary-100">
              Votre poste et environnement de travail actuels
            </CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="current_position" className="text-text-primary font-medium">
                  Poste Actuel
                </Label>
                <Input
                  id="current_position"
                  name="current_position"
                  defaultValue={existingData?.current_position || ""}
                  className="focus-ring-secondary"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="current_company" className="text-text-primary font-medium">
                  Entreprise Actuelle
                </Label>
                <Input
                  id="current_company"
                  name="current_company"
                  defaultValue={existingData?.current_company || ""}
                  className="focus-ring-secondary"
                />
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="current_industry" className="text-text-primary font-medium">
                  Secteur d'Activité
                </Label>
                <Input
                  id="current_industry"
                  name="current_industry"
                  defaultValue={existingData?.current_industry || ""}
                  className="focus-ring-secondary"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="years_experience" className="text-text-primary font-medium">
                  Années d'Expérience
                </Label>
                <Input
                  id="years_experience"
                  name="years_experience"
                  type="number"
                  min="0"
                  max="50"
                  defaultValue={existingData?.years_experience || ""}
                  className="focus-ring-secondary"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="current_salary_range" className="text-text-primary font-medium">
                Fourchette Salariale Actuelle
              </Label>
              <Select name="current_salary_range" defaultValue={existingData?.current_salary_range || ""}>
                <SelectTrigger className="focus-ring-secondary">
                  <SelectValue placeholder="Sélectionnez votre fourchette salariale" />
                </SelectTrigger>
                <SelectContent>
                  {salaryRanges.map((range) => (
                    <SelectItem key={range} value={range}>
                      {range}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

{/* Career Goals */}
        <Card className="border-accent-lavender-200 shadow-soft-xl">
          <CardHeader className="bg-gradient-lavender text-primary-700 rounded-t-lg">
            <CardTitle className="flex items-center gap-2">
              <Target className="h-5 w-5" />
              Objectifs de Carrière
            </CardTitle>
            <CardDescription className="text-primary-600">Vos aspirations et objectifs professionnels</CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="target_position" className="text-text-primary font-medium">
                  Poste Visé
                </Label>
                <Input
                  id="target_position"
                  name="target_position"
                  defaultValue={existingData?.target_position || ""}
                  className="focus-ring-primary"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="target_industry" className="text-text-primary font-medium">
                  Secteur Visé
                </Label>
                <Input
                  id="target_industry"
                  name="target_industry"
                  defaultValue={existingData?.target_industry || ""}
                  className="focus-ring-primary"
                />
              </div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="target_salary_range" className="text-text-primary font-medium">
                  Fourchette Salariale Visée
                </Label>
                <Select name="target_salary_range" defaultValue={existingData?.target_salary_range || ""}>
                  <SelectTrigger className="focus-ring-primary">
                    <SelectValue placeholder="Sélectionnez votre objectif salarial" />
                  </SelectTrigger>
                  <SelectContent>
                    {salaryRanges.map((range) => (
                      <SelectItem key={range} value={range}>
                        {range}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="career_change_timeline" className="text-text-primary font-medium">
                  Délai de Transition
                </Label>
                <Select name="career_change_timeline" defaultValue={existingData?.career_change_timeline || ""}>
                  <SelectTrigger className="focus-ring-primary">
                    <SelectValue placeholder="Quand souhaitez-vous changer ?" />
                  </SelectTrigger>
                  <SelectContent>
                    {timelines.map((timeline) => (
                      <SelectItem key={timeline} value={timeline}>
                        {timeline}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Skills and Preferences */}
        <Card className="border-accent-green-200 shadow-soft-xl">
          <CardHeader className="bg-gradient-to-r from-accent-green-500 to-accent-green-600 text-white rounded-t-lg">
            <CardTitle className="flex items-center gap-2">
              <MapPin className="h-5 w-5" />
              Compétences et Préférences
            </CardTitle>
            <CardDescription className="text-accent-green-100">
              Vos compétences clés et préférences de travail
            </CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="key_skills" className="text-text-primary font-medium">
                Compétences Clés
              </Label>
              <Input
                id="key_skills"
                name="key_skills"
                placeholder="Ex: Management, Marketing Digital, Python (séparez par des virgules)"
                defaultValue={existingData?.key_skills?.join(", ") || ""}
                className="focus-ring-secondary"
              />
              <p className="text-sm text-text-secondary">Séparez vos compétences par des virgules</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="preferred_work_mode" className="text-text-primary font-medium">
                  Mode de Travail Préféré
                </Label>
                <Select name="preferred_work_mode" defaultValue={existingData?.preferred_work_mode || ""}>
                  <SelectTrigger className="focus-ring-secondary">
                    <SelectValue placeholder="Choisissez votre préférence" />
                  </SelectTrigger>
                  <SelectContent>
                    {workModes.map((mode) => (
                      <SelectItem key={mode} value={mode}>
                        {mode}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="preferred_company_size" className="text-text-primary font-medium">
                  Taille d'Entreprise Préférée
                </Label>
                <Select name="preferred_company_size" defaultValue={existingData?.preferred_company_size || ""}>
                  <SelectTrigger className="focus-ring-secondary">
                    <SelectValue placeholder="Choisissez votre préférence" />
                  </SelectTrigger>
                  <SelectContent>
                    {companySizes.map((size) => (
                      <SelectItem key={size} value={size}>
                        {size}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="geographic_preferences" className="text-text-primary font-medium">
                Préférences Géographiques
              </Label>
              <Input
                id="geographic_preferences"
                name="geographic_preferences"
                placeholder="Ex: Paris, Lyon, Télétravail, International (séparez par des virgules)"
                defaultValue={existingData?.geographic_preferences?.join(", ") || ""}
                className="focus-ring-secondary"
              />
              <p className="text-sm text-text-secondary">Séparez vos préférences par des virgules</p>
            </div>
          </CardContent>
        </Card>

{/* Additional Information */}
        <Card className="border-accent-ochre-200 shadow-soft-xl">
          <CardHeader className="bg-gradient-to-r from-accent-ochre-500 to-accent-ochre-600 text-white rounded-t-lg">
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              Informations Complémentaires
            </CardTitle>
            <CardDescription className="text-accent-ochre-100">Partagez vos défis et expériences</CardDescription>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="biggest_career_challenges" className="text-text-primary font-medium">
                Vos Plus Grands Défis Carrière
              </Label>
              <Textarea
                id="biggest_career_challenges"
                name="biggest_career_challenges"
                rows={4}
                placeholder="Décrivez les principaux obstacles ou défis que vous rencontrez dans votre carrière..."
                defaultValue={existingData?.biggest_career_challenges || ""}
                className="focus-ring-primary resize-none"
              />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="previous_coaching_experience"
                name="previous_coaching_experience"
                defaultChecked={existingData?.previous_coaching_experience || false}
                className="focus-ring-primary"
              />
              <Label htmlFor="previous_coaching_experience" className="text-text-primary font-medium">
                J'ai déjà bénéficié d'un accompagnement carrière
              </Label>
            </div>
            <div className="space-y-2">
              <Label htmlFor="additional_notes" className="text-text-primary font-medium">
                Notes Additionnelles
              </Label>
              <Textarea
                id="additional_notes"
                name="additional_notes"
                rows={3}
                placeholder="Toute information supplémentaire que vous souhaitez partager..."
                defaultValue={existingData?.additional_notes || ""}
                className="focus-ring-primary resize-none"
              />
            </div>
          </CardContent>
        </Card>