import { useTranslations } from 'next-intl';

export function Footer() {
  const t = useTranslations();

  const footerLinks = [
    { labelKey: 'Nav.home', href: '#' },
    { labelKey: 'Nav.solutions', href: '#ecosystem' },
    { labelKey: 'Nav.industries', href: '#destinations' },
    { labelKey: 'Nav.pricing', href: '#pricing' },
    { labelKey: 'Nav.contact', href: '#contact' },
  ];

  const socialLinks = [
    { icon: 'uil-envelope-alt', href: '#' },
    { icon: 'uil-phone', href: '#' },
    { icon: 'uil-youtube', href: '#' },
  ];

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand">
              <a href="#">
                <div className="brand-mark">
                  <img src="/brand/logo-primary.svg" alt="" />
                </div>
              </a>
              <span className="brand-name" style={{ color: '#fff' }}></span>
            </div>
            <p>{t('Footer.desc')}</p>
            <p className="address">{t('Contact.address')}</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h5>{t('Footer.links')}</h5>
              {footerLinks.map((link, i) => (
                <a href={link.href} key={i}>
                  {(t as any)(link.labelKey)}
                </a>
              ))}
            </div>
            <div className="footer-col">
              <h5>{t('Nav.contact')}</h5>
              <a href="mailto:hello@pintumasuk.id">hello@pintumasuk.id</a>
              <a href="tel:+6281234567890">+62 812-3456-7890</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>
            © <span>{new Date().getFullYear()}</span> {t('Footer.copyright')}
          </p>
          <div className="footer-social">
            {socialLinks.map((social, i) => (
              <a href={social.href} key={i}>
                <i className={`uil ${social.icon}`}></i>
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}