export default function PageHeader({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description?: string;
}) {
  return (
    <header className="mb-10 max-w-2xl animate-fade-up">
      <p className="eyebrow flex items-center gap-3">
        <span className="rule" />
        {eyebrow}
      </p>
      <h1 className="mt-5 font-display text-[2.4rem] leading-tight sm:text-5xl">{title}</h1>
      {description && (
        <p className="mt-5 text-[0.98rem] leading-relaxed text-cocoa-600">{description}</p>
      )}
    </header>
  );
}