function Hero() {
  return (
    <React.Fragment>
      <section className="hero" data-screen-label="Hero">
        <div className="hero__heat" />
        <div className="hero__inner">
          <div className="hero__copy">
            <div className="eyebrow">For lifters 30+</div>
            <h1 className="hero__head">Keep the <span className="accent">heat.</span></h1>
            <p className="hero__subline">Move well. Train hard. Last.</p>
            <p className="hero__sub">
              A framework for lifters 30+ who want to keep training hard — without the mobility debt catching up to them.
            </p>
            <div className="hero__ctas">
              <a href="#cta" className="btn btn--solid">Get the protocol</a>
              <a href="#book" className="btn btn--ghost">Read the book</a>
            </div>
          </div>
          <div className="hero__media" aria-hidden="true">
            <div className="silhouette">
              <div className="silhouette__grid" />
              {/* Anatomical silhouette — abstracted standing figure with load */}
              <svg viewBox="0 0 280 420" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#0E0E0E" />
                    <stop offset="100%" stopColor="#1E1E1E" />
                  </linearGradient>
                  <linearGradient id="amber" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#D88A52" stopOpacity="0.65" />
                    <stop offset="100%" stopColor="#A6602F" stopOpacity="0.25" />
                  </linearGradient>
                </defs>
                {/* Bar overhead */}
                <rect x="20" y="36" width="240" height="6" fill="url(#amber)" />
                <circle cx="20" cy="39" r="14" fill="#1B1B1B" stroke="#C87941" strokeWidth="1.2" />
                <circle cx="260" cy="39" r="14" fill="#1B1B1B" stroke="#C87941" strokeWidth="1.2" />
                {/* Head */}
                <ellipse cx="140" cy="78" rx="22" ry="26" fill="url(#bodyGrad)" stroke="#C87941" strokeWidth="0.8" strokeOpacity="0.6" />
                {/* Arms — pressing overhead */}
                <path d="M118 100 L78 60 L60 42" stroke="#C87941" strokeOpacity="0.85" strokeWidth="6" strokeLinecap="round" fill="none" />
                <path d="M162 100 L202 60 L220 42" stroke="#C87941" strokeOpacity="0.85" strokeWidth="6" strokeLinecap="round" fill="none" />
                {/* Torso */}
                <path d="M114 108 Q140 100 166 108 L172 200 Q172 220 158 230 L122 230 Q108 220 108 200 Z" fill="url(#bodyGrad)" stroke="#C87941" strokeWidth="0.8" strokeOpacity="0.7" />
                {/* Hips */}
                <path d="M118 226 L162 226 L168 252 L112 252 Z" fill="#1A1A1A" stroke="#C87941" strokeWidth="0.8" strokeOpacity="0.7" />
                {/* Legs — slight squat */}
                <path d="M122 252 L116 332 L120 392" stroke="#F0EBE3" strokeOpacity="0.85" strokeWidth="14" strokeLinecap="round" fill="none" />
                <path d="M158 252 L164 332 L160 392" stroke="#F0EBE3" strokeOpacity="0.85" strokeWidth="14" strokeLinecap="round" fill="none" />
                {/* Feet base line */}
                <line x1="100" y1="402" x2="180" y2="402" stroke="#C87941" strokeWidth="1" strokeOpacity="0.5" />
              </svg>

              {/* Zone callouts */}
              <div className="silhouette__zones">
                <div className="zone-dot" style={{top: '21%', left: '50%', transform: 'translate(-50%,-50%)'}} />
                <div className="zone-dot" style={{top: '38%', left: '50%', transform: 'translate(-50%,-50%)'}} />
                <div className="zone-dot" style={{top: '57%', left: '50%', transform: 'translate(-50%,-50%)'}} />
                <div className="zone-dot" style={{top: '70%', left: '50%', transform: 'translate(-50%,-50%)'}} />
                <div className="zone-dot" style={{top: '92%', left: '50%', transform: 'translate(-50%,-50%)'}} />

                <div className="zone-lbl" style={{top: '18%', right: '6%'}}>01 · T-spine</div>
                <div className="zone-lbl" style={{top: '36%', right: '6%'}}>02 · Shoulder</div>
                <div className="zone-lbl" style={{top: '55%', left: '6%'}}>03 · Hip</div>
                <div className="zone-lbl" style={{top: '68%', right: '6%'}}>04 · Knee</div>
                <div className="zone-lbl" style={{top: '90%', left: '6%'}}>05 · Ankle</div>
              </div>
            </div>
            <div className="hero__media-cap">PLACEHOLDER · 5-ZONE CHAIN MAP · WARM TINT</div>
          </div>
        </div>
      </section>

      <div className="statband">
        <div className="statband__inner">
          <div className="statband__cell">
            <div className="statband__num"><span className="accent">5 zones.</span> Every session.</div>
            <div className="statband__lbl">Lower chain · upper chain · full protocol</div>
          </div>
          <div className="statband__cell">
            <div className="statband__num"><span className="accent">10 min</span> before. <span className="accent">12 min</span> after.</div>
            <div className="statband__lbl">Every training day</div>
          </div>
          <div className="statband__cell">
            <div className="statband__num"><span className="accent">Loaded</span> mobility.</div>
            <div className="statband__lbl">Not passive stretching</div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Hero = Hero;