"use client"

import React, { useRef } from "react"
import { motion, useInView } from "motion/react"

import { cn } from "@/lib/utils"

interface FooterWrapperProps {
  children: React.ReactNode
}

export function FooterWrapper({ children }: FooterWrapperProps) {
  const containerRef = useRef(null)
  const isInView = useInView(containerRef, { once: true, amount: 0.2 })

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
      },
    },
  }

  return (
    <motion.div
      ref={containerRef}
      className="mx-auto max-w-7xl px-6 pt-12 pb-12 lg:px-8"
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
    >
      {children}
    </motion.div>
  )
}

interface AnimatedMainContentProps {
  children: React.ReactNode
}

export function AnimatedMainContent({ children }: AnimatedMainContentProps) {
  const contentVariants = {
    hidden: { opacity: 0, y: 40 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut",
        staggerChildren: 0.12,
      },
    },
  }

  return (
    <motion.div
      variants={contentVariants}
      className="flex flex-col items-start justify-between gap-12 md:flex-row md:gap-20"
    >
      {children}
    </motion.div>
  )
}

interface AnimatedBrandSectionProps {
  children: React.ReactNode
}

export function AnimatedBrandSection({ children }: AnimatedBrandSectionProps) {
  const brandVariants = {
    hidden: { opacity: 0, x: -40 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut",
        staggerChildren: 0.1,
      },
    },
  }

  return (
    <motion.div
      variants={brandVariants}
      className="flex w-full flex-col items-start space-y-4 md:max-w-64"
    >
      {children}
    </motion.div>
  )
}

interface AnimatedLogoProps {
  className?: string
}

export function AnimatedLogo({ className }: AnimatedLogoProps) {
  const logoVariants = {
    hidden: { opacity: 0, scale: 0.8, rotate: -5 },
    visible: {
      opacity: 1,
      scale: 1,
      rotate: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.a
      href="#home"
      variants={logoVariants}
      whileHover={{
        scale: 1.05,
        rotate: 2,
        transition: { duration: 0.3 },
      }}
      className={cn("flex items-center gap-2", className)}
      aria-label="Navigate to homepage"
    >
      <svg
        width="20"
        height="20"
        viewBox="0 0 190 190"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M102.256 188.162C97.6186 190.613 92.0647 190.613 87.4273 188.162L11.3881 147.988C6.20803 145.251 2.96875 139.885 2.96875 134.04L2.96875 55.9596C2.96875 50.115 6.20804 44.7487 11.3881 42.0119L87.4273 1.83758C92.0647 -0.612537 97.6186 -0.612537 102.256 1.83758L178.295 42.0119C183.475 44.7487 186.715 50.115 186.715 55.9596L186.715 134.04C186.715 139.885 183.475 145.251 178.295 147.988L102.256 188.162ZM17.2566 130.86C17.2566 133.8 18.9004 136.499 21.5152 137.859L86.6791 171.709C89.3137 173.075 92.4666 171.171 92.4666 168.21L92.4666 100.577C92.4666 97.6363 90.8224 94.9374 88.208 93.5771L23.0442 59.727C20.4089 58.3581 17.2566 60.2643 17.2566 63.2268L17.2566 130.86Z"
          fill="currentColor"
        />
      </svg>
    </motion.a>
  )
}

interface AnimatedTextProps {
  children: React.ReactNode
  className?: string
}

export function AnimatedText({ children, className }: AnimatedTextProps) {
  const textVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.div variants={textVariants} className={className}>
      {children}
    </motion.div>
  )
}

interface AnimatedNewsletterFormProps {
  children: React.ReactNode
}

export function AnimatedNewsletterForm({
  children,
}: AnimatedNewsletterFormProps) {
  const formVariants = {
    hidden: { opacity: 0, y: 30, scale: 0.95 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: 0.6,
        ease: "easeOut",
        staggerChildren: 0.1,
      },
    },
  }

  return (
    <motion.form
      variants={formVariants}
      className="text-paragraph relative mt-2 h-full w-full"
      aria-label="Newsletter subscription"
    >
      {children}
    </motion.form>
  )
}

interface AnimatedInputProps {
  placeholder: string
  type: string
  className?: string
}

