import type { ReactNode } from "react";
import { Footer } from "@/components/site/footer";
import { Header } from "@/components/site/header";

export function SiteLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-dvh flex-col bg-ink text-fg">
      <Header />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  );
}

export function PageIntro({
  kicker,
  title,
  lede,
}: {
  kicker: string;
  title: string;
  lede: string;
}) {
  return (
    <section className="bg-ink pt-28 pb-14 md:pt-36 md:pb-20">
      <div className="site-wrap">
        <p className="label-kicker reveal">{kicker}</p>
        <h1 className="reveal reveal-delay-1 mt-5 max-w-4xl font-display text-display leading-[1.05] font-medium tracking-display text-fg">
          {title}
        </h1>
        <p className="reveal reveal-delay-2 mt-6 max-w-2xl text-lede leading-snug text-muted">
          {lede}
        </p>
      </div>
    </section>
  );
}
