// app-mocks.jsx — EatCookJoy Client + Chef app screens

const ECJ = {
  ink: '#1a1410', ink2: '#2b2118',
  cream: '#faf6ef', cream2: '#f0e9dc',
  saffron: '#d97757', saffronDeep: '#b95838',
  gold: '#c89b5b', halal: '#1f8a5b',
  rose: '#b94047', line: 'rgba(26,20,16,0.10)',
  muted: 'rgba(26,20,16,0.55)',
};

// Real food photography — Unsplash hotlinks
const PHOTOS = {
  mandiHero:  'https://images.unsplash.com/photo-1601050690597-df0568f70950?w=800&q=85&auto=format&fit=crop',
  biryani:    'https://images.unsplash.com/photo-1631452180519-c014fe946bc7?w=800&q=85&auto=format&fit=crop',
  kabsa:      'https://images.unsplash.com/photo-1644364935906-792b2245a2c0?w=800&q=85&auto=format&fit=crop',
  mansaf:     'https://images.unsplash.com/photo-1567337710282-00832b415979?w=800&q=85&auto=format&fit=crop',
  mezze:      'https://images.unsplash.com/photo-1540914124281-342587941389?w=800&q=85&auto=format&fit=crop',
  shawarma:   'https://images.unsplash.com/photo-1633321088355-d0f81134ca3b?w=800&q=85&auto=format&fit=crop',
  chefM1:     'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=600&q=85&auto=format&fit=crop',
  chefM2:     'https://images.unsplash.com/photo-1583394293214-28ded15ee548?w=600&q=85&auto=format&fit=crop',
  chefF1:     'https://images.unsplash.com/photo-1607631568010-a87245c0daf8?w=600&q=85&auto=format&fit=crop',
  chefM3:     'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=600&q=85&auto=format&fit=crop',
  chefM4:     'https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?w=600&q=85&auto=format&fit=crop',
  plating:    'https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=800&q=85&auto=format&fit=crop',
};

