import { Link } from '@inertiajs/react';

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';
const GS =
    'border border-white/80 bg-white/75 backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]';

const FOOTER_LINKS = [
    {
        title: 'Platform',
        links: [
            { label: 'Overview', href: '/features' },
            { label: 'POS & Payments', href: '/features/pos' },
            { label: 'Inventory', href: '/features/inventory' },
            { label: 'Purchase Orders', href: '/features/purchase-orders' },
            { label: 'Tax Compliance', href: '/features/tax-compliance' },
            { label: 'Analytics', href: '/features/analytics' },
            { label: 'Pricing', href: '/pricing' },
        ],
    },
    {
        title: 'Company',
        links: [
            { label: 'About Us', href: '/about' },
            { label: 'Our Manifesto', href: '/manifesto' },
            { label: 'Careers', href: '/careers' },
            { label: 'Press', href: '/press' },
            { label: 'Customers', href: '/customers' },
            { label: 'Case Studies', href: '/case-studies' },
        ],
    },
    {
        title: 'Support',
        links: [
            { label: 'Help Centre', href: '/support' },
            { label: 'Tutorials', href: '/tutorials' },
            { label: 'FAQ', href: '/faq' },
            { label: 'Contact Us', href: '/contact' },
            { label: 'Privacy Policy', href: '/privacy' },
            { label: 'Terms & Conditions', href: '/terms' },
        ],
    },
];

export default function Footer() {
    return (
        <footer className="mx-auto max-w-7xl px-4 pb-8 sm:px-6">
            <div className={`rounded-2xl p-6 sm:p-8 ${G}`}>
                <div className="grid gap-8 md:grid-cols-4">
                    {/* brand column */}
                    <div>
                        <Link href="/" className="flex items-center gap-2.5">
                            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary shadow-md shadow-primary/30">
                                <span className="uf-display text-[9px] font-black text-white">
                                    UP
                                </span>
                            </div>
                            <span className="uf-display font-bold text-foreground">
                                Upepo POS
                            </span>
                        </Link>
                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground dark:text-white/38">
                            The offline-first POS platform from Ufanisia Africa.
                            Built for how African businesses actually operate.
                        </p>
                        <div className="mt-4 flex gap-1.5">
                            {['KE', 'TZ', 'UG', 'RW'].map((c) => (
                                <span
                                    key={c}
                                    className={`rounded-md px-2 py-0.5 text-[10px] font-bold ${GS} text-muted-foreground dark:text-white/55`}
                                >
                                    {c}
                                </span>
                            ))}
                        </div>
                    </div>

                    {/* link columns */}
                    {FOOTER_LINKS.map(({ title, links }) => (
                        <div key={title}>
                            <p className="mb-4 text-[11px] font-bold tracking-wider text-foreground uppercase dark:text-white/70">
                                {title}
                            </p>
                            <ul className="space-y-2.5">
                                {links.map(({ label, href }) => (
                                    <li key={label}>
                                        <Link
                                            href={href}
                                            className="text-sm text-muted-foreground transition hover:text-primary dark:text-white/38 dark:hover:text-primary"
                                        >
                                            {label}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                <div className="mt-8 flex flex-col items-center justify-between gap-3 border-t border-muted-foreground/10 pt-6 text-xs text-muted-foreground sm:flex-row dark:border-white/[0.05] dark:text-white/28">
                    <p>
                        © {new Date().getFullYear()} Ufanisia Africa Ltd. All
                        rights reserved.
                    </p>
                    <p className="flex items-center gap-1.5">
                        <span className="inline-block h-1.5 w-1.5 rounded-full bg-accent" />
                        Built for Africa · Powered by the wind
                    </p>
                </div>
            </div>
        </footer>
    );
}