/* history.jsx — The History: a scrolling chronology (1978 → late 1982).
   Driven by window.HISTORY (see data.js). Reuses SectionHead / Plate / data-reveal.
   Wrapped in an IIFE to avoid global-scope collisions. Exposes window.HistorySection
   (NOT window.History — that's a built-in browser constructor). */
(function () {
  /* one era = one chapter; photo alternates sides for rhythm */
  function EraChapter({ era, i }) {
    const flip = i % 2 === 1;
    const ghost = (String(era.year).match(/\d{4}/) || [era.year])[0];
    const hasImg = !!era.image;
    return (
      <article className="relative">
        {/* faded year numeral, behind the chapter (desktop only) — sits on the
            text side so it never collides with the photo, which alternates sides */}
        <span aria-hidden="true"
              className={`ghost-num pointer-events-none absolute -top-10 ${flip ? 'right-0' : 'left-0'} z-0 hidden select-none text-[clamp(6rem,12vw,11rem)] md:block`}>
          {ghost}
        </span>

        <div className="relative z-10 grid grid-cols-1 items-center gap-8 md:grid-cols-12 md:gap-12">
          {/* text column */}
          <div className={`md:col-span-7 ${flip ? 'md:order-2' : ''}`} data-reveal>
            <div className="flex items-center gap-3">
              <span className="inline-block h-[7px] w-[7px] rotate-45" style={{ background: 'var(--accent)', boxShadow: '0 0 9px var(--accent-glow)' }}></span>
              <span className="font-mono text-[11px] uppercase tracking-[0.24em] text-ink-faint">{era.year}</span>
            </div>
            <h3 className="mt-3 font-display text-[clamp(1.7rem,3.4vw,2.6rem)] uppercase leading-[1.03] tracking-tight text-ink">{era.title}</h3>
            <p className="mt-4 max-w-[54ch] text-[15.5px] leading-relaxed text-ink-dim">{era.lead}</p>

            <dl className="mt-6 space-y-4 border-t border-white/10 pt-6">
              {era.points.map((p) => (
                <div key={p.label} className="grid grid-cols-1 gap-1 sm:grid-cols-[10rem_1fr] sm:gap-5">
                  <dt className="font-mono text-[10.5px] uppercase tracking-[0.2em]" style={{ color: 'var(--accent-text)' }}>{p.label}</dt>
                  <dd className="max-w-[48ch] text-[14.5px] leading-relaxed text-ink-dim">{p.text}</dd>
                </div>
              ))}
            </dl>

            {era.link && (
              <a href={era.link.href}
                 className="mt-7 inline-block font-mono text-[11px] uppercase tracking-[0.2em] text-ink underline decoration-white/30 underline-offset-4 transition-colors hover:decoration-white">
                {era.link.text}
              </a>
            )}
            {era.closing && (
              <p className="mt-7 max-w-[58ch] border-l-2 pl-5 text-[14px] leading-relaxed text-ink-faint" style={{ borderColor: 'var(--accent)' }}>
                {era.closing}
              </p>
            )}
          </div>

          {/* photo column */}
          {hasImg && (
            <div className={`md:col-span-5 ${flip ? 'md:order-1' : ''}`} data-reveal>
              <Plate src={era.image.src} alt={era.image.alt} tag={era.image.tag} ratio="4 / 5" parallax={0.08} />
            </div>
          )}
        </div>

        {era.pull && (
          <blockquote data-reveal className="relative z-10 mx-auto mt-14 max-w-[24ch] text-center font-display text-[clamp(1.8rem,4.4vw,3rem)] uppercase leading-[1.05] tracking-tight text-ink">
            <span className="accent-word">“{era.pull}”</span>
          </blockquote>
        )}
      </article>
    );
  }

  function HistorySection() {
    const data = window.HISTORY || { lead: '', eras: [] };
    const eras = data.eras || [];
    return (
      <section id="history" className="relative mx-auto w-full max-w-[1320px] px-6 py-28 md:px-10 md:py-40">
        <SectionHead index="01 / History" kicker="1978 → Present"
          title={<>The definitive chronicle <span className="accent-word">of a rock-and-roll relic.</span></>}
          sub={data.lead} />

        {eras.length === 0 ? (
          <p className="font-mono text-[11px] uppercase tracking-[0.24em] text-ink-faint">No history recorded.</p>
        ) : (
          <div className="space-y-24 md:space-y-36">
            {eras.map((era, i) => <EraChapter key={era.id} era={era} i={i} />)}
          </div>
        )}

        {data.closing && (
          <div data-reveal className="mt-24 border-t border-white/10 pt-16 md:mt-36 md:pt-20">
            <p className="mx-auto max-w-[24ch] text-center font-mono text-[11px] uppercase tracking-[0.28em]" style={{ color: 'var(--accent-text)' }}>
              The artifact, today
            </p>
            <p className="mx-auto mt-7 max-w-[30ch] text-center font-display text-[clamp(1.6rem,4vw,2.9rem)] uppercase leading-[1.12] tracking-tight text-ink">
              {data.closing}
            </p>
          </div>
        )}
      </section>
    );
  }

  Object.assign(window, { HistorySection });
})();