// ===== Mobile PWA simplificado =====
// Render dentro de moldura iPhone para mostrar app mobile da Pleita.

function MobileNavBar({ tab, setTab }) {
  const TABS = [
    { id: "home",   ico: "🏠", l: "Início"    },
    { id: "lances", ico: "🎯", l: "Lances"    },
    { id: "cofre",  ico: "📋", l: "Cofre"     },
    { id: "perfil", ico: "👤", l: "Perfil"    },
  ];
  return (
    <nav className="absolute bottom-0 inset-x-0 bg-pleita-paper border-t border-pleita-line z-20 px-2 pb-7 pt-2">
      <ul className="grid grid-cols-4">
        {TABS.map((t) => {
          const active = t.id === tab;
          return (
            <li key={t.id}>
              <button onClick={() => setTab(t.id)} className={`w-full flex flex-col items-center gap-1 py-1.5 rounded-md transition-colors ${active ? "text-pleita-ink" : "text-pleita-stone-2"}`}>
                <span className="text-xl leading-none">{t.ico}</span>
                <span className="pl-num text-[10px] uppercase tracking-wider">{t.l}</span>
                {active && <span className="size-1 rounded-full bg-pleita-lime mt-0.5" />}
              </button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

function MobileStatusBar() {
  return (
    <div className="flex items-center justify-between px-7 pt-2.5 pb-1 pl-num text-[11px] text-pleita-ink font-semibold">
      <span>9:41</span>
      <span className="flex items-center gap-1.5">
        <svg viewBox="0 0 18 12" className="size-3" fill="currentColor"><path d="M1 11h2V7H1zM5 11h2V5H5zM9 11h2V3H9zM13 11h2V0h-2z"/></svg>
        <svg viewBox="0 0 16 12" className="size-3" fill="currentColor"><path d="M8 1.5c2.1 0 4.1.8 5.6 2.2l1.4-1.4C13.1 0.5 10.6 0 8 0S2.9.5 1 2.3l1.4 1.4C3.9 2.3 5.9 1.5 8 1.5z"/><path d="M8 5c1.3 0 2.5.5 3.4 1.4l1.4-1.4C11.5 3.7 9.8 3 8 3s-3.5.7-4.8 2L4.6 6.4C5.5 5.5 6.7 5 8 5z"/><circle cx="8" cy="9" r="2"/></svg>
        <span className="ml-0.5 flex items-center gap-0.5">
          <span className="block w-6 h-2.5 border border-current rounded-sm relative"><span className="absolute inset-0.5 w-4 bg-current rounded-[1px]" /></span>
          <span className="block w-0.5 h-1.5 bg-current rounded-r-sm" />
        </span>
      </span>
    </div>
  );
}

function MobileHome() {
  return (
    <div className="flex-1 overflow-y-auto pb-32 px-5 pt-3">
      <header className="flex items-center justify-between mb-5">
        <div>
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Bom dia 👋</div>
          <div className="font-display text-xl text-pleita-ink leading-tight">Marcos</div>
        </div>
        <button className="relative size-10 rounded-full bg-surface-card border border-pleita-line grid place-items-center">
          <span className="text-base">🔔</span>
          <span className="absolute top-2 right-2 size-1.5 rounded-full bg-pleita-lime" />
        </button>
      </header>

      {/* Hero card · ação urgente */}
      <article className="rounded-[14px] overflow-hidden mb-4 relative" style={{ background: "rgb(var(--pleita-ink))" }}>
        <div aria-hidden className="absolute -right-8 -top-8 size-32 rounded-full" style={{ background: "rgb(159 232 112 / .18)" }} />
        <div className="relative px-5 py-5 text-pleita-paper">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-lime mb-1.5">🎯 lance agora</div>
          <div className="font-display text-lg leading-tight">Pregão TJ-MG · começou há 12min</div>
          <div className="pl-num text-xs text-pleita-paper/60 mt-1.5">item 3 de 8 · seu preço: R$ 1,78</div>
          <div className="mt-3 grid grid-cols-2 gap-2">
            <div className="rounded-md bg-pleita-paper/10 p-2.5 backdrop-blur">
              <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-paper/60">Melhor lance</div>
              <div className="pl-num text-base font-semibold text-pleita-paper">R$ 1,82</div>
            </div>
            <div className="rounded-md p-2.5" style={{ background: "rgb(159 232 112 / .25)" }}>
              <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-lime">Posição</div>
              <div className="pl-num text-base font-semibold text-pleita-paper">1º</div>
            </div>
          </div>
          <button className="mt-4 w-full rounded-full bg-pleita-lime text-pleita-ink py-2.5 text-sm font-semibold">Acompanhar ao vivo →</button>
        </div>
      </article>

      {/* Quick stats */}
      <div className="grid grid-cols-2 gap-2.5 mb-5">
        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-3.5">
          <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-stone-2">Saúde docs</div>
          <div className="flex items-baseline gap-1 mt-1">
            <span className="pl-num text-xl font-semibold text-pleita-ink">82</span>
            <span className="pl-num text-xs text-pleita-stone-2">/100</span>
          </div>
          <div className="mt-1.5 h-1 rounded-full bg-pleita-line overflow-hidden">
            <div className="h-full rounded-full bg-pleita-lime" style={{ width: "82%" }} />
          </div>
        </div>
        <div className="rounded-[10px] bg-surface-card border border-pleita-line p-3.5">
          <div className="pl-num text-[9px] uppercase tracking-wider text-pleita-stone-2">Mês</div>
          <div className="pl-num text-xl font-semibold text-pleita-ink mt-1">R$ 54k</div>
          <div className="pl-num text-[10px] text-verdict-go mt-0.5">+86%</div>
        </div>
      </div>

      {/* Avisos urgentes */}
      <h2 className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Atenção hoje</h2>
      <ul className="space-y-2 mb-5">
        {[
          { ico: "⏰", t: "CND Federal vence em 6 dias", a: "Renovar", tone: "stop" },
          { ico: "📋", t: "Proposta pendente · TJ-MG",   a: "Enviar",  tone: "caution" },
          { ico: "✨", t: "3 novos editais compatíveis",  a: "Ver",     tone: "info" },
        ].map((al) => {
          const bg = al.tone === "stop" ? "bg-verdict-stop/8 border-verdict-stop/30" : al.tone === "caution" ? "bg-verdict-caution/8 border-verdict-caution/30" : "bg-pleita-info/8 border-pleita-info/30";
          const fg = al.tone === "stop" ? "text-verdict-stop" : al.tone === "caution" ? "text-verdict-caution" : "text-pleita-info";
          return (
            <li key={al.t} className={`rounded-[10px] border p-3 flex items-center gap-3 ${bg}`}>
              <div className="size-9 rounded-md bg-pleita-paper grid place-items-center text-lg shrink-0">{al.ico}</div>
              <div className="flex-1 min-w-0">
                <div className="text-sm text-pleita-ink font-medium truncate">{al.t}</div>
              </div>
              <button className={`pl-num text-[11px] font-semibold whitespace-nowrap ${fg}`}>{al.a} →</button>
            </li>
          );
        })}
      </ul>

      {/* Oportunidades */}
      <h2 className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Pra você analisar</h2>
      <ul className="space-y-2">
        {[
          { obj: "Software gestão escolar", org: "SEDUC-GO", v: "R$ 890k", match: 95 },
          { obj: "Locação de impressoras",   org: "TRF 3ª",   v: "R$ 385k", match: 92 },
          { obj: "Manutenção de elevadores", org: "USP",      v: "R$ 214k", match: 84 },
        ].map((e) => (
          <li key={e.obj} className="rounded-[10px] bg-surface-card border border-pleita-line p-3.5">
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0 flex-1">
                <div className="text-sm text-pleita-ink font-medium leading-snug">{e.obj}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">{e.org}</div>
              </div>
              <span className="pl-num text-base font-semibold text-pleita-lime">{e.match}</span>
            </div>
            <div className="flex items-center justify-between mt-2 pt-2 border-t border-pleita-line/60">
              <span className="pl-num text-xs text-pleita-ink">{e.v}</span>
              <button className="pl-num text-[11px] font-semibold text-pleita-ink">Analisar →</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function MobileLances() {
  return (
    <div className="flex-1 overflow-y-auto pb-32 px-5 pt-3">
      <header className="mb-5">
        <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-0.5">🎯 Pregão ao vivo</div>
        <div className="font-display text-xl text-pleita-ink leading-tight">TJ-MG · Equipamentos TI</div>
      </header>

      {/* Lance atual */}
      <div className="rounded-[14px] p-5 mb-4" style={{ background: "linear-gradient(135deg, #9FE870, #7ED957)" }}>
        <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-ink/70">Você está em 1º lugar</div>
        <div className="pl-num font-semibold text-4xl text-pleita-ink mt-1">R$ 1,78</div>
        <div className="pl-num text-xs text-pleita-ink/80 mt-1">há 12s · próximo lance min. R$ 1,77</div>
      </div>

      {/* Quick bid */}
      <div className="rounded-[10px] bg-surface-card border border-pleita-line p-4 mb-4">
        <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Dar novo lance</div>
        <div className="grid grid-cols-3 gap-2 mb-3">
          {["1,77", "1,75", "1,72"].map((v) => (
            <button key={v} className="rounded-md border border-pleita-line py-2 pl-num text-sm font-semibold text-pleita-ink hover:bg-surface-2">R$ {v}</button>
          ))}
        </div>
        <button className="w-full rounded-full bg-pleita-ink text-pleita-paper py-2.5 text-sm font-semibold pl-num">Lance manual</button>
      </div>

      {/* Robô */}
      <div className="rounded-[10px] p-4 mb-4 border-2 border-pleita-lime bg-pleita-lime/10">
        <div className="flex items-center justify-between gap-3">
          <div>
            <div className="text-sm text-pleita-ink font-semibold">🤖 Robô de lances</div>
            <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">limite: R$ 1,68 · passos R$ 0,01</div>
          </div>
          <span className="relative w-12 h-6 rounded-full bg-pleita-ink">
            <span className="absolute top-0.5 right-0.5 size-5 rounded-full bg-pleita-lime" />
          </span>
        </div>
      </div>

      {/* Histórico */}
      <h2 className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Histórico de lances</h2>
      <ul className="space-y-1.5">
        {[
          { who: "Você",     v: "R$ 1,78", t: "há 12s",  win: true  },
          { who: "Concorrente B", v: "R$ 1,82", t: "há 35s",  win: false },
          { who: "Você",     v: "R$ 1,85", t: "há 1min", win: false },
          { who: "Concorrente A", v: "R$ 1,89", t: "há 2min", win: false },
          { who: "Você",     v: "R$ 1,92", t: "há 3min", win: false },
        ].map((b, i) => (
          <li key={i} className={`rounded-md px-3 py-2 flex items-center justify-between text-sm ${b.win ? "bg-pleita-lime/15" : "bg-surface-card border border-pleita-line/60"}`}>
            <span className={`pl-num text-xs ${b.who === "Você" ? "text-pleita-ink font-semibold" : "text-pleita-stone"}`}>{b.who}</span>
            <span className="pl-num text-sm text-pleita-ink">{b.v}</span>
            <span className="pl-num text-[10px] text-pleita-stone-2">{b.t}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function MobileCofre() {
  return (
    <div className="flex-1 overflow-y-auto pb-32 px-5 pt-3">
      <header className="mb-5">
        <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-0.5">📋 Cofre</div>
        <div className="font-display text-xl text-pleita-ink leading-tight">Seus documentos</div>
      </header>

      <div className="rounded-[10px] bg-surface-card border border-pleita-line p-4 mb-4 flex items-center gap-3">
        <div className="size-12 rounded-full bg-verdict-go/15 grid place-items-center text-xl text-verdict-go">82</div>
        <div className="flex-1">
          <div className="text-sm text-pleita-ink font-semibold">Saúde documental</div>
          <div className="pl-num text-[11px] text-pleita-stone-2">5 ok · 2 atenção · 1 falta</div>
        </div>
      </div>

      <ul className="space-y-2">
        {[
          { ico: "🏛", n: "CND Federal",          s: "Vence em 6 dias",  tone: "stop", btn: "Renovar"      },
          { ico: "🏢", n: "Certidão Estadual",    s: "Vence em 45 dias", tone: "caution", btn: null         },
          { ico: "💼", n: "FGTS/CRF",             s: "Vence em 180 dias",tone: "ok",   btn: null         },
          { ico: "⚖️", n: "CNDT",                 s: "Vence em 167 dias",tone: "ok",   btn: null         },
          { ico: "📊", n: "Balanço Patrimonial 2025", s: "Não encontrado", tone: "stop", btn: "Solicitar" },
          { ico: "🏭", n: "SICAF Nível II",        s: "Renovação até 31/07", tone: "caution", btn: null    },
        ].map((d) => {
          const fg = d.tone === "stop" ? "text-verdict-stop" : d.tone === "caution" ? "text-verdict-caution" : "text-verdict-go";
          const bg = d.tone === "stop" ? "bg-verdict-stop/10" : d.tone === "caution" ? "bg-verdict-caution/10" : "bg-verdict-go/10";
          return (
            <li key={d.n} className="rounded-[10px] bg-surface-card border border-pleita-line p-3 flex items-center gap-3">
              <div className={`size-10 rounded-md ${bg} grid place-items-center text-lg shrink-0`}>{d.ico}</div>
              <div className="flex-1 min-w-0">
                <div className="text-sm text-pleita-ink font-medium truncate">{d.n}</div>
                <div className={`pl-num text-[11px] mt-0.5 ${fg}`}>{d.s}</div>
              </div>
              {d.btn && <button className={`pl-num text-[11px] font-semibold whitespace-nowrap ${fg}`}>{d.btn} →</button>}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function MobilePerfil() {
  return (
    <div className="flex-1 overflow-y-auto pb-32 px-5 pt-3">
      <div className="text-center pb-6 border-b border-pleita-line/60 mb-5">
        <div className="size-20 mx-auto rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-2xl font-semibold mb-3">MS</div>
        <div className="font-display text-lg text-pleita-ink">Marcos Souza</div>
        <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">Souza Engenharia · CNPJ 12.345…</div>
        <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-full bg-pleita-ink text-pleita-paper inline-block mt-3 font-semibold">Veterano</span>
      </div>

      <ul className="space-y-1">
        {[
          ["🏢", "Empresa & CNPJ"],
          ["👥", "Equipe (3 membros)"],
          ["💳", "Faturamento"],
          ["🔌", "Integrações"],
          ["🔔", "Notificações"],
          ["🌐", "Idioma · português"],
          ["🌙", "Tema · claro"],
          ["🔒", "Segurança & 2FA"],
          ["📚", "Central de ajuda"],
          ["🚪", "Sair"],
        ].map(([ic, n]) => (
          <li key={n} className="flex items-center gap-3 px-3 py-3.5 rounded-md hover:bg-surface-2">
            <span className="text-lg">{ic}</span>
            <span className="flex-1 text-sm text-pleita-ink">{n}</span>
            <span className="text-pleita-stone-2">›</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function MobilePhone() {
  const [tab, setTab] = React.useState("home");
  return (
    <div className="relative w-[360px] h-[760px] rounded-[44px] bg-pleita-ink p-2" style={{ boxShadow: "0 40px 100px -20px rgba(15,30,58,.45), 0 16px 40px -10px rgba(15,30,58,.35), inset 0 0 0 1.5px rgba(0,0,0,.5)" }}>
      <div className="absolute inset-2 rounded-[36px] bg-pleita-paper overflow-hidden flex flex-col">
        <MobileStatusBar />
        <div className="relative flex-1 min-h-0 flex flex-col">
          {/* Dynamic Island */}
          <div aria-hidden className="absolute top-2 left-1/2 -translate-x-1/2 w-[110px] h-[32px] bg-pleita-ink rounded-full z-30 flex items-center justify-end pr-3 gap-1.5">
            <span className="size-2 rounded-full bg-pleita-paper/30" />
            <span className="size-2.5 rounded-full bg-pleita-paper/20" />
          </div>
          {tab === "home"   && <MobileHome />}
          {tab === "lances" && <MobileLances />}
          {tab === "cofre"  && <MobileCofre />}
          {tab === "perfil" && <MobilePerfil />}
          <MobileNavBar tab={tab} setTab={setTab} />
        </div>
      </div>
    </div>
  );
}

function ScreenMobile() {
  return (
    <div className="min-h-full bg-surface-1">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-10 md:py-14">
        <header className="mb-10 text-center">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">📱 PWA mobile</div>
          <h1 className="font-display text-4xl md:text-5xl text-pleita-ink leading-tight">A Pleita no seu bolso<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-3 max-w-2xl mx-auto">App PWA otimizado para o pregão ao vivo — lances em tempo real, notificações push, robô configurável. Instale a partir do navegador.</p>
        </header>

        <div className="grid lg:grid-cols-12 gap-10 items-center">
          {/* Mockup com floating cards de contexto */}
          <div className="lg:col-span-7 flex justify-center items-center relative" style={{ minHeight: 760 }}>
            <div aria-hidden className="absolute inset-0 pointer-events-none" style={{ background: "radial-gradient(circle at center, rgb(159 232 112 / .12), transparent 60%)" }} />

            {/* Notificação flutuante 1 — push */}
            <article aria-hidden className="hidden md:flex absolute top-10 -left-2 z-10 items-center gap-3 rounded-2xl bg-surface-card border border-pleita-line shadow-pl-md px-3.5 py-2.5 max-w-[260px]" style={{ transform: "rotate(-2.5deg)" }}>
              <div className="size-9 rounded-md bg-pleita-lime/20 grid place-items-center text-lg shrink-0">🎯</div>
              <div className="min-w-0">
                <div className="text-[12px] text-pleita-ink font-semibold leading-tight">Pregão TRF começou</div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">match 92% · seu robô ativou</div>
              </div>
              <div className="pl-num text-[9px] text-pleita-stone-2">agora</div>
            </article>

            {/* Notificação flutuante 2 — CND vencendo */}
            <article aria-hidden className="hidden md:flex absolute bottom-24 -right-4 z-10 items-center gap-3 rounded-2xl bg-surface-card border border-pleita-line shadow-pl-md px-3.5 py-2.5 max-w-[260px]" style={{ transform: "rotate(2deg)" }}>
              <div className="size-9 rounded-md bg-verdict-caution/15 grid place-items-center text-lg shrink-0">⏰</div>
              <div className="min-w-0">
                <div className="text-[12px] text-pleita-ink font-semibold leading-tight">CND Federal · 6 dias</div>
                <div className="pl-num text-[10px] text-pleita-stone-2 mt-0.5">tocar pra renovar</div>
              </div>
              <div className="pl-num text-[9px] text-pleita-stone-2">2h</div>
            </article>

            {/* Notificação flutuante 3 — vitória */}
            <article aria-hidden className="hidden md:flex absolute bottom-4 -left-6 z-10 items-center gap-3 rounded-2xl px-3.5 py-2.5 max-w-[260px]" style={{ transform: "rotate(-1deg)", background: "rgb(var(--pleita-ink))", boxShadow: "0 12px 30px -8px rgba(15,30,58,.35)" }}>
              <div className="size-9 rounded-md bg-pleita-lime grid place-items-center text-lg shrink-0">🏆</div>
              <div className="min-w-0">
                <div className="text-[12px] text-pleita-paper font-semibold leading-tight">Você venceu Campinas</div>
                <div className="pl-num text-[10px] text-pleita-paper/60 mt-0.5">R$ 312k · −74% vs. ref.</div>
              </div>
              <div className="pl-num text-[9px] text-pleita-paper/60">ontem</div>
            </article>

            <div className="relative z-20">
              <MobilePhone />
            </div>
          </div>

          {/* Features mobile */}
          <aside className="lg:col-span-5 space-y-5">
            {[
              { ico: "🎯", t: "Pregão em tempo real",        d: "Acompanhe lances ao vivo, dê contra-lances rápidos, configure o robô — tudo de qualquer lugar." },
              { ico: "🔔", t: "Push notifications",          d: "Avisos no relógio quando um match novo entra no radar ou quando uma certidão está vencendo." },
              { ico: "📋", t: "Cofre offline",                d: "Documentos cacheados para visualização sem rede. Útil em campo, durante a vistoria." },
              { ico: "🤖", t: "Robô de lances",               d: "Defina limite e passo. O robô dá os lances pra você quando o pregão começa. Sem grudar na tela." },
              { ico: "🔐", t: "Biometria & 2FA",              d: "Face ID / Touch ID para entrar. 2FA nas operações sensíveis (lance final, gerar peça jurídica)." },
            ].map((f) => (
              <article key={f.t} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow">
                <div className="flex items-start gap-4">
                  <div className="size-11 rounded-xl bg-pleita-lime/15 grid place-items-center text-2xl shrink-0">{f.ico}</div>
                  <div>
                    <div className="font-display text-base text-pleita-ink">{f.t}</div>
                    <p className="text-sm text-pleita-stone mt-1 leading-relaxed">{f.d}</p>
                  </div>
                </div>
              </article>
            ))}

            <div className="rounded-[10px] p-6 shadow-pl-md" style={{ background: "rgb(var(--pleita-ink))" }}>
              <div className="font-display text-xl text-pleita-paper">Disponível como PWA</div>
              <p className="text-sm text-pleita-paper/70 mt-2 leading-relaxed">Adicione à tela de início do iPhone ou Android direto do navegador. Sem app store. Sem aprovação. Sempre atualizado.</p>
              <div className="flex gap-2 mt-4">
                <span className="pl-num text-[10px] uppercase tracking-wider px-3 py-1.5 rounded-full bg-pleita-paper/10 text-pleita-paper">iOS 16+</span>
                <span className="pl-num text-[10px] uppercase tracking-wider px-3 py-1.5 rounded-full bg-pleita-paper/10 text-pleita-paper">Android 12+</span>
                <span className="pl-num text-[10px] uppercase tracking-wider px-3 py-1.5 rounded-full bg-pleita-lime text-pleita-ink font-semibold">offline-first</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

window.ScreenMobile = ScreenMobile;