"use client";

import React from "react";
import { motion } from "framer-motion";
import { cn } from "@/app/lib/utils";
import { AnimatedBadge } from "./animated-badge";

interface HeroSectionProps {
  title: string;
  subtitle?: string;
  description?: string;
  children?: React.ReactNode;
  className?: string;
  variant?: "default" | "gradient" | "minimal";
}

export function HeroSection({
  title,
  subtitle,
  description,
  children,
  className,
  variant = "default",
}: HeroSectionProps) {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  };

  const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0 },
  };

  return (
    <section
      className={cn(
        "relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-20",
        className
      )}
    >
      {variant === "gradient" && (
        <>
          <div className="absolute inset-0 bg-gradient-to-br from-accent/20 via-background to-secondary/20" />
          <div className="absolute left-1/4 top-1/4 h-[500px] w-[500px] animate-blob rounded-full bg-accent/30 blur-3xl" />
          <div className="absolute bottom-1/4 right-1/4 h-[500px] w-[500px] animate-blob animation-delay-2000 rounded-full bg-secondary/30 blur-3xl" />
          <div className="absolute left-1/2 top-1/2 h-[500px] w-[500px] animate-blob animation-delay-4000 rounded-full bg-accent/20 blur-3xl" />
        </>
      )}

      {variant === "default" && (
        <div className="absolute inset-0">
          <div className="absolute inset-0 bg-[linear-gradient(to_right,#26262620_1px,transparent_1px),linear-gradient(to_bottom,#26262620_1px,transparent_1px)] bg-[size:4rem_4rem]" />
          <div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-background" />
        </div>
      )}

      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="relative z-10 mx-auto max-w-5xl text-center"
      >
        {subtitle && (
          <motion.div variants={item}>
            <AnimatedBadge>{subtitle}</AnimatedBadge>
          </motion.div>
        )}

        <motion.h1
          variants={item}
          className={cn(
            "bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-transparent",
            "mt-8 text-5xl font-bold tracking-tight leading-tight sm:text-6xl sm:leading-tight lg:text-7xl lg:leading-tight"
          )}
        >
          {title.split(" ").map((word, index) => (
            <motion.span
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="inline-block mr-3"
            >
              {word}
            </motion.span>
          ))}
        </motion.h1>

        {description && (
          <motion.p
            variants={item}
            className="mx-auto mt-8 max-w-2xl text-xl text-foreground/70 leading-relaxed"
          >
            {description}
          </motion.p>
        )}

        {children && (
          <motion.div
            variants={item}
            className="mt-10 flex justify-center gap-4"
          >
            {children}
          </motion.div>
        )}
      </motion.div>
    </section>
  );
}