const POLICIES = [
  { id:1, type:'Auto', brand:'HDI Seguros', detail:'Toyota Yaris 2022 · AA-BB-12', prem:'$34.900', renew:'12 jun 2026', cov: 78, ico:'car', color:'pink' },
  { id:2, type:'Salud', brand:'Cruz Blanca', detail:'Plan Integral + maternidad', prem:'$148.000', renew:'03 ago 2026', cov: 68, ico:'heart', color:'mint' },
  { id:3, type:'Hogar', brand:'Consorcio', detail:'Depto 72m² · Providencia', prem:'$12.400', renew:'29 sep 2026', cov: 55, ico:'house', color:'sun' },
  { id:4, type:'Vida', brand:'BCI Seguros', detail:'UF 1.500 cobertura básica', prem:'$8.200', renew:'18 nov 2026', cov: 42, ico:'shield', color:'plum' },
];

function Sidebar({ route, go }) {
  const items = [
    { k:'dashboard', l:'Panel', ico:<I.home size={18}/> },
    { k:'policies', l:'Mis pólizas', ico:<I.file size={18}/> },
    { k:'cmf', l:'Mis Seguros CMF', ico:<I.shield size={18}/>, badge:'NUEVO' },
    { k:'mercado', l:'Mercado', ico:<I.trend size={18}/> },
    { k:'chat', l:'Asesor IA', ico:<I.sparkle size={18}/>, badge:'PRO' },
    { k:'cotizar', l:'Cotizador', ico:<I.calc size={18}/> },
    { k:'score', l:'Score', ico:<I.trend size={18}/> },
  ];
  return (
    <aside className="sidebar">
      <a className="logo" href="#" onClick={(e)=>{e.preventDefault(); go('home');}} style={{marginBottom: 32, padding:'0 8px'}}>
        <span className="logo-mark"><Beagle/></span><span>Hol<span className="logo-ai">ai</span></span>
      </a>
      <div>
        {items.map(it=>(
          <div key={it.k} className={`side-item ${route === it.k || (route === 'policies' && it.k === 'policies') ? 'active' : ''}`} onClick={()=>go(it.k)}>
            <span className="side-ico">{it.ico}</span>
            <span style={{flex: 1}}>{it.l}</span>
            {it.badge && <span style={{fontSize: 9, background: route===it.k?'#fff':'var(--accent)', color: route===it.k?'var(--accent)':'#fff', padding:'2px 6px', borderRadius: 4, fontWeight: 800, letterSpacing:'0.05em'}}>{it.badge}</span>}
          </div>
        ))}
      </div>
      <div style={{marginTop:'auto'}}>
        <div style={{background:'var(--accent)', color:'#fff', padding: 20, borderRadius: 18, marginBottom: 12}}>
          <div className="hstack" style={{marginBottom: 8}}>
            <I.sparkle size={14}/>
            <span className="eyebrow" style={{color:'rgba(255,255,255,0.9)'}}>Holai Plus</span>
          </div>
          <div style={{fontSize: 13, marginBottom: 12, opacity: 0.95}}>Asistente IA ilimitado · $2.990</div>
          <button className="btn btn-white btn-sm" style={{width:'100%', justifyContent:'center'}}>Activar</button>
        </div>
        <div className="side-item" onClick={()=>go('home')}><span className="side-ico"><I.logout size={18}/></span><span>Salir</span></div>
      </div>
    </aside>
  );
}

function TopBar({ title, sub }) {
  return (
    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 32}}>
      <div>
        <h1 className="topbar-title" style={{fontSize: 48, fontWeight: 800, letterSpacing:'-0.04em', margin: 0}}>{title}</h1>
        {sub && <p className="muted" style={{margin:'6px 0 0', fontSize: 15}}>{sub}</p>}
      </div>
      <div className="hstack topbar-actions">
        <button className="btn btn-outline btn-sm"><I.search size={14}/> Buscar</button>
        <button className="btn btn-outline btn-sm" style={{padding: 8, width: 36, justifyContent:'center'}}><I.bell size={14}/></button>
        <div style={{width: 40, height: 40, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', fontWeight: 700}}>J</div>
      </div>
    </div>
  );
}

