// phone-mock.jsx — iPhone frame + faithful screen recreations, synced to the
// CURRENT project_blackdevil source (July 2026):
//   Today/Desk/Ledger + nav  → "Shift Board" (design_handoff_shift_board_v2):
//     0-radius, corner-cut CTAs, flush near-black/paper surfaces, mono
//     uppercase instrument labels, safety-orange (#FF5C00 dark / #C4502A
//     light terracotta) — from src/components/v2/TodaySurface.tsx,
//     CommandBarV2.tsx, src/components/desk/{DeskView,DecisionCard}.tsx,
//     src/components/v2/LedgerView.tsx, src/app/globals.css (--sb-* tokens).
//   Composer / Job record / Customers → still the warm "Rams" rounded-card
//     system (not yet Shift-Board-converted) but repainted to the SAME new
//     brand hex, since --brand-rams was repointed as part of the July 2 brand
//     unification — from src/components/v2/ComposerView.tsx,
//     src/components/v2/JobWorksurface.tsx, src/components/v2/CustomerWorksurface.tsx.

const { useEffect, useRef } = React;

// EKG waveform path — same as the actual product's logo (CommandBarV2's
// WerkdPulse / HomeUI HEART_PATH).
const EKG_PATH = 'M2 20L10 20L17 36L28 4L36 36L47 4L54 20L62 20';

// Inline lucide-style icon component (no external library needed at runtime —
// these stroke paths come from lucide.dev).
function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.75, style }) {
  const paths = {
    'map-pin': <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    'navigation': <><polygon points="3 11 22 2 13 21 11 13 3 11"/></>,
    'phone': <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92Z"/></>,
    'clock': <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    'alert-circle': <><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,
    'bell': <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
    'chevron-right': <><polyline points="9 18 15 12 9 6"/></>,
    'chevron-left': <><polyline points="15 18 9 12 15 6"/></>,
    'edit': <><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></>,
    'trash': <><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></>,
    'mail': <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    'share-2': <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></>,
    'star': <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>,
    'more-vertical': <><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></>,
    'send': <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    'plus': <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    'check-circle': <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></>,
    'dollar': <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    'file-text': <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
    'calendar': <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    'trending-up': <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
    'alert-triangle': <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    'home': <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    'briefcase': <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    'camera': <><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></>,
    'mic': <><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></>,
    'message-circle': <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></>,
    'wrench': <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
    'x': <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    'user': <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    'signal': <><path d="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/></>,
    'wifi': <><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
    'battery': <><rect x="1" y="6" width="18" height="12" rx="2" ry="2"/><line x1="23" y1="13" x2="23" y2="11"/><rect x="3" y="8" width="11" height="8" rx="1" fill={color} stroke="none"/></>,
    'battery-full': <><rect x="1" y="6" width="18" height="12" rx="2" ry="2"/><line x1="23" y1="13" x2="23" y2="11"/><rect x="3" y="8" width="13" height="8" rx="1" fill={color} stroke="none"/></>,
    'pause': <><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></>,
    'play': <><polygon points="6 3 20 12 6 21 6 3"/></>,
    'chevron-down': <><polyline points="6 9 12 15 18 9"/></>,
    'dollar-sign': <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    'message-square': <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    'sparkles': <><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z"/></>,
    'search': <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    'bookmark': <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    'receipt': <><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M8 7h8M8 11h8M8 15h5"/></>,
    'settings': <><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></>,
    'zap': <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
    'package': <><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></>,
    'clipboard-list': <><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4M12 16h4M8 11h.01M8 16h.01"/></>,
    'credit-card': <><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></>,
    'user-plus': <><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></>,
    'bar-chart': <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></>,
    'tag': <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></>,
    'check': <><polyline points="20 6 9 17 4 12"/></>,
    'users': <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    'moon': <><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></>,
    'book-open': <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></>,
    'route': <><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></>,
    'shield-check': <><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></>,
    'calendar-clock': <><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4.5"/><path d="M16 2v4M8 2v4M3 10h5"/><circle cx="17.5" cy="17.5" r="4.5"/><path d="M17.5 15.5v2l1.3.8"/></>,
    'inbox': <><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name]}
    </svg>
  );
}

