import Image from "next/image";

interface ContactHeroProps {
  title: string;
  subtitle?: string;
  image?: string;
}

export function ContactHero({ title, subtitle, image = "/img/6.png" }: ContactHeroProps) {
  return (
    <section className="relative isolate overflow-hidden bg-[#e9efff]">
      <div className="absolute inset-0">
        <Image
          src={image}
          alt=""
          fill
          priority
          sizes="100vw"
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-[#e6f0ff]/90 via-white/88 to-white" />
      </div>
      <div className="relative mx-auto flex max-w-5xl flex-col items-center px-4 py-20 text-center md:px-6 md:py-24">
        <span className="rounded-full border border-white/60 bg-white/60 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-[#5f7dff] shadow-[0_12px_30px_rgba(87,125,255,0.25)]">
          Partner With Us
        </span>
        <h1 className="mt-6 text-3xl font-semibold tracking-tight text-[#0d1b46] md:text-[40px]">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-4 max-w-2xl text-sm leading-relaxed text-[#51689b] md:text-lg">
            {subtitle}
          </p>
        )}
      </div>
    </section>
  );
}