// ============================================================
// SCREENS — Proprietário (P) part 2
// ============================================================
const { useState: useStateO2, useEffect: useEffectO2, useRef: useRefO2 } = React;

// ============ P6 — SOLICITAR ORÇAMENTO ============
function QuoteNew({ go }) {
  const [cat, setCat] = useStateO2('mecanica');
  const [urgency, setUrgency] = useStateO2('media');
  const [desc, setDesc] = useStateO2('Aproximando-se de 100h de motor. Gostaria de revisão completa: óleo, filtros, velas, inspeção da hélice. Notei vibração leve em rotação alta.');
  const [photos, setPhotos] = useStateO2([1,2]);

  return (
    <div className="screen-enter" style={{paddingBottom:160}}>
      <ScreenHeader title="Solicitar orçamento" onBack={()=>go('home')}/>
      <div style={{padding:'16px 16px 0', display:'flex', flexDirection:'column', gap:18}}>
        {/* Boat */}
        <div style={{
          display:'flex', alignItems:'center', gap:12,
          background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:14, padding:'10px 12px',
        }}>
          <BoatPlaceholder width={56} height={42} rounded={8}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{BOATS[0].name}</div>
            <div style={{fontSize:11.5, color:'var(--text-muted)'}}>{BOATS[0].marina.split(',')[0]} · {BOATS[0].slip}</div>
          </div>
          <button style={{background:'none', border:'none', color:'var(--primary)', fontWeight:600, fontSize:13, cursor:'pointer'}}>Trocar</button>
        </div>

        <Field label="Categoria">
          <div className="scroll-clean" style={{display:'flex', gap:8, overflowX:'auto', margin:'2px -16px 0', padding:'2px 16px 4px'}}>
            {CATEGORIES.map(c=>(
              <CategoryChip key={c.id} icon={c.icon} label={c.label} active={cat===c.id} onClick={()=>setCat(c.id)}/>
            ))}
          </div>
        </Field>

        <Field label="Descrição do problema" hint="Quanto mais detalhe, mais precisa a cotação.">
          <Textarea value={desc} onChange={e=>setDesc(e.target.value)}/>
        </Field>

        <Field label="Urgência">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
            {[
              { key:'baixa', label:'Programada', sub:'até 2 semanas' },
              { key:'media', label:'Em breve', sub:'esta semana' },
              { key:'alta',  label:'Importante', sub:'em 48h' },
            ].map(u=>{
              const on = urgency === u.key;
              return (
                <button key={u.key} onClick={()=>setUrgency(u.key)} className="ripple" style={{
                  background: on ? 'var(--primary)' : 'var(--surface)',
                  color: on ? '#fff' : 'var(--text)',
                  border: '1px solid ' + (on ? 'var(--primary)' : 'var(--border)'),
                  borderRadius:12, padding:'10px 8px', cursor:'pointer', textAlign:'left',
                }}>
                  <div style={{fontSize:13, fontWeight:600}}>{u.label}</div>
                  <div style={{fontSize:11, color: on ? 'rgba(255,255,255,0.7)':'var(--text-subtle)', marginTop:2}}>{u.sub}</div>
                </button>
              );
            })}
          </div>
        </Field>

        <Field label="Fotos e vídeo" hint="Até 5 arquivos. Mostre o problema de perto."  optional>
          <div className="scroll-clean" style={{display:'flex', gap:10, overflowX:'auto', paddingBottom:4}}>
            {photos.map(p=>(
              <div key={p} className="stripe-placeholder" style={{
                width:84, height:84, borderRadius:10, flexShrink:0, position:'relative',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <span className="mono" style={{fontSize:10, color:'#6B7A91', letterSpacing:.3}}>IMG_{p}</span>
                <button onClick={()=>setPhotos(photos.filter(x=>x!==p))} style={{
                  position:'absolute', top:4, right:4, width:20, height:20, borderRadius:20,
                  background:'rgba(0,0,0,0.5)', border:'none', color:'#fff', cursor:'pointer',
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}><Icon name="X" size={12} color="#fff" strokeWidth={2.4}/></button>
              </div>
            ))}
            <button className="ripple" onClick={()=>setPhotos([...photos, photos.length+1])} style={{
              width:84, height:84, borderRadius:10, flexShrink:0,
              border:'1.5px dashed var(--border-strong)', background:'transparent',
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
              gap:4, cursor:'pointer', color:'var(--text-muted)',
            }}>
              <Icon name="Plus" size={18} strokeWidth={2}/>
              <span style={{fontSize:11}}>Adicionar</span>
            </button>
          </div>
        </Field>
      </div>

      {/* AI estimate footer */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px 28px',
        background:'rgba(250,250,250,0.96)', borderTop:'1px solid var(--border)',
        backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
      }}>
        <div style={{
          display:'flex', gap:10, alignItems:'flex-start',
          background:'var(--accent-soft)', border:'1px solid #E9DDC2',
          borderRadius:12, padding:'10px 12px', marginBottom:10,
        }}>
          <Icon name="Sparkles" size={15} color="#7D6A47" strokeWidth={2}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:12, color:'#3A2D14'}}>
              <span style={{fontWeight:600}}>Estimativa por IA:</span> <span className="mono" style={{fontWeight:600}}>R$ 1.200 – R$ 1.800</span>
            </div>
            <div style={{fontSize:11, color:'#7D6A47', marginTop:2}}>Sujeita à validação humana do prestador.</div>
          </div>
        </div>
        <Btn variant="primary" full onClick={()=>go('quotes')} iconRight="ArrowRight">Solicitar orçamento</Btn>
      </div>
    </div>
  );
}

