function Footer() {
  const yr = new Date().getFullYear();
  return (
    <footer style={{
      background: 'var(--space-void)',
      borderTop: '1px solid rgba(0,200,224,0.1)',
      padding: '72px 0 28px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="footer-blob" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="footer-grid">
          <div className="footer-col">
            <div className="footer-brand">
              <span style={{ color: 'var(--stellar-cyan)', fontSize: 30 }}>≫</span>
              <span>NEXITURA</span>
            </div>
            <p style={{
              fontFamily: 'Syne', fontSize: 15, fontStyle: 'italic',
              color: 'var(--asteroid-grey)', marginTop: 14, lineHeight: 1.6,
              maxWidth: 280,
            }}>
              Building tomorrow, today. A remote-first studio for ambitious teams.
            </p>
            <div className="footer-orbit">
              <div className="fo-ring"></div>
              <div className="fo-dot"></div>
            </div>
          </div>

          <div className="footer-col">
            <div className="footer-title">NAVIGATION</div>
            <ul className="footer-links">
              {['Home', 'Services', 'About', 'Portfolio', 'Pricing', 'Contact'].map(l => (
                <li key={l}><a href={`#${l.toLowerCase()}`}>{l}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-title">SERVICES</div>
            <ul className="footer-links">
              {['Website Creation', 'App Development', 'AI Automation', 'System Development', 'Social Media', 'Graphic Design'].map(l => (
                <li key={l}><a href="#services">{l}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer-col">
            <div className="footer-title">CONNECT</div>
            <a href="mailto:nexitura@gmail.com" style={{
              fontFamily: 'Syne', fontSize: 15,
              color: 'var(--stardust-white)', display: 'block', marginBottom: 6,
            }}>nexitura@gmail.com</a>
            <a href="https://wa.me/94779533487" target="_blank" rel="noopener noreferrer" style={{
              fontFamily: 'Syne', fontSize: 15,
              color: 'var(--asteroid-grey)', display: 'block', marginBottom: 18,
            }}>+94 77 953 3487</a>

            <div className="social-row">
              <a href="#" aria-label="LinkedIn" className="social-ic"><IconLinkedIn size={20} /></a>
              <a href="#" aria-label="GitHub" className="social-ic"><IconGitHub size={20} /></a>
              <a href="#" aria-label="Behance" className="social-ic"><IconBehance size={20} /></a>
            </div>

            <div style={{
              marginTop: 22,
              padding: '12px 14px',
              border: '1px solid rgba(0,200,224,0.15)',
              borderRadius: 10,
              fontFamily: 'Space Mono',
              fontSize: 11, letterSpacing: '0.16em',
              color: 'var(--asteroid-grey)',
              display: 'flex', gap: 10, alignItems: 'center',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: '#3fdc8a', boxShadow: '0 0 10px #3fdc8a',
                animation: 'pulse-soft 2s infinite',
              }} />
              ACCEPTING Q2 ENGAGEMENTS
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© {yr} Nexitura. All rights reserved.</div>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <a href="#" style={{ color: 'inherit' }}>Privacy</a>
            <a href="#" style={{ color: 'inherit' }}>Terms</a>
            <span style={{ fontFamily: 'Space Mono', color: 'rgba(74,80,112,0.7)' }}>
              Crafted with <span style={{ color: 'var(--stellar-cyan)' }}>≫</span> by Nexitura
            </span>
          </div>
        </div>
      </div>

      <style>{`
        .footer-blob {
          position: absolute;
          width: 600px; height: 600px;
          background: radial-gradient(circle, rgba(108,58,255,0.06), transparent 70%);
          filter: blur(80px);
          bottom: -200px; left: 50%; transform: translateX(-50%);
          pointer-events: none;
        }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
          gap: 48px;
          margin-bottom: 64px;
        }
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
        }
        @media (max-width: 500px) {
          .footer-grid { grid-template-columns: 1fr; }
        }
        .footer-col { position: relative; }
        .footer-brand {
          display: flex; align-items: center; gap: 10px;
          font-family: 'Orbitron', sans-serif;
          font-weight: 800;
          letter-spacing: 0.18em;
          font-size: 22px;
          color: var(--stardust-white);
        }
        .footer-orbit {
          position: relative;
          width: 60px; height: 60px;
          margin-top: 24px;
        }
        .fo-ring {
          position: absolute; inset: 0;
          border-radius: 50%;
          border: 1px solid rgba(0,200,224,0.3);
          animation: spin 12s linear infinite;
        }
        .fo-ring::before {
          content: '';
          position: absolute;
          top: -3px; left: 50%;
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--stellar-cyan);
          box-shadow: 0 0 10px var(--stellar-cyan);
          transform: translateX(-50%);
        }
        .fo-dot {
          position: absolute; top: 50%; left: 50%;
          width: 4px; height: 4px;
          background: var(--nova-purple);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 8px var(--nova-purple);
        }

        .footer-title {
          font-family: 'Space Mono', monospace;
          font-size: 11px; letter-spacing: 0.24em;
          color: var(--stellar-cyan);
          margin-bottom: 20px;
        }
        .footer-links {
          list-style: none; padding: 0; margin: 0;
          display: flex; flex-direction: column; gap: 10px;
        }
        .footer-links a {
          font-family: 'Syne', sans-serif;
          font-size: 14.5px;
          color: rgba(232,238,255,0.6);
          transition: color 0.2s, transform 0.2s;
          display: inline-block;
        }
        .footer-links a:hover {
          color: var(--stellar-cyan);
          transform: translateX(4px);
        }

        .social-row {
          display: flex; gap: 10px;
        }
        .social-ic {
          width: 38px; height: 38px;
          border: 1px solid rgba(0,200,224,0.15);
          border-radius: 10px;
          display: flex; align-items: center; justify-content: center;
          color: var(--asteroid-grey);
          transition: all 0.25s;
        }
        .social-ic:hover {
          color: var(--stellar-cyan);
          border-color: rgba(0,200,224,0.5);
          background: rgba(0,200,224,0.08);
          transform: translateY(-3px);
        }

        .footer-bottom {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.05);
          font-family: 'Syne', sans-serif;
          font-size: 13px;
          color: rgba(74,80,112,0.85);
          gap: 16px;
          flex-wrap: wrap;
        }

        @keyframes pulse-soft {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;