import Link from "next/link"
import { useTranslations } from "next-intl"

export default function MermsFooter() {
    const t = useTranslations("Footer")
    return (
        <>
            <footer id="footer-3" className="pt-100 footer ft-3-ntr" style={{backgroundColor: "#F6FFFB"}}>
                <div className="container">
                    <div className="row">
                        <div className="col-md-6 col-xl-4">
                            <div className="footer-info">
                                <img className="footer-logo" src="/images/logo-pink.png" alt="footer-logo"/>
                            </div>
                            <div>
                                <p>{t("description")}</p>
                            </div>
                        </div>
                        <div className="col-12 col-md-6 col-xl-8 row">
                            <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                <div className="footer-links fl-1">
                                    <h6 className="s-17 w-700">{t("site")}</h6>
                                    <ul className="foo-links clearfix">
                                        <li><p><Link href="/">{t("home")}</Link></p></li>
                                        <li><p><Link href="/about">{t("aboutUs")}</Link></p></li>
                                        <li><p><Link href="/contacts">{t("contactUs")}</Link></p></li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                <div className="footer-links fl-2">
                                    <h6 className="s-17 w-700">{t("resources")}</h6>
                                    <ul className="foo-links clearfix1">
                                        <li><p><Link href="/features">{t("features")}</Link></p></li>
                                        <li><p><Link href="/help-center">{t("helpCenter")}</Link></p></li>
                                        <li><p><Link href="https://blog.mermsemr.com/" target={"_blank"}>{t("ourForum")}</Link></p></li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-6 col-sm-4 col-md-4 col-xl-4">
                                <div className="footer-links fl-3">
                                    <h6 className="s-17 w-700">{t("legal")}</h6>
                                    <ul className="foo-links clearfix1">
                                        <li><p><Link href="/terms">{t("termsOfUse")}</Link></p></li>
                                        <li><p><Link href="/privacy">{t("privacyPolicy")}</Link></p></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div className="bottom-footer">
                        <div className="row row-cols-1 row-cols-md-2 d-flex align-items-center">
                            <div className="col">
                                <div className="footer-copyright">
                                    <p className="p-sm">{t("copyright")} <span>{t("allRightsReserved")}</span></p>
                                </div>
                            </div>
                            <div className="col">
                                <ul className="bottom-footer-socials ico-20 text-end">
                                    <li><Link href={process.env.NEXT_PUBLIC_FACEBOOK_URL}><span className="flaticon-facebook"/></Link></li>
                                    <li><Link href={process.env.NEXT_PUBLIC_TWITTER_URL}><span className="flaticon-twitter"/></Link></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </>
    )
}