// Question schemas per product — each field can be 'text', 'number', 'select', 'radio', 'textarea'
const QUOTE_SCHEMAS = {
  auto: {
    intro: 'Conta um pouco do veículo e do condutor principal.',
    fields: [
      { k: 'marca_modelo', label: 'Marca e modelo', type: 'text', placeholder: 'Ex.: Honda Civic EXL' },
      { k: 'ano', label: 'Ano de fabricação', type: 'text', placeholder: 'Ex.: 2022' },
      { k: 'uso', label: 'Uso principal do veículo', type: 'radio', options: ['Particular', 'Trabalho/Comercial', 'Aplicativo (Uber/99)'] },
      { k: 'cep', label: 'CEP onde o carro pernoita', type: 'text', placeholder: 'Ex.: 86990-000' },
      { k: 'pernoite', label: 'Onde dorme à noite', type: 'radio', options: ['Garagem', 'Condomínio', 'Rua'] },
      { k: 'condutor_idade', label: 'Idade do condutor principal', type: 'text', placeholder: 'Ex.: 38' },
      { k: 'condutor_sexo', label: 'Sexo do condutor', type: 'radio', options: ['Masculino', 'Feminino'] },
      { k: 'jovens', label: 'Condutor entre 18 e 25 anos usa o carro?', type: 'radio', options: ['Não', 'Eventualmente', 'Sim, regularmente'] },
      { k: 'seguro_atual', label: 'Já tem seguro hoje?', type: 'radio', options: ['Primeira contratação', 'Renovação (mesma seguradora)', 'Migração (outra seguradora)'] },
    ],
  },
  frota: {
    intro: 'Para frotas, precisamos do panorama da operação.',
    fields: [
      { k: 'razao', label: 'Razão social ou nome fantasia', type: 'text', placeholder: 'Ex.: Transportadora ABC Ltda' },
      { k: 'cnpj', label: 'CNPJ', type: 'text', placeholder: '00.000.000/0001-00' },
      { k: 'atividade', label: 'Atividade principal', type: 'select', options: ['Transporte de cargas', 'Locação de veículos', 'Transporte de passageiros', 'Distribuição/Logística própria', 'Aplicativo de mobilidade', 'Outro (descrever nas observações)'] },
      { k: 'qtd_veiculos', label: 'Quantos veículos no total?', type: 'text', placeholder: 'Ex.: 12' },
      { k: 'composicao', label: 'Composição da frota', type: 'textarea', placeholder: 'Ex.: 6 carros de passeio, 4 utilitários, 2 caminhões 3/4' },
      { k: 'tem_seguro', label: 'A frota está segurada hoje?', type: 'radio', options: ['Sim, frota completa', 'Sim, parcialmente', 'Não'] },
      { k: 'sinistros_12m', label: 'Sinistros nos últimos 12 meses', type: 'radio', options: ['Nenhum', '1 a 3', '4 a 8', 'Mais de 8'] },
      { k: 'rastreador', label: 'Veículos têm rastreador?', type: 'radio', options: ['Todos', 'Parcialmente', 'Nenhum'] },
      { k: 'cep', label: 'CEP da sede', type: 'text', placeholder: 'Ex.: 86990-000' },
    ],
  },
  empresarial: {
    intro: 'Vamos entender o perfil da empresa para dimensionar coberturas.',
    fields: [
      { k: 'razao', label: 'Razão social ou nome fantasia', type: 'text', placeholder: 'Ex.: Comercial XYZ Ltda' },
      { k: 'cnpj', label: 'CNPJ', type: 'text', placeholder: '00.000.000/0001-00' },
      { k: 'atividade', label: 'Atividade principal', type: 'text', placeholder: 'Ex.: comércio varejista de alimentos' },
      { k: 'tipo_imovel', label: 'O imóvel é:', type: 'radio', options: ['Próprio', 'Alugado', 'Cedido'] },
      { k: 'area', label: 'Área construída (m²)', type: 'text', placeholder: 'Ex.: 320' },
      { k: 'valor_estoque', label: 'Valor médio em estoque', type: 'text', placeholder: 'Ex.: R$ 350.000' },
      { k: 'valor_equipamentos', label: 'Valor de equipamentos e mobiliário', type: 'text', placeholder: 'Ex.: R$ 120.000' },
      { k: 'funcionarios', label: 'Quantos funcionários?', type: 'text', placeholder: 'Ex.: 8' },
      { k: 'coberturas', label: 'Coberturas de interesse (pode marcar várias na conversa)', type: 'textarea', placeholder: 'Incêndio, roubo, lucros cessantes, RC, vidros, equipamentos eletrônicos…' },
      { k: 'cep', label: 'CEP da empresa', type: 'text', placeholder: 'Ex.: 86990-000' },
    ],
  },
  vida: {
    intro: 'Algumas informações pessoais para sugerir o capital adequado.',
    fields: [
      { k: 'idade', label: 'Sua idade', type: 'text', placeholder: 'Ex.: 38' },
      { k: 'sexo', label: 'Sexo', type: 'radio', options: ['Masculino', 'Feminino'] },
      { k: 'estado_civil', label: 'Estado civil', type: 'radio', options: ['Solteiro(a)', 'Casado(a)/União', 'Divorciado(a)', 'Viúvo(a)'] },
      { k: 'dependentes', label: 'Tem dependentes financeiros?', type: 'radio', options: ['Não', '1 dependente', '2 dependentes', '3 ou mais'] },
      { k: 'profissao', label: 'Profissão', type: 'text', placeholder: 'Ex.: empresário, médico…' },
      { k: 'renda', label: 'Renda mensal aproximada', type: 'text', placeholder: 'Ex.: R$ 12.000' },
      { k: 'fumante', label: 'Fumante?', type: 'radio', options: ['Não', 'Sim'] },
      { k: 'pratica_risco', label: 'Pratica esporte/atividade de risco? (moto, voo, mergulho)', type: 'radio', options: ['Não', 'Sim'] },
      { k: 'coberturas', label: 'Coberturas desejadas', type: 'textarea', placeholder: 'Morte, invalidez, doenças graves, diária por internação…' },
    ],
  },
  residencial: {
    intro: 'Para o residencial, precisamos conhecer o imóvel.',
    fields: [
      { k: 'tipo', label: 'Tipo de imóvel', type: 'radio', options: ['Casa', 'Apartamento', 'Sobrado', 'Casa de praia/campo'] },
      { k: 'uso', label: 'Uso', type: 'radio', options: ['Residência habitual', 'Veraneio', 'Alugado para terceiros'] },
      { k: 'area', label: 'Área aproximada (m²)', type: 'text', placeholder: 'Ex.: 180' },
      { k: 'valor_imovel', label: 'Valor de mercado do imóvel', type: 'text', placeholder: 'Ex.: R$ 450.000' },
      { k: 'valor_conteudo', label: 'Valor estimado do conteúdo (móveis, eletro, etc.)', type: 'text', placeholder: 'Ex.: R$ 80.000' },
      { k: 'tem_alarme', label: 'Possui alarme/cerca elétrica/portaria?', type: 'radio', options: ['Sim', 'Parcialmente', 'Não'] },
      { k: 'cep', label: 'CEP do imóvel', type: 'text', placeholder: 'Ex.: 86990-000' },
    ],
  },
  saude: {
    intro: 'Plano individual, familiar ou empresarial — depende do perfil.',
    fields: [
      { k: 'tipo_plano', label: 'Tipo de plano', type: 'radio', options: ['Individual', 'Familiar', 'Empresarial (PME/MEI)', 'Por adesão'] },
      { k: 'qtd_vidas', label: 'Quantas vidas serão incluídas?', type: 'text', placeholder: 'Ex.: 4 (eu, esposa, 2 filhos)' },
      { k: 'idades', label: 'Idades de cada vida', type: 'text', placeholder: 'Ex.: 38, 35, 8, 5' },
      { k: 'abrangencia', label: 'Abrangência desejada', type: 'radio', options: ['Regional (PR)', 'Estadual', 'Nacional'] },
      { k: 'acomodacao', label: 'Acomodação', type: 'radio', options: ['Enfermaria', 'Apartamento'] },
      { k: 'reembolso', label: 'Quer reembolso de consultas/exames?', type: 'radio', options: ['Sim', 'Não', 'Tanto faz'] },
      { k: 'plano_atual', label: 'Já tem plano hoje?', type: 'radio', options: ['Primeira contratação', 'Quero trocar', 'Migração com portabilidade'] },
    ],
  },
  condominio: {
    intro: 'Apólice de condomínio é obrigatória — vamos dimensionar.',
    fields: [
      { k: 'nome_cond', label: 'Nome do condomínio', type: 'text', placeholder: 'Ex.: Edifício Residencial Acácias' },
      { k: 'tipo', label: 'Tipo', type: 'radio', options: ['Residencial vertical (apto)', 'Residencial horizontal (casas)', 'Comercial', 'Misto'] },
      { k: 'qtd_unidades', label: 'Quantas unidades?', type: 'text', placeholder: 'Ex.: 32 apartamentos' },
      { k: 'qtd_blocos', label: 'Quantos blocos/torres?', type: 'text', placeholder: 'Ex.: 2' },
      { k: 'valor_construcao', label: 'Valor de reconstrução estimado', type: 'text', placeholder: 'Ex.: R$ 8.500.000' },
      { k: 'idade_predio', label: 'Idade do prédio (anos)', type: 'text', placeholder: 'Ex.: 12' },
      { k: 'tem_elevador', label: 'Possui elevadores?', type: 'radio', options: ['Sim', 'Não'] },
      { k: 'tem_piscina', label: 'Possui piscina/área de lazer?', type: 'radio', options: ['Sim', 'Não'] },
      { k: 'cep', label: 'CEP do condomínio', type: 'text', placeholder: 'Ex.: 86990-000' },
    ],
  },
  rc: {
    intro: 'Responsabilidade Civil cobre danos a terceiros — varia bastante por contexto.',
    fields: [
      { k: 'modalidade', label: 'Modalidade de RC', type: 'select', options: ['Profissional liberal (E&O)', 'Diretores e administradores (D&O)', 'Eventos', 'Prestadores de serviço', 'Geral empresarial', 'Não tenho certeza'] },
      { k: 'profissao_atividade', label: 'Profissão ou atividade', type: 'text', placeholder: 'Ex.: arquiteto, contador, organizador de eventos' },
      { k: 'experiencia', label: 'Anos de atuação na área', type: 'text', placeholder: 'Ex.: 7' },
      { k: 'faturamento', label: 'Faturamento anual (se aplicável)', type: 'text', placeholder: 'Ex.: R$ 800.000' },
      { k: 'lmi', label: 'Limite Máximo de Indenização desejado', type: 'select', options: ['Até R$ 100 mil', 'R$ 100 a 500 mil', 'R$ 500 mil a 1M', 'Acima de R$ 1M', 'Não sei, quero orientação'] },
      { k: 'sinistros', label: 'Já teve reclamação/processo de cliente?', type: 'radio', options: ['Não', 'Sim, resolvido', 'Sim, em andamento'] },
    ],
  },
};

