Footer 4

import { cn } from "@/lib/utils.ts";

import { Button } from "@/components/ui/button";

const navigation = {
    product: [
        { name: "Overview", href: "#" },
        { name: "Features", href: "#" },
        { name: "Solutions", href: "#" },
        { name: "Tutorials", href: "#" },
        { name: "Releases", href: "#" },
    ],
    company: [
        { name: "About Us", href: "#" },
        { name: "Careers", href: "#" },
        { name: "Press", href: "#" },
        { name: "News", href: "#" },
        { name: "Media Kit", href: "#" },
    ],
    resources: [
        { name: "Blog", href: "#" },
        { name: "Newsletter", href: "#" },
        { name: "Events", href: "#" },
        { name: "Help Center", href: "#" },
        { name: "Support", href: "#" },
    ],
};

const socialLinks = [
    {
        name: "Twitter",
        icon: "https://cdn.paceui.com/brand-logos/x.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "GitHub",
        icon: "https://cdn.paceui.com/brand-logos/github.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "LinkedIn",
        icon: "https://cdn.paceui.com/brand-logos/linkedin.svg",
        href: "#",
    },
];

export function Footer4() {
    return (
        <div>
            <div className="bg-muted/60 flex h-36 items-center justify-center border-b border-dashed">
                <p className="text-foreground/25 font-medium">Content Here</p>
            </div>
            <footer className="w-full pt-12 pb-8 md:pt-16">
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5">
                        <div className="flex flex-col space-y-4 sm:col-span-2 lg:col-span-2">
                            <a href="#" className="flex items-center gap-2.5">
                                <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                                    P
                                </div>
                                <span className="text-lg font-medium tracking-tight">PaceUI</span>
                            </a>
                            <p className="text-muted-foreground max-w-xs text-sm leading-relaxed font-normal">
                                Modern UI components designed to help developers build faster and cleaner applications.
                            </p>
                            <div className="text-muted-foreground flex items-center gap-1 pt-1">
                                {socialLinks.map((social) => {
                                    return (
                                        <Button
                                            key={social.name}
                                            variant="ghost"
                                            size="icon"
                                            aria-label={social.name}
                                            className="hover:text-foreground rounded-full"
                                            render={
                                                <a href={social.href} aria-label={social.name}>
                                                    <img
                                                        src={social.icon}
                                                        className={cn("size-4", { "dark:invert": social.isDarkInvert })}
                                                        alt={social.name}
                                                    />
                                                </a>
                                            }></Button>
                                    );
                                })}
                            </div>
                        </div>

                        <div>
                            <h3 className="text-sm font-medium">Product</h3>
                            <ul className="mt-4 space-y-2.5">
                                {navigation.product.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            className="text-muted-foreground hover:text-foreground text-sm font-normal transition-colors">
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        <div>
                            <h3 className="text-sm font-medium">Company</h3>
                            <ul className="mt-4 space-y-2.5">
                                {navigation.company.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            className="text-muted-foreground hover:text-foreground text-sm font-normal transition-colors">
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        <div>
                            <h3 className="text-sm font-medium">Resources</h3>
                            <ul className="mt-4 space-y-2.5">
                                {navigation.resources.map((item) => (
                                    <li key={item.name}>
                                        <a
                                            href={item.href}
                                            className="text-muted-foreground hover:text-foreground text-sm font-normal transition-colors">
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    <div className="text-muted-foreground mt-12 border-t pt-8 text-center text-xs">
                        <p>&copy; {new Date().getFullYear()} PaceUI, Inc. All rights reserved.</p>
                    </div>
                </div>
            </footer>
        </div>
    );
}