export function AnimatedInput({
  placeholder,
  type,
  className,
}: AnimatedInputProps) {
  const inputVariants = {
    hidden: { opacity: 0, x: -20 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.input
      variants={inputVariants}
      placeholder={placeholder}
      type={type}
      className={cn(
        "border-input bg-background ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      whileFocus={{
        scale: 1.02,
        transition: { duration: 0.2 },
      }}
      aria-label="Email address for newsletter"
    />
  )
}

interface AnimatedSubmitButtonProps {
  children: React.ReactNode
  className?: string
}

export function AnimatedSubmitButton({
  children,
  className,
}: AnimatedSubmitButtonProps) {
  const buttonVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.button
      variants={buttonVariants}
      type="submit"
      className={cn(
        "ring-offset-background focus-visible:ring-ring !bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center justify-center gap-2 rounded-[5px] text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      whileHover={{
        scale: 1.05,
        transition: { duration: 0.2 },
      }}
      whileTap={{ scale: 0.95 }}
      aria-label="Subscribe to newsletter"
    >
      {children}
    </motion.button>
  )
}

interface AnimatedSocialLinksProps {
  children: React.ReactNode
}

export function AnimatedSocialLinks({ children }: AnimatedSocialLinksProps) {
  const socialVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
        staggerChildren: 0.08,
      },
    },
  }

  return (
    <motion.div
      variants={socialVariants}
      className="flex items-center gap-5 px-2 pt-2"
      role="list"
      aria-label="Social media links"
    >
      {children}
    </motion.div>
  )
}

interface AnimatedSocialIconProps {
  href: string
  children: React.ReactNode
  ariaLabel: string
}

export function AnimatedSocialIcon({
  href,
  children,
  ariaLabel,
}: AnimatedSocialIconProps) {
  const iconVariants = {
    hidden: { opacity: 0, scale: 0.6, rotate: -10 },
    visible: {
      opacity: 1,
      scale: 1,
      rotate: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.a
      href={href}
      variants={iconVariants}
      whileHover={{
        scale: 1.15,
        y: -2,
        transition: { duration: 0.2 },
      }}
      whileTap={{ scale: 0.95 }}
      className="text-muted-foreground hover:text-foreground transition-colors duration-300"
      aria-label={ariaLabel}
      role="listitem"
    >
      {children}
    </motion.a>
  )
}

interface AnimatedLinksGridProps {
  children: React.ReactNode
}

export function AnimatedLinksGrid({ children }: AnimatedLinksGridProps) {
  const gridVariants = {
    hidden: { opacity: 0, x: 40 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut",
        staggerChildren: 0.12,
      },
    },
  }

  return (
    <motion.div
      variants={gridVariants}
      className="grid w-full grid-cols-2 gap-8 md:w-auto lg:grid-cols-4"
    >
      {children}
    </motion.div>
  )
}

interface AnimatedLinkSectionProps {
  children: React.ReactNode
  title: string
}

export function AnimatedLinkSection({
  children,
  title,
}: AnimatedLinkSectionProps) {
  const sectionVariants = {
    hidden: { opacity: 0, y: 25 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
        staggerChildren: 0.06,
      },
    },
  }

  return (
    <motion.nav variants={sectionVariants} aria-label={title}>
      {children}
    </motion.nav>
  )
}

interface AnimatedLinkProps {
  href: string
  children: React.ReactNode
}

export function AnimatedLink({ href, children }: AnimatedLinkProps) {
  const linkVariants = {
    hidden: { opacity: 0, x: -15 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.4,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.li variants={linkVariants}>
      <motion.a
        href={href}
        className="hover:text-foreground text-muted-foreground transition-colors duration-200"
        whileHover={{
          x: 4,
          transition: { duration: 0.2 },
        }}
      >
        {children}
      </motion.a>
    </motion.li>
  )
}

interface AnimatedCopyrightProps {
  children: React.ReactNode
}

export function AnimatedCopyright({ children }: AnimatedCopyrightProps) {
  const copyrightVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
        delay: 0.3,
      },
    },
  }

  return (
    <motion.p
      variants={copyrightVariants}
      className="text-muted-foreground mt-10 text-xs"
    >
      {children}
    </motion.p>
  )
}
Footer 01

Footer 02

Footer 03
