import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Rule } from "@/components/motion/Rule";

export interface ServiceLayoutProps {
  className?: string;
  children: ReactNode;
}

/**
 * Light body of a service page: the ink→ivory boundary hairline, then the
 * content sections (`<Section theme="light">` each: Ausgangslage, Bausteine,
 * Rahmen, Ablauf, FAQ …). The dark contact band (`<CtaBand/>`) sits outside,
 * after this wrapper. Paints its own ivory ground; the seam to the ink hero
 * above is the gold hairline alone (spec §2.3) – no fade, no gradient.
 */
export function ServiceLayout({ className, children }: ServiceLayoutProps) {
  return (
    <div data-theme="light" className={cn("relative text-fg", className)}>
      <Rule variant="gold" className="relative z-[1]" />
      {children}
    </div>
  );
}

export default ServiceLayout;