// Footer.jsx — The Ferals site footer
const Footer = ({ onNav }) => {
  const handleNav = (id) => (e) => { e.preventDefault(); onNav && onNav(id); };

  return (
    <footer style={footerStyles.root}>
      <div style={footerStyles.inner}>
        <div style={footerStyles.top}>
          <div style={footerStyles.brand}>
            <img src="/assets/ferals-logo-full.png" alt="The Ferals" style={footerStyles.logo} />
            <p style={footerStyles.tagline}>
              A 250-acre habitat bank in Dorset delivering off-site Biodiversity Net Gain units for development projects.
            </p>
            <p style={footerStyles.location}>Near Blandford Forum, Dorset · Cranborne Chase AONB</p>
          </div>
          <div style={footerStyles.links}>
            <div style={footerStyles.linkCol}>
              <div style={footerStyles.linkHeading}>Site</div>
              {[['home','Home'],['about','About'],['habitats','BNG Units for Sale'],['why','Why Choose Us'],['news','News']].map(([id,label]) => (
                <a key={id} href="#" onClick={handleNav(id)} style={footerStyles.link}>{label}</a>
              ))}
            </div>
            <div style={footerStyles.linkCol}>
              <div style={footerStyles.linkHeading}>Information</div>
              <a href="#" onClick={handleNav('why')} style={footerStyles.link}>BNG explained</a>
              <a href="#" onClick={handleNav('about')} style={footerStyles.link}>What is a habitat bank?</a>
              <a href="https://designatedsites.naturalengland.org.uk/Biodiversity/GainSiteSearch.aspx" target="_blank" rel="noopener noreferrer" style={footerStyles.link}>Natural England register</a>
              <span style={{...footerStyles.link, cursor: 'default', opacity: 0.5}}>Download brochure <span style={{fontSize:11, fontStyle:'italic'}}>(coming soon)</span></span>
            </div>
            <div style={footerStyles.linkCol}>
              <div style={footerStyles.linkHeading}>Contact</div>
          <a href="mailto:bng@the-ferals.co.uk" style={footerStyles.link}>bng@the-ferals.co.uk</a>
              <a href="tel:+447484829987" style={footerStyles.link}>+44 7484 829987</a>
              <a href="#" onClick={handleNav('contact')} style={footerStyles.link}>Send an enquiry</a>
              <div style={{...footerStyles.link, cursor:'default'}}>Tarrant Keyneston, DT11</div>
            </div>
          </div>
        </div>
        <div style={footerStyles.bottom}>
          <div style={footerStyles.legal}>© 2026 The Ferals. All rights reserved.</div>
          <div style={footerStyles.legal}>Tarrant Keyneston, Dorset · bng@the-ferals.co.uk</div>
        </div>
      </div>
    </footer>
  );
};

const footerStyles = {
  root: { background: '#1A3A4A', padding: '64px 32px 32px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  top: { display: 'flex', gap: 64, marginBottom: 48, flexWrap: 'wrap' },
  brand: { flex: '0 0 280px' },
  logo: { height: 48, display: 'block', marginBottom: 16 },
  tagline: { fontFamily: "'Lora',serif", fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, marginBottom: 10 },
  location: { fontFamily: "'Nunito',sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.03em' },
  links: { flex: 1, display: 'flex', gap: 48, flexWrap: 'wrap' },
  linkCol: { display: 'flex', flexDirection: 'column', gap: 8, minWidth: 140 },
  linkHeading: { fontFamily: "'Nunito',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 4 },
  link: { fontFamily: "'Nunito',sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.7)', textDecoration: 'none' },
  bottom: { borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 },
  legal: { fontFamily: "'Nunito',sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)' },
};

Object.assign(window, { Footer });