import type { ReactNode } from "react";
import ScrollReveal from "@/components/ScrollReveal";

type SectionHeaderProps = {
  eyebrow: string;
  /** Heading content — wrap the highlighted phrase in <Highlight>. */
  title: ReactNode;
  description?: string;
  align?: "center" | "left";
  className?: string;
};

/** Eyebrow + heading + description, revealed on scroll. Shared by the newer home-page sections. */
export default function SectionHeader({
  eyebrow,
  title,
  description,
  align = "center",
  className = "",
}: SectionHeaderProps) {
  const centered = align === "center";
  return (
    <ScrollReveal className={`${centered ? "mx-auto text-center" : ""} max-w-3xl ${className}`}>
      <p className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.24em] text-accent-600">
        <span className="h-1.5 w-1.5 rounded-full bg-accent" />
        {eyebrow}
      </p>
      <h2 className="mt-5 font-display text-[2rem] font-bold leading-[1.1] tracking-tight text-[#0F172A] sm:text-4xl lg:text-[2.9rem]">
        {title}
      </h2>
      {description && (
        <p
          className={`mt-5 max-w-xl text-base leading-[1.75] text-ink-300 sm:text-lg ${centered ? "mx-auto" : ""}`}
        >
          {description}
        </p>
      )}
    </ScrollReveal>
  );
}

/** Blue highlighted phrase with the brand underline stroke. */
export function Highlight({ children }: { children: ReactNode }) {
  return (
    <span className="relative inline-block text-accent">
      {children}
      <svg
        viewBox="0 0 300 12"
        preserveAspectRatio="none"
        className="absolute -bottom-1.5 left-0 h-2.5 w-full text-accent/40"
        fill="none"
        aria-hidden="true"
      >
        <path d="M2 9C60 3 240 3 298 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
      </svg>
    </span>
  );
}