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

/**
 * SectionHeader (§6.3): eyebrow label with a tiny coral ▲ accent, an H2 short
 * claim, and an optional lead. Drives §7 section intros.
 */
export function SectionHeader({
  eyebrow,
  title,
  lead,
  align = "left",
  as: Heading = "h2",
  className,
  headingClassName,
}: {
  eyebrow?: string;
  title: ReactNode;
  lead?: ReactNode;
  align?: "left" | "center";
  as?: "h1" | "h2" | "h3";
  className?: string;
  headingClassName?: string;
}) {
  return (
    <div
      className={cn(
        "flex flex-col gap-4",
        align === "center" && "items-center text-center",
        className,
      )}
    >
      {eyebrow ? (
        <p className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.1em] text-muted-foreground">
          <span
            aria-hidden
            className="size-1.5 rounded-full bg-[#4FDAF1] shadow-[0_0_8px_rgba(79,218,241,0.6)]"
          />
          {eyebrow}
        </p>
      ) : null}

      <Heading
        className={cn(
          "text-balance font-display font-medium tracking-[-0.01em] text-foreground",
          "text-[clamp(1.75rem,3.5vw,3rem)] leading-[1.1]",
          headingClassName,
        )}
      >
        {title}
      </Heading>

      {lead ? (
        <p
          className={cn(
            "max-w-2xl text-pretty text-lg text-muted-foreground",
            align === "center" && "mx-auto",
          )}
        >
          {lead}
        </p>
      ) : null}
    </div>
  );
}