"use client";

import { motion } from "framer-motion";
import { Trophy, Calendar, MapPin, Building2, ArrowRight } from "lucide-react";

export default function TenderWinnerPage() {
    const winners = [
        {
            id: 1,
            tenderTitle: "Solar Power Plant Installation - Phase 1",
            winnerName: "SunTech Solutions Pvt Ltd",
            amount: "₹2.5 Cr",
            date: "Dec 20, 2024",
            location: "Pune, Maharashtra",
            department: "Energy Dept"
        },
        {
            id: 2,
            tenderTitle: "Municipal LED Street Light Project",
            winnerName: "Bright City Infra",
            amount: "₹1.8 Cr",
            date: "Dec 18, 2024",
            location: "Nagpur, Maharashtra",
            department: "Municipal Corp"
        },
        {
            id: 3,
            tenderTitle: "Rooftop Solar for Govt Schools",
            winnerName: "Green Energy Systems",
            amount: "₹3.2 Cr",
            date: "Dec 15, 2024",
            location: "Mumbai, Maharashtra",
            department: "Education Dept"
        },
        {
            id: 4,
            tenderTitle: "Govt Office Electrification",
            winnerName: "PowerGrid Construct",
            amount: "₹85 L",
            date: "Dec 10, 2024",
            location: "Nashik, Maharashtra",
            department: "PWD"
        },
    ];

    return (
        <div className="min-h-screen bg-theme-bg pt-24 pb-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-7xl mx-auto">
                {/* Header */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="text-center mb-16"
                >
                    <div className="inline-flex items-center justify-center p-3 mb-4 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400">
                        <Trophy className="w-8 h-8" />
                    </div>
                    <h1 className="text-4xl md:text-5xl font-bold text-theme-primary mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-amber-600">
                        Tender Winners
                    </h1>
                    <p className="text-theme-secondary text-lg max-w-2xl mx-auto">
                        Celebrating the successful bidders who are powering Maharashtra's growth with sustainable solutions.
                    </p>
                </motion.div>

                {/* Winners Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {winners.map((winner, index) => (
                        <motion.div
                            key={winner.id}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.1 }}
                            className="group bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden hover:shadow-xl transition-all duration-300"
                        >
                            <div className="p-6">
                                <div className="flex justify-between items-start mb-4">
                                    <span className="px-3 py-1 text-xs font-semibold rounded-full bg-primary-50 text-primary-600 dark:bg-primary-900/20 dark:text-primary-400">
                                        {winner.department}
                                    </span>
                                    <span className="flex items-center text-sm text-theme-muted">
                                        <Calendar className="w-4 h-4 mr-1" />
                                        {winner.date}
                                    </span>
                                </div>

                                <h3 className="text-xl font-bold text-theme-primary mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
                                    {winner.tenderTitle}
                                </h3>

                                <div className="space-y-3 mt-6">
                                    <div className="flex items-center text-theme-secondary">
                                        <Trophy className="w-5 h-5 mr-3 text-yellow-500" />
                                        <span className="font-semibold">{winner.winnerName}</span>
                                    </div>
                                    <div className="flex items-center text-theme-secondary">
                                        <MapPin className="w-5 h-5 mr-3 text-gray-400" />
                                        <span>{winner.location}</span>
                                    </div>
                                    <div className="flex items-center text-theme-secondary">
                                        <Building2 className="w-5 h-5 mr-3 text-gray-400" />
                                        <span className="font-bold text-green-600 dark:text-green-400">{winner.amount}</span>
                                    </div>
                                </div>
                            </div>

                            <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-100 dark:border-gray-700 flex justify-between items-center text-sm font-medium">
                                <span className="text-green-600 dark:text-green-400">Contract Awarded</span>
                                <ArrowRight className="w-4 h-4 text-theme-muted group-hover:translate-x-1 transition-transform" />
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </div>
    );
}