/* Rust Truck — site footer. Oxblood ground with wordmark, contact
   details and the Instagram handle. */
(function () {
  const { Wordmark } = window.RustTruckDesignSystem_a832c6;

  function Footer({ lang }) {
    const I = window.RTIcons;
    const el = lang === 'EL';
    const bp = window.useViewport();
    return (
      <footer style={{
        background: 'var(--brick-700)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)',
        color: 'var(--paper-200)', padding: bp.mobile ? '44px 20px 32px' : '56px 32px 36px',
      }}>
        <div style={{
          maxWidth: 'var(--container-lg)', margin: '0 auto',
          display: 'grid', gridTemplateColumns: bp.mobile ? '1fr' : '1.4fr 1fr 1fr', gap: bp.mobile ? 32 : 40, alignItems: 'start',
        }}>
          <div>
            <Wordmark variant="oxblood" size="md" />
            <p style={{ fontFamily: 'var(--font-script)', fontSize: 26, color: 'var(--amber-400)', margin: '14px 0 0', lineHeight: 1.15 }}>
              {el ? 'φέρνουμε το μπαρ σε εσάς' : 'We bring the bar to you'}
            </p>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-label)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--amber-300)', marginBottom: 14 }}>
              {el ? 'Επικοινωνία' : 'Find us'}
            </div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15 }}>
              <li style={{ display: 'flex', gap: 10, alignItems: 'center' }}><I.MapPin size={17} stroke="var(--amber-400)" /> Bristol & the South West</li>
              <li style={{ display: 'flex', gap: 10, alignItems: 'center' }}><I.Mail size={17} stroke="var(--amber-400)" /> hello@rusttruck.co</li>
              <li style={{ display: 'flex', gap: 10, alignItems: 'center' }}><I.Phone size={17} stroke="var(--amber-400)" /> +44 7700 900 142</li>
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-label)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--amber-300)', marginBottom: 14 }}>
              {el ? 'Ακολουθήστε' : 'Follow'}
            </div>
            <a href="https://www.instagram.com/rusttruck" target="_blank" rel="noopener noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none',
                color: 'var(--paper-100)', fontFamily: 'var(--font-label)', fontSize: 12, letterSpacing: '0.08em' }}>
              <I.Instagram size={18} stroke="var(--amber-400)" /> @rusttruck
            </a>
          </div>
        </div>
        <div style={{
          maxWidth: 'var(--container-lg)', margin: '36px auto 0', paddingTop: 20,
          borderTop: '1px solid color-mix(in srgb, var(--paper-50) 14%, transparent)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10,
          fontFamily: 'var(--font-label)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--paper-400)',
        }}>
          <span>© Rust Truck · Mobile Cocktail Bar</span>
          <span>{el ? 'Φτιαγμένο με μεράκι' : 'Made with meraki'}</span>
        </div>
      </footer>
    );
  }

  window.RTFooter = Footer;
})();