// Hero — premium advisor layout. Editorial-serif headline (design system),
// two-beat supporting text (credential + bridge), a hairline reading-path
// divider, one CTA. Stippled portrait bleeds into the black on the right.
function Hero() {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100svh', isolation: 'isolate',
      display: 'flex', alignItems: 'center', overflow: 'hidden',
    }}>
      {/* soft halo behind portrait */}
      <div className="hero-glow" style={{
        position: 'absolute', zIndex: -2, top: '50%', right: '4%',
        width: 640, height: 640, transform: 'translateY(-50%)', pointerEvents: 'none',
        background: 'var(--glow-silver)', filter: 'blur(95px)', opacity: 0.15,
      }} />
      {/* the portrait — screens over glow + bg, bleeds into black, no container */}
      <img className="hero-portrait" src="assets/portrait-stipple.png" alt="Portrait of Matthew Grote" style={{
        position: 'absolute', zIndex: -1, top: '50%', right: '-7%',
        height: '100%', width: 'auto', transform: 'translateY(-50%)',
        mixBlendMode: 'screen', pointerEvents: 'none',
      }} />
      {/* scrim keeps the left-side text legible over the dots */}
      <div className="hero-scrim" style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        background: 'linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 36%, rgba(0,0,0,0.9) 48%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.28) 74%, transparent 90%)',
      }} />

      <div style={{ width: '100%', position: 'relative', zIndex: 1, paddingLeft: 'clamp(32px, 8vw, 160px)', paddingRight: 'clamp(20px, 4vw, 56px)', boxSizing: 'border-box' }}>
        <div className="hero-copy" style={{ width: '48%', maxWidth: 600, minWidth: 0, marginTop: 'clamp(16px, 3vh, 36px)', display: 'flex', flexDirection: 'column', gap: 'clamp(26px, 3vh, 34px)' }}>

          <h1 className="rise" style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, margin: 0,
            fontSize: 'clamp(2.5rem, 4.8vw, 4.2rem)', lineHeight: 1.1, letterSpacing: '-0.01em',
            color: 'var(--color-ink)', textWrap: 'balance', animationDelay: '.06s',
          }}>
            You don't need to figure out AI.
            <span className="hero-accent" style={{ display: 'block', marginTop: '0.34em', fontStyle: 'italic', fontWeight: 600, color: 'var(--accent-strong)' }}>You need someone who already has.</span>
          </h1>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p className="rise" style={{
              fontFamily: 'var(--font-body)', fontWeight: 500, margin: 0,
              fontSize: 'clamp(1.15rem, 1.5vw, 1.38rem)', lineHeight: 1.5,
              color: '#f2f2f0', maxWidth: 560, textWrap: 'pretty', animationDelay: '.22s',
            }}>
              I've integrated AI into the operations of Fortune Global 500 companies and federal
              government agencies.
            </p>
            <p className="rise" style={{
              fontFamily: 'var(--font-body)', fontWeight: 400, margin: 0,
              fontSize: 'clamp(1.02rem, 1.3vw, 1.2rem)', lineHeight: 1.62,
              color: 'var(--color-ink-muted)', maxWidth: 560, textWrap: 'pretty', animationDelay: '.32s',
            }}>
              Now I help business owners, executives, and private equity firms get the same
              results — using the same system, applied to your operations.
            </p>
          </div>

          <hr className="hero-divider" style={{
            border: 0, height: 1, width: '100%', maxWidth: 560, margin: 0,
            background: 'linear-gradient(90deg, var(--color-border-strong) 0%, var(--color-border) 70%, transparent 100%)',
            animationDelay: '.46s',
          }} />

          <div className="rise" style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', animationDelay: '.58s' }}>
            <a className="btn-primary" href="https://cal.com/matthew-grote-riqgua/30min" style={{ fontSize: 18, padding: '1.15rem 2.4rem' }}>Book a Call</a>
            <a className="btn-ghost" href="https://www.linkedin.com/in/matthew-grote/" target="_blank" rel="noopener" style={{ fontSize: 18, padding: '1.15rem 2.4rem' }}>Connect on LinkedIn</a>
          </div>

        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;