"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,
  LeafIcon,
  CheckIcon,
  RecycleIcon,
} from "../components/Icons";

const definitions = [
  {
    term: "Biodegradable",
    description:
      "Products that break down naturally within 1 year or less, leaving nothing behind. The FTC states these materials should decompose in a reasonably short period after customary disposal.",
    icon: "🌱",
  },
  {
    term: "Compostable",
    description:
      "Materials that break down into natural elements in a compost environment, typically within 90 days, leaving no toxic residue and creating nutrient-rich soil.",
    icon: "🍃",
  },
  {
    term: "Recyclable",
    description:
      "Products that can be collected, processed, and manufactured into new products, reducing waste and conserving natural resources.",
    icon: "♻️",
  },
];

const greenProducts = [
  "Compostable Dinnerware",
  "Compostable Hinged Containers",
  "Compostable Cutlery",
  "Compostable Cups",
  "Compostable Can Liners",
  "Recyclable PETE Containers",
  "Recyclable PP Containers",
  "PLA Lined Containers",
];

const benefits = [
  {
    title: "Reduce Environmental Impact",
    description:
      "Minimize your carbon footprint and contribute to a healthier planet with eco-friendly alternatives.",
    icon: LeafIcon,
  },
  {
    title: "Meet Regulations",
    description:
      "Stay compliant with evolving state and local environmental regulations and bans on certain materials.",
    icon: CheckIcon,
  },
  {
    title: "Appeal to Customers",
    description:
      "Today's consumers prefer businesses that demonstrate environmental responsibility.",
    icon: RecycleIcon,
  },
];

const stats = [
  { value: "90", unit: "Days", label: "Typical compost breakdown time" },
  { value: "100%", unit: "", label: "Plant-based materials available" },
  { value: "10", unit: "States", label: "With packaging regulations" },
];

