"use client"

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

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

interface CallToActionWrapperProps {
  children: React.ReactNode
}

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

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

  return (
    <motion.div
      ref={containerRef}
      className="bg-primary relative mx-auto w-full max-w-5xl overflow-hidden rounded-3xl"
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
    >
      {children}
    </motion.div>
  )
}

interface CallToActionContentProps {
  children: React.ReactNode
}

export function CallToActionContent({ children }: CallToActionContentProps) {
  const contentVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.div
      variants={contentVariants}
      className="relative z-10 flex flex-col items-center justify-center px-6 py-20 sm:p-12 sm:py-20 md:items-start md:px-14"
    >
      {children}
    </motion.div>
  )
}

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 AnimatedLogoProps {
  className?: string
}

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

  return (
    <motion.a
      href="#home"
      variants={logoVariants}
      whileHover={{
        scale: 1.05,
        transition: { duration: 0.3 },
      }}
      className={cn(
        "text-primary-foreground flex items-center gap-2",
        className
      )}
      aria-label="Navigate to homepage"
    >
      <svg
        width="20"
        height="20"
        viewBox="0 0 190 190"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        fill="currentColor"
      >
        <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 RippleEffectProps extends ComponentPropsWithoutRef<"div"> {
  circleCount?: number
  baseSize?: number
  sizeIncrement?: number
  baseOpacity?: number
  rippleColor?: string
}

export const RippleEffect = React.memo(function Ripple({
  circleCount = 5,
  baseSize = 180,
  sizeIncrement = 150,
  baseOpacity = 0.28,
  className,
  ...props
}: RippleEffectProps) {
  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-0 mask-[linear-gradient(to_bottom,white,transparent)] select-none lg:mask-[linear-gradient(to_right,white,transparent)]",
        className
      )}
      aria-hidden="true"
      {...props}
    >
      {Array.from({ length: circleCount }).map((_, index) => {
        const size = baseSize + index * sizeIncrement
        const opacity = Math.max(0.05, baseOpacity - index * 0.04)
        const delay = index * 0.08

        return (
          <motion.div
            key={index}
            className="after:from-primary-foreground border-primary-foreground absolute top-1/2 left-1/2 rounded-full border after:absolute after:inset-0 after:rounded-[inherit] after:bg-linear-to-r after:to-transparent after:opacity-80"
            style={{
              width: size,
              height: size,
              borderWidth: "1px",
            }}
            initial={{
              scale: 0.95,
              opacity: opacity,
              x: "-50%",
              y: "-50%",
            }}
            animate={{
              scale: [0.95, 1, 0.95],
              opacity: [opacity, opacity * 0.5, opacity],
              x: "-50%",
              y: "-50%",
            }}
            transition={{
              duration: 2.5,
              repeat: Infinity,
              delay,
              ease: "easeInOut",
              times: [0, 0.5, 1],
            }}
            aria-hidden="true"
          />
        )
      })}
    </div>
  )
})

interface AnimatedButtonProps {
  href: string
  children: React.ReactNode
  className?: string
}

export function AnimatedButton({
  href,
  children,
  className,
}: AnimatedButtonProps) {
  const buttonVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.a
      href={href}
      variants={buttonVariants}
      whileHover={{
        scale: 1.02,
        transition: { duration: 0.2 },
      }}
      whileTap={{ scale: 0.98 }}
      className={cn(
        "group/cta-button bg-primary-foreground hover:bg-primary-foreground/90 font-muted mt-8 flex h-10 items-center gap-2 rounded-full pr-8 pl-10 text-sm text-black shadow-none transition-colors duration-300",
        className
      )}
      aria-label="Get started with our platform"
    >
      {children}
    </motion.a>
  )
}
Call To Action 01

Call To Action 02
