// ============================================================
// Foro Valor Emprendedor ? Sections 2 (Stats, FAQ, Contacto, CTA)
// ============================================================
const { useState: useStateS2, useEffect: useEffectS2, useRef: useRefS2 } = React;

// ---------- Animated number ----------
function AnimatedNum({ to, suffix = "", prefix = "", duration = 1800 }) {
  const [n, setN] = useStateS2(0);
  const ref = useRefS2(null);
  const started = useRefS2(false);
  useEffectS2(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{prefix}{n.toLocaleString("es-ES")}{suffix}</span>;
}

// ---------- Stats ----------
function StatsSection() {
  const stats = [
    { to: 1425, suffix: "", label: "Plazas disponibles", sub: "Emprendedores y líderes de toda Galicia" },
    { to: 18, label: "Ponentes estrella", sub: "Del habla hispana, con trayectoria internacional" },
    { to: 10, suffix: "h", label: "De contenido intensivo", sub: "Ponencias, mesas redondas y workshops" },
    { to: 98, suffix: "%", label: "Recomiendan volver", sub: "Índice de satisfacción edición 2025" },
  ];
  return (
    <section className="stats-section" id="impacto-foro">
      <div className="stats-header">
        <Reveal className="section-eyebrow">
          <span className="eyebrow-line" />
          <span>Impacto 2025 · Proyección 2026</span>
        </Reveal>
        <Reveal as="h2" className="section-title stats-title" delay={80}>
          Los números <em>hablan</em> del foro.
        </Reveal>
      </div>
      <div className="stats-grid">
        {stats.map((s, i) => (
          <Reveal key={i} className="stat-card" delay={i * 100}>
            <div className="stat-num">
              <AnimatedNum to={s.to} suffix={s.suffix || ""} />
            </div>
            <div className="stat-label">{s.label}</div>
            <div className="stat-sub">{s.sub}</div>
            <div className="stat-arrow">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- Topics ----------
function TopicsSection() {
  const topics = [
    {
      tag: "Negocio y estrategia",
      title: "Marketing, negocio digital y marca personal",
      desc: "Ideas aplicables para vender mejor, crecer con criterio y construir una presencia sólida en el entorno digital sin perder foco comercial.",
    },
    {
      tag: "Capital y crecimiento",
      title: "Inversión, finanzas y activos digitales",
      desc: "Conversaciones sobre rentabilidad, financiación, patrimonio, toma de decisiones financieras y nuevas oportunidades vinculadas al capital.",
    },
    {
      tag: "Innovación aplicada",
      title: "Tecnología e inteligencia artificial",
      desc: "Un bloque dedicado a automatización, herramientas de IA, producto, eficiencia operativa y nuevas formas de trabajar con tecnología.",
    },
    {
      tag: "Ecosistema emprendedor",
      title: "Startups, venture capital y fundraising",
      desc: "Espacio para hablar de escalado, rondas, venture capital, validación y cómo conectar proyectos ambiciosos con inversores y aliados.",
    },
  ];

  const updateGlow = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${e.clientX - rect.left}px`);
    e.currentTarget.style.setProperty("--my", `${e.clientY - rect.top}px`);
  };

  return (
    <section className="topics-section" id="tematicas-emprendimiento">
      <div className="topics-shell">
        <div className="topics-top">
          <div className="topics-headline">
            <Reveal className="section-eyebrow" delay={60}>
              <span className="eyebrow-line" />
              <span>Temáticas del foro</span>
            </Reveal>
            <Reveal as="h2" className="topics-title" delay={120}>
              Conecta con los temas que <em>mueven el evento</em>.
            </Reveal>
          </div>
        </div>

        <Reveal className="topics-copy topics-copy-lead" delay={180}>
          <p>
            Este módulo reúne los campos sobre los que girarán las ponencias, mesas
            redondas y conversaciones clave del día. Un mapa de intereses pensado
            para que cada asistente identifique rápidamente dónde quiere profundizar.
          </p>
        </Reveal>

        <Reveal className="topics-divider" delay={140} />

        <div className="topics-grid">
          {topics.map((topic, i) => (
            <Reveal
              key={topic.title}
              className="topic-card"
              delay={i * 90}
              onMouseMove={updateGlow}
            >
              <div className="topic-card-head">
                <div className="topic-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 3v18M3 12h18" />
                  </svg>
                </div>
                <span className="topic-tag">{topic.tag}</span>
              </div>

              <h3 className="topic-card-title">{topic.title}</h3>
              <p className="topic-card-desc">{topic.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQSection() {
  const [open, setOpen] = useStateS2(0);
  const faqs = [
    { q: "¿Dónde y cuándo se celebra el Foro Valor Emprendedor 2026?", a: "El foro tendrá lugar el sábado 26 de septiembre de 2026 en el Auditorio Mar de Vigo (Avda. Beiramar s/n, Vigo, Galicia). La jornada completa va de 09:00 a 20:30, incluyendo pausas para café y comida networking." },
    { q: "¿A quién va dirigido el evento?", a: "A emprendedores, autónomos, pymes, directivos y profesionales en activo de Galicia y el resto del habla hispana que quieran ampliar su red, cerrar clientes, aprender de referentes internacionales y compartir experiencias reales de negocio." },
    { q: "¿Qué incluye la entrada?", a: "Acceso completo a todas las ponencias y mesas redondas, coffee breaks y comida networking, acceso a la zona de inversores y expositores, y la grabación posterior de todas las charlas durante 12 meses." },
    { q: "¿Habrá sesiones de networking estructurado?", a: "Sí. Organizamos bloques de speed-networking por sectores, mentorías 1:1 con ponentes (por reserva previa) y una cena-cóctel final opcional para los primeros 200 asistentes en confirmar." },
    { q: "¿Puedo asistir como patrocinador o expositor?", a: "Contamos con varios formatos de patrocinio: stand en zona expo, branding en escenario, patrocinio de breaks o charlas. Escríbenos en el formulario indicando Patrocinio y te enviaremos el dossier completo." },
    { q: "¿Hay descuentos para grupos o early-birds?", a: "Sí. Descuento del 20% para las primeras 100 plazas y del 15% para grupos de 4 o más personas de la misma empresa. Los descuentos se aplican automáticamente en el formulario de reserva." },
  ];
  return (
    <section className="faq-section" id="preguntas-frecuentes">
      <div className="faq-grid">
        <div className="faq-left">
          <Reveal className="section-eyebrow">
            <span className="eyebrow-line" />
            <span>Preguntas frecuentes</span>
          </Reveal>
          <Reveal as="h2" className="section-title faq-title" delay={80}>
            Lo que necesitas <em>saber antes</em> de reservar.
          </Reveal>
          <Reveal className="faq-side" delay={160}>
            <p>¿Tu pregunta no está aquí? Escríbenos directamente y te respondemos en menos de 24 h.</p>
            <a href="#contacto-reservas" className="btn btn-ghost" data-cursor="Contactar">
              Contactar organización
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </Reveal>
        </div>

        <div className="faq-list">
          {faqs.map((f, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className={`faq-item ${open === i ? "is-open" : ""}`} data-cursor={open === i ? "Cerrar" : "Abrir"}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="faq-q-text">{f.q}</span>
                  <span className="faq-plus">
                    <span /><span />
                  </span>
                </button>
                <div className="faq-a-wrap">
                  <div className="faq-a">{f.a}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contacto ----------
function ContactSection() {
  const [form, setForm] = useStateS2({ nombre: "", email: "", empresa: "", mensaje: "", tipo: "asistente" });
  const [sent, setSent] = useStateS2(false);
  const [sending, setSending] = useStateS2(false);
  const [sendError, setSendError] = useStateS2("");
  const [touched, setTouched] = useStateS2({});

  const update = (k, v) => setForm({ ...form, [k]: v });
  const onBlur = (k) => setTouched({ ...touched, [k]: true });

  const emailValid = /\S+@\S+\.\S+/.test(form.email);
  const canSend = form.nombre && emailValid && form.mensaje.length > 4;

  const submit = async (e) => {
    e.preventDefault();
    if (!canSend) { setTouched({ nombre: true, email: true, mensaje: true }); return; }
    setSending(true);
    setSendError("");
    try {
      await submitInboxForm({
        formType: "contacto-general",
        audience: form.tipo,
        nombre: form.nombre,
        email: form.email,
        empresa: form.empresa,
        mensaje: form.mensaje,
        origen: window.location.href,
      });
      setSent(true);
    } catch (error) {
      setSendError(error.message || "No se pudo enviar ahora mismo.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact-section" id="contacto-reservas">
      <div className="contact-grid">
        <div className="contact-left">
          <Reveal className="section-eyebrow light">
            <span className="eyebrow-line" />
            <span>Reservar plaza · Contacto</span>
          </Reveal>
          <Reveal as="h2" className="section-title contact-title" delay={80}>
            Nos vemos el 26 de <em>septiembre</em> en Vigo.
          </Reveal>
          <Reveal className="contact-desc" delay={160}>
            Rellena el formulario y te enviaremos la confirmación, el acceso al
            programa detallado y tu entrada digital. Plazas limitadas a 1.425.
          </Reveal>
          <div className="contact-info">
            <Reveal className="contact-info-item" delay={240}>
              <span className="contact-info-label">Lugar</span>
              <span className="contact-info-val">Auditorio Mar de Vigo</span>
              <span className="contact-info-sub">Avda. Beiramar s/n · Vigo</span>
            </Reveal>
            <Reveal className="contact-info-item" delay={300}>
              <span className="contact-info-label">Fecha</span>
              <span className="contact-info-val">26 septiembre 2026</span>
              <span className="contact-info-sub">Sábado · 09:00 · 20:30</span>
            </Reveal>
            <Reveal className="contact-info-item contact-info-item--full" delay={360}>
              <span className="contact-info-label">Contacto</span>
              <div className="contact-info-links">
                <a className="contact-info-val contact-link" href={CONTACT_MAILTO_URL} data-cursor="Email">
                  {CONTACT_EMAIL}
                </a>
                <a className="contact-info-sub contact-link" href={CONTACT_WHATSAPP_URL} target="_blank" rel="noopener" data-cursor="WhatsApp">
                  {CONTACT_PHONE_DISPLAY}
                </a>
              </div>
            </Reveal>
          </div>
        </div>

        <div className="contact-right">
          <Reveal className="contact-form-wrap" delay={120}>
            {!sent ? (
              <form className="contact-form" onSubmit={submit}>
                <div className="form-tabs">
                  {[
                    { k: "asistente", l: "Asistir" },
                    { k: "patrocinio", l: "Patrocinio" },
                    { k: "prensa", l: "Prensa" },
                  ].map((t) => (
                    <button key={t.k} type="button" className={`form-tab ${form.tipo === t.k ? "is-active" : ""}`} onClick={() => update("tipo", t.k)} data-cursor={t.l}>
                      {t.l}
                    </button>
                  ))}
                </div>

                <div className="form-row">
                  <label className={`form-field ${touched.nombre && !form.nombre ? "is-error" : ""}`}>
                    <span>Nombre completo</span>
                    <input value={form.nombre} onChange={(e) => update("nombre", e.target.value)} onBlur={() => onBlur("nombre")} placeholder="María García" />
                  </label>
                  <label className={`form-field ${touched.email && !emailValid ? "is-error" : ""}`}>
                    <span>Email</span>
                    <input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} onBlur={() => onBlur("email")} placeholder="maria@empresa.com" />
                  </label>
                </div>

                <label className="form-field">
                  <span>Empresa <em>(opcional)</em></span>
                  <input value={form.empresa} onChange={(e) => update("empresa", e.target.value)} placeholder="Nombre de tu empresa" />
                </label>

                <label className={`form-field ${touched.mensaje && form.mensaje.length < 5 ? "is-error" : ""}`}>
                  <span>Cuéntanos brevemente</span>
                  <textarea rows="4" value={form.mensaje} onChange={(e) => update("mensaje", e.target.value)} onBlur={() => onBlur("mensaje")} placeholder="¿A qué te dedicas? ¿Qué esperas del foro?" />
                </label>

                <div className="form-footer">
                  <label className="form-check">
                    <input type="checkbox" defaultChecked />
                    <span>Acepto la política de privacidad y el uso de mis datos para gestionar la reserva.</span>
                  </label>
                  <button type="submit" className={`btn btn-primary btn-lg ${!canSend || sending ? "is-disabled" : ""}`} data-cursor="Enviar">
                    {sending ? "Enviando..." : "Enviar solicitud"}
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                </div>
                {sendError ? <p className="form-status is-error">{sendError}</p> : null}
              </form>
            ) : (
              <div className="contact-sent">
                <div className="contact-sent-icon">
                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12l5 5L20 7"/></svg>
                </div>
                <h3>¡Solicitud recibida!</h3>
                <p>Te hemos enviado un email a <b>{form.email}</b> con la confirmación y los siguientes pasos. Nos vemos en Vigo.</p>
                <div className="contact-sent-actions">
                  <a className="btn btn-ghost" href={CONTACT_MAILTO_URL} data-cursor="Email">
                    Escribir por email
                  </a>
                  <a className="btn btn-ghost" href={CONTACT_WHATSAPP_URL} target="_blank" rel="noopener" data-cursor="WhatsApp">
                    Abrir WhatsApp
                  </a>
                </div>
                <button className="btn btn-ghost" onClick={() => { setSent(false); setSendError(""); setForm({ nombre: "", email: "", empresa: "", mensaje: "", tipo: "asistente" }); }}>
                  Enviar otra solicitud
                </button>
              </div>
            )}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- CTA final ----------
function CTAFinal() {
  return (
    <section className="cta-final">
      <div className="cta-final-inner">
        <Reveal as="h2" className="cta-final-title">
          <span>Galicia </span>
          <span className="cta-final-italic">emprende.</span>
          <span className="cta-final-block"> Y tú, </span>
          <span className="cta-final-italic">¿vienes?</span>
        </Reveal>
        <Reveal className="cta-final-row" delay={120}>
          <a href="#contacto-reservas" className="btn btn-primary btn-xl" data-cursor="Reservar">
            Reservar mi plaza
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
          <div className="cta-final-meta">
            <span className="dot-pulse" />
            Plazas disponibles · Early bird -20%
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-top">
        <div className="footer-brand">
          <img src="assets/logo-blanco.png" alt="Foro Valor Emprendedor" />
          <p>El foro del emprendimiento gallego.<br/>Auditorio Mar de Vigo · 26 sept 2026.</p>
        </div>
        <div className="footer-cols">
          <div>
            <h4>Inicio</h4>
            <a href="/#top">Portada</a>
            <a href="/#foro-emprendimiento">Sobre el foro</a>
            <a href="/#impacto-foro">Impacto</a>
            <a href="/#tematicas-emprendimiento">Temáticas</a>
            <a href="/#ponentes-invitados">Ponentes</a>
            <a href="/#entradas-foro">Entradas</a>
            <a href="/#preguntas-frecuentes">FAQ</a>
          </div>
          <div>
            <h4>Páginas</h4>
            <a href="/">Inicio</a>
            <a href="/agenda/">Agenda</a>
            <a href="/patrocinadores/">Patrocinadores</a>
            <a href="/prensa/">Prensa</a>
          </div>
          <div>
            <h4>Participa</h4>
            <a href="/#contacto-reservas">Reservar plaza</a>
            <a href="/#contacto-reservas">Patrocinar</a>
            <a href="/#contacto-reservas">Prensa</a>
            <a href="/#contacto-reservas">Contacto</a>
          </div>
          <div>
            <h4>Contacto</h4>
            <a href={CONTACT_MAILTO_URL}>{CONTACT_EMAIL}</a>
            <a href={CONTACT_WHATSAPP_URL} target="_blank" rel="noopener">{CONTACT_PHONE_DISPLAY}</a>
            <a href={CONTACT_TEL_URL}>Llamar ahora</a>
            <a href="#">Avda. Beiramar s/n, Vigo</a>
          </div>
          <div>
            <h4>Síguenos</h4>
            <a href={SOCIAL_X_URL} target="_blank" rel="noopener">X</a>
            <a href={SOCIAL_INSTAGRAM_URL} target="_blank" rel="noopener">Instagram</a>
            <a href={SOCIAL_LINKEDIN_URL} target="_blank" rel="noopener">LinkedIn</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Foro Valor Emprendedor · Todos los derechos reservados.</div>
        <div className="footer-legal">
          <a href="#">Aviso legal</a>
          <a href="#">Privacidad</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AnimatedNum, StatsSection, TopicsSection, FAQSection, ContactSection, CTAFinal, Footer });