// Screen 1 — Today's Schedule (techs morning view)

function TodaySchedule() {
  const jobs = [
    { id: 1, time: '9:00 AM', status: 'next', type: 'Service', label: 'AC Not Cooling', customer: 'Sarah Johnson', addr: '742 Oak St · 4.2 mi', membership: 'Gold', priority: 'high', duration: '2h', eta: '8 min away' },
    { id: 2, time: '11:30 AM', status: 'scheduled', type: 'Maint', label: 'Spring Tune-Up', customer: 'Carlos Martinez', addr: '1205 Elm Ave · 2.8 mi', duration: '1.5h' },
    { id: 3, time: '2:00 PM', status: 'scheduled', type: 'Install', label: 'Mini-split Install', customer: 'Dave Thompson', addr: '890 Pine St · 6.1 mi', duration: '3h', priority: 'crew' },
    { id: 4, time: '5:30 PM', status: 'scheduled', type: 'Callback', label: 'Compressor Callback', customer: 'Tom Williams', addr: '310 Spruce · 5.4 mi', duration: '1h' },
  ];

  return (
    <IOSDevice dark={false}>
      <div style={{
        paddingTop: 54, paddingBottom: 100, height: '100%', overflow: 'hidden',
        fontFamily: '-apple-system, system-ui',
        background: '#F2F2F7',
      }}>
        {/* Greeting */}
        <div style={{ padding: '8px 20px 14px' }}>
          <div style={{ fontSize: 13, color: '#6B7280', fontWeight: 500 }}>
            Monday · April 27
          </div>
          <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.7, color: '#111', lineHeight: 1.1, marginTop: 2 }}>
            Morning, Jake
          </div>

          {/* Day-at-a-glance strip */}
          <div style={{
            marginTop: 14, background: '#fff', borderRadius: 14,
            border: '1px solid rgba(0,0,0,0.06)',
            padding: '12px 14px',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          }}>
            <Stat n="4" l="Jobs" />
            <Stat n="7.5h" l="Booked" />
            <Stat n="$1,240" l="Est. revenue" highlight />
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
            <button style={pillBtn('#0F766E', '#fff')}>
              <I.Navigation size={12} /> Start route
            </button>
            <button style={pillBtn('#fff', '#111', true)}>
              <I.Calendar size={12} /> Week
            </button>
            <button style={pillBtn('#fff', '#111', true)}>
              <I.Sparkles size={12} /> Optimize
            </button>
          </div>
        </div>

        {/* Now-up banner */}
        <div style={{ padding: '4px 16px 0' }}>
          <div style={{
            background: 'linear-gradient(135deg, #0F766E 0%, #0D9488 100%)',
            color: '#fff', borderRadius: 16, padding: 16,
            boxShadow: '0 6px 18px rgba(15,118,110,0.25)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.6, opacity: 0.85 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }} /> Up next · 8 min away
            </div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.3, marginTop: 6 }}>
              9:00 AM · AC Not Cooling
            </div>
            <div style={{ fontSize: 13, opacity: 0.9, marginTop: 2 }}>
              Sarah Johnson · 742 Oak St
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <button style={{
                flex: 1, background: 'rgba(255,255,255,0.18)',
                border: '1px solid rgba(255,255,255,0.25)',
                color: '#fff', padding: '10px 0', borderRadius: 10,
                fontSize: 14, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                <I.Navigation size={14} /> Navigate
              </button>
              <button style={{
                flex: 1, background: '#fff', color: '#0F766E',
                border: 'none', padding: '10px 0', borderRadius: 10,
                fontSize: 14, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                On my way <I.ArrowRight size={14} />
              </button>
            </div>
          </div>
        </div>

        {/* Schedule list */}
        <SectionHeader>Today's schedule</SectionHeader>

        <div style={{ padding: '0 16px', position: 'relative' }}>
          {/* timeline rail */}
          <div style={{ position: 'absolute', left: 36, top: 8, bottom: 16, width: 2, background: '#E5E7EB', borderRadius: 1 }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {jobs.map((j, i) => <JobRow key={j.id} job={j} first={i === 0} />)}
          </div>
        </div>

        <div style={{ height: 24 }} />
        <TabBar active="jobs" />
      </div>
    </IOSDevice>
  );
}

function Stat({ n, l, highlight }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span style={{
        fontSize: 19, fontWeight: 700, letterSpacing: -0.4,
        color: highlight ? '#0F766E' : '#111',
        fontVariantNumeric: 'tabular-nums',
      }}>{n}</span>
      <span style={{ fontSize: 11, color: '#6B7280', fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.4 }}>{l}</span>
    </div>
  );
}

function pillBtn(bg, fg, outline) {
  return {
    display: 'inline-flex', alignItems: 'center', gap: 5,
    background: bg, color: fg, padding: '7px 12px', borderRadius: 999,
    fontSize: 13, fontWeight: 600, border: outline ? '1px solid rgba(0,0,0,0.1)' : 'none',
    cursor: 'pointer', fontFamily: 'inherit',
  };
}

function JobRow({ job, first }) {
  const typeColors = {
    Service: '#0284C7', Maint: '#059669', Install: '#7C3AED', Callback: '#DC2626',
  };
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      {/* time */}
      <div style={{ width: 56, paddingTop: 14, position: 'relative', zIndex: 1, flexShrink: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#6B7280', fontVariantNumeric: 'tabular-nums', textAlign: 'right', paddingRight: 12 }}>
          {job.time.replace(' AM', 'a').replace(' PM', 'p')}
        </div>
      </div>

      {/* card */}
      <div style={{
        flex: 1, background: '#fff', borderRadius: 14,
        border: first ? '1.5px solid #0F766E' : '1px solid rgba(0,0,0,0.06)',
        padding: 12,
        boxShadow: first ? '0 4px 16px rgba(15,118,110,0.12)' : '0 1px 2px rgba(0,0,0,0.03)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
          <span style={{
            fontSize: 10, fontWeight: 700, color: typeColors[job.type],
            textTransform: 'uppercase', letterSpacing: 0.5,
            background: `${typeColors[job.type]}14`, padding: '2px 7px', borderRadius: 5,
          }}>{job.type}</span>
          <span style={{ fontSize: 11, color: '#6B7280', fontWeight: 500 }}>· {job.duration}</span>
          {job.membership && (
            <span style={{
              fontSize: 10, fontWeight: 700, color: '#B45309',
              background: '#FEF3C7', padding: '2px 6px', borderRadius: 4,
              display: 'inline-flex', alignItems: 'center', gap: 3, marginLeft: 'auto',
            }}>
              <I.Star size={9} /> {job.membership}
            </span>
          )}
          {job.priority === 'high' && !job.membership && (
            <span style={{
              fontSize: 10, fontWeight: 700, color: '#DC2626',
              background: '#FEE2E2', padding: '2px 6px', borderRadius: 4, marginLeft: 'auto',
            }}>HIGH</span>
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
          <div style={{ flex: 1, fontSize: 16, fontWeight: 600, color: '#111', letterSpacing: -0.2, lineHeight: 1.2, minWidth: 0 }}>
            {job.label}
          </div>
          {job.priority === 'crew' && (
            <span style={{
              fontSize: 10, fontWeight: 700, color: '#7C3AED',
              background: '#F5F3FF', padding: '2px 6px', borderRadius: 4, flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', gap: 3, marginTop: 2,
            }}>
              <I.Users size={9} /> CREW
            </span>
          )}
        </div>
        <div style={{ fontSize: 13, color: '#6B7280', marginTop: 3 }}>
          {job.customer}
        </div>
        <div style={{ fontSize: 12, color: '#9CA3AF', marginTop: 3, display: 'flex', alignItems: 'center', gap: 4 }}>
          <I.MapPin size={11} /> {job.addr}
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ children }) {
  return (
    <div style={{
      padding: '20px 20px 10px', fontSize: 12, fontWeight: 600,
      color: '#6B7280', textTransform: 'uppercase', letterSpacing: 0.6,
    }}>{children}</div>
  );
}

function TabBar({ active }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: '0.5px solid rgba(0,0,0,0.1)',
      borderBottomLeftRadius: 48, borderBottomRightRadius: 48,
      display: 'flex', justifyContent: 'space-around',
      padding: '6px 0 28px', zIndex: 30,
    }}>
      {[
        { k: 'jobs', l: 'My Jobs', icon: I.Briefcase },
        { k: 'messages', l: 'Messages', icon: I.Message, badge: 2 },
        { k: 'profile', l: 'Profile', icon: I.User },
      ].map(t => {
        const isActive = active === t.k;
        return (
          <button key={t.k} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            color: isActive ? '#0F766E' : '#8E8E93',
            padding: '4px 12px', fontFamily: 'inherit', position: 'relative',
          }}>
            <t.icon size={22} stroke={isActive ? 2.2 : 1.8} />
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.1 }}>{t.l}</span>
            {t.badge && (
              <span style={{
                position: 'absolute', top: 0, right: 8,
                background: '#DC2626', color: '#fff',
                fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 999, minWidth: 14, textAlign: 'center',
              }}>{t.badge}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { TodaySchedule });