// ============================================================
// sections-c.jsx — Story, Fun Stats, Goal, Footer, Profile modal
// ============================================================

// ---- BRAND STORY ----
function Story() {
  return (
    <section id="story" className="section-pad story-sec theme-dark grid-bg">
      <div className="story-glow" />
      <div className="wrap story-inner">
        <div className="story-lead">
          <Reveal><span className="eyebrow">// 04 — Our story</span></Reveal>
          <Reveal delay={60}>
            <h2 className="story-title">
              By day we defend.<br />
              <span className="teal">By night, we run.</span>
            </h2>
          </Reveal>
          <Reveal delay={120} className="story-copy">
            <p>What started as a few friends meeting for evening runs became a community of cybersecurity professionals pushing each other to get stronger, healthier, and more disciplined.</p>
            <p>We secure applications, investigate threats, build products, and defend organizations. We believe the mindset that builds great security professionals builds great athletes, too.</p>
          </Reveal>
        </div>
        <div className="values">
          {VALUES.map((v, i) => (
            <Reveal key={v.k} delay={80 + i * 80} className="value-card">
              <span className="value-no mono">{String(i + 1).padStart(2, "0")}</span>
              <div>
                <div className="value-k">{v.k}</div>
                <div className="value-d">{v.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .story-sec { background: linear-gradient(180deg, var(--bg-grad-1), var(--navy) 220%); overflow: hidden; }
        .story-glow { position: absolute; left: -10%; bottom: -30%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(4,160,172,.16), transparent 60%); pointer-events: none; }
        .story-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
        .story-title { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; font-size: clamp(34px, 5vw, 68px); margin-top: 18px; }
        .story-title .teal { color: var(--teal); }
        .story-copy { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
        .story-copy p { color: var(--text-dim); font-size: 16.5px; line-height: 1.65; max-width: 52ch; }
        .values { display: flex; flex-direction: column; gap: 14px; }
        .value-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.015); transition: border-color .2s, background .2s; }
        .value-card:hover { border-color: color-mix(in oklab, var(--teal) 50%, var(--line)); background: var(--teal-soft); }
        .value-no { font-family: var(--font-display); font-size: 24px; color: var(--teal); flex: none; }
        .value-k { font-weight: 600; font-size: 18px; }
        .value-d { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-top: 5px; }
        @media (max-width: 900px){ .story-inner { grid-template-columns: 1fr; gap: 36px; } }
      `}</style>
    </section>
  );
}

// ---- FUN STATS + GOAL + CHALLENGES ----
function StatsGoal() {
  const goalPct = GOAL.targetKm ? Math.min(100, Math.round((TEAM.distance / GOAL.targetKm) * 100)) : 0;
  const [ref, seen] = useInView();
  const animPct = useCountUp(goalPct, seen, 1600);
  const toGo = Math.max(GOAL.targetKm - TEAM.distance, 0);
  return (
    <section id="stats" className="section-pad">
      <div className="wrap">
        <Reveal><span className="eyebrow">// 05 — Monthly team statistics</span></Reveal>
        <Reveal delay={60}><h2 className="sec-title">The numbers behind the month.</h2></Reveal>
        <div className="fun-grid">
          {FUN_STATS.map((s, i) => (
            <Reveal key={s.label} delay={80 + i * 60} className={"fun-card card" + (s.wide ? " fun-card--wide" : "")}>
              <div className="fun-val"><span className="tnum">{s.value}</span> {s.unit && <span className="fun-unit mono">{s.unit}</span>}</div>
              <div className="fun-label">{s.label}</div>
              <div className="fun-note mono">{s.note}</div>
            </Reveal>
          ))}
        </div>

        <div className="goal-row">
          <Reveal delay={60} className="goal-card card card-corner">
            <div className="goal-head">
              <div>
                <span className="eyebrow" style={{ marginBottom: 0 }}>Team goal · {GOAL.month}</span>
                <h3 className="goal-title">{GOAL.label}</h3>
              </div>
              <div className="goal-pct mono"><span ref={ref} className="tnum">{Math.round(animPct)}</span><span className="goal-pct-sym">%</span></div>
            </div>
            <div className="goal-track"><span style={{ width: (seen ? goalPct : 0) + "%" }}></span></div>
            <div className="goal-foot mono">
              <span>{TEAM.distance.toLocaleString("en-US")} km logged</span>
              <span>{toGo.toLocaleString("en-US")} km to go</span>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        .fun-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px; }
        .fun-card { padding: 24px; display: flex; flex-direction: column; min-height: 132px; transition: border-color .2s; }
        .fun-card:hover { border-color: color-mix(in oklab, var(--teal) 45%, var(--line)); }
        .fun-card--wide { grid-column: span 2; }
        .fun-val { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px,3vw,40px); line-height: 1; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
        .fun-unit { font-family: var(--font-mono); font-size: 14px; color: var(--teal); font-weight: 500; }
        .fun-label { color: var(--text); font-size: 14px; margin-top: auto; padding-top: 14px; }
        .fun-note { font-size: 11px; color: var(--text-faint); margin-top: 6px; letter-spacing: .04em; }
        .goal-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
        .goal-card { padding: 30px 30px 26px; display: flex; flex-direction: column; justify-content: center; }
        .goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
        .goal-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,2.6vw,34px); margin-top: 10px; }
        .goal-pct { font-family: var(--font-display); font-size: clamp(44px,6vw,76px); color: var(--teal); line-height: .9; display: flex; align-items: flex-start; }
        .goal-pct-sym { font-size: .4em; margin-top: .4em; }
        .goal-track { height: 12px; background: var(--line-2); border-radius: 8px; overflow: hidden; margin-top: 24px; }
        .goal-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--teal)); border-radius: 8px; transition: width 1.4s cubic-bezier(.22,.61,.36,1); }
        .goal-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-top: 12px; }
        .challenges { display: flex; flex-direction: column; gap: 14px; }
        .chal { padding: 18px 20px; }
        .chal-top { display: flex; justify-content: space-between; align-items: center; }
        .chal-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
        .chal-pct { font-size: 13px; color: var(--teal); font-weight: 600; }
        .chal-title { font-size: 15px; font-weight: 600; margin: 7px 0 12px; }
        .chal-track { height: 6px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
        .chal-track span { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
        @media (max-width: 1000px){ .fun-grid { grid-template-columns: repeat(2,1fr); } .goal-row { grid-template-columns: 1fr; } }
        @media (max-width: 560px){ .fun-grid { grid-template-columns: 1fr; } .fun-card--wide { grid-column: span 1; } }
      `}</style>
    </section>
  );
}

// ---- FOOTER ----
function Footer({ onJoin }) {
  return (
    <footer className="footer theme-dark grid-bg">
      <div className="footer-glow" />
      <div className="wrap footer-inner">
        <div className="footer-cta">
          <h2 className="footer-h">Lace up. Get on the board.</h2>
          <p className="footer-p">Connect your Strava and your next run appears on the feed within 15 minutes.</p>
          <button className="btn btn-primary footer-join" onClick={onJoin}>Connect Strava →</button>
          <a className="footer-ig mono" href="https://www.instagram.com/cyberrunner__" target="_blank" rel="noopener noreferrer">
            <svg className="ig-ico" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
              <rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="currentColor" strokeWidth="2" />
              <circle cx="12" cy="12" r="4.4" fill="none" stroke="currentColor" strokeWidth="2" />
              <circle cx="17.4" cy="6.6" r="1.3" fill="currentColor" />
            </svg>
            @cyberrunner__
          </a>
        </div>
        <div className="footer-grid">
          <a href="#top" className="footer-logo"><CyberRunnerLogo /></a>
          <nav className="footer-links">
            <a href="#leaderboard">Leaderboards</a><a href="#attendance">Attendance</a><a href="#feed">Feed</a><a href="#manifesto">Who we are</a>
            {SHOW_BADGES && <a href="#badges">Badges</a>}<a href="#story">Story</a><a href="#stats">Stats</a>
          </nav>
          <div className="footer-meta mono">
            <span>© 2026 {CLUB_NAME.toUpperCase()}</span>
          </div>
        </div>
      </div>
      <style>{`
        .footer { position: relative; overflow: hidden; padding: clamp(64px,9vw,120px) 0 40px; background: linear-gradient(180deg, var(--bg-grad-2), #02060a); border-top: 1px solid var(--line); }
        .footer-glow { position: absolute; top: -20%; right: 10%; width: 50vw; height: 40vw; max-width: 560px; max-height: 460px; background: radial-gradient(circle, rgba(4,160,172,.14), transparent 62%); pointer-events: none; }
        .footer-inner { position: relative; z-index: 2; }
        .footer-cta { max-width: 620px; }
        .footer-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px,5vw,62px); line-height: 1.02; letter-spacing: -.01em; }
        .footer-p { color: var(--text-dim); font-size: 17px; line-height: 1.6; margin-top: 16px; max-width: 46ch; }
        .footer-join { margin-top: 28px; }
        .footer-ig { display: flex; width: fit-content; align-items: center; gap: 9px; margin-top: 20px; color: var(--text-dim); text-decoration: none; font-size: 13px; letter-spacing: .04em; transition: color .15s; }
        .footer-ig:hover { color: var(--teal); }
        .footer-ig .ig-ico { color: var(--teal); flex: none; }
        .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(48px,7vw,88px); padding-top: 32px; border-top: 1px solid var(--line); }
        .footer-logo { height: 30px; display: block; }
        .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
        .footer-links a { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-decoration: none; letter-spacing: .04em; transition: color .15s; }
        .footer-links a:hover { color: var(--teal); }
        .footer-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: 10px; letter-spacing: .12em; color: var(--text-faint); }
        @media (max-width: 760px){ .footer-meta { text-align: left; } }
      `}</style>
    </footer>
  );
}

// ---- PROFILE MODAL ----
function ProfileModal({ member, onClose }) {
  useEffect(() => {
    if (!member) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [member]);
  if (!member) return null;
  const m = member;
  const stats = [
    { k: "Monthly distance", v: m.km.toFixed(1), u: "km" },
    { k: "Sessions", v: m.sessions, u: "runs" },
    { k: "Current streak", v: m.streak, u: "days" },
    { k: "Longest run", v: m.longest.toFixed(1), u: "km" },
    { k: "Avg pace", v: paceLabel(m.paceSec), u: "/km" },
    { k: "Elevation", v: m.elev.toLocaleString("en-US"), u: "m" },
  ];
  return (
    <div className="pm-overlay" onClick={onClose}>
      <div className="pm card card-corner" onClick={(e) => e.stopPropagation()}>
        <button className="pm-close mono" onClick={onClose} aria-label="Close">ESC ✕</button>
        <div className="pm-head">
          <Avatar m={m} size={68} />
          <div>
            <div className="pm-name">{m.name}</div>
            <div className="pm-role mono">@{m.handle}</div>
            <div className="pm-last mono">last active {m.last}</div>
          </div>
        </div>
        <div className="pm-stats">
          {stats.map(s => (
            <div key={s.k} className="pm-stat">
              <div className="pm-stat-v"><span className="tnum">{s.v}</span> <span className="pm-stat-u mono">{s.u}</span></div>
              <div className="pm-stat-k">{s.k}</div>
            </div>
          ))}
        </div>
        {SHOW_BADGES && (
          <div className="pm-badges">
            <div className="pm-badges-label mono">BADGES EARNED · {m.badges.length}</div>
            <div className="pm-badge-row">
              {m.badges.length === 0 && <span className="pm-badge-none mono">none yet — keep running</span>}
              {m.badges.map(bid => BADGE_MAP[bid] && (
                <div key={bid} className="pm-badge" title={BADGE_MAP[bid].name}>
                  <span className="pm-badge-code mono">{BADGE_MAP[bid].code}</span>
                  <span className="pm-badge-name">{BADGE_MAP[bid].name}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <style>{`
        .pm-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2,5,9,.74); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: pmfade .2s ease; }
        @keyframes pmfade { from { opacity: 0; } }
        .pm { width: min(540px, 100%); padding: 32px; animation: pmpop .28s cubic-bezier(.22,.61,.36,1); }
        @keyframes pmpop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
        .pm-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-size: 11px; letter-spacing: .1em; padding: 6px 10px; border-radius: 4px; cursor: pointer; transition: all .15s; }
        .pm-close:hover { color: var(--teal); border-color: var(--teal); }
        .pm-head { display: flex; gap: 18px; align-items: center; }
        .pm-name { font-family: var(--font-display); font-weight: 500; font-size: 28px; }
        .pm-role { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
        .pm-last { font-size: 11px; color: var(--teal); display: flex; align-items: center; gap: 8px; margin-top: 8px; letter-spacing: .04em; }
        .pm-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 26px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
        .pm-stat { background: var(--panel); padding: 16px 14px; }
        .pm-stat-v { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--text); }
        .pm-stat-u { font-family: var(--font-mono); font-size: 12px; color: var(--teal); }
        .pm-stat-k { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
        .pm-badges { margin-top: 24px; }
        .pm-badges-label { font-size: 10px; letter-spacing: .16em; color: var(--text-faint); }
        .pm-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        .pm-badge-none { font-size: 12px; color: var(--text-faint); }
        .pm-badge { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); }
        .pm-badge-code { font-size: 11px; font-weight: 700; color: var(--teal); }
        .pm-badge-name { font-size: 12px; color: var(--text-dim); }
      `}</style>
    </div>
  );
}

Object.assign(window, { Story, StatsGoal, Footer, ProfileModal });
