/* 08 Eventos + 09 Historias + 10 Mi perfil */

const EVENTS = [
  {
    id:'e1', title:'Cruce · Sónar Barcelona',
    kind:'Festival', city:'Barcelona',
    date:'14 · JUN',
    when:'Sáb 14 junio · 20:00 → 03:00',
    venue:'Recinto Fira Gran Vía',
    price:'Miembros Club: 45€ · Signature: gratis',
    spots:'12 plazas libres',
    hot: true,
    accent: 'r',
    desc:'Nuestro punto de encuentro más viral del año. Zona Cruce privada, DJ set y presentaciones con IA en directo.',
    tags:['Techno','Zona VIP','21+']
  },
  {
    id:'e2', title:'Vermut & Match · Madrid',
    kind:'Cita en grupo', city:'Madrid',
    date:'22 · MAY',
    when:'Sáb 22 mayo · 13:00 → 16:00',
    venue:'Terraza Círculo de Bellas Artes',
    price:'Miembros Club: 25€',
    spots:'8 plazas libres',
    accent: 'g',
    desc:'6 chicas + 6 chicos con >85% de afinidad entre sí. Vermut, tapas y una tarde larga para ver qué pasa.',
    tags:['Grupo pequeño','Curado por Cruce']
  },
  {
    id:'e3', title:'Cena a ciegas · Sevilla',
    kind:'Cita 1:1', city:'Sevilla',
    date:'05 · JUN',
    when:'Jue 5 junio · 21:30',
    venue:'Ubicación revelada 24h antes',
    price:'Signature: incluido',
    spots:'Sólo Signature',
    accent: 'gold',
    desc:'Te presentamos a una persona. Sin fotos previas. Reserva restaurante nuestra. El resto lo escribís vosotros.',
    tags:['1:1','Exclusivo Signature']
  },
  {
    id:'e4', title:'Cruce en Primavera Sound',
    kind:'Festival', city:'Barcelona',
    date:'30 · MAY',
    when:'Vie–Dom · 30 mayo → 1 junio',
    venue:'Parc del Fòrum',
    price:'Miembros Club: 60€ activación',
    spots:'34 plazas libres',
    accent: 'r',
    desc:'Rutas guiadas para encontraros dentro del festival. Punto de encuentro Cruce, pulseras IR-friendly, staff a tu disposición.',
    tags:['Festival','3 días','Grupo grande']
  },
];

function Events({ go }) {
  const [city, setCity] = useState('Todas');
  const [selected, setSelected] = useState(null);
  const list = city === 'Todas' ? EVENTS : EVENTS.filter(e => e.city === city);

  return (
    <div className="events-page">
      <AppTopBar current="events" go={go}/>
      <div className="events-header">
        <div className="eyebrow"><span className="dot"></span>Zona de eventos · presenciales</div>
        <h1 className="serif" style={{fontSize:'clamp(38px, 5vw, 60px)', lineHeight:1.02, letterSpacing:'-0.02em', marginTop:12}}>
          Cara a cara. <em style={{color:'var(--red)'}}>Como en la calle.</em>
        </h1>
        <p style={{color:'var(--ink-3)', marginTop:14, fontSize:16, maxWidth:620, lineHeight:1.5}}>
          Cruce nace en la calle y vuelve a ella. Cenas, vermuts, festivales curados con IA — para reencontraros donde
          empezó todo. Aforo limitado, siempre.
        </p>
      </div>

      <div className="events-filters">
        {['Todas','Madrid','Barcelona','Sevilla','Valencia','Bilbao'].map(c => (
          <button key={c} className={"chip-btn " + (city === c ? 'active' : '')} onClick={()=>setCity(c)}>{c}</button>
        ))}
      </div>

      <div className="events-featured">
        <FeaturedEvent event={EVENTS[0]} onOpen={()=>setSelected(EVENTS[0])}/>
      </div>

      <div className="events-grid">
        {list.slice(1).map(e => (
          <EventCard key={e.id} event={e} onOpen={()=>setSelected(e)}/>
        ))}
      </div>

      {selected && <EventModal event={selected} onClose={()=>setSelected(null)}/>}
    </div>
  );
}

