// menove-track.jsx, Track: the trail of days, signs, and the provider report.
// The record is the product: every check-in is a stone on a winding path; thirty
// stones become a report a doctor can't wave away.
// Depends on menove-final.jsx (FB, FBStone, FBEyebrow) and menove-circle.jsx (fbTint, CRAvatar, CRLock).

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

function TKStatus() {
  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 TKNav() {
  const items = [
    { l: 'Today', d: <path d="M3 11l9-8 9 8M5 10v10h14V10" /> },
    { l: 'Track', on: true, 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', 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 TKFrame({ label, title, sub, 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',
    }}>
      <TKStatus />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', padding: '14px 26px 0', flex: 'none' }}>
        <div>
          <div style={{ fontFamily: FB.display, fontSize: 22 }}>{title}</div>
          {sub ? <div style={{ fontSize: 12, fontWeight: 500, marginTop: 3, color: FB.soft }}>{sub}</div> : null}
        </div>
        <CRAvatar who="AD" size={34} />
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>{children}</div>
      <TKNav />
    </div>
  );
}

function TKSubFrame({ label, crumb, children, 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',
    }}>
      <TKStatus />
      <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 : <TKNav />}
    </div>
  );
}

/* ---------- the trail data, 26 days recorded so far ---------- */

const TK_SHAPES = [
  '54% 46% 52% 48% / 58% 56% 44% 42%',
  '66% 34% 56% 44% / 62% 74% 26% 38%',
  '50% 50% 50% 50% / 56% 56% 44% 44%',
  '58% 42% 56% 44% / 70% 66% 34% 30%',
];

// oldest → today; null = missed day (no stone set)
const TK_DAYS = [
  'steady', 'bright', 'steady', 'tender', 'heavy', 'tender', 'steady', 'bright',
  'steady', 'steady', 'tender', 'steady', 'bright', 'steady', null, 'steady',
  'tender', 'heavy', 'tender', 'steady', 'bright', 'steady', 'steady', null,
  'tender', 'steady',
];

/* the winding trail, today at the top, the path walked rising from below */
function TKTrail({ height = 470 }) {
  const N = TK_DAYS.length;
  const H = height;
  const stones = [];
  TK_DAYS.forEach((state, i) => {
    const t = i / (N - 1);                                   // 0 oldest … 1 today
    const y = H - t * (H - 18);                              // oldest at bottom
    const x = 50 + Math.sin(t * Math.PI * 2.2 + .4) * 25;    // the same bend as onboarding
    const today = i === N - 1;
    const w = today ? 26 : 17, h = today ? 18 : 12;
    stones.push(
      <span key={i} style={{
        position: 'absolute', top: y - h / 2 - 9, left: `calc(${x}% - ${w / 2}px)`,
        width: w, height: h,
        borderRadius: TK_SHAPES[i % 4],
        transform: `rotate(${(i % 2 ? -1 : 1) * (4 + (i % 3) * 3)}deg)`,
        background: state ? FB.day[state].main : 'transparent',
        boxShadow: state
          ? (today ? `0 0 0 3px ${FB.paper}, 0 0 0 4.5px ${FB.day[state].deep}` : 'none')
          : `inset 0 0 0 1.4px ${fbTint(FB.ink, .18)}`,
      }}></span>
    );
  });
  return (
    <div style={{ position: 'relative', height: H, flex: 'none' }}>
      {stones}
      {/* today label, right-aligned beside the top stone */}
      <div style={{ position: 'absolute', top: 0, right: `calc(${100 - (50 + Math.sin(Math.PI * 2.2 + .4) * 25)}% + 20px)`, whiteSpace: 'nowrap' }}>
        <div style={{ fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 700, color: FB.day.steady.deep }}>Today · Steady</div>
      </div>
      {/* month breaks */}
      <div style={{ position: 'absolute', top: H * .42, left: 8, fontSize: 9.5, letterSpacing: '.22em', fontWeight: 700, color: FB.soft }}>JUN</div>
      <div style={{ position: 'absolute', top: H * .82, left: 8, fontSize: 9.5, letterSpacing: '.22em', fontWeight: 700, color: FB.soft }}>MAY</div>
    </div>
  );
}

function TKLegend() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flex: 'none' }}>
      {['bright', 'steady', 'tender', 'heavy'].map((s, i) => (
        <span key={s} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 9.5, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft }}>
          <span style={{ width: 13, height: 9.5, borderRadius: TK_SHAPES[i % 4], background: FB.day[s].main, transform: `rotate(${i % 2 ? -6 : 5}deg)` }}></span>
          {s}
        </span>
      ))}
    </div>
  );
}

/* ---------- TK01 · the trail (track home) ---------- */