// ───────────────────────────────────────────────────────────
// Reusable phone shell — slimmer than IOSDevice, no nav bar baked
// ───────────────────────────────────────────────────────────
function PhoneShell({ children, dark = false, time = '9:41', statusOnDark = false, w = 380, h = 820 }) {
  const sc = statusOnDark || dark ? '#fff' : '#000';
  return (
    <div style={{
      width: w, height: h, borderRadius: 46, overflow: 'hidden',
      position: 'relative',
      background: dark ? '#0e0a07' : '#fff',
      boxShadow: '0 50px 100px -20px rgba(0,0,0,0.45), 0 0 0 12px #0e0a07, 0 0 0 13px #2a2118',
      fontFamily: '-apple-system, system-ui, sans-serif',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 118, height: 34, borderRadius: 22, background: '#000', zIndex: 50,
      }} />
      {/* status */}
      <div style={{
        position: 'absolute', top: 16, left: 30, right: 30,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 40, color: sc,
        fontSize: 15, fontWeight: 600, letterSpacing: 0.1,
      }}>
        <span>{time}</span>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="7" width="3" height="4" rx="0.5" fill={sc}/><rect x="4.5" y="5" width="3" height="6" rx="0.5" fill={sc}/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5" fill={sc}/><rect x="13.5" y="0" width="3" height="11" rx="0.5" fill={sc}/></svg>
          <svg width="24" height="11" viewBox="0 0 24 11"><rect x="0.5" y="0.5" width="21" height="10" rx="3" stroke={sc} fill="none" opacity="0.4"/><rect x="2" y="2" width="18" height="7" rx="1.5" fill={sc}/><rect x="22" y="3.5" width="1.5" height="4" rx="0.5" fill={sc} opacity="0.4"/></svg>
        </div>
      </div>
      {/* content */}
      <div style={{ position: 'absolute', inset: 0, paddingTop: 0, overflow: 'hidden' }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
        width: 130, height: 5, borderRadius: 100,
        background: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.85)', zIndex: 60,
      }} />
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// CLIENT APP — Screen 1: Discover / Home
// ───────────────────────────────────────────────────────────
function ClientHome() {
  return (
    <PhoneShell statusOnDark>
      {/* hero header */}
      <div style={{
        height: 280, position: 'relative',
        background: `linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.65) 100%), url(${PHOTOS.mandiHero}) center/cover`,
      }}>
        <div style={{ position: 'absolute', top: 60, left: 24, right: 24, color: '#fff' }}>
          <div style={{ fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase', opacity: 0.85, fontWeight: 600 }}>
            Good evening, Layla
          </div>
          <div style={{ fontSize: 14, marginTop: 4, opacity: 0.75 }}>📍 Dubai Marina · AED</div>
        </div>
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: '#fff' }}>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, fontWeight: 500, lineHeight: 1.05, letterSpacing: -0.3 }}>
            Tonight, who's<br/>cooking in your<br/>kitchen?
          </div>
        </div>
      </div>

      {/* search */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{
          height: 46, borderRadius: 23, background: '#f4f0e8',
          display: 'flex', alignItems: 'center', padding: '0 16px', gap: 10,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16"><circle cx="7" cy="7" r="5" stroke={ECJ.muted} strokeWidth="1.6" fill="none"/><path d="M11 11l3 3" stroke={ECJ.muted} strokeWidth="1.6" strokeLinecap="round"/></svg>
          <span style={{ fontSize: 14, color: ECJ.muted }}>Cuisine, chef, or dish…</span>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <div style={{ padding: '4px 8px', background: ECJ.saffron, color: '#fff', fontSize: 10, borderRadius: 999, fontWeight: 700, letterSpacing: 0.5 }}>HALAL</div>
          </div>
        </div>
      </div>

      {/* cuisine pills */}
      <div style={{
        display: 'flex', gap: 8, padding: '14px 20px 4px',
        overflow: 'hidden',
      }}>
        {['Emirati', 'Saudi', 'Levantine', 'Indian', 'Persian'].map((c, i) => (
          <div key={c} style={{
            padding: '7px 14px', borderRadius: 999,
            background: i === 0 ? ECJ.ink : '#fff',
            color: i === 0 ? '#fff' : ECJ.ink,
            border: `1px solid ${i === 0 ? ECJ.ink : ECJ.line}`,
            fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
          }}>{c}</div>
        ))}
      </div>

      {/* chef cards (featured row) */}
      <div style={{ padding: '12px 20px 6px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, fontWeight: 500 }}>Available tonight</div>
          <div style={{ fontSize: 11, color: ECJ.saffron, fontWeight: 700, letterSpacing: 0.1 }}>SEE 47 →</div>
        </div>
        <div style={{ display: 'flex', gap: 10, overflow: 'hidden' }}>
          {[
            { name: 'Chef Khalid', cuis: 'Emirati · Mughlai', rate: 'AED 320/hr', rating: '4.9', img: PHOTOS.chefM1 },
            { name: 'Chef Reem', cuis: 'Levantine · Vegan', rate: 'AED 280/hr', rating: '4.8', img: PHOTOS.chefF1 },
          ].map((c, i) => (
            <div key={i} style={{
              flex: 1, background: '#fff', border: `1px solid ${ECJ.line}`,
              borderRadius: 16, overflow: 'hidden',
            }}>
              <div style={{ height: 96, background: `url(${c.img}) center/cover`, position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: 8, right: 8,
                  background: 'rgba(255,255,255,0.92)',
                  padding: '3px 7px', borderRadius: 999,
                  fontSize: 10, fontWeight: 700,
                }}>★ {c.rating}</div>
              </div>
              <div style={{ padding: '10px 12px 12px' }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: ECJ.muted, marginTop: 2 }}>{c.cuis}</div>
                <div style={{ fontSize: 11, color: ECJ.saffronDeep, marginTop: 6, fontWeight: 700 }}>{c.rate}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* tab bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        height: 86, background: 'rgba(255,255,255,0.96)',
        backdropFilter: 'blur(20px)',
        borderTop: `1px solid ${ECJ.line}`,
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
        paddingTop: 12,
      }}>
        {[
          { l: 'Discover', i: '🍽', active: true },
          { l: 'Plan', i: '📅' },
          { l: 'Snap', i: '📸' },
          { l: 'Chats', i: '💬' },
          { l: 'You', i: '👤' },
        ].map((t, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            color: t.active ? ECJ.saffron : ECJ.muted,
            fontSize: 10, fontWeight: 600,
          }}>
            <div style={{ fontSize: 20, marginBottom: 2, filter: t.active ? 'none' : 'grayscale(0.8) opacity(0.7)' }}>{t.i}</div>
            {t.l}
          </div>
        ))}
      </div>
    </PhoneShell>
  );
}

