import { Link } from "wouter";
import { ChevronRight } from "lucide-react";

interface PageHeroProps {
  title: string;
  subtitle: string;
  bgImage: string;
  breadcrumbs: { label: string; href?: string }[];
}

export default function PageHero({ title, subtitle, bgImage, breadcrumbs }: PageHeroProps) {
  return (
    <section className="relative py-24 lg:py-32 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <img src={bgImage} alt="" className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-r from-navy/95 via-navy/85 to-navy/70" />
      </div>

      <div className="container relative z-10">
        {/* Breadcrumbs */}
        <nav aria-label="Breadcrumb" className="mb-6">
          <ol className="flex items-center gap-1.5 text-sm text-white/60">
            {breadcrumbs.map((crumb, i) => (
              <li key={i} className="flex items-center gap-1.5">
                {i > 0 && <ChevronRight className="w-3.5 h-3.5" />}
                {crumb.href ? (
                  <Link href={crumb.href} className="hover:text-teal transition-colors">
                    {crumb.label}
                  </Link>
                ) : (
                  <span className="text-teal">{crumb.label}</span>
                )}
              </li>
            ))}
          </ol>
        </nav>

        <h1 className="font-heading font-bold text-3xl lg:text-5xl text-white leading-tight mb-4 max-w-3xl">
          {title}
        </h1>
        <p className="text-lg lg:text-xl text-white/70 leading-relaxed max-w-2xl">
          {subtitle}
        </p>
      </div>
    </section>
  );
}
