import React, { useState } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("ai-events-hub") const [activeTab, setActiveTab] = useState("discover") const [isGenerating, setIsGenerating] = useState(false) const [selectedEvent, setSelectedEvent] = useState(null) const [showCreateEvent, setShowCreateEvent] = useState(false) const [showNotifications, setShowNotifications] = useState(false) const [showReviewModal, setShowReviewModal] = useState(null) const [showNetworking, setShowNetworking] = useState(false) const [distanceFilter, setDistanceFilter] = useState("all") const [categoryFilter, setCategoryFilter] = useState("all") const [searchQuery, setSearchQuery] = useState("") const [sortBy, setSortBy] = useState("date") // User profile const { doc: profile, merge: mergeProfile } = useDocument({ _id: "user-profile", username: "", interests: [], location: "", availability: "weekends", bio: "", savedEvents: [], connections: [], expertise: [], lookingForMentor: false, willingToMentor: false }) // New event form const { doc: newEvent, merge: mergeEvent, submit: submitEvent, reset: resetEvent } = useDocument({ type: "event", title: "", date: "", location: "", category: "conference", description: "", attendees: [], waitlist: [], organizer: "user", isPrivate: false, capacity: 0, isVirtual: false, meetingLink: "", tags: [], createdAt: Date.now() }) // Review form const { doc: newReview, merge: mergeReview, reset: resetReview } = useDocument({ rating: 5, comment: "" }) // Query data const { docs: events } = useLiveQuery("type", { key: "event", descending: true }) const { docs: myRSVPs } = useLiveQuery("type", { key: "rsvp", descending: true }) const { docs: reviews } = useLiveQuery("type", { key: "review", descending: true }) const { docs: notifications } = useLiveQuery("type", { key: "notification", descending: true, limit: 20 }) const { docs: connections } = useLiveQuery("type", { key: "connection", descending: true }) // Category colors const categoryColors = { conference: { bg: "bg-[#8b5cf6]", border: "border-[#6d28d9]", light: "bg-[#ede9fe]" }, meetup: { bg: "bg-[#3b82f6]", border: "border-[#1d4ed8]", light: "bg-[#dbeafe]" }, workshop: { bg: "bg-[#10b981]", border: "border-[#047857]", light: "bg-[#d1fae5]" }, hackathon: { bg: "bg-[#f59e0b]", border: "border-[#d97706]", light: "bg-[#fef3c7]" }, webinar: { bg: "bg-[#ec4899]", border: "border-[#be185d]", light: "bg-[#fce7f3]" } } // Generate sample events async function generateEvents() { if (!profile.interests || profile.interests.length === 0) { alert("Please add your interests first!") return } setIsGenerating(true) try { const response = await callAI( `Generate 6 realistic AI-related events (conferences, meetups, workshops, hackathons, webinars) for someone interested in: ${profile.interests.join(", ")}. Location preference: ${profile.location || "various cities"}. Include a mix of virtual and in-person events with dates in the next 3 months. Make them creative and engaging with realistic details.`, { schema: { properties: { events: { type: "array", items: { type: "object", properties: { title: { type: "string" }, date: { type: "string" }, location: { type: "string" }, category: { type: "string" }, description: { type: "string" }, tags: { type: "array", items: { type: "string" } }, isVirtual: { type: "boolean" }, capacity: { type: "number" }, organizer: { type: "string" } } } } } } } ) const data = JSON.parse(response) for (const event of data.events) { await database.put({ type: "event", ...event, attendees: [], waitlist: [], isPrivate: false, meetingLink: event.isVirtual ? `https://meet.example.com/${Math.random().toString(36).substring(7)}` : "", createdAt: Date.now() }) } await createNotification("🎉 New events discovered based on your interests!") } catch (error) { console.error("Error generating events:", error) } finally { setIsGenerating(false) } } // Create notification async function createNotification(message, eventId = null) { await database.put({ type: "notification", message, eventId, read: false, createdAt: Date.now() }) } // Mark notification as read async function markNotificationRead(notificationId) { const notification = notifications.find(n => n._id === notificationId) if (notification) { await database.put({ ...notification, read: true }) } } // Clear all notifications async function clearAllNotifications() { for (const notification of notifications) { await database.del(notification._id) } } // RSVP to event with capacity check async function rsvpToEvent(event) { const existingRSVP = myRSVPs.find(r => r.eventId === event._id) const username = profile.username || "user" if (existingRSVP) { await database.del(existingRSVP._id) const updatedAttendees = event.attendees.filter(a => a !== username) await database.put({ ...event, attendees: updatedAttendees }) await createNotification(`You cancelled your RSVP to ${event.title}`) } else { if (event.capacity > 0 && event.attendees.length >= event.capacity) { const updatedWaitlist = [...(event.waitlist || []), username] await database.put({ ...event, waitlist: updatedWaitlist }) await createNotification(`📋 You've been added to the waitlist for ${event.title}`) } else { await database.put({ type: "rsvp", eventId: event._id, eventTitle: event.title, eventDate: event.date, createdAt: Date.now() }) const updatedAttendees = [...(event.attendees || []), username] await database.put({ ...event, attendees: updatedAttendees }) await createNotification(`🎉 You're going to ${event.title}!`, event._id) } } } // Check if user has RSVP'd function hasRSVPd(eventId) { return myRSVPs.some(r => r.eventId === eventId) } // Check if on waitlist function isOnWaitlist(event) { const username = profile.username || "user" return event.waitlist?.includes(username) } // Save event for later async function toggleSaveEvent(eventId) { const saved = profile.savedEvents || [] if (saved.includes(eventId)) { mergeProfile({ savedEvents: saved.filter(id => id !== eventId) }) await createNotification("Event removed from saved list") } else { mergeProfile({ savedEvents: [...saved, eventId] }) await createNotification("📌 Event saved for later!") } } // Add interest function addInterest(interest) { if (interest && !profile.interests.includes(interest)) { mergeProfile({ interests: [...profile.interests, interest] }) } } // Remove interest function removeInterest(interest) { mergeProfile({ interests: profile.interests.filter(i => i !== interest) }) } // Submit custom event async function handleCreateEvent(e) { e.preventDefault() if (!newEvent.title || !newEvent.date || !newEvent.location) { alert("Please fill in all required fields!") return } await submitEvent() setShowCreateEvent(false) await createNotification(`🎊 Your event "${newEvent.title}" has been created!`) resetEvent() } // Submit review async function handleSubmitReview(eventId) { if (!newReview.comment.trim()) { alert("Please write a review!") return } await database.put({ type: "review", eventId, rating: newReview.rating, comment: newReview.comment, author: profile.username || "Anonymous", createdAt: Date.now() }) const event = events.find(e => e._id === eventId) if (event) { await createNotification(`⭐ Thanks for reviewing ${event.title}!`) } resetReview() setShowReviewModal(null) } // Get event reviews function getEventReviews(eventId) { return reviews.filter(r => r.eventId === eventId) } // Calculate average rating function getAverageRating(eventId) { const eventReviews = getEventReviews(eventId) if (eventReviews.length === 0) return 0 const sum = eventReviews.reduce((acc, r) => acc + r.rating, 0) return (sum / eventReviews.length).toFixed(1) } // Add connection async function toggleConnection(username) { const existingConnection = connections.find(c => c.username === username) if (existingConnection) { await database.del(existingConnection._id) await createNotification(`You disconnected from ${username}`) } else { await database.put({ type: "connection", username, createdAt: Date.now() }) await createNotification(`🤝 You're now connected with ${username}!`) } } // Check if connected function isConnected(username) { return connections.some(c => c.username === username) } // Filter and search events function getFilteredEvents() { let filtered = events // Search filter if (searchQuery.trim()) { const searchLower = searchQuery.toLowerCase() filtered = filtered.filter(event => event.title.toLowerCase().includes(searchLower) || event.description.toLowerCase().includes(searchLower) || event.location.toLowerCase().includes(searchLower) || event.tags?.some(tag => tag.toLowerCase().includes(searchLower)) ) } // Category filter if (categoryFilter !== "all") { filtered = filtered.filter(event => event.category === categoryFilter) } // Interest-based recommendations if (profile.interests.length > 0 && categoryFilter === "all" && !searchQuery) { filtered = filtered.filter(event => event.tags?.some(tag => profile.interests.some(interest => tag.toLowerCase().includes(interest.toLowerCase()) ) ) ) } // Sort if (sortBy === "date") { filtered.sort((a, b) => new Date(a.date) - new Date(b.date)) } else if (sortBy === "attendees") { filtered.sort((a, b) => (b.attendees?.length || 0) - (a.attendees?.length || 0)) } else if (sortBy === "rating") { filtered.sort((a, b) => getAverageRating(b._id) - getAverageRating(a._id)) } return filtered } // Get saved events function getSavedEvents() { return events.filter(e => profile.savedEvents?.includes(e._id)) } // Get category style function getCategoryStyle(category) { return categoryColors[category] || categoryColors.conference } // Get attendees for networking function getAttendees() { const attendeeMap = {} myRSVPs.forEach(rsvp => { const event = events.find(e => e._id === rsvp.eventId) if (event) { event.attendees?.forEach(attendee => { if (attendee !== (profile.username || "user")) { if (!attendeeMap[attendee]) { attendeeMap[attendee] = [] } attendeeMap[attendee].push(event.title) } }) } }) return Object.entries(attendeeMap).map(([username, events]) => ({ username, events })) } const filteredEvents = getFilteredEvents() const savedEvents = getSavedEvents() const attendees = getAttendees() const unreadNotifications = notifications.filter(n => !n.read).length return (

