/* ── App: top-level composition ─────────────────────────────────── */

const { useState, useEffect } = React;

function Header() {
  return (
    <div style={{ padding: '32px 22px 18px' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 10, letterSpacing: '.3em', color: 'var(--muted)',
        textTransform: 'uppercase', marginBottom: 12
      }}>
        <span style={{ width: 18, height: 1, background: 'var(--rust)' }}/>
        <span>PHYSIO · 患者教育图解</span>
      </div>

      <h1 className="serif" style={{
        fontSize: 36, fontWeight: 900, lineHeight: 1.1, letterSpacing: '-0.02em'
      }}>
        骨盆前倾，<br/>
        <span style={{ color: 'var(--rust-deep)' }}>腰肌为何成了"背锅侠"</span>?
      </h1>

      <p className="news" style={{
        marginTop: 14, fontSize: 16, lineHeight: 1.6,
        color: 'var(--ink-2)', fontStyle: 'italic'
      }}>
        Anterior pelvic tilt &nbsp;·&nbsp; lumbar compensation &nbsp;·&nbsp; lower-crossed syndrome
      </p>

      <p style={{
        marginTop: 16, fontSize: 13, lineHeight: 1.75, color: 'var(--ink-2)',
      }}>
        当骨盆向前下旋转，腰部竖脊肌被迫"挺身而出"，
        承担起本不属于它的稳定任务 ——
        <span style={{ color: 'var(--rust-deep)', fontWeight: 600 }}> 这就是反复腰痛背后的力学密码。</span>
      </p>

      <div style={{
        marginTop: 22, display: 'flex', gap: 14, flexWrap: 'wrap',
        fontSize: 11, color: 'var(--muted)'
      }}>
        <Stat n="6" lab="块关键肌肉"/>
        <Stat n="2" lab="紧张 / 抑制 交叉"/>
        <Stat n=">15°" lab="ASIS-PSIS 警戒"/>
      </div>
    </div>
  );
}
function Stat({ n, lab }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
      <span className="serif" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>{n}</span>
      <span>{lab}</span>
    </div>
  );
}

function Legend() {
  const items = [
    { k: 'tight', lab: '紧张缩短', en: 'Tight' },
    { k: 'overworking', lab: '代偿过劳', en: 'Overworking' },
    { k: 'weak', lab: '抑制弱化', en: 'Weak / Inhibited' },
    { k: 'lengthened', lab: '被动拉长', en: 'Lengthened' },
    { k: 'neutral', lab: '正常', en: 'Neutral' },
  ];
  return (
    <div style={{
      marginTop: 14, padding: '10px 12px',
      background: 'var(--paper-2)', border: '1px solid var(--line-soft)',
      borderRadius: 10, display: 'flex', flexWrap: 'wrap', gap: '6px 12px'
    }}>
      {items.map(it => {
        const sty = STATE_STYLE[it.k];
        return (
          <div key={it.k} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: sty.fill }}/>
            <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{it.lab}</span>
            <span className="news" style={{ color: 'var(--muted)', fontSize: 10, fontStyle: 'italic' }}>
              {it.en}
            </span>
          </div>
        );
      })}
    </div>
  );
}

function ChainSection({ phase }) {
  const desc = STATE_INFO[phase].desc;
  return (
    <div className="fade-up" key={phase} style={{
      marginTop: 14, padding: '14px 16px',
      background: phase === 'normal' ? 'var(--bg-warm)' : 'var(--paper)',
      border: '1px solid',
      borderColor: phase === 'compensated' ? 'var(--rust)' : 'var(--line-soft)',
      borderRadius: 12, position: 'relative'
    }}>
      <div style={{
        display:'flex', justifyContent:'space-between',
        alignItems: 'baseline', gap: 8, marginBottom: 8
      }}>
        <div>
          <span className="serif" style={{ fontWeight: 700, fontSize: 16,
            color: phase === 'compensated' ? 'var(--rust-deep)' : 'var(--ink)' }}>
            {STATE_INFO[phase].cn}
          </span>
          <span className="news" style={{
            fontSize: 12, color: 'var(--muted)',
            marginLeft: 8, fontStyle: 'italic'
          }}>
            {STATE_INFO[phase].en}
          </span>
        </div>
        <span style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '.15em' }}>
          {STATE_INFO[phase].sub}
        </span>
      </div>
      <p style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--ink-2)' }}>
        {desc}
      </p>
    </div>
  );
}

