// keni-mocks.jsx — UpStride product UI mockups, reframed around
// therapist↔parent alignment, progress tracking, and AI-assisted summaries.

const KM = window.KENI;
const kmD = window.kDisplay, kmS = window.kSans, kmM = window.kMono;

const kmShell = {
  background: KM.panel, border: `1px solid ${KM.line}`, borderRadius: 10,
  boxShadow: `0 60px 120px -50px rgba(0,0,0,0.8)`, overflow: 'hidden',
};
const kmBar = {
  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
  padding: '14px 18px', borderBottom: `1px solid ${KM.line}`, background: KM.bg2,
};
function KmDots() {
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      {[KM.rose, KM.amber, KM.jade].map(c => (
        <span key={c} style={{ width: 9, height: 9, borderRadius: 99, background: c, opacity: 0.7 }}></span>
      ))}
    </div>
  );
}
function KmTab({ label, active }) {
  return (
    <span style={{
      fontFamily: kmM, fontSize: 10.5, letterSpacing: 1, textTransform: 'uppercase',
      padding: '5px 11px', borderRadius: 999,
      background: active ? `${KM.saffron}1f` : 'transparent',
      color: active ? KM.saffron : KM.muted,
      border: `1px solid ${active ? KM.saffron + '44' : 'transparent'}`,
    }}>{label}</span>
  );
}