{/* Graph paper background */}

{/* Header */}

🚀 AI Events Hub

Your AI community awaits

{/* Main Content */}

{activeTab === "discover" && (

{/* Search and Filter */}

setSearchQuery(e.target.value)} placeholder="🔍 Search events..." className="w-full px-4 py-3 border-4 border-[#0f172a] rounded-full text-[#0f172a] font-bold mb-3 focus:outline-none focus:border-[#8b5cf6]" />

{Object.keys(categoryColors).map(cat => ( ))}

{/* Quick Actions */}

{/* Events List */}

{searchQuery ? `🔍 Search Results (${filteredEvents.length})` : categoryFilter !== "all" ? `🏷️ ${categoryFilter} Events` : profile.interests.length > 0 ? `🌟 Recommended (${filteredEvents.length})` : `📅 All Events (${filteredEvents.length})`}

{filteredEvents.length === 0 ? (

🔍

{searchQuery ? "No events match your search" : "No events yet. Generate some based on your interests!"}

{!profile.interests.length && "Add your interests in the Profile tab first."}

) : ( filteredEvents.map(event => { const categoryStyle = getCategoryStyle(event.category) const avgRating = getAverageRating(event._id) const eventReviews = getEventReviews(event._id) const isSaved = profile.savedEvents?.includes(event._id) return (

setSelectedEvent(event)}> {event.title}

{event.category}

📅 {event.date}

📍 {event.location} {event.isVirtual && "🌐 Virtual"}

{avgRating > 0 && (

⭐ {avgRating} ({eventReviews.length} reviews)

)}

{event.description}

{event.tags && (

{event.tags.slice(0, 3).map((tag, idx) => ( {tag} ))}

)}

👥 {event.attendees?.length || 0} attending

{event.capacity > 0 && (

📋 {event.capacity - (event.attendees?.length || 0)} spots left

)} {event.waitlist?.length > 0 && (

⏳ {event.waitlist.length} on waitlist

)}

) }) )}

)} {activeTab === "rsvps" && (

🎫 My Events

{myRSVPs.length === 0 ? (

🎭

You haven't RSVP'd to any events yet.

) : ( myRSVPs.map(rsvp => { const event = events.find(e => e._id === rsvp.eventId) if (!event) return null const categoryStyle = getCategoryStyle(event.category) const avgRating = getAverageRating(event._id) const hasReviewed = reviews.some(r => r.eventId === event._id && r.author === (profile.username || "Anonymous")) return (

{event.title}

{event.category}

📅 {event.date}

📍 {event.location}

{avgRating > 0 && (

⭐ {avgRating} rating

)}

{event.isVirtual && event.meetingLink && (

🌐 Virtual Meeting:

{event.meetingLink}

)}

) }) )}

)} {activeTab === "saved" && (

📌 Saved Events

{savedEvents.length === 0 ? (

⭐

No saved events yet. Star events to save them for later!

) : ( savedEvents.map(event => { const categoryStyle = getCategoryStyle(event.category) return (

setSelectedEvent(event)} >

{event.title}

{event.category}

📅 {event.date}

📍 {event.location}

) }) )}

)} {activeTab === "network" && (

🤝 Networking

{attendees.length === 0 ? (

👥

RSVP to events to connect with other attendees!

) : ( attendees.map(({ username, events: userEvents }) => (

👤

{username}

{userEvents.length} mutual events

Attending:

{eventTitle}

)) )}

)} {activeTab === "profile" && (

{/* Username */}

👤 Username

mergeProfile({ username: e.target.value })} placeholder="Enter your username" className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full text-[#0f172a] font-bold focus:outline-none focus:border-[#8b5cf6]" />

{/* Bio */}

✍️ Bio

mergeProfile({ bio: e.target.value })}
                  placeholder="Tell us about yourself..."
                  rows={3}
                  className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-[24px] text-[#0f172a] font-bold focus:outline-none focus:border-[#8b5cf6]"
                />
              </div>

{/* Interests */}
              <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] p-4"
                style={{ boxShadow: "8px 8px 0 #0f172a" }}>
                <h2 className="font-black text-lg mb-3 text-[#0f172a]">🎯 Your Interests</h2>
                
                <div className="mb-3">
                  <form onSubmit={(e) => {
                    e.preventDefault()
                    const input = e.target.elements.interest
                    addInterest(input.value.trim())
                    input.value = ""
                  }}>
                    <input
                      name="interest"
                      type="text"
                      placeholder="Add interest (e.g., Machine Learning)"
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full text-[#0f172a] font-bold mb-2 focus:outline-none"
                    />
                  </form>
                </div>

<div className="flex flex-wrap gap-2">
                  {profile.interests.length === 0 ? (
                    <p className="text-[#64748b] text-sm">Add interests to get personalized recommendations</p>
                  ) : (
                    profile.interests.map((interest, idx) => (
                      <button
                        key={idx}
                        onClick={() => removeInterest(interest)}
                        className="bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff] px-3 py-2 font-bold text-sm border-4 border-[#0f172a] rounded-full flex items-center gap-2"
                        style={{ boxShadow: "4px 4px 0 #0f172a" }}
                      >
                        {interest}
                        <span className="text-lg">×</span>
                      </button>
                    ))
                  )}
                </div>

<div className="mt-4 pt-4 border-t-4 border-[#e0e7ff]">
                  <p className="text-xs text-[#64748b] mb-2 font-bold">QUICK ADD:</p>
                  <div className="flex flex-wrap gap-2">
                    {["LLMs", "Computer Vision", "Robotics", "NLP", "Deep Learning", "AI Ethics", "GenAI"].map(suggestion => (
                      <button
                        key={suggestion}
                        onClick={() => addInterest(suggestion)}
                        disabled={profile.interests.includes(suggestion)}
                        className="bg-[#e0e7ff] text-[#0f172a] px-3 py-1 font-bold text-xs border-2 border-[#0f172a] rounded-full disabled:opacity-30"
                      >
                        + {suggestion}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

{/* Location */}
              <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] p-4"
                style={{ boxShadow: "8px 8px 0 #0f172a" }}>
                <h2 className="font-black text-lg mb-3 text-[#0f172a]">📍 Location</h2>
                <input
                  type="text"
                  value={profile.location}
                  onChange={(e) => mergeProfile({ location: e.target.value })}
                  placeholder="San Francisco, CA"
                  className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full text-[#0f172a] font-bold focus:outline-none focus:border-[#3b82f6]"
                />
              </div>

{/* Availability */}
              <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] p-4"
                style={{ boxShadow: "8px 8px 0 #0f172a" }}>
                <h2 className="font-black text-lg mb-3 text-[#0f172a]">⏰ Availability</h2>
                <select
                  value={profile.availability}
                  onChange={(e) => mergeProfile({ availability: e.target.value })}
                  className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full text-[#0f172a] font-bold focus:outline-none bg-[#ffffff]"
                >
                  <option value="weekends">Weekends Only</option>
                  <option value="weekdays">Weekdays Only</option>
                  <option value="anytime">Anytime</option>
                  <option value="evenings">Evenings Only</option>
                </select>
              </div>

{/* Mentorship */}
              <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] p-4"
                style={{ boxShadow: "8px 8px 0 #0f172a" }}>
                <h2 className="font-black text-lg mb-3 text-[#0f172a]">🎓 Mentorship</h2>
                <div className="space-y-3">
                  <label className="flex items-center gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={profile.willingToMentor}
                      onChange={(e) => mergeProfile({ willingToMentor: e.target.checked })}
                      className="w-6 h-6 border-4 border-[#0f172a] rounded"
                    />
                    <span className="font-bold text-[#0f172a]">I'm willing to mentor others</span>
                  </label>
                  <label className="flex items-center gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={profile.lookingForMentor}
                      onChange={(e) => mergeProfile({ lookingForMentor: e.target.checked })}
                      className="w-6 h-6 border-4 border-[#0f172a] rounded"
                    />
                    <span className="font-bold text-[#0f172a]">I'm looking for a mentor</span>
                  </label>
                </div>
              </div>

{/* Stats */}
              <div className="bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] border-4 border-[#0f172a] rounded-[24px] p-4 text-[#ffffff]"
                style={{ boxShadow: "8px 8px 0 #0f172a" }}>
                <h2 className="font-black text-lg mb-3">📊 Your Stats</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-3xl font-black">{myRSVPs.length}</p>
                    <p className="text-sm">Events Attending</p>
                  </div>
                  <div>
                    <p className="text-3xl font-black">{connections.length}</p>
                    <p className="text-sm">Connections</p>
                  </div>
                  <div>
                    <p className="text-3xl font-black">{savedEvents.length}</p>
                    <p className="text-sm">Saved Events</p>
                  </div>
                  <div>
                    <p className="text-3xl font-black">{reviews.filter(r => r.author === (profile.username || "Anonymous")).length}</p>
                    <p className="text-sm">Reviews Written</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </main>

{/* Notifications Panel */}
        {showNotifications && (
          <div className="fixed inset-0 bg-[#0f172a] bg-opacity-50 z-30 flex items-start justify-end p-4"
            onClick={() => setShowNotifications(false)}>
            <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] w-full max-w-md max-h-[80vh] overflow-y-auto mt-16"
              style={{ boxShadow: "8px 8px 0 #0f172a" }}
              onClick={(e) => e.stopPropagation()}>
              <div className="p-4 border-b-4 border-[#0f172a] flex justify-between items-center">
                <h3 className="font-black text-lg text-[#0f172a]">🔔 Notifications</h3>
                {notifications.length > 0 && (
                  <button
                    onClick={clearAllNotifications}
                    className="text-sm font-bold text-[#ef4444]"
                  >
                    Clear All
                  </button>
                )}
              </div>
              <div className="p-4 space-y-2">
                {notifications.length === 0 ? (
                  <p className="text-[#64748b] text-center py-8">No notifications yet</p>
                ) : (
                  notifications.map(notif => (
                    <div
                      key={notif._id}
                      onClick={() => markNotificationRead(notif._id)}
                      className={`p-3 border-2 rounded-[16px] cursor-pointer ${
                        notif.read 
                          ? "border-[#cbd5e1] bg-[#f1f5f9]" 
                          : "border-[#8b5cf6] bg-[#ede9fe]"
                      }`}
                    >
                      <p className="text-sm font-bold text-[#0f172a]">{notif.message}</p>
                      <p className="text-xs text-[#64748b] mt-1">
                        {new Date(notif.createdAt).toLocaleString()}
                      </p>
                    </div>
                  ))
                )}
              </div>
            </div>
          </div>
        )}

{/* Create Event Modal */}
        {showCreateEvent && (
          <div className="fixed inset-0 bg-[#0f172a] bg-opacity-50 z-30 flex items-center justify-center p-4"
            onClick={() => setShowCreateEvent(false)}>
            <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] w-full max-w-lg max-h-[80vh] overflow-y-auto"
              style={{ boxShadow: "12px 12px 0 #0f172a" }}
              onClick={(e) => e.stopPropagation()}>
              <div className="p-6">
                <h2 className="font-black text-xl text-[#0f172a] mb-4">➕ Create New Event</h2>
                <form onSubmit={handleCreateEvent} className="space-y-4">
                  <div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Event Title *</label>
                    <input
                      type="text"
                      value={newEvent.title}
                      onChange={(e) => mergeEvent({ title: e.target.value })}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Date *</label>
                    <input
                      type="date"
                      value={newEvent.date}
                      onChange={(e) => mergeEvent({ date: e.target.value })}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none"
                      required
                    />
                  </div>

<div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Location *</label>
                    <input
                      type="text"
                      value={newEvent.location}
                      onChange={(e) => mergeEvent({ location: e.target.value })}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none"
                      required
                    />
                  </div>

<div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Category</label>
                    <select
                      value={newEvent.category}
                      onChange={(e) => mergeEvent({ category: e.target.value })}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none bg-[#ffffff]"
                    >
                      <option value="conference">Conference</option>
                      <option value="meetup">Meetup</option>
                      <option value="workshop">Workshop</option>
                      <option value="hackathon">Hackathon</option>
                      <option value="webinar">Webinar</option>
                    </select>
                  </div>

<div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Description</label>
                    <textarea
                      value={newEvent.description}
                      onChange={(e) => mergeEvent({ description: e.target.value })}
                      rows={3}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-[16px] font-bold focus:outline-none"
                    />
                  </div>

<div>
                    <label className="block font-bold text-sm mb-2 text-[#0f172a]">Capacity (0 for unlimited)</label>
                    <input
                      type="number"
                      value={newEvent.capacity}
                      onChange={(e) => mergeEvent({ capacity: parseInt(e.target.value) || 0 })}
                      className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none"
                      min="0"
                    />
                  </div>

<div className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      checked={newEvent.isVirtual}
                      onChange={(e) => mergeEvent({ isVirtual: e.target.checked })}
                      className="w-6 h-6 border-4 border-[#0f172a]"
                    />
                    <label className="font-bold text-[#0f172a]">Virtual Event</label>
                  </div>

{newEvent.isVirtual && (
                    <div>
                      <label className="block font-bold text-sm mb-2 text-[#0f172a]">Meeting Link</label>
                      <input
                        type="url"
                        value={newEvent.meetingLink}
                        onChange={(e) => mergeEvent({ meetingLink: e.target.value })}
                        className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-full font-bold focus:outline-none"
                        placeholder="https://meet.example.com/..."
                      />
                    </div>
                  )}

<div className="flex gap-3 pt-4">
                    <button
                      type="button"
                      onClick={() => setShowCreateEvent(false)}
                      className="flex-1 bg-[#cbd5e1] text-[#0f172a] font-bold py-3 border-4 border-[#94a3b8] rounded-full"
                    >
                      Cancel
                    </button>
                    <button
                      type="submit"
                      className="flex-1 bg-gradient-to-r from-[#10b981] to-[#059669] text-[#ffffff] font-bold py-3 border-4 border-[#047857] rounded-full"
                      style={{ boxShadow: "4px 4px 0 #0f172a" }}
                    >
                      Create Event
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}

{/* Review Modal */}
        {showReviewModal && (
          <div className="fixed inset-0 bg-[#0f172a] bg-opacity-50 z-30 flex items-center justify-center p-4"
            onClick={() => setShowReviewModal(null)}>
            <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] w-full max-w-lg"
              style={{ boxShadow: "12px 12px 0 #0f172a" }}
              onClick={(e) => e.stopPropagation()}>
              <div className="p-6">
                <h2 className="font-black text-xl text-[#0f172a] mb-4">⭐ Write a Review</h2>
                
                <div className="mb-4">
                  <label className="block font-bold text-sm mb-2 text-[#0f172a]">Rating</label>
                  <div className="flex gap-2">
                    {[1, 2, 3, 4, 5].map(star => (
                      <button
                        key={star}
                        type="button"
                        onClick={() => mergeReview({ rating: star })}
                        className={`text-4xl ${star <= newReview.rating ? "text-[#f59e0b]" : "text-[#cbd5e1]"}`}
                      >
                        ★
                      </button>
                    ))}
                  </div>
                </div>

<div className="mb-4">
                  <label className="block font-bold text-sm mb-2 text-[#0f172a]">Your Review</label>
                  <textarea
                    value={newReview.comment}
                    onChange={(e) => mergeReview({ comment: e.target.value })}
                    rows={4}
                    className="w-full px-3 py-2 border-4 border-[#0f172a] rounded-[16px] font-bold focus:outline-none"
                    placeholder="Share your experience..."
                  />
                </div>

<div className="flex gap-3">
                  <button
                    onClick={() => setShowReviewModal(null)}
                    className="flex-1 bg-[#cbd5e1] text-[#0f172a] font-bold py-3 border-4 border-[#94a3b8] rounded-full"
                  >
                    Cancel
                  </button>
                  <button
                    onClick={() => handleSubmitReview(showReviewModal)}
                    className="flex-1 bg-gradient-to-r from-[#f59e0b] to-[#d97706] text-[#ffffff] font-bold py-3 border-4 border-[#b45309] rounded-full"
                    style={{ boxShadow: "4px 4px 0 #0f172a" }}
                  >
                    Submit Review
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

{/* Event Detail Modal */}
        {selectedEvent && (
          <div className="fixed inset-0 bg-[#0f172a] bg-opacity-50 z-30 flex items-end sm:items-center justify-center p-4"
            onClick={() => setSelectedEvent(null)}>
            <div className="bg-[#ffffff] border-4 border-[#0f172a] rounded-[24px] w-full max-w-lg max-h-[85vh] overflow-y-auto"
              style={{ boxShadow: "12px 12px 0 #0f172a" }}
              onClick={(e) => e.stopPropagation()}>
              <div className="p-6 space-y-4">
                <div className="flex justify-between items-start">
                  <h2 className="font-black text-xl text-[#0f172a] flex-1">{selectedEvent.title}</h2>
                  <button
                    onClick={() => setSelectedEvent(null)}
                    className="text-2xl font-bold text-[#0f172a] ml-4 w-10 h-10 rounded-full bg-[#f1f5f9] flex items-center justify-center border-2 border-[#0f172a]"
                  >
                    ×
                  </button>
                </div>

<div className="space-y-2 text-sm">
                  <p className="text-[#64748b] font-bold">📅 {selectedEvent.date}</p>
                  <p className="text-[#64748b] font-bold">📍 {selectedEvent.location}</p>
                  <p className="text-[#64748b] font-bold">🏷️ {selectedEvent.category}</p>
                  <p className="text-[#64748b] font-bold">👤 Organized by {selectedEvent.organizer}</p>
                  {selectedEvent.isVirtual && (
                    <p className="text-[#3b82f6] font-bold">🌐 Virtual Event</p>
                  )}
                </div>

<p className="text-[#0f172a]">{selectedEvent.description}</p>

{selectedEvent.tags && selectedEvent.tags.length > 0 && (
                  <div className="flex flex-wrap gap-2">
                    {selectedEvent.tags.map((tag, idx) => (
                      <span key={idx} className="bg-gradient-to-r from-[#e0e7ff] to-[#fce7f3] text-[#0f172a] px-3 py-1 text-xs font-bold border-2 border-[#0f172a] rounded-full">
                        {tag}
                      </span>
                    ))}
                  </div>
                )}

{/* Reviews Section */}
                {getEventReviews(selectedEvent._id).length > 0 && (
                  <div className="pt-4 border-t-4 border-[#e0e7ff]">
                    <h3 className="font-black text-[#0f172a] mb-3">
                      ⭐ Reviews ({getEventReviews(selectedEvent._id).length})
                    </h3>
                    <div className="space-y-3 max-h-48 overflow-y-auto">
                      {getEventReviews(selectedEvent._id).map(review => (
                        <div key={review._id} className="bg-[#f1f5f9] p-3 rounded-[16px] border-2 border-[#cbd5e1]">
                          <div className="flex items-center gap-2 mb-1">
                            <div className="text-[#f59e0b]">{"★".repeat(review.rating)}</div>
                            <span className="text-xs text-[#64748b] font-bold">{review.author}</span>
                          </div>
                          <p className="text-sm text-[#0f172a]">{review.comment}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

<div className="pt-4 border-t-4 border-[#e0e7ff]">
                  <p className="text-sm text-[#64748b] mb-3 font-bold">
                    👥 {selectedEvent.attendees?.length || 0} people attending
                  </p>
                  {selectedEvent.capacity > 0 && (
                    <p className="text-sm text-[#64748b] mb-3 font-bold">
                      📋 {selectedEvent.capacity - (selectedEvent.attendees?.length || 0)} spots remaining
                    </p>
                  )}
                  <button
                    onClick={() => {
                      rsvpToEvent(selectedEvent)
                      setSelectedEvent(null)
                    }}
                    className={`w-full py-3 px-4 font-bold border-4 rounded-full ${
                      hasRSVPd(selectedEvent._id)
                        ? "bg-gradient-to-r from-[#10b981] to-[#059669] text-[#ffffff] border-[#047857]"
                        : isOnWaitlist(selectedEvent)
                        ? "bg-[#f59e0b] text-[#ffffff] border-[#d97706]"
                        : "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff] border-[#0f172a]"
                    }`}
                    style={{ boxShadow: "6px 6px 0 #0f172a" }}
                  >
                    {hasRSVPd(selectedEvent._id) ? "✓ You're Going - Cancel?" : 
                     isOnWaitlist(selectedEvent) ? "⏳ On Waitlist - Cancel?" :
                     selectedEvent.capacity > 0 && selectedEvent.attendees?.length >= selectedEvent.capacity ? "Join Waitlist" :
                     "RSVP to Event"}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

{/* Bottom Navigation */}
        <nav className="fixed bottom-0 left-0 right-0 bg-[#ffffff] border-t-4 border-[#0f172a] z-20">
          <div className="flex">
            <button
              onClick={() => setActiveTab("discover")}
              className={`flex-1 py-3 font-black text-xs ${
                activeTab === "discover" 
                  ? "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff]" 
                  : "bg-[#ffffff] text-[#64748b]"
              } border-r-4 border-[#0f172a]`}
            >
              🔍<br/>DISCOVER
            </button>
            <button
              onClick={() => setActiveTab("rsvps")}
              className={`flex-1 py-3 font-black text-xs ${
                activeTab === "rsvps" 
                  ? "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff]" 
                  : "bg-[#ffffff] text-[#64748b]"
              } border-r-4 border-[#0f172a]`}
            >
              📅<br/>MY EVENTS
            </button>
            <button
              onClick={() => setActiveTab("saved")}
              className={`flex-1 py-3 font-black text-xs ${
                activeTab === "saved" 
                  ? "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff]" 
                  : "bg-[#ffffff] text-[#64748b]"
              } border-r-4 border-[#0f172a]`}
            >
              ⭐<br/>SAVED
            </button>
            <button
              onClick={() => setActiveTab("network")}
              className={`flex-1 py-3 font-black text-xs ${
                activeTab === "network" 
                  ? "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff]" 
                  : "bg-[#ffffff] text-[#64748b]"
              } border-r-4 border-[#0f172a]`}
            >
              🤝<br/>NETWORK
            </button>
            <button
              onClick={() => setActiveTab("profile")}
              className={`flex-1 py-3 font-black text-xs ${
                activeTab === "profile" 
                  ? "bg-gradient-to-r from-[#8b5cf6] to-[#ec4899] text-[#ffffff]" 
                  : "bg-[#ffffff] text-[#64748b]"
              }`}
            >
              👤<br/>PROFILE
            </button>
          </div>
        </nav>
      </div>
    </div>
  )
}</article></body></html>

📅 All Events (0)