import React, { useState, useEffect, useRef } from 'react';
import { Bell, MessageSquare, Users, UserPlus, Calendar, Search, Menu, X, Home, User, Settings, LogOut, Moon, Sun, Heart, MessageCircle, Share2, Bookmark, MoreHorizontal, Smile, Image, Video, Send, ChevronDown, Hash, Zap, Globe, Lock, FileText, Clock, Book, Award, CheckSquare, PenTool, Paperclip, Coffee, ChevronRight, ExternalLink, Clipboard, AlignLeft, BarChart2, BookOpen, Edit3, Trash2, ThumbsUp, Flag, Layers, Folder, Download, MapPin } from 'lucide-react';

export default function App() {
  const [darkMode, setDarkMode] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  const [posts, setPosts] = useState([]);
  const [newPostText, setNewPostText] = useState('');
  const [notifications, setNotifications] = useState([]);
  const [suggestedFriends, setSuggestedFriends] = useState([]);
  const [trendingTopics, setTrendingTopics] = useState([]);
  const [groups, setGroups] = useState([]);
  const [events, setEvents] = useState([]);
  const [currentUser, setCurrentUser] = useState(null);
  const [activePostId, setActivePostId] = useState(null);
  const [commentText, setCommentText] = useState('');
  const [showShareModal, setShowShareModal] = useState(false);
  const [sharePostId, setSharePostId] = useState(null);
  const [courses, setCourses] = useState([]);
  const [assignments, setAssignments] = useState([]);
  const [studyTimer, setStudyTimer] = useState({ active: false, time: 25 * 60, type: 'focus' });
  const [timerInterval, setTimerInterval] = useState(null);
  const [showStudyTools, setShowStudyTools] = useState(false);
  const [studyMaterials, setStudyMaterials] = useState([]);
  const [showCreateGroupModal, setShowCreateGroupModal] = useState(false);
  const [newGroupData, setNewGroupData] = useState({ name: '', description: '', privacy: 'public' });
  const [activeSubTab, setActiveSubTab] = useState('feed');
  const commentInputRef = useRef(null);

  // Initialize with mock data
  useEffect(() => {
    // Mock current user
    setCurrentUser({
      id: 1,
      name: "Alex Johnson",
      username: "alexj",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
      bio: "Computer Science major at State University. Passionate about AI and web development.",
      friends: 142,
      school: "State University",
      year: "Junior",
      interests: ["Programming", "AI", "Basketball", "Photography"],
      major: "Computer Science",
      gpa: "3.8"
    });

    // Mock posts
    setPosts([
      {
        id: 1,
        user: {
          id: 2,
          name: "Emma Wilson",
          avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Just finished my research paper on renewable energy! 🎉 #StudentLife #Science",
        image: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80",
        timestamp: "2 hours ago",
        likes: 24,
        comments: [
          {
            id: 1,
            user: {
              id: 3,
              name: "Marcus Chen",
              avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            },
            content: "Congrats! What was your main finding?",
            timestamp: "1 hour ago",
            likes: 3
          },
          {
            id: 2,
            user: {
              id: 4,
              name: "Sophia Rodriguez",
              avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            },
            content: "I'd love to read it when you have time!",
            timestamp: "45 minutes ago",
            likes: 2
          }
        ],
        shares: 2,
        showComments: false
      },
      {
        id: 2,
        user: {
          id: 3,
          name: "Marcus Chen",
          avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Study group for Advanced Calculus tomorrow at the library, 5PM. Who's in? #StudyGroup #Math",
        timestamp: "4 hours ago",
        likes: 18,
        comments: [
          {
            id: 3,
            user: {
              id: 5,
              name: "Jordan Rivera",
              avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            },
            content: "I'll be there! Should we bring the textbooks?",
            timestamp: "3 hours ago",
            likes: 1
          }
        ],
        shares: 3,
        showComments: false
      },
      {
        id: 3,
        user: {
          id: 4,
          name: "Sophia Rodriguez",
          avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Our team won the debate competition! So proud of everyone's hard work and dedication. #Debate #Championship",
        image: "https://images.unsplash.com/photo-1515187029135-18ee286d815b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80",
        timestamp: "Yesterday",
        likes: 56,
        comments: [
          {
            id: 4,
            user: {
              id: 1,
              name: "Alex Johnson",
              avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            },
            content: "Congratulations! What was the topic?",
            timestamp: "Yesterday",
            likes: 4
          },
          {
            id: 5,
            user: {
              id: 6,
              name: "Taylor Singh",
              avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            },
            content: "Amazing job! You all deserve it!",
            timestamp: "Yesterday",
            likes: 2
          }
        ],
        shares: 8,
        showComments: false
      }
    ]);

    // Mock notifications
    setNotifications([
      { id: 1, type: "friend_request", user: "Jamie Lee", timestamp: "5 min ago" },
      { id: 2, type: "like", user: "Taylor Kim", post: "your photo", timestamp: "20 min ago" },
      { id: 3, type: "comment", user: "Riley Smith", post: "your status", timestamp: "1 hour ago" },
      { id: 4, type: "group_invite", user: "Jordan Patel", group: "CS Study Group", timestamp: "3 hours ago" },
      { id: 5, type: "assignment", course: "CS 301", title: "Project Milestone", timestamp: "2 hours ago" },
      { id: 6, type: "grade", course: "MATH 201", grade: "A-", timestamp: "Yesterday" }
    ]);

    // Mock suggested friends
    setSuggestedFriends([
      { id: 5, name: "Casey Morgan", avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 5 },
      { id: 6, name: "Jordan Rivera", avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 3 },
      { id: 7, name: "Taylor Singh", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 2 }
    ]);

    // Mock trending topics
    setTrendingTopics([
      { id: 1, tag: "FinalExams", posts: 1243 },
      { id: 2, tag: "CampusLife", posts: 856 },
      { id: 3, tag: "StudyAbroad", posts: 621 },
      { id: 4, tag: "Internships", posts: 542 }
    ]);

    // Mock groups
    setGroups([
      { id: 1, name: "Computer Science Club", members: 128, privacy: "public", avatar: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80", description: "A community for CS enthusiasts to share knowledge and collaborate on projects." },
      { id: 2, name: "Photography Society", members: 94, privacy: "public", avatar: "https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80", description: "For students passionate about photography. We organize workshops, photo walks, and exhibitions." },
      { id: 3, name: "Business Case Study", members: 56, privacy: "private", avatar: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80", description: "A group for business students to discuss and analyze real-world business cases." },
      { id: 4, name: "Math Study Group", members: 42, privacy: "public", avatar: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80", description: "Weekly study sessions for advanced mathematics courses." },
      { id: 5, name: "Campus Sustainability", members: 87, privacy: "public", avatar: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80", description: "Working together to make our campus more environmentally friendly." }
    ]);

    // Mock events
    setEvents([
      { id: 1, title: "Campus Tech Fair", date: "May 15", attendees: 87, location: "Main Hall", description: "Connect with tech companies and explore internship opportunities." },
      { id: 2, title: "End of Semester Party", date: "June 2", attendees: 156, location: "Student Center", description: "Celebrate the end of the semester with food, music, and games!" },
      { id: 3, title: "Career Workshop", date: "May 20", attendees: 42, location: "Library, Room 305", description: "Learn how to build a strong resume and ace your interviews." },
      { id: 4, title: "Research Symposium", date: "May 25", attendees: 63, location: "Science Building", description: "Undergraduate and graduate students present their research projects." },
      { id: 5, title: "Hackathon", date: "June 10-12", attendees: 120, location: "Engineering Building", description: "48-hour coding competition with prizes for the best projects." }
    ]);

    // Mock courses
    setCourses([
      { id: 1, code: "CS 301", name: "Data Structures and Algorithms", instructor: "Dr. Sarah Chen", schedule: "MWF 10:00-11:15 AM", room: "Tech Hall 305", credits: 4 },
      { id: 2, code: "MATH 201", name: "Calculus III", instructor: "Prof. James Wilson", schedule: "TR 1:30-2:45 PM", room: "Math Building 210", credits: 3 },
      { id: 3, code: "PHYS 102", name: "Physics for Scientists", instructor: "Dr. Michael Rodriguez", schedule: "MWF 2:00-3:15 PM", room: "Science Center 110", credits: 4 },
      { id: 4, code: "ENG 215", name: "Technical Writing", instructor: "Prof. Emily Taylor", schedule: "TR 9:30-10:45 AM", room: "Humanities 405", credits: 3 }
    ]);

    // Mock assignments
    setAssignments([
      { id: 1, courseId: 1, title: "Project Milestone", dueDate: "May 18, 11:59 PM", description: "Submit your project proposal and initial design document.", status: "pending" },
      { id: 2, courseId: 2, title: "Problem Set 7", dueDate: "May 15, 5:00 PM", description: "Complete problems 7.1-7.15 in the textbook.", status: "completed" },
      { id: 3, courseId: 3, title: "Lab Report", dueDate: "May 20, 11:59 PM", description: "Write a report on the results of the pendulum experiment.", status: "pending" },
      { id: 4, courseId: 4, title: "Research Paper Draft", dueDate: "May 25, 11:59 PM", description: "Submit a draft of your research paper (minimum 5 pages).", status: "pending" },
      { id: 5, courseId: 1, title: "Algorithm Analysis", dueDate: "May 22, 11:59 PM", description: "Analyze the time and space complexity of the provided algorithms.", status: "pending" }
    ]);

    // Mock study materials
    setStudyMaterials([
      { id: 1, courseId: 1, title: "Lecture Notes - Week 8", type: "pdf", size: "2.4 MB", uploadedBy: "Dr. Sarah Chen", date: "May 5" },
      { id: 2, courseId: 1, title: "Sorting Algorithms Cheat Sheet", type: "pdf", size: "1.1 MB", uploadedBy: "Alex Johnson", date: "May 7" },
      { id: 3, courseId: 2, title: "Practice Exam Solutions", type: "pdf", size: "3.2 MB", uploadedBy: "Prof. James Wilson", date: "May 10" },
      { id: 4, courseId: 3, title: "Lab Experiment Guidelines", type: "docx", size: "1.8 MB", uploadedBy: "Dr. Michael Rodriguez", date: "May 8" },
      { id: 5, courseId: 4, title: "Citation Guide", type: "pdf", size: "0.9 MB", uploadedBy: "Prof. Emily Taylor", date: "May 3" }
    ]);
  }, []);

  // Toggle dark mode
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  // Handle post submission
  const handlePostSubmit = (e) => {
    e.preventDefault();
    if (!newPostText.trim()) return;
    
    const newPost = {
      id: posts.length + 1,
      user: currentUser,
      content: newPostText,
      timestamp: "Just now",
      likes: 0,
      comments: [],
      shares: 0,
      showComments: false
    };
    
    setPosts([newPost, ...posts]);
    setNewPostText('');
  };

  // Handle like action
  const handleLike = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId ? { ...post, likes: post.likes + 1 } : post
    ));
  };

  // Toggle comments visibility
  const handleToggleComments = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId ? { ...post, showComments: !post.showComments } : post
    ));
    setActivePostId(postId);
    
    // Focus the comment input when comments are shown
    setTimeout(() => {
      if (commentInputRef.current) {
        commentInputRef.current.focus();
      }
    }, 100);
  };

  // Handle comment submission
  const handleCommentSubmit = (postId) => {
    if (!commentText.trim()) return;
    
    const newComment = {
      id: Math.max(0, ...posts.flatMap(post => post.comments.map(comment => comment.id))) + 1,
      user: currentUser,
      content: commentText,
      timestamp: "Just now",
      likes: 0
    };
    
    setPosts(posts.map(post => 
      post.id === postId 
        ? { ...post, comments: [...post.comments, newComment] } 
        : post
    ));
    
    setCommentText('');
  };

  // Handle share action
  const handleShare = (postId) => {
    setSharePostId(postId);
    setShowShareModal(true);
  };

  // Complete share action
  const completeShare = (destination) => {
    setPosts(posts.map(post => 
      post.id === sharePostId ? { ...post, shares: post.shares + 1 } : post
    ));
    
    // Add a notification about the share
    const sharedPost = posts.find(post => post.id === sharePostId);
    if (sharedPost) {
      const newNotification = {
        id: notifications.length + 1,
        type: "share",
        user: currentUser.name,
        destination: destination,
        timestamp: "Just now"
      };
      
      setNotifications([newNotification, ...notifications]);
    }
    
    setShowShareModal(false);
    setSharePostId(null);
  };

  // Handle study timer
  useEffect(() => {
    if (studyTimer.active && !timerInterval) {
      const interval = setInterval(() => {
        setStudyTimer(prev => {
          if (prev.time <= 1) {
            clearInterval(interval);
            // Switch between focus and break
            const newType = prev.type === 'focus' ? 'break' : 'focus';
            const newTime = newType === 'focus' ? 25 * 60 : 5 * 60;
            
            // Create notification for timer completion
            const newNotification = {
              id: notifications.length + 1,
              type: "timer",
              timerType: prev.type,
              timestamp: "Just now"
            };
            setNotifications([newNotification, ...notifications]);
            
            return {
              ...prev,
              time: newTime,
              type: newType,
              active: false
            };
          }
          return {
            ...prev,
            time: prev.time - 1
          };
        });
      }, 1000);
      
      setTimerInterval(interval);
    } else if (!studyTimer.active && timerInterval) {
      clearInterval(timerInterval);
      setTimerInterval(null);
    }
    
    return () => {
      if (timerInterval) {
        clearInterval(timerInterval);
      }
    };
  }, [studyTimer.active, timerInterval, notifications]);

  // Format timer display
  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  // Toggle study timer
  const toggleStudyTimer = () => {
    setStudyTimer(prev => ({
      ...prev,
      active: !prev.active
    }));
  };

  // Reset study timer
  const resetStudyTimer = () => {
    setStudyTimer({
      active: false,
      time: studyTimer.type === 'focus' ? 25 * 60 : 5 * 60,
      type: studyTimer.type
    });
  };

  // Handle create group submission
  const handleCreateGroup = () => {
    if (!newGroupData.name.trim()) return;
    
    const newGroup = {
      id: groups.length + 1,
      name: newGroupData.name,
      description: newGroupData.description,
      privacy: newGroupData.privacy,
      members: 1,
      avatar: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80"
    };
    
    setGroups([...groups, newGroup]);
    setShowCreateGroupModal(false);
    setNewGroupData({ name: '', description: '', privacy: 'public' });
    
    // Create notification for new group
    const newNotification = {
      id: notifications.length + 1,
      type: "group_created",
      group: newGroupData.name,
      timestamp: "Just now"
    };
    setNotifications([newNotification, ...notifications]);
  };

  // Toggle assignment status
  const toggleAssignmentStatus = (assignmentId) => {
    setAssignments(assignments.map(assignment => 
      assignment.id === assignmentId 
        ? { ...assignment, status: assignment.status === 'completed' ? 'pending' : 'completed' } 
        : assignment
    ));
  };

  return (
    <div className={`min-h-screen ${darkMode ? 'dark bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
      {/* Header/Navigation */}
      <header className={`fixed top-0 left-0 right-0 z-50 ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">CampusConnect</span>
              </div>
              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                <button 
                  onClick={() => setActiveTab('home')}
                  className={`${activeTab === 'home' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <Home className="h-5 w-5 mr-1" /> Home
                </button>
                <button 
                  onClick={() => setActiveTab('profile')}
                  className={`${activeTab === 'profile' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <User className="h-5 w-5 mr-1" /> Profile
                </button>
                <button 
                  onClick={() => setActiveTab('friends')}
                  className={`${activeTab === 'friends' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <Users className="h-5 w-5 mr-1" /> Friends
                </button>
                <button 
                  onClick={() => setActiveTab('messages')}
                  className={`${activeTab === 'messages' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <MessageSquare className="h-5 w-5 mr-1" /> Messages
                </button>
                <button 
                  onClick={() => setActiveTab('academic')}
                  className={`${activeTab === 'academic' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <BookOpen className="h-5 w-5 mr-1" /> Academic
                </button>
              </div>
            </div>
            <div className="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-4">
              {/* Search */}
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Search className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  type="text"
                  placeholder="Search..."
                  className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                />
              </div>
              
              {/* Study Timer Button */}
              <button 
                onClick={() => setShowStudyTools(!showStudyTools)}
                className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 relative"
              >
                <Clock className="h-6 w-6" />
                {studyTimer.active && (
                  <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-green-500 ring-2 ring-white dark:ring-gray-800"></span>
                )}
              </button>
              
              {/* Notifications */}
              <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 relative">
                <Bell className="h-6 w-6" />
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-gray-800"></span>
              </button>
              
              {/* Dark mode toggle */}
              <button 
                onClick={() => setDarkMode(!darkMode)} 
                className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                {darkMode ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
              </button>
              
              {/* Profile dropdown */}
              <div className="relative">
                <button className="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                  <img
                    className="h-8 w-8 rounded-full"
                    src={currentUser?.avatar}
                    alt="User avatar"
                  />
                </button>
              </div>
            </div>
            
            {/* Mobile menu button */}
            <div className="flex items-center sm:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="sm:hidden">
            <div className={`pt-2 pb-3 space-y-1 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <button
                onClick={() => {setActiveTab('home'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'home' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Home className="h-5 w-5 mr-3" /> Home
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('profile'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'profile' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <User className="h-5 w-5 mr-3" /> Profile
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('friends'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'friends' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Users className="h-5 w-5 mr-3" /> Friends
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('messages'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'messages' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <MessageSquare className="h-5 w-5 mr-3" /> Messages
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('academic'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'academic' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <BookOpen className="h-5 w-5 mr-3" /> Academic
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('notifications'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'notifications' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Bell className="h-5 w-5 mr-3" /> Notifications
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('settings'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'settings' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Settings className="h-5 w-5 mr-3" /> Settings
                </div>
              </button>
            </div>
            <div className={`pt-4 pb-3 border-t border-gray-200 dark:border-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <div className="flex items-center px-4">
                <div className="flex-shrink-0">
                  <img
                    className="h-10 w-10 rounded-full"
                    src={currentUser?.avatar}
                    alt="User avatar"
                  />
                </div>
                <div className="ml-3">
                  <div className="text-base font-medium text-gray-800 dark:text-white">{currentUser?.name}</div>
                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400">@{currentUser?.username}</div>
                </div>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Study Tools Popup */}
      {showStudyTools && (
        <div className={`fixed top-16 right-4 z-40 w-80 rounded-lg shadow-lg ${darkMode ? 'bg-gray-800' : 'bg-white'} overflow-hidden`}>
          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-semibold">Study Tools</h3>
              <button 
                onClick={() => setShowStudyTools(false)}
                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
          </div>
          <div className="p-4">
            <div className="mb-4">
              <h4 className="text-md font-medium mb-2">Pomodoro Timer</h4>
              <div className={`p-4 rounded-lg ${studyTimer.type === 'focus' ? 'bg-indigo-100 dark:bg-indigo-900' : 'bg-green-100 dark:bg-green-900'} text-center`}>
                <div className="text-2xl font-bold mb-2">
                  {formatTime(studyTimer.time)}
                </div>
                <div className="text-sm mb-3">
                  {studyTimer.type === 'focus' ? 'Focus Time' : 'Break Time'}
                </div>
                <div className="flex space-x-2 justify-center">
                  <button
                    onClick={toggleStudyTimer}
                    className={`px-3 py-1 rounded-md text-white ${studyTimer.active ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'}`}
                  >
                    {studyTimer.active ? 'Pause' : 'Start'}
                  </button>
                  <button
                    onClick={resetStudyTimer}
                    className="px-3 py-1 bg-gray-500 text-white rounded-md hover:bg-gray-600"
                  >
                    Reset
                  </button>
                </div>
              </div>
            </div>
            
            <div className="mb-4">
              <h4 className="text-md font-medium mb-2">Upcoming Assignments</h4>
              <div className="space-y-2 max-h-40 overflow-y-auto">
                {assignments.filter(a => a.status === 'pending').slice(0, 3).map(assignment => (
                  <div key={assignment.id} className={`p-2 rounded-md ${darkMode ? 'bg-gray-700' : 'bg-gray-100'} flex justify-between items-center`}>
                    <div>
                      <p className="text-sm font-medium">{assignment.title}</p>
                      <p className="text-xs text-gray-500 dark:text-gray-400">Due: {assignment.dueDate}</p>
                    </div>
                    <button
                      onClick={() => toggleAssignmentStatus(assignment.id)}
                      className="p-1 rounded-full text-gray-500 hover:text-green-600 dark:text-gray-400 dark:hover:text-green-400"
                    >
                      <CheckSquare className="h-5 w-5" />
                    </button>
                  </div>
                ))}
              </div>
            </div>
            
            <div>
              <h4 className="text-md font-medium mb-2">Quick Notes</h4>
              <textarea
                className={`w-full p-2 rounded-md border ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500`}
                rows="3"
                placeholder="Write a quick note..."
              ></textarea>
            </div>
          </div>
        </div>
      )}

      {/* Share Modal */}
      {showShareModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900 dark:opacity-90"></div>
            </div>
            
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            
            <div className={`inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 className="text-lg leading-6 font-medium">
                      Share Post
                    </h3>
                    <div className="mt-4 space-y-3">
                      <button
                        onClick={() => completeShare('timeline')}
                        className={`w-full flex items-center p-3 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
                      >
                        <Globe className="h-5 w-5 mr-3 text-indigo-500" />
                        <span>Share to your timeline</span>
                      </button>
                      <button
                        onClick={() => completeShare('group')}
                        className={`w-full flex items-center p-3 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
                      >
                        <Users className="h-5 w-5 mr-3 text-indigo-500" />
                        <span>Share to a group</span>
                      </button>
                      <button
                        onClick={() => completeShare('message')}
                        className={`w-full flex items-center p-3 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
                      >
                        <MessageSquare className="h-5 w-5 mr-3 text-indigo-500" />
                        <span>Send as message</span>
                      </button>
                      <button
                        onClick={() => completeShare('external')}
                        className={`w-full flex items-center p-3 rounded-md ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
                      >
                        <ExternalLink className="h-5 w-5 mr-3 text-indigo-500" />
                        <span>Copy link to post</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={() => setShowShareModal(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Create Group Modal */}
      {showCreateGroupModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900 dark:opacity-90"></div>
            </div>
            
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            
            <div className={`inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <h3 className="text-lg leading-6 font-medium">
                      Create New Group
                    </h3>
                    <div className="mt-4 space-y-4">
                      <div>
                        <label htmlFor="group-name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                          Group Name
                        </label>
                        <input
                          type="text"
                          id="group-name"
                          value={newGroupData.name}
                          onChange={(e) => setNewGroupData({...newGroupData, name: e.target.value})}
                          className={`mt-1 block w-full rounded-md shadow-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'border-gray-300'} focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                          placeholder="e.g., Physics Study Group"
                        />
                      </div>
                      <div>
                        <label htmlFor="group-description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                          Description
                        </label>
                        <textarea
                          id="group-description"
                          value={newGroupData.description}
                          onChange={(e) => setNewGroupData({...newGroupData, description: e.target.value})}
                          rows="3"
                          className={`mt-1 block w-full rounded-md shadow-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'border-gray-300'} focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                          placeholder="Describe the purpose of your group..."
                        ></textarea>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                          Privacy
                        </label>
                        <div className="mt-2 space-y-2">
                          <div className="flex items-center">
                            <input
                              id="privacy-public"
                              name="privacy"
                              type="radio"
                              checked={newGroupData.privacy === 'public'}
                              onChange={() => setNewGroupData({...newGroupData, privacy: 'public'})}
                              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
                            />
                            <label htmlFor="privacy-public" className="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
                              Public - Anyone can see and join
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              id="privacy-private"
                              name="privacy"
                              type="radio"
                              checked={newGroupData.privacy === 'private'}
                              onChange={() => setNewGroupData({...newGroupData, privacy: 'private'})}
                              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
                            />
                            <label htmlFor="privacy-private" className="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
                              Private - Only members can see content
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={handleCreateGroup}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Create Group
                </button>
                <button
                  type="button"
                  onClick={() => setShowCreateGroupModal(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Main Content */}
      <main className="pt-16 pb-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            {/* Home Page */}
            {activeTab === 'home' && (
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                {/* Left Sidebar */}
                <div className="hidden lg:block lg:col-span-1">
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Profile</h2>
                      <div className="flex items-center">
                        <img
                          className="h-12 w-12 rounded-full"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-3">
                          <p className="text-sm font-medium">{currentUser?.name}</p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">@{currentUser?.username}</p>
                        </div>
                      </div>
                      <div className="mt-4 space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">Friends</span>
                          <span className="text-sm font-medium">{currentUser?.friends}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">School</span>
                          <span className="text-sm font-medium">{currentUser?.school}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">Year</span>
                          <span className="text-sm font-medium">{currentUser?.year}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">Major</span>
                          <span className="text-sm font-medium">{currentUser?.major}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Quick Links</h2>
                      <nav className="space-y-2">
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Users className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>My Groups</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Calendar className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Events</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Bookmark className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Saved Posts</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <FileText className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Study Materials</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <CheckSquare className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Assignments</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Settings className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Settings</span>
                        </a>
                      </nav>
                    </div>
                  </div>
                </div>
                
                {/* Main Feed */}
                <div className="lg:col-span-2">
                  {/* Create Post */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <div className="flex">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-3 flex-1">
                          <form onSubmit={handlePostSubmit}>
                            <textarea
                              className={`w-full border-0 focus:ring-0 ${darkMode ? 'bg-gray-800 text-white' : 'bg-white'} resize-none`}
                              rows="2"
                              placeholder="What's on your mind?"
                              value={newPostText}
                              onChange={(e) => setNewPostText(e.target.value)}
                            ></textarea>
                            <div className="flex items-center justify-between pt-2 border-t border-gray-200 dark:border-gray-700">
                              <div className="flex space-x-2">
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Image className="h-5 w-5" />
                                </button>
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Video className="h-5 w-5" />
                                </button>
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Smile className="h-5 w-5" />
                                </button>
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Paperclip className="h-5 w-5" />
                                </button>
                              </div>
                              <button
                                type="submit"
                                className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                              >
                                Post
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Posts Feed */}
                  <div className="space-y-6">
                    {posts.map((post) => (
                      <div key={post.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                        <div className="p-4">
                          <div className="flex items-center">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={post.user.avatar}
                              alt={`${post.user.name}'s avatar`}
                            />
                            <div className="ml-3">
                              <p className="text-sm font-medium">{post.user.name}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{post.timestamp}</p>
                            </div>
                            <div className="ml-auto">
                              <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                <MoreHorizontal className="h-5 w-5" />
                              </button>
                            </div>
                          </div>
                          <div className="mt-3">
                            <p className="text-sm">{post.content}</p>
                            {post.image && (
                              <div className="mt-3">
                                <img
                                  src={post.image}
                                  alt="Post attachment"
                                  className="rounded-lg w-full object-cover max-h-96"
                                />
                              </div>
                            )}
                          </div>
                          <div className="mt-4 flex items-center justify-between">
                            <div className="flex space-x-4">
                              <button 
                                onClick={() => handleLike(post.id)}
                                className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                              >
                                <Heart className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.likes}</span>
                              </button>
                              <button 
                                onClick={() => handleToggleComments(post.id)}
                                className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                              >
                                <MessageCircle className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.comments.length}</span>
                              </button>
                              <button 
                                onClick={() => handleShare(post.id)}
                                className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                              >
                                <Share2 className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.shares}</span>
                              </button>
                            </div>
                            <button className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                              <Bookmark className="h-5 w-5" />
                            </button>
                          </div>
                          
                          {/* Comments Section */}
                          {post.showComments && (
                            <div className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
                              {/* Existing Comments */}
                              <div className="space-y-3 mb-3">
                                {post.comments.map((comment) => (
                                  <div key={comment.id} className="flex">
                                    <img
                                      className="h-8 w-8 rounded-full"
                                      src={comment.user.avatar}
                                      alt={`${comment.user.name}'s avatar`}
                                    />
                                    <div className="ml-2 flex-1">
                                      <div className={`rounded-lg px-3 py-2 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
                                        <p className="text-xs font-medium">{comment.user.name}</p>
                                        <p className="text-sm">{comment.content}</p>
                                      </div>
                                      <div className="flex items-center mt-1 space-x-3">
                                        <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                          Like ({comment.likes})
                                        </button>
                                        <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                          Reply
                                        </button>
                                        <span className="text-xs text-gray-500 dark:text-gray-400">{comment.timestamp}</span>
                                      </div>
                                    </div>
                                  </div>
                                ))}
                              </div>
                              
                              {/* Add Comment */}
                              <div className="flex">
                                <img
                                  className="h-8 w-8 rounded-full"
                                  src={currentUser?.avatar}
                                  alt="Your avatar"
                                />
                                <div className="ml-2 flex-1">
                                  <div className="flex items-center">
                                    <input
                                      ref={commentInputRef}
                                      type="text"
                                      placeholder="Write a comment..."
                                      value={commentText}
                                      onChange={(e) => setCommentText(e.target.value)}
                                      onKeyPress={(e) => {
                                        if (e.key === 'Enter') {
                                          handleCommentSubmit(post.id);
                                        }
                                      }}
                                      className={`flex-1 rounded-full py-1 px-3 ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-gray-100 border-gray-200'} border focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500`}
                                    />
                                    <button
                                      onClick={() => handleCommentSubmit(post.id)}
                                      className="ml-2 p-1 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                    >
                                      <Send className="h-4 w-4" />
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                {/* Right Sidebar */}
                <div className="hidden lg:block lg:col-span-1">
                  {/* Notifications */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <div className="flex items-center justify-between mb-4">
                        <h2 className="text-lg font-semibold">Notifications</h2>
                        <a href="#" className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">See all</a>
                      </div>
                      <div className="space-y-4">
                        {notifications.slice(0, 3).map((notification) => (
                          <div key={notification.id} className="flex items-start">
                            <div className="flex-shrink-0 pt-0.5">
                              <div className="h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
                                {notification.type === 'friend_request' && <UserPlus className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'like' && <Heart className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'comment' && <MessageCircle className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'group_invite' && <Users className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'assignment' && <FileText className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'grade' && <Award className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'share' && <Share2 className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'timer' && <Clock className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'group_created' && <Users className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                              </div>
                            </div>
                            <div className="ml-3 flex-1">
                              <p className="text-sm">
                                {notification.type === 'friend_request' && (
                                  <><span className="font-medium">{notification.user}</span> sent you a friend request</>
                                )}
                                {notification.type === 'like' && (
                                  <><span className="font-medium">{notification.user}</span> liked {notification.post}</>
                                )}
                                {notification.type === 'comment' && (
                                  <><span className="font-medium">{notification.user}</span> commented on {notification.post}</>
                                )}
                                {notification.type === 'group_invite' && (
                                  <><span className="font-medium">{notification.user}</span> invited you to join {notification.group}</>
                                )}
                                {notification.type === 'assignment' && (
                                  <>New assignment in <span className="font-medium">{notification.course}</span>: {notification.title}</>
                                )}
                                {notification.type === 'grade' && (
                                  <>You received a <span className="font-medium">{notification.grade}</span> in {notification.course}</>
                                )}
                                {notification.type === 'share' && (
                                  <>You shared a post to {notification.destination}</>
                                )}
                                {notification.type === 'timer' && (
                                  <>Your {notification.timerType} timer is complete</>
                                )}
                                {notification.type === 'group_created' && (
                                  <>You created the group <span className="font-medium">{notification.group}</span></>
                                )}
                              </p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{notification.timestamp}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  
                  {/* Trending Topics */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Trending Topics</h2>
                      <div className="space-y-3">
                        {trendingTopics.map((topic) => (
                          <div key={topic.id} className="flex items-center">
                            <Hash className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
                            <div>
                              <p className="text-sm font-medium">#{topic.tag}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{topic.posts} posts</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  
                  {/* Upcoming Events */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <div className="flex items-center justify-between mb-4">
                        <h2 className="text-lg font-semibold">Upcoming Events</h2>
                        <a href="#" className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">See all</a>
                      </div>
                      <div className="space-y-3">
                        {events.slice(0, 2).map((event) => (
                          <div key={event.id} className={`p-3 rounded-lg ${darkMode ? 'bg-gray-700' : 'bg-gray-50'}`}>
                            <p className="text-sm font-medium">{event.title}</p>
                            <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mt-1">
                              <Calendar className="h-3 w-3 mr-1" />
                              <span>{event.date}</span>
                              <span className="mx-1">•</span>
                              <span>{event.location}</span>
                            </div>
                            <div className="mt-2 flex justify-between items-center">
                              <span className="text-xs text-gray-500 dark:text-gray-400">{event.attendees} attending</span>
                              <button className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
                                Interested
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  
                  {/* Suggested Friends */}
                  <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">People You May Know</h2>
                      <div className="space-y-4">
                        {suggestedFriends.map((friend) => (
                          <div key={friend.id} className="flex items-center">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={friend.avatar}
                              alt={`${friend.name}'s avatar`}
                            />
                            <div className="ml-3 flex-1">
                              <p className="text-sm font-medium">{friend.name}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{friend.mutualFriends} mutual friends</p>
                            </div>
                            <button className="ml-2 px-3 py-1 bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300 rounded-full text-xs font-medium hover:bg-indigo-200 dark:hover:bg-indigo-800">
                              Add
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Academic Page */}
            {activeTab === 'academic' && (
              <div className="max-w-6xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  <div className="border-b border-gray-200 dark:border-gray-700">
                    <nav className="flex">
                      <button
                        onClick={() => setActiveSubTab('courses')}
                        className={`px-6 py-3 border-b-2 font-medium text-sm ${activeSubTab === 'courses' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}
                      >
                        Courses
                      </button>
                      <button
                        onClick={() => setActiveSubTab('assignments')}
                        className={`px-6 py-3 border-b-2 font-medium text-sm ${activeSubTab === 'assignments' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}
                      >
                        Assignments
                      </button>
                      <button
                        onClick={() => setActiveSubTab('materials')}
                        className={`px-6 py-3 border-b-2 font-medium text-sm ${activeSubTab === 'materials' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}
                      >
                        Study Materials
                      </button>
                      <button
                        onClick={() => setActiveSubTab('grades')}
                        className={`px-6 py-3 border-b-2 font-medium text-sm ${activeSubTab === 'grades' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}
                      >
                        Grades
                      </button>
                    </nav>
                  </div>
                  
                  <div className="p-6">
                    {/* Courses Tab */}
                    {activeSubTab === 'courses' && (
                      <div>
                        <div className="flex justify-between items-center mb-6">
                          <h2 className="text-xl font-bold">My Courses</h2>
                          <div className="flex space-x-2">
                            <div className="relative">
                              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <Search className="h-4 w-4 text-gray-400" />
                              </div>
                              <input
                                type="text"
                                placeholder="Search courses..."
                                className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                              />
                            </div>
                            <button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                              Add Course
                            </button>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          {courses.map((course) => (
                            <div key={course.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'}`}>
                              <div className="p-4">
                                <div className="flex justify-between items-start">
                                  <div>
                                    <h3 className="text-lg font-semibold">{course.name}</h3>
                                    <p className="text-sm text-gray-500 dark:text-gray-400">{course.code}</p>
                                  </div>
                                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${course.code.startsWith('CS') ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : course.code.startsWith('MATH') ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : course.code.startsWith('PHYS') ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'}`}>
                                    {course.credits} Credits
                                  </span>
                                </div>
                                <div className="mt-4 space-y-2">
                                  <div className="flex items-center">
                                    <User className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
                                    <span className="text-sm">{course.instructor}</span>
                                  </div>
                                  <div className="flex items-center">
                                    <Clock className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
                                    <span className="text-sm">{course.schedule}</span>
                                  </div>
                                  <div className="flex items-center">
                                    <MapPin className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
                                    <span className="text-sm">{course.room}</span>
                                  </div>
                                </div>
                                <div className="mt-4 flex space-x-2">
                                  <button className="flex-1 px-3 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-sm">
                                    View Course
                                  </button>
                                  <button className="px-3 py-2 bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-white rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 text-sm">
                                    <MessageSquare className="h-5 w-5" />
                                  </button>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                    
                    {/* Assignments Tab */}
                    {activeSubTab === 'assignments' && (
                      <div>
                        <div className="flex justify-between items-center mb-6">
                          <h2 className="text-xl font-bold">Assignments</h2>
                          <div className="flex space-x-2">
                            <select
                              className={`block w-40 pl-3 pr-10 py-2 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white'}`}
                            >
                              <option>All Courses</option>
                              {courses.map(course => (
                                <option key={course.id} value={course.id}>{course.code}</option>
                              ))}
                            </select>
                            <select
                              className={`block w-40 pl-3 pr-10 py-2 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white'}`}
                            >
                              <option>All Status</option>
                              <option>Pending</option>
                              <option>Completed</option>
                            </select>
                          </div>
                        </div>
                        
                        <div className="space-y-4">
                          {assignments.map((assignment) => {
                            const course = courses.find(c => c.id === assignment.courseId);
                            return (
                              <div 
                                key={assignment.id} 
                                className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'} ${assignment.status === 'completed' ? 'opacity-75' : ''}`}
                              >
                                <div className="p-4">
                                  <div className="flex items-start">
                                    <div className={`h-10 w-10 rounded-full flex items-center justify-center ${assignment.status === 'completed' ? 'bg-green-100 dark:bg-green-900' : 'bg-indigo-100 dark:bg-indigo-900'}`}>
                                      {assignment.status === 'completed' ? (
                                        <CheckSquare className={`h-5 w-5 ${assignment.status === 'completed' ? 'text-green-600 dark:text-green-400' : 'text-indigo-600 dark:text-indigo-400'}`} />
                                      ) : (
                                        <FileText className={`h-5 w-5 ${assignment.status === 'completed' ? 'text-green-600 dark:text-green-400' : 'text-indigo-600 dark:text-indigo-400'}`} />
                                      )}
                                    </div>
                                    <div className="ml-4 flex-1">
                                      <div className="flex justify-between items-start">
                                        <div>
                                          <h3 className="text-lg font-semibold">{assignment.title}</h3>
                                          <p className="text-sm text-gray-500 dark:text-gray-400">{course?.code}</p>
                                        </div>
                                        <div className="flex items-center">
                                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${assignment.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'}`}>
                                            {assignment.status === 'completed' ? 'Completed' : 'Pending'}
                                          </span>
                                        </div>
                                      </div>
                                      <p className="mt-2 text-sm">{assignment.description}</p>
                                      <div className="mt-3 flex justify-between items-center">
                                        <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                          <Clock className="h-4 w-4 mr-1" />
                                          <span>Due: {assignment.dueDate}</span>
                                        </div>
                                        <div className="flex space-x-2">
                                          <button 
                                            onClick={() => toggleAssignmentStatus(assignment.id)}
                                            className={`px-3 py-1 rounded-md text-xs font-medium ${assignment.status === 'completed' ? 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-white' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'}`}
                                          >
                                            {assignment.status === 'completed' ? 'Mark Incomplete' : 'Mark Complete'}
                                          </button>
                                          <button className="px-3 py-1 bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 rounded-md text-xs font-medium">
                                            View Details
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    )}
                    
                    {/* Study Materials Tab */}
                    {activeSubTab === 'materials' && (
                      <div>
                        <div className="flex justify-between items-center mb-6">
                          <h2 className="text-xl font-bold">Study Materials</h2>
                          <div className="flex space-x-2">
                            <select
                              className={`block w-40 pl-3 pr-10 py-2 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white'}`}
                            >
                              <option>All Courses</option>
                              {courses.map(course => (
                                <option key={course.id} value={course.id}>{course.code}</option>
                              ))}
                            </select>
                            <button className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                              Upload Material
                            </button>
                          </div>
                        </div>
                        
                        <div className="overflow-hidden rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                          <table className={`min-w-full divide-y divide-gray-200 dark:divide-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                            <thead className={darkMode ? 'bg-gray-700' : 'bg-gray-50'}>
                              <tr>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Name
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Course
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Uploaded By
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Date
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Size
                                </th>
                                <th scope="col" className="relative px-6 py-3">
                                  <span className="sr-only">Actions</span>
                                </th>
                              </tr>
                            </thead>
                            <tbody className={`divide-y divide-gray-200 dark:divide-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                              {studyMaterials.map((material) => {
                                const course = courses.find(c => c.id === material.courseId);
                                return (
                                  <tr key={material.id}>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                      <div className="flex items-center">
                                        <div className={`h-8 w-8 rounded-md flex items-center justify-center ${material.type === 'pdf' ? 'bg-red-100 dark:bg-red-900' : 'bg-blue-100 dark:bg-blue-900'}`}>
                                          <FileText className={`h-4 w-4 ${material.type === 'pdf' ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'}`} />
                                        </div>
                                        <div className="ml-3">
                                          <div className="text-sm font-medium">{material.title}</div>
                                          <div className="text-xs text-gray-500 dark:text-gray-400">.{material.type}</div>
                                        </div>
                                      </div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                      <div className="text-sm">{course?.code}</div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                      <div className="text-sm">{material.uploadedBy}</div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                      <div className="text-sm text-gray-500 dark:text-gray-400">{material.date}</div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                      <div className="text-sm text-gray-500 dark:text-gray-400">{material.size}</div>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                      <div className="flex space-x-2 justify-end">
                                        <button className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
                                          <Download className="h-5 w-5" />
                                        </button>
                                        <button className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">
                                          <Share2 className="h-5 w-5" />
                                        </button>
                                      </div>
                                    </td>
                                  </tr>
                                );
                              })}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    )}
                    
                    {/* Grades Tab */}
                    {activeSubTab === 'grades' && (
                      <div>
                        <div className="flex justify-between items-center mb-6">
                          <h2 className="text-xl font-bold">Grades</h2>
                          <div className="flex space-x-2">
                            <select
                              className={`block w-40 pl-3 pr-10 py-2 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white'}`}
                            >
                              <option>Current Semester</option>
                              <option>Fall 2023</option>
                              <option>Spring 2023</option>
                              <option>Fall 2022</option>
                            </select>
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                          <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'}`}>
                            <div className="p-4">
                              <h3 className="text-lg font-semibold mb-2">Current GPA</h3>
                              <div className="flex items-center">
                                <div className="text-3xl font-bold text-indigo-600 dark:text-indigo-400">3.8</div>
                                <div className="ml-2 px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-full text-xs">
                                  +0.2
                                </div>
                              </div>
                              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">From previous semester</p>
                            </div>
                          </div>
                          
                          <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'}`}>
                            <div className="p-4">
                              <h3 className="text-lg font-semibold mb-2">Credits Completed</h3>
                              <div className="text-3xl font-bold text-indigo-600 dark:text-indigo-400">64</div>
                              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Out of 120 required</p>
                            </div>
                          </div>
                          
                          <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'}`}>
                            <div className="p-4">
                              <h3 className="text-lg font-semibold mb-2">Dean's List</h3>
                              <div className="flex items-center">
                                <Award className="h-8 w-8 text-yellow-500" />
                                <span className="ml-2 text-lg">2 Semesters</span>
                              </div>
                              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Last achieved: Spring 2023</p>
                            </div>
                          </div>
                        </div>
                        
                        <div className="overflow-hidden rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                          <table className={`min-w-full divide-y divide-gray-200 dark:divide-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                            <thead className={darkMode ? 'bg-gray-700' : 'bg-gray-50'}>
                              <tr>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Course
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Credits
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Grade
                                </th>
                                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                  Status
                                </th>
                              </tr>
                            </thead>
                            <tbody className={`divide-y divide-gray-200 dark:divide-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                              {courses.map((course) => (
                                <tr key={course.id}>
                                  <td className="px-6 py-4 whitespace-nowrap">
                                    <div className="flex items-center">
                                      <div>
                                        <div className="text-sm font-medium">{course.name}</div>
                                        <div className="text-xs text-gray-500 dark:text-gray-400">{course.code}</div>
                                      </div>
                                    </div>
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap">
                                    <div className="text-sm">{course.credits}</div>
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap">
                                    <div className={`text-sm font-medium ${course.code === 'MATH 201' ? 'text-green-600 dark:text-green-400' : course.code === 'CS 301' ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400'}`}>
                                      {course.code === 'MATH 201' ? 'A-' : course.code === 'CS 301' ? 'A' : 'In Progress'}
                                    </div>
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap">
                                    <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${course.code === 'MATH 201' || course.code === 'CS 301' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'}`}>
                                      {course.code === 'MATH 201' || course.code === 'CS 301' ? 'Completed' : 'In Progress'}
                                    </span>
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
            
            {/* Groups Page */}
            {activeTab === 'groups' && (
              <div className="max-w-6xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  <div className="p-6">
                    <div className="flex justify-between items-center mb-6">
                      <h1 className="text-2xl font-bold">Groups</h1>
                      <div className="flex space-x-2">
                        <div className="relative">
                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <Search className="h-5 w-5 text-gray-400" />
                          </div>
                          <input
                            type="text"
                            placeholder="Search groups..."
                            className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                          />
                        </div>
                        <button 
                          onClick={() => setShowCreateGroupModal(true)}
                          className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                          Create Group
                        </button>
                      </div>
                    </div>
                    
                    <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
                      <nav className="flex -mb-px">
                        <a href="#" className="px-6 py-3 border-b-2 border-indigo-500 text-indigo-600 dark:text-indigo-400 font-medium text-sm">
                          My Groups
                        </a>
                        <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                          Discover
                        </a>
                        <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                          Invitations
                        </a>
                      </nav>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                      {groups.map((group) => (
                        <div key={group.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-white border border-gray-200'}`}>
                          <div className="p-4">
                            <div className="flex items-center">
                              <img
                                className="h-12 w-12 rounded-lg object-cover"
                                src={group.avatar}
                                alt={`${group.name} avatar`}
                              />
                              <div className="ml-3 flex-1">
                                <div className="flex items-center">
                                  <h3 className="text-lg font-semibold">{group.name}</h3>
                                  {group.privacy === 'private' && (
                                    <Lock className="h-4 w-4 ml-2 text-gray-500 dark:text-gray-400" />
                                  )}
                                </div>
                                <p className="text-sm text-gray-500 dark:text-gray-400">{group.members} members</p>
                              </div>
                            </div>
                            <p className="mt-3 text-sm">
                              {group.description || "No description available."}
                            </p>
                            <div className="mt-4 flex space-x-2">
                              <button className="flex-1 px-3 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-sm">
                                View Group
                              </button>
                              <button className="px-3 py-2 bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-white rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 text-sm">
                                <Bell className="h-5 w-5" />
                              </button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Profile Page */}
            {activeTab === 'profile' && (
              <div className="max-w-3xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  {/* Cover Photo */}
                  <div className="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 relative">
                    <div className="absolute bottom-0 left-0 right-0 px-6 py-4 flex justify-between items-end">
                      <div className="flex items-end">
                        <img
                          className="h-24 w-24 rounded-full border-4 border-white dark:border-gray-800"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-4 mb-2">
                          <h1 className="text-2xl font-bold text-white">{currentUser?.name}</h1>
                          <p className="text-sm text-white opacity-90">@{currentUser?.username}</p>
                        </div>
                      </div>
                      <button className="px-4 py-2 bg-white text-indigo-600 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Edit Profile
                      </button>
                    </div>
                  </div>
                  
                  {/* Profile Navigation */}
                  <div className="border-b border-gray-200 dark:border-gray-700">
                    <nav className="flex -mb-px">
                      <a href="#" className="px-6 py-3 border-b-2 border-indigo-500 text-indigo-600 dark:text-indigo-400 font-medium text-sm">
                        Posts
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        About
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        Friends
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        Photos
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        Academic
                      </a>
                    </nav>
                  </div>
                  
                  {/* Profile Info */}
                  <div className="p-6">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {/* Left Column - About */}
                      <div className="md:col-span-1">
                        <div className="mb-6">
                          <h2 className="text-lg font-semibold mb-3">About</h2>
                          <p className="text-sm">{currentUser?.bio}</p>
                        </div>
                        
                        <div className="mb-6">
                          <h2 className="text-lg font-semibold mb-3">Education</h2>
                          <div className="flex items-start">
                            <div className="h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
                              <Zap className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
                            </div>
                            <div>
                              <p className="text-sm font-medium">{currentUser?.school}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{currentUser?.year} - {currentUser?.major}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">GPA: {currentUser?.gpa}</p>
                            </div>
                          </div>
                        </div>
                        
                        <div>
                          <h2 className="text-lg font-semibold mb-3">Interests</h2>
                          <div className="flex flex-wrap gap-2">
                            {currentUser?.interests.map((interest, index) => (
                              <span key={index} className="px-3 py-1 bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300 rounded-full text-xs font-medium">
                                {interest}
                              </span>
                            ))}
                          </div>
                        </div>
                      </div>
                      
                      {/* Right Column - Posts */}
                      <div className="md:col-span-2">
                        {/* Create Post */}
                        <div className="mb-6">
                          <div className="flex">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={currentUser?.avatar}
                              alt="User avatar"
                            />
                            <div className="ml-3 flex-1">
                              <form onSubmit={handlePostSubmit}>
                                <textarea
                                  className={`w-full border rounded-lg p-3 focus:ring-indigo-500 focus:border-indigo-500 ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300'} resize-none`}
                                  rows="2"
                                  placeholder="What's on your mind?"
                                  value={newPostText}
                                  onChange={(e) => setNewPostText(e.target.value)}
                                ></textarea>
                                <div className="flex items-center justify-between mt-3">
                                  <div className="flex space-x-2">
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Image className="h-5 w-5" />
                                    </button>
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Video className="h-5 w-5" />
                                    </button>
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Smile className="h-5 w-5" />
                                    </button>
                                  </div>
                                  <button
                                    type="submit"
                                    className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                  >
                                    Post
                                  </button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                        
                        {/* Posts */}
                        <div className="space-y-6">
                          {posts.filter(post => post.user.id === currentUser?.id).length > 0 ? (
                            posts.filter(post => post.user.id === currentUser?.id).map((post) => (
                              <div key={post.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-gray-50'}`}>
                                <div className="p-4">
                                  <div className="flex items-center">
                                    <img
                                      className="h-10 w-10 rounded-full"
                                      src={post.user.avatar}
                                      alt={`${post.user.name}'s avatar`}
                                    />
                                    <div className="ml-3">
                                      <p className="text-sm font-medium">{post.user.name}</p>
                                      <p className="text-xs text-gray-500 dark:text-gray-400">{post.timestamp}</p>
                                    </div>
                                    <div className="ml-auto">
                                      <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                        <MoreHorizontal className="h-5 w-5" />
                                      </button>
                                    </div>
                                  </div>
                                  <div className="mt-3">
                                    <p className="text-sm">{post.content}</p>
                                    {post.image && (
                                      <div className="mt-3">
                                        <img
                                          src={post.image}
                                          alt="Post attachment"
                                          className="rounded-lg w-full object-cover max-h-96"
                                        />
                                      </div>
                                    )}
                                  </div>
                                  <div className="mt-4 flex items-center justify-between">
                                    <div className="flex space-x-4">
                                      <button 
                                        onClick={() => handleLike(post.id)}
                                        className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                      >
                                        <Heart className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.likes}</span>
                                      </button>
                                      <button 
                                        onClick={() => handleToggleComments(post.id)}
                                        className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                      >
                                        <MessageCircle className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.comments.length}</span>
                                      </button>
                                      <button 
                                        onClick={() => handleShare(post.id)}
                                        className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                                      >
                                        <Share2 className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.shares}</span>
                                      </button>
                                    </div>
                                    <button className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                      <Bookmark className="h-5 w-5" />
                                    </button>
                                  </div>
                                  
                                  {/* Comments Section */}
                                  {post.showComments && (
                                    <div className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
                                      {/* Existing Comments */}
                                      <div className="space-y-3 mb-3">
                                        {post.comments.map((comment) => (
                                          <div key={comment.id} className="flex">
                                            <img
                                              className="h-8 w-8 rounded-full"
                                              src={comment.user.avatar}
                                              alt={`${comment.user.name}'s avatar`}
                                            />
                                            <div className="ml-2 flex-1">
                                              <div className={`rounded-lg px-3 py-2 ${darkMode ? 'bg-gray-600' : 'bg-gray-100'}`}>
                                                <p className="text-xs font-medium">{comment.user.name}</p>
                                                <p className="text-sm">{comment.content}</p>
                                              </div>
                                              <div className="flex items-center mt-1 space-x-3">
                                                <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                                  Like ({comment.likes})
                                                </button>
                                                <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                                                  Reply
                                                </button>
                                                <span className="text-xs text-gray-500 dark:text-gray-400">{comment.timestamp}</span>
                                              </div>
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                      
                                      {/* Add Comment */}
                                      <div className="flex">
                                        <img
                                          className="h-8 w-8 rounded-full"
                                          src={currentUser?.avatar}
                                          alt="Your avatar"
                                        />
                                        <div className="ml-2 flex-1">
                                          <div className="flex items-center">
                                            <input
                                              ref={post.id === activePostId ? commentInputRef : null}
                                              type="text"
                                              placeholder="Write a comment..."
                                              value={commentText}
                                              onChange={(e) => setCommentText(e.target.value)}
                                              onKeyPress={(e) => {
                                                if (e.key === 'Enter') {
                                                  handleCommentSubmit(post.id);
                                                }
                                              }}
                                              className={`flex-1 rounded-full py-1 px-3 ${darkMode ? 'bg-gray-600 border-gray-500 text-white' : 'bg-gray-100 border-gray-200'} border focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500`}
                                            />
                                            <button
                                              onClick={() => handleCommentSubmit(post.id)}
                                              className="ml-2 p-1 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                            >
                                              <Send className="h-4 w-4" />
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  )}
                                </div>
                              </div>
                            ))
                          ) : (
                            <div className="text-center py-10">
                              <p className="text-gray-500 dark:text-gray-400">No posts yet. Create your first post!</p>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Friends Page */}
            {activeTab === 'friends' && (
              <div className="max-w-5xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  <div className="p-6">
                    <div className="flex items-center justify-between mb-6">
                      <h1 className="text-2xl font-bold">Friends</h1>
                      <div className="relative">
                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                          <Search className="h-5 w-5 text-gray-400" />
                        </div>
                        <input
                          type="text"
                          placeholder="Search friends..."
                          className={`block w-<ant_artifact identifier="snippet_001" title="Updated CampusConnect App with Merged Features">
import React, { useState, useEffect } from 'react';
import { Bell, MessageSquare, Users, UserPlus, Calendar, Search, Menu, X, Home, User, Settings, LogOut, Moon, Sun, Heart, MessageCircle, Share2, Bookmark, MoreHorizontal, Smile, Image, Video, Send, ChevronDown, Hash, Zap, Globe, Lock } from 'lucide-react';

export default function App() {
  const [darkMode, setDarkMode] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  const [posts, setPosts] = useState([]);
  const [newPostText, setNewPostText] = useState('');
  const [notifications, setNotifications] = useState([]);
  const [suggestedFriends, setSuggestedFriends] = useState([]);
  const [trendingTopics, setTrendingTopics] = useState([]);
  const [groups, setGroups] = useState([]);
  const [events, setEvents] = useState([]);
  const [currentUser, setCurrentUser] = useState(null);

  // Initialize with mock data
  useEffect(() => {
    // Mock current user
    setCurrentUser({
      id: 1,
      name: "Alex Johnson",
      username: "alexj",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
      bio: "Computer Science major at State University. Passionate about AI and web development.",
      friends: 142,
      school: "State University",
      year: "Junior",
      interests: ["Programming", "AI", "Basketball", "Photography"]
    });

    // Mock posts
    setPosts([
      {
        id: 1,
        user: {
          id: 2,
          name: "Emma Wilson",
          avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Just finished my research paper on renewable energy! 🎉 #StudentLife #Science",
        image: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80",
        timestamp: "2 hours ago",
        likes: 24,
        comments: 5,
        shares: 2
      },
      {
        id: 2,
        user: {
          id: 3,
          name: "Marcus Chen",
          avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Study group for Advanced Calculus tomorrow at the library, 5PM. Who's in? #StudyGroup #Math",
        timestamp: "4 hours ago",
        likes: 18,
        comments: 12,
        shares: 3
      },
      {
        id: 3,
        user: {
          id: 4,
          name: "Sophia Rodriguez",
          avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        },
        content: "Our team won the debate competition! So proud of everyone's hard work and dedication. #Debate #Championship",
        image: "https://images.unsplash.com/photo-1515187029135-18ee286d815b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80",
        timestamp: "Yesterday",
        likes: 56,
        comments: 14,
        shares: 8
      }
    ]);

    // Mock notifications
    setNotifications([
      { id: 1, type: "friend_request", user: "Jamie Lee", timestamp: "5 min ago" },
      { id: 2, type: "like", user: "Taylor Kim", post: "your photo", timestamp: "20 min ago" },
      { id: 3, type: "comment", user: "Riley Smith", post: "your status", timestamp: "1 hour ago" },
      { id: 4, type: "group_invite", user: "Jordan Patel", group: "CS Study Group", timestamp: "3 hours ago" }
    ]);

    // Mock suggested friends
    setSuggestedFriends([
      { id: 5, name: "Casey Morgan", avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 5 },
      { id: 6, name: "Jordan Rivera", avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 3 },
      { id: 7, name: "Taylor Singh", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 2 }
    ]);

    // Mock trending topics
    setTrendingTopics([
      { id: 1, tag: "FinalExams", posts: 1243 },
      { id: 2, tag: "CampusLife", posts: 856 },
      { id: 3, tag: "StudyAbroad", posts: 621 },
      { id: 4, tag: "Internships", posts: 542 }
    ]);

    // Mock groups
    setGroups([
      { id: 1, name: "Computer Science Club", members: 128, privacy: "public", avatar: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" },
      { id: 2, name: "Photography Society", members: 94, privacy: "public", avatar: "https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" },
      { id: 3, name: "Business Case Study", members: 56, privacy: "private", avatar: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" }
    ]);

    // Mock events
    setEvents([
      { id: 1, title: "Campus Tech Fair", date: "May 15", attendees: 87, location: "Main Hall" },
      { id: 2, title: "End of Semester Party", date: "June 2", attendees: 156, location: "Student Center" },
      { id: 3, title: "Career Workshop", date: "May 20", attendees: 42, location: "Library, Room 305" }
    ]);
  }, []);

  // Toggle dark mode
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  // Handle post submission
  const handlePostSubmit = (e) => {
    e.preventDefault();
    if (!newPostText.trim()) return;
    
    const newPost = {
      id: posts.length + 1,
      user: currentUser,
      content: newPostText,
      timestamp: "Just now",
      likes: 0,
      comments: 0,
      shares: 0
    };
    
    setPosts([newPost, ...posts]);
    setNewPostText('');
  };

  // Handle like action
  const handleLike = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId ? { ...post, likes: post.likes + 1 } : post
    ));
  };

  return (
    <div className={`min-h-screen ${darkMode ? 'dark bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
      {/* Header/Navigation */}
      <header className={`fixed top-0 left-0 right-0 z-50 ${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-sm`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">CampusConnect</span>
              </div>
              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                <button 
                  onClick={() => setActiveTab('home')}
                  className={`${activeTab === 'home' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <Home className="h-5 w-5 mr-1" /> Home
                </button>
                <button 
                  onClick={() => setActiveTab('profile')}
                  className={`${activeTab === 'profile' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <User className="h-5 w-5 mr-1" /> Profile
                </button>
                <button 
                  onClick={() => setActiveTab('friends')}
                  className={`${activeTab === 'friends' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <Users className="h-5 w-5 mr-1" /> Friends
                </button>
                <button 
                  onClick={() => setActiveTab('messages')}
                  className={`${activeTab === 'messages' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent hover:border-gray-300'} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
                >
                  <MessageSquare className="h-5 w-5 mr-1" /> Messages
                </button>
              </div>
            </div>
            <div className="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-4">
              {/* Search */}
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Search className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  type="text"
                  placeholder="Search..."
                  className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                />
              </div>
              
              {/* Notifications */}
              <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 relative">
                <Bell className="h-6 w-6" />
                <span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white dark:ring-gray-800"></span>
              </button>
              
              {/* Dark mode toggle */}
              <button 
                onClick={() => setDarkMode(!darkMode)} 
                className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                {darkMode ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
              </button>
              
              {/* Profile dropdown */}
              <div className="relative">
                <button className="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                  <img
                    className="h-8 w-8 rounded-full"
                    src={currentUser?.avatar}
                    alt="User avatar"
                  />
                </button>
              </div>
            </div>
            
            {/* Mobile menu button */}
            <div className="flex items-center sm:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="sm:hidden">
            <div className={`pt-2 pb-3 space-y-1 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <button
                onClick={() => {setActiveTab('home'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'home' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Home className="h-5 w-5 mr-3" /> Home
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('profile'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'profile' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <User className="h-5 w-5 mr-3" /> Profile
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('friends'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'friends' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Users className="h-5 w-5 mr-3" /> Friends
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('messages'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'messages' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <MessageSquare className="h-5 w-5 mr-3" /> Messages
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('notifications'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'notifications' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Bell className="h-5 w-5 mr-3" /> Notifications
                </div>
              </button>
              <button
                onClick={() => {setActiveTab('settings'); setMobileMenuOpen(false);}}
                className={`${activeTab === 'settings' ? 'bg-indigo-50 border-indigo-500 text-indigo-700 dark:bg-gray-700 dark:text-indigo-400' : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'} block pl-3 pr-4 py-2 border-l-4 text-base font-medium w-full text-left`}
              >
                <div className="flex items-center">
                  <Settings className="h-5 w-5 mr-3" /> Settings
                </div>
              </button>
            </div>
            <div className={`pt-4 pb-3 border-t border-gray-200 dark:border-gray-700 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
              <div className="flex items-center px-4">
                <div className="flex-shrink-0">
                  <img
                    className="h-10 w-10 rounded-full"
                    src={currentUser?.avatar}
                    alt="User avatar"
                  />
                </div>
                <div className="ml-3">
                  <div className="text-base font-medium text-gray-800 dark:text-white">{currentUser?.name}</div>
                  <div className="text-sm font-medium text-gray-500 dark:text-gray-400">@{currentUser?.username}</div>
                </div>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Main Content */}
      <main className="pt-16 pb-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            {/* Home Page */}
            {activeTab === 'home' && (
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                {/* Left Sidebar */}
                <div className="hidden lg:block lg:col-span-1">
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Profile</h2>
                      <div className="flex items-center">
                        <img
                          className="h-12 w-12 rounded-full"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-3">
                          <p className="text-sm font-medium">{currentUser?.name}</p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">@{currentUser?.username}</p>
                        </div>
                      </div>
                      <div className="mt-4 space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">Friends</span>
                          <span className="text-sm font-medium">{currentUser?.friends}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">School</span>
                          <span className="text-sm font-medium">{currentUser?.school}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-500 dark:text-gray-400">Year</span>
                          <span className="text-sm font-medium">{currentUser?.year}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Quick Links</h2>
                      <nav className="space-y-2">
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Users className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>My Groups</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Calendar className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Events</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Bookmark className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Saved Posts</span>
                        </a>
                        <a href="#" className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
                          <Settings className="h-5 w-5 mr-3 text-indigo-500" />
                          <span>Settings</span>
                        </a>
                      </nav>
                    </div>
                  </div>
                </div>
                
                {/* Main Feed */}
                <div className="lg:col-span-2">
                  {/* Create Post */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <div className="flex">
                        <img
                          className="h-10 w-10 rounded-full"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-3 flex-1">
                          <form onSubmit={handlePostSubmit}>
                            <textarea
                              className={`w-full border-0 focus:ring-0 ${darkMode ? 'bg-gray-800 text-white' : 'bg-white'} resize-none`}
                              rows="2"
                              placeholder="What's on your mind?"
                              value={newPostText}
                              onChange={(e) => setNewPostText(e.target.value)}
                            ></textarea>
                            <div className="flex items-center justify-between pt-2 border-t border-gray-200 dark:border-gray-700">
                              <div className="flex space-x-2">
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Image className="h-5 w-5" />
                                </button>
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Video className="h-5 w-5" />
                                </button>
                                <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                  <Smile className="h-5 w-5" />
                                </button>
                              </div>
                              <button
                                type="submit"
                                className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                              >
                                Post
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Posts Feed */}
                  <div className="space-y-6">
                    {posts.map((post) => (
                      <div key={post.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                        <div className="p-4">
                          <div className="flex items-center">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={post.user.avatar}
                              alt={`${post.user.name}'s avatar`}
                            />
                            <div className="ml-3">
                              <p className="text-sm font-medium">{post.user.name}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{post.timestamp}</p>
                            </div>
                            <div className="ml-auto">
                              <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                <MoreHorizontal className="h-5 w-5" />
                              </button>
                            </div>
                          </div>
                          <div className="mt-3">
                            <p className="text-sm">{post.content}</p>
                            {post.image && (
                              <div className="mt-3">
                                <img
                                  src={post.image}
                                  alt="Post attachment"
                                  className="rounded-lg w-full object-cover max-h-96"
                                />
                              </div>
                            )}
                          </div>
                          <div className="mt-4 flex items-center justify-between">
                            <div className="flex space-x-4">
                              <button 
                                onClick={() => handleLike(post.id)}
                                className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
                              >
                                <Heart className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.likes}</span>
                              </button>
                              <button className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                <MessageCircle className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.comments}</span>
                              </button>
                              <button className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                <Share2 className="h-5 w-5 mr-1" />
                                <span className="text-xs">{post.shares}</span>
                              </button>
                            </div>
                            <button className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                              <Bookmark className="h-5 w-5" />
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                {/* Right Sidebar */}
                <div className="hidden lg:block lg:col-span-1">
                  {/* Notifications */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <div className="flex items-center justify-between mb-4">
                        <h2 className="text-lg font-semibold">Notifications</h2>
                        <a href="#" className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">See all</a>
                      </div>
                      <div className="space-y-4">
                        {notifications.slice(0, 3).map((notification) => (
                          <div key={notification.id} className="flex items-start">
                            <div className="flex-shrink-0 pt-0.5">
                              <div className="h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
                                {notification.type === 'friend_request' && <UserPlus className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'like' && <Heart className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'comment' && <MessageCircle className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                                {notification.type === 'group_invite' && <Users className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />}
                              </div>
                            </div>
                            <div className="ml-3 flex-1">
                              <p className="text-sm">
                                <span className="font-medium">{notification.user}</span>
                                {notification.type === 'friend_request' && ' sent you a friend request'}
                                {notification.type === 'like' && ' liked '}
                                {notification.type === 'comment' && ' commented on '}
                                {notification.type === 'group_invite' && ' invited you to join '}
                                {(notification.type === 'like' || notification.type === 'comment') && notification.post}
                                {notification.type === 'group_invite' && notification.group}
                              </p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{notification.timestamp}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  
                  {/* Trending Topics */}
                  <div className={`rounded-lg shadow-sm overflow-hidden mb-6 ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">Trending Topics</h2>
                      <div className="space-y-3">
                        {trendingTopics.map((topic) => (
                          <div key={topic.id} className="flex items-center">
                            <Hash className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
                            <div>
                              <p className="text-sm font-medium">#{topic.tag}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{topic.posts} posts</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  
                  {/* Suggested Friends */}
                  <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                    <div className="p-4">
                      <h2 className="text-lg font-semibold mb-4">People You May Know</h2>
                      <div className="space-y-4">
                        {suggestedFriends.map((friend) => (
                          <div key={friend.id} className="flex items-center">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={friend.avatar}
                              alt={`${friend.name}'s avatar`}
                            />
                            <div className="ml-3 flex-1">
                              <p className="text-sm font-medium">{friend.name}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{friend.mutualFriends} mutual friends</p>
                            </div>
                            <button className="ml-2 px-3 py-1 bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300 rounded-full text-xs font-medium hover:bg-indigo-200 dark:hover:bg-indigo-800">
                              Add
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Profile Page */}
            {activeTab === 'profile' && (
              <div className="max-w-3xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  {/* Cover Photo */}
                  <div className="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 relative">
                    <div className="absolute bottom-0 left-0 right-0 px-6 py-4 flex justify-between items-end">
                      <div className="flex items-end">
                        <img
                          className="h-24 w-24 rounded-full border-4 border-white dark:border-gray-800"
                          src={currentUser?.avatar}
                          alt="User avatar"
                        />
                        <div className="ml-4 mb-2">
                          <h1 className="text-2xl font-bold text-white">{currentUser?.name}</h1>
                          <p className="text-sm text-white opacity-90">@{currentUser?.username}</p>
                        </div>
                      </div>
                      <button className="px-4 py-2 bg-white text-indigo-600 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Edit Profile
                      </button>
                    </div>
                  </div>
                  
                  {/* Profile Navigation */}
                  <div className="border-b border-gray-200 dark:border-gray-700">
                    <nav className="flex -mb-px">
                      <a href="#" className="px-6 py-3 border-b-2 border-indigo-500 text-indigo-600 dark:text-indigo-400 font-medium text-sm">
                        Posts
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        About
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        Friends
                      </a>
                      <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                        Photos
                      </a>
                    </nav>
                  </div>
                  
                  {/* Profile Info */}
                  <div className="p-6">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {/* Left Column - About */}
                      <div className="md:col-span-1">
                        <div className="mb-6">
                          <h2 className="text-lg font-semibold mb-3">About</h2>
                          <p className="text-sm">{currentUser?.bio}</p>
                        </div>
                        
                        <div className="mb-6">
                          <h2 className="text-lg font-semibold mb-3">Education</h2>
                          <div className="flex items-start">
                            <div className="h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
                              <Zap className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
                            </div>
                            <div>
                              <p className="text-sm font-medium">{currentUser?.school}</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400">{currentUser?.year}</p>
                            </div>
                          </div>
                        </div>
                        
                        <div>
                          <h2 className="text-lg font-semibold mb-3">Interests</h2>
                          <div className="flex flex-wrap gap-2">
                            {currentUser?.interests.map((interest, index) => (
                              <span key={index} className="px-3 py-1 bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300 rounded-full text-xs font-medium">
                                {interest}
                              </span>
                            ))}
                          </div>
                        </div>
                      </div>
                      
                      {/* Right Column - Posts */}
                      <div className="md:col-span-2">
                        {/* Create Post */}
                        <div className="mb-6">
                          <div className="flex">
                            <img
                              className="h-10 w-10 rounded-full"
                              src={currentUser?.avatar}
                              alt="User avatar"
                            />
                            <div className="ml-3 flex-1">
                              <form onSubmit={handlePostSubmit}>
                                <textarea
                                  className={`w-full border rounded-lg p-3 focus:ring-indigo-500 focus:border-indigo-500 ${darkMode ? 'bg-gray-700 border-gray-600 text-white' : 'bg-white border-gray-300'} resize-none`}
                                  rows="2"
                                  placeholder="What's on your mind?"
                                  value={newPostText}
                                  onChange={(e) => setNewPostText(e.target.value)}
                                ></textarea>
                                <div className="flex items-center justify-between mt-3">
                                  <div className="flex space-x-2">
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Image className="h-5 w-5" />
                                    </button>
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Video className="h-5 w-5" />
                                    </button>
                                    <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                      <Smile className="h-5 w-5" />
                                    </button>
                                  </div>
                                  <button
                                    type="submit"
                                    className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                  >
                                    Post
                                  </button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                        
                        {/* Posts */}
                        <div className="space-y-6">
                          {posts.filter(post => post.user.id === currentUser?.id).length > 0 ? (
                            posts.filter(post => post.user.id === currentUser?.id).map((post) => (
                              <div key={post.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-gray-50'}`}>
                                <div className="p-4">
                                  <div className="flex items-center">
                                    <img
                                      className="h-10 w-10 rounded-full"
                                      src={post.user.avatar}
                                      alt={`${post.user.name}'s avatar`}
                                    />
                                    <div className="ml-3">
                                      <p className="text-sm font-medium">{post.user.name}</p>
                                      <p className="text-xs text-gray-500 dark:text-gray-400">{post.timestamp}</p>
                                    </div>
                                    <div className="ml-auto">
                                      <button className="p-1 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                                        <MoreHorizontal className="h-5 w-5" />
                                      </button>
                                    </div>
                                  </div>
                                  <div className="mt-3">
                                    <p className="text-sm">{post.content}</p>
                                    {post.image && (
                                      <div className="mt-3">
                                        <img
                                          src={post.image}
                                          alt="Post attachment"
                                          className="rounded-lg w-full object-cover max-h-96"
                                        />
                                      </div>
                                    )}
                                  </div>
                                  <div className="mt-4 flex items-center justify-between">
                                    <div className="flex space-x-4">
                                      <button className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                        <Heart className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.likes}</span>
                                      </button>
                                      <button className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                        <MessageCircle className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.comments}</span>
                                      </button>
                                      <button className="flex items-center text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                        <Share2 className="h-5 w-5 mr-1" />
                                        <span className="text-xs">{post.shares}</span>
                                      </button>
                                    </div>
                                    <button className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                                      <Bookmark className="h-5 w-5" />
                                    </button>
                                  </div>
                                </div>
                              </div>
                            ))
                          ) : (
                            <div className="text-center py-10">
                              <p className="text-gray-500 dark:text-gray-400">No posts yet. Create your first post!</p>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Friends Page */}
            {activeTab === 'friends' && (
              <div className="max-w-5xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
                  <div className="p-6">
                    <div className="flex items-center justify-between mb-6">
                      <h1 className="text-2xl font-bold">Friends</h1>
                      <div className="relative">
                        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                          <Search className="h-5 w-5 text-gray-400" />
                        </div>
                        <input
                          type="text"
                          placeholder="Search friends..."
                          className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                        />
                      </div>
                    </div>
                    
                    <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
                      <nav className="flex -mb-px">
                        <a href="#" className="px-6 py-3 border-b-2 border-indigo-500 text-indigo-600 dark:text-indigo-400 font-medium text-sm">
                          All Friends
                        </a>
                        <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                          Recently Added
                        </a>
                        <a href="#" className="px-6 py-3 border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium text-sm">
                          Friend Requests
                        </a>
                      </nav>
                    </div>
                    
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                      {suggestedFriends.concat([
                        { id: 8, name: "Alex Thompson", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 8 },
                        { id: 9, name: "Jamie Wilson", avatar: "https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 6 },
                        { id: 10, name: "Riley Parker", avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 4 },
                        { id: 11, name: "Morgan Lee", avatar: "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 7 },
                        { id: 12, name: "Jordan Taylor", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", mutualFriends: 3 }
                      ]).map((friend) => (
                        <div key={friend.id} className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-700' : 'bg-gray-50'}`}>
                          <div className="p-4">
                            <div className="flex items-center">
                              <img
                                className="h-16 w-16 rounded-full"
                                src={friend.avatar}
                                alt={`${friend.name}'s avatar`}
                              />
                              <div className="ml-4 flex-1">
                                <p className="text-base font-medium">{friend.name}</p>
                                <p className="text-sm text-gray-500 dark:text-gray-400">{friend.mutualFriends} mutual friends</p>
                              </div>
                            </div>
                            <div className="mt-4 flex space-x-2">
                              <button className="flex-1 px-3 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-sm">
                                Message
                              </button>
                              <button className="flex-1 px-3 py-2 bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-white rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 text-sm">
                                View Profile
                              </button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Messages Page */}
            {activeTab === 'messages' && (
              <div className="max-w-5xl mx-auto">
                <div className={`rounded-lg shadow-sm overflow-hidden ${darkMode ? 'bg-gray-800' : 'bg-white'} h-[calc(100vh-10rem)]`}>
                  <div className="flex h-full">
                    {/* Conversations List */}
                    <div className={`w-1/3 border-r ${darkMode ? 'border-gray-700' : 'border-gray-200'} overflow-y-auto`}>
                      <div className="p-4">
                        <div className="relative mb-4">
                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <Search className="h-5 w-5 text-gray-400" />
                          </div>
                          <input
                            type="text"
                            placeholder="Search messages..."
                            className={`block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm`}
                          />
                        </div>
                        
                        <div className="space-y-1">
                          {[
                            { id: 1, name: "Emma Wilson", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", lastMessage: "Hey, how's your project coming along?", time: "10:42 AM", unread: true, online: true },
                            { id: 2, name: "Marcus Chen", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", lastMessage: "Are we still meeting at the library tomorrow?", time: "Yesterday", unread: false, online: false },
                            { id: 3, name: "Sophia Rodriguez", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", lastMessage: "Thanks for the notes!", time: "Yesterday", unread: false, online: true },
                            { id: 4, name: "Jamie Lee", avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", lastMessage: "Did you see the assignment for next week?", time: "Monday", unread: false, online: false },
                            { id: 5, name: "Taylor Kim", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", lastMessage: "Let's grab coffee after class", time: "Monday", unread: false, online: true }
                          ].map((conversation) => (
                            <button
                              key={conversation.id}
                              className={`w-full text-left px-4 py-3 rounded-lg flex items-center ${conversation.id === 1 ? (darkMode ? 'bg-gray-700' : 'bg-indigo-50') : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                            >
                              <div className="relative">
                                <img
                                  className="h-12 w-12 rounded-full"
                                  src={conversation.avatar}
                                  alt={`${conversation.name}'s avatar`}
                                />
                                {conversation.online && (
                                  <span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-400 ring-2 ring-white dark:ring-gray-800"></span>
                                )}
                              </div>
                              <div className="ml-3 flex-1 overflow-hidden">
                                <div className="flex items-center justify-between">
                                  <p className={`text-sm font-medium truncate ${conversation.unread ? 'text-indigo-600 dark:text-indigo-400' : ''}`}>
                                    {conversation.name}
                                  </p>
                                  <p className="text-xs text-gray-500 dark:text-gray-400">
                                    {conversation.time}
                                  </p>
                                </div>
                                <p className={`text-sm truncate ${conversation.unread ? 'font-medium text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}`}>
                                  {conversation.lastMessage}
                                </p>
                              </div>
                              {conversation.unread && (
                                <div className="ml-2">
                                  <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-indigo-600 text-xs font-medium text-white">
                                    1
                                  </span>
                                </div>
                              )}
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                    
                    {/* Chat Area */}
                    <div className="w-2/3 flex flex-col">
                      {/* Chat Header */}
                      <div className={`p-4 border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'} flex items-center`}>
                        <div className="relative">
                          <img
                            className="h-10 w-10 rounded-full"
                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                            alt="Emma Wilson's avatar"
                          />
                          <span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white dark:ring-gray-800"></span>
                        </div>
                        <div className="ml-3 flex-1">
                          <p className="text-sm font-medium">Emma Wilson</p>
                          <p className="text-xs text-gray-500 dark:text-gray-400">Online</p>
                        </div>
                        <div className="flex space-x-2">
                          <button className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                            <Video className="h-5 w-5" />
                          </button>
                          <button className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                            <MoreHorizontal className="h-5 w-5" />
                          </button>
                        </div>
                      </div>
                      
                      {/* Messages */}
                      <div className="flex-1 p-4 overflow-y-auto">
                        <div className="space-y-4">
                          {/* Timestamp */}
                          <div className="flex justify-center">
                            <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
                              Today, 10:30 AM
                            </span>
                          </div>
                          
                          {/* Their message */}
                          <div className="flex items-end">
                            <img
                              className="h-8 w-8 rounded-full mr-2"
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                              alt="Emma Wilson's avatar"
                            />
                            <div className={`max-w-xs rounded-lg rounded-bl-none p-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
                              <p className="text-sm">Hey, how's your project coming along?</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">
                                10:30 AM
                              </p>
                            </div>
                          </div>
                          
                          {/* My message */}
                          <div className="flex items-end justify-end">
                            <div className="max-w-xs rounded-lg rounded-br-none p-3 bg-indigo-600 text-white">
                              <p className="text-sm">It's going well! I'm almost done with the research part. How about yours?</p>
                              <p className="text-xs text-indigo-200 mt-1 text-right">
                                10:35 AM
                              </p>
                            </div>
                          </div>
                          
                          {/* Their message */}
                          <div className="flex items-end">
                            <img
                              className="h-8 w-8 rounded-full mr-2"
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                              alt="Emma Wilson's avatar"
                            />
                            <div className={`max-w-xs rounded-lg rounded-bl-none p-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
                              <p className="text-sm">I'm struggling a bit with the data analysis section. Do you think we could meet up to go over it?</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">
                                10:38 AM
                              </p>
                            </div>
                          </div>
                          
                          {/* Their message */}
                          <div className="flex items-end">
                            <img
                              className="h-8 w-8 rounded-full mr-2"
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                              alt="Emma Wilson's avatar"
                            />
                            <div className={`max-w-xs rounded-lg rounded-bl-none p-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
                              <p className="text-sm">Maybe tomorrow at the library?</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">
                                10:39 AM
                              </p>
                            </div>
                          </div>
                          
                          {/* My message */}
                          <div className="flex items-end justify-end">
                            <div className="max-w-xs rounded-lg rounded-br-none p-3 bg-indigo-600 text-white">
                              <p className="text-sm">Sure, that works for me. How about 3PM?</p>
                              <p className="text-xs text-indigo-200 mt-1 text-right">
                                10:40 AM
                              </p>
                            </div>
                          </div>
                          
                          {/* Their message */}
                          <div className="flex items-end">
                            <img
                              className="h-8 w-8 rounded-full mr-2"
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                              alt="Emma Wilson's avatar"
                            />
                            <div className={`max-w-xs rounded-lg rounded-bl-none p-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
                              <p className="text-sm">Perfect! I'll see you then. Thanks!</p>
                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">
                                10:42 AM
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      {/* Message Input */}
                      <div className={`p-4 border-t ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
                        <form className="flex items-center">
                          <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                            <Smile className="h-6 w-6" />
                          </button>
                          <button type="button" className="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                            <Image className="h-6 w-6" />
                          </button>
                          <input
                            type="text"
                            placeholder="Type a message..."
                            className={`flex-1 mx-4 py-2 px-4 border border-gray-300 rounded-full ${darkMode ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400' : 'bg-white placeholder-gray-500'} focus:outline-none focus:ring-indigo-500 focus:border-indigo-500`}
                          />
                          <button type="submit" className="p-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <Send className="h-5 w-5" />
                          </button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className={`py-6 ${darkMode ? 'bg-gray-800 text-gray-400' : 'bg-white text-gray-500'} border-t border-gray-200 dark:border-gray-700`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-4 md:mb-0">
              <span className="text-xl font-bold text-indigo-600 dark:text-indigo-400">CampusConnect</span>
              <p className="text-sm mt-1">Connect with fellow students, share knowledge, and build your network.</p>
            </div>
            <div className="flex space-x-6">
              <a href="#" className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                About
              </a>
              <a href="#" className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                Privacy
              </a>
              <a href="#" className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                Terms
              </a>
              <a href="#" className="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400">
                Help
              </a>
            </div>
          </div>
          <div className="mt-4 text-center text-sm">
            &copy; {new Date().getFullYear()} CampusConnect. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}