// chamapro-mobile.jsx — Mobile screens (each rendered inside an IOSDevice)

// ─────────────────────────────────────────────────────────────
// 1) ONBOARDING — first-run welcome with 3 paginated cards
// ─────────────────────────────────────────────────────────────
function MobileOnboarding() {
  const [step, setStep] = React.useState(0);
  const slides = [
    {
      title: 'Diga o que precisa.',
      sub: 'Descreva seu serviço em 30 segundos. Foto, áudio ou texto.',
      kind: 'home',
    },
    {
      title: 'Os pros chamam você.',
      sub: 'Em minutos, profissionais verificados enviam orçamentos.',
      kind: 'wrench',
    },
    {
      title: 'Escolha com calma.',
      sub: 'Compare preço, avaliações e portfólio. Pague protegido.',
      kind: 'shield',
    },
  ];
  const s = slides[step];
  return (
    <div className="cp cp-screen" style={{ background: 'var(--cp-bg)' }}>
      <div style={{ padding: '60px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Logo size={20} />
        <button className="cp-btn-ghost" style={{ padding: '6px 12px', fontSize: 13, border: 'none', color: 'var(--cp-text-muted)' }}>
          Pular
        </button>
      </div>

      {/* Hero illustration */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '30px 24px' }}>
        <div style={{
          height: 280, borderRadius: 28,
          background: 'linear-gradient(135deg, #FFE9DF, #FFCCBC 60%, #FFB300)',
          position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'var(--cp-shadow-md)',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 80%, rgba(255,255,255,.4), transparent 50%)' }} />
          <div style={{
            width: 110, height: 110, borderRadius: '50%',
            background: 'rgba(255,255,255,.25)', backdropFilter: 'blur(20px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1px solid rgba(255,255,255,.5)',
          }}>
            <span style={{ fontSize: 56, filter: 'drop-shadow(0 4px 16px rgba(0,0,0,.2))' }}>
              {step === 0 ? '✍️' : step === 1 ? '🔥' : '🤝'}
            </span>
          </div>
          {/* Floating sparkles */}
          <div style={{ position: 'absolute', top: 30, left: 40, fontSize: 24, opacity: .8 }}>✨</div>
          <div style={{ position: 'absolute', bottom: 50, right: 30, fontSize: 18, opacity: .7 }}>⭐</div>
        </div>

        <div style={{ marginTop: 36 }}>
          <h1 style={{
            fontSize: 30, fontWeight: 800, letterSpacing: '-.03em', lineHeight: 1.1,
            margin: 0, marginBottom: 12,
          }}>{s.title}</h1>
          <p style={{
            fontSize: 16, color: 'var(--cp-text-muted)', lineHeight: 1.5,
            margin: 0, textWrap: 'pretty',
          }}>{s.sub}</p>
        </div>
      </div>

      {/* Pagination + actions */}
      <div style={{ padding: '0 24px 40px' }}>
        <div className="cp-progress" style={{ marginBottom: 20 }}>
          {slides.map((_, i) => (
            <div key={i} className={'cp-progress-dot' + (i <= step ? ' is-done' : '')}
                 style={{ flex: i === step ? 3 : 1 }} />
          ))}
        </div>
        <button
          className="cp-btn-primary"
          style={{ width: '100%', padding: '16px' }}
          onClick={() => setStep((step + 1) % 3)}
        >
          {step < 2 ? 'Continuar' : 'Começar agora'}
          {Icon.arrowRight(14)}
        </button>
        <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, color: 'var(--cp-text-muted)' }}>
          Já tem conta? <span style={{ color: 'var(--cp-primary)', fontWeight: 600 }}>Entrar</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2) HOME — discovery feed
// ─────────────────────────────────────────────────────────────
const CATS = [
  { id: 'all', label: 'Tudo', emoji: '✨' },
  { id: 'reform', label: 'Reformas', emoji: '🔨' },
  { id: 'clean', label: 'Limpeza', emoji: '🧹' },
  { id: 'elec', label: 'Elétrica', emoji: '⚡' },
  { id: 'plumb', label: 'Hidráulica', emoji: '🔧' },
  { id: 'paint', label: 'Pintura', emoji: '🎨' },
  { id: 'ac', label: 'Ar-cond.', emoji: '❄️' },
  { id: 'move', label: 'Mudança', emoji: '📦' },
];

function MobileHome() {
  const [cat, setCat] = React.useState('all');
  return (
    <div className="cp cp-screen">
      {/* Top header */}
      <div style={{ padding: '60px 20px 12px', background: 'var(--cp-bg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 13, color: 'var(--cp-text-muted)' }}>Olá, Marina 👋</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
              {Icon.pin(13)}
              <span style={{ fontSize: 13, fontWeight: 500 }}>Pinheiros, São Paulo</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button style={{
              width: 40, height: 40, borderRadius: 12, border: '1px solid var(--cp-border)',
              background: 'var(--cp-surface)', display: 'flex', alignItems: 'center',
              justifyContent: 'center', position: 'relative', cursor: 'pointer',
              color: 'var(--cp-text)',
            }}>
              {Icon.bell(18)}
              <span style={{
                position: 'absolute', top: 8, right: 8, width: 8, height: 8,
                background: 'var(--cp-primary)', borderRadius: 999,
                border: '2px solid var(--cp-surface)',
              }} />
            </button>
            <Avatar name="Marina Silva" size="sm" />
          </div>
        </div>

        {/* Search */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: 'var(--cp-surface)', border: '1px solid var(--cp-border)',
          borderRadius: 14, padding: '12px 14px',
        }}>
          <span style={{ color: 'var(--cp-text-muted)' }}>{Icon.search(18)}</span>
          <span style={{ flex: 1, fontSize: 14, color: 'var(--cp-text-soft)' }}>
            Buscar serviços, profissionais...
          </span>
          <span style={{ color: 'var(--cp-text-muted)' }}>{Icon.mic(16)}</span>
        </div>
      </div>

      {/* Categories */}
      <div style={{ padding: '6px 0 14px' }}>
        <div style={{
          display: 'flex', gap: 8, padding: '6px 20px',
          overflowX: 'auto',
        }} className="cp-noscroll">
          {CATS.map(c => (
            <button
              key={c.id}
              className={'cp-chip' + (c.id === cat ? ' is-active' : '')}
              onClick={() => setCat(c.id)}
            >
              <span>{c.emoji}</span>{c.label}
            </button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px 24px' }} className="cp-noscroll">
        {/* Hero CTA card */}
        <div style={{
          background: 'linear-gradient(135deg, #FF5722 0%, #E64A19 100%)',
          color: 'white', borderRadius: 20, padding: 18,
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 12px 28px rgba(255, 87, 34, .28)',
        }}>
          <div style={{ position: 'absolute', top: -10, right: -20, fontSize: 100, opacity: .15 }}>🔥</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, opacity: .9, marginBottom: 8 }}>
            {Icon.lightning(13)}
            <span>RESPOSTA EM MINUTOS</span>
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.2, marginBottom: 10 }}>
            Precisa de um<br/>profissional?
          </div>
          <div style={{ fontSize: 13, opacity: .9, marginBottom: 16, maxWidth: 250 }}>
            Descreva o serviço — em média 7 lances chegam em 24h.
          </div>
          <button style={{
            background: 'white', color: 'var(--cp-primary)',
            border: 'none', borderRadius: 12, padding: '10px 18px',
            fontWeight: 700, fontSize: 14, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            {Icon.plus(15)} Criar pedido
          </button>
        </div>

        {/* Section: Active requests */}
        <div style={{ marginTop: 24, marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 17, fontWeight: 700 }}>Meus pedidos ativos</div>
          <span style={{ fontSize: 13, color: 'var(--cp-primary)', fontWeight: 600 }}>Ver todos</span>
        </div>
        <ActiveRequestCard
          title="Pintar sala e quarto"
          status="3 novas propostas"
          when="há 2 horas"
          bidCount={7}
          kind="paint"
        />
        <div style={{ height: 12 }} />
        <ActiveRequestCard
          title="Conserto de chuveiro"
          status="Profissional a caminho"
          when="hoje, 14:30"
          bidCount={5}
          ongoing
          kind="plumb"
        />

        {/* Section: Top pros */}
        <div style={{ marginTop: 28, marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 17, fontWeight: 700 }}>Pros em alta na sua região</div>
        </div>
        <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4, margin: '0 -20px', padding: '4px 20px' }} className="cp-noscroll">
          {[
            { name: 'Carlos Souza', cat: 'Eletricista', rating: 4.9, jobs: 312 },
            { name: 'Ana Beatriz', cat: 'Pintora', rating: 5.0, jobs: 184 },
            { name: 'Roberto Lima', cat: 'Encanador', rating: 4.8, jobs: 247 },
          ].map((p, i) => <ProCard key={i} {...p} />)}
        </div>

        {/* Section: How it works */}
        <div style={{ marginTop: 28, marginBottom: 12, fontSize: 17, fontWeight: 700 }}>Como o ChamaPro funciona</div>
        <div className="cp-card" style={{ padding: 0, overflow: 'hidden' }}>
          {[
            { n: '1', icon: '✍️', title: 'Você descreve', sub: 'Texto, áudio ou foto. Sem complicação.' },
            { n: '2', icon: '🔥', title: 'Os pros chamam', sub: 'Em média 7 propostas em 24h.' },
            { n: '3', icon: '✅', title: 'Você escolhe', sub: 'Compare e pague com proteção.' },
          ].map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
              borderTop: i > 0 ? '1px solid var(--cp-border)' : 'none',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12, background: 'var(--cp-primary-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
              }}>{s.icon}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{s.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--cp-text-muted)', marginTop: 1 }}>{s.sub}</div>
              </div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--cp-text-soft)' }}>0{s.n}</div>
            </div>
          ))}
        </div>

        <div style={{ height: 80 }} />
      </div>

      <MobileTabBar active="home" />
    </div>
  );
}

