const Hero = ({ onNav }) => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => { setTimeout(() => setVisible(true), 80); }, []);

  const words = ["AI-Powered", "Scalable", "Future-Ready"];
  const [wordIdx, setWordIdx] = React.useState(0);
  const [fade, setFade] = React.useState(true);
  React.useEffect(() => {
    const t = setInterval(() => {
      setFade(false);
      setTimeout(() => { setWordIdx(i => (i + 1) % words.length); setFade(true); }, 350);
    }, 2800);
    return () => clearInterval(t);
  }, []);

  const anim = (delay = 0) => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateY(0)' : 'translateY(22px)',
    transition: `opacity 0.65s ease ${delay}s, transform 0.65s ease ${delay}s`,
  });

  return (
    <section id="home" data-screen-label="01 Home" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', paddingTop: 68 }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: '-5%', right: '5%', width: 640, height: 640, borderRadius: '50%', background: 'radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%)', filter: 'blur(50px)' }}/>
        <div style={{ position: 'absolute', bottom: '10%', left: '-5%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(29,78,216,0.08) 0%, transparent 70%)', filter: 'blur(60px)' }}/>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(37,99,235,0.12) 1px, transparent 1px)', backgroundSize: '36px 36px', maskImage: 'radial-gradient(ellipse 70% 70% at 70% 40%, black 30%, transparent 100%)' }}/>
      </div>

      <div className="inner-wrap hero-inner" style={{ maxWidth: 1200, margin: '0 auto', padding: '80px 32px', position: 'relative', zIndex: 1, width: '100%' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* Left */}
          <div>
            {/* Badge */}
            <div style={{ ...anim(0), display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 100, background: 'rgba(37,99,235,0.08)', border: '1px solid rgba(37,99,235,0.2)', marginBottom: 28 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#2563eb', display: 'block' }}/>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.04em' }}>INTELLIGENT DIGITAL SOLUTIONS</span>
            </div>

            {/* Headline */}
            <h1 style={{ ...anim(0.1), fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 'clamp(38px, 5vw, 68px)', lineHeight: 1.06, color: '#0f172a', letterSpacing: '-0.03em', margin: '0 0 6px' }}>
              We Build{' '}
              <span style={{ color: '#2563eb', opacity: fade ? 1 : 0, transition: 'opacity 0.35s ease', display: 'inline-block' }}>{words[wordIdx]}</span>
            </h1>
            <h1 style={{ ...anim(0.15), fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 'clamp(38px, 5vw, 68px)', lineHeight: 1.06, color: '#0f172a', letterSpacing: '-0.03em', margin: '0 0 24px' }}>
              Technology Solutions
            </h1>

            <p style={{ ...anim(0.25), fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.72, color: '#64748b', maxWidth: 500, margin: '0 0 40px' }}>
              From custom software and AI/ML systems to SaaS platforms and blockchain — we engineer complete digital products that automate operations and scale businesses.
            </p>

            <div style={{ ...anim(0.35), display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button onClick={() => onNav('contact')} style={{
                padding: '13px 30px', borderRadius: 9,
                background: 'linear-gradient(135deg, #1d4ed8, #2563eb)',
                border: 'none', cursor: 'pointer',
                fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 600, color: '#fff',
                boxShadow: '0 6px 20px rgba(29,78,216,0.35)',
                transition: 'all 0.2s',
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 28px rgba(29,78,216,0.5)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 6px 20px rgba(29,78,216,0.35)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                Start a Project →
              </button>
              <button onClick={() => onNav('services')} style={{
                padding: '13px 30px', borderRadius: 9,
                background: '#fff',
                border: '1.5px solid rgba(0,0,0,0.12)', cursor: 'pointer',
                fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 600, color: '#334155',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                transition: 'all 0.2s',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.color = '#1d4ed8'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.12)'; e.currentTarget.style.color = '#334155'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                Explore Services
              </button>
            </div>

            {/* Stats */}
            <div className="hero-stats" style={{ ...anim(0.45), display: 'flex', gap: 32, marginTop: 56, paddingTop: 36, borderTop: '1px solid rgba(0,0,0,0.08)', flexWrap: 'wrap' }}>
              {[{ num: '50+', label: 'Projects Delivered' }, { num: '3×', label: 'Avg. Efficiency Gain' }, { num: '99%', label: 'Client Satisfaction' }, { num: '12+', label: 'Industries Served' }].map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 28, fontWeight: 700, color: '#1d4ed8', letterSpacing: '-0.02em' }}>{s.num}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#94a3b8', marginTop: 2 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Visual card stack */}
          <div className="hero-card-col" style={{ ...anim(0.3), position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{ position: 'relative', width: '100%', maxWidth: 420 }}>
              {/* Main card */}
              <div style={{ background: '#fff', borderRadius: 18, padding: '32px', boxShadow: '0 20px 60px rgba(0,0,0,0.1), 0 4px 16px rgba(29,78,216,0.08)', border: '1px solid rgba(0,0,0,0.06)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                  <div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#94a3b8', marginBottom: 4 }}>ACTIVE PROJECTS</div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 32, fontWeight: 700, color: '#0f172a' }}>12</div>
                  </div>
                  <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(37,99,235,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3L20 8V14L11 19L2 14V8L11 3Z" stroke="#2563eb" strokeWidth="1.6" fill="none"/><circle cx="11" cy="11" r="3" fill="#2563eb"/></svg>
                  </div>
                </div>
                {[{ label: 'AI Platform', pct: 78, color: '#2563eb' }, { label: 'SaaS Dashboard', pct: 55, color: '#3b82f6' }, { label: 'Blockchain API', pct: 92, color: '#1d4ed8' }].map(b => (
                  <div key={b.label} style={{ marginBottom: 14 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#475569', fontWeight: 500 }}>{b.label}</span>
                      <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#1d4ed8', fontWeight: 600 }}>{b.pct}%</span>
                    </div>
                    <div style={{ height: 6, borderRadius: 3, background: '#f1f5f9' }}>
                      <div style={{ height: '100%', borderRadius: 3, background: b.color, width: `${b.pct}%`, transition: 'width 1s ease' }}/>
                    </div>
                  </div>
                ))}
              </div>

              {/* Floating badge */}
              <div style={{ position: 'absolute', bottom: -20, right: -20, background: '#fff', borderRadius: 14, padding: '14px 18px', boxShadow: '0 8px 24px rgba(0,0,0,0.1)', border: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(37,99,235,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><polyline points="2,13 6,8 10,11 16,4" stroke="#2563eb" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <div>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 16, fontWeight: 700, color: '#0f172a' }}>3× ROI</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: '#94a3b8' }}>Avg client return</div>
                </div>
              </div>

              {/* Top floating chip */}
              <div style={{ position: 'absolute', top: -16, left: -16, background: '#1d4ed8', borderRadius: 10, padding: '10px 16px', boxShadow: '0 6px 20px rgba(29,78,216,0.35)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1L13 4.5V9.5L7 13L1 9.5V4.5L7 1Z" stroke="white" strokeWidth="1.4" fill="none"/><circle cx="7" cy="7" r="2" fill="white"/></svg>
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#fff' }}>AI-Powered</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });