/* provenance.jsx — chain of custody + authentication */
function Provenance() {
  const P = window.PROVENANCE;
  return (
    <section id="provenance" className="relative mx-auto w-full max-w-[1320px] px-6 py-28 md:px-10 md:py-40">
      <SectionHead index="03 / Provenance" kicker="Authentication & chain of custody"
        title={<>The Authentication <span className="accent-word">Record.</span></>} />

      {/* statement blockquote */}
      <figure data-reveal className="relative mb-16 border-y border-white/15 py-12 md:py-16">
        <span aria-hidden className="absolute -top-6 left-0 font-display text-[6rem] leading-none text-white/10 md:text-[8rem]">“</span>
        <blockquote className="mx-auto max-w-[62ch] text-center font-sans text-[clamp(1.15rem,2.1vw,1.7rem)] font-400 leading-[1.5] tracking-[-0.005em] text-ink">
          {P.statement}
        </blockquote>
        <figcaption className="mt-8 text-center font-mono text-[10.5px] uppercase tracking-[0.3em] text-ink-faint">
          Statement of provenance · Serial SF 223781
        </figcaption>
      </figure>

      <div className="grid grid-cols-1 gap-14 lg:grid-cols-12 lg:gap-16">
        {/* authentication points + signature seal */}
        <div className="lg:col-span-7">
          <h4 data-reveal className="mb-6 font-mono text-[10.5px] uppercase tracking-[0.3em] text-ink-faint">Authentication</h4>
          <div className="space-y-px">
            {P.authentication.map((a) => (
              <div key={a.tag} data-reveal className="flex items-center gap-4 border border-white/10 bg-coal-800 p-4 transition-colors hover:border-white/25">
                {a.image && (
                  <img src={a.image.src} alt={a.image.alt} loading="lazy"
                       className="h-20 w-20 shrink-0 object-cover ring-1 ring-white/10 sm:h-24 sm:w-24" />
                )}
                <div className="min-w-0 flex-1">
                  <div className="flex items-center justify-between">
                    <span className="font-mono text-[10px] uppercase tracking-[0.24em]" style={{ color: 'var(--accent-text)' }}>{a.tag}</span>
                    <span className="font-mono text-[10px] uppercase tracking-[0.24em] text-ink-ghost">Verified</span>
                  </div>
                  <h5 className="mt-2 font-display text-[1.2rem] tracking-tight text-ink">{a.label}</h5>
                  <p className="mt-1 text-[13px] leading-relaxed text-ink-dim">{a.value}</p>
                </div>
              </div>
            ))}
          </div>

          {/* JSA-authenticated source autograph → engraved brass plate (drag to compare) */}
          <div className="mt-5">
            <CompareSlider
              before="assets/photo-billy-joel-autograph.jpg" beforeAlt="JSA-authenticated handwritten Billy Joel autograph" beforeLabel="Autograph · paper"
              after="assets/photo-billy-joel-brass-plate.jpg" afterAlt="Engraved brass plate signed “Billy Joel”" afterLabel="Brass plate · engraved"
              ratio="16 / 9" tag={<span>SOURCE → ENGRAVED SEAL</span>}
              caption="The JSA-authenticated autograph was used to engrave the brass plate on the case — drag to compare." />
          </div>
        </div>

        {/* chain of custody ledger */}
        <div className="lg:col-span-5">
          <h4 data-reveal className="mb-6 font-mono text-[10.5px] uppercase tracking-[0.3em] text-ink-faint">Chain of custody</h4>
          <ol className="border-l border-white/15">
            {P.chain.map((c, i) => (
              <li key={i} data-reveal data-reveal-delay={i * 60} className="group relative grid grid-cols-[6.5rem_1fr] gap-5 py-5 pl-6 transition-colors">
                <span className="absolute left-0 top-7 h-px w-4 bg-white/20 transition-colors group-hover:bg-white/50"></span>
                <span className="absolute left-0 top-[26px] -translate-x-1/2 h-2 w-2 rounded-full border border-white/30 bg-coal transition-colors group-hover:border-white/70"></span>
                <span className="pt-0.5 font-mono text-[12px] tracking-[0.1em] text-ink-faint">{c.year}</span>
                <div>
                  <h5 className="font-display text-[1.35rem] tracking-tight text-ink">{c.title}</h5>
                  <p className="mt-1 text-[13px] text-ink-dim"><span className="text-ink">{c.holder}</span> · {c.place}</p>
                  <p className="mt-1.5 max-w-[52ch] text-[13px] leading-relaxed text-ink-faint">{c.detail}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>

      {/* "Kill sticker" feature — Joel's own words */}
      {P.killSticker && (
        <figure data-reveal className="mt-16 md:mt-20">
          <h3 className="mb-8 font-display text-[clamp(1.8rem,3.4vw,2.6rem)] uppercase tracking-tight text-ink">The “Kill Stickers”</h3>
          <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12 lg:gap-14">
            <div className="lg:col-span-6">
              <Plate src={P.killSticker.image.src} alt={P.killSticker.image.alt} ratio="4 / 3" parallax={0.06}
                     tag={<span>{P.killSticker.tag}</span>} />
            </div>
            <blockquote className="relative lg:col-span-6">
              <span aria-hidden className="absolute -left-2 -top-8 font-display text-[6rem] leading-none text-white/10">“</span>
              <p className="relative text-[clamp(1.35rem,2.6vw,2.1rem)] leading-[1.5] tracking-[-0.005em] text-ink">{P.killSticker.quote}</p>
              <figcaption className="mt-6">
                <div className="font-display text-[clamp(1.6rem,3vw,2.4rem)] uppercase leading-none tracking-tight">
                  <span className="text-ink-faint">— </span><span className="chrome">{P.killSticker.attribution}</span>
                </div>
                {P.killSticker.note && (
                  <div className="mt-2.5 font-mono text-[11px] uppercase tracking-[0.28em] text-ink-faint">{P.killSticker.note}</div>
                )}
              </figcaption>
            </blockquote>
          </div>
        </figure>
      )}
    </section>
  );
}

Object.assign(window, { Provenance });