import Link from "next/link";
import { prisma } from "@/lib/db";
import { siteConfig } from "@/lib/config";
import { Logo } from "./Logo";

export async function Footer() {
  const categories = await prisma.category.findMany({
    orderBy: { sortOrder: "asc" },
    select: { name: true, slug: true },
  });

  return (
    <footer className="no-print mt-16 border-t border-slate-200 bg-white">
      <div className="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <div className="flex items-center">
            <Logo className="h-8 w-auto text-content" />
          </div>
          <p className="mt-3 text-sm text-slate-500">{siteConfig.tagline}</p>
          <p className="mt-4 text-sm text-slate-600">📍 {siteConfig.address}</p>
          <p className="mt-1 text-sm text-slate-600">🕒 {siteConfig.hours}</p>
        </div>

        <div>
          <h4 className="text-sm font-semibold text-slate-900">Shop</h4>
          <ul className="mt-3 space-y-2 text-sm text-slate-600">
            <li>
              <Link href="/products" className="hover:text-brand-700">
                All Products
              </Link>
            </li>
            {categories.slice(0, 6).map((c) => (
              <li key={c.slug}>
                <Link href={`/category/${c.slug}`} className="hover:text-brand-700">
                  {c.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="text-sm font-semibold text-slate-900">Company</h4>
          <ul className="mt-3 space-y-2 text-sm text-slate-600">
            <li>
              <Link href="/repair" className="hover:text-brand-700">
                Book a repair
              </Link>
            </li>
            <li>
              <Link href="/sell" className="hover:text-brand-700">
                Sell your device
              </Link>
            </li>
            <li>
              <Link href="/track" className="hover:text-brand-700">
                Track order
              </Link>
            </li>
            <li>
              <Link href="/about" className="hover:text-brand-700">
                About us
              </Link>
            </li>
            <li>
              <Link href="/warranty" className="hover:text-brand-700">
                Warranty & Returns
              </Link>
            </li>
            <li>
              <Link href="/contact" className="hover:text-brand-700">
                Contact
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <h4 className="text-sm font-semibold text-slate-900">Get in touch</h4>
          <ul className="mt-3 space-y-2 text-sm text-slate-600">
            <li>
              <a href={`tel:${siteConfig.phone}`} className="hover:text-brand-700">
                📞 {siteConfig.phone}
              </a>
            </li>
            <li>
              <a
                href={`https://wa.me/${siteConfig.whatsapp}`}
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-brand-700"
              >
                💬 WhatsApp us
              </a>
            </li>
            <li>
              <a href={`mailto:${siteConfig.email}`} className="hover:text-brand-700">
                ✉️ {siteConfig.email}
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-slate-100">
        <div className="mx-auto max-w-7xl px-4 py-4 text-center text-xs text-slate-400">
          © {new Date().getFullYear()} {siteConfig.name}. All rights reserved. •
          Cash on delivery available across the city.
        </div>
      </div>
    </footer>
  );
}