// ============================================================
// SCREENS — Extras (P2 Login, M1 Onboarding prestador, Admin)
// ============================================================
const { useState: useStateX, useEffect: useEffectX, useRef: useRefX } = React;

// ============ P2 — LOGIN / CADASTRO COM OTP ============
function LoginScreen({ go }) {
  const [stage, setStage] = useStateX('intro'); // intro | phone | otp | password
  const [method, setMethod] = useStateX('phone'); // phone | email
  const [phone, setPhone] = useStateX('(21) 9 9876-5432');
  const [email, setEmail] = useStateX('');
  const [otp, setOtp] = useStateX(['','','','','','']);
  const [resend, setResend] = useStateX(45);
  const otpRefs = useRefX([]);

  useEffectX(()=>{
    if (stage !== 'otp') return;
    if (resend <= 0) return;
    const t = setTimeout(()=>setResend(r=>r-1), 1000);
    return ()=>clearTimeout(t);
  }, [stage, resend]);

  function setOtpAt(i, v) {
    const clean = (v || '').replace(/[^0-9]/g,'').slice(0,1);
    const next = [...otp];
    next[i] = clean;
    setOtp(next);
    if (clean && i < 5) otpRefs.current[i+1] && otpRefs.current[i+1].focus();
    if (next.every(c=>c)) {
      setTimeout(()=>go('home'), 350);
    }
  }
  function onOtpKey(e, i) {
    if (e.key === 'Backspace' && !otp[i] && i>0) {
      otpRefs.current[i-1] && otpRefs.current[i-1].focus();
    }
  }

  // ---- INTRO / METHOD PICKER ----
  if (stage === 'intro') {
    return (
      <div className="screen-enter" style={{
        height:'100%', display:'flex', flexDirection:'column',
        background:'linear-gradient(180deg, #EBF1FB 0%, #FAFAFA 60%)',
      }}>
        <div style={{padding:'20px 20px 0', display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:34, height:34, borderRadius:10, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15}}>C</div>
          <span style={{fontSize:16, fontWeight:700, color:'var(--text)', letterSpacing:-.2}}>Convés</span>
        </div>

        <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 24px'}}>
          <h1 style={{margin:'0 0 10px', fontSize:28, fontWeight:700, color:'var(--text)', letterSpacing:-.5, lineHeight:1.15}}>
            Entre no Convés
          </h1>
          <p style={{margin:'0 0 6px', fontSize:13, color:'var(--primary)', fontWeight:600, letterSpacing:-.1}}>
            O convés digital da náutica brasileira
          </p>
          <p style={{margin:'0 0 28px', fontSize:15, color:'var(--text-muted)', lineHeight:1.55}}>
            Acesse com o número usado no cadastro. Enviamos um código por WhatsApp.
          </p>

          <Btn variant="primary" full size="lg" icon="MessageSquare" onClick={()=>{setMethod('phone'); setStage('phone');}}>
            Continuar com WhatsApp
          </Btn>
          <div style={{height:10}}/>
          <Btn variant="secondary" full size="lg" icon="Mail" onClick={()=>{setMethod('email'); setStage('phone');}}>
            Continuar com e-mail
          </Btn>

          <div style={{display:'flex', alignItems:'center', gap:10, margin:'22px 0 14px'}}>
            <div style={{flex:1, height:1, background:'var(--border)'}}/>
            <span style={{fontSize:11, color:'var(--text-subtle)', textTransform:'uppercase', letterSpacing:.6}}>ou</span>
            <div style={{flex:1, height:1, background:'var(--border)'}}/>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            <Btn variant="secondary" full icon="Chrome" onClick={()=>go('home')}>Google</Btn>
            <Btn variant="dark" full icon="Apple" onClick={()=>go('home')}>Apple</Btn>
          </div>
        </div>

        <div style={{padding:'20px 24px 36px', textAlign:'center'}}>
          <p style={{margin:0, fontSize:11.5, color:'var(--text-subtle)', lineHeight:1.55}}>
            Ao continuar você concorda com os <a style={{color:'var(--primary)', fontWeight:600}}>Termos de uso</a> e a <a style={{color:'var(--primary)', fontWeight:600}}>Política de privacidade</a>.
          </p>
        </div>
      </div>
    );
  }

  // ---- PHONE / EMAIL INPUT ----
  if (stage === 'phone') {
    return (
      <div className="screen-enter" style={{height:'100%', display:'flex', flexDirection:'column'}}>
        <ScreenHeader title="Entrar" onBack={()=>setStage('intro')}/>
        <div style={{flex:1, padding:'18px 20px 0'}}>
          <h2 style={{margin:'0 0 8px', fontSize:22, fontWeight:700, color:'var(--text)', letterSpacing:-.3, lineHeight:1.2}}>
            {method==='phone' ? 'Qual o seu número?' : 'Qual o seu e-mail?'}
          </h2>
          <p style={{margin:'0 0 22px', fontSize:14, color:'var(--text-muted)', lineHeight:1.5}}>
            {method==='phone'
              ? 'Enviamos um código de 6 dígitos pelo WhatsApp para confirmar.'
              : 'Enviamos um link de acesso e código de 6 dígitos para seu e-mail.'}
          </p>

          {method==='phone' ? (
            <Field label="Número de WhatsApp">
              <div style={{display:'flex', gap:8}}>
                <div style={{
                  width:84, padding:'12px 14px', borderRadius:8,
                  border:'1px solid var(--border-strong)', background:'var(--surface)',
                  display:'flex', alignItems:'center', gap:6, fontSize:14,
                }} className="mono">
                  🇧🇷 +55
                </div>
                <Input value={phone} onChange={e=>setPhone(e.target.value)} className="mono" style={{flex:1}}/>
              </div>
            </Field>
          ) : (
            <Field label="E-mail">
              <Input value={email} onChange={e=>setEmail(e.target.value)} placeholder="seu@email.com"/>
            </Field>
          )}

          <div style={{marginTop:24}}>
            <Btn variant="primary" full size="lg" onClick={()=>{setStage('otp'); setResend(45); setOtp(['','','','','','']);}} iconRight="ArrowRight">
              Enviar código
            </Btn>
          </div>

          <div style={{
            display:'flex', gap:10, alignItems:'flex-start',
            background:'var(--surface)', border:'1px solid var(--border)',
            borderRadius:12, padding:'12px 14px', marginTop:18,
          }}>
            <Icon name="ShieldCheck" size={16} color="var(--primary)" strokeWidth={2}/>
            <div style={{fontSize:12, color:'var(--text-muted)', lineHeight:1.5}}>
              Seu número fica visível apenas para prestadores em OS ativas. Não compartilhamos com terceiros.
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ---- OTP ----
  if (stage === 'otp') {
    const dest = method==='phone'
      ? phone.replace(/(\d)(\d{3})(\d{4})$/,'··· ·$2-$3')
      : email || 'seu e-mail';
    return (
      <div className="screen-enter" style={{height:'100%', display:'flex', flexDirection:'column'}}>
        <ScreenHeader title="Verificação" onBack={()=>setStage('phone')}/>
        <div style={{flex:1, padding:'18px 20px 0'}}>
          <div style={{
            width:54, height:54, borderRadius:14, background:'var(--accent-soft)',
            border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16,
          }}>
            <Icon name={method==='phone'?'MessageSquare':'Mail'} size={22} color="#7D6A47" strokeWidth={1.8}/>
          </div>
          <h2 style={{margin:'0 0 8px', fontSize:22, fontWeight:700, color:'var(--text)', letterSpacing:-.3}}>Digite o código</h2>
          <p style={{margin:'0 0 22px', fontSize:14, color:'var(--text-muted)', lineHeight:1.5}}>
            Enviamos um código de 6 dígitos para <span style={{color:'var(--text)', fontWeight:600}}>{dest}</span>.
          </p>

          <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:8, marginBottom:22}}>
            {otp.map((v,i)=>(
              <input key={i} ref={el=>otpRefs.current[i]=el} value={v}
                onChange={e=>setOtpAt(i, e.target.value)}
                onKeyDown={e=>onOtpKey(e,i)}
                inputMode="numeric" maxLength={1}
                className="mono"
                style={{
                  width:'100%', minWidth:0, boxSizing:'border-box',
                  height:54, textAlign:'center', fontSize:22, fontWeight:700,
                  background:'var(--surface)',
                  border: '1px solid ' + (v ? 'var(--primary)' : 'var(--border-strong)'),
                  borderRadius:10, outline:'none', color:'var(--text)',
                }}/>
            ))}
          </div>

          <div style={{textAlign:'center', fontSize:13, color:'var(--text-muted)'}}>
            Não recebeu? {resend > 0
              ? <>Reenviar em <span className="mono" style={{color:'var(--text)', fontWeight:600}}>{resend}s</span></>
              : <button onClick={()=>setResend(45)} style={{background:'none', border:'none', color:'var(--primary)', fontWeight:600, fontSize:13, cursor:'pointer'}}>Reenviar código</button>}
          </div>

          <div style={{marginTop:24}}>
            <Btn variant="primary" full size="lg" onClick={()=>go('home')}>Entrar</Btn>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

// ============ M1 — ONBOARDING DO PRESTADOR (upload de docs) ============
function ProOnboarding({ go }) {
  const [step, setStep] = useStateX('intro'); // intro | docs | review
  const [docs, setDocs] = useStateX({
    cnpj:        { status:'verificado', label:'CNPJ / MEI', sub:'33.456.789/0001-22', icon:'Building2', when:'enviado em 12 mai' },
    cir:         { status:'pendente',   label:'CIR — Cadastro Individual de Reparador', sub:'Marinha do Brasil · obrigatório', icon:'ShieldCheck' },
    cert:        { status:'verificado', label:'Mercury Certified Technician', sub:'válido até dez/2027', icon:'Award', when:'enviado em 12 mai' },
    rc:          { status:'analise',    label:'RC profissional', sub:'Apólice de responsabilidade civil', icon:'FileCheck', when:'em análise · ~12h restantes' },
    antec:       { status:'pendente',   label:'Antecedentes criminais', sub:'PDF emitido pela Polícia Federal', icon:'FileText' },
  });

  function setDocStatus(key, status, when) {
    setDocs(d=>({ ...d, [key]:{ ...d[key], status, when: when || d[key].when } }));
  }

  // Intro
  if (step === 'intro') {
    return (
      <div className="screen-enter" style={{
        height:'100%', display:'flex', flexDirection:'column',
        background:'linear-gradient(180deg, #EBF1FB 0%, #FAFAFA 60%)',
      }}>
        <div style={{padding:'20px 20px 0', display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:34, height:34, borderRadius:10, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15}}>C</div>
          <span style={{fontSize:16, fontWeight:700, color:'var(--text)', letterSpacing:-.2}}>Convés</span>
          <span style={{marginLeft:'auto', fontSize:12, color:'var(--text-muted)', fontWeight:500}}>Prestadores</span>
        </div>

        <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 24px'}}>
          <div style={{
            width:64, height:64, borderRadius:18, background:'var(--accent-soft)',
            border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18,
          }}>
            <Icon name="ShieldCheck" size={28} color="#7D6A47" strokeWidth={1.8}/>
          </div>

          <h1 style={{margin:'0 0 10px', fontSize:24, fontWeight:700, color:'var(--text)', letterSpacing:-.4, lineHeight:1.2}}>
            Bem-vindo, Marcos.
          </h1>
          <p style={{margin:'0 0 18px', fontSize:15, color:'var(--text-muted)', lineHeight:1.55}}>
            Para garantir confiança aos proprietários, validamos seus documentos antes de você atender. O processo leva até 48h.
          </p>

          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { icon:'Building2', t:'Identidade profissional', d:'CNPJ ou MEI ativo, em seu nome.' },
              { icon:'Award', t:'Certificações e CIR', d:'Cadastro Individual de Reparador da Marinha + certificados de fabricante.' },
              { icon:'FileCheck', t:'Responsabilidade civil', d:'Apólice de RC profissional vigente.' },
            ].map(it=>(
              <div key={it.t} style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                <div style={{
                  width:32, height:32, borderRadius:9, background:'var(--surface)',
                  border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                }}>
                  <Icon name={it.icon} size={15} color="var(--primary)" strokeWidth={1.8}/>
                </div>
                <div>
                  <div style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{it.t}</div>
                  <div style={{fontSize:12.5, color:'var(--text-muted)', marginTop:2, lineHeight:1.45}}>{it.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{padding:'18px 24px 36px'}}>
          <Btn variant="primary" full size="lg" onClick={()=>setStep('docs')} iconRight="ArrowRight">Começar verificação</Btn>
          <p style={{margin:'12px 0 0', fontSize:11.5, color:'var(--text-subtle)', textAlign:'center', lineHeight:1.5}}>
            O Convés cobra <span className="mono" style={{fontWeight:600}}>15%</span> de comissão sobre serviços concluídos. Sem mensalidade.
          </p>
        </div>
      </div>
    );
  }

  // Docs list
  if (step === 'docs') {
    const progress = Object.values(docs).filter(d=>d.status==='verificado').length;
    const total = Object.keys(docs).length;
    const allDone = Object.values(docs).every(d=>d.status==='verificado' || d.status==='analise');

    return (
      <div className="screen-enter" style={{paddingBottom:120}}>
        <ScreenHeader title="Documentos" onBack={()=>setStep('intro')}/>
        <div style={{padding:'8px 16px 0'}}>
          {/* Progress card */}
          <div style={{
            background:'var(--primary)', color:'#fff', borderRadius:16, padding:16, marginBottom:18,
          }}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
              <div style={{fontSize:13, color:'rgba(255,255,255,0.7)'}}>Progresso da verificação</div>
              <div className="mono" style={{fontSize:13, fontWeight:600}}>{progress}/{total}</div>
            </div>
            <div style={{height:6, background:'rgba(255,255,255,0.18)', borderRadius:6, overflow:'hidden', marginBottom:10}}>
              <div style={{width: (progress/total*100) + '%', height:'100%', background:'var(--accent)', borderRadius:6, transition:'width .3s'}}/>
            </div>
            <p style={{margin:0, fontSize:12.5, color:'rgba(255,255,255,0.7)', lineHeight:1.5}}>
              Você poderá atender clientes assim que todos os documentos forem verificados pela equipe Convés.
            </p>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {Object.entries(docs).map(([key, d])=>(
              <DocRow key={key} doc={d}
                onUpload={()=>setDocStatus(key, 'analise', 'em análise · ~12h')}
                onView={()=>{}}/>
            ))}
          </div>

          <div style={{
            display:'flex', gap:10, alignItems:'flex-start',
            background:'var(--accent-soft)', border:'1px solid #E9DDC2', borderRadius:12, padding:'12px 14px', marginTop:18,
          }}>
            <Icon name="Clock" size={16} color="#7D6A47" strokeWidth={2}/>
            <div style={{fontSize:12.5, color:'#5F4F2E', lineHeight:1.5}}>
              Nosso time de curadoria revisa em até 48h úteis. Você recebe um aviso no app assim que cada item for aprovado.
            </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={!allDone} onClick={()=>setStep('review')}>
            {allDone ? 'Enviar para análise' : 'Conclua os documentos pendentes'}
          </Btn>
        </div>
      </div>
    );
  }

  // Review (submission done)
  return (
    <div className="screen-enter" style={{height:'100%', display:'flex', flexDirection:'column', padding:'24px', justifyContent:'center'}}>
      <div style={{
        width:64, height:64, borderRadius:18, background:'var(--success-soft)',
        border:'1px solid #B5D9C4', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18,
      }}>
        <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}}>Documentos enviados</h2>
      <p style={{margin:'0 0 6px', fontSize:14, color:'var(--text-muted)', lineHeight:1.55}}>
        Nosso time de curadoria revisa em até <span style={{color:'var(--text)', fontWeight:600}}>48h úteis</span>.
      </p>
      <p style={{margin:'0 0 24px', fontSize:14, color:'var(--text-muted)', lineHeight:1.55}}>
        Você pode acompanhar o status nesta tela. Em paralelo, complete seu perfil para aparecer melhor nas buscas.
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:10}}>
        <Btn variant="primary" full onClick={()=>go('pro-home')}>Ir para a Home</Btn>
        <Btn variant="ghost" full onClick={()=>setStep('docs')}>Revisar documentos</Btn>
      </div>
    </div>
  );
}

