import React, { useState, useMemo } from "react"; import { motion } from "framer-motion"; import { ShoppingCart, Search, X, Filter } from "lucide-react";

// Single-file React component for a small clothing e-commerce site. // Uses TailwindCSS utility classes. Default export is the page component. // Features included: // - Header with search & cart // - Category filters // - Product grid with sample products // - Cart sidebar with add/remove and quantity // - Simple responsive layout, subtle animations with Framer Motion

const SAMPLE_PRODUCTS = [ { id: "tshirt-01", name: "T-shirt Essentials", price: 19.99, category: "Tops", img: "https://images.unsplash.com/photo-1520975921755-4b741d9b4e6d?q=80&w=800&auto=format&fit=crop&crop=faces", sizes: ["S", "M", "L", "XL"], color: "Noir", }, { id: "hoodie-01", name: "Hoodie Cozy", price: 49.99, category: "Sweatshirts", img: "https://images.unsplash.com/photo-1602810313697-31114a4f8e30?q=80&w=800&auto=format&fit=crop&crop=faces", sizes: ["S", "M", "L", "XL"], color: "Gris", }, { id: "jacket-01", name: "Veste Légère", price: 79.0, category: "Vêtements d'extérieur", img: "https://images.unsplash.com/photo-1541099649105-f69ad21f3246?q=80&w=800&auto=format&fit=crop&crop=faces", sizes: ["M", "L"], color: "Bleu", }, { id: "pants-01", name: "Pantalon Chino", price: 39.5, category: "Bas", img: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=800&auto=format&fit=crop&crop=faces", sizes: ["S", "M", "L"], color: "Beige", }, { id: "dress-01", name: "Robe Décontractée", price: 59.99, category: "Robes", img: "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=800&auto=format&fit=crop&crop=faces", sizes: ["S", "M"], color: "Rouge", }, ];

export default function BoutiqueClothing() { const [query, setQuery] = useState(""); const [activeCategory, setActiveCategory] = useState("Tous"); const [cartOpen, setCartOpen] = useState(false); const [cart, setCart] = useState({}); // { productId: { product, qty, size } }

const categories = useMemo(() => { const cats = new Set(SAMPLE_PRODUCTS.map((p) => p.category)); return ["Tous", ...Array.from(cats)]; }, []);

const filtered = useMemo(() => { return SAMPLE_PRODUCTS.filter((p) => { if (activeCategory !== "Tous" && p.category !== activeCategory) return false; if (!query) return true; const q = query.toLowerCase(); return ( p.name.toLowerCase().includes(q) || p.category.toLowerCase().includes(q) || (p.color && p.color.toLowerCase().includes(q)) ); }); }, [query, activeCategory]);

function addToCart(product, chosenSize = null) { setCart((c) => { const existing = c[product.id]; const qty = existing ? existing.qty + 1 : 1; return { ...c, [product.id]: { product, qty, size: chosenSize || (product.sizes[0] ?? null) }, }; }); setCartOpen(true); }

function removeFromCart(productId) { setCart((c) => { const next = { ...c }; delete next[productId]; return next; }); }

function changeQty(productId, delta) { setCart((c) => { const item = c[productId]; if (!item) return c; const newQty = Math.max(0, item.qty + delta); if (newQty === 0) { const next = { ...c }; delete next[productId]; return next; } return { ...c, [productId]: { ...item, qty: newQty } }; }); }

const cartItems = Object.values(cart); const subtotal = cartItems.reduce((s, it) => s + it.product.price * it.qty, 0);

return ( <div className="min-h-screen bg-gray-50 text-gray-900"> <header className="bg-white shadow-sm sticky top-0 z-30"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16"> <div className="flex items-center gap-4"> <div className="text-2xl font-extrabold tracking-tight">Boutique</div> <nav className="hidden md:flex gap-2"> {categories.map((cat) => ( <button key={cat} onClick={() => setActiveCategory(cat)} className={px-3 py-1 rounded-md text-sm ${ activeCategory === cat ? "bg-black text-white" : "hover:bg-gray-100" }} > {cat} </button> ))} </nav> </div>

<div className="flex items-center gap-3">
          <div className="hidden sm:flex items-center bg-gray-100 rounded-md px-2 py-1 gap-2">
            <Search size={16} />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Rechercher vêtements, couleur..."
              className="bg-transparent outline-none text-sm"
            />
          </div>

          <button
            onClick={() => setCartOpen(true)}
            className="relative p-2 rounded-md hover:bg-gray-100"
            aria-label="Ouvrir le panier"
          >
            <ShoppingCart />
            {cartItems.length > 0 && (
              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
                {cartItems.length}
              </span>
            )}
          </button>
        </div>
      </div>
    </div>
  </header>

  <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <section className="mb-6 flex items-center justify-between">
      <h1 className="text-3xl font-bold">Nouveautés</h1>
      <div className="flex items-center gap-2 md:hidden">
        <button
          onClick={() => setActiveCategory("Tous")}
          className="px-3 py-1 rounded-md text-sm bg-gray-100"
        >
          Tous
        </button>
        <button onClick={() => setActiveCategory("Tops")} className="px-3 py-1 rounded-md text-sm bg-gray-100">
          Tops
        </button>
      </div>
    </section>

    <section>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {filtered.map((p) => (
          <motion.article
            key={p.id}
            layout
            initial={{ opacity: 0, y: 6 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-2xl shadow p-4 flex flex-col"
          >
            <div className="relative rounded-lg overflow-hidden bg-gray-100">
              <img src={p.img} alt={p.name} className="w-full h-48 object-cover" />
            </div>
            <div className="mt-3 flex-1">
              <h3 className="font-semibold">{p.name}</h3>
              <p className="text-sm text-gray-500 mt-1">{p.category} • {p.color}</p>
            </div>
            <div className="mt-4 flex items-center justify-between">
              <div>
                <div className="text-lg font-bold">{p.price.toFixed(2)}€</div>
                <div className="text-xs text-gray-500">TTC</div>
              </div>
              <div className="flex items-center gap-2">
                <select className="hidden sm:block border rounded px-2 py-1 text-sm">
                  {p.sizes.map((s) => (
                    <option key={s} value={s}>{s}</option>
                  ))}
                </select>
                <button
                  onClick={() => addToCart(p)}
                  className="px-3 py-2 bg-black text-white rounded-md text-sm shadow-sm hover:opacity-95"
                >
                  Ajouter
                </button>
              </div>
            </div>
          </motion.article>
        ))}
      </div>

      {filtered.length === 0 && (
        <div className="mt-8 text-center text-gray-600">Aucun produit trouvé pour "{query}" dans "{activeCategory}".</div>
      )}
    </section>
  </main>

  {/* Cart sidebar */}
  <motion.aside
    initial={{ x: "100%" }}
    animate={{ x: cartOpen ? 0 : "100%" }}
    transition={{ type: "spring", stiffness: 300, damping: 30 }}
    className="fixed right-0 top-0 h-full w-full sm:w-[420px] bg-white shadow-lg z-50"
    aria-hidden={!cartOpen}
  >
    <div className="flex items-center justify-between p-4 border-b">
      <h2 className="text-lg font-semibold">Panier</h2>
      <button onClick={() => setCartOpen(false)} className="p-2 rounded-md hover:bg-gray-100">
        <X />
      </button>
    </div>
    <div className="p-4 h-[calc(100%-140px)] overflow-y-auto">
      {cartItems.length === 0 ? (
        <div className="text-center text-gray-600 mt-12">Votre panier est vide.</div>
      ) : (
        cartItems.map((it) => (
          <div key={it.product.id} className="flex items-center gap-4 py-3 border-b">
            <img src={it.product.img} alt={it.product.name} className="w-16 h-16 object-cover rounded" />
            <div className="flex-1">
              <div className="font-medium">{it.product.name}</div>
              <div className="text-sm text-gray-500">Taille: {it.size ?? "-"}</div>
              <div className="text-sm text-gray-700 mt-1">{(it.product.price * it.qty).toFixed(2)}€</div>
            </div>
            <div className="flex flex-col items-center gap-1">
              <div className="flex items-center gap-1">
                <button onClick={() => changeQty(it.product.id, -1)} className="px-2 py-1 rounded-md border">-</button>
                <div className="px-2">{it.qty}</div>
                <button onClick={() => changeQty(it.product.id, +1)} className="px-2 py-1 rounded-md border">+</button>
              </div>
              <button onClick={() => removeFromCart(it.product.id)} className="text-xs text-red-500 underline mt-1">Supprimer</button>
            </div>
          </div>
        ))
      )}
    </div>
    <div className="p-4 border-t">
      <div className="flex items-center justify-between text-sm text-gray-600">
        <div>Sous-total</div>
        <div className="font-semibold">{subtotal.toFixed(2)}€</div>
      </div>
      <div className="mt-4 flex flex-col gap-2">
        <button
          onClick={() => alert('Procéder au paiement - intégrer Stripe / PayPal dans une version suivante.')}
          className="w-full px-4 py-3 bg-black text-white rounded-md"
        >
          Passer à la caisse
        </button>
        <button onClick={() => { setCart({}); setCartOpen(false); }} className="w-full px-4 py-2 border rounded-md">
          Vider le panier
        </button>
      </div>
    </div>
  </motion.aside>

  <footer className="mt-12 border-t bg-white">
    <div className="max-w-7xl mx-auto px-4 py-8 text-sm text-gray-600">© {new Date().getFullYear()} Boutique — Tous droits réservés</div>
  </footer>
</div>

); }