function ActiveRequestCard({ title, status, when, bidCount, ongoing, kind }) {
  return (
    <div className="cp-card" style={{ padding: 14 }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 56, height: 56, borderRadius: 12, overflow: 'hidden', flexShrink: 0 }}>
          <PhotoPlaceholder kind={kind} h={56} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span className={ongoing ? 'cp-pill is-success' : 'cp-pill is-primary'} style={{ padding: '2px 8px', fontSize: 10.5 }}>
              {ongoing ? <span>● {status}</span> : status}
            </span>
          </div>
          <div style={{ fontWeight: 600, fontSize: 15, marginTop: 4 }}>{title}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 6, fontSize: 12, color: 'var(--cp-text-muted)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              {Icon.clock(11)} {when}
            </span>
            {!ongoing && <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              💬 {bidCount} propostas
            </span>}
          </div>
        </div>
      </div>
    </div>
  );
}

function ProCard({ name, cat, rating, jobs }) {
  return (
    <div style={{
      width: 160, flexShrink: 0,
      background: 'var(--cp-surface)', border: '1px solid var(--cp-border)',
      borderRadius: 16, padding: 14, position: 'relative',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <Avatar name={name} size="md" />
        <span style={{ fontSize: 11, color: 'var(--cp-success)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
          <span style={{ width: 6, height: 6, background: 'var(--cp-success)', borderRadius: 999 }} />
          Online
        </span>
      </div>
      <div style={{ fontSize: 14, fontWeight: 600, marginTop: 10 }}>{name}</div>
      <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>{cat}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8 }}>
        <span style={{ color: '#FFB300' }}>{Icon.star(13)}</span>
        <span style={{ fontWeight: 700, fontSize: 13 }}>{rating}</span>
        <span style={{ fontSize: 11, color: 'var(--cp-text-muted)' }}>· {jobs} jobs</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3) CRIAR PEDIDO — multi-step form
// ─────────────────────────────────────────────────────────────
function MobileNewRequest() {
  const [step, setStep] = React.useState(2); // show step 3 of 4 for richness
  const cat = CATS.find(c => c.id === 'paint');
  return (
    <div className="cp cp-screen">
      {/* Header */}
      <div style={{ padding: '60px 20px 16px', borderBottom: '1px solid var(--cp-border)', background: 'var(--cp-surface)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text)', cursor: 'pointer' }}>
            {Icon.back(20)}
          </button>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Novo pedido</div>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text-muted)', fontSize: 13, cursor: 'pointer' }}>
            Salvar
          </button>
        </div>
        <div className="cp-progress">
          {[0, 1, 2, 3].map(i => (
            <div key={i} className={'cp-progress-dot' + (i <= step ? ' is-done' : '')} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11, color: 'var(--cp-text-muted)' }}>
          <span>Categoria</span>
          <span>Detalhes</span>
          <span style={{ color: 'var(--cp-primary)', fontWeight: 600 }}>Quando</span>
          <span>Revisar</span>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>
        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginBottom: 6 }}>
          Quando você precisa?
        </div>
        <div style={{ fontSize: 14, color: 'var(--cp-text-muted)', marginBottom: 20 }}>
          Profissionais avaliam disponibilidade. Quanto mais flexível, melhores os preços.
        </div>

        {/* Urgency picker */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
          {[
            { id: 'urgent', emoji: '🔥', label: 'Urgente', sub: 'Hoje ou amanhã', flag: '+R$' },
            { id: 'week', emoji: '📅', label: 'Esta semana', sub: 'Nos próximos 7 dias', selected: true },
            { id: 'flex', emoji: '🌿', label: 'Sem pressa', sub: 'Aceito sugestões', flag: 'melhor preço' },
          ].map(opt => (
            <div key={opt.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: 14,
              border: opt.selected ? '2px solid var(--cp-primary)' : '1.5px solid var(--cp-border)',
              borderRadius: 14,
              background: opt.selected ? 'var(--cp-primary-tint)' : 'var(--cp-surface)',
              cursor: 'pointer',
            }}>
              <div style={{ fontSize: 26 }}>{opt.emoji}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{opt.label}</div>
                <div style={{ fontSize: 12.5, color: 'var(--cp-text-muted)' }}>{opt.sub}</div>
              </div>
              {opt.flag && (
                <span className={'cp-pill' + (opt.id === 'urgent' ? ' is-primary' : ' is-success')} style={{ fontSize: 10.5 }}>
                  {opt.flag}
                </span>
              )}
              {opt.selected && (
                <div style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: 'var(--cp-primary)', color: 'white',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {Icon.check(13)}
                </div>
              )}
            </div>
          ))}
        </div>

        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Janela preferida</div>
        <div className="cp-card" style={{ padding: 0 }}>
          <div style={{ display: 'flex', padding: 14, justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 14 }}>Manhã</span>
            <div style={{ width: 38, height: 22, borderRadius: 999, background: 'var(--cp-primary)', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, right: 2, width: 18, height: 18, borderRadius: 999, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
            </div>
          </div>
          <div style={{ display: 'flex', padding: 14, justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--cp-border)' }}>
            <span style={{ fontSize: 14 }}>Tarde</span>
            <div style={{ width: 38, height: 22, borderRadius: 999, background: 'var(--cp-primary)', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, right: 2, width: 18, height: 18, borderRadius: 999, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
            </div>
          </div>
          <div style={{ display: 'flex', padding: 14, justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--cp-border)' }}>
            <span style={{ fontSize: 14, color: 'var(--cp-text-muted)' }}>Fim de semana</span>
            <div style={{ width: 38, height: 22, borderRadius: 999, background: 'var(--cp-border)', position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, left: 2, width: 18, height: 18, borderRadius: 999, background: 'white', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
            </div>
          </div>
        </div>

        {/* Smart suggestion */}
        <div style={{
          marginTop: 20,
          padding: 14,
          background: 'var(--cp-primary-tint)',
          border: '1px dashed var(--cp-primary)',
          borderRadius: 14,
          display: 'flex',
          gap: 10,
        }}>
          <div style={{ color: 'var(--cp-primary)', flexShrink: 0, marginTop: 1 }}>{Icon.sparkle(16)}</div>
          <div style={{ fontSize: 12.5, color: 'var(--cp-text)', lineHeight: 1.5 }}>
            <b>Dica do ChamaPro:</b> pintores em Pinheiros têm <b>~30% menos demanda</b> em <b>terças e quartas</b>. Aceitar essas datas pode reduzir o orçamento em até <b>15%</b>.
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 20px 30px', borderTop: '1px solid var(--cp-border)', background: 'var(--cp-surface)' }}>
        <button className="cp-btn-primary" style={{ width: '100%' }} onClick={() => setStep(3)}>
          Revisar e publicar {Icon.arrowRight(14)}
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 4) PROPOSTAS — comparação de orçamentos recebidos
// ─────────────────────────────────────────────────────────────
function MobileProposals() {
  const proposals = [
    {
      name: 'Carlos Souza', cat: 'Pintor Profissional',
      rating: 4.9, jobs: 312, verified: true,
      price: 1180, days: 2,
      msg: 'Olá! Posso fazer o serviço com tinta premium incluída. Garantia de 1 ano.',
      highlight: 'best',
    },
    {
      name: 'Ana Beatriz Lopes', cat: 'Pintura & acabamento',
      rating: 5.0, jobs: 184, verified: true,
      price: 1450, days: 3,
      msg: 'Faço com massa corrida, lixamento e 2 demãos. Posso visitar antes para orçar.',
    },
    {
      name: 'Roberto Lima', cat: 'Reformas em geral',
      rating: 4.6, jobs: 89, verified: false,
      price: 950, days: 4,
      msg: 'Trabalho com qualidade e preço justo. Posso começar amanhã.',
    },
  ];

  return (
    <div className="cp cp-screen">
      <div style={{ padding: '60px 20px 16px', borderBottom: '1px solid var(--cp-border)', background: 'var(--cp-surface)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text)', cursor: 'pointer' }}>
            {Icon.back(20)}
          </button>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Propostas recebidas</div>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text-muted)', cursor: 'pointer' }}>
            {Icon.filter(18)}
          </button>
        </div>
        <div style={{ marginTop: 16 }}>
          <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-.02em' }}>
            Pintar sala e quarto
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 6, fontSize: 12.5, color: 'var(--cp-text-muted)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>{Icon.pin(11)} Pinheiros</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>{Icon.clock(11)} esta semana</span>
            <span style={{ color: 'var(--cp-primary)', fontWeight: 600 }}>● ao vivo</span>
          </div>
        </div>
      </div>

      {/* Sort tabs */}
      <div style={{ display: 'flex', gap: 8, padding: '14px 20px 12px', background: 'var(--cp-surface)', borderBottom: '1px solid var(--cp-border)' }}>
        {['Recomendados', 'Menor preço', 'Melhor avaliados', 'Mais rápidos'].map((t, i) => (
          <button key={t} style={{
            background: i === 0 ? 'var(--cp-text)' : 'var(--cp-surface)',
            color: i === 0 ? 'var(--cp-bg)' : 'var(--cp-text-muted)',
            border: '1px solid ' + (i === 0 ? 'var(--cp-text)' : 'var(--cp-border)'),
            borderRadius: 999, padding: '6px 12px', fontSize: 12, fontWeight: 500,
            whiteSpace: 'nowrap', cursor: 'pointer',
          }}>{t}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '14px 20px 100px', background: 'var(--cp-bg)' }} className="cp-noscroll">
        {/* Quick stats */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <div style={{ flex: 1, background: 'var(--cp-surface)', border: '1px solid var(--cp-border)', borderRadius: 12, padding: 12 }}>
            <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Lances</div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em' }}>7</div>
          </div>
          <div style={{ flex: 1, background: 'var(--cp-surface)', border: '1px solid var(--cp-border)', borderRadius: 12, padding: 12 }}>
            <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Faixa</div>
            <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>R$ 950–1.450</div>
          </div>
        </div>

        {proposals.map((p, i) => <ProposalCard key={i} {...p} />)}
      </div>

      <MobileTabBar active="list" />
    </div>
  );
}

function ProposalCard({ name, cat, rating, jobs, verified, price, days, msg, highlight }) {
  return (
    <div className="cp-card" style={{
      padding: 14, marginBottom: 12, position: 'relative',
      borderColor: highlight === 'best' ? 'var(--cp-primary)' : 'var(--cp-border)',
      borderWidth: highlight === 'best' ? 2 : 1,
    }}>
      {highlight === 'best' && (
        <div style={{
          position: 'absolute', top: -10, left: 12,
          background: 'var(--cp-primary)', color: 'white',
          padding: '3px 10px', borderRadius: 999,
          fontSize: 10.5, fontWeight: 700, letterSpacing: '.04em',
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          {Icon.flame(10, 'white')} MELHOR ESCOLHA
        </div>
      )}
      <div style={{ display: 'flex', gap: 12 }}>
        <Avatar name={name} size="md" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ fontWeight: 600, fontSize: 14.5 }}>{name}</span>
            {verified && <Verified />}
          </div>
          <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>{cat}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4, fontSize: 12 }}>
            <span style={{ color: '#FFB300' }}>{Icon.star(12)}</span>
            <b>{rating}</b>
            <span style={{ color: 'var(--cp-text-muted)' }}>· {jobs} jobs</span>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, color: 'var(--cp-text-muted)', textTransform: 'uppercase', letterSpacing: '.04em', fontWeight: 600 }}>Total</div>
          <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.02em' }}>
            R$ {price.toLocaleString('pt-BR')}
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--cp-text-muted)' }}>{days} dias</div>
        </div>
      </div>
      <div style={{
        marginTop: 12, padding: 10, borderRadius: 10,
        background: 'var(--cp-surface-2)', fontSize: 12.5, lineHeight: 1.45,
        color: 'var(--cp-text)',
      }}>
        "{msg}"
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button className="cp-btn-ghost" style={{ flex: 1, padding: '10px', fontSize: 13 }}>
          {Icon.chat(15)} Conversar
        </button>
        <button className="cp-btn-primary" style={{ flex: 1, padding: '10px', fontSize: 13, boxShadow: 'none' }}>
          Ver perfil {Icon.arrowRight(13)}
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 5) PERFIL DO PRO
// ─────────────────────────────────────────────────────────────
function MobileProProfile() {
  return (
    <div className="cp cp-screen">
      {/* Cover with gradient */}
      <div style={{ position: 'relative', height: 180,
        background: 'linear-gradient(135deg, #FFE0B2, #FFAB91 50%, #FF7043)',
      }}>
        <div style={{ position: 'absolute', top: 60, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', zIndex: 2 }}>
          <button style={{
            width: 38, height: 38, borderRadius: 999,
            background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(20px)',
            border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--cp-text)', cursor: 'pointer',
          }}>{Icon.back(18)}</button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{
              width: 38, height: 38, borderRadius: 999,
              background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(20px)',
              border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--cp-text)', cursor: 'pointer',
            }}>{Icon.heart(16)}</button>
            <button style={{
              width: 38, height: 38, borderRadius: 999,
              background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(20px)',
              border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--cp-text)', cursor: 'pointer',
            }}>{Icon.share(15)}</button>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', background: 'var(--cp-bg)' }} className="cp-noscroll">
        {/* Profile head */}
        <div style={{ padding: '0 20px', marginTop: -50, position: 'relative' }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end' }}>
            <div style={{ position: 'relative' }}>
              <Avatar name="Carlos Souza" size="lg" />
              <div style={{ position: 'absolute', bottom: 4, right: 4, width: 14, height: 14, background: 'var(--cp-success)', borderRadius: 999, border: '2.5px solid var(--cp-bg)' }} />
            </div>
            <div style={{ flex: 1, paddingBottom: 6 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.02em' }}>Carlos Souza</span>
                <Verified size={16}/>
              </div>
              <div style={{ fontSize: 13, color: 'var(--cp-text-muted)' }}>Pintor profissional · Pinheiros</div>
            </div>
          </div>
        </div>

        {/* Stats grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, margin: '20px 20px 0', background: 'var(--cp-border)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--cp-border)' }}>
          {[
            { v: '4.9', l: 'Avaliação', sup: <span style={{ color: '#FFB300' }}>{Icon.star(12)}</span> },
            { v: '312', l: 'Trabalhos' },
            { v: '7 anos', l: 'Na plataforma' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--cp-surface)', padding: '14px 8px', textAlign: 'center' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 17, fontWeight: 800 }}>
                {s.v}{s.sup}
              </div>
              <div style={{ fontSize: 11.5, color: 'var(--cp-text-muted)' }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Badges */}
        <div style={{ padding: '16px 20px 0', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span className="cp-pill is-primary">🔥 Top 5% em Pinheiros</span>
          <span className="cp-pill"><span style={{ color: 'var(--cp-success)' }}>✓</span> Doc. verificada</span>
          <span className="cp-pill">⚡ Responde em 8 min</span>
        </div>

        {/* About */}
        <div style={{ padding: '20px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--cp-text-muted)', marginBottom: 8 }}>Sobre</div>
          <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--cp-text)' }}>
            Trabalho com pintura residencial e comercial há 12 anos. Atendo toda Zona Oeste com tinta premium incluída. Garantia escrita em todos os serviços.
          </div>
        </div>

        {/* Portfolio */}
        <div style={{ padding: '0 20px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--cp-text-muted)', marginBottom: 10, display: 'flex', justifyContent: 'space-between' }}>
            <span>Portfólio (24)</span>
            <span style={{ color: 'var(--cp-primary)', textTransform: 'none', letterSpacing: 0 }}>Ver tudo</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            {['paint', 'home', 'kitchen', 'bath', 'paint', 'home'].map((k, i) => (
              <PhotoPlaceholder key={i} kind={k} h={92} />
            ))}
          </div>
        </div>

        {/* Recent reviews */}
        <div style={{ padding: '24px 20px 20px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--cp-text-muted)', marginBottom: 10 }}>Avaliações</div>
          <div className="cp-card" style={{ padding: 14 }}>
            <div style={{ display: 'flex', gap: 10 }}>
              <Avatar name="Helena P" size="sm" />
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontWeight: 600, fontSize: 13.5 }}>Helena P.</span>
                  <span style={{ fontSize: 11.5, color: 'var(--cp-text-muted)' }}>2 sem.</span>
                </div>
                <Stars value={5} size={11}/>
                <div style={{ fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>
                  Trabalho impecável. Pontual, organizado e ainda fez ajustes finos sem cobrar a mais. Recomendo!
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{ height: 100 }} />
      </div>

      {/* Sticky CTA */}
      <div style={{
        padding: '14px 20px 30px',
        borderTop: '1px solid var(--cp-border)',
        background: 'var(--cp-surface)',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>Proposta de Carlos</div>
          <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.02em' }}>R$ 1.180 <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--cp-text-muted)' }}>· 2 dias</span></div>
        </div>
        <button className="cp-btn-ghost" style={{ width: 46, height: 46, padding: 0, borderRadius: 14 }}>
          {Icon.chat(18)}
        </button>
        <button className="cp-btn-primary" style={{ flex: 1.4, padding: '13px 14px' }}>
          Aceitar proposta
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 6) CHAT
// ─────────────────────────────────────────────────────────────
function MobileChat() {
  return (
    <div className="cp cp-screen">
      {/* Header */}
      <div style={{ padding: '60px 16px 14px', borderBottom: '1px solid var(--cp-border)', background: 'var(--cp-surface)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text)', cursor: 'pointer' }}>
          {Icon.back(20)}
        </button>
        <Avatar name="Carlos Souza" size="sm" />
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', gap: 4 }}>
            Carlos Souza <Verified size={12} />
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--cp-success)', display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 6, height: 6, background: 'var(--cp-success)', borderRadius: 999 }} />
            Online · responde em 8 min
          </div>
        </div>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text-muted)', cursor: 'pointer' }}>
          ⋯
        </button>
      </div>

      {/* Job summary banner */}
      <div style={{
        padding: '10px 16px', background: 'var(--cp-primary-tint)',
        borderBottom: '1px solid var(--cp-border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 9, overflow: 'hidden', flexShrink: 0 }}>
          <PhotoPlaceholder kind="paint" h={36} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600 }}>Pintar sala e quarto</div>
          <div style={{ fontSize: 11, color: 'var(--cp-text-muted)' }}>Proposta R$ 1.180 · em análise</div>
        </div>
        <span className="cp-pill is-primary" style={{ fontSize: 10.5 }}>Detalhes</span>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', gap: 8 }} className="cp-noscroll">
        {/* Date sep */}
        <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--cp-text-soft)', margin: '4px 0 8px' }}>Hoje</div>

        <ChatBubble side="them" text="Olá Marina! Vi seu pedido. Posso passar amanhã às 14h para medir e confirmar o orçamento?" time="14:02" />
        <ChatBubble side="them" text="Trabalho com tinta Coral premium incluída no preço. Garantia de 1 ano contra descascamento." time="14:02" />
        <ChatBubble side="me"   text="Perfeito! Pode vir amanhã sim. Endereço: Rua Aspicuelta, 233 — apto 64." time="14:08" />
        <ChatBubble side="me"   text="Tem foto de algum trabalho parecido?" time="14:08" />
        <ChatBubble side="them" image="paint" time="14:11" />
        <ChatBubble side="them" text="Aqui um similar que terminei semana passada. Sala + 1 quarto, 2 demãos." time="14:11" />

        {/* Auto suggestion */}
        <div style={{
          alignSelf: 'center', marginTop: 8,
          padding: '8px 12px', borderRadius: 14,
          background: 'var(--cp-surface-2)', border: '1px dashed var(--cp-border)',
          fontSize: 11.5, color: 'var(--cp-text-muted)',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {Icon.shield(12)} Pagamento sai apenas após você aprovar o serviço
        </div>
      </div>

      {/* Composer */}
      <div style={{ padding: '10px 12px 14px', borderTop: '1px solid var(--cp-border)', background: 'var(--cp-surface)', display: 'flex', alignItems: 'flex-end', gap: 8 }}>
        <button style={{
          width: 38, height: 38, borderRadius: 999, border: '1px solid var(--cp-border)',
          background: 'var(--cp-surface)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--cp-text-muted)', flexShrink: 0,
        }}>{Icon.plus(18)}</button>
        <div style={{
          flex: 1, padding: '10px 14px', border: '1px solid var(--cp-border)',
          borderRadius: 20, background: 'var(--cp-surface-2)',
          fontSize: 14, color: 'var(--cp-text-soft)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
        }}>
          <span>Mensagem...</span>
          <span style={{ display: 'flex', gap: 8, color: 'var(--cp-text-muted)' }}>
            {Icon.camera(16)}{Icon.mic(16)}
          </span>
        </div>
        <button style={{
          width: 38, height: 38, borderRadius: 999, background: 'var(--cp-primary)',
          color: 'white', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>{Icon.send(18)}</button>
      </div>

      {/* Home indicator covered by IOSDevice */}
      <div style={{ height: 18 }}/>
    </div>
  );
}

function ChatBubble({ side, text, image, time }) {
  const me = side === 'me';
  return (
    <div style={{ alignSelf: me ? 'flex-end' : 'flex-start', maxWidth: '78%' }}>
      <div style={{
        background: me ? 'var(--cp-primary)' : 'var(--cp-surface)',
        color: me ? 'white' : 'var(--cp-text)',
        border: me ? 'none' : '1px solid var(--cp-border)',
        padding: image ? 4 : '9px 13px',
        borderRadius: 18,
        borderBottomRightRadius: me ? 6 : 18,
        borderBottomLeftRadius: me ? 18 : 6,
        fontSize: 13.5, lineHeight: 1.45,
      }}>
        {image && <PhotoPlaceholder kind={image} h={120} />}
        {text && <div style={{ padding: image ? '8px 8px 4px' : 0 }}>{text}</div>}
      </div>
      <div style={{ fontSize: 10, color: 'var(--cp-text-soft)', marginTop: 3, textAlign: me ? 'right' : 'left', padding: '0 4px' }}>{time}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 7) ACOMPANHAMENTO + AVALIAÇÃO
// ─────────────────────────────────────────────────────────────
function MobileTracking() {
  return (
    <div className="cp cp-screen">
      <div style={{ padding: '60px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text)', cursor: 'pointer' }}>
          {Icon.back(20)}
        </button>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Acompanhamento</div>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text-muted)', cursor: 'pointer' }}>⋯</button>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px 30px' }} className="cp-noscroll">
        {/* Live status hero */}
        <div style={{
          background: 'linear-gradient(135deg, #16A34A 0%, #15803D 100%)',
          color: 'white', borderRadius: 20, padding: 18,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 600, opacity: .9 }}>
            <span style={{ position: 'relative', width: 8, height: 8 }}>
              <span style={{ position: 'absolute', inset: 0, background: 'white', borderRadius: 999 }} />
              <span className="cp-ping" style={{ background: 'white' }} />
            </span>
            EM ANDAMENTO
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 6 }}>
            Carlos está a caminho
          </div>
          <div style={{ fontSize: 13, opacity: .9, marginTop: 4 }}>
            Chegada estimada: <b>14h28</b> · 12 min
          </div>
          {/* Mini map mock */}
          <div style={{
            marginTop: 14, height: 120, borderRadius: 14,
            background: 'rgba(255,255,255,.1)', border: '1px solid rgba(255,255,255,.2)',
            position: 'relative', overflow: 'hidden',
          }}>
            <svg width="100%" height="100%" viewBox="0 0 280 120" style={{ position: 'absolute', inset: 0 }}>
              <path d="M30 100 Q80 40, 140 60 T250 30" stroke="white" strokeWidth="3" strokeLinecap="round" fill="none" strokeDasharray="6 6" />
              <circle cx="30" cy="100" r="6" fill="white"/>
              <circle cx="250" cy="30" r="8" fill="#FF5722" stroke="white" strokeWidth="3"/>
            </svg>
            <div style={{ position: 'absolute', bottom: 8, left: 10, fontSize: 11, fontWeight: 600 }}>📍 Você</div>
            <div style={{ position: 'absolute', top: 8, right: 10, fontSize: 11, fontWeight: 600 }}>🚗 Carlos</div>
          </div>
        </div>

        {/* Job details */}
        <div className="cp-card" style={{ marginTop: 14, padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Avatar name="Carlos Souza" size="md" />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 14.5, display: 'flex', alignItems: 'center', gap: 4 }}>
                Carlos Souza <Verified size={12}/>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--cp-text-muted)' }}>
                <span style={{ color: '#FFB300' }}>{Icon.star(11)}</span> 4.9 · 312 jobs
              </div>
            </div>
            <button className="cp-btn-ghost" style={{ width: 40, height: 40, padding: 0, borderRadius: 12 }}>
              {Icon.chat(16)}
            </button>
            <button className="cp-btn-ghost" style={{ width: 40, height: 40, padding: 0, borderRadius: 12 }}>
              📞
            </button>
          </div>
        </div>

        {/* Timeline */}
        <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--cp-text-muted)', margin: '20px 0 12px' }}>
          Linha do tempo
        </div>
        <div style={{ position: 'relative' }}>
          {[
            { state: 'done', title: 'Pedido publicado', sub: 'Hoje, 09:42', icon: '📝' },
            { state: 'done', title: '7 propostas recebidas', sub: 'Hoje, 11:20', icon: '🔥' },
            { state: 'done', title: 'Carlos contratado', sub: 'Hoje, 13:05', icon: '🤝' },
            { state: 'live', title: 'A caminho', sub: 'Agora · ETA 14:28', icon: '🚗' },
            { state: 'next', title: 'Início do serviço', sub: 'Aguardando', icon: '🎨' },
            { state: 'next', title: 'Conclusão e avaliação', sub: 'Aguardando', icon: '✅' },
          ].map((t, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: 16, position: 'relative' }}>
              {/* Vertical line */}
              {i < arr.length - 1 && (
                <div style={{
                  position: 'absolute', left: 17, top: 36, bottom: -4, width: 2,
                  background: t.state === 'done' ? 'var(--cp-success)' : 'var(--cp-border)',
                }} />
              )}
              <div style={{
                width: 36, height: 36, borderRadius: 999,
                background: t.state === 'done' ? 'var(--cp-success)' : t.state === 'live' ? 'var(--cp-primary)' : 'var(--cp-surface-2)',
                color: t.state === 'next' ? 'var(--cp-text-soft)' : 'white',
                border: t.state === 'next' ? '1.5px dashed var(--cp-border)' : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, fontSize: 15, position: 'relative', zIndex: 1,
              }}>
                {t.state === 'live' ? <span className="cp-ping" /> : null}
                {t.state === 'done' ? Icon.check(16) : t.icon}
              </div>
              <div style={{ flex: 1, paddingTop: 6 }}>
                <div style={{
                  fontWeight: 600, fontSize: 14,
                  color: t.state === 'next' ? 'var(--cp-text-soft)' : 'var(--cp-text)',
                }}>{t.title}</div>
                <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>{t.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Payment protection */}
        <div className="cp-card" style={{ marginTop: 6, padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{
            width: 40, height: 40, borderRadius: 12, background: 'var(--cp-primary-soft)',
            color: 'var(--cp-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>{Icon.shield(20)}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Pagamento protegido</div>
            <div style={{ fontSize: 12, color: 'var(--cp-text-muted)' }}>R$ 1.180 retidos · liberados após sua aprovação</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 8) AVALIAÇÃO PÓS-SERVIÇO
// ─────────────────────────────────────────────────────────────
function MobileReview() {
  const [rating, setRating] = React.useState(5);
  const tags = ['Pontual', 'Comunicativo', 'Caprichoso', 'Limpo', 'Profissional', 'Bom preço', 'Recomendo'];
  const [picked, setPicked] = React.useState(['Pontual', 'Caprichoso', 'Recomendo']);
  const togglePick = (t) => {
    setPicked(p => p.includes(t) ? p.filter(x => x !== t) : [...p, t]);
  };

  return (
    <div className="cp cp-screen">
      <div style={{ padding: '60px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{ background: 'transparent', border: 'none', color: 'var(--cp-text-muted)', cursor: 'pointer', fontSize: 13 }}>
          Pular
        </button>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Avaliação</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '20px' }} className="cp-noscroll">
        {/* Pro card */}
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <Avatar name="Carlos Souza" size="lg" ring="rgba(255,87,34,.3)" />
          <div style={{ marginTop: 10, fontSize: 13, color: 'var(--cp-text-muted)' }}>Como foi com</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 20, fontWeight: 700, letterSpacing: '-.02em' }}>
            Carlos Souza <Verified size={14}/>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--cp-text-muted)' }}>Pintura · concluído hoje, 17:42</div>
        </div>

        {/* Rating */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 8 }}>
          {[1, 2, 3, 4, 5].map(n => (
            <button
              key={n}
              onClick={() => setRating(n)}
              style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                color: n <= rating ? '#FFB300' : 'rgba(0,0,0,.12)',
                transform: n <= rating ? 'scale(1.05)' : 'scale(1)',
                transition: 'transform .15s, color .15s',
              }}>
              <svg width="38" height="38" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3 7 7.5.6-5.7 5 1.7 7.4L12 18l-6.5 4 1.7-7.4-5.7-5L9 9z"/>
              </svg>
            </button>
          ))}
        </div>
        <div style={{ textAlign: 'center', fontSize: 14, fontWeight: 600, marginBottom: 28 }}>
          {rating === 5 ? 'Excelente!' : rating === 4 ? 'Muito bom' : rating === 3 ? 'Ok' : rating === 2 ? 'Não foi bem' : 'Péssimo'}
        </div>

        {/* Tags */}
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>O que mais te marcou?</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 24 }}>
          {tags.map(t => (
            <button
              key={t}
              onClick={() => togglePick(t)}
              className="cp-chip"
              style={{
                padding: '6px 12px', fontSize: 12.5,
                background: picked.includes(t) ? 'var(--cp-primary)' : 'var(--cp-surface)',
                color: picked.includes(t) ? 'white' : 'var(--cp-text)',
                borderColor: picked.includes(t) ? 'var(--cp-primary)' : 'var(--cp-border)',
              }}
            >
              {picked.includes(t) && <span style={{ marginRight: 2 }}>✓</span>}
              {t}
            </button>
          ))}
        </div>

        {/* Comment */}
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Conte como foi (opcional)</div>
        <div style={{
          background: 'var(--cp-surface)', border: '1px solid var(--cp-border)',
          borderRadius: 14, padding: 14, fontSize: 13.5, lineHeight: 1.5,
          minHeight: 90, color: 'var(--cp-text)',
        }}>
          Trabalho impecável! Carlos foi pontual, organizado e ainda fez ajustes finos sem cobrar a mais. Já agendei para pintar a área externa.
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 14, padding: 12, borderRadius: 12, background: 'var(--cp-primary-tint)' }}>
          <input type="checkbox" defaultChecked style={{ accentColor: 'var(--cp-primary)' }} />
          <div style={{ fontSize: 12.5 }}>Adicionar à lista de favoritos</div>
        </div>
      </div>

      <div style={{ padding: '14px 20px 30px', borderTop: '1px solid var(--cp-border)', background: 'var(--cp-surface)' }}>
        <button className="cp-btn-primary" style={{ width: '100%' }}>
          Publicar avaliação
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 9) TAB BAR (shared)
// ─────────────────────────────────────────────────────────────
function MobileTabBar({ active = 'home' }) {
  const tabs = [
    { id: 'home', label: 'Início', icon: Icon.home },
    { id: 'list', label: 'Pedidos', icon: Icon.list },
    { id: 'new', label: '', icon: null, big: true },
    { id: 'chat', label: 'Mensagens', icon: Icon.chat },
    { id: 'me', label: 'Eu', icon: Icon.user },
  ];
  return (
    <div className="cp-tabbar">
      {tabs.map(t => t.big ? (
        <button key={t.id} style={{
          width: 52, height: 52, borderRadius: 18,
          background: 'var(--cp-primary)', color: 'white',
          border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginTop: -22, boxShadow: '0 8px 20px rgba(255,87,34,.4)', cursor: 'pointer',
        }}>{Icon.plus(22)}</button>
      ) : (
        <div key={t.id} className={'cp-tab' + (t.id === active ? ' is-active' : '')}>
          {t.icon(20)}
          <span>{t.label}</span>
          <span className="cp-tab-dot" />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  MobileOnboarding, MobileHome, MobileNewRequest, MobileProposals,
  MobileProProfile, MobileChat, MobileTracking, MobileReview, MobileTabBar,
});