import { Link } from '@inertiajs/react';
import Container from '@/components/site/container';
import Icon from '@/components/site/icon';
import {
    company,
    consultationUrl,
    officeAddress,
    offices,
    officialServices,
} from '@/data/site';
import { about, clients, contact, services } from '@/routes';

const companyLinks = [
    { label: 'Tentang Kami', href: about.url() },
    { label: 'Visi & Misi Resmi', href: `${about.url()}#visi-misi` },
    { label: 'Solusi Odoo ERP', href: `${services.url()}#odoo-erp` },
    { label: 'Daftar Klien Industri', href: clients.url() },
    { label: 'Permintaan Audit Sistem', href: consultationUrl },
    { label: 'Lokasi Kantor PAJ', href: `${contact.url()}#lokasi` },
];

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() {
    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">
                            {company.tagline}
                        </p>
                        <div className="text-on-surface-variant mt-2 flex flex-col gap-4 text-xs">
                            {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.phone.href}
                                            className="hover:text-primary font-mono transition-colors"
                                        >
                                            Tel. {office.phone.label}
                                        </a>
                                    </div>
                                </div>
                            ))}
                            <a
                                href={`mailto:${company.email.busdev}`}
                                className="hover:text-primary flex items-center gap-2 font-mono transition-colors"
                            >
                                <Icon
                                    name="mail"
                                    className="text-primary text-base"
                                />
                                {company.email.busdev}
                            </a>
                        </div>
                    </div>

                    <div className="flex flex-col gap-3 lg:col-span-4">
                        <FooterHeading>8 Jasa Resmi PAJ</FooterHeading>
                        <ul className="text-on-surface-variant grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
                            {officialServices.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>Informasi &amp; Tautan</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}. Hak Cipta
                        Dilindungi Undang-Undang.
                    </p>
                    <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1 font-mono text-[11px]">
                        <span>
                            {company.notary} ({company.founded})
                        </span>
                        <span className="text-primary">•</span>
                        <span>Jakarta Selatan, Indonesia</span>
                    </div>
                </div>
            </Container>
        </footer>
    );
}