function CatalogScreen({ onOpen, onNav }) {
  const { Tag, Switch, Select, SpecList, Price, Icon } = window.Ds55VeCulosDesignSystem_b5c845;
  const [faixa, setFaixa] = React.useState('TODOS');
  const [cambio, setCambio] = React.useState(null);
  const [só, setSó] = React.useState(false);
  const [ordem, setOrdem] = React.useState('RECENTES');

  const kmDe = v => Number(String(v.km || '').replace(/\D/g, '')) || 0;
  const FAIXAS = {
    'ATÉ 60 MIL': v => v.price <= 60000,
    '60–100 MIL': v => v.price > 60000 && v.price <= 100000,
    'ACIMA DE 100 MIL': v => v.price > 100000
  };
  const ORDENS = {
    'MENOR PREÇO': (a, b) => a.price - b.price,
    'MAIOR PREÇO': (a, b) => b.price - a.price,
    'MENOR KM': (a, b) => kmDe(a) - kmDe(b),
    'MAIS NOVO': (a, b) => b.year - a.year
  };
  const estoque = window.ESTOQUE
    .filter(v => (só ? v.status !== 'RESERVADO' && v.status !== 'VENDIDO' : true))
    .filter(v => faixa === 'TODOS' || FAIXAS[faixa](v))
    .filter(v => !cambio || v.transmission === cambio)
    .slice()
    .sort(ORDENS[ordem] || (() => 0));
  const corDe = id => (window.SEGMENTOS.find(s => s.id === id) || {}).cor;
  const foraDoFiltro = window.ESTOQUE.filter(v => !estoque.includes(v));

  /* Selos de classificação: derivados dos dados do carro, nunca escritos à mão —
     assim não há como um selo ficar desatualizado quando a ficha mudar. */
  const selosDe = v => {
    const anos = Math.max(new Date().getFullYear() - v.year, 1);
    const s = [];
    s.push(v.laudoPendente ? { icon: 'clock', label: 'LAUDO A CAMINHO' } : { icon: 'shield-check', label: 'LAUDO APROVADO' });
    if (v.donos === '1') s.push({ icon: 'user-check', label: 'ÚNICO DONO' });
    if ((v.revisoes || '').toUpperCase().includes('CONCESSION')) s.push({ icon: 'wrench', label: 'REVISÕES NA CONCESSIONÁRIA' });
    if ((v.preparo || []).some(x => x.toLowerCase().includes('garantia'))) s.push({ icon: 'shield', label: 'GARANTIA DE FÁBRICA' });
    if (v.fipe && v.price < v.fipe) s.push({ icon: 'tag', label: 'ABAIXO DA FIPE' });
    if (kmDe(v) / anos <= 12000) s.push({ icon: 'gauge', label: 'KM ABAIXO DA MÉDIA' });
    if ((v.preparo || []).some(x => x.toLowerCase().includes('pneu'))) s.push({ icon: 'circle-check', label: 'PNEUS NOVOS' });
    return s;
  };
  const Selo = ({ icon, label }) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', border: 'var(--borda-fina) solid var(--border-default)', borderRadius: 'var(--raio-1)', font: 'var(--type-etiqueta-p)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>
      <Icon name={icon} size={12} color="var(--text-muted)" />{label}
    </span>
  );
  const CardCarro = ({ v }) => (
    <article onClick={() => onOpen(v)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)' }}>
      <div style={{ height: 4, background: corDe(v.segmento) }} />
      <Foto src={(v.fotos || [])[0]} status={v.status} />
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--esp-3)', flexWrap: 'nowrap' }}>
        <h3 style={{ margin: 0, font: 'var(--peso-titulo) 21px/1.1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', minWidth: 0 }}>{v.model}</h3>
        <span style={{ font: 'var(--peso-titulo) 18px/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', whiteSpace: 'nowrap', flex: '0 0 auto' }}>R$ {v.price.toLocaleString('pt-BR')}</span>
      </div>
      <SpecList withIcons items={[{ value: v.anoRotulo || String(v.year), icon: 'calendar' }, { value: v.km, icon: 'gauge' }, { value: v.transmission, icon: 'settings-2' }]} />
      <Selos v={v} />
      <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: 'var(--text-muted)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{v.curadoria}</p>
    </article>
  );
  const Selos = ({ v }) => (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--esp-2)' }}>
      {selosDe(v).map(x => <Selo key={x.label} icon={x.icon} label={x.label} />)}
    </div>
  );

  const Foto = ({ src, prioritaria = false, status = null }) => (
    <div style={{ position: 'relative', aspectRatio: '4 / 3', background: 'var(--papel-2)', overflow: 'hidden' }}>
      {src
        ? <img src={src} alt="" loading={prioritaria ? 'eager' : 'lazy'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: status === 'VENDIDO' ? 'grayscale(1)' : 'none' }} />
        : <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', font: 'var(--type-etiqueta-p)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)' }}>FOTO · FUNDO NEUTRO</span>}
      {status && (
        <span style={{ position: 'absolute', bottom: 'var(--esp-3)', left: 'var(--esp-3)', background: 'var(--preto-asfalto)', color: 'var(--papel)', padding: '5px 12px', borderRadius: 'var(--raio-pill)', font: 'var(--type-etiqueta-p)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>{status}</span>
      )}
    </div>
  );

  return (
    <div style={{ background: 'var(--papel)' }}>
      <Header count={window.ESTOQUE.length} rota="estoque" onNav={onNav} dark />

      <section style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)', position: 'relative', overflow: 'hidden' }}>
        <img className="h-marca" src="/assets/logo/55-simbolo-branco.png" alt="" aria-hidden="true"
          style={{ position: 'absolute', right: '-6%', top: '-30%', width: '46%', opacity: 0.07, pointerEvents: 'none' }} />
        <div className="faixa grade-hero" style={{ position: 'relative', paddingTop: 'var(--esp-8)', paddingBottom: 'var(--esp-7)', alignItems: 'end' }}>
          <h1 style={{ margin: 0, font: 'var(--peso-titulo) clamp(38px,4.2vw,60px)/0.98 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', maxWidth: '17ch' }}>
            <span className="h-linha" style={{ animationDelay: '40ms' }}>Selecionamos antes</span>
            <span className="h-linha" style={{ animationDelay: '180ms' }}>de você escolher<span className="h-ponto" style={{ color: 'var(--seg-primeiro)' }}>.</span></span>
          </h1>
          <div className="h-linha" style={{ animationDelay: '320ms', display: 'flex', flexDirection: 'column', gap: 'var(--esp-4)', paddingBottom: 6 }}>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)', font: 'var(--peso-corpo) 19px/1.25 var(--font-core)', color: 'var(--papel)' }}>
              {[['file-text', 'Laudo em todo veículo.'], ['clock', 'Histórico completo.'], ['shield-check', 'O que a vistoria apurou, na ficha.'], ['tag', 'Já embutido no preço.']].map(([ic, txt]) => (
                <li key={txt} style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-3)' }}>
                  <Icon name={ic} size={18} color="var(--seg-primeiro)" />{txt}
                </li>
              ))}
            </ul>
            <SpecList tone="inherit" style={{ opacity: 0.6 }} items={[`${window.ESTOQUE.length} ${window.ESTOQUE.length === 1 ? 'VEÍCULO APROVADO' : 'VEÍCULOS APROVADOS'}`, 'ATUALIZADO HOJE']} />
          </div>
        </div>
      </section>

      <div className="barra-filtros" style={{ background: 'var(--papel)', borderBottom: 'var(--borda-fina) solid var(--border-hairline)' }}>
        <div className="faixa" style={{ paddingTop: 'var(--esp-4)', paddingBottom: 'var(--esp-4)', display: 'flex', alignItems: 'center', gap: 'var(--esp-3)', flexWrap: 'wrap' }}>
          <span className="chips-filtros">
            {['TODOS', ...Object.keys(FAIXAS)].map(t => (
              <Tag className="chip-filtro" key={t} selected={faixa === t} onClick={() => setFaixa(t)}>{t}</Tag>
            ))}
            <span className="chips-divisor" aria-hidden="true" />
            {['MANUAL', 'AUTOMÁTICO'].map(t => (
              <Tag className="chip-filtro" key={t} selected={cambio === t} onClick={() => setCambio(cambio === t ? null : t)}>{t}</Tag>
            ))}
          </span>
          <Switch className="so-disponiveis" label="Só disponíveis" checked={só} onChange={e => setSó(e.target.checked)} style={{ marginLeft: 'var(--esp-4)' }} />
          <div className="ordenar-grupo" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 'var(--esp-3)' }}>
            <span style={{ font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>ORDENAR</span>
            <Select className="ordenar-select" aria-label="Ordenar por" options={['RECENTES', ...Object.keys(ORDENS)]} value={ordem} onChange={e => setOrdem(e.target.value)} />
          </div>
        </div>
      </div>

      <section className="faixa secao-estoque">
        {estoque.length === 0 && <p style={{ font: 'var(--type-corpo)' }}>Nenhum veículo com esse filtro. Tire um filtro e tente de novo.</p>}
        {estoque[0] && (
          <article className="grade-destaque-veiculo" onClick={() => onOpen(estoque[0])} style={{ cursor: 'pointer', paddingBottom: 'var(--esp-8)', borderBottom: 'var(--borda-fina) solid var(--border-hairline)' }}>
            <Foto src={(estoque[0].fotos || [])[0]} prioritaria status={estoque[0].status} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-4)', paddingTop: 'var(--esp-2)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)' }}>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: corDe(estoque[0].segmento) }} />
                {estoque[0].marca || 'CURADORIA 55'} · CURADORIA 55 · {estoque[0].id}
              </span>
              <h2 style={{ margin: 0, font: 'var(--peso-titulo) clamp(30px,3vw,42px)/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)' }}>{estoque[0].model}</h2>
              <SpecList className="specs-carro" withIcons items={[{ value: estoque[0].anoRotulo || String(estoque[0].year), icon: 'calendar' }, { value: estoque[0].km, icon: 'gauge' }, { value: estoque[0].transmission, icon: 'settings-2' }, { value: estoque[0].engine, icon: 'fuel' }]} />
              <p style={{ margin: 0, font: 'var(--type-corpo)', maxWidth: '40ch' }}>{estoque[0].curadoria}</p>
              <Selos v={estoque[0]} />
              {estoque[0].destaques && estoque[0].destaques.length > 0 && <SpecList className="specs-destaques" withIcons items={estoque[0].destaques.map(d => ({ value: d.toUpperCase(), icon: 'circle-check' }))} />}
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--esp-5)' }}>
                <Price value={estoque[0].price} size="lg" note={estoque[0].fipe ? `FIPE R$ ${estoque[0].fipe.toLocaleString('pt-BR')}` : 'À VISTA'} />
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>VER FICHA <Icon name="arrow-right" size={14} /></span>
              </div>
            </div>
          </article>
        )}

        <div className="grade-estoque" style={{ paddingTop: 'var(--esp-8)' }}>
          {estoque.slice(1).map(v => <CardCarro key={v.id} v={v} />)}
        </div>

        {/* o filtro recorta, mas o resto do estoque continua à vista logo abaixo */}
        {foraDoFiltro.length > 0 && (
          <div style={{ paddingTop: 'var(--esp-8)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-3)', borderTop: 'var(--borda-fina) solid var(--border-hairline)', paddingTop: 'var(--esp-6)', paddingBottom: 'var(--esp-5)' }}>
              <Icon name="layers" size={15} color="var(--text-muted)" />
              <span style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)' }}>MAIS DO ESTOQUE</span>
            </div>
            <div className="grade-estoque">
              {foraDoFiltro.map(v => <CardCarro key={v.id} v={v} />)}
            </div>
          </div>
        )}
      </section>

      <section style={{ borderTop: 'var(--borda-fina) solid var(--border-hairline)' }}>
        <div className="faixa" style={{ paddingTop: 'var(--esp-7)', paddingBottom: 'var(--esp-7)' }}>
          <SpecList withIcons items={[{ value: 'ÍNDICE DO ESTOQUE', icon: 'list' }]} style={{ paddingBottom: 'var(--esp-4)' }} />
          <div className="tabela-rolagem tabela-indice"><table style={{ width: '100%', borderCollapse: 'collapse', font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)' }}>
            <tbody>
              {window.ESTOQUE.map(v => (
                <tr key={v.id} onClick={() => onOpen(v)} style={{ cursor: 'pointer', borderTop: 'var(--borda-fina) solid var(--border-hairline)' }}>
                  <td style={{ padding: '12px 0', width: 14 }}><span style={{ display: 'block', width: 9, height: 9, borderRadius: '50%', background: corDe(v.segmento) }} /></td>
                  <td style={{ padding: '12px 0', color: 'var(--text-muted)', width: 90 }}>{v.id}</td>
                  <td style={{ padding: '12px 0', font: 'var(--peso-titulo) 15px/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', textTransform: 'none' }}>{v.model}</td>
                  <td style={{ padding: '12px 0', color: 'var(--text-muted)' }}>{v.year}</td>
                  <td style={{ padding: '12px 0', color: 'var(--text-muted)' }}>{v.km}</td>
                  <td style={{ padding: '12px 0', color: 'var(--text-muted)' }}>{v.transmission}</td>
                  <td style={{ padding: '12px 0', color: 'var(--text-muted)' }}>{v.cor || ''}</td>
                  <td style={{ padding: '12px 0', textAlign: 'right' }}>R$ {v.price.toLocaleString('pt-BR')}</td>
                </tr>
              ))}
            </tbody>
          </table></div>
        </div>
      </section>

      <footer style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)' }}>
        <div className="faixa rodape-linhas" style={{ paddingTop: 'var(--esp-8)', paddingBottom: 'var(--esp-8)', display: 'flex', gap: 'var(--esp-7)', alignItems: 'flex-end', flexWrap: 'wrap' }}>
          <div style={{ font: 'var(--peso-titulo) clamp(26px,2.6vw,34px)/1.05 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', maxWidth: '18ch' }}>
            Vendemos somente o que compraríamos<span style={{ color: 'var(--seg-primeiro)' }}>.</span>
          </div>
          <SpecList className="rodape-contatos" direction="column" tone="inherit" withIcons style={{ marginLeft: 'auto', opacity: 0.7 }}
            items={[{ value: 'CURITIBA, PARANÁ', icon: 'map-pin' }, { value: '@55VEICULOS', icon: 'instagram' }, { value: '(15) 9 9652-0317', icon: 'phone' }, { value: 'CNPJ 50.737.731/0001-92', icon: 'file-text' }]} />
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { CatalogScreen });