import Image from "next/image"
import Link from "next/link"
import Button from "@/components/ui/Button"

export default function AuthoritativeDefenseHeroSection() {
  return (
    <section data-vula-section="authoritativedefensehero" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0">
        <Image
          src="https://images.pexels.com/photos/37726678/pexels-photo-37726678.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Senior partners at a Johannesburg courtroom entrance"
          fill
          sizes="100vw"
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#000080]/80 to-[#000080]/40" />
      </div>
      <div className="relative z-10 container mx-auto px-4 text-center text-white max-w-4xl">
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
          Mashobane &amp; Associates
        </h1>
        <p className="text-xl md:text-2xl font-semibold text-[#d4af37] mb-6">
          32 Years of Fearless Criminal Defense
        </p>
        <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto">
          Defending your rights in Gauteng&#39;s courts with integrity, compassion, and relentless resolve.
        </p>
        <Link href="/services">
          <Button
            variant="default"
            size="lg"
            className="bg-[#d4af37] text-[#000080] hover:bg-[#c5a031] border-none font-bold px-8 py-4 text-lg"
          >
            Schedule a Confidential Consultation
          </Button>
        </Link>
      </div>
    </section>
  )
}