function Dashboard({ go }) {
  return (
    <div className="app-shell">
      <Sidebar route="dashboard" go={go}/>
      <div className="content-area">
        <TopBar title="Hola, Javier 👋" sub="4 pólizas conectadas · actualizado hace 3 min"/>

        <div className="kpi-grid" style={{display:'grid', gridTemplateColumns:'1.3fr 1fr 1fr', gap: 20, marginBottom: 20}}>
          <div style={{background:'var(--accent)', color:'#fff', borderRadius:'var(--radius-l)', padding: 32, position:'relative', overflow:'hidden'}}>
            <div className="eyebrow" style={{color:'rgba(255,255,255,0.85)'}}>Tu Insurance Score</div>
            <div style={{display:'flex', alignItems:'baseline', gap: 16, marginTop: 8}}>
              <div style={{fontSize: 120, fontWeight: 800, lineHeight: 0.85, letterSpacing:'-0.04em'}}>72</div>
              <div style={{paddingBottom: 14}}>
                <div style={{fontSize: 16, fontWeight: 700}}>BUENA</div>
                <div style={{fontSize: 12, opacity: 0.85}}>+4 vs mes pasado</div>
              </div>
            </div>
            <div style={{height: 8, borderRadius: 4, background:'rgba(255,255,255,0.25)', overflow:'hidden', marginTop: 16}}>
              <div style={{width:'72%', height:'100%', background:'#fff', borderRadius: 4}}/>
            </div>
            <button className="btn btn-white btn-sm" style={{marginTop: 20}} onClick={()=>go('score')}>
              Ver detalle <I.arrow size={12}/>
            </button>
            <div style={{position:'absolute', right:-40, bottom:-40, width: 160, height: 160, borderRadius:'50%', background:'rgba(255,255,255,0.08)'}}/>
          </div>

          <div className="card">
            <div className="eyebrow">Cobertura total</div>
            <div style={{fontSize: 48, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 1, margin:'10px 0 4px'}}>$248M</div>
            <div className="muted" style={{fontSize: 13}}>combinada</div>
            <div style={{marginTop: 24, display:'flex', gap: 4, height: 8}}>
              <div style={{flex: 3.5, background:'var(--accent)', borderRadius: 4}}/>
              <div style={{flex: 2.2, background:'var(--mint)', borderRadius: 4}}/>
              <div style={{flex: 1.5, background:'var(--sun)', borderRadius: 4}}/>
              <div style={{flex: 1, background:'#4B2C73', borderRadius: 4}}/>
            </div>
            <div className="mono muted" style={{fontSize: 10, marginTop: 10, letterSpacing:'0.08em'}}>AUTO · SALUD · HOGAR · VIDA</div>
          </div>

          <div className="card">
            <div className="eyebrow">Próximo pago</div>
            <div style={{fontSize: 48, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 1, margin:'10px 0 4px'}}>$203.500</div>
            <div className="muted" style={{fontSize: 13}}>consolidado · 05 may</div>
            <div className="hstack" style={{marginTop: 24, gap: 6}}>
              <I.clock size={14} className="accent"/>
              <span className="mono accent" style={{fontSize: 11, fontWeight: 600}}>EN 17 DÍAS</span>
            </div>
          </div>
        </div>

        <div style={{background:'var(--accent-soft)', borderRadius:'var(--radius)', padding: 22, marginBottom: 28, display:'flex', gap: 16, alignItems:'center'}}>
          <div style={{width: 44, height: 44, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', flexShrink: 0}}>
            <I.sparkle size={20}/>
          </div>
          <div style={{flex: 1}}>
            <div style={{fontWeight: 700, fontSize: 15}}>Detectamos 2 gaps de cobertura</div>
            <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 2}}>Tu seguro de auto no cubre lunas y tu póliza de vida está bajo el promedio.</div>
          </div>
          <button className="btn btn-accent btn-sm" onClick={()=>go('chat')}>Preguntar a la IA <I.arrow size={12}/></button>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom: 16}}>
          <div>
            <div className="eyebrow">Mis pólizas</div>
            <h2 style={{fontSize: 32, fontWeight: 800, letterSpacing:'-0.03em', margin:'6px 0 0'}}>4 vigentes</h2>
          </div>
          <button className="btn btn-outline btn-sm"><I.plus size={14}/> Agregar</button>
        </div>

        <div className="vstack" style={{gap: 12}}>
          {POLICIES.map(p => <PolicyRow key={p.id} p={p} go={go}/>)}
        </div>
      </div>
    </div>
  );
}

