import type { ReactNode } from "react";
import { UtilityBar } from "./utility-bar";
import { SiteHeader } from "./header";
import { SiteFooter } from "./footer";

export function PageShell({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-dvh flex flex-col bg-background">
      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-primary focus:text-primary-foreground focus:px-4 focus:py-2 focus:rounded">
        Skip to main content
      </a>
      <UtilityBar />
      <SiteHeader />
      <main id="main" className="flex-1">
        {children}
      </main>
      <SiteFooter />
    </div>
  );
}

export function PageHero({
  eyebrow,
  title,
  description,
  breadcrumb,
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  breadcrumb?: { label: string; to?: string }[];
}) {
  return (
    <section className="gradient-hero text-white relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{
        backgroundImage: "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
        backgroundSize: "32px 32px",
      }} />
      <div className="mx-auto max-w-7xl px-4 md:px-8 py-16 md:py-20 relative">
        {breadcrumb && (
          <nav aria-label="Breadcrumb" className="mb-5 text-sm text-white/70 flex flex-wrap gap-1.5">
            {breadcrumb.map((b, i) => (
              <span key={i} className="flex items-center gap-1.5">
                {b.to ? (
                  <a href={b.to} className="hover:text-accent">{b.label}</a>
                ) : (
                  <span className="text-white">{b.label}</span>
                )}
                {i < breadcrumb.length - 1 && <span className="text-white/40">/</span>}
              </span>
            ))}
          </nav>
        )}
        {eyebrow && (
          <div className="text-[11px] uppercase tracking-[0.22em] text-accent font-semibold mb-4">
            {eyebrow}
          </div>
        )}
        <h1 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl leading-[1.05]">
          {title}
        </h1>
        {description && (
          <p className="mt-5 text-lg md:text-xl text-white/80 max-w-3xl leading-relaxed">
            {description}
          </p>
        )}
      </div>
    </section>
  );
}