// Employee Dashboard — field-team home.
// Persona: Jordan Patel, site superintendent on Harborview Blk B.
// Lives in Contro alongside the owner's dashboard but is shaped for
// day-of, on-site work: clock in, submit report, request vendor payment,
// mark crew attendance, share photos. Warm palette (paper + forest) to
// distinguish from the cool executive console.

const E = {
  bg:      '#f6f2ea',
  paper:   '#ffffff',
  ink:     '#181613',
  ink2:    '#4a433a',
  ink3:    '#8a7f70',
  ink4:    '#c9bfac',
  line:    '#e5ddcc',
  line2:   '#efe9db',
  forest:  '#2f5a42',
  forest2: '#438968',
  forestSoft: '#e5efe8',
  brick:   '#9a3b24',
  brickSoft: '#f7e4dc',
  gold:    '#b17a11',
  goldSoft:'#f8ecce',
  sky:     '#2c5d9a',
  skySoft: '#e3edf8',
  sans:  '"Inter Tight", -apple-system, sans-serif',
  mono:  '"JetBrains Mono", ui-monospace, monospace',
  serif: '"Instrument Serif", Georgia, serif',
};

function EmployeeDashboardPage() {
  return (
    <div style={{
      width: '100%', height: '100%', background: E.bg, color: E.ink,
      fontFamily: E.sans, fontSize: 13, overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '228px 1fr 300px',
    }}>
      <ESidebar />
      <EMain />
      <ERightRail />
      <style>{`
        @keyframes eFadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes ePulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.15); opacity: 0.55 } }
        @keyframes eTick { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
        @keyframes eProgress { from { stroke-dashoffset: 220 } to { stroke-dashoffset: 60 } }
        @keyframes eShimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
        @keyframes eBar { from { width: 0 } }
      `}</style>
    </div>
  );
}

