// Hero.jsx — The Ferals hero section
const Hero = ({ onCta, heroSize = 'large', isMobile, viewport = 'desktop' }) => {
  const isNarrow = isMobile || viewport === 'tablet';
  const headingSize = heroSize === 'large' ? (isNarrow ? 36 : 52) : (isNarrow ? 26 : 36);
  return (
    <section style={{...heroStyles.root, padding: isNarrow ? '48px 20px 40px' : '80px 32px 72px'}}>
      <div style={{...heroStyles.inner, flexDirection: isNarrow ? 'column' : 'row', gap: isNarrow ? 32 : 64}}>
        <div style={heroStyles.content}>
          <div style={heroStyles.eyebrow}>Registered Habitat Bank · Dorset</div>
          <h1 style={{...heroStyles.heading, fontSize: headingSize}}>
            Buy BNG Units –
            Fast, Compliant,
            and Ready for Allocation
          </h1>
          <p style={heroStyles.sub}>
            Developers can buy BNG units directly from our fully registered
            habitat bank in Dorset. Send your metric — we make it simple.
          </p>
          <div style={heroStyles.actions}>
            <a href="#" onClick={(e) => { e.preventDefault(); onCta && onCta('contact'); }}
              style={heroStyles.btnPrimary}
              onMouseEnter={e => e.target.style.background='#fff'}
              onMouseLeave={e => e.target.style.background='rgba(255,255,255,0.15)'}
            >
              Buy BNG Units
            </a>
            <a href="#about" onClick={(e) => { e.preventDefault(); const el = document.getElementById('about-section'); if(el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 72, behavior:'smooth'}); }}
              style={heroStyles.btnSecondary}
            >
              About the site →
            </a>
          </div>
        {!isNarrow && (
          <div style={heroStyles.stats}>
            {[
              { val: '250', unit: 'acres' },
              { val: '470.3', unit: 'BNG units' },
              { val: '4', unit: 'habitat types' },
              { val: '30yr', unit: 'agreement' },
            ].map(s => (
              <div key={s.unit} style={heroStyles.stat}>
                <div style={heroStyles.statVal}>{s.val}</div>
                <div style={heroStyles.statUnit}>{s.unit}</div>
              </div>
            ))}
          </div>
        )}
        </div>
        {!isNarrow && (
          <div style={heroStyles.illustration}>
            <img src="/assets/ferals-logo-full.png" alt="" style={heroStyles.illustrationImg} />
          </div>
        )}
      </div>
    </section>
  );
};

const heroStyles = {
  root: { background: '#3AAFDF', padding: '80px 32px 72px', overflow: 'hidden' },
  inner: { maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 64 },
  content: { flex: 1, minWidth: 0 },
  eyebrow: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 16 },
  heading: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 52, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#fff', marginBottom: 20 },
  sub: { fontFamily: "'Lora',serif", fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.9)', marginBottom: 36, maxWidth: 520 },
  actions: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 48, flexWrap: 'wrap' },
  btnPrimary: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 15, background: 'rgba(255,255,255,0.15)', color: '#fff', border: '1.5px solid rgba(255,255,255,0.6)', padding: '12px 24px', borderRadius: 100, textDecoration: 'none', transition: 'background 0.2s' },
  btnSecondary: { fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 15, color: '#fff', textDecoration: 'none', opacity: 0.9 },
  stats: { display: 'flex', gap: 0, borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: 28 },
  stat: { flex: 1, paddingRight: 24, borderRight: '1px solid rgba(255,255,255,0.15)', marginRight: 24, lastChild: {} },
  statVal: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 32, color: '#fff', lineHeight: 1 },
  statUnit: { fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 12, color: 'rgba(255,255,255,0.65)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 4 },
  illustration: { flexShrink: 0, width: 340, opacity: 0.85 },
  illustrationImg: { width: '100%', display: 'block' },
};

Object.assign(window, { Hero });