"use client";

import { motion } from "framer-motion";
import { useState } from "react";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import AnimatedButton from "../components/AnimatedButton";
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
import {
  ArrowRightIcon,
  PackageIcon,
  LeafIcon,
  SparklesIcon,
  TruckIcon,
  CheckIcon,
} from "../components/Icons";

const categories = [
  {
    id: "packaging",
    icon: PackageIcon,
    title: "Foodservice Packaging",
    description:
      "Complete range of containers, cutlery, and packaging solutions for restaurants, caterers, and food service operations.",
    color: "from-orange-500 to-red-500",
    bgColor: "bg-orange-50 dark:bg-orange-950/20",
    products: [
      "Foam Containers",
      "PETE Deli Containers",
      "Foil Rounds",
      "Microwavable Containers",
      "Disposable Cutlery & Cutlery Kits",
      "Dual Ovenable",
      "Straws",
      "Clear Hinged Containers",
    ],
  },
  {
    id: "green",
    icon: LeafIcon,
    title: "Green Products",
    description:
      "Eco-friendly, sustainable alternatives including compostable and recyclable options for environmentally conscious businesses.",
    color: "from-emerald-500 to-teal-500",
    bgColor: "bg-emerald-50 dark:bg-emerald-950/20",
    products: [
      "Dinnerware",
      "Hinged Containers",
      "Compostable Cutlery",
      "Compostable Cups",
      "Compostable Can Liners",
      "Recyclable PETE & PP Containers",
      "PLA Lined Containers",
    ],
  },
  {
    id: "catering",
    icon: SparklesIcon,
    title: "Catering & Specialty",
    description:
      "Premium solutions for catering operations including custom printed options and specialty containers.",
    color: "from-purple-500 to-pink-500",
    bgColor: "bg-purple-50 dark:bg-purple-950/20",
    products: [
      "Printed Containers",
      "Printed Wraps & Bags",
      "Specialty Catering Containers",
      "Premium Serving Trays",
      "Custom Branded Solutions",
    ],
  },
  {
    id: "janitorial",
    icon: TruckIcon,
    title: "Janitorial Supplies",
    description:
      "Essential cleaning and maintenance supplies to keep your facilities spotless and hygienic.",
    color: "from-blue-500 to-cyan-500",
    bgColor: "bg-blue-50 dark:bg-blue-950/20",
    products: [
      "Can Liners",
      "Toilet Seat Covers",
      "Urinal Blocks",
      "Urinal Screens",
      "Gloves",
    ],
  },
];