// ── Sidebar ────────────────────────────────────────────────
function ESidebar() {
  const nav = [
    { group: null, rows: [['Today','◎', true],['My tasks','▤'],['Time & pay','◷'],['Inbox','✉','3']] },
    { group: 'Do', rows: [['Daily reports','▭'],['Vendor requests','◈','1'],['Photos','◉'],['Safety','◐']] },
    { group: 'Crew', rows: [['Attendance','⚇'],['Timesheets','▦']] },
  ];
  return (
    <div style={{ background: E.paper, borderRight: `1px solid ${E.line}`, display: 'flex', flexDirection: 'column' }}>
      {/* Personal header */}
      <div style={{ padding: '16px 14px 14px', borderBottom: `1px solid ${E.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: 'linear-gradient(135deg, #c89a6a, #8a5a34)',
            color: '#fff', display: 'grid', placeItems: 'center',
            fontFamily: E.serif, fontSize: 16, fontStyle: 'italic', fontWeight: 600,
            position: 'relative',
          }}>
            JP
            <div style={{ position: 'absolute', bottom: 0, right: 0, width: 10, height: 10, borderRadius: '50%', background: E.forest2, border: `2px solid ${E.paper}` }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Jordan Patel</div>
            <div style={{ fontSize: 10, color: E.ink3, fontFamily: E.mono, letterSpacing: '0.04em' }}>Site super  ·  L2</div>
          </div>
        </div>
        <div style={{ marginTop: 10, padding: '8px 10px', background: E.forestSoft, borderRadius: 6, fontSize: 11 }}>
          <div style={{ fontSize: 9, letterSpacing: '0.1em', color: E.forest, fontFamily: E.mono, fontWeight: 500 }}>ASSIGNED TODAY</div>
          <div style={{ fontWeight: 500, marginTop: 1, color: E.ink }}>Harborview Blk B</div>
          <div style={{ fontSize: 10, color: E.ink2 }}>Ridgeline Development</div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '10px 8px' }}>
        {nav.map((s, si) => (
          <div key={si} style={{ marginBottom: 4 }}>
            {s.group && <div style={{ fontSize: 10, letterSpacing: '0.1em', color: E.ink3, padding: '12px 10px 4px', fontFamily: E.mono, textTransform: 'uppercase' }}>{s.group}</div>}
            {s.rows.map(([n, icn, badge], i) => {
              const on = s.rows[i][2] === true;
              return (
                <div key={n} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px',
                  borderRadius: 5, fontSize: 13, margin: '1px 0',
                  background: on ? E.forestSoft : 'transparent',
                  color: on ? E.forest : E.ink2, fontWeight: on ? 500 : 400,
                }}>
                  <span style={{ width: 16, textAlign: 'center', color: on ? E.forest2 : E.ink3 }}>{icn}</span>
                  <span style={{ flex: 1 }}>{n}</span>
                  {typeof badge === 'string' && (
                    <span style={{ fontSize: 10, padding: '1px 6px', borderRadius: 8, background: E.brick, color: '#fff', fontFamily: E.mono }}>{badge}</span>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <div style={{ padding: 14, borderTop: `1px solid ${E.line}` }}>
        <div style={{ padding: '10px 12px', background: E.ink, color: '#fff', borderRadius: 8, fontSize: 11, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: E.forest2, animation: 'ePulse 1.6s ease-in-out infinite' }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: E.mono, fontSize: 9, letterSpacing: '0.1em', color: '#a8a297' }}>CLOCKED IN  ·  07:04</div>
            <div style={{ fontSize: 12, fontWeight: 500 }}>2h 11m  on site</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Main column ────────────────────────────────────────────
function EMain() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
      <ETopBar />
      <div style={{ padding: '20px 28px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <EHero />
        <EQuickActions />
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 18 }}>
          <EMyTasks />
          <ECrewAttendance />
        </div>
        <ERecentSubmissions />
      </div>
    </div>
  );
}

function ETopBar() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 16, padding: '14px 28px',
      borderBottom: `1px solid ${E.line}`, background: E.paper,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.1em', color: E.ink3, fontFamily: E.mono, fontWeight: 500 }}>TUE  ·  APR 21  ·  07:04 – 15:00 shift</div>
        <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 22, letterSpacing: '-0.01em', marginTop: 1 }}>
          Good morning, <span style={{ color: E.forest }}>Jordan.</span>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: E.skySoft, borderRadius: 6, fontSize: 12, color: E.sky }}>
        <span style={{ fontSize: 15 }}>☀</span>
        <span><b>58°</b> clear</span>
        <span style={{ color: E.ink3, fontSize: 11 }}>· rain 14:00</span>
      </div>
      <div style={{ width: 32, height: 32, display: 'grid', placeItems: 'center', background: E.line2, borderRadius: 6, fontSize: 14, position: 'relative' }}>
        ✉
        <span style={{ position: 'absolute', top: -3, right: -3, background: E.brick, color: '#fff', borderRadius: 9, fontSize: 9, padding: '1px 5px', fontFamily: E.mono, fontWeight: 600 }}>3</span>
      </div>
    </div>
  );
}

// ── Hero clock-in card ─────────────────────────────────────
function EHero() {
  const R = 40; const C = 2 * Math.PI * R;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
      padding: '18px 22px', background: E.ink, color: '#fff',
      borderRadius: 14, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', inset: 0, background: `
        radial-gradient(400px 200px at 85% 30%, rgba(67,137,104,0.35), transparent 70%),
        radial-gradient(300px 150px at 20% 120%, rgba(154,59,36,0.18), transparent 70%)
      `, pointerEvents: 'none' }} />
      <div style={{ position: 'relative' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.14em', color: '#a8a297', fontFamily: E.mono, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: E.forest2, animation: 'ePulse 1.6s ease-in-out infinite' }} />
          ON THE CLOCK
        </div>
        <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 42, letterSpacing: '-0.02em', lineHeight: 1.05, marginTop: 6 }}>
          2h <span style={{ color: '#ddd4be' }}>11m</span>
        </div>
        <div style={{ fontSize: 12, color: '#b8b1a2', marginTop: 4 }}>
          Clocked in at 07:04 · geo-checked · 14 crew on site
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <EHeroPill label="Shift" v="07:00 – 15:00" />
          <EHeroPill label="Break used" v="0 / 30m" />
          <EHeroPill label="This week" v="18h 42m" />
          <EHeroPill label="OT" v="0h" dim />
        </div>
      </div>

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <svg width="110" height="110" viewBox="0 0 110 110">
          <circle cx="55" cy="55" r={R} fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="6" />
          <circle cx="55" cy="55" r={R} fill="none" stroke={E.forest2} strokeWidth="6" strokeLinecap="round"
            strokeDasharray={C} strokeDashoffset={C - C * 0.28}
            transform="rotate(-90 55 55)"
            style={{ filter: 'drop-shadow(0 0 8px rgba(67,137,104,0.6))' }} />
          <text x="55" y="52" fill="#fff" textAnchor="middle" fontSize="18" fontWeight="600" letterSpacing="-0.02em">28%</text>
          <text x="55" y="68" fill="#a8a297" textAnchor="middle" fontSize="8" fontFamily="monospace" letterSpacing="0.08em">OF 8h</text>
        </svg>
        <div style={{
          padding: '10px 20px', background: E.brick, color: '#fff',
          borderRadius: 8, fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em',
          display: 'flex', alignItems: 'center', gap: 8,
          boxShadow: '0 4px 14px rgba(154,59,36,0.4)',
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 2, background: '#fff' }} />
          Clock out
        </div>
      </div>
    </div>
  );
}
function EHeroPill({ label, v, dim }) {
  return (
    <div style={{ padding: '6px 10px', border: `1px solid rgba(255,255,255,0.12)`, borderRadius: 6, opacity: dim ? 0.55 : 1 }}>
      <div style={{ fontSize: 9, letterSpacing: '0.1em', color: '#a8a297', fontFamily: E.mono }}>{label.toUpperCase()}</div>
      <div style={{ fontSize: 12, fontWeight: 500, marginTop: 1 }}>{v}</div>
    </div>
  );
}

// ── Quick actions row ──────────────────────────────────────
function EQuickActions() {
  const actions = [
    { t: 'Submit daily report',      sub: 'fill + 3 photos',    icn: '▭', col: E.forest,  bg: E.forestSoft, primary: true },
    { t: 'Request vendor payment',    sub: 'attach invoice',     icn: '◈', col: E.gold,    bg: E.goldSoft },
    { t: 'Log a safety issue',        sub: 'visible to PM',      icn: '◐', col: E.brick,   bg: E.brickSoft },
    { t: 'Upload site photos',        sub: '0 today',            icn: '◉', col: E.sky,     bg: E.skySoft },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
      {actions.map((a, i) => (
        <div key={i} style={{
          padding: '14px 14px 14px 16px',
          background: a.primary ? a.col : E.paper,
          color: a.primary ? '#fff' : E.ink,
          border: a.primary ? 'none' : `1px solid ${E.line}`,
          borderRadius: 10, position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 34, height: 34, borderRadius: 8,
            background: a.primary ? 'rgba(255,255,255,0.15)' : a.bg,
            color: a.primary ? '#fff' : a.col,
            display: 'grid', placeItems: 'center', fontSize: 16, flexShrink: 0,
          }}>{a.icn}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, letterSpacing: '-0.01em' }}>{a.t}</div>
            <div style={{ fontSize: 11, color: a.primary ? 'rgba(255,255,255,0.7)' : E.ink3, marginTop: 1 }}>{a.sub}</div>
          </div>
          <span style={{ fontSize: 14, color: a.primary ? 'rgba(255,255,255,0.8)' : E.ink3 }}>›</span>
        </div>
      ))}
    </div>
  );
}

// ── My tasks ───────────────────────────────────────────────
function EMyTasks() {
  const tasks = [
    { t: 'Confirm rebar #4 delivery · PO-0338', sub: 'Brannigan · 09:00',        due: '9:00 am', state: 'done' },
    { t: 'Daily report · framing progress',     sub: 'template ready',           due: 'by 11:00', state: 'now' },
    { t: 'Walk-through w/ inspector',            sub: 'Suffolk County',           due: '1:00 pm', state: 'next' },
    { t: 'Photos: Level 2 east wall',            sub: 'for owner review',         due: '2:30 pm', state: 'todo' },
    { t: 'Submit timesheet, crew of 14',          sub: 'weekly · due Fri',         due: 'Fri',      state: 'later' },
  ];
  const stateStyle = {
    done:  { label: 'done',  bg: E.forestSoft, fg: E.forest },
    now:   { label: 'now',   bg: E.brick,      fg: '#fff', glow: true },
    next:  { label: 'next',  bg: E.goldSoft,   fg: E.gold },
    todo:  { label: 'to do', bg: E.line2,      fg: E.ink2 },
    later: { label: 'later', bg: E.line2,      fg: E.ink3 },
  };
  return (
    <div style={{ background: E.paper, border: `1px solid ${E.line}`, borderRadius: 12, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 6 }}>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>Today</div>
        <div style={{ fontSize: 11, color: E.ink3 }}>5 tasks  ·  1 done</div>
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 10, fontFamily: E.mono, color: E.ink3 }}>+ add</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {tasks.map((t, i) => {
          const s = stateStyle[t.state];
          return (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '18px 1fr auto auto', gap: 10,
              padding: '10px 4px', borderBottom: i < tasks.length - 1 ? `1px solid ${E.line2}` : 'none',
              alignItems: 'center', opacity: t.state === 'done' ? 0.55 : 1,
            }}>
              <div style={{
                width: 16, height: 16, borderRadius: 4,
                border: `1.5px solid ${t.state === 'done' ? E.forest2 : E.ink4}`,
                background: t.state === 'done' ? E.forest2 : 'transparent',
                display: 'grid', placeItems: 'center', color: '#fff', fontSize: 11,
              }}>{t.state === 'done' ? '✓' : ''}</div>
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 500, textDecoration: t.state === 'done' ? 'line-through' : 'none' }}>{t.t}</div>
                <div style={{ fontSize: 11, color: E.ink3, marginTop: 1 }}>{t.sub}</div>
              </div>
              <span style={{ fontSize: 11, color: E.ink2, fontFamily: E.mono }}>{t.due}</span>
              <span style={{
                padding: '2px 8px', fontSize: 10, fontWeight: 500, borderRadius: 10,
                background: s.bg, color: s.fg,
                boxShadow: s.glow ? `0 0 0 3px ${E.brickSoft}` : 'none',
                textTransform: 'uppercase', letterSpacing: '0.04em',
              }}>{s.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Crew attendance ────────────────────────────────────────
function ECrewAttendance() {
  const rows = [
    ['Luis Mondragon',  'Framing lead',   'in',  '06:58', E.forest2],
    ['Kai Tanaka',       'Framer',         'in',  '07:01', E.forest2],
    ['Rosa Delacroix',   'Framer',         'in',  '07:02', E.forest2],
    ['Marcus Chu',       'Carpenter',      'in',  '07:04', E.forest2],
    ['Sven Olafsson',    'Laborer',        'late','07:22', E.gold],
    ['Priya Shah',       'Framer',         'out', '—',     E.brick],
    ['Ade Okafor',       'Carpenter',      'in',  '07:00', E.forest2],
  ];
  const summary = [
    ['14 / 14', 'on site', E.forest],
    ['1',       'late',    E.gold],
    ['1',       'sick',    E.brick],
  ];
  return (
    <div style={{ background: E.paper, border: `1px solid ${E.line}`, borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>Your crew</div>
        <div style={{ fontSize: 11, color: E.ink3 }}>checked in by geo</div>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 10, color: E.forest, fontFamily: E.mono }}>LIVE</span>
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
        {summary.map((s, i) => (
          <div key={i} style={{ flex: 1, padding: '8px 10px', borderLeft: `3px solid ${s[2]}`, background: E.line2, borderRadius: '0 6px 6px 0' }}>
            <div style={{ fontFamily: E.serif, fontSize: 20, fontStyle: 'italic', letterSpacing: '-0.02em', lineHeight: 1 }}>{s[0]}</div>
            <div style={{ fontSize: 10, color: E.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', fontFamily: E.mono }}>{s[1]}</div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1, overflow: 'hidden' }}>
        {rows.slice(0, 6).map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '22px 1fr auto auto', gap: 10, alignItems: 'center', padding: '5px 0', fontSize: 11, borderBottom: i < 5 ? `1px solid ${E.line2}` : 'none' }}>
            <div style={{ width: 20, height: 20, borderRadius: '50%', background: E.line2, color: E.ink2, fontSize: 9, fontWeight: 600, display: 'grid', placeItems: 'center' }}>
              {r[0].split(' ').map(w => w[0]).join('')}
            </div>
            <div>
              <div style={{ fontWeight: 500 }}>{r[0]}</div>
              <div style={{ fontSize: 10, color: E.ink3 }}>{r[1]}</div>
            </div>
            <span style={{ fontFamily: E.mono, fontSize: 10, color: E.ink3 }}>{r[3]}</span>
            <span style={{ padding: '1px 7px', fontSize: 9, borderRadius: 8, background: `${r[4]}18`, color: r[4], textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{r[2]}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 6, fontSize: 10, color: E.ink3, fontFamily: E.mono }}>+ 7 more · <span style={{ color: E.forest }}>see full roster →</span></div>
    </div>
  );
}

// ── Recent submissions ────────────────────────────────────
function ERecentSubmissions() {
  const rows = [
    { type: 'Daily report', ref: 'DR-218', note: 'Framing L2 · 62% · 3 photos', time: 'Mon 16:42', state: 'approved', col: E.forest },
    { type: 'Vendor payment', ref: 'VR-44', note: 'Brannigan Concrete · $184,220', time: 'Mon 10:14', state: 'routed to PM', col: E.gold },
    { type: 'Safety flag',  ref: 'SF-09', note: 'Missing PPE · resolved on spot',  time: 'Fri 14:02', state: 'closed', col: E.ink3 },
    { type: 'Vendor payment', ref: 'VR-43', note: 'Home Depot · $878.40 · receipt', time: 'Fri 11:36', state: 'paid', col: E.forest },
    { type: 'Daily report', ref: 'DR-217', note: 'Slab B pour · 4 photos',          time: 'Thu 16:51', state: 'approved', col: E.forest },
  ];
  return (
    <div style={{ background: E.paper, border: `1px solid ${E.line}`, borderRadius: 12, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>Recent submissions</div>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 10, fontFamily: E.mono, color: E.ink3 }}>LAST 5 DAYS</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '110px 70px 1fr 110px 120px', gap: 12, fontSize: 10, color: E.ink3, fontFamily: E.mono, letterSpacing: '0.06em', textTransform: 'uppercase', paddingBottom: 6, borderBottom: `1px solid ${E.line}` }}>
        <span>Type</span><span>Ref</span><span>Detail</span><span>When</span><span>Status</span>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 70px 1fr 110px 120px', gap: 12, fontSize: 12, padding: '9px 0', borderBottom: i < rows.length - 1 ? `1px solid ${E.line2}` : 'none', alignItems: 'center' }}>
          <span style={{ color: E.ink2 }}>{r.type}</span>
          <span style={{ fontFamily: E.mono, color: E.ink3, fontSize: 11 }}>{r.ref}</span>
          <span>{r.note}</span>
          <span style={{ color: E.ink3, fontSize: 11 }}>{r.time}</span>
          <span style={{
            padding: '2px 9px', borderRadius: 10, fontSize: 10, fontWeight: 600,
            background: `${r.col}18`, color: r.col, letterSpacing: '0.04em', textTransform: 'uppercase',
            justifySelf: 'start',
          }}>{r.state}</span>
        </div>
      ))}
    </div>
  );
}

// ── Right rail ─────────────────────────────────────────────
function ERightRail() {
  return (
    <div style={{ background: E.paper, borderLeft: `1px solid ${E.line}`, display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
      <ERailInbox />
      <ERailPayPeriod />
      <ERailWeek />
      <ERailHelp />
    </div>
  );
}

function ERailInbox() {
  const msgs = [
    { from: 'Marcus Reyes',    role: 'PM',       text: "Need the Level 2 photos before the owner call at 3.", time: '08:42', unread: true },
    { from: 'Contro',          role: 'assistant', text: "Your daily report template is pre-filled from yesterday — just confirm counts.", time: '07:11', unread: true },
    { from: 'Ana Liu',         role: 'ACCT',      text: "VR-44 looks clean, routing to Marcus for sign-off.", time: 'Mon', unread: false },
  ];
  return (
    <div style={{ padding: '18px 18px 14px', borderBottom: `1px solid ${E.line}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>From HQ</div>
        <span style={{ background: E.brick, color: '#fff', fontSize: 9, padding: '1px 6px', borderRadius: 8, fontFamily: E.mono, fontWeight: 600 }}>3</span>
      </div>
      {msgs.map((m, i) => (
        <div key={i} style={{ padding: '9px 0', borderBottom: i < msgs.length - 1 ? `1px solid ${E.line2}` : 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11 }}>
            <span style={{ fontWeight: 600, color: E.ink }}>{m.from}</span>
            <span style={{ fontFamily: E.mono, fontSize: 9, letterSpacing: '0.06em', color: E.ink3, padding: '1px 5px', background: E.line2, borderRadius: 3 }}>{m.role}</span>
            {m.unread && <span style={{ width: 6, height: 6, borderRadius: '50%', background: E.brick }} />}
            <span style={{ flex: 1 }} />
            <span style={{ fontSize: 10, color: E.ink3, fontFamily: E.mono }}>{m.time}</span>
          </div>
          <div style={{ fontSize: 11.5, color: m.unread ? E.ink : E.ink2, marginTop: 4, lineHeight: 1.45 }}>{m.text}</div>
        </div>
      ))}
    </div>
  );
}

function ERailPayPeriod() {
  const bars = [6.5, 8.0, 8.2, 7.8, 2.2, 0, 0];
  const days = ['M','T','W','T','F','S','S'];
  const total = bars.reduce((a, b) => a + b, 0).toFixed(1);
  return (
    <div style={{ padding: '16px 18px 16px', borderBottom: `1px solid ${E.line}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Pay period</div>
        <div style={{ fontSize: 10, color: E.ink3, fontFamily: E.mono }}>wk 17  ·  Apr 14–20</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontFamily: E.serif, fontSize: 30, fontStyle: 'italic', letterSpacing: '-0.02em' }}>{total}h</div>
        <div style={{ fontSize: 11, color: E.ink3 }}>est. <span style={{ color: E.forest, fontWeight: 500 }}>$1,462</span></div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 40, marginTop: 10 }}>
        {bars.map((b, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
            <div style={{
              width: '100%', height: `${(b / 10) * 100}%`,
              background: i === 4 ? E.forest2 : (b === 0 ? E.line2 : E.ink),
              borderRadius: 2, minHeight: b > 0 ? 2 : 1,
            }} />
            <span style={{ fontSize: 9, color: i === 4 ? E.forest : E.ink3, fontFamily: E.mono, fontWeight: i === 4 ? 600 : 400 }}>{days[i]}</span>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 10, color: E.ink3, marginTop: 8, fontFamily: E.mono, letterSpacing: '0.02em' }}>Next deposit  ·  Fri Apr 25</div>
    </div>
  );
}

function ERailWeek() {
  const items = [
    ['Wed', 'Concrete pour · slab B', E.forest],
    ['Thu', 'Inspection · framing', E.gold],
    ['Thu', 'Owner walkthrough 15:00', E.sky],
    ['Fri', 'Submit timesheet', E.ink2],
  ];
  return (
    <div style={{ padding: '16px 18px 16px', borderBottom: `1px solid ${E.line}` }}>
      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Coming up</div>
      {items.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '34px 1fr', gap: 8, padding: '6px 0', fontSize: 11, borderBottom: i < items.length - 1 ? `1px solid ${E.line2}` : 'none' }}>
          <span style={{ fontFamily: E.mono, fontSize: 10, color: E.ink3, letterSpacing: '0.06em' }}>{r[0]}</span>
          <span style={{ color: E.ink, borderLeft: `2px solid ${r[2]}`, paddingLeft: 8 }}>{r[1]}</span>
        </div>
      ))}
    </div>
  );
}

function ERailHelp() {
  return (
    <div style={{ padding: 18, marginTop: 'auto', background: E.forestSoft }}>
      <div style={{ fontSize: 10, letterSpacing: '0.1em', color: E.forest, fontFamily: E.mono, fontWeight: 600 }}>CONTRO  ·  ASSISTANT</div>
      <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 16, lineHeight: 1.3, marginTop: 4, color: E.ink }}>
        "Want me to draft your daily report from yesterday's template?"
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
        {['Yes, draft','Not now'].map((a, i) => (
          <span key={a} style={{
            padding: '5px 11px', fontSize: 11, borderRadius: 5, fontWeight: 500,
            background: i === 0 ? E.forest : 'transparent',
            color: i === 0 ? '#fff' : E.forest,
            border: i === 0 ? 'none' : `1px solid ${E.forest2}`,
          }}>{a}</span>
        ))}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// Alt view — vendor payment request composer (modal moment)
// Shows the approval flow in a focused way.
// ═════════════════════════════════════════════════════════════
function EmployeeVendorRequestPage() {
  return (
    <div style={{ width: '100%', height: '100%', background: E.bg, position: 'relative', overflow: 'hidden', fontFamily: E.sans, color: E.ink, fontSize: 13 }}>
      {/* blurred dashboard behind */}
      <div style={{ position: 'absolute', inset: 0, filter: 'blur(3px) saturate(0.85)', opacity: 0.55 }}>
        <EmployeeDashboardPage />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(24,22,19,0.35)' }} />

      {/* modal */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 820, background: E.paper, borderRadius: 16, overflow: 'hidden',
        boxShadow: '0 40px 100px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04)',
        display: 'grid', gridTemplateColumns: '1fr 300px',
      }}>
        {/* form */}
        <div style={{ padding: '22px 26px 22px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.12em', color: E.gold, fontFamily: E.mono, fontWeight: 600 }}>NEW  ·  VENDOR PAYMENT REQUEST</div>
            <div style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 28, letterSpacing: '-0.02em', marginTop: 4 }}>
              Who are you paying?
            </div>
          </div>

          <EField label="Vendor">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', border: `1px solid ${E.forest2}`, borderRadius: 8, background: E.forestSoft }}>
              <div style={{ width: 26, height: 26, borderRadius: 6, background: E.forest, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: E.mono, fontSize: 12, fontWeight: 700 }}>BC</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 500 }}>Brannigan Concrete</div>
                <div style={{ fontSize: 11, color: E.ink3 }}>ACH · routing ending 4211  ·  W-9 on file</div>
              </div>
              <span style={{ padding: '2px 8px', background: E.forest, color: '#fff', fontSize: 9, borderRadius: 8, fontFamily: E.mono, letterSpacing: '0.06em' }}>VERIFIED</span>
            </div>
          </EField>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <EField label="Amount">
              <div style={{ padding: '10px 12px', border: `1px solid ${E.line}`, borderRadius: 8, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ color: E.ink3, fontSize: 16 }}>$</span>
                <span style={{ fontFamily: E.serif, fontStyle: 'italic', fontSize: 22, letterSpacing: '-0.02em', flex: 1 }}>184,220<span style={{ color: E.ink3 }}>.00</span></span>
                <span style={{ fontSize: 10, color: E.ink3, fontFamily: E.mono }}>USD</span>
              </div>
            </EField>
            <EField label="Match to PO">
              <div style={{ padding: '10px 12px', border: `1px solid ${E.line}`, borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: E.mono, color: E.sky, fontWeight: 500 }}>PO-0338</span>
                <span style={{ fontSize: 11, color: E.ink3 }}>slab B rebar + concrete</span>
                <span style={{ flex: 1 }} />
                <span style={{ padding: '2px 7px', fontSize: 9, background: E.goldSoft, color: E.gold, borderRadius: 8, fontFamily: E.mono, fontWeight: 600 }}>+8.2%</span>
              </div>
            </EField>
          </div>

          <EField label="Reason for variance">
            <div style={{ padding: '10px 12px', border: `1px solid ${E.line}`, borderRadius: 8, fontSize: 12, color: E.ink2, lineHeight: 1.5 }}>
              Rebar price increased mid-pour. Brannigan adjusted #4 from $0.82/lb to $0.89/lb. Slab B required an additional 1,240 lb vs PO.
              <span style={{ display: 'inline-block', width: 2, height: 14, background: E.gold, marginLeft: 2, verticalAlign: 'text-bottom', animation: 'eTick 1s steps(2) infinite' }} />
            </div>
          </EField>

          <EField label="Attachments">
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                ['INV-1142.pdf', '2 pages · $184,220'],
                ['ticket-0419.jpg', 'delivery · 240cy'],
                ['ticket-0420.jpg', 'delivery · +1240lb'],
              ].map((a, i) => (
                <div key={i} style={{ flex: 1, padding: '9px 10px', border: `1px dashed ${E.line}`, borderRadius: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
                  <div style={{ width: 28, height: 36, background: E.line2, borderRadius: 3, display: 'grid', placeItems: 'center', fontFamily: E.mono, fontSize: 9, color: E.ink3 }}>PDF</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a[0]}</div>
                    <div style={{ fontSize: 10, color: E.ink3 }}>{a[1]}</div>
                  </div>
                </div>
              ))}
            </div>
          </EField>

          <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
            <span style={{ flex: 1 }} />
            <span style={{ padding: '9px 16px', fontSize: 12, border: `1px solid ${E.line}`, borderRadius: 8, color: E.ink2 }}>Save as draft</span>
            <span style={{ padding: '9px 18px', fontSize: 12, fontWeight: 600, background: E.forest, color: '#fff', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              Submit for approval <span>→</span>
            </span>
          </div>
        </div>

        {/* side rail */}
        <div style={{ background: E.ink, color: '#fff', padding: '22px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ fontSize: 10, letterSpacing: '0.12em', color: '#a8a297', fontFamily: E.mono, fontWeight: 600 }}>APPROVAL ROUTE</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { n: 'Jordan Patel', r: 'you', note: 'submitting now', state: 'active' },
              { n: 'Marcus Reyes', r: 'Project manager', note: '$10k–$250k tier', state: 'next' },
              { n: 'Ana Liu',      r: 'Accounting',     note: 'payment run · Thu', state: 'queue' },
              { n: 'Brannigan Co', r: 'Vendor · ACH',   note: 'paid to routing …4211', state: 'final' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10, alignItems: 'flex-start' }}>
                <div style={{
                  width: 18, height: 18, borderRadius: '50%',
                  background: s.state === 'active' ? E.brick : (s.state === 'final' ? E.forest2 : 'transparent'),
                  border: `1.5px solid ${s.state === 'active' ? E.brick : (s.state === 'final' ? E.forest2 : '#4a443b')}`,
                  color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10,
                  marginTop: 2,
                }}>
                  {s.state === 'active' ? '●' : (s.state === 'final' ? '$' : i + 1)}
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 500 }}>{s.n}</div>
                  <div style={{ fontSize: 10, color: '#a8a297', fontFamily: E.mono, letterSpacing: '0.04em' }}>{s.r.toUpperCase()}</div>
                  <div style={{ fontSize: 11, color: '#c5bfb1', marginTop: 2 }}>{s.note}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 'auto', padding: '12px', background: 'rgba(67,137,104,0.18)', borderRadius: 8, fontSize: 11, lineHeight: 1.5 }}>
            <div style={{ fontSize: 9, letterSpacing: '0.1em', color: E.forest2, fontFamily: E.mono, fontWeight: 600 }}>CONTRO CHECKS</div>
            <div style={{ marginTop: 4, color: '#ddd4be' }}>
              ✓ vendor W-9 on file<br/>
              ✓ lien waiver collected Apr 14<br/>
              <span style={{ color: '#e9c76a' }}>!</span> variance +$14,010 vs PO-0338
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function EField({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.1em', color: E.ink3, fontFamily: E.mono, fontWeight: 500, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

Object.assign(window, { EmployeeDashboardPage, EmployeeVendorRequestPage });