// CoParent — Polish: form factors beyond the in-app phone screens
// Lock screen notification stack, iOS home-screen widgets, Apple Watch glance, Web companion.

// ─── Lock screen with CoParent notifications ────────────────────────────────
function LockScreenMockup({ width = 393, height = 852 }) {
  return (
    <div style={{ width, height, borderRadius: 48, overflow: 'hidden',
      position: 'relative',
      background: 'linear-gradient(160deg, #1a3848 0%, #0d2735 40%, #1c1818 100%)',
      boxShadow: '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.12)',
      fontFamily: '-apple-system, "SF Pro", system-ui, sans-serif',
      color: '#fff' }}>

      {/* Dynamic island */}
      <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50 }} />

      {/* Top: time/date */}
      <div style={{ paddingTop: 76, textAlign: 'center' }}>
        <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: 0.2, opacity: 0.9 }}>Friday, May 15</div>
        <div style={{ fontSize: 88, fontWeight: 300, letterSpacing: -3, lineHeight: 1, marginTop: 2 }}>2:47</div>
      </div>

      {/* Widget area: CoParent today widget */}
      <div style={{ margin: '24px 18px 0', padding: '14px 16px',
        background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)', borderRadius: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <div style={{ width: 16, height: 16, borderRadius: 4, background: '#2D6A7F',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 8, fontWeight: 800, color: '#fff' }}>cp</div>
          <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.85, letterSpacing: 0.3 }}>COPARENT · NEXT UP</div>
        </div>
        <div style={{ fontSize: 17, fontWeight: 700 }}>Pickup at school</div>
        <div style={{ fontSize: 13, opacity: 0.85, marginTop: 2 }}>In 13 min · Emma & Liam</div>
      </div>

      {/* Notification stack */}
      <div style={{ position: 'absolute', bottom: 110, left: 18, right: 18,
        display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { kicker: 'JORDAN · NOW', title: 'Schedule swap request', body: 'Wants to swap the May 10 weekend' },
          { kicker: 'COPARENT · 14 MIN AGO', title: 'Pickup reminder', body: 'Leave in 5 min · 12 min to school' },
          { kicker: 'JORDAN · 2H', title: "Emma's reading group", body: 'Forwarded school message' },
        ].map((n, i) => (
          <div key={i} style={{
            background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(40px)',
            WebkitBackdropFilter: 'blur(40px)', borderRadius: 16,
            padding: '12px 14px', color: '#000',
            transform: `scale(${1 - i * 0.04}) translateY(${i * 4}px)`,
            opacity: 1 - i * 0.08, transformOrigin: 'center top' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <div style={{ width: 16, height: 16, borderRadius: 4, background: '#2D6A7F',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 8, fontWeight: 800, color: '#fff' }}>cp</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'rgba(0,0,0,0.55)', letterSpacing: 0.2 }}>{n.kicker}</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{n.title}</div>
            <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.65)', marginTop: 1 }}>{n.body}</div>
          </div>
        ))}
      </div>

      {/* Bottom actions */}
      <div style={{ position: 'absolute', bottom: 40, left: 28, right: 28,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ width: 44, height: 44, borderRadius: 22, background: 'rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="18" height="18" viewBox="0 0 18 18"><path d="M9 1l-7 5v8a2 2 0 002 2h10a2 2 0 002-2V6L9 1z" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinejoin="round"/></svg>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: 22, background: 'rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="4" stroke="#fff" strokeWidth="1.5" fill="none"/><path d="M1 9h2M15 9h2M9 1v2M9 15v2" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </div>
      </div>

      {/* Home indicator */}
      <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.7)' }} />
      </div>
    </div>
  );
}

