const TECH_MARQUEE = [
  'NEXT.JS', 'REACT', 'TAILWIND', 'THREE.JS', 'AI/ML', 'NODE.JS',
  'POSTGRESQL', 'FIGMA', 'AWS', 'TYPESCRIPT', 'FRAMER MOTION', 'VERCEL'
];

function Hero() {
  const words = "We Build the Digital Backbone of Tomorrow's Business".split(' ');
  return (
    <section
      id="home"
      data-screen-label="01 Hero"
      style={{
        position: 'relative',
        minHeight: '100vh',
        paddingTop: 'calc(var(--nav-h) + 40px)',
        paddingBottom: '40px',
        display: 'flex',
        flexDirection: 'column',
        background: `
          radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,58,255,0.25) 0%, transparent 70%),
          radial-gradient(ellipse 60% 80% at 80% 50%, rgba(0,200,224,0.12) 0%, transparent 70%),
          transparent
        `,
      }}
    >
      <div className="container" style={{
        flex: 1,
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 'clamp(24px, 4vw, 64px)',
        alignItems: 'center',
        position: 'relative',
        zIndex: 1,
      }}>
        <div className="hero-left">
          <div className="reveal" style={{ marginBottom: 28 }}>
            <span className="eyebrow"><span style={{ color: 'var(--stellar-cyan)' }}>≫</span> NEXITURA LABS</span>
          </div>
          <h1 className="reveal" data-delay="1" style={{
            fontFamily: 'Orbitron, sans-serif',
            fontSize: 'clamp(36px, 5.4vw, 72px)',
            lineHeight: 1.08,
            fontWeight: 800,
            letterSpacing: '-0.01em',
            color: 'var(--stardust-white)',
            marginBottom: 24,
            textWrap: 'balance',
          }}>
            {words.map((w, i) => (
              <span key={i} className="hero-word" style={{ animationDelay: `${0.1 + i * 0.06}s` }}>
                {w}{' '}
              </span>
            ))}
          </h1>
          <p className="reveal" data-delay="2" style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(15px, 1.4vw, 20px)',
            lineHeight: 1.8,
            color: 'var(--asteroid-grey)',
            marginBottom: 36,
            maxWidth: 540,
          }}>
            Web &amp; App Development · AI Automation · Design &amp; Strategy — engineered for the next era.
          </p>
          <div className="reveal" data-delay="3" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="#services" className="btn-primary" onClick={(e)=>{e.preventDefault(); document.getElementById('services').scrollIntoView({behavior:'smooth', block:'start'});}}>
              <IconArrowRight size={18} /> See What We Build
            </a>
            <a href="#contact" className="btn-ghost" onClick={(e)=>{e.preventDefault(); document.getElementById('contact').scrollIntoView({behavior:'smooth', block:'start'});}}>
              Get a Free Quote
            </a>
          </div>

          <div className="reveal" data-delay="4" style={{
            marginTop: 56,
            display: 'flex', alignItems: 'center', gap: 18,
          }}>
            <div style={{ display: 'flex' }}>
              {['#0D1B4B', '#6C3AFF', '#00C8E0', '#0A0E1A'].map((c, i) => (
                <div key={i} style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${c}, rgba(0,0,0,0.4))`,
                  border: '2px solid var(--space-void)',
                  marginLeft: i === 0 ? 0 : -10,
                  fontFamily: 'Space Mono', fontSize: 11,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--stardust-white)', fontWeight: 700,
                }}>
                  {['MN','TK','SV','AR'][i]}
                </div>
              ))}
            </div>
            <div>
              <div style={{ fontFamily: 'Syne', fontSize: 14, color: 'var(--stardust-white)', fontWeight: 600 }}>
                Trusted by 50+ teams
              </div>
              <div style={{ fontFamily: 'Space Mono', fontSize: 11, color: 'var(--asteroid-grey)', letterSpacing: '0.12em', marginTop: 2 }}>
                ★★★★★ 4.9 · CRAFT-FIRST DELIVERY
              </div>
            </div>
          </div>
        </div>

        <div className="hero-right">
          <div id="hero-3d-anchor" style={{
            width: '100%',
            aspectRatio: '1 / 1',
            maxWidth: 480,
            margin: '0 auto',
            position: 'relative',
          }}>
            {/* CSS fallback rings — visible behind/around Three.js mesh, decorative */}
            <div className="orbit-rings">
              <div className="orbit-ring r1"></div>
              <div className="orbit-ring r2"></div>
              <div className="orbit-ring r3"></div>
              <div className="orbit-dot"></div>
              {/* coordinate ticks */}
              <div className="orbit-tick" style={{ top: '4%', left: '50%' }}>N</div>
              <div className="orbit-tick" style={{ bottom: '4%', left: '50%' }}>S</div>
              <div className="orbit-tick" style={{ top: '50%', left: '2%' }}>W</div>
              <div className="orbit-tick" style={{ top: '50%', right: '2%' }}>E</div>
            </div>
            {/* corner brackets */}
            <div className="hero-brackets">
              <span className="br tl"></span>
              <span className="br tr"></span>
              <span className="br bl"></span>
              <span className="br br-c"></span>
            </div>
            <div className="hero-meta">
              <div>SYS.NXT</div>
              <div>v2.6.1</div>
            </div>
            <div className="hero-meta hero-meta-b">
              <div>ORBIT.SYNC</div>
              <div>STABLE</div>
            </div>
          </div>
        </div>
      </div>

      {/* Tech marquee strip */}
      <div className="reveal" data-delay="5" style={{
        marginTop: 'clamp(40px, 6vw, 80px)',
        borderTop: '1px solid rgba(0,200,224,0.1)',
        borderBottom: '1px solid rgba(0,200,224,0.1)',
        background: 'rgba(0,200,224,0.04)',
        overflow: 'hidden',
        position: 'relative',
        zIndex: 1,
      }}>
        <div className="marquee-track">
          {[0,1].map(k => (
            <div key={k} className="marquee-group">
              {TECH_MARQUEE.map((t, i) => (
                <React.Fragment key={i}>
                  <span className="marquee-item">{t}</span>
                  <span className="marquee-sep">≫</span>
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .hero-word {
          display: inline-block;
          opacity: 0;
          transform: translateY(20px);
          animation: hero-word-in 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards;
          animation-delay: var(--d, 0s);
        }
        @keyframes hero-word-in {
          to { opacity: 1; transform: translateY(0); }
        }

        .orbit-rings {
          position: absolute; inset: 0;
          perspective: 800px;
          display: grid; place-items: center;
        }
        .orbit-ring {
          position: absolute;
          width: 70%; height: 70%;
          border-radius: 50%;
          border: 1.5px solid rgba(0, 200, 224, 0.18);
          box-shadow: inset 0 0 24px rgba(0, 200, 224, 0.05);
        }
        .orbit-ring.r1 {
          width: 90%; height: 90%;
          transform: rotateX(72deg) rotateZ(0deg);
          animation: ring-spin 18s linear infinite;
          border-color: rgba(0, 200, 224, 0.22);
        }
        .orbit-ring.r2 {
          width: 68%; height: 68%;
          transform: rotateX(72deg) rotateZ(120deg);
          animation: ring-spin 14s linear infinite reverse;
          border-color: rgba(108, 58, 255, 0.25);
        }
        .orbit-ring.r3 {
          width: 48%; height: 48%;
          transform: rotateX(72deg) rotateZ(60deg);
          animation: ring-spin 10s linear infinite;
          border-color: rgba(0, 200, 224, 0.3);
        }
        @keyframes ring-spin {
          from { transform: rotateX(72deg) rotateZ(0deg); }
          to { transform: rotateX(72deg) rotateZ(360deg); }
        }
        .orbit-dot {
          position: absolute;
          width: 14px; height: 14px;
          border-radius: 50%;
          background: var(--stellar-cyan);
          box-shadow: 0 0 24px var(--stellar-cyan), 0 0 60px rgba(0,200,224,0.4);
          animation: pulse 2.4s ease-in-out infinite;
        }
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.4); opacity: 0.7; }
        }
        .orbit-tick {
          position: absolute;
          transform: translate(-50%, -50%);
          font-family: 'Space Mono', monospace;
          font-size: 10px;
          color: rgba(0, 200, 224, 0.6);
          letter-spacing: 0.2em;
        }

        .hero-brackets .br {
          position: absolute;
          width: 28px; height: 28px;
          border: 1.5px solid rgba(0, 200, 224, 0.4);
        }
        .hero-brackets .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
        .hero-brackets .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
        .hero-brackets .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
        .hero-brackets .br-c { bottom: 0; right: 0; border-left: none; border-top: none; }

        .hero-meta {
          position: absolute; top: 8px; left: 40px;
          display: flex; gap: 18px;
          font-family: 'Space Mono', monospace;
          font-size: 10px; letter-spacing: 0.18em;
          color: rgba(0, 200, 224, 0.7);
        }
        .hero-meta-b { top: auto; bottom: 8px; left: auto; right: 40px; }

        .marquee-track {
          display: flex; width: max-content;
          animation: marquee 36s linear infinite;
          padding: 20px 0;
        }
        .marquee-group {
          display: flex; align-items: center;
          padding-right: 0;
        }
        .marquee-item {
          font-family: 'Space Mono', monospace;
          font-size: 13px;
          letter-spacing: 0.18em;
          color: rgba(232,238,255,0.55);
          padding: 0 28px;
          white-space: nowrap;
        }
        .marquee-sep {
          color: var(--stellar-cyan);
          opacity: 0.6;
        }
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }

        @media (max-width: 900px) {
          .hero-right { display: none; }
          #home .container { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;