// Werkd EKG logo mark (waveform, no badge/background or glow — bare mark only).
function WerkdMark({ size = 40, color = '#FF5C00' }) {
  // No container box: the mark is just the waveform glyph. Sized ~20% larger
  // (relative to the old badge-relative sizing) since there's no padding to
  // eat into anymore. Aspect ratio matches the viewBox (64:40 = 1.6:1).
  const h = size * 0.5;
  const w = h * 1.6;
  return (
    <svg width={w} height={h} viewBox="0 0 64 40" fill="none" style={{ flexShrink: 0 }}>
      <path d={EKG_PATH} stroke={color} strokeWidth={6}
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Werkd wordmark — official spec.
// Inter 800, letter-spacing -0.05em.
// "werk" in main color, "d" + "." in brand orange.
function WerkdWordmark({ size = 32, color = '#171717', dotColor = '#FF5C00' }) {
  return (
    <span style={{
      fontFamily: "'Inter', -apple-system, system-ui, sans-serif",
      fontWeight: 800,
      fontSize: size,
      letterSpacing: '-0.05em',
      lineHeight: 1,
      color,
      display: 'inline-flex',
      alignItems: 'baseline',
    }}>
      werk<span style={{ color: dotColor }}>d.</span>
    </span>
  );
}

// Phone frame — iPhone-ish with screen content as children. Glove-friendly: matches the product's
// safe-area + bottom-nav presence.
function PhoneFrame({ children, width = 340, scale = 1, theme = 'dark', tilt = 0, glow = false }) {
  const h = width * 2.16; // ~ iPhone 15 Pro aspect
  return (
    <div style={{
      width: width * scale, height: h * scale,
      position: 'relative',
      transform: `rotate(${tilt}deg)`,
      transformOrigin: 'center center',
      filter: glow ? 'drop-shadow(0 30px 60px rgba(0,0,0,0.4)) drop-shadow(0 10px 20px rgba(0,0,0,0.3))' : 'drop-shadow(0 20px 40px rgba(0,0,0,0.18))',
    }}>
      <div style={{
        width: width, height: h,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        position: 'absolute', top: 0, left: 0,
      }}>
        {/* Outer titanium bezel */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(140deg, #3a3a3e 0%, #1c1c1e 40%, #2a2a2e 70%, #161618 100%)',
          borderRadius: width * 0.16,
          padding: width * 0.02,
        }}>
          {/* Inner black bezel */}
          <div style={{
            position: 'absolute',
            inset: width * 0.018,
            background: '#000',
            borderRadius: width * 0.14,
            overflow: 'hidden',
          }}>
            {/* Screen */}
            <div style={{
              position: 'absolute',
              inset: width * 0.012,
              background: theme === 'dark' ? '#0c0d0f' : '#f6f2ea',
              borderRadius: width * 0.13,
              overflow: 'hidden',
            }}>
              {/* Dynamic Island */}
              <div style={{
                position: 'absolute',
                top: width * 0.035,
                left: '50%',
                transform: 'translateX(-50%)',
                width: width * 0.32,
                height: width * 0.085,
                background: '#000',
                borderRadius: 999,
                zIndex: 10,
              }}/>
              {children}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Shift Board (design_handoff_shift_board_v2) token set ──────────────────
// Today / Desk / Ledger + the nav are fully converted to this system:
// 0-radius everywhere (circles + the 8px nav badge are the only exceptions),
// corner-cut CTAs (clip-path notch), flush near-black (dark) / warm paper
// (light) surfaces, mono uppercase tracked instrument labels. Values lifted
// verbatim from src/app/globals.css --sb-* custom properties.
function SBC(isDark) {
  return isDark ? {
    bg: '#0c0d0f', bgNav: '#101114', panel: '#14161a',
    hairline: '#1b1e22', border: '#26292e', borderStrong: '#33373d',
    text: '#f2f2f0', textHigh: '#e7e8e9', text2: '#c9cbce', muted: '#9a9ca0',
    faint: '#6e7176', ghost: '#43474d',
    brand: '#ff5c00', brandText: '#ff9257',
    danger: '#ff4747', dangerText: '#ff6b6b', warn: '#e8a344', money: '#4ade80',
    hazardBg: 'repeating-linear-gradient(-45deg, #2a1206 0 6px, #1a0c04 6px 12px)',
    onBrand: '#0c0d0f',
  } : {
    bg: '#f6f2ea', bgNav: '#f1ece1', panel: '#fdfcf8',
    hairline: '#e4ddce', border: '#dad3c4', borderStrong: '#c9c1b0',
    text: '#201d18', textHigh: '#2a2620', text2: '#4a453c', muted: '#6b655b',
    faint: '#8a8478', ghost: '#b5ac99',
    brand: '#c4502a', brandText: '#b04724',
    danger: '#d03b2f', dangerText: '#b0342a', warn: '#9a6b1f', money: '#2e6b44',
    hazardBg: 'repeating-linear-gradient(-45deg, #f5ded6 0 6px, #efd2c8 6px 12px)',
    onBrand: '#f6f2ea',
  };
}
const SB_CUT_HERO = 'polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)';
const SB_CUT_CARD = 'polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%)';
// SB mono section label — 0.22em tracked uppercase, orange when accent.
function SBLabel({ C, children, right, accent }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 15, paddingBottom: 6 }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, color: accent ? C.brand : C.faint }}>{children}</span>
      {right && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.06em', color: C.faint }}>{right}</span>}
    </div>
  );
}
// 38px→31px SB header circle (Map / Calendar / Settings).
function SBCircle({ C, icon, size = 31 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      border: '1px solid ' + C.borderStrong, background: 'transparent',
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.muted, flexShrink: 0,
    }}>
      <Icon name={icon} size={Math.round(size * 0.46)} color={C.muted} strokeWidth={1.5}/>
    </div>
  );
}
// SB header — wordmark ("d." orange) + mono meta line, 3 circles right.
function SBHeader({ C, meta, icons }) {
  return (
    <div style={{ padding: '13px 15px 3px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 16.5, fontWeight: 800, letterSpacing: '-0.01em', color: C.text }}>
          Werk<span style={{ color: C.brand }}>d.</span>
        </div>
        {meta && (
          <div style={{ fontFamily: 'var(--font-mono)', color: C.faint, fontSize: 9, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 3 }}>{meta}</div>
        )}
      </div>
      <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
        {icons.map((ic, i) => <SBCircle key={i} C={C} icon={ic}/>)}
      </div>
    </div>
  );
}
// SB stat strip — 3 cells, 1px rules, mono values over tracked mono labels.
function SBStatRow({ C, cols }) {
  return (
    <div style={{ display: 'flex', borderTop: '1px solid ' + C.border, borderBottom: '1px solid ' + C.border, margin: '10px 0 0' }}>
      {cols.map((c, i) => (
        <div key={i} style={{ flex: 1, minWidth: 0, textAlign: 'center', padding: '9px 3px', borderLeft: i > 0 ? '1px solid ' + C.border : 'none' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', color: c.color || C.text }}>{c.value}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 7.5, fontWeight: 400, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.faint, marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.label}</div>
        </div>
      ))}
    </div>
  );
}
// SB hairline notice row — 3px square rail, body title + faint sub, money/action right.
function SBNoticeRow({ C, tone, label, sub, right, action, first }) {
  const rail = tone === 'danger' ? C.danger : tone === 'warning' ? C.warn : C.brand;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: first ? 'none' : '1px solid ' + C.hairline }}>
      <span style={{ width: 3, height: 24, flexShrink: 0, background: rail }}/>
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontSize: 12, fontWeight: 500, lineHeight: 1.3, color: C.textHigh, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
        {sub && <span style={{ display: 'block', marginTop: 3, fontSize: 10.5, color: C.faint, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</span>}
      </span>
      {right && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: tone === 'danger' ? C.dangerText : C.text }}>{right}</span>}
      {action ? (
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.faint }}>{action}</span>
      ) : (
        <span style={{ color: C.ghost, fontSize: 14 }}>&#8250;</span>
      )}
    </div>
  );
}

