// TAO Design System — Hero Component
// ui_kits/tao-website/Hero.jsx

function Hero({ onNavigate }) {
  return (
    <section style={{ background: TAO_COLORS.deepForest, color: 'white', padding: '120px 32px 100px', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle dot grid */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.06, backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '1fr 380px', alignItems: 'end', gap: 80 }}>
        <div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: TAO_COLORS.sage, marginBottom: 36 }}>The Association Office</div>
          <h1 style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 'clamp(44px, 5.5vw, 76px)', fontWeight: 200, lineHeight: 1.03, letterSpacing: '-0.04em', color: 'white', marginBottom: 0 }}>
            Your organization,<br />
            <span style={{ color: TAO_COLORS.sage }}>expertly managed.</span>
          </h1>
        </div>
        <div style={{ paddingBottom: 8 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 300, lineHeight: 1.8, color: 'rgba(255,255,255,0.55)', marginBottom: 32 }}>
            Year-round management for associations, professional organizations, and member-based groups.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Btn size="md" onClick={() => onNavigate('contact')} style={{ justifyContent: 'space-between', background: TAO_COLORS.olive, color: 'white', border: 'none', borderRadius: 0, width: '100%', padding: '12px 20px' }}>
              Book a Consultation <Icon name="arrow" size={16} />
            </Btn>
            <Btn size="md" variant="secondary" onClick={() => onNavigate('services')} style={{ justifyContent: 'space-between', borderRadius: 0, borderColor: 'rgba(255,255,255,0.18)', background: 'transparent', width: '100%', color: 'rgba(255,255,255,0.55)', padding: '12px 20px' }}>
              Explore Services <Icon name="arrow" size={16} />
            </Btn>
          </div>
        </div>
      </div>
      {/* Stats strip */}
      <div style={{ maxWidth: 1200, margin: '80px auto 0', paddingTop: 40, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', gap: 64, flexWrap: 'wrap' }}>
        {[
          { value: '40+', label: 'Years of Experience' },
          { value: 'Numerous', label: 'Associations & Industries Served' },
          { value: 'Vancouver', label: 'Based' },
          { value: 'Global', label: 'Reach' },
        ].map(stat => (
          <div key={stat.value}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 28, fontWeight: 200, color: 'white', lineHeight: 1, letterSpacing: '-0.025em' }}>{stat.value}</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: TAO_COLORS.sage, marginTop: 6, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{stat.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero });