import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { useTranslation } from 'next-i18next'
import Logo from '/public/images/janahanlaw-logo.png'
import Campaign from '../../api/campaign';

const ClickHandler = () => {
  window.scrollTo(10, 0);
}

const SubmitHandler = (e) => {
  e.preventDefault();
}

const Footer = (props) => {
  const { t } = useTranslation('footer');  // assuming your translations are in footer.json
  const services = t('servicesList', { returnObjects: true }) || [];
  const servicesTitle = t('servicesTitle');
  return (
    <footer className="wpo-site-footer">
      <div className="wpo-upper-footer">
        <div className="container">
          <div className="row">
            {/* About Widget */}
            <div className="col col-lg-3 col-md-6 col-12 col-md-6 col-sm-12 col-12">
              <div className="widget about-widget">
                <div className="logo widget-title">
                  <Link onClick={ClickHandler} className="navbar-brand" href="/">
                    <Image src={Logo} alt={t('logoAlt') || ''} />
                  </Link>
                </div>
                <p>{t('aboutText')}</p>
              </div>
            </div>

            {/* Quick Links */}
            <div className="col col-lg-2 col-md-6 col-12 col-md-6 col-sm-12 col-12">
              <div className="widget link-widget">
                <div className="widget-title">
                  <h3>{t('quickLinksTitle')}</h3>
                </div>
                <ul>
                  <li><Link href="/">{t('home')}</Link></li>
                  <li><Link href="/about">{t('aboutUs')}</Link></li>
                  <li><Link href="/services">{t('services')}</Link></li>
                  <li><Link href="/our-approach">{t('ourApproach')}</Link></li>
                  <li><Link href="/blog">{t('blog')}</Link></li>
                </ul>
              </div>
            </div>

            {/* Services Links */}
            <div className="col col-lg-4 col-md-6 col-12 col-md-6 col-sm-12 col-12">
              <div className="widget link-widget s2">
                <div className="widget-title">
                  <h3>{servicesTitle}</h3>
                </div>
                <ul>
                  {services.slice(0, 5).map((service, index) => (
                    <li key={index}>
                      <Link onClick={ClickHandler} href={`/services/${service.slug}`}>
                        {service.sTitle}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Contact */}
            <div className="col col-lg-3 col-md-6 col-12 col-md-6 col-sm-12 col-12">
              <div className="widget newsletter-widget">
                <div className="widget-title">
                  <h3>{t('contactTitle')}</h3>
                </div>
                <div className="widget about-widget">
                  <ul className="info">
                    <li>
                      <Link href="tel:+1 (305) 330-7413" style={{ color: 'rgb(255 255 255 / 60%)' }}>
                        {t('phone')}: +1 (305) 330-7413
                      </Link>
                    </li>
                    <li>
                      <Link href="mailto:info@janahanlaw.com" style={{ color: 'rgb(255 255 255 / 60%)' }}>
                        {t('email')}: info@janahanlaw.com
                      </Link>
                    </li>
                    {/* Address can be added here if needed */}
                  </ul>
                  <div className="social">
                    <ul>
                      {/* <li>
                        <Link onClick={ClickHandler} href="/" target="_blank" rel="noopener noreferrer">
                          <i className="fi flaticon-facebook-app-symbol"></i>
                        </Link>
                      </li>
                      <li>
                        <Link onClick={ClickHandler} href="/" target="_blank" rel="noopener noreferrer">
                          <i className="fi flaticon-twitter"></i>
                        </Link>
                      </li>
                      <li>
                        <Link onClick={ClickHandler} href="/" target="_blank" rel="noopener noreferrer">
                          <i className="fi flaticon-linkedin"></i>
                        </Link>
                      </li> */}
                      {/* <li>
                        <Link onClick={ClickHandler} href="/" target="_blank" rel="noopener noreferrer">
                          <i className="fi flaticon-instagram-1"></i>
                        </Link>
                      </li> */}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="wpo-lower-footer">
        <div className="container">
          <div className="row text-center align-items-center">
            <div className="col col-lg-12 col-md-12 col-12">
              <ul>
                <li>
                  {t('copyright', { year: new Date().getFullYear() })} {' '}
                  <a
                    href="https://metatroncubesolutions.com/"
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ color: '#c12026' }}
                  >
                    MetatronCube
                  </a>. {t('allRightsReserved')}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer;