import React, { useMemo } from 'react';
import Image from 'next/image';
import logo from '../assets/images/wrenchboard-logo-text.png';
import getConfig from '../../Config/config'; // './../../Config/config'
import Link from 'next/link';

function FooterHomeOne({ className }) {
    var site = useMemo(() => getConfig()[0], []);;
    let newDate = new Date().getFullYear()

    return (
        <>
            <section className={`appie-footer-area ${className || ''}`}>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-4 col-md-6">
                            <div className="footer-about-widget">
                                <div className="logo">
                                    <Link href="#">
                                        <Image
                                            src={logo}
                                            width={'175'}
                                            height={'38'}
                                            alt="" 
                                        />
                                    </Link>
                                </div>
                                <p>
                                    {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                </p>
                                <Link href="/service">
                                    Read More <i className="fal fa-arrow-right" />
                                </Link>
                                <div className="social mt-30">
                                    <ul>
                                        <li>
                                            <a href={site.facebook_link}>
                                                <i className="fab fa-facebook-f" />
                                            </a>
                                        </li>
                                        <li>
                                            <a href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
                                                {/* <i className="fab fa-twitter" /> */}
                                                <i className="fab fa-x-twitter"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-2 col-md-6">
                            <div className="footer-navigation">
                                <h4 className="title">Company</h4>
                                <ul>
                                    <li>
                                        <Link href="/about-us">About Us</Link>
                                    </li>
                                    <li>
                                        <Link href="/service">Our Services</Link>
                                    </li>
                                    <li>
                                        <Link href="/use-cases">Use Cases</Link>
                                    </li>
                                    <li className='d-none'>
                                        <a target='_blank' href={process.env.NEXT_PUBLIC_AGENT_LINK}>Agent</a>
                                    </li>
                                    <li>
                                        <Link href="/blog">Blog</Link>
                                    </li>
                                   
                                </ul>
                            </div>
                        </div>
                        <div className="col-lg-3 col-md-6">
                            <div className="footer-navigation">
                                <h4 className="title">Support</h4>
                                <ul>
                                    <li>
                                        <Link href="/contact">Contact</Link>
                                    </li>
                                    <li>
                                        <Link href="/faq">Faqs</Link>
                                    </li>
                                    <li>
                                        <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                    </li>
                                    <li>
                                        <Link href="/privacy">Privacy Policy</Link>
                                    </li>
                                    <li>
                                        <Link href="/terms">Terms of use</Link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className="col-lg-3 col-md-6">
                            <div className="footer-widget-info">
                                <h4 className="title">Get In Touch</h4>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <i className="fal fa-envelope" /> {site.support_email}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i className="fal fa-phone" />  404-855-7966
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i className="fal fa-map-marker-alt" />Atlanta, GA 30339 
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="footer-copyright d-lg-flex align-items-center justify-content-between pt-2">
                                <div className="apps-download-btn">
                                    <ul>
                                        <li>
                                            <a href={process.env.NEXT_PUBLIC_APPLE_APP} target="_blank">
                                                <i className="fab fa-apple" /> Download for iOS
                                            </a>
                                        </li>
                                        <li>
                                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP} target="_blank">
                                                <i className="fab fa-google-play" /> Download for
                                                Android
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div className="copyright-text">
                                    <p>Copyright © {newDate} WrenchBoard. All rights reserved.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}

export default FooterHomeOne;