// Pojok Kayuh 2026 — Home (Final Design)
// Refresh of 2025 Home with new theme, 129,000 km target, and the new
// Individual Consistent + Group Kilometer Commitment challenges
// (replacing the 2025 Bingo Challenge).

const C = {
  purple: '#9A2B91',
  purpleDk: '#6E1F69',
  navy: '#002F5F',
  green: '#5CBA59',
  greenDk: '#43A341',
  gold: '#EEAF2E',
  goldDk: '#C7901E',
  blue: '#3E81C7',
  orange: '#F05542',
  bronze: '#B07842',
  silver: '#9AA5B1',
  diamond: '#5EC8E0',
  textDk: '#242424',
  textMd: '#696F79',
  textLt: '#9CA3AF',
  borderLt: '#F4F4F4',
  surface: '#F9FAFB',
  ink: '#0C2E5E',
  pink: '#FCE3F8'
};

const F = {
  body: '"Lexend", system-ui, sans-serif'
};

// ─────────────────────────────────────────────────────────────────────────
// Reusable bits
// ─────────────────────────────────────────────────────────────────────────
function StatusBar({ dark = false }) {
  const c = dark ? '#fff' : '#000';
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 24px 8px', fontFamily: '-apple-system, "SF Pro", system-ui',
      fontWeight: 600, fontSize: 15, color: c, position: 'relative', zIndex: 30
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <svg width="17" height="11" viewBox="0 0 17 11">
          <rect x="0" y="6.5" width="3" height="4.5" rx="0.7" fill={c} />
          <rect x="4.5" y="4.5" width="3" height="6.5" rx="0.7" fill={c} />
          <rect x="9" y="2" width="3" height="9" rx="0.7" fill={c} />
          <rect x="13.5" y="0" width="3" height="11" rx="0.7" fill={c} />
        </svg>
        <svg width="15" height="11" viewBox="0 0 15 11">
          <path d="M7.5 3C9.5 3 11.4 3.8 12.8 5.1l1-1C12 2.5 9.9 1.5 7.5 1.5S3 2.5 1.2 4.1l1 1C3.6 3.8 5.5 3 7.5 3z" fill={c} />
          <path d="M7.5 6.3c1.2 0 2.3.4 3.2 1.2l1-1C10.5 5.4 9.1 4.8 7.5 4.8s-3 0.6-4.2 1.7l1 1c0.9-0.8 2-1.2 3.2-1.2z" fill={c} />
          <circle cx="7.5" cy="9.5" r="1.3" fill={c} />
        </svg>
        <svg width="25" height="12" viewBox="0 0 25 12">
          <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke={c} strokeOpacity="0.4" fill="none" />
          <rect x="2" y="2" width="19" height="8" rx="1.5" fill={c} />
          <path d="M23.5 4v4c0.8-0.3 1.2-1 1.2-2s-0.4-1.7-1.2-2z" fill={c} fillOpacity="0.4" />
        </svg>
      </div>
    </div>);

}

function SectionTitle({ children, dark = false, sub }) {
  return (
    <div style={{ padding: '0 20px' }}>
      <div style={{
        fontFamily: F.body, fontWeight: 700, fontSize: 24, lineHeight: '30px',
        color: dark ? '#fff' : C.navy
      }}>{children}</div>
      {sub && <div style={{
        marginTop: 6, fontFamily: F.body, fontWeight: 300, fontSize: 15,
        lineHeight: '24px', color: dark ? 'rgba(255,255,255,0.75)' : C.textMd
      }}>{sub}</div>}
    </div>);

}

function BAFLogo({ size = 39 }) {
  return (
    <img src="assets/baf-logo.png" alt="BAF" style={{
      height: size, width: 'auto', objectFit: 'contain', display: 'block'
    }} />);

}

// ─────────────────────────────────────────────────────────────────────────
// 1 — Top app bar
// ─────────────────────────────────────────────────────────────────────────
function TopBar() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 20px', borderBottom: `1px solid ${C.borderLt}`,
      background: '#fff', position: 'relative', zIndex: 20
    }}>
      <BAFLogo size={32} />
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '8px 12px', borderRadius: 8,
        border: `1px solid ${C.green}`, background: 'rgba(91,187,89,0.1)',
        fontFamily: F.body, fontWeight: 700, fontSize: 12, color: C.green
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill={C.green}><path d="M12 2C8 2 5 5 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-4-3-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z" /></svg>
        Bandung
      </div>
      <button style={{
        border: 'none', cursor: 'pointer',
        padding: '9px 16px', borderRadius: '16px 16px 8px 16px',
        background: C.green, color: '#fff',
        fontFamily: F.body, fontWeight: 700, fontSize: 12
      }}>Masuk</button>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 2 — Hero