// ============ P7 — COTAÇÕES RECEBIDAS ============
function QuotesScreen({ go }) {
  const [loading, setLoading] = useStateO2(true);
  useEffectO2(()=>{
    const t = setTimeout(()=>setLoading(false), 900);
    return ()=>clearTimeout(t);
  }, []);
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      <ScreenHeader title="Cotações recebidas" subtitle="Revisão de 100h · Bonança" onBack={()=>go('home')}/>
      <div style={{padding:'12px 16px 0'}}>
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          marginBottom:14, padding:'10px 12px', background:'var(--surface)',
          border:'1px solid var(--border)', borderRadius:12,
        }}>
          <div>
            <div style={{fontSize:12.5, color:'var(--text-muted)'}}>
              {loading ? 'Buscando prestadores próximos…' : '3 prestadores responderam'}
            </div>
            <div className="mono" style={{fontSize:12.5, color:'var(--text-subtle)', marginTop:2}}>OS-2826 · solicitada há 6 horas</div>
          </div>
          <Icon name="Clock" size={18} color="var(--text-subtle)" strokeWidth={1.8}/>
        </div>

        {loading ? (
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            {[0,1,2].map(i=>(
              <div key={i} style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, padding:16}}>
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:12}}>
                  <Skel w={36} h={36} r={36}/>
                  <div style={{flex:1, display:'flex', flexDirection:'column', gap:6}}>
                    <Skel w="50%" h={12}/>
                    <Skel w="35%" h={10}/>
                  </div>
                </div>
                <Skel w="40%" h={22} style={{marginBottom:10}}/>
                <Skel w="100%" h={11} style={{marginBottom:6}}/>
                <Skel w="80%" h={11}/>
              </div>
            ))}
          </div>
        ) : (
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {QUOTES.map(q=>{
            const pro = PROS.find(p=>p.id===q.proId);
            return (
              <QuoteCard key={q.id} quote={q} pro={pro}
                onChat={()=>go('chat')}
                onAccept={()=>go('order-detail')}/>
            );
          })}
        </div>
        )}

        <div style={{
          display:'flex', gap:10, alignItems:'flex-start',
          background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:12, padding:'12px 14px', marginTop:16,
        }}>
          <Icon name="ShieldCheck" size={16} color="var(--primary)" strokeWidth={2}/>
          <div style={{fontSize:12.5, color:'var(--text-muted)', lineHeight:1.5}}>
            Pagamento retido em escrow até você confirmar a conclusão do serviço.
            O Convés não libera valores ao prestador sem sua aprovação.
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ P8 — PERFIL DO PRESTADOR ============
function ProDetail({ go }) {
  const pro = PROS[0];
  const [tab, setTab] = useStateO2('sobre');
  const tabs = ['sobre','avaliacoes','trabalhos','certificacoes'];
  const tabLabels = { sobre:'Sobre', avaliacoes:'Avaliações', trabalhos:'Trabalhos', certificacoes:'Certificações' };

  return (
    <div className="screen-enter" style={{paddingBottom:120}}>
      <ScreenHeader title="" onBack={()=>go('quotes')} transparent
        right={<button className="ripple" style={{
          width:36, height:36, borderRadius:36, border:'1px solid var(--border)',
          background:'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="Share2" size={16} strokeWidth={2}/></button>}/>
      <div style={{padding:'4px 16px 0'}}>
        {/* Header card */}
        <div style={{textAlign:'center', padding:'8px 0 16px'}}>
          <Avatar tone={pro.avatarTone} name={pro.short} size={80}/>
          <div style={{marginTop:12, fontSize:20, fontWeight:700, color:'var(--text)', letterSpacing:-.3, display:'inline-flex', alignItems:'center', gap:6}}>
            {pro.name}
            <Icon name="BadgeCheck" size={18} color="#1F3864" strokeWidth={2}/>
          </div>
          <div style={{fontSize:13.5, color:'var(--text-muted)', marginTop:2}}>{pro.specialty}</div>
          <div style={{display:'flex', justifyContent:'center', marginTop:10}}>
            <TrustScoreBadge score={pro.trust} count={pro.reviewCount} size="lg"/>
          </div>
        </div>

        {/* Stats */}
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr 1fr',
          background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:16, padding:'14px 0', marginBottom:18,
        }}>
          {[
            { label:'Trabalhos', value:'168' },
            { label:'No prazo', value:'97%' },
            { label:'Resposta', value:'<2h' },
          ].map((s,i,arr)=>(
            <div key={s.label} style={{
              textAlign:'center', borderRight: i<arr.length-1 ? '1px solid var(--border)' : 'none',
            }}>
              <div className="mono" style={{fontSize:18, fontWeight:700, color:'var(--text)', letterSpacing:-.3}}>{s.value}</div>
              <div style={{fontSize:11, color:'var(--text-muted)', marginTop:2}}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{
          display:'flex', gap:0, marginBottom:16, borderBottom:'1px solid var(--border)',
        }}>
          {tabs.map(t=>(
            <button key={t} onClick={()=>setTab(t)} style={{
              flex:1, background:'none', border:'none', cursor:'pointer',
              padding:'10px 4px', fontSize:13, fontWeight: tab===t?600:500,
              color: tab===t ? 'var(--primary)' : 'var(--text-muted)',
              borderBottom: '2px solid ' + (tab===t ? 'var(--primary)' : 'transparent'),
              marginBottom:-1,
            }}>{tabLabels[t]}</button>
          ))}
        </div>

        {tab==='sobre' && (
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <p style={{margin:0, fontSize:14, lineHeight:1.6, color:'var(--text)'}}>{pro.bio}</p>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {[
                { icon:'MapPin', label:'Atende', value:'Marina da Glória, Iate Clube do RJ' },
                { icon:'Clock', label:'Disponibilidade', value:pro.eta },
                { icon:'Languages', label:'Idiomas', value:'Português, Inglês' },
                { icon:'CreditCard', label:'Aceita', value:'Pix, cartão, transferência' },
              ].map(d=>(
                <div key={d.label} style={{display:'flex', alignItems:'flex-start', gap:10}}>
                  <Icon name={d.icon} size={16} color="var(--text-muted)" strokeWidth={1.8} style={{marginTop:2}}/>
                  <div>
                    <div style={{fontSize:11.5, color:'var(--text-subtle)', textTransform:'uppercase', letterSpacing:.4}}>{d.label}</div>
                    <div style={{fontSize:14, color:'var(--text)', marginTop:1}}>{d.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab==='avaliacoes' && (
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            {[
              { name:'Ricardo F.', date:'mar/26', text:'Pontual, técnico e organizado. Identificou um problema na bomba de circulação que outro mecânico não tinha visto.', dims:{pontualidade:5,tecnica:5,limpeza:5} },
              { name:'Henrique D.', date:'fev/26', text:'Bom serviço, comunicação clara. Levou meio dia a mais que o estimado.', dims:{pontualidade:4,tecnica:5,limpeza:5} },
              { name:'Camila T.', date:'jan/26', text:'Recomendo. Deixou o compartimento limpo, explicou cada peça trocada.', dims:{pontualidade:5,tecnica:5,limpeza:5} },
            ].map((r,i)=>(
              <div key={i} style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:14}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6}}>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <Avatar tone="#8A8A8A" name={r.name} size={28}/>
                    <span style={{fontSize:13.5, fontWeight:600}}>{r.name}</span>
                  </div>
                  <span style={{fontSize:12, color:'var(--text-subtle)'}}>{r.date}</span>
                </div>
                <div style={{display:'flex', gap:3, marginBottom:8}}>
                  {[1,2,3,4,5].map(n=>{
                    const score = Math.round((r.dims.pontualidade + r.dims.tecnica + r.dims.limpeza)/3);
                    return <Icon key={n} name="Star" size={13} color={n<=score ? '#C5A572':'#E5E7EB'} strokeWidth={1.5} style={{fill: n<=score ? '#C5A572':'transparent'}}/>;
                  })}
                </div>
                <p style={{margin:0, fontSize:13.5, color:'var(--text)', lineHeight:1.5}}>{r.text}</p>
              </div>
            ))}
          </div>
        )}

        {tab==='trabalhos' && (
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {[1,2,3,4,5,6].map(i=>(
              <div key={i} className="boat-illo" style={{height:110, borderRadius:12, position:'relative', overflow:'hidden', display:'flex', alignItems:'flex-end'}}>
                <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <BoatPlaceholder width="80%" height="60%"/>
                </div>
                <div style={{
                  position:'relative', width:'100%', padding:'6px 8px',
                  background:'linear-gradient(transparent, rgba(15,20,25,0.7))',
                  fontSize:10.5, color:'#fff', fontWeight:500,
                }}>Revisão Mercury · jan/26</div>
              </div>
            ))}
          </div>
        )}

        {tab==='certificacoes' && (
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { icon:'ShieldCheck', name:'CIR — Cadastro Individual de Reparador', issuer:'Marinha do Brasil', validUntil:'mar/2028', verified:true },
              { icon:'Award', name:'Mercury Certified Technician', issuer:'Mercury Marine', validUntil:'dez/2027', verified:true },
              { icon:'FileCheck', name:'Responsabilidade Civil Profissional', issuer:'Apólice 8821345 · Mapfre', validUntil:'set/2026', verified:true },
              { icon:'GraduationCap', name:'Curso de Diesel Marítimo', issuer:'SENAI · 2019', validUntil:null, verified:false },
            ].map(c=>(
              <div key={c.name} style={{
                display:'flex', gap:12, alignItems:'flex-start',
                background:'var(--surface)', border:'1px solid var(--border)',
                borderRadius:14, padding:14,
              }}>
                <div style={{
                  width:34, height:34, borderRadius:10, background:'var(--accent-soft)',
                  border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                }}>
                  <Icon name={c.icon} size={17} color="#7D6A47" strokeWidth={1.8}/>
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{display:'flex', alignItems:'center', gap:6}}>
                    <span style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{c.name}</span>
                    {c.verified && <Icon name="BadgeCheck" size={13} color="var(--success)" strokeWidth={2.2}/>}
                  </div>
                  <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>{c.issuer}</div>
                  {c.validUntil && <div className="mono" style={{fontSize:11.5, color:'var(--text-subtle)', marginTop:3}}>válido até {c.validUntil}</div>}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px 28px',
        background:'rgba(250,250,250,0.96)', borderTop:'1px solid var(--border)',
        backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
        display:'flex', gap:10,
      }}>
        <Btn variant="secondary" onClick={()=>go('chat')} icon="MessageSquare">Conversar</Btn>
        <Btn variant="primary" full onClick={()=>go('order-detail')}>Aceitar cotação · {brl(QUOTES[0].price)}</Btn>
      </div>
    </div>
  );
}

// ============ P9 — ACOMPANHAMENTO DA OS ============
function OrderDetail({ go }) {
  const order = ORDERS[0];
  const pro = PROS.find(p=>p.id===order.proId);
  return (
    <div className="screen-enter" style={{paddingBottom:120}}>
      <ScreenHeader title={order.id} subtitle={order.title} onBack={()=>go('home')}/>
      <div style={{padding:'12px 16px 0', display:'flex', flexDirection:'column', gap:14}}>
        <OrderStatusPill status={order.status} size="md"/>

        <EscrowProgress step={order.escrowStep}/>

        {/* Pro card */}
        <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, padding:14}}>
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <Avatar tone={pro.avatarTone} name={pro.short} size={48}/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', alignItems:'center', gap:6}}>
                <span style={{fontSize:15, fontWeight:600, color:'var(--text)'}}>{pro.short}</span>
                <Icon name="BadgeCheck" size={14} color="var(--primary)" strokeWidth={2.2}/>
              </div>
              <div style={{fontSize:12.5, color:'var(--text-muted)'}}>{pro.specialty}</div>
            </div>
            <button onClick={()=>go('chat')} className="ripple" style={{
              width:40, height:40, borderRadius:40, background:'var(--primary)', border:'none',
              display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', position:'relative',
            }}>
              <Icon name="MessageSquare" size={17} color="#fff" strokeWidth={2}/>
              <span style={{
                position:'absolute', top:-4, right:-4, width:18, height:18, borderRadius:18,
                background:'var(--accent)', color:'#3A2D14', fontSize:10, fontWeight:700,
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>2</span>
            </button>
          </div>
        </div>

        {/* Service summary */}
        <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, padding:14}}>
          <SectionHeader title="Detalhes do serviço"/>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { label:'Embarcação', value:`${BOATS[0].name} · ${BOATS[0].model}` },
              { label:'Marina', value:`${BOATS[0].marina.split(',')[0]} · vaga ${BOATS[0].slip}` },
              { label:'Agendado', value:'sábado, 16 mai · 09:00' },
              { label:'Total', value:brlFull(order.total), mono:true, bold:true },
            ].map(d=>(
              <div key={d.label} style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12}}>
                <span style={{fontSize:12.5, color:'var(--text-muted)'}}>{d.label}</span>
                <span className={d.mono?'mono':''} style={{fontSize:13.5, color:'var(--text)', fontWeight: d.bold?700:500, textAlign:'right'}}>{d.value}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Map (mocked) */}
        <div style={{
          background:'var(--surface)', border:'1px solid var(--border)', borderRadius:16, overflow:'hidden',
        }}>
          <div style={{padding:14, paddingBottom:10}}>
            <div style={{fontSize:13, fontWeight:600, color:'var(--text)'}}>Prestador a caminho</div>
            <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>Chegada estimada em 18 min</div>
          </div>
          <div style={{
            height:140, position:'relative', overflow:'hidden',
            background:`
              repeating-linear-gradient(45deg, #E9EDF3 0 18px, #DFE5EE 18px 19px),
              linear-gradient(180deg, #DEE6F0, #C8D3E2)
            `,
          }}>
            {/* fake roads */}
            <svg width="100%" height="100%" viewBox="0 0 360 140" style={{position:'absolute', inset:0}}>
              <path d="M-10 50 Q 100 80, 200 60 T 380 90" stroke="#fff" strokeWidth="6" fill="none" strokeLinecap="round"/>
              <path d="M-10 50 Q 100 80, 200 60 T 380 90" stroke="#B7C2D2" strokeWidth="1" fill="none" strokeLinecap="round" strokeDasharray="6 6"/>
              <path d="M40 -10 L 80 140" stroke="#fff" strokeWidth="3" fill="none"/>
              <path d="M250 0 L 220 140" stroke="#fff" strokeWidth="3" fill="none"/>
              {/* dashed route */}
              <path d="M60 110 Q 140 60, 210 70 T 320 40" stroke="#1F3864" strokeWidth="2.5" fill="none" strokeDasharray="4 6" strokeLinecap="round"/>
            </svg>
            {/* pro marker */}
            <div style={{position:'absolute', left:50, top:96, display:'flex', alignItems:'center', gap:6}}>
              <div style={{width:30, height:30, borderRadius:30, background:'var(--primary)', border:'3px solid #fff', boxShadow:'0 2px 6px rgba(0,0,0,0.2)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Icon name="Wrench" size={13} color="#fff" strokeWidth={2.4}/>
              </div>
            </div>
            {/* marina marker */}
            <div style={{position:'absolute', right:30, top:24}}>
              <div style={{width:30, height:30, borderRadius:30, background:'var(--accent)', border:'3px solid #fff', boxShadow:'0 2px 6px rgba(0,0,0,0.2)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Icon name="Anchor" size={13} color="#3A2D14" strokeWidth={2.4}/>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px 28px',
        background:'rgba(250,250,250,0.96)', borderTop:'1px solid var(--border)',
        backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
      }}>
        <Btn variant="primary" full disabled icon="ShieldCheck">Confirmar conclusão (aguardando prestador)</Btn>
      </div>
    </div>
  );
}

// ============ P10 — CHAT IN-APP ============
function ChatScreen({ go }) {
  const [msgs, setMsgs] = useStateO2(CHAT_THREAD);
  const [draft, setDraft] = useStateO2('');
  const [typing, setTyping] = useStateO2(true);
  const scrollRef = useRefO2(null);
  const pro = PROS[0];

  useEffectO2(()=>{
    const t = setTimeout(()=>setTyping(false), 2400);
    return ()=>clearTimeout(t);
  },[]);
  useEffectO2(()=>{
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  });

  function send(){
    if (!draft.trim()) return;
    setMsgs([...msgs, { id:'c'+Date.now(), role:'proprietario', text:draft, at:'agora' }]);
    setDraft('');
  }

  return (
    <div className="screen-enter" style={{height:'100%', display:'flex', flexDirection:'column'}}>
      <div style={{
        background:'rgba(250,250,250,0.94)', backdropFilter:'blur(10px)',
        borderBottom:'1px solid var(--border)', padding:'10px 12px',
        display:'flex', alignItems:'center', gap:10,
      }}>
        <button onClick={()=>go('order-detail')} className="ripple" style={{
          width:36, height:36, borderRadius:36, border:'1px solid var(--border)', background:'var(--surface)',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="ChevronLeft" size={20} strokeWidth={2}/></button>
        <Avatar tone={pro.avatarTone} name={pro.short} size={38}/>
        <div style={{flex:1, minWidth:0}}>
          <div style={{display:'flex', alignItems:'center', gap:5}}>
            <span style={{fontSize:14.5, fontWeight:600, color:'var(--text)'}}>{pro.short}</span>
            <Icon name="BadgeCheck" size={12} color="var(--primary)" strokeWidth={2.2}/>
          </div>
          <div className="mono" style={{fontSize:11, color:'var(--text-subtle)'}}>OS-2826 · Revisão de 100h</div>
        </div>
        <button className="ripple" style={{
          width:36, height:36, borderRadius:36, border:'1px solid var(--border)', background:'var(--surface)',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="HelpCircle" size={16} strokeWidth={2}/></button>
      </div>

      <div ref={scrollRef} className="scroll-clean" style={{
        flex:1, overflowY:'auto', padding:'14px 14px 4px',
        display:'flex', flexDirection:'column', gap:6,
        background:'linear-gradient(180deg, #F5F6F8 0%, #FAFAFA 100%)',
      }}>
        {msgs.map((m,i)=>{
          if (m.role === 'sistema') {
            return (
              <div key={m.id} style={{display:'flex', justifyContent:'center', margin:'8px 0'}}>
                <div style={{
                  display:'inline-flex', alignItems:'center', gap:6,
                  background:'#EDEFF3', color:'var(--text-muted)',
                  fontSize:11.5, padding:'5px 11px', borderRadius:999,
                }}>
                  <Icon name="ShieldCheck" size={11} color="var(--primary)" strokeWidth={2.2}/>
                  {m.text}
                </div>
              </div>
            );
          }
          const own = m.role === 'proprietario';
          const prev = msgs[i-1];
          const grouped = prev && prev.role === m.role;
          return (
            <div key={m.id} style={{display:'flex', justifyContent: own ? 'flex-end' : 'flex-start', marginTop: grouped ? 0:6}}>
              <div style={{maxWidth:'78%'}}>
                {m.kind === 'image' ? (
                  <div className="stripe-placeholder" style={{
                    width:200, height:140, borderRadius:14,
                    display:'flex', alignItems:'flex-end', padding:8,
                  }}>
                    <span className="mono" style={{fontSize:10, color:'#6B7A91'}}>{m.caption}</span>
                  </div>
                ) : (
                  <div style={{
                    background: own ? 'var(--primary)' : 'var(--surface)',
                    color: own ? '#fff' : 'var(--text)',
                    border: own ? 'none' : '1px solid var(--border)',
                    padding:'9px 13px', borderRadius:16,
                    borderBottomRightRadius: own ? 5 : 16,
                    borderBottomLeftRadius: own ? 16 : 5,
                    fontSize:14, lineHeight:1.45,
                  }}>{m.text}</div>
                )}
                <div style={{
                  fontSize:10.5, color:'var(--text-subtle)', marginTop:3,
                  textAlign: own ? 'right' : 'left', padding:'0 4px',
                }}>{m.at}</div>
              </div>
            </div>
          );
        })}
        {typing && (
          <div style={{display:'flex', justifyContent:'flex-start', marginTop:4}}>
            <div style={{
              background:'var(--surface)', border:'1px solid var(--border)',
              padding:'10px 14px', borderRadius:16, borderBottomLeftRadius:5,
              display:'flex', gap:4, alignItems:'center',
            }}>
              {[0,1,2].map(i=><span key={i} className="typing-dot" style={{width:6,height:6,borderRadius:6,background:'var(--text-subtle)', display:'inline-block'}}/>)}
            </div>
          </div>
        )}
      </div>

      <div style={{
        padding:'8px 10px 28px', background:'rgba(250,250,250,0.96)',
        borderTop:'1px solid var(--border)', display:'flex', gap:8, alignItems:'center',
      }}>
        <button className="ripple" style={{
          width:38, height:38, borderRadius:38, border:'1px solid var(--border)', background:'var(--surface)',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0,
        }}><Icon name="Paperclip" size={17} strokeWidth={1.8}/></button>
        <input value={draft} onChange={e=>setDraft(e.target.value)} placeholder="Mensagem"
          onKeyDown={e=>{if(e.key==='Enter')send();}}
          style={{
          flex:1, padding:'10px 14px', borderRadius:999, border:'1px solid var(--border-strong)',
          fontFamily:'inherit', fontSize:14, outline:'none', background:'var(--surface)',
        }}/>
        <button onClick={send} className="ripple" style={{
          width:38, height:38, borderRadius:38, border:'none', background:'var(--primary)',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flexShrink:0,
        }}><Icon name="ArrowUp" size={18} color="#fff" strokeWidth={2.4}/></button>
      </div>
    </div>
  );
}

// ============ P12 — AVALIAÇÃO 360º ============
function ReviewScreen({ go }) {
  const pro = PROS[0];
  const [dims, setDims] = useStateO2({ pontualidade:5, tecnica:5, limpeza:5 });
  const [text, setText] = useStateO2('');
  const [submitted, setSubmitted] = useStateO2(false);
  const [photos, setPhotos] = useStateO2([{label:'antes'},{label:'depois'}]);

  if (submitted) {
    return (
      <div className="screen-enter" style={{height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', padding:'24px'}}>
        <div style={{
          width:64, height:64, borderRadius:18, background:'var(--success-soft)',
          display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18,
          border:'1px solid #B5D9C4',
        }}>
          <Icon name="Check" size={30} color="var(--success)" strokeWidth={2.4}/>
        </div>
        <h2 style={{margin:'0 0 8px', fontSize:22, fontWeight:700, color:'var(--text)', letterSpacing:-.3}}>Avaliação publicada</h2>
        <p style={{margin:'0 0 6px', fontSize:14, color:'var(--text-muted)', lineHeight:1.5}}>
          Obrigado, Pedro. Sua avaliação ajuda outros proprietários e mantém o ecossistema do Convés confiável.
        </p>
        <p style={{margin:'0 0 24px', fontSize:14, color:'var(--text-muted)', lineHeight:1.5}}>
          O serviço foi adicionado ao Logbook digital da Bonança.
        </p>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          <Btn variant="primary" full onClick={()=>go('logbook')}>Ver no Logbook</Btn>
          <Btn variant="ghost" full onClick={()=>go('home')}>Voltar ao início</Btn>
        </div>
      </div>
    );
  }

  return (
    <div className="screen-enter" style={{paddingBottom:120}}>
      <ScreenHeader title="Avaliação 360º" onBack={()=>go('order-detail')}/>
      <div style={{padding:'12px 16px 0', display:'flex', flexDirection:'column', gap:18}}>
        {/* Pro context */}
        <div style={{
          display:'flex', alignItems:'center', gap:12,
          background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:14, padding:'10px 12px',
        }}>
          <Avatar tone={pro.avatarTone} name={pro.short} size={44}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:14.5, fontWeight:600, color:'var(--text)'}}>{pro.short}</div>
            <div style={{fontSize:12, color:'var(--text-muted)'}}>OS-2826 · Revisão de 100h</div>
          </div>
        </div>

        {/* 3 dimensions */}
        <div style={{
          background:'var(--surface)', border:'1px solid var(--border)',
          borderRadius:16, padding:'16px 14px',
        }}>
          <div style={{fontSize:13.5, fontWeight:600, color:'var(--text)', marginBottom:14}}>Como foi cada aspecto?</div>
          <ReviewStars dimensions={dims} onChange={(k,v)=>setDims({...dims,[k]:v})}/>
        </div>

        <Field label="Comentário" optional hint="Será exibido no perfil do prestador.">
          <Textarea value={text} onChange={e=>setText(e.target.value)} placeholder="O que destacou de positivo? Há algo que poderia melhorar?"/>
        </Field>

        <Field label="Fotos antes e depois" optional>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {photos.map(p=>(
              <div key={p.label} style={{position:'relative'}}>
                <div className="stripe-placeholder" style={{height:120, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Icon name="Camera" size={22} color="#6B7A91" strokeWidth={1.6}/>
                </div>
                <div className="mono" style={{
                  position:'absolute', top:8, left:8,
                  background:'rgba(255,255,255,0.85)', padding:'3px 8px', borderRadius:6,
                  fontSize:10, color:'#3A2D14', fontWeight:600, textTransform:'uppercase', letterSpacing:.5,
                }}>{p.label}</div>
              </div>
            ))}
          </div>
        </Field>
      </div>
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px 28px',
        background:'rgba(250,250,250,0.96)', borderTop:'1px solid var(--border)',
        backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)',
      }}>
        <Btn variant="primary" full onClick={()=>setSubmitted(true)}>Publicar avaliação</Btn>
      </div>
    </div>
  );
}

// ============ ONBOARDING (P1) ============
function Onboarding({ go }) {
  const [i, setI] = useStateO2(0);
  const slides = [
    { title:'Confiança em quem cuida do seu barco', body:'Prestadores autônomos verificados pelo Convés, com certificações validadas e histórico transparente.', illo:'boat' },
    { title:'Histórico digital que valoriza sua embarcação', body:'O Logbook registra cada manutenção e gera um relatório completo — um ativo financeiro na revenda.', illo:'book' },
    { title:'Pagamento seguro com retenção até a conclusão', body:'Você só libera o valor ao prestador quando confirmar que o serviço foi concluído conforme combinado.', illo:'shield' },
  ];
  const s = slides[i];
  return (
    <div className="screen-enter" style={{
      height:'100%', display:'flex', flexDirection:'column',
      background:'linear-gradient(180deg, #EBF1FB 0%, #FAFAFA 60%)',
    }}>
      <div style={{padding:'14px 16px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{display:'inline-flex', alignItems:'center', gap:8}}>
          <div style={{
            width:32, height:32, borderRadius:10, background:'var(--primary)',
            display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:14,
          }}>C</div>
          <span style={{fontSize:15, fontWeight:700, color:'var(--text)', letterSpacing:-.2}}>Convés</span>
        </div>
        <button onClick={()=>go('home')} style={{
          background:'none', border:'none', color:'var(--text-muted)', fontSize:14, fontWeight:500, cursor:'pointer',
        }}>Pular</button>
      </div>

      <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 24px'}}>
        <div style={{display:'flex', justifyContent:'center', marginBottom:32}}>
          {s.illo==='boat' && (
            <svg width="240" height="180" viewBox="0 0 240 180">
              <path d="M30 110 Q 120 130, 210 110" stroke="#1F3864" strokeWidth="1.5" fill="none" opacity=".15" strokeDasharray="4 6"/>
              <path d="M20 130 Q 120 152, 220 130" stroke="#1F3864" strokeWidth="1.5" fill="none" opacity=".1" strokeDasharray="4 6"/>
              {/* hull */}
              <path d="M40 96 Q 120 116, 200 96 L 184 108 Q 120 124, 56 108 Z" fill="none" stroke="#1F3864" strokeWidth="2"/>
              {/* deck */}
              <line x1="60" y1="96" x2="180" y2="96" stroke="#1F3864" strokeWidth="2"/>
              {/* cabin */}
              <rect x="92" y="68" width="56" height="28" rx="2" fill="none" stroke="#1F3864" strokeWidth="2"/>
              {/* windshield */}
              <line x1="100" y1="76" x2="140" y2="76" stroke="#C5A572" strokeWidth="2"/>
              {/* mast */}
              <line x1="120" y1="40" x2="120" y2="68" stroke="#1F3864" strokeWidth="2"/>
              {/* flag */}
              <path d="M120 44 L 140 50 L 120 56 Z" fill="#C5A572"/>
            </svg>
          )}
          {s.illo==='book' && (
            <svg width="220" height="180" viewBox="0 0 220 180">
              <rect x="56" y="44" width="108" height="120" rx="6" fill="none" stroke="#1F3864" strokeWidth="2"/>
              <line x1="110" y1="44" x2="110" y2="164" stroke="#1F3864" strokeWidth="2"/>
              {[1,2,3,4,5].map(i=><line key={i} x1="72" y1={60+i*12} x2="100" y2={60+i*12} stroke="#1F3864" strokeWidth="1.5" opacity=".4"/>)}
              {[1,2,3,4,5].map(i=><line key={i} x1="120" y1={60+i*12} x2="148" y2={60+i*12} stroke="#1F3864" strokeWidth="1.5" opacity=".4"/>)}
              <circle cx="155" cy="44" r="14" fill="#C5A572"/>
              <path d="M150 44 L 154 48 L 161 41" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          )}
          {s.illo==='shield' && (
            <svg width="200" height="180" viewBox="0 0 200 180">
              <path d="M100 30 L 160 50 V 100 Q 160 140, 100 160 Q 40 140, 40 100 V 50 Z" fill="none" stroke="#1F3864" strokeWidth="2"/>
              <path d="M78 100 L 95 116 L 124 84" stroke="#C5A572" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              <circle cx="100" cy="58" r="5" fill="#1F3864"/>
              <circle cx="100" cy="58" r="8" fill="none" stroke="#1F3864" strokeWidth="1.5" opacity=".4"/>
            </svg>
          )}
        </div>
        <h1 style={{margin:'0 0 12px', fontSize:26, fontWeight:700, color:'var(--text)', letterSpacing:-.5, lineHeight:1.2}}>{s.title}</h1>
        <p style={{margin:0, fontSize:15, color:'var(--text-muted)', lineHeight:1.55}}>{s.body}</p>
      </div>

      <div style={{padding:'24px 24px 40px'}}>
        <div style={{display:'flex', justifyContent:'center', gap:6, marginBottom:20}}>
          {slides.map((_,k)=>(
            <div key={k} style={{
              width: k===i ? 22 : 6, height:6, borderRadius:6,
              background: k===i ? 'var(--primary)' : '#D7DBE3', transition:'width .2s ease',
            }}/>
          ))}
        </div>
        <div style={{display:'flex', gap:10}}>
          {i>0 && <Btn variant="ghost" onClick={()=>setI(i-1)}>Voltar</Btn>}
          <Btn variant="primary" full onClick={()=>i<2 ? setI(i+1) : go('home')} iconRight={i<2?'ArrowRight':'Check'}>
            {i<2 ? 'Próximo' : 'Começar'}
          </Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { QuoteNew, QuotesScreen, ProDetail, OrderDetail, ChatScreen, ReviewScreen, Onboarding });