// ───────────────────────────────────────────────────────────
// CLIENT APP — Screen 2: Chef Profile + Booking
// ───────────────────────────────────────────────────────────
function ClientChefProfile() {
  return (
    <PhoneShell statusOnDark>
      {/* hero photo */}
      <div style={{
        height: 320, position: 'relative',
        background: `linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, rgba(0,0,0,0.7) 100%), url(${PHOTOS.chefM2}) center/cover`,
      }}>
        <div style={{ position: 'absolute', top: 56, left: 20, right: 20, display: 'flex', justifyContent: 'space-between' }}>
          <div style={{
            width: 36, height: 36, borderRadius: 18,
            background: 'rgba(255,255,255,0.22)', backdropFilter: 'blur(14px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 18,
          }}>←</div>
          <div style={{
            width: 36, height: 36, borderRadius: 18,
            background: 'rgba(255,255,255,0.22)', backdropFilter: 'blur(14px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 16,
          }}>♡</div>
        </div>
        <div style={{ position: 'absolute', bottom: 18, left: 20, right: 20, color: '#fff' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
            <span style={{ padding: '3px 8px', background: ECJ.halal, fontSize: 9, fontWeight: 800, letterSpacing: 0.6, borderRadius: 3 }}>HALAL CERTIFIED</span>
            <span style={{ padding: '3px 8px', background: 'rgba(255,255,255,0.2)', fontSize: 9, fontWeight: 700, letterSpacing: 0.6, borderRadius: 3, backdropFilter: 'blur(8px)' }}>DM FOOD CARD ✓</span>
          </div>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, fontWeight: 500, lineHeight: 1 }}>
            Chef Khalid Al-Mansoori
          </div>
          <div style={{ fontSize: 13, opacity: 0.88, marginTop: 4 }}>
            Emirati · Mughlai · 12 yrs · Burj Al Arab alum
          </div>
        </div>
      </div>

      {/* meta strip */}
      <div style={{ display: 'flex', borderBottom: `1px solid ${ECJ.line}` }}>
        {[
          { n: '4.9', l: '286 reviews' },
          { n: '142', l: 'sessions' },
          { n: '< 90m', l: 'response' },
        ].map((s, i) => (
          <div key={i} style={{ flex: 1, padding: '14px 0', textAlign: 'center', borderRight: i < 2 ? `1px solid ${ECJ.line}` : 'none' }}>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, fontWeight: 600 }}>{s.n}</div>
            <div style={{ fontSize: 10, letterSpacing: 0.15, textTransform: 'uppercase', color: ECJ.muted, marginTop: 2 }}>{s.l}</div>
          </div>
        ))}
      </div>

      {/* signature dishes */}
      <div style={{ padding: '18px 20px 14px' }}>
        <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500, marginBottom: 10 }}>Signature menu</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { p: PHOTOS.kabsa, n: 'Saudi Kabsa' },
            { p: PHOTOS.biryani, n: 'Hyderabad Biryani' },
            { p: PHOTOS.mansaf, n: 'Mansaf Royale' },
          ].map((d, i) => (
            <div key={i}>
              <div style={{ aspectRatio: '1', borderRadius: 10, background: `url(${d.p}) center/cover` }} />
              <div style={{ fontSize: 11, marginTop: 5, fontWeight: 600 }}>{d.n}</div>
            </div>
          ))}
        </div>
      </div>

      {/* booking cta */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: '#fff',
        borderTop: `1px solid ${ECJ.line}`,
        padding: '14px 20px 30px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div>
          <div style={{ fontSize: 11, color: ECJ.muted, textTransform: 'uppercase', letterSpacing: 0.15, fontWeight: 600 }}>From</div>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 26, fontWeight: 600 }}>AED 320<span style={{ fontSize: 13, color: ECJ.muted, fontWeight: 400 }}> /hr</span></div>
          <div style={{ fontSize: 10, color: ECJ.halal, fontWeight: 700 }}>or 4× AED 80 with Tabby</div>
        </div>
        <div style={{
          flex: 1, marginLeft: 'auto',
          height: 52, background: ECJ.ink, color: '#fff',
          borderRadius: 26,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 15, letterSpacing: 0.4,
        }}>Book session →</div>
      </div>
    </PhoneShell>
  );
}

