"use client";

import { motion } from "framer-motion";

import { ANIMATION_EASE } from "@/lib/config";

import { AuroraText } from "@/components/aurora-text";
import { Section } from "@/components/section";
import { cn } from "@/lib/utils";

export function Heading() {
  return (
    <section id="heading">
      <div className="layout py-6 relative w-full  border-x overflow-hidden">
        <motion.h1
          className={cn(
            "text-center text-4xl font-semibold leading-tighter text-foreground sm:text-5xl md:text-6xl tracking-tighter"
          )}
          initial={{ filter: "blur(10px)", opacity: 0, y: 50 }}
          animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
          transition={{
            duration: 1,
            ease: ANIMATION_EASE,
          }}
        >
          <AuroraText className="leading-normal">Explore Agents</AuroraText>
        </motion.h1>
      </div>
    </section>
  );
}
