import Image from "next/image";
import Link from "next/link";

export default function Hero({ data }: any) {
  return (
    <section className="relative min-h-screen flex items-center bg-black text-white">
      <Image
        src={data.backgroundImage.sourceUrl}
        alt={data.heading}
        fill
        className="object-cover opacity-40"
        priority
      />

      <div className="relative z-10 max-w-6xl mx-auto px-6">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          {data.heading}
        </h1>

        <p className="text-lg text-gray-300 max-w-xl mb-6">
          {data.subheading}
        </p>

        <Link
          href={data.ctaLink}
          className="inline-block bg-gradient-to-r from-orange-500 to-red-600 px-6 py-3 rounded-lg font-semibold"
        >
          {data.ctaText}
        </Link>
      </div>
    </section>
  );
}