function TKViewSeg({ view }) {
  return (
    <div style={{ display: 'flex', gap: 6, padding: '14px 26px 0', flex: 'none', alignItems: 'center' }}>
      {['Trail', 'Calendar'].map((c) => (
        <span key={c} style={{
          fontSize: 11.5, fontWeight: 700, borderRadius: 999, padding: '6px 14px',
          background: c === view ? FB.aub : 'transparent', color: c === view ? '#fff' : FB.soft,
          boxShadow: c === view ? 'none' : `inset 0 0 0 1px ${FB.line}`,
        }}>{c}</span>
      ))}
      <span style={{ marginLeft: 'auto', display: 'inline-flex', gap: 13 }}>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>Stories</span>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>By sign</span>
      </span>
    </div>
  );
}

function TrackHome() {
  return (
    <TKFrame label="TK01 · The trail" title="Your trail" sub="26 stones since May 16">
      <TKViewSeg view="Trail" />
      <div style={{ textAlign: 'center', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft, marginTop: 12, flex: 'none' }}>The last thirty days</div>
      <div style={{ flex: 1, minHeight: 0, padding: '10px 30px 0' }}>
        <TKTrail height={440} />
      </div>
      <TKLegend />
      <div style={{ margin: '14px 22px 14px', borderRadius: 16, padding: '13px 16px', background: fbTint(FB.iris, .18), display: 'flex', alignItems: 'center', gap: 12, flex: 'none' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: FB.aub }}>Goals · 2 of 4 met today</div>
          <div style={{ fontSize: 11, fontWeight: 500, color: FB.body, marginTop: 2 }}>Steps ✓ · Meatless Monday ✓ · screens off tonight</div>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: '#fff', background: FB.aub, borderRadius: 999, padding: '9px 18px', whiteSpace: 'nowrap', boxShadow: '0 12px 24px -14px rgba(40,8,40,.55)' }}>Goals</span>
      </div>
    </TKFrame>
  );
}

/* ---------- TK01b · the calendar, dates, and the longer ranges ---------- */

// the record runs May 16 (index 0) → today, Wed June 10 (index 25)
function tkStateFor(month, d) {
  if (month === 'May') return d < 16 ? 'pre' : TK_DAYS[d - 16];
  return d > 10 ? 'future' : TK_DAYS[15 + d];
}

// goals met per day (0–3), aligned with TK_DAYS. Health keeps counting even on
// missed check-in days, the dots can outlive the stone.
const TK_GOALS_MET = [2, 3, 2, 1, 0, 1, 2, 3, 2, 2, 1, 2, 3, 2, 2, 2, 1, 0, 1, 2, 3, 2, 2, 1, 1, 1];
function tkGoalsFor(month, d) {
  if (month === 'May') return d < 16 ? 0 : TK_GOALS_MET[d - 16];
  return d > 10 ? 0 : TK_GOALS_MET[15 + d];
}

function TKCalMonth({ name, offset, daysInMonth, today, big, noTitle }) {
  const cells = [];
  for (let i = 0; i < offset; i++) cells.push(<span key={'b' + i}></span>);
  for (let d = 1; d <= daysInMonth; d++) {
    const st = tkStateFor(name, d);
    const isToday = today === d;
    const ghost = st === 'pre' || st === 'future';
    const goals = big && !ghost ? tkGoalsFor(name, d) : 0;
    cells.push(
      <span key={d} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: big ? 4 : 3, height: big ? 60 : 36 }}>
        <span style={{ fontSize: big ? 10.5 : 9, fontWeight: isToday ? 800 : 600, color: isToday ? FB.aub : ghost ? fbTint(FB.ink, .28) : FB.soft }}>{d}</span>
        {ghost ? null : st ? (
          <span style={{
            width: big ? 23 : 16, height: big ? 15.5 : 11, borderRadius: TK_SHAPES[d % 4], transform: `rotate(${d % 2 ? -6 : 5}deg)`,
            background: FB.day[st].main,
            boxShadow: isToday ? `0 0 0 2.5px ${FB.paper}, 0 0 0 4px ${FB.day[st].deep}` : 'none',
          }}></span>
        ) : (
          <span style={{ width: big ? 23 : 16, height: big ? 15.5 : 11, borderRadius: TK_SHAPES[d % 4], transform: `rotate(${d % 2 ? -6 : 5}deg)`, boxShadow: `inset 0 0 0 1.3px ${fbTint(FB.ink, .18)}` }}></span>
        )}
        {big && !ghost ? (
          <span style={{ display: 'flex', gap: 2.5, height: 4, alignItems: 'center' }}>
            {Array.from({ length: goals }).map((_, i) => (
              <span key={i} style={{ width: 3.5, height: 3.5, borderRadius: '50%', background: FB.aub, opacity: .75 }}></span>
            ))}
          </span>
        ) : null}
      </span>
    );
  }
  return (
    <div style={{ padding: '0 24px', flex: 'none' }}>
      {noTitle ? null : (
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: FB.display, fontSize: 15 }}>{name} 2026</span>
        </div>
      )}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginTop: noTitle ? 0 : 6, fontSize: big ? 9.5 : 8.5, letterSpacing: '.12em', fontWeight: 700, color: fbTint(FB.ink, .32), textAlign: 'center' }}>
        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <span key={i}>{d}</span>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: big ? '8px 0' : '2px 0', marginTop: big ? 10 : 4 }}>{cells}</div>
    </div>
  );
}

