/* ===== ABOUT + CONTACT + SIGNUP MODAL ===== */
function AboutPage({ navigate }) {
  return (
    <>
      <PageHero marker="// MANIFESTO" titleA="BUILT FOR" titleB="RIDERS WHO RACE." />

      <section className="section-tight">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96 }}>
            <div className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.95 }}>
              我們不是<br/>
              飛輪教室。<br/>
              <span style={{ opacity: 0.5 }}>是選手基地。</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 24, fontSize: 16, lineHeight: 1.7 }}>
              <p>ATTACK FIRST CYCLING 國王單車俱樂部誕生於台中北屯，是一座完全為「公路車競技訓練」打造的室內基地。創辦團隊本身就是長年在山道、爬坡王、隧道計時賽上拚搏的車手與教練 — 我們知道車友需要什麼樣的場地、設備與課表。</p>
              <p>場館內配置全套 Magene 智能訓練系統、滾筒台、熱適應教室與 CORE 體溫感測器。包月會員另享 TrainingPeaks Premium 帳號，每一次踩踏、每一段間歇、每一場熱適應訓練都被精準量化。</p>
              <p>這裡沒有冷氣轟趴，沒有閃光燈飛輪秀。只有一群把訓練當回事、想在下一場比賽先發制人的人。</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="section-head">
            <span className="marker">// STUDIO SPECS</span>
            <h2 className="section-title">PRECISION<br/>EQUIPMENT.</h2>
          </div>
          <div style={{ borderTop: "1px solid var(--hairline)" }}>
            {[
              { k: "TRAINER",     v: "MAGENE T100",     d: "智能直驅訓練台 / 全車隊配置" },
              { k: "POWER METER", v: "MAGENE P325",     d: "雙邊功率計，0.5% 精準度" },
              { k: "ROLLER",      v: "ELITE NERO",      d: "電磁滾筒，車感模擬" },
              { k: "CORE TEMP",   v: "CORE SENSOR",     d: "核心體溫感測，熱適應監控" },
              { k: "SOFTWARE",    v: "TRAININGPEAKS+",  d: "Premium 帳號內含" },
              { k: "ENVIRONMENT", v: "HEAT CHAMBER",    d: "溫控隔離教室，安全熱訓練" },
            ].map(s => (
              <div key={s.k} style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 32, padding: "32px 0", borderBottom: "1px solid var(--hairline-soft)", alignItems: "baseline" }}>
                <span className="caption" style={{ opacity: 0.6 }}>{s.k}</span>
                <span className="display" style={{ fontSize: 36 }}>{s.v}</span>
                <span style={{ fontSize: 16, opacity: 0.85 }}>{s.d}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="hairline" style={{ marginBottom: 64 }} />
          <div className="caption" style={{ opacity: 0.6, marginBottom: 24 }}>// 5/16 OPENING RIDE</div>
          <div className="display" style={{ fontSize: "clamp(56px, 8vw, 128px)", lineHeight: 0.95 }}>
            開幕約騎 / 5.16 SAT
          </div>
          <p style={{ marginTop: 32, fontSize: 16, lineHeight: 1.7, maxWidth: "44ch" }}>
            詳細活動內容請持續關注 ATTACK FIRST 粉專。一起出發，先發制人。
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn" onClick={() => navigate("contact")}>聯絡我們 <span className="arrow">↗</span></button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ===== CONTACT ===== */
function ContactPage({ navigate, openSignup }) {
  return (
    <>
      <PageHero marker="// CONTACT" titleA="COME" titleB="SEE US." />

      <section className="section-tight">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96 }}>
            <div>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// 報名 & 開課說明</div>
              <h2 className="display" style={{ fontSize: 64, marginBottom: 48 }}>HOW TO<br/>JOIN.</h2>
              <div style={{ borderTop: "1px solid var(--hairline)" }}>
                {[
                  { n: "01", t: "MESSAGE FB / IG", d: "試營運期間均採訊息報名，請透過 Facebook 或 Instagram 私訊粉專預約報名。" },
                  { n: "02", t: "AWAIT REPLY",     d: "私訊報名後請靜候粉專回覆報名結果，我們會盡快確認時段。" },
                  { n: "03", t: "CLASS STARTS",    d: "每時段課程報名達開課人數後才會正式開班，粉專會不定時公告開課進度。" },
                  { n: "04", t: "PRIVATE PACK",    d: "如有包班需求歡迎洽詢，全天時段皆可預約。" },
                ].map(s => (
                  <div key={s.n} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24, padding: "32px 0", borderBottom: "1px solid var(--hairline-soft)" }}>
                    <span className="caption" style={{ opacity: 0.6 }}>{s.n}</span>
                    <div>
                      <div className="display" style={{ fontSize: 24 }}>{s.t}</div>
                      <div style={{ fontSize: 16, lineHeight: 1.6, marginTop: 8 }}>{s.d}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32 }}>
                <button className="btn" onClick={openSignup}>線上預約報名 <span className="arrow">↗</span></button>
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
              <div>
                <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>LOCATION</div>
                <div className="display" style={{ fontSize: 40, marginBottom: 16 }}>台中 · 北屯</div>
                <div style={{ fontSize: 16, lineHeight: 1.7 }}>
                  旱溪東路三段 20 號<br/>
                  24.1813° N · 120.7184° E
                </div>
              </div>

              {/* abstract location plate */}
              <div style={{ aspectRatio: "1.4/1", border: "1px solid var(--hairline)", position: "relative", overflow: "hidden" }}>
                {/* grid pattern */}
                <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
                  <defs>
                    <pattern id="map-grid" width="32" height="32" patternUnits="userSpaceOnUse">
                      <path d="M 32 0 L 0 0 0 32" fill="none" stroke="var(--hairline-soft)" strokeWidth="0.5" />
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#map-grid)" />
                  {/* abstract roads */}
                  <line x1="20%" y1="0" x2="50%" y2="100%" stroke="var(--gold)" strokeWidth="1" opacity="0.5" />
                  <line x1="0" y1="40%" x2="100%" y2="65%" stroke="var(--gold)" strokeWidth="1" opacity="0.5" />
                  <line x1="80%" y1="0" x2="40%" y2="100%" stroke="var(--gold)" strokeWidth="1" opacity="0.3" />
                </svg>
                <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", textAlign: "center" }}>
                  <Shield size={48} />
                  <div className="caption" style={{ opacity: 0.7, marginTop: 12 }}>HQ — STUDIO 01</div>
                </div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--hairline)" }}>
                <a href="#" style={{ padding: 24, borderRight: "1px solid var(--hairline)" }}>
                  <div className="caption" style={{ opacity: 0.6 }}>FACEBOOK</div>
                  <div className="display" style={{ fontSize: 20, marginTop: 8 }}>Attack First</div>
                  <div className="caption" style={{ marginTop: 24 }}>OPEN ↗</div>
                </a>
                <a href="#" style={{ padding: 24 }}>
                  <div className="caption" style={{ opacity: 0.6 }}>INSTAGRAM</div>
                  <div className="display" style={{ fontSize: 20, marginTop: 8 }}>@attackfirst.cycling</div>
                  <div className="caption" style={{ marginTop: 24 }}>OPEN ↗</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

