function ProtocolCards() {
  const items = [
    {
      n: '01',
      icon: 'move-down',
      t: 'Lower chain',
      d: 'Hips and ankles. The zones where most lifting careers quietly fall apart.',
    },
    {
      n: '02',
      icon: 'move-up',
      t: 'Upper chain',
      d: 'Thoracic spine, shoulders, and neck. Fix the upstream, not just the shoulder.',
    },
    {
      n: '03',
      icon: 'sunrise',
      t: 'Pre-lift activation',
      d: '10 minutes before every session. Organized by training day.',
    },
    {
      n: '04',
      icon: 'sunset',
      t: 'Post-lift restore',
      d: '12 minutes after every session. The window where mobility work sticks.',
    },
  ];
  return (
    <section className="protocol" id="protocol" data-screen-label="The Protocol">
      <div className="protocol__head">
        <div className="protocol__rail">
          <div className="eyebrow">The protocol</div>
          <div className="meta" style={{marginTop: 14, color: 'var(--primary-fg-dim)'}}>§ 02 / FRAMEWORK</div>
        </div>
        <h2 className="protocol__title">
          Five zones. Two protocols. Built for how you <em>actually train.</em>
        </h2>
      </div>
      <div className="protocol__grid">
        {items.map((it) => (
          <article key={it.n} className="pcard">
            <i data-lucide={it.icon} className="pcard__icon"></i>
            <div className="pcard__num">PROTOCOL · {it.n}</div>
            <h3 className="pcard__title">{it.t}</h3>
            <p className="pcard__copy">{it.d}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

window.ProtocolCards = ProtocolCards;