// faq-cta.jsx — FAQ, CTA final, footer

function FAQ() {
  const items = [
    {
      q: '¿Qué pasa si una actualización rompe mi sitio?',
      a: 'Antes de cualquier actualización hacemos un snapshot completo del sitio (DB + archivos). Si algo falla, restauramos en minutos. Y la verificación post-update la hace un humano, no un script.',
    },
    {
      q: '¿Necesito cambiar de hosting?',
      a: 'No. WP Guardian funciona sobre tu hosting actual (Hostinger, SiteGround, Kinsta, WPEngine, cPanel, etc). Solo necesitamos credenciales de WordPress y acceso vía WP-CLI o SFTP.',
    },
    {
      q: '¿Cuántos sitios cubre cada plan?',
      a: 'Cada plan cubre 1 sitio. Si tienes varios (agencia, multimarca o portafolio), tenemos descuentos por volumen — escríbenos y armamos un plan a medida.',
    },
    {
      q: '¿Y si mi sitio ya está infectado?',
      a: 'Hacemos un proceso de limpieza inicial (servicio puntual, presupuesto aparte) y a partir de ahí entras al plan que elijas. El objetivo es que no vuelvas a pasar por esto.',
    },
    {
      q: '¿Por qué WordPress y no otros CMS?',
      a: 'Porque WordPress representa el 43% de la web y concentra la mayoría de incidentes de seguridad. Especializarnos en una sola plataforma nos permite tener procesos, herramientas y respuestas mejor afinadas que un servicio genérico.',
    },
    {
      q: '¿Cómo cancelo si no me sirve?',
      a: 'Un email basta. No hay permanencia, no hay penalidades. Pagas el mes en curso y listo. Te entregamos backups completos para que migres a donde quieras.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq">
      <div className="sec-head">
        <span className="eyebrow">Preguntas frecuentes</span>
        <h2 className="display h2">Lo que todos preguntan<br/>antes de empezar.</h2>
      </div>
      <div style={{ maxWidth: 880 }}>
        {items.map((it, i) => (
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <div className="faq-q-text">{it.q}</div>
              <div className="faq-toggle">+</div>
            </div>
            <div className="faq-a">{it.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTAFinal() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/mbdbaywl', {
        method: 'POST',
        body: new FormData(e.target),
        headers: { Accept: 'application/json' },
      });
      setStatus(res.ok ? 'sent' : 'error');
    } catch {
      setStatus('error');
    }
  };

  const field = {
    appearance: 'none', width: '100%', boxSizing: 'border-box',
    padding: '10px 14px', borderRadius: 'var(--r-md)',
    border: '1px solid var(--border)', background: 'rgba(15,29,51,0.6)',
    color: 'var(--text)', fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none',
  };

  return (
    <section className="section tight" id="contacto">
      <div className="cta-strip">
        <div className="cta-strip-inner">
          <div style={{ maxWidth: 480 }}>
            <span className="eyebrow">Diagnóstico gratuito · 24 h</span>
            <h2 className="display h2" style={{ marginTop: 16, fontSize: 'clamp(28px, 3.5vw, 44px)' }}>
              Sabes que necesitas esto.<br/>
              <span style={{ color: 'var(--primary)' }}>Hagamos el diagnóstico.</span>
            </h2>
          </div>

          {status === 'sent' ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, padding: '32px 40px', textAlign: 'center' }}>
              <div style={{ fontSize: 42, color: 'var(--ok)' }}>✓</div>
              <div className="display" style={{ fontSize: 22, color: 'var(--ok)' }}>¡Recibido!</div>
              <div style={{ color: 'var(--text-muted)', fontSize: 14 }}>
                Te respondemos en menos de 24 horas.
              </div>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 300, width: '100%', maxWidth: 380 }}>
              <input name="nombre" type="text" required placeholder="Nombre / empresa" style={field} />
              <input name="url" type="text" required placeholder="URL de tu sitio WordPress" style={field} />
              <input name="email" type="email" required placeholder="Tu email" style={field} />
              <textarea name="mensaje" placeholder="Cuéntanos algo de tu sitio (opcional)" rows={3} style={{ ...field, resize: 'vertical' }} />
              <button
                type="submit"
                disabled={status === 'sending'}
                className="btn btn-primary btn-lg"
                style={{ justifyContent: 'center', opacity: status === 'sending' ? 0.7 : 1, cursor: status === 'sending' ? 'not-allowed' : 'pointer' }}
              >
                {status === 'sending' ? 'Enviando...' : <>Solicitar diagnóstico <ArrowIcon /></>}
              </button>
              {status === 'error' && (
                <div className="mono" style={{ fontSize: 11, color: 'var(--danger)', textAlign: 'center' }}>
                  Error al enviar. Escríbenos a wpguardian@tildecreativa.com
                </div>
              )}
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center' }}>
                respuesta en menos de 24 horas
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div>
            <Logo height={28} />
            <p style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 18, lineHeight: 1.55, maxWidth: 320 }}>
              Sistema de continuidad, seguridad y actualización para WordPress. Mantenemos tu web operativa, protegida y al día — para que tú no tengas que hacerlo.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <span className="pill live"><span className="dot pulse" />Sistema operativo</span>
            </div>
          </div>
          <div>
            <h5>Producto</h5>
            <ul>
              <li><a href="#planes">Planes</a></li>
              <li><a href="#plataforma">Plataforma</a></li>
              <li><a href="#proceso">Cómo funciona</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          {/* <div>
            <h5>Recursos</h5>
            <ul>
              <li><a href="#">Estado de seguridad WP 2026</a></li>
              <li><a href="#">Guía de mantenimiento</a></li>
              <li><a href="#">Casos de estudio</a></li>
              <li><a href="#">Blog</a></li>
            </ul>
          </div> */}
          <div>
            <h5>Contacto</h5>
            <ul>
              <li>hola@wpguardian.com</li>
              <li>+51 999 999 999</li>
              <li>Lima · Perú</li>
              <li><a href="#contacto" style={{ color: 'var(--primary)' }}>Solicitar diagnóstico →</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 WP Guardian · Todos los derechos reservados</span>
          <span>v 1.0.0 · build 2026.05.14</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, CTAFinal, Footer });