"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import Image from "next/image";
import { useRef } 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,
  UsersIcon,
  TruckIcon,
  TargetIcon,
  HeartIcon,
  SparklesIcon,
  MapPinIcon,
  CheckIcon,
  RecycleIcon,
} from "./components/Icons";
import AnimatedCounter from "./components/AnimatedCounter";

const stats = [
  { value: 100, suffix: "+", label: "Years Combined Experience" },
  { value: 10, suffix: "", label: "States Covered" },
  { value: 2005, suffix: "", label: "Industry Trusted Since" },
  { value: 5, suffix: "", label: "Product Categories" },
];

const productCategories = [
  {
    icon: PackageIcon,
    title: "Food Packaging",
    description:
      "Premium containers, cutlery, and packaging solutions for every foodservice need.",
    color: "from-orange-500 to-red-500",
  },
  {
    icon: LeafIcon,
    title: "Green Products",
    description:
      "Sustainable, compostable, and eco-friendly alternatives for conscious businesses.",
    color: "from-emerald-500 to-teal-500",
  },
  {
    icon: SparklesIcon,
    title: "Specialty Products",
    description:
      "Custom printed containers, wraps, and premium catering solutions.",
    color: "from-purple-500 to-pink-500",
  },
  {
    icon: TruckIcon,
    title: "Janitorial",
    description:
      "Complete range of cleaning supplies and janitorial essentials.",
    color: "from-blue-500 to-cyan-500",
  },
];

const values = [
  {
    icon: HeartIcon,
    title: "Family First",
    description:
      "Building character, strengthening individuals, and nurturing families.",
  },
  {
    icon: UsersIcon,
    title: "Integrity",
    description: "Selflessness, servanthood, and confident humility in all we do.",
  },
  {
    icon: TargetIcon,
    title: "Purpose Driven",
    description: "Professional, ethical representation with symbiotic growth.",
  },
];

const territories = [
  "Colorado",
  "Washington",
  "Oregon",
  "Idaho",
  "Utah",
  "Wyoming",
  "Montana",
  "New Mexico",
  "Nebraska",
  "Arizona",
];

