// Rest of site: Home intro strip, Nosotros, Contacto, Footer, How-it-works, 404
const { useState: uS_r, useEffect: uE_r } = React;

function IntroStrip() {
  return (
    <section className="intro-strip" data-screen-label="Intro">
      <div>
        <div className="intro-byline">Por Spanki · Buffet Games · Edición especial</div>
        <h1 className="intro-headline">
          La página de<br />
          <span className="accent">promocionales</span><br />
          más <span className="stamp">GRANDE</span><br />
          de México.
        </h1>
      </div>
      <div className="intro-columns">
        <p>Antes del internet, antes del streaming, había una bolsa de Sabritas con un tazo adentro. Y ese tazo valía oro. Lo cambiabas en el recreo, lo guardabas en un álbum de papelería, lo enseñabas como trofeo cuando te salía la versión brillosa.</p>
        <p>Buffet Games es para los que se quedaron con ganas. Para los que perdieron sus tazos en una mudanza, los que tuvieron que botar las figuras de Vualá cuando se mudaron, los que llevan veinte años buscando los Pepsilindros completos.</p>
        <p>Aquí están todos. Tazos, figuras Vualá, Pepsilindros, Cajitas Felices, Gogo's, monedas de Coca-Cola, mini figuras Bimbo. Originales, completos, de época.</p>
        <p><strong>Yo soy Spanki, y este es el buffet.</strong></p>
      </div>
    </section>);

}

function StepsRow() {
  return (
    <section className="steps-wrap" data-screen-label="Cómo">
      <div className="section-head" style={{ borderBottom: '4px double #f2e7cf', maxWidth: 1280, marginBottom: 40, paddingBottom: 14 }}>
        <h2 style={{ color: 'var(--paper)' }}><span className="sub" style={{ color: 'var(--yellow)' }}>¿Cómo va el asunto?</span>Así funciona</h2>
        <div className="meta" style={{ color: 'var(--paper)', opacity: .7 }}>Edición para novatos</div>
      </div>
      <div className="steps-inner">
        <div className="step">
          <div className="step-num">1</div>
          <h3>Escoge tu colección</h3>
          <p>Dále una vuelta a la tiendita. Tenemos tazos, figuras Vualá, Pepsilindros, Cajitas Felices, Gogo's y más.</p>
        </div>
        <div className="step">
          <div className="step-num">2</div>
          <h3>Apártalo</h3>
          <p>Agrégalo al morralito y escoge el método de pago que prefieras.</p>
        </div>
        <div className="step">
          <div className="step-num">3</div>
          <h3>Lo recibes</h3>
          <p>Envío por Correos de México a toda la República por solo $100. Llega en 7–15 días, los envios se hacen el Dia Lunes.</p>
        </div>
      </div>
    </section>);

}

function Nosotros() {
  return (
    <section className="nosotros-wrap" data-screen-label="05 Nosotros">
      <div className="section-head" style={{ padding: '0 0 16px' }}>
        <h2><span className="sub">Quiénes somos · Página 2</span>Yo soy Spanki</h2>
        <div className="meta">Buffet Games<br />desde YouTube</div>
      </div>

      <div className="nosotros-grid">
        <div className="nosotros-letter">
          <p>Soy <strong>Spanki</strong>, el creador de <strong>Buffet Games</strong>. Comencé a coleccionar desde que tengo memoria, juntando mis primeros tazos de Dragon Ball y Medabots desde chiquito, aunque mi colección favorita siempre fue la de Mucha Lucha.</p>
          <p>Mi pasión por los coleccionables y los tianguis me hizo comenzar en el 2016 mi canal de YouTube, Buffet Games. Con cacerías en tianguis y buscando información, el canal se volvió la enciclopedia de promocionales más grande de internet.</p>
          <p>Después de 10 años de trayectoria, decidimos llevar estas piezas a las personas que llevan buscándolas por años. Con la confianza de la gente que ya me conoce por una década, abrimos esta tienda para ayudarte a completar tus colecciones.</p>
          <p>No tenemos tienda física. Todo se maneja en línea con compra 100% segura, y el envío cuesta <strong>$100 por Correos de México</strong> a toda la República.</p>
          <p>Pásale al buffet. Hay para todos.</p>
          <div className="sign">— Spanki</div>
        </div>

        <div className="nosotros-polaroids">
          <div className="polaroid">
            <div className="photo"><img src="/uploads/historia-1.png" alt="Buffet Games Canal" /></div>
          </div>
          <div className="polaroid">
            <div className="photo"><img src="/uploads/historia-2.png" alt="Spanki en sus inicios" /></div>
          </div>
          <div className="polaroid">
            <div className="photo"><img src="/uploads/historia-3.png" alt="Cacería de coleccionables" /></div>
          </div>
        </div>
      </div>

      <div className="nosotros-stats">
        <div className="stat"><div className="big">+850</div><div className="lbl">Coleccionables rescatados</div></div>
        <div className="stat"><div className="big">133k</div><div className="lbl">Suscriptores en YouTube</div></div>
        <div className="stat"><div className="big">32</div><div className="lbl">Estados de la república</div></div>
      </div>
    </section>);

}

