const CTASection = () => {
  const [ref, visible] = window.useReveal({ threshold: 0.15 });
  return (
    <section id="contacto" style={{
      padding: 'clamp(60px, 8vh, 100px) clamp(16px, 4vw, 48px)',
      position: 'relative', zIndex: 1,
    }}>
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{ '--reveal-delay': '0ms' }}>
          <OSWindow title="status.log" style={{ maxWidth: 720, margin: '0 auto' }}>
            <div style={{ padding: 'clamp(28px, 4vw, 48px)', background: 'var(--paper-soft)', textAlign: 'center' }}>
              <span className={`reveal ${visible ? 'is-visible' : ''}`} style={{
                fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)',
                letterSpacing: '0.08em', display: 'block',
                '--reveal-delay': '120ms',
              }}>05 — EN EJECUCIÓN</span>
              <h2 className={`reveal ${visible ? 'is-visible' : ''}`} style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 44px)',
                fontWeight: 800, color: '#111', margin: '12px 0 16px', letterSpacing: '-0.02em',
                '--reveal-delay': '210ms',
              }}>¿En qué estoy trabajando ahora?</h2>
              <p className={`reveal ${visible ? 'is-visible' : ''}`} style={{
                fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6,
                color: '#555', maxWidth: 520, margin: '0 auto 32px',
                '--reveal-delay': '300ms',
              }}>
                <span className="status-dot" />
                Ahora mismo estoy centrado en la arquitectura de AproCloud (backup médico en la nube),
                el desarrollo de servidores MCP personalizados y la orquestación de agentes para
                automatización industrial. Mi cuaderno está abierto mientras el código compila.
              </p>
              <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
                display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap',
                '--reveal-delay': '390ms',
              }}>
                <a href="#" className="btn-primary" style={{
                  fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
                  background: '#C13B2E', color: '#F4EFE6',
                  padding: '14px 28px', border: '2px solid #111',
                  textDecoration: 'none', boxShadow: '4px 4px 0 #111',
                }}>Ver proyectos en GitHub</a>
                <a href="#" className="btn-primary" style={{
                  fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600,
                  background: '#F4EFE6', color: '#111',
                  padding: '14px 28px', border: '2px solid #111',
                  textDecoration: 'none', boxShadow: '4px 4px 0 #111',
                }}>Suscribirse al newsletter</a>
              </div>
              <div className={`reveal ${visible ? 'is-visible' : ''}`} style={{
                marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#999',
                '--reveal-delay': '480ms',
              }}>
                También puedes seguir el rastro en hola@xmau.dev
              </div>
            </div>
          </OSWindow>
        </div>
      </div>
    </section>
  );
};

window.CTASection = CTASection;