/* @jsxRuntime classic */
/* global React */

function HeroSection() {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0A0F1E', color: '#fafafa',
      paddingTop: 88, paddingBottom: 128,
      marginTop: -76
    }}>
      {/* Dampened lime glow — upper right */}
      <div style={{
        position: 'absolute', top: -220, right: -200, width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(197,247,79,0.07) 0%, rgba(197,247,79,0.025) 35%, transparent 65%)',
        pointerEvents: 'none', transform: 'translateZ(0)'
      }} />
      {/* Blue glow — lower left for balance */}
      <div style={{
        position: 'absolute', bottom: -260, left: -200, width: 720, height: 720,
        background: 'radial-gradient(circle, rgba(46,90,150,0.18) 0%, rgba(46,90,150,0.06) 35%, transparent 65%)',
        pointerEvents: 'none', transform: 'translateZ(0)'
      }} />
      {/* Grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${typeof window !== 'undefined' && window.__resources && window.__resources.grain || 'assets/grain.svg'})`,
        opacity: 0.04, pointerEvents: 'none', transform: 'translateZ(0)'
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1, paddingTop: 96 }}>
        {/* Eyebrow pill — lime dot stays */}
        <div className="enter" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 14px', borderRadius: 100,
          background: 'rgba(197,247,79,0.10)',
          border: '1px solid rgba(197,247,79,0.35)',
          marginBottom: 28
        }}>
          <span style={{
            display: 'inline-block', width: 8, height: 8, borderRadius: 100,
            background: '#c5f74f',
            animation: 'live-pulse 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite'
          }} />
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: '#c5f74f', letterSpacing: '0.04em'
          }}>IT-Partner für Bau- und Handwerksbetriebe im Rhein-Main-Gebiet</span>
        </div>

        {/* Headline — lime italic accent stays */}
        <h1 className="enter" style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(48px, 6vw, 84px)',
          letterSpacing: '-0.025em', lineHeight: 1.05,
          maxWidth: 1100, margin: 0,
          color: '#fafafa',
          animationDelay: '80ms'
        }}>
          <span style={{ color: '#fafafa', fontStyle: 'normal', fontWeight: 500 }}>Wir digitalisieren den Mittelstand.</span>
          <br />
          <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500 }}>Ohne</span>
          <span style={{ color: '#fafafa', fontStyle: 'normal', fontWeight: 500 }}> Konzern-Theater.</span>
        </h1>

        <p className="enter" style={{
          fontSize: 19, lineHeight: 1.55, color: '#A8B5C8',
          maxWidth: 680, marginTop: 28, marginBottom: 40,
          animationDelay: '160ms'
        }}>
          T.O.M. Connect aus Hattersheim am Main ist der IT-Partner für
          mittelständische Bau- und Handwerksbetriebe im Rhein-Main-Gebiet
          und in der DACH-Region. Bestellsoftware, Managed IT und vernetzte
          Baustellen aus einer Hand.
        </p>

        <div className="enter" style={{
          display: 'flex', gap: 14, flexWrap: 'wrap',
          animationDelay: '240ms'
        }}>
          <a href="https://calendly.com/tomconnect/30min" target="_blank" rel="noopener noreferrer" style={{
            background: '#2E5A96', color: '#fafafa', border: 0, borderRadius: 10,
            padding: '16px 24px', fontFamily: 'var(--font-body)', fontWeight: 500,
            fontSize: 16, cursor: 'pointer', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'all 150ms cubic-bezier(0.2, 0.8, 0.2, 1)'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = '#4A7AB6';
            e.currentTarget.style.boxShadow = '0 0 32px rgba(46,90,150,0.45)';
            e.currentTarget.style.transform = 'translateY(-1px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = '#2E5A96';
            e.currentTarget.style.boxShadow = 'none';
            e.currentTarget.style.transform = 'translateY(0)';
          }}>30-Min Erstgespräch buchen <span>→</span></a>

          <a href="#products" style={{
            background: 'transparent', color: '#fafafa',
            border: '1px solid #2a3850', borderRadius: 10,
            padding: '16px 24px', fontFamily: 'var(--font-body)', fontWeight: 500,
            fontSize: 16, cursor: 'pointer', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'all 150ms'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = '#A8B5C8';e.currentTarget.style.background = '#141a2c';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = '#2a3850';e.currentTarget.style.background = 'transparent';}}>
            Was wir bauen <span>↓</span></a>
        </div>
      </div>
    </section>);

}

window.HeroSection = HeroSection;