/* Components part 2: BlogSection, Lore, Shop, Support, Footer */

const { useState: useState2, useEffect: useEffect2 } = React;

// ── featured (latest YouTube video) ─────────────────────────────────
function Featured() {
  const [playing, setPlaying] = useState2(false);
  const [channel, setChannel] = useState2('tcg');

  //ID to Video
  const videos = {
    tcg: {
      id: 'k1A8ABvWPm8',
      duration: '9:33',
      title: '¿El peso importa? Esta ETB me confundió 🤯 - Ascended Heroes Pokemon TCG',
      desc: 'Después de lo que pasó en el video anterior, decidí poner a prueba más ETBs… pero esta vez los resultados no fueron lo que esperaba 😅',
      channelUrl: 'https://youtube.com/@DeinVTuberTCG',
    },
    gaming: {
      id: 'OGeKlsj-fAY',
      duration: '18:42',
      title: 'Jugamos Minecraft con muchos Vtubers',
      desc: 'Hoy abrimos la última booster box de Perfect Order… y no te voy a mentir, la suerte estuvo de nuestro lado 👀🔥',
      channelUrl: 'https://youtube.com/@DeinVTuber',
    },
  };

  const v = videos[channel];

  useEffect2(() => {
    function handleChannel(e) {
      setChannel(e.detail);
      setPlaying(false);
    }
    window.addEventListener('dein:channel', handleChannel);
    return () => window.removeEventListener('dein:channel', handleChannel);
  }, []);

  function switchChannel(ch) {
    if (ch === channel) return;
    setChannel(ch);
    setPlaying(false);
  }

  return (
    <section className="section featured" id="featured">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">02 / Video del Canal</div>
            <div className="section-title">
              <h2 className="h-lg">Último Video del Canal</h2>
            </div>
          </div>
          <div style={{ display: 'flex', border: '3px solid var(--ink)', borderRadius: 4, overflow: 'hidden', alignSelf: 'center', boxShadow: '4px 4px 0 var(--ink)' }}>
            {['tcg', 'gaming'].map((ch) => (
              <button
                key={ch}
                type="button"
                onClick={() => switchChannel(ch)}
                style={{
                  padding: '10px 28px',
                  fontFamily: 'var(--font-mono)',
                  fontSize: '0.85rem',
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  background: channel === ch ? 'var(--ink)' : 'var(--surface)',
                  color: channel === ch ? 'var(--surface)' : 'var(--ink)',
                  border: 'none',
                  borderLeft: ch === 'gaming' ? '3px solid var(--ink)' : 'none',
                  cursor: 'pointer',
                  transition: 'background 0.15s, color 0.15s',
                }}
              >
                {ch === 'tcg' ? 'TCG' : 'Gaming'}
              </button>
            ))}
          </div>
        </div>

        <div className="feat-wrap">
          <div className="feat-player">
            <div className="feat-thumb">
              {playing ? (
                <iframe
                  src={`https://www.youtube.com/embed/${v.id}?autoplay=1`}
                  title="Último video de Deinvtuber"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                />
              ) : (
                <>
                  <img
                    src={`https://img.youtube.com/vi/${v.id}/maxresdefault.jpg`}
                    alt="Miniatura del último video"
                    width="1280" height="720"
                    loading="eager"
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                  <div className="feat-duration">{v.duration}</div>
                  <button className="feat-play" type="button" onClick={() => setPlaying(true)} aria-label="Play video">
                    <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
                  </button>
                </>
              )}
            </div>
          </div>

          <aside className="feat-meta">
            <span className="label-bold" style={{ background: 'var(--error)', color: 'var(--surface)', padding: '4px 8px', borderRadius: 4, alignSelf: 'flex-start' }}>
              <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" style={{ marginRight: 6, verticalAlign: '-1px' }}><path d="M21.6 7.2a2.5 2.5 0 0 0-1.7-1.7C18.3 5 12 5 12 5s-6.3 0-7.9.5A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.7 1.7c1.6.5 7.9.5 7.9.5s6.3 0 7.9-.5a2.5 2.5 0 0 0 1.7-1.7c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5 3-5 3z" /></svg>
              YouTube
            </span>
            <h3 className="feat-title">{v.title}</h3>
            <p className="feat-desc">{v.desc}</p>
            <div className="feat-stats">
            </div>
            <div className="feat-actions">
              <a href={v.channelUrl} target="_blank" rel="noreferrer" className="btn">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.7-1.7C18.3 5 12 5 12 5s-6.3 0-7.9.5A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.7 1.7c1.6.5 7.9.5 7.9.5s6.3 0 7.9-.5a2.5 2.5 0 0 0 1.7-1.7c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5 3-5 3z" /></svg>
                Ver en YouTube
              </a>
              <a href={`${v.channelUrl}?sub_confirmation=1`} target="_blank" rel="noreferrer" className="btn ghost">
                Suscribirse
              </a>
            </div>
            <div className="feat-foot">
            </div>
          </aside>
        </div>
      </div>
    </section>);

}

// ── sets de pokémon ─────────────────────────────────────────────────
function SetsSection() {
  const [idx, setIdx] = useState2(0);

  const sets = [
    {
      id: 'ascended-heroes',
      name: 'Ascended Heroes',
      code: 'ASC',
      cards: 295,
      date: 'Enero 2026',
      artBg: 'linear-gradient(135deg, #ffb84d 0%, #fd9000 100%)',
      logo: 'assets/LOGO/LOGO_ASCENDEDHEROES.webp',
    },
    {
      id: 'perfect-order',
      name: 'Perfect Order',
      code: 'ME03',
      cards: 124,
      date: 'Marzo 2026',
      artBg: 'linear-gradient(135deg, #00dfc1 0%, #006b5b 100%)',
      logo: 'assets/LOGO/LOGO_PERFECTORDER.webp',
    },
    {
      id: 'chaos-rising',
      name: 'Chaos Rising',
      code: 'ME04',
      cards: 122,
      date: 'Mayo 2026',
      artBg: 'linear-gradient(135deg, #4a1d8a 0%, #1e0040 100%)',
      logo: 'assets/LOGO/LOGO_CHAOSRISING.webp',
    },
    {
      id: 'pitch-black',
      name: 'Pitch Black',
      code: 'ME05',
      cards: 118,
      date: 'Julio 2026',
      artBg: 'linear-gradient(135deg, #1a0a1e 0%, #050008 100%)',
      logo: 'assets/LOGO/LOGO_PITCHBLACK.webp',
    },
  ];

  const perPage = 3;
  const canPrev = idx > 0;
  const canNext = idx + perPage < sets.length;

  return (
    <section className="section" id="sets" style={{ borderBottom: 'var(--border)' }}>
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">03 / Sets de Pokémon</div>
            <div className="section-title">
              <h2 className="h-lg">Cartas &amp; Precios.</h2>
            </div>
          </div>
          <a href="gallery.html" className="btn">Ver Sets →</a>
        </div>

        <p style={{ fontSize: '1.2rem', color: 'var(--ink-soft)', maxWidth: '58ch', margin: '0 0 48px', lineHeight: 1.55 }}>
          Cartas, precios, productos y las más valiosas en un solo lugar.
        </p>

        <div className="sets-carousel-wrap">
          <button
            className="sets-nav-btn"
            onClick={() => setIdx(i => i - 1)}
            disabled={!canPrev}
            aria-label="Set anterior"
          >‹</button>

          <div className="sets-grid">
            {sets.slice(idx, idx + perPage).map(s => (
              <a key={s.id} href={`gallery.html#${s.id}`} className="set-card">
                <div className="set-card-art" style={{ background: s.artBg }}>
                  <img src={s.logo} alt={`Logo ${s.name}`} loading="lazy" />
                </div>
                <div className="set-card-body">
                  <div className="set-card-meta">
                    <span className="label-bold" style={{ background: 'var(--ink)', color: 'var(--surface)', padding: '4px 8px' }}>{s.code}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.78rem', color: 'var(--ink-soft)', letterSpacing: '0.08em' }}>{s.date}</span>
                  </div>
                  <h3 className="set-card-name">{s.name}</h3>
                  <div className="set-card-stats">
                    {s.cards ? <><span>{s.cards} cartas</span><span>· Precios en tiempo real</span></> : <span>Próximamente</span>}
                  </div>
                  <div className="set-card-cta">{s.cards ? 'Ver galería →' : 'Llega 17 Jul →'}</div>
                </div>
              </a>
            ))}
          </div>

          <button
            className="sets-nav-btn"
            onClick={() => setIdx(i => i + 1)}
            disabled={!canNext}
            aria-label="Siguiente set"
          >›</button>
        </div>
      </div>
    </section>
  );
}

