'use client'
import React from 'react'
import { assetPath } from "../../utils/assetPath";
import Link from "next/link";
import { useGeneralSettings } from '@/context/GeneralSettingsContext';
import { API_BASE_IMAGE_URL } from 'config';
const envelope = assetPath("/assets/images/envelope.svg");
const mapMarker = assetPath("/assets/images/map-marker.svg");
const phoneCall = assetPath("/assets/images/phone-call.svg");

const Footer = () => {
  const { settings, loading } = useGeneralSettings();
  const logoSrc = settings?.logo
    ? API_BASE_IMAGE_URL + settings.fav_icon
    : assetPath("/assets/images/jury_intel_logo.png");
  return (
    <footer className="footercontainer">
      <div className="container">
        <div className="row gx-lg-5 justify-content-between">
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-3 mb-lg-4 pb-lg-4">
            <div className="d-flex flex-column h-100">
              <div className="footerlogo">
                <Link href="/">
                  <img
                    src={assetPath("/assets/images/sidebarlgo.png")}
                    alt="Sidebar Logo"
                  />
                  {/* <img
                    src={logoSrc}
                    alt="Sidebar Logo"
                  /> */}
                </Link>
              </div>
              <div className="footeremailbx">
                <div className="emailbx">
                  <span>Stay Connected </span>
                  <a href={`mailto:${settings?.email || "info@juryintel.com"}`}>
                    {settings?.email || "info@juryintel.com"}
                  </a>
                </div>
                {/* <p>Vestibulum in eleifend diam. Integer et lectus eget tortor tincidunt condimentum in quis mi. Cras efficitur libero tortor, quis dapibus nulla ullamcorper vel.</p> */}
                <p>{settings?.tag_line}</p>
              </div>
            </div>
          </div>
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3 mb-lg-4 pb-lg-4">
            <h3>Quick Links</h3>
            <div className="footernavigation">
              <ul>
                <li className="active">
                  <Link href="/">Home</Link>
                </li>

                <li>
                  <Link href="/how-it-works">How It Works</Link>
                </li>

                <li>
                  <Link href="/features">Features</Link>
                </li>

                <li>
                  <Link href="/pricing">Pricing</Link>
                </li>

                <li>
                  <Link href="/about-us">About</Link>
                </li>

                <li>
                  <Link href="/faq">Faqs</Link>
                </li>

                <li>
                  <Link href="/contact">Contact</Link>
                </li>
              </ul>
              <Link className="default-btn" href="/contact">Request Demo</Link>
            </div>
          </div>
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3 mb-lg-4 pb-lg-4">
            <div className="callinfo">
              <h3 className="m-0">Get In Touch</h3>
              <div className="row">
                <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 mt-sm-4">
                  <div className="ctinfobx">
                    <div className="ctinfoicon">
                      <i className="icon">
                        <img src={mapMarker} alt="" />
                      </i>
                    </div>
                    <div className="ctinfocontent">
                      <h5>Jury Intel</h5>
                      {/* <p className="m-0"><strong>A Mayer Consulting Innovation</strong>, 608 W. 12th Street, Austin, Texas 78701</p> */}
                      <p className="m-0">
                        {settings?.address ||
                          "A Mayer Consulting Innovation, 608 W. 12th Street, Austin, Texas 78701"}
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 mt-sm-4">
                  <div className="ctinfobx">
                    <div className="ctinfoicon">
                      <i className="icon">
                        <img src={envelope} alt="" />
                      </i>
                    </div>
                    <div className="ctinfocontent">
                      <h5>Email</h5>
                      {/* <p className="m-0"><a href="mailto:info@juryintel.com">info@juryintel.com</a></p> */}
                      <p className="m-0">
                        <a href={`mailto:${settings?.email || "info@juryintel.com"}`}>
                          {settings?.email || "info@juryintel.com"}
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 mt-sm-4">
                  <div className="ctinfobx">
                    <div className="ctinfoicon">
                      <i className="icon">
                        <img src={phoneCall} alt="" />
                      </i>
                    </div>
                    <div className="ctinfocontent">
                      <h5>Phone</h5>
                      <p className="m-0">
                        <a href={`tel:${settings?.phone || "(512) 829-185"}`}>
                          {settings?.phone || "(512) 829-185"}
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="copyrightouter">
              <div className="copyright">©{new Date().getFullYear()} <Link href={'/'} >Juryintel</Link>. All Right Reserved.</div>
              <div className="developedbytxt">Developed By: <a target="_blank" rel="nofollow noopener" href="https://www.designstouch.com" title="Delivering Digital Innovations">DesignsTouch</a> </div>
              <div className="socialbtx">
                {/* <Link href="#"><i className="icon icon-facebook"></i></Link>
                <Link href="#"><i className="icon icon-twitter-x"></i></Link>
                <Link href="#"><i className="icon icon-linkedin"></i></Link>
                <Link href="#"><i className="icon icon-instagram"></i></Link> */}
                <Link href={settings?.facebook_link || "#"} target="_blank">
  <i className="icon icon-facebook"></i>
</Link>

<Link href={settings?.twitter_link || "#"} target="_blank">
  <i className="icon icon-twitter-x"></i>
</Link>

<Link href={settings?.linkedin_link || "#"} target="_blank">
  <i className="icon icon-linkedin"></i>
</Link>

<Link href={settings?.instagram_link || "#"} target="_blank">
  <i className="icon icon-instagram"></i>
</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer
