Update src/app/portfolio/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -5,14 +5,21 @@ import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarS
 import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
 import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { Hammer, Wrench, CheckCircle, Camera, Star, Euro } from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 
 export default function HomePage() {
+  const [reviewSubmitted, setReviewSubmitted] = useState(false);
+  const [reviewError, setReviewError] = useState("");
+  const [formData, setFormData] = useState({
+    name: "",    role: "",    company: "",    rating: 5,
+    testimonial: ""});
+
   const navItems = [
     { name: "Accueil", id: "home" },
     { name: "Services", id: "services" },
@@ -55,6 +62,38 @@ export default function HomePage() {
     },
   ];
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: name === "rating" ? parseInt(value) : value,
+    }));
+  };
+
+  const handleSubmitReview = (e: React.FormEvent) => {
+    e.preventDefault();
+    setReviewError("");
+
+    if (!formData.name.trim() || !formData.testimonial.trim() || !formData.role.trim() || !formData.company.trim()) {
+      setReviewError("Tous les champs sont obligatoires.");
+      return;
+    }
+
+    if (formData.testimonial.length < 10) {
+      setReviewError("Veuillez écrire au moins 10 caractères pour votre avis.");
+      return;
+    }
+
+    setReviewSubmitted(true);
+    setFormData({
+      name: "",      role: "",      company: "",      rating: 5,
+      testimonial: ""});
+
+    setTimeout(() => {
+      setReviewSubmitted(false);
+    }, 5000);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -180,32 +219,26 @@ export default function HomePage() {
       </div>
 
       <div id="portfolio" data-section="portfolio">
-        <TestimonialCardOne
+        <TestimonialCardThirteen
           title="Nos Réalisations"
           description="Découvrez nos projets réussis et les transformations que nous avons accomplies pour nos clients."
           tag="Portfolio"
           tagIcon={Camera}
           testimonials={[
             {
-              id: "1",              name: "Rénovation Complète",              role: "Appartement - Bruxelles",              company: "2025",              rating: 5,
+              id: "1",              name: "Rénovation Complète",              handle: "Appartement - Bruxelles",              testimonial: "Projet de rénovation complète intérieur",              rating: 5,
-              videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ad6CnlkMmKxHjsaejfvDw57RRf/uploaded-1773316062829-hhoyjsny.mp4",              imageAlt: "Rénovation complète intérieur maison bruxelles"},
+              imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343678.jpg?_wi=1"},
             {
-              id: "2",              name: "Extension Résidentielle",              role: "Addition 50m² - Liège",              company: "2025",              rating: 5,
+              id: "2",              name: "Extension Résidentielle",              handle: "Addition 50m² - Liège",              testimonial: "Extension moderne de 50 mètres carrés",              rating: 5,
-              videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ?_wi=1",              videoAriaLabel: "Vidéo extension résidentielle Liège"},
+              imageSrc: "http://img.b2bpic.net/free-photo/unfinished-brick-structure-with-view-lush-greenery_632498-60860.jpg?_wi=1"},
             {
-              id: "3",              name: "Terrasse Extérieure",              role: "Piscine & Terrasse - Namur",              company: "2023",              rating: 5,
+              id: "3",              name: "Terrasse Extérieure",              handle: "Piscine & Terrasse - Namur",              testimonial: "Création d'espace extérieur avec piscine",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=1",              imageAlt: "Terrasse piscine extérieur namur belgique"},
+              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=1"},
             {
-              id: "4",              name: "Construction Neuve",              role: "Maison moderne 150m² - Charleroi",              company: "2023",              rating: 5,
+              id: "4",              name: "Construction Neuve",              handle: "Maison moderne 150m² - Charleroi",              testimonial: "Construction neuve maison individuelle",              rating: 5,
-              videoSrc: "https://www.youtube.com/embed/jNQXAC9IVRw?_wi=1",              videoAriaLabel: "Vidéo construction maison neuve Charleroi"},
+              imageSrc: "http://img.b2bpic.net/free-photo/vintage-architecture-classical-facade-building_158595-6439.jpg?_wi=1"},
-            {
-              id: "5",              name: "Rénovation Toiture",              role: "Toiture complète - Anvers",              company: "2023",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-high-angle_23-2149714277.jpg?_wi=1",              imageAlt: "Rénovation toiture ardoise anvers belgique"},
-            {
-              id: "6",              name: "Aménagement Extérieur",              role: "Jardin paysager - Mons",              company: "2023",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/table-chair-with-white-umbrella-outdoor-patio_74190-1917.jpg?_wi=1",              imageAlt: "Jardin paysager aménagement mons belgique"},
           ]}
-          gridVariant="three-columns-all-equal-width"
+          showRating={true}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -214,36 +247,180 @@ export default function HomePage() {
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardOne
+        <div className="w-full py-20 px-4 md:px-8">
-          title="Avis de Nos Clients"
+          <div className="max-w-6xl mx-auto">
-          description="Les témoignages authentiques de clients satisfaits qui ont fait confiance à Webild Construction."
+            {/* Header Section */}
-          tag="Témoignages"
+            <div className="text-center mb-16">
-          tagIcon={Star}
+              <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-[var(--accent)] text-[var(--background)]">
-          testimonials={[
+                <Star size={16} />
-            {
+                <span className="text-sm font-medium">Témoignages</span>
-              id: "1",              name: "Marc Dupont",              role: "Propriétaire",              company: "Bruxelles",              rating: 5,
+              </div>
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6626.jpg",              imageAlt: "Portrait homme client satisfait sourire"},
+              <h2 className="text-3xl md:text-5xl font-bold mb-4 text-[var(--foreground)]">Avis de Nos Clients</h2>
-            {
+              <p className="text-lg text-[var(--foreground)] opacity-75 max-w-2xl mx-auto">
-              id: "2",              name: "Sophie Bernard",              role: "Propriétaire",              company: "Liège",              rating: 5,
+                Partagez votre expérience avec Webild Construction. Vos avis nous aident à continuer à améliorer nos services.
-              imageSrc: "http://img.b2bpic.net/free-photo/outdoors-background-hairstyle-one-zipper_1139-779.jpg",              imageAlt: "Portrait femme propriétaire satisfaction sourire"},
+              </p>
-            {
+            </div>
-              id: "3",              name: "Jean-Pierre Martin",              role: "Propriétaire",              company: "Namur",              rating: 5,
+
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-elderly-man-taking-stroll_23-2150233326.jpg",              imageAlt: "Portrait homme senior propriétaire belgique"},
+            <div className="grid md:grid-cols-2 gap-12">
-            {
+              {/* Review Form */}
-              id: "4",              name: "Catherine Lefevre",              role: "Propriétaire",              company: "Charleroi",              rating: 5,
+              <div className="bg-[var(--card)] rounded-2xl p-8 border border-[var(--accent)] border-opacity-20">
-              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-okay-symbol_1187-3855.jpg",              imageAlt: "Portrait femme charleroi proprietaire satisfaction"},
+                <h3 className="text-2xl font-bold mb-6 text-[var(--foreground)]">Soumettre un Avis</h3>
-          ]}
+
-          gridVariant="uniform-all-items-equal"
+                {reviewSubmitted ? (
-          animationType="slide-up"
+                  <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
-          textboxLayout="default"
+                    <p className="text-green-800 font-semibold mb-2">✓ Merci pour votre avis!</p>
-          useInvertedBackground={false}
+                    <p className="text-green-700 text-sm">Votre témoignage a été reçu avec succès. Nous l'examinerons avant de le publier.</p>
-          tagAnimation="slide-up"
+                  </div>
-        />
+                ) : (
+                  <form onSubmit={handleSubmitReview} className="space-y-4">
+                    {reviewError && (
+                      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+                        <p className="text-red-800 text-sm">{reviewError}</p>
+                      </div>
+                    )}
+
+                    <div>
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                        Votre Nom *
+                      </label>
+                      <input
+                        type="text"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleInputChange}
+                        placeholder="Jean Dupont"
+                        className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                        Votre Poste *
+                      </label>
+                      <input
+                        type="text"
+                        name="role"
+                        value={formData.role}
+                        onChange={handleInputChange}
+                        placeholder="Propriétaire / Chef de projet"
+                        className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                        Votre Ville/Entreprise *
+                      </label>
+                      <input
+                        type="text"
+                        name="company"
+                        value={formData.company}
+                        onChange={handleInputChange}
+                        placeholder="Bruxelles / Mon Entreprise"
+                        className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)]"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                        Notation *
+                      </label>
+                      <div className="flex gap-2">
+                        {[1, 2, 3, 4, 5].map((star) => (
+                          <button
+                            key={star}
+                            type="button"
+                            onClick={() =>
+                              setFormData((prev) => ({ ...prev, rating: star }))
+                            }
+                            className={`text-3xl transition-colors ${
+                              star <= formData.rating
+                                ? "text-yellow-400"
+                                : "text-gray-300"
+                            }`}
+                          >
+                            ★
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+                        Votre Avis *
+                      </label>
+                      <textarea
+                        name="testimonial"
+                        value={formData.testimonial}
+                        onChange={handleInputChange}
+                        placeholder="Partagez votre expérience avec Webild Construction..."
+                        rows={5}
+                        className="w-full px-4 py-3 rounded-lg border border-[var(--accent)] border-opacity-30 bg-[var(--background)] text-[var(--foreground)] placeholder-[var(--foreground)] placeholder-opacity-50 focus:outline-none focus:border-[var(--primary-cta)] resize-none"
+                      />
+                    </div>
+
+                    <button
+                      type="submit"
+                      className="w-full px-6 py-3 rounded-lg bg-[var(--primary-cta)] text-[var(--primary-cta-text)] font-semibold hover:opacity-90 transition-opacity"
+                    >
+                      Soumettre mon Avis
+                    </button>
+                  </form>
+                )}
+              </div>
+
+              {/* Testimonials Display */}
+              <div className="space-y-6">
+                <h3 className="text-2xl font-bold text-[var(--foreground)] mb-6">Témoignages Récents</h3>
+                <div className="space-y-4">
+                  <div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
+                    <div className="flex gap-1 mb-3">
+                      {[...Array(5)].map((_, i) => (
+                        <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
+                      ))}
+                    </div>
+                    <p className="text-[var(--foreground)] mb-4">
+                      "Excellent travail! L'équipe Webild a complètement transformé notre maison. Professionnels, à l'écoute et respectueux des délais."
+                    </p>
+                    <p className="font-semibold text-[var(--foreground)]">Marc Dupont</p>
+                    <p className="text-sm text-[var(--foreground)] opacity-60">Propriétaire, Bruxelles</p>
+                  </div>
+
+                  <div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
+                    <div className="flex gap-1 mb-3">
+                      {[...Array(5)].map((_, i) => (
+                        <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
+                      ))}
+                    </div>
+                    <p className="text-[var(--foreground)] mb-4">
+                      "Nous recommandons vivement Webild Construction. Devis clair, communication excellente et résultat final impeccable."
+                    </p>
+                    <p className="font-semibold text-[var(--foreground)]">Sophie Bernard</p>
+                    <p className="text-sm text-[var(--foreground)] opacity-60">Chef de projet, Liège</p>
+                  </div>
+
+                  <div className="bg-[var(--card)] rounded-lg p-6 border border-[var(--accent)] border-opacity-20">
+                    <div className="flex gap-1 mb-3">
+                      {[...Array(5)].map((_, i) => (
+                        <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
+                      ))}
+                    </div>
+                    <p className="text-[var(--foreground)] mb-4">
+                      "Service impeccable du début à la fin. L'équipe est très professionnelle et attentive au détail. Nous sommes très satisfaits."
+                    </p>
+                    <p className="font-semibold text-[var(--foreground)]">Jean-Pierre Martin</p>
+                    <p className="text-sm text-[var(--foreground)] opacity-60">Propriétaire, Namur</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="cta" data-section="cta">
         <ContactText
-          text="Prêt à débuter votre projet de construction ou rénovation? Contactez-nous dès aujourd'hui pour un devis gratuit et personnalisé."
+          text="Obtenez votre devis gratuit en 24h - Transformation de votre projet garantie. Contactez-nous dès aujourd'hui pour un accompagnement professionnel et transparent."
           animationType="entrance-slide"
           background={{ variant: "plain" }}
           useInvertedBackground={false}

src/app/portfolio/page.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Camera } from "lucide-react";
+import { Camera, Upload, Trash2, Play, Maximize2 } from "lucide-react";
+import { useState } from "react";
 
 export default function PortfolioPage() {
   const navItems = [
@@ -51,6 +51,65 @@ export default function PortfolioPage() {
     },
   ];
 
+  const [uploadedMedia, setUploadedMedia] = useState<
+    Array<{ id: string; type: "photo" | "video"; src: string; name: string }>
+  >([]);
+  const [uploadError, setUploadError] = useState("");
+  const [uploadSuccess, setUploadSuccess] = useState(false);
+  const [selectedMedia, setSelectedMedia] = useState<string | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleMediaUpload = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    mediaType: "photo" | "video"
+  ) => {
+    setUploadError("");
+    setUploadSuccess(false);
+
+    const files = e.target.files;
+    if (!files) return;
+
+    Array.from(files).forEach((file) => {
+      const validPhotoTypes = ["image/jpeg", "image/png", "image/webp"];
+      const validVideoTypes = ["video/mp4", "video/webm", "video/ogg"];
+      const isValidPhoto = mediaType === "photo" && validPhotoTypes.includes(file.type);
+      const isValidVideo = mediaType === "video" && validVideoTypes.includes(file.type);
+
+      if (!isValidPhoto && !isValidVideo) {
+        setUploadError(`Type de fichier non supporté: ${file.type}`);
+        return;
+      }
+
+      if (file.size > 50 * 1024 * 1024) {
+        setUploadError("Le fichier est trop volumineux (max 50MB)");
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        const newMedia = {
+          id: Date.now().toString(),
+          type: mediaType,
+          src: reader.result as string,
+          name: file.name,
+        };
+        setUploadedMedia((prev) => [...prev, newMedia]);
+        setUploadSuccess(true);
+        setTimeout(() => setUploadSuccess(false), 3000);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const handleDeleteMedia = (id: string) => {
+    setUploadedMedia((prev) => prev.filter((media) => media.id !== id));
+    if (selectedMedia === id) {
+      setSelectedMedia(null);
+    }
+  };
+
+  const selectedMediaItem = uploadedMedia.find((m) => m.id === selectedMedia);
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -74,39 +133,211 @@ export default function PortfolioPage() {
         />
       </div>
 
-      {/* Portfolio Projects Section */}
+      {/* Large Format Media Gallery Section */}
-      <div id="portfolio" data-section="portfolio">
+      <div id="media-gallery" data-section="media-gallery">
-        <TestimonialCardOne
+        <div className="w-full py-20 px-4 md:px-8">
-          title="Nos Réalisations"
+          <div className="max-w-7xl mx-auto">
-          description="Découvrez tous nos projets réussis et les transformations que nous avons accomplies pour nos clients en Belgique. Nos réalisations incluent des photos et vidéos de chantiers."
+            {/* Header */}
-          tag="Portfolio Complet"
+            <div className="text-center mb-16">
-          tagIcon={Camera}
+              <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-[var(--accent)] text-[var(--background)]">
-          testimonials={[
+                <Camera size={16} />
-            {
+                <span className="text-sm font-medium">Galerie Projets Complétés</span>
-              id: "1",              name: "Rénovation Complète",              role: "Maison - Bruxelles",              company: "2024",              rating: 5,
+              </div>
-              imageSrc: "http://img.b2bpic.net/free-photo/young-people-watching-smartphone-office_23-2147668943.jpg?_wi=2",              imageAlt: "Rénovation complète intérieur maison bruxelles"},
+              <h2 className="text-3xl md:text-5xl font-bold mb-4 text-[var(--foreground)]">
-            {
+                Photos & Vidéos de Nos Réalisations
-              id: "2",              name: "Extension Résidentielle",              role: "Addition 50m² - Liège",              company: "2024",              rating: 5,
+              </h2>
-              videoSrc: "https://www.youtube.com/embed/dQw4w9WgXcQ?_wi=2",              videoAriaLabel: "Vidéo extension résidentielle Liège"},
+              <p className="text-lg text-[var(--foreground)] opacity-75 max-w-2xl mx-auto">
-            {
+                Découvrez nos projets complétés en grand format. Visualisez la qualité de notre travail et les transformations que nous avons accomplies pour nos clients.
-              id: "3",              name: "Terrasse Extérieure",              role: "Piscine & Terrasse - Namur",              company: "2023",              rating: 5,
+              </p>
-              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2669.jpg?_wi=2",              imageAlt: "Terrasse piscine extérieur namur belgique"},
+            </div>
-            {
+
-              id: "4",              name: "Construction Neuve",              role: "Maison moderne 150m² - Charleroi",              company: "2023",              rating: 5,
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-              videoSrc: "https://www.youtube.com/embed/jNQXAC9IVRw?_wi=2",              videoAriaLabel: "Vidéo construction maison neuve Charleroi"},
+              {/* Large Format Viewer - Takes 2 columns on desktop */}
-            {
+              <div className="lg:col-span-2">
-              id: "5",              name: "Rénovation Toiture",              role: "Toiture complète - Anvers",              company: "2023",              rating: 5,
+                <div className="bg-[var(--card)] rounded-3xl p-8 border border-[var(--accent)] border-opacity-20 shadow-lg overflow-hidden">
-              imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-high-angle_23-2149714277.jpg?_wi=2",              imageAlt: "rénovation toiture ardoise anvers belgique"},
+                  {selectedMediaItem ? (
-            {
+                    <div className="relative">
-              id: "6",              name: "Aménagement Extérieur",              role: "Jardin paysager - Mons",              company: "2023",              rating: 5,
+                      {/* Large Format Display */}
-              imageSrc: "http://img.b2bpic.net/free-photo/table-chair-with-white-umbrella-outdoor-patio_74190-1917.jpg?_wi=2",              imageAlt: "jardin paysager aménagement mons belgique"},
+                      <div className="relative w-full bg-[var(--background)] rounded-2xl overflow-hidden">
-          ]}
+                        <div className="relative w-full" style={{ paddingBottom: "75%" }}>
-          gridVariant="three-columns-all-equal-width"
+                          {selectedMediaItem.type === "photo" ? (
-          animationType="slide-up"
+                            <img
-          textboxLayout="default"
+                              src={selectedMediaItem.src}
-          useInvertedBackground={false}
+                              alt={selectedMediaItem.name}
-          tagAnimation="slide-up"
+                              className="absolute inset-0 w-full h-full object-cover"
-        />
+                            />
+                          ) : (
+                            <video
+                              src={selectedMediaItem.src}
+                              controls
+                              className="absolute inset-0 w-full h-full object-contain bg-black"
+                              aria-label={selectedMediaItem.name}
+                            />
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Media Info */}
+                      <div className="mt-6 p-6 bg-[var(--background)] rounded-xl border border-[var(--accent)] border-opacity-20">
+                        <div className="flex items-start justify-between mb-4">
+                          <div>
+                            <div className="flex items-center gap-2 mb-2">
+                              <span className="px-3 py-1 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] text-xs font-semibold rounded-full">
+                                {selectedMediaItem.type === "photo" ? "📷 Photo" : "🎥 Vidéo"}
+                              </span>
+                            </div>
+                            <h3 className="text-xl font-bold text-[var(--foreground)]">
+                              {selectedMediaItem.name}
+                            </h3>
+                            <p className="text-sm text-[var(--foreground)] opacity-60 mt-1">
+                              {selectedMediaItem.type === "photo" ? "Photo de projet" : "Vidéo de projet"}
+                            </p>
+                          </div>
+                          <button
+                            onClick={() => handleDeleteMedia(selectedMediaItem.id)}
+                            className="p-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+                            aria-label="Supprimer ce média"
+                          >
+                            <Trash2 size={20} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center" style={{ minHeight: "600px" }}>
+                      <div className="text-center">
+                        <Camera size={64} className="mx-auto text-[var(--accent)] opacity-20 mb-4" />
+                        <p className="text-[var(--foreground)] opacity-60 text-lg">
+                          Sélectionnez une photo ou vidéo à partir de la liste ci-dessous
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Sidebar - Media List and Upload Controls */}
+              <div className="lg:col-span-1 space-y-6">
+                {/* Upload Controls */}
+                <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg space-y-4">
+                  <h3 className="text-lg font-bold text-[var(--foreground)] flex items-center gap-2">
+                    <Upload size={20} />
+                    Ajouter Médias
+                  </h3>
+
+                  {/* Photo Upload */}
+                  <label className="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
+                    <div className="flex flex-col items-center justify-center">
+                      <Camera size={20} className="text-[var(--primary-cta)] mb-1" />
+                      <p className="text-xs font-medium text-[var(--foreground)] text-center">
+                        Ajouter Photos
+                      </p>
+                    </div>
+                    <input
+                      type="file"
+                      multiple
+                      accept="image/*"
+                      onChange={(e) => handleMediaUpload(e, "photo")}
+                      className="hidden"
+                      aria-label="Télécharger des photos"
+                    />
+                  </label>
+
+                  {/* Video Upload */}
+                  <label className="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-[var(--accent)] border-opacity-40 rounded-xl cursor-pointer hover:border-opacity-60 transition-all bg-[var(--background)] bg-opacity-50">
+                    <div className="flex flex-col items-center justify-center">
+                      <Play size={20} className="text-[var(--primary-cta)] mb-1" />
+                      <p className="text-xs font-medium text-[var(--foreground)] text-center">
+                        Ajouter Vidéos
+                      </p>
+                    </div>
+                    <input
+                      type="file"
+                      multiple
+                      accept="video/*"
+                      onChange={(e) => handleMediaUpload(e, "video")}
+                      className="hidden"
+                      aria-label="Télécharger des vidéos"
+                    />
+                  </label>
+
+                  {/* Feedback Messages */}
+                  {uploadError && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="text-red-800 text-xs">{uploadError}</p>
+                    </div>
+                  )}
+                  {uploadSuccess && (
+                    <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                      <p className="text-green-800 text-xs font-semibold">✓ Uploadé avec succès!</p>
+                    </div>
+                  )}
+                </div>
+
+                {/* Media List */}
+                <div className="bg-[var(--card)] rounded-3xl p-6 border border-[var(--accent)] border-opacity-20 shadow-lg">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="text-lg font-bold text-[var(--foreground)]">
+                      Galerie ({uploadedMedia.length})
+                    </h3>
+                    {uploadedMedia.length > 0 && (
+                      <span className="text-xs text-[var(--foreground)] opacity-60 bg-[var(--background)] px-2 py-1 rounded">
+                        {uploadedMedia.filter((m) => m.type === "photo").length}📷 {uploadedMedia.filter((m) => m.type === "video").length}🎥
+                      </span>
+                    )}
+                  </div>
+
+                  {uploadedMedia.length === 0 ? (
+                    <div className="text-center py-12">
+                      <Camera size={32} className="mx-auto text-[var(--accent)] opacity-20 mb-2" />
+                      <p className="text-sm text-[var(--foreground)] opacity-60">
+                        Aucun média ajouté
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2 max-h-96 overflow-y-auto">
+                      {uploadedMedia.map((media) => (
+                        <button
+                          key={media.id}
+                          onClick={() => setSelectedMedia(media.id)}
+                          className={`w-full flex items-start gap-3 p-3 rounded-lg border transition-all ${
+                            selectedMedia === media.id
+                              ? "bg-[var(--primary-cta)] bg-opacity-10 border-[var(--primary-cta)]"
+                              : "border-[var(--accent)] border-opacity-20 hover:border-opacity-40"
+                          }`}
+                        >
+                          {/* Thumbnail */}
+                          <div className="w-12 h-12 rounded overflow-hidden flex-shrink-0 bg-[var(--background)]">
+                            {media.type === "photo" ? (
+                              <img
+                                src={media.src}
+                                alt={media.name}
+                                className="w-full h-full object-cover"
+                              />
+                            ) : (
+                              <div className="w-full h-full flex items-center justify-center bg-black bg-opacity-20">
+                                <Play size={16} className="text-white" />
+                              </div>
+                            )}
+                          </div>
+                          {/* Info */}
+                          <div className="min-w-0 flex-1 text-left">
+                            <p className="text-xs font-semibold text-[var(--foreground)] truncate">
+                              {media.name}
+                            </p>
+                            <p className="text-xs text-[var(--foreground)] opacity-60">
+                              {media.type === "photo" ? "Photo" : "Vidéo"}
+                            </p>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       {/* CTA Section */}