import Link from "next/link";
import { siteConfig } from "@/data/site-content";
import { BrandLogo } from "@/components/brand-logo";

export function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer-top">
          <div className="footer-brand">
            <Link href="/" className="brand" aria-label={siteConfig.name}>
              <span className="brand-mark brand-mark-logo" aria-hidden="true">
                <BrandLogo />
              </span>
            </Link>
            <p className="footer-description">
              South Texas's premier masonry and landscaping supply yard. Providing
              dependable stock, expert advice, and professional delivery since 1990.
            </p>
            <div className="footer-contact-list">
              <div className="footer-contact-item">
                <strong>ADDRESS</strong>
                <span>{siteConfig.address.street}, {siteConfig.address.cityStateZip}</span>
              </div>
              <div className="footer-contact-item">
                <strong>PHONE</strong>
                <a href={siteConfig.phoneHref}>{siteConfig.phoneDisplay}</a>
              </div>
              <div className="footer-contact-item">
                <strong>HOURS</strong>
                <span>Mon – Fri &nbsp;8 AM – 5 PM</span>
              </div>
            </div>
          </div>

          {siteConfig.footerGroups.map((group) => (
            <div key={group.title} className="footer-group">
              <h3 className="footer-group-title">{group.title}</h3>
              <ul className="footer-links">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <Link href={link.href} className="footer-link">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          {/* Map column */}
          <div className="footer-group">
            <span className="footer-group-title">Find Us</span>
            <div className="footer-map-embed">
              <iframe
                src="https://www.google.com/maps?q=5205+Agnes+St,+Corpus+Christi,+TX+78405&output=embed"
                title="Southern Masonry Supply location"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                aria-label="Map showing Southern Masonry Supply at 5205 Agnes St, Corpus Christi TX"
              />
            </div>
            <Link
              href={siteConfig.mapUrl}
              target="_blank"
              rel="noreferrer"
              className="footer-link"
              style={{ display: "inline-block", marginTop: "0.75rem", fontSize: "0.8125rem" }}
            >
              Open in Google Maps →
            </Link>
          </div>
        </div>

        <div className="site-footer-bottom">
          <div className="footer-bottom-inner">
            <div className="footer-meta">
              <span>&copy; {new Date().getFullYear()} {siteConfig.name}. All Rights Reserved.</span>
            </div>
            <div className="footer-socials">
              {siteConfig.socials.map((social) => (
                <Link
                  key={social.label}
                  href={social.href}
                  target="_blank"
                  rel="noreferrer"
                  className="footer-link"
                >
                  {social.label}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}