function FinanceScreen({ onNav }) {
  const { SpecList, Select, Input, Button, Badge, Icon, Tabs } = window.Ds55VeCulosDesignSystem_b5c845;
  const brl = n => 'R$ ' + Math.round(n).toLocaleString('pt-BR');
  const digitos = t => Number(String(t || '').replace(/\D/g, '')) || 0;

  /* com mais de um carro no estoque, o simulador deixa escolher qual */
  const [veiculoId, setVeiculoId] = React.useState(window.ESTOQUE[0].id);
  const carro = window.ESTOQUE.find(v => v.id === veiculoId) || window.ESTOQUE[0];
  const valor = carro.price;

  const [modo, setModo] = React.useState('FINANCIAMENTO');

  /* financiamento: a entrada é um valor em R$ — o slider e o campo mexem no mesmo número */
  const [entradaValor, setEntradaValor] = React.useState(Math.round(valor * 0.2));
  const trocaVeiculo = id => {
    setVeiculoId(id);
    const v = window.ESTOQUE.find(x => x.id === id);
    if (v) { setEntradaValor(Math.round(v.price * 0.2)); setCotaSel(null); }
  };
  const pct = Math.round(entradaValor / valor * 100);
  const [prazo, setPrazo] = React.useState('48');
  const financiado = Math.max(valor - entradaValor, 0);
  const parcela = Math.round(financiado * 1.0175 ** Number(prazo) * 0.0009 + financiado / Number(prazo));
  const totalFinanciamento = entradaValor + parcela * Number(prazo);

  /* consórcio no formato Cota Market: o crédito é o preço do veículo (margem de
     10% para cima e para baixo) e o cliente diz quanto tem de entrada (ágio) */
  const [entradaCota, setEntradaCota] = React.useState('');
  const entradaNum = digitos(entradaCota);
  const margemMin = Math.round(valor * 0.9);
  const margemMax = Math.round(valor * 1.1);
  const compativeis = window.COTAS.filter(q => q.credito >= margemMin && q.credito <= margemMax);
  const mostradas = (entradaNum > 0 ? compativeis.filter(q => q.agio <= entradaNum) : compativeis)
    .slice().sort((a, b) => a.agio - b.agio);
  const [cotaSel, setCotaSel] = React.useState(null);
  const c = mostradas.find(q => q.id === cotaSel) || mostradas[0];
  const totalConsorcio = c ? c.agio + c.parcela * c.restantes : 0;
  const menorAgio = compativeis.length ? Math.min(...compativeis.map(q => q.agio)) : 0;

  return (
    <div style={{ background: 'var(--papel)', minHeight: '100%' }}>
      <Header count={window.ESTOQUE.length} rota="financiamento" onNav={onNav} dark />
      <section style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)' }}>
        <div className="faixa grade-hero-editorial" style={{ paddingTop: 'var(--esp-8)', paddingBottom: 'var(--esp-7)', alignItems: 'end' }}>
          <h1 style={{ margin: 0, font: 'var(--peso-titulo) clamp(34px,3.8vw,54px)/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', maxWidth: '18ch' }}>
            A taxa aparece antes da assinatura<span style={{ color: 'var(--seg-primeiro)' }}>.</span>
          </h1>
          <p style={{ margin: 0, font: 'var(--type-corpo)', maxWidth: '38ch', paddingBottom: 6 }}>
            Dois caminhos: financiamento no banco ou cota de consórcio já contemplada. Simule os dois e leve a proposta por escrito.
          </p>
        </div>
      </section>

      <div className="faixa" style={{ paddingTop: 'var(--esp-6)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--esp-5)', flexWrap: 'wrap' }}>
        <Tabs className="abas" items={['FINANCIAMENTO', 'CONSÓRCIO']} value={modo} onChange={setModo} style={{ flex: '1 1 auto' }} />
        {window.ESTOQUE.length > 1 && (
          <Select className="seletor-veiculo" aria-label="Veículo da simulação"
            options={window.ESTOQUE.map(v => ({ value: v.id, label: `${v.model} · ${brl(v.price)}` }))}
            value={veiculoId} onChange={e => trocaVeiculo(e.target.value)} />
        )}
      </div>

      {modo === 'FINANCIAMENTO' ? (
        <section className="faixa grade-simular" style={{ paddingTop: 'var(--esp-7)', paddingBottom: 'var(--esp-7)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-5)' }}>
            <h2 style={{ margin: 0, font: 'var(--type-titulo-2)', letterSpacing: 'var(--tracking-titulo)' }}>Financiamento bancário</h2>
            <SpecList direction="column" withIcons items={[{ label: 'VEÍCULO', value: carro.model.toUpperCase(), icon: 'car' }, { label: 'PREÇO', value: brl(valor), icon: 'tag' }].concat(carro.status ? [{ label: 'STATUS', value: carro.status, icon: 'clock' }] : [])} />
            <Input label={`Entrada · ${pct}%`} mono inputMode="numeric" autoComplete="off"
              value={brl(entradaValor)}
              onChange={e => setEntradaValor(Math.min(digitos(e.target.value), Math.round(valor * 0.9)))}
              hint="Digite o valor ou arraste o controle abaixo." />
            <input type="range" min="10" max="60" step="5" value={Math.min(Math.max(pct, 10), 60)}
              aria-label="Entrada em porcentagem"
              onChange={e => setEntradaValor(Math.round(valor * Number(e.target.value) / 100))}
              style={{ width: '100%', accentColor: 'var(--seg-primeiro)' }} />
            <Select label="Prazo" options={[{ value: '24', label: '24 meses' }, { value: '36', label: '36 meses' }, { value: '48', label: '48 meses' }, { value: '60', label: '60 meses' }]} value={prazo} onChange={e => setPrazo(e.target.value)} />
            <Input label="CPF" mono placeholder="000.000.000-00" type="tel" inputMode="numeric" autoComplete="off" />
            <Button className="acao-mobile" size="lg">Receber proposta por escrito</Button>
          </div>

          <div style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)', padding: 'var(--esp-6)', display: 'flex', flexDirection: 'column', gap: 'var(--esp-5)', borderTop: '5px solid var(--seg-primeiro)' }}>
            <Badge tone="acento" style={{ alignSelf: 'flex-start' }}>SEM TAXA ESCONDIDA</Badge>
            <div>
              <span style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: '#9A9A93' }}>PARCELA ESTIMADA</span>
              <div style={{ font: 'var(--peso-titulo) 52px/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', marginTop: 'var(--esp-2)' }}>{brl(parcela)}</div>
            </div>
            <SpecList direction="column" tone="inherit" withIcons style={{ opacity: 0.8 }} items={[
              { label: 'ENTRADA', value: brl(entradaValor), icon: 'wallet' },
              { label: 'FINANCIADO', value: brl(financiado), icon: 'banknote' }, { label: 'PRAZO', value: `${prazo} MESES`, icon: 'calendar' },
              { label: 'TAXA', value: '1,75% A.M.', icon: 'percent' }, { label: 'CET', value: '25,4% A.A.', icon: 'receipt' },
              { label: 'TOTAL PAGO', value: brl(totalFinanciamento), icon: 'sigma' }]} />
            <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: '#9A9A93' }}>Simulação com taxa de referência de 1,75% a.m. — o valor final varia conforme a análise de crédito. A proposta oficial vem com CET completo, por escrito, antes de qualquer assinatura.</p>
          </div>
        </section>
      ) : (
        <section className="faixa grade-simular" style={{ paddingTop: 'var(--esp-7)', paddingBottom: 'var(--esp-7)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-5)' }}>
            <h2 style={{ margin: 0, font: 'var(--type-titulo-2)', letterSpacing: 'var(--tracking-titulo)' }}>Cota de consórcio</h2>
            <p style={{ margin: 0, font: 'var(--type-corpo)', maxWidth: '46ch' }}>
              O crédito já é o preço do {carro.model}: {brl(valor)}. Você paga a entrada (ágio), assume as parcelas restantes e usa o crédito como dinheiro à vista aqui.
            </p>
            <Input label="Quanto você tem de entrada?" mono inputMode="numeric" autoComplete="off"
              placeholder="R$ 0" value={entradaNum ? brl(entradaNum) : ''}
              onChange={e => { setEntradaCota(e.target.value); setCotaSel(null); }}
              hint={`Cotas do Cota Market com crédito entre ${brl(margemMin)} e ${brl(margemMax)} — 10% para cima e para baixo do preço.`} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--esp-4)', flexWrap: 'wrap' }}>
              <a href="https://cota.market" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--esp-3)', textDecoration: 'none', color: 'var(--text-body)' }}>
                <img src="/assets/logo/cota-market-claro.png" alt="Cota Market" style={{ width: 28, height: 28, borderRadius: 'var(--raio-2)', display: 'block' }} />
                <span style={{ font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)' }}>PARCERIA COTA MARKET</span>
              </a>
              <SpecList withIcons items={[{ value: `${mostradas.length} ${mostradas.length === 1 ? 'COTA COMPATÍVEL' : 'COTAS COMPATÍVEIS'}`, icon: 'layers' }, { value: 'DADOS DE EXEMPLO', icon: 'triangle-alert' }]} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', borderTop: 'var(--borda-fina) solid var(--border-hairline)' }}>
              {mostradas.map(q => {
                const on = c && q.id === c.id;
                return (
                  <button key={q.id} onClick={() => setCotaSel(q.id)} style={{
                    appearance: 'none', cursor: 'pointer', textAlign: 'left', padding: 'var(--esp-4) var(--esp-3)',
                    borderTop: 'none', borderLeft: `3px solid ${on ? 'var(--seg-primeiro)' : 'transparent'}`, borderRight: 'none',
                    borderBottom: 'var(--borda-fina) solid var(--border-hairline)',
                    background: on ? 'var(--papel-2)' : 'transparent', transition: 'var(--transicao-ui)',
                    display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--esp-3)', alignItems: 'center'
                  }}>
                    <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span style={{ font: 'var(--peso-titulo) 17px/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)' }}>Entrada {brl(q.agio)}</span>
                      <SpecList items={[`CRÉDITO ${brl(q.credito)}`, q.admin.toUpperCase(), `${q.restantes} PARCELAS`]} />
                    </span>
                    <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                      <Badge tone={q.status === 'CONTEMPLADA' ? 'acento' : 'contorno'}>{q.status}</Badge>
                      <span style={{ font: 'var(--type-etiqueta-p)', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)' }}>{brl(q.parcela)}/MÊS</span>
                    </span>
                  </button>
                );
              })}
              {mostradas.length === 0 && (
                <p style={{ margin: 0, padding: 'var(--esp-4) 0', font: 'var(--type-corpo-p)', color: 'var(--text-muted)' }}>
                  Nenhuma cota com entrada até {brl(entradaNum)}. A menor entrada compatível com esse crédito é {brl(menorAgio)} — deixe seu CPF que avisamos quando entrar uma cota abaixo do seu valor.
                </p>
              )}
            </div>
            <Input label="CPF" mono placeholder="000.000.000-00" type="tel" inputMode="numeric" autoComplete="off" />
            <Button className="acao-mobile" size="lg">{mostradas.length ? 'Reservar esta cota' : 'Avisar quando entrar cota'}</Button>
          </div>

          <div className="coluna-resumo" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-4)' }}>
            {c && (
              <div style={{ background: 'var(--preto-asfalto)', color: 'var(--papel)', padding: 'var(--esp-6)', display: 'flex', flexDirection: 'column', gap: 'var(--esp-5)', borderTop: '5px solid var(--seg-primeiro)' }}>
                <Badge tone="acento" style={{ alignSelf: 'flex-start' }}>{c.status}</Badge>
                <div>
                  <span style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: '#9A9A93' }}>ENTRADA (ÁGIO)</span>
                  <div style={{ font: 'var(--peso-titulo) 52px/1 var(--font-core)', letterSpacing: 'var(--tracking-titulo)', marginTop: 'var(--esp-2)' }}>{brl(c.agio)}</div>
                </div>
                <SpecList direction="column" tone="inherit" withIcons style={{ opacity: 0.8 }} items={[
                  { label: 'CRÉDITO', value: brl(c.credito), icon: 'wallet' },
                  { label: 'PARCELA', value: brl(c.parcela), icon: 'banknote' },
                  { label: 'RESTANTES', value: `${c.restantes} DE ${c.prazo}`, icon: 'calendar' },
                  { label: 'ADMIN.', value: c.admin.toUpperCase(), icon: 'building-2' },
                  { label: 'TOTAL PAGO', value: brl(totalConsorcio), icon: 'sigma' }]} />
                <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: '#9A9A93' }}>Consórcio não tem juros: tem taxa de administração e fundo de reserva, já embutidos na parcela. Transferência de cota sujeita à aprovação da administradora.</p>
              </div>
            )}

            {c && (
              <div style={{ background: 'var(--surface-raised)', border: 'var(--borda-fina) solid var(--border-default)', padding: 'var(--esp-5)', display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)' }}>
                <span style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Icon name="scale" size={14} /> COMPARATIVO COM O FINANCIAMENTO
                </span>
                <SpecList direction="column" items={[
                  { label: 'CONSÓRCIO', value: brl(totalConsorcio) },
                  { label: 'FINANCIAMENTO', value: brl(totalFinanciamento) },
                  { label: 'DIFERENÇA', value: brl(Math.abs(totalFinanciamento - totalConsorcio)) }]} />
                <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: 'var(--text-muted)' }}>Comparação de desembolso total, sem correção do crédito pelo índice do grupo. Cota contemplada libera o crédito na hora; não contemplada entra em sorteio ou lance.</p>
              </div>
            )}
          </div>
        </section>
      )}

      <section style={{ borderTop: 'var(--borda-fina) solid var(--border-hairline)' }}>
        <div className="faixa grade-garantias" style={{ paddingTop: 'var(--esp-7)', paddingBottom: 'var(--esp-7)' }}>
          {[['file-text', 'Proposta por escrito', 'Taxa, CET e prazo em PDF antes de você decidir.'],
            ['shield-check', 'Sem seguro embutido', 'Seguro só entra se você pedir — e em linha separada.'],
            ['repeat', 'Troca na avaliação', 'Seu carro pode virar entrada, com laudo feito aqui.']].map(([ic, t, d]) => (
            <div key={t} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--esp-3)', borderTop: '4px solid var(--preto-asfalto)', paddingTop: 'var(--esp-4)' }}>
              <Icon name={ic} size={20} />
              <h3 style={{ margin: 0, font: 'var(--type-titulo-3)', letterSpacing: 'var(--tracking-titulo)' }}>{t}</h3>
              <p style={{ margin: 0, font: 'var(--type-corpo-p)', color: 'var(--text-muted)' }}>{d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { FinanceScreen });