// ─── iOS Home screen with CoParent widgets ──────────────────────────────────
function WidgetMockup({ width = 393, height = 852 }) {
  // Status bar reused
  const otherApps = [
    { l: 'Mail', c: '#188dec' }, { l: 'Maps', c: '#5fcf77' }, { l: 'Photos', c: '#fb3f6c' },
    { l: 'Notes', c: '#fbdf41' }, { l: 'Calls', c: '#4cd964' }, { l: 'Safari', c: '#0fafff' },
    { l: 'Music', c: '#fc3158' }, { l: 'Wallet', c: '#1a1a1a' },
  ];

  return (
    <div style={{ width, height, borderRadius: 48, overflow: 'hidden', position: 'relative',
      background: 'radial-gradient(circle at 30% 20%, #5b8fa8 0%, #2a4d62 50%, #1a2b38 100%)',
      boxShadow: '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.12)',
      fontFamily: '-apple-system, "SF Pro", system-ui, sans-serif', color: '#fff' }}>

      <div style={{ position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50 }} />

      {/* Status bar */}
      <div style={{ position: 'absolute', top: 18, left: 30, right: 30,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10 }}>
        <div style={{ fontSize: 16, fontWeight: 600 }}>9:41</div>
        <div style={{ width: 24, height: 12, borderRadius: 3, border: '1px solid rgba(255,255,255,0.4)',
          background: 'rgba(255,255,255,0.85)', backgroundClip: 'padding-box',
          boxShadow: 'inset 18px 0 0 #fff' }} />
      </div>

      {/* Widget grid */}
      <div style={{ paddingTop: 76, padding: '76px 18px 0', display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 14 }}>

        {/* Small widget: countdown */}
        <div style={{ aspectRatio: '1', background: '#FFFFFF', borderRadius: 22, padding: 16,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          boxShadow: '0 12px 30px rgba(0,0,0,0.18)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, background: '#2D6A7F',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800, color: '#fff' }}>cp</div>
            <div style={{ fontSize: 10, fontWeight: 700, color: '#6B8090',
              letterSpacing: 0.5, textTransform: 'uppercase' }}>Pickup</div>
          </div>
          <div>
            <div style={{ fontSize: 32, fontWeight: 800, color: '#1A2530', letterSpacing: -1, lineHeight: 1 }}>13m</div>
            <div style={{ fontSize: 11, color: '#6B8090', marginTop: 4, fontWeight: 600 }}>Emma & Liam · school</div>
          </div>
        </div>

        {/* Small widget: balance */}
        <div style={{ aspectRatio: '1',
          background: 'linear-gradient(160deg, #2D6A7F, #4EADA0)', borderRadius: 22, padding: 16,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: '#fff', boxShadow: '0 12px 30px rgba(0,0,0,0.18)' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', opacity: 0.85 }}>Balance</div>
          <div>
            <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -0.8, lineHeight: 1 }}>+$177</div>
            <div style={{ fontSize: 11, marginTop: 4, opacity: 0.9, fontWeight: 600 }}>Jordan owes you</div>
          </div>
        </div>

        {/* Medium widget: today schedule */}
        <div style={{ gridColumn: 'span 2', background: '#FFFFFF', borderRadius: 22, padding: '16px 18px',
          boxShadow: '0 12px 30px rgba(0,0,0,0.18)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <div style={{ width: 20, height: 20, borderRadius: 5, background: '#2D6A7F',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 10, fontWeight: 800, color: '#fff' }}>cp</div>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#6B8090', letterSpacing: 0.5, textTransform: 'uppercase' }}>Today · your day</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { time: '3:00', label: 'Pickup at school', current: true },
              { time: '4:30', label: "Emma's soccer" },
              { time: '6:00', label: 'Dinner' },
            ].map(m => (
              <div key={m.time} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 36, fontSize: 12, fontWeight: 700,
                  color: m.current ? '#2D6A7F' : '#6B8090' }}>{m.time}</div>
                <div style={{ fontSize: 13, color: '#1A2530',
                  fontWeight: m.current ? 700 : 500 }}>{m.label}</div>
                {m.current && <div style={{ width: 6, height: 6, borderRadius: 3, background: '#2D6A7F', marginLeft: 'auto' }} />}
              </div>
            ))}
          </div>
        </div>

        {/* Small app icons */}
        {otherApps.slice(0, 4).map(a => (
          <div key={a.l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 60, height: 60, borderRadius: 14, background: a.c,
              boxShadow: '0 4px 12px rgba(0,0,0,0.25)' }} />
            <div style={{ fontSize: 11, fontWeight: 500 }}>{a.l}</div>
          </div>
        ))}
      </div>

      {/* Dock */}
      <div style={{ position: 'absolute', bottom: 30, left: 30, right: 30, height: 76,
        background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)', borderRadius: 28,
        display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
        {[
          { l: 'CoParent', c: '#2D6A7F', label: 'cp' },
          { l: 'Phone', c: '#4cd964', label: '☏' },
          { l: 'Messages', c: '#4cd964', label: '☷' },
          { l: 'Camera', c: '#3a3a3a', label: '◉' },
        ].map(d => (
          <div key={d.l} style={{ width: 60, height: 60, borderRadius: 14, background: d.c,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 24, fontWeight: 800 }}>{d.label}</div>
        ))}
      </div>

      {/* Home indicator */}
      <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.7)' }} />
      </div>
    </div>
  );
}

