/* anatomy.jsx — technical specification sheet */
function SpecGroup({ name, rows }) {
  return (
    <div className="border-t border-white/15 pt-5" data-reveal>
      <h4 className="font-mono text-[10.5px] uppercase tracking-[0.3em] text-ink-faint">{name}</h4>
      <dl className="mt-3">
        {rows.map((r) => (
          <div key={r.label} className="group grid grid-cols-[1fr_auto] items-baseline gap-4 border-b border-white/[0.06] py-3">
            <dt className="text-[13.5px] text-ink-dim">{r.label}</dt>
            <dd className="text-right font-display text-[1.05rem] leading-snug tracking-tight text-ink">
              {r.value}
            </dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

function Anatomy() {
  const groups = {};
  window.SPECS.forEach((s) => { (groups[s.group] = groups[s.group] || []).push(s); });
  const order = ['Identity', 'Scale', 'Build', 'Marks'];

  return (
    <section id="specs" className="relative border-t border-white/[0.06] bg-coal-800">
      <div className="mx-auto w-full max-w-[1320px] px-6 py-28 md:px-10 md:py-40">
        <SectionHead index="04 / Specs" kicker="Structural data sheet"
          title={<>The specifications, <span className="accent-word">detailed.</span></>}
          sub="A 7-foot semi-concert Artist Grand with Renner hammers and a full cast-iron plate." />

        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-16">
          {/* imagery + feature numeral */}
          <div className="lg:col-span-5">
            <div className="sticky top-24 space-y-5">
              <Plate src="assets/internals.webp" alt="Baldwin SF-10 action, hammers and strings"
                     tag={<span>PLATE · ACTION</span>} caption="Strings, dampers & Renner hammer line — interior, treble break."
                     parallax={0.06} ratio="4 / 5" />
              <div className="grid grid-cols-2 gap-5">
                <Plate src="assets/serial.webp" alt="Serial number SF 223781 stamped on the plate"
                       caption="SF 223781" ratio="1 / 1" parallax={0.04} />
                <div className="relative grid place-items-center overflow-hidden ring-1 ring-white/10" style={{ background: 'linear-gradient(160deg,#15171d,#0b0b0d)' }}>
                  <div className="p-4 text-center">
                    <div className="chrome font-display text-[3.6rem] leading-none">88</div>
                    <div className="mt-1 font-mono text-[9.5px] uppercase tracking-[0.26em] text-ink-faint">Keys · full compass</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* spec rows */}
          <div className="lg:col-span-7">
            <div className="space-y-10">
              {order.map((g) => groups[g] && <SpecGroup key={g} name={g} rows={groups[g]} />)}
            </div>
            <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-white/15 pt-6 font-mono text-[10.5px] uppercase tracking-[0.24em] text-ink-faint" data-reveal>
              <span><span className="text-ink">Baldwin</span> · Cincinnati, OH</span>
              <span>1978</span>
              <span style={{ color: 'var(--accent-text)' }}>Renner Hammers</span>
              <span>Ebony Satin</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Anatomy });