/* Footer — navy band with logo, contact, HP endorsement */
(function () {
  function Footer({ t, setPage }) {
    const I = window.KG_INFO;
    const f = t.footer;
    const hi = t.dir === 'hi';
    return (
      <footer style={{ background: 'var(--navy-800)', color: 'var(--text-on-dark-muted)', paddingTop: 'var(--space-9)' }}>
        <div className="kg-container kg-container--wide" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.3fr', gap: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
          <div>
            <img src="../../assets/logos/khandelwal-gas-flame-est.png" alt="Khandelwal Gas · Est. 1984" style={{ height: 76, filter: 'brightness(0) invert(1)', marginBottom: 18 }} />
            <p style={{ fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-body)', fontSize: 'var(--fs-sm)', lineHeight: 1.7, maxWidth: 300 }}>{f.tagline}</p>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 18, background: 'rgba(255,255,255,0.06)', padding: '8px 14px', borderRadius: 'var(--radius-md)' }}>
              <img src="../../assets/logos/hindustan-petroleum-logo.png" alt="HP" style={{ height: 30 }} />
              <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-on-dark)' }}>{t.trust}<br/><b>Hindustan Petroleum</b></span>
            </div>
          </div>
          <div>
            <h4 style={{ color: 'var(--text-on-dark)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wide)', marginBottom: 16 }}>{f.links}</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {[['home', t.nav.home], ['services', t.nav.services], ['book', t.cta_book], ['support', t.nav.support], ['contact', t.nav.contact]].map(([id, l]) => (
                <li key={id}><a onClick={() => setPage(id)} style={{ cursor: 'pointer', color: 'var(--text-on-dark-muted)', fontSize: 'var(--fs-sm)', fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-body)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4 style={{ color: 'var(--text-on-dark)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wide)', marginBottom: 16 }}>{f.reach}</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 13, fontSize: 'var(--fs-sm)' }}>
              <li style={{ display: 'flex', gap: 10 }}><i data-lucide="map-pin" style={{ width: 16, height: 16, color: 'var(--orange-400)', flex: 'none', marginTop: 2 }}></i><span style={{ fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-body)' }}>{I.address}</span></li>
              <li style={{ display: 'flex', gap: 10 }}><i data-lucide="phone" style={{ width: 16, height: 16, color: 'var(--orange-400)', flex: 'none' }}></i><a href={'tel:' + I.phoneRaw} style={{ color: 'var(--text-on-dark)' }}>{I.phone}</a></li>
              <li style={{ display: 'flex', gap: 10 }}><i data-lucide="mail" style={{ width: 16, height: 16, color: 'var(--orange-400)', flex: 'none' }}></i><a href={'mailto:' + I.email} style={{ color: 'var(--text-on-dark)' }}>{I.email}</a></li>
            </ul>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          <div className="kg-container kg-container--wide" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 56, fontSize: 'var(--fs-xs)', fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-body)' }}>
            <span>{f.rights}</span>
            <span>{I.web}</span>
          </div>
        </div>
      </footer>
    );
  }
  window.KGFooter = Footer;
})();