import { Link } from '@inertiajs/react';
import Container from '@/components/site/container';
import Icon from '@/components/site/icon';
import { common } from '@/content/common';
import { company, consultationUrl, officeAddress } from '@/data/site';
import { useContent } from '@/hooks/use-locale';
import { useSiteInfo } from '@/hooks/use-site-info';
import { about, clients, contact, login, services } from '@/routes';

function FooterHeading({ children }: { children: string }) {
    return (
        <span className="text-on-surface font-mono text-xs font-bold tracking-wider uppercase">
            {children}
        </span>
    );
}

export default function SiteFooter() {
    const site = useSiteInfo();
    const t = useContent(common);

    const companyLinks = [
        { label: t.footer.links.about, href: about.url() },
        {
            label: t.footer.links.visionMission,
            href: `${about.url()}#visi-misi`,
        },
        { label: t.footer.links.odoo, href: `${services.url()}#odoo-erp` },
        { label: t.footer.links.clients, href: clients.url() },
        { label: t.footer.links.audit, href: consultationUrl },
        { label: t.footer.links.offices, href: `${contact.url()}#lokasi` },
        { label: t.footer.links.admin, href: login.url() },
    ];

    return (
        <footer className="border-outline-variant/40 bg-surface-container-lowest w-full border-t py-16">
            <Container>
                <div className="border-outline-variant/30 grid grid-cols-1 gap-10 border-b pb-12 md:grid-cols-2 lg:grid-cols-12">
                    <div className="flex flex-col gap-4 lg:col-span-5">
                        <div className="flex items-center gap-3">
                            <div className="border-outline-variant/50 dark:bg-surface-container-low rounded-lg border bg-white p-1">
                                <img
                                    src={company.logo}
                                    alt={company.name}
                                    className="h-7 w-auto object-contain"
                                />
                            </div>
                            <span className="font-display text-on-surface text-base font-bold tracking-wide uppercase">
                                {company.name}
                            </span>
                        </div>
                        <p className="text-on-surface-variant max-w-md text-xs leading-relaxed">
                            {t.footer.tagline}
                        </p>
                        <div className="text-on-surface-variant mt-2 flex flex-col gap-4 text-xs">
                            {site.offices.map((office) => (
                                <div
                                    key={office.name}
                                    className="flex items-start gap-2"
                                >
                                    <Icon
                                        name={office.icon}
                                        className="text-primary mt-0.5 text-base"
                                    />
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-on-surface font-semibold">
                                            {office.name}
                                        </span>
                                        <span>{officeAddress(office)}</span>
                                        <a
                                            href={office.phoneHref}
                                            className="hover:text-primary font-mono transition-colors"
                                        >
                                            {t.footer.tel} {office.phone}
                                        </a>
                                    </div>
                                </div>
                            ))}
                            <a
                                href={`mailto:${site.email.busdev}`}
                                className="hover:text-primary flex items-center gap-2 font-mono transition-colors"
                            >
                                <Icon
                                    name="mail"
                                    className="text-primary text-base"
                                />
                                {site.email.busdev}
                            </a>
                        </div>
                    </div>

                    <div className="flex flex-col gap-3 lg:col-span-4">
                        <FooterHeading>
                            {t.footer.servicesHeading}
                        </FooterHeading>
                        <ul className="text-on-surface-variant grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
                            {t.services.map((service, index) => (
                                <li key={service.title}>
                                    <Link
                                        href={`${services.url()}#jasa-resmi`}
                                        className="hover:text-primary transition-colors"
                                    >
                                        {index + 1}. {service.title}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="flex flex-col gap-3 lg:col-span-3">
                        <FooterHeading>{t.footer.linksHeading}</FooterHeading>
                        <ul className="text-on-surface-variant flex flex-col gap-2 text-xs">
                            {companyLinks.map((link) => (
                                <li key={link.label}>
                                    <Link
                                        href={link.href}
                                        className="hover:text-primary transition-colors"
                                    >
                                        {link.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>

                <div className="text-on-surface-variant flex flex-col items-center justify-between gap-4 pt-8 text-xs md:flex-row">
                    <p>
                        © {new Date().getFullYear()} {company.name}.{' '}
                        {t.footer.rights}
                    </p>
                    <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1 font-mono text-[11px]">
                        <span>Est. {company.established}</span>
                        <span className="text-primary">•</span>
                        <span>{t.footer.location}</span>
                    </div>
                </div>
            </Container>
        </footer>
    );
}