// components/footer.jsx
// Section 9.2. Footer (Block F). Single horizontal stripe: wordmark + tagline (left),
// inline links (center/right), social icons (far right). Below: copyright line only.

function SiteFooter() {
  const C = window.COPY;
  return (
    <footer className="site-footer" role="contentinfo">
      <div className="container site-footer-inner">
        {/* Wordmark removed in v=124 — footer is now links + social,
            both centered. The hero/header wordmark is the brand
            anchor; the footer doesn't need to repeat it. */}

        <nav className="footer-links" aria-label="Footer">
          {C.footer.links.map((link, i) => (
            <React.Fragment key={link.label}>
              {i > 0 && <span className="footer-link-sep" aria-hidden="true">·</span>}
              {link.isContact ? (
                <ContactLink source="footer" className="footer-link">{link.label}</ContactLink>
              ) : (
                <a href={link.href} className="footer-link">{link.label}</a>
              )}
            </React.Fragment>
          ))}
        </nav>

        <div className="footer-social">
          <a
            href={C.footer.instagramUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="footer-social-icon"
            aria-label="Instagram"
          >
            <IconInstagram />
          </a>
          <a
            href={C.footer.tiktokUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="footer-social-icon"
            aria-label="TikTok"
          >
            <IconTikTok />
          </a>
        </div>
      </div>
      <div className="footer-bottom">
        <p>{C.footer.bottomLine}</p>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;