// menove-circle.jsx, The Circle: community board for Menovē.
// Reddit-style board in the locked brand: QOTW from the team, threaded replies,
// hearts only (no downvotes), anonymous posting via the stone, and
// premium challenges with members-only locked threads.
// Depends on menove-final.jsx (FB, FBEyebrow).

/* ---------- shared chrome ---------- */

function CRStatus() {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 26px 0', fontSize: 12.5, fontWeight: 600, flex: 'none' }}>
      <span>9:41</span><span>5G · 76</span>
    </div>
  );
}

function CRNav() {
  const items = [
    { l: 'Today', d: <path d="M3 11l9-8 9 8M5 10v10h14V10" /> },
    { l: 'Track', d: <path d="M4 19V5M4 19h16M8 16l4-5 3 3 5-7" /> },
    { l: 'Patterns', d: <g><circle cx="6.5" cy="16.5" r="2" /><circle cx="12" cy="7.5" r="2" /><circle cx="17.5" cy="13.5" r="2" /><path d="M7.6 14.8l3.3-5.4M13.6 8.9l2.7 3.1" /></g> },
    { l: 'Circle', on: true, d: <g><circle cx="9" cy="8" r="3" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5" /></g> },
  ];
  return (
    <div style={{ display: 'flex', justifyContent: 'space-around', padding: '10px 12px 18px', fontFamily: FB.sans, flex: 'none', borderTop: `1px solid ${FB.line}`, background: FB.paper }}>
      {items.map((it) => (
        <div key={it.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, fontSize: 9.5, fontWeight: 700, width: 56, color: it.on ? FB.aub : FB.soft }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" style={{ width: 20, height: 20 }}>{it.d}</svg>
          {it.l}
        </div>
      ))}
    </div>
  );
}

/* avatars, a named member is a circle of paper; anonymous wears a stone.
   Anon stones: the poster picks a shape + shade at compose time. */
const ANON_SHAPES = [
  '50% 50% 50% 50% / 56% 56% 44% 44%',
  '54% 46% 52% 48% / 58% 56% 44% 42%',
  '66% 34% 56% 44% / 62% 74% 26% 38%',
  '58% 42% 56% 44% / 70% 66% 34% 30%',
];
const ANON_TONES = {
  bright: '#C3A5C9', steady: '#986EA2', tender: '#73477D',
  heavy: '#3F2B51', iris: '#BCABF1', aub: '#451B4F',
};
function CRAvatar({ who, size = 32, stone }) {
  if (who === 'anon') {
    const st = stone || { shape: 1, tone: 'aub' };
    return (
      <span style={{ width: size, height: size, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: '#EFE9F3' }}>
        <span style={{ width: size * .54, height: size * .4, borderRadius: ANON_SHAPES[st.shape], background: ANON_TONES[st.tone], opacity: .9, transform: `rotate(${st.shape % 2 ? -5 : 6}deg)` }}></span>
      </span>
    );
  }
  if (who === 'team') {
    return (
      <span style={{ width: size, height: size, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: FB.aub }}>
        <svg viewBox="0 0 64 64" fill="none" style={{ width: size * .62 }}>
          <path d="M24.5 21.5 C24.8 18.4 27.9 16.2 32.4 16.3 C36.7 16.4 39.6 18.7 39.9 21.8 C39.6 24.9 36.6 26.9 32.2 26.8 C28 26.7 24.9 24.6 24.5 21.5 Z" fill={FB.iris} />
          <path d="M19.5 35 C20 30.5 25 27.8 31.6 28 C38.5 28.2 44.1 31 44.5 35.4 C44.1 39.8 38.5 42.4 31.6 42.2 C25 42 19.9 39.4 19.5 35 Z" fill={FB.iris} />
          <path d="M14 50 C15 44.5 22 41.5 32 41.8 C42 42.1 49.5 45.5 50 51 C49.5 56.5 42 59.5 32 59.4 C22 59.3 14.5 55.5 14 50 Z" fill={FB.iris} />
        </svg>
      </span>
    );
  }
  return (
    <span style={{
      width: size, height: size, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
      borderRadius: '50%', background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`,
      fontSize: size * .34, fontWeight: 700, letterSpacing: '.04em', color: FB.ink, fontFamily: FB.sans,
    }}>{who}</span>
  );
}

function CRName({ who, name, time }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: who === 'anon' ? FB.soft : FB.ink, fontStyle: who === 'anon' ? 'italic' : 'normal' }}>{name}</span>
      {who === 'team' ? (
        <span style={{ fontSize: 8.5, letterSpacing: '.16em', fontWeight: 700, color: FB.aub, background: fbTint(FB.iris, .32), borderRadius: 999, padding: '2.5px 8px' }}>MENOVĒ</span>
      ) : null}
      {time ? <span style={{ fontSize: 11, fontWeight: 500, color: FB.soft }}>{time}</span> : null}
    </span>
  );
}

const fbTint = (hex, a) => {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
};

function CRHeart({ n, on }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: on ? FB.plum : FB.soft }}>
      <svg viewBox="0 0 24 24" style={{ width: 14, height: 14 }} fill={on ? FB.plum : 'none'} stroke={on ? FB.plum : 'currentColor'} strokeWidth="1.8">
        <path d="M12 20.2C8.6 17.6 3.8 13.9 3.8 9.8 3.8 7.2 5.8 5.2 8.2 5.2c1.5 0 2.9.7 3.8 2 .9-1.3 2.3-2 3.8-2 2.4 0 4.4 2 4.4 4.6 0 4.1-4.8 7.8-8.2 10.4z" />
      </svg>
      {n}
    </span>
  );
}

function CRReplies({ n }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: FB.soft }}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{ width: 13.5, height: 13.5 }}>
        <path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5c-1.5 0-3-.4-4.2-1L3 20l1.1-4.2A8.5 8.5 0 1 1 21 11.5z" />
      </svg>
      {n}
    </span>
  );
}

function CRLock({ size = 12, color }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke={color || FB.soft} strokeWidth="2" style={{ width: size, height: size, flex: 'none' }}>
      <rect x="5" y="11" width="14" height="9" rx="2.5" /><path d="M8 11V8a4 4 0 0 1 8 0v3" />
    </svg>
  );
}

function CRSearch({ placeholder = 'Search the circle' }) {
  return (
    <div style={{ margin: '0 22px', display: 'flex', alignItems: 'center', gap: 10, borderRadius: 999, padding: '11px 18px', background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
      <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2" style={{ width: 15, height: 15, flex: 'none' }}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></svg>
      <span style={{ fontSize: 13, color: FB.soft }}>{placeholder}</span>
    </div>
  );
}

function CRTag({ children }) {
  return (
    <span style={{ fontSize: 9.5, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 700, color: FB.aub, background: fbTint(FB.aub, .07), borderRadius: 999, padding: '3px 9px' }}>{children}</span>
  );
}

/* the tab frame, Circle / Resources segments under one roof */
function CRFrame({ label, seg = 'Circle', children, dim }) {
  return (
    <div data-screen-label={label} style={{
      width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: FB.paper, color: FB.ink, fontFamily: FB.sans, position: 'relative',
    }}>
      <CRStatus />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', padding: '14px 26px 0', flex: 'none' }}>
        <div>
          <div style={{ fontFamily: FB.display, fontSize: 22 }}>{seg === 'Circle' ? 'The Circle' : 'Resources'}</div>
          <div style={{ fontSize: 12, fontWeight: 500, marginTop: 3, color: FB.soft }}>
            {seg === 'Circle' ? '4,812 women, walking together' : 'Plain answers, reviewed by clinicians'}
          </div>
        </div>
        <CRAvatar who="AD" size={34} />
      </div>
      <div style={{ display: 'flex', gap: 6, padding: '14px 26px 0', flex: 'none' }}>
        {['Circle', 'Resources'].map((s) => (
          <span key={s} style={{
            fontSize: 12, fontWeight: 700, borderRadius: 999, padding: '7px 16px',
            background: s === seg ? FB.aub : 'transparent',
            color: s === seg ? '#fff' : FB.soft,
            boxShadow: s === seg ? 'none' : `inset 0 0 0 1px ${FB.line}`,
          }}>{s}</span>
        ))}
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>{children}</div>
      <CRNav />
      {dim ? <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div> : null}
    </div>
  );
}

/* a pushed detail screen, back chevron, no segments */
function CRSubFrame({ label, crumb, children, dim, noNav }) {
  return (
    <div data-screen-label={label} style={{
      width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: FB.paper, color: FB.ink, fontFamily: FB.sans, position: 'relative',
    }}>
      <CRStatus />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 22px 12px', flex: 'none', borderBottom: `1px solid ${FB.line}` }}>
        <svg viewBox="0 0 24 24" fill="none" stroke={FB.ink} strokeWidth="2.2" style={{ width: 18, height: 18 }}><path d="M15 5l-7 7 7 7" /></svg>
        <span style={{ fontSize: 13, fontWeight: 700 }}>{crumb}</span>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>{children}</div>
      {noNav ? null : <CRNav />}
      {dim ? <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div> : null}
    </div>
  );
}

/* ---------- C01 · Circle home ---------- */

const CR_THREADS = [
  { who: 'DK', name: 'Dana K.', time: '2h', title: 'Waking at 3am every night: what finally worked for you?', tag: 'Sleep', hearts: 24, replies: 32, on: true },
  { who: 'anon', name: 'Anonymous', stone: { shape: 2, tone: 'tender' }, time: '5h', title: 'Brain fog in meetings is starting to scare me. Anyone else?', tag: 'Work', hearts: 41, replies: 19 },
  { who: 'PS', name: 'Priya S.', time: '1d', title: 'Started HRT last month, happy to answer anything', tag: 'HRT', hearts: 67, replies: 54 },
  { who: 'anon', name: 'Anonymous', stone: { shape: 0, tone: 'bright' }, time: '1d', title: 'Small win: slept through the night for the first time in months', tag: 'Wins', hearts: 89, replies: 23, on: true },
];

function CRQotw({ compact }) {
  return (
    <div style={{
      margin: '0 22px', borderRadius: 18, background: FB.aub, color: '#fff', padding: '18px 20px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <CRAvatar who="team" size={26} />
        <span style={{ fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', fontWeight: 700, color: FB.iris }}>Question of the week</span>
      </div>
      <div style={{ fontFamily: FB.display, fontSize: 18.5, lineHeight: 1.4, marginTop: 10, maxWidth: 280, position: 'relative' }}>
        What do you wish someone had told you at the very beginning?
      </div>
      {compact ? null : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 14, position: 'relative' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: FB.iris }}>
            <svg viewBox="0 0 24 24" style={{ width: 14, height: 14 }} fill={FB.iris}><path d="M12 20.2C8.6 17.6 3.8 13.9 3.8 9.8 3.8 7.2 5.8 5.2 8.2 5.2c1.5 0 2.9.7 3.8 2 .9-1.3 2.3-2 3.8-2 2.4 0 4.4 2 4.4 4.6 0 4.1-4.8 7.8-8.2 10.4z" /></svg>
            214
          </span>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: 'rgba(255,255,255,.7)' }}>48 replies</span>
          <span style={{ marginLeft: 'auto', fontSize: 11.5, fontWeight: 700, color: '#fff', borderBottom: `1px solid ${fbTint(FB.iris, .6)}`, paddingBottom: 1 }}>Add yours</span>
        </div>
      )}
    </div>
  );
}

const CR_CHALLENGES = [
  { cat: 'Movement', tt: 'The Gentle Mile', meta: '14 days', state: 'Day 4 of 14', joined: true },
  { cat: 'Connection', tt: 'Reach for One', meta: '7 days', state: '212 joined' },
  { cat: 'Nutrition', tt: 'Steady Breakfasts', meta: '21 days', state: '147 joined' },
];

function CRChallengeStrip() {
  return (
    <div style={{ display: 'flex', gap: 10, padding: '0 22px', overflow: 'hidden' }}>
      {CR_CHALLENGES.map((c) => (
        <div key={c.tt} style={{
          flex: 'none', width: 158, borderRadius: 16, padding: '13px 14px 12px',
          background: c.joined ? fbTint(FB.iris, .2) : '#fff',
          boxShadow: c.joined ? 'none' : `inset 0 0 0 1px ${FB.line}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>{c.cat}</span>
            <CRLock size={11} color={FB.soft} />
          </div>
          <div style={{ fontFamily: FB.display, fontSize: 14.5, marginTop: 6 }}>{c.tt}</div>
          <div style={{ fontSize: 10.5, fontWeight: 600, color: c.joined ? FB.aub : FB.soft, marginTop: 7 }}>{c.joined ? c.state + ' · open thread' : c.meta + ' · ' + c.state}</div>
        </div>
      ))}
    </div>
  );
}

