portifolio-evandrodevbr/app/components/Footer.tsx

"use client";

import Link from "next/link";
import {
  openCookiePreferences,
  trackEmailClick,
  trackSocialClick,
} from "@/lib/analytics";
import {
  CONTACT_EMAIL,
  INSTAGRAM_URL,
  LINKEDIN_URL,
  type ServiceLink,
} from "@/lib/site-navigation";
import "./conversion.css";
import { Logo } from "./Logo";

const headingClassName =
  "font-mono text-[12px] font-medium uppercase tracking-[0.12em] text-[var(--meta)]";
// min-h-11 no toque; no desktop os links ficam mais juntos para o rodapé não crescer à toa
const linkClassName =
  "inline-flex min-h-11 items-center text-left font-display text-[15px] leading-6 text-[var(--ink-80)] md:min-h-8 underline-offset-4 hover:text-[var(--ink)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ink)]";

export default function Footer({
  serviceLinks = [],
}: {
  /** Os serviços do hub; app/page.tsx os lê de lib/site-content.ts. */
  serviceLinks?: ServiceLink[];
}) {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="border-t border-[var(--border)] bg-[var(--paper)] px-[clamp(20px,6vw,64px)] py-sp-10 text-[var(--ink)]">
      <div className="ds-section-shell">
        <div className="grid gap-sp-8 md:grid-cols-3 md:gap-sp-10">
          <section aria-labelledby="footer-contact-title">
            <p id="footer-contact-title" className={headingClassName}>
              Contato
            </p>
            <ul className="mt-sp-2">
              <li>
                <a
                  href={`mailto:${CONTACT_EMAIL}`}
                  onClick={() => trackEmailClick({ placement: "footer" })}
                  className={`${linkClassName} break-all font-semibold !text-[var(--ink)]`}
                >
                  {CONTACT_EMAIL}
                </a>
              </li>
              <li>
                <a
                  href={LINKEDIN_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={() => trackSocialClick({ network: "linkedin" })}
                  className={linkClassName}
                >
                  LinkedIn
                </a>
              </li>
              <li>
                <a
                  href={INSTAGRAM_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={() => trackSocialClick({ network: "instagram" })}
                  className={linkClassName}
                >
                  Instagram
                </a>
              </li>
            </ul>
            <p className="mt-sp-2 font-display text-[15px] leading-6 text-[var(--meta)]">
              Garuva, SC · Atendimento remoto em todo o Brasil
            </p>
          </section>

          <nav aria-labelledby="footer-services-title">
            <p id="footer-services-title" className={headingClassName}>
              Serviços
            </p>
            <ul className="mt-sp-2">
              {serviceLinks.map((service) => (
                <li key={service.href}>
                  <Link href={service.href} className={linkClassName}>
                    {service.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-labelledby="footer-links-title">
            <p id="footer-links-title" className={headingClassName}>
              Mais
            </p>
            <ul className="mt-sp-2">
              <li>
                <Link href="/cases" className={linkClassName}>
                  Cases
                </Link>
              </li>
              <li>
                <Link href="/privacidade" className={linkClassName}>
                  Privacidade
                </Link>
              </li>
              <li>
                <button
                  type="button"
                  onClick={openCookiePreferences}
                  className={`cv-btn-link ${linkClassName}`}
                >
                  Preferências de cookies
                </button>
              </li>
              <li>
                <Link
                  href="/curriculo"
                  className={`${linkClassName} !text-[14px] !text-[var(--meta)]`}
                >
                  Currículo
                </Link>
              </li>
            </ul>
          </nav>
        </div>

        <div className="mt-sp-8 flex flex-wrap items-center justify-between gap-x-sp-6 gap-y-sp-3 border-t border-[var(--border)] pt-sp-5">
          <a
            href="/#home"
            aria-label="Evandro.dev.br — início"
            className="inline-flex min-h-11 items-center"
          >
            <Logo theme="light" className="w-40" />
          </a>
          <p className="font-display text-[14px] leading-6 text-[var(--meta)]">
            © {currentYear} Evandro Fonseca Junior. Todos os direitos
            reservados.
          </p>
        </div>
      </div>
    </footer>
  );
}