/* ===== SIGNUP MODAL ===== */
function SignupModal({ onClose }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({ plan: "", course: "", slot: "", name: "", phone: "", channel: "" });
  const setF = (k, v) => setData(d => ({ ...d, [k]: v }));
  const totalSteps = 4;

  useEffect(() => {
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [onClose]);

  const next = () => setStep(s => Math.min(s + 1, totalSteps));
  const back = () => setStep(s => Math.max(s - 1, 1));

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.92)", backdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, animation: "fadeUp 0.2s ease" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 720, maxHeight: "92vh", background: "var(--canvas)", border: "1px solid var(--hairline)", display: "flex", flexDirection: "column" }}>
        {/* header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: 48, paddingBottom: 32 }}>
          <div>
            <div className="caption" style={{ opacity: 0.6, marginBottom: 12 }}>// SIGNUP — 報名預約</div>
            <div className="display" style={{ fontSize: 40 }}>{step < totalSteps ? "ATTACK FIRST." : "RECEIVED."}</div>
          </div>
          <button onClick={onClose} className="btn" style={{ paddingBottom: 4 }}>CLOSE ✕</button>
        </div>

        {/* progress */}
        <div style={{ padding: "0 48px" }}>
          <div style={{ display: "flex", gap: 4, marginBottom: 12 }}>
            {Array.from({ length: totalSteps }).map((_, i) => (
              <div key={i} style={{ flex: 1, height: 1, background: i < step ? "var(--gold)" : "var(--hairline-soft)" }} />
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className="caption" style={{ opacity: 0.6 }}>STEP {step} / {totalSteps}</span>
            <span className="caption" style={{ opacity: 0.6 }}>{["", "PLAN", "PROGRAM", "DETAILS", "DONE"][step]}</span>
          </div>
        </div>

        {/* body */}
        <div style={{ padding: 48, flex: 1, overflowY: "auto", minHeight: 280 }}>
          {step === 1 && <Step1 data={data} setF={setF} />}
          {step === 2 && <Step2 data={data} setF={setF} />}
          {step === 3 && <Step3 data={data} setF={setF} />}
          {step === 4 && <Step4 data={data} />}
        </div>

        {/* footer */}
        <div style={{ padding: "24px 48px 32px", borderTop: "1px solid var(--hairline-soft)", display: "flex", gap: 32 }}>
          {step > 1 && step < totalSteps && (
            <button className="btn" onClick={back}>← 上一步</button>
          )}
          {step < totalSteps && (
            <button className="btn" onClick={next} style={{ marginLeft: "auto", opacity: ((step === 1 && !data.plan) || (step === 2 && (!data.course || !data.slot)) || (step === 3 && (!data.name || !data.phone))) ? 0.3 : 1, pointerEvents: ((step === 1 && !data.plan) || (step === 2 && (!data.course || !data.slot)) || (step === 3 && (!data.name || !data.phone))) ? "none" : "auto" }}>
              {step === 3 ? "送出報名" : "下一步"} <span className="arrow">↗</span>
            </button>
          )}
          {step === totalSteps && (
            <button className="btn" onClick={onClose} style={{ marginLeft: "auto" }}>關閉 <span className="arrow">↗</span></button>
          )}
        </div>
      </div>
    </div>
  );
}

function Step1({ data, setF }) {
  const opts = [
    { id: "trial",   t: "TRIAL",   ch: "首次體驗",        d: "350 / 堂 (試營運價，每人限一次)" },
    { id: "single",  t: "SINGLE",  ch: "單堂報名",        d: "團體 500 / 堂 · 熱適應 700 / 堂" },
    { id: "elite",   t: "ELITE",   ch: "包月 — 精實訓練",  d: "$4,500 / 月 · 每月 10 堂" },
    { id: "addict",  t: "ADDICT",  ch: "包月 — 重度成癮",  d: "$6,500 / 月 · 每月 15 堂" },
    { id: "private", t: "PRIVATE", ch: "個人 / 包班",      d: "1500/hr 起 · 私訊報價" },
  ];
  return (
    <div style={{ borderTop: "1px solid var(--hairline-soft)" }}>
      {opts.map(o => (
        <button key={o.id}
                onClick={() => setF("plan", o.id)}
                style={{ width: "100%", display: "grid", gridTemplateColumns: "100px 1fr 1fr 24px", gap: 16, alignItems: "center", padding: "20px 16px 20px 0", borderBottom: "1px solid var(--hairline-soft)", textAlign: "left", background: data.plan === o.id ? "rgba(168,128,79,0.05)" : "transparent", paddingLeft: data.plan === o.id ? 16 : 0, transition: "padding-left 0.3s, background 0.2s" }}>
          <span className="caption" style={{ opacity: 0.6 }}>{o.t}</span>
          <span className="display" style={{ fontSize: 22 }}>{o.ch}</span>
          <span style={{ fontSize: 14, opacity: 0.85 }}>{o.d}</span>
          <span style={{ textAlign: "right", fontSize: 16, opacity: data.plan === o.id ? 1 : 0.3 }}>{data.plan === o.id ? "●" : "○"}</span>
        </button>
      ))}
    </div>
  );
}

function Step2({ data, setF }) {
  const courses = ["基礎有氧", "VO2 MAX", "閾值訓練", "熱適應訓練", "初階滾筒", "中階滾筒"];
  const slots = ["7:00–8:20", "8:40–10:00", "17:20–18:40", "19:00–20:20", "20:40–22:00"];
  return (
    <div>
      <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// 選擇課程類別</div>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 48 }}>
        {courses.map(c => (
          <Chip key={c} active={data.course === c} onClick={() => setF("course", c)}>{c}</Chip>
        ))}
      </div>
      <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// 偏好時段</div>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        {slots.map(s => (
          <Chip key={s} active={data.slot === s} onClick={() => setF("slot", s)}>{s}</Chip>
        ))}
      </div>
    </div>
  );
}