function FeaturedEvent({ event, onOpen }) {
  return (
    <article className="event-feat" onClick={onOpen}>
      <div className="event-feat-bg">
        <div className="event-feat-gradient"/>
        <div className="event-feat-portraits">
          {['lucia','mateo','carmen','diego','nerea'].map((k,i) => (
            <div key={k} className="event-feat-portrait" style={{animationDelay: `${i*0.15}s`}}>
              <Portrait id={k} size="sm" showTag={false}/>
            </div>
          ))}
        </div>
      </div>
      <div className="event-feat-body">
        <div className="event-date">{event.date}</div>
        <div style={{marginTop:20}}>
          <div className="chip red">{event.kind}</div>
          {event.hot && <span className="chip red" style={{marginLeft:6}}><I.Fire size={11}/> Hot</span>}
        </div>
        <h2 className="serif" style={{fontSize:'clamp(38px, 4.5vw, 58px)', lineHeight:1.02, letterSpacing:'-0.02em', marginTop:16, color:'white'}}>{event.title}</h2>
        <p style={{fontSize:15, marginTop:14, maxWidth:520, color:'rgba(244,239,231,.75)', lineHeight:1.55}}>{event.desc}</p>
        <div className="event-feat-meta">
          <div><I.Calendar size={13}/> {event.when}</div>
          <div><I.MapPin size={13}/> {event.venue}</div>
          <div><I.Users size={13}/> {event.spots}</div>
        </div>
        <button className="btn btn-red" style={{marginTop:24}}>
          Reservar plaza <I.Arrow size={14}/>
        </button>
      </div>
    </article>
  );
}

function EventCard({ event, onOpen }) {
  const accent = event.accent === 'r' ? 'var(--red)' : event.accent === 'g' ? 'var(--sage)' : 'var(--gold)';
  return (
    <article className="event-card" onClick={onOpen}>
      <div className="event-card-top" style={{background: `linear-gradient(135deg, ${accent}20, ${accent}05)`}}>
        <div className="event-date-lg" style={{color: accent}}>{event.date}</div>
        <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap:6}}>
          <div className="chip" style={{background:'white', borderColor:'var(--line)', color: 'var(--ink)'}}>{event.kind}</div>
          <span className="mono" style={{fontSize:10, color:'var(--ink-3)'}}>{event.city.toUpperCase()}</span>
        </div>
      </div>
      <div className="event-card-body">
        <h3 className="serif" style={{fontSize:24, lineHeight:1.15, letterSpacing:'-0.01em'}}>{event.title}</h3>
        <p style={{fontSize:13, color:'var(--ink-3)', marginTop:8, lineHeight:1.5}}>{event.desc}</p>
        <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:14, paddingTop:14, borderTop:'1px solid var(--line)', fontSize:12, color:'var(--ink-3)'}}>
          <div><I.MapPin size={11}/> {event.venue}</div>
          <div><I.Calendar size={11}/> {event.when}</div>
          <div><I.Wallet size={11}/> {event.price}</div>
        </div>
        <div style={{marginTop:16, display:'flex', gap:6, flexWrap:'wrap'}}>
          {event.tags.map(t => <span key={t} className="chip" style={{fontSize:10}}>{t}</span>)}
        </div>
      </div>
    </article>
  );
}

function EventModal({ event, onClose }) {
  return (
    <div className="event-modal-bg" onClick={onClose}>
      <div className="event-modal" onClick={e=>e.stopPropagation()}>
        <button className="event-modal-close" onClick={onClose}><I.X size={16}/></button>
        <div className="event-modal-head">
          <div className="event-date-lg" style={{color: 'var(--red)'}}>{event.date}</div>
          <div>
            <div className="chip red">{event.kind}</div>
            <h2 className="serif" style={{fontSize:36, lineHeight:1.05, marginTop:10, letterSpacing:'-0.02em'}}>{event.title}</h2>
          </div>
        </div>
        <div className="event-modal-body">
          <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.55}}>{event.desc}</p>
          <div className="event-modal-meta">
            <Meta ico={<I.Calendar size={14}/>} label="Cuándo" value={event.when}/>
            <Meta ico={<I.MapPin size={14}/>} label="Dónde" value={event.venue}/>
            <Meta ico={<I.Wallet size={14}/>} label="Precio" value={event.price}/>
            <Meta ico={<I.Users size={14}/>} label="Aforo" value={event.spots}/>
          </div>
          <div className="event-modal-attend">
            <div className="mono" style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)'}}>MATCHES CONFIRMADOS</div>
            <div style={{display:'flex', marginTop:10, alignItems:'center', gap:14}}>
              <div className="ld-proof-stack">
                {['lucia','mateo','nerea','diego','javier','carmen'].map((k,i) => (
                  <div key={k} className="ld-proof-face" style={{zIndex: 10-i}}>
                    <Portrait id={k} size="xs" showTag={false}/>
                  </div>
                ))}
              </div>
              <div style={{fontSize:13, color:'var(--ink-3)'}}>+18 personas irán · 8 con &gt;85% afinidad contigo</div>
            </div>
          </div>
          <button className="btn btn-red btn-lg" style={{width:'100%', marginTop:20}}>
            Reservar plaza · {event.price.split(':')[1] || ''} <I.Arrow size={14}/>
          </button>
        </div>
      </div>
    </div>
  );
}
function Meta({ico, label, value}) {
  return (
    <div className="event-meta-row">
      <div className="event-meta-ico">{ico}</div>
      <div>
        <div style={{fontSize:10, letterSpacing:'.1em', color:'var(--ink-4)', fontFamily:'var(--mono)'}}>{label.toUpperCase()}</div>
        <div style={{fontSize:14, color:'var(--ink)', marginTop:2}}>{value}</div>
      </div>
    </div>
  );
}