// ─────────────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 660, overflow: 'hidden' }}>
      {/* full-bleed cyclist & runner background */}
      <img src="assets/cyclist-hero.png" alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center top',
        pointerEvents: 'none'
      }} />
      {/* subtle darken at very top + bottom for legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 35%, rgba(0,33,75,0.0) 55%, rgba(0,33,75,0.55) 100%)',
        pointerEvents: 'none'
      }} />

      {/* KV logo centered at top + tagline + date pill underneath */}
      <div style={{
        position: 'absolute', top: 18, left: 0, right: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10
      }}>
        <img src="assets/pojok-kayuh-kv.png" alt="Pojok Kayuh" style={{
          width: 260, height: 'auto', objectFit: 'contain',
          filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.18))'
        }} />
        <div style={{
          fontFamily: F.body, fontWeight: 800, fontSize: 18, letterSpacing: -0.2,
          color: C.navy, textAlign: 'center', lineHeight: '22px',
          textShadow: '0 1px 6px rgba(255,255,255,0.6)'
        }}>Kompak Bergerak, Semakin Kuat</div>

        {/* date pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          background: 'rgba(255,255,255,0.96)',
          boxShadow: '0 8px 24px rgba(0,33,75,0.18)',
          borderRadius: 999, padding: '6px 14px 6px 6px'
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 16, background: C.purple,
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <img src="assets/calendar.png" alt="" style={{ width: 18, height: 18, filter: 'brightness(0) invert(1)' }} />
          </div>
          <span style={{
            fontFamily: F.body, fontWeight: 700, fontSize: 12, color: C.navy
          }}>15 Juni – 6 September 2026</span>
        </div>
      </div>

      {/* Ultimate Target panel - bottom card */}
      <div style={{
        position: 'absolute', left: 20, right: 20, bottom: 24,
        padding: '14px 16px', borderRadius: 16,
        background: 'rgba(255,255,255,0.96)',
        boxShadow: '0 10px 30px rgba(0,33,75,0.25)',
        backdropFilter: 'blur(8px)'
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end'
        }}>
          <div>
            <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 10, color: C.textLt, letterSpacing: 1.5 }}>ULTIMATE TARGET</div>
            <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 28, lineHeight: '30px', color: C.navy, marginTop: 2 }}>
              129.000 <span style={{ fontSize: 14, fontWeight: 600, color: C.textMd }}>KM</span>
            </div>
          </div>
        </div>
        <div style={{
          marginTop: 10, height: 8, borderRadius: 999, background: `${C.navy}14`, overflow: 'hidden'
        }}>
          <div style={{
            height: '100%', width: '0%',
            background: `linear-gradient(90deg, ${C.green}, ${C.gold})`,
            borderRadius: 999
          }} />
        </div>
        <div style={{
          marginTop: 6, display: 'flex', justifyContent: 'space-between',
          fontFamily: F.body, fontSize: 10, color: C.textLt, fontWeight: 600
        }}>
          <span>0 KM</span>
          <span style={{ color: C.green }}>● akan dimulai 15 Juni</span>
          <span>129.000 KM</span>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 3 — Misi card (Donasi)