function PolicyRow({ p, go }) {
  const iconMap = { car:<I.car size={24}/>, heart:<I.heart size={24}/>, house:<I.house size={24}/>, shield:<I.shield size={24}/> };
  return (
    <div className="policy">
      <div className={`policy-ico ${p.color}`}>{iconMap[p.ico]}</div>
      <div>
        <div style={{display:'flex', gap: 10, alignItems:'baseline'}}>
          <span style={{fontSize: 20, fontWeight: 800, letterSpacing:'-0.02em'}}>{p.type}</span>
          <span className="mono muted" style={{fontSize: 11, letterSpacing:'0.05em'}}>· {p.brand.toUpperCase()}</span>
        </div>
        <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 2}}>{p.detail}</div>
        <div className="hstack" style={{marginTop: 10, gap: 14}}>
          <div style={{display:'flex', alignItems:'center', gap: 6}}>
            <div style={{width: 70, height: 5, borderRadius: 3, background:'var(--bg-warm)', overflow:'hidden'}}>
              <div style={{width: `${p.cov}%`, height:'100%', background:'var(--accent)'}}/>
            </div>
            <span className="mono" style={{fontSize: 10, color:'var(--muted)'}}>{p.cov}% COB.</span>
          </div>
          <span className="mono muted" style={{fontSize: 11}}>RENUEVA {p.renew.toUpperCase()}</span>
        </div>
      </div>
      <div className="policy-end" style={{textAlign:'right'}}>
        <div style={{fontSize: 24, fontWeight: 800, letterSpacing:'-0.03em', lineHeight: 1}}>{p.prem}</div>
        <div className="mono muted" style={{fontSize: 10, marginTop: 2, letterSpacing:'0.05em'}}>POR MES</div>
        <div className="hstack" style={{marginTop: 10, justifyContent:'flex-end', gap: 6}}>
          <button className="btn btn-outline btn-sm" onClick={()=>go('chat')}>Preguntar</button>
          <button className="btn btn-accent btn-sm" onClick={()=>go('cotizar')}>Comparar</button>
        </div>
      </div>
    </div>
  );
}

function ScorePage({ go }) {
  const factors = [
    { l:'Vigencia', v: 95, d:'Todas tus pólizas están al día.' },
    { l:'Cobertura', v: 68, d:'Seguro de auto sin cobertura de lunas.' },
    { l:'Costo-beneficio', v: 74, d:'Pagás un 12% más que el promedio.' },
    { l:'Diversificación', v: 52, d:'Te falta responsabilidad civil.' },
  ];
  return (
    <div className="app-shell">
      <Sidebar route="score" go={go}/>
      <div className="content-area">
        <TopBar title="Insurance Score" sub="Se actualiza con cada cambio en tus pólizas"/>
        <div className="score-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 20}}>
          <div style={{background:'var(--accent)', color:'#fff', borderRadius:'var(--radius-l)', padding: 48, textAlign:'center', position:'relative', overflow:'hidden'}}>
            <div style={{width: 240, height: 240, margin:'0 auto', borderRadius:'50%', background:`conic-gradient(#fff 0% 72%, rgba(255,255,255,0.25) 72% 100%)`, display:'grid', placeItems:'center', position:'relative'}}>
              <div style={{position:'absolute', inset: 20, background:'var(--accent)', borderRadius:'50%'}}/>
              <div style={{position:'relative', zIndex: 1}}>
                <div style={{fontSize: 92, fontWeight: 800, lineHeight: 1, letterSpacing:'-0.05em'}}>72</div>
                <div className="mono" style={{fontSize: 11, letterSpacing:'0.1em', opacity: 0.85}}>DE 100</div>
              </div>
            </div>
            <div className="mono" style={{fontSize: 12, letterSpacing:'0.12em', marginTop: 28, opacity: 0.9}}>BUENA COBERTURA</div>
            <p style={{fontSize: 22, fontWeight: 700, margin:'12px auto 0', maxWidth: 340, lineHeight: 1.3, letterSpacing:'-0.02em'}}>
              Estás mejor que el 64% de los chilenos.
            </p>
          </div>
          <div className="card" style={{padding: 36}}>
            <div className="eyebrow">Factores del score</div>
            <h3 style={{fontSize: 28, fontWeight: 800, letterSpacing:'-0.03em', margin:'8px 0 24px'}}>Qué mueve tu puntaje</h3>
            {factors.map(f => (
              <div key={f.l} style={{paddingBottom: 18, marginBottom: 18, borderBottom:'1px solid var(--line)'}}>
                <div className="hstack" style={{justifyContent:'space-between', marginBottom: 8}}>
                  <span style={{fontSize: 15, fontWeight: 700}}>{f.l}</span>
                  <span className="mono" style={{fontSize: 13}}>{f.v}/100</span>
                </div>
                <div style={{height: 6, borderRadius: 3, background:'var(--bg-warm)', overflow:'hidden', marginBottom: 8}}>
                  <div style={{width: `${f.v}%`, height:'100%', background: f.v > 70 ? 'var(--accent)' : f.v > 55 ? 'var(--sun)' : '#D9534F'}}/>
                </div>
                <div style={{fontSize: 13, color:'var(--muted)'}}>{f.d}</div>
              </div>
            ))}
            <button className="btn btn-accent btn-lg" style={{marginTop: 8, width:'100%', justifyContent:'center'}} onClick={()=>go('chat')}>
              Cómo mejorar mi score <I.arrow size={16}/>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, ScorePage, Sidebar, TopBar });