import { motion } from "framer-motion";
import { useState } from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import birthdayImage from "@/assets/images/product-birthday.png";
import eucalyptusImage from "@/assets/images/product-eucalyptus.png";
import jasmineImage from "@/assets/images/product-jasmine.png";
import lavenderImage from "@/assets/images/product-lavender.png";
import linenImage from "@/assets/images/product-linen.png";
import oudImage from "@/assets/images/product-oud.png";
import roseImage from "@/assets/images/product-rose.png";
import sandalwoodImage from "@/assets/images/product-sandalwood.png";
import "./products.css";

const PRODUCTS = [
  { id: 1, name: "Lavender Dream",    scent: "Calming French Lavender, Vanilla, & Bergamot",         price: "$28", image: lavenderImage,   category: "Floral" },
  { id: 2, name: "Rose & Vanilla",    scent: "Damask Rose, Sweet Vanilla Bean, & Amber",              price: "$32", image: roseImage,        category: "Floral" },
  { id: 3, name: "Eucalyptus Mint",   scent: "Fresh Eucalyptus, Spearmint, & Cedar",                  price: "$28", image: eucalyptusImage,  category: "Fresh" },
  { id: 4, name: "Oud & Amber",       scent: "Rich Oud Wood, Warm Amber, & Dark Musk",                price: "$36", image: oudImage,         category: "Woody" },
  { id: 5, name: "Jasmine Night",     scent: "Night-blooming Jasmine, Ylang Ylang, & Sandalwood",     price: "$30", image: jasmineImage,     category: "Floral" },
  { id: 6, name: "Sandalwood Cedar",  scent: "Indian Sandalwood, Cedarwood, & Patchouli",             price: "$34", image: sandalwoodImage,  category: "Woody" },
  { id: 7, name: "Fresh Linen",       scent: "Crisp Cotton, White Tea, & Lily of the Valley",         price: "$26", image: linenImage,        category: "Fresh" },
  { id: 8, name: "Birthday Cake",     scent: "Vanilla Buttercream, Sugar Spun, & Joy",                price: "$28", image: birthdayImage,    category: "Sweet" },
];

export default function ProductsPage() {
  const [filter, setFilter] = useState("All");
  const categories = ["All", ...Array.from(new Set(PRODUCTS.map((p) => p.category)))];
  const filteredProducts = filter === "All" ? PRODUCTS : PRODUCTS.filter((p) => p.category === filter);

  return (
    <Box>
      {/* ── Hero ── */}
      <section className="products-hero">
        <Container maxWidth="md">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <h1>Our Collection</h1>
            <p>Each candle is meticulously hand-poured with natural soy wax and premium fragrance oils, designed to elevate your everyday rituals.</p>
            <div className="section-divider" />
          </motion.div>
        </Container>
      </section>

      {/* ── Products Body ── */}
      <section className="products-body">
        <Container maxWidth="xl">
          {/* Filter Bar */}
          <motion.div
            className="filter-bar"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
          >
            {categories.map((cat) => (
              <button
                key={cat}
                className={`filter-btn${filter === cat ? " active" : ""}`}
                onClick={() => setFilter(cat)}
              >
                {cat}
              </button>
            ))}
          </motion.div>

          {/* Grid */}
          <div className="products-grid">
            {filteredProducts.map((product, index) => (
              <motion.div
                key={product.id}
                className="prod-card"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-50px" }}
                transition={{ delay: (index % 4) * 0.1, duration: 0.6 }}
              >
                <div className="prod-img-wrap">
                  <img src={product.image} alt={product.name} />
                  <div className="prod-overlay">
                    <button className="prod-overlay-btn">Add to Cart</button>
                  </div>
                </div>
                <div className="prod-info">
                  <div>
                    <h3 className="prod-name">{product.name}</h3>
                    <p className="prod-scent">{product.scent}</p>
                  </div>
                  <p className="prod-price">{product.price}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </Container>
      </section>
    </Box>
  );
}
