import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, ShoppingCart, X, ChevronLeft, ChevronRight } from "lucide-react";

export default function ChicoPetShop() {
  const [cartCount, setCartCount] = useState(0);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [currentImgIndex, setCurrentImgIndex] = useState(0);
  const audioRef = useRef(null);

  // 🐾 Trail paw effect
  useEffect(() => {
    const trail = document.createElement("div");
    trail.className = "fixed top-0 left-0 pointer-events-none z-50";
    document.body.appendChild(trail);

    const move = (e) => {
      const paw = document.createElement("div");
      paw.innerHTML = "🐾";
      paw.className =
        "absolute text-2xl opacity-70 animate-bounce pointer-events-none";
      paw.style.left = e.pageX + "px";
      paw.style.top = e.pageY + "px";
      trail.appendChild(paw);
      setTimeout(() => paw.remove(), 800);
    };
window.addEventListener("mousemove", move);
    return () => window.removeEventListener("mousemove", move);
  }, []);

  const sections = [
    {
      title: "مقاله‌ها",
      items: ["🐶 درباره سگ", "🐱 درباره گربه", "🍖 درباره غذا"],
    },
    {
      title: "غذا",
      items: ["🍗 غذای مخصوص سگ", "🥩 غذای مخصوص گربه", "🥨 غذای خشک"],
    },
    { title: "آرایش و بهداشتی", items: [] },
    { title: "کلینیک و درمان", items: [] },
  ];

  // 🦴🐟 شناورهای پس‌زمینه
  const floatingItems = ["🦴", "🐟", "🦴", "🐟", "🦴"];

  // 🎵 پخش صدا
  const playSound = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };
  // 📦 محصولات نمونه (چند عکس برای هر محصول)
  const products = [
    {
      id: 1,
      name: "غذای خشک سگ",
      price: "250,000 تومان",
      images: [
        "https://place-puppy.com/300x200",
        "https://place-puppy.com/301x200",
        "https://place-puppy.com/302x200",
      ],
      desc: "غذای کامل و مغذی برای سگ‌های بالغ با پروتئین بالا.",
    },
    {
      id: 2,
      name: "غذای خشک گربه",
      price: "220,000 تومان",
      images: [
        "https://placekitten.com/300/200",
        "https://placekitten.com/301/200",
        "https://placekitten.com/302/200",
      ],
      desc: "مخصوص گربه‌های خانگی، تقویت پوست و مو.",
    },
    {
id: 3,
      name: "شامپو سگ",
      price: "180,000 تومان",
      images: [
        "https://placebear.com/300/200",
        "https://placebear.com/301/200",
      ],
      desc: "شامپوی ملایم و ضدحساسیت برای پوست سگ.",
    },
  ];

  // وقتی محصول باز شد، عکس اول نمایش داده میشه
  const openProduct = (product) => {
    setSelectedProduct(product);
    setCurrentImgIndex(0);
  };
// وقتی محصول باز شد، عکس اول نمایش داده میشه
  const openProduct = (product) => {
    setSelectedProduct(product);
    setCurrentImgIndex(0);
  };

  return (
    <div className="relative font-sans bg-gradient-to-b from-[#fdf6ec] to-[#d9b89c] text-brown-900 min-h-screen overflow-hidden">
      {/* 🔵 استخوان و ماهی شناور */}
      {floatingItems.map((icon, i) => (
        <motion.div
          key={i}
          className="absolute text-3xl opacity-40"
          initial={{ y: "100vh", x: ${20 * i}%, rotate: 0 }}
          animate={{
            y: "-10vh",
            rotate: [0, 20, -20, 0],
          }}
          transition={{
            duration: 12 + i * 3,
            repeat: Infinity,
            delay: i * 2,
          }}
        >
          {icon}
        </motion.div>
      ))}
import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, ShoppingCart, X, ChevronLeft, ChevronRight } from "lucide-react";

