// menove-patterns.jsx, Patterns: the third nav tab, where the evidence lives.
// Per the founder brief (June 11): chat is pull, this tab is push. Every card is
// a standing asset with evidence and a lifecycle, and every card hands itself to
// Mona. Nav renames Insights → Patterns.
// Depends on menove-final.jsx (FB, FBEyebrow), menove-circle.jsx (fbTint, CRAvatar),
// menove-track.jsx (TK_SHAPES, TK_DAYS).

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

function PTStatus() {
  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 PTNav() {
  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', on: true, 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', 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>
  );
}

function PTFrame({ label, children }) {
  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',
    }}>
      <PTStatus />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', padding: '14px 26px 0', flex: 'none' }}>
        <div>
          <div style={{ fontFamily: FB.display, fontSize: 22 }}>Patterns</div>
          <div style={{ fontSize: 12, fontWeight: 500, marginTop: 3, color: FB.soft }}>What your stones are saying</div>
        </div>
        <CRAvatar who="AD" size={34} />
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>{children}</div>
      <PTNav />
    </div>
  );
}

/* ---------- pieces ---------- */

/* slim report bar, evident, never leading */
function PTReportBar({ line = '4 stones to your report', count = 26 }) {
  return (
    <div style={{ margin: '14px 22px 0', borderRadius: 13, padding: '10px 14px', background: fbTint(FB.iris, .18), display: 'flex', alignItems: 'center', gap: 10, flex: 'none' }}>
      <svg viewBox="0 0 64 64" fill="none" style={{ width: 18, flex: 'none' }}>
        <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 style={{ flex: 1, fontSize: 12.5, fontWeight: 700, color: FB.aub }}>{line}</span>
      <span style={{ fontSize: 10.5, fontWeight: 700, color: FB.aub, opacity: .65 }}>{count} set</span>
      <svg viewBox="0 0 24 24" fill="none" stroke={FB.aub} strokeWidth="2.2" style={{ width: 12, height: 12, flex: 'none' }}><path d="M9 5l7 7-7 7" /></svg>
    </div>
  );
}

/* proactive question chips, the bridge to Mona, max three, dismissible */
function PTChips({ chips }) {
  return (
    <div style={{ display: 'flex', gap: 7, padding: '12px 22px 0', overflow: 'hidden', flex: 'none' }}>
      {chips.map((c) => (
        <span key={c} style={{ flex: 'none', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 11.5, fontWeight: 600, color: FB.plum, background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`, borderRadius: 999, padding: '7px 13px', whiteSpace: 'nowrap' }}>
          {c}
          <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2.4" style={{ width: 9, height: 9 }}><path d="M6 6l12 12M18 6L6 18" /></svg>
        </span>
      ))}
    </div>
  );
}

function PTShelf({ tt, action, children, first }) {
  return (
    <div style={{ paddingTop: first ? 16 : 18 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 26px', marginBottom: 9 }}>
        <FBEyebrow color={FB.soft}>{tt}</FBEyebrow>
        {action ? <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>{action}</span> : null}
      </div>
      <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 9 }}>{children}</div>
    </div>
  );
}

const PT_STATE_STYLE = {
  confirmed: { bg: FB.aub, fg: '#fff', sh: 'none' },
  testing: { bg: 'rgba(188,171,241,.3)', fg: FB.aub, sh: 'none' },
  forming: { bg: 'transparent', fg: FB.soft, sh: 'inset 0 0 0 1px rgba(42,37,48,.16)' },
};

function PTStateChip({ state }) {
  const s = PT_STATE_STYLE[state];
  return (
    <span style={{ fontSize: 8.5, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 700, color: s.fg, background: s.bg, boxShadow: s.sh, borderRadius: 999, padding: '3px 9px', flex: 'none' }}>{state}</span>
  );
}

/* flat stone-row micro-viz, the matching days as small stones, never a chart.
   Tapping a stone jumps to that day in Track. */
function PTRow({ hits, n = 21 }) {
  return (
    <div style={{ display: 'flex', gap: 3.5, alignItems: 'center' }}>
      {Array.from({ length: n }).map((_, i) => (
        <span key={i} style={{
          width: 8, height: 6, flex: 'none', borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -8 : 7}deg)`,
          background: hits.includes(i) ? FB.day.tender.deep : fbTint(FB.ink, .09),
        }}></span>
      ))}
    </div>
  );
}

