const Landing = () => {
  const {go} = useApp();
  const line1 = ["Planes","de","vuelo,"];
  const line2 = ["sin","fricción."];
  return <div className="landing-hero" style={{minHeight:'100vh'}}>
    <div className="landing-grid"/>
    <div style={{position:'relative',zIndex:2,maxWidth:1100,margin:'0 auto',padding:'18px 24px 80px'}}>
      <header style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0 48px'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,fontWeight:600,fontSize:17,letterSpacing:'-.01em'}}><LogoMark size={26}/> AeroPlan</div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost btn-sm" onClick={()=>go('auth',{mode:'login'})}>Entrar</button>
          <button className="btn btn-primary btn-sm" onClick={()=>go('auth',{mode:'signup'})}>Empezar</button>
        </div>
      </header>

      <section style={{paddingTop:60,paddingBottom:80,maxWidth:880}}>
        <div className="chip chip-accent" style={{marginBottom:28}}>· Para pilotos en formación PPL/IFR</div>
        <h1 className="hero-display" style={{marginBottom:28}}>
          {line1.map((w,i)=><span key={i} className="word-rise" style={{animationDelay:`${0.08*i}s`}}>{w}</span>)}
          <br/>
          {line2.map((w,i)=>i===1?<span key={i} className="word-rise underline-swash" style={{animationDelay:`${0.08*(line1.length+i)}s`}}>{w}</span>:<span key={i} className="word-rise" style={{animationDelay:`${0.08*(line1.length+i)}s`}}>{w}</span>)}
        </h1>
        <p style={{fontSize:'clamp(17px,2vw,20px)',color:'var(--ink-dim)',maxWidth:620,lineHeight:1.55,marginBottom:36}}>
          Guarda tus rutas, pulsa enviar y despega. Ni tecleo de ICAOs a ciegas, ni formularios de ENAIRE a las seis de la mañana.
        </p>
        <div style={{display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
          <button className="btn btn-primary btn-lg" onClick={()=>go('auth',{mode:'signup'})}>Crear cuenta — gratis</button>
          <button className="btn btn-ghost btn-lg" onClick={()=>go('auth',{mode:'login'})}>Ya tengo cuenta</button>
          <span className="caption" style={{marginLeft:4}}>3 envíos gratis · sin tarjeta</span>
        </div>
      </section>

      {/* Features — minimal strokes */}
      <section style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:0,border:'1px solid var(--stroke)',borderRadius:'var(--radius)',background:'var(--bg-raised)',overflow:'hidden',marginTop:40}}>
        {[
          {i:'bolt',t:'Un click',d:'Plantillas tuyas. Envías en dos toques sin re-escribir nada.'},
          {i:'shield_check',t:'Credenciales cifradas',d:'Tu usuario ENAIRE va con AES-256. Ni nosotros lo leemos.'},
          {i:'layers',t:'Rutas IFR listas',d:'Las tablas de EF precargadas: eliges origen y destino, rellenamos el resto.'}
        ].map((f,i)=>(
          <div key={i} style={{padding:28,borderRight:i<2?'1px solid var(--stroke)':undefined,borderBottom:'1px solid var(--stroke)'}} className="slide-up" >
            <div style={{color:'var(--accent)',marginBottom:14}}><Icon name={f.i} size={22}/></div>
            <h3 className="h3" style={{marginBottom:6,fontSize:16}}>{f.t}</h3>
            <p style={{fontSize:14,color:'var(--ink-dim)',lineHeight:1.55,margin:0}}>{f.d}</p>
          </div>
        ))}
      </section>

      {/* Pricing — flat, serif amounts */}
      <section style={{marginTop:80}}>
        <div style={{textAlign:'center',marginBottom:40,maxWidth:600,margin:'0 auto 40px'}}>
          <h2 className="display" style={{fontSize:'clamp(32px,5vw,48px)',marginBottom:10}}>Simple, como debería.</h2>
          <p style={{color:'var(--ink-dim)',fontSize:15}}>Un precio. Ilimitado. Sin sorpresas.</p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:16,maxWidth:820,margin:'0 auto'}}>
          <div className="card" style={{padding:28}}>
            <div style={{fontSize:13,color:'var(--ink-dim)',marginBottom:4,fontWeight:500}}>Free</div>
            <div className="pricing-amount">0€<span style={{fontSize:14,color:'var(--ink-dim)',fontFamily:'var(--font)',fontWeight:500,marginLeft:4}}>/mes</span></div>
            <div className="hr" style={{margin:'20px 0'}}/>
            <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
              {['3 envíos al mes','Plantillas ilimitadas','Historial básico (30 días)'].map(x=><li key={x} style={{display:'flex',gap:10,fontSize:14,color:'var(--ink-2)'}}><Icon name="check" size={16} style={{color:'var(--ink-low)',flexShrink:0,marginTop:2}} stroke={2}/>{x}</li>)}
            </ul>
            <button className="btn btn-ghost" style={{width:'100%',marginTop:24}} onClick={()=>go('auth',{mode:'signup'})}>Empezar gratis</button>
          </div>
          <div className="card" style={{padding:28,borderColor:'var(--accent)',position:'relative'}}>
            <div className="chip chip-accent" style={{position:'absolute',top:-12,right:24}}>Recomendado</div>
            <div style={{fontSize:13,color:'var(--accent-ink)',marginBottom:4,fontWeight:600}}>Premium</div>
            <div className="pricing-amount">11,99€<span style={{fontSize:14,color:'var(--ink-dim)',fontFamily:'var(--font)',fontWeight:500,marginLeft:4}}>/mes</span></div>
            <div style={{fontSize:12,color:'var(--accent)',fontWeight:500,marginTop:2}}>7 días gratis · cancela cuando quieras</div>
            <div className="hr" style={{margin:'20px 0'}}/>
            <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10}}>
              {['Envíos ilimitados','Historial completo','Exportar PDF','Reenvío rápido con 1 toque','Soporte prioritario'].map(x=><li key={x} style={{display:'flex',gap:10,fontSize:14,color:'var(--ink-2)'}}><Icon name="check" size={16} style={{color:'var(--accent)',flexShrink:0,marginTop:2}} stroke={2}/>{x}</li>)}
            </ul>
            <button className="btn btn-accent" style={{width:'100%',marginTop:24}} onClick={()=>go('auth',{mode:'signup'})}>Probar 7 días gratis</button>
          </div>
        </div>
      </section>

      <footer style={{marginTop:80,paddingTop:28,borderTop:'1px solid var(--stroke)',textAlign:'center',fontSize:12,color:'var(--ink-low)'}}>
        AeroPlan · Proyecto independiente. No afiliado con ENAIRE ni European Flyers.
      </footer>
    </div>
  </div>;
};
window.Landing = Landing;