import { Container } from "./Container";

export function PageHeader({ eyebrow, title, lede }: { eyebrow?: string; title: string; lede?: string }) {
  return (
    <section className="bg-white pt-10 pb-10 md:pt-14 md:pb-12">
      <Container>
        {eyebrow && (
          <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            {eyebrow}
          </div>
        )}
        <h1 className="mt-3 font-display text-[40px] md:text-[56px] font-extrabold leading-[1.05] tracking-[-0.025em] text-[var(--color-ink)]">
          {title}
        </h1>
        {lede && (
          <p className="mt-6 max-w-3xl text-[18px] md:text-[20px] leading-relaxed text-[var(--color-slate)]">
            {lede}
          </p>
        )}
      </Container>
    </section>
  );
}
