"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";
import { AnimatedGradientText } from "@/components/ui/animated-gradient-text";
import { BlurFade } from "@/components/ui/blur-fade";
import { ShimmerButton } from "@/components/ui/shimmer-button";

export function HeroSection() {
  const t = useTranslations("home.hero");

  return (
    <section className="relative min-h-[600px] flex items-center justify-center overflow-hidden bg-gradient-to-br from-background to-muted/20 px-4">
      <div className="w-full max-w-4xl mx-auto flex flex-col items-center justify-center text-center space-y-8">
        <BlurFade delay={0.2}>
          <h1>
            <AnimatedGradientText className="text-5xl md:text-7xl font-bold">
              {t("title")}
            </AnimatedGradientText>
          </h1>
        </BlurFade>

        <BlurFade delay={0.4}>
          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto">
            {t("subtitle")}
          </p>
        </BlurFade>

        <BlurFade delay={0.6}>
          <div className="flex justify-center">
            <Link href="/market">
              <ShimmerButton className="px-8 py-6 text-lg block">
                {t("cta")}
              </ShimmerButton>
            </Link>
          </div>
        </BlurFade>
      </div>
    </section>
  );
}