export default function SustainabilityPage() {
  return (
    <main className="relative">
      <Navigation />

      {/* Hero Section */}
      <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-emerald-900 via-emerald-800 to-teal-900">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-emerald-400 rounded-full filter blur-[150px] opacity-20"
            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-teal-400 rounded-full filter blur-[180px] opacity-15"
            animate={{
              scale: [1.2, 1, 1.2],
              y: [0, -50, 0],
            }}
            transition={{
              duration: 12,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>

        {/* Floating leaves decoration */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {[...Array(6)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute text-4xl opacity-20"
              style={{
                top: `${15 + i * 15}%`,
                left: `${5 + i * 18}%`,
              }}
              animate={{
                y: [0, -30, 0],
                rotate: [0, 10, -10, 0],
                opacity: [0.1, 0.3, 0.1],
              }}
              transition={{
                duration: 5 + i,
                repeat: Infinity,
                ease: "easeInOut",
                delay: i * 0.5,
              }}
            >
              🍃
            </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-white/10 border border-white/20 mb-8"
          >
            <LeafIcon size={16} className="text-emerald-300" />
            <span className="text-sm font-medium text-white/90">
              Eco-Friendly Solutions
            </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"
          >
            Committed to{" "}
            <span className="bg-gradient-to-r from-emerald-300 to-teal-300 bg-clip-text text-transparent">
              Sustainability
            </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-emerald-100 mb-10 leading-relaxed"
          >
            Go green and find the perfect sustainable product options for your
            business. We help you make environmentally responsible choices
            without compromising on quality.
          </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"
              variant="secondary"
              size="lg"
              icon={<ArrowRightIcon size={18} />}
            >
              Get Started
            </AnimatedButton>
            <AnimatedButton href="/products#green" variant="outline" size="lg">
              <span className="text-white">View Green Products</span>
            </AnimatedButton>
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
          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-white/30 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-emerald-400"
            />
          </motion.div>
        </motion.div>
      </section>

      {/* Stats Section */}
      <section className="relative py-16 bg-emerald-600 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-emerald-700/50 via-transparent to-emerald-700/50" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {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="flex items-baseline justify-center gap-1">
                    <motion.span
                      className="text-5xl sm:text-6xl font-bold text-white"
                      initial={{ opacity: 0, scale: 0.5 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{
                        type: "spring",
                        stiffness: 200,
                        damping: 15,
                        delay: index * 0.1,
                      }}
                    >
                      {stat.value}
                    </motion.span>
                    {stat.unit && (
                      <span className="text-2xl font-medium text-emerald-200">
                        {stat.unit}
                      </span>
                    )}
                  </div>
                  <span className="text-emerald-100 text-sm sm:text-base mt-2 block">
                    {stat.label}
                  </span>
                </motion.div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Understanding Terms 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="text-center mb-16">
            <FadeIn>
              <span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
                Know the Difference
              </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">
                What These Terms{" "}
                <span className="text-emerald-600">Really Mean</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-3xl mx-auto text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
                There are many product claims regarding biodegradable,
                compostable, and recyclable properties. Understanding these
                definitions helps you make informed decisions for your business.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="grid md:grid-cols-3 gap-8">
            {definitions.map((def) => (
              <StaggerItem key={def.term}>
                <motion.div
                  initial="rest"
                  whileHover="hover"
                  animate="rest"
                  variants={{
                    rest: { y: 0, scale: 1 },
                    hover: { y: -10, scale: 1.02 }
                  }}
                  className="group relative bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 p-8 rounded-3xl border border-emerald-100 dark:border-emerald-900/50 h-full"
                >
                  <motion.span
                    className="text-5xl block mb-6"
                    variants={{
                      rest: { scale: 1, rotate: 0 },
                      hover: { scale: 1.2, rotate: 10 }
                    }}
                    transition={{ type: "spring", stiffness: 300 }}
                  >
                    {def.icon}
                  </motion.span>
                  <h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4 group-hover:text-emerald-600 transition-colors">
                    {def.term}
                  </h3>
                  <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                    {def.description}
                  </p>
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>

          {/* Additional context */}
          <FadeIn delay={0.4}>
            <motion.div
              initial="rest"
              whileHover="hover"
              animate="rest"
              variants={{
                rest: { scale: 1 },
                hover: { scale: 1.01 }
              }}
              className="mt-12 bg-neutral-50 dark:bg-neutral-800 p-8 md:p-10 rounded-3xl border border-neutral-200 dark:border-neutral-700"
            >
              <div className="flex items-start gap-4">
                <motion.div
                  variants={{
                    rest: { rotate: 0 },
                    hover: { rotate: 360 }
                  }}
                  transition={{ duration: 0.5 }}
                  className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0"
                >
                  <span className="text-2xl">📋</span>
                </motion.div>
                <div>
                  <h4 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">
                    Industry Standards
                  </h4>
                  <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                    The American Chemistry Council found that most consumers
                    expect biodegradable products to break down naturally within
                    1 year or less, leaving nothing behind. The FTC shares this
                    view, stating materials should decompose &quot;in a reasonably
                    short period of time after customary disposal.&quot; ASTM
                    (American Standards for Testing Materials) provides official
                    definitions and testing standards for these properties.
                  </p>
                </div>
              </div>
            </motion.div>
          </FadeIn>
        </div>
      </section>

      {/* Benefits 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="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <div>
              <FadeIn>
                <span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
                  Why Go Green
                </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">
                  Benefits of{" "}
                  <span className="text-emerald-600">Sustainable</span> Products
                </h2>
              </FadeIn>
              <FadeIn delay={0.2}>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                  Making the switch to eco-friendly products isn&apos;t just good
                  for the environment—it&apos;s good for business too.
                </p>
              </FadeIn>

              <div className="space-y-6">
                {benefits.map((benefit, index) => (
                  <FadeIn key={benefit.title} delay={0.2 + index * 0.1}>
                    <motion.div
                      initial="rest"
                      whileHover="hover"
                      animate="rest"
                      variants={{
                        rest: { x: 0 },
                        hover: { x: 10 }
                      }}
                      className="group flex items-start gap-4"
                    >
                      <motion.div
                        variants={{
                          rest: { scale: 1, rotate: 0 },
                          hover: { scale: 1.1, rotate: 360 }
                        }}
                        transition={{ duration: 0.4 }}
                        className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
                      >
                        <benefit.icon
                          size={24}
                          className="text-emerald-600 group-hover:text-white transition-colors"
                        />
                      </motion.div>
                      <div>
                        <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-1 group-hover:text-emerald-600 transition-colors">
                          {benefit.title}
                        </h3>
                        <p className="text-neutral-600 dark:text-neutral-400">
                          {benefit.description}
                        </p>
                      </div>
                    </motion.div>
                  </FadeIn>
                ))}
              </div>
            </div>

            {/* Visual */}
            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30">
                  {/* Animated circles */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 20,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                      className="absolute w-full h-full"
                    >
                      {[...Array(3)].map((_, i) => (
                        <motion.div
                          key={i}
                          className="absolute w-full h-full rounded-full border-2 border-dashed border-emerald-300 dark:border-emerald-700"
                          style={{
                            transform: `scale(${0.5 + i * 0.2})`,
                          }}
                        />
                      ))}
                    </motion.div>

                    <motion.div
                      whileHover={{ scale: 1.1, rotate: 10 }}
                      className="relative z-10 w-32 h-32 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-2xl"
                    >
                      <LeafIcon size={56} className="text-white" />
                    </motion.div>
                  </div>

                  {/* Floating badges */}
                  {[
                    { label: "Eco-Friendly", top: "15%", left: "10%" },
                    { label: "Compostable", top: "20%", right: "5%" },
                    { label: "Sustainable", bottom: "25%", left: "5%" },
                    { label: "Recyclable", bottom: "15%", right: "10%" },
                  ].map((badge, i) => (
                    <motion.div
                      key={badge.label}
                      className="absolute"
                      style={{
                        top: badge.top,
                        left: badge.left,
                        right: badge.right,
                        bottom: badge.bottom,
                      }}
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{ delay: i * 0.1 }}
                      whileHover={{ scale: 1.1, y: -5 }}
                    >
                      <div className="px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-lg text-sm font-medium text-emerald-700 dark:text-emerald-400">
                        {badge.label}
                      </div>
                    </motion.div>
                  ))}
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Green 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="text-center mb-16">
            <FadeIn>
              <span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
                Our Green Range
              </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">
                Sustainable{" "}
                <span className="text-emerald-600">Product Options</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
                We offer a comprehensive range of eco-friendly alternatives to
                meet your sustainability goals.
              </p>
            </FadeIn>
          </div>

          <FadeIn delay={0.3}>
            <div className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 rounded-3xl p-8 md:p-12">
              <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {greenProducts.map((product, index) => (
                  <motion.div
                    key={product}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.05 }}
                    whileHover="hover"
                    animate="rest"
                    variants={{
                      rest: { scale: 1, y: 0 },
                      hover: { scale: 1.05, y: -5 }
                    }}
                    className="group flex items-center gap-3 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-lg transition-all cursor-default"
                  >
                    <motion.div
                      variants={{
                        rest: { rotate: 0 },
                        hover: { rotate: 360 }
                      }}
                      transition={{ duration: 0.4 }}
                      className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
                    >
                      <LeafIcon
                        size={18}
                        className="text-emerald-600 group-hover:text-white transition-colors"
                      />
                    </motion.div>
                    <span className="font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
                      {product}
                    </span>
                  </motion.div>
                ))}
              </div>

              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="mt-8 text-center"
              >
                <AnimatedButton
                  href="/products#green"
                  variant="accent"
                  icon={<ArrowRightIcon size={18} />}
                >
                  View All Green Products
                </AnimatedButton>
              </motion.div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* State Ordinances CTA */}
      <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="grid lg:grid-cols-2 gap-12 items-center">
            <FadeIn>
              <div>
                <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">
                  <span className="text-lg">📜</span>
                  Stay Compliant
                </span>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                  Know Your{" "}
                  <span className="text-emerald-400">State Regulations</span>
                </h2>
                <p className="text-lg text-neutral-400 mb-8 leading-relaxed">
                  Many states have implemented bans and ordinances on certain
                  packaging materials. We help you navigate these regulations
                  and find compliant alternatives for your business.
                </p>
                <div className="flex flex-wrap gap-3 mb-8">
                  {["Colorado", "Washington", "Oregon"].map((state, i) => (
                    <motion.span
                      key={state}
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{ delay: i * 0.1 }}
                      whileHover={{ scale: 1.05 }}
                      className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium"
                    >
                      {state}
                    </motion.span>
                  ))}
                  <motion.span
                    initial={{ opacity: 0, scale: 0.8 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.3 }}
                    className="px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-full text-sm font-medium"
                  >
                    + More
                  </motion.span>
                </div>
                <AnimatedButton
                  href="/state-ordinances"
                  icon={<ArrowRightIcon size={18} />}
                >
                  View State Ordinances
                </AnimatedButton>
              </div>
            </FadeIn>

            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-3xl p-8 border border-white/10"
                >
                  <div className="space-y-4">
                    {[
                      {
                        state: "Colorado",
                        rule: "Styrofoam takeout containers banned as of Jan 2024",
                      },
                      {
                        state: "Washington",
                        rule: "Foam containers and packing peanuts banned",
                      },
                      {
                        state: "Oregon",
                        rule: "Single-use plastic bags and polystyrene banned",
                      },
                    ].map((item, i) => (
                      <motion.div
                        key={item.state}
                        initial={{ opacity: 0, x: 20 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        transition={{ delay: i * 0.1 }}
                        whileHover={{ x: 5 }}
                        className="flex items-start gap-4 p-4 bg-white/5 rounded-xl"
                      >
                        <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
                          <CheckIcon size={18} className="text-emerald-400" />
                        </div>
                        <div>
                          <h4 className="font-bold text-white">{item.state}</h4>
                          <p className="text-sm text-neutral-400">{item.rule}</p>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </motion.div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <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-4xl mx-auto px-4 sm:px-6 lg:px-8 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-white/20 mb-6"
            >
              <RecycleIcon size={32} />
            </motion.div>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
              Ready to Go Green?
            </h2>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              Our team is here to help you find the perfect sustainable
              solutions for your business. Let&apos;s make a positive impact
              together.
            </p>
          </FadeIn>
          <FadeIn delay={0.3}>
            <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 All Products</span>
              </AnimatedButton>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}