// CTAFooter.jsx — "Ready to enter the Next World?" + booking button + footer links

const CTAFooterSection = () => {
  const [hovering, setHovering] = React.useState(false);

  return (
    <>
      {/* CTA Section */}
      <section
        id="cta-footer"
        style={{
          background: 'linear-gradient(180deg, #080f1c 0%, #0B1222 40%, #080f1c 100%)',
          padding: 'clamp(100px, 15vh, 180px) 5vw',
          position: 'relative',
          overflow: 'hidden',
          textAlign: 'center',
        }}
      >
        {/* Animated lime glow orb */}
        <div style={{
          position: 'absolute',
          top: '40%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '700px', height: '500px',
          background: 'radial-gradient(ellipse, rgba(173,255,47,0.07) 0%, rgba(59,130,246,0.04) 50%, transparent 75%)',
          filter: 'blur(60px)',
          pointerEvents: 'none',
          animation: 'ctaGlow 4s ease-in-out infinite',
        }} />

        {/* Star ring decoration */}
        <div style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '600px', height: '600px',
          border: '1px solid rgba(173,255,47,0.04)',
          borderRadius: '50%',
          pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '900px', height: '900px',
          border: '1px solid rgba(59,130,246,0.03)',
          borderRadius: '50%',
          pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative', zIndex: 10 }}>
          {/* Eyebrow */}
          <div style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '8px',
            marginBottom: '28px',
            padding: '6px 16px',
            border: '1px solid rgba(173,255,47,0.2)',
            borderRadius: '100px',
            fontSize: '0.68rem',
            letterSpacing: '0.15em',
            textTransform: 'uppercase',
            color: '#ADFF2F',
            fontFamily: "'DM Sans', sans-serif",
          }}>
            <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: '#ADFF2F', boxShadow: '0 0 8px #ADFF2F' }}></span>
            Limited spots available
          </div>

          {/* Main CTA headline */}
          <h2 style={{
            fontFamily: "'Syne', sans-serif",
            fontSize: 'clamp(2.4rem, 6vw, 5.5rem)',
            fontWeight: 300,
            letterSpacing: '-0.03em',
            lineHeight: 1.05,
            color: '#e8e8e8',
            margin: '0 auto 24px',
            maxWidth: '800px',
          }}>
            Ready to enter<br />
            <span style={{
              background: 'linear-gradient(90deg, #3B82F6, #ADFF2F)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>
              the Next World?
            </span>
          </h2>

          <p style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: 'clamp(0.95rem, 2vw, 1.15rem)',
            color: '#64748B',
            maxWidth: '500px',
            margin: '0 auto 48px',
            lineHeight: 1.7,
          }}>
            Book a free 30-minute strategy call. We'll audit your current site and show you exactly where revenue is leaking.
          </p>

          {/* CTA Button */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
            <button
              onMouseEnter={() => setHovering(true)}
              onMouseLeave={() => setHovering(false)}
              style={{
                fontFamily: "'DM Sans', sans-serif",
                fontSize: '1rem',
                fontWeight: 500,
                letterSpacing: '0.02em',
                padding: '16px 40px',
                borderRadius: '10px',
                background: hovering
                  ? 'linear-gradient(135deg, #ADFF2F, #8fcc00)'
                  : 'rgba(10,18,30,0.85)',
                color: hovering ? '#0B1222' : '#ADFF2F',
                border: `1px solid ${hovering ? 'transparent' : '#30463C'}`,
                cursor: 'pointer',
                boxShadow: hovering
                  ? '0 0 48px rgba(173,255,47,0.5), 0 8px 32px rgba(0,0,0,0.4)'
                  : '0 0 20px rgba(173,255,47,0.12)',
                transform: hovering ? 'scale(1.04)' : 'scale(1)',
                transition: 'all 0.25s ease',
                backdropFilter: 'blur(8px)',
              }}
            >
              Book a Free Strategy Call →
            </button>

            <span style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.78rem',
              color: '#64748B',
              letterSpacing: '0.04em',
            }}>
              No commitment · 30 minutes · Actionable insights guaranteed
            </span>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        background: '#060c16',
        padding: '48px 5vw',
        borderTop: '1px solid rgba(255,255,255,0.05)',
      }}>
        <div style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '24px',
        }}>
          {/* Logo */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <video
              autoPlay
              loop
              muted
              playsInline
              poster="assets/logo-still.jpg"
              style={{
                width: '40px',
                height: '40px',
                objectFit: 'cover',
                display: 'block',
                flexShrink: 0,
                mixBlendMode: 'screen',
              }}
            >
              <source src="assets/logo-loop.webm" type="video/webm" />
              <source src="assets/logo-loop.mp4" type="video/mp4" />
            </video>
            <div>
              <div style={{
                fontFamily: "'Syne', sans-serif",
                fontSize: '0.88rem',
                fontWeight: 600,
                letterSpacing: '0.08em',
                color: '#e8e8e8',
                marginBottom: '2px',
                textTransform: 'uppercase',
              }}>
                Next World Systems
              </div>
              <div style={{
                fontFamily: "'DM Sans', sans-serif",
                fontSize: '0.7rem',
                color: '#64748B',
                letterSpacing: '0.06em',
              }}>
                AI-First Web Agency
              </div>
            </div>
          </div>

          {/* Links */}
          <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>
            {['Services', 'How It Works', 'Case Studies', 'Contact'].map((link) => (
              <a
                key={link}
                href="#"
                style={{
                  fontFamily: "'DM Sans', sans-serif",
                  fontSize: '0.82rem',
                  color: '#64748B',
                  textDecoration: 'none',
                  transition: 'color 0.2s',
                }}
                onMouseEnter={e => e.target.style.color = '#e8e8e8'}
                onMouseLeave={e => e.target.style.color = '#64748B'}
              >
                {link}
              </a>
            ))}
          </div>

          {/* Legal */}
          <div style={{
            fontFamily: "'DM Sans', sans-serif",
            fontSize: '0.72rem',
            color: '#2d3748',
          }}>
            © 2026 Next World Systems
          </div>
        </div>
      </footer>
    </>
  );
};

Object.assign(window, { CTAFooterSection });