// Hero.jsx: Orbital Aerial Solutions
const OASHero = () => {
  const heroStyle = {
    position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center',
    padding: '120px 32px 80px', overflow: 'hidden',
  };
  const bgStyle = {
    position: 'absolute', inset: 0, zIndex: 0,
    background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,184,230,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(0,184,230,0.05) 0%, transparent 60%), var(--bg-page)',
  };
  const gridStyle = {
    position: 'absolute', inset: 0, zIndex: 0, opacity: 0.04,
    backgroundImage: 'linear-gradient(var(--cyan) 2px, transparent 2px), linear-gradient(90deg, var(--cyan) 2px, transparent 2px)',
    backgroundSize: '60px 60px',
  };
  const contentStyle = {
    position: 'relative', zIndex: 1, maxWidth: 900, margin: '0 auto', width: '100%',
  };

  return (
    <section id="hero" style={heroStyle}>
      <div style={bgStyle}></div>
      <div style={gridStyle}></div>
      <div className="hud-scanline"></div>

      <div style={contentStyle}>
        <div className="animate-fade-up delay-1" style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--cyan)', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 20, height: 1, background: 'var(--cyan)', opacity: 0.6 }}></span>
          NDAA COMPLIANT WORKFLOWS · NATIONWIDE DEPLOYMENT
        </div>

        <h1 className="animate-fade-up delay-2" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.05, letterSpacing: '-0.03em', color: 'var(--fg-1)', marginBottom: 28, maxWidth: 780 }}>
          One secure platform for<br />
          <span style={{ color: 'var(--cyan)' }}>critical asset intelligence.</span>
        </h1>

        <p className="animate-fade-up delay-3" style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 2vw, 19px)', color: 'var(--fg-2)', lineHeight: 1.65, maxWidth: 600, marginBottom: 40 }}>
          Translate complex physical sites into unified survey grade 3D models. Purpose built to support critical infrastructure and industrial operations with secure data pipelines, subcentimeter precision, and rigorous regulatory compliance.
        </p>

        <div className="animate-fade-up delay-4" style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <button onClick={() => document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })}
            style={{ background: 'var(--cyan)', color: '#000E14', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, padding: '14px 32px', borderRadius: 4, border: 'none', cursor: 'pointer', transition: 'all 200ms var(--ease)', letterSpacing: '-0.01em' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--cyan-400)'; e.currentTarget.style.boxShadow = '0 0 30px rgba(0,184,230,0.35)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--cyan)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}>
            Request a Demo
          </button>
          <button onClick={() => document.getElementById('services').scrollIntoView({behavior:'smooth'})}
            style={{ background:'transparent', color:'var(--fg-2)', fontFamily:'var(--font-body)', fontSize:15, fontWeight:500, padding:'13px 24px', borderRadius:4, border:'1px solid var(--border)', cursor:'pointer', transition:'all 200ms', display:'flex', alignItems:'center', gap:6 }}
            onMouseEnter={e => { e.currentTarget.style.color='var(--fg-1)'; e.currentTarget.style.borderColor='var(--cyan)'; }}
            onMouseLeave={e => { e.currentTarget.style.color='var(--fg-2)'; e.currentTarget.style.borderColor='var(--border)'; }}>
            View Services
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
          </button>
        </div>

        {/* Stats bar */}
        <div className="hero-stats animate-fade-up delay-5">
          {[['AI Driven', 'Proprietary Analytics'], ['Subcentimeter', 'Geospatial mapping'], ['$10M', 'Specialized liability coverage'], ['Part 107', 'FAA Licensed Operations']].map(([val, lbl], i) => (
            <div key={i} className="hero-stat-item">
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 26px)', color: i === 1 ? 'var(--amber)' : 'var(--fg-1)', letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{val}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)', marginTop: 3 }}>{lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { OASHero });