import Link from 'next/link';
import { LEGAL_PAGES } from '@/lib/legal';
import { LogoMark, Wordmark } from './Logo';

const POPULER: [string, string][] = [['istanbul', 'İstanbul'], ['ankara', 'Ankara'], ['izmir', 'İzmir'], ['antalya', 'Antalya'], ['mugla', 'Muğla'], ['aydin', 'Aydın']];
const COLS: { title: string; links: [string, string][] }[] = [
  { title: 'Ürün', links: [['/ornekler', 'Örnek videolar'], ['/#sablonlar', 'Şablonlar'], ['/#fiyatlar', 'Fiyatlar'], ['/#sss', 'Sık sorulanlar']] },
  { title: 'Bölgeler', links: [...POPULER.map(([sl, ad]): [string, string] => [`/arsa-videosu/${sl}`, ad]), ['/arsa-videosu', 'Tüm iller']] },
  { title: 'Hesap', links: [['/kayit', 'Hesap açın'], ['/giris', 'Giriş yapın'], ['/panel', 'Panel']] },
];
const EMAIL = 'info@parselstudyo.com';

/** Site altbilgisi: marka ve iletişim, üç bağlantı sütunu, yasal bağlantılar ve telif şeridi */
export function SiteFooter() {
  return (
    <footer className="bg-ink text-white">
      <div className="grid gap-10 px-4 py-12 md:grid-cols-[minmax(0,1.5fr)_repeat(3,minmax(0,1fr))] md:gap-8 md:px-6 md:py-14">
        <div className="max-w-sm">
          <Link href="/" className="inline-flex items-center gap-2" aria-label="ParselStüdyo ana sayfa"><LogoMark size={28} tone="dark" /><Wordmark light className="text-[22px]" /></Link>
          <p className="mt-4 text-[14px] leading-relaxed text-white/70">Ada ve parsel numarasından; tapudaki sınırı, çevresini ve ulaşımı anlatan Türkçe seslendirmeli dikey ilan videosu.</p>
          <a href={`mailto:${EMAIL}`} className="mt-5 inline-flex items-center gap-2 text-[14px] font-semibold text-white hover:text-signal">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.9" aria-hidden><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>{EMAIL}
          </a>
          <div className="mt-5 flex flex-wrap gap-2">
            <Link href="/kayit" className="bg-signal px-3.5 py-2 text-[13.5px] font-bold text-ink hover:bg-signal-dark">Hesap açın</Link>
            <Link href="/ornekler" className="border border-white/25 px-3.5 py-2 text-[13.5px] font-semibold text-white hover:border-white/60">Örnekleri izleyin</Link>
          </div>
        </div>
        <nav aria-label="Altbilgi" className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-3">
          {COLS.map((c) => (
            <div key={c.title}>
              <div className="text-[11.5px] font-bold uppercase tracking-[0.14em] text-white/50">{c.title}</div>
              <ul className="mt-3 space-y-2 text-[14px]">
                {c.links.map(([href, label]) => <li key={href}><Link href={href} className="text-white/85 hover:text-white">{label}</Link></li>)}
              </ul>
            </div>
          ))}
        </nav>
      </div>
      <div className="border-t border-white/10">
        <nav aria-label="Yasal" className="flex flex-wrap gap-x-5 gap-y-1.5 px-4 pt-5 text-[12.5px] md:px-6">
          {LEGAL_PAGES.map(([href, label]) => <Link key={href} href={href} className="text-white/70 hover:text-white">{label}</Link>)}
        </nav>
        <div className="flex flex-col gap-1.5 px-4 py-5 text-[12.5px] text-white/55 md:flex-row md:items-center md:justify-between md:px-6">
          <span>© {new Date().getFullYear()} ParselStüdyo. Tüm hakları saklıdır.</span>
          <span>ParselStüdyo bir Kreatif Technology LLC hizmetidir.</span>
        </div>
      </div>
    </footer>
  );
}