function PTPatternCard({ state, claim, chip, hits, challenge }) {
  return (
    <div style={{ borderRadius: 16, background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`, padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
        <div style={{ fontSize: 13.5, lineHeight: 1.55, color: FB.ink, flex: 1 }}>{claim}</div>
        <PTStateChip state={state} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, color: FB.aub, background: fbTint(FB.aub, .07), borderRadius: 999, padding: '3.5px 10px', whiteSpace: 'nowrap' }}>{chip}</span>
      </div>
      <div style={{ marginTop: 11 }}><PTRow hits={hits} /></div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 11 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum }}>Ask Mona about this</span>
        {state === 'confirmed' && challenge ? (
          <span style={{ fontSize: 10.5, fontWeight: 700, color: FB.aub, background: fbTint(FB.iris, .25), borderRadius: 999, padding: '5px 12px', whiteSpace: 'nowrap' }}>Take it on · {challenge}</span>
        ) : null}
      </div>
    </div>
  );
}

function PTExpCard() {
  return (
    <div style={{ borderRadius: 16, background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`, padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontSize: 13.5, fontWeight: 600 }}>Magnesium, after dinner</span>
        <span style={{ fontSize: 10.5, fontWeight: 700, color: FB.soft, whiteSpace: 'nowrap' }}>Day 6 of 10</span>
      </div>
      <div style={{ fontSize: 12, lineHeight: 1.5, color: FB.body, marginTop: 4 }}>Testing against your 3am waking, your days will tell us.</div>
      <div style={{ marginTop: 10 }}><PTRow hits={[0, 1, 3, 4, 5]} n={10} /></div>
      <div style={{ fontSize: 10, fontWeight: 700, color: FB.soft, marginTop: 9, letterSpacing: '.06em' }}>FROM YOUR BOOSTS · ADDED JUN 4</div>
    </div>
  );
}

function PTVerdictCard() {
  return (
    <div style={{ borderRadius: 16, background: fbTint(FB.iris, .18), padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <FBEyebrow color={FB.aub}>Verdict</FBEyebrow>
      </div>
      <div style={{ fontSize: 13.5, lineHeight: 1.55, color: FB.ink, marginTop: 6 }}>
        The gentle walk: you reported <b>less fog on 3 of 4 test days</b>. It has moved into your patterns.
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 9 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum }}>Ask Mona about this</span>
        <span style={{ fontSize: 10, fontWeight: 700, color: FB.aub, opacity: .65, letterSpacing: '.06em' }}>FROM THE GENTLE MILE</span>
      </div>
    </div>
  );
}

/* the slim verdict strip, the full card lives behind “Verdicts” */
function PTVerdictStrip() {
  return (
    <div style={{ borderRadius: 13, background: fbTint(FB.iris, .18), padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ flex: 1, fontSize: 12, fontWeight: 600, color: FB.ink, lineHeight: 1.45 }}>New verdict, <b>less fog reported on 3 of 4</b> walking test days.</span>
      <span style={{ fontSize: 9.5, fontWeight: 700, color: FB.aub, opacity: .65, letterSpacing: '.06em', whiteSpace: 'nowrap' }}>GENTLE MILE</span>
      <svg viewBox="0 0 24 24" fill="none" stroke={FB.aub} strokeWidth="2.2" style={{ width: 12, height: 12, flex: 'none' }}><path d="M9 5l7 7-7 7" /></svg>
    </div>
  );
}

