function Hero() {
  return (
    <section id="home" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      position: 'relative', overflow: 'hidden', paddingTop: 64,
    }}>
      {/* Subtle grid bg */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%)',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1, width: '100%', paddingTop: 48, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '55fr 45fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          {/* Left column */}
          <div>
            <div className="eyebrow eyebrow-accent" style={{ marginBottom: 24 }}>
              [NIGERIA → WORLDWIDE]
            </div>

            <h1 style={{
              fontSize: 'clamp(44px, 5.5vw, 80px)', fontWeight: 600,
              letterSpacing: '-0.035em', lineHeight: 1.0,
              marginBottom: 16,
            }}>
              <span style={{ color: 'var(--text-primary)', fontWeight: 500, display: 'block' }}>Global supply of</span>
              <span style={{ color: 'var(--text-primary)', fontWeight: 500, display: 'block' }}>mining equipment</span>
              <span style={{ color: 'var(--text-primary)', fontWeight: 600, display: 'block' }}>spare parts.</span>
            </h1>

            <p style={{ fontSize: 17, fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 20 }}>
              Nigeria{' '}
              <span style={{ color: 'var(--text-tertiary)' }}>·</span>
              {' '}West Africa{' '}
              <span style={{ color: 'var(--text-tertiary)' }}>·</span>
              {' '}Worldwide Delivery
            </p>

            <p style={{
              color: 'var(--text-secondary)', fontSize: 17, lineHeight: 1.65,
              maxWidth: 520, marginBottom: 36,
            }}>
              Reliable supplier of OEM and replacement spare parts for mining, quarry, cement, and heavy industrial equipment. Fast international sourcing and urgent delivery from North America, Europe, Middle East, and Asia.
            </p>

          </div>

          {/* Right column — image */}
          <div style={{ position: 'relative', height: 520 }} className="hero-img-col">
            {/* Left-edge gradient fade */}
            <div style={{
              position: 'absolute', top: 0, left: -2, width: '35%', height: '100%', zIndex: 2,
              background: 'linear-gradient(to right, #0A0A0A 0%, transparent 100%)',
              pointerEvents: 'none',
            }} />
            {/* Bottom fade */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%', zIndex: 2,
              background: 'linear-gradient(to top, #0A0A0A, transparent)',
              pointerEvents: 'none',
            }} />

            <img src="img/main/hero.webp" alt="Mining haul trucks in open pit" loading="eager" fetchpriority="high" decoding="async"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '35% center', borderRadius: 8, display: 'block' }} />

            {/* Grain overlay */}
            <div style={{
              position: 'absolute', inset: 0, borderRadius: 8, zIndex: 1,
              backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noise)\' opacity=\'0.08\'/%3E%3C/svg%3E")',
              opacity: 0.4, mixBlendMode: 'overlay', pointerEvents: 'none',
            }} />


          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .hero-img-col { height: 280px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero });