import { cn } from "@/lib/utils";
import { Eyebrow } from "./Eyebrow";
import { Reveal } from "./Reveal";

/**
 * Centered section intro — the original's signature: a quiet "/ LABEL" mono
 * kicker over a large heading, centered, used on only a few key sections (fit,
 * eyetracking, press). Not a per-section eyebrow; reach for it deliberately.
 */
export function SectionKicker({
  kicker,
  children,
  className,
  headingClassName,
}: {
  kicker: string;
  /** The heading. Supports inline <span className="text-brand"> for the two-tone treatment. */
  children: React.ReactNode;
  className?: string;
  headingClassName?: string;
}) {
  return (
    <Reveal className={cn("flex flex-col items-center text-center", className)}>
      <Eyebrow className="mb-6">{kicker}</Eyebrow>
      <h2
        className={cn(
          "max-w-4xl text-balance font-display text-[clamp(2.25rem,5.5vw,4rem)] font-medium leading-[1.04] tracking-[-0.025em]",
          headingClassName,
        )}
      >
        {children}
      </h2>
    </Reveal>
  );
}