import { type ReactNode } from "react";
import { PageHero, CTA } from "@/components/page-shell";
import { SubPageSidebar } from "@/components/sub-page-sidebar";

interface SubPageLayoutProps {
  eyebrow: string;
  title: string;
  lede?: string;
  children: ReactNode;
}

export function SubPageLayout({ eyebrow, title, lede, children }: SubPageLayoutProps) {
  return (
    <>
      <PageHero eyebrow={eyebrow} title={title} lede={lede} />
      <div className="container-page py-8 md:py-12">
        <div className="grid grid-cols-1 md:grid-cols-[1fr_280px] gap-8 items-start">
          <div className="min-w-0">{children}</div>
          <div className="sticky top-24">
            <SubPageSidebar />
          </div>
        </div>
      </div>
      <CTA />
    </>
  );
}
