function Footer() {
  const { Logo } = window.ellarideDesignSystem_c64d4a || {};
  const t = window.t;
  const lang = window.__LANG__ || 'el';

  const groups = [
    [t('footer.g1'), [[t('footer.g1a'), '#how'], [t('footer.g1b'), '#trust'], [t('footer.g1c'), '#trust'], [t('footer.g1d'), '#calc']]],
    [t('footer.g2'), [['Help Center', '#faq-all'], ['Contact Us', 'mailto:info@ellaride.gr'], [t('footer.g2c'), '#faq-all'], ['Company', 'https://www.linkedin.com/company/ellaride']]],
    [t('footer.g3'), [[t('footer.g3a'), '#terms'], [t('footer.g3b'), '#privacy'], [t('footer.g3c'), '#terms'], [t('footer.g3d'), '#privacy']]],
  ];

  const FACEBOOK = 'https://www.facebook.com/profile.php?id=61589219766865';
  const INSTAGRAM = 'https://www.instagram.com/ellaride.gr';
  const TWITTER = 'https://x.com/ellaride';
  const TIKTOK = 'https://www.tiktok.com/@ellaride';
  const LINKEDIN = 'https://www.linkedin.com/company/ellaride';

  const ext = (href) => /^https?:/.test(href);

  return (
    <footer className="bg-white border-t border-[#e5e5e5] pt-16 pb-10 font-sans text-[#171717]">
      <div className="max-w-[1140px] mx-auto px-4 md:px-10">
        
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
          
          {/* Brand Col */}
          <div className="md:col-span-1">
            <a href="#" className="flex items-center no-underline group">
              <span className="text-2xl tracking-tight" style={{fontFamily:"'DM Sans',sans-serif"}}>
                <span className="font-extrabold text-[#0096F7]">ella</span>
                <span className="font-normal text-[#171717]">ride</span>
              </span>
            </a>
            <p className="mt-4 text-sm text-[#6a6a6a] leading-relaxed max-w-[280px]">
              {t('footer.tagline')}
            </p>
            <a href="mailto:info@ellaride.gr" className="inline-block mt-3 text-sm font-semibold text-[#0096F7] no-underline">
              info@ellaride.gr
            </a>

            {/* All Social Buttons */}
            <div className="flex gap-2 mt-5 flex-wrap">
              {/* Facebook */}
              <a href={FACEBOOK} target="_blank" rel="noopener noreferrer" aria-label="Facebook" title="Facebook"
                className="w-9 h-9 rounded-xl bg-[#f3f3f3] hover:bg-[#0096F7] hover:text-white text-[#171717] flex items-center justify-center transition-colors">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.2C16.4 2.1 15.4 2 14.4 2 11.9 2 10.2 3.5 10.2 6.4v2.1H7.5V12h2.7v10h3.5V12h2.6l.4-3.5H14z"/></svg>
              </a>

              {/* Instagram */}
              <a href={INSTAGRAM} target="_blank" rel="noopener noreferrer" aria-label="Instagram" title="Instagram"
                className="w-9 h-9 rounded-xl bg-[#f3f3f3] hover:bg-[#0096F7] hover:text-white text-[#171717] flex items-center justify-center transition-colors">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>
              </a>

              {/* X / Twitter */}
              <a href={TWITTER} target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)" title="X (Twitter)"
                className="w-9 h-9 rounded-xl bg-[#f3f3f3] hover:bg-[#0096F7] hover:text-white text-[#171717] flex items-center justify-center transition-colors">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
              </a>

              {/* TikTok */}
              <a href={TIKTOK} target="_blank" rel="noopener noreferrer" aria-label="TikTok" title="TikTok"
                className="w-9 h-9 rounded-xl bg-[#f3f3f3] hover:bg-[#0096F7] hover:text-white text-[#171717] flex items-center justify-center transition-colors">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 1 1-5.2-1.74 2.89 2.89 0 0 1 2.31-2.83V7.64a6.34 6.34 0 0 0-5.46 6.27 6.35 6.35 0 1 0 11.8-3.14V8.69a8.18 8.18 0 0 0 4.77 1.52V6.76a4.85 4.85 0 0 1-1.00-.07z"/></svg>
              </a>

              {/* LinkedIn */}
              <a href={LINKEDIN} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" title="LinkedIn"
                className="w-9 h-9 rounded-xl bg-[#f3f3f3] hover:bg-[#0096F7] hover:text-white text-[#171717] flex items-center justify-center transition-colors">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V23h-4V8zm7.5 0h3.83v2.05h.05c.53-1 1.84-2.05 3.79-2.05 4.05 0 4.8 2.67 4.8 6.14V23h-4v-6.62c0-1.58-.03-3.61-2.2-3.61-2.2 0-2.54 1.72-2.54 3.5V23h-4V8z"/></svg>
              </a>
            </div>
          </div>

          {/* Link Groups */}
          {groups.map(([title, items]) => (
            <div key={title} className="md:col-span-1">
              <div className="font-semibold text-xs text-[#171717] uppercase tracking-wider mb-4">
                {title}
              </div>
              <ul className="space-y-2.5 p-0 m-0 list-none text-sm">
                {items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} target={ext(href) ? '_blank' : undefined} rel={ext(href) ? 'noopener noreferrer' : undefined}
                      className="text-[#6a6a6a] hover:text-[#171717] transition-colors no-underline">
                      {label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}

        </div>

        {/* Bottom Disclaimer */}
        <div className="mt-12 pt-6 border-t border-[#f0f0f0] flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-xs text-[#a3a3a3]">
          <p className="m-0 max-w-[640px] leading-relaxed">
            {lang === 'el' ? (
              <span>Το <span className="font-bold text-[#0096F7]">ella</span><span className="font-normal text-[#171717]">ride</span> διευκολύνει το μοιρασμό εξόδων μεταξύ ιδιωτών (cost-sharing) και δεν αποτελεί εμπορική μεταφορά ή υπηρεσία ταξί. Οι οδηγοί δεν λειτουργούν κερδοσκοπικά · καλύπτουν μέρος των εξόδων της διαδρομής.</span>
            ) : (
              <span><span className="font-bold text-[#0096F7]">ella</span><span className="font-normal text-[#171717]">ride</span> facilitates cost-sharing between private individuals and is not commercial transport or a taxi service. Drivers do not operate for profit; they recover part of the trip’s costs.</span>
            )}
          </p>
          <span className="whitespace-nowrap">© 2026 <span className="font-bold text-[#0096F7]">ella</span><span className="font-normal text-[#171717]">ride</span></span>
        </div>

      </div>
    </footer>
  );
}

window.Footer = Footer;