/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/SectionHeading.tsx
 * Description: Reusable section heading — kicker line, serif display title, optional lead paragraph
 */

export default function SectionHeading({
  kicker,
  title,
  lead,
  as: Tag = "h2",
}: {
  kicker?: string;
  title: string;
  lead?: string;
  as?: "h1" | "h2";
}) {
  return (
    <div className="max-w-3xl">
      {kicker ? (
        <p className="mb-4 font-mono text-xs uppercase tracking-[0.28em] text-accent">
          {kicker}
        </p>
      ) : null}
      <Tag
        className={
          Tag === "h1"
            ? "font-display text-4xl font-semibold leading-[1.08] tracking-tight text-ink sm:text-6xl"
            : "font-display text-3xl font-semibold leading-tight tracking-tight text-ink sm:text-4xl"
        }
      >
        {title}
      </Tag>
      {lead ? (
        <p className="mt-6 text-lg leading-relaxed text-ink-soft">{lead}</p>
      ) : null}
    </div>
  );
}