import Link from "next/link";

export default function SitemapGrid() {
    type LinkItem = {
        label: string;
        href: string;
        sublinks?: { label: string; href: string }[];
        isBold?: boolean;
        isTopBorder?: boolean;
    };

    type SectionItem = {
        title: string;
        icon: string;
        links: LinkItem[];
    };

    const sections: SectionItem[] = [
        {
            title: "Company",
            icon: "business",
            links: [
                { label: "Home", href: "/" },
                { label: "About Aasi Tech", href: "/about" },
                { label: "Our Story", href: "/about" },
                { label: "Contact Us", href: "/contact" },
                { label: "Success Stories", href: "/success-stories" },
            ]
        },
        {
            title: "Expertise",
            icon: "hub",
            links: [
                { label: "All Services", href: "/services" },
                { label: "Web Development", href: "/services/web-development" },
                { label: "Mobile App Development", href: "/services/mobile-app-development" },
                { label: "UI / UX Design", href: "/services/ui-ux-design" },
                { label: "IoT Solutions", href: "/services/iot-solutions" },
                { label: "Chatbot Development", href: "/services/chatbot-development" },
                { label: "AI & Machine Learning", href: "/services/ai-machine-learning" },
                { label: "AR / VR Applications", href: "/services/ar-vr-applications" },
                { label: "Business Intelligence", href: "/services/business-intelligence" },
                { label: "Cloud Computing", href: "/services/cloud-computing" },
            ]
        },
        {
            title: "Insights",
            icon: "folder_open",
            links: [
                {
                    label: "Portfolio",
                    href: "/portfolio",
                },
                { label: "Case Studies", href: "/portfolio/case-study" },
                { label: "Pricing Plans", href: "/pricing" },
                { label: "Newsletter", href: "/newsletter" },
            ]
        },
        {
            title: "Support & Legal",
            icon: "help_center",
            links: [
                { label: "Help Center / FAQ", href: "/faq" },
                { label: "Privacy Policy", href: "/privacy-policy" },
                { label: "Terms & Conditions", href: "/terms-and-conditions" },
                { label: "24/7 Support", href: "/contact", isBold: true, isTopBorder: true },
            ]
        }
    ];

    return (
        <section className="bg-dark-bg py-24">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
                    {sections.map((section, idx) => (
                        <div key={idx} className="flex flex-col gap-8 bg-dark-surface p-8 rounded-3xl border border-border-dark shadow-soft hover:shadow-lg hover:border-primary/20 transition-all duration-300">
                            <div className="flex items-center gap-4">
                                <div className="size-12 rounded-2xl bg-primary/10 flex items-center justify-center">
                                    <span className="material-symbols-outlined text-primary text-2xl">{section.icon}</span>
                                </div>
                                <h3 className="text-xl font-bold text-text-light tracking-tight">{section.title}</h3>
                            </div>
                            <ul className="flex flex-col space-y-4">
                                {section.links.map((link, lIdx) => (
                                    <li key={lIdx} className={link.isTopBorder ? "mt-4 pt-6 border-t border-border-dark" : ""}>
                                        <Link
                                            href={link.href}
                                            className="group/link flex items-center gap-3 text-text-light-muted hover:text-primary transition-all duration-200"
                                        >
                                            <div className="size-1.5 rounded-full bg-primary/30 group-hover/link:bg-primary transition-colors" />
                                            <span className={`${link.isBold ? 'font-bold' : 'font-medium'} group-hover/link:translate-x-1 transition-transform inline-block`}>
                                                {link.label}
                                            </span>
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}