// ============ Mock 1 — Shared developmental plan (alignment) ============
function KMockPlan() {
  const domains = [
    ['Communication', 'Use 2-word requests', 72, KM.sky],
    ['Fine motor', 'Stack 6+ blocks', 58, KM.saffron],
    ['Self-regulation', 'Ask for a break', 81, KM.jade],
    ['Social play', 'Take turns in a game', 40, KM.rose],
  ];
  return (
    <div style={kmShell}>
      <div style={kmBar}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <KmDots />
          <span style={{ fontFamily: kmM, fontSize: 10.5, color: KM.muted, letterSpacing: 1.5 }}>UPSTRIDE · CARE PLAN</span>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <KmTab label="Plan" active />
          <KmTab label="Sessions" />
          <KmTab label="Progress" />
        </div>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 46, height: 46, borderRadius: 14, background: `linear-gradient(135deg, ${KM.saffron}, ${KM.rose})`, display: 'grid', placeItems: 'center', fontFamily: kmD, fontSize: 20, color: KM.bg, fontStyle: 'italic', fontFamily: window.kSerif }}>A</div>
            <div>
              <div style={{ fontFamily: kmD, fontSize: 22, color: KM.ink, letterSpacing: -0.4 }}>Aarav, 4 yrs</div>
              <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1, textTransform: 'uppercase', marginTop: 2 }}>Plan Q2 · OT + Speech · since Jan ’26</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: kmM, fontSize: 9.5, color: KM.muted, letterSpacing: 1.5, textTransform: 'uppercase' }}>Aligned</div>
            <div style={{ display: 'flex', gap: -6, marginTop: 6, justifyContent: 'flex-end' }}>
              <span style={{ fontFamily: kmS, fontSize: 11, color: KM.jade, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 7, height: 7, borderRadius: 99, background: KM.jade }}></span>Therapist · Parent
              </span>
            </div>
          </div>
        </div>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 10 }}>Goals this quarter</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {domains.map(([d, g, pct, c]) => (
            <div key={d} style={{ background: KM.bg2, border: `1px solid ${KM.line}`, borderRadius: 8, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <span style={{ fontFamily: kmM, fontSize: 9.5, color: c, letterSpacing: 1.2, textTransform: 'uppercase' }}>{d}</span>
                <span style={{ fontFamily: kmM, fontSize: 11, color: KM.ink }}>{pct}%</span>
              </div>
              <div style={{ fontFamily: kmS, fontSize: 13, color: KM.ink, marginBottom: 10, lineHeight: 1.35 }}>{g}</div>
              <div style={{ height: 4, background: KM.bg, borderRadius: 99, overflow: 'hidden' }}>
                <div style={{ width: `${pct}%`, height: '100%', background: c, borderRadius: 99 }}></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, padding: '12px 14px', background: `${KM.jade}12`, border: `1px solid ${KM.jade}33`, borderRadius: 8, fontFamily: kmS, fontSize: 13, color: KM.ink, lineHeight: 1.45 }}>
          <span style={{ fontFamily: kmM, fontSize: 9.5, color: KM.jade, letterSpacing: 1.5, textTransform: 'uppercase', display: 'block', marginBottom: 5 }}>Everyone sees the same plan</span>
          Ms. Priya updated the communication goal · the Mehta family was notified instantly.
        </div>
      </div>
    </div>
  );
}

// ============ Mock 2 — Session capture → structured progress ============
function KMockSession() {
  return (
    <div style={{ ...kmShell, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <div style={{ padding: 20, borderRight: `1px solid ${KM.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <span style={{ fontFamily: kmD, fontSize: 19, color: KM.ink, letterSpacing: -0.3 }}>Aarav · OT</span>
          <span style={{ fontFamily: kmM, fontSize: 10, color: KM.saffron, letterSpacing: 1.5 }}>
            <span style={{ display: 'inline-block', width: 7, height: 7, borderRadius: 99, background: KM.saffron, marginRight: 5, animation: 'dc-pulse-dot 1.6s ease-in-out infinite' }}></span>
            14:32 · LIVE
          </span>
        </div>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, marginBottom: 8, textTransform: 'uppercase' }}>Tap to log — one hand, no typing</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
          {[['+ initiated', KM.jade], ['+ tolerated', KM.jade], ['+ asked help', KM.jade], ['— prompt needed', KM.amber], ['— redirected', KM.amber]].map(([t, c]) => (
            <span key={t} style={{ fontFamily: kmS, fontSize: 12, padding: '7px 11px', borderRadius: 8, background: `${c}1a`, color: c, border: `1px solid ${c}33` }}>{t}</span>
          ))}
        </div>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, marginBottom: 8, textTransform: 'uppercase' }}>Voice note → structured</div>
        <div style={{ fontFamily: kmD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 15, color: KM.cream, lineHeight: 1.5, padding: 14, background: KM.bg, borderLeft: `2px solid ${KM.saffron}`, borderRadius: '0 6px 6px 0' }}>
          “Stacked seven blocks unaided today — a personal best. Used ‘more please’ four times during snack.”
        </div>
      </div>
      <div style={{ padding: 20, background: KM.bg2 }}>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, marginBottom: 10, textTransform: 'uppercase' }}>AI structures it into the plan</div>
        <div style={{ background: KM.panel, border: `1px solid ${KM.line}`, borderRadius: 8, padding: 14, marginBottom: 12 }}>
          {[['Fine motor', 'Stacking: 5 → 7 blocks', KM.saffron], ['Communication', '“More please” ×4', KM.sky]].map(([d, v, c]) => (
            <div key={d} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: `1px solid ${KM.line2}` }}>
              <span style={{ fontFamily: kmM, fontSize: 9.5, color: c, letterSpacing: 1.2, textTransform: 'uppercase' }}>{d}</span>
              <span style={{ fontFamily: kmS, fontSize: 12.5, color: KM.ink }}>{v}</span>
            </div>
          ))}
          <div style={{ fontFamily: kmM, fontSize: 9, color: KM.jade, letterSpacing: 1, textTransform: 'uppercase', marginTop: 10 }}>✓ tagged · linked to goals · saved</div>
        </div>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, marginBottom: 8, textTransform: 'uppercase' }}>Fine motor · last 6 weeks</div>
        <div style={{ background: KM.panel, border: `1px solid ${KM.line}`, borderRadius: 8, padding: 14 }}>
          <svg width="100%" height="56" viewBox="0 0 240 56" style={{ display: 'block' }}>
            <polyline points="8,46 48,40 88,36 128,28 168,20 208,11 232,7" fill="none" stroke={KM.saffron} strokeWidth="2" />
            {[[8,46],[48,40],[88,36],[128,28],[168,20],[208,11],[232,7]].map(([x,y],i) => <circle key={i} cx={x} cy={y} r="3" fill={KM.saffron} />)}
            <line x1="0" y1="54" x2="240" y2="54" stroke={KM.line} />
          </svg>
          <div style={{ fontFamily: kmM, fontSize: 9.5, color: KM.muted, marginTop: 4, display: 'flex', justifyContent: 'space-between' }}>
            <span>2 blocks</span><span style={{ color: KM.saffron }}>7 blocks · personal best</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ Mock 3 — AI-assisted parent summary ============
function KMockSummary() {
  return (
    <div style={{ ...kmShell, padding: 0 }}>
      <div style={kmBar}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <KmDots />
          <span style={{ fontFamily: kmM, fontSize: 10.5, color: KM.muted, letterSpacing: 1.5 }}>UPSTRIDE · WEEKLY SUMMARY</span>
        </div>
        <span style={{ fontFamily: kmM, fontSize: 9.5, color: KM.sky, letterSpacing: 1.5, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: KM.sky }}></span>AI-DRAFTED · THERAPIST APPROVED
        </span>
      </div>
      <div style={{ padding: 22 }}>
        <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 6 }}>For the Mehta family · Week 14 · 3 sessions</div>
        <div style={{ fontFamily: kmD, fontSize: 36, color: KM.ink, lineHeight: 1.05, letterSpacing: -1, marginBottom: 16 }}>
          Aarav had a <span style={{ fontStyle: 'italic', fontFamily: window.kSerif, color: KM.saffron }}>big</span> week.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
          <div>
            {[
              ['Fine motor', 'Stacked 7 blocks unaided — a new personal best.', KM.saffron],
              ['Communication', 'Used “more please” in 4 of 6 chances.', KM.sky],
              ['Self-regulation', 'Asked for a break instead of melting down.', KM.jade],
            ].map(([g, n, c]) => (
              <div key={g} style={{ display: 'grid', gridTemplateColumns: '8px 1fr', gap: 12, padding: '10px 0', borderBottom: `1px solid ${KM.line2}`, alignItems: 'start' }}>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: c, marginTop: 6 }}></span>
                <div>
                  <div style={{ fontFamily: kmM, fontSize: 9.5, color: c, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 3 }}>{g}</div>
                  <div style={{ fontFamily: kmS, fontSize: 13.5, color: KM.ink, lineHeight: 1.4 }}>{n}</div>
                </div>
              </div>
            ))}
            <div style={{ marginTop: 14, padding: 14, background: KM.bg2, borderRadius: 8, fontFamily: kmD, fontStyle: 'italic', fontFamily: window.kSerif, fontSize: 14.5, color: KM.cream, lineHeight: 1.45, borderLeft: `2px solid ${KM.rose}` }}>
              “Try the ‘all done!’ sign at bath time this weekend — he’s ready for it.”
              <div style={{ fontFamily: kmM, fontStyle: 'normal', fontSize: 9.5, color: KM.muted, marginTop: 7, letterSpacing: 1 }}>— MS. PRIYA, SPEECH THERAPIST</div>
            </div>
          </div>
          <div>
            <div style={{ fontFamily: kmM, fontSize: 9.5, color: KM.muted, letterSpacing: 1.5, marginBottom: 8, textTransform: 'uppercase' }}>Read in</div>
            {['English', 'हिन्दी', 'ಕನ್ನಡ', 'தமிழ்', 'मराठी'].map((l, i) => (
              <div key={l} style={{
                padding: '7px 11px', borderRadius: 8, marginBottom: 4,
                background: i === 0 ? `${KM.saffron}1a` : 'transparent',
                border: `1px solid ${i === 0 ? KM.saffron + '33' : KM.line}`,
                fontFamily: kmS, fontSize: 12, color: i === 0 ? KM.ink : KM.ink2,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span>{l}</span>
                {i === 0 && <span style={{ color: KM.saffron, fontFamily: kmM, fontSize: 9 }}>✓</span>}
              </div>
            ))}
            <div style={{ marginTop: 14, fontFamily: kmM, fontSize: 9.5, color: KM.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 6 }}>Sent via</div>
            <div style={{ fontFamily: kmS, fontSize: 12.5, color: KM.ink2 }}>● WhatsApp &nbsp;● Email</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ Mock 4 — Developmental journey (progress + continuity) ============
function KMockJourney() {
  const milestones = [
    ['Jan', 'Started OT', KM.muted, false],
    ['Feb', 'First 2-word request', KM.sky, true],
    ['Mar', 'Self-soothing emerges', KM.jade, true],
    ['Apr', '7-block stack · PB', KM.saffron, true],
    ['May', 'Turn-taking in play', KM.rose, false],
  ];
  return (
    <div style={kmShell}>
      <div style={kmBar}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <KmDots />
          <span style={{ fontFamily: kmM, fontSize: 10.5, color: KM.muted, letterSpacing: 1.5 }}>UPSTRIDE · DEVELOPMENTAL JOURNEY</span>
        </div>
        <span style={{ fontFamily: kmM, fontSize: 9.5, color: KM.jade, letterSpacing: 1.5 }}>5 MONTHS · 38 SESSIONS</span>
      </div>
      <div style={{ padding: 22 }}>
        {/* timeline */}
        <div style={{ position: 'relative', marginBottom: 24 }}>
          <div style={{ position: 'absolute', top: 7, left: '6%', right: '6%', height: 2, background: KM.line }}></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)' }}>
            {milestones.map(([m, t, c, big], i) => (
              <div key={m} style={{ textAlign: 'center', position: 'relative' }}>
                <div style={{ width: big ? 16 : 10, height: big ? 16 : 10, borderRadius: 99, background: c, margin: '0 auto', boxShadow: big ? `0 0 12px ${c}` : 'none', border: `2px solid ${KM.panel}` }}></div>
                <div style={{ fontFamily: kmM, fontSize: 9.5, color: KM.muted, letterSpacing: 1, marginTop: 10, textTransform: 'uppercase' }}>{m}</div>
                <div style={{ fontFamily: kmS, fontSize: 11.5, color: big ? KM.ink : KM.ink2, lineHeight: 1.3, marginTop: 4, padding: '0 6px' }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
        {/* domain progress bars */}
        <div style={{ borderTop: `1px solid ${KM.line}`, paddingTop: 16 }}>
          <div style={{ fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 12 }}>Progress across domains</div>
          {[['Communication', 72, KM.sky], ['Fine motor', 86, KM.saffron], ['Self-regulation', 81, KM.jade], ['Social play', 44, KM.rose]].map(([d, pct, c]) => (
            <div key={d} style={{ display: 'grid', gridTemplateColumns: '130px 1fr 44px', gap: 12, alignItems: 'center', marginBottom: 10 }}>
              <span style={{ fontFamily: kmS, fontSize: 12.5, color: KM.ink }}>{d}</span>
              <div style={{ height: 6, background: KM.bg, borderRadius: 99, overflow: 'hidden' }}>
                <div style={{ width: `${pct}%`, height: '100%', background: c, borderRadius: 99 }}></div>
              </div>
              <span style={{ fontFamily: kmM, fontSize: 11, color: KM.ink2, textAlign: 'right' }}>{pct}%</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, padding: '11px 14px', background: KM.bg2, border: `1px solid ${KM.line}`, borderRadius: 8, fontFamily: kmM, fontSize: 10, color: KM.muted, letterSpacing: 1.2, textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
          <span><span style={{ color: KM.jade }}>›</span> Continuity preserved</span>
          <span>Survives therapist changes &amp; centre transfers</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KMockPlan, KMockSession, KMockSummary, KMockJourney });