import Image from "next/image";
import Link from "next/link";
import { siteConfig } from "@/data/site-config";
import { SocialIcons } from "@/components/shared/SocialIcons";
import { PageContainer } from "@/components/shared/PageContainer";

/**
 * Footer — shared site-wide footer.
 *
 * Renders on every page via layout.tsx.
 * Data sourced from `data/site-config.ts` — no hardcoded links.
 *
 * Structure (from reference):
 *   Left:  Logo · social icons · outline "since 2024" text
 *   Right: Company links column · Services links column
 *   Bottom: Copyright · Terms/Privacy
 */
export function Footer() {
  return (
    <footer className="bg-tenext-dark px-5 pb-10 pt-16 md:pt-20">
      <PageContainer>
        {/* ── Top row: Logo + link columns ── */}
        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr]">
          {/* Brand column */}
          <div className="flex flex-col items-start gap-8">
            <Link href="/" aria-label="Home">
              <Image
                src="/images/tenext/logo-dark.png"
                alt={siteConfig.name}
                width={146}
                height={26}
                className="h-auto w-auto brightness-0 invert"
              />
            </Link>

            <SocialIcons links={siteConfig.socials} />

            {/* Outline "since 2024" decorative text */}
            <span
              className="mt-4 select-none font-sora text-[clamp(48px,6vw,80px)] font-bold leading-none tracking-tight"
              style={{
                WebkitTextStroke: "1px rgba(255,255,255,0.12)",
                WebkitTextFillColor: "transparent",
              }}
            >
              since 2024
            </span>
          </div>

          {/* Company links */}
          <div>
            <h4 className="mb-6 font-sora text-sm font-semibold uppercase tracking-widest text-white">
              Company
            </h4>
            <ul className="flex flex-col gap-3">
              {siteConfig.footerLinks.company.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Services links */}
          <div>
            <h4 className="mb-6 font-sora text-sm font-semibold uppercase tracking-widest text-white">
              Services
            </h4>
            <ul className="flex flex-col gap-3">
              {siteConfig.footerLinks.services.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="text-[15px] text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* ── Bottom bar ── */}
        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-tenext-card-border pt-8 md:flex-row">
          <p className="text-sm text-tenext-text-muted">
            {siteConfig.copyright}
          </p>
          <div className="flex gap-6">
            {siteConfig.legalLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="text-sm text-tenext-text-muted transition-colors duration-300 hover:text-tenext-teal"
              >
                {link.label}
              </a>
            ))}
          </div>
        </div>
      </PageContainer>
    </footer>
  );
}