// Footer — 4-col, deep navy, with full contact and language.
// variant="bottom-only" renders just the copyright/tagline bar (used by the Simple Extra
// page template) instead of duplicating this component for a reduced footer.
const Footer = ({ variant = "full" }) => {
  const bottom = (
    <div className="scl-footer__bottom">
      <div className="scl-micro" style={{ color: "rgba(255,255,255,.55)" }}>
        © {new Date().getFullYear()} Santos Cesar Law Professional Corporation · Toronto, Ontario
      </div>
      <div className="scl-micro" style={{ color: "rgba(255,255,255,.55)" }}>
        {t("footer.tagline")}
      </div>
    </div>
  );

  if (variant === "bottom-only") {
    return (
      <footer id="contato" className="scl-footer">
        <div className="scl-container">{bottom}</div>
      </footer>
    );
  }

  const areas = t("footer.areas");
  const officeLinks = t("footer.officeLinks");
  const addressLines = t("footer.addressLines");
  return (
    <footer id="contato" className="scl-footer">
      <div className="scl-container">
        <div className="scl-footer__top">
          <div className="scl-footer__brand">
            <img src="/assets/seal-only-black.png" alt="" className="scl-footer__mark" />
            <div>
              <div className="scl-footer__name">SANTOS CESAR LAW</div>
              <div className="scl-footer__sub">PROFESSIONAL CORPORATION</div>
            </div>
          </div>
          <a href={scWhatsAppHref()} target="_blank" rel="noopener noreferrer" className="scl-btn scl-btn--primary scl-btn--sm">
              {t("common.ctaPrimary")} <Icon name="arrow-right" size={15} />
          </a>
        </div>

        <span className="scl-footer__divider" />

        <div className="scl-footer__grid">
          <div className="scl-footer__col">
            <div className="scl-footer__head">{t("footer.contactHead")}</div>
            <a href="tel:+14167126090" className="scl-footer__row scl-phone-link">
              <Icon name="phone" size={16} /> {t("common.phone")}
            </a>
            <a href="mailto:info@santoscesarlaw.com" className="scl-footer__row">
              <Icon name="mail" size={16} /> info@santoscesarlaw.com
            </a>
            <div className="scl-footer__row scl-footer__row--multiline">
              <Icon name="map-pin" size={16} />
              <span>{addressLines[0]}<br/>{addressLines[1]}</span>
            </div>
          </div>

          <div className="scl-footer__col">
            <div className="scl-footer__head">{t("footer.areasHead")}</div>
            {areas.map((a, i) => (
              <a key={i} href={scHomeHref("#servicos")} className="scl-footer__link">{a}</a>
            ))}
          </div>

          <div className="scl-footer__col">
            <div className="scl-footer__head">{t("footer.officeHead")}</div>
            {officeLinks.map((l, i) => (
              <a key={i} href={scHomeHref(l.href)} className="scl-footer__link">{l.label}</a>
            ))}
          </div>

          <div className="scl-footer__col">
            <div className="scl-footer__head">{t("footer.otherLanguagesHead")}</div>
            {window.SCL_LANGUAGES.map(l => (
              <a
                key={l.code}
                href={scLocalizedPath(l.code)}
                className={"scl-footer__link" + (l.code === window.SCL_LANG ? " is-active" : "")}
                aria-current={l.code === window.SCL_LANG ? "true" : undefined}
              >
                <Icon name="globe" size={14} /> {l.label}
              </a>
            ))}
            <div className="scl-footer__head" style={{ marginTop: 24 }}>{t("footer.socialHead")}</div>
            <div className="scl-footer__social">
              <a href="https://www.facebook.com/rafaellawyercanada" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
              <a href="https://www.instagram.com/santoscesarlaw/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
              <a href="https://www.tiktok.com/@rsantoscesarlaw" target="_blank" rel="noopener noreferrer" aria-label="TikTok"><Icon name="tiktok" size={18} /></a>
              <a href="https://linkedin.com/company/santos-cesar-law-professional-corporation/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><Icon name="linkedin" size={18} /></a>
              <a href="https://www.youtube.com/@SantosCesarLaw" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><Icon name="youtube" size={18} /></a>
            </div>
          </div>
        </div>

        <span className="scl-footer__divider" />

        {bottom}
      </div>
    </footer>
  );
};

window.Footer = Footer;