import Reveal from "./Reveal";

// Instrument section header: "( 01 ) — EYEBROW" mono index, huge Clash headline
// with ember period, optional right-aligned lead. The house style for sections.
export default function SectionHead({ index, eyebrow, title, lead, dark = false, className = "" }: { index?: string; eyebrow: string; title: string; lead?: string; dark?: boolean; className?: string }) {
  const ink = dark ? "text-white" : "text-[#14151A]";
  const inkSoft = dark ? "text-white/55" : "text-[#14151A]/55";
  const hasPeriod = title.trimEnd().endsWith(".");
  const body = hasPeriod ? title.trimEnd().slice(0, -1) : title;
  return (
    <Reveal className={className}>
      <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
        <div className="max-w-3xl">
          <p className={`flex items-center gap-3 text-[11px] font-tech tracking-[0.3em] mb-6 ${dark ? "text-cy" : "text-[#0089A1]"}`}>
            {index && <span className="font-bold">( {index} )</span>}
            <span className={`h-px ${index ? "w-12" : "w-8"} ${dark ? "bg-cy/50" : "bg-[#0089A1]/40"} inline-block`} aria-hidden="true" />
            {eyebrow.toUpperCase()}
          </p>
          <h2 className={`font-display font-semibold text-4xl md:text-5xl leading-[1.02] tracking-tight ${ink}`}>
            {body}
            {hasPeriod && <span className="text-ember">.</span>}
          </h2>
        </div>
        {lead && <p className={`text-sm leading-relaxed max-w-sm lg:pb-2 lg:text-right ${inkSoft}`}>{lead}</p>}
      </div>
    </Reveal>
  );
}