// Leonard's Farm: SiteFooter component
// Depends on: Wordmark (js/components/SiteNav.jsx, load first)
// Minimal site footer: wordmark + blurb, quick links, contact.
// No dates anywhere (no year, no "established", no copyright date).
function SiteFooter({
  blurb = 'Growing fruit and vegetables on dryland in Makueni, Kenya, and helping new farmers do the same.',
  columns = [
    { heading: 'Explore', links: [
      { label: 'Our story', href: '#story' },
      { label: 'What we grow', href: '#grow' },
      { label: 'For new farmers', href: '#learn' },
    ]},
    { heading: 'Visit', links: [
      { label: 'Contact us', href: '#contact' },
      { label: 'Directions', href: 'https://maps.app.goo.gl/ejkRxFWeeYRLqtTv6', external: true },
      { label: 'Farm tours', href: '#contact' },
    ]},
  ],
  contact = { phone: '+254 714 206 754', whatsapp: '254714206754', email: 'muleileonard@gmail.com', place: 'Makueni County, Kenya' },
}) {
  const waMsg = "Hello Leonard's Farm, I saw your website and I'd like to know more about your produce.";
  const head = { fontFamily: 'var(--font-body)', fontSize: 'var(--fs-xs)', fontWeight: 'var(--fw-semibold)', letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-300)', marginBottom: 'var(--space-4)' };
  const link = { fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'rgba(255,255,255,0.82)', textDecoration: 'none', display: 'block', padding: '5px 0' };
  return (
    <footer style={{ background: 'var(--green-900)', color: '#fff' }}>
      <div className="lf-footer-grid" style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-9) var(--gutter) var(--space-6)',
        display: 'grid', gridTemplateColumns: 'minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr))', gap: 'var(--space-7)',
      }}>
        <div>
          <Wordmark color="#fff" />
          <p style={{ marginTop: 'var(--space-4)', maxWidth: 320, color: 'rgba(255,255,255,0.78)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-body)' }}>{blurb}</p>
        </div>
        {columns.map((col) => (
          <div key={col.heading}>
            <div style={head}>{col.heading}</div>
            {col.links.map((l) => (
              <a key={l.label} href={l.href} style={link} {...(l.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{l.label}</a>
            ))}
          </div>
        ))}
        <div>
          <div style={head}>Contact</div>
          <a href={`tel:${contact.phone.replace(/\s/g, '')}`} style={link}>{contact.phone}</a>
          <a href={`https://wa.me/${contact.whatsapp.replace(/[^0-9]/g, '')}?text=${encodeURIComponent(waMsg)}`} target="_blank" rel="noopener noreferrer" style={link}>WhatsApp</a>
          <a href={`mailto:${contact.email}`} style={link}>Email us</a>
          <a href="https://maps.app.goo.gl/ejkRxFWeeYRLqtTv6" target="_blank" rel="noopener noreferrer" style={{ ...link, color: 'var(--green-300)' }}>{contact.place}</a>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-4) var(--gutter)', display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', justifyContent: 'space-between', fontSize: 'var(--fs-xs)', color: 'rgba(255,255,255,0.6)' }}>
          <span>Leonard&rsquo;s Farm &middot; Makueni, Kenya</span>
          <span>Turning dry land green.</span>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;