import Link from 'next/link';
import { Icon, WhatsappGlyph } from './icons';
import { site } from '@/lib/site';
import { waGeneralInquiry } from '@/lib/whatsapp';

export function Footer() {
    return (
        <footer className="bg-ink-950 border-t border-white/5 relative bg-noise">
            {/* Top band */}
            <div className="container-jt pt-16 pb-12 grid lg:grid-cols-[1.4fr_1fr_1fr_1.2fr] gap-10">
                <div>
                    <Link href="/" className="inline-block mb-5" aria-label="JamaliTech">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img src="/logo.png" alt="JamaliTech Ltd" className="h-12 w-auto [filter:brightness(0)_invert(1)]" />
                    </Link>
                    <p className="text-sm text-steel-400 leading-relaxed mb-5 max-w-sm">
                        Uganda&rsquo;s trusted distributor of generators, water pumps, agricultural machinery and power tools — with the spare parts and after-sales muscle most importers don&rsquo;t bother with.
                    </p>
                    <div className="flex gap-2">
                        <Social href={waGeneralInquiry()} label="WhatsApp" external><WhatsappGlyph className="w-4 h-4" /></Social>
                        <Social href={site.socials.facebook} label="Facebook" external><FacebookGlyph className="w-4 h-4" /></Social>
                        <Social href={site.socials.linkedin} label="LinkedIn" external><LinkedinGlyph className="w-4 h-4" /></Social>
                        <Social href={`mailto:${site.email}`} label="Email"><Icon.Mail className="w-4 h-4" /></Social>
                    </div>
                </div>

                <FooterCol title="Products">
                    {site.categories.map((c) => (
                        <FooterLink key={c.slug} href={`/category/${c.slug}`}>{c.label}</FooterLink>
                    ))}
                </FooterCol>

                <FooterCol title="Company">
                    <FooterLink href="/about">About Us</FooterLink>
                    <FooterLink href="/blog">Blog &amp; Guides</FooterLink>
                    <FooterLink href="/contact">Contact</FooterLink>
                    <FooterLink href="/quote">Request a Quote</FooterLink>
                    <FooterLink href={waGeneralInquiry()} external>WhatsApp Support</FooterLink>
                </FooterCol>

                <div>
                    <h4 className="font-mono text-[11px] uppercase tracking-[0.18em] text-white mb-5">Visit Us</h4>
                    <div className="rounded-lg bg-white/[0.03] border-l-2 border-orange-600 p-4 mb-4">
                        <strong className="block text-xs uppercase tracking-widest text-white mb-2">HQ — Kampala</strong>
                        <p className="text-sm text-steel-400 leading-relaxed">
                            {site.address.street}, {site.address.city} — {site.address.country}
                        </p>
                        <p className="text-sm mt-2 space-y-1">
                            <a href={`tel:${site.phone}`} className="block text-orange-500 hover:text-orange-400">{site.phoneDisplay}</a>
                            <a href={`mailto:${site.email}`} className="block text-orange-500 hover:text-orange-400">{site.email}</a>
                        </p>
                        <p className="text-xs text-steel-500 mt-2">{site.hours}</p>
                    </div>
                </div>
            </div>

            {/* Bottom bar */}
            <div className="border-t border-white/5">
                <div className="container-jt py-6 flex flex-wrap items-center justify-between gap-3 text-xs text-steel-500">
                    <p>© {new Date().getFullYear()} {site.brand}. All rights reserved. Industrial Equipment Supplier — {site.address.city}, {site.address.country}.</p>
                    <p>Crafted by <a href="https://twinfusion.co.ke" target="_blank" rel="noopener" className="text-orange-500 hover:text-orange-400">Twinfusion</a></p>
                </div>
            </div>

            {/* LocalBusiness JSON-LD */}
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify({
                        '@context': 'https://schema.org',
                        '@type': 'LocalBusiness',
                        '@id': `https://${site.domain}/#localbusiness`,
                        name: `${site.brand} ${site.address.country}`,
                        url: `https://${site.domain}/`,
                        telephone: site.phone,
                        email: site.email,
                        address: {
                            '@type': 'PostalAddress',
                            streetAddress: site.address.street,
                            addressLocality: site.address.city,
                            addressCountry: site.address.countryCode,
                        },
                        geo: { '@type': 'GeoCoordinates', latitude: site.geo.lat, longitude: site.geo.lon },
                        openingHoursSpecification: {
                            '@type': 'OpeningHoursSpecification',
                            dayOfWeek: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                            opens: '08:00',
                            closes: '18:00',
                        },
                        sameAs: [`https://wa.me/${site.whatsapp}`],
                        areaServed: { '@type': 'Country', name: site.address.country },
                    }),
                }}
            />
        </footer>
    );
}

function FooterCol({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <div>
            <h4 className="font-mono text-[11px] uppercase tracking-[0.18em] text-white mb-5">{title}</h4>
            <ul className="space-y-2.5 text-sm">{children}</ul>
        </div>
    );
}

function FooterLink({ href, external, children }: { href: string; external?: boolean; children: React.ReactNode }) {
    if (external) {
        return (
            <li>
                <a href={href} target="_blank" rel="noopener" className="text-steel-400 hover:text-orange-500 hover:translate-x-0.5 inline-block transition-all">
                    {children}
                </a>
            </li>
        );
    }
    return (
        <li>
            <Link href={href} className="text-steel-400 hover:text-orange-500 hover:translate-x-0.5 inline-block transition-all">
                {children}
            </Link>
        </li>
    );
}

function Social({ href, label, external, children }: { href: string; label: string; external?: boolean; children: React.ReactNode }) {
    return (
        <a
            href={href}
            target={external ? '_blank' : undefined}
            rel={external ? 'noopener' : undefined}
            aria-label={label}
            className="w-10 h-10 inline-flex items-center justify-center rounded-md bg-white/5 text-steel-300 hover:bg-orange-600 hover:text-white transition-colors"
        >
            {children}
        </a>
    );
}

function FacebookGlyph(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
            <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
        </svg>
    );
}
function LinkedinGlyph(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
        </svg>
    );
}