/* the weekly story, premier share artifact, composed Sunday evening */
function PTWeekCard({ compact }) {
  const week = ['bright', 'steady', 'tender', 'heavy', 'tender', 'steady', 'steady'];
  return (
    <div style={{ borderRadius: 18, background: FB.aub, color: '#fff', padding: '16px 18px' }}>
      <FBEyebrow color={FB.iris}>Your week, in stones</FBEyebrow>
      <div style={{ display: 'flex', gap: 8, marginTop: 13, alignItems: 'flex-end' }}>
        {week.map((s, i) => (
          <span key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 19, height: 13.5, borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -6 : 5}deg)`, background: FB.eve[s].main }}></span>
            <span style={{ fontSize: 8, letterSpacing: '.1em', fontWeight: 700, color: 'rgba(255,255,255,.5)' }}>{'MTWTFSS'[i]}</span>
          </span>
        ))}
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.6, color: FB.bodyEve, marginTop: 12 }}>
        {compact
          ? <span>A steadier week than it felt, Wednesday asked the most, and you still walked twice.</span>
          : <span>A steadier week than it felt. Wednesday asked the most, and you still walked, twice. Next week we watch the magnesium evenings.</span>}
      </div>
      {compact ? null : (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 13 }}>
          <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 300, fontSize: 9, letterSpacing: '.34em', color: FB.iris }}>MENOVĒ</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 700, color: '#fff' }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" style={{ width: 13, height: 13 }}><path d="M12 3v12M8 6.5L12 3l4 3.5" /><path d="M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7" /></svg>
            Share
          </span>
        </div>
      )}
    </div>
  );
}

function PTWatchCard({ body, unlock }) {
  return (
    <div style={{ borderRadius: 16, background: 'transparent', boxShadow: `inset 0 0 0 1.3px ${FB.line}`, padding: '13px 16px' }}>
      <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body }}>{body}</div>
      {unlock ? <div style={{ fontSize: 11, fontWeight: 700, color: FB.plum, marginTop: 8 }}>{unlock}</div> : null}
    </div>
  );
}

/* ---------- the pattern shelf data, strongest first ---------- */

const PT_PATTERNS = {
  confirmed: [
    { hits: [1, 3, 6, 8, 11, 14, 17, 18], claim: <span>The 3am waking has tended to follow days you marked heavier, <b>8 of 11 nights</b>.</span>, chip: '8 of 11 nights · past month', challenge: 'Steady Evenings' },
    { hits: [2, 4, 7, 10, 12, 15, 19], claim: <span>You've reported flashes gathering mid-afternoon, <b>7 of 9 days, near 3 PM</b>.</span>, chip: '7 of 9 days · past 3 weeks' },
    { hits: [2, 5, 9, 13], claim: <span>You've reported less fog by noon on walking days, <b>3 of 4 walking days</b>, so far.</span>, chip: '3 of 4 walking days · past 2 weeks', challenge: 'The Gentle Mile' },
  ],
  testing: [
    { hits: [15, 17, 19, 20], claim: <span>You've reported quieter nights on magnesium evenings, so far, <b>4 of 6 nights</b>.</span>, chip: '4 of 6 nights · this week' },
    { hits: [12, 16, 20], claim: <span>Unbroken nights and screen-free evenings have paired, <b>3 of 5 nights</b>, so far.</span>, chip: '3 of 5 nights · testing' },
  ],
  forming: [
    { hits: [4, 11, 18], claim: <span>Tuesdays have run tender in your record, <b>3 Tuesdays in a row</b>, so far.</span>, chip: '3 Tuesdays · forming' },
    { hits: [9, 14], claim: <span>Late dinners and next-morning fog have paired, <b>2 paired days</b>, early threads.</span>, chip: '2 paired days · forming' },
  ],
};

/* state filter, the 3 strongest confirmed lead; the rest live one tap away */
function PTStateFilter({ active }) {
  const counts = { confirmed: 3, testing: 2, forming: 2 };
  return (
    <div style={{ display: 'flex', gap: 6, padding: '0 26px', marginBottom: 10 }}>
      {['confirmed', 'testing', 'forming'].map((s) => (
        <span key={s} style={{
          fontSize: 10.5, fontWeight: 700, textTransform: 'capitalize', borderRadius: 999, padding: '6px 13px',
          background: s === active ? FB.aub : 'transparent', color: s === active ? '#fff' : FB.soft,
          boxShadow: s === active ? 'none' : `inset 0 0 0 1px ${FB.line}`, whiteSpace: 'nowrap',
        }}>{s} · {counts[s]}</span>
      ))}
    </div>
  );
}

/* ---------- P01 · the tab, day 26, compact ---------- */

function PatternsHome({ filter = 'confirmed', label = 'P01 · Patterns, day 26' }) {
  const cards = filter === 'confirmed' ? PT_PATTERNS.confirmed : PT_PATTERNS[filter];
  return (
    <PTFrame label={label}>
      <PTReportBar />
      <PTChips chips={['Ask me why your Tuesdays run tender']} />
      <div style={{ paddingTop: 18 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 26px', marginBottom: 9 }}>
          <FBEyebrow color={FB.soft}>Patterns</FBEyebrow>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>All patterns</span>
        </div>
        <PTStateFilter active={filter} />
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 9 }}>
          {cards.map((c, i) => <PTPatternCard key={i} state={filter} claim={c.claim} chip={c.chip} hits={c.hits} challenge={c.challenge} />)}
        </div>
      </div>
      <PTShelf tt="What you're trying" action="Verdicts">
        <PTExpCard />
        <PTVerdictStrip />
      </PTShelf>
      <PTShelf tt="What Mona is watching">
        <PTWatchCard body={<span>Wine evenings and night sweats: <b>4 paired days</b> so far. About 6 more make it speak.</span>} />
        <PTWatchCard body={<span>Breakfast timing and your morning energy, blocked for now.</span>} unlock="Waiting on your meals area · 2 minutes with Mona" />
      </PTShelf>
      <div style={{ height: 22 }}></div>
    </PTFrame>
  );
}

/* ---------- P02 · the report sheet ---------- */

function PatternsReportSheet() {
  const rows = [
    'The month of stones, as a calendar',
    'Top confirmed patterns, with their evidence',
    'Sign frequency and severity, summarized',
    'Medication adherence record',
    'Her factors',
    'Health summary, against her goals',
    'Clinician notes, pinned from day one',
    'The wellness disclaimer, verbatim',
  ];
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><PatternsHome /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="P02 · Report sheet" 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 26px 26px', 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}>Your report</FBEyebrow>
        <div style={{ fontFamily: FB.display, fontSize: 19, marginTop: 8 }}>Four stones away.</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.6, color: FB.body, marginTop: 6, maxWidth: 310 }}>
          It needs thirty full days, patterns earn a clinic's trust only with a complete month behind them. Here is what it will hold:
        </div>
        <div style={{ marginTop: 12 }}>
          {rows.map((r) => (
            <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6.5px 0', borderTop: `1px solid ${FB.line}` }}>
              <span style={{ width: 11, height: 8, flex: 'none', borderRadius: '54% 46% 52% 48% / 58% 56% 44% 42%', transform: 'rotate(-6deg)', background: FB.day.steady.main }}></span>
              <span style={{ fontSize: 12.5, fontWeight: 600 }}>{r}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- P03 · day 30, the bloom, in place ---------- */

function PatternsDay30() {
  return (
    <PTFrame label="P03 · Day 30, the report blooms">
      <div style={{ margin: '14px 22px 0', borderRadius: 18, background: FB.aub, color: '#fff', padding: '20px 20px 16px', flex: 'none' }}>
        <FBEyebrow color={FB.iris}>Thirty stones</FBEyebrow>
        <div style={{ fontFamily: FB.display, fontSize: 23, lineHeight: 1.3, marginTop: 8 }}>Your report is ready.</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.6, color: FB.bodyEve, marginTop: 7, maxWidth: 290 }}>
          A month of evidence, in your doctor's language. It grows with every thirty stones from here.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 16 }}>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '11px 22px', fontSize: 12.5, fontWeight: 700, background: FB.iris, color: FB.aub }}>Preview</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Export PDF</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Share with your provider</span>
        </div>
      </div>
      <PTChips chips={['Ask me what the report says about sleep']} />
      <PTShelf tt="Patterns">
        <PTPatternCard state="confirmed" {...PT_PATTERNS.confirmed[0]} />
        <PTPatternCard state="confirmed" {...PT_PATTERNS.confirmed[1]} />
      </PTShelf>
    </PTFrame>
  );
}

/* ---------- P04 · the weekly story, with its gallery ---------- */

function PatternsWeekly({ crumb = 'Your trail', label = 'TK10 · Weekly story' }) {
  const past = [
    { range: 'Jun 1 – Jun 7', week: ['steady', 'bright', 'steady', 'tender', 'steady', 'bright', 'steady'] },
    { range: 'May 25 – May 31', week: ['tender', 'steady', 'heavy', 'tender', 'steady', 'steady', 'bright'] },
    { range: 'May 18 – May 24', week: ['steady', 'tender', 'steady', 'steady', 'bright', 'steady', 'tender'] },
  ];
  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,
    }}>
      <PTStatus />
      <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={{ padding: '18px 22px 0' }}>
        <div style={{ padding: '0 4px' }}>
          <div style={{ fontFamily: FB.display, fontSize: 19 }}>The weekly story</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 5, maxWidth: 300 }}>
            Composed every Sunday evening, Mona sends it as a text, and it keeps a place here.
          </div>
        </div>
        <div style={{ height: 14 }}></div>
        <PTWeekCard />
        <div style={{ height: 22 }}></div>
        <div style={{ padding: '0 4px' }}><FBEyebrow color={FB.soft}>Past weeks</FBEyebrow></div>
        <div style={{ marginTop: 6 }}>
          {past.map((p) => (
            <div key={p.range} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 4px', borderBottom: `1px solid ${FB.line}` }}>
              <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600 }}>{p.range}</span>
              <span style={{ display: 'flex', gap: 4 }}>
                {p.week.map((s, i) => (
                  <span key={i} style={{ width: 12, height: 8.5, borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -7 : 6}deg)`, background: FB.day[s].main }}></span>
                ))}
              </span>
              <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2.2" style={{ width: 12, height: 12, flex: 'none' }}><path d="M9 5l7 7-7 7" /></svg>
            </div>
          ))}
        </div>
      </div>
      <div style={{ flex: 1 }}></div>
      {crumb === 'Your trail' ? <TKNav /> : <PTNav />}
    </div>
  );
}

