import Link from "next/link";
import Image from "next/image";
import { SocialLinks } from "./SocialLinks";

export function Footer() {
  return (
    <footer className="border-t border-border mt-24">
      <div className="max-w-7xl mx-auto px-6 lg:px-10 py-12 grid grid-cols-1 md:grid-cols-4 gap-10">
        <div className="md:col-span-2">
          <Link href="/" className="group inline-flex items-center gap-3">
            <Image
              src="/image/Studio/Logo Flat.png"
              alt="Highland Games Studio"
              width={32}
              height={32}
              className="transition-transform duration-300 group-hover:scale-110 group-hover:-translate-y-0.5"
            />
            <span className="font-display text-lg tracking-wider transition-colors duration-300 group-hover:text-accent">
              Highland Games Studio
            </span>
          </Link>
          <p className="mt-4 text-sm text-foreground-muted max-w-sm">
            Where summits become worlds. An indie studio crafting survival
            adventures.
          </p>
        </div>

        <div>
          <h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
            Explore
          </h4>
          <ul className="space-y-2 text-sm">
            <li>
              <Link
                href="/studio"
                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
              >
                Studio
                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
              </Link>
            </li>
            <li>
              <Link
                href="/games"
                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
              >
                Games
                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
              </Link>
            </li>
            <li>
              <Link
                href="/devblog"
                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
              >
                Devblog
                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
              </Link>
            </li>
            <li>
              <Link
                href="/contact"
                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
              >
                Contact
                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
            Follow
          </h4>
          <SocialLinks />
        </div>
      </div>

      <div className="border-t border-border">
        <div className="max-w-7xl mx-auto px-6 lg:px-10 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-foreground-muted">
          <p>© {new Date().getFullYear()} Highland Games Studio. All rights reserved.</p>
          <div className="flex items-center gap-5">
            <Link
              href="/legal/notice"
              className="hover:text-accent transition-colors"
            >
              Legal Notice
            </Link>
            <Link
              href="/legal/privacy"
              className="hover:text-accent transition-colors"
            >
              Privacy
            </Link>
          </div>
          <p className="font-display tracking-widest hidden lg:block">WHERE SUMMITS BECOME WORLDS</p>
        </div>
      </div>
    </footer>
  );
}