import type { ReactNode } from "react";

export function PageShell({
  eyebrow,
  title,
  lead,
  children,
}: {
  eyebrow?: string;
  title: string;
  lead?: string;
  children?: ReactNode;
}) {
  return (
    <div className="relative">
      <div className="hero-orb" style={{ background: "var(--violet-glow)", width: 400, height: 400, top: -100, right: -100 }} />
      <div className="hero-orb" style={{ background: "var(--nile)", width: 300, height: 300, top: 100, left: -80 }} />
      <div className="relative mx-auto max-w-5xl px-6 pt-16 pb-8">
        {eyebrow && (
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/50 px-3 py-1 text-xs uppercase tracking-widest text-muted-foreground">
            <span className="h-1.5 w-1.5 rounded-full" style={{ background: "var(--sun)" }} />
            {eyebrow}
          </div>
        )}
        <h1 className="font-display text-4xl font-bold leading-tight md:text-5xl">{title}</h1>
        {lead && <p className="mt-4 max-w-2xl text-lg text-muted-foreground">{lead}</p>}
      </div>
      <div className="relative mx-auto max-w-5xl px-6 pb-16">{children}</div>
    </div>
  );
}