function DocRow({ doc, onUpload, onView }) {
  const statusMap = {
    verificado: { label:'Verificado', color:'var(--success)', bg:'var(--success-soft)', icon:'BadgeCheck' },
    analise:    { label:'Em análise', color:'#7A4A0A', bg:'#FCEFE0', icon:'Loader' },
    pendente:   { label:'Pendente',   color:'var(--text-muted)', bg:'#EDEFF3', icon:'Upload' },
  };
  const s = statusMap[doc.status];
  return (
    <div style={{
      background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:14,
      display:'flex', gap:12, alignItems:'flex-start',
    }}>
      <div style={{
        width:36, height:36, borderRadius:10, background:'var(--accent-soft)',
        border:'1px solid #E9DDC2', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
      }}>
        <Icon name={doc.icon} size={17} color="#7D6A47" strokeWidth={1.8}/>
      </div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:2, flexWrap:'wrap'}}>
          <span style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{doc.label}</span>
          <span style={{
            display:'inline-flex', alignItems:'center', gap:5,
            background:s.bg, color:s.color, padding:'2px 8px', borderRadius:999,
            fontSize:11, fontWeight:600,
          }}>
            <Icon name={s.icon} size={11} color={s.color} strokeWidth={2.2}/> {s.label}
          </span>
        </div>
        <div style={{fontSize:12, color:'var(--text-muted)', marginTop:3, lineHeight:1.45}}>{doc.sub}</div>
        {doc.when && <div className="mono" style={{fontSize:11, color:'var(--text-subtle)', marginTop:4}}>{doc.when}</div>}
        {doc.status === 'pendente' && (
          <button onClick={onUpload} className="ripple" style={{
            marginTop:10, background:'var(--surface)', border:'1px solid var(--border-strong)',
            color:'var(--text)', padding:'7px 12px', borderRadius:8, cursor:'pointer',
            fontSize:12.5, fontWeight:600, display:'inline-flex', alignItems:'center', gap:6,
          }}>
            <Icon name="Upload" size={13} strokeWidth={2}/> Enviar arquivo
          </button>
        )}
      </div>
    </div>
  );
}