// v2 bottom nav — Today · Desk · Ledger + far-right ⊕ FAB (CommandBarV2.tsx).
// Flush bg-nav bar, 1px top border. Active = safety orange, mono 9px tracked
// caps, NO underline/notch (spec explicitly drops it). FAB is a dominant
// orange circle carrying the Werkd pulse mark, ringed by the bar's own bg so
// it "cuts" out of the top border.
function CommandBar({ theme = 'dark', active = 'today', deskCount = 2 }) {
  const C = SBC(theme === 'dark');
  const tabs = [
    { id: 'today', label: 'Today', icon: 'home' },
    { id: 'desk', label: 'Desk', icon: 'inbox', badge: deskCount },
    { id: 'ledger', label: 'Ledger', icon: 'search' },
  ];
  return (
    <div style={{
      position: 'relative', background: C.bgNav, borderTop: '1px solid ' + C.border,
      paddingBottom: 16, paddingTop: 8, display: 'flex', alignItems: 'stretch',
    }}>
      {tabs.map((tab) => {
        const on = active === tab.id;
        return (
          <div key={tab.id} style={{
            position: 'relative', flex: 1,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5,
            color: on ? C.brand : C.faint,
          }}>
            <span style={{ position: 'relative', lineHeight: 0 }}>
              <Icon name={tab.icon} size={19} color={on ? C.brand : C.faint} strokeWidth={on ? 2.1 : 1.7}/>
              {tab.badge > 0 && (
                <span style={{
                  position: 'absolute', top: -5, right: -9, minWidth: 13, height: 13, padding: '0 3px',
                  borderRadius: 7, background: C.danger, color: '#fff',
                  fontFamily: 'var(--font-mono)', fontSize: 8.5, fontWeight: 700, lineHeight: '13px', textAlign: 'center',
                }}>{tab.badge}</span>
              )}
            </span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8, fontWeight: 600, letterSpacing: '0.13em', textTransform: 'uppercase' }}>{tab.label}</span>
          </div>
        );
      })}
      {/* ⊕ Composer FAB — far-right, dominant, rides above the bar */}
      <div style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: 54, height: 54, marginTop: -27, borderRadius: '50%',
          background: C.brand, border: '3px solid ' + C.bgNav,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.onBrand,
        }}>
          <svg width={26} height={16} viewBox="0 0 64 40" fill="none">
            <path d={EKG_PATH} stroke={C.onBrand} strokeWidth={6} strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

function V2HomeIndicator({ isDark }) {
  return (
    <div style={{
      position: 'absolute', bottom: 5, left: '50%', transform: 'translateX(-50%)', zIndex: 6,
      width: 110, height: 4, borderRadius: 2,
      background: isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)',
    }}/>
  );
}

