import { cn } from "@/lib/utils";

// Section heading matching the Claude design: dot eyebrow, a display title
// with a brand-gradient trailing clause, and a muted subtitle.
export const SectionHead = ({
  eyebrow,
  title,
  titleGrad,
  subtitle,
  center = false,
  className,
}: {
  eyebrow: string;
  title: string;
  titleGrad?: string;
  subtitle?: string;
  center?: boolean;
  className?: string;
}) => {
  return (
    <div
      className={cn("max-w-3xl", center && "mx-auto text-center", className)}
    >
      <span className={cn("eyebrow", center && "justify-center")}>
        <span className="bg-gradient-brand size-1.5 rounded-full" />
        {eyebrow}
      </span>
      <h2 className="font-display text-ink-1 mt-4 text-[clamp(30px,4.4vw,52px)] leading-[1.04] font-extrabold tracking-[-0.03em]">
        {title}
        {titleGrad ? (
          <>
            {" "}
            <span className="text-gradient-brand">{titleGrad}</span>
          </>
        ) : null}
      </h2>
      {subtitle ? (
        <p
          className={cn(
            "text-ink-3 mt-4 max-w-xl text-[clamp(16px,1.5vw,19px)] leading-relaxed",
            center && "mx-auto",
          )}
        >
          {subtitle}
        </p>
      ) : null}
    </div>
  );
};