/* ===== PRICING — Bastion-styled, no pill cards ===== */
function PricingPage({ navigate, openSignup }) {
  const [mode, setMode] = useState("monthly");

  return (
    <>
      <PageHero marker="// MEMBERSHIP" titleA="PICK YOUR" titleB="WEAPON."
                sub="包月會員享更多堂數與商品折扣 · 單堂報名彈性最高 · 6 月底前報名享試營運 95 折優惠。" />

      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container">
          {/* Toggle as text-style tabs with hairlines */}
          <div style={{ display: "flex", gap: 48, borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline-soft)", marginBottom: 96 }}>
            {[
              { id: "monthly", t: "包月會員", en: "MONTHLY MEMBERSHIP" },
              { id: "single",  t: "單堂 / 私人", en: "PER CLASS / PRIVATE" },
            ].map(o => (
              <button key={o.id} onClick={() => setMode(o.id)}
                      style={{ padding: "32px 0", textAlign: "left", display: "flex", flexDirection: "column", gap: 8, position: "relative", opacity: mode === o.id ? 1 : 0.4, transition: "opacity 0.2s" }}>
                {mode === o.id && <span style={{ position: "absolute", top: -1, left: 0, width: "100%", height: 2, background: "var(--gold)" }} />}
                <span className="caption">{o.en}</span>
                <span className="display" style={{ fontSize: 32 }}>{o.t}</span>
              </button>
            ))}
          </div>

          {mode === "monthly" ? <MonthlyPlans openSignup={openSignup} /> : <SingleClassPricing openSignup={openSignup} />}

          {/* Promo */}
          <div style={{ marginTop: 96, padding: "64px 0", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end" }}>
            <div>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// LIMITED · 試營運優惠</div>
              <div className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 0.95 }}>
                6 月底前<br/>
                全方案 95 折
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <button className="btn" onClick={openSignup}>鎖定優惠 <span className="arrow">↗</span></button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function MonthlyPlans({ openSignup }) {
  const plans = [
    {
      id: "elite", num: "01", name: "ELITE", ch: "精實訓練", price: 4500,
      headline: "每月 10 堂 — 認真備賽的常態課表",
      features: ["團體課程 每月 10 堂 (熱適應除外)", "第 11 堂起 500 / 堂", "熱適應訓練 500 / 堂", "飲品 & 商品折扣優惠", "特定活動備賽秘笈"],
    },
    {
      id: "addict", num: "02", name: "ADDICT", ch: "重度成癮", price: 6500,
      headline: "每月 15 堂 — 把每天訓練排進來",
      features: ["團體課程 每月 15 堂 (熱適應除外)", "第 16 堂起 500 / 堂", "熱適應訓練 500 / 堂", "飲品 & 商品折扣優惠", "特定活動備賽秘笈", "包月會員專屬訓練社群"],
    },
  ];

  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--hairline)" }}>
        {plans.map((p, i) => (
          <div key={p.id} style={{ padding: 48, borderRight: i === 0 ? "1px solid var(--hairline)" : "none", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
              <span className="caption" style={{ opacity: 0.6 }}>PLAN {p.num}</span>
              <span className="caption">{p.name}</span>
            </div>
            <div className="display" style={{ fontSize: 64, lineHeight: 0.95 }}>{p.ch}</div>
            <div style={{ fontSize: 16, marginTop: 16, marginBottom: 48, opacity: 0.85 }}>{p.headline}</div>
            <div style={{ paddingTop: 32, borderTop: "1px solid var(--hairline-soft)", marginBottom: 48 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                <span className="display" style={{ fontSize: 88, lineHeight: 1 }}>${p.price.toLocaleString()}</span>
                <span style={{ fontSize: 16 }}>/ 月</span>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0, flex: 1, marginBottom: 48 }}>
              {p.features.map((f, idx) => (
                <div key={f} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, padding: "16px 0", borderTop: "1px solid var(--hairline-soft)" }}>
                  <span className="caption" style={{ opacity: 0.6 }}>0{idx + 1}</span>
                  <span style={{ fontSize: 16, lineHeight: 1.5 }}>{f}</span>
                </div>
              ))}
            </div>
            <button className="btn" onClick={openSignup} style={{ alignSelf: "flex-start" }}>選擇方案 <span className="arrow">↗</span></button>
          </div>
        ))}
      </div>

      {/* Discount stack */}
      <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--hairline)" }}>
        <div style={{ padding: 32, borderRight: "1px solid var(--hairline)" }}>
          <div className="caption" style={{ opacity: 0.6, marginBottom: 12 }}>SEASON 季繳</div>
          <div className="display" style={{ fontSize: 28 }}>3 個月 · 折 500 元</div>
        </div>
        <div style={{ padding: 32 }}>
          <div className="caption" style={{ opacity: 0.6, marginBottom: 12 }}>ANNUAL 年繳</div>
          <div className="display" style={{ fontSize: 28 }}>1 年 · 送 1 個月</div>
        </div>
      </div>
    </>
  );
}

function SingleClassPricing({ openSignup }) {
  const rows = [
    { name: "團體課程 (熱適應除外)", price: "600 / 堂", trial: "首次體驗 400 / 堂", promo: "試營運 500 / 堂", promoTrial: "首次體驗 350 / 堂" },
    { name: "熱適應訓練", price: "800 / 堂", trial: "首次體驗 600 / 堂", promo: "試營運 700 / 堂", promoTrial: "首次體驗 550 / 堂" },
    { name: "個人技巧課 1 對 1", price: "1500 / 小時", trial: "(室內 / 外騎)", promo: null },
    { name: "個人技巧課 1 對 2", price: "2000 / 小時", trial: "外騎跨縣市車馬費另計", promo: null },
    { name: "團體包班", price: "依需求報價", trial: "請私訊洽詢", promo: null },
    { name: "個人化訓練課表", price: "3800 / 月", trial: "含 TrainingPeaks Premium", promo: null },
  ];
  return (
    <div style={{ border: "1px solid var(--hairline)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", padding: "20px 32px", borderBottom: "1px solid var(--hairline)" }}>
        <span className="caption" style={{ opacity: 0.6 }}>課程類別</span>
        <span className="caption" style={{ opacity: 0.6 }}>課程定價</span>
        <span className="caption" style={{ opacity: 0.6 }}>試營運優惠</span>
      </div>
      {rows.map((r, i) => (
        <div key={r.name} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", padding: "32px", borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--hairline-soft)", alignItems: "center" }}>
          <div style={{ fontSize: 16 }}>{r.name}</div>
          <div>
            <div className="display" style={{ fontSize: 24 }}>{r.price}</div>
            {r.trial && <div className="caption" style={{ opacity: 0.6, marginTop: 4 }}>{r.trial}</div>}
          </div>
          <div>
            {r.promo ? (
              <>
                <div className="display" style={{ fontSize: 24 }}>{r.promo}</div>
                {r.promoTrial && <div className="caption" style={{ opacity: 0.6, marginTop: 4 }}>{r.promoTrial}</div>}
              </>
            ) : (
              <span className="caption" style={{ opacity: 0.3 }}>—</span>
            )}
          </div>
        </div>
      ))}
      <div style={{ padding: 16, borderTop: "1px solid var(--hairline)", textAlign: "center" }}>
        <span className="caption" style={{ opacity: 0.5 }}>* 首次體驗優惠每人限用一次</span>
      </div>
    </div>
  );
}

window.PricingPage = PricingPage;