import SectionLabel from "@/components/SectionLabel";
import Reveal from "@/components/Reveal";

/**
 * Editorial page masthead. Korean serif headline + huge English display
 * word, with magazine "NN / 05" spread numbering.
 *
 * CUSTOMIZATION HOOK — CONTENT: ko / en / display / description / index.
 */
export default function PageHeader({
  ko,
  en,
  display,
  description,
  index,
}: {
  ko: string;
  en: string;
  display?: string;
  description?: string;
  index: number;
}) {
  return (
    <section className="relative overflow-hidden border-b border-ink bg-ivory">
      <div className="container-content pb-12 pt-14 sm:pb-16 sm:pt-20">
        <Reveal>
          <SectionLabel index={index} label={en} />
        </Reveal>

        <div className="mt-8 grid items-end gap-6 lg:grid-cols-12">
          <Reveal className="lg:col-span-8" delay={80}>
            <h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
              {ko}
            </h1>
            {/* When a custom `display` word is provided, render it at the full
                magazine scale. Otherwise fall back to `en` at the smaller
                `display-sm` scale so long words like "Standardization" never
                overflow the col-span-8 column. See LAYOUT_AUDIT #6 + #10. */}
            <p
              className={
                display
                  ? "display mt-2 break-keep text-vermillion"
                  : "display-sm mt-2 break-keep text-vermillion"
              }
              aria-hidden
            >
              {display ?? en}
            </p>
          </Reveal>

          {description && (
            <Reveal className="lg:col-span-4" variant="right" delay={160}>
              <p className="border-l-2 border-ink pl-5 text-sm leading-relaxed text-ink-soft">
                {description}
              </p>
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}