/* ---------- P05 · early days, never empty ---------- */

function PatternsColdStart() {
  return (
    <PTFrame label="P05 · Day 2, cold start">
      <PTReportBar line="28 stones to your report" count={2} />
      <PTChips chips={['Ask me what I can notice in a week']} />
      <PTShelf tt="Patterns" first>
        <div style={{ borderRadius: 16, background: fbTint(FB.iris, .18), padding: '16px 16px' }}>
          <div style={{ fontFamily: FB.display, fontSize: 16.5, lineHeight: 1.45, color: FB.ink }}>
            Around day three, the first threads. By thirty, evidence.
          </div>
          <div style={{ fontSize: 12, lineHeight: 1.6, color: FB.body, marginTop: 7 }}>
            Every stone you set teaches this page something. Patterns appear here the moment they have enough days behind them, never before.
          </div>
        </div>
      </PTShelf>
      <PTShelf tt="What Mona is watching">
        <PTWatchCard body={<span>Sleep and your afternoons, watching from your very first stone.</span>} />
        <PTWatchCard body={<span>Hot flashes and the weather, <b>2 days</b> in. A week more gives it shape.</span>} />
        <PTWatchCard body={<span>Breakfast timing and your morning energy, blocked for now.</span>} unlock="Waiting on your meals area · 2 minutes with Mona" />
      </PTShelf>
      <div style={{ flex: 1 }}></div>
    </PTFrame>
  );
}

