import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Sparkles, ArrowRight } from "lucide-react";
import { homepage } from "@/marketing/content/homepage";

export function Hero() {
  return (
    <section className="w-full">
      <div className="container mx-auto px-6">
        <div className="flex flex-col items-center gap-6 pb-16 pt-16 md:py-24 lg:py-32">
          <div className="flex max-w-[980px] flex-col items-center gap-6 text-center">
        {/* Main title */}
        <h1 className="font-serif text-3xl font-bold leading-tight tracking-tight md:text-5xl md:font-semibold lg:text-6xl lg:leading-[1.1]">
          {homepage.hero.title}
        </h1>
        
        {/* Subtitle */}
        <p className="max-w-[750px] text-lg text-muted-foreground sm:text-xl md:text-2xl">
          {homepage.hero.subtitle}
        </p>
        
        {/* CTAs */}
        <div className="flex flex-col sm:flex-row gap-4 mt-4">
          <Link href="/auth">
            <Button size="lg" className="h-12 px-8 text-base">
              <Sparkles className="mr-2 h-5 w-5" />
              {homepage.hero.cta.primary}
            </Button>
          </Link>
          <Link href="#how-it-works">
            <Button variant="outline" size="lg" className="h-12 px-8 text-base">
              {homepage.hero.cta.secondary}
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </Link>
        </div>
          </div>
        </div>
      </div>
    </section>
  );
}