import Image from "next/image"
import Link from "next/link"
import { Button } from "../ui/button"
import { useTranslations } from 'next-intl'

export default function HomeHeader() {
  const t = useTranslations()
  return (
    <header className="sticky top-0 z-50 bg-white shadow-[0_2px_20px_0_rgba(137,137,137,0.25)]">
      <div className="container mx-auto px-4 sm:px-6 lg:px-20">
        <div className="flex items-center justify-between h-20">
          <Link href="/" className="flex items-center">
            <Image src="/aivly-logo.svg" alt="Company Logo" width={120} height={40} priority />
          </Link>

          <nav className="hidden lg:flex items-center gap-8">
            <a href="#features" className="text-base text-[rgba(10,10,10,0.8)] hover:text-[#1A315F] transition-colors">
              {t('navigation.features')}
            </a>
            <a href="#pricing" className="text-base text-[rgba(10,10,10,0.8)] hover:text-[#1A315F] transition-colors">
              {t('navigation.pricing')}
            </a>
            <a href="#about" className="text-base text-[rgba(10,10,10,0.8)] hover:text-[#1A315F] transition-colors">
              {t('navigation.about')}
            </a>
            <a href="#contact" className="text-base text-[rgba(10,10,10,0.8)] hover:text-[#1A315F] transition-colors">
              {t('navigation.contact')}
            </a>
          </nav>

          <div className="flex items-center gap-3">
            <Link href="/sign-in">
              <Button className="px-6 py-2.5 rounded-lg bg-white border border-[#1A315F] text-[#1A315F] font-medium hover:bg-[#1A315F] hover:text-white transition-colors">
                {t('auth.signIn')}
              </Button>
            </Link>

            <Link href="/sign-up">
              <Button className="px-6 py-2.5 rounded-lg bg-primary-gradient text-white font-medium hover:opacity-90 transition-opacity">
                {t('auth.signUp')}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </header>
  )
}
