"use client";

import Link from "next/link";
import { Music2, Video } from "lucide-react";

import { useFooterNav, useMainNav, useSiteSettings } from "@/components/layout/site-data-context";
import { LogoMark } from "@/components/ui/logo-mark";
import { InstagramIcon } from "@/components/social/instagram-icon";
import { instagramNetwork } from "@/lib/constants/instagram";

export function SiteFooter() {
  const siteConfig = useSiteSettings();
  const mainNav = useMainNav();
  const footerNav = useFooterNav();
  return (
    <footer className="border-border/60 bg-muted/20 mt-auto border-t">
      <div className="ds-container py-16 sm:py-20">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-10">
          <div className="lg:col-span-5">
            <div className="flex items-center gap-2.5">
              <LogoMark className="size-9" />
              <p className="font-display text-lg font-semibold tracking-tight">
                {siteConfig.name}
              </p>
            </div>
            <p className="text-muted-foreground mt-4 max-w-md text-sm leading-relaxed">
              {siteConfig.description}
            </p>
            <p className="text-muted-foreground mt-4 max-w-md text-xs leading-relaxed">
              After purchase, WhatsApp coach support unlocks in your dashboard.
            </p>
            <Link
              href="/contact"
              className="text-primary mt-5 inline-flex text-sm font-medium underline-offset-4 hover:underline"
            >
              Contact the team
            </Link>
          </div>

          <div className="grid gap-10 sm:grid-cols-2 lg:col-span-4">
            <div>
              <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
                Product
              </p>
              <ul className="mt-4 space-y-2.5">
                {mainNav.slice(0, 5).map((l) => (
                  <li key={l.href}>
                    <Link
                      className="text-muted-foreground hover:text-foreground text-sm transition-premium"
                      href={l.href}
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
                Company
              </p>
              <ul className="mt-4 space-y-2.5">
                {mainNav.slice(5).map((l) => (
                  <li key={l.href}>
                    <Link
                      className="text-muted-foreground hover:text-foreground text-sm transition-premium"
                      href={l.href}
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="lg:col-span-3">
            <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
              Legal & social
            </p>
            <ul className="text-muted-foreground mt-4 space-y-2 text-sm">
              {footerNav.map((l) => (
                <li key={l.href}>
                  <Link className="hover:text-foreground transition-premium" href={l.href}>
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
            <div className="mt-6 flex flex-wrap gap-2">
              <Link
                href={siteConfig.social.instagram}
                className="border-border bg-background hover:border-primary/40 hover:text-primary flex size-10 items-center justify-center rounded-lg border transition-premium"
                aria-label="Instagram"
              >
                <InstagramIcon className="size-4" />
              </Link>
              <Link
                href={siteConfig.social.youtube}
                className="border-border bg-background hover:border-primary/40 hover:text-primary flex size-10 items-center justify-center rounded-lg border transition-premium"
                aria-label="YouTube"
              >
                <Video className="size-4" />
              </Link>
              <Link
                href={siteConfig.social.tiktok}
                className="border-border bg-background hover:border-primary/40 hover:text-primary flex size-10 items-center justify-center rounded-lg border transition-premium"
                aria-label="TikTok"
              >
                <Music2 className="size-4" />
              </Link>
            </div>
            <ul className="text-muted-foreground mt-4 space-y-1.5 text-xs">
              {instagramNetwork.map((ig) => (
                <li key={ig.handle}>
                  <Link
                    href={ig.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-foreground transition-premium"
                  >
                    @{ig.handle}
                    <span className="text-muted-foreground/70"> · {ig.displayName}</span>
                  </Link>
                </li>
              ))}
            </ul>
            <p className="text-muted-foreground mt-6 text-xs">{siteConfig.email}</p>
          </div>
        </div>

        <div className="border-border/60 text-muted-foreground mt-14 flex flex-col items-center justify-between gap-3 border-t pt-8 text-xs sm:flex-row">
          <span>© {new Date().getFullYear()} {siteConfig.name}</span>
          <span className="opacity-80">Built for serious training outcomes.</span>
        </div>
      </div>
    </footer>
  );
}