/* ===== HOME — Bastion-style empty stage + mega wordmark ===== */
function HomePage({ navigate, openSignup }) {
  return (
    <>
      <Hero openSignup={openSignup} navigate={navigate} />
      <HomeManifesto navigate={navigate} />
      <HomePrograms navigate={navigate} />
      <HomeStudio />
      <HomeWordmark />
      <HomeCTA openSignup={openSignup} navigate={navigate} />
    </>
  );
}

/* ============ HERO — empty stage, centered shield ============ */
function Hero({ openSignup, navigate }) {
  return (
    <section style={{ minHeight: "100vh", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 140, paddingBottom: 64 }}>
      {/* faint vignette */}
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 50%, rgba(168,128,79,0.05) 0%, transparent 60%)", pointerEvents: "none" }} />

      {/* tiny coordinate marks */}
      <div className="container" style={{ position: "relative", display: "flex", justifyContent: "space-between" }}>
        <span className="caption" style={{ opacity: 0.6 }}>// EST 2026 — ROAD CYCLING TRAINING</span>
        <span className="caption" style={{ opacity: 0.6 }}>24.18°N · 120.71°E</span>
      </div>

      {/* CENTRAL SHIELD */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ color: "var(--gold)" }}>
            <Shield size={220} />
          </div>
          <div style={{ marginTop: 32, fontSize: 12, fontWeight: 500, letterSpacing: 4, textTransform: "uppercase", color: "var(--gold)", opacity: 0.7 }}>
            ATTACK&nbsp;·&nbsp;FIRST
          </div>
        </div>
      </div>

      {/* bottom info row */}
      <div className="container" style={{ position: "relative" }}>
        <div className="hairline-soft" style={{ marginBottom: 32 }} />
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, alignItems: "end" }}>
          <div>
            <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>// MANIFESTO</div>
            <div style={{ fontSize: 16, lineHeight: 1.5, maxWidth: "32ch" }}>
              室內訓練基地 · 為熱愛公路車競技的人。功率、滾筒、熱適應 — 一切從這裡開始。
            </div>
          </div>
          <div>
            <div className="caption" style={{ opacity: 0.6, marginBottom: 8 }}>OPENING</div>
            <div className="display" style={{ fontSize: 28, color: "var(--gold)" }}>05.18.2026</div>
          </div>
          <div>
            <div className="caption" style={{ opacity: 0.6, marginBottom: 8 }}>STUDIO</div>
            <div style={{ fontSize: 16 }}>台中 · 北屯</div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
            <button className="btn" onClick={openSignup}>立即預約 <span className="arrow">↗</span></button>
            <button className="btn" onClick={() => navigate("courses")}>探索課程 <span className="arrow">↗</span></button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ MANIFESTO BAND ============ */
function HomeManifesto({ navigate }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96 }}>
          <div>
            <div className="caption" style={{ opacity: 0.6, marginBottom: 24 }}>// 01 — INTENT</div>
            <div className="display" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.95 }}>
              在賽道上，<br/>
              機會只給<br/>
              先發制人的人。
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24, paddingTop: 16 }}>
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "52ch" }}>
              ATTACK FIRST CYCLING 國王單車俱樂部位於台中北屯。我們不是健身房，也不是飛輪教室 — 是一座完全為公路車競技與耐力訓練設計的室內基地。
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "52ch" }}>
              選手規格的 Magene 智能訓練系統、CORE 體溫感測器，搭配 TrainingPeaks Premium 帳號為核心，將每一次踩踏量化成可追蹤的進步。
            </p>
            <div style={{ marginTop: 24 }}>
              <button className="btn" onClick={() => navigate("about")}>關於 ATTACK FIRST <span className="arrow">↗</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PROGRAMS LIST (no cards — list with hairlines) ============ */
