const Footer = () => (
  <footer style={{ background: '#0D0D0D', padding: '64px 0 32px', borderTop: '1px solid rgba(232,106,0,0.12)' }}>
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 48px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: '48px', marginBottom: '64px' }} className="mobile-stack">
        {/* Brand column */}
        <div>
          <div style={{ marginBottom: '20px' }}><Logo size="normal" /></div>
          <p style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.4)', lineHeight: 1.75, marginBottom: '28px', maxWidth: '260px' }}>
            Ghana's street fuel brand. Affordable, energetic, built for the hustle. Accra-based, nationwide ambition.
          </p>
          <a href="https://wa.me/233553608947" target="_blank" rel="noreferrer" style={{
            display: 'inline-flex', alignItems: 'center', gap: '8px',
            background: '#1E8449', color: '#F5F0EB',
            padding: '11px 20px',
            fontFamily: "'Space Grotesk', sans-serif", fontWeight: '600', fontSize: '13px',
            textDecoration: 'none', transition: 'background 0.2s',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#26a35a'}
            onMouseLeave={e => e.currentTarget.style.background = '#1E8449'}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.122 1.534 5.857L0 24l6.336-1.511A11.933 11.933 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.819 9.819 0 01-5.001-1.368l-.36-.214-3.73.889.906-3.629-.235-.374A9.818 9.818 0 012.182 12C2.182 6.577 6.577 2.182 12 2.182S21.818 6.577 21.818 12 17.423 21.818 12 21.818z"/></svg>
            055 360 8947
          </a>
        </div>

        {/* Order */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#E86A00', letterSpacing: '3px', marginBottom: '20px' }}>ORDER</div>
          {[['Order Now', 'order.html'], ['Track Order', 'track.html'], ['Reserve Yours', 'reservation.html'], ['Loyalty Card', 'loyalty.html']].map(([label, href]) => (
            <a key={label} href={href} style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none', transition: 'color 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.color = '#F5F0EB'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,235,0.45)'}
            >{label}</a>
          ))}
        </div>

        {/* Info */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#E86A00', letterSpacing: '3px', marginBottom: '20px' }}>INFO</div>
          {[['How It Works', '#how-it-works'], ['Delivery & Policies', 'policies.html'], ['Products', '#products'], ['About Us', '#about']].map(([label, href]) => (
            <a key={label} href={href} style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none', transition: 'color 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.color = '#F5F0EB'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,235,0.45)'}
            >{label}</a>
          ))}
        </div>

        {/* Contact */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#E86A00', letterSpacing: '3px', marginBottom: '20px' }}>CONNECT</div>
          <a href="https://wa.me/233553608947" target="_blank" rel="noreferrer" style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none', transition: 'color 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#F5F0EB'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,235,0.45)'}
          >WhatsApp</a>
          <a href="https://instagram.com/eggboygh" target="_blank" rel="noreferrer" style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none', transition: 'color 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#F5F0EB'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,235,0.45)'}
          >Instagram</a>
          <a href="mailto:hello@eggboygh.com" style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none', transition: 'color 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#F5F0EB'}
            onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,240,235,0.45)'}
          >hello@eggboygh.com</a>
          <a href="https://eggboygh.com" style={{ display: 'block', fontFamily: "'Space Grotesk', sans-serif", fontSize: '14px', color: 'rgba(245,240,235,0.45)', marginBottom: '12px', textDecoration: 'none' }}>eggboygh.com</a>
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        borderTop: '1px solid rgba(245,240,235,0.06)', paddingTop: '28px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px',
      }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: 'rgba(245,240,235,0.2)', letterSpacing: '2px' }}>
          © 2025 EGGBOYGH · ACCRA, GHANA
        </div>
        <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: '16px', color: '#E86A00', letterSpacing: '4px' }}>
          STREET FUEL. BUILT IN GHANA.
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });