'use client'

import Link from 'next/link'
import { Button } from '@/components/ui/button'

interface HeroProps {
  title?: string
  description?: string
  primaryCTA?: {
    text: string
    href: string
  }
  secondaryCTA?: {
    text: string
    href: string
  }
}

export default function Hero({
  title = 'Host Your Portfolio',
  description = 'Deploy and manage your portfolio websites with custom domains. Simple, fast, and professional hosting for creatives and developers.',
  primaryCTA = {
    text: 'Get Started',
    href: '/register',
  },
  secondaryCTA = {
    text: 'View Example',
    href: '#',
  },
}: HeroProps) {
  return (
    <section className="py-20 md:py-32 bg-gradient-to-br from-purple-50 to-pink-50">
      <div className="container mx-auto px-4 text-center">
        <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
          {title}
        </h1>

        <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
          {description}
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href={primaryCTA.href}>
            <Button size="lg" className="w-full sm:w-auto">
              {primaryCTA.text}
            </Button>
          </Link>

          {secondaryCTA.text && (
            <Link href={secondaryCTA.href}>
              <Button size="lg" variant="outline" className="w-full sm:w-auto">
                {secondaryCTA.text}
              </Button>
            </Link>
          )}
        </div>

        {/* Optional: Decorative elements */}
        <div className="mt-16 pt-16 border-t border-gray-200">
          <p className="text-sm text-muted-foreground">
            Trusted by portfolio creators and developers worldwide
          </p>
        </div>
      </div>
    </section>
  )
}