// ========== LANDING ==========

function Landing({ go, variant }) {
  return (
    <div>
      {variant === 'A' && <HeroA go={go} />}
      {variant === 'B' && <HeroB go={go} />}
      {variant === 'C' && <HeroC go={go} />}

      <section style={{padding:'48px 0 24px'}}>
        <div className="container">
          <p className="eyebrow" style={{textAlign:'center', marginBottom: 28}}>Conectado con 18 aseguradoras en Chile</p>
          <LogoMarquee />
        </div>
      </section>

      <HowItWorks />
      <AIShowcase go={go} />
      <CommissionsSection go={go} />
      <ScoreSection go={go} />
      <Pricing go={go} />
      <Testimonials />
      <FinalCTA go={go} />
      <Footer />
    </div>
  );
}

// ============ HERO A — Lemonade-style big statement + illustration ============
function HeroA({ go }) {
  return (
    <section style={{padding:'60px 0 100px', position:'relative', overflow:'hidden'}}>
      <div className="blob-bg">
        <div className="blob" style={{width: 500, height: 500, background:'var(--accent)', top:-120, right:-80, opacity: 0.18}}/>
        <div className="blob" style={{width: 380, height: 380, background:'var(--accent-2)', bottom:-60, left:-100, opacity: 0.12}}/>
      </div>
      <div className="container" style={{position:'relative'}}>
        <div className="hero-grid" style={{display:'grid', gridTemplateColumns:'1.15fr 1fr', gap: 48, alignItems:'center'}}>
          <div>
            <div className="chip" style={{marginBottom: 28}}>
              <span className="dot"></span> Asistente IA desde $2.990/mes
            </div>
            <h1 className="display display-xl" style={{margin: 0}}>
              Seguros.<br/>
              <span className="grad-text">Claros.</span><br/>
              Para <span style={{fontStyle:'italic', fontWeight: 400}}>todos</span>.
            </h1>
            <p style={{fontSize: 20, lineHeight: 1.5, color:'var(--ink-2)', maxWidth: 480, marginTop: 28, fontWeight: 400}}>
              Conecta tu RUT y ve todas las pólizas que ya tienes. Cotiza en 18 aseguradoras, entiende tu cobertura con IA y sube tu Insurance Score.
            </p>
            <div className="hstack hero-cta" style={{marginTop: 36, gap: 10}}>
              <button className="btn btn-accent btn-lg" onClick={()=>go('signup')}>
                Empezar gratis <I.arrow size={18}/>
              </button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go('cotizar')}>
                Cotizar sin registro
              </button>
            </div>
            <div className="hstack hero-stats" style={{marginTop: 44, gap: 32}}>
              <div><div style={{fontSize: 30, fontWeight: 800, letterSpacing:'-0.03em'}}>75k+</div><div className="muted" style={{fontSize: 13}}>usuarios</div></div>
              <div><div style={{fontSize: 30, fontWeight: 800, letterSpacing:'-0.03em'}}>18</div><div className="muted" style={{fontSize: 13}}>aseguradoras</div></div>
              <div><div style={{fontSize: 30, fontWeight: 800, letterSpacing:'-0.03em'}}>2min</div><div className="muted" style={{fontSize: 13}}>para empezar</div></div>
            </div>
          </div>

          {/* Right — phone mockup with floating cards */}
          <div className="hero-phone" style={{position:'relative', height: 620}}>
            {/* Main phone */}
            <div style={{
              position:'absolute', right: 20, top: 0,
              width: 320, height: 600,
              background: 'var(--ink)', borderRadius: 46,
              padding: 14, boxShadow:'0 40px 80px -30px rgba(255,0,131,0.35)'
            }}>
              <div style={{background:'var(--bg)', borderRadius: 34, height:'100%', overflow:'hidden', padding: 22}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 20}}>
                  <div className="logo" style={{fontSize: 20}}><span className="logo-mark" style={{width:22,height:22}}><Beagle size={22}/></span><span>Hol<span className="logo-ai">ai</span></span></div>
                  <div style={{width: 32, height: 32, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', fontWeight: 700}}>J</div>
                </div>
                <div style={{fontSize: 13, color:'var(--muted)'}}>Hola Javier,</div>
                <div style={{fontSize: 26, fontWeight: 800, letterSpacing:'-0.02em', marginTop: 2}}>tu score es</div>
                <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 12}}>
                  <div style={{fontSize: 96, fontWeight: 800, lineHeight: 1, color:'var(--accent)', letterSpacing:'-0.04em'}}>72</div>
                  <div style={{fontSize: 18, fontWeight: 700, color:'var(--muted)'}}>/100</div>
                </div>
                <div style={{height: 8, borderRadius: 4, background:'var(--bg-warm)', overflow:'hidden', marginTop: 12}}>
                  <div style={{width:'72%', height:'100%', background:'var(--accent)', borderRadius: 4}}/>
                </div>
                <div className="mono" style={{fontSize: 10, marginTop: 6, color:'var(--muted)', letterSpacing:'0.08em'}}>BUENA · +4 ESTE MES</div>

                <div style={{marginTop: 22}}>
                  <div className="eyebrow" style={{marginBottom: 10}}>Tus 4 pólizas</div>
                  {[
                    {i:<I.car size={14}/>, c:'pink', t:'Auto HDI', v:'$34.900'},
                    {i:<I.heart size={14}/>, c:'mint', t:'Salud Cruz Blanca', v:'$148.000'},
                    {i:<I.house size={14}/>, c:'sun', t:'Hogar Consorcio', v:'$12.400'},
                  ].map((x,i)=>(
                    <div key={i} style={{display:'flex', alignItems:'center', gap: 10, padding:'10px 0', borderBottom:'1px solid var(--line)'}}>
                      <div className={`policy-ico ${x.c}`} style={{width: 32, height: 32, borderRadius: 10}}>{x.i}</div>
                      <div style={{flex:1}}>
                        <div style={{fontSize: 13, fontWeight: 600}}>{x.t}</div>
                        <div className="mono muted" style={{fontSize: 10}}>VIGENTE</div>
                      </div>
                      <div style={{fontSize: 12, fontWeight: 700}}>{x.v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Floating chat bubble */}
            <div className="float" style={{
              position:'absolute', left: -20, top: 80, width: 280,
              background:'#fff', padding: 18, borderRadius: 24,
              boxShadow:'0 30px 60px -20px rgba(255,0,131,0.3)',
              '--rot':'-3deg', transform:'rotate(-3deg)',
            }}>
              <div className="hstack" style={{marginBottom: 12, gap: 8}}>
                <div style={{width: 26, height: 26, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center'}}>
                  <I.sparkle size={12}/>
                </div>
                <span className="mono" style={{fontSize: 10, letterSpacing:'0.1em', fontWeight: 600}}>HOLAI IA</span>
              </div>
              <p style={{margin: 0, fontSize: 15, lineHeight: 1.4, fontWeight: 500}}>
                Tu seguro de auto <b>no cubre lunas</b>. ¿Quieres que te busque alternativas?
              </p>
            </div>

            {/* Floating quote card */}
            <div className="float-slow" style={{
              position:'absolute', right: -30, bottom: 60, width: 240,
              background:'var(--accent)', color:'#fff', padding: 22, borderRadius: 24,
              boxShadow:'0 30px 60px -20px rgba(255,0,131,0.4)',
              '--rot':'4deg', transform:'rotate(4deg)',
              animationDelay:'1.5s'
            }}>
              <div className="mono" style={{fontSize: 10, opacity: 0.85, letterSpacing:'0.1em'}}>MEJOR COTIZACIÓN</div>
              <div style={{fontSize: 42, fontWeight: 800, letterSpacing:'-0.03em', marginTop: 4, lineHeight: 1}}>$28.400</div>
              <div style={{fontSize: 13, opacity: 0.9, marginTop: 4}}>por mes · ahorro 18%</div>
              <div style={{marginTop: 14, padding: '8px 12px', background:'rgba(255,255,255,0.2)', borderRadius: 999, fontSize: 11, fontWeight: 600, display:'inline-block'}}>
                18 aseguradoras comparadas
              </div>
            </div>

            {/* Tiny dot accent */}
            <div style={{position:'absolute', top: 30, right: 100, width: 24, height: 24, borderRadius:'50%', background:'var(--accent)'}}/>
            <div style={{position:'absolute', bottom: 180, left: 40, width: 14, height: 14, borderRadius:'50%', background:'var(--ink)'}}/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ HERO B — Full bleed pink canvas ============
function HeroB({ go }) {
  return (
    <section style={{padding:'32px 0 64px'}}>
      <div className="container">
        <div style={{
          background:'var(--accent)', color:'#fff',
          borderRadius:'var(--radius-l)',
          padding:'80px 64px 0',
          position:'relative', overflow:'hidden', minHeight: 660
        }}>
          <div style={{maxWidth: 820, position:'relative', zIndex: 2}}>
            <div className="chip white" style={{marginBottom: 28}}>
              <span className="dot"></span> Tu RUT, 30 segundos, listo
            </div>
            <h1 className="display display-xl" style={{margin: 0, color:'#fff'}}>
              Entiende<br/>
              tus seguros<br/>
              <span style={{fontStyle:'italic', fontWeight: 400}}>de verdad.</span>
            </h1>
            <p style={{fontSize: 22, opacity: 0.92, maxWidth: 560, marginTop: 28, lineHeight: 1.45, fontWeight: 400}}>
              Holai reúne todas tus pólizas en un solo lugar, te explica lo que no entiendes con IA y cotiza en 18 aseguradoras en un click.
            </p>
            <div className="hstack" style={{marginTop: 36, gap: 10}}>
              <button className="btn btn-white btn-lg" onClick={()=>go('signup')}>
                Empezar gratis <I.arrow size={18}/>
              </button>
              <button className="btn btn-lg" style={{background:'rgba(255,255,255,0.18)', color:'#fff'}} onClick={()=>go('chat')}>
                Probar el asistente IA
              </button>
            </div>
          </div>

          {/* Decorative elements */}
          <div style={{position:'absolute', right: 80, top: 100, width: 120, height: 120, borderRadius:'50%', background:'rgba(255,255,255,0.12)'}}/>
          <div style={{position:'absolute', right: 240, top: 220, width: 56, height: 56, borderRadius:'50%', background:'rgba(255,255,255,0.18)'}}/>

          {/* Phone card */}
          <div className="float" style={{
            position:'absolute', right: 80, bottom: -30, width: 340,
            background:'#fff', color:'var(--ink)', borderRadius: 28, padding: 24,
            boxShadow:'0 40px 80px -20px rgba(0,0,0,0.3)'
          }}>
            <div className="eyebrow" style={{color:'var(--accent)'}}>Tu score</div>
            <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 8}}>
              <div style={{fontSize: 80, fontWeight: 800, color:'var(--ink)', lineHeight: 1, letterSpacing:'-0.04em'}}>72</div>
              <div style={{fontSize: 18, fontWeight: 700, color:'var(--muted)'}}>/100</div>
            </div>
            <div style={{marginTop: 12, height: 8, background:'var(--bg-warm)', borderRadius: 4, overflow:'hidden'}}>
              <div style={{width:'72%', height:'100%', background:'linear-gradient(90deg, var(--accent), var(--accent-2))'}}/>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop: 16, fontSize: 12, fontWeight: 600}}>
              <span className="muted">4 pólizas conectadas</span>
              <span className="accent">Buena cobertura</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ HERO C — Minimal + sticker energy ============
function HeroC({ go }) {
  return (
    <section style={{padding:'60px 0 80px', position:'relative', overflow:'hidden'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 1000, margin:'0 auto', position:'relative'}}>
          <div className="chip" style={{marginBottom: 32}}>
            <I.sparkle size={12}/> Primera plataforma de seguros de Chile
          </div>
          <h1 className="display display-xl" style={{margin: 0}}>
            Todos tus seguros.<br/>
            Un solo <span className="grad-text">click.</span>
          </h1>
          <p style={{fontSize: 22, color:'var(--ink-2)', maxWidth: 620, margin:'32px auto 0', lineHeight: 1.5}}>
            Conecta tu RUT y Holai trae automáticamente todas tus pólizas. Cotiza, compara, entiende — todo en un solo lugar.
          </p>
          <div className="hstack" style={{justifyContent:'center', marginTop: 36, gap: 10}}>
            <button className="btn btn-accent btn-lg" onClick={()=>go('signup')}>
              Empezar gratis <I.arrow size={18}/>
            </button>
            <button className="btn btn-outline btn-lg" onClick={()=>go('chat')}>
              Probar IA
            </button>
          </div>

          {/* Floating stickers */}
          <div className="float" style={{position:'absolute', left: -20, top: 20, background:'var(--accent)', color:'#fff', padding:'12px 18px', borderRadius: 999, fontWeight: 700, fontSize: 14, transform:'rotate(-8deg)', boxShadow:'0 20px 40px -15px rgba(255,0,131,0.4)'}}>
            ✨ Asistente IA $2.990
          </div>
          <div className="float-slow" style={{position:'absolute', right: 20, top: 80, background:'var(--ink)', color:'#fff', padding:'12px 18px', borderRadius: 999, fontWeight: 700, fontSize: 14, transform:'rotate(6deg)', animationDelay:'1s'}}>
            🚗 Auto · Salud · Hogar
          </div>
          <div className="float" style={{position:'absolute', left: 60, bottom: -20, background:'var(--mint)', color:'#fff', padding:'12px 18px', borderRadius: 999, fontWeight: 700, fontSize: 14, transform:'rotate(4deg)', animationDelay:'2s'}}>
            💗 Hecho en Chile
          </div>
        </div>

        {/* Preview grid */}
        <div className="hero-c-preview" style={{marginTop: 80, display:'grid', gridTemplateColumns:'1fr 1.4fr 1fr', gap: 20}}>
          <div className="card" style={{padding: 32}}>
            <div className="eyebrow">Pólizas</div>
            <div style={{fontSize: 72, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 1, marginTop: 8}}>4</div>
            <div className="muted" style={{fontSize: 14, marginTop: 4}}>conectadas automáticamente</div>
            <div style={{marginTop: 24, display:'flex', gap: 8}}>
              {[{i:<I.car size={16}/>,c:'pink'},{i:<I.heart size={16}/>,c:'mint'},{i:<I.house size={16}/>,c:'sun'},{i:<I.shield size={16}/>,c:'plum'}].map((x,i)=>(
                <div key={i} className={`policy-ico ${x.c}`} style={{width: 40, height: 40, borderRadius: 12}}>{x.i}</div>
              ))}
            </div>
          </div>
          <div style={{background:'var(--accent)', color:'#fff', borderRadius:'var(--radius)', padding: 32, position:'relative', overflow:'hidden'}}>
            <div className="eyebrow" style={{color:'rgba(255,255,255,0.8)'}}>Tu score</div>
            <div style={{display:'flex', alignItems:'baseline', gap: 14, marginTop: 8}}>
              <div style={{fontSize: 144, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 0.85}}>72</div>
              <div style={{fontSize: 24, opacity: 0.7, fontWeight: 700}}>/100</div>
            </div>
            <div style={{marginTop: 20, height: 8, background:'rgba(255,255,255,0.25)', borderRadius: 4, overflow:'hidden'}}>
              <div style={{width:'72%', height:'100%', background:'#fff', borderRadius: 4}}/>
            </div>
          </div>
          <div className="card" style={{padding: 32, background:'var(--accent-soft)'}}>
            <div className="eyebrow" style={{color:'var(--accent-deep)'}}>Ahorro</div>
            <div style={{fontSize: 52, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 1, color:'var(--accent)', marginTop: 8}}>$180k</div>
            <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 4}}>detectado al año</div>
            <button className="btn btn-accent btn-sm" style={{marginTop: 16}} onClick={()=>go('cotizar')}>Ver cotización</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:'01', t:'Conecta tu RUT', d:'Buscamos automáticamente todas tus pólizas vigentes en las 18 aseguradoras del mercado chileno.', i:<I.user size={22}/> },
    { n:'02', t:'Entiende con IA', d:'Pregúntale al asistente lo que no entiendes. Responde en segundos, 24/7, desde $2.990 al mes.', i:<I.sparkle size={22}/> },
    { n:'03', t:'Cotiza en un click', d:'Comparamos precios en todas las aseguradoras al mismo tiempo y encontramos el mejor ahorro para ti.', i:<I.bolt size={22}/> },
  ];
  return (
    <section style={{padding:'96px 0'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 680, margin:'0 auto 56px'}}>
          <div className="eyebrow">Cómo funciona</div>
          <h2 className="display display-m" style={{margin:'16px 0 0'}}>Tres pasos. Cero papeleo.</h2>
        </div>
        <div className="how-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20}}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{padding: 36}}>
              <div className="hstack" style={{justifyContent:'space-between', marginBottom: 56}}>
                <div className="mono" style={{fontSize: 12, color:'var(--accent)', fontWeight: 600, letterSpacing:'0.1em'}}>{s.n}</div>
                <div style={{width: 52, height: 52, borderRadius: 18, background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center'}}>
                  {s.i}
                </div>
              </div>
              <h3 style={{fontSize: 28, fontWeight: 800, letterSpacing:'-0.03em', margin:'0 0 12px'}}>{s.t}</h3>
              <p style={{margin: 0, color:'var(--ink-2)', fontSize: 15, lineHeight: 1.55}}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AIShowcase({ go }) {
  return (
    <section style={{padding:'64px 0', background:'var(--bg-warm)'}}>
      <div className="container">
        <div className="ai-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 64, alignItems:'center'}}>
          <div>
            <div className="chip accent"><I.sparkle size={12}/> Asistente IA · desde $2.990/mes</div>
            <h2 className="display display-m" style={{margin:'20px 0 16px'}}>
              Pregúntale<br/>lo que <span className="grad-text">quieras.</span>
            </h2>
            <p style={{fontSize: 17, color:'var(--ink-2)', lineHeight: 1.55, maxWidth: 480}}>
              Desde "¿cubre granizo?" hasta "¿qué pasa si no pago?". Holai conoce tus pólizas y te responde al instante.
            </p>
            <ul style={{listStyle:'none', padding: 0, marginTop: 28}}>
              {['Lee tus pólizas completas','Explica cláusulas en palabras simples','Detecta vacíos de cobertura','Sugiere mejoras para tu score'].map(l => (
                <li key={l} className="hstack" style={{marginBottom: 12, fontSize: 15, fontWeight: 500}}>
                  <div style={{width: 22, height: 22, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', flexShrink: 0}}><I.check size={12}/></div>
                  {l}
                </li>
              ))}
            </ul>
            <button className="btn btn-accent btn-lg" style={{marginTop: 28}} onClick={()=>go('chat')}>
              Probar Holai <I.arrow size={18}/>
            </button>
          </div>

          <div className="card ai-chat-card" style={{padding: 28, maxWidth: 520, marginLeft:'auto', boxShadow:'var(--shadow-lg)'}}>
            <div className="hstack" style={{marginBottom: 20, justifyContent:'space-between'}}>
              <div className="hstack">
                <div style={{width: 36, height: 36, borderRadius:'50%', background:'var(--accent)', display:'grid', placeItems:'center', color:'#fff'}}>
                  <I.sparkle size={16}/>
                </div>
                <div>
                  <div style={{fontSize: 14, fontWeight: 700}}>Holai</div>
                  <div className="mono muted" style={{fontSize: 10, letterSpacing:'0.08em'}}>EN LÍNEA</div>
                </div>
              </div>
            </div>
            <div className="vstack" style={{gap: 12}}>
              <div className="bubble me" style={{fontSize: 14}}>¿Mi seguro de auto cubre si choco a un peatón?</div>
              <div className="bubble ai" style={{fontSize: 14}}>Sí. Tu póliza HDI incluye responsabilidad civil hasta UF 3.000 (~$117 millones). Cubre daños a terceros, incluidos peatones.</div>
              <div className="hstack" style={{gap: 6, marginTop: 4}}>
                <span className="chip" style={{background:'var(--accent-soft)', color:'var(--accent-deep)', cursor:'pointer'}}>Explícame más</span>
                <span className="chip" style={{cursor:'pointer'}}>Otra pregunta</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CommissionsSection({ go }) {
  return (
    <section style={{padding:'96px 0', background:'var(--ink)', color:'var(--bg)'}}>
      <div className="container">
        <div className="comm-outer" style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap: 80, alignItems:'center'}}>
          <div>
            <div className="chip" style={{background:'rgba(255,255,255,0.1)', color:'#fff', marginBottom: 24}}>
              <I.bolt size={12}/> Sin corredores, sin comisiones ocultas
            </div>
            <h2 className="display display-l" style={{margin:'0 0 24px', color:'#fff'}}>
              Ahorra hasta<br/>
              <span className="grad-text">$1.200.000</span><br/>
              <span style={{fontStyle:'italic', fontWeight: 400}}>al año.</span>
            </h2>
            <p style={{fontSize: 19, lineHeight: 1.55, opacity: 0.82, maxWidth: 500, margin:'0 0 32px'}}>
              Los corredores en Chile cobran entre 15% y 30% de comisión sobre cada prima. En Holai cotizas directo con las aseguradoras. Cero intermediarios. Cero sorpresas.
            </p>
            <button className="btn btn-accent btn-lg" onClick={()=>go('cotizar')}>
              Calcular mi ahorro <I.arrow size={18}/>
            </button>
          </div>
          <div className="comm-stats" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
            {[
              {t:'Comisión típica', v:'15–30%', d:'que pagas sin saberlo a tu corredor', dark:true},
              {t:'Con Holai', v:'0%', d:'cotizas directo con 18 aseguradoras', accent:true},
              {t:'Ahorro promedio', v:'$340k', d:'al año por usuario Holai Plus', dark:true},
              {t:'P\u00f3liza m\u00e1s clara', v:'2 min', d:'para entender tu cobertura con IA', dark:true},
            ].map((x,i) => (
              <div key={i} style={{
                padding: 28, borderRadius: 22,
                background: x.accent ? 'var(--accent)' : 'rgba(255,255,255,0.06)',
                border: x.accent ? 'none' : '1px solid rgba(255,255,255,0.08)',
                color: '#fff'
              }}>
                <div className="mono" style={{fontSize: 10, letterSpacing:'0.12em', opacity: x.accent ? 0.85 : 0.55, marginBottom: 14}}>{x.t.toUpperCase()}</div>
                <div className="comm-stat-val" style={{fontSize: 48, fontWeight: 800, letterSpacing:'-0.04em', lineHeight: 0.95}}>{x.v}</div>
                <div style={{fontSize: 13, marginTop: 10, opacity: 0.85, lineHeight: 1.4}}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ScoreSection({ go }) {
  return (
    <section style={{padding:'96px 0'}}>
      <div className="container">
        <div className="score-outer" style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 48, alignItems:'center'}}>
          <div style={{background:'var(--ink)', color:'var(--bg)', borderRadius:'var(--radius-l)', padding: 48}}>
            <div className="eyebrow" style={{color:'var(--accent-2)'}}>Tu Insurance Score</div>
            <div className="score-inner-grid" style={{display:'grid', gridTemplateColumns:'auto 1fr', gap: 40, alignItems:'center', marginTop: 20}}>
              <div className="score-num" style={{fontSize: 220, fontWeight: 800, lineHeight: 0.85, letterSpacing:'-0.05em'}}>72</div>
              <div>
                <div style={{fontSize: 14, color:'var(--muted)', marginBottom: 4}}>de 100</div>
                <div className="mono" style={{fontSize: 11, color:'var(--accent-2)', letterSpacing:'0.1em', marginBottom: 24}}>BUENA COBERTURA</div>
                {[{l:'Vigencia',v:95},{l:'Cobertura',v:68},{l:'Costo',v:74},{l:'Diversificación',v:52}].map(r => (
                  <div key={r.l} style={{marginBottom: 12}}>
                    <div style={{display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 4}}>
                      <span style={{opacity: 0.8}}>{r.l}</span>
                      <span className="mono">{r.v}</span>
                    </div>
                    <div style={{height: 5, borderRadius: 3, background:'#2A2A2A', overflow:'hidden'}}>
                      <div style={{width: `${r.v}%`, height:'100%', background:'var(--accent)'}}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow">Insurance Score</div>
            <h2 className="display display-m" style={{margin:'16px 0 20px'}}>
              Un número.<br/>
              <span style={{fontStyle:'italic', fontWeight: 400}}>Toda tu tranquilidad.</span>
            </h2>
            <p style={{fontSize: 17, color:'var(--ink-2)', lineHeight: 1.55, maxWidth: 520}}>
              Holai analiza todas tus pólizas y genera un score personalizado de 0 a 100. Te muestra dónde estás cubierto, dónde hay vacíos y qué ajustes suben tu puntaje.
            </p>
            <div className="score-factors" style={{marginTop: 32, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
              {[{t:'Vigencia',d:'Pólizas activas y al día'},{t:'Cobertura',d:'Protección real'},{t:'Costo',d:'Prima vs. cobertura'},{t:'Diversificación',d:'Equilibrio de riesgos'}].map(c => (
                <div key={c.t} className="card-soft" style={{padding: 18}}>
                  <div style={{fontWeight: 700, fontSize: 14}}>{c.t}</div>
                  <div className="muted" style={{fontSize: 13, marginTop: 4}}>{c.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing({ go }) {
  return (
    <section style={{padding:'96px 0'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 680, margin:'0 auto 56px'}}>
          <div className="eyebrow">Planes</div>
          <h2 className="display display-m" style={{margin:'16px 0 12px'}}>Empieza gratis. <span className="grad-text">Siempre.</span></h2>
          <p style={{fontSize: 17, color:'var(--ink-2)', margin: 0, lineHeight: 1.5}}>
            Conecta tu RUT y ve todas tus p\u00f3lizas sin pagar nada. Cuando quieras preguntarle a la IA o cotizar con un click, activas Plus.
          </p>
        </div>

        <div className="pricing-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20, maxWidth: 960, margin:'0 auto'}}>
          {/* Plan gratis */}
          <div className="card-outline" style={{padding: 40, display:'flex', flexDirection:'column'}}>
            <div style={{flex: 1}}>
              <div className="eyebrow">Plan gratis</div>
              <div style={{fontSize: 72, fontWeight: 800, lineHeight: 1, letterSpacing:'-0.04em', margin:'12px 0 4px'}}>$0</div>
              <div className="muted" style={{fontSize: 14, marginBottom: 28}}>sin tarjeta, sin letra chica</div>
              <div className="mono" style={{fontSize: 11, letterSpacing:'0.1em', color:'var(--muted)', marginBottom: 14}}>INCLUYE</div>
              {[
                {t:'Conecta tu RUT', d:'Traemos todas las p\u00f3lizas que ya tienes en las 18 aseguradoras.'},
                {t:'Ve todas tus coberturas', d:'Auto, salud, hogar, vida, APV. Todo en un solo lugar.'},
                {t:'Insurance Score', d:'Tu puntaje de 0 a 100 con los vac\u00edos detectados.'},
              ].map(f => (
                <div key={f.t} style={{display:'flex', gap: 12, marginBottom: 16}}>
                  <div style={{width: 22, height: 22, borderRadius:'50%', background:'var(--bg-warm)', color:'var(--accent)', display:'grid', placeItems:'center', flexShrink: 0, marginTop: 2}}>
                    <I.check size={12}/>
                  </div>
                  <div>
                    <div style={{fontWeight: 700, fontSize: 15}}>{f.t}</div>
                    <div className="muted" style={{fontSize: 13, marginTop: 2, lineHeight: 1.4}}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
            <button className="btn btn-outline" style={{width:'100%', marginTop: 24, justifyContent:'center'}} onClick={()=>go('signup')}>
              Conectar mi RUT
            </button>
          </div>

          {/* Plan Plus */}
          <div style={{
            padding: 40, borderRadius:'var(--radius)', background:'var(--accent)', color:'#fff',
            position:'relative', boxShadow: 'var(--shadow-lg)', display:'flex', flexDirection:'column'
          }}>
            <div style={{flex: 1}}>
              <div className="eyebrow" style={{color:'rgba(255,255,255,0.8)'}}>Holai Plus</div>
              <div style={{fontSize: 72, fontWeight: 800, lineHeight: 1, letterSpacing:'-0.04em', margin:'12px 0 4px'}}>
                $2.990<span style={{fontSize: 22, opacity: 0.7}}>/mes</span>
              </div>
              <div style={{opacity: 0.8, fontSize: 14, marginBottom: 28}}>cancelas cuando quieras</div>
              <div className="mono" style={{fontSize: 11, letterSpacing:'0.1em', opacity: 0.75, marginBottom: 14}}>TODO LO GRATIS, M\u00c1S</div>
              {[
                {t:'Asistente IA ilimitado', d:'Preg\u00fantale lo que quieras sobre tus p\u00f3lizas. 24/7, en espa\u00f1ol simple.'},
                {t:'Cotizador en un click', d:'Compara 18 aseguradoras al instante. Contrata en l\u00ednea sin corredores.'},
                {t:'Alertas y recomendaciones', d:'Avisamos vencimientos y cu\u00e1ndo cambiar p\u00f3liza para ahorrar.'},
              ].map(f => (
                <div key={f.t} style={{display:'flex', gap: 12, marginBottom: 16}}>
                  <div style={{width: 22, height: 22, borderRadius:'50%', background:'#fff', color:'var(--accent)', display:'grid', placeItems:'center', flexShrink: 0, marginTop: 2}}>
                    <I.check size={12}/>
                  </div>
                  <div>
                    <div style={{fontWeight: 700, fontSize: 15}}>{f.t}</div>
                    <div style={{fontSize: 13, opacity: 0.85, marginTop: 2, lineHeight: 1.4}}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{fontSize: 12, opacity: 0.75, marginTop: 8, marginBottom: 16, lineHeight: 1.4}}>
              Primero conectas tu RUT gratis. Activas Plus solo si quieres desbloquear la IA y cotizar.
            </div>
            <button className="btn btn-white" style={{width:'100%', justifyContent:'center'}} onClick={()=>go('signup')}>
              Empezar gratis
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { n:'Javiera Tapia', r:'Santiago', t:'En 2 minutos conecté mi RUT y vi todas mis pólizas. Ahora ahorro $240k al año.' },
    { n:'Matías Rojas', r:'Viña del Mar', t:'Le pregunté a la IA si cubría mi moto. Me explicó todo en lenguaje humano.' },
    { n:'Francisca León', r:'Concepción', t:'Tengo un seguro de vida del banco que no sabía que existía. Holai lo encuentra en segundos.' },
  ];
  return (
    <section style={{padding:'96px 0', background:'var(--bg-warm)'}}>
      <div className="container">
        <div style={{textAlign:'center', marginBottom: 56}}>
          <div className="eyebrow">Testimonios</div>
          <h2 className="display display-m" style={{margin:'16px 0 0'}}>75.000 chilenos ya <span className="grad-text">entienden</span>.</h2>
        </div>
        <div className="testimonials-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20}}>
          {items.map((x, i) => (
            <div key={i} className="card" style={{padding: 32}}>
              <div style={{display:'flex', gap: 2, marginBottom: 16, color:'var(--accent)'}}>
                {[0,0,0,0,0].map((_,j)=><I.sparkle key={j} size={14}/>)}
              </div>
              <p style={{fontSize: 20, lineHeight: 1.4, margin: 0, fontWeight: 500, letterSpacing:'-0.01em'}}>
                "{x.t}"
              </p>
              <div className="hstack" style={{marginTop: 24}}>
                <div style={{width: 40, height: 40, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', fontWeight: 700}}>
                  {x.n[0]}
                </div>
                <div>
                  <div style={{fontSize: 14, fontWeight: 700}}>{x.n}</div>
                  <div className="mono muted" style={{fontSize: 11}}>{x.r.toUpperCase()}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ go }) {
  return (
    <section style={{padding:'96px 0'}}>
      <div className="container">
        <div className="final-cta-inner" style={{background:'var(--accent)', color:'#fff', borderRadius:'var(--radius-l)', padding:'88px 48px', textAlign:'center', position:'relative', overflow:'hidden'}}>
          <h2 className="display display-l" style={{margin: 0, color:'#fff'}}>
            Tus seguros.<br/>
            <span style={{fontStyle:'italic', fontWeight: 400}}>Por fin claros.</span>
          </h2>
          <p style={{fontSize: 19, opacity: 0.92, maxWidth: 520, margin:'24px auto 0'}}>
            Conecta tu RUT en 30 segundos y ve todo lo que ya tienes contratado.
          </p>
          <div className="hstack" style={{justifyContent:'center', marginTop: 36}}>
            <button className="btn btn-white btn-lg" onClick={()=>go('signup')}>
              Empezar gratis <I.arrow size={18}/>
            </button>
          </div>
          <div style={{position:'absolute', right:-60, bottom:-60, width: 200, height: 200, borderRadius:'50%', background:'rgba(255,255,255,0.1)'}}/>
          <div style={{position:'absolute', left:-40, top:-40, width: 140, height: 140, borderRadius:'50%', background:'rgba(255,255,255,0.08)'}}/>
        </div>
      </div>
    </section>
  );
}

window.Landing = Landing;