// Home page — Fitbull Training Lab
const { useState, useEffect, useRef } = React;

function HomeHero() {
  return (
    <section className="ink-bg" style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid rgba(245,241,234,.18)" }}>
      <div className="wrap" style={{ paddingTop: 56, paddingBottom: 56 }}>
        {/* Top meta row */}
        <div className="row between center" style={{ marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
          <div className="eyebrow"><span className="dot"></span>EST. 2016 · PANGYO · STUDIO N°01</div>
          <div className="mono" style={{ color: "var(--concrete)" }}>NOW TRAINING — 14 / 16 SESSIONS BOOKED</div>
        </div>

        {/* Display headline */}
        <Reveal>
          <h1 className="display" style={{ color: "var(--bone)" }}>
            TRAINING<br/>
            IS<span style={{ color: "var(--accent)" }}>·</span>A<br/>
            <span style={{ display: "inline-flex", alignItems: "center", gap: "0.1em" }}>
              SKILL<BigStar className="spin" style={{ width: "0.9em", height: "0.9em", marginLeft: "0.2em" }} />
            </span>
          </h1>
        </Reveal>

        {/* Sub row */}
        <div className="row between" style={{ marginTop: 56, gap: 32, flexWrap: "wrap" }}>
          <Reveal delay={120} style={{ maxWidth: 540 }}>
            <p className="lead">
              <strong style={{ color: "var(--bone)" }}>30~40대부터 다시 시작하는 몸.</strong> 핏불 트레이닝랩은 통증을
              먼저 잡고, 근력과 퍼포먼스를 쌓아 올리는 1:1 PT 스튜디오입니다. 무리한 자극이 아니라,
              당신의 몸에 맞는 가장 정직한 진단부터.
            </p>
            <div className="row gap-12" style={{ marginTop: 32, flexWrap: "wrap" }}>
              <a href="contact.html" className="btn">
                무료체험 예약 <span className="arrow">→</span>
              </a>
              <a href="programs.html" className="btn btn-ghost">프로그램 보기</a>
            </div>
          </Reveal>

          <Reveal delay={240}>
            <div className="col gap-16" style={{ minWidth: 280 }}>
              <div className="row between" style={{ borderTop: "1px solid rgba(245,241,234,.4)", paddingTop: 12 }}>
                <span className="mono" style={{ color: "var(--concrete)" }}>회원 평균 연령</span>
                <span className="num" style={{ fontSize: 32, color: "var(--bone)" }}>47.3</span>
              </div>
              <div className="row between" style={{ borderTop: "1px solid rgba(245,241,234,.4)", paddingTop: 12 }}>
                <span className="mono" style={{ color: "var(--concrete)" }}>통증 회복률</span>
                <span className="num" style={{ fontSize: 32, color: "var(--bone)" }}>92<span style={{ fontSize: 18, color: "var(--accent)" }}>%</span></span>
              </div>
              <div className="row between" style={{ borderTop: "1px solid rgba(245,241,234,.4)", paddingTop: 12 }}>
                <span className="mono" style={{ color: "var(--concrete)" }}>운영 10년차</span>
                <span className="num" style={{ fontSize: 32, color: "var(--bone)" }}>2016→</span>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Hero image strip */}
        <Reveal delay={360}>
          <div style={{
            marginTop: 80,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 1,
            background: "rgba(245,241,234,.18)",
            border: "1px solid rgba(245,241,234,.18)",
          }}>
            <div style={{ position: "relative", aspectRatio: "4/3", background: "#0A0A0A", overflow: "hidden" }}>
              <img src="assets/gym/training-floor.jpg" alt="FITBULL GYM · 트레이닝 플로어" loading="lazy"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              <span style={{ position: "absolute", top: 12, left: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>N°01 · TRAINING FLOOR</span>
              <span style={{ position: "absolute", bottom: 12, right: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>↗ 분당 동판교</span>
            </div>
            <div style={{ position: "relative", aspectRatio: "4/3", background: "#0A0A0A", overflow: "hidden" }}>
              <img src="assets/gym/trainers-group.jpeg" alt="FITBULL GYM · 트레이너 단체" loading="lazy"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              <span style={{ position: "absolute", top: 12, left: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>N°02 · TRAINER</span>
              <span style={{ position: "absolute", bottom: 12, right: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>↗ 6 SPECIALISTS</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ManifestoBlock() {
  return (
    <section style={{ padding: "120px 0", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 40, alignItems: "start" }}>
          <Reveal>
            <div className="mono" style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: ".2em" }}>
              MANIFESTO · 02
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>WHY FITBULL</div>
            <h2 className="display-kr">
              나이 들수록<br/>
              <span style={{ color: "var(--accent)" }}>더 잘</span> 움직여야 합니다.
            </h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginTop: 64 }}>
              {[
                { n: "01", t: "통증부터 끊는다", b: "허리·무릎·어깨 — 만성 통증을 임상 평가로 식별하고, 운동치료와 교정으로 먼저 잡아냅니다." },
                { n: "02", t: "근력은 약이다", b: "근감소(sarcopenia)는 40대부터 시작됩니다. 정직한 무게로, 평생 사용할 근육을 만듭니다." },
                { n: "03", t: "퍼포먼스로 증명", b: "데드리프트·스쿼트·턱걸이 — 측정 가능한 지표로 매달 결과를 보여드립니다." },
                { n: "04", t: "1:1 또는 2:1만", b: "그룹 클래스 없음. 트레이너 한 명이 회원 한 명에게만 집중합니다." },
              ].map(it => (
                <div key={it.n} style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 16 }}>
                  <div className="num" style={{ fontSize: 48, lineHeight: 1, marginBottom: 12 }}>{it.n}</div>
                  <h3 className="h3" style={{ marginBottom: 12 }}>{it.t}</h3>
                  <p style={{ color: "rgba(10,10,10,.7)", margin: 0, fontSize: 15, lineHeight: 1.55 }}>{it.b}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const PROGRAMS = [
  { n: "01", code: "PRE-HAB", title: "통증케어 / 재활", time: "50 MIN", img: "assets/gym/rehab.jpeg", desc: "임상 평가 → 교정운동 → 점진 회복. 정형외과·도수치료 후속 프로그램.", tag: "MOST BOOKED" },
  { n: "02", code: "S&C/40+", title: "트레이닝 & 컨디셔닝", time: "50 MIN", img: "assets/gym/strength.png", desc: "골밀도·근감소를 늦추는 정직한 웨이트. 스쿼트·데드리프트·프레스 위주.", tag: null },
  { n: "03", code: "MOBILITY", title: "관절 가동성", time: "50 MIN", img: "assets/gym/mobility.jpeg", desc: "고관절·흉추·어깨. 통증 없는 풀 ROM을 회복합니다.", tag: null },
  { n: "04", code: "PERFORM", title: "퍼포먼스 PT", time: "50 MIN", img: "assets/gym/perform.jpg", desc: "마라톤·테니스·골프 — 종목별 보강. 체력검사 기반 주기화.", tag: "PRO" },
];

function ProgramsStrip() {
  return (
    <section className="ink-bg" style={{ padding: "120px 0" }}>
      <div className="wrap">
        <div className="row between center" style={{ marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>04 PROGRAMS / 프로그램</div>
            <h2 className="h1" style={{ color: "var(--bone)" }}>
              METHOD<br/>
              <span style={{ color: "var(--accent)" }}>OVER</span> MAGIC.
            </h2>
          </div>
          <a href="programs.html" className="btn">전체 보기 <span className="arrow">→</span></a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "rgba(245,241,234,.18)", border: "1px solid rgba(245,241,234,.18)" }}
          className="programs-grid">
          {PROGRAMS.map((p, i) => (
            <Reveal key={p.n} delay={i * 80}>
              <a href="programs.html" className="program-card">
                <div className="row between center" style={{ marginBottom: 24 }}>
                  <span className="num" style={{ fontSize: 14, color: "var(--concrete)" }}>{p.n}</span>
                  {p.tag && <span className="tag accent">{p.tag}</span>}
                </div>
                {p.img ? (
                  <div style={{ position: "relative", aspectRatio: "1/1", marginBottom: 24, background: "#0A0A0A", overflow: "hidden", border: "1px solid rgba(245,241,234,.12)" }}>
                    <img src={p.img} alt={p.title} loading="lazy"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                    <span style={{ position: "absolute", top: 10, left: 10, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>{p.code}</span>
                    <span style={{ position: "absolute", bottom: 10, right: 10, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--bone)", background: "rgba(0,0,0,.55)", padding: "4px 8px" }}>↗</span>
                  </div>
                ) : (
                  <div className="placeholder dark" style={{ aspectRatio: "1/1", marginBottom: 24 }}>
                    <span className="ph-tl">{p.code}</span>
                    <span className="ph-br">↗</span>
                  </div>
                )}
                <div className="mono" style={{ color: "var(--concrete)", marginBottom: 8 }}>{p.code} · {p.time}</div>
                <h3 className="h3" style={{ color: "var(--bone)", marginBottom: 12 }}>{p.title}</h3>
                <p style={{ color: "rgba(245,241,234,.7)", margin: 0, fontSize: 14, lineHeight: 1.5 }}>{p.desc}</p>
                <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--bone)" }}>
                  <span className="mono">VIEW PROGRAM</span>
                  <span style={{ fontSize: 24 }}>→</span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .program-card {
          background: var(--ink);
          padding: 24px;
          display: block;
          height: 100%;
          transition: background .2s ease;
        }
        .program-card:hover { background: var(--ink-2); }
        .program-card:hover h3 { color: var(--accent); }
        @media (max-width: 920px) { .programs-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) { .programs-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function StatsBand() {
  const stats = [
    { n: "1,240+", l: "ACTIVE MEMBERS / 누적 회원" },
    { n: "10 YR", l: "OPERATIONAL / 운영 연차" },
    { n: "92%",  l: "PAIN-FREE / 통증 개선률" },
    { n: "6",    l: "SPECIALISTS / 정규 트레이너" },
  ];
  return (
    <section style={{ padding: "32px 0", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="stats-grid">
          {stats.map((s, i) => (
            <div key={i} style={{
              borderLeft: i === 0 ? "none" : "1px solid var(--rule-strong)",
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              <div className="num" style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1 }}>{s.n}</div>
              <div className="mono" style={{ marginTop: 12, color: "rgba(10,10,10,.6)" }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } .stats-grid > * { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--rule-strong); padding-top: 16px; } }`}</style>
    </section>
  );
}

const TRAINERS = [
  { n: "01", name: "박재현", en: "Jaehyun Park", role: "MASTER TRAINER", cred: "NASM CES · NSCA CPT · SFMA",   img: "assets/trainers/01-jaehyun.png" },
  { n: "02", name: "박천후", en: "Cheon Hoo Park", role: "TRAINING & CONDITIONING", cred: "NSCA-CSCS · TSAC-F · 건강운동관리사", img: "assets/trainers/02-cheonhoo.png" },
  { n: "03", name: "김세훈", en: "SeHoon Kim", role: "REHAB SPECIALIST", cred: "물리치료사 · RAD · Soft Tissue",   img: "assets/trainers/03-sehoon.png" },
  { n: "04", name: "김예진", en: "Yejin Kim",   role: "TRAINER · 교정운동",       cred: "NASM CES · Blackroll · Polar",  img: "assets/trainers/06-yejin.png" },
];

function TrainersPreview() {
  return (
    <section style={{ padding: "120px 0", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div className="section-head" style={{ borderTop: "none", padding: 0, marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>03 TRAINERS / 코치진</div>
            <h2 className="h1">
              MEET THE<br/>
              <span style={{ fontStyle: "italic", fontFamily: "Georgia, serif", fontWeight: 400 }}>specialists.</span>
            </h2>
          </div>
          <div style={{ alignSelf: "end" }}>
            <p className="lead">
              임상운동학·물리치료·NSCA-CSCS·NASM CES 등 국제 자격을 보유한
              정규 트레이너만 운영합니다. 파트타임 없음, 외주 없음.
            </p>
            <a href="trainers.html" className="btn btn-ghost" style={{ marginTop: 24 }}>전체 코치진 →</a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }} className="trainers-grid">
          {TRAINERS.map((t, i) => (
            <Reveal key={t.n} delay={i * 80}>
              <a href="trainers.html" className="trainer-card">
                <div style={{
                  position: "relative", aspectRatio: "3/4", marginBottom: 16,
                  background: "#0A0A0A", border: "1px solid var(--rule-strong)",
                  overflow: "hidden",
                }}>
                  <img src={t.img} alt={`${t.name} – ${t.role}`}
                    style={{
                      position: "absolute", inset: 0,
                      width: "100%", height: "100%",
                      objectFit: "cover", objectPosition: "center top",
                    }} />
                  <span className="cap" style={{
                    position: "absolute", top: 10, left: 10,
                    background: "var(--accent)", color: "var(--accent-ink)",
                    padding: "5px 8px", letterSpacing: ".1em", fontSize: 10,
                  }}>N°{t.n}</span>
                </div>
                <div className="cap" style={{ marginBottom: 12 }}>
                  <span>{t.role}</span>
                  <span>{t.n}</span>
                </div>
                <h3 className="h3" style={{ marginBottom: 4 }}>{t.name}</h3>
                <div className="mono" style={{ color: "rgba(10,10,10,.6)", fontSize: 11 }}>{t.cred}</div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .trainer-card { display: block; }
        .trainer-card:hover h3 { color: var(--accent); transition: color .15s ease; }
        @media (max-width: 920px) { .trainers-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 540px) { .trainers-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const TESTIMONIALS = [
  { who: "황ㅇㅇ · 52세 · CEO", q: "30년 묵은 허리디스크 통증이 8주 만에 사라졌습니다. 평가가 정직합니다.", metric: "허리 통증 NRS 7 → 1" },
  { who: "최ㅇㅇ · 47세 · 외과의", q: "동료 의사로서 봐도 평가/처방의 근거가 분명합니다. 가족 전원 등록.", metric: "스쿼트 60 → 110kg" },
  { who: "김ㅇㅇ · 58세 · 변호사", q: "골프 장타가 늘었고, 무엇보다 다음 날 안 쑤십니다. 6개월째 진행 중.", metric: "비거리 +32 yd" },
];

function Testimonials() {
  return (
    <section style={{ padding: "120px 0", background: "var(--bone-2)", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div className="row between center" style={{ marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>06 RECEIPTS / 후기</div>
            <h2 className="h1">RECEIPTS,<br/>NOT PROMISES.</h2>
          </div>
          <a href="reviews.html" className="btn btn-ghost">전체 후기 →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="testi-grid">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                border: "1px solid var(--rule-strong)", background: "var(--bone)",
                padding: 32, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 320,
              }}>
                <div>
                  <div style={{ fontSize: 64, lineHeight: .8, color: "var(--accent)", fontFamily: "var(--font-display)" }}>“</div>
                  <p className="h3" style={{ marginTop: 16, fontWeight: 700 }}>{t.q}</p>
                </div>
                <div style={{ marginTop: 32, paddingTop: 16, borderTop: "1px solid var(--rule-strong)" }}>
                  <div className="mono" style={{ marginBottom: 8 }}>{t.who}</div>
                  <div className="num" style={{ fontSize: 22, color: "var(--accent-ink)" }}>
                    <span style={{ background: "var(--accent)", padding: "2px 10px" }}>{t.metric}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .testi-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function PricingTeaser() {
  const ptPacks = [
    { sessions: 8,  price: 616000,  per: 77000, tag: null },
    { sessions: 16, price: 1120000, per: 70000, tag: "MOST CHOSEN" },
    { sessions: 24, price: 1512000, per: 63000, tag: "BEST VALUE" },
  ];
  const tlPacks = [
    { sessions: 8,  price: 704000,  per: 88000, tag: null },
    { sessions: 16, price: 1280000, per: 80000, tag: "MOST CHOSEN" },
    { sessions: 24, price: 1728000, per: 72000, tag: "BEST VALUE" },
  ];
  const mtPacks = [
    { sessions: 8,  price: 792000,  per: 99000, tag: null },
    { sessions: 16, price: 1440000, per: 90000, tag: "MOST CHOSEN" },
  ];
  const fmt = (n) => "₩" + n.toLocaleString();

  const Card = ({ title, en, packs, variant = "light", badge, ribbon }) => {
    const dark = variant === "dark";
    const accent = variant === "accent";
    const bg = dark ? "var(--ink)" : accent ? "var(--accent)" : "var(--bone)";
    const fg = dark ? "var(--bone)" : "var(--ink)";
    const rule = dark ? "rgba(245,241,234,.2)" : accent ? "rgba(10,10,10,.25)" : "var(--rule-strong)";
    const ruleSoft = dark ? "rgba(245,241,234,.12)" : accent ? "rgba(10,10,10,.18)" : "var(--rule)";
    return (
    <div style={{
      position: "relative",
      background: bg, color: fg,
      border: "1px solid var(--rule-strong)",
      display: "flex", flexDirection: "column",
      transform: accent ? "translateY(-12px)" : "none",
      boxShadow: accent ? "0 24px 60px rgba(10,10,10,.18)" : "none",
    }}>
      {ribbon && (
        <div style={{
          position: "absolute", top: -14, right: 20,
          background: "var(--ink)", color: "var(--bone)",
          padding: "6px 14px",
          fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".18em",
          textTransform: "uppercase",
          border: "1px solid var(--ink)",
          zIndex: 2,
        }}>★ {ribbon}</div>
      )}

      <div style={{
        padding: "24px 28px",
        borderBottom: `1px solid ${rule}`,
        display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 12, flexWrap: "wrap",
      }}>
        <div>
          <div className="mono" style={{ opacity: accent ? .7 : .6, marginBottom: 6 }}>{en}</div>
          <h3 className="h2" style={{ lineHeight: .95 }}>{title}<span style={{ color: accent ? "var(--ink)" : "var(--accent)" }}>.</span></h3>
        </div>
        <span className="tag" style={{
          background: accent ? "var(--ink)" : (dark ? "var(--accent)" : "var(--ink)"),
          color: accent ? "var(--bone)" : (dark ? "var(--accent-ink)" : "var(--bone)"),
          borderColor: "transparent",
        }}>{badge}</span>
      </div>

      <div style={{ flex: 1 }}>
        {packs.map((p, i) => (
          <div key={p.sessions} style={{
            display: "grid",
            gridTemplateColumns: "auto 1fr auto",
            gap: 16,
            alignItems: "center",
            padding: "18px 28px",
            borderBottom: i === packs.length - 1 ? "none" : `1px solid ${ruleSoft}`,
          }}>
            <div className="num" style={{ fontSize: 26, lineHeight: 1, minWidth: 56 }}>
              {p.sessions}<span style={{ fontSize: 13, marginLeft: 2 }}>회</span>
            </div>
            <div>
              {p.tag ? (
                <span className="tag" style={{
                  background: accent ? "var(--ink)" : "var(--accent)",
                  color: accent ? "var(--bone)" : "var(--accent-ink)",
                  borderColor: "transparent",
                  fontSize: 9,
                }}>★ {p.tag}</span>
              ) : (
                <span className="mono" style={{ opacity: .5, fontSize: 11 }}>회당 {fmt(p.per)}</span>
              )}
            </div>
            <div className="num" style={{ fontSize: "clamp(20px, 2vw, 26px)", lineHeight: 1, textAlign: "right", minWidth: 120 }}>
              {fmt(p.price)}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        padding: "20px 28px",
        borderTop: `1px solid ${rule}`,
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap",
        marginTop: "auto",
      }}>
        <span className="mono" style={{ opacity: .6, fontSize: 11 }}>50분 / VAT 포함</span>
        <a href="pricing.html" className="btn" style={{
          fontSize: 12, padding: "12px 18px",
          background: accent ? "var(--ink)" : (dark ? "var(--bone)" : "var(--ink)"),
          color: accent ? "var(--bone)" : (dark ? "var(--ink)" : "var(--bone)"),
          borderColor: accent ? "var(--ink)" : (dark ? "var(--bone)" : "var(--ink)"),
        }}>
          자세히 보기 <span className="arrow">→</span>
        </a>
      </div>
    </div>
    );
  };

  return (
    <section style={{ padding: "120px 0", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div className="section-head" style={{ borderTop: "none", padding: 0, marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>04 PRICING / 요금</div>
            <h2 className="h1">정직한<br/>가격표.</h2>
          </div>
          <p className="lead" style={{ alignSelf: "end" }}>
            연간 약정·과대 이벤트 가격 없습니다. 50분 PT · 모든 가격은 부가세 포함.
            등록 후 3일 이내 100% 환불 가능합니다.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr 1fr", gap: 24, alignItems: "stretch", paddingTop: 16 }} className="pricing-grid">
          <Reveal>
            <Card title="Personal Trainer" en="REGULAR · 정규 트레이너" packs={ptPacks} variant="light" badge="50분 PT" />
          </Reveal>
          <Reveal delay={100}>
            <Card title="Teamleader Trainer" en="TEAMLEADER · 팀장 트레이너" packs={tlPacks} variant="accent" badge="50분 PT" ribbon="RECOMMENDED" />
          </Reveal>
          <Reveal delay={200}>
            <Card title="Master Trainer" en="MASTER · 마스터 트레이너" packs={mtPacks} variant="dark" badge="50분 PT" />
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 1080px) { .pricing-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .pricing-grid > * > div { transform: none !important; } }`}</style>
    </section>
  );
}

function CTABand() {
  return (
    <section className="ink-bg" style={{ padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }} className="cta-grid">
          <BigStar className="spin" style={{ width: 120, height: 120 }} />
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>READY?</div>
            <h2 className="display" style={{ color: "var(--bone)", fontSize: "clamp(48px, 8vw, 120px)" }}>
              50분.<br/><span style={{ color: "var(--accent)" }}>무료.</span>
            </h2>
            <p className="lead" style={{ marginTop: 24 }}>
              체형 평가 + 통증 진단 + 1회 PT를 전혀 부담 없이. 전화·카톡·폼 모두 가능.
            </p>
          </div>
          <a href="contact.html" className="btn" style={{ fontSize: 18, padding: "24px 36px" }}>예약 시작 →</a>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .cta-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function BlogTeaser() {
  const posts = [
    { d: "2026.04.18", k: "JOURNAL", t: "40대 이후 스쿼트, 어디까지 깊게 앉아야 할까?", read: "8 MIN" },
    { d: "2026.04.04", k: "NOTICE", t: "5월 GX 클래스 일시 중단 안내 (시설 보강)", read: "2 MIN" },
    { d: "2026.03.22", k: "SCIENCE", t: "근감소 늦추는 단백질 섭취 — 임상 가이드", read: "11 MIN" },
  ];
  return (
    <section style={{ padding: "120px 0", borderBottom: "1px solid var(--rule-strong)" }}>
      <div className="wrap">
        <div className="row between center" style={{ marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>07 JOURNAL / 저널</div>
            <h2 className="h1">최근 글.</h2>
          </div>
          <a href="blog.html" className="btn btn-ghost">전체 글 →</a>
        </div>
        <div style={{ borderTop: "1px solid var(--rule-strong)" }}>
          {posts.map((p, i) => (
            <a key={i} href="blog.html" className="post-row">
              <span className="mono col-date">{p.d}</span>
              <span className="tag col-tag">{p.k}</span>
              <span className="h3 col-title">{p.t}</span>
              <span className="mono col-read">{p.read}</span>
              <span className="col-arrow">→</span>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .post-row {
          display: grid;
          grid-template-columns: 110px 90px 1fr 80px 32px;
          gap: 24px;
          align-items: center;
          padding: 28px 0;
          border-bottom: 1px solid var(--rule-strong);
          transition: padding .2s ease;
        }
        .post-row:hover { padding-left: 16px; padding-right: 16px; background: var(--bone-2); }
        .post-row:hover .col-title { color: var(--accent); }
        .post-row .col-arrow { font-size: 24px; }
        @media (max-width: 720px) {
          .post-row { grid-template-columns: 1fr auto; gap: 8px; }
          .post-row .col-date, .post-row .col-tag, .post-row .col-read { grid-column: 1; font-size: 10px; }
          .post-row .col-title { grid-column: 1 / -1; }
          .post-row .col-arrow { grid-column: 2; grid-row: 1; }
        }
      `}</style>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <Nav active="index.html" dark={true} />
      <HomeHero />
      <Marquee items={["TRAINING IS A SKILL", "PAIN-FREE PERFORMANCE", "TRAIN OLDER, TRAIN HARDER", "1-ON-1 ONLY", "EST. 2016"]} dark={true} />
      <ManifestoBlock />
      <ProgramsStrip />
      <StatsBand />
      <TrainersPreview />
      <Testimonials />
      <PricingTeaser />
      <BlogTeaser />
      <CTABand />
      <Footer />
      <div className="grain"></div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);
bootTweaks();