// ============ ADMIN / CURADORIA ============
function AdminScreen({ go }) {
  const [tab, setTab] = useStateX('cadastros');
  return (
    <div className="screen-enter" style={{paddingBottom:24}}>
      {/* Admin header — distinct dark band so it doesn't get confused with proprietário */}
      <div style={{
        background:'#15171C', color:'#fff', padding:'12px 16px',
        display:'flex', alignItems:'center', gap:10,
      }}>
        <button onClick={()=>go('profile')} className="ripple" style={{
          width:32, height:32, borderRadius:32, background:'rgba(255,255,255,0.08)', border:'none',
          display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}><Icon name="ChevronLeft" size={18} color="#fff" strokeWidth={2}/></button>
        <div style={{flex:1}}>
          <div style={{fontSize:11, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:.6}}>Convés · Painel interno</div>
          <div style={{fontSize:15, fontWeight:700, letterSpacing:-.2}}>Curadoria</div>
        </div>
        <Avatar tone="#C5A572" name="Ana C." size={28}/>
      </div>

      {/* Stat strip */}
      <div style={{padding:'14px 16px 0', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
        {[
          { label:'Na fila', value:8, tone:'var(--warning)' },
          { label:'SLA <24h', value:'94%', tone:'var(--success)' },
          { label:'Disputas', value:2, tone:'var(--danger)' },
        ].map(s=>(
          <div key={s.label} style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12, padding:'10px 12px'}}>
            <div style={{fontSize:11, color:'var(--text-subtle)', textTransform:'uppercase', letterSpacing:.4}}>{s.label}</div>
            <div className="mono" style={{fontSize:20, fontWeight:700, color:s.tone, letterSpacing:-.3, marginTop:2}}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Tabs */}
      <div style={{padding:'14px 16px 0', display:'flex', gap:0, borderBottom:'1px solid var(--border)'}}>
        {[
          { key:'cadastros', label:'Cadastros', count:8 },
          { key:'disputas', label:'Disputas', count:2 },
          { key:'trust', label:'Trust score', count:null },
        ].map(t=>{
          const on = tab===t.key;
          return (
            <button key={t.key} onClick={()=>setTab(t.key)} style={{
              flex:1, background:'none', border:'none', cursor:'pointer',
              padding:'10px 4px', fontSize:13.5, fontWeight: on?600:500,
              color: on ? 'var(--primary)' : 'var(--text-muted)',
              borderBottom: '2px solid ' + (on ? 'var(--primary)' : 'transparent'),
              marginBottom:-1, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6,
            }}>
              {t.label}
              {t.count!=null && <span style={{
                background: on ? 'var(--primary)' : '#EDEFF3', color: on ? '#fff' : 'var(--text-muted)',
                fontSize:11, fontWeight:600, padding:'1px 7px', borderRadius:999,
              }}>{t.count}</span>}
            </button>
          );
        })}
      </div>

      <div style={{padding:'14px 16px 0'}}>
        {tab === 'cadastros' && (
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { name:'Marcos A. Ferreira', specialty:'Mecânica Mercury', city:'Marina da Glória', received:'há 2h', docs:5, ok:4, flag:null, tone:'#1F3864' },
              { name:'Tiago Sobral', specialty:'Eletrônica naval', city:'Itacuruçá', received:'há 6h', docs:5, ok:5, flag:'cir-vencido', tone:'#0F7B40' },
              { name:'Lucas R. Pinheiro', specialty:'Casco e gelcoat', city:'Angra dos Reis', received:'há 1d', docs:5, ok:3, flag:'rc-pendente', tone:'#C5A572' },
            ].map(c=>(
              <div key={c.name} style={{
                background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:14,
              }}>
                <div style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                  <Avatar tone={c.tone} name={c.name} size={42}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:8}}>
                      <span style={{fontSize:14, fontWeight:600, color:'var(--text)'}}>{c.name}</span>
                      <span className="mono" style={{fontSize:11, color:'var(--text-subtle)'}}>{c.received}</span>
                    </div>
                    <div style={{fontSize:12.5, color:'var(--text-muted)', marginTop:2}}>{c.specialty} · {c.city}</div>
                    <div style={{display:'flex', alignItems:'center', gap:10, marginTop:8, flexWrap:'wrap'}}>
                      <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:12, color:'var(--text-muted)'}}>
                        <Icon name="FileCheck" size={12} strokeWidth={2}/>
                        <span className="mono">{c.ok}/{c.docs}</span> docs OK
                      </span>
                      {c.flag === 'cir-vencido' && (
                        <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:11, color:'var(--danger)', fontWeight:600, background:'var(--danger-soft)', padding:'2px 8px', borderRadius:999}}>
                          <Icon name="AlertTriangle" size={11} color="var(--danger)" strokeWidth={2.2}/> CIR vencido
                        </span>
                      )}
                      {c.flag === 'rc-pendente' && (
                        <span style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:11, color:'#7A4A0A', fontWeight:600, background:'#FCEFE0', padding:'2px 8px', borderRadius:999}}>
                          <Icon name="Clock" size={11} color="#7A4A0A" strokeWidth={2.2}/> Aguardando RC
                        </span>
                      )}
                    </div>
                  </div>
                </div>
                <div style={{display:'flex', gap:8, marginTop:12}}>
                  <Btn variant="secondary" size="sm" style={{flex:1}}>Ver dossiê</Btn>
                  <Btn variant="primary" size="sm" style={{flex:1}}>Aprovar</Btn>
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === 'disputas' && (
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { os:'OS-2799', client:'Henrique D.', pro:'Lucas R. Pinheiro', value:1850, opened:'há 8h', summary:'Polimento entregue parcial, manchas reapareceram após 3 dias.' },
              { os:'OS-2772', client:'Camila T.', pro:'Tiago Sobral', value:3450, opened:'há 1d', summary:'Equipamento de eletrônica não calibrado conforme spec, valor questionado.' },
            ].map(d=>(
              <div key={d.os} style={{
                background:'var(--surface)', border:'1px solid var(--border)', borderLeft:'3px solid var(--danger)', borderRadius:14, padding:14,
              }}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8}}>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <span className="mono" style={{fontSize:12, color:'var(--text-subtle)', fontWeight:600}}>{d.os}</span>
                    <OrderStatusPill status="disputa"/>
                  </div>
                  <span className="mono" style={{fontSize:11, color:'var(--text-subtle)'}}>{d.opened}</span>
                </div>
                <div style={{fontSize:13, color:'var(--text)', lineHeight:1.5, marginBottom:8}}>{d.summary}</div>
                <div style={{display:'flex', alignItems:'center', gap:10, fontSize:12, color:'var(--text-muted)', flexWrap:'wrap'}}>
                  <span><Icon name="User" size={11} strokeWidth={2} style={{verticalAlign:-1, marginRight:3}}/>{d.client}</span>
                  <span>·</span>
                  <span><Icon name="Wrench" size={11} strokeWidth={2} style={{verticalAlign:-1, marginRight:3}}/>{d.pro}</span>
                  <span>·</span>
                  <span className="mono" style={{fontWeight:600, color:'var(--text)'}}>{brl(d.value)} retidos</span>
                </div>
                <div style={{display:'flex', gap:8, marginTop:12}}>
                  <Btn variant="secondary" size="sm" style={{flex:1}}>Ler conversa</Btn>
                  <Btn variant="primary" size="sm" style={{flex:1}}>Mediar</Btn>
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === 'trust' && (
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {[
              { name:'Marcos A. Ferreira', current:4.9, prev:4.8, delta:'+0.1', os:142, sla:'98%', tone:'#1F3864' },
              { name:'Roberto Lima', current:4.7, prev:4.7, delta:'0.0', os:88, sla:'92%', tone:'#0F7B40' },
              { name:'Carlos E. Tavares', current:4.8, prev:4.9, delta:'-0.1', os:215, sla:'89%', tone:'#C5A572' },
              { name:'Júlio C. Almeida', current:4.6, prev:4.7, delta:'-0.1', os:64, sla:'81%', tone:'#7C3AED' },
            ].map(p=>{
              const positive = p.delta.startsWith('+');
              const neutral = p.delta === '0.0';
              const negative = p.delta.startsWith('-');
              return (
                <div key={p.name} style={{
                  background:'var(--surface)', border:'1px solid var(--border)', borderRadius:14, padding:'12px 14px',
                  display:'flex', alignItems:'center', gap:12,
                }}>
                  <Avatar tone={p.tone} name={p.name} size={36}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13.5, fontWeight:600, color:'var(--text)'}}>{p.name}</div>
                    <div style={{fontSize:11.5, color:'var(--text-subtle)', marginTop:1}}>
                      <span className="mono">{p.os}</span> OS · SLA <span className="mono">{p.sla}</span>
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div className="mono" style={{fontSize:15, fontWeight:700, color:'var(--text)'}}>{p.current.toFixed(1)}</div>
                    <div style={{
                      fontSize:11, fontWeight:600,
                      color: positive ? 'var(--success)' : (negative ? 'var(--danger)' : 'var(--text-subtle)'),
                    }}>{neutral ? '—' : p.delta}</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// ============ DEMO INTRO (apresentação) ============
function DemoIntro({ go, setMode }) {
  return (
    <div className="screen-enter" style={{
      height:'100%', display:'flex', flexDirection:'column',
      background:'#F5EFE3',
      padding:'0 28px',
    }}>
      <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', textAlign:'center'}}>
        <div style={{
          width:84, height:84, borderRadius:24, background:'var(--primary)',
          display:'flex', alignItems:'center', justifyContent:'center',
          marginBottom:24, boxShadow:'0 12px 32px rgba(31,56,100,0.18)',
        }}>
          <Icon name="Anchor" size={40} color="#C5A572" strokeWidth={1.8}/>
        </div>
        <div style={{
          fontSize:40, fontWeight:700, color:'var(--primary)',
          letterSpacing:-1.2, lineHeight:1,
        }}>CONVÉS</div>
        <p style={{
          margin:'14px 0 0', fontSize:15, color:'var(--text-muted)',
          lineHeight:1.5, maxWidth:280,
        }}>O convés digital da náutica brasileira</p>
        <div className="mono" style={{
          marginTop:18, fontSize:11.5, color:'var(--text-subtle)',
          letterSpacing:.4, textTransform:'uppercase',
        }}>Protótipo · Maio 2026</div>
      </div>

      <div style={{paddingBottom:32, display:'flex', flexDirection:'column', gap:10}}>
        <Btn variant="primary" full size="lg" icon="Anchor"
          onClick={()=>{ setMode('owner'); go('home'); }}>
          Entrar como Proprietário
        </Btn>
        <Btn variant="secondary" full size="lg" icon="Wrench"
          onClick={()=>{ setMode('pro'); go('pro-home'); }}>
          Entrar como Prestador
        </Btn>
        <p style={{
          margin:'14px 4px 0', fontSize:11.5, color:'var(--text-subtle)',
          textAlign:'center', lineHeight:1.5,
        }}>
          Esta é uma demonstração funcional. Os dados são fictícios.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, ProOnboarding, AdminScreen, DemoIntro });