export default function Home() {
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ["start start", "end start"],
  });

  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);

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

      {/* Hero Section */}
      <div ref={heroRef} className="relative">
        <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-950 dark:to-neutral-900">
        {/* Animated background elements */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-96 h-96 bg-[hsl(0,100%,70%)] rounded-full filter blur-[120px] opacity-20"
            animate={{
              scale: [1, 1.2, 1],
              x: [0, 30, 0],
            }}
            transition={{
              duration: 8,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute bottom-1/4 -right-32 w-96 h-96 bg-[hsl(0,100%,50%)] rounded-full filter blur-[120px] opacity-15"
            animate={{
              scale: [1.2, 1, 1.2],
              x: [0, -30, 0],
            }}
            transition={{
              duration: 10,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-[hsl(0,100%,40%)] to-[hsl(20,100%,50%)] rounded-full filter blur-[200px] opacity-5"
            animate={{
              rotate: [0, 360],
            }}
            transition={{
              duration: 60,
              repeat: Infinity,
              ease: "linear",
            }}
          />
        </div>

        {/* Grid pattern overlay */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        />

        <motion.div
          style={{ y: heroY, opacity: heroOpacity }}
          className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
        >
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            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"
          >
            <span className="w-2 h-2 rounded-full bg-[hsl(0,100%,40%)] animate-pulse" />
            <span className="text-sm font-medium text-[hsl(0,100%,35%)] dark:text-[hsl(0,100%,60%)]">
              Trusted Since 2005
            </span>
          </motion.div>

          {/* Main heading */}
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
          >
            Your{" "}
            <span className="relative inline-block">
              <span className="relative z-10 bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
                Foodservice
              </span>
              <motion.span
                className="absolute -bottom-2 left-0 right-0 h-3 bg-[hsl(0,100%,40%)]/20 -skew-x-3"
                initial={{ scaleX: 0 }}
                animate={{ scaleX: 1 }}
                transition={{ duration: 0.6, delay: 0.8 }}
              />
            </span>{" "}
            &<br />
            <span className="relative inline-block mt-2">
              <span className="relative z-10 bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
                Janitorial
              </span>
              <motion.span
                className="absolute -bottom-2 left-0 right-0 h-3 bg-[hsl(0,100%,40%)]/20 skew-x-3"
                initial={{ scaleX: 0 }}
                animate={{ scaleX: 1 }}
                transition={{ duration: 0.6, delay: 1 }}
              />
            </span>{" "}
            Experts
          </motion.h1>

          {/* Subheading */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 mb-10 leading-relaxed"
          >
            With over 100 years of combined experience, we deliver exceptional
            sales and marketing solutions across the Rocky Mountain and
            Northwest regions.
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.7 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <AnimatedButton
              href="/contact"
              size="lg"
              icon={<ArrowRightIcon size={18} />}
            >
              Get in Touch
            </AnimatedButton>
            <AnimatedButton href="/what-we-do" variant="outline" size="lg">
              Learn More
            </AnimatedButton>
          </motion.div>

          </motion.div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.5 }}
          className="absolute bottom-12 left-1/2 -translate-x-1/2"
        >
          <motion.div
            animate={{ y: [0, 10, 0] }}
            transition={{ duration: 1.5, repeat: Infinity }}
            className="w-6 h-10 rounded-full border-2 border-neutral-300 dark:border-neutral-700 flex items-start justify-center p-2"
          >
            <motion.div
              animate={{ y: [0, 12, 0] }}
              transition={{ duration: 1.5, repeat: Infinity }}
              className="w-1.5 h-1.5 rounded-full bg-[hsl(0,100%,40%)]"
            />
          </motion.div>
        </motion.div>
        </section>
      </div>

      {/* Stats Section */}
      <section className="relative py-20 bg-neutral-900 dark:bg-neutral-950 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-[hsl(0,100%,40%)]/10 via-transparent to-[hsl(0,100%,40%)]/10" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4">
            {stats.map((stat, index) => (
              <FadeIn key={stat.label} delay={index * 0.1} className="text-center">
                <motion.div
                  whileHover={{ scale: 1.05 }}
                  className="group cursor-default"
                >
                  <div className="block text-4xl sm:text-5xl font-bold text-white mb-2 group-hover:text-[hsl(0,100%,60%)] transition-colors">
                    <AnimatedCounter
                      value={stat.value}
                      suffix={stat.suffix}
                      duration={2}
                    />
                  </div>
                  <span className="text-neutral-400 text-sm sm:text-base">
                    {stat.label}
                  </span>
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="section-padding bg-white dark:bg-neutral-900">
        <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-center">
            {/* Content */}
            <div>
              <FadeIn>
                <span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                  About Us
                </span>
              </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">
                  Driving Growth Through{" "}
                  <span className="text-[hsl(0,100%,40%)]">
                    Strategic Partnership
                  </span>
                </h2>
              </FadeIn>
              <FadeIn delay={0.2}>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
                  We believe in &ldquo;pull thru&rdquo; selling, using key operators to
                  direct distribution. Our integrated, end-user focused sales
                  approach ensures we exceed growth goals for our manufacturers.
                </p>
              </FadeIn>
              <FadeIn delay={0.3}>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                  We maintain continuity with our distributor&apos;s sales force,
                  providing them with the tools they need to successfully sell
                  our products day-to-day.
                </p>
              </FadeIn>
              <FadeIn delay={0.4}>
                <AnimatedButton
                  href="/what-we-do"
                  icon={<ArrowRightIcon size={18} />}
                >
                  Discover Our Approach
                </AnimatedButton>
              </FadeIn>
            </div>

            {/* Image/Visual */}
            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900">
                  {/* Decorative elements */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      className="relative w-64 h-64"
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 60,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                    >
                      {[...Array(8)].map((_, i) => (
                        <motion.div
                          key={i}
                          className="absolute w-4 h-4 rounded-full bg-[hsl(0,100%,40%)]"
                          style={{
                            top: "50%",
                            left: "50%",
                            transform: `rotate(${i * 45}deg) translateY(-120px)`,
                          }}
                          initial={{ scale: 0 }}
                          whileInView={{ scale: 1 }}
                          transition={{ delay: i * 0.1 }}
                          viewport={{ once: true }}
                        />
                      ))}
                    </motion.div>
                  </div>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      whileHover={{ scale: 1.05, rotate: 5 }}
                      className="bg-white dark:bg-neutral-800 p-8 rounded-2xl shadow-2xl"
                    >
                      <Image
                        src="/assets/brand-logo.png"
                        alt="TCM Sales"
                        width={150}
                        height={150}
                        className="w-32 h-32 object-contain"
                      />
                    </motion.div>
                  </div>
                </div>
                {/* Floating badge */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  whileHover={{ scale: 1.05, y: -5 }}
                  className="absolute -bottom-6 -right-6 bg-[hsl(0,100%,40%)] text-white px-6 py-4 rounded-2xl shadow-xl"
                >
                  <span className="block text-3xl font-bold">20+</span>
                  <span className="text-sm opacity-90">Years of Excellence</span>
                </motion.div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="section-padding bg-neutral-50 dark:bg-neutral-950">
        <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-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                Our Philosophy
              </span>
            </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">
                Built on{" "}
                <span className="text-[hsl(0,100%,40%)]">Strong Values</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
                Our mission is to glorify God by being faithful stewards,
                serving our employees and families, and making a positive impact.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="grid md:grid-cols-3 gap-8">
            {values.map((value) => (
              <StaggerItem key={value.title}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { y: 0, scale: 1 },
                    hover: { y: -10, scale: 1.02 }
                  }}
                  className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 border border-neutral-100 dark:border-neutral-800"
                >
                  <motion.div
                    variants={{
                      rest: { rotate: 0, scale: 1 },
                      hover: { rotate: 360, scale: 1.1 }
                    }}
                    transition={{ duration: 0.5 }}
                    className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
                  >
                    <value.icon size={24} />
                  </motion.div>
                  <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
                    {value.title}
                  </h3>
                  <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                    {value.description}
                  </p>
                  <motion.div
                    className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
                    variants={{
                      rest: { scaleX: 0 },
                      hover: { scaleX: 1 }
                    }}
                    transition={{ duration: 0.3 }}
                  />
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* Products Section */}
      <section className="section-padding bg-white dark:bg-neutral-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 gap-6">
            <div>
              <FadeIn>
                <span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                  Our Products
                </span>
              </FadeIn>
              <FadeIn delay={0.1}>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white">
                  Everything You{" "}
                  <span className="text-[hsl(0,100%,40%)]">Need</span>
                </h2>
              </FadeIn>
            </div>
            <FadeIn delay={0.2}>
              <AnimatedButton
                href="/products"
                variant="outline"
                icon={<ArrowRightIcon size={18} />}
              >
                View All Products
              </AnimatedButton>
            </FadeIn>
          </div>

          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {productCategories.map((category) => (
              <StaggerItem key={category.title}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { y: 0 },
                    hover: { y: -10 }
                  }}
                  className="group relative bg-neutral-50 dark:bg-neutral-800 p-6 rounded-3xl cursor-pointer overflow-hidden"
                >
                  {/* Gradient overlay on hover */}
                  <motion.div
                    className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
                  />

                  <motion.div
                    variants={{
                      rest: { scale: 1, rotate: 0 },
                      hover: { scale: 1.1, rotate: 5 }
                    }}
                    className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center text-white mb-5`}
                  >
                    <category.icon size={24} />
                  </motion.div>

                  <h3 className="relative text-lg font-bold text-neutral-900 dark:text-white mb-2 group-hover:text-[hsl(0,100%,40%)] transition-colors">
                    {category.title}
                  </h3>
                  <p className="relative text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
                    {category.description}
                  </p>

                  <motion.div
                    variants={{
                      rest: { x: -10, opacity: 0 },
                      hover: { x: 0, opacity: 1 }
                    }}
                    className="absolute bottom-6 right-6"
                  >
                    <ArrowRightIcon
                      size={20}
                      className="text-[hsl(0,100%,40%)]"
                    />
                  </motion.div>
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* Territory Section */}
      <section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white relative overflow-hidden">
        {/* Background map pattern */}
        <div className="absolute inset-0 opacity-5">
          <svg className="w-full h-full" viewBox="0 0 800 600">
            <path
              d="M100 200 Q 200 100 300 200 T 500 200 T 700 200"
              stroke="currentColor"
              strokeWidth="2"
              fill="none"
            />
            <circle cx="150" cy="180" r="8" fill="currentColor" />
            <circle cx="300" cy="200" r="8" fill="currentColor" />
            <circle cx="500" cy="200" r="8" fill="currentColor" />
            <circle cx="650" cy="220" r="8" fill="currentColor" />
          </svg>
        </div>

        <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 lg:gap-20 items-center">
            <div>
              <FadeIn>
                <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
                  <MapPinIcon size={16} />
                  Our Coverage
                </span>
              </FadeIn>
              <FadeIn delay={0.1}>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                  Serving the{" "}
                  <span className="text-[hsl(0,100%,55%)]">Rocky Mountain</span>{" "}
                  & <span className="text-[hsl(0,100%,55%)]">Northwest</span>{" "}
                  Regions
                </h2>
              </FadeIn>
              <FadeIn delay={0.2}>
                <p className="text-lg text-neutral-400 mb-8 leading-relaxed">
                  Our head office is in Denver, Colorado, but our dedicated team
                  works across ten states to provide exceptional service and
                  support.
                </p>
              </FadeIn>

              {/* Territory grid */}
              <FadeIn delay={0.3}>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                  {territories.map((territory, index) => (
                    <motion.div
                      key={territory}
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      transition={{ delay: index * 0.05 }}
                      whileHover={{
                        scale: 1.05,
                        backgroundColor: "hsl(0, 100%, 40%)",
                      }}
                      className="flex items-center gap-2 px-4 py-3 bg-white/5 rounded-xl cursor-default transition-colors"
                    >
                      <CheckIcon size={16} className="text-[hsl(0,100%,55%)]" />
                      <span className="text-sm font-medium">{territory}</span>
                    </motion.div>
                  ))}
                </div>
              </FadeIn>

              <FadeIn delay={0.4}>
                <div className="mt-8">
                  <AnimatedButton
                    href="/contact"
                    icon={<ArrowRightIcon size={18} />}
                  >
                    Contact Us
                  </AnimatedButton>
                </div>
              </FadeIn>
            </div>

            {/* Decorative Map Visual */}
            <FadeIn direction="right" delay={0.2}>
              <div className="relative aspect-square">
                <motion.div
                  className="absolute inset-0 rounded-3xl bg-gradient-to-br from-[hsl(0,100%,40%)]/20 to-transparent"
                  animate={{
                    scale: [1, 1.05, 1],
                  }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                />
                <div className="absolute inset-4 rounded-2xl border border-white/10 flex items-center justify-center">
                  <motion.div
                    animate={{
                      scale: [1, 1.1, 1],
                      opacity: [0.5, 1, 0.5],
                    }}
                    transition={{
                      duration: 2,
                      repeat: Infinity,
                      ease: "easeInOut",
                    }}
                    className="w-32 h-32 rounded-full bg-[hsl(0,100%,40%)]/30 flex items-center justify-center"
                  >
                    <div className="w-20 h-20 rounded-full bg-[hsl(0,100%,40%)]/50 flex items-center justify-center">
                      <MapPinIcon size={32} className="text-white" />
                    </div>
                  </motion.div>
                </div>
                {/* Floating location dots */}
                {[
                  { top: "20%", left: "30%" },
                  { top: "40%", left: "60%" },
                  { top: "60%", left: "25%" },
                  { top: "75%", left: "70%" },
                  { top: "30%", left: "75%" },
                ].map((pos, i) => (
                  <motion.div
                    key={i}
                    className="absolute w-3 h-3 rounded-full bg-[hsl(0,100%,55%)]"
                    style={{ top: pos.top, left: pos.left }}
                    animate={{
                      scale: [1, 1.5, 1],
                      opacity: [0.5, 1, 0.5],
                    }}
                    transition={{
                      duration: 2,
                      repeat: Infinity,
                      ease: "easeInOut",
                      delay: i * 0.3,
                    }}
                  />
                ))}
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Sustainability CTA */}
      <section className="section-padding bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 relative overflow-hidden">
        {/* Background decoration */}
        <motion.div
          className="absolute top-0 right-0 w-96 h-96 bg-emerald-400 rounded-full filter blur-[150px] opacity-20"
          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="max-w-3xl mx-auto text-center">
            <FadeIn>
              <motion.div
                whileHover={{ rotate: 360 }}
                transition={{ duration: 0.5 }}
                className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-emerald-500 text-white mb-6"
              >
                <RecycleIcon 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">
                Committed to{" "}
                <span className="text-emerald-600">Sustainability</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                Go green and find the perfect sustainable product options for
                your business. We offer a comprehensive range of eco-friendly,
                compostable, and recyclable alternatives.
              </p>
            </FadeIn>
            <FadeIn delay={0.3}>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <AnimatedButton
                  href="/sustainability"
                  variant="accent"
                  size="lg"
                  icon={<LeafIcon size={18} />}
                >
                  Explore Green Products
                </AnimatedButton>
                <AnimatedButton
                  href="/state-ordinances"
                  variant="outline"
                  size="lg"
                >
                  State Ordinances
                </AnimatedButton>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <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" 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)" />
          </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">
              Ready to Get Started?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              Let&apos;s talk about your foodservice and janitorial needs. Our team
              is here to help you find the perfect solutions.
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <motion.div
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="inline-block"
            >
              <AnimatedButton
                href="/contact"
                variant="secondary"
                size="lg"
                icon={<ArrowRightIcon size={18} />}
              >
                Contact Us Today
              </AnimatedButton>
            </motion.div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}