/* ============ STORIES ============ */
const STORIES = [
  {a:'lucia', b:'mateo', title:'"Nos escaneó una IA. Nos casó Madrid."', names:'Lucía & Mateo', tagline:'8 meses juntos · viven en Chamberí', city:'Madrid',
   quote:'Al 3er café ya sabía. Al 5º, se lo dije. Un año más tarde, entré a un piso que ya era nuestro. Y todo empezó porque una cámara nos paró en la Gran Vía.',
   video:'CRUCE · EP 24', duration:'2:14'},
  {a:'carmen', b:'javier', title:'"Yo no creía. Él, tampoco."', names:'Carmen & Javier', tagline:'1 año · a caballo Sevilla ↔ Barcelona', city:'Sevilla',
   quote:'Ambos veníamos de rupturas duras. Cruce nos emparejó con 84%. Ninguno le dio importancia. Hasta que, dos meses después, cogimos un AVE y ya no lo dejamos.',
   video:'CRUCE · EP 18', duration:'1:56'},
  {a:'nerea', b:'diego', title:'"Cruzamos miradas en el Sónar."', names:'Nerea & Diego', tagline:'4 meses · comparten piso en Poblenou', city:'Barcelona',
   quote:'Yo iba con amigas. Él, en el DJ set. Nos escanearon en la puerta y nos apuntamos a la zona Cruce. A la tercera canción, ya era tarde para no enamorarme.',
   video:'CRUCE · EP 31', duration:'1:42'},
  {a:'alba', b:'pablo', title:'"Un debate sobre el amor de dos horas."', names:'Alba & Pablo', tagline:'6 meses · Valencia', city:'Valencia',
   quote:'Discutimos sobre Barthes durante toda la primera cita. Salimos peleados. Nos llamamos al día siguiente. Nunca hemos vuelto a estar solos desde entonces.',
   video:'CRUCE · EP 12', duration:'2:31'},
];