// TODAY — "The Line" (TodaySurface.tsx, Shift Board). Header → NEXT JOB label
// + big instrument clock + leave/late chip → hero panel (name/address/desc +
// Navigate & start + Call/AI job prep) → stat row → Needs review → Queue.
function TodayScreen({ theme = 'dark', state = 'default', spotlight = false }) {
  const isDark = theme === 'dark';
  const C = SBC(isDark);
  return (
    <div style={{
      position: 'absolute', inset: 0, background: C.bg, color: C.text,
      fontFamily: 'var(--font-ui)', display: 'flex', flexDirection: 'column', paddingTop: 52,
    }}>
      <V2StatusBar C={C}/>
      <SBHeader C={C} meta="THU JUL 2 · 1/5 DONE" icons={['map-pin', 'calendar', 'settings']}/>

      <div style={{ padding: '0 15px', flex: 1, overflow: 'hidden' }}>
        <SBLabel C={C} accent>Next job</SBLabel>
        {/* Instrument clock — big bold hour, stacked mins + AM/PM, mono chip */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, margin: '-6px 0 0' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--font-ui)', fontVariantNumeric: 'tabular-nums', fontSize: 46, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.01em', color: C.text }}>
            10
            <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2, marginLeft: 3 }}>
              <span style={{ fontSize: 20, fontWeight: 400, lineHeight: 1 }}>30</span>
              <span style={{ fontSize: 10, fontWeight: 300, lineHeight: 1, color: C.faint, letterSpacing: '0.04em' }}>AM</span>
            </span>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', padding: '5px 8px', border: '1px solid ' + C.warn, color: C.warn, fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.1em' }}>LEAVE IN 12 MIN</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.faint, margin: '2px 0 10px' }}>THU, JUL 2</div>

        {/* Hero instrument panel — fill + border, 4px tone rail */}
        <div style={{ display: 'flex', background: C.panel, border: '1px solid ' + C.border, boxShadow: spotlight ? '0 16px 36px -16px rgba(0,0,0,0.5)' : 'none' }}>
          <span style={{ width: 3, flexShrink: 0, background: C.warn }}/>
          <div style={{ flex: 1, minWidth: 0, padding: '12px 12px 11px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 6 }}>
              <div style={{ fontSize: 15.5, fontWeight: 700, lineHeight: 1.15, color: C.text }}>Aria Russell</div>
              <div style={{ flexShrink: 0, color: C.faint, fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase' }}>30 min drive</div>
            </div>
            <div style={{ color: C.muted, fontFamily: 'var(--font-mono)', fontSize: 9.5, textTransform: 'uppercase', marginTop: 2 }}>2847 Birch Lane</div>
            <div style={{ color: C.muted, fontSize: 11, marginTop: 7, lineHeight: 1.4 }}>Remove old thermostat, install smart, verify zone wiring.</div>

            <div style={{
              width: '100%', height: 34, marginTop: 11, background: C.brand, color: C.onBrand, border: 'none',
              clipPath: SB_CUT_HERO, fontSize: 11, fontWeight: 800, letterSpacing: '0.07em', textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <Icon name="navigation" size={12} color={C.onBrand} strokeWidth={2.3}/>Navigate &amp; start
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
              <div style={{ flex: 1, height: 28, border: '1px solid ' + C.borderStrong, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: C.text2 }}>
                <Icon name="phone" size={10} color={C.text2} strokeWidth={2}/>Call
              </div>
              <div style={{ flex: 1.3, height: 28, border: '1px solid ' + C.borderStrong, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: C.brandText }}>
                AI job prep &#8594;
              </div>
            </div>
          </div>
        </div>

        <SBStatRow C={C} cols={[
          { label: 'Booked revenue', value: '$2,150', color: C.money },
          { label: 'Open jobs', value: '4' },
          { label: 'Needs review', value: '2', color: C.dangerText },
        ]}/>

        <SBLabel C={C}>Needs review</SBLabel>
        <SBNoticeRow C={C} first tone="danger" label="3 invoices overdue" sub="Review in Ledger" right="$1,847"/>
        <SBNoticeRow C={C} tone="warning" label="2 approvals on Desk" sub="2 approvals prepared" action="VIEW"/>

        <SBLabel C={C}>Queue</SBLabel>
        <div>
          {[
            { t: '11:00A', n: 'Dave Wilson', d: 'Outlet repair', a: '$140', done: false },
            { t: '8:00A', n: 'Mike — Drain clear', d: null, a: '$185', done: true },
          ].map((j, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '44px minmax(0,1fr) auto', alignItems: 'center', columnGap: 10,
              padding: '9px 0', borderBottom: j.done ? 'none' : '1px solid ' + C.hairline, opacity: j.done ? 0.45 : 1,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 10, fontWeight: j.done ? 400 : 600, color: j.done ? C.faint : C.text }}>{j.t}</span>
              <span style={{ minWidth: 0, overflow: 'hidden' }}>
                <span style={{ display: 'block', fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: j.done ? C.muted : C.textHigh }}>{j.n}</span>
                {j.d ? <span style={{ display: 'block', fontSize: 10, color: C.faint, marginTop: 1 }}>{j.d}</span>
                     : <span style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', color: C.faint, marginTop: 1 }}>DONE · {j.a}</span>}
              </span>
              {!j.done && <span style={{ color: C.money, fontFamily: 'var(--font-mono)', fontSize: 11 }}>{j.a}</span>}
            </div>
          ))}
        </div>
      </div>

      <CommandBar theme={theme} active="today"/>
      <V2HomeIndicator isDark={isDark}/>
    </div>
  );
}

function V2StatusBar({ C }) {
  return (
    <div style={{
      position: 'absolute', top: 14, left: 24, right: 24, zIndex: 5,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 14, fontWeight: 600, color: C.text,
    }}>
      <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        <Icon name="signal" size={15} color={C.text} strokeWidth={2.5}/>
        <Icon name="wifi" size={15} color={C.text} strokeWidth={2.5}/>
        <Icon name="battery" size={20} color={C.text} strokeWidth={2.5}/>
      </div>
    </div>
  );
}

// ── Rams (not yet Shift-Board-converted) token set — Composer, Job record,
// Customers still use these rounded warm surfaces. Brand hex updated to the
// July 2 unification (--brand-rams now resolves to the same new orange).
function V2C(isDark) {
  return isDark ? {
    bg: '#181714', card: '#22201c', control: '#302c26',
    border: '#38322b', strong: '#453e34',
    text: '#f5f5f7', text2: '#a8a8b0', text3: '#8a8a92', muted: '#6c6c74',
    brand: '#ff5c00', ink: '#0c0d0f',
    danger: '#ee5555', warn: '#e8a344', success: '#3cc26d',
    brandMuted: 'rgba(255,92,0,0.12)', dangerMuted: 'rgba(238,85,85,0.12)',
    dim: 'rgba(0,0,0,0.5)',
  } : {
    bg: '#f8f4ed', card: '#fffdfa', control: '#f0ece6',
    border: '#e3d8c9', strong: '#d3c6b3',
    text: '#171717', text2: '#6f7177', text3: '#9a9ca3', muted: '#9a9ca3',
    brand: '#c4502a', ink: '#f6f2ea',
    danger: '#dc2626', warn: '#d97706', success: '#16a34a',
    brandMuted: 'rgba(196,80,42,0.10)', dangerMuted: 'rgba(220,38,38,0.10)',
    dim: 'rgba(0,0,0,0.32)',
  };
}

function V2Label({ C, children, right, dot, dotColor }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 11, paddingBottom: 5 }}>
      <span style={{ fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text2, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        {dot && <span style={{ width: 5, height: 5, borderRadius: 5, background: dotColor || C.brand, display: 'inline-block' }}/>}
        {children}
      </span>
      {right && <span style={{ fontSize: 9.5, color: C.text3 }}>{right}</span>}
    </div>
  );
}

// DESK — "Decisions, not documents" (DeskView.tsx + DecisionCard.tsx, Shift
// Board). 76px instrument count hero, mono kind labels + 4px tone rail cards,
// corner-cut CTAs, "Werkd did" journal.
function DeskScreen({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const C = SBC(isDark);
  const cards = [
    { rail: C.danger, kind: 'COLLECT · $1,847', kc: C.dangerText, title: 'Mike Chen — invoice 14 days late', receipt: 'Friendly-but-firm reminder drafted · 3rd nudge', amt: '$1,847', cta: 'Send reminder', adjust: true },
    { rail: C.warn, kind: 'REVENUE', kc: C.warn, title: 'Aria Russell — job done, uninvoiced', receipt: 'Invoice drafted from today’s job', amt: '$420', cta: 'Review & send →', adjust: true },
    { rail: C.borderStrong, kind: 'CLOSE', kc: C.muted, title: 'Close out today', receipt: '1 job left to invoice · books tidy', amt: null, cta: 'Close the day', adjust: false },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, color: C.text, fontFamily: 'var(--font-ui)', display: 'flex', flexDirection: 'column', paddingTop: 52 }}>
      <V2StatusBar C={C}/>
      <SBHeader C={C} meta="TUE 07.02" icons={['settings']}/>
      <div style={{ padding: '2px 15px 0', flex: 1, overflow: 'hidden' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.brand }}>On your desk</span>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginTop: 2 }}>
          <span style={{ fontFamily: 'var(--font-ui)', fontVariantNumeric: 'tabular-nums', fontWeight: 700, fontSize: 40, lineHeight: 1, letterSpacing: '-0.01em', color: C.text }}>3</span>
          <span style={{ fontFamily: 'var(--font-ui)', fontWeight: 300, fontSize: 14, color: C.faint, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Decisions</span>
        </div>

        <div style={{ marginTop: 12 }}>
          {cards.map((card, i) => (
            <div key={i} style={{ display: 'flex', marginBottom: 8, border: '1px solid ' + C.border, background: C.panel }}>
              <span style={{ width: 3, flexShrink: 0, background: card.rail }}/>
              <div style={{ flex: 1, minWidth: 0, padding: '9px 10px' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, fontWeight: 700, letterSpacing: '0.13em', textTransform: 'uppercase', color: card.kc }}>{card.kind}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 6, marginTop: 5 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: C.text, lineHeight: 1.25 }}>{card.title}</span>
                  {card.amt && <span style={{ flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 11.5, fontWeight: 600, color: C.money }}>{card.amt}</span>}
                </div>
                <div style={{ color: C.muted, fontSize: 9.5, lineHeight: 1.4, marginTop: 4 }}>{card.receipt}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
                  <span style={{ height: 26, padding: '0 10px', background: C.brand, color: C.onBrand, clipPath: SB_CUT_CARD, fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase', display: 'flex', alignItems: 'center' }}>{card.cta}</span>
                  {card.adjust && <span style={{ height: 26, padding: '0 9px', border: '1px solid ' + C.borderStrong, color: C.text2, fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', display: 'flex', alignItems: 'center' }}>Adjust</span>}
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.faint }}>skip</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <SBLabel C={C} right="TODAY · AUTO">Werkd did</SBLabel>
        {[
          { t: '4:51', l: 'Invoice sent to Mike Chen — $185' },
          { t: '3:12', l: 'Quote follow-up sent to Dave Wilson' },
        ].map((j, i) => (
          <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', borderTop: i > 0 ? '1px solid ' + C.hairline : 'none' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 9.5, color: C.faint, width: 30, flexShrink: 0 }}>{j.t}</span>
            <span style={{ flex: 1, fontSize: 10.5, color: C.text2 }}>{j.l}</span>
          </div>
        ))}
      </div>
      <CommandBar theme={theme} active="desk" deskCount={3}/>
      <V2HomeIndicator isDark={isDark}/>
    </div>
  );
}

// LEDGER — "Look it up, then leave" (LedgerView.tsx, Shift Board). Collected
// hero (money-green instrument numeral), pulse strip, AI brief ladder,
// omnibox, tools row, recents.
function LedgerScreen({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const C = SBC(isDark);
  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, color: C.text, fontFamily: 'var(--font-ui)', display: 'flex', flexDirection: 'column', paddingTop: 52 }}>
      <V2StatusBar C={C}/>
      <SBHeader C={C} icons={['user-plus', 'package']}/>
      <div style={{ padding: '2px 15px 0', flex: 1, overflow: 'hidden' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.brand }}>Collected · June</span>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginTop: 2 }}>
          <span style={{ fontFamily: 'var(--font-ui)', fontVariantNumeric: 'tabular-nums', fontWeight: 700, fontSize: 40, lineHeight: 1, letterSpacing: '-0.01em', color: C.money }}>$12,400</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: C.muted, textTransform: 'uppercase' }}>+18% vs May</span>
        </div>

        <SBStatRow C={C} cols={[
          { label: 'Outstanding', value: '$3,090' },
          { label: 'Overdue', value: '$1,847', color: C.dangerText },
          { label: 'Last May', value: '$10,510' },
        ]}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 11, padding: '10px 0', borderBottom: '1px solid ' + C.hairline }}>
          <span style={{ width: 3, height: 22, background: C.danger, flexShrink: 0 }}/>
          <span style={{ flex: 1, fontSize: 11, color: C.text2 }}>3 invoices are overdue, <span style={{ fontFamily: 'var(--font-mono)', color: C.text }}>$1,847</span> at risk.</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.brandText }}>Chase</span>
        </div>

        <button style={{
          marginTop: 11, width: '100%', display: 'flex', alignItems: 'center', gap: 9,
          background: C.panel, border: '1px solid ' + C.borderStrong, padding: '10px 11px',
          color: C.faint, textAlign: 'left', minHeight: 36,
        }}>
          <Icon name="search" size={13} color={C.faint} strokeWidth={2}/>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.03em', textTransform: 'uppercase', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Search — customers, invoices, jobs…</span>
        </button>

        <div style={{ display: 'flex', gap: 6, marginTop: 11 }}>
          {[['tag', 'Price book'], ['bar-chart', 'Reports'], ['users', 'Customers']].map(([ic, l], i) => (
            <div key={i} style={{
              flex: 1, height: 46, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
              border: '1px solid ' + C.border, color: C.muted,
            }}>
              <Icon name={ic} size={13} strokeWidth={1.7}/>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 7.5, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{l}</span>
            </div>
          ))}
        </div>

        <SBLabel C={C} right="RECENTLY TOUCHED">Recent</SBLabel>
        {[
          { ic: 'receipt', l: 'Invoice #1041 — Tom Parker', s: 'Paid · $1,240', sc: SBC(isDark).money },
          { ic: 'file-text', l: 'Quote #318 — Dave Wilson', s: 'Sent · expires in 6 days', sc: C.faint },
          { ic: 'user', l: 'Aria Russell', s: '3 jobs · $1,260 lifetime', sc: C.faint },
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 0', borderTop: i > 0 ? '1px solid ' + C.hairline : 'none' }}>
            <span style={{ width: 24, height: 24, border: '1px solid ' + C.border, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.muted, flexShrink: 0 }}>
              <Icon name={r.ic} size={12} strokeWidth={1.7}/>
            </span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: 'block', fontSize: 11.5, fontWeight: 600, color: C.textHigh, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.l}</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 9.5, color: r.sc, marginTop: 2 }}>{r.s}</span>
            </span>
            <span style={{ color: C.ghost, fontSize: 13 }}>&#8250;</span>
          </div>
        ))}
      </div>
      <CommandBar theme={theme} active="ledger"/>
      <V2HomeIndicator isDark={isDark}/>
    </div>
  );
}
const MoneyScreen = LedgerScreen; // v1 Money tab folded into Ledger