export default function ChicoPetShop() {
  const [cartCount, setCartCount] = useState(0);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [currentImgIndex, setCurrentImgIndex] = useState(0);
  const audioRef = useRef(null);

𝒜𝓃𝒾𝓉𝒶🤍, [9/10/2025 11:06 AM]
// 🐾 Trail paw effect
  useEffect(() => {
    const trail = document.createElement("div");
    trail.className = "fixed top-0 left-0 pointer-events-none z-50";
    document.body.appendChild(trail);

    const move = (e) => {
      const paw = document.createElement("div");
      paw.innerHTML = "🐾";
      paw.className =
        "absolute text-2xl opacity-70 animate-bounce pointer-events-none";
      paw.style.left = e.pageX + "px";
      paw.style.top = e.pageY + "px";
      trail.appendChild(paw);
      setTimeout(() => paw.remove(), 800);
    };

    window.addEventListener("mousemove", move);
    return () => window.removeEventListener("mousemove", move);
  }, []);

  const sections = [
    {
      title: "مقاله‌ها",
      items: ["🐶 درباره سگ", "🐱 درباره گربه", "🍖 درباره غذا"],
    },
    {
      title: "غذا",
      items: ["🍗 غذای مخصوص سگ", "🥩 غذای مخصوص گربه", "🥨 غذای خشک"],
    },
    { title: "آرایش و بهداشتی", items: [] },
    { title: "کلینیک و درمان", items: [] },
  ];

  // 🦴🐟 شناورهای پس‌زمینه
  const floatingItems = ["🦴", "🐟", "🦴", "🐟", "🦴"];

  // 🎵 پخش صدا
  const playSound = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };

  // 📦 محصولات نمونه (چند عکس برای هر محصول)
  const products = [
    {
      id: 1,
      name: "غذای خشک سگ",
      price: "250,000 تومان",
      images: [
        "https://place-puppy.com/300x200",
        "https://place-puppy.com/301x200",
        "https://place-puppy.com/302x200",
      ],
      desc: "غذای کامل و مغذی برای سگ‌های بالغ با پروتئین بالا.",
    },
    {
      id: 2,
      name: "غذای خشک گربه",
      price: "220,000 تومان",
      images: [
        "https://placekitten.com/300/200",
        "https://placekitten.com/301/200",
        "https://placekitten.com/302/200",
      ],
      desc: "مخصوص گربه‌های خانگی، تقویت پوست و مو.",
    },
    {
      id: 3,
      name: "شامپو سگ",
      price: "180,000 تومان",
      images: [
        "https://placebear.com/300/200",
        "https://placebear.com/301/200",
      ],
      desc: "شامپوی ملایم و ضدحساسیت برای پوست سگ.",
    },
  ];

  // وقتی محصول باز شد، عکس اول نمایش داده میشه
  const openProduct = (product) => {
    setSelectedProduct(product);
    setCurrentImgIndex(0);
  };

  return (
    <div className="relative font-sans bg-gradient-to-b from-[#fdf6ec] to-[#d9b89c] text-brown-900 min-h-screen overflow-hidden">
      {/* 🔵 استخوان و ماهی شناور */}
      {floatingItems.map((icon, i) => (
        <motion.div
          key={i}
          className="absolute text-3xl opacity-40"
          initial={{ y: "100vh", x: ${20 * i}%, rotate: 0 }}
          animate={{
            y: "-10vh",
            rotate: [0, 20, -20, 0],
          }}
          transition={{
            duration: 12 + i * 3,
            repeat: Infinity,
            delay: i * 2,
          }}
        >
          {icon}
        </motion.div>
      ))}

      {/* 🔝 نوار بالا */}
      <nav className="relative bg-[#8b5e3c] text-white text-sm py-2 px-4 flex justify-between items-center shadow-md z-10">
        <span className="font-bold text-lg">🐾 چیکو</span>
        <ul className="flex gap-6">
          <li className="cursor-pointer hover:scale-110 transition">خانه</li>
          <li className="cursor-pointer hover:scale-110 transition">محصولات</li>
          <li className="cursor-pointer hover:scale-110 transition">بلاگ</li>
          <li className="cursor-pointer hover:scale-110 transition">کانال تلگرام</li>
          <li className="cursor-pointer hover:scale-110 transition">تماس با ما</li>
        </ul>
      </nav>

      {/* 📂 منوی سمت چپ بالا */}
      <div className="absolute top-3 left-3 z-20">
        <div className="bg-[#8b5e3c] text-white p-3 rounded-2xl shadow-lg flex items-center gap-3">

𝒜𝓃𝒾𝓉𝒶🤍, [9/10/2025 11:06 AM]
<Menu />
          <motion.button
            whileTap={{ scale: 1.3 }}
            whileHover={{ scale: 1.1 }}
            onClick={() => {
              setCartCount(cartCount + 1);
              playSound();
            }}
            className="flex items-center gap-2 bg-white text-[#8b5e3c] px-3 py-2 rounded-xl shadow cursor-pointer"
          >
            <ShoppingCart className="w-5 h-5" />
            سبد خرید ({cartCount})
          </motion.button>
        </div>
      </div>
{/* 📝 بخش‌ها */}
      <div className="relative p-6 space-y-10 z-10">
        {sections.map((section, idx) => (
          <motion.div
            key={idx}
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="bg-white rounded-2xl shadow-lg p-6"
          >
            <h2 className="text-2xl font-bold text-[#8b5e3c] mb-4">
              {section.title}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {section.items.map((item, i) => (
                <motion.div
                  key={i}
                  whileHover={{ scale: 1.1, rotate: -2 }}
                  whileTap={{ scale: 0.9 }}
                  className="p-4 bg-[#fdf6ec] rounded-xl shadow hover:shadow-xl cursor-pointer"
                >
                  {item}
                </motion.div>
              ))}
            </div>
          </motion.div>
        ))}
{/* 🛍️ بخش محصولات */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="bg-white rounded-2xl shadow-lg p-6"
        >
          <h2 className="text-2xl font-bold text-[#8b5e3c] mb-4">محصولات</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {products.map((product) => (
              <motion.div
                key={product.id}
                whileHover={{ scale: 1.05 }}
                className="bg-[#fdf6ec] rounded-xl shadow-lg overflow-hidden cursor-pointer"
                onClick={() => openProduct(product)}
              >
                <img
                  src={product.images[0]}
                  alt={product.name}
                  className="w-full h-40 object-cover"
                />
                <div className="p-4 space-y-2">
                  <h3 className="font-bold text-lg">{product.name}</h3>
                  <p className="text-sm text-gray-700">{product.price}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
{/* 🪟 مودال جزئیات محصول */}
      <AnimatePresence>
        {selectedProduct && (
          <motion.div
            className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setSelectedProduct(null)}
          >
            <motion.div
              className="bg-white rounded-2xl shadow-xl p-6 max-w-md w-11/12 relative"
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.8, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
            >
              {/* ❌ بستن */}
              <button
                className="absolute top-3 right-3 text-gray-500 hover:text-gray-700"
                onClick={() => setSelectedProduct(null)}
              >
                <X />
              </button>

              {/* 📸 اسلایدر عکس‌ها */}
              <div className="relative">
                <img
src={selectedProduct.images[currentImgIndex]}
                  alt={selectedProduct.name}

𝒜𝓃𝒾𝓉𝒶🤍, [9/10/2025 11:06 AM]
className="w-full h-48 object-cover rounded-xl mb-4"
                />
                {/* ◀️ قبلی */}
                <button
                  className="absolute top-1/2 left-2 -translate-y-1/2 bg-white/70 rounded-full p-2 shadow"
                  onClick={() =>
                    setCurrentImgIndex(
                      (currentImgIndex - 1 + selectedProduct.images.length) %
                        selectedProduct.images.length
                    )
                  }
                >
                  <ChevronLeft />
                </button>
                {/* ▶️ بعدی */}
                <button
                  className="absolute top-1/2 right-2 -translate-y-1/2 bg-white/70 rounded-full p-2 shadow"
                  onClick={() =>
                    setCurrentImgIndex(
                      (currentImgIndex + 1) % selectedProduct.images.length
                    )
                  }
                >
                  <ChevronRight />
                </button>
              </div>
<h3 className="text-xl font-bold mb-2">{selectedProduct.name}</h3>
              <p className="text-gray-700 mb-2">{selectedProduct.desc}</p>
              <p className="font-semibold text-[#8b5e3c] mb-4">
                {selectedProduct.price}
              </p>
              <motion.button
                whileTap={{ scale: 1.2 }}
                whileHover={{ scale: 1.05 }}
                onClick={() => {
                  setCartCount(cartCount + 1);
                  playSound();
                }}
                className="w-full bg-[#8b5e3c] text-white py-2 rounded-xl shadow"
              >
                🛒 افزودن به سبد
              </motion.button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 🎵 صدا */}
      <audio ref={audioRef} src="https://www.soundjay.com/buttons/button-16.mp3" />
    </div>
  );
}