const Footer = () => (
  <footer className="slf-footer" style={{
    background: 'var(--bg-inverse)', color: 'rgba(245,239,226,0.7)',
    borderTop: '1px solid rgba(245,239,226,0.12)',
    padding: '40px 56px', fontFamily: 'var(--font-sans)', fontSize: 12,
  }}>
    <div style={{ maxWidth: 1320, margin: '0 auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, alignItems: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--cream)' }}>
          Slowley Farm
        </span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span>Luxborough · Watchet · Somerset · TA23 0SB</span>
      </div>
      <div className="slf-footer-links" style={{ display: 'flex', gap: 20 }}>
        <a href="#cottages" style={{ color: 'inherit' }}>Cottages</a>
        <a href="#gallery"  style={{ color: 'inherit' }}>Gallery</a>
        <a href="#faq"      style={{ color: 'inherit' }}>FAQ</a>
        <a href="#contact"  style={{ color: 'inherit' }}>Contact</a>
      </div>
      <div style={{ opacity: 0.6 }}>© Slowley Farm 2026 · Harriet & Richard</div>
    </div>
  </footer>
);

window.Footer = Footer;