// Three distinct product mockups: Admin web dashboard, Operação PWA, Morador PWA
const C_MOCK = {
  primary: '#5B50F0', primaryDark: '#4339D4', primaryLight: '#7B72F4',
  navy: '#1A1035', navyMid: '#2D1B69',
  lavender: '#F0EFFE', lavenderMid: '#E4E1FC',
  white: '#FFFFFF', body: '#4A4A6A', muted: '#8888AA', border: '#E8E5FF',
  green: '#22C55E', amber: '#F59E0B', red: '#EF4444',
};

/* ─── ADMIN WEB DASHBOARD MOCKUP (HUBLAR) ─── */
/** Largura “de desenho” do painel; encolhe com o container (sem minWidth gigante nem scroll horizontal). */
const ADMIN_MOCKUP_W = 800;
const ADMIN_MOCKUP_H = 466;

function AdminDashboardBody({ cardBorder }) {
  return (
    <>
      {/* Browser chrome */}
      <div style={{
        background: '#EEEAFB', padding: '8px 14px',
        display: 'flex', alignItems: 'center', gap: 8,
        borderBottom: `1px solid ${C_MOCK.border}`,
      }}>
        <div style={{ display: 'flex', gap: 5 }}>
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#FF5F56' }}/>
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#FFBD2E' }}/>
          <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#27C93F' }}/>
        </div>
        <div style={{
          flex: 1, marginLeft: 14,
          background: C_MOCK.white,
          borderRadius: 6, padding: '4px 10px',
          fontSize: 11, color: C_MOCK.muted,
          border: `1px solid ${C_MOCK.border}`,
        }}>app.hublar.com.br/condominio-solar</div>
      </div>

      <div style={{ display: 'flex', height: 432, background: '#F4F1FE' }}>
        {/* Sidebar */}
        <div style={{
          width: 152, padding: 10,
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{
            background: C_MOCK.white, borderRadius: 12,
            padding: '10px 10px',
            display: 'flex', alignItems: 'center', gap: 8,
            border: cardBorder, marginBottom: 6,
          }}>
            <img src="/redesign/assets/icone-hublar.png" alt="" style={{ width: 26, height: 26, flexShrink: 0 }}/>
            <div style={{ fontSize: 9.5, fontWeight: 700, color: C_MOCK.navy, lineHeight: 1.15 }}>Gestão de<br/>Encomendas</div>
          </div>

          {[
            ['Dashboard', 'chart', true],
            ['Encomendas', 'package', false],
            ['Moradores', 'users', false],
            ['Equipe', 'shield', false],
            ['Banners', 'megaphone', false],
            ['Apps', 'smartphone', false],
            ['Configurações', 'audit', false],
            ['Relatórios', 'chart', false],
            ['Suporte', 'headset', false],
          ].map(([label, icon, active]) => (
            <div key={label} style={{
              display: 'flex', alignItems: 'center', gap: 9,
              padding: '8px 11px', borderRadius: 8,
              background: active ? C_MOCK.primary : 'transparent',
              color: active ? C_MOCK.white : C_MOCK.body,
              fontSize: 10.5, fontWeight: active ? 700 : 500,
            }}>
              <Icon name={icon} size={12} color={active ? C_MOCK.white : C_MOCK.muted} />
              {label}
            </div>
          ))}
        </div>

        <div style={{ flex: 1, padding: '14px 14px 14px 4px', display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
          <div style={{ background: C_MOCK.white, borderRadius: 14, padding: '12px 14px', border: cardBorder, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.02em' }}>Dashboard</div>
              <div style={{ fontSize: 9.5, color: C_MOCK.muted, marginTop: 1 }}>Visão geral da operação para a administração e equipe de portaria.</div>
            </div>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              <div style={{
                background: '#FAF9FE', border: cardBorder, borderRadius: 100,
                padding: '6px 10px', display: 'flex', alignItems: 'center', gap: 6,
                width: 180,
              }}>
                <Icon name="search" size={11} color={C_MOCK.muted}/>
                <span style={{ fontSize: 9, color: C_MOCK.muted }}>Buscar morador, torre, apartamento...</span>
              </div>
              <div style={{ background: C_MOCK.white, border: cardBorder, borderRadius: 100, padding: '6px 10px', fontSize: 9.5, fontWeight: 600, color: C_MOCK.body, display: 'flex', alignItems: 'center', gap: 5 }}>
                <Icon name="key" size={10} color={C_MOCK.body}/> Senha
              </div>
            </div>
          </div>

          <div style={{ background: C_MOCK.white, borderRadius: 14, padding: '12px 14px', border: cardBorder }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.02em' }}>Operação de hoje</div>
                <div style={{ fontSize: 9, color: C_MOCK.muted, marginTop: 1 }}>Fluxo atual com foco nas pendências mais antigas.</div>
              </div>
              <div style={{ background: '#DCFCE7', color: '#15803D', fontSize: 8.5, fontWeight: 700, padding: '3px 8px', borderRadius: 100, display: 'flex', alignItems: 'center', gap: 4 }}>
                <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#15803D' }}/>
                Painel ao vivo
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[
                ['PENDÊNCIAS CRÍTICAS', '3'],
                ['SEM WHATSAPP', '8'],
                ['EQUIPE ATIVA', '4'],
                ['ATIVAÇÕES PENDENTES', '12'],
              ].map(([l, n]) => (
                <div key={l} style={{ background: '#FAF9FE', border: cardBorder, borderRadius: 10, padding: '10px 11px' }}>
                  <div style={{ fontSize: 8, color: C_MOCK.muted, fontWeight: 700, letterSpacing: '0.04em', marginBottom: 4 }}>{l}</div>
                  <div style={{ fontSize: 20, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.03em', lineHeight: 1 }}>{n}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
              ['RECEBIDAS HOJE', '42', 'package', 'Entradas registradas no dia.'],
              ['ENTREGUES HOJE', '31', 'check', 'Retiradas confirmadas com rastreabilidade.'],
              ['TEMPO MÉDIO DE RETIRADA', '0.8d', 'clock', 'Média de permanência antes da retirada.'],
              ['MORADORES ATIVOS', '528', 'users', 'Cadastros ativos vinculados a unidades.'],
            ].map(([l, n, ic, desc]) => (
              <div key={l} style={{ background: C_MOCK.white, border: cardBorder, borderRadius: 12, padding: '11px 12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 5 }}>
                  <div style={{ fontSize: 7.5, color: C_MOCK.muted, fontWeight: 700, letterSpacing: '0.05em' }}>{l}</div>
                  <Icon name={ic} size={11} color={C_MOCK.primary}/>
                </div>
                <div style={{ fontSize: 22, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 5 }}>{n}</div>
                <div style={{ fontSize: 8.5, color: C_MOCK.muted, lineHeight: 1.35 }}>{desc}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, flex: 1, minHeight: 0 }}>
            <div style={{ background: C_MOCK.white, borderRadius: 12, padding: '11px 12px', border: cardBorder }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.02em' }}>Carga por bloco</div>
                  <div style={{ fontSize: 8.5, color: C_MOCK.muted, marginTop: 1 }}>Onde a fila está mais concentrada agora.</div>
                </div>
                <div style={{ background: '#FEF3C7', color: '#B45309', fontSize: 8, fontWeight: 700, padding: '3px 7px', borderRadius: 100 }}>Prioridade operacional</div>
              </div>
              {[['Bloco 1', 8, 80], ['Bloco 2', 5, 50], ['Bloco 3', 2, 20]].map(([n, count, pct], i) => (
                <div key={i} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, marginBottom: 4 }}>
                    <span style={{ fontWeight: 700, color: C_MOCK.navy }}>{n}</span>
                    <span style={{ color: C_MOCK.muted }}>{count} pendentes</span>
                  </div>
                  <div style={{ height: 6, background: '#F0EFFE', borderRadius: 100, overflow: 'hidden' }}>
                    <div style={{ width: pct + '%', height: '100%', background: `linear-gradient(90deg, ${C_MOCK.primary}, ${C_MOCK.primaryLight})`, borderRadius: 100 }}/>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ background: C_MOCK.white, borderRadius: 12, padding: '11px 12px', border: cardBorder }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 800, color: C_MOCK.navy, letterSpacing: '-0.02em' }}>Atividade recente</div>
                  <div style={{ fontSize: 8.5, color: C_MOCK.muted, marginTop: 1 }}>Últimas movimentações registradas.</div>
                </div>
                <Icon name="bell" size={11} color={C_MOCK.muted}/>
              </div>
              {[
                ['1', 'Entrega por código', 'Bloco 1 · Apto 101'],
                ['2', 'Entrega por assinatura', 'Bloco 2 · Apto 304'],
                ['3', 'Encomenda registrada', 'Bloco 1 · Apto 502'],
              ].map(([n, t, s], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderTop: i ? '1px solid #F0EFFE' : 'none' }}>
                  <div style={{ width: 22, height: 22, borderRadius: '50%', background: '#F0EFFE', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 10, fontWeight: 700, color: C_MOCK.primary }}>{n}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 9.5, fontWeight: 700, color: C_MOCK.navy }}>{t}</div>
                    <div style={{ fontSize: 8.5, color: C_MOCK.muted }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function AdminMockup({
  scale: userScale = 1,
  layout = 'contain',
  coverFrameStyle,
  coverMaxScale = 1.22,
}) {
  const wrapRef = React.useRef(null);
  const [fit, setFit] = React.useState(1);

  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const run = () => {
      const rect = el.getBoundingClientRect();
      const w = rect.width;
      const h = rect.height;
      if (w <= 0) return;
      if (layout === 'cover') {
        if (h <= 0) return;
        const sw = w / ADMIN_MOCKUP_W;
        const sh = h / ADMIN_MOCKUP_H;
        setFit(Math.min(coverMaxScale, Math.max(sw, sh) * userScale));
      } else {
        setFit(Math.min(1, (w / ADMIN_MOCKUP_W) * userScale));
      }
    };
    run();
    const ro = new ResizeObserver(run);
    ro.observe(el);
    return () => ro.disconnect();
  }, [userScale, layout, coverMaxScale]);

  const s = fit;
  const cardBorder = '1px solid #E8E5FF';
  const shell = {
    borderRadius: 14,
    background: '#F4F1FE',
    boxShadow: `0 30px 80px ${C_MOCK.primary}30, 0 0 0 1px ${C_MOCK.border}`,
    fontFamily: 'Plus Jakarta Sans',
  };

  if (layout === 'cover') {
    return (
      <div
        ref={wrapRef}
        style={{
          width: '100%',
          maxWidth: '100%',
          minWidth: 0,
          position: 'relative',
          overflow: 'hidden',
          ...shell,
          ...coverFrameStyle,
        }}
      >
        <div style={{
          position: 'absolute',
          inset: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <div style={{
            width: ADMIN_MOCKUP_W,
            height: ADMIN_MOCKUP_H,
            transform: `scale(${s})`,
            transformOrigin: 'center center',
            flexShrink: 0,
          }}>
            <AdminDashboardBody cardBorder={cardBorder} />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      ref={wrapRef}
      style={{ width: '100%', maxWidth: '100%', minWidth: 0 }}
    >
      <div style={{
        width: ADMIN_MOCKUP_W * s,
        maxWidth: '100%',
        height: ADMIN_MOCKUP_H * s,
        margin: '0 auto',
        overflow: 'hidden',
        ...shell,
      }}>
        <div style={{
          width: ADMIN_MOCKUP_W,
          height: ADMIN_MOCKUP_H,
          transform: `scale(${s})`,
          transformOrigin: 'top left',
        }}>
          <AdminDashboardBody cardBorder={cardBorder} />
        </div>
      </div>
    </div>
  );
}

/* ─── MOBILE PHONE FRAME ─── */
function PhoneFrame({ children, theme = 'dark', label }) {
  const isDark = theme === 'dark';
  return (
    <div style={{
      width: 270, height: 540,
      background: isDark ? '#0E0820' : C_MOCK.white,
      borderRadius: 36,
      padding: 10,
      boxShadow: `0 30px 80px ${C_MOCK.primary}30, inset 0 0 0 1px ${isDark ? 'rgba(255,255,255,0.08)' : C_MOCK.border}`,
      position: 'relative',
      flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
        width: 80, height: 22, background: '#000',
        borderRadius: 14, zIndex: 10,
      }}/>
      <div style={{
        width: '100%', height: '100%',
        background: isDark ? C_MOCK.navy : '#FAFAFE',
        borderRadius: 28, overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        position: 'relative',
      }}>
        {children}
      </div>
    </div>
  );
}

/* ─── OPERAÇÃO PWA (com assinatura digital) ─── */
function LegacyOperacaoMockup({ theme = 'dark' }) {
  const isDark = theme === 'dark';
  const cardBg = isDark ? 'rgba(255,255,255,0.06)' : C_MOCK.white;
  const border = isDark ? 'rgba(255,255,255,0.08)' : C_MOCK.border;
  const textP = isDark ? C_MOCK.white : C_MOCK.navy;
  const textS = isDark ? 'rgba(255,255,255,0.5)' : C_MOCK.muted;

  return (
    <PhoneFrame theme={theme}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', fontFamily: 'Plus Jakarta Sans' }}>
        <div style={{ height: 38, flexShrink: 0 }}/>

        <div style={{ padding: '4px 18px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 10, color: textS, fontWeight: 500, marginBottom: 1 }}>Operação · Solar</div>
            <div style={{ fontSize: 16, fontWeight: 800, color: textP, letterSpacing: '-0.02em' }}>Encomendas</div>
          </div>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: `${C_MOCK.primary}25`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="users" size={14} color={C_MOCK.primaryLight} />
          </div>
        </div>

        <div style={{ padding: '0 14px', display: 'flex', gap: 4, marginBottom: 10 }}>
          {[['Pendentes', 18, true], ['Entregues', 31, false], ['Histórico', null, false]].map(([l, n, active]) => (
            <div key={l} style={{
              flex: 1, padding: '7px 4px',
              borderRadius: 8, textAlign: 'center',
              background: active ? C_MOCK.primary : 'transparent',
              border: active ? 'none' : `1px solid ${border}`,
              fontSize: 10, fontWeight: 700,
              color: active ? C_MOCK.white : textS,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
            }}>
              {l} {n !== null && <span style={{
                fontSize: 9, padding: '1px 5px', borderRadius: 8,
                background: active ? 'rgba(255,255,255,0.25)' : (isDark ? 'rgba(255,255,255,0.1)' : C_MOCK.lavender),
                color: active ? C_MOCK.white : textS,
              }}>{n}</span>}
            </div>
          ))}
        </div>

        {/* Encomenda em retirada (ações) */}
        <div style={{ padding: '0 14px', flex: 1, display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
          <div style={{
            background: cardBg, border: `1px solid ${border}`,
            borderRadius: 12, padding: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: `${C_MOCK.primary}20`,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <div style={{ fontSize: 8, color: C_MOCK.primaryLight, fontWeight: 600, lineHeight: 1 }}>AP</div>
                <div style={{ fontSize: 13, color: C_MOCK.primaryLight, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.02em' }}>304</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: textP }}>Marina Silva</div>
                <div style={{ fontSize: 10, color: textS, fontFamily: 'ui-monospace, monospace', marginTop: 1 }}>BR128739K</div>
                <div style={{ fontSize: 9, color: textS, marginTop: 1 }}>Sedex · há 2h</div>
              </div>
            </div>

            <div style={{ fontSize: 9, color: textS, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>Como retirar?</div>

            {/* Opção 1: código */}
            <div style={{
              background: `${C_MOCK.primary}15`, border: `1px solid ${C_MOCK.primary}40`,
              borderRadius: 9, padding: '9px 10px',
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6,
            }}>
              <Icon name="key" size={13} color={C_MOCK.primary}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: textP }}>Código diário</div>
                <div style={{ fontSize: 9, color: textS }}>Morador informa o código de hoje</div>
              </div>
            </div>

            {/* Opção 2: assinatura */}
            <div style={{
              background: isDark ? 'rgba(255,255,255,0.04)' : '#FAFAFE',
              border: `1px solid ${border}`,
              borderRadius: 9, padding: '9px 10px',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                <path d="M3 17l4-4 4 4 6-6 4 4M3 21h18" stroke={C_MOCK.primary} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: textP }}>Assinatura digital</div>
                <div style={{ fontSize: 9, color: textS }}>Morador assina na tela do app da operação</div>
              </div>
            </div>
          </div>

          {/* Lista resumida */}
          <div style={{ fontSize: 9, color: textS, fontWeight: 600, padding: '4px 4px 0', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Próximos</div>
          {[
            { ap: '101', nome: 'A. Oliveira', tipo: 'Amazon · há 5h' },
            { ap: '210', nome: 'C. Souza', tipo: 'Correios · ontem' },
          ].map((item, i) => (
            <div key={i} style={{
              background: cardBg, border: `1px solid ${border}`,
              borderRadius: 11, padding: '8px 11px',
              display: 'flex', gap: 10, alignItems: 'center',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: `${C_MOCK.primary}20`,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <div style={{ fontSize: 7, color: C_MOCK.primaryLight, fontWeight: 600, lineHeight: 1 }}>AP</div>
                <div style={{ fontSize: 11, color: C_MOCK.primaryLight, fontWeight: 800, lineHeight: 1 }}>{item.ap}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: textP }}>{item.nome}</div>
                <div style={{ fontSize: 9, color: textS, marginTop: 1 }}>{item.tipo}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom action */}
        <div style={{ padding: '12px 14px 16px' }}>
          <div style={{
            background: C_MOCK.primary, color: C_MOCK.white,
            borderRadius: 12, padding: '11px 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: `0 8px 20px ${C_MOCK.primary}55`,
          }}>
            <Icon name="barcode" size={16} color={C_MOCK.white} />
            <span style={{ fontSize: 12, fontWeight: 700 }}>Registrar nova encomenda</span>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

/* ─── MORADOR PWA ─── */
function LegacyMoradorMockup({ theme = 'light' }) {
  const isDark = theme === 'dark';
  const bg = isDark ? C_MOCK.navy : C_MOCK.white;
  const cardBg = isDark ? 'rgba(255,255,255,0.06)' : '#FAFAFE';
  const border = isDark ? 'rgba(255,255,255,0.08)' : C_MOCK.border;
  const textP = isDark ? C_MOCK.white : C_MOCK.navy;
  const textS = isDark ? 'rgba(255,255,255,0.5)' : C_MOCK.muted;

  return (
    <PhoneFrame theme={theme}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: bg, fontFamily: 'Plus Jakarta Sans' }}>
        <div style={{ height: 38, flexShrink: 0 }}/>

        <div style={{ padding: '4px 18px 14px' }}>
          <div style={{ fontSize: 10, color: textS, fontWeight: 500, marginBottom: 1 }}>Olá, Marina</div>
          <div style={{ fontSize: 15, fontWeight: 800, color: textP, letterSpacing: '-0.02em' }}>Apartamento 304 · 3 moradores</div>
        </div>

        <div style={{ padding: '0 14px 14px' }}>
          <div style={{
            background: `linear-gradient(135deg, ${C_MOCK.primary}, ${C_MOCK.primaryLight})`,
            borderRadius: 16, padding: 16,
            color: C_MOCK.white,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -20, right: -20, width: 100, height: 100,
              borderRadius: '50%', background: 'rgba(255,255,255,0.1)',
            }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6, position: 'relative' }}>
              <div style={{ fontSize: 9, fontWeight: 600, opacity: 0.85, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Seu código de hoje</div>
              <Icon name="key" size={14} color={C_MOCK.white} />
            </div>
            <div style={{
              fontFamily: 'ui-monospace, monospace',
              fontSize: 32, fontWeight: 800,
              letterSpacing: '0.15em',
              position: 'relative',
              marginBottom: 4,
            }}>4 7 2 9</div>
            <div style={{ fontSize: 10, opacity: 0.8, position: 'relative' }}>Válido até 23h59 · ou retire com assinatura</div>
          </div>
        </div>

        <div style={{ padding: '0 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: textP }}>Encomendas do apto</div>
          <div style={{
            fontSize: 10, fontWeight: 700, color: C_MOCK.amber,
            background: `${C_MOCK.amber}20`,
            padding: '2px 8px', borderRadius: 10,
          }}>2 pendentes</div>
        </div>

        <div style={{ padding: '0 14px', display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
          {[
            { tipo: 'Sedex', cod: 'BR128739K', recebida: 'Recebida há 2h', priv: false, dest: 'Para o apto' },
            { tipo: 'Privada', cod: 'AM921548X', recebida: 'Recebida ontem', priv: true, dest: 'Só você vê' },
          ].map((p, i) => (
            <div key={i} style={{
              background: cardBg,
              border: p.priv ? `1px solid ${C_MOCK.primary}55` : `1px solid ${border}`,
              borderRadius: 12, padding: '10px 12px',
              display: 'flex', gap: 10, alignItems: 'center',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 9,
                background: p.priv ? `${C_MOCK.primary}25` : `${C_MOCK.primary}15`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <Icon name={p.priv ? 'lock' : 'package'} size={15} color={C_MOCK.primary} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: textP }}>{p.tipo}</div>
                  {p.priv && <span style={{ fontSize: 8, fontWeight: 700, color: C_MOCK.primary, background: `${C_MOCK.primary}20`, padding: '1px 5px', borderRadius: 6 }}>PRIVADA</span>}
                </div>
                <div style={{ fontSize: 9.5, color: textS, marginTop: 1, fontFamily: 'ui-monospace, monospace' }}>{p.cod}</div>
                <div style={{ fontSize: 8.5, color: textS, marginTop: 1 }}>{p.recebida} · {p.dest}</div>
              </div>
            </div>
          ))}

          {/* Modo ausência */}
          <div style={{
            background: isDark ? 'rgba(245,158,11,0.08)' : '#FFF8EC',
            border: `1px solid ${C_MOCK.amber}40`,
            borderRadius: 10, padding: '8px 11px',
            display: 'flex', alignItems: 'center', gap: 8,
            marginTop: 4,
          }}>
            <Icon name="moon" size={13} color={C_MOCK.amber} />
            <div style={{ fontSize: 9.5, color: textS, flex: 1, lineHeight: 1.4 }}>
              <span style={{ color: textP, fontWeight: 700 }}>Modo ausência</span> ativo · só avisar
            </div>
          </div>
        </div>

        <div style={{
          padding: '8px 14px 14px',
          borderTop: `1px solid ${border}`,
          display: 'flex', justifyContent: 'space-around',
          background: bg,
        }}>
          {[['package', 'Encomendas', true], ['plus', 'Privada', false], ['users', 'Perfil', false]].map(([icon, label, active]) => (
            <div key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
              <Icon name={icon} size={16} color={active ? C_MOCK.primary : textS} />
              <span style={{ fontSize: 8.5, fontWeight: active ? 700 : 500, color: active ? C_MOCK.primary : textS }}>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </PhoneFrame>
  );
}

/* Overrides used by the landing page: mirror the current PWA home screens more closely. */
function OperacaoMockup({ theme = 'light' }) {
  const cardBorder = '1px solid rgba(111,103,170,0.14)';
  return (
    <PhoneFrame theme="light">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#F5F4FB', fontFamily: 'Plus Jakarta Sans', padding: '44px 12px 14px', gap: 9, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 10px', borderRadius: 16, background: 'rgba(255,255,255,0.92)', border: cardBorder, boxShadow: '0 10px 28px rgba(51,46,108,0.08)' }}>
          <Icon name="monitor" size={15} color={C_MOCK.primary} />
          <div>
            <div style={{ fontSize: 9, color: C_MOCK.muted }}>Condominio</div>
            <div style={{ fontSize: 11, fontWeight: 800, color: C_MOCK.navy }}>Solar Residence</div>
          </div>
        </div>

        <div style={{ padding: 14, borderRadius: 18, color: C_MOCK.white, background: 'radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 34%), linear-gradient(145deg, #645fff 0%, #9758ef 100%)', boxShadow: '0 16px 34px rgba(77,67,176,0.25)' }}>
          <div style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.75, marginBottom: 5 }}>Receber encomenda</div>
          <div style={{ fontSize: 17, fontWeight: 850, letterSpacing: '-0.03em', lineHeight: 1.04, marginBottom: 7 }}>Escaneie a etiqueta ou inclua manualmente</div>
          <div style={{ fontSize: 10, lineHeight: 1.4, color: 'rgba(255,255,255,0.74)', marginBottom: 12 }}>Boa tarde, Portaria. Depois toque em uma pendente para validar a entrega.</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div style={{ background: '#FCFBFF', color: C_MOCK.navy, borderRadius: 12, padding: '10px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, fontWeight: 800 }}>
              <Icon name="barcode" size={13} color={C_MOCK.primary} /> Escanear
            </div>
            <div style={{ background: 'rgba(255,255,255,0.12)', color: C_MOCK.white, border: '1px solid rgba(255,255,255,0.22)', borderRadius: 12, padding: '10px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, fontWeight: 800 }}>
              <Icon name="audit" size={13} color={C_MOCK.white} /> Digitar
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 7 }}>
          {[
            ['18', 'Recebidas hoje', '#169d67'],
            ['7', 'Pendentes', C_MOCK.primary],
            ['11', 'Entregues hoje', '#b456f4'],
          ].map(([n, l, color]) => (
            <div key={l} style={{ background: 'rgba(255,255,255,0.92)', border: cardBorder, borderRadius: 14, padding: '9px 7px', textAlign: 'center', boxShadow: '0 8px 18px rgba(51,46,108,0.06)' }}>
              <div style={{ fontSize: 18, fontWeight: 850, lineHeight: 1, color }}>{n}</div>
              <div style={{ fontSize: 7.8, color: C_MOCK.muted, marginTop: 4, lineHeight: 1.2 }}>{l}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            ['search', 'Buscar', 'Codigo, morador ou unidade.', C_MOCK.primary],
            ['bell', 'Avisos', 'Mensagens ao morador.', C_MOCK.amber],
          ].map(([icon, title, desc, color]) => (
            <div key={title} style={{ minHeight: 58, background: 'rgba(255,255,255,0.92)', border: cardBorder, borderRadius: 16, padding: 10, display: 'flex', gap: 8, alignItems: 'center' }}>
              <Icon name={icon} size={17} color={color} />
              <div>
                <div style={{ fontSize: 11, fontWeight: 800, color: C_MOCK.navy }}>{title}</div>
                <div style={{ fontSize: 8, color: C_MOCK.muted, lineHeight: 1.25 }}>{desc}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ background: 'rgba(255,255,255,0.92)', border: cardBorder, borderRadius: 18, padding: 12, flex: 1, minHeight: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 850, color: C_MOCK.navy }}>Entradas e entregas</div>
              <div style={{ fontSize: 8.5, color: C_MOCK.muted }}>Toque para ver a ficha completa.</div>
            </div>
            <div style={{ fontSize: 8.5, fontWeight: 800, color: C_MOCK.body, border: cardBorder, borderRadius: 999, padding: '4px 7px' }}>Historico</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, background: '#EEEAFB', borderRadius: 12, padding: 4, marginBottom: 9 }}>
            <div style={{ background: C_MOCK.primary, color: C_MOCK.white, borderRadius: 9, padding: '6px 4px', textAlign: 'center', fontSize: 9.5, fontWeight: 800 }}>Pendentes 7</div>
            <div style={{ color: C_MOCK.body, borderRadius: 9, padding: '6px 4px', textAlign: 'center', fontSize: 9.5, fontWeight: 700 }}>Entregues 11</div>
          </div>
          {[
            ['Marina Silva', 'Bloco A - Apto 304'],
            ['Roberto Lima', 'Bloco B - Apto 108'],
          ].map(([name, meta]) => (
            <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderTop: '1px solid #F0EFFE' }}>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(209,122,29,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="package" size={16} color={C_MOCK.amber} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 800, color: C_MOCK.navy }}>{name}</div>
                  <div style={{ fontSize: 7.5, fontWeight: 800, color: '#B45309', background: '#FEF3C7', borderRadius: 999, padding: '2px 5px' }}>Pendente</div>
                </div>
                <div style={{ fontSize: 8.5, color: C_MOCK.muted }}>{meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </PhoneFrame>
  );
}

function MoradorMockup({ theme = 'light' }) {
  const cardBorder = '1px solid rgba(107,103,255,0.14)';
  return (
    <PhoneFrame theme="light">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: '#F5F3FF', fontFamily: 'Plus Jakarta Sans', padding: '44px 12px 14px', gap: 9, overflow: 'hidden' }}>
        <div style={{ padding: 12, borderRadius: 18, background: 'rgba(255,255,255,0.92)', border: cardBorder, boxShadow: '0 10px 28px rgba(47,39,105,0.08)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto minmax(0,1fr) auto', alignItems: 'center', gap: 9 }}>
            <Icon name="monitor" size={16} color={C_MOCK.primary} />
            <div>
              <div style={{ fontSize: 9, color: C_MOCK.muted }}>Condominio</div>
              <div style={{ fontSize: 11, fontWeight: 800, color: C_MOCK.navy }}>Solar Residence</div>
            </div>
            <Icon name="chevronDown" size={13} color={C_MOCK.muted} />
          </div>
        </div>

        <div style={{ display: 'block', borderRadius: 18, padding: 15, color: C_MOCK.white, background: 'radial-gradient(circle at top right, rgba(255,255,255,0.14), transparent 34%), linear-gradient(135deg, #6967ff 0%, #b056f4 100%)', boxShadow: '0 18px 42px rgba(77,67,176,0.25)' }}>
          <div style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.78, marginBottom: 7 }}>Aguardando voce</div>
          <div style={{ fontSize: 27, fontWeight: 850, letterSpacing: '-0.05em', lineHeight: 1.02 }}><span>2</span> encomendas</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.78)', marginTop: 7 }}>Marina Costa - Bloco A, Apto 304</div>
          <div style={{ fontSize: 9.5, color: 'rgba(255,255,255,0.65)', marginTop: 6 }}>Toque para ver pendentes, codigos de retirada e retirar na portaria.</div>
        </div>

        {[
          ['lock', 'Modo restrito', 'Ative para que apenas voce retire.', 'rgba(198,106,0,0.14)', '#c66a00'],
          ['bell', 'Avisos da portaria', 'Historico e respostas a equipe.', 'rgba(209,122,29,0.12)', C_MOCK.amber],
          ['users', 'Moradores do apto', 'Quem usa o app na sua unidade.', 'rgba(107,103,255,0.14)', C_MOCK.primary],
        ].map(([icon, title, desc, bg, color]) => (
          <div key={title} style={{ background: 'rgba(255,255,255,0.92)', border: cardBorder, borderRadius: 17, padding: 11, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 34, height: 34, borderRadius: 10, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={icon} size={16} color={color} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 850, color: C_MOCK.navy }}>{title}</div>
              <div style={{ fontSize: 8.5, color: C_MOCK.muted, lineHeight: 1.25 }}>{desc}</div>
            </div>
            <Icon name="chevronRight" size={15} color={C_MOCK.muted} />
          </div>
        ))}

        <div style={{ background: 'rgba(255,255,255,0.92)', border: cardBorder, borderRadius: 18, padding: 12, flex: 1, minHeight: 0 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, background: '#EEEAFB', borderRadius: 12, padding: 4, marginBottom: 9 }}>
            <div style={{ background: C_MOCK.primary, color: C_MOCK.white, borderRadius: 9, padding: '6px 4px', textAlign: 'center', fontSize: 9.5, fontWeight: 800 }}>Aguardando 2</div>
            <div style={{ color: C_MOCK.body, borderRadius: 9, padding: '6px 4px', textAlign: 'center', fontSize: 9.5, fontWeight: 700 }}>Historico 5</div>
          </div>
          {[
            ['package', 'Mercado Livre', 'Bloco A - Apto 304', 'Codigo do dia: 4829', C_MOCK.primary],
            ['lock', 'Encomenda privada', 'Modo restrito', 'Codigo restrito: 9136', '#c66a00'],
          ].map(([icon, title, meta, code, color]) => (
            <div key={title} style={{ display: 'flex', gap: 9, padding: '9px 0', borderTop: '1px solid #F0EFFE' }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `${color}20`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={icon} size={17} color={color} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 850, color: C_MOCK.navy }}>{title}</div>
                <div style={{ fontSize: 8.5, color: C_MOCK.muted }}>{meta}</div>
                <div style={{ fontSize: 9.2, color: color, fontWeight: 800, fontFamily: 'ui-monospace, monospace', marginTop: 2 }}>{code}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-around', paddingTop: 2, color: C_MOCK.muted }}>
          {[
            ['package', 'Encomendas', true],
            ['lock', 'Restrito', false],
            ['users', 'Perfil', false],
          ].map(([icon, label, active]) => (
            <div key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
              <Icon name={icon} size={14} color={active ? C_MOCK.primary : C_MOCK.muted} />
              <span style={{ fontSize: 7.8, fontWeight: active ? 800 : 600, color: active ? C_MOCK.primary : C_MOCK.muted }}>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </PhoneFrame>
  );
}

window.AdminMockup = AdminMockup;
window.OperacaoMockup = OperacaoMockup;
window.MoradorMockup = MoradorMockup;
window.PhoneFrame = PhoneFrame;