function FigureSection() {
  const [phase, setPhase] = useState('compensated');
  const [selected, setSelected] = useState('erectorSpinae');

  return (
    <section className="sect">
      <div className="sect-num">
        <span className="n">i.</span>
        <span className="lab">ANATOMY · 立体图解</span>
      </div>
      <h2>把<em>骨盆</em>放在显微镜下</h2>
      <div className="sub">Side profile · 点击肌肉查看 · 切换三种状态</div>

      <StateToggle phase={phase} setPhase={setPhase}/>

      <div style={{
        marginTop: 14,
        background: 'var(--bg-warm)',
        border: '1px solid var(--line-soft)',
        borderRadius: 16,
        overflow: 'hidden',
        position: 'relative'
      }}>
        <AnatomyFigure phase={phase} selected={selected} onSelect={setSelected}/>
      </div>

      <Legend/>
      <ChainSection phase={phase}/>
      <AngleGauge phase={phase}/>
      <MuscleCard id={selected} phase={phase} onClose={() => setSelected(null)}/>
    </section>
  );
}

function CrossSection() {
  return (
    <section className="sect">
      <div className="sect-num">
        <span className="n">ii.</span>
        <span className="lab">DIAGRAM · 力学原理</span>
      </div>
      <h2>下交叉综合征 <em>·</em> 紧张-抑制 X 形</h2>
      <div className="sub">Janda&apos;s Lower-Crossed Syndrome</div>

      <div style={{
        background: 'var(--bg-warm)', border: '1px solid var(--line-soft)',
        borderRadius: 14, padding: '12px 8px', marginTop: 8
      }}>
        <LowerCrossDiagram/>
      </div>

      <p style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.65, marginTop: 12 }}>
        紧张的两块肌群与抑制的两块肌群在身体上形成一个&nbsp;
        <span style={{ color: 'var(--rust-deep)', fontWeight: 600 }}>X 形对角线</span>
        。前侧髋屈肌与后侧腰竖脊肌共同将骨盆"前拉 + 后扯"，把腰椎曲度推向极限。
      </p>
    </section>
  );
}

function SymptomsSection() {
  return (
    <section className="sect">
      <div className="sect-num">
        <span className="n">iii.</span>
        <span className="lab">SIGNS · 你身上的它</span>
      </div>
      <h2>身体在向你<em>发警报</em></h2>
      <div className="sub">Six common signs you can feel & see</div>
      <SymptomsGrid/>
    </section>
  );
}

function CausesSection() {
  return (
    <section className="sect">
      <div className="sect-num">
        <span className="n">iv.</span>
        <span className="lab">WHY · 它从哪里来</span>
      </div>
      <h2>谁让骨盆"<em>滑下</em>"了?</h2>
      <div className="sub">Six lifestyle / training contributors</div>
      <CausesGrid/>
    </section>
  );
}

function FixSection() {
  return (
    <section className="sect">
      <div className="sect-num">
        <span className="n">v.</span>
        <span className="lab">FIX · 重建对位</span>
      </div>
      <h2>松紧两端，<em>同时</em>动手</h2>
      <div className="sub">Stretch the tight, activate the inhibited</div>
      <ExerciseList/>

      <div style={{
        marginTop: 18,
        background: 'var(--ink)',
        color: 'var(--paper)',
        borderRadius: 14,
        padding: '16px 18px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div className="news" style={{
          position: 'absolute', right: -10, top: -10, fontSize: 110, opacity: .08, fontStyle: 'italic'
        }}>tip</div>
        <div style={{ fontSize: 11, color: 'var(--bone-deep)', letterSpacing: '.2em', marginBottom: 8 }}>
          THERAPIST&apos;S NOTE
        </div>
        <div className="serif" style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.55 }}>
          单纯"拉腰"不会让你变好。
        </div>
        <p style={{ fontSize: 12, color: 'var(--bone)', lineHeight: 1.7, marginTop: 6 }}>
          腰痛的源头大多在前侧的髋屈肌和被关掉的臀肌。
          每天 2 组拉伸 + 2 组激活，6–8 周可见明显变化。
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <div style={{
      padding: '20px 22px 32px',
      background: 'var(--paper-2)',
      borderTop: '1px solid var(--line-soft)',
      fontSize: 10, color: 'var(--muted)', lineHeight: 1.7
    }}>
      <div className="news" style={{ fontSize: 12, color: 'var(--ink-2)', fontStyle: 'italic', marginBottom: 4 }}>
        Disclaimer
      </div>
      本图解为康复教育用途，不构成医学诊断。<br/>
      若伴有放射性疼痛、麻木或大小便异常，请及时就医。<br/>
      Illustrations &amp; data &copy; PHYSIO REVIEW · 2025
    </div>
  );
}

function App() {
  return (
    <>
      <div className="topstrip">
        <span><b>PHYSIO</b> &nbsp;·&nbsp; ISSUE 04</span>
        <span>骨盆前倾专题 / APT</span>
      </div>
      <Header/>
      <FigureSection/>
      <CrossSection/>
      <SymptomsSection/>
      <CausesSection/>
      <FixSection/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);