import type { ReactNode } from "react";
import { Breadcrumbs, type Crumb } from "./Breadcrumbs";

export function PageHeader({
  eyebrow,
  title,
  lead,
  crumbs,
  children,
  image = "/corn-cob.png",
}: {
  eyebrow?: string;
  title: string;
  lead?: string;
  crumbs: Crumb[];
  children?: ReactNode;
  image?: string | null;
}) {
  return (
    <>
      <Breadcrumbs items={crumbs} />
      <header className="relative isolate overflow-hidden bg-gradient-field text-primary-foreground">
        <div aria-hidden="true" className="pointer-events-none absolute -right-20 -top-20 size-72 rounded-full bg-white/10 blur-3xl" />
        <div className="container-page flex flex-col md:flex-row md:items-center md:justify-between gap-8 py-12 md:py-16">
          <div className="max-w-2xl lg:max-w-3xl">
            {eyebrow && <p className="eyebrow text-white font-bold tracking-wider">{eyebrow}</p>}
            <h1 className="mt-3 text-3xl font-bold leading-[1.05] sm:text-4xl md:text-5xl">{title}</h1>
            {lead && <p className="mt-4 sm:mt-5 text-base sm:text-lg leading-relaxed text-primary-foreground/90">{lead}</p>}
            {children && <div className="mt-6 sm:mt-7 flex flex-wrap gap-3">{children}</div>}
          </div>
          {image && (
            <div className="shrink-0 flex items-center justify-center md:justify-end self-center md:self-auto">
              <img
                src={image}
                alt="Seed Co Maize Cob Emblem"
                className="h-28 sm:h-36 md:h-44 lg:h-52 w-auto object-contain drop-shadow-xl brightness-100"
              />
            </div>
          )}
        </div>
      </header>
    </>
  );
}

export function Section({
  children,
  className = "",
  muted = false,
  id,
}: {
  children: ReactNode;
  className?: string;
  muted?: boolean;
  id?: string;
}) {
  return (
    <section id={id} className={`${muted ? "bg-secondary/70 border-y border-border/40" : "bg-background"} py-14 md:py-20 ${className}`}>
      <div className="container-page">{children}</div>
    </section>
  );
}

export function SectionHeading({
  eyebrow,
  title,
  lead,
  align = "left",
}: {
  eyebrow?: string;
  title: string;
  lead?: string;
  align?: "left" | "center";
}) {
  return (
    <div className={align === "center" ? "mx-auto max-w-2xl text-center" : "max-w-2xl"}>
      {eyebrow && <p className="eyebrow text-[#FF1B2A]">{eyebrow}</p>}
      <h2 className="mt-2 text-3xl font-bold md:text-4xl">{title}</h2>
      {lead && <p className="mt-4 text-base leading-relaxed text-muted-foreground md:text-lg">{lead}</p>}
    </div>
  );
}