function Stories({ go }) {
  const [active, setActive] = useState(0);
  const s = STORIES[active];
  return (
    <div className="stories-page">
      <div className="stories-top">
        <button className="btn btn-ghost btn-sm" onClick={()=>go('landing')}><I.ArrowLeft size={14}/> Inicio</button>
        <div className="sello" style={{fontSize:22}}>Cruce</div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>HISTORIAS · {String(active+1).padStart(2,'0')} / {String(STORIES.length).padStart(2,'0')}</div>
      </div>

      <div className="stories-hero">
        <div className="stories-hero-left">
          <div className="eyebrow"><span className="dot"></span>Historia verificada</div>
          <h1 className="serif" style={{fontSize:'clamp(44px, 6vw, 78px)', lineHeight:1, letterSpacing:'-0.02em', marginTop:20, marginBottom:24}}>
            {s.title.split('.')[0]}.
          </h1>
          <p className="serif" style={{fontSize:22, color:'var(--ink-3)', lineHeight:1.5, maxWidth:520, fontStyle:'italic'}}>
            "{s.quote}"
          </p>
          <div style={{marginTop:24}}>
            <div className="verified"><I.Check size={12}/> Testimonio validado</div>
            <div className="serif" style={{fontSize:22, marginTop:10}}>{s.names}</div>
            <div style={{fontSize:13, color:'var(--ink-3)'}}>{s.tagline}</div>
          </div>
        </div>
        <div className="stories-hero-right">
          <div className="stories-video">
            <div style={{position:'absolute', inset:0, display:'grid', gridTemplateColumns:'1fr 1fr'}}>
              <Portrait id={s.a} size="lg" showTag={false} style={{borderRadius:0, height:'100%'}}/>
              <Portrait id={s.b} size="lg" showTag={false} style={{borderRadius:0, height:'100%'}}/>
            </div>
            <div className="stories-video-cross serif">×</div>
            <div className="stories-video-overlay">
              <div className="stories-video-tag mono">{s.video} · {s.duration}</div>
              <button className="stories-video-play"><I.Play size={22}/></button>
              <div className="stories-video-meta">
                <I.YouTube size={14}/> <span>Vídeo original en YouTube Shorts</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="stories-grid-title">
        <div className="eyebrow"><span className="dot"></span>Y muchas más</div>
        <h2 className="serif" style={{fontSize:36, lineHeight:1.05, marginTop:12}}>Más historias reales que se cruzaron.</h2>
      </div>

      <div className="stories-grid">
        {STORIES.map((s, i) => (
          <button key={i} className={"story-grid-card " + (i === active ? 'active' : '')} onClick={()=>setActive(i)}>
            <div className="story-grid-imgs">
              <Portrait id={s.a} size="xs" showTag={false} style={{borderRadius:0, height:'100%'}}/>
              <Portrait id={s.b} size="xs" showTag={false} style={{borderRadius:0, height:'100%'}}/>
              <div className="story-grid-cross serif">×</div>
            </div>
            <div className="story-grid-body">
              <div className="verified" style={{fontSize:10}}><I.Check size={10}/> Verificada</div>
              <div className="serif" style={{fontSize:16, marginTop:6, lineHeight:1.2}}>{s.title}</div>
              <div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>{s.names} · {s.city}</div>
            </div>
          </button>
        ))}
      </div>

      <div className="stories-cta">
        <h3 className="serif" style={{fontSize:'clamp(36px, 5vw, 56px)', lineHeight:1.05}}>¿Y la tuya?</h3>
        <p style={{color:'var(--ink-3)', marginTop:12, maxWidth:480, marginInline:'auto'}}>
          Empezar es gratis. Verificarse tarda 90 segundos. El match puede tardar menos.
        </p>
        <button className="btn btn-red btn-lg" style={{marginTop:24}} onClick={()=>go('signup')}>
          Empezar ahora <I.Arrow size={14}/>
        </button>
      </div>
    </div>
  );
}

