/* Club FRESH — Season (this season's path) */
function CFSeason({ avatar, go }) {
  const { CF_Icon: Icon, CF_SEASON: S, CF_PILLAR_HEX: PHEX, CF_PILLAR_ICON: PI } = window;
  const play = (s) => window.cfModal.open(close => <SessionPlayer session={s} onClose={close} />);

  return (
    <div className="cf-fade-in">
      {/* hero */}
      <div className="cf-pad" style={{ paddingTop: 8, display: 'flex', justifyContent: 'flex-end' }}>
        <window.CFFreshMark size={26} />
      </div>
      <div className="cf-pad" style={{ marginTop: 10 }}>
        <div style={{ position: 'relative', borderRadius: 'var(--cf-radius)', overflow: 'hidden', height: 280 }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/img/profile-hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 25%' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,16,12,0.1) 0%, rgba(20,16,12,0) 30%, rgba(20,16,12,0.72) 100%)' }} />
          <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20 }}>
            <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.82)' }}>{S.dates}</span>
            <h1 style={{ fontFamily: 'var(--cf-head)', fontSize: 38, color: '#fff', margin: '8px 0 0', lineHeight: 1.02 }}>{S.name}</h1>
            <p className="cf-script" style={{ fontSize: 27, color: '#fff', margin: '6px 0 0' }}>{S.line}</p>
          </div>
        </div>
      </div>

      {/* FRESH Framework — feature card with image */}
      <div className="cf-pad" style={{ marginTop: 18 }}>
        <button className="cf-reset cf-tap" style={{ width: '100%' }} onClick={() => go('foundations')}>
          <div className="cf-card" style={{ overflow: 'hidden', textAlign: 'left', display: 'flex', alignItems: 'stretch' }}>
            <div style={{ width: 118, flexShrink: 0, position: 'relative', backgroundImage: 'url(assets/img/profile-hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center 22%' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(20,16,12,0) 55%, rgba(255,255,255,0.06) 100%)' }} />
            </div>
            <div style={{ padding: '16px 16px', flex: 1, minWidth: 0 }}>
              <span style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-m)' }}>Start here</span>
              <div style={{ fontFamily: 'var(--cf-head)', fontSize: 21, color: 'var(--ink-h)', marginTop: 6, lineHeight: 1.06 }}>The FRESH<br/>Framework</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, fontSize: 12.5, color: 'var(--cf-accent)', fontWeight: 600 }}>
                Learn it with Tracy <Icon name="arrowUR" size={14} />
              </div>
            </div>
          </div>
        </button>
      </div>

      {/* The Well — row */}
      <div className="cf-pad" style={{ marginTop: 11 }}>
        <button className="cf-reset cf-tap" style={{ width: '100%' }} onClick={() => go('well')}>
          <div className="cf-card" style={{ padding: '15px 16px', display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left' }}>
            <span style={{ width: 46, height: 46, borderRadius: 14, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in srgb, var(--cf-accent) 14%, #fff)', color: 'var(--cf-accent)' }}>
              <Icon name="play" size={20} fill="currentColor" />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--cf-head)', fontSize: 18, color: 'var(--ink-h)', lineHeight: 1.1 }}>The Well</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-m)', marginTop: 3 }}>Her voice for the moment you’re in</div>
            </div>
            <Icon name="chevR" size={17} style={{ color: 'var(--ink-m)', flexShrink: 0 }} />
          </div>
        </button>
      </div>

      {/* sessions */}
      <div className="cf-pad" style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 12 }}>
        <h3 className="cf-h3" style={{ fontSize: 21 }}>Seasonal sessions</h3>
        <span style={{ flex: 1, height: 1, background: 'rgba(20,16,12,0.1)' }} />
        <span style={{ fontSize: 12.5, color: 'var(--ink-m)' }}>5 · this season</span>
      </div>
      <div className="cf-pad" style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {S.sessions.map((s, i) => (
          <button key={i} className="cf-reset cf-tap" style={{ width: '100%' }} onClick={() => play(s)}>
            <div className="cf-card" style={{ padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 13, textAlign: 'left' }}>
              <span style={{ width: 48, height: 48, borderRadius: 14, background: PHEX[s.anchor], color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative' }}>
                <Icon name="play" size={18} fill="#fff" />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: PHEX[s.anchor], fontWeight: 600 }}>{s.anchor}</div>
                <div style={{ fontFamily: 'var(--cf-head)', fontSize: 17, color: 'var(--ink-h)', marginTop: 2, lineHeight: 1.15 }}>{s.title}</div>
              </div>
              <span style={{ fontSize: 12.5, color: 'var(--ink-m)', flexShrink: 0 }}>{s.len}</span>
            </div>
          </button>
        ))}
      </div>

      {/* monthly guide */}
      <div className="cf-pad" style={{ marginTop: 20 }}>
        <div className="cf-card-dark" style={{ padding: '20px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 72, borderRadius: 8, background: 'linear-gradient(150deg,#2a251f,#15120f)', border: '1px solid rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.CFFreshMark size={22} light />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--cf-head)', fontSize: 19, color: '#fff' }}>{S.guide.title}</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.65)', marginTop: 3 }}>{S.guide.sub}</div>
            <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', marginTop: 6 }}>{S.guide.size}</div>
          </div>
          <button className="cf-reset" style={{ width: 42, height: 42, borderRadius: '50%', background: 'rgba(255,255,255,0.14)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="share" size={18} /></button>
        </div>
      </div>

      {/* activation call */}
      <div className="cf-pad" style={{ marginTop: 14 }}>
        <div className="cf-card" style={{ padding: '20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-m)' }}>
              <Icon name="calendar" size={15} /> Activation call
            </span>
            <span className="cf-badge" style={{ background: 'rgba(20,16,12,0.06)', color: 'var(--ink-m)' }}>Replay only</span>
          </div>
          <h3 className="cf-h3" style={{ fontSize: 20, marginTop: 12 }}>{S.call.title}</h3>
          <p style={{ fontSize: 13.5, color: 'var(--ink-b)', margin: '6px 0 0' }}>{S.call.date} · {S.call.tz}</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <button className="cf-reset cf-tap" style={{ flex: 1, height: 48, borderRadius: 999, background: 'var(--cf-dark)', color: '#fff', fontSize: 14, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}><Icon name="play" size={16} fill="#fff" /> Watch replay</button>
            <button className="cf-reset cf-tap" style={{ width: 48, height: 48, borderRadius: 999, background: '#fff', border: '1.4px solid rgba(20,16,12,0.14)', color: 'var(--ink-h)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="plus" size={18} /></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function SessionPlayer({ session, onClose }) {
  const { CF_Icon: Icon, CF_PILLAR_HEX: PHEX } = window;
  const accent = PHEX[session.anchor];
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 60, background: '#0c0a08', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, position: 'relative', background: `radial-gradient(80% 60% at 50% 35%, ${accent}55, #0c0a08 70%)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', top: 50, left: 22, right: 22, display: 'flex', justifyContent: 'space-between' }}>
          <button className="cf-glass cf-icon-only" onClick={onClose}><Icon name="chevD" size={20} /></button>
          <button className="cf-glass cf-icon-only"><Icon name="more" size={18} /></button>
        </div>
        <button className="cf-reset cf-tap" style={{ width: 84, height: 84, borderRadius: '50%', background: 'rgba(255,255,255,0.95)', color: '#1a1714', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="play" size={34} fill="#1a1714" />
        </button>
      </div>
      <div style={{ padding: '20px 22px 34px', background: '#0c0a08' }}>
        <div style={{ fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: accent, fontWeight: 600 }}>{session.anchor} · seasonal session</div>
        <h3 style={{ fontFamily: 'var(--cf-head)', fontSize: 24, color: '#fff', margin: '8px 0 0' }}>{session.title}</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16 }}>
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>0:00</span>
          <div style={{ flex: 1, height: 4, borderRadius: 999, background: 'rgba(255,255,255,0.18)' }}><div style={{ width: '6%', height: '100%', borderRadius: 999, background: accent }} /></div>
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{session.len}</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CFSeason });