import { Link, usePage } from '@inertiajs/react';
import { Network, FolderGit2, Briefcase, Mail, Phone, MapPin, Award, Layers } from 'lucide-react';
import { dashboard, login } from '@/routes';
import { prefixUrl } from '@/lib/utils';

export default function PublicLayout({ children }: { children: React.ReactNode }) {
    const { auth } = usePage().props;

    return (
        <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-50 flex flex-col font-sans transition-colors duration-300">
            {/* Header navbar */}
            <header className="sticky top-0 z-50 w-full border-b border-zinc-200/50 bg-white/70 backdrop-blur-md dark:border-zinc-800/50 dark:bg-zinc-950/70">
                <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
                    <Link href={prefixUrl("/")} className="flex items-center gap-2">
                        <div className="flex size-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-md shadow-indigo-500/20 text-white">
                            <Network className="size-5" />
                        </div>
                        <span className="text-sm font-black tracking-tight uppercase">Paces Control</span>
                    </Link>

                    {/* Navigation items */}
                    <nav className="hidden md:flex items-center gap-6 text-xs font-bold tracking-wide text-zinc-600 dark:text-zinc-400">
                        <Link href={prefixUrl("/")} className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Home</Link>
                        <Link href={prefixUrl("/advantages")} className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Advantages</Link>
                        <Link href={prefixUrl("/gallery")} className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Gallery</Link>
                        <Link href={prefixUrl("/about")} className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</Link>
                        <Link href={prefixUrl("/contact")} className="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Contact</Link>
                    </nav>

                    {/* Auth links */}
                    <div className="flex items-center gap-3">
                        {auth.user ? (
                            <Link
                                href={dashboard()}
                                className="rounded-xl bg-indigo-600 px-4 py-2 text-xs font-bold text-white hover:bg-indigo-500 shadow-md shadow-indigo-600/20 hover:shadow-indigo-500/35 hover:-translate-y-0.5 transition-all duration-300"
                            >
                                Open Console
                            </Link>
                        ) : (
                            <>
                                <Link
                                    href={login()}
                                    className="text-xs font-bold text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50 transition-colors"
                                >
                                    Log In
                                </Link>
                                <Link
                                    href={login()} // redirect to login which has register toggle
                                    className="rounded-xl border border-zinc-200 bg-white px-4 py-2 text-xs font-bold text-zinc-800 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-850 hover:-translate-y-0.5 transition-all duration-300 shadow-sm"
                                >
                                    Register
                                </Link>
                            </>
                        )}
                    </div>
                </div>
            </header>

            {/* Main Content Area */}
            <main className="flex-1 w-full">
                {children}
            </main>

            {/* Footer section */}
            <footer className="w-full border-t border-zinc-200/50 bg-white/50 dark:border-zinc-800/50 dark:bg-zinc-950/50 py-12">
                <div className="container mx-auto max-w-7xl px-6 grid gap-8 md:grid-cols-4 text-xs">
                    <div className="space-y-4">
                        <div className="flex items-center gap-2">
                            <div className="flex size-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 text-white shadow-md">
                                <Network className="size-4.5" />
                            </div>
                            <span className="text-xs font-black uppercase tracking-tight">Paces Control</span>
                        </div>
                        <p className="text-zinc-500 dark:text-zinc-400 leading-relaxed">
                            Advanced multi-tenant project management, timeline synchronization, and compliance mappings built on top of high-end glassmorphic architecture.
                        </p>
                    </div>

                    <div className="space-y-3">
                        <h5 className="font-extrabold text-zinc-900 dark:text-zinc-50 uppercase tracking-wider">Quick Sitemap</h5>
                        <ul className="space-y-2 text-zinc-500 dark:text-zinc-400">
                            <li><Link href={prefixUrl("/")} className="hover:text-indigo-600 dark:hover:text-indigo-400">Home Landing</Link></li>
                            <li><Link href={prefixUrl("/advantages")} className="hover:text-indigo-600 dark:hover:text-indigo-400">Features & Advantages</Link></li>
                            <li><Link href={prefixUrl("/gallery")} className="hover:text-indigo-600 dark:hover:text-indigo-400">UI Screen Gallery</Link></li>
                            <li><Link href={prefixUrl("/about")} className="hover:text-indigo-600 dark:hover:text-indigo-400">Company Profile</Link></li>
                            <li><Link href={prefixUrl("/contact")} className="hover:text-indigo-600 dark:hover:text-indigo-400">Support Desk</Link></li>
                        </ul>
                    </div>

                    <div className="space-y-3">
                        <h5 className="font-extrabold text-zinc-900 dark:text-zinc-50 uppercase tracking-wider">Capabilities</h5>
                        <ul className="space-y-2 text-zinc-500 dark:text-zinc-400">
                            <li className="flex items-center gap-1.5"><Layers className="size-3 text-indigo-500" /> Interactive Kanban</li>
                            <li className="flex items-center gap-1.5"><FolderGit2 className="size-3 text-blue-500" /> Multi-Portfolio Sync</li>
                            <li className="flex items-center gap-1.5"><Award className="size-3 text-pink-500" /> Compliance Mappings</li>
                            <li className="flex items-center gap-1.5"><Briefcase className="size-3 text-emerald-500" /> Dev Schedule Timelines</li>
                        </ul>
                    </div>

                    <div className="space-y-3">
                        <h5 className="font-extrabold text-zinc-900 dark:text-zinc-50 uppercase tracking-wider">Support Desk</h5>
                        <ul className="space-y-2 text-zinc-500 dark:text-zinc-400">
                            <li className="flex items-center gap-2"><Mail className="size-4 text-indigo-500" /> support@pacescontrol.com</li>
                            <li className="flex items-center gap-2"><Phone className="size-4 text-purple-500" /> +1 (555) 019-2834</li>
                            <li className="flex items-center gap-2"><MapPin className="size-4 text-pink-500" /> 100 Pine St, San Francisco, CA</li>
                        </ul>
                    </div>
                </div>

                <div className="container mx-auto max-w-7xl px-6 border-t border-zinc-200/40 dark:border-zinc-800/40 mt-8 pt-6 flex justify-between items-center text-[10px] text-zinc-400">
                    <span>&copy; {new Date().getFullYear()} Paces Control Inc. All rights reserved.</span>
                    <span className="flex gap-4">
                        <a href="#!" className="hover:underline">Privacy Terms</a>
                        <a href="#!" className="hover:underline">Licence Agreements</a>
                    </span>
                </div>
            </footer>
        </div>
    );
}