/* global React, SplitReveal, Reveal, TypeIn, Magnetic */
const { useEffect, useState, useRef } = React;

function Hero() {
  const [scrollY, setScrollY] = useState(0);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const onS = () => setScrollY(window.scrollY);
    const onM = (e) => setMouse({ x: e.clientX / window.innerWidth - 0.5, y: e.clientY / window.innerHeight - 0.5 });
    window.addEventListener('scroll', onS, { passive: true });
    window.addEventListener('mousemove', onM, { passive: true });
    return () => { window.removeEventListener('scroll', onS); window.removeEventListener('mousemove', onM); };
  }, []);
  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      position: 'relative', minHeight: '100vh',
      background: '#FFFFFF',
      overflow: 'hidden', color: '#0B1220',
      display: 'flex', alignItems: 'center',
    }}>
      {/* Dotted grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(14,22,38,0.08) 1px, transparent 1.2px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%)',
        transform: `translate3d(0, ${scrollY * 0.15}px, 0)`,
      }} />
      {/* Floating color orbs */}
      <div style={{
        position: 'absolute', left: '-15%', top: '10%',
        width: 520, height: 520, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(91,169,163,0.22) 0%, transparent 65%)',
        filter: 'blur(20px)',
        transform: `translate3d(${mouse.x * 30}px, ${scrollY * 0.2 + mouse.y * 30}px, 0)`,
        transition: 'transform 600ms cubic-bezier(.16,1,.3,1)',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', right: '-10%', bottom: '-10%',
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(58,123,184,0.18) 0%, transparent 65%)',
        filter: 'blur(30px)',
        transform: `translate3d(${mouse.x * -30}px, ${scrollY * -0.1 + mouse.y * -30}px, 0)`,
        transition: 'transform 600ms cubic-bezier(.16,1,.3,1)',
        pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', maxWidth: 1200, width: '100%', margin: '0 auto', padding: '160px clamp(20px,4vw,48px) 140px' }}>
        {/* Announcement pill */}
        <Reveal y={14} delay={100}>
          <a href="#services" className="nal-announce-pill" style={{
            position: 'relative', overflow: 'hidden',
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 6px 6px 6px',
            background: '#F7F9FB', border: '1px solid #EEF2F6',
            borderRadius: 999, textDecoration: 'none',
            fontSize: 13, color: '#3E4B5E', fontWeight: 500,
            marginBottom: 36,
            transition: 'background 220ms, border-color 220ms, transform 220ms',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = '#D9E0E8'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#F7F9FB'; e.currentTarget.style.borderColor = '#EEF2F6'; }}
          >
            <span className="nal-announce-new" style={{
              position: 'relative',
              padding: '3px 8px', background: '#0B1220', color: '#fff',
              borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 10.5,
              letterSpacing: '0.06em', fontWeight: 600,
            }}>
              <span style={{ position: 'relative', zIndex: 1 }}>NEW</span>
            </span>
            <span className="nal-announce-text">Now offering Go + gRPC engagements</span>
            <span className="nal-announce-arrow" style={{ color: '#8695A8', marginLeft: 2, marginRight: 10, display: 'inline-block', transition: 'transform 260ms cubic-bezier(.2,.8,.2,1)' }}>→</span>
            <span className="nal-announce-shimmer" aria-hidden="true" />
          </a>
        </Reveal>

        {/* Giant headline */}
        <h1 style={{
          fontSize: 'clamp(56px, 9vw, 128px)', fontWeight: 600, letterSpacing: '-0.045em',
          lineHeight: 0.96, margin: 0, color: '#0B1220',
        }}>
          <div>
            <SplitReveal text="Backend & cloud," delay={200} step={45} />
          </div>
          <div>
            <SplitReveal text="built to last." delay={450} step={45} style={{ color: '#8695A8', fontStyle: 'italic', fontWeight: 400 }} />
          </div>
        </h1>

        <div className="nal-hero-grid" style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'end' }}>
          <Reveal delay={900} y={16}>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: '#3E4B5E', maxWidth: 560, margin: 0, fontWeight: 400 }}>
              A decade of shipping production systems in <Pill>Node.js</Pill>, <Pill>Python</Pill>, and <Pill>Go</Pill> deployed on <Pill>AWS</Pill> and <Pill>GCP</Pill>. We write services that stay up, scale cleanly, and don't need a 40-page runbook.
            </p>
          </Reveal>

          <Reveal delay={1050} y={16}>
            <div data-nal="hero-ctas" style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
              <Magnetic strength={10}>
                <a href="#contact" style={{
                  fontWeight: 600, fontSize: 15,
                  background: '#0B1220', color: '#fff', border: 0,
                  padding: '15px 22px', borderRadius: 999, cursor: 'pointer', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  transition: 'background 220ms',
                }}
                  onMouseEnter={e => e.currentTarget.style.background = '#172232'}
                  onMouseLeave={e => e.currentTarget.style.background = '#0B1220'}
                >Start a project <span style={{ fontSize: 17 }}>↗</span></a>
              </Magnetic>
              <a href="#services" style={{
                fontWeight: 600, fontSize: 15,
                background: '#fff', color: '#0B1220',
                border: '1px solid #D9E0E8', padding: '14px 22px', borderRadius: 999, cursor: 'pointer',
                textDecoration: 'none', transition: 'border-color 220ms, background 220ms',
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = '#0B1220'; e.currentTarget.style.background = '#F7F9FB'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = '#D9E0E8'; e.currentTarget.style.background = '#fff'; }}
              >See what we do</a>
            </div>
          </Reveal>
        </div>

        {/* Terminal strip */}
        <Reveal delay={1250} y={16}>
          <div style={{
            marginTop: 72,
            background: '#0B1220', color: '#D8E2F2',
            borderRadius: 14, padding: 18,
            boxShadow: '0 30px 80px rgba(14,22,38,0.18), 0 0 0 1px rgba(14,22,38,0.04)',
            fontFamily: 'var(--font-mono)', fontSize: 14,
            display: 'flex', alignItems: 'center', gap: 14,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', gap: 6 }}>
              {['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => (
                <span key={i} style={{ width: 11, height: 11, borderRadius: 999, background: c }} />
              ))}
            </div>
            <span style={{ color: '#6E7D94' }}>~/nal</span>
            <span style={{ color: '#5BA9A3' }}>❯</span>
            <TypeIn text="./deploy --stack backend,cloud --env production --region us-east-1" charMs={22} startDelay={1500} style={{ letterSpacing: '0' }} />
            <span style={{ marginLeft: 'auto', fontSize: 11, color: '#6E7D94', letterSpacing: '0.08em' }}>LIVE · 99.98% uptime</span>
          </div>
        </Reveal>

        {/* Stats strip */}
        <div className="nal-hero-stats" style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid #EEF2F6', paddingTop: 36 }}>
          {[
            { k: '10+', v: 'years shipping production' },
            { k: '40+', v: 'services deployed' },
            { k: '2',   v: 'clouds, zero lock-in' },
            { k: '99.98%', v: 'avg uptime, measured' },
          ].map((s, i) => (
            <Reveal key={i} delay={1400 + i * 90} y={12}>
              <div style={{ paddingLeft: i === 0 ? 0 : 24 }}>
                <div style={{ fontSize: 38, fontWeight: 600, letterSpacing: '-0.03em', color: '#0B1220', lineHeight: 1 }}>{s.k}</div>
                <div style={{ fontSize: 13, color: '#5F6E82', marginTop: 10, lineHeight: 1.4 }}>{s.v}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      {/* Scroll cue */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: '#8695A8', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        opacity: Math.max(0, 1 - scrollY / 200),
      }}>
        <span>scroll</span>
        <span style={{ width: 1, height: 32, background: 'linear-gradient(180deg,#8695A8,transparent)', animation: 'nal-scroll-cue 2s ease-in-out infinite' }} />
      </div>
    </section>
  );
}

function Pill({ children }) {
  return (
    <span style={{
      display: 'inline-block', padding: '1px 8px', margin: '0 1px',
      background: '#F7F9FB', border: '1px solid #EEF2F6',
      borderRadius: 6, fontSize: 14, fontWeight: 500, color: '#0B1220',
      fontFamily: 'var(--font-mono)',
    }}>{children}</span>
  );
}

window.Hero = Hero;