/* ===== COURSES — Bastion-styled list + detail ===== */
function CoursesPage({ navigate, openSignup }) {
  const [active, setActive] = useState(0);
  const programs = [
    { id: "base", num: "01", title: "ENDURANCE",  ch: "基礎有氧",  zone: "ZONE 2",
      bullets: ["維持長時間 Zone 2 穩定騎乘", "建立強大的基礎耐力、提升脂肪代謝效率", "在賽季前打好體能基礎，降低安靜心率"],
      meta: { 強度: "★★☆☆☆", 時長: "80 MIN", 對象: "全員 / 入門" } },
    { id: "vo2", num: "02", title: "VO2 MAX",   ch: "無氧間歇",  zone: "ZONE 5–6 · HIIT",
      bullets: ["無氧間歇課程，在 Zone 5–Zone 6 以 HIIT 模式進行訓練", "提升最大攝氧量、衝刺爆發力及乳酸耐受度", "強調在短時間內爆發最高瓦數"],
      meta: { 強度: "★★★★★", 時長: "80 MIN", 對象: "進階 / 競賽" } },
    { id: "ftp", num: "03", title: "THRESHOLD", ch: "閾值訓練",  zone: "88–94% FTP",
      bullets: ["甜蜜點 (SST) 訓練，在 88–94% FTP 進行交叉練習", "利用單車低衝擊特性，輔助跑者或其他項目選手提升體能", "維持高心肺刺激，亦能提高最大攝氧量"],
      meta: { 強度: "★★★★☆", 時長: "80 MIN", 對象: "中階 / 跨項目" } },
    { id: "heat", num: "04", title: "HEAT-ADAPT", ch: "熱適應訓練", zone: "CORE 監測",
      bullets: ["專屬教室建立安全的熱適應訓練環境", "CORE 感測器嚴格監測體溫、心率與水分補充", "增加心搏輸出量、優化排汗機制"],
      meta: { 強度: "★★★☆☆", 時長: "80 MIN", 對象: "夏季備賽 / 三鐵" } },
  ];

  return (
    <>
      <PageHero marker="// PROGRAMS" titleA="TRAIN" titleB="LIKE A KING." sub="四種核心團體課程 · 兩階滾筒訓練 · 客製化包班，從第一次踩踏，到比賽前的最後 taper，這裡都有對應你週期的課表。" />

      {/* Active program detail */}
      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <span className="marker">// POWER PROGRAMS</span>
            <h2 className="section-title">FOUR<br/>DISCIPLINES.</h2>
          </div>

          {/* List nav */}
          <div style={{ borderTop: "1px solid var(--hairline)" }}>
            {programs.map((p, i) => (
              <div key={p.id}
                   onClick={() => setActive(i)}
                   style={{ display: "grid", gridTemplateColumns: "80px 1fr 1fr 1fr 60px", gap: 24, alignItems: "center", padding: "24px 16px 24px 0", borderBottom: "1px solid var(--hairline-soft)", cursor: "pointer", background: active === i ? "rgba(168,128,79,0.04)" : "transparent", transition: "background 0.2s, padding-left 0.3s", paddingLeft: active === i ? "16px" : "0" }}>
                <span className="caption" style={{ opacity: active === i ? 1 : 0.6 }}>{p.num} /</span>
                <span className="display" style={{ fontSize: active === i ? 36 : 28, transition: "font-size 0.3s" }}>{p.title}</span>
                <span style={{ fontSize: 16 }}>{p.ch}</span>
                <span className="caption" style={{ opacity: 0.7 }}>{p.zone}</span>
                <span style={{ textAlign: "right", fontSize: 20, opacity: active === i ? 1 : 0.5 }}>{active === i ? "—" : "+"}</span>
              </div>
            ))}
          </div>

          {/* Detail */}
          <div key={active} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, marginTop: 96, animation: "fadeUp 0.4s ease" }}>
            <div>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>{programs[active].zone}</div>
              <div className="display" style={{ fontSize: "clamp(56px, 7vw, 96px)", lineHeight: 0.95, marginBottom: 32 }}>{programs[active].title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16, marginBottom: 48 }}>
                {programs[active].bullets.map((b, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, paddingTop: 16, borderTop: "1px solid var(--hairline-soft)" }}>
                    <span className="caption" style={{ opacity: 0.6 }}>0{i + 1}</span>
                    <span style={{ fontSize: 16, lineHeight: 1.6 }}>{b}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", gap: 32 }}>
                <button className="btn" onClick={openSignup}>預約這堂 <span className="arrow">↗</span></button>
                <button className="btn" onClick={() => navigate("schedule")}>查看時段 <span className="arrow">↗</span></button>
              </div>
            </div>
            <div style={{ borderLeft: "1px solid var(--hairline-soft)", paddingLeft: 48 }}>
              {Object.entries(programs[active].meta).map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "20px 0", borderBottom: "1px solid var(--hairline-soft)" }}>
                  <span className="caption" style={{ opacity: 0.6 }}>{k}</span>
                  <span style={{ fontSize: 16 }}>{v}</span>
                </div>
              ))}
              <PowerCurve mode={programs[active].id} />
            </div>
          </div>
        </div>
      </section>

      {/* Roller training */}
      <section className="section-tight" style={{ borderTop: "1px solid var(--hairline)" }}>
        <div className="container">
          <div className="section-head">
            <span className="marker">// ROLLER</span>
            <h2 className="section-title">ROLLER<br/>TRAINING.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--hairline-soft)", border: "1px solid var(--hairline)" }}>
            {[
              { l: "LEVEL 01", t: "BALANCE", c: "初階滾筒", b: ["訓練踩踏平順度、車感及核心平衡", "強調專注力，訓練控車技巧與騎乘姿勢矯正"] },
              { l: "LEVEL 02", t: "REFLEX",  c: "中階滾筒", b: ["放手騎乘、單腳踩踏與碰撞等進階平衡練習", "短時間高迴轉衝刺，訓練神經協調反應"] },
            ].map(r => (
              <div key={r.l} style={{ padding: 48, background: "var(--canvas)" }}>
                <div className="caption" style={{ opacity: 0.6 }}>{r.l}</div>
                <div className="display" style={{ fontSize: 56, margin: "16px 0 8px" }}>{r.t}</div>
                <div style={{ fontSize: 16, marginBottom: 32 }}>{r.c}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {r.b.map((x, i) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 12, paddingTop: 12, borderTop: "1px solid var(--hairline-soft)" }}>
                      <span className="caption" style={{ opacity: 0.6 }}>0{i + 1}</span>
                      <span style={{ fontSize: 16, lineHeight: 1.6 }}>{x}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Custom & Private */}
      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <span className="marker">// CUSTOM</span>
            <h2 className="section-title">CUSTOM<br/>& PRIVATE.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96 }}>
            <div>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// CUSTOM PACK</div>
              <div className="display" style={{ fontSize: 48, marginBottom: 24 }}>客製化包班</div>
              <p style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 32 }}>完全客製化的團體課程，教學內容、時間、上課次數皆可依需求制定。車隊集訓、企業團體、生日包場 — 全可。</p>
              <button className="btn" onClick={openSignup}>私訊洽詢 <span className="arrow">↗</span></button>
            </div>
            <div>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// 1-ON-1 / 1-ON-2</div>
              <div className="display" style={{ fontSize: 48, marginBottom: 24 }}>個人技巧課</div>
              <p style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 32 }}>室內訓練台、爬坡王國的外騎指導都接。1 對 1、1 對 2 皆可，跨縣市車馬費另計。</p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 32 }}>
                <div style={{ paddingTop: 16, borderTop: "1px solid var(--hairline-soft)" }}>
                  <div className="caption" style={{ opacity: 0.6 }}>1-ON-1</div>
                  <div className="display" style={{ fontSize: 36, marginTop: 8 }}>1500/HR</div>
                </div>
                <div style={{ paddingTop: 16, borderTop: "1px solid var(--hairline-soft)" }}>
                  <div className="caption" style={{ opacity: 0.6 }}>1-ON-2</div>
                  <div className="display" style={{ fontSize: 36, marginTop: 8 }}>2000/HR</div>
                </div>
              </div>
              <button className="btn" onClick={openSignup}>私訊洽詢 <span className="arrow">↗</span></button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function PowerCurve({ mode }) {
  const curves = {
    base: "M 0 80 Q 50 70 100 70 T 200 65 T 300 65 T 400 60",
    vo2:  "M 0 90 L 30 30 L 50 30 L 60 85 L 90 25 L 110 25 L 120 88 L 150 22 L 170 22 L 180 90 L 210 28 L 230 28 L 240 86 L 270 25 L 290 25 L 300 90 L 400 90",
    ftp:  "M 0 85 L 30 50 L 80 48 L 130 50 L 180 47 L 230 50 L 280 48 L 330 50 L 400 85",
    heat: "M 0 70 Q 100 68 200 60 T 400 50",
  };
  return (
    <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--hairline-soft)" }}>
      <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>POWER PROFILE</div>
      <svg viewBox="0 0 400 100" style={{ width: "100%", height: 120 }}>
        {[20, 40, 60, 80].map(y => <line key={y} x1="0" x2="400" y1={y} y2={y} stroke="var(--hairline-soft)" strokeWidth="0.5" />)}
        <path d={curves[mode] + " L 400 100 L 0 100 Z"} fill="var(--gold-faint)" />
        <path d={curves[mode]} stroke="var(--gold)" strokeWidth="1.5" fill="none" />
      </svg>
    </div>
  );
}

/* Shared page hero */
function PageHero({ marker, titleA, titleB, sub }) {
  return (
    <section style={{ paddingTop: 200, paddingBottom: 120 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "12ch 1fr", gap: 48, alignItems: "end", marginBottom: 64 }}>
          <span className="marker" style={{ paddingTop: 8, borderTop: "1px solid var(--hairline-soft)", fontSize: 12, fontWeight: 500, letterSpacing: 0.6, textTransform: "uppercase" }}>{marker}</span>
          <h1 className="display" style={{ fontSize: "clamp(72px, 13vw, 220px)", lineHeight: 0.92 }}>
            {titleA}<br/>
            {titleB}
          </h1>
        </div>
        {sub && (
          <div style={{ display: "grid", gridTemplateColumns: "12ch 1fr", gap: 48 }}>
            <div></div>
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "60ch" }}>{sub}</p>
          </div>
        )}
      </div>
    </section>
  );
}

window.CoursesPage = CoursesPage;
window.PageHero = PageHero;