"use client";

import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { type Transition, motion } from "motion/react";

export interface HeroSectionProps {
  /** Small label rendered above the heading. */
  badge?: string;
  /** Primary heading text. */
  title: string;
  /** Supporting paragraph rendered below the heading. */
  description: string;
  /** Primary CTA button config. */
  primaryAction?: { label: string; href: string };
  /** Secondary CTA button config. */
  secondaryAction?: { label: string; href: string };
  /** Extra classes forwarded to the outer wrapper. */
  className?: string;
}

const stagger: Transition = {
  type: "spring",
  stiffness: 260,
  damping: 24
};

function HeroSection({
  badge,
  title,
  description,
  primaryAction,
  secondaryAction,
  className
}: HeroSectionProps) {
  return (
    <section
      data-slot="hero-section"
      className={cn(
        "relative flex min-h-[70vh] w-full items-center justify-center overflow-hidden px-6 py-24 md:py-32",
        className
      )}
    >
      <div className="absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--primary)/8%,transparent_70%)]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)/30%_1px,transparent_1px),linear-gradient(to_bottom,var(--border)/30%_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_70%)]" />
      </div>

      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
        {badge && (
          <motion.div
            initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            transition={{ ...stagger, delay: 0 }}
          >
            <Badge
              variant="outline"
              className="mb-6 px-3 py-1 text-sm font-medium"
            >
              {badge}
            </Badge>
          </motion.div>
        )}

        <motion.h1
          initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          transition={{ ...stagger, delay: 0.1 }}
          className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl"
        >
          {title}
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          transition={{ ...stagger, delay: 0.2 }}
          className="mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl"
        >
          {description}
        </motion.p>

        {(primaryAction || secondaryAction) && (
          <motion.div
            initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            transition={{ ...stagger, delay: 0.3 }}
            className="mt-10 flex flex-col gap-4 sm:flex-row"
          >
            {primaryAction && (
              <Button size="lg" asChild>
                <a href={primaryAction.href}>
                  {primaryAction.label}
                  <ArrowRight />
                </a>
              </Button>
            )}
            {secondaryAction && (
              <Button variant="outline" size="lg" asChild>
                <a href={secondaryAction.href}>{secondaryAction.label}</a>
              </Button>
            )}
          </motion.div>
        )}
      </div>
    </section>
  );
}

export HeroSection;
export { HeroSection };
Build beautiful interfaces at lightning speed