// ───────────────────────────────────────────────────────────
// CLIENT APP — Screen 3: AI Weekly Meal Plan
// ───────────────────────────────────────────────────────────
function ClientMealPlan() {
  return (
    <PhoneShell>
      <div style={{ padding: '60px 24px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase', color: ECJ.saffron, fontWeight: 700 }}>
            ✦ AI Plan · Week of May 11
          </div>
          <div style={{ fontSize: 22, color: ECJ.muted }}>···</div>
        </div>
        <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, fontWeight: 500, lineHeight: 1.05, marginTop: 8, letterSpacing: -0.3 }}>
          Your Ramadan<br/>iftar lineup is<br/><em style={{ color: ECJ.saffronDeep, fontStyle: 'italic' }}>ready</em>.
        </div>
        <div style={{ fontSize: 13, color: ECJ.muted, marginTop: 10, lineHeight: 1.5 }}>
          Built from your halal · low-sodium · no-nuts profile and the chefs available within 8 km this week.
        </div>
      </div>

      {/* macros card */}
      <div style={{ margin: '20px 24px', background: ECJ.ink, color: '#fff', borderRadius: 18, padding: 18 }}>
        <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', opacity: 0.6, fontWeight: 700 }}>Daily target · 1,840 kcal</div>
        <div style={{ display: 'flex', gap: 14, marginTop: 14 }}>
          {[
            { n: '142g', l: 'protein', c: ECJ.saffron },
            { n: '186g', l: 'carbs', c: ECJ.gold },
            { n: '54g', l: 'fat', c: ECJ.halal },
          ].map((m, i) => (
            <div key={i} style={{ flex: 1 }}>
              <div style={{ height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 4, overflow: 'hidden' }}>
                <div style={{ width: ['72%', '64%', '48%'][i], height: '100%', background: m.c }} />
              </div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, marginTop: 8, fontWeight: 600 }}>{m.n}</div>
              <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', opacity: 0.7, fontWeight: 600 }}>{m.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* daily plan */}
      <div style={{ padding: '0 24px' }}>
        {[
          { day: 'Mon', dish: 'Iftar — Chicken Mandi', chef: 'Khalid', img: PHOTOS.mandiHero, kcal: '720 kcal' },
          { day: 'Tue', dish: 'Lentil & lamb shorba', chef: 'Reem', img: PHOTOS.mezze, kcal: '540 kcal' },
          { day: 'Wed', dish: 'Saudi Kabsa platter', chef: 'Khalid', img: PHOTOS.kabsa, kcal: '810 kcal' },
        ].map((d, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: `1px solid ${ECJ.line}` }}>
            <div style={{ width: 56, height: 56, borderRadius: 12, background: `url(${d.img}) center/cover`, flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10, letterSpacing: 0.18, color: ECJ.saffron, fontWeight: 700, textTransform: 'uppercase' }}>{d.day} · 7:14 pm</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{d.dish}</div>
              <div style={{ fontSize: 11, color: ECJ.muted, marginTop: 2 }}>Chef {d.chef} · {d.kcal}</div>
            </div>
            <div style={{ alignSelf: 'center', fontSize: 18, color: ECJ.muted }}>›</div>
          </div>
        ))}
      </div>

      {/* footer cta */}
      <div style={{
        position: 'absolute', bottom: 30, left: 24, right: 24,
        height: 52, background: ECJ.saffron, color: '#fff',
        borderRadius: 26, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 700, fontSize: 14, letterSpacing: 0.3,
        boxShadow: '0 12px 30px -8px rgba(217,119,87,0.5)',
      }}>
        Confirm 7 sessions · AED 2,240
      </div>
    </PhoneShell>
  );
}

