import Image from 'next/image';
import Link from 'next/link';
import { ROUTES } from '@/lib/routes';
import { getSiteSettings, activeSocialLinks } from '@/lib/site-settings';

// Social icons kept intentionally simple (initials/glyphs) rather than a
// full icon-font/SVG-sprite set, since the guide only guarantees a URL per
// platform — no icon asset comes from the backend.
const SOCIAL_GLYPHS: Record<string, string> = {
  facebook: 'f',
  instagram: '○',
  tiktok: '♪',
  youtube: '▶',
  pinterest: 'P',
  twitter: 'X',
  linkedin: 'in',
  whatsapp: '☆',
};

export async function SiteFooter() {
  // Deduped via React's cache() — the root layout already fetched this for
  // the same request, so this call doesn't cost a second round-trip.
  const settings = await getSiteSettings();
  const socialLinks = activeSocialLinks(settings);

  return (
    <footer className="bg-navy-800 text-navy-100">
      <div className="container-page grid grid-cols-2 gap-10 py-14 sm:grid-cols-3 lg:grid-cols-5">
        <div className="col-span-2 sm:col-span-3 lg:col-span-1">
          <Link href={ROUTES.home} className="inline-flex items-center rounded-md bg-beige px-3 py-2">
            <Image
              src={settings.site_logo || '/logo-trimmed.png'}
              alt={`${settings.site_name} — Discover the Soul of Sri Lankan Crafts`}
              width={873}
              height={266}
              unoptimized={!!settings.site_logo}
              className="h-12 w-auto"
            />
          </Link>
          <p className="mt-4 text-sm text-navy-100/80">
            Discover the Soul of Sri Lankan Crafts — connecting local artisans with customers across the island and beyond.
          </p>

          {socialLinks.length > 0 && (
            <ul className="mt-4 flex flex-wrap gap-2">
              {socialLinks.map((link) => (
                <li key={link.key}>
                  <a
                    href={link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={link.label}
                    title={link.label}
                    className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-xs font-semibold hover:bg-gold-500 hover:text-navy-800"
                  >
                    {SOCIAL_GLYPHS[link.key] ?? link.label.slice(0, 1)}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div>
          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gold-400">Shop</h4>
          <ul className="space-y-2 text-sm">
            <li><Link href={ROUTES.shop} className="hover:text-gold-400">All Products</Link></li>
            <li><Link href={ROUTES.shop} className="hover:text-gold-400">Browse Categories</Link></li>
            <li><Link href={ROUTES.shop} className="hover:text-gold-400">New Arrivals</Link></li>
            <li><Link href={ROUTES.shop} className="hover:text-gold-400">Gift Ideas</Link></li>
            <li><Link href={ROUTES.bulkOrders} className="hover:text-gold-400">Bulk Orders</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gold-400">Sell</h4>
          <ul className="space-y-2 text-sm">
            <li><Link href={ROUTES.vendorShow} className="hover:text-gold-400">Become a Vendor</Link></li>
            <li><Link href={ROUTES.vendorShow} className="hover:text-gold-400">How It Works</Link></li>
            <li><Link href={ROUTES.vendorShow} className="hover:text-gold-400">Our Seller Guide</Link></li>
            <li><Link href={ROUTES.artisans} className="hover:text-gold-400">Artisan Stories</Link></li>
            <li><Link href={ROUTES.vendorShow} className="hover:text-gold-400">Sell With Us</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gold-400">Customer Care</h4>
          <ul className="space-y-2 text-sm">
            <li><Link href={ROUTES.paymentDeliveryReturns} className="hover:text-gold-400">Shipping &amp; Delivery</Link></li>
            <li><Link href={ROUTES.artisans} className="hover:text-gold-400">How to Contact Vendors</Link></li>
            <li><Link href={ROUTES.paymentDeliveryReturns} className="hover:text-gold-400">Returns &amp; Refunds</Link></li>
            <li><Link href={ROUTES.contact} className="hover:text-gold-400">Help Centre</Link></li>
            <li><Link href={ROUTES.contact} className="hover:text-gold-400">Contact Us</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gold-400">Contact</h4>
          <ul className="space-y-2 text-sm">
            {settings.contact_phone && (
              <li className="flex items-center gap-2"><span aria-hidden="true">&#9742;</span> {settings.contact_phone}</li>
            )}
            {settings.contact_phone_secondary && (
              <li className="flex items-center gap-2"><span aria-hidden="true">&#9742;</span> {settings.contact_phone_secondary}</li>
            )}
            {settings.contact_email && (
              <li className="flex items-center gap-2"><span aria-hidden="true">&#9993;</span> {settings.contact_email}</li>
            )}
            <li className="flex items-start gap-2">
              <span aria-hidden="true">&#128205;</span> <span>{settings.contact_address || 'Colombo, Sri Lanka'}</span>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="container-page flex flex-col items-center justify-between gap-3 py-5 text-xs text-navy-100/70 sm:flex-row">
          <p>&copy; {new Date().getFullYear()} {settings.site_name}. All rights reserved.</p>
          <ul className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
            <li><Link href={ROUTES.termsOfUse} className="hover:text-gold-400">Terms of Use</Link></li>
            <li><Link href={ROUTES.privacyPolicy} className="hover:text-gold-400">Privacy Policy</Link></li>
            <li><Link href={ROUTES.paymentDeliveryReturns} className="hover:text-gold-400">Payment, Delivery &amp; Returns</Link></li>
            <li><Link href={ROUTES.vendorTerms} className="hover:text-gold-400">Vendor Agreement</Link></li>
          </ul>
          <p>Web Design by CyberExpert Web Design</p>
        </div>
      </div>
    </footer>
  );
}