function CRSectionHead({ tt, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 26px', marginBottom: 10 }}>
      <FBEyebrow color={FB.soft}>{tt}</FBEyebrow>
      {action ? <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum }}>{action}</span> : null}
    </div>
  );
}

function CircleHome() {
  return (
    <CRFrame label="C01 · Circle home">
      <div style={{ paddingTop: 14 }}>
        <CRSearch />
        <div style={{ height: 14 }}></div>
        <CRQotw />
        <div style={{ height: 22 }}></div>
        <CRSectionHead tt="Challenges" action="See all" />
        <CRChallengeStrip />
        <div style={{ height: 22 }}></div>
        <CRSectionHead tt="In the circle" action="New thread" />
        <div style={{ padding: '0 26px' }}>
          {CR_THREADS.map((th, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 0', borderTop: `1px solid ${FB.line}` }}>
              <CRAvatar who={th.who} size={30} stone={th.stone} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <CRName who={th.who} name={th.name} time={th.time} />
                <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.45, color: FB.ink, marginTop: 3 }}>{th.title}</div>
                <div style={{ display: 'flex', gap: 14, marginTop: 7, alignItems: 'center' }}>
                  <CRTag>{th.tag}</CRTag>
                  <CRHeart n={th.hearts} on={th.on} />
                  <CRReplies n={th.replies} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </CRFrame>
  );
}

/* ---------- C02 · QOTW thread, threaded replies ---------- */

function CRReply({ who, name, time, body, hearts, on, depth = 0, last, stone }) {
  return (
    <div style={{ display: 'flex', gap: 11, padding: '11px 0 2px', marginLeft: depth ? 40 : 0, position: 'relative' }}>
      {depth ? <div style={{ position: 'absolute', left: -26, top: 0, bottom: last ? 'auto' : 0, height: last ? 26 : 'auto', width: 1.5, background: FB.line }}></div> : null}
      {depth ? <div style={{ position: 'absolute', left: -26, top: 26, width: 18, height: 1.5, background: FB.line }}></div> : null}
      <CRAvatar who={who} size={depth ? 26 : 30} stone={stone} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <CRName who={who} name={name} time={time} />
        <div style={{ fontSize: 13, lineHeight: 1.55, color: FB.body, marginTop: 3 }}>{body}</div>
        <div style={{ display: 'flex', gap: 14, marginTop: 6, alignItems: 'center' }}>
          <CRHeart n={hearts} on={on} />
          <span style={{ fontSize: 11, fontWeight: 700, color: FB.soft }}>Reply</span>
        </div>
      </div>
    </div>
  );
}

function CircleThread() {
  return (
    <CRSubFrame label="C02 · QOTW thread" crumb="This week's question">
      <div style={{ overflow: 'hidden', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ paddingTop: 16 }}>
          <CRQotw compact />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 26px 4px' }}>
          <CRHeart n={214} on />
          <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.soft }}>48 replies</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, fontWeight: 700, color: FB.soft }}>Most hearted</span>
        </div>
        <div style={{ padding: '2px 24px 0', flex: 1, overflow: 'hidden' }}>
          <CRReply who="anon" name="Anonymous" stone={{ shape: 3, tone: 'heavy' }} time="3d" hearts={58} on
            body={<span>That rage is a symptom too. I spent a year thinking something was wrong with <i>me as a person</i>.</span>} />
          <CRReply depth={1} who="team" name="The Menovē team" time="3d" hearts={22}
            body="It is, and it's in the sign list for exactly this reason. You were never the problem." />
          <CRReply depth={1} who="MT" name="Marisol T." time="2d" hearts={14} last
            body="A year here too. Naming it changed everything." />
          <CRReply who="MT" name="Marisol T." time="3d" hearts={36}
            body="That it isn't linear. Some weeks are quiet, some aren't, neither one is a verdict." />
          <CRReply depth={1} who="DK" name="Dana K." time="2d" hearts={12} on last
            body="“Neither one is a verdict”, I needed that today." />
          <CRReply who="PS" name="Priya S." time="2d" hearts={41}
            body="Get the bloodwork. Bring your record. Doctors listen differently when you arrive with evidence." />
        </div>
      </div>
      <div style={{ padding: '10px 18px 8px', flex: 'none', borderTop: `1px solid ${FB.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderRadius: 999, padding: '11px 18px', background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
          <span style={{ flex: 1, fontSize: 13, color: FB.soft }}>Add your answer…</span>
          <CRAvatar who="AD" size={24} />
        </div>
      </div>
    </CRSubFrame>
  );
}

/* ---------- C03 · compose with the anonymity choice ---------- */

function CircleCompose() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><CircleThread /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="C03 · Compose, post as" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, background: FB.paper, fontFamily: FB.sans, color: FB.ink,
        borderRadius: '26px 26px 0 0', padding: '10px 24px 28px', boxShadow: '0 -18px 50px -20px rgba(31,14,42,.5)',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: FB.line, margin: '0 auto 16px' }}></div>
        <FBEyebrow color={FB.soft}>Replying to this week's question</FBEyebrow>
        <div style={{ fontSize: 14.5, lineHeight: 1.6, color: FB.ink, marginTop: 12, minHeight: 66 }}>
          That you're allowed to ask for help before it gets bad. I waited until I was drowning because I thought it didn't “count” yet.<span style={{ borderLeft: `2px solid ${FB.plum}`, marginLeft: 1 }}></span>
        </div>
        <div style={{ height: 1, background: FB.line, margin: '14px 0 16px' }}></div>
        <FBEyebrow color={FB.soft}>Post as</FBEyebrow>
        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, borderRadius: 999, padding: '7px 14px 7px 8px', fontSize: 12.5, fontWeight: 700, color: FB.soft, boxShadow: `inset 0 0 0 1px ${FB.line}`, background: '#fff' }}>
            <CRAvatar who="AD" size={22} /> Aujéna D.
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, borderRadius: 999, padding: '7px 14px 7px 8px', fontSize: 12.5, fontWeight: 700, color: FB.aub, boxShadow: `inset 0 0 0 1.5px ${FB.aub}`, background: fbTint(FB.iris, .18) }}>
            <CRAvatar who="anon" size={22} stone={{ shape: 2, tone: 'tender' }} /> Anonymous
          </span>
        </div>
        <div style={{ height: 16 }}></div>
        <FBEyebrow color={FB.soft}>Your stone for this post</FBEyebrow>
        <div style={{ display: 'flex', gap: 9, marginTop: 10 }}>
          {[
            { shape: 0, tone: 'bright' }, { shape: 1, tone: 'steady' }, { shape: 2, tone: 'tender' },
            { shape: 3, tone: 'heavy' }, { shape: 1, tone: 'iris' }, { shape: 2, tone: 'aub' },
          ].map((s, i) => (
            <span key={i} style={{ borderRadius: '50%', boxShadow: i === 2 ? `0 0 0 2px ${FB.paper}, 0 0 0 3.5px ${FB.aub}` : 'none' }}>
              <CRAvatar who="anon" size={36} stone={s} />
            </span>
          ))}
        </div>
        <div style={{ fontSize: 11.5, lineHeight: 1.55, color: FB.soft, marginTop: 14, maxWidth: 300 }}>
          Your stone is this post's only face, no name, no profile link, and it can't be traced back to you in the thread. Not even by us.
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 16 }}>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 26px', fontSize: 13.5, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Post anonymously</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- C04 · challenges hub ---------- */

const CR_CHALLENGE_FULL = [
  {
    cat: 'Movement', tt: 'The Gentle Mile', desc: 'A mile a day, any pace, any weather. Walked together.',
    meta: '14 days · 86 walking', joined: true, state: 'Day 4 · open the thread',
  },
  {
    cat: 'Connection', tt: 'Reach for One', desc: 'One real check-in with one real person, every day for a week.',
    meta: '7 days · starts Monday · 212 joined', state: 'Join',
  },
  {
    cat: 'Nutrition', tt: 'Steady Breakfasts', desc: 'Protein before coffee. Three weeks to test what it does for your mornings.',
    meta: '21 days · starts Jun 22 · 147 joined', state: 'Join',
  },
];

function CRChallengeCard({ c, locked }) {
  return (
    <div style={{
      borderRadius: 18, padding: '16px 18px', marginBottom: 10,
      background: c.joined && !locked ? fbTint(FB.iris, .2) : '#fff',
      boxShadow: c.joined && !locked ? 'none' : `inset 0 0 0 1px ${FB.line}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 9.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>{c.cat}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700, color: locked ? FB.soft : FB.aub }}>
          <CRLock size={11} color={locked ? FB.soft : FB.aub} /> {locked ? 'Premium' : 'Members-only thread'}
        </span>
      </div>
      <div style={{ fontFamily: FB.display, fontSize: 17.5, marginTop: 8, opacity: locked ? .55 : 1 }}>{c.tt}</div>
      <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 5, maxWidth: 270, opacity: locked ? .55 : 1 }}>{c.desc}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 13 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: FB.soft }}>{c.meta}</span>
        <span style={{
          fontSize: 12, fontWeight: 700, borderRadius: 999, padding: '8px 18px',
          background: locked ? 'transparent' : c.joined ? FB.aub : 'transparent',
          color: locked ? FB.soft : c.joined ? '#fff' : FB.aub,
          boxShadow: locked ? `inset 0 0 0 1px ${FB.line}` : c.joined ? 'none' : `inset 0 0 0 1.5px ${FB.aub}`,
        }}>{locked ? 'Unlock' : c.state}</span>
      </div>
    </div>
  );
}

