/* Club FRESH — Rhythm (her progress) */
function CFRhythm({ sweep, onSetWeek }) {
  const { CF_Icon: Icon, CF_RHYTHM: R, CF_SEASON: SEASON, CF_FLOOR: FLOOR, CF_PILLARS: PILLARS, CF_PILLAR_HEX: PHEX, CF_PILLAR_ICON: PI } = window;
  const dows = ['M', 'T', 'W', 'T', 'F'];
  // today's marks come live from the sweep
  const liveMarks = PILLARS.filter(p => sweep[p.key] && sweep[p.key] !== 'none')
    .map(p => ({ a: p.key, max: sweep[p.key] === 'max' }));
  const cluster = R.cluster.map(d => d.today ? { ...d, marks: liveMarks } : d);

  return (
    <div className="cf-fade-in">
      <div className="cf-pad" style={{ paddingTop: 8, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <p className="cf-eyebrow" style={{ marginBottom: 8 }}>You are moving</p>
          <h1 className="cf-display" style={{ fontSize: 46 }}>Rhythm</h1>
        </div>
        <window.CFFreshMark size={26} />
      </div>

      {/* this week */}
      <div className="cf-pad" style={{ marginTop: 20 }}>
        <div className="cf-card" style={{ padding: '20px 20px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h3 className="cf-h3" style={{ fontSize: 20 }}>This week</h3>
            <button className="cf-reset cf-tap" onClick={onSetWeek} style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-h)', display: 'inline-flex', alignItems: 'center', gap: 5, height: 32, paddingInline: 12, borderRadius: 999, border: '1.4px solid rgba(20,16,12,0.16)' }}><Icon name="sliders" size={13} /> Set min &amp; max</button>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 22 }}>
            {cluster.map((d, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9 }}>
                <DayCluster day={d} pillars={PILLARS} PHEX={PHEX} />
                <span style={{ fontSize: 11.5, color: d.today ? 'var(--ink-h)' : 'var(--ink-m)', fontWeight: d.today ? 600 : 400 }}>{dows[i]}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, margin: '18px 0 0', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--ink-m)' }}><span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--ink-h)' }} /> minimum</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--ink-m)' }}><Icon name="spark" size={11} /> maximum</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--ink-m)' }}><Icon name="heart" size={11} /> freedom</span>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 13, color: 'var(--ink-m)', lineHeight: 1.5, textAlign: 'center' }}>
            The honest texture of your week. Some days five, some days two. Both count.
          </p>
        </div>
      </div>

      {/* weeks-in-rhythm tier */}
      <div className="cf-pad" style={{ marginTop: 14 }}>
        <window.CFTierBlock weeks={R.weeksInRhythm} tiers={R.tiers} />
      </div>

      {/* identity stats */}
      <div className="cf-pad" style={{ marginTop: 12 }}>
        <window.CFStatPair>
          <window.CFIdentityStat icon="spark" value={R.deckCount} label={`cards in your deck · ${R.deckTotal} to collect`} accent />
          <window.CFIdentityStat icon="heart" value={R.freedomFridays} label="Freedom Fridays kept" />
        </window.CFStatPair>
      </div>

      {/* season medallion */}
      <div className="cf-pad" style={{ marginTop: 12 }}>
        <window.CFMedallionCard season={SEASON} weeks={R.weeksInRhythm} neededWeeks={8} />
      </div>

      {/* FRESH score */}
      <div className="cf-pad" style={{ marginTop: 14 }}>
        <div className="cf-card" style={{ padding: '22px 20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
            <div>
              <h3 className="cf-h3" style={{ fontSize: 20 }}>FRESH score</h3>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginTop: 8 }}>
                <span className="cf-num" style={{ fontSize: 50 }}>{R.fresh.headline}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 600, color: 'var(--a-s)' }}>
                  <Icon name="arrowUR" size={14} /> up {R.fresh.delta} this season
                </span>
              </div>
            </div>
            <button className="cf-reset cf-tap" style={{ height: 38, paddingInline: 15, borderRadius: 999, border: '1.4px solid rgba(20,16,12,0.18)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink-h)' }}>Re-measure</button>
          </div>
          <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 15 }}>
            {R.fresh.bars.map(b => (
              <div key={b.anchor} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 72, fontSize: 12.5, color: 'var(--ink-b)', fontWeight: 500 }}>{b.label}</span>
                <div style={{ flex: 1, height: 9, borderRadius: 999, background: 'rgba(20,16,12,0.07)', overflow: 'hidden' }}>
                  <div style={{ width: b.score + '%', height: '100%', borderRadius: 999, background: PHEX[b.anchor] }} />
                </div>
                <span className="cf-num" style={{ fontSize: 13, width: 24, textAlign: 'right' }}>{b.score}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* watch your floor rise */}
      <div className="cf-pad" style={{ marginTop: 12 }}>
        <window.CFFloorGraph floor={FLOOR} />
      </div>

      {/* progress party */}
      <div className="cf-pad" style={{ marginTop: 14 }}>
        <div style={{ borderRadius: 'var(--cf-radius)', padding: '18px 20px', background: 'color-mix(in srgb, var(--cf-accent) 16%, #fff)', border: '1px solid color-mix(in srgb, var(--cf-accent) 26%, transparent)', display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 44, height: 44, borderRadius: 13, background: 'var(--cf-accent)', color: 'var(--cf-accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="spark" size={22} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--cf-head)', fontSize: 18, color: 'var(--ink-h)' }}>{SEASON.party.title}</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-b)', marginTop: 2 }}>{SEASON.party.date} · {SEASON.party.note}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CFRhythm });

/* five-anchor dot cluster for one day */
function DayCluster({ day, pillars, PHEX }) {
  const { CF_Icon: Icon } = window;
  const ring = day.today ? '0 0 0 2.5px #fff, 0 0 0 4.5px rgba(20,16,12,0.5)' : 'none';
  if (day.freedom) {
    return (
      <span style={{ width: 46, height: 46, borderRadius: 15, background: 'rgba(20,16,12,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#b59a73', boxShadow: ring }}>
        <Icon name="heart" size={18} />
      </span>
    );
  }
  const markMap = {};
  (day.marks || []).forEach(m => { markMap[m.a] = m; });
  return (
    <span style={{ width: 46, height: 46, borderRadius: 15, background: '#fff', border: '1px solid rgba(20,16,12,0.07)', display: 'flex', flexWrap: 'wrap', alignContent: 'center', justifyContent: 'center', gap: 3, padding: 5, boxSizing: 'border-box', boxShadow: ring }}>
      {pillars.map(p => {
        const m = markMap[p.key];
        return (
          <span key={p.key} style={{ position: 'relative', width: 8, height: 8, borderRadius: '50%', background: m ? PHEX[p.key] : 'rgba(20,16,12,0.1)' }}>
            {m && m.max && <span style={{ position: 'absolute', inset: -2, borderRadius: '50%', boxShadow: `0 0 0 1.5px ${PHEX[p.key]}` }} />}
          </span>
        );
      })}
    </span>
  );
}