function Quote({ open, onClose, presetProduct }) {
  const [step, setStep] = React.useState(1);
  const [product, setProduct] = React.useState(presetProduct || 'auto');
  const [answers, setAnswers] = React.useState({});
  const [contact, setContact] = React.useState({ name: '', phone: '', email: '', when: 'logo', notes: '' });
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setStep(1);
      setSubmitted(false);
      setAnswers({});
      setContact({ name: '', phone: '', email: '', when: 'logo', notes: '' });
      if (presetProduct) setProduct(presetProduct);
    }
  }, [open, presetProduct]);

  if (!open) return null;

  const PRODUCTS_LIST = (window.SITE && window.SITE.products && window.SITE.products.items) || [];
  const settings = (window.SITE && window.SITE.settings) || {};
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';

  const totalSteps = 4;
  const schema = QUOTE_SCHEMAS[product] || QUOTE_SCHEMAS.auto;
  const productLabel = (PRODUCTS_LIST.find(p => p.id === product) || {}).title || 'Seguro';

  const updateAnswer = (k, v) => setAnswers(a => ({ ...a, [k]: v }));
  const updateContact = (k, v) => setContact(c => ({ ...c, [k]: v }));

  const submit = () => {
    setSubmitted(true);
    setTimeout(() => {
      const detailLines = schema.fields
        .filter(f => answers[f.k])
        .map(f => `${f.label}: ${answers[f.k]}`)
        .join('%0A');
      const msg = `Olá Soriani! Solicitei cotação pelo site:%0A%0A*Produto:* ${productLabel}%0A*Nome:* ${contact.name}%0A*WhatsApp:* ${contact.phone}%0A*E-mail:* ${contact.email}%0A*Quando contratar:* ${contact.when}%0A%0A*Detalhes:*%0A${detailLines}%0A%0A*Observações:* ${contact.notes || '-'}`;
      window.open(`https://wa.me/${waDigits}?text=${msg}`, '_blank');
    }, 1800);
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(14,23,38,.6)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, overflowY: 'auto',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--surface)', borderRadius: 'var(--radius-lg)',
        width: '100%', maxWidth: 680, boxShadow: 'var(--shadow-lg)',
        overflow: 'hidden', position: 'relative',
        maxHeight: 'calc(100vh - 40px)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          padding: '20px 28px', borderBottom: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div className="eyebrow">Solicitar cotação</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>{productLabel}</div>
          </div>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: 10, background: 'var(--warm)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)',
          }}><Icon.X width="18" height="18" /></button>
        </div>

        {!submitted && (
          <div style={{ display: 'flex', gap: 4, padding: '14px 28px 0' }}>
            {[1,2,3,4].map(s => (
              <div key={s} style={{
                flex: 1, height: 4, borderRadius: 2,
                background: s <= step ? 'var(--accent)' : 'var(--line)',
                transition: 'background .25s',
              }} />
            ))}
          </div>
        )}

        <div style={{ padding: 28, overflowY: 'auto', flex: 1 }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%', background: 'var(--accent-soft)',
                color: 'var(--accent)', margin: '0 auto 20px',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Check width="34" height="34" />
              </div>
              <h3 style={{ marginBottom: 10 }}>Recebemos sua solicitação!</h3>
              <p style={{ maxWidth: 420, margin: '0 auto', fontSize: 15 }}>
                Estamos abrindo o WhatsApp com seus dados pré-preenchidos. O Soriani retorna em até <strong>1 hora útil</strong>.
              </p>
            </div>
          ) : (
            <>
              {step === 1 && (
                <div style={{ display: 'grid', gap: 14 }}>
                  <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 4 }}>1 de {totalSteps} · Sobre o que é a cotação</p>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                    {PRODUCTS_LIST.map(p => {
                      const Ico = Icon[p.icon] || Icon.Shield;
                      const active = p.id === product;
                      return (
                        <button key={p.id} onClick={() => { setProduct(p.id); setAnswers({}); }} style={{
                          display: 'flex', alignItems: 'center', gap: 12,
                          padding: '12px 14px', borderRadius: 12,
                          border: '1px solid ' + (active ? 'var(--primary)' : 'var(--line)'),
                          background: active ? 'var(--primary-50)' : 'var(--surface)',
                          color: 'var(--ink)', textAlign: 'left',
                        }}>
                          <Ico width="18" height="18" style={{ color: active ? 'var(--primary-700)' : 'var(--ink-2)' }} />
                          <span style={{ fontSize: 14, fontWeight: active ? 600 : 500 }}>{p.title}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {step === 2 && (
                <div style={{ display: 'grid', gap: 14 }}>
                  <p style={{ fontSize: 14, color: 'var(--muted)' }}>2 de {totalSteps} · Detalhes do {productLabel.toLowerCase()}</p>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 6 }}>{schema.intro}</p>
                  {schema.fields.map(f => (
                    <DynField key={f.k} field={f} value={answers[f.k] || ''} onChange={(v) => updateAnswer(f.k, v)} />
                  ))}
                </div>
              )}

              {step === 3 && (
                <div style={{ display: 'grid', gap: 14 }}>
                  <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 4 }}>3 de {totalSteps} · Como falar com você</p>
                  <Field label="Seu nome" value={contact.name} onChange={(v) => updateContact('name', v)} placeholder="Nome completo" />
                  <Field label="WhatsApp" value={contact.phone} onChange={(v) => updateContact('phone', v)} placeholder="(44) 9 9999-9999" />
                  <Field label="E-mail" value={contact.email} onChange={(v) => updateContact('email', v)} placeholder="voce@email.com" type="email" />
                  <div>
                    <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, display: 'block' }}>Quando pretende contratar?</label>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
                      {[['logo','Esta semana'],['mes','Neste mês'],['pesquisando','Pesquisando']].map(([v,l]) => (
                        <button key={v} onClick={() => updateContact('when', v)} style={{
                          padding: '10px', borderRadius: 10, fontSize: 13,
                          border: '1px solid ' + (contact.when === v ? 'var(--primary)' : 'var(--line)'),
                          background: contact.when === v ? 'var(--primary-50)' : 'var(--surface)',
                          color: contact.when === v ? 'var(--primary-700)' : 'var(--ink-2)', fontWeight: contact.when === v ? 600 : 500,
                        }}>{l}</button>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {step === 4 && (
                <div style={{ display: 'grid', gap: 14 }}>
                  <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 4 }}>4 de {totalSteps} · Quase lá</p>
                  <div>
                    <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, display: 'block' }}>Algo a destacar? (opcional)</label>
                    <textarea
                      value={contact.notes} onChange={(e) => updateContact('notes', e.target.value)}
                      placeholder="Ex.: prefiro receber proposta por e-mail, tenho preferência por seguradora X…"
                      style={{
                        width: '100%', minHeight: 90, padding: 14, borderRadius: 10,
                        border: '1px solid var(--line)', background: 'var(--bg)',
                        fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', resize: 'vertical',
                      }}
                    />
                  </div>
                  <Summary product={productLabel} contact={contact} answers={answers} schema={schema} />
                </div>
              )}
            </>
          )}
        </div>

        {!submitted && (
          <div style={{
            padding: '16px 28px', borderTop: '1px solid var(--line)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
            background: 'var(--bg)',
          }}>
            <button onClick={() => step > 1 ? setStep(step - 1) : onClose()} className="btn btn-ghost" style={{ padding: '12px 18px' }}>
              {step > 1 ? 'Voltar' : 'Cancelar'}
            </button>
            {step < totalSteps ? (
              <button onClick={() => setStep(step + 1)} className="btn btn-primary" style={{ padding: '12px 20px' }}>
                Continuar <Icon.Arrow width="16" height="16" />
              </button>
            ) : (
              <button onClick={submit} className="btn btn-accent" style={{ padding: '12px 20px' }}>
                <Icon.Whatsapp width="16" height="16" />
                Enviar pelo WhatsApp
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function DynField({ field, value, onChange }) {
  if (field.type === 'radio') {
    return (
      <div>
        <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, display: 'block', color: 'var(--ink)' }}>{field.label}</label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {field.options.map(o => {
            const active = o === value;
            return (
              <button key={o} onClick={() => onChange(o)} style={{
                padding: '9px 14px', borderRadius: 999, fontSize: 13,
                border: '1px solid ' + (active ? 'var(--primary)' : 'var(--line)'),
                background: active ? 'var(--primary-50)' : 'var(--surface)',
                          color: active ? 'var(--primary-700)' : 'var(--ink-2)',
                fontWeight: active ? 600 : 500,
              }}>{o}</button>
            );
          })}
        </div>
      </div>
    );
  }
  if (field.type === 'select') {
    return (
      <div>
        <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, display: 'block', color: 'var(--ink)' }}>{field.label}</label>
        <select value={value} onChange={(e) => onChange(e.target.value)} style={{
          width: '100%', padding: '12px 14px', borderRadius: 10,
          border: '1px solid var(--line)', background: 'var(--bg)',
          fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', outline: 'none',
        }}>
          <option value="">Selecione…</option>
          {field.options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    );
  }
  if (field.type === 'textarea') {
    return (
      <div>
        <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, display: 'block', color: 'var(--ink)' }}>{field.label}</label>
        <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={field.placeholder}
          style={{
            width: '100%', minHeight: 80, padding: 14, borderRadius: 10,
            border: '1px solid var(--line)', background: 'var(--bg)',
            fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', resize: 'vertical',
          }}
        />
      </div>
    );
  }
  return <Field label={field.label} value={value} onChange={onChange} placeholder={field.placeholder} />;
}