// ───────────────────────────────────────────────────────────
// CHEF APP — Screen 1: Today / Bookings
// ───────────────────────────────────────────────────────────
function ChefToday() {
  return (
    <PhoneShell dark statusOnDark>
      <div style={{ padding: '60px 24px 0', color: ECJ.cream }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase', opacity: 0.5, fontWeight: 700 }}>
              Tuesday · May 12
            </div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, fontWeight: 500, marginTop: 4, lineHeight: 1.1, whiteSpace: 'nowrap' }}>
              Ahlan, <em style={{ color: ECJ.saffron, fontStyle: 'italic' }}>Khalid</em>
            </div>
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: 22,
            background: `url(${PHOTOS.chefM1}) center/cover`,
            border: `2px solid ${ECJ.saffron}`,
            flexShrink: 0,
          }} />
        </div>

        {/* earnings card */}
        <div style={{
          marginTop: 20, padding: 18, borderRadius: 18,
          background: 'linear-gradient(135deg, #d97757 0%, #b95838 100%)',
          color: '#fff', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ fontSize: 10, letterSpacing: 0.2, textTransform: 'uppercase', opacity: 0.75, fontWeight: 700 }}>
            This week · paid + scheduled
          </div>
          <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 46, fontWeight: 500, lineHeight: 1.05, marginTop: 4 }}>
            AED 4,820
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 14, fontSize: 11 }}>
            <div><span style={{ opacity: 0.7 }}>Paid out</span> <b>AED 1,940</b></div>
            <div><span style={{ opacity: 0.7 }}>In escrow</span> <b>AED 2,880</b></div>
          </div>
          {/* pattern */}
          <div style={{ position: 'absolute', right: -30, top: -30, width: 140, height: 140, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.18)' }} />
          <div style={{ position: 'absolute', right: 10, top: 10, width: 80, height: 80, borderRadius: '50%', border: '1px solid rgba(255,255,255,0.12)' }} />
        </div>
      </div>

      {/* today's bookings */}
      <div style={{ padding: '22px 24px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <div style={{ color: ECJ.cream, fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500 }}>Today's sessions</div>
          <div style={{ fontSize: 11, color: 'rgba(250,246,239,0.5)', fontWeight: 700, letterSpacing: 0.15 }}>3 BOOKED</div>
        </div>
        {[
          { t: '12:30', d: '2 hr', client: 'Layla A. · Marina', menu: 'Mandi + mezze · party of 6', ok: true },
          { t: '17:00', d: '3 hr', client: 'New booking', menu: 'Iftar prep · halal kitchen', pending: true },
          { t: '20:00', d: '1.5 hr', client: 'Faisal · JBR', menu: 'Recurring · Hyderabad biryani', ok: true },
        ].map((s, i) => (
          <div key={i} style={{
            marginBottom: 10, padding: 14, borderRadius: 14,
            background: s.pending ? 'rgba(217,119,87,0.10)' : 'rgba(250,246,239,0.04)',
            border: `1px solid ${s.pending ? 'rgba(217,119,87,0.35)' : 'rgba(250,246,239,0.08)'}`,
            color: ECJ.cream,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ borderRight: '1px solid rgba(250,246,239,0.15)', paddingRight: 12 }}>
                  <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, fontWeight: 600 }}>{s.t}</div>
                  <div style={{ fontSize: 10, opacity: 0.6, letterSpacing: 0.15, textTransform: 'uppercase' }}>{s.d}</div>
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{s.client}</div>
                  <div style={{ fontSize: 11, opacity: 0.6, marginTop: 2 }}>{s.menu}</div>
                </div>
              </div>
              {s.pending && (
                <div style={{ padding: '4px 10px', background: ECJ.saffron, color: '#fff', borderRadius: 999, fontSize: 9, fontWeight: 800, letterSpacing: 0.5, height: 18, alignSelf: 'center' }}>
                  ACCEPT
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* tab bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        height: 86, background: 'rgba(14,10,7,0.94)',
        backdropFilter: 'blur(20px)',
        borderTop: '1px solid rgba(250,246,239,0.08)',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
        paddingTop: 12,
      }}>
        {[
          { l: 'Today', i: '◉', active: true },
          { l: 'Calendar', i: '▦' },
          { l: 'Inbox', i: '✉' },
          { l: 'Earnings', i: '$' },
          { l: 'Profile', i: '◑' },
        ].map((t, i) => (
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            color: t.active ? ECJ.saffron : 'rgba(250,246,239,0.4)',
            fontSize: 10, fontWeight: 600,
          }}>
            <div style={{ fontSize: 18, marginBottom: 4 }}>{t.i}</div>
            {t.l}
          </div>
        ))}
      </div>
    </PhoneShell>
  );
}