function CircleChallenges({ locked }) {
  return (
    <CRSubFrame label={locked ? 'C06 · Challenges, free user' : 'C04 · Challenges hub'} crumb="Challenges">
      <div style={{ padding: '18px 22px 0' }}>
        <div style={{ fontFamily: FB.display, fontSize: 19, maxWidth: 280 }}>One small practice, held together.</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 6, maxWidth: 300 }}>
          Each challenge has a private thread, only the women walking it with you can read or post. Your daily stones count toward it.
        </div>
        <div style={{ height: 18 }}></div>
        {CR_CHALLENGE_FULL.map((c) => <CRChallengeCard key={c.tt} c={c} locked={locked} />)}
      </div>
    </CRSubFrame>
  );
}

/* ---------- C05 · inside a challenge, the locked thread ---------- */

function CircleChallengeDetail() {
  return (
    <CRSubFrame label="C05 · Challenge, locked thread" crumb="Challenges">
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{ margin: '16px 22px 0', borderRadius: 18, background: FB.aub, color: '#fff', padding: '16px 18px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -20, bottom: -30, width: 110, height: 84, borderRadius: '58% 42% 56% 44% / 70% 66% 34% 30%', background: fbTint(FB.iris, .14) }}></div>
          <span style={{ fontSize: 9.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.iris }}>Movement · Day 4 of 14</span>
          <div style={{ fontFamily: FB.display, fontSize: 19, marginTop: 6 }}>The Gentle Mile</div>
          <div style={{ display: 'flex', gap: 5, marginTop: 12, position: 'relative' }}>
            {Array.from({ length: 14 }).map((_, i) => (
              <span key={i} style={{
                width: 13, height: 9.5, borderRadius: i % 2 ? '66% 34% 56% 44% / 62% 74% 26% 38%' : '54% 46% 52% 48% / 58% 56% 44% 42%',
                transform: `rotate(${i % 2 ? 7 : -6}deg)`,
                background: i < 4 ? FB.iris : 'transparent',
                boxShadow: i < 4 ? 'none' : 'inset 0 0 0 1.2px rgba(255,255,255,.35)',
              }}></span>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 12, fontSize: 10.5, fontWeight: 600, color: 'rgba(255,255,255,.7)' }}>
            <CRLock size={11} color={FB.iris} /> 86 members · only they can read or post here
          </div>
        </div>
        <div style={{ padding: '14px 26px 0' }}>
          <div style={{ display: 'flex', gap: 11, padding: '4px 0 10px', borderBottom: `1px solid ${FB.line}` }}>
            <CRAvatar who="team" size={30} />
            <div style={{ flex: 1 }}>
              <CRName who="team" name="The Menovē team" time="7:00 AM" />
              <div style={{ fontSize: 13, lineHeight: 1.55, color: FB.body, marginTop: 3 }}>Day 4: a mile in any weather. Where did yours take you?</div>
            </div>
          </div>
          <CRReply who="anon" name="Anonymous" stone={{ shape: 0, tone: 'iris' }} time="1h" hearts={18} on
            body="Around the block three times in the rain. Counting it." />
          <CRReply who="JW" name="June W." time="2h" hearts={31}
            body="The long way to the bakery. First morning this week the fog lifted before noon, noting it in my check-in." />
          <CRReply who="MT" name="Marisol T." time="3h" hearts={9}
            body="Hill at the end of my street. Day 4 and it's already less of an argument." />
        </div>
        <div style={{ flex: 1 }}></div>
        <div style={{ padding: '0 22px 14px', flex: 'none' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <span style={{ display: 'inline-flex', borderRadius: 999, padding: '13px 26px', fontSize: 13.5, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Mark today's mile</span>
          </div>
        </div>
      </div>
    </CRSubFrame>
  );
}

/* ---------- C06b · the premium gate sheet ---------- */

function CircleChallengeGate() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><CircleChallenges locked /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="C06b · Premium gate" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, background: FB.paper, fontFamily: FB.sans, color: FB.ink,
        borderRadius: '26px 26px 0 0', padding: '10px 28px 30px', textAlign: 'center',
        boxShadow: '0 -18px 50px -20px rgba(31,14,42,.5)',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: FB.line, margin: '0 auto 18px' }}></div>
        <span style={{ width: 56, height: 56, borderRadius: '50%', background: fbTint(FB.iris, .26), display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 64 64" fill="none" style={{ width: 34 }}>
            <path d="M24.5 21.5 C24.8 18.4 27.9 16.2 32.4 16.3 C36.7 16.4 39.6 18.7 39.9 21.8 C39.6 24.9 36.6 26.9 32.2 26.8 C28 26.7 24.9 24.6 24.5 21.5 Z" fill={FB.aub} />
            <path d="M19.5 35 C20 30.5 25 27.8 31.6 28 C38.5 28.2 44.1 31 44.5 35.4 C44.1 39.8 38.5 42.4 31.6 42.2 C25 42 19.9 39.4 19.5 35 Z" fill={FB.aub} />
            <path d="M14 50 C15 44.5 22 41.5 32 41.8 C42 42.1 49.5 45.5 50 51 C49.5 56.5 42 59.5 32 59.4 C22 59.3 14.5 55.5 14 50 Z" fill={FB.aub} />
          </svg>
        </span>
        <div style={{ fontFamily: FB.display, fontSize: 20, marginTop: 14 }}>Challenges walk with Premium</div>
        <div style={{ fontSize: 13, lineHeight: 1.6, color: FB.body, maxWidth: 280, margin: '10px auto 0' }}>
          A guided practice, a private thread of women on the same days as you, and your stones counting toward it.
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '13px 30px', fontSize: 13.5, fontWeight: 600, background: FB.plum, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Begin Premium</span>
        </div>
        <div style={{ fontSize: 12, fontWeight: 600, color: FB.soft, marginTop: 14 }}>Maybe later</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  CRFrame, CRSubFrame, CRAvatar, CRName, CRHeart, CRReplies, CRLock, CRReply, CRSectionHead, CRSearch, CRTag, fbTint, ANON_SHAPES, ANON_TONES,
  CircleHome, CircleThread, CircleCompose, CircleChallenges, CircleChallengeDetail, CircleChallengeGate,
});