/* Components part 2: BlogSection, Tienda, Support, Lore, 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: '_quPLRo5DsE',
      duration: '4:45',
      title: 'Tiendas están triplicando precios del Pokémon 30th… y la gente lo compra',
      desc: 'El set 30th Celebration de Pokémon TCG todavía no sale… y ya hay tiendas vendiendo productos al triple de su precio original.',
      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: 'promo-cards',
      name: 'Cartas Promo',
      code: 'PROMO',
      cards: 103,
      date: 'Todas las eras',
      artBg: 'linear-gradient(135deg, #e6e6e6 0%, #8a8a8a 100%)',
      logo: 'assets/promo/promo_tcg.webp',
    },
    {
      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: '30th-celebration',
      name: '30th Celebration',
      code: '30C',
      date: 'Septiembre 2026',
      artBg: 'linear-gradient(135deg, #ffd166 0%, #ef476f 100%)',
      logo: 'assets/cartas-celebration/logo.webp',
      cta: 'Llega 16 Sep →',
    },
    {
      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',
    },
    {
      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: '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',
    },
  ];

  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" style={s.id==='30th-celebration' ? {transform:'scale(1.35)'} : undefined} />
                </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>Desconocido</span>}
                  </div>
                  <div className="set-card-cta">{s.cards ? 'Ver galería →' : (s.cta || 'Ver galería →')}</div>
                </div>
              </a>
            ))}
          </div>

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

// ── tienda ──────────────────────────────────────────────────────────
function Tienda() {
  return (
    <section className="shop section" id="tienda">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">04 / Tienda</div>
            <div className="section-title">
              <h2 className="h-lg">Compra Cartas Directo.</h2>
            </div>
          </div>
          <a href="tienda.html" className="btn">Ver Tienda →</a>
        </div>

        <p style={{ fontSize: '1.2rem', color: 'var(--ink-soft)', maxWidth: '58ch', margin: '0 0 32px', lineHeight: 1.55 }}>
          Cartas sueltas, sellado, figuras y muñecas coleccionables y más.
        </p>

        <a href="tienda.html" style={{ display: 'block', width: '80%', margin: '0 auto 36px', border: 'var(--border)', borderRadius: 'var(--radius-lg)', boxShadow: '6px 6px 0 var(--ink)', overflow: 'hidden', background: 'var(--accent)', padding: 16 }}>
          <img src="assets/tienda-productos/BANNER_PRODUCTOS.webp" alt="Figuras, sellado, muñecas y cartas coleccionables disponibles en la tienda" style={{ width: '100%', height: 'auto', display: 'block', borderRadius: '10px' }} loading="lazy" />
        </a>
      </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>);

}

// ── lore ────────────────────────────────────────────────────────────
function Lore() {
  return (
    <section className="lore section" id="story">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">06 / 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>);

}

// ── 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#tienda"}>Tienda</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>
          </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>
  );
}

// ── blog / noticias section ──────────────────────────────────────────
const LATEST_POSTS = [
  {
    title: 'Todo lo que Sabemos de Pokémon TCG: Pitch Black (ME05)',
    excerpt: 'El japonés se llama Abyss Eye y ya tiene precios: Mega Darkrai ex MUR a $500 USD. 4 Mega ex confirmados, rareza nueva y ventana de 3 meses antes de Delta Reign.',
    date: '30 Jun 2026',
    readTime: '5 min',
    tag: 'Pitch Black',
    href: 'noticias/pitch-black-todo-lo-que-sabemos.html',
    image: 'noticias/PITCHBLACK_BANNER.webp',
  },
  {
    title: 'Pokémon TCG 30th Celebration: Todos los Productos del Showcase',
    excerpt: '14 productos revelados para el 30 Aniversario — desde ETBs hasta Battle Decks all-foil de Espeon y Umbreon. Fechas del 16 sep al 6 nov 2026.',
    date: '30 Jun 2026',
    readTime: '6 min',
    tag: '30 Aniversario',
    href: 'noticias/30th-celebration-product-showcase.html',
    image: 'assets/noticias_assets/30 aniversario/30-aniversario.webp',
  },
  {
    title: 'Bandai Revela el Juego de Cartas de Naruto',
    excerpt: 'Naruto Card Game debuta en Gen Con 2026 (30 jul–2 ago) con tutoriales gratis y carta promo CP-001 Chakra Card. Lanzamiento mundial en 2027.',
    date: '30 Jun 2026',
    readTime: '4 min',
    tag: 'Noticias TCG',
    href: 'noticias/naruto-card-game-bandai-2027.html',
    image: 'assets/noticias_assets/naruto/banner.webp',
    gradient: 'linear-gradient(135deg, #ff6b00 0%, #8b0000 100%)',
  },
];

function BlogSection() {
  if (!LATEST_POSTS.length) return null;
  return (
    <section className="section" id="noticias" style={{ borderBottom: 'var(--border)' }}>
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">05 / Noticias TCG</div>
            <div className="section-title">
              <h2 className="h-lg">Mini Blog.</h2>
            </div>
          </div>
          <a href="noticias.html" className="btn">Ver todas →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 24 }}>
          {LATEST_POSTS.map((post) => (
            <a key={post.href} href={post.href} style={{
              display: 'flex', flexDirection: 'column',
              border: 'var(--border-thick)', borderRadius: 'var(--radius-lg)',
              overflow: 'hidden', boxShadow: '6px 6px 0 var(--accent)',
              background: 'var(--surface-container-lowest)',
              textDecoration: 'none', color: 'var(--ink)',
              transition: 'transform 0.12s ease, box-shadow 0.12s ease',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translate(-3px,-4px)'; e.currentTarget.style.boxShadow = '9px 10px 0 var(--ink)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '6px 6px 0 var(--accent)'; }}
            >
              <div style={{
                height: 160,
                background: post.image ? `url('${post.image}') center/cover no-repeat` : post.gradient,
                borderBottom: 'var(--border-thick)', position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', top: 12, right: 12,
                  background: 'var(--ink)', color: 'var(--accent)',
                  fontFamily: 'var(--font-mono)', fontWeight: 700,
                  fontSize: '0.7rem', letterSpacing: '0.1em',
                  padding: '4px 8px', borderRadius: 4, textTransform: 'uppercase',
                }}>{post.tag}</span>
              </div>
              <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.15rem', lineHeight: 1.15, letterSpacing: '-0.01em', margin: 0 }}>
                  {post.title}
                </h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: '0.9rem', lineHeight: 1.5, margin: 0 }}>
                  {post.excerpt}
                </p>
                <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1.5px dashed var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--accent-deep)', fontSize: '0.9rem' }}>
                  Leer artículo →
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

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