function Field({ label, value, onChange, placeholder, type = 'text' }) {
  return (
    <div>
      <label style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, display: 'block', color: 'var(--ink)' }}>{label}</label>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: '12px 14px', borderRadius: 10,
          border: '1px solid var(--line)', background: 'var(--bg)',
          fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', outline: 'none', transition: 'border-color .15s',
        }}
        onFocus={(e) => e.target.style.borderColor = 'var(--primary)'}
        onBlur={(e) => e.target.style.borderColor = 'var(--line)'}
      />
    </div>
  );
}

function Summary({ product, contact, answers, schema }) {
  const filled = schema.fields.filter(f => answers[f.k]);
  return (
    <div style={{ background: 'var(--bg)', borderRadius: 12, border: '1px solid var(--line)', padding: 16 }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Resumo</div>
      <Row k="Produto" v={product} />
      <Row k="Nome" v={contact.name || '—'} />
      <Row k="WhatsApp" v={contact.phone || '—'} />
      {filled.length > 0 && <div style={{ height: 1, background: 'var(--line)', margin: '8px 0' }} />}
      {filled.slice(0, 5).map(f => <Row key={f.k} k={f.label} v={answers[f.k]} />)}
      {filled.length > 5 && <Row k="…" v={`+ ${filled.length - 5} respostas`} />}
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13, gap: 12 }}>
      <span style={{ color: 'var(--muted)', flexShrink: 0 }}>{k}</span>
      <span style={{ color: 'var(--ink)', fontWeight: 500, textAlign: 'right' }}>{v}</span>
    </div>
  );
}

window.Quote = Quote;