// ⊕ COMPOSER — capture-first create (ComposerView.tsx, still Rams-style):
// voice bar → "or pick one" create rows → sharp CTA.
function ComposerScreen({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const C = V2C(isDark);
  const rows = [
    { icon: 'briefcase', t: 'New job', s: 'Book a customer and time', sel: true },
    { icon: 'file-text', t: 'New quote', s: 'Price up work to send' },
    { icon: 'receipt', t: 'New invoice', s: 'Bill a completed job' },
    { icon: 'credit-card', t: 'Log expense', s: 'Snap a receipt or cost' },
    { icon: 'camera', t: 'Photo diagnosis', s: 'Snap a photo, get a fix' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, color: C.text, fontFamily: 'var(--font-ui)', paddingTop: 52 }}>
      <V2StatusBar C={C}/>
      {/* dimmed Today behind the sheet */}
      <div style={{ padding: '10px 16px', opacity: 0.35 }}>
        <WerkdWordmark size={21} color={C.text} dotColor={C.brand}/>
        <div style={{ color: C.text2, fontSize: 10.5, marginTop: 2, fontWeight: 500 }}>Saturday, May 23</div>
      </div>
      <div style={{ position: 'absolute', inset: 0, background: C.dim }}/>
      {/* the sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: C.bg, borderTopLeftRadius: 22, borderTopRightRadius: 22,
        boxShadow: '0 -18px 48px rgba(0,0,0,0.28)',
        padding: '14px 16px 18px',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text3, fontWeight: 700 }}>Just say what happened</span>
          <span style={{ color: C.text2, fontSize: 14, fontWeight: 600 }}>&#10005;</span>
        </div>
        {/* voice bar */}
        <div style={{
          marginTop: 10, display: 'flex', alignItems: 'center', gap: 10, padding: 10,
          border: '1px solid ' + C.brand, borderRadius: 10, background: C.brandMuted,
        }}>
          <div style={{ width: 32, height: 32, flexShrink: 0, borderRadius: '50%', background: C.brand, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="mic" size={15} color={C.ink} strokeWidth={1.9}/>
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Hold to talk</div>
            <div style={{ fontSize: 9.5, fontWeight: 500, color: C.text2 }}>Hold to talk &#183; tap to type</div>
          </div>
        </div>
        {/* OR PICK ONE */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 2px' }}>
          <span style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.text3 }}>Or pick one</span>
          <span style={{ flex: 1, height: 1, background: C.border }}/>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            margin: '0 -16px', padding: '8px 16px',
            background: r.sel ? (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.035)') : 'transparent',
            borderBottom: i < rows.length - 1 ? '1px solid ' + C.border : 'none',
          }}>
            <Icon name={r.icon} size={16} color={r.sel ? C.brand : C.text2} strokeWidth={1.6} style={{ flexShrink: 0 }}/>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: 'block', fontSize: 12, fontWeight: 600, letterSpacing: '-0.01em' }}>{r.t}</span>
              <span style={{ display: 'block', fontSize: 10, color: C.text3 }}>{r.s}</span>
            </span>
            {r.sel
              ? <Icon name="check" size={13} color={C.brand} strokeWidth={2.4}/>
              : <Icon name="chevron-right" size={13} color={C.text3} strokeWidth={1.8}/>}
          </div>
        ))}
        {/* sharp CTA (radius-cta 4) */}
        <div style={{
          marginTop: 12, height: 38, borderRadius: 4, background: C.brand, color: C.ink,
          fontSize: 12, fontWeight: 650, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
        }}>
          Start New job <span style={{ fontWeight: 800 }}>&#8594;</span>
        </div>
      </div>
      <V2HomeIndicator isDark={isDark}/>
    </div>
  );
}
const AIHubScreen = ComposerScreen; // retired v1 hub — kept as an alias

