"use client"

import { NavigationMenu } from "@/components/navigation-menu"
import { DashboardMap } from "@/components/dashboard/dashboard-map"

export default function MapPage() {
    return (
        <div className="min-h-screen bg-mesh-gradient relative overflow-hidden">
            {/* Navigation Menu */}
            <NavigationMenu />

            {/* Decorative background elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute -top-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl float-subtle" />
                <div className="absolute -bottom-40 -right-40 w-96 h-96 bg-accent/10 rounded-full blur-3xl float-subtle" style={{ animationDelay: '-3s' }} />
                <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
            </div>

            <div className="container mx-auto px-4 py-8 max-w-7xl relative z-10">
                {/* Header */}
                <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-3xl md:text-4xl font-bold text-gradient leading-tight">
                                Detection Map
                            </h1>
                            <p className="text-muted-foreground mt-1">
                                View all detected potholes and signboards on the map
                            </p>
                        </div>
                    </div>
                </div>

                {/* Map */}
                <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
                    <DashboardMap className="h-[calc(100vh-200px)] min-h-[500px]" />
                </div>

                {/* Legend */}
                <div className="mt-6 flex flex-wrap gap-6 animate-in fade-in duration-700 delay-200">
                    <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-red-500 border-2 border-red-600" />
                        <span className="text-sm text-muted-foreground">Pothole</span>
                    </div>
                    <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-blue-500 border-2 border-blue-600" />
                        <span className="text-sm text-muted-foreground">Signboard</span>
                    </div>
                </div>

                {/* Footer */}
                <div className="mt-8 text-center animate-in fade-in duration-700 delay-300">
                    <p className="text-sm text-muted-foreground">
                        Sentient Geeks Pvt. Ltd.
                    </p>
                </div>
            </div>
        </div>
    )
}