"use client";

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

const stateOrdinances = [
  {
    state: "Colorado",
    flag: "🏔️",
    status: "active",
    effectiveDate: "January 1, 2024",
    summary:
      "Containers made of expanded polystyrene (Styrofoam) are banned for use as takeout containers.",
    details: [
      "Expanded polystyrene (EPS) foam containers prohibited",
      "Applies to takeout and food service containers",
      "Restaurants and food vendors must use alternatives",
    ],
    alternatives: [
      "Paper-based containers",
      "Compostable containers",
      "Recyclable plastic alternatives",
    ],
  },
  {
    state: "Washington",
    flag: "🌲",
    status: "active",
    effectiveDate: "June 1, 2023",
    summary:
      "Statewide ban on polystyrene foam containers and packing peanuts. Seattle has additional restrictions on plastic utensils and straws since 2018.",
    details: [
      "Polystyrene foam containers banned statewide",
      "Packing peanuts made of foam prohibited",
      "Seattle: Plastic utensils and straws banned (since July 2018)",
      "Seattle: Plastic cocktail picks prohibited",
    ],
    alternatives: [
      "Compostable foodservice ware",
      "Paper-based packaging materials",
      "Biodegradable packing materials",
    ],
  },
  {
    state: "Oregon",
    flag: "🦫",
    status: "active",
    effectiveDate: "March 1, 2019",
    summary:
      "Single-use plastic bags and polystyrene foam packaging banned across the state.",
    details: [
      "Single-use plastic bags prohibited",
      "Polystyrene foam packaging banned",
      "Applies to retail and food service establishments",
    ],
    alternatives: [
      "Reusable bags",
      "Paper bags",
      "Compostable packaging options",
    ],
  },
];

const upcomingRegulations = [
  {
    state: "More States",
    description:
      "Several other states in our territory are considering similar legislation. Stay ahead of the curve.",
  },
];

const complianceSteps = [
  {
    step: "01",
    title: "Assessment",
    description:
      "We review your current packaging and identify items affected by regulations.",
  },
  {
    step: "02",
    title: "Alternatives",
    description:
      "We recommend compliant alternatives that meet your operational needs.",
  },
  {
    step: "03",
    title: "Transition",
    description:
      "We help you smoothly transition to new products with minimal disruption.",
  },
  {
    step: "04",
    title: "Support",
    description:
      "Ongoing support to keep you compliant as regulations evolve.",
  },
];