function VideoTV() {
  const [video, setVideo] = uS_r(0);
  const [videos, setVideos] = uS_r([]);
  const [loading, setLoading] = uS_r(true);

  uE_r(() => {
    fetch('/youtube-videos')
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data) && data.length) {
          setVideos(data);
        }
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) return (
    <section className="tv-section" data-screen-label="TV">
      <div className="tv-section-inner">
        <div className="tv-copy">
          <div className="kicker">Canal Buffet Games · YouTube</div>
          <h2>Échale un ojo<br />al <span className="accent">canal</span></h2>
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',minHeight:320,color:'var(--paper)',fontFamily:'Special Elite,monospace'}}>Cargando videos…</div>
      </div>
    </section>
  );

  if (!videos.length) return null;

  return (
    <section className="tv-section" data-screen-label="TV">
      <div className="tv-section-inner">
        <div className="tv-copy">
          <div className="kicker">Canal Buffet Games · YouTube</div>
          <h2>Échale un ojo<br />al <span className="accent">canal</span></h2>
          <p>Conoce la historia de lo que vas a comprar. La enciclopedia visual del coleccionismo mexicano.</p>
          <p>Si te gusta lo que vendemos, suscríbete y nos ayudas a seguir rescatando coleccionables.</p>
          <a className="yt-link" href="https://www.youtube.com/@BuffetGames" target="_blank" rel="noopener">▶ Ver canal en YouTube</a>
        </div>
        <div>
          <div className="tv">
            <div className="tv-antennas" aria-hidden="true"></div>
            <div className="tv-screen">
              <iframe
                src={`https://www.youtube.com/embed/${videos[video].id}?rel=0&modestbranding=1`}
                title={videos[video].title}
                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen />
            </div>
            <div className="tv-controls">
              <span className="tv-channel">CH 0{video + 1}</span>
              <div className="tv-knob" onClick={() => setVideo((video + 1) % videos.length)} title="Cambiar canal" />
            </div>
          </div>
          <div className="tv-vid-row">
            {videos.map((v, i) =>
              <button key={i} className={`tv-vid-btn ${video === i ? 'active' : ''}`} onClick={() => setVideo(i)}>
                CH 0{i + 1} — {v.title}
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);
}

function Contacto() {
  return (
    <section className="contacto-wrap" data-screen-label="06 Contacto">
      <div className="section-head" style={{ padding: '0 0 16px' }}>
        <h2><span className="sub">Contacto · Última Página</span>Háblanos</h2>
        <div className="meta">Tienda 100% en línea<br />envíos a toda la república</div>
      </div>

      <div className="contacto-grid">
        <div>
          <div className="contacto-card">
            <div className="kicker">Línea directa</div>
            <h3>Háblanos</h3>
            <div className="contacto-row">
              <div className="ico">W</div>
              <div>
                <span className="lbl">WhatsApp</span>
                <a href="https://wa.me/525500000000" target="_blank" rel="noopener">Mándanos un mensaje</a>
              </div>
            </div>
            <div className="contacto-row">
              <div className="ico">@</div>
              <div>
                <span className="lbl">Correo</span>
                <a href="mailto:contactobuffetgames@gmail.com">contactobuffetgames@gmail.com</a>
              </div>
            </div>
            <div className="contacto-row">
              <div className="ico">▶</div>
              <div>
                <span className="lbl">YouTube</span>
                <a href="https://www.youtube.com/@BuffetGames" target="_blank" rel="noopener">@BuffetGames</a>
              </div>
            </div>
            <div className="contacto-row">
              <div className="ico">f</div>
              <div>
                <span className="lbl">Redes sociales</span>
                <a href="https://www.instagram.com/spanki_buffetgames/" target="_blank" rel="noopener">Instagram</a>
                {' · '}
                <a href="https://www.tiktok.com/@spankibuffetgames" target="_blank" rel="noopener">TikTok</a>
              </div>
            </div>
          </div>

          <div className="contacto-card" style={{ marginTop: 24 }}>
            <div className="kicker">Cómo funciona</div>
            <h3>Compra segura</h3>
            <div className="contacto-row">
              <div className="ico">✉</div>
              <div>
                <span className="lbl">Tienda 100% en línea</span>
                <div style={{ fontWeight: 700 }}>Sin tienda física</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)', fontFamily: 'Special Elite, monospace' }}>Todo el catálogo aquí mismo</div>
              </div>
            </div>
            <div className="contacto-row">
              <div className="ico">📦</div>
              <div>
                <span className="lbl">Envío</span>
                <div style={{ fontWeight: 700 }}>$100 por Correos de México</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)', fontFamily: 'Special Elite, monospace' }}>A toda la República mexicana</div>
              </div>
            </div>
            <div className="contacto-row">
              <div className="ico">🔒</div>
              <div>
                <span className="lbl">Pago seguro</span>
                <div style={{ fontWeight: 700 }}>Tarjeta · OXXO · Transferencia</div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <div className="contacto-card">
            <div className="kicker">Preguntas frecuentes</div>
            <h3>Lo que más nos preguntan</h3>
            <div style={{ padding: '14px 0' }}>
              <div style={{ fontFamily: 'Oswald', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5, fontSize: 14, marginTop: 12 }}>¿Tienen tienda física?</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.5 }}>No. Todo lo manejamos en línea para llegar a coleccionistas de toda la República.</div>

              <div style={{ fontFamily: 'Oswald', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5, fontSize: 14, marginTop: 16 }}>¿Cuánto tarda el envío?</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.5 }}>De 3 a 7 días hábiles por Correos de México. Te mandamos número de guía.</div>

              <div style={{ fontFamily: 'Oswald', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5, fontSize: 14, marginTop: 16 }}>¿Los productos son originales?</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.5 }}>Sí. Cada pieza es de época, conseguida y verificada por Spanki. Nada de reproducciones.</div>

              <div style={{ fontFamily: 'Oswald', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5, fontSize: 14, marginTop: 16 }}>¿Cuánto cuesta el envío?</div>
              <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.5 }}>$100 fijos por Correos de México a toda la República, sin importar cuántas piezas pidas.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  const { setRoute } = useRoute();
  const year = new Date().getFullYear();
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-grid">
        <div className="footer-brand-col">
          <img src="logo.png" alt="Buffet Games" style={{ height: 70, filter: 'drop-shadow(2px 2px 0 var(--red))' }} />
          <p>La página de promocionales más grande de México. Tazos, figuras Vualá, Pepsilindros, y todo lo que te marcó de chavo. Compra segura, envío a toda la República.</p>
          <div className="footer-socials">
            <a href="https://www.youtube.com/@BuffetGames" target="_blank" rel="noopener" aria-label="YouTube">▶</a>
            <a href="https://www.instagram.com/spanki_buffetgames/" target="_blank" rel="noopener" aria-label="Instagram">ig</a>
            <a href="https://www.tiktok.com/@spankibuffetgames" target="_blank" rel="noopener" aria-label="TikTok">tk</a>
          </div>
        </div>
        <div>
          <h4>Menú</h4>
          <ul>
            <li><a onClick={() => setRoute({ page: 'home' })}>Inicio</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Tienda</a></li>
            <li><a onClick={() => setRoute({ page: 'nosotros' })}>Nosotros</a></li>
            <li><a onClick={() => setRoute({ page: 'contacto' })}>Contacto</a></li>
          </ul>
        </div>
        <div>
          <h4>Marcas</h4>
          <ul>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Sabritas</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Vualá</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Marinela</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Barcel</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Bimbo</a></li>
            <li><a onClick={() => setRoute({ page: 'tienda' })}>Otros</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a>Política de privacidad</a></li>
            <li><a>Términos y condiciones</a></li>
            <li><a>Política de cookies</a></li>
            <li><a>Envíos y devoluciones</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-meta">
        <span>© {year} Buffet Games · Todos los coleccionables reservados</span>
        <span>Hecho con ♥ en México · Por Spanki</span>
      </div>
    </footer>);

}

function PagoOk({ sessionId }) {
  const [data, setData] = uS_r(null);
  const [loading, setLoading] = uS_r(true);
  const [emailSent, setEmailSent] = uS_r(false);
  const { setRoute } = useRoute();

  uE_r(() => {
    if (!sessionId) { setLoading(false); return; }
    fetch(`/session-details?id=${sessionId}`)
      .then(r => r.json())
      .then(d => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));

    fetch('/send-confirmacion', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ session_id: sessionId })
    })
    .then(r => r.json())
    .then(d => { if (d.ok) setEmailSent(true); })
    .catch(() => {});
  }, [sessionId]);

  const nextLunes = () => {
    const hoy = new Date();
    const dia = hoy.getDay();
    const diasHastaLunes = dia === 0 ? 1 : (dia === 6 ? 2 : (8 - dia));
    const lunes = new Date(hoy);
    lunes.setDate(hoy.getDate() + diasHastaLunes);
    return lunes.toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long' });
  };

  return (
    <section style={{ minHeight:'80vh', display:'flex', alignItems:'center', justifyContent:'center', padding:'60px 20px', background:'var(--kraft)' }}>
      <div style={{ maxWidth:640, width:'100%', background:'var(--paper)', border:'4px solid var(--ink)', boxShadow:'8px 8px 0 var(--ink)', padding:'40px 36px' }}>

        <div style={{ textAlign:'center', marginBottom:32 }}>
          <img
            src="/uploads/spanki-caja.png"
            alt="Spanki con caja"
            style={{ height:260, width:'auto', objectFit:'contain', marginBottom:4, filter:'drop-shadow(4px 6px 0 rgba(0,0,0,.22))' }}
          />
          <h1 style={{ fontFamily:'Bungee,sans-serif', fontSize:'clamp(28px,5vw,44px)', color:'var(--red)', margin:'4px 0 4px' }}>
            ¡COMPRA REALIZADA!
          </h1>
          <p style={{ fontFamily:'Special Elite,monospace', fontSize:16, color:'var(--ink-soft)' }}>
            Tu producto va en camino, Spanki ya se puso a empacarlo.
          </p>
          {data && <div style={{ display:'inline-block', background:'var(--ink)', color:'var(--yellow)', fontFamily:'Special Elite,monospace', padding:'4px 14px', letterSpacing:3, fontSize:13, marginTop:8 }}>
            Folio #{data.folio}
          </div>}
        </div>

        {loading ? (
          <p style={{ textAlign:'center', fontFamily:'Special Elite,monospace' }}>Cargando detalles…</p>
        ) : data ? (<>
          {data.items && data.items.length > 0 && (
            <div style={{ marginBottom:24 }}>
              <h3 style={{ fontFamily:'Oswald,sans-serif', textTransform:'uppercase', letterSpacing:2, fontSize:15, borderBottom:'3px solid var(--ink)', paddingBottom:8, marginBottom:12 }}>
                Tu pedido
              </h3>
              {data.items.map((it, i) => (
                <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'6px 0', borderBottom:'1px dashed #ccc', fontFamily:'Special Elite,monospace', fontSize:14 }}>
                  <span>{it.nombre} × {it.qty}</span>
                  <span><strong>${it.total.toLocaleString('es-MX')}</strong></span>
                </div>
              ))}
              <div style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', fontFamily:'Oswald,sans-serif', fontWeight:700, fontSize:16, marginTop:4 }}>
                <span>TOTAL COBRADO</span>
                <span style={{ color:'var(--red)' }}>${data.total.toLocaleString('es-MX')} MXN</span>
              </div>
            </div>
          )}

          {data.direccion && (
            <div style={{ marginBottom:24 }}>
              <h3 style={{ fontFamily:'Oswald,sans-serif', textTransform:'uppercase', letterSpacing:2, fontSize:15, borderBottom:'3px solid var(--ink)', paddingBottom:8, marginBottom:8 }}>
                📦 Dirección de envío
              </h3>
              <p style={{ fontFamily:'Special Elite,monospace', fontSize:14, margin:0 }}>{data.direccion}</p>
            </div>
          )}
        </>) : null}

        <div style={{ background:'#1a1611', color:'var(--paper)', padding:'20px 24px', marginBottom:24 }}>
          <h3 style={{ fontFamily:'Oswald,sans-serif', textTransform:'uppercase', letterSpacing:2, fontSize:15, color:'var(--yellow)', marginTop:0, marginBottom:10 }}>
            🚚 ¿Cuándo llega?
          </h3>
          <p style={{ fontFamily:'Special Elite,monospace', fontSize:13, margin:'0 0 8px', lineHeight:1.6 }}>
            Los envíos se hacen <strong style={{color:'var(--yellow)'}}>todos los lunes</strong>.
            El próximo envío sale el <strong style={{color:'var(--yellow)'}}>{ nextLunes() }</strong>.
          </p>
          <p style={{ fontFamily:'Special Elite,monospace', fontSize:13, margin:0, lineHeight:1.6 }}>
            Tiempo de entrega por Correos de México: <strong style={{color:'var(--yellow)'}}>7 a 15 días hábiles</strong>.
            Te mandamos el número de guía en cuanto salgamos.
          </p>
        </div>

        {emailSent && (
          <p style={{ fontFamily:'Special Elite,monospace', fontSize:13, color:'#2a7a3a', textAlign:'center', marginBottom:16 }}>
            ✔ Se envió un correo de confirmación a tu email.
          </p>
        )}

        <div style={{ textAlign:'center' }}>
          <button
            onClick={() => { window.history.replaceState({}, '', '/'); setRoute({ page: 'tienda' }); }}
            style={{ fontFamily:'Bungee,sans-serif', background:'var(--red)', color:'var(--paper)', border:'3px solid var(--ink)', padding:'12px 28px', fontSize:16, cursor:'pointer', boxShadow:'4px 4px 0 var(--ink)' }}>
            Seguir comprando →
          </button>
        </div>
      </div>
    </section>
  );
}