/* ---------- P06 · day 31+, free, the gate over silhouettes ---------- */

function PatternsGate() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, filter: 'blur(7px)', transform: 'scale(1.02)' }}><PatternsHome /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(250,249,246,.55)' }}></div>
      <div data-screen-label="P06 · The gate, day 31+, free" 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 }}>Your patterns never stopped forming.</div>
        <div style={{ fontSize: 13, lineHeight: 1.6, color: FB.body, maxWidth: 280, margin: '10px auto 0' }}>
          41 stones are waiting, and the threads between them. Menovē Plus opens the room.
        </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)' }}>Open Menovē Plus</span>
        </div>
        <div style={{ fontSize: 12, fontWeight: 600, color: FB.soft, marginTop: 14 }}>Not now</div>
      </div>
    </div>
  );
}

/* ---------- P07 · confirmed pattern → the challenge bridge ---------- */

function PatternsChallengeSheet() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><PatternsHome /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="P07 · Pattern → challenge" 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 26px 26px', 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}>From a confirmed pattern</FBEyebrow>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: FB.ink, marginTop: 10, maxWidth: 310 }}>
          You've reported less fog by noon on walking days, <b>3 of 4 walking days</b>. Make it a practice:
        </div>
        <div style={{ marginTop: 14, borderRadius: 16, padding: '14px 16px', background: fbTint(FB.iris, .2) }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 9.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>Movement</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700, color: FB.aub }}>
              <CRLock size={11} color={FB.aub} /> Members-only thread
            </span>
          </div>
          <div style={{ fontFamily: FB.display, fontSize: 17.5, marginTop: 7 }}>The Gentle Mile</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 4 }}>A mile a day, any pace, any weather. Walked together, 86 women in, day 4 of 14.</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: FB.soft }}>Set a quiet goal instead</span>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 24px', fontSize: 13, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Join The Gentle Mile</span>
        </div>
        <div style={{ fontSize: 10.5, lineHeight: 1.5, color: FB.soft, marginTop: 14 }}>
          Challenges are part of Menovē Plus · quiet goals are always free, tracked from Health.
        </div>
      </div>
    </div>
  );
}

