/* 01 Landing */

function Landing({ go }) {
  return (
    <div className="screen landing">
      {/* Top bar */}
      <header className="ld-top">
        <div className="ld-top-inner">
          <div className="sello">Cruce</div>
          <nav className="ld-nav">
            <a href="#stories" onClick={(e)=>{e.preventDefault(); go('stories');}}>Historias</a>
            <a href="#events" onClick={(e)=>{e.preventDefault(); go('events');}}>Eventos</a>
            <a href="#pricing">Membresía</a>
            <a href="#faq">Cómo funciona</a>
            <a href="/cruce/blog/">Blog</a>
          </nav>
          <div className="ld-top-cta">
            <button className="btn btn-ghost btn-sm" onClick={()=>go('signup')}>Entrar</button>
            <button className="btn btn-red btn-sm" onClick={()=>go('signup')}>Empezar <I.Arrow size={14}/></button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="ld-hero grain">
        <div className="ld-hero-inner">
          <div className="ld-hero-left">
            <div className="eyebrow"><span className="dot"></span>Matchmaking humano · Verificado con IA</div>
            <h1 className="ld-h1 serif">
              El match empieza en la calle.<br/>
              <em>Se sella con IA.</em>
            </h1>
            <p className="ld-hero-sub">
              Nada de scroll infinito ni fotos que mienten. En Cruce te presentamos a personas
              reales, verificadas, evaluadas por afinidad — sin que compartas tu teléfono jamás.
            </p>

            <div className="ld-hero-cta">
              <button className="btn btn-red btn-lg" onClick={()=>go('signup')}>
                Crear mi perfil <I.Arrow size={16}/>
              </button>
              <button className="btn btn-ghost btn-lg" onClick={()=>go('stories')}>
                <I.Play size={13}/> Ver historias reales
              </button>
            </div>

            <div className="ld-hero-proof">
              <div className="ld-proof-stack">
                {['lucia','mateo','carmen','nerea','diego'].map((k,i) => (
                  <div key={k} className="ld-proof-face" style={{zIndex: 10-i}}>
                    <Portrait id={k} size="xs" showTag={false}/>
                  </div>
                ))}
              </div>
              <div>
                <div className="mono" style={{fontSize:12, color:'var(--ink-2)', fontWeight:500}}>
                  1.284 matches esta semana
                </div>
                <div style={{fontSize:12, color:'var(--ink-3)'}}>
                  Madrid · Barcelona · Valencia · Sevilla · Bilbao
                </div>
              </div>
            </div>
          </div>

          <div className="ld-hero-right">
            <ShortsCard/>
          </div>
        </div>

        <div className="ld-hero-strip">
          <div className="strip-item"><I.Shield size={14}/> Verificación con selfie</div>
          <div className="strip-item"><I.Lock size={14}/> Sin compartir teléfono</div>
          <div className="strip-item"><I.Sparkles size={14}/> Test de afinidad con IA</div>
          <div className="strip-item"><I.Check size={14}/> Cumple RGPD</div>
          <div className="strip-item"><I.Star size={14}/> 4,8 · 2.140 reseñas</div>
        </div>
      </section>

      {/* Cómo funciona */}
      <section className="ld-how" id="faq">
        <div className="ld-section-head">
          <div className="eyebrow"><span className="dot"></span>Cómo funciona</div>
          <h2 className="serif ld-h2">Cuatro pasos. Cero postureo.</h2>
        </div>
        <div className="ld-how-grid">
          {[
            { n: '01', t: 'Te ve el equipo de calle', d: 'Nuestros scouts te descubren en un festival, en un evento, o llegas por un YouTube Short. Sin apps. Sin filtros. Cara a cara.', ico: <I.Users size={20}/> },
            { n: '02', t: 'Verificas quién eres', d: 'Selfie con prueba de vida, DNI validado y consentimientos explícitos (RGPD). Sin catfish. Sin bots.', ico: <I.Shield size={20}/> },
            { n: '03', t: 'IA lee tu afinidad', d: '12 preguntas breves + análisis de valores. Firmas consentimiento para procesar datos con IA. Cambias de opinión, borramos todo.', ico: <I.Sparkles size={20}/> },
            { n: '04', t: 'Conoces gente real', d: 'Muro con tus mejores matches. Chat y videollamada privados dentro de Cruce. Tu número nunca sale de aquí.', ico: <I.Heart size={20}/> },
          ].map(x => (
            <div key={x.n} className="ld-how-card">
              <div className="ld-how-num mono">{x.n}</div>
              <div className="ld-how-ico">{x.ico}</div>
              <h3 className="serif" style={{fontSize:26, marginTop:16, marginBottom:8}}>{x.t}</h3>
              <p style={{color:'var(--ink-3)', fontSize:14, lineHeight:1.6}}>{x.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Manifiesto */}
      <section className="ld-manifesto grain">
        <div className="ld-manifesto-inner">
          <div className="eyebrow" style={{color:'rgba(244,239,231,.7)'}}><span className="dot"></span>Manifiesto</div>
          <h2 className="serif" style={{fontSize:'clamp(38px, 6vw, 72px)', lineHeight:1.05, marginTop:20, marginBottom:32}}>
            Estamos hartos de <em>swipear</em>.<br/>
            De perfiles falsos, de <em>ghosting</em>,<br/>
            de dar el teléfono a extraños.
          </h2>
          <p style={{fontSize:20, maxWidth:720, lineHeight:1.55, color:'rgba(244,239,231,.75)'}}>
            Cruce es lo contrario a una app de citas.<br/>
            Un club privado donde la afinidad se mide, la identidad se verifica,
            y la conversación pasa dentro. Presencial primero. Digital después.
          </p>
        </div>
      </section>

      {/* Historias breves */}
      <section className="ld-stories" id="stories">
        <div className="ld-section-head">
          <div className="eyebrow"><span className="dot"></span>Historias verificadas</div>
          <h2 className="serif ld-h2">Se cruzaron en Cruce.</h2>
          <p className="ld-section-sub">Parejas reales, con nombre y apellidos, que dieron el sí a contarlo.</p>
        </div>
        <div className="ld-stories-grid">
          {[
            { a:'lucia', b:'mateo', title:'"Nos escaneó una IA. Nos casó Madrid."', names:'Lucía & Mateo · 8 meses', city:'Madrid' },
            { a:'carmen', b:'javier', title:'"Yo no creía. Él, tampoco."', names:'Carmen & Javier · 1 año', city:'Sevilla' },
            { a:'nerea', b:'diego', title:'"Cruzamos miradas en el Sónar."', names:'Nerea & Diego · 4 meses', city:'Barcelona' },
          ].map((s,i) => (
            <article key={i} className="ld-story-card">
              <div className="ld-story-imgs">
                <Portrait id={s.a} size="md" showTag={false} className="ld-story-a"/>
                <Portrait id={s.b} size="md" showTag={false} className="ld-story-b"/>
                <div className="ld-story-cruce serif">×</div>
              </div>
              <div className="ld-story-body">
                <div className="verified"><I.Check size={12}/> Historia verificada</div>
                <h3 className="serif" style={{fontSize:24, marginTop:8, lineHeight:1.2}}>{s.title}</h3>
                <div style={{fontSize:13, color:'var(--ink-3)', marginTop:6}}>{s.names} · {s.city}</div>
              </div>
            </article>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:40}}>
          <button className="btn btn-outline" onClick={()=>go('stories')}>
            Ver todas las historias <I.Arrow size={14}/>
          </button>
        </div>
      </section>

      {/* Pricing */}
      <section className="ld-pricing" id="pricing">
        <div className="ld-section-head">
          <div className="eyebrow"><span className="dot"></span>Membresía</div>
          <h2 className="serif ld-h2">Sin ella, no hay chat.<br/>Con ella, no hay excusas.</h2>
          <p className="ld-section-sub">Cobrar filtra. Verificar protege. Tú decides cuánto compromiso quieres.</p>
        </div>
        <PricingCards go={go}/>
        <div className="ld-guarantee">
          <I.Shield size={18}/>
          <div>
            <strong>Garantía 30 días.</strong> Si no consigues al menos <strong>3 matches con &gt;80% de afinidad</strong>, te devolvemos el 100%. Sin preguntas.
          </div>
        </div>
      </section>

      {/* CTA final */}
      <section className="ld-cta-final">
        <div className="ld-cta-inner">
          <h2 className="serif" style={{fontSize:'clamp(40px, 6vw, 80px)', lineHeight:1.02}}>
            ¿Te cruzas?
          </h2>
          <p style={{fontSize:18, color:'var(--ink-3)', maxWidth:520, margin:'20px auto 32px'}}>
            Regístrate en 90 segundos. La verificación es gratis. La membresía la eliges tú.
          </p>
          <button className="btn btn-red btn-lg" onClick={()=>go('signup')}>
            Empezar ahora <I.Arrow size={16}/>
          </button>
          <div style={{marginTop:16, fontSize:12, color:'var(--ink-4)'}}>
            +18 · Cumple RGPD · Servicio operado desde España
          </div>
        </div>
      </section>

      <Footer/>
    </div>
  );
}

function ShortsCard() {
  const [playing, setPlaying] = useState(true);
  return (
    <div className="ld-shorts">
      <div className="ld-shorts-frame">
        <div className="ld-shorts-video">
          <Portrait id="lucia" showTag={false} className="ld-shorts-portrait"/>
          <div className="ld-shorts-overlay">
            <div className="ld-shorts-top">
              <div className="ld-shorts-live"><span className="dot"/> DIRECTO · SÓNAR BCN</div>
              <div className="mono" style={{fontSize:11, color:'white', opacity:.8}}>0:42 / 1:12</div>
            </div>
            <div className="ld-shorts-bottom">
              <div style={{color:'white', fontFamily:'var(--serif)', fontSize:28, lineHeight:1.05}}>
                "¿Sales conmigo si la<br/>IA dice que somos<br/><em>93% compatibles</em>?"
              </div>
              <div className="ld-shorts-tag mono">@cruce · Ep. 24 · 2.4M views</div>
            </div>
            <button className="ld-shorts-play" onClick={()=>setPlaying(p=>!p)}>
              {playing ? <I.Play size={22}/> : <I.Play size={22}/>}
            </button>
          </div>
        </div>
        <div className="ld-shorts-controls">
          <div className="ld-shorts-side">
            <div className="ld-shorts-btn"><I.Heart size={18}/><span>124K</span></div>
            <div className="ld-shorts-btn"><I.Message size={18}/><span>3.1K</span></div>
            <div className="ld-shorts-btn"><I.Send size={18}/><span>28K</span></div>
          </div>
        </div>
      </div>
      <div className="ld-shorts-cap">
        <I.YouTube size={16}/>
        <span>Nos ves en YouTube Shorts. Vives la historia en Cruce.</span>
      </div>
    </div>
  );
}

function PricingCards({ go }) {
  const plans = [
    {
      id:'free', name:'Cruce Free', price:'0€', per:'/ para siempre',
      desc:'Regístrate, verifica y descubre tus matches. Sin chat.',
      features:['Perfil verificado', 'Test de afinidad con IA', 'Ver hasta 5 matches al mes', 'Alertas de eventos'],
      cta:'Empezar gratis', variant:'ghost',
    },
    {
      id:'club', name:'Cruce Club', price:'29€', per:'/ mes',
      desc:'La membresía que activa todo. Cancela cuando quieras.',
      features:['Todo lo de Free', 'Chat interno cifrado', 'Videollamada dentro de la app', 'Matches ilimitados', 'Prioridad en eventos'],
      cta:'Elegir Club', variant:'red', featured:true,
      badge:'Más elegido',
    },
    {
      id:'signature', name:'Cruce Signature', price:'149€', per:'/ trimestre',
      desc:'Para quienes van en serio. Con asesor humano.',
      features:['Todo lo de Club', 'Asesor personal Cruce', 'Presentaciones curadas 1:1', 'Acceso a eventos VIP', 'Perfil destacado en muro'],
      cta:'Solicitar Signature', variant:'outline',
    },
  ];

  return (
    <div className="ld-pricing-grid">
      {plans.map(p => (
        <div key={p.id} className={"pricing-card " + (p.featured ? 'featured' : '')}>
          {p.badge && <div className="pricing-badge">{p.badge}</div>}
          <div className="pricing-head">
            <h3 className="serif" style={{fontSize:28}}>{p.name}</h3>
            <p style={{fontSize:13, color:'var(--ink-3)', marginTop:6}}>{p.desc}</p>
          </div>
          <div className="pricing-price">
            <span className="serif" style={{fontSize:56, letterSpacing:'-0.03em'}}>{p.price}</span>
            <span style={{fontSize:14, color:'var(--ink-3)', marginLeft:6}}>{p.per}</span>
          </div>
          <ul className="pricing-features">
            {p.features.map(f => (
              <li key={f}><I.Check size={14}/> {f}</li>
            ))}
          </ul>
          <button
            className={"btn " + (p.variant === 'red' ? 'btn-red' : p.variant === 'outline' ? 'btn-outline' : 'btn-primary')}
            style={{width:'100%'}}
            onClick={() => p.id === 'free' ? go('signup') : go('checkout')}>
            {p.cta} <I.Arrow size={14}/>
          </button>
        </div>
      ))}
    </div>
  );
}

function Footer() {
  return (
    <footer className="ld-footer">
      <div className="ld-footer-inner">
        <div>
          <div className="sello" style={{color:'var(--paper)'}}>Cruce</div>
          <p style={{marginTop:16, color:'rgba(244,239,231,.6)', fontSize:13, maxWidth:340}}>
            Matchmaking premium con IA. Operado desde Madrid.<br/>
            Cumple RGPD · Uso responsable de IA (Reglamento UE 2024/1689).
          </p>
        </div>
        <div className="ld-footer-cols">
          <div>
            <div className="ld-foot-title">Producto</div>
            <a>Cómo funciona</a>
            <a>Membresías</a>
            <a>Eventos</a>
            <a>Historias</a>
          </div>
          <div>
            <div className="ld-foot-title">Legal</div>
            <a>Términos</a>
            <a>Privacidad</a>
            <a>Uso de IA</a>
            <a>Cookies</a>
          </div>
          <div>
            <div className="ld-foot-title">Síguenos</div>
            <a><I.YouTube size={14}/> YouTube</a>
            <a><I.Instagram size={14}/> Instagram</a>
            <a>TikTok</a>
          </div>
        </div>
      </div>
      <div className="ld-footer-bottom">
        <span className="mono">© 2026 CRUCE MATCHMAKING S.L. · CIF B-88888888 · MADRID</span>
        <span className="mono">HECHO EN ESPAÑA · CON CABEZA Y CORAZÓN</span>
      </div>
    </footer>
  );
}

window.Landing = Landing;