"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

/**
 * Hero — Centered
 * 마케팅 페이지 상단. Tailwind 톤: 큰 디스플레이 타이포 + serif accent + 그라데이션 blob.
 */
export function HeroCenteredBlock() {
  return (
    <section className="relative overflow-hidden">
      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-32 -left-24 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-indigo-500/20 via-sky-400/15 to-transparent blur-3xl" />
        <div className="absolute top-20 right-0 h-[400px] w-[400px] rounded-full bg-gradient-to-tl from-pink-500/15 via-orange-300/10 to-transparent blur-3xl" />
      </div>

      <div className="mx-auto max-w-3xl text-center px-6 py-24 sm:py-32">
        <Badge variant="secondary" className="mb-7 px-3 py-1 text-xs font-medium">
          <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
          Launching soon
        </Badge>
        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-foreground mb-6 leading-[1.05]">
          Ship faster with{" "}
          <span className="font-serif italic font-normal text-foreground/80">
            beautiful
          </span>{" "}
          UI.
        </h1>
        <p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-10">
          Production-ready React components. Copy, paste, customize.
          Built on Base UI and Tailwind CSS.
        </p>
        <div className="flex items-center justify-center gap-3 flex-wrap">
          <Button size="lg" className="h-11 px-6 text-[15px]">
            Get Started
          </Button>
          <Button size="lg" variant="outline" className="h-11 px-6 text-[15px]">
            View Demo
          </Button>
        </div>
      </div>
    </section>
  );
}