function HomePrograms({ navigate }) {
  const items = [
    { num: "01", name: "ENDURANCE",  ch: "基礎有氧",  zone: "ZONE 2",     dur: "80 MIN" },
    { num: "02", name: "VO2 MAX",    ch: "無氧間歇",  zone: "ZONE 5–6",   dur: "80 MIN" },
    { num: "03", name: "THRESHOLD",  ch: "閾值訓練",  zone: "88–94% FTP", dur: "80 MIN" },
    { num: "04", name: "HEAT-ADAPT", ch: "熱適應訓練", zone: "CORE 監測",  dur: "80 MIN" },
    { num: "05", name: "ROLLER 01",  ch: "初階滾筒",  zone: "BALANCE",    dur: "60 MIN" },
    { num: "06", name: "ROLLER 02",  ch: "中階滾筒",  zone: "REFLEX",     dur: "60 MIN" },
  ];
  return (
    <section className="section-tight">
      <div className="container">
        <div className="section-head">
          <span className="marker">// 02 — PROGRAMS</span>
          <h2 className="section-title">CORE<br/>PROGRAMS</h2>
        </div>
        <div style={{ borderTop: "1px solid var(--hairline)" }}>
          {items.map((p, i) => (
            <div key={p.num}
                 onClick={() => navigate("courses")}
                 style={{ display: "grid", gridTemplateColumns: "100px 1fr 1fr 1fr 1fr 60px", gap: 24, alignItems: "center", padding: "32px 0", borderBottom: "1px solid var(--hairline-soft)", cursor: "pointer", transition: "padding-left 0.3s ease" }}
                 onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "16px"}
                 onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}>
              <span className="caption" style={{ opacity: 0.6 }}>{p.num} /</span>
              <span className="display" style={{ fontSize: 32 }}>{p.name}</span>
              <span style={{ fontSize: 16 }}>{p.ch}</span>
              <span className="caption" style={{ opacity: 0.7 }}>{p.zone}</span>
              <span className="caption" style={{ opacity: 0.7 }}>{p.dur}</span>
              <span style={{ textAlign: "right", fontSize: 18 }}>↗</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 64 }}>
          <button className="btn" onClick={() => navigate("courses")}>檢視全部課程 <span className="arrow">↗</span></button>
        </div>
      </div>
    </section>
  );
}

/* ============ STUDIO SPECS (mini banner, like brand specs panel) ============ */
function HomeStudio() {
  const specs = [
    { k: "TRAINER",     v: "MAGENE T100" },
    { k: "POWER METER", v: "MAGENE P325" },
    { k: "ROLLER",      v: "ELITE NERO"  },
    { k: "CORE TEMP",   v: "CORE SENSOR" },
    { k: "SOFTWARE",    v: "TRAININGPEAKS+" },
    { k: "CHAMBER",     v: "HEAT-ADAPT" },
  ];
  return (
    <section className="section-tight">
      <div className="container">
        <div className="section-head">
          <span className="marker">// 03 — STUDIO</span>
          <h2 className="section-title">PRECISION<br/>BY DESIGN.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--hairline)", borderLeft: "1px solid var(--hairline-soft)" }}>
          {specs.map(s => (
            <div key={s.k} style={{ padding: "40px 32px", borderRight: "1px solid var(--hairline-soft)", borderBottom: "1px solid var(--hairline-soft)" }}>
              <div className="caption" style={{ opacity: 0.6, marginBottom: 16 }}>{s.k}</div>
              <div className="display" style={{ fontSize: 32 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ MEGA WORDMARK BAND ============ */
function HomeWordmark() {
  return (
    <section style={{ padding: "200px 0 160px", borderTop: "1px solid var(--hairline)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 48 }}>
          <span className="caption" style={{ opacity: 0.6 }}>// 04 — DOCTRINE</span>
          <span className="caption" style={{ opacity: 0.6 }}>EST&nbsp;·&nbsp;2026</span>
        </div>
        <div className="footer-mega" style={{ margin: 0 }}>FIRST&nbsp;ATTACK&nbsp;WIN.</div>
      </div>
    </section>
  );
}

/* ============ CTA — minimal text ============ */
function HomeCTA({ openSignup, navigate }) {
  return (
    <section className="section-tight">
      <div className="container">
        <div className="hairline-soft" style={{ marginBottom: 64 }} />
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 96 }}>
          <div className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.95 }}>
            JOIN THE CLUB.<br/>
            <span style={{ opacity: 0.5 }}>OR DON'T.</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 24 }}>
            <p style={{ fontSize: 16, lineHeight: 1.6, maxWidth: "44ch" }}>
              試營運期間 6 月底前報名 — 全方案 95 折，首次體驗 350 / 堂。
            </p>
            <div style={{ display: "flex", gap: 32, marginTop: 16 }}>
              <button className="btn" onClick={openSignup}>立即報名 <span className="arrow">↗</span></button>
              <button className="btn" onClick={() => navigate("pricing")}>查看方案 <span className="arrow">↗</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;