function Chip({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{ padding: "10px 16px", border: "1px solid " + (active ? "var(--gold)" : "var(--hairline-soft)"), background: active ? "var(--gold)" : "transparent", color: active ? "#000" : "var(--gold)", fontSize: 14, fontWeight: 400, transition: "all 0.2s" }}>{children}</button>
  );
}

function Step3({ data, setF }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
      <Field label="姓名 / 暱稱 — NAME" value={data.name} onChange={(v) => setF("name", v)} placeholder="您怎麼稱呼？" />
      <Field label="手機 / LINE ID — CONTACT" value={data.phone} onChange={(v) => setF("phone", v)} placeholder="0912-345-678" />
      <div>
        <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// 聯絡管道 — CHANNEL</div>
        <div style={{ display: "flex", gap: 12 }}>
          {["Facebook", "Instagram", "電話"].map(c => (
            <Chip key={c} active={data.channel === c} onClick={() => setF("channel", c)}>{c}</Chip>
          ))}
        </div>
      </div>
    </div>
  );
}

function Step4({ data }) {
  return (
    <div style={{ textAlign: "center", padding: "32px 0" }}>
      <div style={{ marginBottom: 32, color: "var(--gold)" }}><Shield size={64} /></div>
      <div className="display" style={{ fontSize: 48 }}>RECEIVED.</div>
      <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7 }}>
        我們會在 24 小時內透過 <strong>{data.channel || "粉專"}</strong> 與你聯繫。<br/>
        歡迎加入國王俱樂部 — Attack First.
      </p>
      <div style={{ marginTop: 48, padding: 24, border: "1px solid var(--hairline-soft)", textAlign: "left" }}>
        {[
          ["PLAN",    data.plan],
          ["COURSE",  data.course],
          ["SLOT",    data.slot],
          ["NAME",    data.name],
          ["CONTACT", data.phone],
        ].map(([k, v]) => (
          <div key={k} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "8px 0" }}>
            <span className="caption" style={{ opacity: 0.6 }}>{k}</span>
            <span style={{ fontSize: 14 }}>{v || "—"}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder }) {
  return (
    <label style={{ display: "block" }}>
      <div className="caption" style={{ opacity: 0.6, marginBottom: 8 }}>// {label}</div>
      <input type="text" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className="input" />
    </label>
  );
}

window.AboutPage = AboutPage;
window.ContactPage = ContactPage;
window.SignupModal = SignupModal;