export default function PageHeader({
  title,
  subtitle,
  backgroundImage = "/images/page-header-bg.jpg",
}: {
  title: string;
  subtitle: string;
  backgroundImage?: string;
}) {
  return (
    <section
      className="relative flex h-56 items-center justify-center overflow-hidden bg-[#faf8f5] bg-cover bg-center sm:h-64"
      style={{ backgroundImage: `url('${backgroundImage}')` }}
    >
      <div className="absolute inset-0 bg-white/40" />
      <div className="relative z-10 text-center">
        <h1 className="text-3xl font-bold text-neutral-700 sm:text-4xl">{title}</h1>
        <p
          className="mt-2 text-xs tracking-[0.3em] text-neutral-400"
          style={{ fontFamily: "var(--font-montserrat)" }}
        >
          {subtitle}
        </p>
      </div>
    </section>
  );
}