/* ===== SCHEDULE — Bastion-styled grid ===== */
function SchedulePage({ navigate, openSignup }) {
  const [hovered, setHovered] = useState(null);
  const days = ["MON", "TUE", "WED", "THU", "FRI"];
  const dayCh = ["星期一", "星期二", "星期三", "星期四", "星期五"];
  const slots = ["7:00–8:20", "8:40–10:00", "17:20–18:40", "19:00–20:20", "20:40–22:00"];

  const grid = [
    ["base",   "roll1",  "ftp",   "vo2",   null],
    ["vo2",    "roll2",  "base",  "ftp",   null],
    ["vo2",    "roll1",  "base",  "ftp",   "vo2"],
    ["base",   "heat",   "vo2",   "open",  "ftp"],
    ["roll2",  "open",   "ftp",   "base",  "base"],
  ];

  const COURSES = {
    base:  { name: "ENDURANCE",  ch: "基礎有氧",   desc: "Zone 2 穩定騎乘，建立有氧基礎與脂肪代謝。" },
    vo2:   { name: "VO2 MAX",    ch: "無氧間歇",   desc: "Zone 5–6 HIIT，提升最大攝氧量與爆發力。" },
    ftp:   { name: "THRESHOLD",  ch: "閾值訓練",   desc: "88–94% FTP 甜蜜點訓練，提升乳酸閾。" },
    roll1: { name: "ROLLER 01",  ch: "初階滾筒",   desc: "踩踏平順度、車感與核心平衡入門。" },
    roll2: { name: "ROLLER 02",  ch: "中階滾筒",   desc: "放手騎乘、單腳踩踏、神經反應訓練。" },
    heat:  { name: "HEAT-ADAPT", ch: "熱適應",     desc: "CORE 感測，熱壓力下優化排汗。" },
    open:  { name: "PRIVATE",    ch: "包班預約",   desc: "整個時段開放團體包班預約。" },
  };

  return (
    <>
      <PageHero marker="// SCHEDULE" titleA="WEEKLY" titleB="GRID."
                sub="2026/05/18 起試營運 — 暫定版，依報名人數開班。週末課程預計於 6 月後推出。" />

      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ overflowX: "auto" }}>
            <div style={{ minWidth: 880, border: "1px solid var(--hairline)" }}>
              {/* Header */}
              <div style={{ display: "grid", gridTemplateColumns: "120px repeat(5, 1fr)" }}>
                <div style={schedStyles.headCell}><span className="caption" style={{ opacity: 0.6 }}>TIME / DAY</span></div>
                {days.map((d, i) => (
                  <div key={d} style={schedStyles.headCell}>
                    <div className="display" style={{ fontSize: 24 }}>{d}</div>
                    <div className="caption" style={{ opacity: 0.6, marginTop: 4 }}>{dayCh[i]}</div>
                  </div>
                ))}
              </div>

              {/* Rows */}
              {slots.map((slot, sIdx) => (
                <div key={slot} style={{ display: "grid", gridTemplateColumns: "120px repeat(5, 1fr)", borderTop: "1px solid var(--hairline-soft)" }}>
                  <div style={schedStyles.timeCell}>
                    <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.6px" }}>{slot.split("–")[0]}</span>
                    <span style={{ fontSize: 12, opacity: 0.5, margin: "4px 0" }}>↓</span>
                    <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.6px", opacity: 0.7 }}>{slot.split("–")[1]}</span>
                  </div>
                  {grid[sIdx].map((courseKey, dIdx) => {
                    const course = courseKey ? COURSES[courseKey] : null;
                    const isHovered = hovered && hovered.s === sIdx && hovered.d === dIdx;
                    return (
                      <div key={dIdx}
                           style={{
                             ...schedStyles.cell,
                             borderRight: dIdx === 4 ? "none" : "1px solid var(--hairline-soft)",
                             background: course && isHovered ? "var(--gold)" : "transparent",
                             color: course && isHovered ? "#000" : "var(--gold)",
                             cursor: course ? "pointer" : "default",
                           }}
                           onMouseEnter={() => course && setHovered({ s: sIdx, d: dIdx })}
                           onMouseLeave={() => setHovered(null)}
                           onClick={() => course && courseKey !== "open" && openSignup()}>
                        {course ? (
                          <>
                            <div className="caption" style={{ opacity: isHovered ? 0.8 : 0.6 }}>{course.name}</div>
                            <div className="display" style={{ fontSize: 22, marginTop: 6 }}>{course.ch}</div>
                            {isHovered && <div style={{ fontSize: 12, marginTop: 12, lineHeight: 1.5 }}>{course.desc}</div>}
                          </>
                        ) : (
                          <div className="caption" style={{ opacity: 0.3 }}>休館</div>
                        )}
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>
          </div>

          {/* Notes */}
          <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "12ch 1fr", gap: 48, paddingTop: 32, borderTop: "1px solid var(--hairline)" }}>
            <span className="caption" style={{ opacity: 0.6 }}>// NOTES</span>
            <div style={{ fontSize: 16, lineHeight: 1.8 }}>
              功率課程 4 人開班 / 上限 10 人 &nbsp;·&nbsp; 滾筒課程 2 人開班 / 上限 4 人 &nbsp;·&nbsp; 熱適應 2 人開班 / 上限 3 人<br/>
              上課以預約學員優先 &nbsp;·&nbsp; 團體包班、自主練習請私訊粉專 &nbsp;·&nbsp; 亦提供場租方案
            </div>
          </div>

          <div style={{ marginTop: 64, display: "flex", gap: 48 }}>
            <button className="btn" onClick={openSignup}>立即預約時段 <span className="arrow">↗</span></button>
            <button className="btn" onClick={() => navigate("pricing")}>查看費用 <span className="arrow">↗</span></button>
          </div>
        </div>
      </section>
    </>
  );
}

const schedStyles = {
  headCell: { padding: "20px 16px", borderRight: "1px solid var(--hairline-soft)", borderBottom: "1px solid var(--hairline)", display: "flex", flexDirection: "column", gap: 4 },
  timeCell: { padding: "20px 16px", borderRight: "1px solid var(--hairline-soft)", display: "flex", flexDirection: "column", justifyContent: "center" },
  cell: { padding: "20px 16px", minHeight: 110, transition: "background 0.2s, color 0.2s", position: "relative" },
};

window.SchedulePage = SchedulePage;