/* Club FRESH — Settings / profile */
function CFSettings({ back, avatar }) {
  const { CF_Icon: Icon, CF_Monogram: Mono } = window;
  const [notif, setNotif] = React.useState({ replies: true, mentions: true, tracy: true, nudge: true, quiet: true });
  const toggle = (k) => setNotif(n => ({ ...n, [k]: !n[k] }));

  const Toggle = ({ on, onClick }) => (
    <button className="cf-reset" onClick={onClick} style={{ width: 46, height: 28, borderRadius: 999, background: on ? 'var(--a-s)' : 'rgba(20,16,12,0.16)', position: 'relative', transition: 'background .2s', flexShrink: 0 }}>
      <span style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 22, height: 22, borderRadius: '50%', background: '#fff', transition: 'left .2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
    </button>
  );
  const Row = ({ icon, label, sub, right, onClick, last }) => (
    <button className="cf-reset" onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderBottom: last ? 'none' : '1px solid rgba(20,16,12,0.06)', textAlign: 'left' }}>
      {icon && <span style={{ width: 34, height: 34, borderRadius: 10, background: 'color-mix(in srgb, var(--cf-accent) 14%, #fff)', color: 'var(--cf-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={18} /></span>}
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink-h)' }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: 'var(--ink-m)', marginTop: 1 }}>{sub}</div>}
      </div>
      {right}
    </button>
  );

  return (
    <div className="cf-fade-in">
      <div className="cf-pad" style={{ paddingTop: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button className="cf-glass cf-icon-only" onClick={back}><Icon name="arrowL" size={19} /></button>
      </div>

      {/* profile header */}
      <div className="cf-pad" style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 16 }}>
        <Mono name={avatar.name} pillar={avatar.anchor} size={68} />
        <div>
          <h1 style={{ fontFamily: 'var(--cf-head)', fontSize: 30, color: 'var(--ink-h)', margin: 0 }}>{avatar.name}</h1>
          {avatar.founding && <span className="cf-badge" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 6, background: 'linear-gradient(135deg,#7b623c,#c9a46c)', color: '#fff' }}><Icon name="spark" size={12} /> Founding member</span>}
        </div>
      </div>

      {/* notifications */}
      <div className="cf-pad" style={{ marginTop: 22 }}>
        <p className="cf-eyebrow" style={{ marginBottom: 10, marginLeft: 4 }}>Notifications</p>
        <div className="cf-card" style={{ overflow: 'hidden' }}>
          <Row icon="heart" label="Replies to you" right={<Toggle on={notif.replies} onClick={() => toggle('replies')} />} />
          <Row icon="users" label="Mentions" right={<Toggle on={notif.mentions} onClick={() => toggle('mentions')} />} />
          <Row icon="spark" label="Tracy posts" right={<Toggle on={notif.tracy} onClick={() => toggle('tracy')} />} />
          <Row icon="clock" label="Daily ritual nudge" sub="7:00 AM, your time" right={<Toggle on={notif.nudge} onClick={() => toggle('nudge')} />} />
          <Row icon="leaf" label="Quiet hours" sub="9pm – 7am" right={<Toggle on={notif.quiet} onClick={() => toggle('quiet')} />} last />
        </div>
      </div>

      {/* account */}
      <div className="cf-pad" style={{ marginTop: 18 }}>
        <p className="cf-eyebrow" style={{ marginBottom: 10, marginLeft: 4 }}>Account</p>
        <div className="cf-card" style={{ overflow: 'hidden' }}>
          <Row icon="briefcase" label="Billing & purchases" sub="Manage in Stripe" right={<Icon name="chevR" size={16} style={{ color: 'var(--ink-m)' }} />} />
          <Row icon="bell" label="Help & contact" right={<Icon name="chevR" size={16} style={{ color: 'var(--ink-m)' }} />} last />
        </div>
      </div>

      <div className="cf-pad" style={{ marginTop: 18 }}>
        <button className="cf-reset" style={{ width: '100%', height: 50, borderRadius: 999, background: '#fff', border: '1px solid rgba(20,16,12,0.1)', color: '#b85c4a', fontSize: 14.5, fontWeight: 600 }}>Log out</button>
        <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--ink-m)', margin: '14px 0 0' }}>Club FRESH · living FRESH after the Reset</p>
      </div>
    </div>
  );
}

Object.assign(window, { CFSettings });