import Image from 'next/image';
import Link from 'next/link';
import { telHref, waHref } from '@/lib/format';
import type { Category, Settings } from '@/lib/types';

export default function Footer({
  settings,
  categories,
}: {
  settings: Settings;
  categories: Category[];
}) {
  return (
    <footer className="mt-24 bg-cocoa-900 text-cream-200/80">
      <div className="container-page grid gap-12 py-16 md:grid-cols-[1.3fr_1fr_1fr] md:py-20">
        <div>
          <Image
            src="/images/logo-light.png"
            alt="BUEL Gurme"
            width={190}
            height={200}
            className="h-20 w-auto"
          />
          <p className="mt-6 max-w-sm text-sm leading-relaxed text-cream-200/65">
            {settings.tagline} — el açması yufka, taze harç ve günlük üretimle börek ve baklava.
          </p>
          <div className="mt-6 flex gap-3">
            {settings.instagram && (
              <a
                href={settings.instagram}
                target="_blank"
                rel="noreferrer"
                aria-label="Instagram"
                className="rounded-full border border-cream-200/20 p-2.5 transition-colors hover:border-gold-400 hover:text-gold-400"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
                  <rect x="3" y="3" width="18" height="18" rx="5" />
                  <circle cx="12" cy="12" r="3.8" />
                  <circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none" />
                </svg>
              </a>
            )}
            {settings.facebook && (
              <a
                href={settings.facebook}
                target="_blank"
                rel="noreferrer"
                aria-label="Facebook"
                className="rounded-full border border-cream-200/20 p-2.5 transition-colors hover:border-gold-400 hover:text-gold-400"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.29-.04-1.27-.12-2.4-.12-2.38 0-4 1.45-4 4.11V9.9H7.6V13h2.7v8h3.2Z" />
                </svg>
              </a>
            )}
          </div>
        </div>

        <div>
          <h3 className="font-body text-xs uppercase tracking-[0.24em] text-gold-400">Ürünler</h3>
          <ul className="mt-5 space-y-2.5 text-sm">
            {categories.slice(0, 6).map((c) => (
              <li key={c.id}>
                <Link
                  href={`/menu?kategori=${c.slug}`}
                  className="text-cream-200/70 transition-colors hover:text-cream-50"
                >
                  {c.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="font-body text-xs uppercase tracking-[0.24em] text-gold-400">İletişim</h3>
          <ul className="mt-5 space-y-3 text-sm">
            <li>
              <a href={telHref(settings.phone)} className="transition-colors hover:text-cream-50">
                {settings.phone}
              </a>
            </li>
            {settings.whatsapp && (
              <li>
                <a
                  href={waHref(settings.whatsapp)}
                  target="_blank"
                  rel="noreferrer"
                  className="transition-colors hover:text-cream-50"
                >
                  WhatsApp ile yazın
                </a>
              </li>
            )}
            <li>
              <a href={`mailto:${settings.email}`} className="transition-colors hover:text-cream-50">
                {settings.email}
              </a>
            </li>
            <li className="pt-1 text-cream-200/60">{settings.address}</li>
            <li className="text-cream-200/60">{settings.working_hours}</li>
          </ul>
        </div>
      </div>

      <div className="border-t border-cream-200/10">
        <div className="container-page flex flex-col items-center justify-between gap-3 py-6 text-xs text-cream-200/45 sm:flex-row">
          <p>
            © {new Date().getFullYear()} {settings.brand_name}. Tüm hakları saklıdır.
          </p>
          <Link href="/admin" className="transition-colors hover:text-cream-200/80">
            Yönetim Paneli
          </Link>
        </div>
      </div>
    </footer>
  );
}