// ─── Apple Watch glance ─────────────────────────────────────────────────────
function WatchMockup() {
  // Watch face shape: rounded rectangle ~210x250 with bezel
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 32, flexDirection: 'column' }}>
      <div style={{ position: 'relative', width: 230, height: 270 }}>
        {/* Bezel */}
        <div style={{ position: 'absolute', inset: 0, borderRadius: 48,
          background: '#0a0a0a',
          boxShadow: '0 20px 60px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.05)' }} />
        {/* Crown */}
        <div style={{ position: 'absolute', right: -6, top: 80, width: 8, height: 22, borderRadius: 3, background: '#222' }} />
        <div style={{ position: 'absolute', right: -5, top: 130, width: 6, height: 30, borderRadius: 2, background: '#222' }} />

        {/* Screen */}
        <div style={{ position: 'absolute', inset: 14, borderRadius: 38,
          background: '#000', overflow: 'hidden',
          fontFamily: '-apple-system, "SF Pro", system-ui, sans-serif', color: '#fff' }}>
          {/* Time */}
          <div style={{ position: 'absolute', top: 8, right: 14,
            fontSize: 13, fontWeight: 700, color: '#FF9F35' }}>2:47</div>

          {/* Content — handoff complication */}
          <div style={{ padding: '36px 14px 14px', height: '100%',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 9, fontWeight: 700, color: '#4EADA0',
                letterSpacing: 0.8, textTransform: 'uppercase' }}>Pickup in</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 2 }}>
                <span style={{ fontSize: 42, fontWeight: 800, letterSpacing: -1.5, lineHeight: 1 }}>13</span>
                <span style={{ fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.7)' }}>min</span>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 4, lineHeight: 1.3 }}>
                Lincoln Elem.<br/>Emma & Liam
              </div>
            </div>

            {/* Two buttons */}
            <div style={{ display: 'flex', gap: 6 }}>
              <div style={{ flex: 1, padding: '8px 0', borderRadius: 14, background: '#2D6A7F',
                color: '#fff', textAlign: 'center', fontSize: 11, fontWeight: 700 }}>On way</div>
              <div style={{ flex: 1, padding: '8px 0', borderRadius: 14, background: 'rgba(255,255,255,0.15)',
                color: '#fff', textAlign: 'center', fontSize: 11, fontWeight: 600 }}>Late</div>
            </div>
          </div>
        </div>

        {/* Strap (top) */}
        <div style={{ position: 'absolute', top: -32, left: '50%', transform: 'translateX(-50%)',
          width: 100, height: 36, background: 'linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%)',
          borderRadius: '8px 8px 0 0' }} />
        {/* Strap (bottom) */}
        <div style={{ position: 'absolute', bottom: -32, left: '50%', transform: 'translateX(-50%)',
          width: 100, height: 36, background: 'linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%)',
          borderRadius: '0 0 8px 8px' }} />
      </div>

      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', fontFamily: 'Plus Jakarta Sans, system-ui',
        textAlign: 'center', maxWidth: 280, lineHeight: 1.5 }}>
        Pickup countdown · tap to confirm "on my way" without unlocking your phone
      </div>
    </div>
  );
}

