function Simulator({ onQuote }) {
  const [vehicleType, setVehicleType] = React.useState('popular');
  const [age, setAge] = React.useState(35);
  const [region, setRegion] = React.useState('marialva');
  const [parking, setParking] = React.useState('garagem');

  // Simple deterministic estimate
  const baseByType = { popular: 89, sedan: 132, suv: 168, premium: 245 };
  const ageMod = age < 25 ? 1.4 : age < 30 ? 1.15 : age < 50 ? 1 : age < 65 ? 1.08 : 1.25;
  const regionMod = region === 'maringa' ? 1.18 : region === 'outra' ? 1.1 : 1;
  const parkingMod = parking === 'rua' ? 1.3 : parking === 'condominio' ? 0.92 : 0.95;

  const estimate = Math.round(baseByType[vehicleType] * ageMod * regionMod * parkingMod);
  const high = Math.round(estimate * 1.3);

  return (
    <section style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="sim-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center',
        }}>
          <div>
            <span className="eyebrow">Simulador rápido</span>
            <h2 style={{ marginTop: 14, marginBottom: 18 }}>Em 30 segundos, uma faixa de preço para o seu seguro auto.</h2>
            <p style={{ fontSize: 17, marginBottom: 24, maxWidth: 480 }}>
              Estimativa baseada no perfil. A cotação final usa dados reais da seguradora — sem surpresas.
            </p>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: 16, background: 'var(--warm)', borderRadius: 12, fontSize: 13.5, color: 'var(--ink-2)', maxWidth: 460 }}>
              <Icon.Shield width="18" height="18" style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
              <span>O simulador <strong>não compartilha seus dados</strong> com seguradoras. É só uma estimativa de mercado.</span>
            </div>
          </div>

          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--radius-lg)',
            padding: 28,
            boxShadow: 'var(--shadow-md)',
          }}>
            <SimSection label={
              <span>Tipo do veículo
                <Tooltip text="A seguradora calcula um perfil de risco diferente para cada categoria — populares costumam ter prêmio menor que SUVs e premium." />
              </span>
            }>
              <SimRadio
                options={[
                  { v: 'popular', l: 'Popular' },
                  { v: 'sedan', l: 'Sedan' },
                  { v: 'suv', l: 'SUV' },
                  { v: 'premium', l: 'Premium' },
                ]}
                value={vehicleType} onChange={setVehicleType}
              />
            </SimSection>

            <SimSection label={
              <span>Idade do condutor: {age} anos
                <Tooltip text="Condutores entre 25 e 50 anos costumam ter o prêmio mais baixo. Jovens (até 25) e acima de 65 pagam um adicional pelo perfil estatístico." />
              </span>
            }>
              <input type="range" min="18" max="75" value={age} onChange={(e) => setAge(+e.target.value)}
                style={{ width: '100%', accentColor: 'var(--primary)' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
                <span>18</span><span>75</span>
              </div>
            </SimSection>

            <SimSection label="Região">
              <SimRadio
                options={[
                  { v: 'marialva', l: 'Marialva' },
                  { v: 'maringa', l: 'Maringá' },
                  { v: 'outra', l: 'Outra' },
                ]}
                value={region} onChange={setRegion}
              />
            </SimSection>

            <SimSection label={
              <span>Onde fica à noite
                <Tooltip text="O CEP de pernoite é um dos fatores que mais pesam no preço. Carros que dormem na rua têm risco de furto/roubo bem maior que em garagens fechadas." />
              </span>
            }>
              <SimRadio
                options={[
                  { v: 'garagem', l: 'Garagem' },
                  { v: 'condominio', l: 'Condomínio' },
                  { v: 'rua', l: 'Rua' },
                ]}
                value={parking} onChange={setParking}
              />
            </SimSection>

            <div style={{
              marginTop: 24, padding: 20, background: 'var(--primary)', color: 'var(--primary-ink)', borderRadius: 14,
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: .7, textTransform: 'uppercase', letterSpacing: '.14em' }}>Estimativa mensal</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4 }}>
                    R$ {estimate} <span style={{ opacity: .55, fontSize: 18 }}>– R$ {high}</span>
                  </div>
                </div>
                <div style={{ fontSize: 12, opacity: .8, textAlign: 'right' }}>
                  faixa estimada<br/>baseada no perfil
                </div>
              </div>
              <button className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }} onClick={() => onQuote('auto')}>
                Cotar agora com dados reais
                <Icon.Arrow width="16" height="16" />
              </button>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .sim-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function SimSection({ label, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', marginBottom: 10 }}>{label}</div>
      {children}
    </div>
  );
}

function SimRadio({ options, value, onChange }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 6 }}>
      {options.map(o => {
        const active = o.v === value;
        return (
          <button key={o.v}
            onClick={() => onChange(o.v)}
            style={{
              padding: '10px 8px',
              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,
              borderRadius: 10, fontSize: 13, transition: 'all .15s',
            }}>
            {o.l}
          </button>
        );
      })}
    </div>
  );
}

window.Simulator = Simulator;