export default function ProductsPage() {
  const [activeCategory, setActiveCategory] = useState<string | null>(null);

  return (
    <main className="relative">
      <Navigation />

      {/* Hero Section */}
      <section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-[hsl(0,100%,70%)] rounded-full filter blur-[180px] opacity-10"
            animate={{
              scale: [1, 1.2, 1],
              x: [0, 30, 0],
            }}
            transition={{
              duration: 10,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500 rounded-full filter blur-[150px] opacity-10"
            animate={{
              scale: [1.2, 1, 1.2],
              x: [0, -30, 0],
            }}
            transition={{
              duration: 12,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        {/* Floating product icons */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {[
            { Icon: PackageIcon, top: "20%", left: "10%", delay: 0 },
            { Icon: LeafIcon, top: "60%", left: "5%", delay: 0.5 },
            { Icon: SparklesIcon, top: "30%", right: "8%", delay: 1 },
            { Icon: TruckIcon, top: "70%", right: "12%", delay: 1.5 },
          ].map((item, i) => (
            <motion.div
              key={i}
              className="absolute"
              style={{
                top: item.top,
                left: item.left,
                right: item.right,
              }}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 0.2, y: 0 }}
              transition={{ delay: item.delay, duration: 0.8 }}
            >
              <motion.div
                animate={{ y: [0, -15, 0], rotate: [0, 5, 0] }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut",
                  delay: item.delay,
                }}
              >
                <item.Icon
                  size={48}
                  className="text-neutral-300 dark:text-neutral-700"
                />
              </motion.div>
            </motion.div>
          ))}
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[hsl(0,100%,40%)]/10 border border-[hsl(0,100%,40%)]/20 mb-8"
          >
            <PackageIcon size={16} className="text-[hsl(0,100%,40%)]" />
            <span className="text-sm font-medium text-[hsl(0,100%,35%)] dark:text-[hsl(0,100%,60%)]">
              Our Product Range
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.1 }}
            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-neutral-900 dark:text-white mb-6"
          >
            Everything You{" "}
            <span className="bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
              Need
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 mb-10 leading-relaxed"
          >
            From foodservice packaging to janitorial supplies, we offer
            comprehensive solutions for your business needs.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="flex flex-wrap items-center justify-center gap-3"
          >
            {categories.map((cat, index) => (
              <motion.a
                key={cat.id}
                href={`#${cat.id}`}
                whileHover={{ scale: 1.05, y: -2 }}
                whileTap={{ scale: 0.95 }}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 + index * 0.1 }}
                className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r ${cat.color} text-white text-sm font-medium shadow-lg hover:shadow-xl transition-shadow`}
              >
                <cat.icon size={16} />
                {cat.title.split(" ")[0]}
              </motion.a>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Category Navigation */}
      <section className="sticky top-20 z-30 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-200 dark:border-neutral-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 py-4 overflow-x-auto scrollbar-hide">
            {categories.map((cat) => (
              <motion.a
                key={cat.id}
                href={`#${cat.id}`}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                onClick={() => setActiveCategory(cat.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
                  activeCategory === cat.id
                    ? "bg-[hsl(0,100%,40%)] text-white"
                    : "bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700"
                }`}
              >
                <cat.icon size={16} />
                {cat.title}
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      {/* Product Categories */}
      {categories.map((category, categoryIndex) => (
        <section
          key={category.id}
          id={category.id}
          className={`section-padding ${
            categoryIndex % 2 === 0
              ? "bg-white dark:bg-neutral-900"
              : "bg-neutral-50 dark:bg-neutral-950"
          }`}
        >
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-start">
              {/* Category Info */}
              <div
                className={
                  categoryIndex % 2 === 1 ? "lg:order-2" : "lg:order-1"
                }
              >
                <FadeIn>
                  <motion.div
                    whileHover={{ scale: 1.05, rotate: 5 }}
                    className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${category.color} text-white mb-6`}
                  >
                    <category.icon size={32} />
                  </motion.div>
                </FadeIn>

                <FadeIn delay={0.1}>
                  <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
                    {category.title}
                  </h2>
                </FadeIn>

                <FadeIn delay={0.2}>
                  <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                    {category.description}
                  </p>
                </FadeIn>

                <FadeIn delay={0.3}>
                  <AnimatedButton
                    href="/contact"
                    icon={<ArrowRightIcon size={18} />}
                  >
                    Request Information
                  </AnimatedButton>
                </FadeIn>
              </div>

              {/* Products Grid */}
              <div
                className={
                  categoryIndex % 2 === 1 ? "lg:order-1" : "lg:order-2"
                }
              >
                <FadeIn
                  delay={0.2}
                  direction={categoryIndex % 2 === 1 ? "left" : "right"}
                >
                  <div className={`${category.bgColor} rounded-3xl p-8`}>
                    <h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-6">
                      Available Products
                    </h3>
                    <div className="grid gap-3">
                      {category.products.map((product, index) => (
                        <motion.div
                          key={product}
                          initial={{ opacity: 0, x: -20 }}
                          whileInView={{ opacity: 1, x: 0 }}
                          viewport={{ once: true }}
                          transition={{ delay: index * 0.05 }}
                          whileHover="hover"
                          animate="rest"
                          variants={{
                            rest: { x: 0, scale: 1 },
                            hover: { x: 10, scale: 1.02 }
                          }}
                          className="group flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-default"
                        >
                          <motion.div
                            variants={{
                              rest: { scale: 1, rotate: 0 },
                              hover: { scale: 1.2, rotate: 360 }
                            }}
                            transition={{ duration: 0.3 }}
                            className={`w-10 h-10 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center flex-shrink-0`}
                          >
                            <CheckIcon size={18} className="text-white" />
                          </motion.div>
                          <span className="font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-[hsl(0,100%,40%)] transition-colors">
                            {product}
                          </span>
                          <motion.div
                            variants={{
                              rest: { opacity: 0, x: -10 },
                              hover: { opacity: 1, x: 0 }
                            }}
                            className="ml-auto"
                          >
                            <ArrowRightIcon
                              size={16}
                              className="text-neutral-400"
                            />
                          </motion.div>
                        </motion.div>
                      ))}
                    </div>
                  </div>
                </FadeIn>
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Features Section */}
      <section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <FadeIn>
              <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
                Why Choose Us
              </span>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                Quality You Can{" "}
                <span className="text-[hsl(0,100%,55%)]">Trust</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-400">
                We partner with leading manufacturers to bring you the best
                products at competitive prices.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                title: "Premium Quality",
                description:
                  "Products from trusted manufacturers meeting industry standards.",
                icon: "01",
              },
              {
                title: "Competitive Pricing",
                description:
                  "Volume discounts and competitive rates for all customers.",
                icon: "02",
              },
              {
                title: "Fast Delivery",
                description:
                  "Efficient distribution network across 10 states.",
                icon: "03",
              },
              {
                title: "Expert Support",
                description:
                  "Dedicated team to help you find the right solutions.",
                icon: "04",
              },
            ].map((feature) => (
              <StaggerItem key={feature.title}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { y: 0 },
                    hover: { y: -10 }
                  }}
                  className="group relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-all h-full"
                >
                  <motion.span
                    variants={{
                      rest: { scale: 1 },
                      hover: { scale: 1.1 }
                    }}
                    className="inline-block text-4xl font-bold text-[hsl(0,100%,40%)] mb-4"
                  >
                    {feature.icon}
                  </motion.span>
                  <h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
                    {feature.title}
                  </h3>
                  <p className="text-neutral-400 leading-relaxed">
                    {feature.description}
                  </p>
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* Sustainability Banner */}
      <section className="section-padding bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative overflow-hidden">
        {/* Background decoration */}
        <motion.div
          className="absolute top-0 right-0 w-96 h-96 bg-white rounded-full filter blur-[150px] opacity-10"
          animate={{
            scale: [1, 1.2, 1],
            x: [0, 50, 0],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <FadeIn>
                <motion.div
                  whileHover={{ rotate: 360 }}
                  transition={{ duration: 0.5 }}
                  className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 mb-6"
                >
                  <LeafIcon size={32} />
                </motion.div>
              </FadeIn>
              <FadeIn delay={0.1}>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                  Going Green?
                </h2>
              </FadeIn>
              <FadeIn delay={0.2}>
                <p className="text-xl text-white/90 mb-8 leading-relaxed">
                  Explore our comprehensive range of sustainable, compostable,
                  and eco-friendly products. We can help you meet environmental
                  regulations and reduce your carbon footprint.
                </p>
              </FadeIn>
              <FadeIn delay={0.3}>
                <div className="flex flex-wrap gap-4">
                  <AnimatedButton
                    href="/sustainability"
                    variant="secondary"
                    icon={<ArrowRightIcon size={18} />}
                  >
                    Learn About Sustainability
                  </AnimatedButton>
                  <AnimatedButton href="/state-ordinances" variant="outline">
                    <span className="text-white">View State Ordinances</span>
                  </AnimatedButton>
                </div>
              </FadeIn>
            </div>

            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <div className="grid grid-cols-2 gap-4">
                  {[
                    "Compostable",
                    "Recyclable",
                    "Biodegradable",
                    "Eco-Friendly",
                  ].map((label, i) => (
                    <motion.div
                      key={label}
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{ delay: i * 0.1 }}
                      whileHover="hover"
                      animate="rest"
                      variants={{
                        rest: { scale: 1, y: 0 },
                        hover: { scale: 1.05, y: -5 }
                      }}
                      className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl text-center border border-white/20 hover:bg-white/20 transition-colors"
                    >
                      <motion.div
                        variants={{
                          rest: { rotate: 0 },
                          hover: { rotate: 360 }
                        }}
                        transition={{ duration: 0.5 }}
                        className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
                      >
                        <LeafIcon size={24} />
                      </motion.div>
                      <span className="font-medium">{label}</span>
                    </motion.div>
                  ))}
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
        {/* Background pattern */}
        <div className="absolute inset-0 opacity-10">
          <svg
            className="w-full h-full"
            viewBox="0 0 100 100"
            preserveAspectRatio="none"
          >
            <pattern
              id="grid-products"
              width="10"
              height="10"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 10 0 L 0 0 0 10"
                fill="none"
                stroke="white"
                strokeWidth="0.5"
              />
            </pattern>
            <rect width="100%" height="100%" fill="url(#grid-products)" />
          </svg>
        </div>

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
              Need Help Finding the Right Products?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              Our experts are ready to help you find the perfect solutions for
              your business. Get in touch for personalized recommendations.
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <AnimatedButton
                href="/contact"
                variant="secondary"
                size="lg"
                icon={<ArrowRightIcon size={18} />}
              >
                Contact Our Team
              </AnimatedButton>
              <AnimatedButton href="/what-we-do" variant="outline" size="lg">
                <span className="text-white">How We Work</span>
              </AnimatedButton>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}