export default function StateOrdinancesPage() {
  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-900 via-neutral-800 to-neutral-900">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-amber-500 rounded-full filter blur-[150px] opacity-15"
            animate={{
              scale: [1, 1.2, 1],
              x: [0, 50, 0],
            }}
            transition={{
              duration: 10,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[180px] opacity-10"
            animate={{
              scale: [1.2, 1, 1.2],
              y: [0, -50, 0],
            }}
            transition={{
              duration: 12,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        {/* Grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          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='%23ffffff' 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")`,
          }}
        />

        <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-amber-500/20 border border-amber-500/30 mb-8"
          >
            <span className="text-lg">📜</span>
            <span className="text-sm font-medium text-amber-200">
              Regulatory Compliance
            </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-white mb-6"
          >
            State Bans &{" "}
            <span className="bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
              Ordinances
            </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-300 mb-10 leading-relaxed"
          >
            We help you stay compliant with ever-changing packaging laws and
            bans. Get the products you need while meeting all regulations.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <AnimatedButton
              href="/contact"
              size="lg"
              icon={<ArrowRightIcon size={18} />}
            >
              Get Compliance Help
            </AnimatedButton>
            <AnimatedButton href="/sustainability" variant="outline" size="lg">
              <span className="text-white">View Green Products</span>
            </AnimatedButton>
          </motion.div>
        </div>
      </section>

      {/* Alert Banner */}
      <section className="bg-amber-500 py-4">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="flex items-center justify-center gap-3 text-center"
          >
            <span className="text-2xl">⚠️</span>
            <p className="text-neutral-900 font-medium">
              Regulations are constantly evolving. Contact us to ensure your
              business stays compliant.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Why It Matters */}
      <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">
            <FadeIn>
              <div>
                <span className="inline-block px-4 py-1.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-sm font-medium mb-6">
                  Why It Matters
                </span>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
                  Stay Ahead of{" "}
                  <span className="text-amber-600">Changing Regulations</span>
                </h2>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
                  Environmental regulations around packaging materials are
                  becoming more common across the United States. Many states in
                  our service territory have implemented bans on certain
                  materials like polystyrene foam and single-use plastics.
                </p>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                  Non-compliance can result in fines and damage to your
                  business reputation. We&apos;re here to help you navigate
                  these changes smoothly.
                </p>

                <div className="flex flex-wrap gap-3">
                  {["Avoid Fines", "Protect Reputation", "Stay Current"].map(
                    (item, i) => (
                      <motion.div
                        key={item}
                        initial={{ opacity: 0, scale: 0.8 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ delay: i * 0.1 }}
                        whileHover={{ scale: 1.05 }}
                        className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 rounded-full"
                      >
                        <CheckIcon
                          size={16}
                          className="text-amber-600 dark:text-amber-400"
                        />
                        <span className="font-medium text-neutral-800 dark:text-neutral-200">
                          {item}
                        </span>
                      </motion.div>
                    )
                  )}
                </div>
              </div>
            </FadeIn>

            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <div className="grid grid-cols-2 gap-4">
                  {[
                    { label: "States with Bans", value: "3+", color: "amber" },
                    { label: "Products Affected", value: "100s", color: "red" },
                    { label: "Years Experience", value: "20+", color: "emerald" },
                    { label: "Alternatives Ready", value: "✓", color: "blue" },
                  ].map((stat, i) => (
                    <motion.div
                      key={stat.label}
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: i * 0.1 }}
                      whileHover={{ y: -5, scale: 1.02 }}
                      className={`p-6 rounded-2xl bg-${stat.color}-50 dark:bg-${stat.color}-900/20 border border-${stat.color}-100 dark:border-${stat.color}-800/50`}
                      style={{
                        backgroundColor:
                          stat.color === "amber"
                            ? "rgb(255 251 235)"
                            : stat.color === "red"
                            ? "rgb(254 242 242)"
                            : stat.color === "emerald"
                            ? "rgb(236 253 245)"
                            : "rgb(239 246 255)",
                      }}
                    >
                      <span className="block text-3xl font-bold text-neutral-900 mb-1">
                        {stat.value}
                      </span>
                      <span className="text-sm text-neutral-600">
                        {stat.label}
                      </span>
                    </motion.div>
                  ))}
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* State Ordinances List */}
      <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">
                Current Regulations
              </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">
                State-by-State{" "}
                <span className="text-[hsl(0,100%,40%)]">Breakdown</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
                Here are the current packaging regulations in our service
                territory. Click each state for details.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="space-y-6">
            {stateOrdinances.map((ordinance) => (
              <StaggerItem key={ordinance.state}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { scale: 1 },
                    hover: { scale: 1.01 }
                  }}
                  className="bg-white dark:bg-neutral-900 rounded-3xl shadow-lg border border-neutral-100 dark:border-neutral-800 overflow-hidden"
                >
                  {/* Header */}
                  <div className="p-6 md:p-8 border-b border-neutral-100 dark:border-neutral-800">
                    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                      <div className="flex items-center gap-4">
                        <motion.span
                          variants={{
                            rest: { scale: 1, rotate: 0 },
                            hover: { scale: 1.2, rotate: 10 }
                          }}
                          className="text-4xl"
                        >
                          {ordinance.flag}
                        </motion.span>
                        <div>
                          <h3 className="text-2xl font-bold text-neutral-900 dark:text-white">
                            {ordinance.state}
                          </h3>
                          <p className="text-sm text-neutral-500">
                            Effective: {ordinance.effectiveDate}
                          </p>
                        </div>
                      </div>
                      <motion.span
                        variants={{
                          rest: { scale: 1 },
                          hover: { scale: 1.05 }
                        }}
                        className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-sm font-medium w-fit"
                      >
                        <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                        Active
                      </motion.span>
                    </div>
                    <p className="mt-4 text-neutral-600 dark:text-neutral-400 leading-relaxed">
                      {ordinance.summary}
                    </p>
                  </div>

                  {/* Details */}
                  <div className="p-6 md:p-8 grid md:grid-cols-2 gap-8">
                    {/* What's Banned */}
                    <div>
                      <h4 className="flex items-center gap-2 text-lg font-semibold text-neutral-900 dark:text-white mb-4">
                        <span className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-600">
                          ✕
                        </span>
                        What&apos;s Restricted
                      </h4>
                      <ul className="space-y-3">
                        {ordinance.details.map((detail, i) => (
                          <motion.li
                            key={i}
                            initial={{ opacity: 0, x: -10 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: i * 0.1 }}
                            className="flex items-start gap-3 text-neutral-600 dark:text-neutral-400"
                          >
                            <span className="w-1.5 h-1.5 rounded-full bg-red-500 mt-2 flex-shrink-0" />
                            {detail}
                          </motion.li>
                        ))}
                      </ul>
                    </div>

                    {/* Alternatives */}
                    <div>
                      <h4 className="flex items-center gap-2 text-lg font-semibold text-neutral-900 dark:text-white mb-4">
                        <span className="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600">
                          <CheckIcon size={16} />
                        </span>
                        Compliant Alternatives
                      </h4>
                      <ul className="space-y-3">
                        {ordinance.alternatives.map((alt, i) => (
                          <motion.li
                            key={i}
                            initial={{ opacity: 0, x: -10 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: i * 0.1 }}
                            whileHover={{ x: 5 }}
                            className="flex items-center gap-3 text-neutral-600 dark:text-neutral-400 cursor-default"
                          >
                            <CheckIcon
                              size={16}
                              className="text-emerald-500 flex-shrink-0"
                            />
                            {alt}
                          </motion.li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>

          {/* More States Coming */}
          <FadeIn delay={0.4}>
            <motion.div
              whileHover={{ scale: 1.01 }}
              className="mt-8 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-8 rounded-3xl border border-amber-200 dark:border-amber-800/50"
            >
              <div className="flex items-start gap-4">
                <motion.span
                  animate={{ rotate: [0, 10, -10, 0] }}
                  transition={{ duration: 2, repeat: Infinity }}
                  className="text-4xl"
                >
                  🔔
                </motion.span>
                <div>
                  <h4 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
                    More Regulations Coming
                  </h4>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    Several other states in our territory are considering
                    similar legislation. Stay ahead of the curve by transitioning
                    to sustainable alternatives now. We&apos;ll keep you informed
                    of any changes that may affect your business.
                  </p>
                </div>
              </div>
            </motion.div>
          </FadeIn>
        </div>
      </section>

      {/* How We Help */}
      <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">
                Our Process
              </span>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                How We Help You{" "}
                <span className="text-[hsl(0,100%,55%)]">Stay Compliant</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-400">
                Our straightforward process ensures a smooth transition to
                compliant products.
              </p>
            </FadeIn>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {complianceSteps.map((item, index) => (
              <FadeIn key={item.step} delay={index * 0.1}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { y: 0 },
                    hover: { y: -10 }
                  }}
                  className="group relative"
                >
                  {/* Connector line */}
                  {index < complianceSteps.length - 1 && (
                    <div className="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gradient-to-r from-[hsl(0,100%,40%)] to-transparent z-0" />
                  )}

                  <div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors h-full">
                    <motion.span
                      variants={{
                        rest: { scale: 1 },
                        hover: { scale: 1.1 }
                      }}
                      className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
                    >
                      {item.step}
                    </motion.span>
                    <h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
                      {item.title}
                    </h3>
                    <p className="text-neutral-400 leading-relaxed">
                      {item.description}
                    </p>
                  </div>
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Sustainability Link */}
      <section className="section-padding bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative overflow-hidden">
        <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">
            <FadeIn>
              <div>
                <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>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                  Explore Sustainable Alternatives
                </h2>
                <p className="text-xl text-white/90 mb-8 leading-relaxed">
                  Discover our full range of eco-friendly, compostable, and
                  recyclable products that keep you compliant and reduce your
                  environmental impact.
                </p>
                <AnimatedButton
                  href="/sustainability"
                  variant="secondary"
                  size="lg"
                  icon={<ArrowRightIcon size={18} />}
                >
                  View Green Products
                </AnimatedButton>
              </div>
            </FadeIn>

            <FadeIn direction="right" delay={0.2}>
              <div className="grid grid-cols-2 gap-4">
                {[
                  "Compostable Containers",
                  "Recyclable Packaging",
                  "Paper Products",
                  "Biodegradable Options",
                ].map((product, i) => (
                  <motion.div
                    key={product}
                    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 border border-white/20 text-center 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 text-sm">{product}</span>
                  </motion.div>
                ))}
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <svg
            className="w-full h-full"
            viewBox="0 0 100 100"
            preserveAspectRatio="none"
          >
            <pattern
              id="grid-ordinances"
              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-ordinances)" />
          </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 Getting Compliant?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              Get in touch and we can help you make any product changes
              necessary to comply with current and upcoming regulations.
            </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 Us Today
              </AnimatedButton>
              <AnimatedButton href="/products" variant="outline" size="lg">
                <span className="text-white">Browse Products</span>
              </AnimatedButton>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}