// ─────────────────────────────────────────────────────────────────────────
function Misi() {
  return (
    <div style={{ padding: '40px 20px 0' }}>
      <div style={{
        fontFamily: F.body, fontWeight: 300, fontSize: 11,
        color: C.purple, letterSpacing: 2
      }}>MISI 2026</div>
      <div style={{
        fontFamily: F.body, fontWeight: 700, fontSize: 26, lineHeight: '32px',
        color: C.navy, marginTop: 4
      }}>Setiap kilometer adalah kontribusi nyata</div>
      <div style={{
        fontFamily: F.body, fontWeight: 300, fontSize: 15, lineHeight: '24px',
        color: C.textMd, marginTop: 12
      }}>Jadikan setiap langkah, kayuhan dan keringatmu sebagai donasi yang akan menjadi saldo BAF Peduli.</div>

      <div style={{
        marginTop: 18, padding: '18px 18px', borderRadius: 16,
        background: `linear-gradient(135deg, #FFF5FB 0%, #FFFFFF 70%)`,
        border: `1px solid ${C.pink}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14
      }}>
        <div>
          <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 12, color: C.textMd }}>Total donasi BAF Peduli</div>
          <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 24, color: C.purple, marginTop: 2 }}>Rp 250.000.000</div>
          <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 11, color: C.textLt, marginTop: 2 }}>setara 3 × 29.000 KM target kolektif</div>
        </div>
        <div style={{
          width: 52, height: 52, borderRadius: 26,
          background: 'rgba(154,43,145,0.1)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none'
        }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
            <path d="M12 21c-1 0-2-0.3-2.8-0.9l-6.3-4.8C2 14.5 1.5 13.7 1.5 12.8V8C1.5 6.6 2.6 5.5 4 5.5h16C21.4 5.5 22.5 6.6 22.5 8v4.8c0 0.9-0.5 1.7-1.4 2.4l-6.3 4.8c-0.8 0.6-1.8 0.9-2.8 0.9zm0-2c0.4 0 0.8-0.1 1.2-0.4l6.3-4.8c0.3-0.2 0.5-0.5 0.5-0.8V8.5H4v4.5c0 0.3 0.2 0.6 0.5 0.8l6.3 4.8c0.4 0.3 0.8 0.4 1.2 0.4z" fill={C.purple} />
            <path d="M8 5.5V4c0-1.4 1.1-2.5 2.5-2.5h3C14.9 1.5 16 2.6 16 4v1.5h-2V4c0-0.3-0.2-0.5-0.5-0.5h-3C10.2 3.5 10 3.7 10 4v1.5H8z" fill={C.purple} />
          </svg>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 4 — Tantangan Pojok Kayuh (replaces Bingo)
//     Two challenge tracks with tab toggle: Individu / Grup
// ─────────────────────────────────────────────────────────────────────────
function ChallengeSection() {
  return (
    <div style={{ padding: '40px 0 0' }}>
      <div style={{ padding: '0 20px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '3px 10px', borderRadius: 999,
          background: 'rgba(154,43,145,0.1)', color: C.purple,
          fontFamily: F.body, fontWeight: 700, fontSize: 10, letterSpacing: 1
        }}>BARU DI 2026</div>
        <div style={{
          fontFamily: F.body, fontWeight: 700, fontSize: 26, lineHeight: '32px',
          color: C.navy, marginTop: 10
        }}>Tantangan Pojok Kayuh</div>
        <div style={{
          fontFamily: F.body, fontWeight: 300, fontSize: 15, lineHeight: '24px',
          color: C.textMd, marginTop: 6
        }}>Dua jalur, satu misi. Pilih jalur konsistensi pribadi atau komitmen kolektif bersama tim.</div>
      </div>

      {/* Mini info chips row */}
      <div style={{ padding: '0 20px', marginTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {[
        { l: 'Tercatat via Strava', c: C.purple },
        { l: 'KM sebagai metrik utama', c: C.blue },
        { l: 'Semua level fitness', c: C.green }].
        map((t) =>
        <div key={t.l} style={{
          padding: '6px 10px', borderRadius: 999,
          border: `1px solid ${t.c}33`, background: `${t.c}0A`,
          fontFamily: F.body, fontWeight: 700, fontSize: 10, color: t.c
        }}>● {t.l}</div>
        )}
      </div>

      {/* Challenge cards stack */}
      <div style={{ padding: '18px 20px 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <IndividualChallengeCard />
        <GroupChallengeCard />
      </div>
    </div>);

}

function IndividualChallengeCard() {
  return (
    <div style={{
      borderRadius: 20, overflow: 'hidden',
      border: `1px solid ${C.borderLt}`,
      background: '#fff',
      boxShadow: '0 4px 18px rgba(12,46,94,0.06)'
    }}>
      {/* header strip */}
      <div style={{
        padding: '18px 18px 16px',
        background: `linear-gradient(135deg, ${C.green} 0%, ${C.greenDk} 100%)`,
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute', right: -30, top: -30,
          width: 140, height: 140, borderRadius: 70,
          background: 'rgba(255,255,255,0.08)'
        }} />
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <div style={{
              fontFamily: F.body, fontWeight: 700, fontSize: 10, letterSpacing: 2,
              color: 'rgba(255,255,255,0.8)'
            }}>JALUR 01 · INDIVIDU</div>
            <div style={{
              fontFamily: F.body, fontWeight: 800, fontSize: 22, lineHeight: '28px',
              color: '#fff', marginTop: 4
            }}>Consistent<br />Challenge</div>
          </div>
          <div style={{
            width: 54, height: 54, borderRadius: 14, background: 'rgba(255,255,255,0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">
              <path d="M13.5 5.5c1.1 0 2-0.9 2-2s-0.9-2-2-2-2 0.9-2 2 0.9 2 2 2zM9.8 8.9L7.2 22h2.1l1.7-7.4 2.2 2.1V22h2v-7l-2.1-2 0.6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-0.4-0.6-1-1-1.7-1-0.3 0-0.5 0.1-0.8 0.1L4 8v4.5h2V9.6l1.8-0.7" />
            </svg>
          </div>
        </div>
        <div style={{
          marginTop: 12, fontFamily: F.body, fontStyle: 'italic', fontWeight: 300, fontSize: 13,
          lineHeight: '20px', color: 'rgba(255,255,255,0.92)'
        }}>"Konsistensi lebih dihargai daripada kecepatan."</div>
      </div>

      <div style={{ padding: '18px' }}>
        {/* Daily milestone row */}
        <div style={{
          fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.textMd
        }}>DAILY MILESTONE</div>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <DailyTile icon="🏃" label="Run / Walk" km="2.9" sub="km / hari" tint={C.green} />
          <DailyTile icon="🚴" label="Cycling" km="12.9" sub="km / hari" tint={C.orange} />
        </div>
        <div style={{
          marginTop: 8, fontFamily: F.body, fontWeight: 300, fontSize: 11,
          fontStyle: 'italic', color: C.textLt
        }}>*Aktivitas outdoor wajib · Pemenang diumumkan tiap 2 minggu</div>

        {/* Points ladder */}
        <div style={{
          marginTop: 18, fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.textMd
        }}>SKEMA POIN</div>
        <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <PointRow tag="DAILY" label="Daily Milestone" freq="Setiap hari" pts="29" tint={C.green} />
          <PointRow tag="STREAK" label="Weekly streak (7 hari)" freq="Mingguan" pts="+100" tint={C.gold} />
          <PointRow tag="WARRIOR" label="Consistent Warriors (14 hari)" freq="Dwimingguan" pts="+300" tint={C.purple} />
        </div>

        {/* Phase strip */}
        <div style={{
          marginTop: 18, padding: '12px 14px', borderRadius: 12,
          background: C.surface, border: `1px solid ${C.borderLt}`
        }}>
          <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.textMd }}>PERIODE</div>
          <div style={{ marginTop: 4, fontFamily: F.body, fontWeight: 700, fontSize: 14, color: C.navy }}>
            15 Juni – 5 September · <span style={{ color: C.green }}>6 fase</span>
          </div>
          <div style={{ marginTop: 8, display: 'flex', gap: 4 }}>
            {[1, 2, 3, 4, 5, 6].map((n) =>
            <div key={n} style={{ flex: 1, height: 6, borderRadius: 3, background: `${C.green}33`, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, background: C.green, opacity: 0 }} />
              </div>
            )}
          </div>
          <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', fontFamily: F.body, fontSize: 9, color: C.textLt }}>
            <span>F1</span><span>F2</span><span>F3</span><span>F4</span><span>F5</span><span>F6</span>
          </div>
        </div>

        {/* Winner criteria */}
        <div style={{
          marginTop: 14, padding: '12px 14px', borderRadius: 12,
          background: 'rgba(238,175,46,0.08)', border: `1px dashed ${C.gold}66`
        }}>
          <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.goldDk }}>KRITERIA PEMENANG</div>
          <div style={{ marginTop: 4, fontFamily: F.body, fontWeight: 300, fontSize: 12, lineHeight: '18px', color: C.textDk }}>
            Konsistensi 14 hari wajib. Total jarak menentukan pemenang. Bonus engagement bagi peserta yang unggah foto aktivitas di Strava.
          </div>
        </div>
      </div>
    </div>);

}

function DailyTile({ icon, label, km, sub, tint }) {
  return (
    <div style={{
      padding: '14px 14px', borderRadius: 14,
      background: `${tint}0F`, border: `1px solid ${tint}33`
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ fontSize: 18 }}>{icon}</div>
        <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 12, color: tint }}>{label}</div>
      </div>
      <div style={{ marginTop: 6, fontFamily: F.body, fontWeight: 800, fontSize: 26, color: C.navy, letterSpacing: -0.5 }}>
        {km}<span style={{ fontSize: 12, fontWeight: 500, color: C.textMd, marginLeft: 2 }}>{sub}</span>
      </div>
    </div>);

}

function PointRow({ tag, label, freq, pts, tint }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 12px', borderRadius: 10, background: C.surface
    }}>
      <div style={{
        padding: '3px 8px', borderRadius: 6, background: tint, color: '#fff',
        fontFamily: F.body, fontWeight: 700, fontSize: 9, letterSpacing: 0.5, flex: 'none'
      }}>{tag}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 12, color: C.textDk, lineHeight: '16px' }}>{label}</div>
        <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 10, color: C.textLt }}>{freq}</div>
      </div>
      <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 16, color: tint }}>{pts} <span style={{ fontSize: 10, fontWeight: 500, color: C.textMd }}>pts</span></div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// Group Challenge Card — Kilometer Commitment Movement
// ─────────────────────────────────────────────────────────────────────────
function GroupChallengeCard() {
  const [cat, setCat] = React.useState('walkrun');
  const tiers = cat === 'walkrun' ? [
    { tier: 'Bronze',  color: C.bronze,  km: '250',    per: '~1,2 km/hari', pts: '250' },
    { tier: 'Silver',  color: C.silver,  km: '500',    per: '~2,4 km/hari', pts: '750' },
    { tier: 'Gold',    color: C.gold,    km: '1.000',  per: '~4,8 km/hari', pts: '2.000' },
    { tier: 'Diamond', color: C.diamond, km: '2.000+', per: '~9,5 km/hari', pts: '5.000', big: true },
  ] : [
    { tier: 'Bronze',  color: C.bronze,  km: '250',    per: '~2,4 km/hari', pts: '250' },
    { tier: 'Silver',  color: C.silver,  km: '625',    per: '~6 km/hari',   pts: '750' },
    { tier: 'Gold',    color: C.gold,    km: '1.250',  per: '~12 km/hari',  pts: '2.000' },
    { tier: 'Diamond', color: C.diamond, km: '2.000+', per: '~19 km/hari',  pts: '5.000', big: true },
  ];

  return (
    <div style={{
      borderRadius: 20, overflow: 'hidden',
      border: `1px solid ${C.borderLt}`,
      background: '#fff',
      boxShadow: '0 4px 18px rgba(12,46,94,0.06)'
    }}>
      {/* header strip */}
      <div style={{
        padding: '18px 18px 16px',
        background: `linear-gradient(135deg, ${C.purple} 0%, ${C.purpleDk} 100%)`,
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute', right: -40, top: -20,
          width: 160, height: 160, borderRadius: 80,
          background: 'rgba(255,255,255,0.07)'
        }} />
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div>
            <div style={{
              fontFamily: F.body, fontWeight: 700, fontSize: 10, letterSpacing: 2,
              color: 'rgba(255,255,255,0.8)'
            }}>JALUR 02 · GRUP</div>
            <div style={{
              fontFamily: F.body, fontWeight: 800, fontSize: 22, lineHeight: '28px',
              color: '#fff', marginTop: 4
            }}>Kilometer<br />Commitment</div>
          </div>
          <div style={{
            width: 54, height: 54, borderRadius: 14, background: 'rgba(255,255,255,0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
              <path d="M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zM8 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zM8 13c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zM16 13c-0.3 0-0.6 0-1 0 1.2 0.8 2 2 2 3.5V19h6v-2.5C23 14.2 18.3 13 16 13z" />
            </svg>
          </div>
        </div>
        <div style={{
          marginTop: 12, fontFamily: F.body, fontStyle: 'italic', fontWeight: 300, fontSize: 13,
          lineHeight: '20px', color: 'rgba(255,255,255,0.92)'
        }}>"Pledge target KM kolektif di awal setiap fase, 3 minggu sekali."</div>
      </div>

      <div style={{ padding: '18px' }}>
        {/* Category tab — clickable */}
        <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.textMd, marginBottom: 8 }}>
          LEVEL BRACKET
        </div>
        <div style={{
          display: 'flex', padding: 4, borderRadius: 12,
          background: C.surface, border: `1px solid ${C.borderLt}`,
          marginBottom: 12,
        }}>
          <CatTab
            label="🏃 Walk / Run"
            sub="10 orang / grup"
            active={cat === 'walkrun'}
            onClick={() => setCat('walkrun')}
          />
          <CatTab
            label="🚴 Cycling"
            sub="5 orang / grup"
            active={cat === 'cycling'}
            onClick={() => setCat('cycling')}
          />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {tiers.map((t) => (
            <TierRow key={t.tier} {...t} />
          ))}
        </div>

        {/* The Group Commitment */}
        <div style={{
          marginTop: 16, padding: '12px 14px', borderRadius: 12,
          background: `linear-gradient(135deg, ${C.blue}1A 0%, ${C.blue}08 100%)`,
          border: `1px solid ${C.blue}33`
        }}>
          <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.blue }}>THE GROUP COMMITMENT</div>
          <div style={{ marginTop: 4, fontFamily: F.body, fontWeight: 300, fontSize: 12, lineHeight: '18px', color: C.textDk }}>
            Setiap grup wajib mengajukan <b>Pledge</b> — janji target KM kolektif di awal tiap fase (3 minggu). Komitmen ini menjadi kontrak tim.
          </div>
        </div>

        {/* 3 Rules */}
        <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
          <RuleBadge title="Mandatory Rise" body="Capai target → wajib naik tier" tint={C.green} />
          <RuleBadge title="No Downgrade" body="Tier yang sudah tercapai tidak boleh turun" tint={C.purple} />
          <RuleBadge title="Reset Rule" body="Gagal? Boleh ulang tier yang sama" tint={C.gold} />
        </div>

        {/* Phase Timeline */}
        <div style={{ marginTop: 16 }}>
          <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.textMd }}>4 FASE PROGRAM</div>
          <div style={{ marginTop: 10, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 8, right: 8, top: 11, height: 3, background: `${C.green}33`, borderRadius: 2 }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
              {[
              { n: '01', name: 'Foundation', d: '15 Jun – 5 Jul' },
              { n: '02', name: 'Growth', d: '6 – 26 Jul' },
              { n: '03', name: 'Peak', d: '27 Jul – 16 Ago' },
              { n: '04', name: 'Final', d: '17 Ago – 5 Sep' }].
              map((p) =>
              <div key={p.n} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
                  <div style={{
                  width: 22, height: 22, borderRadius: 11, background: C.gold,
                  border: '3px solid #fff', boxShadow: `0 0 0 2px ${C.gold}66`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: F.body, fontWeight: 800, fontSize: 9, color: '#fff'
                }}>{p.n}</div>
                  <div style={{ marginTop: 6, fontFamily: F.body, fontWeight: 700, fontSize: 10, color: C.navy }}>{p.name}</div>
                  <div style={{ marginTop: 1, fontFamily: F.body, fontWeight: 300, fontSize: 9, color: C.textLt }}>{p.d}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function CatTab({ label, sub, active, onClick }) {
  return (
    <div onClick={onClick} style={{
      flex: 1, padding: '8px 10px', borderRadius: 8,
      background: active ? C.navy : 'transparent',
      color: active ? '#fff' : C.textMd,
      cursor: 'pointer', textAlign: 'center',
      boxShadow: active ? '0 2px 6px rgba(0,33,75,0.15)' : 'none',
      transition: 'all 0.15s ease',
    }}>
      <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 12 }}>{label}</div>
      <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 9, color: active ? 'rgba(255,255,255,0.7)' : C.textLt, marginTop: 1 }}>{sub}</div>
    </div>);
}

function CatPill({ label, sub, active }) {
  return (
    <div style={{
      flex: 1, padding: '8px 10px', borderRadius: 12,
      background: active ? C.navy : '#fff',
      border: `1px solid ${active ? C.navy : C.borderLt}`,
      color: active ? '#fff' : C.textDk
    }}>
      <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11 }}>{label}</div>
      <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 9, color: active ? 'rgba(255,255,255,0.7)' : C.textLt, marginTop: 1 }}>{sub}</div>
    </div>);

}

function TierRow({ tier, color, km, per, pts, big }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 12px', borderRadius: 12,
      background: `${color}0F`, border: `1px solid ${color}33`,
      boxShadow: big ? `inset 0 0 0 1px ${color}55` : 'none'
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 16, background: color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: `0 2px 6px ${color}66`
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff">
          <path d="M12 2L4 5v6c0 5 3.5 9.7 8 11 4.5-1.3 8-6 8-11V5l-8-3z" />
        </svg>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 13, color: C.textDk }}>{tier}</div>
          <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 10, color: C.textLt }}>{per}</div>
        </div>
        <div style={{ marginTop: 2, fontFamily: F.body, fontWeight: 700, fontSize: 11, color: C.textMd }}>
          Target <span style={{ color: C.navy, fontWeight: 800 }}>{km} KM</span> · 3 minggu
        </div>
      </div>
      <div style={{ textAlign: 'right', flex: 'none' }}>
        <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 15, color }}>{pts}</div>
        <div style={{ fontFamily: F.body, fontWeight: 500, fontSize: 9, color: C.textLt }}>pts</div>
      </div>
    </div>);

}

function RuleBadge({ title, body, tint }) {
  return (
    <div style={{
      padding: '10px 10px', borderRadius: 10,
      background: '#fff', border: `1px solid ${C.borderLt}`,
      position: 'relative'
    }}>
      <div style={{
        width: 6, height: 6, borderRadius: 3, background: tint, marginBottom: 6
      }} />
      <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 10, color: C.navy, lineHeight: '14px' }}>{title}</div>
      <div style={{ marginTop: 3, fontFamily: F.body, fontWeight: 300, fontSize: 9, color: C.textMd, lineHeight: '12px' }}>{body}</div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 5 — Cycling Tier compact (separate card for visual variety)
// ─────────────────────────────────────────────────────────────────────────
function CyclingTierStrip() {
  return (
    <div style={{ padding: '20px 20px 0' }}>
      <div style={{
        padding: '16px', borderRadius: 16,
        background: `linear-gradient(135deg, ${C.orange}15 0%, ${C.gold}10 100%)`,
        border: `1px solid ${C.orange}40`
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 11, letterSpacing: 1.5, color: C.orange }}>LEVEL BRACKET</div>
            <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 18, color: C.navy, marginTop: 2 }}>🚴 Cycling · 5 orang / grup</div>
          </div>
          <div style={{
            padding: '4px 10px', borderRadius: 999,
            background: '#fff', border: `1px solid ${C.orange}40`,
            fontFamily: F.body, fontWeight: 700, fontSize: 10, color: C.orange
          }}>3 minggu / fase</div>
        </div>

        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
          { t: 'Bronze', c: C.bronze, km: '250', per: '~2,4 km/hari', pts: '250' },
          { t: 'Silver', c: C.silver, km: '625', per: '~6 km/hari', pts: '750' },
          { t: 'Gold', c: C.gold, km: '1.250', per: '~12 km/hari', pts: '2.000' },
          { t: 'Diamond', c: C.diamond, km: '2.000+', per: '~19 km/hari', pts: '5.000' }].
          map((x) =>
          <div key={x.t} style={{
            padding: '10px 12px', borderRadius: 10, background: '#fff',
            border: `1px solid ${x.c}55`
          }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 8, height: 8, borderRadius: 4, background: x.c }} />
                <div style={{ fontFamily: F.body, fontWeight: 800, fontSize: 12, color: C.textDk }}>{x.t}</div>
              </div>
              <div style={{ marginTop: 6, fontFamily: F.body, fontWeight: 800, fontSize: 18, color: C.navy, letterSpacing: -0.5 }}>{x.km} <span style={{ fontSize: 9, fontWeight: 500, color: C.textMd }}>KM</span></div>
              <div style={{ marginTop: 1, fontFamily: F.body, fontWeight: 300, fontSize: 10, color: C.textLt }}>{x.per}</div>
              <div style={{ marginTop: 6, fontFamily: F.body, fontWeight: 700, fontSize: 10, color: x.c }}>+{x.pts} pts</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 6 — Timeline Project (overall)
// ─────────────────────────────────────────────────────────────────────────
function ProgramTimeline() {
  const milestones = [
  { c: '#F47B7B', t: 'Teaser', d: '25 – 29 Mei' },
  { c: '#F5A53D', t: 'Register', d: '1 – 12 Juni' },
  { c: '#F4D742', t: 'Program', d: '15 Jun – 6 Sep' },
  { c: '#5EC8E0', t: 'End', d: '6 September' },
  { c: '#C56DB6', t: 'Winner', d: '7 September' }];

  return (
    <div style={{ padding: '40px 0 0' }}>
      <SectionTitle sub="Lima tonggak utama menuju 7 September 2026.">Timeline Program</SectionTitle>
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{
          padding: '14px 14px', borderRadius: 16,
          border: `1px solid ${C.borderLt}`, background: '#fff'
        }}>
          {milestones.map((m, i) =>
          <div key={m.t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '8px 0', borderBottom: i < milestones.length - 1 ? `1px dashed ${C.borderLt}` : 'none' }}>
              <div style={{
              width: 8, height: 8, borderRadius: 4, background: m.c,
              marginTop: 6, flex: 'none', boxShadow: `0 0 0 3px ${m.c}33`
            }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 13, color: C.navy }}>{m.t}</div>
                <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 11, color: C.textMd }}>{m.d}</div>
              </div>
              <div style={{
              padding: '2px 8px', borderRadius: 999, background: `${m.c}1A`,
              fontFamily: F.body, fontWeight: 700, fontSize: 9, color: m.c,
              alignSelf: 'center'
            }}>{['M4', 'J1-2', 'J3-S1', 'S1', 'S1'][i]}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 7 — Papan Peringkat (Leaderboard, dark navy panel)
// ─────────────────────────────────────────────────────────────────────────
function Leaderboard() {
  const cats = {
    walkrun: {
      label: '🏃 Walk / Run', short: 'Walk/Run',
      metric: 'KM', based: 'berdasarkan jarak',
      data: [
        { name: 'Dimas Pratama',    hq: 'BAF HQ',         val: '1.245 KM' },
        { name: 'Siti Nurhaliza',   hq: 'BAF Bandung',    val: '1.198 KM' },
        { name: 'Reza Mahendra',    hq: 'BAF Surabaya',   val: '1.176 KM' },
        { name: 'Anisa Wulandari',  hq: 'BAF HQ',         val: '1.092 KM' },
        { name: 'Bayu Hartono',     hq: 'BAF Yogyakarta', val: '1.041 KM' },
        { name: 'Citra Maharani',   hq: 'BAF Medan',      val: '987 KM' },
        { name: 'Eko Saputra',      hq: 'BAF Bali',       val: '945 KM' },
      ],
    },
    cycling: {
      label: '🚴 Cycling', short: 'Cycling',
      metric: 'KM', based: 'berdasarkan jarak',
      data: [
        { name: 'Faisal Akbar',     hq: 'BAF Bandung',    val: '3.420 KM' },
        { name: 'Gilang Saputro',   hq: 'BAF Jakarta',    val: '3.288 KM' },
        { name: 'Hana Prameswari',  hq: 'BAF HQ',         val: '3.155 KM' },
        { name: 'Indra Permana',    hq: 'BAF Surabaya',   val: '2.987 KM' },
        { name: 'Jasmine Ramadani', hq: 'BAF Medan',      val: '2.842 KM' },
        { name: 'Kemal Wirawan',    hq: 'BAF Bali',       val: '2.719 KM' },
        { name: 'Larasati Dewi',    hq: 'BAF Bandung',    val: '2.654 KM' },
      ],
    },
    consistent: {
      label: '⏱ Consistent', short: 'Consistent',
      metric: 'pts', based: 'berdasarkan poin',
      data: [
        { name: 'Mira Khairani',    hq: 'BAF HQ',         val: '2.840 pts', dist: '186 KM' },
        { name: 'Nanda Saputra',    hq: 'BAF Bandung',    val: '2.715 pts', dist: '174 KM' },
        { name: 'Oscar Wijaya',     hq: 'BAF Yogyakarta', val: '2.682 pts', dist: '171 KM' },
        { name: 'Putri Anggraini',  hq: 'BAF Jakarta',    val: '2.547 pts', dist: '162 KM' },
        { name: 'Qori Mahendra',    hq: 'BAF Surabaya',   val: '2.428 pts', dist: '154 KM' },
        { name: 'Rizki Pradana',    hq: 'BAF HQ',         val: '2.392 pts', dist: '152 KM' },
        { name: 'Salsa Lestari',    hq: 'BAF Medan',      val: '2.346 pts', dist: '148 KM' },
      ],
    },
    commitment: {
      label: '🤝 Commitment', short: 'Commitment',
      metric: 'pts', based: 'berdasarkan poin grup',
      data: [
        { name: 'Tim Cendana',      hq: 'BAF HQ · 10 org',         val: '8.500 pts', dist: '2.180 KM' },
        { name: 'Tim Kayuh Senja',  hq: 'BAF Bandung · 5 org',     val: '7.250 pts', dist: '1.940 KM' },
        { name: 'Tim Langkah Pagi', hq: 'BAF Surabaya · 10 org',   val: '6.800 pts', dist: '1.815 KM' },
        { name: 'Tim Roda Empat',   hq: 'BAF Jakarta · 5 org',     val: '6.500 pts', dist: '1.720 KM' },
        { name: 'Tim Mata Angin',   hq: 'BAF Medan · 10 org',      val: '5.750 pts', dist: '1.560 KM' },
        { name: 'Tim Pojok Lari',   hq: 'BAF Yogyakarta · 10 org', val: '5.400 pts', dist: '1.420 KM' },
        { name: 'Tim Tanjung Kayuh',hq: 'BAF Bali · 5 org',        val: '5.250 pts', dist: '1.380 KM' },
      ],
    },
  };

  const [key, setKey] = React.useState('walkrun');
  const active = cats[key];
  const podium = active.data.slice(0, 3);
  const others = active.data.slice(3);
  const medals = ['🥇', '🥈', '🥉'];
  const medalBg = ['#FFD66B', '#E7EAF0', '#E6B99B'];

  return (
    <div style={{
      marginTop: 40, padding: '36px 0 36px',
      background: C.ink, position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', top: -40, right: -40, width: 240, height: 240,
        background: `radial-gradient(circle, ${C.purple}66 0%, transparent 70%)`,
        pointerEvents: 'none'
      }} />

      <div style={{ padding: '0 20px' }}>
        <div style={{
          fontFamily: F.body, fontWeight: 700, fontSize: 24, lineHeight: '30px',
          color: '#fff'
        }}>Papan Peringkat</div>
        <div style={{
          marginTop: 6, fontFamily: F.body, fontWeight: 300, fontSize: 13,
          lineHeight: '19px', color: 'rgba(255,255,255,0.7)'
        }}>Pilih kategori untuk melihat peringkat dan metriknya.</div>
      </div>

      <div style={{ padding: '14px 20px 0' }}>
        {/* 4 challenge picker chips — 2x2 grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {Object.entries(cats).map(([k, c]) => {
            const isActive = k === key;
            return (
              <div key={k} onClick={() => setKey(k)} style={{
                padding: '10px 12px', borderRadius: 12, cursor: 'pointer',
                background: isActive ? C.green : 'rgba(255,255,255,0.06)',
                border: `1px solid ${isActive ? C.green : 'rgba(255,255,255,0.10)'}`,
                boxShadow: isActive ? '0 4px 14px rgba(92,186,89,0.35)' : 'none',
                transition: 'all 0.15s ease',
              }}>
                <div style={{
                  fontFamily: F.body, fontWeight: 700, fontSize: 12,
                  color: isActive ? '#fff' : 'rgba(255,255,255,0.92)',
                }}>{c.label}</div>
                <div style={{
                  marginTop: 2, display: 'flex', alignItems: 'center', gap: 4,
                  fontFamily: F.body, fontWeight: 500, fontSize: 9,
                  color: isActive ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.5)',
                  letterSpacing: 0.3,
                }}>
                  <span style={{
                    padding: '1px 6px', borderRadius: 999,
                    background: isActive ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.06)',
                    color: '#fff', fontWeight: 700, fontSize: 9,
                  }}>{c.metric}</span>
                  {c.based}
                </div>
              </div>
            );
          })}
        </div>

        {/* Phase filter dropdown */}
        <div style={{ marginTop: 10, display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <div style={{
              padding: '6px 10px', borderRadius: 8,
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.12)',
              color: 'rgba(255,255,255,0.7)',
              fontFamily: F.body, fontWeight: 500, fontSize: 10,
            }}>Fase 1 · 15 Jun – 5 Jul ↓</div>
            <div style={{
              padding: '6px 10px', borderRadius: 8,
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.12)',
              color: 'rgba(255,255,255,0.7)',
              fontFamily: F.body, fontWeight: 500, fontSize: 10,
            }}>Filter ↓</div>
          </div>
          {active.metric === 'pts' && (
            <div style={{
              fontFamily: F.body, fontStyle: 'italic', fontWeight: 300, fontSize: 9,
              color: 'rgba(255,255,255,0.5)', textAlign: 'right', maxWidth: 130, lineHeight: '12px',
            }}>Poin sama? diurut berdasarkan jarak.</div>
          )}
        </div>

        {/* Podium */}
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {podium.map((r, i) =>
            <div key={i} style={{
              padding: '10px 14px', borderRadius: '14px 14px 14px 4px',
              background: i === 0 ? C.green : '#fff',
              color: i === 0 ? '#fff' : C.textDk,
              display: 'flex', alignItems: 'center', gap: 10
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 18, background: medalBg[i],
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20
              }}>{medals[i]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 14 }}>{r.name}</div>
                <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 11, color: i === 0 ? 'rgba(255,255,255,0.7)' : C.textMd }}>{r.hq}</div>
              </div>
              <div style={{ textAlign: 'right', flex: 'none' }}>
                <div style={{
                  fontFamily: F.body, fontWeight: 700, fontSize: 14,
                  color: i === 0 ? '#FFEFCB' : C.purple,
                }}>{r.val}</div>
                {r.dist && <div style={{
                  fontFamily: F.body, fontWeight: 500, fontSize: 10,
                  color: i === 0 ? 'rgba(255,255,255,0.65)' : C.textLt,
                  marginTop: 1,
                }}>{r.dist}</div>}
              </div>
            </div>
          )}
        </div>

        {/* Other ranks */}
        <div style={{ marginTop: 10, borderRadius: 14, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
          {others.map((r, i) =>
            <div key={i} style={{
              padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10,
              borderBottom: i < others.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none'
            }}>
              <div style={{
                width: 24, height: 24, borderRadius: 12,
                background: 'rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: F.body, fontWeight: 700, fontSize: 11, color: 'rgba(255,255,255,0.7)'
              }}>{i + 4}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: F.body, fontWeight: 500, fontSize: 13, color: '#fff' }}>{r.name}</div>
                <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 10, color: 'rgba(255,255,255,0.55)' }}>{r.hq}</div>
              </div>
              <div style={{ textAlign: 'right', flex: 'none' }}>
                <div style={{ fontFamily: F.body, fontWeight: 600, fontSize: 12, color: C.gold }}>{r.val}</div>
                {r.dist && <div style={{
                  fontFamily: F.body, fontWeight: 400, fontSize: 9,
                  color: 'rgba(255,255,255,0.4)', marginTop: 1,
                }}>{r.dist}</div>}
              </div>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 14, textAlign: 'center',
          fontFamily: F.body, fontWeight: 300, fontSize: 13, color: C.green
        }}>Lihat lebih banyak →</div>
      </div>
    </div>);

}

function ChallengeBtn({ label, active }) {
  return (
    <div style={{
      padding: '7px 12px', borderRadius: 8,
      background: active ? C.green : 'transparent',
      color: active ? '#fff' : 'rgba(255,255,255,0.75)',
      fontFamily: F.body, fontWeight: 700, fontSize: 11,
      whiteSpace: 'nowrap',
      boxShadow: active ? '0 2px 6px rgba(0,0,0,0.18)' : 'none'
    }}>{label}</div>);
}

function LBTab({ label, active, small }) {
  return (
    <div style={{
      padding: '8px 12px', borderRadius: 8,
      background: active ? C.green : 'transparent',
      border: active ? 'none' : `1px solid ${small ? C.gold : 'rgba(255,255,255,0.2)'}`,
      color: active ? '#fff' : small ? C.gold : 'rgba(255,255,255,0.8)',
      fontFamily: F.body, fontWeight: 700, fontSize: 11,
      whiteSpace: 'nowrap'
    }}>{label}</div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 8 — Potret Acara (kept from 2025)
// ─────────────────────────────────────────────────────────────────────────
function Potret() {
  return (
    <div style={{ padding: '40px 0 0' }}>
      <div style={{ textAlign: 'center', padding: '0 20px' }}>
        <div style={{ fontFamily: F.body, fontWeight: 700, fontSize: 24, color: C.navy }}>Potret Acara Pojok Kayuh</div>
        <div style={{ marginTop: 6, fontFamily: F.body, fontWeight: 300, fontSize: 14, color: C.textMd }}>Unggah foto kamu ke Instagram dengan tagar <span style={{ color: C.purple, fontWeight: 700 }}>#FITWITHBAF</span> &amp; <span style={{ color: C.purple, fontWeight: 700 }}>#BAFIndonesia</span></div>
      </div>
      <div style={{ marginTop: 18, display: 'flex', gap: 10, padding: '0 20px', overflow: 'hidden' }}>
        <div style={{ width: 200, height: 130, borderRadius: 14, backgroundImage: 'url(assets/runners-1.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', flex: 'none' }} />
        <div style={{ width: 200, height: 130, borderRadius: 14, backgroundImage: 'url(assets/runners-2.jpg)', backgroundSize: 'cover', backgroundPosition: 'center', flex: 'none' }} />
      </div>
      <div style={{ marginTop: 18, textAlign: 'center', fontFamily: F.body, fontWeight: 300, fontSize: 14, color: C.green }}>Lihat Lebih Banyak →</div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// 9 — Syarat & Lokasi & Footer
// ─────────────────────────────────────────────────────────────────────────
function Terms() {
  const items = [
  'Khusus seluruh karyawan BAF (under/OC).',
  'Setiap karyawan hanya boleh mengikuti satu grup (W/R atau Cycling).',
  'Grup pertama yang terdaftar yang diakui jika mendaftar lebih dari 1.',
  'Setiap grup memiliki nama yang unik.',
  'Wajib unduh & sambungkan Strava — aktivitas tercatat otomatis.',
  'Akun Strava & Instagram/TikTok tidak boleh private.',
  'Aktivitas wajib outdoor — tidak diperbolehkan treadmill atau sepeda statis.'];

  return (
    <div style={{ padding: '40px 20px 0' }}>
      <SectionTitle sub="Pastikan kamu memenuhi seluruh ketentuan sebelum mendaftar.">Syarat &amp; Ketentuan</SectionTitle>
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((t, i) =>
        <div key={i} style={{ display: 'flex', gap: 10 }}>
            <div style={{
            width: 20, height: 20, flex: 'none', borderRadius: 10,
            background: `${C.purple}15`, color: C.purple,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: F.body, fontWeight: 700, fontSize: 11
          }}>{i + 1}</div>
            <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 13, lineHeight: '19px', color: C.textMd }}>{t}</div>
          </div>
        )}
      </div>
    </div>);

}

function Location() {
  return (
    <div style={{ padding: '40px 20px 0' }}>
      <div style={{ fontFamily: F.body, fontWeight: 300, fontSize: 14, lineHeight: '22px', color: C.textMd }}>
        Pojok Kayuh adalah event tahunan PT Bussan Auto Finance untuk membakar semangat para BAFers — runner, cyclist, dan konten kreator — dalam misi <b style={{ color: C.purple }}>Physical &amp; Emotional Health</b>.
      </div>

      <div style={{ marginTop: 14, display: 'flex', gap: 10 }}>
        {/* Instagram */}
        <a href="#" style={{
          width: 38, height: 38, borderRadius: 10,
          background: 'linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          textDecoration: 'none',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <rect x="2" y="2" width="20" height="20" rx="5" stroke="#fff" strokeWidth="2"/>
            <circle cx="12" cy="12" r="4.5" stroke="#fff" strokeWidth="2"/>
            <circle cx="17.5" cy="6.5" r="1.2" fill="#fff"/>
          </svg>
        </a>
        {/* Facebook */}
        <a href="#" style={{
          width: 38, height: 38, borderRadius: 10,
          background: '#1877F2',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          textDecoration: 'none',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
            <path d="M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9V15h-2.5v-3h2.5V9.8c0-2.5 1.5-3.9 3.7-3.9 1.1 0 2.2 0.2 2.2 0.2v2.5h-1.3c-1.3 0-1.7 0.8-1.7 1.6V12h2.9l-0.5 3h-2.4v6.9C18.3 21.1 22 17 22 12z"/>
          </svg>
        </a>
        {/* YouTube */}
        <a href="#" style={{
          width: 38, height: 38, borderRadius: 10,
          background: '#FF0000',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          textDecoration: 'none',
        }}>
          <svg width="20" height="14" viewBox="0 0 24 17" fill="#fff">
            <path d="M23.5 2.7c-0.3-1-1-1.8-2-2C19.7 0.2 12 0.2 12 0.2S4.3 0.2 2.5 0.7c-1 0.3-1.8 1-2 2C0 4.5 0 8.5 0 8.5s0 4 0.5 5.8c0.3 1 1 1.8 2 2 1.8 0.5 9.5 0.5 9.5 0.5s7.7 0 9.5-0.5c1-0.3 1.8-1 2-2 0.5-1.8 0.5-5.8 0.5-5.8s0-4-0.5-5.8z"/>
            <path d="M9.6 12V5l6.4 3.5L9.6 12z" fill="#FF0000"/>
          </svg>
        </a>
      </div>

      <div style={{ marginTop: 22, fontFamily: F.body, fontWeight: 700, fontSize: 24, lineHeight: '30px', color: C.navy }}>Lokasi</div>
      <div style={{ marginTop: 8, fontFamily: F.body, fontWeight: 300, fontSize: 14, lineHeight: '22px', color: C.textMd }}>
        Jl. Tanjung Barat Raya No.121 RT 14/RW 4, Kel. Tanjung Barat, Kec. Jagakarsa, Kota Jakarta Selatan, DKI Jakarta 12530
      </div>
    </div>);

}

function Footer() {
  return (
    <div style={{
      marginTop: 36, padding: '14px 18px',
      background: '#000', textAlign: 'center',
      fontFamily: F.body, fontWeight: 300, fontSize: 11,
      color: '#fff', lineHeight: '18px'
    }}>
      PT Bussan Auto Finance berizin &amp; diawasi oleh Otoritas Jasa Keuangan
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// Compose
// ─────────────────────────────────────────────────────────────────────────
function PojokKayuhHome2026() {
  return (
    <div style={{
      width: 375, background: '#fff', position: 'relative', overflow: 'hidden',
      fontFamily: F.body
    }}>
      <StatusBar />
      <TopBar />
      <Hero />
      <Misi />
      <ChallengeSection />
      <Leaderboard />
      <Potret />
      <Terms />
      <Location />
      <Footer />
      {/* Home indicator */}
      <div style={{
        position: 'sticky', bottom: 0, height: 0
      }} />
    </div>);

}

Object.assign(window, { PojokKayuhHome2026 });