// ─── Web companion (browser chrome + desktop layout) ────────────────────────
function WebCompanionMockup({ width = 1100, height = 760 }) {
  return (
    <ChromeWindow tabs={[{ title: 'CoParent · Today' }]} url="coparent.app/today" width={width} height={height}>
      <div style={{ height: '100%', background: '#FFFFFF',
        fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
        display: 'flex', overflow: 'hidden' }}>

        {/* Sidebar */}
        <div style={{ width: 240, background: '#F5F8FA', borderRight: '1px solid #E5EEF2',
          display: 'flex', flexDirection: 'column', padding: '24px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 8px 24px' }}>
            <div style={{ width: 28, height: 28, borderRadius: 7, background: '#2D6A7F',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontSize: 13, fontWeight: 800 }}>cp</div>
            <div style={{ fontSize: 16, fontWeight: 800, color: '#1A2530', letterSpacing: -0.3 }}>CoParent</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              { l: 'Today', active: true },
              { l: 'Calendar' }, { l: 'Expenses' }, { l: 'Messages' },
              { l: 'Documents' }, { l: 'Records' }, { l: 'Settings' },
            ].map(it => (
              <div key={it.l} style={{ padding: '10px 12px', borderRadius: 10,
                background: it.active ? '#2D6A7F' : 'transparent',
                color: it.active ? '#fff' : '#1A2530',
                fontSize: 14, fontWeight: it.active ? 700 : 500, cursor: 'pointer' }}>
                {it.l}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 'auto', padding: '14px 12px', background: '#FFF', borderRadius: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: '#4EADA0',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800, fontSize: 12 }}>A</div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#1A2530' }}>Alex</div>
                <div style={{ fontSize: 10, color: '#6B8090' }}>Free trial · 9 days</div>
              </div>
            </div>
            <div style={{ fontSize: 11, color: '#2D6A7F', fontWeight: 700, cursor: 'pointer' }}>Upgrade to Pro</div>
          </div>
        </div>

        {/* Main */}
        <div style={{ flex: 1, padding: '28px 36px', overflowY: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 800, color: '#1A2530', letterSpacing: -0.6 }}>Today, Friday May 15</div>
              <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: '#4EADA0' }} />
                <span style={{ fontSize: 12, fontWeight: 600, color: '#6B8090', letterSpacing: 0.2 }}>Your day · with Emma & Liam</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ padding: '10px 16px', background: '#F5F8FA', borderRadius: 10, fontSize: 13, color: '#1A2530', fontWeight: 600 }}>Search</div>
              <div style={{ padding: '10px 16px', background: '#2D6A7F', color: '#fff', borderRadius: 10, fontSize: 13, fontWeight: 700 }}>+ Quick add</div>
            </div>
          </div>

          {/* Two-column layout */}
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20 }}>
            <div>
              {/* Pickup card */}
              <div style={{ background: 'linear-gradient(135deg, #2D6A7F, #4EADA0)',
                borderRadius: 18, padding: 24, color: '#fff', marginBottom: 16 }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', opacity: 0.85 }}>Next up</div>
                <div style={{ fontSize: 26, fontWeight: 800, marginTop: 8, letterSpacing: -0.4 }}>Pickup at school</div>
                <div style={{ fontSize: 13, opacity: 0.85, marginTop: 6 }}>3:00 PM · in 13 minutes · Lincoln Elementary</div>
                <div style={{ display: 'inline-flex', gap: 8, marginTop: 16 }}>
                  <div style={{ padding: '8px 14px', borderRadius: 8, background: 'rgba(255,255,255,0.2)', fontSize: 13, fontWeight: 700 }}>I'm on my way</div>
                  <div style={{ padding: '8px 14px', borderRadius: 8, background: 'rgba(255,255,255,0.12)', fontSize: 13, fontWeight: 600 }}>Running late</div>
                </div>
              </div>

              {/* Schedule */}
              <div style={{ background: '#fff', border: '1px solid #E5EEF2', borderRadius: 18, padding: 20 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#6B8090', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 12 }}>Today's flow</div>
                {[
                  { t: '7:30 AM', l: 'Breakfast', done: true },
                  { t: '8:15 AM', l: 'School drop-off', done: true },
                  { t: '3:00 PM', l: 'Pickup at school', current: true },
                  { t: '4:30 PM', l: "Emma's soccer" },
                  { t: '6:00 PM', l: 'Dinner' },
                  { t: '8:00 PM', l: 'Bedtime story' },
                ].map((m, i, arr) => (
                  <div key={m.t} style={{ display: 'flex', alignItems: 'center', gap: 16,
                    padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid #E5EEF2' : 'none',
                    opacity: m.done ? 0.5 : 1 }}>
                    <div style={{ width: 70, fontSize: 12, fontWeight: 700,
                      color: m.current ? '#2D6A7F' : '#6B8090' }}>{m.t}</div>
                    <div style={{ flex: 1, fontSize: 14, color: '#1A2530',
                      fontWeight: m.current ? 700 : 500,
                      textDecoration: m.done ? 'line-through' : 'none' }}>{m.l}</div>
                    {m.current && <div style={{ fontSize: 11, color: '#2D6A7F', fontWeight: 700, padding: '3px 8px', background: '#EAF3F7', borderRadius: 10 }}>NEXT</div>}
                  </div>
                ))}
              </div>
            </div>

            {/* Right column */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Amber banner */}
              <div style={{ padding: 16, background: '#FEF5E4', borderRadius: 14,
                display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 4, alignSelf: 'stretch', borderRadius: 2, background: '#C97A08' }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#C97A08', letterSpacing: 0.5 }}>JORDAN ASKED</div>
                  <div style={{ fontSize: 14, color: '#1A2530', fontWeight: 600, marginTop: 2 }}>Swap May 10 weekend</div>
                </div>
                <span style={{ fontSize: 18, color: '#C97A08' }}>›</span>
              </div>

              {/* Balance */}
              <div style={{ background: '#fff', border: '1px solid #E5EEF2', borderRadius: 14, padding: 18 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#6B8090', letterSpacing: 0.6, textTransform: 'uppercase' }}>Balance</div>
                <div style={{ fontSize: 28, fontWeight: 800, color: '#2A9D6B', marginTop: 6, letterSpacing: -0.5 }}>+$177.50</div>
                <div style={{ fontSize: 13, color: '#6B8090', marginTop: 2 }}>Jordan owes you</div>
              </div>

              {/* Kids */}
              <div style={{ background: '#fff', border: '1px solid #E5EEF2', borderRadius: 14, padding: 18 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#6B8090', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 12 }}>Children</div>
                {[
                  { n: 'Emma', a: 8, c: '#4EADA0' },
                  { n: 'Liam', a: 5, c: '#2D6A7F' },
                ].map(c => (
                  <div key={c.n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 16, background: c.c,
                      color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 800, fontSize: 13 }}>{c.n[0]}</div>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 700, color: '#1A2530' }}>{c.n}</div>
                      <div style={{ fontSize: 11, color: '#6B8090' }}>Age {c.a}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </ChromeWindow>
  );
}

Object.assign(window, { LockScreenMockup, WidgetMockup, WatchMockup, WebCompanionMockup });