// JOB WORKSURFACE — the record-surface recipe (JobWorksurface.tsx, still
// Rams-style): ⌄ top bar, one card per concern, sticky one-CTA footer.
function JobRecordScreen({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const C = V2C(isDark);
  const card = { border: '1px solid ' + C.strong, background: C.card, borderRadius: 12, padding: '9px 11px', marginTop: 9, boxShadow: isDark ? '0 1px 3px rgba(0,0,0,0.2)' : '0 1px 3px rgba(29,24,18,0.06)' };
  const label = { fontSize: 8, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text3, marginBottom: 2 };
  const chip = (ic) => (
    <span style={{ width: 24, height: 24, borderRadius: 7, border: '1px solid ' + C.border, background: C.control, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.text2, flexShrink: 0 }}>
      <Icon name={ic} size={12} strokeWidth={1.7}/>
    </span>
  );
  const link = (t) => <span style={{ fontSize: 10, fontWeight: 600, color: C.text2, whiteSpace: 'nowrap' }}>{t} <b style={{ color: C.brand, fontWeight: 700 }}>&#8594;</b></span>;
  const row = { display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0' };
  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, color: C.text, fontFamily: 'var(--font-ui)', display: 'flex', flexDirection: 'column', paddingTop: 52 }}>
      <V2StatusBar C={C}/>
      {/* top bar: ⌄ minimize + status + kind pill */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '6px 14px 9px', borderBottom: '1px solid ' + C.border }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <span style={{ width: 27, height: 27, borderRadius: '50%', border: '1px solid ' + C.strong, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.text2 }}>
            <Icon name="chevron-down" size={13} strokeWidth={1.9}/>
          </span>
          <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>Job &#183; scheduled</span>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', minHeight: 17, borderRadius: 999, padding: '0 7px',
          background: C.brandMuted, color: C.brand,
          fontSize: 8, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 850,
        }}>Schedule</span>
      </div>
      <div style={{ flex: 1, overflow: 'hidden', padding: '10px 14px 8px' }}>
        <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.02em' }}>Aria Russell</div>
        <div style={{ marginTop: 3, fontSize: 10, fontWeight: 500, color: C.text2 }}>2847 Birch Lane &#183; Smart thermostat swap</div>

        <div style={card}>
          <div style={label}>Schedule</div>
          <div style={row}>
            {chip('calendar')}
            <span style={{ flex: 1, minWidth: 0, fontSize: 11 }}>
              Sat, May 23 &#183; 10:30 AM
              <span style={{ display: 'block', fontSize: 9, color: C.text3, marginTop: 1 }}>Est. 1.5 hours</span>
            </span>
            {link('Reschedule')}
          </div>
        </div>

        <div style={card}>
          <div style={label}>Customer</div>
          <div style={row}>
            {chip('phone')}
            <span style={{ flex: 1, fontSize: 11 }}>(555) 014-2288</span>
            <span style={{ display: 'inline-flex', gap: 10, fontSize: 10, fontWeight: 600, color: C.text2 }}><span>Call</span><span>Text</span></span>
          </div>
          <div style={{ ...row, borderTop: '1px solid ' + C.border }}>
            {chip('map-pin')}
            <span style={{ flex: 1, fontSize: 11 }}>2847 Birch Lane</span>
            {link('Route')}
          </div>
        </div>

        <div style={card}>
          <div style={label}>Job</div>
          <div style={row}>
            {chip('clock')}
            <span style={{ flex: 1, fontSize: 11, lineHeight: 1.4 }}>Remove old thermostat, install smart, verify zone wiring.</span>
            <span style={{ fontWeight: 700, fontSize: 11, color: C.success, fontVariantNumeric: 'tabular-nums' }}>$420</span>
          </div>
        </div>

        <div style={card}>
          <div style={label}>Materials</div>
          <div style={row}>
            {chip('package')}
            <span style={{ flex: 1, fontSize: 11 }}>
              Smart thermostat
              <span style={{ display: 'block', fontSize: 9, color: C.success, fontWeight: 600, marginTop: 1 }}>$185</span>
            </span>
          </div>
        </div>

        <div style={card}>
          <div style={label}>Photos</div>
          <div style={row}>
            {chip('camera')}
            <span style={{ flex: 1, fontSize: 11 }}>2 photos added</span>
            {link('Manage')}
          </div>
        </div>
      </div>
      {/* sticky footer — ONE primary CTA + Adjust; the rest are text links */}
      <div style={{ borderTop: '1px solid ' + C.border, background: C.bg, padding: '9px 14px 22px' }}>
        <div style={{ display: 'flex', gap: 7 }}>
          <span style={{
            flex: 1, minHeight: 36, borderRadius: 4, background: C.brand, color: C.ink,
            fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
          }}>Start job <b style={{ fontWeight: 800 }}>&#8594;</b></span>
          <span style={{
            minHeight: 36, padding: '0 14px', borderRadius: 4, border: '1px solid ' + C.strong,
            color: C.text, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>Adjust</span>
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 9, justifyContent: 'center', fontSize: 10.5, fontWeight: 600 }}>
          <span style={{ color: C.text2 }}>Reschedule</span>
          <span style={{ color: C.danger }}>Cancel job</span>
        </div>
      </div>
      <V2HomeIndicator isDark={isDark}/>
    </div>
  );
}

