// MissionChef — Mobile Mitarbeiter-App (proper tab-based design)
// Tabs: Home (Clock-in) · Schichten · Urlaub · Team

function MobileFrame({ children, dark }) {
  return (
    <div style={{
      width: 360, height: 760, background: 'var(--mc-bg)',
      color: 'var(--mc-ink)',
      border: '11px solid #1B1B17', borderRadius: 48, overflow: 'hidden',
      position: 'relative', boxShadow: '0 30px 60px -30px rgba(0,0,0,.4)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Notch */}
      <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 110, height: 28, background: '#1B1B17', borderRadius: 18, zIndex: 10 }} />
      {/* Status bar */}
      <div style={{ height: 44, background: 'var(--mc-bg)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 28px 0 24px', fontSize: 13, fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, color: 'var(--mc-ink)', flexShrink: 0 }}>
        <span>17:42</span>
        <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="5" width="3" height="5"/><rect x="4" y="3" width="3" height="7"/><rect x="8" y="1" width="3" height="9"/><rect x="12" y="0" width="3" height="10"/></svg>
          <svg width="14" height="10" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2a9 9 0 0 1 7 3l-1.4 1.4A7 7 0 0 0 8 4a7 7 0 0 0-5.6 2.4L1 5A9 9 0 0 1 8 2zm0 3a6 6 0 0 1 4.4 1.9L11 8.4A4 4 0 0 0 8 7a4 4 0 0 0-3 1.4L3.6 6.9A6 6 0 0 1 8 5zm0 3a3 3 0 0 1 2 .8L8.7 10a1.5 1.5 0 0 0-1.4 0L6 8.8A3 3 0 0 1 8 8z"/></svg>
          <span style={{ fontSize: 11, fontWeight: 700, border: '1.2px solid currentColor', padding: '1px 3px', borderRadius: 3, marginLeft: 2 }}>82</span>
        </span>
      </div>
      {children}
      {/* Home indicator */}
      <div style={{ height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--mc-bg)', flexShrink: 0 }}>
        <div style={{ width: 120, height: 4, background: 'var(--mc-ink)', opacity: 0.4, borderRadius: 2 }} />
      </div>
    </div>
  );
}

// ─── Tab: Home (Clock-in) ──────────────────────────────────────────────────
function MobHomeTab({ me, clockedIn, setClockedIn, elapsed, breakOn, setBreakOn }) {
  const store = useStore();
  const todayShift = store.shifts.find(s => s.uid === me.id && new Date(s.start).toDateString() === new Date().toDateString());
  const progress = todayShift ? Math.min(100, (elapsed * 60000) / (new Date(todayShift.end) - new Date(todayShift.start)) * 100) : 0;

  return (
    <div style={{ padding: '4px 20px 20px', display: 'flex', flexDirection: 'column', gap: 16, flex: 1, overflow: 'auto' }} className="mc-scroll">
      {/* Greeting */}
      <div>
        <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Osteria Botanica</div>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 2 }}>Ciao, {me.name.split(' ')[0]}</div>
      </div>

      {/* Big clock-in card — always dark "pass-style" hero when clocked in */}
      <div style={{
        background: clockedIn ? '#1B1B17' : 'var(--mc-surface)',
        color: clockedIn ? '#F4EFE2' : 'var(--mc-ink)',
        border: clockedIn ? 'none' : '1px solid var(--mc-rule)',
        padding: 22, display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.7 }}>
            {clockedIn ? (breakOn ? 'Pause' : 'Eingestempelt seit') : 'Nicht eingestempelt'}
          </div>
          {clockedIn && <StatusDot tone={breakOn ? 'warn' : 'ok'} />}
        </div>
        <div className="mc-num" style={{ fontSize: 52, fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, marginTop: 8 }}>
          {Math.floor(elapsed/60)}<span style={{ opacity: 0.5, fontSize: 28 }}>h</span> {String(Math.floor(elapsed%60)).padStart(2,'0')}<span style={{ opacity: 0.5, fontSize: 28 }}>m</span>
        </div>
        {todayShift && (
          <>
            <div style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
              Schicht {fmtTIME(new Date(todayShift.start))}–{fmtTIME(new Date(todayShift.end))}
            </div>
            <div style={{ height: 3, background: clockedIn ? 'rgba(255,255,255,.15)' : 'var(--mc-rule)', marginTop: 4 }}>
              <div style={{ height: '100%', width: progress + '%', background: clockedIn ? 'var(--mc-leaf)' : 'var(--mc-leaf-700)' }} />
            </div>
          </>
        )}
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          <button onClick={() => setClockedIn(v => !v)} style={{
            flex: clockedIn ? 1 : undefined, width: clockedIn ? undefined : '100%',
            background: clockedIn ? '#F4EFE2' : 'var(--mc-leaf)',
            color: '#1B1B17', border: 'none', padding: '14px 0',
            fontSize: 14, fontWeight: 500, cursor: 'pointer',
            fontFamily: "'Space Grotesk', sans-serif", letterSpacing: '-0.005em',
          }}>
            {clockedIn ? 'Ausstempeln' : 'Einstempeln'}
          </button>
          {clockedIn && (
            <button onClick={() => setBreakOn(v => !v)} style={{
              flex: 1, background: 'transparent',
              color: '#F4EFE2', border: '1.5px solid rgba(244,239,226,.3)', padding: '14px 0',
              fontSize: 14, fontWeight: 500, cursor: 'pointer',
              fontFamily: "'Space Grotesk', sans-serif",
            }}>
              {breakOn ? 'Pause Ende' : 'Pause'}
            </button>
          )}
        </div>
      </div>

      {/* Week summary */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        <div className="mc-card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Woche</div>
          <div className="mc-num" style={{ fontSize: 20, fontWeight: 500, marginTop: 4 }}>32<span style={{ fontSize: 12, opacity: .5 }}>h</span></div>
        </div>
        <div className="mc-card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Monat</div>
          <div className="mc-num" style={{ fontSize: 20, fontWeight: 500, marginTop: 4 }}>128<span style={{ fontSize: 12, opacity: .5 }}>h</span></div>
        </div>
        <div className="mc-card" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Saldo</div>
          <div className="mc-num" style={{ fontSize: 20, fontWeight: 500, marginTop: 4, color: 'var(--mc-leaf-700)' }}>+6<span style={{ fontSize: 12, opacity: .5 }}>h</span></div>
        </div>
      </div>

      {/* Next up */}
      <div>
        <div className="mc-eyebrow" style={{ marginBottom: 10 }}>Nächste Schicht</div>
        <div className="mc-card" style={{ padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <div>
              <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Morgen · Donnerstag</div>
              <div className="mc-mono" style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>16:00 — 24:00</div>
              <div style={{ fontSize: 12, color: 'var(--mc-ink-dim)', marginTop: 6 }}>Service · Chef de rang</div>
            </div>
            <Pill tone="leaf">8h</Pill>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Schichten ────────────────────────────────────────────────────────
function MobShiftsTab({ me }) {
  const store = useStore();
  const myShifts = store.shifts.filter(s => s.uid === me.id);
  const tradeRequests = store.shifts.filter(s => s.status === 'trade-open' && s.uid !== me.id);

  return (
    <div style={{ padding: '4px 20px 20px', display: 'flex', flexDirection: 'column', gap: 16, flex: 1, overflow: 'auto' }} className="mc-scroll">
      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>Schichten</div>

      {tradeRequests.length > 0 && (
        <div>
          <div className="mc-eyebrow" style={{ marginBottom: 10, color: 'var(--mc-ember-700)' }}>↔ Tauschanfragen · {tradeRequests.length}</div>
          {tradeRequests.map(s => {
            const from = store.staff.find(u => u.id === s.uid);
            return (
              <div key={s.id} className="mc-card" style={{ padding: 14, marginBottom: 8, borderLeft: '3px solid var(--mc-ember)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{from.name.split(' ')[0]} sucht Tausch</div>
                    <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>
                      {fmtWEEKDAY(new Date(s.start))} · {fmtTIME(new Date(s.start))}–{fmtTIME(new Date(s.end))}
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  <button className="mc-btn leaf sm" style={{ flex: 1, justifyContent: 'center' }}>Übernehmen</button>
                  <button className="mc-btn ghost sm" style={{ flex: 1, justifyContent: 'center' }}>Ablehnen</button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <div>
        <div className="mc-eyebrow" style={{ marginBottom: 10 }}>Meine Schichten · Diese Woche</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {myShifts.map(s => {
            const d = new Date(s.start);
            const isPast = d < new Date();
            return (
              <div key={s.id} className="mc-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, opacity: isPast ? 0.5 : 1 }}>
                <div style={{ textAlign: 'center', minWidth: 42 }}>
                  <div style={{ fontSize: 10, color: 'var(--mc-ink-dim)', letterSpacing: '.1em', textTransform: 'uppercase' }}>{fmtWEEKDAY(d)}</div>
                  <div className="mc-num" style={{ fontSize: 22, fontWeight: 500, marginTop: 2 }}>{d.getDate()}</div>
                </div>
                <div style={{ width: 1, height: 32, background: 'var(--mc-rule)' }} />
                <div style={{ flex: 1 }}>
                  <div className="mc-mono" style={{ fontSize: 14, fontWeight: 500 }}>
                    {fmtTIME(new Date(s.start))} — {fmtTIME(new Date(s.end))}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{s.area}</div>
                </div>
                {s.status === 'trade-open'
                  ? <Pill tone="ember">Tausch</Pill>
                  : <button className="mc-btn ghost sm" style={{ padding: '6px 10px', fontSize: 11 }}>
                      <McIcon2 name="swap" size={12} />
                    </button>
                }
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Urlaub ───────────────────────────────────────────────────────────
function MobVacationTab({ me }) {
  const [showNew, setShowNew] = React.useState(false);

  // Demo-state for vacation balance
  const BALANCE = { total: 28, used: 9, pending: 5, available: 14 };
  const REQUESTS = [
    { id: 'v1', from: '2026-05-18', to: '2026-05-24', days: 5, type: 'Urlaub',    status: 'approved', note: 'Familienurlaub Italien' },
    { id: 'v2', from: '2026-07-06', to: '2026-07-12', days: 6, type: 'Urlaub',    status: 'pending',  note: 'Hochzeit Freund' },
    { id: 'v3', from: '2026-04-29', to: '2026-04-29', days: 1, type: 'Freistellung', status: 'approved', note: 'Arztbesuch' },
    { id: 'v4', from: '2026-12-23', to: '2026-12-30', days: 6, type: 'Urlaub',    status: 'pending',  note: 'Weihnachten' },
  ];

  return (
    <div style={{ padding: '4px 20px 20px', display: 'flex', flexDirection: 'column', gap: 16, flex: 1, overflow: 'auto' }} className="mc-scroll">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>Urlaub</div>
        <button onClick={() => setShowNew(true)} style={{
          background: 'var(--mc-leaf)', color: '#1B1B17', border: 'none',
          padding: '8px 14px', fontSize: 12, fontWeight: 500,
          display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
          fontFamily: "'Space Grotesk', sans-serif",
        }}>
          <McIcon2 name="plus" size={12} />Antrag
        </button>
      </div>

      {/* Balance hero */}
      <div style={{ background: 'var(--mc-leaf)', color: '#1B1B17', padding: 22 }}>
        <div style={{ fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase', opacity: 0.7 }}>Verfügbar · 2026</div>
        <div className="mc-num" style={{ fontSize: 60, fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, marginTop: 6 }}>
          {BALANCE.available}<span style={{ fontSize: 22, opacity: 0.6 }}> Tage</span>
        </div>
        <div style={{ height: 6, background: 'rgba(27,27,23,.15)', marginTop: 14, display: 'flex', overflow: 'hidden' }}>
          <div style={{ width: (BALANCE.used/BALANCE.total*100) + '%', background: '#1B1B17' }} />
          <div style={{ width: (BALANCE.pending/BALANCE.total*100) + '%', background: 'rgba(27,27,23,.45)' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11 }}>
          <span><span style={{ fontWeight: 600 }}>{BALANCE.used}</span> genommen</span>
          <span><span style={{ fontWeight: 600 }}>{BALANCE.pending}</span> beantragt</span>
          <span><span style={{ fontWeight: 600 }}>{BALANCE.total}</span> gesamt</span>
        </div>
      </div>

      {/* Requests list */}
      <div>
        <div className="mc-eyebrow" style={{ marginBottom: 10 }}>Meine Anträge</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {REQUESTS.map(r => {
            const from = new Date(r.from), to = new Date(r.to);
            const fromStr = from.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' });
            const toStr   = to.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' });
            const tone = r.status === 'approved' ? 'leaf' : r.status === 'pending' ? 'ember' : 'bad';
            const label = r.status === 'approved' ? 'Genehmigt' : r.status === 'pending' ? 'Offen' : 'Abgelehnt';
            return (
              <div key={r.id} className="mc-card" style={{
                padding: 14,
                borderLeft: `3px solid ${r.status === 'approved' ? 'var(--mc-leaf-700)' : r.status === 'pending' ? 'var(--mc-ember)' : 'var(--mc-bad)'}`,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', letterSpacing: '.08em', textTransform: 'uppercase' }}>{r.type}</div>
                    <div className="mc-num" style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>
                      {fromStr}{r.from !== r.to ? ` — ${toStr}` : ''}
                    </div>
                    {r.note && <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 4, fontStyle: 'italic' }}>{r.note}</div>}
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <Pill tone={tone}>{label}</Pill>
                    <div className="mc-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>{r.days}<span style={{ fontSize: 11, opacity: 0.5 }}> Tg</span></div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: 14, background: 'var(--mc-surface-2)', fontSize: 11, color: 'var(--mc-ink-dim)', lineHeight: 1.5 }}>
        Urlaubsanspruch laut Vertrag · Anträge werden von Paul (Leitung) genehmigt. Bei Krankheit bitte vor 10:00 via Chat melden.
      </div>

      {showNew && <MobNewVacationModal onClose={() => setShowNew(false)} />}
    </div>
  );
}

function MobNewVacationModal({ onClose }) {
  const [from, setFrom] = React.useState('');
  const [to, setTo] = React.useState('');
  const [type, setType] = React.useState('Urlaub');
  const [note, setNote] = React.useState('');

  const days = from && to ? Math.max(1, Math.round((new Date(to) - new Date(from))/86400000) + 1) : 0;

  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(27,27,23,.6)', zIndex: 50,
      display: 'flex', alignItems: 'flex-end',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', background: 'var(--mc-surface)', padding: 22, paddingBottom: 30,
        borderTopLeftRadius: 20, borderTopRightRadius: 20,
      }}>
        <div style={{ width: 40, height: 4, background: 'var(--mc-rule-strong)', borderRadius: 2, margin: '0 auto 16px' }} />
        <div className="mc-eyebrow">Neuer Antrag</div>
        <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em', marginTop: 4, marginBottom: 18 }}>Urlaub beantragen</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <div className="mc-eyebrow" style={{ marginBottom: 6 }}>Art</div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['Urlaub', 'Freistellung', 'Krank'].map(t => (
                <button key={t} onClick={() => setType(t)} style={{
                  flex: 1, padding: '10px 0', fontSize: 12,
                  background: type === t ? 'var(--mc-ink)' : 'transparent',
                  color: type === t ? 'var(--mc-bg)' : 'var(--mc-ink)',
                  border: `1px solid ${type === t ? 'var(--mc-ink)' : 'var(--mc-rule)'}`,
                  cursor: 'pointer', fontFamily: "'Space Grotesk', sans-serif",
                }}>{t}</button>
              ))}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <label><div className="mc-eyebrow" style={{ marginBottom: 6 }}>Von</div>
              <input type="date" className="mc-input" value={from} onChange={e => setFrom(e.target.value)} /></label>
            <label><div className="mc-eyebrow" style={{ marginBottom: 6 }}>Bis</div>
              <input type="date" className="mc-input" value={to} onChange={e => setTo(e.target.value)} /></label>
          </div>
          <label><div className="mc-eyebrow" style={{ marginBottom: 6 }}>Notiz (optional)</div>
            <input className="mc-input" value={note} onChange={e => setNote(e.target.value)} placeholder="Familienurlaub, Hochzeit..." /></label>
        </div>

        {days > 0 && (
          <div style={{ marginTop: 14, padding: 12, background: 'var(--mc-surface-2)', display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 12, color: 'var(--mc-ink-muted)' }}>Abzug von Resturlaub</span>
            <span className="mc-num" style={{ fontSize: 14, fontWeight: 500 }}>{days} {days === 1 ? 'Tag' : 'Tage'}</span>
          </div>
        )}

        <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
          <button onClick={onClose} className="mc-btn ghost" style={{ flex: 1, justifyContent: 'center' }}>Abbrechen</button>
          <button onClick={onClose} className="mc-btn leaf" style={{ flex: 2, justifyContent: 'center' }} disabled={!from || !to}>
            Antrag senden
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Tab: Team (Chat) ──────────────────────────────────────────────────────
function MobTeamTab() {
  const messages = [
    { from: 'Luca (Chef)',   txt: 'Primitivo ist alle — bitte auf Sangiovese umsteigen.',   at: '17:14', color: 'var(--mc-leaf-700)', mine: false },
    { from: 'Du',            txt: 'Alles klar, gebe ich durch.',                             at: '17:16', color: 'var(--mc-ink)',       mine: true  },
    { from: 'Paul (Leitung)',txt: 'Tisch 10 ist Geburtstag — Kerze mit Panna Cotta bitte.', at: '17:22', color: 'var(--mc-ember-700)', mine: false },
    { from: 'Sara',          txt: 'Pulpo ist heute perfekt geworden 🔥',                     at: '17:28', color: 'var(--mc-info)',      mine: false },
    { from: 'Du',            txt: 'Super, pushe ich!',                                        at: '17:29', color: 'var(--mc-ink)',       mine: true  },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ padding: '4px 20px 12px' }}>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>Team · Heute</div>
        <div style={{ fontSize: 11, color: 'var(--mc-ink-dim)', marginTop: 2 }}>8 online · Service bis 23:30</div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '4px 20px', display: 'flex', flexDirection: 'column', gap: 10 }} className="mc-scroll">
        {messages.map((m, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: m.mine ? 'flex-end' : 'flex-start' }}>
            {!m.mine && <div style={{ fontSize: 10, color: m.color, fontWeight: 600, marginBottom: 2, letterSpacing: '.02em' }}>{m.from}</div>}
            <div style={{
              background: m.mine ? 'var(--mc-leaf)' : 'var(--mc-surface)',
              color: m.mine ? '#1B1B17' : 'var(--mc-ink)',
              border: m.mine ? 'none' : '1px solid var(--mc-rule)',
              padding: '9px 13px', maxWidth: '78%',
              fontSize: 13, lineHeight: 1.35,
            }}>
              {m.txt}
            </div>
            <div style={{ fontSize: 9, color: 'var(--mc-ink-dim)', marginTop: 2 }}>{m.at}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: '10px 16px 6px', borderTop: '1px solid var(--mc-rule)', display: 'flex', gap: 8 }}>
        <input className="mc-input" placeholder="Nachricht…" style={{ flex: 1 }} />
        <button className="mc-btn leaf sm" style={{ padding: '8px 12px' }}><McIcon2 name="arrow" size={14} /></button>
      </div>
    </div>
  );
}

// ─── Main mobile app with tab navigation ───────────────────────────────────
function MobileAppScreen() {
  const store = useStore();
  const me = store.staff.find(u => u.id === 'u4'); // Amelie
  const [tab, setTab] = React.useState('home');
  const [clockedIn, setClockedIn] = React.useState(true);
  const [breakOn, setBreakOn] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(142);
  React.useEffect(() => {
    const iv = setInterval(() => setElapsed(e => (clockedIn && !breakOn) ? e + 1/60 : e), 1000);
    return () => clearInterval(iv);
  }, [clockedIn, breakOn]);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
      {tab === 'home'     && <MobHomeTab me={me} clockedIn={clockedIn} setClockedIn={setClockedIn} elapsed={elapsed} breakOn={breakOn} setBreakOn={setBreakOn} />}
      {tab === 'shifts'   && <MobShiftsTab me={me} />}
      {tab === 'vacation' && <MobVacationTab me={me} />}
      {tab === 'team'     && <MobTeamTab />}

      {/* Bottom Tab Bar */}
      <div style={{
        background: 'var(--mc-surface)',
        borderTop: '1px solid var(--mc-rule)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        flexShrink: 0,
      }}>
        {[
          { k: 'home',     i: 'clock',    l: 'Zeit' },
          { k: 'shifts',   i: 'calendar', l: 'Schicht' },
          { k: 'vacation', i: 'plate',    l: 'Urlaub', iconOverride: 'sun' },
          { k: 'team',     i: 'team',     l: 'Team' },
        ].map(t => {
          const active = tab === t.k;
          return (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              padding: '11px 0 12px', textAlign: 'center',
              background: 'transparent', border: 'none',
              color: active ? 'var(--mc-ink)' : 'var(--mc-ink-dim)',
              cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              position: 'relative',
              fontFamily: "'Space Grotesk', sans-serif",
            }}>
              {active && <div style={{ position: 'absolute', top: 0, left: '30%', right: '30%', height: 2, background: 'var(--mc-leaf-700)' }} />}
              <McIcon2 name={t.iconOverride || t.i} size={20} stroke={active ? 2 : 1.6} />
              <div style={{ fontSize: 10, fontWeight: active ? 600 : 500, letterSpacing: '.02em' }}>{t.l}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function TabletFrame({ children, label }) {
  return (
    <div style={{ width: 900, height: 640, background: '#1B1B17', padding: 12, borderRadius: 24, boxShadow: '0 30px 60px -30px rgba(0,0,0,.5)' }}>
      <div style={{ background: 'var(--mc-bg)', width: '100%', height: '100%', borderRadius: 14, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 10, left: 14, fontSize: 10, fontFamily: "'JetBrains Mono',monospace", color: 'var(--mc-ink-dim)', letterSpacing: '.15em', textTransform: 'uppercase', zIndex: 5 }}>
          {label}
        </div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { MobileFrame, MobileAppScreen, TabletFrame });