import Link from "next/link";
import { socialLinks } from "@/data/content";
import { CONTACT } from "@/lib/site";
import { SocialIcon } from "./SocialIcon";

export function Footer() {
  return (
    <footer className="site-footer dotted">
      <div className="container-site">
        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 36 }}>
          <Link href="/">
            <img src="/images/brand/logo-footer.png" alt="Khiyal Architecture Studio" style={{ height: 70, width: "auto" }} />
          </Link>
        </div>
        <div className="footer-cols">
          <div>
            <h3>Appointments</h3>
            <p>For better access to the office, please visit the contact page.</p>
          </div>
          <div>
            <h3>Let&apos;s talk</h3>
            <a href={`mailto:${CONTACT.email}`} className="heading-white">
              {CONTACT.email}
            </a>
          </div>
          <div>
            <h3>Connect with us</h3>
            <div className="social-row">
              {socialLinks.map((item) => (
                <a key={item.label} href={item.href} target="_blank" rel="noreferrer" aria-label={item.label}>
                  <SocialIcon name={item.icon} />
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div className="container-site footer-bottom-bar">
          <div className="footer-bottom-site">Khiyal Architecture Studio</div>
          <a
            href="https://meshkee.com"
            target="_blank"
            rel="noopener noreferrer"
            dir="ltr"
            className="meshkee-credit"
          >
            <span className="meshkee-credit__frame" aria-hidden>
              <span className="meshkee-credit__line meshkee-credit__line--l" />
              <span className="meshkee-credit__line meshkee-credit__line--t" />
              <span className="meshkee-credit__line meshkee-credit__line--r" />
              <span className="meshkee-credit__line meshkee-credit__line--b" />
            </span>
            <img
              src="/images/brand/meshkee-logo-white.png"
              alt="Meshkee"
              className="meshkee-credit__logo"
              width={42}
              height={42}
            />
            <span className="meshkee-credit__text">
              <span className="meshkee-credit__label">Designed And Developed By</span>
              <span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}