// Customer record — CustomerWorksurface.tsx (still Rams-style): identity +
// contact + history cards, "Full profile →" CTA. (The legacy fuller detail
// panel this used to recreate has been superseded by this leaner worksurface.)
function CustomersScreen({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const C = isDark ? {
    bg: '#181714', surface: '#22201c', surface2: '#302c26',
    text: '#f5f5f7', text2: '#a8a8b0', text3: '#8a8a92',
    hairline: '#38322b', hairlineStrong: '#453e34',
    brand: '#ff5c00', onBrand: '#0c0d0f', success: '#3cc26d', warn: '#e8a344',
    successMuted: 'rgba(60,194,109,0.14)',
    brandMuted: 'rgba(255,92,0,0.14)',
  } : {
    bg: '#f8f4ed', surface: '#fffdfa', surface2: '#f0ece6',
    text: '#171717', text2: '#6f7177', text3: '#9a9ca3',
    hairline: '#e3d8c9', hairlineStrong: '#d3c6b3',
    brand: '#c4502a', onBrand: '#f6f2ea', success: '#16a34a', warn: '#d97706',
    successMuted: 'rgba(22,163,74,0.10)',
    brandMuted: 'rgba(196,80,42,0.10)',
  };

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.bg, paddingTop: 56, color: C.text, fontFamily: 'var(--font-ui)' }}>
      <div style={{
        position: 'absolute', top: 14, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 600, color: C.text,
      }}>
        <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
        <div style={{ display: 'flex', gap: 5 }}>
          <Icon name="signal" size={15} color={C.text} strokeWidth={2.5}/>
          <Icon name="wifi" size={15} color={C.text} strokeWidth={2.5}/>
          <Icon name="battery" size={20} color={C.text} strokeWidth={2.5}/>
        </div>
      </div>

      <div style={{ padding: '8px 14px 6px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button style={{ display: 'flex', alignItems: 'center', gap: 4, padding: 0, background: 'transparent', border: 'none', cursor: 'pointer', color: C.text2, fontSize: 14, fontWeight: 600 }}>
          <Icon name="chevron-left" size={16} color={C.text2} strokeWidth={2.25}/>
          Close
        </button>
        <span style={{
          display: 'inline-flex', alignItems: 'center', minHeight: 17, borderRadius: 999, padding: '0 8px',
          background: C.brandMuted, color: C.brand, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 800,
        }}>Customer</span>
      </div>

      <div style={{ padding: '4px 18px 0' }}>
        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', color: C.text }}>Aria Russell</div>
        <div style={{ fontSize: 11.5, color: C.text3, marginTop: 3 }}>2847 Birch Ln, Lakewood</div>
      </div>

      <div style={{ padding: '14px 14px 0' }}>
        {/* Contact card */}
        <div style={{ border: '1px solid ' + C.hairline, borderRadius: 12, background: C.surface, marginBottom: 10 }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text3, padding: '9px 12px 0' }}>Contact</div>
          {[
            { icon: 'phone', value: '(312) 555-0142', action: 'Call' },
            { icon: 'mail', value: 'aria.russell@email.com', action: 'Email' },
            { icon: 'map-pin', value: '2847 Birch Ln, Lakewood', action: 'Route', accent: true },
          ].map((r, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',
              borderTop: i > 0 ? '1px solid ' + C.hairline : 'none',
            }}>
              <Icon name={r.icon} size={13} color={C.text3} strokeWidth={1.8}/>
              <span style={{ flex: 1, minWidth: 0, fontSize: 12.5, color: r.accent ? C.brand : C.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.value}</span>
              <span style={{ fontSize: 11, fontWeight: 700, color: C.brand, flexShrink: 0 }}>{r.action} &#8594;</span>
            </div>
          ))}
        </div>

        {/* History card */}
        <div style={{ border: '1px solid ' + C.hairline, borderRadius: 12, background: C.surface, marginBottom: 10, padding: '9px 12px' }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text3, marginBottom: 6 }}>History</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="clock" size={13} color={C.text3} strokeWidth={1.8}/>
            <span style={{ fontSize: 12.5, color: C.text }}>
              Last job Mar 8
              <span style={{ display: 'block', fontSize: 12, marginTop: 2 }}><b style={{ color: C.success, fontWeight: 700 }}>$4,820</b> lifetime</span>
            </span>
          </div>
        </div>

        {/* Notes card */}
        <div style={{ border: '1px solid ' + C.hairline, borderRadius: 12, background: C.surface, padding: '9px 12px' }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.text3, marginBottom: 6 }}>Notes</div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <Icon name="file-text" size={13} color={C.text3} strokeWidth={1.8} style={{ marginTop: 2 }}/>
            <span style={{ fontSize: 12, color: C.text2, lineHeight: 1.5 }}>Gate code 4417 · dog in yard. Prefers text over calls.</span>
          </div>
        </div>
      </div>

      {/* Full profile CTA — footer, mirrors RecordWorksurface's single-CTA recipe */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 26, padding: '0 14px' }}>
        <div style={{
          height: 38, borderRadius: 4, background: C.brand, color: C.onBrand,
          fontSize: 12.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
        }}>Full profile <span style={{ fontWeight: 800 }}>&#8594;</span></div>
      </div>

      <div style={{
        position: 'absolute', bottom: 5, left: '50%', transform: 'translateX(-50%)',
        width: 110, height: 4, borderRadius: 2,
        background: isDark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)',
      }}/>
    </div>
  );
}

Object.assign(window, {
  Icon, WerkdMark, WerkdWordmark, PhoneFrame, TodayScreen, CommandBar,
  ComposerScreen, AIHubScreen, DeskScreen, LedgerScreen, MoneyScreen,
  JobRecordScreen, CustomersScreen, EKG_PATH,
});