"use client";

import { m } from "framer-motion";
import { Breadcrumb } from "@/components/patterns/Breadcrumb";
import { LinkButton } from "@/components/ui/LinkButton";
import { fadeUp, staggerContainer } from "@/lib/motion";
import type { BreadcrumbItem } from "@/types";

export interface PageHeroProps {
  breadcrumb: BreadcrumbItem[];
  eyebrow: string;
  title: string;
  description: string;
  primaryLabel?: string;
  primaryHref?: string;
  secondaryLabel?: string;
  secondaryHref?: string;
  headingId?: string;
}

/**
 * Shared interior-page hero — every page from Sprint 5 uses this, not a bespoke
 * one-off. Same type-led, no-imagery treatment as the homepage Hero (Sprint 4),
 * scaled down and left-aligned for a working page rather than the landing page.
 */
export function PageHero({
  breadcrumb,
  eyebrow,
  title,
  description,
  primaryLabel,
  primaryHref,
  secondaryLabel,
  secondaryHref,
  headingId = "page-heading",
}: PageHeroProps) {
  return (
    <section aria-labelledby={headingId} className="border-b border-line bg-paper">
      <m.div
        initial="hidden"
        animate="visible"
        variants={staggerContainer}
        className="container flex flex-col gap-6 py-16 md:py-20"
      >
        <m.div variants={fadeUp}>
          <Breadcrumb items={breadcrumb} />
        </m.div>

        <m.p variants={fadeUp} className="font-mono text-caption uppercase tracking-wider text-primary">
          {eyebrow}
        </m.p>

        <m.h1
          id={headingId}
          variants={fadeUp}
          className="max-w-3xl text-balance font-display text-display-md font-normal text-ink"
        >
          {title}
        </m.h1>

        <m.p variants={fadeUp} className="max-w-2xl text-body-lg text-ink-soft">
          {description}
        </m.p>

        {(primaryLabel || secondaryLabel) && (
          <m.div variants={fadeUp} className="mt-2 flex flex-wrap gap-4">
            {primaryLabel && primaryHref && (
              <LinkButton href={primaryHref} variant="primary" size="lg">
                {primaryLabel}
              </LinkButton>
            )}
            {secondaryLabel && secondaryHref && (
              <LinkButton href={secondaryHref} variant="secondary" size="lg">
                {secondaryLabel}
              </LinkButton>
            )}
          </m.div>
        )}
      </m.div>
    </section>
  );
}