import { GlassBox } from "@/components/GlassBox";
import { Placeholder } from "@/components/Placeholder";
import { Container } from "@/components/Container";

export function PageHero({
  kicker,
  title,
  image,
}: {
  kicker: string;
  title: string;
  image: string;
}) {
  return (
    <section className="relative h-[42vh] min-h-[280px] overflow-hidden bg-ink">
      <Placeholder src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-black/10" />
      <div className="absolute inset-x-0 bottom-0">
        <Container className="px-4 sm:px-6">
          <GlassBox frostSrc={image} className="relative mb-6 inline-block max-w-lg px-8 py-7">
            <p className="section-kicker">{kicker}</p>
            <h1 className="mt-2 text-3xl font-extrabold sm:text-5xl">{title}</h1>
          </GlassBox>
        </Container>
      </div>
    </section>
  );
}