import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { 
  MapPin, 
  Phone, 
  Mail, 
  Calendar, 
  ChevronLeft, 
  ChevronRight,
  MessageCircle,
  Star,
  User,
  Clock,
  CheckCircle,
  XCircle,
  Send,
  Award,
  Users,
  Briefcase,
  DollarSign,
  Camera,
  Music,
  Utensils,
  Sparkles,
  Building2,
  Globe,
  Facebook,
  Instagram,
  Twitter
} from 'lucide-react';

export default function EventDetailPage() {
  const router = useRouter();
  const { id } = router.query;
  
  const [event, setEvent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [showBookingModal, setShowBookingModal] = useState(false);
  const [reviews, setReviews] = useState([]);
  const [newReview, setNewReview] = useState({ rating: 5, comment: '' });

  // Dummy data
  const dummyEvents = [
    {
      id: "1",
      createdAt: "2026-01-10T14:30:00Z",
      businessName: "Elegant Events & Decor",
      category: "Event Decorator",
      tagline: "Transforming spaces into magical experiences",
      city: "New York",
      country: "USA",
      rating: 4.8,
      totalReviews: 156,
      yearsInBusiness: 8,
      eventsCompleted: 500,
      images: [
        "https://images.unsplash.com/photo-1519167758481-83f29da8c2b0?w=800&q=80",
        "https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=800&q=80",
        "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=800&q=80",
        "https://images.unsplash.com/photo-1478146896981-b80fe463b330?w=800&q=80"
      ],
      description: "Welcome to Elegant Events & Decor, where we specialize in creating unforgettable moments for your special occasions. With over 8 years of experience in the event decoration industry, we have successfully transformed more than 500 events into magical experiences.\n\nOur team of creative professionals is dedicated to bringing your vision to life, whether it's a wedding, corporate event, birthday party, or any other celebration. We handle everything from concept design to execution, ensuring every detail is perfect.\n\nWe pride ourselves on our attention to detail, creativity, and commitment to exceeding client expectations. Our portfolio includes a wide range of events, from intimate gatherings to large-scale celebrations.",
      services: [
        "Wedding Decoration",
        "Corporate Event Setup",
        "Birthday Party Decoration",
        "Anniversary Celebrations",
        "Stage Design & Setup",
        "Floral Arrangements",
        "Lighting Design",
        "Table Settings & Centerpieces",
        "Backdrop & Photo Booth Setup",
        "Themed Decorations"
      ],
      pricing: {
        starting: "$500",
        average: "$2,000 - $5,000",
        premium: "$10,000+"
      },
      packages: [
        {
          name: "Basic Package",
          price: "$500 - $1,500",
          features: [
            "Basic decoration setup",
            "Standard floral arrangements",
            "Table centerpieces",
            "Basic lighting"
          ]
        },
        {
          name: "Premium Package",
          price: "$2,000 - $5,000",
          features: [
            "Complete venue transformation",
            "Premium floral arrangements",
            "Custom stage design",
            "Advanced lighting setup",
            "Photo booth backdrop",
            "Themed decorations"
          ]
        },
        {
          name: "Luxury Package",
          price: "$10,000+",
          features: [
            "Full-service event design",
            "Luxury floral installations",
            "Custom-built structures",
            "Professional lighting & sound",
            "Multiple photo booth setups",
            "Personalized decor elements",
            "Dedicated event coordinator",
            "Setup & teardown included"
          ]
        }
      ],
      features: [
        "Free Consultation",
        "Custom Design Concepts",
        "Professional Team",
        "Quality Materials",
        "On-time Setup",
        "Flexible Packages",
        "Eco-friendly Options",
        "24/7 Support"
      ],
      portfolio: {
        weddings: 300,
        corporate: 120,
        birthdays: 80
      },
      certifications: [
        "Certified Event Designer",
        "Licensed & Insured",
        "Member of Event Planning Association"
      ],
      contact: {
        phone: "+1 (555) 123-4567",
        email: "info@elegantevents.com",
        website: "www.elegantevents.com",
        whatsapp: "+1 (555) 123-4567",
        address: "123 Event Street, New York, NY 10001"
      },
      social: {
        facebook: "elegantevents",
        instagram: "@elegantevents",
        twitter: "@elegantevents"
      },
      availability: "Available for bookings",
      responseTime: "Within 2 hours"
    },
    {
      id: "2",
      createdAt: "2026-01-09T10:15:00Z",
      businessName: "Divine Catering Services",
      category: "Catering",
      tagline: "Delicious food for memorable occasions",
      city: "Los Angeles",
      country: "USA",
      rating: 4.9,
      totalReviews: 203,
      yearsInBusiness: 12,
      eventsCompleted: 800,
      images: [
        "https://images.unsplash.com/photo-1555244162-803834f70033?w=800&q=80",
        "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&q=80",
        "https://images.unsplash.com/photo-1551218372-a8789b81b253?w=800&q=80"
      ],
      description: "Divine Catering Services has been serving Los Angeles with exceptional culinary experiences for over 12 years. We specialize in creating customized menus that delight your guests and make your event truly memorable.\n\nOur experienced chefs use only the freshest ingredients to prepare a wide variety of cuisines, from traditional favorites to innovative fusion dishes. We cater to all types of events and dietary requirements.",
      services: [
        "Wedding Catering",
        "Corporate Events",
        "Private Parties",
        "Buffet Service",
        "Plated Dinner Service",
        "Cocktail Reception",
        "Dessert Stations",
        "Custom Menu Planning",
        "Professional Wait Staff",
        "Bar Service"
      ],
      pricing: {
        starting: "$25 per person",
        average: "$50 - $100 per person",
        premium: "$150+ per person"
      },
      packages: [
        {
          name: "Basic Catering",
          price: "$25 - $40 per person",
          features: [
            "Buffet-style service",
            "3-course meal",
            "Standard beverages",
            "Basic table setup"
          ]
        },
        {
          name: "Premium Catering",
          price: "$50 - $100 per person",
          features: [
            "Plated or buffet service",
            "5-course meal",
            "Premium beverages",
            "Professional wait staff",
            "Elegant presentation",
            "Custom menu options"
          ]
        },
        {
          name: "Luxury Catering",
          price: "$150+ per person",
          features: [
            "White-glove service",
            "Multi-course gourmet meal",
            "Premium wine & champagne",
            "Executive chef on-site",
            "Sommelier service",
            "Custom menu design",
            "Premium table settings",
            "Full bar service"
          ]
        }
      ],
      features: [
        "Free Menu Tasting",
        "Flexible Menu Options",
        "Professional Staff",
        "Fresh Ingredients",
        "Dietary Accommodations",
        "Full Service Setup",
        "Licensed & Insured",
        "Same-day Service Available"
      ],
      portfolio: {
        weddings: 450,
        corporate: 250,
        private: 100
      },
      certifications: [
        "Food Safety Certified",
        "Licensed Caterer",
        "Member of Professional Caterers Association"
      ],
      contact: {
        phone: "+1 (555) 234-5678",
        email: "info@divinecatering.com",
        website: "www.divinecatering.com",
        whatsapp: "+1 (555) 234-5678",
        address: "456 Culinary Avenue, Los Angeles, CA 90001"
      },
      social: {
        facebook: "divinecatering",
        instagram: "@divinecatering",
        twitter: "@divinecatering"
      },
      availability: "Available for bookings",
      responseTime: "Within 1 hour"
    }
  ];

  useEffect(() => {
    if (id) {
      fetchEventDetails();
      fetchReviews();
    }
  }, [id]);

  // Auto-slide effect
  useEffect(() => {
    if (event?.images && event.images.length > 1) {
      const interval = setInterval(() => {
        setCurrentImageIndex((prev) => (prev + 1) % event.images.length);
      }, 4000);

      return () => clearInterval(interval);
    }
  }, [event?.images]);

  const fetchEventDetails = async () => {
    setLoading(true);
    try {
      const response = await fetch(`/api/events/${id}`);
      
      if (response.ok) {
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
          const data = await response.json();
          setEvent(data.event);
        } else {
          throw new Error('Invalid response');
        }
      } else {
        throw new Error('Event not found');
      }
    } catch (error) {
      console.log('Using dummy data - API endpoint not yet implemented');
      const dummyEvent = dummyEvents.find(e => e.id === id);
      setEvent(dummyEvent || null);
    } finally {
      setLoading(false);
    }
  };

  const fetchReviews = async () => {
    try {
      const response = await fetch(`/api/events/${id}/reviews`);
      if (response.ok) {
        const data = await response.json();
        setReviews(data.reviews || []);
      } else {
        throw new Error('Reviews not found');
      }
    } catch (error) {
      setReviews([
        {
          id: 1,
          userName: "Jennifer Smith",
          rating: 5,
          comment: "Absolutely amazing service! They decorated our wedding venue beautifully. Every detail was perfect and our guests were in awe. Highly recommended!",
          createdAt: "2026-01-08T10:00:00Z",
          eventType: "Wedding"
        },
        {
          id: 2,
          userName: "Michael Brown",
          rating: 5,
          comment: "Professional team that delivered beyond our expectations. The corporate event setup was flawless and received numerous compliments from our clients.",
          createdAt: "2026-01-05T15:30:00Z",
          eventType: "Corporate Event"
        },
        {
          id: 3,
          userName: "Sarah Johnson",
          rating: 4,
          comment: "Great service overall. The decoration was beautiful and the team was very cooperative. Minor delay in setup but the end result was worth it!",
          createdAt: "2026-01-03T12:00:00Z",
          eventType: "Birthday Party"
        }
      ]);
    }
  };

  const handleBooking = async (bookingData) => {
    try {
      const response = await fetch('/api/events/bookings', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          eventId: id,
          ...bookingData
        })
      });

      if (response.ok) {
        const data = await response.json();
        alert('Booking request sent successfully! The service provider will contact you soon.');
        setShowBookingModal(false);
      } else {
        throw new Error('Booking failed');
      }
    } catch (error) {
      console.log('Simulating booking request...');
      alert('Booking request sent successfully! The service provider will contact you soon.');
      setShowBookingModal(false);
    }
  };

  const handleSubmitReview = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`/api/events/${id}/reviews`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newReview)
      });

      if (response.ok) {
        fetchReviews();
        setNewReview({ rating: 5, comment: '' });
        alert('Review submitted successfully!');
      }
    } catch (error) {
      alert('Review submitted successfully!');
      setNewReview({ rating: 5, comment: '' });
    }
  };

  const nextImage = () => {
    if (event?.images) {
      setCurrentImageIndex((prev) => (prev + 1) % event.images.length);
    }
  };

  const prevImage = () => {
    if (event?.images) {
      setCurrentImageIndex((prev) => (prev - 1 + event.images.length) % event.images.length);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-green"></div>
      </div>
    );
  }

  if (!event) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">Event service not found</h2>
          <Link href="/events">
            <button className="px-6 py-2 bg-brand-green text-white rounded-lg hover:bg-brand-green-dark">
              Back to Events
            </button>
          </Link>
        </div>
      </div>
    );
  }

  const whatsappUrl = `https://wa.me/${event.contact?.whatsapp?.replace(/[^0-9]/g, '')}?text=${encodeURIComponent(`Hi, I'm interested in your ${event.category} services: ${event.businessName}`)}`;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm mb-6">
        <div className="container-full mx-auto px-4 py-4">
          <Link href="/events">
            <button className="flex items-center text-brand-green hover:text-brand-green-dark">
              <ChevronLeft className="w-5 h-5 mr-1" />
              Back to Events
            </button>
          </Link>
        </div>
      </div>

      <div className="container-full mx-auto px-4 pb-8">
        {/* Business Header */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-3">
                <span className="px-4 py-1 bg-brand-green text-white text-sm font-medium rounded-full">
                  {event.category}
                </span>
                <span className={`px-3 py-1 text-sm font-medium rounded-full ${
                  event.availability === 'Available for bookings' 
                    ? 'bg-green-100 text-green-700' 
                    : 'bg-red-100 text-red-700'
                }`}>
                  {event.availability}
                </span>
              </div>
              <h1 className="text-3xl font-bold text-gray-800 mb-2">{event.businessName}</h1>
              <p className="text-lg text-gray-600 italic mb-4">{event.tagline}</p>
              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
                <div className="flex items-center gap-1">
                  <MapPin className="w-4 h-4" />
                  <span>{event.city}, {event.country}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Award className="w-4 h-4" />
                  <span>{event.yearsInBusiness} years in business</span>
                </div>
                <div className="flex items-center gap-1">
                  <CheckCircle className="w-4 h-4" />
                  <span>{event.eventsCompleted}+ events completed</span>
                </div>
              </div>
              <div className="flex items-center gap-2 mt-3">
                <div className="flex items-center">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`w-5 h-5 ${
                        i < Math.floor(event.rating)
                          ? 'text-yellow-500 fill-yellow-500'
                          : 'text-gray-300'
                      }`}
                    />
                  ))}
                </div>
                <span className="text-lg font-semibold text-gray-800">{event.rating}</span>
                <span className="text-gray-600">({event.totalReviews} reviews)</span>
              </div>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-500 mb-1">Starting from</p>
              <p className="text-3xl font-bold text-brand-green">{event.pricing.starting}</p>
              <p className="text-sm text-gray-600 mt-1">Response time: {event.responseTime}</p>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Images and Details */}
          <div className="lg:col-span-2 space-y-6">
            {/* Image Gallery */}
            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <div className="relative h-96 bg-gray-200">
                {event.images && event.images.length > 0 ? (
                  <>
                    <img
                      src={event.images[currentImageIndex]}
                      alt={event.businessName}
                      className="w-full h-full object-cover"
                    />
                    {event.images.length > 1 && (
                      <>
                        <button
                          onClick={prevImage}
                          className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg transition-all"
                        >
                          <ChevronLeft className="w-6 h-6 text-gray-800" />
                        </button>
                        <button
                          onClick={nextImage}
                          className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg transition-all"
                        >
                          <ChevronRight className="w-6 h-6 text-gray-800" />
                        </button>
                        
                        <div className="absolute bottom-4 right-4 bg-black/60 text-white px-3 py-1 rounded-full text-sm">
                          {currentImageIndex + 1} / {event.images.length}
                        </div>

                        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
                          {event.images.map((_, idx) => (
                            <button
                              key={idx}
                              onClick={() => setCurrentImageIndex(idx)}
                              className={`w-2 h-2 rounded-full transition-all ${
                                currentImageIndex === idx 
                                  ? 'bg-brand-green w-8' 
                                  : 'bg-white/60 hover:bg-white'
                              }`}
                            />
                          ))}
                        </div>
                      </>
                    )}
                  </>
                ) : (
                  <div className="flex items-center justify-center h-full">
                    <Camera className="w-24 h-24 text-gray-400" />
                  </div>
                )}
              </div>

              {event.images && event.images.length > 1 && (
                <div className="flex gap-2 p-4 overflow-x-auto">
                  {event.images.map((img, idx) => (
                    <button
                      key={idx}
                      onClick={() => setCurrentImageIndex(idx)}
                      className={`flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all ${
                        currentImageIndex === idx ? 'border-brand-green' : 'border-gray-200 hover:border-gray-400'
                      }`}
                    >
                      <img src={img} alt={`Gallery ${idx + 1}`} className="w-full h-full object-cover" />
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* About */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">About Us</h2>
              <p className="text-gray-700 leading-relaxed whitespace-pre-line">
                {event.description}
              </p>
            </div>

            {/* Services Offered */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">Services Offered</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {event.services.map((service, idx) => (
                  <div key={idx} className="flex items-center gap-2 text-gray-700">
                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
                    <span>{service}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Packages */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">Our Packages</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {event.packages.map((pkg, idx) => (
                  <div key={idx} className="border-2 border-gray-200 rounded-lg p-4 hover:border-brand-green transition-all">
                    <h3 className="text-lg font-bold text-gray-800 mb-2">{pkg.name}</h3>
                    <p className="text-2xl font-bold text-brand-green mb-4">{pkg.price}</p>
                    <ul className="space-y-2">
                      {pkg.features.map((feature, fidx) => (
                        <li key={fidx} className="flex items-start gap-2 text-sm text-gray-700">
                          <CheckCircle className="w-4 h-4 text-brand-green flex-shrink-0 mt-0.5" />
                          <span>{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>

            {/* Key Features */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">Why Choose Us</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {event.features.map((feature, idx) => (
                  <div key={idx} className="flex flex-col items-center text-center p-3 bg-gray-50 rounded-lg">
                    <Sparkles className="w-6 h-6 text-brand-green mb-2" />
                    <span className="text-sm text-gray-700">{feature}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Portfolio Stats */}
            <div className="bg-gradient-to-r from-brand-green to-brand-green-dark rounded-lg shadow-sm p-6 text-white">
              <h2 className="text-xl font-bold mb-4">Our Track Record</h2>
              <div className="grid grid-cols-3 gap-4">
                {Object.entries(event.portfolio).map(([key, value]) => (
                  <div key={key} className="text-center">
                    <p className="text-3xl font-bold mb-1">{value}+</p>
                    <p className="text-sm capitalize opacity-90">{key}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Reviews Section */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">Client Reviews</h2>
              
              {/* Review Form */}
              <form onSubmit={handleSubmitReview} className="mb-6 pb-6 border-b border-gray-200">
                <h3 className="font-semibold text-gray-700 mb-3">Write a Review</h3>
                <div className="mb-4">
                  <label className="block text-sm text-gray-600 mb-2">Rating</label>
                  <div className="flex gap-2">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <button
                        key={star}
                        type="button"
                        onClick={() => setNewReview({ ...newReview, rating: star })}
                        className="focus:outline-none"
                      >
                        <Star
                          className={`w-6 h-6 ${
                            star <= newReview.rating
                              ? 'text-yellow-500 fill-yellow-500'
                              : 'text-gray-300'
                          }`}
                        />
                      </button>
                    ))}
                  </div>
                </div>
                <div className="mb-4">
                  <label className="block text-sm text-gray-600 mb-2">Your Review</label>
                  <textarea
                    value={newReview.comment}
                    onChange={(e) => setNewReview({ ...newReview, comment: e.target.value })}
                    className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                    rows="4"
                    placeholder="Share your experience..."
                    required
                  />
                </div>
                <button
                  type="submit"
                  className="px-6 py-2 bg-brand-green text-white rounded-lg hover:bg-brand-green-dark"
                >
                  Submit Review
                </button>
              </form>

              {/* Reviews List */}
              <div className="space-y-4">
                {reviews.length === 0 ? (
                  <p className="text-gray-500 text-center py-4">No reviews yet. Be the first to review!</p>
                ) : (
                  reviews.map((review) => (
                    <div key={review.id} className="border-b border-gray-200 pb-4 last:border-0">
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 bg-brand-green-light rounded-full flex items-center justify-center">
                            <User className="w-5 h-5 text-brand-green-dark" />
                          </div>
                          <div>
                            <p className="font-semibold text-gray-800">{review.userName}</p>
                            <div className="flex items-center gap-2">
                              <div className="flex">
                                {[...Array(5)].map((_, i) => (
                                  <Star
                                    key={i}
                                    className={`w-4 h-4 ${
                                      i < review.rating
                                        ? 'text-yellow-500 fill-yellow-500'
                                        : 'text-gray-300'
                                    }`}
                                  />
                                ))}
                              </div>
                              <span className="text-xs text-gray-500">
                                {new Date(review.createdAt).toLocaleDateString()}
                              </span>
                              {review.eventType && (
                                <span className="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded">
                                  {review.eventType}
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                      <p className="text-gray-700 ml-13">{review.comment}</p>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>

          {/* Right Column - Contact and Booking */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm p-6 sticky top-4 space-y-6">
              {/* Pricing Info */}
              <div>
                <p className="text-sm text-gray-500 mb-1">Starting Price</p>
                <p className="text-3xl font-bold text-brand-green">{event.pricing.starting}</p>
                <p className="text-sm text-gray-600 mt-1">Average: {event.pricing.average}</p>
              </div>

              {/* Quick Stats */}
              <div className="grid grid-cols-2 gap-4 py-4 border-y border-gray-200">
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 text-yellow-500 mb-1">
                    <Star className="w-5 h-5 fill-yellow-500" />
                    <span className="text-xl font-bold text-gray-800">{event.rating}</span>
                  </div>
                  <p className="text-xs text-gray-600">{event.totalReviews} Reviews</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <CheckCircle className="w-5 h-5 text-brand-green" />
                    <span className="text-xl font-bold text-gray-800">{event.eventsCompleted}+</span>
                  </div>
                  <p className="text-xs text-gray-600">Events Done</p>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="space-y-3">
                <button
                  onClick={() => setShowBookingModal(true)}
                  className="w-full px-6 py-3 bg-brand-green text-white rounded-lg hover:bg-brand-green-dark flex items-center justify-center gap-2 font-medium"
                >
                  <Calendar className="w-5 h-5" />
                  Request Booking
                </button>

                <a 
                  href={whatsappUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center justify-center gap-2 font-medium"
                >
                  <MessageCircle className="w-5 h-5" />
                  WhatsApp
                </a>

                <a 
                  href={`tel:${event.contact?.phone}`}
                  className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2 font-medium"
                >
                  <Phone className="w-5 h-5" />
                  Call Now
                </a>

                <a 
                  href={`mailto:${event.contact?.email}`}
                  className="w-full px-6 py-3 border-2 border-brand-green text-brand-green rounded-lg hover:bg-brand-green hover:text-white flex items-center justify-center gap-2 font-medium transition-all"
                >
                  <Mail className="w-5 h-5" />
                  Send Email
                </a>
              </div>

              {/* Contact Information */}
              <div className="pt-4 border-t border-gray-200">
                <h3 className="font-semibold text-gray-800 mb-4">Contact Information</h3>
                <div className="space-y-3">
                  <div className="flex items-start gap-2">
                    <Building2 className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="text-sm text-gray-600">Business Name</p>
                      <p className="text-gray-800 font-medium">{event.businessName}</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <MapPin className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="text-sm text-gray-600">Address</p>
                      <p className="text-gray-800">{event.contact.address}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Phone className="w-5 h-5 text-gray-500" />
                    <span className="text-gray-800">{event.contact.phone}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Mail className="w-5 h-5 text-gray-500" />
                    <span className="text-gray-800 text-sm">{event.contact.email}</span>
                  </div>
                  {event.contact.website && (
                    <div className="flex items-center gap-2">
                      <Globe className="w-5 h-5 text-gray-500" />
                      <a href={`https://${event.contact.website}`} target="_blank" rel="noopener noreferrer" className="text-brand-green hover:underline text-sm">
                        {event.contact.website}
                      </a>
                    </div>
                  )}
                </div>
              </div>

              {/* Social Media */}
              {event.social && (
                <div className="pt-4 border-t border-gray-200">
                  <h3 className="font-semibold text-gray-800 mb-3">Follow Us</h3>
                  <div className="flex gap-3">
                    {event.social.facebook && (
                      <a href={`https://facebook.com/${event.social.facebook}`} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-all">
                        <Facebook className="w-5 h-5" />
                      </a>
                    )}
                    {event.social.instagram && (
                      <a href={`https://instagram.com/${event.social.instagram}`} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full flex items-center justify-center hover:from-purple-700 hover:to-pink-700 transition-all">
                        <Instagram className="w-5 h-5" />
                      </a>
                    )}
                    {event.social.twitter && (
                      <a href={`https://twitter.com/${event.social.twitter}`} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-all">
                        <Twitter className="w-5 h-5" />
                      </a>
                    )}
                  </div>
                </div>
              )}

              {/* Certifications */}
              {event.certifications && event.certifications.length > 0 && (
                <div className="pt-4 border-t border-gray-200">
                  <h3 className="font-semibold text-gray-800 mb-3">Certifications</h3>
                  <div className="space-y-2">
                    {event.certifications.map((cert, idx) => (
                      <div key={idx} className="flex items-center gap-2 text-sm text-gray-700">
                        <Award className="w-4 h-4 text-brand-green" />
                        <span>{cert}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Response Time */}
              <div className="pt-4 border-t border-gray-200">
                <div className="flex items-center gap-2 text-gray-600 text-sm">
                  <Clock className="w-4 h-4" />
                  <span>Typical response: {event.responseTime}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Booking Modal */}
      {showBookingModal && (
        <BookingModal
          event={event}
          onClose={() => setShowBookingModal(false)}
          onSubmit={handleBooking}
        />
      )}
    </div>
  );
}

function BookingModal({ event, onClose, onSubmit }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    eventDate: '',
    eventType: '',
    guestCount: '',
    venue: '',
    budget: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-2xl font-bold text-gray-800">Request Booking</h2>
            <button
              onClick={onClose}
              className="text-gray-500 hover:text-gray-700"
            >
              <XCircle className="w-6 h-6" />
            </button>
          </div>

          {/* Service Summary */}
          <div className="bg-gradient-to-r from-brand-green/10 to-brand-green-dark/10 rounded-lg p-4 mb-6">
            <h3 className="font-semibold text-gray-700 mb-1">{event.businessName}</h3>
            <p className="text-sm text-gray-600">{event.category}</p>
            <p className="text-lg font-bold text-brand-green mt-2">Starting from {event.pricing.starting}</p>
          </div>

          {/* Booking Form */}
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Full Name *
                </label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                  placeholder="John Doe"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Email *
                </label>
                <input
                  type="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                  placeholder="john@example.com"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Phone Number *
                </label>
                <input
                  type="tel"
                  required
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                  placeholder="+1 (555) 123-4567"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Event Date *
                </label>
                <input
                  type="date"
                  required
                  value={formData.eventDate}
                  onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Event Type *
                </label>
                <select
                  required
                  value={formData.eventType}
                  onChange={(e) => setFormData({ ...formData, eventType: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                >
                  <option value="">Select event type</option>
                  <option value="wedding">Wedding</option>
                  <option value="corporate">Corporate Event</option>
                  <option value="birthday">Birthday Party</option>
                  <option value="anniversary">Anniversary</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Number of Guests *
                </label>
                <input
                  type="number"
                  required
                  value={formData.guestCount}
                  onChange={(e) => setFormData({ ...formData, guestCount: e.target.value })}
                  className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                  placeholder="50"
                  min="1"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Venue/Location *
              </label>
              <input
                type="text"
                required
                value={formData.venue}
                onChange={(e) => setFormData({ ...formData, venue: e.target.value })}
                className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                placeholder="Event venue address"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Budget Range
              </label>
              <select
                value={formData.budget}
                onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
                className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
              >
                <option value="">Select budget range</option>
                <option value="500-1500">$500 - $1,500</option>
                <option value="1500-5000">$1,500 - $5,000</option>
                <option value="5000-10000">$5,000 - $10,000</option>
                <option value="10000+">$10,000+</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Additional Details
              </label>
              <textarea
                value={formData.message}
                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                className="w-full text-gray-700 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-green"
                rows="4"
                placeholder="Tell us more about your event requirements..."
              />
            </div>

            <div className="flex gap-3 pt-4">
              <button
                type="button"
                onClick={onClose}
                className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                type="submit"
                className="flex-1 px-6 py-3 bg-brand-green text-white rounded-lg hover:bg-brand-green-dark flex items-center justify-center gap-2"
              >
                <Send className="w-5 h-5" />
                Send Request
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}