import React, { useState } from 'react'
import Link from 'next/link'
import Logo from '/public/images/Logo copy.svg'
import Practices from '../../api/Practices';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
import styled from 'styled-components';
import SocialMediaButtons from '../SocialMediaButtonsIcon/SocialMediaButtonsIcon';
import { FaFacebookMessenger, FaTelegramPlane, FaWhatsapp } from 'react-icons/fa';
const StyledLink = styled(Link)`
  color: #fff;
  font-size: 1.2rem;
  padding: 0.3rem;
  text-decoration: none;

  &:hover {
      color: #cdb091;
  }
`;
const Footer = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("Footer");
    const [email, setEmail] = useState("");
    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }

    const SubmitHandler = (e) => {
        e.preventDefault()
        const message = `i Need To Subscribe my email is ${email}`;
        const phoneNumber = '201226670794'; // Replace with your WhatsApp number
        const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

        window.open(whatsappUrl, '_blank');

    }

    return (
        <footer className="wpo-site-footer">
            <div className="wpo-upper-footer">
                <div className="container">
                    <div className="row">
                        <div className="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div className="widget about-widget">
                                <div style={{ textAlign: "center", marginBottom: "1rem" }}>
                                    <Image style={{ width: "50%" }} src={Logo} alt="blog" />
                                </div>
                                <p style={{ textAlign: "center" }}>{t("footer_description")}</p>
                                <SocialMediaButtons />
                                {/* <ul>
                                    <li>
                                        <Link onClick={ClickHandler} href="https://web.facebook.com">
                                            <i className="ti-facebook"></i>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link onClick={ClickHandler} href="https://x.com">
                                            <i className="ti-twitter-alt"></i>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link onClick={ClickHandler} href="https://www.linkedin.com">
                                            <i className="ti-linkedin"></i>
                                        </Link>
                                    </li>
                                    <li>
                                        <Link onClick={ClickHandler} href="https://www.instagram.com">
                                            <i className="ti-instagram"></i>
                                        </Link>
                                    </li>
                                </ul> */}

                            </div>
                        </div>
                        <div className="col col-lg-3 offset-lg-1 col-md-6 col-sm-12 col-12">
                            <div className="widget link-widget">
                                <div className="widget-title">
                                    <h3>{t("footer_quick_links")}</h3>
                                </div>
                                {
                                    locale === "en" ?
                                        <ul>
                                            <li><Link onClick={ClickHandler} href="/">{t("footer_home_link")}</Link></li>
                                            <li><Link onClick={ClickHandler} href="/about">{t("footer_about_link")}</Link></li>
                                            {/* <li><Link onClick={ClickHandler} href="/">{t("footer_team_link")}</Link></li> */}
                                            <li><Link onClick={ClickHandler} href="/services">{t("footer_services_link")}</Link></li>
                                            <li><Link onClick={ClickHandler} href="/clients">{t("footer_clients_link")}</Link></li>
                                            <li><Link onClick={ClickHandler} href="/contact">{t("footer_contact_link")}</Link></li>
                                            <li><Link onClick={ClickHandler} href="/blog-list">{t("footer_researches_link")}</Link></li>
                                        </ul>
                                        :
                                        <>
                                            <div>
                                                <li><StyledLink onClick={ClickHandler} href="/">{t("footer_home_link")}</StyledLink></li>
                                                <li><StyledLink onClick={ClickHandler} href="/about">{t("footer_about_link")}</StyledLink></li>
                                                {/* <li><StyledLink onClick={ClickHandler} href="/">{t("footer_team_link")}</StyledLink></li> */}
                                                <li><StyledLink onClick={ClickHandler} href="/services">{t("footer_services_link")}</StyledLink></li>
                                                <li><StyledLink onClick={ClickHandler} href="/clients">{t("footer_clients_link")}</StyledLink></li>
                                                <li><StyledLink onClick={ClickHandler} href="/contact">{t("footer_contact_link")}</StyledLink></li>
                                                <li><StyledLink onClick={ClickHandler} href="/blog-list">{t("footer_researches_link")}</StyledLink></li>
                                            </div>
                                        </>
                                }
                            </div>
                        </div>
                        {/* <div className="col col-lg-3 col-md-6 col-sm-12 col-12">
                            <div className="widget link-widget s2">
                                <div className="widget-title">
                                    <h3>Practice Area</h3>
                                </div>
                                <ul>
                                    {Practices.map((practice, Sitem) => (
                                        <li key={Sitem}><Link onClick={ClickHandler} href={'/practice/[slug]'} as={`/practice/${practice.slug}`}>{practice.sTitle}</Link></li>
                                    ))}
                                </ul>
                            </div>
                        </div> */}
                        <div className="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div className="widget newsletter-widget">
                                <div className="widget-title">
                                    <h3>{t("footer_news_letter")}</h3>
                                </div>
                                <form onSubmit={SubmitHandler}>
                                    <div className="input-1">
                                        <input type="email" className="form-control" placeholder={`${t("footer_email_address")}`}
                                            required="" />
                                    </div>
                                    <div className="submit clearfix">
                                        <button type="submit">{t("footer_subscribe")}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style={{ direction: "ltr" }} className="wpo-lower-footer">
                <div className="container">
                    <div className="row align-items-center">
                        <ul style={{ textAlign: "center" }}>
                            <li>Copyright &copy; 2024 <Link onClick={ClickHandler} href="https://oma-marketing.com/">OMA Markting</Link>. All rights reserved.</li>
                        </ul>
                        {/* <div className="col col-lg-6 col-md-12 col-12">
                            <div className="link">
                                <ul>
                                    <li><Link onClick={ClickHandler} href="/home">Home</Link></li>
                                    <li><Link onClick={ClickHandler} href="/about">About Us</Link></li>
                                    <li><Link onClick={ClickHandler} href="/team">Team</Link></li>
                                    <li><Link onClick={ClickHandler} href="/services">Services</Link></li>
                                </ul>
                            </div>
                        </div> */}
                    </div>
                </div>
            </div>
        </footer>
    )
}

export default Footer;