// ============================================================
// Foro Valor Emprendedor ? Sections
// ============================================================
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ---------- Reveal on scroll ----------
function Reveal({ children, delay = 0, className = "", as: As = "div", ...rest }) {
  const ref = useRefS(null);
  const [visible, setVisible] = useStateS(false);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback: if not observed quickly, show anyway
    const fallback = setTimeout(() => setVisible(true), 600 + delay);
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); clearTimeout(fallback); io.disconnect(); } }),
      { threshold: 0.05, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    // Also check immediately in case already in view
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setVisible(true);
      clearTimeout(fallback);
      io.disconnect();
    }
    return () => { clearTimeout(fallback); io.disconnect(); };
  }, []);
  return (
    <As ref={ref} className={`reveal ${visible ? "is-in" : ""} ${className}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </As>
  );
}

// ---------- Video section ----------
function VideoSection() {
  const [playing, setPlaying] = useStateS(false);
  return (
    <section className="video-section" id="video">
      <Reveal className="section-eyebrow">
        <span className="eyebrow-line" />
        <span>Edici?n 2025 ? Resumen</span>
      </Reveal>
      <Reveal as="h2" className="section-title" delay={80}>
        As? se vivi? el foro <em>el a?o pasado</em>.
      </Reveal>
      <Reveal className="video-wrap" delay={160}>
        <div className={`video-frame ${playing ? "is-playing" : ""}`} data-cursor={playing ? "Pausa" : "Reproducir"} onClick={() => setPlaying(!playing)}>
          <div className="video-placeholder">
            <div className="video-placeholder-stripes" />
            <div className="video-placeholder-label">
              <span className="mono">// VIDEO ? Highlights Foro 2025</span>
              <span className="mono">// Mar de Vigo ? 1920x1080</span>
            </div>
          </div>
          <div className="video-play-btn" aria-label="Reproducir">
            {!playing ? (
              <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
            ) : (
              <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
            )}
          </div>
          <div className="video-meta">
            <span>02:47</span>
            <span>?</span>
            <span>4K</span>
          </div>
        </div>
        <div className="video-footnote">
          <div>
            <b>+600</b> asistentes en 2025
          </div>
          <div className="video-footnote-line" />
          <div>
            <b>12</b> ponentes internacionales
          </div>
          <div className="video-footnote-line" />
          <div>
            <b>98%</b> recomienda volver
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ---------- About section ----------
function AboutSection() {
  return (
    <section className="about-section" id="foro-emprendimiento">
      <div className="about-grid">
        <div className="about-col about-col-left">
          <Reveal className="section-eyebrow">
            <span className="eyebrow-line" />
            <span>Sobre el foro</span>
          </Reveal>
          <Reveal as="h2" className="section-title about-title" delay={80}>
            Un encuentro pensado para <em>quienes construyen</em> cada día.
          </Reveal>
          <Reveal className="about-body" delay={160}>
            <p>
              <b>Foro Valor Emprendedor</b> nace para reunir, bajo un mismo techo,
              a la comunidad emprendedora de Galicia con las voces más influyentes
              del habla hispana. Un día intenso de ponencias, mesas redondas,
              networking estructurado y casos reales.
            </p>
            <p>
              No es un congreso más. Es el lugar donde cierras tu próximo cliente,
              conoces a tu próximo socio y encuentras la idea que llevabas meses
              buscando.
            </p>
          </Reveal>
          <Reveal className="about-pills" delay={240}>
            <span className="pill">Ponencias magistrales</span>
            <span className="pill">Networking 1:1</span>
            <span className="pill">Mesas redondas</span>
            <span className="pill">Casos de éxito</span>
            <span className="pill">Zona inversores</span>
          </Reveal>
        </div>

        <div className="about-col about-col-right">
          <Reveal className="about-card about-card-main" delay={120}>
            <div className="about-card-placeholder">
              <img src="assets/auditorio.jpeg" alt="Vista del foro" className="about-card-image" />
              <div className="mono">// FOTO · Vista auditorio Mar de Vigo</div>
            </div>
            <div className="about-card-overlay">
              <div className="about-card-overlay-label">
                <span className="dot-pulse" /> En directo · Sept 2026
              </div>
            </div>
          </Reveal>

          <div className="about-small-grid">
            <Reveal className="about-mini" delay={200}>
              <div className="about-mini-num">01</div>
              <div className="about-mini-text">
                <b>Auditorio Mar de Vigo</b>
                <span>Avda. Beiramar s/n, Vigo</span>
              </div>
            </Reveal>
            <Reveal className="about-mini" delay={280}>
              <div className="about-mini-num">02</div>
              <div className="about-mini-text">
                <b>26 septiembre 2026</b>
                <span>De 09:00 a 20:30</span>
              </div>
            </Reveal>
            <Reveal className="about-mini" delay={360}>
              <div className="about-mini-num">03</div>
              <div className="about-mini-text">
                <b>18 ponentes</b>
                <span>Del habla hispana</span>
              </div>
            </Reveal>
            <Reveal className="about-mini" delay={440}>
              <div className="about-mini-num">04</div>
              <div className="about-mini-text">
                <b>1.425 plazas</b>
                <span>Aforo limitado</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reveal, VideoSection, AboutSection });