function NewsletterSection() {
  return (
    <section style={{background:'#1a1611', padding:'56px 24px', position:'relative', overflow:'hidden'}}>
      <div style={{maxWidth:820, margin:'0 auto', display:'flex', alignItems:'center', gap:40, flexWrap:'wrap', justifyContent:'center'}}>
        <img
          src="/uploads/spanki-caja.png"
          alt="Spanki"
          style={{height:140, width:'auto', objectFit:'contain', filter:'drop-shadow(0 4px 16px rgba(0,0,0,.5))', flexShrink:0}}
        />
        <div style={{flex:'1 1 280px', minWidth:0}}>
          <div style={{fontFamily:'Oswald,sans-serif', fontWeight:700, fontSize:12, textTransform:'uppercase', letterSpacing:3, color:'var(--yellow)', marginBottom:8}}>
            Newsletter · Buffet Games
          </div>
          <h2 style={{fontFamily:'Bungee,sans-serif', fontSize:'clamp(22px,3.5vw,34px)', color:'var(--paper)', margin:'0 0 12px', lineHeight:1.1}}>
            ¿Quieres saber qué<br />llega nuevo a la tienda?
          </h2>
          <p style={{fontFamily:'Special Elite,monospace', fontSize:14, color:'rgba(242,231,207,.75)', margin:'0 0 20px', lineHeight:1.6}}>
            Spanki te avisa por correo cada vez que llegue algo al buffet. Tazos nuevos, figuras raras, colecciones completas — te enteras antes que nadie.
          </p>
          <NewsletterWidget />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IntroStrip, StepsRow, Nosotros, Contacto, Footer, VideoTV, PagoOk, NewsletterSection });