/* global React */
function Hero({ onQuote, onNavigate }) {
  const { Eyebrow, Button } = window.VailuxuryGlassDesignSystem_8a37c5;
  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  return (
    <section style={{ position: 'relative', background: 'var(--ink)', overflow: 'hidden' }}>
      {/* background image, cool-graded */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(https://images.unsplash.com/photo-1620626011761-996317b8d101?w=1800&q=80)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'saturate(0.85) brightness(0.62) contrast(1.02)',
      }} />
      {/* cool teal grade + legibility scrim */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(12,23,25,0.92) 0%, rgba(12,23,25,0.66) 42%, rgba(12,23,25,0.30) 100%)' }} />

      {/* the lit vertical edge that splits the hero */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, bottom: 0, left: '54%', width: '2px',
        background: 'var(--lit-edge-v)',
        animation: reduce ? 'none' : 'lit-shimmer var(--shimmer-dur) var(--ease-glass) infinite',
      }} />

      {/* glazier spec annotations */}
      <div style={{ position: 'absolute', top: '92px', right: 'var(--gutter)', textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.14em', color: 'var(--edge)', opacity: 0.85 }}>10MM TEMPERED</div>
      <div style={{ position: 'absolute', bottom: '120px', right: 'var(--gutter)', fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.14em', color: 'var(--edge)', opacity: 0.7 }}>↕ 78 IN</div>
      <div style={{ position: 'absolute', bottom: '60px', right: 'var(--gutter)', fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.14em', color: 'var(--chrome)', opacity: 0.6 }}>FRAMELESS</div>

      <div style={{
        position: 'relative', maxWidth: 'var(--content-max)', margin: '0 auto',
        padding: 'clamp(5rem, 14vh, 9rem) var(--gutter) clamp(4rem, 10vh, 7rem)',
        minHeight: 'min(86vh, 760px)', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{ maxWidth: '660px' }}>
          <div className="vlx-rise" style={{ animationDelay: '80ms' }}>
            <Eyebrow tone="dark">Edwards · Vail Valley, Colorado</Eyebrow>
          </div>
          <h1 className="vlx-rise" style={{
            animationDelay: '180ms',
            fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 0.98,
            fontSize: 'var(--fs-display-xl)', color: 'var(--text-inv)', margin: '20px 0 0',
          }}>Where Glass<br />Becomes Art</h1>
          <p className="vlx-rise" style={{
            animationDelay: '280ms',
            fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', lineHeight: 1.6,
            color: 'var(--text-inv)', margin: '24px 0 0', maxWidth: '52ch', opacity: 0.92,
          }}>
            <strong style={{ fontWeight: 600 }}>Professional glass and mirror installation across Colorado.</strong> Custom shower doors, mirrors, glass railings, and commercial glass — crafted with precision, installed to perfection.
          </p>
          <div className="vlx-rise" style={{ animationDelay: '380ms', display: 'flex', flexWrap: 'wrap', gap: '14px', marginTop: '36px' }}>
            <Button variant="primary" size="lg" withArrow onClick={onQuote}>Request a Free Quote</Button>
            <Button variant="ghost-inv" size="lg" onClick={() => onNavigate('Gallery')}>Explore Our Work</Button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;