import type { ReactNode } from "react";
import { Breadcrumbs, type Crumb } from "@/components/Breadcrumbs";
import { OrganicBlob } from "@/components/OrganicBlob";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo/jsonld";
import { getSiteUrl } from "@/lib/seo/config";

type PageHeaderProps = {
  eyebrow?: string;
  title: string;
  lead?: ReactNode;
  crumbs?: Crumb[];
};

/** Renders the visual breadcrumb trail AND its matching BreadcrumbList JSON-LD from the same `crumbs` — every page that already passes `crumbs` gets structured breadcrumb data for free. */
export async function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderProps) {
  const breadcrumbData = crumbs?.length
    ? await (async () => {
        const siteUrl = await getSiteUrl();
        const items = [
          { name: "Startseite", url: siteUrl },
          ...crumbs.map((crumb) => ({ name: crumb.title, url: crumb.href ? `${siteUrl}${crumb.href}` : undefined })),
        ];
        return breadcrumbJsonLd(items);
      })()
    : null;

  return (
    <section className="relative overflow-hidden border-b border-anouma-taupe/10 bg-anouma-cream-light pb-16 pt-14 sm:pb-20 sm:pt-20">
      <OrganicBlob tone="rose" className="-right-20 -top-20 h-72 w-72" />
      <div className="relative mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
        {breadcrumbData && <JsonLd data={breadcrumbData} />}
        {crumbs && <Breadcrumbs items={crumbs} />}
        {eyebrow && (
          <p className="mb-4 text-xs font-medium uppercase tracking-[0.24em] text-anouma-plum">
            {eyebrow}
          </p>
        )}
        <h1 className="max-w-3xl text-balance font-serif text-4xl font-medium leading-tight text-anouma-plum sm:text-5xl lg:text-6xl">
          {title}
        </h1>
        {lead && (
          <div className="mt-5 max-w-2xl text-lg leading-relaxed text-anouma-plum">{lead}</div>
        )}
      </div>
    </section>
  );
}