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

interface InnerBannerProps {
  pageName: string;
}

export default function InnerBanner({ pageName }: InnerBannerProps) {
  return (
    <div className="relative w-full h-[320px] sm:h-[450px] flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="/images/inner-banner.png"
          alt={`${pageName} banner`}
          fill
          priority
          className="object-cover object-[center_-300px]"
        />
      </div>



      {/* Decorative top & bottom gold lines */}
      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#bc9e65]/60 to-transparent z-20" />
      <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#bc9e65]/60 to-transparent z-20" />

      {/* Content */}
      <div className="relative z-20 flex flex-col items-center text-center px-6">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 mb-4">
          <Link
            href="/"
            className="font-sans text-[11px] sm:text-xs tracking-[0.2em] text-[#bc9e65]/80 hover:text-[#bc9e65] uppercase transition-colors duration-200"
          >
            Home
          </Link>
          <span className="text-[#bc9e65]/50 text-xs select-none">›</span>
          <span className="font-sans text-[11px] sm:text-xs tracking-[0.2em] text-[#1a3a25] uppercase">
            {pageName}
          </span>
        </div>

        {/* Page Name */}
        <h1 className="font-serif text-3xl sm:text-4xl lg:text-5xl text-[#1a3a25] tracking-wider leading-tight">
          {pageName}
        </h1>

        {/* Gold divider */}
        <div className="mt-5 w-20 h-[1.5px] bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent" />
      </div>
    </div>
  );
}