// ── lore ────────────────────────────────────────────────────────────
function Lore() {
  return (
    <section className="lore section" id="story">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">04 / Lore</div>
            <div className="section-title">
              <h2 className="h-lg" style={{ color: 'var(--surface)' }}>
                No Hay Lore. Solo <span style={{ color: 'var(--accent)' }}>Cubículo</span>.
              </h2>
            </div>
          </div>
        </div>

        <div className="lore-grid">
          <div className="lore-img">
            <img src="assets/dein-oficina.webp" alt="Dein at her office cubicle, headset on, mid-shift" width="1200" height="800" loading="lazy" />
            <div className="caption">
              <span>FILE_001 · OFICINA.JPG</span>
              <span>09:42 AM</span>
            </div>
          </div>
          <div className="lore-text">
            <h2 style={{ fontSize: "52px" }}>
              Soy Dein.<br />
              Trabajo de <span className="hl-o">9 a 6</span>,<br />
              Gasto mi Sueldo en <span className="hl">Cartón y Juegos </span>.
            </h2>
            <p>Nada de historias de fantasía. Soy una persona normal intentando que la quincena rinda para el próximo set de cartas.
              Aquí comparto mis derrotas, victorias y unboxings... y uno que otro escape al gaming 🎮
            </p>
            <p>
            </p>
            <p style={{ color: 'var(--accent)', fontWeight: 600 }}>
              La meta: que el canal pague el hobby. Algún día.
            </p>
            <div className="lore-stats">
              <div className="lore-stat">
              </div>
              <div className="lore-stat">
              </div>
              <div className="lore-stat">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── support ─────────────────────────────────────────────────────────
function Support() {
  return (
    <section className="section support" id="support">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">05 / Donaciones</div>
            <div className="section-title">
              <h2 className="h-md" style={{ margin: 0 }}>Fondos para Cartas</h2>
            </div>
          </div>
        </div>

        <div className="support-grid">
          <div className="support-character">
            <div className="speech">¡Cualquier apoyo ayuda al hobby! 💚</div>
            <img src="assets/dein-talk.webp" alt="Dein, smiling and waving" width="1877" height="2572" loading="lazy" />
          </div>

          <div className="support-text">
            <h2>
              <span className="stamp">Gracias por Hacer</span> <br />
              Esto Posible. <span style={{ color: 'var(--ink)' }}>↗</span>
            </h2>
            <p>
              Cada aporte va directo a conseguir los próximos sets y mejorar la calidad de los unboxings.
              Y cuando alcanza… también para uno que otro vicio en gaming 🎮
            </p>
            <a href="https://ko-fi.com/deinvtuber" target="_blank" rel="noreferrer" className="kofi-btn">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" />
              </svg>
              Apoyar en Ko-fi
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ── footer ──────────────────────────────────────────────────────────
function Footer() {
  const base = window.location.pathname.replace(/\\/g, '/').includes('/noticias/') ? '../' : '';
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <div className="brand-mark">D</div>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.15rem' }}>Deinvtuber</span>
            </div>
            <p style={{ color: 'var(--ink-soft)', maxWidth: '34ch', margin: 0 }}>
              Coleccionando cartas, explorando mundos y creando historias.
              Accede a mis redes y sé parte de la comunidad.
            </p>
          </div>
          <div>
            <h4>Redes Sociales</h4>
            <ul>
              <li><a href="https://www.youtube.com/@DeinVTuberTCG" target="_blank" rel="noopener noreferrer">Youtube - TCG</a></li>
              <li><a href="https://www.youtube.com/@Deinvtuber" target="_blank" rel="noopener noreferrer">YouTube - Gaming</a></li>
              <li><a href="https://www.tiktok.com/@deinvtubertcg" target="_blank" rel="noopener noreferrer">TikTok - TCG</a></li>
              <li><a href="https://www.tiktok.com/@deinvtuber" target="_blank" rel="noopener noreferrer">TikTok - Gaming</a></li>
              <li><a href="https://www.instagram.com/deinvtuber/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
            </ul>
          </div>
          <div>
            <h4>Sitio</h4>
            <ul>
              <li><a href={base + "gallery.html"}>Galería de Sets</a></li>
              <li><a href={base + "index.html#story"}>Lore</a></li>
              <li><a href={base + "index.html#featured"}>Contenido</a></li>
              <li><a href={base + "index.html#support"}>Donaciones</a></li>
            </ul>
          </div>
        </div>

        <div className="giant-name">DEINVTUBER · DEINVTUBER ·</div>

        <div className="footer-bottom">
          <span>© 2026 Deinvtuber</span>
        </div>
      </div>
    </footer>);

}

// ── extras section ──────────────────────────────────────────────────
function ExtrasSection() {
  return (
    <section className="socials" id="extras">
      <div className="shell">
        <div className="section-head" style={{ marginBottom: 32, color: 'var(--surface)' }}>
          <div>
            <div className="section-eyebrow" style={{ color: 'var(--accent)' }}>
              <span style={{ background: 'var(--orange)', width: 28, height: 2 }}></span>
              06 / Extras
            </div>
            <h2 className="h-lg" style={{ color: 'var(--surface)' }}>Zona Extra</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 64, alignItems: 'center' }}>
          <div className="dest-stack">
            <a href="gallery.html#chaos-rising" className="dest-card">
              <div className="dest-tag">Pokémon TCG · Chaos Rising</div>
              <h3>Galería de Cartas</h3>
              <p>Explora las 122 ilustraciones del set. Holos, full arts, special illustrations y más. Con lightbox y filtro por rareza.</p>
              <div className="dest-cta">Ver galería →</div>
            </a>
            <a href="game.html" className="dest-card orange">
              <div className="dest-tag orange">Minijuego · Pokémon</div>
              <h3>Pokémon Tower Defense</h3>
              <p>Tower defense con Pokémon de múltiples generaciones. Juega directo en el navegador, sin descargas.</p>
              <div className="dest-cta orange">Jugar ahora →</div>
            </a>
          </div>
          <div className="extras-char-col support-character" style={{ maxWidth: 220 }}>
            <img src="assets/dein-talk.webp" alt="Dein señalando las opciones" width="1877" height="2572" loading="lazy" />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SetsSection, Lore, Featured, Support, Footer, ExtrasSection });