import React, { useState, useEffect } from 'react';
import { Heart, MapPin, Calendar, Camera, Music, MessageCircle, Navigation, Clock, Upload, Star, Download, Plus, X, Home, Image } from 'lucide-react';

export default function DisneyWeddingWebsite() {
    const [currentPage, setCurrentPage] = useState('home');
    const [timeLeft, setTimeLeft] = useState({});
    const [expandedSuggestion, setExpandedSuggestion] = useState(null);
    const [uploadedPhotos, setUploadedPhotos] = useState([]);
    const [recommendations, setRecommendations] = useState({
        preTravel: ['ESTA is mandatory for UK travellers - apply via official U.S. government website ASAP', 'Download My Disney Experience app before you fly', 'Book park tickets and reservations in advance', 'Pack comfortable shoes, sunscreen, and portable charger', 'Double-check passports, travel insurance, and flight details'],
        transport: ['Uber/Lyft from Orlando Airport to Disney resorts (easiest option)', 'Free Disney buses, boats, monorails & Skyliner connect all resorts and parks', 'No car needed when staying on Disney property!', 'Minnie Vans (via Lyft) for quick direct trips'],
        mustRides: ['Rise of the Resistance (Hollywood Studios) - arrive early!', 'Flight of Passage (Animal Kingdom) - stunning experience', 'Seven Dwarfs Mine Train (Magic Kingdom)', 'Tower of Terror (Hollywood Studios)', 'Expedition Everest (Animal Kingdom)', 'Pirates of the Caribbean (Magic Kingdom) - classic!'],
        dining: ['Pecos Bill (Magic Kingdom) - great Tex-Mex portions', 'Ohana (Polynesian Resort) - fun family-style dining', 'Disney Springs - Earl of Sandwich, Chicken Guy!, Blaze Pizza', 'California Grill (Contemporary) - upscale with amazing views', 'Resort food courts - affordable breakfast, pizza, burgers'],
        proTips: ['Mobile order food via app to skip queues', 'Arrive early for fireworks near the castle - ask Cast Members for quiet spots', 'Start parks early, take midday break, return for evenings', 'Stock snacks in your room to save money', 'Fireworks happen nightly - absolutely worth seeing at least once!']
    });
    const [showAddRecommendation, setShowAddRecommendation] = useState(null);
    const [newRecommendation, setNewRecommendation] = useState('');

    const weddingDate = new Date('2027-04-08T17:00:00');
    const whatsappNumber = '+4475865252910';
    const DROPBOX_ACCESS_TOKEN = 'sl.u.AGSca4gixZSrHGsUwnajpXPTIpLN4JxyUCEowQa4FXFizv4O6vB1GwDJXpS3uTklZnE-1GGJY3zvTZ-WLp6q-vppBNdQXz5sjv2MNtxgO2ywvFAygggj_0qML63fumlpCiFPe1jJaHu5c-2emw7UbP8q56T98kQPhYlrR7_WqDvwMcQ21cGbbJ1x5d6cyGmR45YBoddQDxuzaTUCBt0WSFKLdOFxcWxRKsJ4TtJRK9QSbLd4cJh9BDTcmAvDZQ328C-sctZy5ip0PuCInWsFy42nafMsOrWh37hKDgFRb9UPKWKBJJthfJjNi3g3oKbRsiC2qGVyyoxeZ-KzHoTds_MXZicz0gY7HZMMP0MZrADNZlIJPx0EZyQATIfe_e1400MQ-oxEJ0UnHWPowRvtJ78fEVpEwRUFnz4r9O-g0V2EiX5xV1DQVIHiTpsv59cGkUyegRMou6O-VlYi8nNBH_URPmEiF6eKGs9rn8tgrw-kw-fTZ-QK_MNQMM782wQd3MvQ2g7SIWl2-sc2Wy9SkuNL-Rc4JI8KbXDmMptN_cvb_yJbAEsnsB2fRGiUa8XPe27kMMJOMA2o_CDeprtam1YklwiZFcATSvTPDRJ7wj8W5zkOWzOj9xlr3hrq6EXkgLGY9kxLl-wZcIs54MpNxRYlhwySObgZOhXxC5LzYo7mlhIcumoCMAtSa5hCra3O4clp7rK1sF50_WAfZYQllOG5tpmJdWbx_TSqBwBVHiaS6RPgbjDJwbfbgGtu59eHXDM7_QUcg_p7SKyScSayPcN9bKSzeD2zKp_Nedn6EWieFAW1N2Hr2ljgK7BpXf7RWcKI7LUmIdJzQeNpigMcb41A39V7FMGluUuKUa7G-SYiEtp0l0aPevCOWXRFPVtxr1PIQ2TymaJTIajh4faQ62Jc-SznsIqsjmTtQxMJ3IXsEDldjaruoQx3vMh4ZyFQGGEfxWvgIli_aJJauKV90b5IuWY3yWggikgr8R-_vaGfF_MB9K3nsUCyWna9Bf_xRCXjhd09BLvy5iMjHFNSva1iH0D34V_IrYOUMFp8b21yZ11w7Z5VYPJTKQVKeIsBcrG6TlE2hLCOYQc5aMUneoZ-tQ9m8Txf1DC95Ni6orRYjJpaHkE2h0Ykqu0JUYpkY8YibBLIAOebqRWdln1PIRT8hnyDqQZII4ALWQU3MwmSWE1sf2YwB-w5a9JunizvCMucU0ewJFbmMsUBFi_4uj682qcWs33mpoJaXyyAI77lttIikHfoyeCGztK-OoL32FraWctUTZB4KIrUUCNOEiqs';

    // Countdown timer
    useEffect(() => {
        const timer = setInterval(() => {
            const now = new Date();
            const difference = weddingDate - now;
            
            setTimeLeft({
                days: Math.floor(difference / (1000 * 60 * 60 * 24)),
                hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
                minutes: Math.floor((difference / 1000 / 60) % 60),
                seconds: Math.floor((difference / 1000) % 60)
            });
        }, 1000);
        
        return () => clearInterval(timer);
    }, []);

    const schedule = [
        { time: '4:30 PM', event: 'Guest Arrival', location: 'Wedding Pavilion', note: 'Please arrive early to find your seats' },
        { time: '5:00 PM', event: 'Ceremony Begins', location: 'Disney\'s Wedding Pavilion', note: 'Please be seated by 4:55 PM' },
        { time: '6:00 PM', event: 'Reception & Dinner', location: '✨ Surprise Location ✨', note: 'Get ready for something magical!' },
        { time: '8:30 PM', event: 'Surprise #1', location: 'To Be Revealed', note: 'You won\'t want to miss this!' },
        { time: '9:30 PM', event: 'Surprise #2', location: 'To Be Revealed', note: 'The magic continues!' }
    ];

    const locations = [
        { name: 'Wedding Pavilion', note: 'Ceremony location - arrive early!', address: 'Disney\'s Grand Floridian Resort & Spa', coords: '28.4177,-81.5848' },
        { name: 'Parking', note: 'Complimentary valet available', address: 'Grand Floridian Main Entrance', coords: '28.4177,-81.5848' },
        { name: 'Magic Kingdom', note: 'Optional pre-wedding visit', address: 'Magic Kingdom Park', coords: '28.4177,-81.5812' }
    ];

    const suggestions = [
        { id: 'preTravel', title: 'Before You Fly (Essential!)', icon: '✈️', key: 'preTravel' },
        { id: 'transport', title: 'Getting Around', icon: '🚌', key: 'transport' },
        { id: 'mustRides', title: 'Rides Not to Miss', icon: '🎢', key: 'mustRides' },
        { id: 'dining', title: 'Where to Eat', icon: '🍽️', key: 'dining' },
        { id: 'proTips', title: 'Pro Tips & Tricks', icon: '💡', key: 'proTips' }
    ];

    const handlePhotoUpload = async (e) => {
        const files = Array.from(e.target.files);
        
        for (const file of files) {
            try {
                // Read file as base64
                const reader = new FileReader();
                reader.onload = async (event) => {
                    const base64Data = event.target.result;
                    
                    // Add to local display
                    const newPhoto = {
                        id: Date.now() + Math.random(),
                        name: file.name,
                        data: base64Data,
                        timestamp: new Date().toISOString(),
                        uploading: true
                    };
                    setUploadedPhotos(prev => [...prev, newPhoto]);
                    
                    // Upload to Dropbox
                    try {
                        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
                        const fileName = `/wedding-photos/${timestamp}_${file.name}`;
                        
                        // Convert base64 to blob
                        const blob = await fetch(base64Data).then(r => r.blob());
                        
                        const response = await fetch('https://content.dropboxapi.com/2/files/upload', {
                            method: 'POST',
                            headers: {
                                'Authorization': `Bearer ${DROPBOX_ACCESS_TOKEN}`,
                                'Content-Type': 'application/octet-stream',
                                'Dropbox-API-Arg': JSON.stringify({
                                    path: fileName,
                                    mode: 'add',
                                    autorename: true,
                                    mute: false
                                })
                            },
                            body: blob
                        });
                        
                        if (response.ok) {
                            // Mark as successfully uploaded
                            setUploadedPhotos(prev => 
                                prev.map(p => 
                                    p.id === newPhoto.id 
                                        ? { ...p, uploading: false, uploaded: true } 
                                        : p
                                )
                            );
                        } else {
                            throw new Error('Upload failed');
                        }
                    } catch (uploadError) {
                        console.error('Dropbox upload error:', uploadError);
                        // Mark as failed
                        setUploadedPhotos(prev => 
                            prev.map(p => 
                                p.id === newPhoto.id 
                                    ? { ...p, uploading: false, uploadError: true } 
                                    : p
                            )
                        );
                        alert('Photo saved locally but failed to upload to Dropbox. Please try again.');
                    }
                };
                reader.readAsDataURL(file);
            } catch (error) {
                console.error('Error processing file:', error);
            }
        }
    };

    const downloadPhoto = (photo) => {
        const link = document.createElement('a');
        link.href = photo.data;
        link.download = photo.name;
        link.click();
    };

    const downloadAllPhotos = () => {
        uploadedPhotos.forEach((photo, idx) => {
            setTimeout(() => downloadPhoto(photo), idx * 100);
        });
    };

    const addRecommendation = (category) => {
        if (newRecommendation.trim()) {
            setRecommendations(prev => ({
                ...prev,
                [category]: [...prev[category], newRecommendation.trim()]
            }));
            setNewRecommendation('');
            setShowAddRecommendation(null);
        }
    };

    const removeRecommendation = (category, index) => {
        setRecommendations(prev => ({
            ...prev,
            [category]: prev[category].filter((_, i) => i !== index)
        }));
    };

    const openMap = (coords) => {
        window.open(`https://maps.google.com/?q=${coords}`, '_blank');
    };

    const openWhatsApp = () => {
        window.open(`https://wa.me/${whatsappNumber}`, '_blank');
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-pink-100 via-blue-100 to-pink-50 pb-20">
            <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
                <div className="absolute top-20 left-10 text-6xl animate-bounce" style={{animationDelay: '0s'}}>✨</div>
                <div className="absolute top-40 right-20 text-4xl animate-bounce" style={{animationDelay: '0.5s'}}>💫</div>
                <div className="absolute bottom-40 left-20 text-5xl animate-bounce" style={{animationDelay: '1s'}}>⭐</div>
                <div className="absolute bottom-20 right-10 text-6xl animate-bounce" style={{animationDelay: '1.5s'}}>✨</div>
            </div>

            <nav className="fixed bottom-0 left-0 right-0 bg-white/70 backdrop-blur-lg border-t border-pink-200 z-50">
                <div className="flex justify-around py-3 max-w-md mx-auto">
                    {[
                        { id: 'home', icon: Home, label: 'Home' },
                        { id: 'schedule', icon: Calendar, label: 'Schedule' },
                        { id: 'recommendations', icon: Star, label: 'Our Tips' },
                        { id: 'photos', icon: Image, label: 'Photos' }
                    ].map(({ id, icon: Icon, label }) => (
                        <button
                            key={id}
                            onClick={() => setCurrentPage(id)}
                            className={`flex flex-col items-center gap-1 px-3 py-2 rounded-xl transition-all ${
                                currentPage === id ? 'bg-pink-200 text-pink-700' : 'text-gray-600'
                            }`}
                        >
                            <Icon className="w-5 h-5" />
                            <span className="text-xs font-medium">{label}</span>
                        </button>
                    ))}
                </div>
            </nav>

            <div className="relative z-10">
                {currentPage === 'home' && (
                    <div className="px-6 py-12">
                        <div className="text-center mb-12">
                            <Heart className="w-16 h-16 text-pink-400 fill-pink-400 mx-auto mb-6 animate-bounce" />
                            <h1 className="text-5xl md:text-7xl font-bold mb-4 text-pink-500">We're Getting Married!</h1>
                            <p className="text-2xl md:text-3xl text-blue-500 mb-2">at the Most Magical Place on Earth</p>
                            <p className="text-xl text-gray-700">Disney World, Florida 🏰</p>
                        </div>

                        <div className="max-w-2xl mx-auto bg-white/70 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-12 border border-pink-200">
                            <h2 className="text-2xl font-semibold mb-6 text-center text-gray-800">Countdown to Forever</h2>
                            <div className="grid grid-cols-4 gap-4">
                                {Object.entries(timeLeft).map(([unit, value]) => (
                                    <div key={unit} className="bg-gradient-to-br from-pink-300 to-blue-300 rounded-2xl p-4 shadow-lg">
                                        <div className="text-3xl md:text-4xl font-bold text-white">{value || 0}</div>
                                        <div className="text-xs md:text-sm text-white uppercase">{unit}</div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-3xl mx-auto mb-12">
                            <button onClick={() => setCurrentPage('schedule')} className="bg-white/70 backdrop-blur-lg hover:bg-pink-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-pink-200">
                                <Calendar className="w-8 h-8 mx-auto mb-2 text-pink-500" />
                                <div className="font-semibold text-gray-800">Day Schedule</div>
                            </button>
                            <button onClick={() => openMap('28.4177,-81.5848')} className="bg-white/70 backdrop-blur-lg hover:bg-blue-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-blue-200">
                                <Navigation className="w-8 h-8 mx-auto mb-2 text-blue-500" />
                                <div className="font-semibold text-gray-800">Get Directions</div>
                            </button>
                            <button onClick={openWhatsApp} className="bg-white/70 backdrop-blur-lg hover:bg-green-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-green-200">
                                <MessageCircle className="w-8 h-8 mx-auto mb-2 text-green-500" />
                                <div className="font-semibold text-gray-800">Message Us</div>
                            </button>
                            <button onClick={() => setCurrentPage('recommendations')} className="bg-white/70 backdrop-blur-lg hover:bg-purple-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-purple-200">
                                <Star className="w-8 h-8 mx-auto mb-2 text-purple-500" />
                                <div className="font-semibold text-gray-800">Holiday Tips</div>
                            </button>
                            <button onClick={() => openMap('28.4177,-81.5848')} className="bg-white/70 backdrop-blur-lg hover:bg-red-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-red-200">
                                <MapPin className="w-8 h-8 mx-auto mb-2 text-red-500" />
                                <div className="font-semibold text-gray-800">I'm Lost!</div>
                            </button>
                            <button onClick={() => setCurrentPage('photos')} className="bg-white/70 backdrop-blur-lg hover:bg-yellow-100 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all border border-yellow-200">
                                <Camera className="w-8 h-8 mx-auto mb-2 text-yellow-500" />
                                <div className="font-semibold text-gray-800">Share Photos</div>
                            </button>
                        </div>

                        <div className="max-w-4xl mx-auto mb-12">
                            <h2 className="text-3xl font-bold text-center mb-8 text-blue-500">Important Locations</h2>
                            <div className="grid md:grid-cols-2 gap-6">
                                {locations.map((loc, idx) => (
                                    <div key={idx} className="bg-white/70 backdrop-blur-lg rounded-2xl shadow-lg p-6 border border-blue-200">
                                        <h3 className="text-xl font-bold text-gray-800 mb-2">{loc.name}</h3>
                                        <p className="text-gray-600 mb-3">{loc.note}</p>
                                        <p className="text-sm text-gray-500 mb-4">{loc.address}</p>
                                        <button onClick={() => openMap(loc.coords)} className="w-full bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-xl py-3 font-semibold hover:shadow-lg transition-all flex items-center justify-center gap-2">
                                            <Navigation className="w-5 h-5" />
                                            Open in Maps
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )}

                {currentPage === 'recommendations' && (
                    <div className="max-w-4xl mx-auto px-6 py-12">
                        <h2 className="text-4xl font-bold text-center mb-4 text-purple-500">Our Disney Holiday Tips</h2>
                        <p className="text-center text-gray-600 mb-12 text-lg">We've been before - here's everything you need to know for an amazing 14-day trip! ✨</p>
                        <div className="grid md:grid-cols-2 gap-6">
                            {suggestions.map(suggestion => (
                                <div key={suggestion.id} className="bg-white/70 backdrop-blur-lg rounded-2xl shadow-lg overflow-hidden border border-purple-200">
                                    <button onClick={() => setExpandedSuggestion(expandedSuggestion === suggestion.id ? null : suggestion.id)} className="w-full p-6 text-left hover:bg-purple-50 transition-all">
                                        <div className="flex items-center gap-4">
                                            <span className="text-4xl">{suggestion.icon}</span>
                                            <h3 className="text-xl font-bold text-gray-800 flex-1">{suggestion.title}</h3>
                                            <Star className={`w-6 h-6 text-purple-500 transition-transform ${expandedSuggestion === suggestion.id ? 'rotate-180' : ''}`} />
                                        </div>
                                    </button>
                                    {expandedSuggestion === suggestion.id && (
                                        <div className="px-6 pb-6 bg-gradient-to-br from-purple-50 to-pink-50">
                                            <ul className="space-y-2 mb-4">
                                                {recommendations[suggestion.key].map((item, idx) => (
                                                    <li key={idx} className="flex items-start gap-3 group">
                                                        <Star className="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0" />
                                                        <span className="text-gray-700 flex-1">{item}</span>
                                                        <button onClick={() => removeRecommendation(suggestion.key, idx)} className="opacity-0 group-hover:opacity-100 transition-opacity text-red-500 hover:text-red-700">
                                                            <X className="w-4 h-4" />
                                                        </button>
                                                    </li>
                                                ))}
                                            </ul>
                                            {showAddRecommendation === suggestion.key ? (
                                                <div className="flex gap-2">
                                                    <input type="text" value={newRecommendation} onChange={(e) => setNewRecommendation(e.target.value)} placeholder="Add new tip..." className="flex-1 px-4 py-2 rounded-lg border border-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400" onKeyPress={(e) => e.key === 'Enter' && addRecommendation(suggestion.key)} />
                                                    <button onClick={() => addRecommendation(suggestion.key)} className="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">Add</button>
                                                    <button onClick={() => setShowAddRecommendation(null)} className="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition-colors">Cancel</button>
                                                </div>
                                            ) : (
                                                <button onClick={() => setShowAddRecommendation(suggestion.key)} className="w-full bg-purple-500 text-white rounded-lg py-2 font-semibold hover:bg-purple-600 transition-all flex items-center justify-center gap-2">
                                                    <Plus className="w-5 h-5" />
                                                    Add Your Tip
                                                </button>
                                            )}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {currentPage === 'schedule' && (
                    <div className="max-w-4xl mx-auto px-6 py-12">
                        <h2 className="text-4xl font-bold text-center mb-12 text-pink-500">Wedding Day Timeline</h2>
                        <div className="space-y-6">
                            {schedule.map((item, idx) => (
                                <div key={idx} className="bg-white/70 backdrop-blur-lg rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all border-l-4 border-pink-400">
                                    <div className="flex items-start gap-4">
                                        <div className="bg-gradient-to-br from-pink-400 to-blue-400 rounded-xl p-3 text-white font-bold min-w-fit">
                                            <Clock className="w-5 h-5 mb-1" />
                                            {item.time}
                                        </div>
                                        <div className="flex-1">
                                            <h3 className="text-xl font-bold text-gray-800 mb-1">{item.event}</h3>
                                            <p className="text-gray-600 flex items-center gap-2 mb-1">
                                                <MapPin className="w-4 h-4" />
                                                {item.location}
                                            </p>
                                            <p className="text-sm text-gray-500 italic">{item.note}</p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {currentPage === 'photos' && (
                    <div className="max-w-4xl mx-auto px-6 py-12">
                        <h2 className="text-4xl font-bold text-center mb-4 text-pink-500">Share Your Photos</h2>
                        <p className="text-center text-gray-600 mb-8 text-lg">Capture and share magical moments from our special day!</p>
                        
                        <div className="bg-white/70 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-8 border border-pink-200">
                            <label className="flex flex-col items-center justify-center h-64 border-4 border-dashed border-pink-300 rounded-2xl cursor-pointer hover:border-pink-500 hover:bg-pink-50 transition-all">
                                <Upload className="w-16 h-16 text-pink-400 mb-4" />
                                <span className="text-xl font-semibold text-gray-700 mb-2">Click to Upload Photos</span>
                                <span className="text-sm text-gray-500">or drag and drop</span>
                                <input type="file" multiple accept="image/*" className="hidden" onChange={handlePhotoUpload} />
                            </label>
                        </div>

                        {uploadedPhotos.length > 0 && (
                            <div>
                                <div className="flex justify-between items-center mb-6">
                                    <h3 className="text-2xl font-bold text-gray-800">Uploaded Photos ({uploadedPhotos.length})</h3>
                                    <button onClick={downloadAllPhotos} className="bg-gradient-to-r from-pink-500 to-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all flex items-center gap-2">
                                        <Download className="w-5 h-5" />
                                        Download All
                                    </button>
                                </div>
                                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                    {uploadedPhotos.map(photo => (
                                        <div key={photo.id} className="group relative aspect-square rounded-xl overflow-hidden shadow-lg">
                                            <img src={photo.data} alt={photo.name} className="w-full h-full object-cover" />
                                            {photo.uploading && (
                                                <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
                                                    <div className="text-white text-center">
                                                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
                                                        <p className="text-sm">Uploading...</p>
                                                    </div>
                                                </div>
                                            )}
                                            {photo.uploaded && (
                                                <div className="absolute top-2 right-2 bg-green-500 rounded-full p-1">
                                                    <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                                    </svg>
                                                </div>
                                            )}
                                            {photo.uploadError && (
                                                <div className="absolute top-2 right-2 bg-red-500 rounded-full p-1">
                                                    <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                                    </svg>
                                                </div>
                                            )}
                                            <button onClick={() => downloadPhoto(photo)} className="absolute inset-0 bg-black/0 hover:bg-black/60 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
                                                <Download className="w-8 h-8 text-white" />
                                            </button>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
}