/* ============ MI PERFIL ============ */
function Me({ go }) {
  // Fase 1b: sesión real + derechos RGPD funcionando
  const [session, setSession] = useState(() => (window.CruceAPI && window.CruceAPI.Session.get()) || null);
  const [msg, setMsg] = useState('');
  const user = session && session.user;

  async function exportData() {
    setMsg('Preparando tu archivo…');
    try {
      const data = await window.CruceAPI.gdprExport();
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'cruce-mis-datos.json';
      a.click();
      setMsg('Descargado. Revisa tu carpeta de descargas.');
    } catch (e) { setMsg(e.message || 'Error al exportar.'); }
  }

  async function deleteAccount() {
    if (!window.CruceAPI) return;
    const ok = window.confirm('¿Eliminar tu cuenta de forma permanente? Esta acción no se puede deshacer. Se anonimizarán tus datos en 72 h.');
    if (!ok) return;
    try {
      await window.CruceAPI.gdprDelete();
      window.CruceAPI.Session.clear();
      setSession(null);
      setMsg('Cuenta eliminada. Gracias por haber estado.');
      setTimeout(()=>go('landing'), 1200);
    } catch (e) { setMsg(e.message || 'Error al eliminar.'); }
  }

  function logout() {
    window.CruceAPI.Session.clear();
    setSession(null);
    go('landing');
  }

  return (
    <div className="me-page">
      <AppTopBar current="me" go={go}/>
      <div className="me-header">
        <div className="me-cover"/>
        <div className="me-header-inner">
          <div className="me-avatar">
            <Portrait id="alba" size="lg" showTag={false}/>
            <button className="me-avatar-edit"><I.Camera size={14}/></button>
          </div>
          <div style={{flex:1}}>
            <div style={{display:'flex', alignItems:'center', gap:12, flexWrap:'wrap'}}>
              <h1 className="serif" style={{fontSize:42, letterSpacing:'-0.02em'}}>Alba, 30</h1>
              <div className="verified"><I.Check size={12}/> Perfil verificado</div>
              <div className="chip gold">Cruce Club</div>
            </div>
            <div className="profile-meta" style={{marginTop:6}}>
              <span><I.MapPin size={13}/> Valencia</span>
              <span>·</span>
              <span>Bióloga marina</span>
              <span>·</span>
              <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>ID: CR-ALBA-2026</span>
            </div>
          </div>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-outline btn-sm"><I.Settings size={14}/> Ajustes</button>
            <button className="btn btn-primary btn-sm">Editar perfil</button>
          </div>
        </div>
      </div>

      <div className="me-grid">
        <div className="me-col">
          <div className="me-card">
            <div className="me-card-title">
              <span>Mi cuenta</span>
              {user
                ? <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>{user.email}</span>
                : <a style={{fontSize:12, color:'var(--red)', textDecoration:'underline', cursor:'pointer'}} onClick={()=>go('signup')}>Entrar</a>}
            </div>
            {user ? (
              <div style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.6}}>
                {user.name}{user.age ? ', ' + user.age : ''}{user.city ? ' · ' + user.city : ''}
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>
                  Miembro desde {user.created_at ? new Date(user.created_at).toLocaleDateString('es-ES') : '—'} · Plan {user.plan || 'free'}
                </div>
                <button className="btn btn-ghost btn-sm" style={{marginTop:10}} onClick={logout}>Cerrar sesión</button>
              </div>
            ) : (
              <div style={{fontSize:13, color:'var(--ink-3)', lineHeight:1.6}}>
                Esta demo muestra un perfil de ejemplo. Entra con tu cuenta para ver tus datos reales,
                exportarlos o eliminarlos (RGPD).
              </div>
            )}
          </div>

          <div className="me-card">
            <div className="me-card-title">
              <span>Membresía</span>
              <span className="chip gold">Cruce Club · activa</span>
            </div>
            <div className="me-membership">
              <div>
                <div className="serif" style={{fontSize:32}}>29€ / mes</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>Se renueva el 12 · sept · 2026</div>
              </div>
              <button className="btn btn-outline btn-sm">Cambiar plan</button>
            </div>
            <div className="me-benefits">
              {['Chat cifrado','Videollamada','Matches ilimitados','Prioridad en eventos'].map(f => (
                <div key={f} className="me-benefit"><I.Check size={12}/> {f}</div>
              ))}
            </div>
          </div>

          <div className="me-card">
            <div className="me-card-title">
              <span>Test de afinidad</span>
              <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>Actualizado hace 12 días</span>
            </div>
            <div className="me-affinity">
              <div className="me-aff-num serif">83<span>%</span></div>
              <div>
                <div style={{fontSize:14, color:'var(--ink-2)'}}>Perfil completo al 83%.</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>Añade 2 respuestas más para mejorar tus matches.</div>
                <button className="btn btn-red btn-sm" style={{marginTop:12}} onClick={()=>go('affinity')}>Continuar test</button>
              </div>
            </div>
          </div>
        </div>

        <div className="me-col">
          <div className="me-card">
            <div className="me-card-title">Privacidad e IA</div>
            <div className="me-privacy">
              {[
                {t:'Uso de IA en test de afinidad', v:true, d:'Necesario para calcular matches.'},
                {t:'Compartir mi %  con otros usuarios', v:true, d:'Ellos ven tu score de afinidad.'},
                {t:'Aparecer en muros de otros', v:true, d:'Puedes ocultarte 7 días.'},
                {t:'Recibir invitaciones a eventos', v:true, d:'Solo eventos de tu ciudad.'},
              ].map((r,i) => (
                <div key={i} className="me-priv-row">
                  <div>
                    <div style={{fontSize:14, fontWeight:500}}>{r.t}</div>
                    <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{r.d}</div>
                  </div>
                  <div className={"toggle " + (r.v ? 'on':'')}><div/></div>
                </div>
              ))}
            </div>
            <div className="me-priv-danger">
              <div>
                <div style={{fontSize:14, fontWeight:500}}>Descargar mis datos</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>Todo lo que tenemos de ti, en JSON (Art. 20 RGPD).</div>
              </div>
              <button className="btn btn-ghost btn-sm" disabled={!user} style={{opacity:user?1:.4}}
                onClick={exportData}>Solicitar</button>
            </div>
            <div className="me-priv-danger">
              <div>
                <div style={{fontSize:14, fontWeight:500, color:'var(--red-2)'}}>Eliminar mi cuenta</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>Anonimización permanente en 72h (Art. 17 RGPD).</div>
              </div>
              <button className="btn btn-ghost btn-sm" style={{color:'var(--red)'}} disabled={!user} onClick={deleteAccount}>Eliminar</button>
            </div>
            {msg && <div style={{fontSize:12, color:'var(--ink-3)', marginTop:10}}>{msg}</div>}
            <div style={{fontSize:11, color:'var(--ink-4)', marginTop:10, lineHeight:1.5}}>
              Cruce no comparte tus datos con terceros con fines comerciales. Ver{' '}
              <a href="legal.html#privacidad" target="_blank" style={{textDecoration:'underline'}}>Política de Privacidad</a>.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Events = Events;
window.Stories = Stories;
window.Me = Me;