"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import AnimatedButton from "../components/AnimatedButton";
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
import {
  ArrowRightIcon,
  UsersIcon,
  TargetIcon,
  CheckIcon,
  TruckIcon,
  SparklesIcon,
  PackageIcon,
  BuildingIcon,
} from "../components/Icons";

const distributorServices = [
  {
    icon: PackageIcon,
    title: "Product Samples",
    description:
      "We provide comprehensive product samples to help your sales team demonstrate value to customers.",
  },
  {
    icon: SparklesIcon,
    title: "Point of Sale Materials",
    description:
      "Custom-designed marketing materials that simplify the selling process for your team.",
  },
  {
    icon: UsersIcon,
    title: "Product Training",
    description:
      "In-depth product knowledge sessions to make your sales force confident and effective.",
  },
  {
    icon: BuildingIcon,
    title: "Marketing Support",
    description:
      "Our in-house graphics team develops customized sales pieces tailored to your needs.",
  },
];

const operatorBenefits = [
  "Comprehensive packaging consultation",
  "Operations review and optimization",
  "Best-fit product recommendations",
  "Cost-effective solutions",
  "Sustainability options guidance",
  "Ongoing support and service",
];

const processSteps = [
  {
    step: "01",
    title: "Discovery",
    description:
      "We begin by understanding your unique business needs, current challenges, and growth objectives.",
  },
  {
    step: "02",
    title: "Analysis",
    description:
      "Our team reviews your operations and identifies opportunities for improvement and cost savings.",
  },
  {
    step: "03",
    title: "Solutions",
    description:
      "We recommend the best products and strategies tailored to your specific requirements.",
  },
  {
    step: "04",
    title: "Partnership",
    description:
      "We maintain ongoing support, ensuring your continued success and adapting to your evolving needs.",
  },
];

