const STEPS = [{k:'type',t:'¿Qué cotizar?'},{k:'vehicle',t:'Vehículo'},{k:'profile',t:'Perfil'},{k:'coverage',t:'Cobertura'},{k:'results',t:'Resultados'}];
function CotizadorPage({ go }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({type:'auto', brand:'Toyota', model:'Yaris', year:'2022', plate:'', use:'particular', age:34, city:'Santiago', coverage:'full'});
  const [loading, setLoading] = React.useState(false);
  const pct = (step/(STEPS.length-1))*100;
  const next = () => {
    if (step === STEPS.length-2) { setLoading(true); setTimeout(()=>{setLoading(false); setStep(step+1);}, 1800); }
    else setStep(Math.min(step+1, STEPS.length-1));
  };
  const prev = () => setStep(Math.max(step-1, 0));
  return (
    <div className="wiz-shell">
      <div className="wiz-header" style={{padding:'16px 40px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid var(--line)'}}>
        <a className="logo" href="#" onClick={(e)=>{e.preventDefault(); go('home');}}><span className="logo-mark"><Beagle/></span><span>Hol<span className="logo-ai">ai</span></span></a>
        <div className="mono" style={{fontSize: 11, letterSpacing:'0.1em', color:'var(--muted)'}}>PASO {step+1}/{STEPS.length} · {STEPS[step].t.toUpperCase()}</div>
        <button className="btn btn-ghost btn-sm" onClick={()=>go('home')}><I.close size={14}/> Salir</button>
      </div>
      <div className="wiz-progress"><div style={{width: `${pct}%`}}/></div>
      <div className="wiz-body" style={{padding:'56px 40px', maxWidth: 960, margin:'0 auto', width:'100%'}}>
        <div key={step} className="wiz-step">
          {step===0 && <StepType data={data} setData={setData}/>}
          {step===1 && <StepVehicle data={data} setData={setData}/>}
          {step===2 && <StepProfile data={data} setData={setData}/>}
          {step===3 && <StepCoverage data={data} setData={setData}/>}
          {step===4 && <StepResults data={data}/>}
        </div>
      </div>
      {loading && (
        <div style={{position:'fixed', inset: 0, background:'rgba(255,255,255,0.96)', display:'grid', placeItems:'center', zIndex: 1000}}>
          <div style={{textAlign:'center'}}>
            <div style={{width: 72, height: 72, margin:'0 auto', borderRadius:'50%', border:'4px solid var(--bg-warm)', borderTopColor:'var(--accent)', animation:'spin 0.9s linear infinite'}}/>
            <div style={{fontSize: 36, fontWeight: 800, letterSpacing:'-0.03em', marginTop: 28}}>Cotizando en 18 aseguradoras…</div>
            <div className="mono muted" style={{fontSize: 12, letterSpacing:'0.1em', marginTop: 10}}>HDI · MAPFRE · CONSORCIO · BCI · SURA · ...</div>
          </div>
          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
        </div>
      )}
      <div className="wiz-footer" style={{padding:'20px 40px', borderTop:'1px solid var(--line)', display:'flex', justifyContent:'space-between', background:'var(--card)'}}>
        <button className="btn btn-ghost" onClick={prev} disabled={step===0} style={{opacity: step===0?0.3:1}}>← Volver</button>
        {step === STEPS.length-1 ?
          <button className="btn btn-accent btn-lg" onClick={()=>go('dashboard')}>Ir a mi panel <I.arrow size={16}/></button> :
          <button className="btn btn-accent btn-lg" onClick={next}>{step===STEPS.length-2?'Cotizar en un click':'Continuar'} <I.arrow size={16}/></button>
        }
      </div>
    </div>
  );
}
function StepType({ data, setData }) {
  const t = [{k:'auto',l:'Auto',d:'Vehículos particulares',i:<I.car size={32}/>},{k:'salud',l:'Salud',d:'Complementario isapre',i:<I.heart size={32}/>},{k:'hogar',l:'Hogar',d:'Casas y deptos',i:<I.house size={32}/>},{k:'vida',l:'Vida',d:'Protección familiar',i:<I.shield size={32}/>},{k:'viaje',l:'Viaje',d:'Asistencia internacional',i:<I.plane size={32}/>},{k:'mascota',l:'Mascotas',d:'Perros y gatos',i:<I.paw size={32}/>}];
  return (
    <div>
      <h1 className="display display-m" style={{margin:'0 0 12px'}}>¿Qué quieres <span className="grad-text">cotizar?</span></h1>
      <p style={{fontSize: 16, color:'var(--muted)', margin:'0 0 40px'}}>Buscamos en las 18 aseguradoras del mercado.</p>
      <div className="wiz-step-types" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14}}>
        {t.map(x=>(
          <button key={x.k} className={`wiz-option ${data.type===x.k?'selected':''}`} onClick={()=>setData({...data, type:x.k})}>
            <div style={{color: data.type===x.k?'var(--accent)':'var(--ink-2)', marginBottom: 20}}>{x.i}</div>
            <div style={{fontSize: 22, fontWeight: 800, letterSpacing:'-0.02em'}}>{x.l}</div>
            <div className="muted" style={{fontSize: 13, marginTop: 4}}>{x.d}</div>
          </button>
        ))}
      </div>
    </div>
  );
}
function StepVehicle({ data, setData }) {
  return (
    <div>
      <h1 className="display display-m" style={{margin:'0 0 12px'}}>Cuéntanos del <span className="grad-text">vehículo</span></h1>
      <p style={{fontSize: 16, color:'var(--muted)', margin:'0 0 40px'}}>Calculamos el riesgo. Datos cifrados.</p>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20, maxWidth: 640}}>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Marca</label>
          <select className="field" value={data.brand} onChange={(e)=>setData({...data, brand:e.target.value})}><option>Toyota</option><option>Chevrolet</option><option>Hyundai</option><option>Kia</option></select></div>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Modelo</label><input className="field" value={data.model} onChange={(e)=>setData({...data, model:e.target.value})}/></div>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Año</label><input className="field" value={data.year} onChange={(e)=>setData({...data, year:e.target.value})}/></div>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Patente</label><input className="field" placeholder="AA-BB-12" value={data.plate} onChange={(e)=>setData({...data, plate:e.target.value})}/></div>
        <div style={{gridColumn:'1/-1'}}>
          <label className="eyebrow" style={{display:'block', marginBottom: 8}}>Uso</label>
          <div style={{display:'flex', gap: 10}}>
            {['particular','trabajo','comercial'].map(u => <button key={u} className={`wiz-option ${data.use===u?'selected':''}`} style={{flex:1, padding: 16, textTransform:'capitalize', fontWeight: 600}} onClick={()=>setData({...data, use:u})}>{u}</button>)}
          </div>
        </div>
      </div>
    </div>
  );
}
function StepProfile({ data, setData }) {
  return (
    <div>
      <h1 className="display display-m" style={{margin:'0 0 12px'}}>Tu <span className="grad-text">perfil</span></h1>
      <p style={{fontSize: 16, color:'var(--muted)', margin:'0 0 40px'}}>Calculan la prima según historial y ubicación.</p>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20, maxWidth: 640}}>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Edad: <b>{data.age}</b></label>
          <input type="range" min="18" max="80" value={data.age} onChange={(e)=>setData({...data, age:+e.target.value})} style={{width:'100%', accentColor:'var(--accent)'}}/></div>
        <div><label className="eyebrow" style={{display:'block', marginBottom: 8}}>Ciudad</label>
          <select className="field" value={data.city} onChange={(e)=>setData({...data, city:e.target.value})}><option>Santiago</option><option>Viña del Mar</option><option>Concepción</option></select></div>
        <div style={{gridColumn:'1/-1'}} className="card-soft">
          <div className="hstack"><I.shield size={18} className="accent"/><span style={{fontWeight: 700, fontSize: 14}}>Historial sin siniestros</span></div>
          <p className="muted" style={{fontSize: 13, margin:'6px 0 0'}}>Sin siniestros en 3 años. Mejora cotizaciones hasta 15%.</p>
        </div>
      </div>
    </div>
  );
}
function StepCoverage({ data, setData }) {
  const opts = [{k:'basic',l:'Básica',d:'RC + robo total',from:'$18.900'},{k:'full',l:'Completa',d:'Todo riesgo con deducible',from:'$34.900'},{k:'premium',l:'Premium',d:'Todo riesgo + extras',from:'$52.400'}];
  return (
    <div>
      <h1 className="display display-m" style={{margin:'0 0 12px'}}>¿Qué <span className="grad-text">cobertura?</span></h1>
      <p style={{fontSize: 16, color:'var(--muted)', margin:'0 0 40px'}}>La puedes cambiar después.</p>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14}}>
        {opts.map(o => (
          <button key={o.k} className={`wiz-option ${data.coverage===o.k?'selected':''}`} onClick={()=>setData({...data, coverage:o.k})}>
            <div style={{fontSize: 26, fontWeight: 800, letterSpacing:'-0.02em'}}>{o.l}</div>
            <div className="muted" style={{fontSize: 13, marginTop: 4, minHeight: 40}}>{o.d}</div>
            <div className="mono" style={{fontSize: 11, color:'var(--accent)', fontWeight: 600, letterSpacing:'0.08em', marginTop: 16}}>DESDE {o.from}/MES</div>
          </button>
        ))}
      </div>
    </div>
  );
}
function StepResults({ data }) {
  const q = [
    {b:'HDI', price:28400, badge:'Mejor precio', cov:'Completa', e:['Auto sustituto 10d','Grúa 24/7']},
    {b:'Mapfre', price:31900, badge:'Más elegida', cov:'Completa', e:['Auto sustituto 15d','Taller preferente']},
    {b:'Consorcio', price:29400, badge:null, cov:'Completa', e:['Grúa nacional','App peritaje']},
    {b:'BCI Seguros', price:34900, badge:'Mejor cobertura', cov:'Completa', e:['Lunas incluidas','Cero deducible robo']},
    {b:'Sura', price:32100, badge:null, cov:'Completa', e:['Descuento 10% binacional']},
    {b:'Zurich', price:37800, badge:null, cov:'Completa', e:['Cobertura internacional']},
  ];
  return (
    <div>
      <div className="hstack" style={{marginBottom: 8, gap: 8}}>
        <div style={{width: 20, height: 20, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center'}}><I.check size={12}/></div>
        <span className="mono" style={{fontSize: 11, letterSpacing:'0.1em', color:'var(--accent)', fontWeight: 600}}>6 COTIZACIONES LISTAS · 18 REVISADAS</span>
      </div>
      <h1 className="display display-m" style={{margin:'0 0 12px'}}>Tenemos tu <span className="grad-text">match.</span></h1>
      <p style={{fontSize: 16, color:'var(--muted)', margin:'0 0 32px'}}>{data.brand} {data.model} {data.year} · cobertura {data.coverage} · {data.city}</p>
      <div className="vstack" style={{gap: 12}}>
        {q.map((x, i)=>(
          <div key={i} className="policy fade-in" style={{gridTemplateColumns:'auto 1fr auto auto', animationDelay:`${i*0.08}s`}}>
            <div style={{width: 56, height: 56, borderRadius: 18, background:'var(--bg-warm)', display:'grid', placeItems:'center', fontSize: 22, fontWeight: 800, color:'var(--accent)'}}>{x.b[0]}</div>
            <div>
              <div className="hstack" style={{gap: 10}}>
                <span style={{fontSize: 20, fontWeight: 800, letterSpacing:'-0.02em'}}>{x.b}</span>
                {x.badge && <span className="chip accent">{x.badge}</span>}
              </div>
              <div className="hstack" style={{gap: 10, marginTop: 6}}>
                {x.e.map(e => <span key={e} className="mono muted" style={{fontSize: 11}}>· {e.toUpperCase()}</span>)}
              </div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontSize: 28, fontWeight: 800, letterSpacing:'-0.03em', lineHeight: 1}}>${x.price.toLocaleString('es-CL')}</div>
              <div className="mono muted" style={{fontSize: 10, letterSpacing:'0.05em'}}>POR MES</div>
            </div>
            <button className="btn btn-accent btn-sm">Contratar <I.arrow size={12}/></button>
          </div>
        ))}
      </div>
    </div>
  );
}
window.CotizadorPage = CotizadorPage;