/**
 * ThinkSchool Public Website — Section Heading Component
 * Implements editorial typography with Instrument Serif italics and Barlow body.
 */
function SectionHeading({
  eyebrow = null,
  title,
  description = null,
  align = "center",
  className = "",
  titleClassName = "",
  eyebrowVariant = "amber",
}) {
  const alignClasses = {
    center: "text-center items-center mx-auto",
    left: "text-left items-start",
    right: "text-right items-end ml-auto",
  };

  return (
    <div className={`flex flex-col max-w-3xl ${alignClasses[align] || alignClasses.center} ${className}`}>
      {eyebrow && (
        <div className="mb-4">
          <Badge variant={eyebrowVariant}>{eyebrow}</Badge>
        </div>
      )}
      <h2
        className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-normal font-heading italic tracking-tight text-white leading-[1.1] ${titleClassName}`}
      >
        {title}
      </h2>
      {description && (
        <p className="mt-4 sm:mt-5 text-base sm:text-lg text-zinc-400 font-body leading-relaxed max-w-2xl">
          {description}
        </p>
      )}
    </div>
  );
}

window.SectionHeading = SectionHeading;