"use client";

import Link from "next/link";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { defaultSettings } from "@/lib/defaults";
import type { SiteSettings } from "@/types/models";
import { SocialLinks } from "@/components/social/SocialLinks";

export function Footer() {
  const { data: settings } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );

  return (
    <footer className="mt-auto border-t border-black/5 bg-[#f6f7fb]">
      <div className="mx-auto flex max-w-6xl flex-col gap-8 px-4 py-12 sm:px-6 lg:flex-row lg:items-start lg:justify-between lg:px-8">
        <div>
          <p className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
            {settings.siteTitle}
          </p>
          <p className="mt-2 max-w-sm text-sm leading-relaxed text-[var(--muted)]">
            Kişisel marka ve profesyonel hukuki danışmanlık odaklı tanıtım sitesi. İçerikler
            yönetim panelinden güncellenir.
          </p>
        </div>
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold-dark)]">
              İletişim
            </p>
            <ul className="mt-3 space-y-2 text-sm text-[var(--muted)]">
              <li>{settings.phone}</li>
              <li>
                <a className="hover:text-[var(--navy)]" href={`mailto:${settings.email}`}>
                  {settings.email}
                </a>
              </li>
              <li>{settings.address}</li>
            </ul>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold-dark)]">
              Sayfalar
            </p>
            <ul className="mt-3 space-y-2 text-sm">
              <li>
                <Link className="text-[var(--muted)] hover:text-[var(--navy)]" href="/hakkimda">
                  Hakkımda
                </Link>
              </li>
              <li>
                <Link className="text-[var(--muted)] hover:text-[var(--navy)]" href="/ekibimiz">
                  Ekibimiz
                </Link>
              </li>
              <li>
                <Link
                  className="text-[var(--muted)] hover:text-[var(--navy)]"
                  href="/uzmanlik-alanlari"
                >
                  Uzmanlık Alanları
                </Link>
              </li>
              <li>
                <Link className="text-[var(--muted)] hover:text-[var(--navy)]" href="/blog">
                  Blog
                </Link>
              </li>
              <li>
                <Link className="text-[var(--muted)] hover:text-[var(--navy)]" href="/bizi-degerlendirin">
                  Bizi değerlendirin
                </Link>
              </li>
              {settings.allowPublicRegistration !== false ? (
                <li>
                  <Link className="text-[var(--muted)] hover:text-[var(--navy)]" href="/kayit">
                    Kayıt ol
                  </Link>
                </li>
              ) : null}
            </ul>
          </div>
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold-dark)]">
              Sosyal
            </p>
            <SocialLinks
              links={settings.social}
              className="mt-3"
              buttonClassName="h-9 w-9"
              emptyMessage="Admin → Sosyal medya bölümünden ekleyebilirsiniz."
            />
          </div>
        </div>
      </div>
      <div className="border-t border-black/5 py-4 text-center text-xs text-[var(--muted)]">
        © {new Date().getFullYear()} {settings.siteTitle}. Tüm hakları saklıdır.
      </div>
    </footer>
  );
}