const { useState, useEffect, useRef } = React;

function Nav({ go }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <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="nav-links">
          <a href="#" onClick={(e)=>{e.preventDefault(); go('cotizar');}}>Cotizar</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); go('chat');}}>Asistente IA</a>
          <a href="#">Score</a>
          <a href="#">Siniestros</a>
          <a href="#">Blog</a>
        </div>
        <div className="nav-actions">
          <button className="btn btn-ghost btn-sm" onClick={()=>go('login')}>Iniciar sesión</button>
          <button className="btn btn-accent btn-sm" onClick={()=>go('signup')}>Conectar RUT</button>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer style={{borderTop:'1px solid var(--line)', marginTop: 80, padding:'56px 0 40px', background:'var(--bg-warm)'}}>
      <div className="container" style={{display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1fr', gap: 48}}>
        <div>
          <div className="logo" style={{marginBottom: 12}}><span className="logo-mark"><Beagle/></span><span>Hol<span className="logo-ai">ai</span></span></div>
          <p style={{fontSize: 14, color:'var(--ink-2)', maxWidth: 320, margin: 0}}>
            Tus seguros, claros. Todas tus pólizas en un solo lugar.
          </p>
          <p className="mono muted" style={{fontSize: 11, marginTop: 24}}>Santiago · Chile</p>
        </div>
        {[
          {t:'Producto', l:['Cotizador','Asistente IA','Insurance Score','Mis pólizas']},
          {t:'Compañía', l:['Nosotros','Blog','Prensa','Trabaja con nosotros']},
          {t:'Legal', l:['Términos','Privacidad','Seguridad','Cookies']},
        ].map(col => (
          <div key={col.t}>
            <div className="eyebrow" style={{marginBottom: 16}}>{col.t}</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0}}>
              {col.l.map(i => <li key={i} style={{marginBottom: 10}}><a href="#" style={{color:'var(--ink-2)', textDecoration:'none', fontSize: 14}}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
    </footer>
  );
}

function LogoMarquee() {
  const aseguradoras = [
    // Vida
    { name:'MetLife',               short:'MetLife',    bg:'#0072CE', txt:'#fff' },
    { name:'Consorcio',             short:'Consorcio',  bg:'#005EB8', txt:'#fff' },
    { name:'Zurich',                short:'Zurich',     bg:'#1B1B4A', txt:'#fff' },
    { name:'SURA',                  short:'SURA',       bg:'#009540', txt:'#fff' },
    { name:'Confuturo',             short:'Confuturo',  bg:'#6C3483', txt:'#fff' },
    { name:'Bice Vida',             short:'Bice Vida',  bg:'#1B2A6B', txt:'#fff' },
    { name:'Security Vida',         short:'Sec. Vida',  bg:'#003366', txt:'#fff' },
    { name:'Principal',             short:'Principal',  bg:'#DA291C', txt:'#fff' },
    { name:'EuroAmérica',           short:'EuroAm.',    bg:'#00558B', txt:'#fff' },
    { name:'Mutual de Seguros',     short:'Mutual',     bg:'#2E7D32', txt:'#fff' },
    // Generales
    { name:'BCI Seguros',           short:'BCI',        bg:'#002F87', txt:'#fff' },
    { name:'HDI Seguros',           short:'HDI',        bg:'#D0011B', txt:'#fff' },
    { name:'Mapfre',                short:'MAPFRE',     bg:'#003087', txt:'#fff' },
    { name:'Liberty',               short:'Liberty',    bg:'#FFD100', txt:'#222' },
    { name:'Reale Seguros',         short:'Reale',      bg:'#C00000', txt:'#fff' },
    { name:'Zenit Seguros',         short:'Zenit',      bg:'#E65C00', txt:'#fff' },
    { name:'FID Seguros',           short:'FID',        bg:'#1A237E', txt:'#fff' },
    { name:'Southbridge',           short:'Southbridge',bg:'#00695C', txt:'#fff' },
  ];
  const Row = () => (
    <>
      {aseguradoras.map(a => (
        <div key={a.name} style={{display:'flex', alignItems:'center', gap: 10, flexShrink: 0}}>
          <div style={{
            height: 36, paddingLeft: 14, paddingRight: 14,
            borderRadius: 10,
            background: a.bg,
            color: a.txt,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'DM Sans, sans-serif',
            fontWeight: 800,
            fontSize: a.short.length > 6 ? 11 : 13,
            letterSpacing: '-0.02em',
            whiteSpace:'nowrap',
            opacity: 0.88,
            boxShadow:'0 2px 8px rgba(0,0,0,0.12)',
          }}>
            {a.short}
          </div>
          <span style={{fontSize: 14, color:'var(--ink-2)', fontWeight: 500, whiteSpace:'nowrap', opacity: 0.65}}>
            {a.name}
          </span>
        </div>
      ))}
    </>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        <Row /><Row />
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, LogoMarquee });