"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 Hero1Props {
  /** Extra classes forwarded to the outer wrapper. */
  className?: string;
}

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

export function Hero1({ className }: Hero1Props) {
  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">
        <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"
          >
            Now in beta
          </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"
        >
          Build beautiful interfaces at lightning speed
        </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"
        >
          Production-ready UI blocks and templates built with shadcn/ui,
          Tailwind CSS, and Framer Motion. Copy, paste, and ship.
        </motion.p>

        <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"
        >
          <Button size="lg" asChild>
            <a href="/docs">
              Get Started
              <ArrowRight />
            </a>
          </Button>
          <Button variant="outline" size="lg" asChild>
            <a href="/docs/components">View Components</a>
          </Button>
        </motion.div>
      </div>
    </section>
  );
}

export Hero1;