// ───────────────────────────────────────────────────────────
// CHEF APP — Screen 2: Compliance & Certifications
// ───────────────────────────────────────────────────────────
function ChefCompliance() {
  return (
    <PhoneShell>
      <div style={{ padding: '60px 24px 0' }}>
        <div style={{ fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase', color: ECJ.saffron, fontWeight: 700 }}>
          ⚐ Compliance · UAE
        </div>
        <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, fontWeight: 500, lineHeight: 1.05, marginTop: 6, letterSpacing: -0.3 }}>
          You're <em style={{ color: ECJ.halal, fontStyle: 'italic' }}>cleared</em> to cook.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
          <div style={{ flex: 1, height: 5, borderRadius: 5, background: ECJ.cream2, overflow: 'hidden' }}>
            <div style={{ width: '100%', height: '100%', background: ECJ.halal }} />
          </div>
          <div style={{ fontSize: 12, fontWeight: 700, color: ECJ.halal }}>6 / 6</div>
        </div>
      </div>

      <div style={{ padding: '18px 24px 0' }}>
        {[
          { l: 'Emirates ID', s: 'Verified', exp: 'Expires Mar 2027', ok: true },
          { l: 'Dubai Municipality food card', s: 'Verified', exp: 'Renews 12 days', warn: true },
          { l: 'HACCP Allergen', s: 'Verified', exp: 'Expires Jan 2027', ok: true },
          { l: 'Bank IBAN (Stripe)', s: 'Connected', exp: 'ENBD •••• 4471', ok: true },
          { l: 'Freelancer permit', s: 'Verified', exp: 'Expires Sep 2026', ok: true },
          { l: 'Selfie liveness', s: 'Verified', exp: 'Last check Apr 30', ok: true },
        ].map((r, i) => (
          <div key={i} style={{
            padding: '14px 0', borderBottom: `1px solid ${ECJ.line}`,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 16,
              background: r.warn ? '#fbe9d8' : '#e3f3eb',
              color: r.warn ? ECJ.saffron : ECJ.halal,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 800, fontSize: 14,
            }}>{r.warn ? '!' : '✓'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{r.l}</div>
              <div style={{ fontSize: 11, color: ECJ.muted, marginTop: 2 }}>{r.exp}</div>
            </div>
            <div style={{ fontSize: 10, color: r.warn ? ECJ.saffron : ECJ.halal, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>{r.s}</div>
          </div>
        ))}
      </div>

      {/* warning footer */}
      <div style={{
        position: 'absolute', bottom: 30, left: 24, right: 24,
        padding: 16, borderRadius: 14, background: '#fbe9d8',
        border: `1px solid ${ECJ.saffron}`,
        display: 'flex', gap: 12,
      }}>
        <div style={{ fontSize: 20 }}>⏱</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: ECJ.saffronDeep }}>Food card renews in 12 days</div>
          <div style={{ fontSize: 11, color: ECJ.ink2, marginTop: 2, lineHeight: 1.4 }}>Auto-suspension on expiry. Tap to book the renewal slot.</div>
        </div>
      </div>
    </PhoneShell>
  );
}

Object.assign(window, {
  PhoneShell, ClientHome, ClientChefProfile, ClientMealPlan, ChefToday, ChefCompliance, PHOTOS, ECJ,
});