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

interface InnerBannerProps {
  pageName: string;
  bgImage?: string;
}

export default function InnerBanner({ pageName, bgImage = "/images/inner-banner.png" }: 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={bgImage}
          alt={`${pageName} banner`}
          fill
          priority
          className="object-cover object-center"
        />
      </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.5 mb-4">
          <Link
            href="/"
            className="font-sans text-xs sm:text-sm tracking-[0.2em] text-[#bc9e65] font-semibold hover:text-white uppercase transition-colors duration-200"
          >
            Home
          </Link>
          {/* Heart separator */}
          <svg className="w-3.5 h-3.5 text-[#bc9e65] flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
          <span className="font-sans text-xs sm:text-sm tracking-[0.2em] text-[#2d7a4f] font-semibold 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>
  );
}