export default function WhatWeDoPage() {
  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-neutral-900 via-neutral-900 to-neutral-800">
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden">
          <motion.div
            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] 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-[hsl(0,100%,50%)] 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-white/10 border border-white/10 mb-8"
          >
            <TargetIcon size={16} className="text-[hsl(0,100%,60%)]" />
            <span className="text-sm font-medium text-white/80">
              Our Approach
            </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"
          >
            What We{" "}
            <span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(0,100%,65%)] bg-clip-text text-transparent">
              Do
            </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 leading-relaxed"
          >
            We bridge the gap between manufacturers and end-users through
            strategic partnerships, innovative solutions, and dedicated support.
          </motion.p>
        </div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
          className="absolute bottom-8 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-[hsl(0,100%,50%)]"
            />
          </motion.div>
        </motion.div>
      </section>

      {/* Pull-Through Selling 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">
            <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 Strategy
                </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">
                  The Power of{" "}
                  <span className="text-[hsl(0,100%,40%)]">
                    Pull-Through Selling
                  </span>
                </h2>
              </FadeIn>
              <FadeIn delay={0.2}>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
                  We focus on key operators and use a pull-through selling
                  approach, working closely with our distribution partners to
                  grow sales organically and sustainably.
                </p>
              </FadeIn>
              <FadeIn delay={0.3}>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                  By establishing strong relationships with end-users, we create
                  demand that naturally flows through the distribution channel,
                  benefiting everyone in the supply chain.
                </p>
              </FadeIn>
              <FadeIn delay={0.4}>
                <div className="flex flex-wrap gap-4">
                  <AnimatedButton
                    href="/contact"
                    icon={<ArrowRightIcon size={18} />}
                  >
                    Partner With Us
                  </AnimatedButton>
                  <AnimatedButton href="/products" variant="outline">
                    View Products
                  </AnimatedButton>
                </div>
              </FadeIn>
            </div>

            {/* Visual */}
            <FadeIn direction="right" delay={0.2}>
              <div className="relative">
                <div className="relative aspect-square">
                  {/* Animated flow diagram */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    {/* Outer ring */}
                    <motion.div
                      className="absolute w-full h-full rounded-full border-2 border-dashed border-neutral-200 dark:border-neutral-700"
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 30,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                    />
                    {/* Middle ring */}
                    <motion.div
                      className="absolute w-3/4 h-3/4 rounded-full border-2 border-dashed border-[hsl(0,100%,40%)]/30"
                      animate={{ rotate: -360 }}
                      transition={{
                        duration: 20,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                    />
                    {/* Inner ring */}
                    <motion.div
                      className="absolute w-1/2 h-1/2 rounded-full border-2 border-[hsl(0,100%,40%)]/50"
                      animate={{ rotate: 360 }}
                      transition={{
                        duration: 15,
                        repeat: Infinity,
                        ease: "linear",
                      }}
                    />

                    {/* Center logo */}
                    <motion.div
                      whileHover={{ scale: 1.1, rotate: 10 }}
                      className="relative z-10 bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-2xl"
                    >
                      <Image
                        src="/assets/brand-logo.png"
                        alt="TCM Sales"
                        width={80}
                        height={80}
                        className="w-20 h-20 object-contain"
                      />
                    </motion.div>

                    {/* Orbiting elements */}
                    {[
                      { icon: TruckIcon, label: "Distribution", angle: 0 },
                      { icon: UsersIcon, label: "Operators", angle: 120 },
                      { icon: PackageIcon, label: "Products", angle: 240 },
                    ].map((item, i) => (
                      <motion.div
                        key={item.label}
                        className="absolute"
                        style={{
                          top: "50%",
                          left: "50%",
                        }}
                        animate={{
                          rotate: [item.angle, item.angle + 360],
                        }}
                        transition={{
                          duration: 30,
                          repeat: Infinity,
                          ease: "linear",
                        }}
                      >
                        <motion.div
                          className="relative -translate-x-1/2 -translate-y-1/2"
                          style={{
                            transform: `translateY(-140px)`,
                          }}
                          whileHover={{ scale: 1.2 }}
                        >
                          <motion.div
                            animate={{ rotate: [-item.angle, -(item.angle + 360)] }}
                            transition={{
                              duration: 30,
                              repeat: Infinity,
                              ease: "linear",
                            }}
                            className="bg-white dark:bg-neutral-800 p-3 rounded-xl shadow-lg border border-neutral-100 dark:border-neutral-700"
                          >
                            <item.icon
                              size={24}
                              className="text-[hsl(0,100%,40%)]"
                            />
                          </motion.div>
                        </motion.div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Distribution Partners 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-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                <TruckIcon size={16} />
                Distribution Partners
              </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">
                Supporting Your{" "}
                <span className="text-[hsl(0,100%,40%)]">Sales Success</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">
                We work closely with our distribution partners to provide the
                tools, training, and materials needed to succeed in today&apos;s
                ever-changing foodservice industry.
              </p>
            </FadeIn>
          </div>

          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {distributorServices.map((service) => (
              <StaggerItem key={service.title}>
                <motion.div
                  whileHover={{ 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 h-full border border-neutral-100 dark:border-neutral-800"
                >
                  <motion.div
                    whileHover={{ 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"
                  >
                    <service.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">
                    {service.title}
                  </h3>
                  <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                    {service.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"
                    initial={{ scaleX: 0 }}
                    whileHover={{ scaleX: 1 }}
                    transition={{ duration: 0.3 }}
                  />
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>

          {/* Additional info */}
          <FadeIn delay={0.4}>
            <motion.div
              whileHover={{ scale: 1.01 }}
              className="mt-12 bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-800 dark:to-neutral-900 p-8 md:p-12 rounded-3xl text-white"
            >
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <div>
                  <h3 className="text-2xl font-bold mb-4">
                    In-House Marketing Team
                  </h3>
                  <p className="text-neutral-300 leading-relaxed">
                    Our dedicated graphics and marketing team develops customized
                    sales pieces specific to your needs. We work with district
                    sales managers and marketing specialists to create tools that
                    simplify the selling process.
                  </p>
                </div>
                <div className="flex justify-center md:justify-end">
                  <motion.div
                    whileHover={{ rotate: 5, scale: 1.05 }}
                    className="relative"
                  >
                    <div className="absolute inset-0 bg-[hsl(0,100%,40%)] rounded-2xl blur-xl opacity-30" />
                    <div className="relative bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] p-8 rounded-2xl">
                      <SparklesIcon size={64} className="text-white" />
                    </div>
                  </motion.div>
                </div>
              </div>
            </motion.div>
          </FadeIn>
        </div>
      </section>

      {/* Key Operators 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">
            {/* Benefits List */}
            <FadeIn>
              <div className="order-2 lg:order-1">
                <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
                  <TargetIcon size={16} />
                  Key Operators
                </span>
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
                  Tailored Solutions for{" "}
                  <span className="text-[hsl(0,100%,40%)]">Your Operations</span>
                </h2>
                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
                  We offer comprehensive consultation of your packaging and
                  disposable needs. Our team reviews your operations to help you
                  find the best products for your specific applications.
                </p>

                <div className="space-y-4">
                  {operatorBenefits.map((benefit, index) => (
                    <motion.div
                      key={benefit}
                      initial={{ opacity: 0, x: -20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      viewport={{ once: true }}
                      transition={{ delay: index * 0.1 }}
                      whileHover={{ x: 10 }}
                      className="flex items-center gap-4 group cursor-default"
                    >
                      <motion.div
                        whileHover={{ scale: 1.2, rotate: 360 }}
                        transition={{ duration: 0.3 }}
                        className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                      >
                        <CheckIcon
                          size={16}
                          className="text-[hsl(0,100%,40%)] group-hover:text-white transition-colors"
                        />
                      </motion.div>
                      <span className="text-neutral-700 dark:text-neutral-300 font-medium group-hover:text-[hsl(0,100%,40%)] transition-colors">
                        {benefit}
                      </span>
                    </motion.div>
                  ))}
                </div>

                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.5 }}
                  className="mt-8"
                >
                  <AnimatedButton
                    href="/contact"
                    icon={<ArrowRightIcon size={18} />}
                  >
                    Schedule a Consultation
                  </AnimatedButton>
                </motion.div>
              </div>
            </FadeIn>

            {/* Visual */}
            <FadeIn direction="right" delay={0.2}>
              <div className="order-1 lg:order-2 relative">
                <div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-[hsl(0,100%,40%)]/5 to-[hsl(0,100%,40%)]/10 dark:from-[hsl(0,100%,40%)]/10 dark:to-[hsl(0,100%,40%)]/5">
                  {/* Decorative elements */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      animate={{ scale: [1, 1.1, 1] }}
                      transition={{
                        duration: 4,
                        repeat: Infinity,
                        ease: "easeInOut",
                      }}
                      className="w-64 h-64 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
                    >
                      <motion.div
                        animate={{ scale: [1.1, 1, 1.1] }}
                        transition={{
                          duration: 4,
                          repeat: Infinity,
                          ease: "easeInOut",
                        }}
                        className="w-48 h-48 rounded-full bg-[hsl(0,100%,40%)]/15 flex items-center justify-center"
                      >
                        <motion.div
                          whileHover={{ rotate: 360 }}
                          transition={{ duration: 0.5 }}
                          className="w-32 h-32 rounded-full bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center shadow-xl"
                        >
                          <TargetIcon size={48} className="text-white" />
                        </motion.div>
                      </motion.div>
                    </motion.div>
                  </div>

                  {/* Floating cards */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    whileHover={{ scale: 1.05, rotate: 2 }}
                    className="absolute top-8 right-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
                  >
                    <p className="text-sm font-medium text-neutral-900 dark:text-white">
                      Custom Solutions
                    </p>
                    <p className="text-xs text-neutral-500">
                      Tailored to your needs
                    </p>
                  </motion.div>

                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.2 }}
                    whileHover={{ scale: 1.05, rotate: -2 }}
                    className="absolute bottom-8 left-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
                  >
                    <p className="text-sm font-medium text-neutral-900 dark:text-white">
                      Expert Guidance
                    </p>
                    <p className="text-xs text-neutral-500">
                      Industry professionals
                    </p>
                  </motion.div>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Process 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">
                Our Process
              </span>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
                How We{" "}
                <span className="text-[hsl(0,100%,55%)]">Work With You</span>
              </h2>
            </FadeIn>
            <FadeIn delay={0.2}>
              <p className="max-w-2xl mx-auto text-lg text-neutral-400">
                A proven approach to building successful, long-term partnerships.
              </p>
            </FadeIn>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {processSteps.map((item, index) => (
              <FadeIn key={item.step} delay={index * 0.1}>
                <motion.div
                  whileHover={{ y: -10 }}
                  className="group relative"
                >
                  {/* Connector line */}
                  {index < processSteps.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">
                    <motion.span
                      whileHover={{ 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>

      {/* 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-cta"
              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-cta)" />
          </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 Grow Together?
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-xl text-white/90 mb-10 leading-relaxed">
              Whether you&apos;re a distributor looking for support or an operator
              seeking the right solutions, we&apos;re here to help.
            </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 border-white hover:bg-white/10">
                  Explore Products
                </span>
              </AnimatedButton>
            </div>
          </FadeIn>
        </div>
      </section>

      <Footer />
    </main>
  );
}