// Leonard's Farm Hero section
const LFButton = Button;

// Local farm photo. Swap images/hero.jpg with your own file of the same name to change it.
const HERO_IMG = 'images/hero.jpg';

function Hero() {
  return (
    <section id="top" style={{ position: 'relative', minHeight: '92vh', display: 'flex', flexDirection: 'column', color: '#fff', overflow: 'hidden' }}>
      {/* Field image layer, real photo. Replace images/hero.jpg to change it. */}
      <div className="lf-hero-photo" aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: `#176334 center/cover no-repeat url("${HERO_IMG}")`,
      }} />
      {/* single readability overlay so text stays legible over the photo */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,58,32,0.58) 0%, rgba(15,58,32,0.35) 42%, rgba(15,58,32,0.70) 100%)' }} />

      <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'center' }}>
        <div style={{ width: '100%', maxWidth: 'var(--container)', margin: '0 auto', padding: 'calc(var(--lf-nav-h, 76px) + var(--space-5)) var(--gutter) var(--space-5)' }}>
          <div style={{ maxWidth: 760 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5em', whiteSpace: 'nowrap', padding: '7px 15px', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.28)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', fontWeight: 600 }}>
              <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--lime-400)', flex: 'none' }} />
              Makueni County, Kenya
            </span>
            <h1 style={{ color: '#fff', fontSize: 'var(--fs-display)', letterSpacing: 'var(--ls-display)', marginTop: 'var(--space-5)', textShadow: '0 2px 30px rgba(10,40,20,0.35)' }}>
              We grow life<br />from dry land.
            </h1>
            <p style={{ marginTop: 'var(--space-5)', fontSize: 'var(--fs-lead)', maxWidth: 560, color: 'rgba(255,255,255,0.94)', lineHeight: 'var(--lh-snug)' }}>
              In a semi-arid corner of Kenya, we coax mangoes, oranges, tomatoes
              and greens out of cracked earth: eight crops the year round,
              and hands-on help for new farmers doing the same.
            </p>
            <div style={{ marginTop: 'var(--space-6)', display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
              <LFButton variant="accent" size="lg" href="#contact">Visit the farm</LFButton>
            </div>
          </div>
        </div>
      </div>

      {/* stat strip */}
      <div style={{ position: 'relative', borderTop: '1px solid rgba(255,255,255,0.22)', background: 'rgba(15,58,32,0.28)', backdropFilter: 'blur(6px)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '18px var(--gutter)', display: 'flex', flexWrap: 'wrap', gap: 'var(--space-7)' }}>
          {[['8', 'crops in rotation'], ['365', 'growing days a year'], ['Makueni', 'County, Kenya']].map(([n, l]) => (
            <div key={l} style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.6rem', lineHeight: 1 }}>{n}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'rgba(255,255,255,0.82)', marginTop: 4 }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;