function TrackCalendar() {
  return (
    <TKFrame label="TK01b · Calendar" title="Your trail" sub="26 stones since May 16">
      <TKViewSeg view="Calendar" />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 24px 0', flex: 'none' }}>
        <span style={{ width: 32, height: 32, borderRadius: '50%', boxShadow: `inset 0 0 0 1px ${FB.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke={FB.ink} strokeWidth="2.2" style={{ width: 14, height: 14 }}><path d="M15 5l-7 7 7 7" /></svg>
        </span>
        <span style={{ fontFamily: FB.display, fontSize: 18 }}>June 2026</span>
        <span style={{ width: 32, height: 32, borderRadius: '50%', boxShadow: `inset 0 0 0 1px ${FB.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: .28 }}>
          <svg viewBox="0 0 24 24" fill="none" stroke={FB.ink} strokeWidth="2.2" style={{ width: 14, height: 14 }}><path d="M9 5l7 7-7 7" /></svg>
        </span>
      </div>
      <div style={{ height: 12 }}></div>
      <TKCalMonth name="June" offset={1} daysInMonth={30} today={10} big noTitle />
      <div style={{ flex: 1 }}></div>
      <div style={{ textAlign: 'center', fontSize: 10, fontWeight: 600, color: FB.soft, paddingBottom: 8 }}>
        <span style={{ display: 'inline-block', width: 3.5, height: 3.5, borderRadius: '50%', background: FB.aub, opacity: .75, verticalAlign: 'middle', marginRight: 6 }}></span>
        one dot per goal met that day, from Health
      </div>
      <div style={{ paddingBottom: 14 }}><TKLegend /></div>
    </TKFrame>
  );
}

/* ---------- TK02 · a day on the trail ---------- */

function TKSevDots({ level }) {
  return (
    <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
      {[0, 1, 2].map((i) => (
        <span key={i} style={{
          width: 12, height: 9, borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -7 : 6}deg)`,
          background: i <= level ? FB.day.tender.deep : 'transparent',
          boxShadow: i <= level ? 'none' : `inset 0 0 0 1.2px ${fbTint(FB.ink, .2)}`,
        }}></span>
      ))}
    </span>
  );
}

function TrackDay() {
  const signs = [
    { n: 'Hot flashes', lv: 1, note: 'afternoon' },
    { n: 'Waking at 3am', lv: 2, note: '3:10 AM' },
    { n: 'Brain fog', lv: 0, note: 'morning only' },
  ];
  return (
    <TKSubFrame label="TK02 · Day detail" crumb="Your trail" noNav>
      <div style={{ textAlign: 'center', padding: '14px 26px 0' }}>
        <FBEyebrow color={FB.soft}>Tuesday, June 9 · Day 25</FBEyebrow>
        <div style={{ height: 82, position: 'relative', marginTop: 2 }}>
          <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%) scale(.62)' }}>
            <FBStone state="tender" mode="day" />
          </div>
        </div>
        <div style={{ fontSize: 11.5, letterSpacing: '.3em', textTransform: 'uppercase', fontWeight: 700, color: FB.day.tender.deep }}>Tender</div>
        <div style={{ fontStyle: 'italic', fontSize: 12, lineHeight: 1.5, color: FB.body, maxWidth: 290, margin: '7px auto 0' }}>
          “The flashes came at three and passed. You met them softly.”, Mona
        </div>
      </div>
      <div style={{ padding: '14px 26px 0' }}>
        <FBEyebrow color={FB.soft}>Signs that day</FBEyebrow>
        <div style={{ marginTop: 5 }}>
          {signs.map((s) => (
            <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 0', borderTop: `1px solid ${FB.line}` }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{s.n}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>{s.note}</span>
              <TKSevDots level={s.lv} />
            </div>
          ))}
        </div>
        <div style={{ height: 7 }}></div>
        <FBEyebrow color={FB.soft}>Challenge</FBEyebrow>
        <div style={{ padding: '7px 0', borderTop: `1px solid ${FB.line}`, marginTop: 5 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>The Gentle Mile · Day 2</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>1.2 mi walked · from Health</span>
            <TKCheck />
          </div>
          <div style={{ height: 3, borderRadius: 2, background: fbTint(FB.ink, .08), marginTop: 7 }}>
            <div style={{ height: 3, borderRadius: 2, width: '100%', background: FB.aub }}></div>
          </div>
        </div>
        <div style={{ height: 7 }}></div>
        <FBEyebrow color={FB.soft}>Boosts, completed</FBEyebrow>
        <div style={{ marginTop: 5 }}>
          {[['A gentle walk', '4:10 PM'], ['Wind-down, screens off', '9:45 PM']].map(([n, v]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 0', borderTop: `1px solid ${FB.line}` }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{n}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>{v}</span>
              <TKCheck />
            </div>
          ))}
        </div>
        <div style={{ height: 7 }}></div>
        <FBEyebrow color={FB.soft}>Medications</FBEyebrow>
        <div style={{ marginTop: 5 }}>
          {[['Estradiol patch', 'on schedule'], ['Magnesium glycinate, 200 mg', 'taken · evening']].map(([n, v]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 0', borderTop: `1px solid ${FB.line}` }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{n}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ height: 7 }}></div>
        <FBEyebrow color={FB.soft}>Lifestyle</FBEyebrow>
        <div style={{ marginTop: 5 }}>
          {[['Alcohol', 'none'], ['Caffeine', 'one, before noon']].map(([n, v]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 0', borderTop: `1px solid ${FB.line}` }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{n}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ height: 7 }}></div>
        <FBEyebrow color={FB.soft}>Goals</FBEyebrow>
        <div style={{ marginTop: 5 }}>
          {[
            ['Steps', '5,340', 'goal 5,000', 1, true, 'AUTO'],
            ['Sleep', '6h 10m · broken at 3:10', 'goal 7h', .88, false, 'AUTO'],
            ['Screens off by 8', 'marked 7:40 PM', 'evenings', 1, true, 'KEPT'],
          ].map(([n, v, g, p, met, tag]) => (
            <div key={n} style={{ padding: '7px 0', borderTop: `1px solid ${FB.line}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{n}</span>
                <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>{v} · {g}</span>
                <span style={{ fontSize: 8.5, letterSpacing: '.14em', fontWeight: 700, color: FB.soft, boxShadow: `inset 0 0 0 1px ${FB.line}`, borderRadius: 999, padding: '2.5px 8px' }}>{tag}</span>
                {met ? <TKCheck /> : <span style={{ width: 16, height: 12, flex: 'none', borderRadius: '54% 46% 52% 48% / 58% 56% 44% 42%', transform: 'rotate(-6deg)', boxShadow: `inset 0 0 0 1.4px ${fbTint(FB.ink, .22)}` }}></span>}
              </div>
              <div style={{ height: 3, borderRadius: 2, background: fbTint(FB.ink, .08), marginTop: 7 }}>
                <div style={{ height: 3, borderRadius: 2, width: `${p * 100}%`, background: met ? FB.aub : FB.day.steady.main }}></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ flex: 1 }}></div>
    </TKSubFrame>
  );
}

function TKCheck() {
  return (
    <span style={{ width: 16, height: 12, flex: 'none', borderRadius: '54% 46% 52% 48% / 58% 56% 44% 42%', transform: 'rotate(-6deg)', background: FB.ink, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.2" style={{ width: 8, height: 8, transform: 'rotate(6deg)' }}><path d="M5 12l5 5L20 6" /></svg>
    </span>
  );
}

/* ---------- TK03 · by sign ---------- */

/* 30-day strip, one tiny stone per day, opacity by severity.
   big: stones stretch to fill the row (used in the sign-detail chart). */
function TKStrip({ seed = 1, days = 30, hits, big }) {
  return (
    <div style={{ display: 'flex', gap: big ? 4 : 3, alignItems: 'center' }}>
      {Array.from({ length: days }).map((_, i) => {
        const lv = hits[i] || 0;
        return (
          <span key={i} style={{
            width: big ? 'auto' : 7, height: big ? 9 : 5.5, flex: big ? 1 : 'none', borderRadius: TK_SHAPES[(i + seed) % 4],
            transform: `rotate(${i % 2 ? -8 : 7}deg)`,
            background: lv ? FB.day.tender.deep : fbTint(FB.ink, .1),
            opacity: lv ? .35 + lv * .3 : 1,
          }}></span>
        );
      })}
    </div>
  );
}

const TK_SIGNS = [
  { n: 'Waking at 3am', freq: '11 of 26 days', seed: 0, hits: { 1: 2, 3: 1, 4: 2, 7: 1, 9: 2, 12: 1, 14: 2, 17: 2, 19: 1, 22: 1, 24: 2 } },
  { n: 'Hot flashes', freq: '9 of 26 days', seed: 1, hits: { 2: 1, 4: 2, 5: 1, 10: 1, 13: 2, 16: 1, 17: 2, 21: 1, 24: 1 } },
  { n: 'Brain fog', freq: '8 of 26 days', seed: 2, hits: { 1: 1, 4: 1, 8: 2, 11: 1, 15: 1, 18: 2, 22: 1, 25: 1 } },
  { n: 'Fatigue', freq: '7 of 26 days', seed: 3, hits: { 3: 1, 5: 2, 9: 1, 14: 1, 18: 1, 23: 2, 25: 1 } },
  { n: 'Irritability', freq: '4 of 26 days', seed: 1, hits: { 4: 1, 12: 1, 17: 2, 24: 1 } },
];

function TrackSigns() {
  return (
    <TKSubFrame label="TK03 · By sign" crumb="Your trail">
      <div style={{ padding: '18px 26px 0' }}>
        <div style={{ fontFamily: FB.display, fontSize: 19 }}>By sign</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 5, maxWidth: 300 }}>
          Each sign, across your last 26 stones. Darker means heavier.
        </div>
        <div style={{ height: 12 }}></div>
        {TK_SIGNS.map((s) => (
          <div key={s.n} style={{ padding: '13px 0', borderTop: `1px solid ${FB.line}` }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13.5, fontWeight: 600 }}>{s.n}</span>
              <span style={{ fontSize: 11, fontWeight: 600, color: FB.soft }}>{s.freq}</span>
            </div>
            <div style={{ marginTop: 9 }}><TKStrip seed={s.seed} days={26} hits={s.hits} /></div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1 }}></div>
      <div style={{ padding: '0 26px 18px', flex: 'none' }}>
        <div style={{ fontSize: 11.5, lineHeight: 1.55, color: FB.soft }}>
          Mona watches these together, when two signs move in step, she'll say so.
        </div>
      </div>
    </TKSubFrame>
  );
}

/* ---------- TK04 · one sign, opened ---------- */

function TrackSignDetail() {
  const s = TK_SIGNS[0];
  return (
    <TKSubFrame label="TK04 · Sign detail" crumb="By sign">
      <div style={{ padding: '18px 26px 0' }}>
        <FBEyebrow color={FB.soft}>Sleep</FBEyebrow>
        <div style={{ fontFamily: FB.display, fontSize: 22, marginTop: 6 }}>Waking at 3am</div>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: FB.soft, marginTop: 6 }}>11 of 26 days · usually between 2:50 and 3:30</div>
        <div style={{ marginTop: 18, padding: '16px 16px 12px', borderRadius: 16, background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
          <TKStrip seed={0} days={26} hits={s.hits} big />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontSize: 9.5, letterSpacing: '.14em', fontWeight: 700, color: FB.soft }}>
            <span>MAY 16</span><span>TODAY</span>
          </div>
        </div>
        <div style={{ marginTop: 14, borderRadius: 16, padding: '14px 16px', background: fbTint(FB.iris, .18) }}>
          <FBEyebrow color={FB.aub}>What Mona sees</FBEyebrow>
          <div style={{ fontSize: 13, lineHeight: 1.6, color: FB.ink, marginTop: 7 }}>
            It follows your heavier evenings, <b>8 of the 11 times</b>, the 3am waking came after a day you marked tender or heavy. On nights after a walk, it mostly stayed away.
          </div>
          <div style={{ fontSize: 11, fontWeight: 600, color: FB.aub, marginTop: 9 }}>Based on 26 days · gets sharper as the trail grows</div>
        </div>
        <div style={{ marginTop: 14 }}>
          <FBEyebrow color={FB.soft}>Worth testing</FBEyebrow>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: `1px solid ${FB.line}`, marginTop: 8 }}>
            <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600 }}>A gentle walk, before dinner</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: FB.aub, borderRadius: 999, padding: '7px 14px', boxShadow: `inset 0 0 0 1.5px ${FB.aub}` }}>Add boost</span>
          </div>
        </div>
      </div>
      <div style={{ flex: 1 }}></div>
      <div style={{ textAlign: 'center', padding: '0 0 16px', flex: 'none' }}>
        <span style={{ fontSize: 12, fontWeight: 700, color: FB.plum }}>Ask Mona about this</span>
      </div>
    </TKSubFrame>
  );
}

/* ---------- TK05 · the report, ready (day 30) ---------- */

function TrackReportReady() {
  return (
    <div data-screen-label="TK05 · Report ready" style={{
      width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: FB.aub, color: '#fff', fontFamily: FB.sans, position: 'relative', textAlign: 'center',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 26px 0', fontSize: 12.5, fontWeight: 600 }}>
        <span>9:41</span><span>5G · 76</span>
      </div>
      <div style={{ flex: 1 }}></div>
      <FBEyebrow color={FB.iris}>Thirty stones</FBEyebrow>
      <div style={{ fontFamily: FB.display, fontSize: 30, lineHeight: 1.25, marginTop: 12, padding: '0 40px' }}>Your record speaks for you now.</div>
      <div style={{ fontSize: 13.5, lineHeight: 1.65, color: FB.bodyEve, maxWidth: 290, margin: '14px auto 0' }}>
        Thirty days of signs, sleep, and patterns, two pages, in your doctor's language.
      </div>
      {/* the document */}
      <div style={{ margin: '26px auto 0', width: 168, borderRadius: 6, background: FB.paper, color: FB.ink, padding: '16px 16px 14px', textAlign: 'left', boxShadow: '0 24px 50px -20px rgba(0,0,0,.55)' }}>
        <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 300, fontSize: 8, letterSpacing: '.34em', color: FB.plum }}>MENOVĒ</div>
        <div style={{ fontFamily: FB.display, fontSize: 11.5, marginTop: 8, lineHeight: 1.35 }}>Symptom record<br />May 16 – Jun 14</div>
        <div style={{ display: 'flex', gap: 2.5, marginTop: 10 }}>
          {TK_DAYS.concat(['steady', 'bright', 'steady', 'steady']).map((st, i) => (
            <span key={i} style={{ width: 4.5, height: 3.5, borderRadius: '50%', background: st ? FB.day[st].main : fbTint(FB.ink, .12) }}></span>
          ))}
        </div>
        {[68, 92, 54, 80].map((w, i) => (
          <div key={i} style={{ height: 3.5, width: `${w}%`, borderRadius: 2, background: fbTint(FB.ink, .12), marginTop: i ? 5 : 12 }}></div>
        ))}
      </div>
      <div style={{ flex: 1.2 }}></div>
      <div style={{ display: 'flex', justifyContent: 'center', flex: 'none' }}>
        <span style={{ display: 'inline-flex', borderRadius: 999, padding: '14px 30px', fontSize: 13.5, fontWeight: 600, background: FB.iris, color: FB.aub }}>Share with your doctor</span>
      </div>
      <div style={{ fontSize: 12.5, fontWeight: 600, color: FB.softEve, marginTop: 16, marginBottom: 34 }}>Save as PDF</div>
    </div>
  );
}

/* ---------- TK06 · the report document, page one ---------- */

function TrackReportDoc() {
  const rows = [
    ['Waking at 3am', '11 / 30', 'Follows tender or heavy days (8 of 11)'],
    ['Hot flashes', '9 / 30', 'Afternoons, often near 3 PM'],
    ['Brain fog', '8 / 30', 'Mornings; eased on walking days (3 of 4)'],
    ['Fatigue', '7 / 30', 'Clustered with broken-sleep nights'],
  ];
  return (
    <div data-screen-label="TK06 · Report page one" style={{ width: '100%', height: '100%', background: '#fff', color: FB.ink, fontFamily: FB.sans, padding: '52px 56px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 300, fontSize: 13, letterSpacing: '.34em', color: FB.plum }}>MENOVĒ</span>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft }}>Symptom record · page 1 of 2</span>
      </div>
      <div style={{ fontFamily: FB.display, fontSize: 27, marginTop: 26 }}>Thirty days, recorded daily</div>
      <div style={{ fontSize: 12.5, color: FB.body, marginTop: 6 }}>
        Prepared for <b>Aujéna D.</b> · 49 · perimenopause (self-reported) · May 16 – June 14, 2026 · recorded 30 of 30 days
      </div>
      <div style={{ marginTop: 26 }}>
        <div style={{ fontSize: 10.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>The month, day by day</div>
        <div style={{ display: 'flex', gap: 5, marginTop: 10 }}>
          {TK_DAYS.concat(['steady', 'bright', 'steady', 'steady']).map((st, i) => (
            <span key={i} style={{
              flex: 1, height: 12, borderRadius: TK_SHAPES[i % 4],
              background: st ? FB.day[st].main : 'transparent',
              boxShadow: st ? 'none' : `inset 0 0 0 1px ${fbTint(FB.ink, .2)}`,
            }}></span>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9.5, letterSpacing: '.12em', fontWeight: 700, color: FB.soft, marginTop: 7 }}>
          <span>MAY 16</span><span>JUN 14</span>
        </div>
      </div>
      <div style={{ marginTop: 26 }}>
        <div style={{ fontSize: 10.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>Most frequent signs</div>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 8, fontSize: 12 }}>
          <thead>
            <tr>
              {['Sign', 'Days', 'Pattern observed'].map((h) => (
                <th key={h} style={{ textAlign: 'left', fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', color: FB.soft, fontWeight: 700, padding: '6px 10px 6px 0', borderBottom: `1.5px solid ${FB.ink}` }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map(([a, b, c]) => (
              <tr key={a}>
                <td style={{ padding: '7px 10px 7px 0', borderBottom: `1px solid ${FB.line}`, fontWeight: 600 }}>{a}</td>
                <td style={{ padding: '7px 10px 7px 0', borderBottom: `1px solid ${FB.line}`, color: FB.body, whiteSpace: 'nowrap' }}>{b}</td>
                <td style={{ padding: '7px 10px 7px 0', borderBottom: `1px solid ${FB.line}`, color: FB.body }}>{c}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ marginTop: 24 }}>
        <div style={{ fontSize: 10.5, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.plum }}>Context, arrived automatically</div>
        <div style={{ fontSize: 12, lineHeight: 1.7, color: FB.body, marginTop: 8, maxWidth: 470 }}>
          Sleep averaged 6h 20m, broken on 13 nights, 11 of them between 2:50 and 3:30 AM. Movement averaged 5,100 steps daily; on the 9 days that included a walk, next-morning fog was reported once.
        </div>
      </div>
      <div style={{ flex: 1 }}></div>
      <div style={{ fontSize: 10, color: FB.soft, lineHeight: 1.6, borderTop: `1px solid ${FB.line}`, paddingTop: 12 }}>
        Recorded daily by the patient in Menovē. Patterns are observations from daily self-reports and connected
        device data, not diagnoses. Exported June 14, 2026.
      </div>
    </div>
  );
}

/* ---------- TK07–09 · goals, set once, tracked quietly from Health ---------- */

function TKGoalRow({ name, target, value, pct, met, days, mona, tag }) {
  return (
    <div style={{ padding: '10px 0', borderTop: `1px solid ${FB.line}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>{name}</div>
          <div style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, marginTop: 2 }}>{target}</div>
        </div>
        <span style={{ fontSize: 11, fontWeight: 700, color: met ? FB.aub : FB.soft, whiteSpace: 'nowrap' }}>{value}</span>
        {tag ? <span style={{ fontSize: 8.5, letterSpacing: '.14em', fontWeight: 700, color: FB.soft, boxShadow: `inset 0 0 0 1px ${FB.line}`, borderRadius: 999, padding: '2.5px 8px', flex: 'none' }}>{tag}</span> : null}
        {met ? <TKCheck /> : (
          <span style={{ width: 16, height: 12, flex: 'none', borderRadius: '54% 46% 52% 48% / 58% 56% 44% 42%', transform: 'rotate(-6deg)', boxShadow: `inset 0 0 0 1.4px ${fbTint(FB.ink, .22)}` }}></span>
        )}
      </div>
      <div style={{ height: 3, borderRadius: 2, background: fbTint(FB.ink, .08), marginTop: 8 }}>
        <div style={{ height: 3, borderRadius: 2, width: `${pct * 100}%`, background: met ? FB.aub : FB.day.steady.main }}></div>
      </div>
      <div style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, marginTop: 6 }}>{days}</div>
      {mona ? (
        <div style={{ marginTop: 9, borderRadius: 14, padding: '10px 14px', background: fbTint(FB.iris, .18) }}>
          <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.ink, fontStyle: 'italic' }}>{mona}</div>
          <div style={{ fontSize: 10, fontWeight: 700, color: FB.aub, marginTop: 5 }}>,  Mona</div>
        </div>
      ) : null}
    </div>
  );
}

function TrackGoals({ evening }) {
  return (
    <TKSubFrame label={evening ? 'TK09 · Goals, the day it doesn’t happen' : 'TK07 · Goals'} crumb="Your trail">
      <div style={{ padding: '16px 26px 0' }}>
        <div style={{ fontFamily: FB.display, fontSize: 19 }}>Goals</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 5, maxWidth: 310 }}>
          From Health when it can be, kept by you when it can't. One tap on your home screen, the days it applies.
        </div>
        <div style={{ height: 12 }}></div>
        <TKGoalRow name="Steps" target="5,000 daily · from Health" tag="AUTO" value="5,340 today" pct={1} met days="Met 18 of 26 days" />
        <TKGoalRow name="Screens off by 8" target="evenings · kept by you" tag="KEPT"
          value={evening ? 'missed · 8:40' : 'tonight'} pct={.66} met={false} days="Kept 4 of 6 evenings"
          mona={evening ? 'The phone won tonight, it happens. Tomorrow evening is its own try.' : null} />
        <TKGoalRow name="Meatless Mondays" target="Mondays · kept by you" tag="KEPT" value="kept this Monday" pct={.75} met days="Kept 3 of 4 Mondays" />
        <TKGoalRow name="Sleep" target="7 hours nightly · from Health" tag="AUTO" value="6h 10m last night" pct={.88} days="Met 9 of 26 nights" />
        {evening ? null : (
          <div style={{ marginTop: 12, borderRadius: 16, padding: '13px 16px', background: fbTint(FB.iris, .18) }}>
            <FBEyebrow color={FB.aub}>Worth trying · from Mona</FBEyebrow>
            <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.ink, marginTop: 6 }}>
              Lights out by 10:30, on your earlier nights, you reported <b>fewer 3am wakings</b>.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 9 }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.aub }}>Make it a goal</span>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.soft }}>Not now</span>
            </div>
          </div>
        )}
      </div>
      <div style={{ flex: 1 }}></div>
      <div style={{ display: 'flex', justifyContent: 'center', padding: '0 0 16px', flex: 'none' }}>
        <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 26px', fontSize: 13, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Add a goal</span>
      </div>
    </TKSubFrame>
  );
}

function TrackGoalNew() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><TrackGoals /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="TK08 · New 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 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}>New goal</FBEyebrow>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          {['From Health', 'Your own'].map((c, i) => (
            <span key={c} style={{
              fontSize: 12, fontWeight: 700, borderRadius: 999, padding: '7px 16px',
              background: i === 0 ? FB.aub : 'transparent', color: i === 0 ? '#fff' : FB.soft,
              boxShadow: i === 0 ? 'none' : `inset 0 0 0 1px ${FB.line}`,
            }}>{c}</span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          {['Steps', 'Movement', 'Sleep'].map((c, i) => (
            <span key={c} style={{
              fontSize: 11.5, fontWeight: 700, borderRadius: 999, padding: '6px 14px',
              background: i === 0 ? fbTint(FB.aub, .1) : 'transparent', color: i === 0 ? FB.aub : FB.soft,
              boxShadow: `inset 0 0 0 1px ${i === 0 ? fbTint(FB.aub, .4) : FB.line}`,
            }}>{c}</span>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 26, marginTop: 20 }}>
          <span style={{ width: 38, height: 38, borderRadius: '50%', boxShadow: `inset 0 0 0 1.5px ${FB.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 500, color: FB.soft }}>−</span>
          <span style={{ textAlign: 'center' }}>
            <span style={{ fontFamily: FB.display, fontSize: 44, display: 'block', lineHeight: 1 }}>5,000</span>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: FB.soft, display: 'block', marginTop: 7 }}>steps · daily</span>
          </span>
          <span style={{ width: 38, height: 38, borderRadius: '50%', background: FB.aub, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 500, color: '#fff' }}>+</span>
        </div>
        <div style={{ fontSize: 11.5, lineHeight: 1.6, color: FB.soft, marginTop: 22, maxWidth: 310 }}>
          Tracked automatically from Health, nothing to log, ever. It's checked off the moment you reach it, and on the days you don't, Mona answers with softness, not a broken streak.
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 18 }}>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 28px', fontSize: 13.5, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Set goal</span>
        </div>
      </div>
    </div>
  );
}

/* day picker, stone radio dots for specific days */
function TKDayPicker({ selected = [] }) {
  return (
    <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
      {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => {
        const on = selected.includes(i);
        return (
          <span key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
            <span style={{
              width: 22, height: 15, borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -6 : 5}deg)`,
              background: on ? FB.aub : 'transparent',
              boxShadow: on ? 'none' : `inset 0 0 0 1.4px ${fbTint(FB.ink, .2)}`,
            }}></span>
            <span style={{ fontSize: 8.5, letterSpacing: '.1em', fontWeight: 700, color: on ? FB.aub : FB.soft }}>{d}</span>
          </span>
        );
      })}
    </div>
  );
}

/* ---------- TK08b · your own goal, anything, with a frequency ---------- */

function TrackGoalCustom() {
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}><TrackGoals /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,14,42,.45)' }}></div>
      <div data-screen-label="TK08b · Your own 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 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}>New goal</FBEyebrow>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          {['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: 14, borderRadius: 14, padding: '13px 16px', background: '#fff', boxShadow: `inset 0 0 0 1px ${FB.line}`, fontSize: 14.5 }}>
          No screens after 8 PM<span style={{ borderLeft: `2px solid ${FB.plum}`, marginLeft: 1 }}></span>
        </div>
        <div style={{ marginTop: 14 }}><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) => (
            <span key={c} style={{
              fontSize: 11.5, fontWeight: 700, borderRadius: 999, padding: '6px 14px',
              background: 'transparent', color: FB.soft,
              boxShadow: `inset 0 0 0 1px ${FB.line}`,
            }}>{c}</span>
          ))}
        </div>
        <div style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, marginTop: 12 }}>or pick the days , </div>
        <TKDayPicker selected={[1, 2, 3, 4, 5]} />
        <div style={{ fontSize: 11.5, lineHeight: 1.6, color: FB.soft, marginTop: 16, maxWidth: 310 }}>
          You'll keep this one yourself, one tap on your home screen, the days it applies. Mona never scolds a miss.
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 14 }}>
          <span style={{ display: 'inline-flex', borderRadius: 999, padding: '12px 28px', fontSize: 13.5, fontWeight: 600, background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)' }}>Set goal</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TKFrame, TKSubFrame, TKNav, TKTrail, TKLegend, TKSevDots, TKStrip, TKViewSeg, TKCalMonth, TKGoalRow, TKDayPicker,
  TrackHome, TrackCalendar, TrackDay, TrackSigns, TrackSignDetail, TrackReportReady, TrackReportDoc, TrackGoals, TrackGoalNew, TrackGoalCustom,
});
