import { HeroAtmosphere } from "@/components/layout/hero-atmosphere";
import { MotionFade } from "@/components/motion-fade";

type PageHeroProps = {
  title: string;
  description?: string;
};

export function PageHero({ title, description }: PageHeroProps) {
  return (
    <section className="relative isolate flex min-h-[42vh] items-end overflow-hidden">
      <HeroAtmosphere compact />
      <div className="relative z-10 mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
        <MotionFade className="max-w-[44rem]">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/48">
            {title}
          </p>
          <h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.95] tracking-[-0.05em] text-foreground sm:text-5xl lg:text-6xl">
            {title}
          </h1>
          {description ? (
            <p className="mt-5 max-w-[36rem] text-sm leading-6 text-foreground/66 sm:text-base">
              {description}
            </p>
          ) : null}
        </MotionFade>
      </div>
    </section>
  );
}