/* ---------- P08 · the quiet goal, from a pattern, always free ---------- */

function PatternsQuietGoal() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><PatternsHome /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="P08 · Quiet goal" 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 26px 26px', 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}>A quiet goal · from your pattern</FBEyebrow>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: FB.body, marginTop: 8, maxWidth: 310 }}>
          Less fog reported on walking days, so we'll watch the walking, quietly. Shape it however you like:
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
          {['From Health', 'Your own'].map((c, i) => (
            <span key={c} style={{
              fontSize: 12, fontWeight: 700, borderRadius: 999, padding: '7px 16px',
              background: i === 1 ? FB.aub : 'transparent', color: i === 1 ? '#fff' : FB.soft,
              boxShadow: i === 1 ? 'none' : `inset 0 0 0 1px ${FB.line}`,
            }}>{c}</span>
          ))}
        </div>
        <div style={{ marginTop: 12, borderRadius: 14, padding: '13px 16px', background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`, fontSize: 14.5 }}>
          A gentle walk, a mile or so<span style={{ borderLeft: `2px solid ${FB.plum}`, marginLeft: 1 }}></span>
        </div>
        <div style={{ marginTop: 13 }}><FBEyebrow color={FB.soft}>How often</FBEyebrow></div>
        <div style={{ display: 'flex', gap: 6, marginTop: 9, flexWrap: 'wrap' }}>
          {['Every day', '1× a week', '3× a week'].map((c, i) => (
            <span key={c} style={{
              fontSize: 11.5, fontWeight: 700, borderRadius: 999, padding: '6px 14px',
              background: i === 2 ? fbTint(FB.aub, .1) : 'transparent', color: i === 2 ? FB.aub : FB.soft,
              boxShadow: `inset 0 0 0 1px ${i === 2 ? fbTint(FB.aub, .4) : FB.line}`,
            }}>{c}</span>
          ))}
        </div>
        <div style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, marginTop: 11 }}>or pick the days , </div>
        <TKDayPicker />
        <div style={{ fontSize: 11.5, lineHeight: 1.6, color: FB.soft, marginTop: 16, maxWidth: 310 }}>
          Keep it yourself with one tap on your home screen, or switch to From Health and steps count themselves. Mona never scolds a miss. Always free.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: FB.plum }}>Pick your 3 days to set it</span>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 28px', fontSize: 13.5, fontWeight: 600, background: fbTint(FB.ink, .1), color: FB.soft }}>Set goal</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  PTFrame, PTNav, PTReportBar, PTChips, PTShelf, PTStateChip, PTStateFilter, PTRow, PTPatternCard, PTExpCard, PTVerdictCard, PTVerdictStrip, PTWeekCard, PTWatchCard, PT_PATTERNS,
  PatternsHome, PatternsReportSheet, PatternsDay30, PatternsWeekly, PatternsColdStart, PatternsGate, PatternsChallengeSheet, PatternsQuietGoal,
});
