import { useState, createContext, useContext, ReactNode } from "react";
import {
  Search,
  Bell,
  MessageCircle,
  TrendingUp,
  Users,
  Bookmark,
  Settings,
  LogOut,
  Home,
  Compass,
  MapPin,
  Camera,
  Globe,
  Plane,
  Mountain,
  Utensils,
  ChevronDown,
  ChevronRight,
  Plus,
  ArrowUp,
  ArrowDown,
  Eye,
  Reply,
  Heart,
  Share2,
  MoreHorizontal,
  Menu,
  X,
  Star,
  Clock,
  Flame,
  Trending,
  Award,
  Calendar,
  Filter,
  Grid,
  List,
  BookmarkPlus,
  UserPlus,
  Zap,
  Coffee,
  Map,
  MountainSnow,
  Palmtree,
  Building,
  Waves,
  Tent,
  Camera2,
  Shirt,
  Leaf,
  type LucideIcon,
} from "lucide-react";

// ============================================================================
// TYPES & INTERFACES
// ============================================================================

interface User {
  id: string;
  username: string;
  displayName: string;
  avatar: string;
  isOnline: boolean;
  role?: "admin" | "moderator" | "member";
  joinedDate?: string;
}

interface Category {
  id: string;
  name: string;
  description: string;
  icon: LucideIcon;
  color: string;
  gradient: string;
  threadCount: number;
  postCount: number;
  latestThread?: Thread;
}

interface Thread {
  id: string;
  title: string;
  excerpt: string;
  author: User;
  category: Category;
  createdAt: string;
  lastActivity: string;
  views: number;
  replies: number;
  votes: number;
  isPinned?: boolean;
  isHot?: boolean;
  tags: string[];
  hasMedia?: boolean;
}

interface TrendingTag {
  name: string;
  count: number;
  trend: "up" | "new" | "stable";
}

interface Notification {
  id: string;
  type: "reply" | "mention" | "like" | "system";
  message: string;
  time: string;
  isRead: boolean;
  avatar?: string;
}

// ============================================================================
// DESIGN TOKENS
// ============================================================================

const colors = {
  primary: "#0D9488",
  primaryHover: "#0F766E",
  secondary: "#F5F0E8",
  accent: "#F97316",
  accentHover: "#EA580C",
  dark: "#1E293B",
  darkHover: "#334155",
  surface: "#FFFFFF",
  surfaceAlt: "#F8FAFC",
  border: "#E2E8F0",
  borderDark: "#CBD5E1",
  text: "#1E293B",
  textMuted: "#64748B",
  textLight: "#94A3B8",
  success: "#10B981",
  warning: "#F59E0B",
  error: "#EF4444",
  info: "#3B82F6",
};

const spacing = {
  xs: "4px",
  sm: "8px",
  md: "12px",
  lg: "16px",
  xl: "24px",
  "2xl": "32px",
  "3xl": "48px",
};

const borderRadius = {
  sm: "6px",
  md: "8px",
  lg: "12px",
  xl: "16px",
  full: "9999px",
};

const shadows = {
  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
  glow: "0 0 20px rgba(13, 148, 136, 0.3)",
};

// ============================================================================
// MOCK DATA
// ============================================================================

const currentUser: User = {
  id: "1",
  username: "wanderlust_sarah",
  displayName: "Sarah Mitchell",
  avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
  isOnline: true,
  role: "member",
  joinedDate: "March 2024",
};

const users: User[] = [
  { id: "2", username: "travel_mike", displayName: "Mike Chen", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop", isOnline: true, role: "admin" },
  { id: "3", username: "globe_jane", displayName: "Jane Williams", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop", isOnline: true, role: "moderator" },
  { id: "4", username: "adventure_joe", displayName: "Joe Martinez", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop", isOnline: false, role: "member" },
  { id: "5", username: "nomad_emily", displayName: "Emily Thompson", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop", isOnline: true, role: "member" },
  { id: "6", username: "explorer_alex", displayName: "Alex Rivera", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop", isOnline: true, role: "member" },
];

const categories: Category[] = [
  { id: "1", name: "Destinations", description: "Share and discover amazing places around the world", icon: MapPin, color: "#0D9488", gradient: "from-teal-500 to-cyan-500", threadCount: 2340, postCount: 18293 },
  { id: "2", name: "Travel Tips", description: "Expert advice and insider knowledge for travelers", icon: Compass, color: "#F97316", gradient: "from-orange-500 to-amber-500", threadCount: 1892, postCount: 14567 },
  { id: "3", name: "Photography", description: "Capture and share your travel moments", icon: Camera2, color: "#8B5CF6", gradient: "from-violet-500 to-purple-500", threadCount: 987, postCount: 8234 },
  { id: "4", name: "Gear & Equipment", description: "Reviews and recommendations for travel gear", icon: Mountain, color: "#10B981", gradient: "from-emerald-500 to-green-500", threadCount: 654, postCount: 4123 },
  { id: "5", name: "Food & Cuisine", description: "Culinary adventures from around the globe", icon: Utensils, color: "#EF4444", gradient: "from-red-500 to-rose-500", threadCount: 1543, postCount: 11234 },
  { id: "6", name: "Adventure Sports", description: "Thrill-seeking activities and outdoor adventures", icon: MountainSnow, color: "#3B82F6", gradient: "from-blue-500 to-indigo-500", threadCount: 876, postCount: 6543 },
  { id: "7", name: "Budget Travel", description: "Smart ways to explore the world on any budget", icon: Globe, color: "#F59E0B", gradient: "from-yellow-500 to-orange-500", threadCount: 2109, postCount: 17892 },
  { id: "8", name: "Solo Travel", description: "Stories and tips for independent explorers", icon: Plane, color: "#EC4899", gradient: "from-pink-500 to-rose-500", threadCount: 1234, postCount: 9876 },
  { id: "9", name: "Cultural Exchange", description: "Learn about traditions and local customs", icon: Globe, color: "#6366F1", gradient: "from-indigo-500 to-blue-500", threadCount: 765, postCount: 5432 },
];

const threads: Thread[] = [
  {
    id: "1",
    title: "The Ultimate Guide to Japan's Cherry Blossom Season 2024",
    excerpt: "Planning your trip to Japan during sakura season? Here's everything you need to know about timing, locations, and hidden gems...",
    author: users[0],
    category: categories[0],
    createdAt: "2 hours ago",
    lastActivity: "15 min ago",
    views: 3421,
    replies: 89,
    votes: 256,
    isPinned: true,
    isHot: true,
    tags: ["Japan", "Cherry Blossom", "Spring Travel"],
    hasMedia: true,
  },
  {
    id: "2",
    title: "Hidden Beach paradises in Southeast Asia that aren't touristy",
    excerpt: "After 3 months traveling through Thailand, Vietnam, and Indonesia, I found some incredible secluded beaches...",
    author: users[2],
    category: categories[0],
    createdAt: "5 hours ago",
    lastActivity: "1 hour ago",
    views: 1876,
    replies: 67,
    votes: 189,
    tags: ["Beaches", "Southeast Asia", "Hidden Gems"],
    hasMedia: true,
  },
  {
    id: "3",
    title: "Packing light: My 15-day Europe capsule wardrobe",
    excerpt: "Everyone said it couldn't be done, but I traveled through 6 European countries with just a 40L backpack. Here's my complete packing list...",
    author: users[4],
    category: categories[1],
    createdAt: "8 hours ago",
    lastActivity: "2 hours ago",
    views: 2543,
    replies: 124,
    votes: 312,
    isHot: true,
    tags: ["Packing Tips", "Europe", "Minimalist"],
    hasMedia: true,
  },
  {
    id: "4",
    title: "Sony A7IV vs Canon R6 II for travel photography?",
    excerpt: "I'm upgrading from APS-C and can't decide between these two powerhouse mirrorless cameras. Looking for real-world experience...",
    author: users[1],
    category: categories[2],
    createdAt: "12 hours ago",
    lastActivity: "3 hours ago",
    views: 987,
    replies: 45,
    votes: 67,
    tags: ["Camera Gear", "Photography", "Sony", "Canon"],
  },
  {
    id: "5",
    title: "Best street food markets in Mexico City - A complete guide",
    excerpt: "From tacos al pastor to churros, here's my comprehensive guide to experiencing authentic Mexican cuisine...",
    author: users[3],
    category: categories[4],
    createdAt: "1 day ago",
    lastActivity: "4 hours ago",
    views: 1654,
    replies: 78,
    votes: 198,
    isHot: true,
    tags: ["Mexico", "Street Food", "Food Guide"],
    hasMedia: true,
  },
];

const trendingTags: TrendingTag[] = [
  { name: "Japan 2024", count: 2341, trend: "up" },
  { name: "Solo Travel", count: 1876, trend: "up" },
  { name: "Budget Tips", count: 1543, trend: "new" },
  { name: "Photography", count: 1234, trend: "stable" },
  { name: "Beach Destinations", count: 987, trend: "up" },
  { name: "Backpacking", count: 876, trend: "stable" },
];

const notifications: Notification[] = [
  { id: "1", type: "reply", message: "Mike Chen replied to your thread", time: "5 min ago", isRead: false, avatar: users[0].avatar },
  { id: "2", type: "like", message: "Jane Williams liked your post", time: "1 hour ago", isRead: false, avatar: users[1].avatar },
  { id: "3", type: "mention", message: "You were mentioned in 'Japan Guide'", time: "3 hours ago", isRead: true, avatar: users[2].avatar },
];

// ============================================================================
// CONTEXT
// ============================================================================

interface ThemeContextType {
  colors: typeof colors;
  spacing: typeof spacing;
  borderRadius: typeof borderRadius;
  shadows: typeof shadows;
}

const ThemeContext = createContext<ThemeContextType>({
  colors,
  spacing,
  borderRadius,
  shadows,
});

const useTheme = () => useContext(ThemeContext);

// ============================================================================
// UI COMPONENTS
// ============================================================================

// Button Component
interface ButtonProps {
  variant?: "primary" | "secondary" | "ghost" | "danger" | "accent";
  size?: "sm" | "md" | "lg";
  children: ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  icon?: ReactNode;
  className?: string;
  fullWidth?: boolean;
}

export function Button({
  variant = "primary",
  size = "md",
  children,
  onClick,
  disabled = false,
  icon,
  className = "",
  fullWidth = false,
}: ButtonProps) {
  const baseStyles = "inline-flex items-center justify-center font-medium transition-all duration-200 ease-out rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2";
  
  const variants = {
    primary: "bg-teal-600 text-white hover:bg-teal-700 focus:ring-teal-500 shadow-md hover:shadow-lg",
    secondary: "bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 hover:border-slate-300 focus:ring-slate-500",
    ghost: "text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-500",
    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
    accent: "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500 shadow-md hover:shadow-lg",
  };

  const sizes = {
    sm: "px-3 py-1.5 text-sm gap-1.5",
    md: "px-4 py-2 text-sm gap-2",
    lg: "px-6 py-3 text-base gap-2",
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${fullWidth ? "w-full" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
    >
      {icon}
      {children}
    </button>
  );
}

// Card Component
interface CardProps {
  variant?: "elevated" | "outlined" | "gradient";
  gradientColors?: string;
  children: ReactNode;
  className?: string;
  onClick?: () => void;
}

export function Card({ variant = "elevated", gradientColors = "from-teal-500 to-cyan-500", children, className = "", onClick }: CardProps) {
  const variants = {
    elevated: "bg-white shadow-md hover:shadow-lg transition-shadow duration-200",
    outlined: "bg-white border border-slate-200 hover:border-slate-300 transition-colors duration-200",
    gradient: "",
  };

  const gradientStyle = variant === "gradient" ? `bg-gradient-to-br ${gradientColors}` : "";

  return (
    <div
      onClick={onClick}
      className={`rounded-xl overflow-hidden ${variants[variant]} ${gradientStyle} ${onClick ? "cursor-pointer" : ""} ${className}`}
    >
      {variant !== "gradient" ? children : null}
      {variant === "gradient" && (
        <div className={gradientStyle}>
          {children}
        </div>
      )}
    </div>
  );
}

// Badge Component
interface BadgeProps {
  variant?: "default" | "primary" | "accent" | "success" | "warning" | "error" | "category";
  size?: "sm" | "md";
  children: ReactNode;
  categoryColor?: string;
}

export function Badge({ variant = "default", size = "sm", children, categoryColor }: BadgeProps) {
  const variants = {
    default: "bg-slate-100 text-slate-700",
    primary: "bg-teal-100 text-teal-700",
    accent: "bg-orange-100 text-orange-700",
    success: "bg-green-100 text-green-700",
    warning: "bg-yellow-100 text-yellow-700",
    error: "bg-red-100 text-red-700",
    category: "",
  };

  const customStyle = variant === "category" && categoryColor ? { backgroundColor: `${categoryColor}20`, color: categoryColor } : {};

  return (
    <span
      className={`inline-flex items-center font-medium rounded-full ${size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm"} ${variants[variant]}`}
      style={customStyle}
    >
      {children}
    </span>
  );
}

// Avatar Component
interface AvatarProps {
  src?: string;
  alt?: string;
  size?: "sm" | "md" | "lg" | "xl";
  isOnline?: boolean;
  showStatus?: boolean;
  className?: string;
}

export function Avatar({ src, alt = "User", size = "md", isOnline = false, showStatus = false, className = "" }: AvatarProps) {
  const sizes = {
    sm: "w-8 h-8",
    md: "w-10 h-10",
    lg: "w-12 h-12",
    xl: "w-16 h-16",
  };

  return (
    <div className={`relative ${className}`}>
      {src ? (
        <img src={src} alt={alt} className={`${sizes[size]} rounded-full object-cover ring-2 ring-white shadow-sm`} />
      ) : (
        <div className={`${sizes[size]} rounded-full bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center text-white font-semibold`}>
          {alt.charAt(0).toUpperCase()}
        </div>
      )}
      {showStatus && (
        <span className={`absolute bottom-0 right-0 block rounded-full ring-2 ring-white ${size === "sm" ? "w-2 h-2" : "w-3 h-3"} ${isOnline ? "bg-green-500" : "bg-slate-400"}`} />
      )}
    </div>
  );
}

// Input Component
interface InputProps {
  variant?: "standard" | "search";
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
  icon?: ReactNode;
  className?: string;
}

export function Input({ variant = "standard", placeholder = "", value = "", onChange, icon, className = "" }: InputProps) {
  const baseStyles = "w-full px-4 py-2.5 rounded-lg border border-slate-200 bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200";
  
  return (
    <div className={`relative ${className}`}>
      {icon && <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">{icon}</div>}
      <input
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        className={`${baseStyles} ${icon ? "pl-10" : ""}`}
      />
    </div>
  );
}

// Vote Button Component
interface VoteButtonProps {
  count: number;
  userVote?: "up" | "down" | null;
  onVote: (direction: "up" | "down") => void;
  vertical?: boolean;
}

export function VoteButton({ count, userVote = null, onVote, vertical = true }: VoteButtonProps) {
  return (
    <div className={`flex ${vertical ? "flex-col" : "flex-row"} items-center gap-1`}>
      <button
        onClick={() => onVote("up")}
        className={`p-1.5 rounded-md transition-colors duration-200 ${userVote === "up" ? "bg-teal-100 text-teal-600" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`}
      >
        <ArrowUp className="w-4 h-4" />
      </button>
      <span className={`font-semibold text-sm ${userVote === "up" ? "text-teal-600" : userVote === "down" ? "text-red-500" : "text-slate-600"}`}>
        {count}
      </span>
      <button
        onClick={() => onVote("down")}
        className={`p-1.5 rounded-md transition-colors duration-200 ${userVote === "down" ? "bg-red-100 text-red-500" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`}
      >
        <ArrowDown className="w-4 h-4" />
      </button>
    </div>
  );
}

// Toast Component
interface ToastProps {
  message: string;
  type?: "success" | "error" | "info" | "warning";
  onClose: () => void;
}

export function Toast({ message, type = "info", onClose }: ToastProps) {
  const typeStyles = {
    success: "bg-green-500",
    error: "bg-red-500",
    info: "bg-blue-500",
    warning: "bg-yellow-500",
  };

  return (
    <div className={`fixed bottom-4 right-4 ${typeStyles[type]} text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-slide-up z-50`}>
      <span>{message}</span>
      <button onClick={onClose} className="hover:bg-white/20 p-1 rounded">
        <X className="w-4 h-4" />
      </button>
    </div>
  );
}

// ============================================================================
// LAYOUT COMPONENTS
// ============================================================================

// Header Component
export function Header({ onMenuToggle }: { onMenuToggle: () => void }) {
  const [showNotifications, setShowNotifications] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");

  return (
    <header className="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo & Mobile Menu */}
          <div className="flex items-center gap-4">
            <button onClick={onMenuToggle} className="lg:hidden p-2 text-slate-500 hover:text-slate-700">
              <Menu className="w-6 h-6" />
            </button>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-500 to-cyan-500 flex items-center justify-center shadow-md">
                <Compass className="w-5 h-5 text-white" />
              </div>
              <div className="hidden sm:block">
                <h1 className="text-xl font-bold text-slate-900">ReallyWorld</h1>
                <p className="text-xs text-slate-500 -mt-0.5">Explore • Share • Connect</p>
              </div>
            </div>
          </div>

          {/* Search Bar */}
          <div className="hidden md:flex flex-1 max-w-xl mx-8">
            <div className="relative w-full">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
              <input
                type="text"
                placeholder="Search destinations, tips, users..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-full text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:bg-white focus:border-transparent transition-all duration-200"
              />
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" icon={<Camera2 className="w-5 h-5" />} className="hidden sm:flex">
              Post
            </Button>
            
            {/* Notifications */}
            <div className="relative">
              <button
                onClick={() => setShowNotifications(!showNotifications)}
                className="relative p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-full transition-colors duration-200"
              >
                <Bell className="w-5 h-5" />
                <span className="absolute top-1 right-1 w-2 h-2 bg-orange-500 rounded-full" />
              </button>
              
              {showNotifications && (
                <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden z-50">
                  <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
                    <h3 className="font-semibold text-slate-900">Notifications</h3>
                    <button className="text-sm text-teal-600 hover:text-teal-700">Mark all read</button>
                  </div>
                  <div className="max-h-80 overflow-y-auto">
                    {notifications.map((notif) => (
                      <div key={notif.id} className={`px-4 py-3 hover:bg-slate-50 border-b border-slate-100 last:border-0 ${!notif.isRead ? "bg-teal-50/50" : ""}`}>
                        <div className="flex gap-3">
                          {notif.avatar && <Avatar src={notif.avatar} size="sm" />}
                          <div className="flex-1 min-w-0">
                            <p className="text-sm text-slate-700">{notif.message}</p>
                            <p className="text-xs text-slate-400 mt-1">{notif.time}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* User Menu */}
            <div className="relative">
              <button
                onClick={() => setShowUserMenu(!showUserMenu)}
                className="flex items-center gap-2 p-1.5 hover:bg-slate-100 rounded-full transition-colors duration-200"
              >
                <Avatar src={currentUser.avatar} alt={currentUser.displayName} size="sm" showStatus isOnline />
              </button>
              
              {showUserMenu && (
                <div className="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden z-50">
                  <div className="px-4 py-3 border-b border-slate-100">
                    <p className="font-semibold text-slate-900">{currentUser.displayName}</p>
                    <p className="text-sm text-slate-500">@{currentUser.username}</p>
                  </div>
                  <div className="py-2">
                    <button className="w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-3">
                      <UserPlus className="w-4 h-4" /> View Profile
                    </button>
                    <button className="w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-3">
                      <Bookmark className="w-4 h-4" /> Saved Posts
                    </button>
                    <button className="w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-50 flex items-center gap-3">
                      <Settings className="w-4 h-4" /> Settings
                    </button>
                  </div>
                  <div className="border-t border-slate-100 py-2">
                    <button className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-3">
                      <LogOut className="w-4 h-4" /> Sign Out
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Mobile Search */}
      <div className="md:hidden px-4 pb-3">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
          <input
            type="text"
            placeholder="Search..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-12 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-full text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500"
          />
        </div>
      </div>
    </header>
  );
}

// Sidebar Component
export function Sidebar({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
  const quickCategories = [
    { icon: MapPin, label: "Destinations", color: "#0D9488" },
    { icon: Compass, label: "Tips & Advice", color: "#F97316" },
    { icon: Camera, label: "Photography", color: "#8B5CF6" },
    { icon: Utensils, label: "Food & Dining", color: "#EF4444" },
  ];

  return (
    <>
      {/* Mobile Overlay */}
      {isOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={onClose} />
      )}
      
      {/* Sidebar */}
      <aside className={`fixed lg:sticky top-0 lg:top-16 h-screen lg:h-[calc(100vh-4rem)] w-72 bg-white border-r border-slate-200 overflow-y-auto z-50 lg:z-0 transform transition-transform duration-300 lg:translate-x-0 ${isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}`}>
        <div className="p-6">
          {/* Quick Actions */}
          <div className="mb-6">
            <Button variant="primary" fullWidth icon={<Plus className="w-4 h-4" />}>
              New Thread
            </Button>
          </div>

          {/* Quick Categories */}
          <div className="mb-8">
            <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Quick Access</h3>
            <div className="space-y-1">
              {quickCategories.map((cat) => (
                <button
                  key={cat.label}
                  className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-colors duration-200 group"
                >
                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ backgroundColor: `${cat.color}15` }}>
                    <cat.icon className="w-4 h-4" style={{ color: cat.color }} />
                  </div>
                  <span className="font-medium">{cat.label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Trending Tags */}
          <div className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <Trending className="w-4 h-4 text-orange-500" />
              <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Trending Tags</h3>
            </div>
            <div className="flex flex-wrap gap-2">
              {trendingTags.map((tag) => (
                <span
                  key={tag.name}
                  className="inline-flex items-center gap-1 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-full text-sm hover:bg-teal-100 hover:text-teal-700 cursor-pointer transition-colors duration-200"
                >
                  #{tag.name}
                  {tag.trend === "up" && <TrendingUp className="w-3 h-3 text-green-500" />}
                  {tag.trend === "new" && <span className="w-1.5 h-1.5 bg-blue-500 rounded-full" />}
                </span>
              ))}
            </div>
          </div>

          {/* Active Users */}
          <div className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <Users className="w-4 h-4 text-teal-500" />
              <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Active Travelers</h3>
            </div>
            <div className="space-y-3">
              {users.slice(0, 5).map((user) => (
                <div key={user.id} className="flex items-center gap-3">
                  <Avatar src={user.avatar} alt={user.displayName} size="sm" showStatus isOnline={user.isOnline} />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-slate-900 truncate">{user.displayName}</p>
                    <p className="text-xs text-slate-500">@{user.username}</p>
                  </div>
                  <Badge variant="success" size="sm">Online</Badge>
                </div>
              ))}
            </div>
          </div>

          {/* Stats */}
          <div className="bg-gradient-to-br from-slate-50 to-slate-100 rounded-xl p-4">
            <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Community Stats</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-2xl font-bold text-slate-900">24.5K</p>
                <p className="text-xs text-slate-500">Members</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-slate-900">156</p>
                <p className="text-xs text-slate-500">Online</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-slate-900">8.2K</p>
                <p className="text-xs text-slate-500">Threads</p>
              </div>
              <div>
                <p className="text-2xl font-bold text-slate-900">62K</p>
                <p className="text-xs text-slate-500">Posts</p>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </>
  );
}

// Navigation Component
export function Navigation() {
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const navItems = [
    {
      label: "Explore",
      items: [
        { label: "Destinations", icon: MapPin, description: "Discover amazing places" },
        { label: "Adventures", icon: Mountain, description: "Outdoor activities" },
        { label: "Cultural", icon: Globe, description: "Local experiences" },
        { label: "Beaches", icon: Waves, description: "Coastal getaways" },
      ],
    },
    {
      label: "Community",
      items: [
        { label: "Forums", icon: MessageCircle, description: "Join discussions" },
        { label: "Events", icon: Calendar, description: "Meetups & gatherings" },
        { label: "Members", icon: Users, description: "Connect with travelers" },
        { label: "Groups", icon: Award, description: "Special interest clubs" },
      ],
    },
    { label: "Resources", items: [] },
  ];

  return (
    <nav className="hidden lg:block border-b border-slate-100 bg-white">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-12">
          <div className="flex items-center gap-1">
            <button className="px-4 py-2 text-sm font-medium text-teal-600 flex items-center gap-2 bg-teal-50 rounded-lg">
              <Home className="w-4 h-4" />
              Home
            </button>
            {navItems.map((item) => (
              <div key={item.label} className="relative">
                <button
                  onMouseEnter={() => item.items.length > 0 && setActiveDropdown(item.label)}
                  onMouseLeave={() => setActiveDropdown(null)}
                  className="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg flex items-center gap-1 transition-colors duration-200"
                >
                  {item.label}
                  {item.items.length > 0 && <ChevronDown className="w-4 h-4" />}
                </button>
                
                {activeDropdown === item.label && item.items.length > 0 && (
                  <div
                    className="absolute top-full left-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden"
                    onMouseEnter={() => setActiveDropdown(item.label)}
                    onMouseLeave={() => setActiveDropdown(null)}
                  >
                    <div className="p-2">
                      {item.items.map((subItem) => (
                        <button
                          key={subItem.label}
                          className="w-full px-4 py-3 text-left rounded-lg hover:bg-slate-50 group flex items-start gap-3 transition-colors duration-200"
                        >
                          <div className="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center group-hover:bg-teal-100 transition-colors duration-200">
                            <subItem.icon className="w-5 h-5 text-slate-500 group-hover:text-teal-600" />
                          </div>
                          <div>
                            <p className="font-medium text-slate-900">{subItem.label}</p>
                            <p className="text-sm text-slate-500">{subItem.description}</p>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
          
          <div className="flex items-center gap-4">
            <button className="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors duration-200">
              <Bookmark className="w-5 h-5" />
            </button>
            <button className="p-2 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-colors duration-200">
              <Zap className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ============================================================================
// FEATURE COMPONENTS
// ============================================================================

// Category Card
interface CategoryCardProps {
  category: Category;
  onClick?: () => void;
}

export function CategoryCard({ category, onClick }: CategoryCardProps) {
  const Icon = category.icon;
  
  return (
    <div
      onClick={onClick}
      className="group relative overflow-hidden rounded-xl bg-white border border-slate-200 hover:border-transparent hover:shadow-xl transition-all duration-300 cursor-pointer"
    >
      {/* Gradient Background */}
      <div className={`absolute inset-0 bg-gradient-to-br ${category.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
      
      <div className="relative p-5">
        <div className="flex items-start gap-4">
          <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${category.gradient} flex items-center justify-center shadow-lg group-hover:bg-white/20 transition-colors duration-300`}>
            <Icon className="w-6 h-6 text-white" />
          </div>
          
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-slate-900 group-hover:text-white transition-colors duration-300">{category.name}</h3>
            <p className="text-sm text-slate-500 group-hover:text-white/80 mt-1 line-clamp-2">{category.description}</p>
          </div>
        </div>
        
        <div className="mt-4 pt-4 border-t border-slate-100 group-hover:border-white/20 flex items-center justify-between">
          <div className="flex items-center gap-4 text-sm text-slate-500 group-hover:text-white/80">
            <span className="flex items-center gap-1">
              <MessageCircle className="w-4 h-4" />
              {category.threadCount.toLocaleString()} threads
            </span>
          </div>
          <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-white group-hover:translate-x-1 transition-all duration-300" />
        </div>
      </div>
    </div>
  );
}

// Thread Preview
interface ThreadPreviewProps {
  thread: Thread;
  onClick?: () => void;
  variant?: "default" | "compact" | "featured";
}

export function ThreadPreview({ thread, onClick, variant = "default" }: ThreadPreviewProps) {
  const [vote, setVote] = useState<"up" | "down" | null>(null);
  const [localVotes, setLocalVotes] = useState(thread.votes);
  
  const handleVote = (direction: "up" | "down") => {
    if (vote === direction) {
      setVote(null);
      setLocalVotes(thread.votes);
    } else {
      setVote(direction);
      setLocalVotes(direction === "up" ? thread.votes + 1 : thread.votes - 1);
    }
  };

  if (variant === "compact") {
    return (
      <div onClick={onClick} className="flex items-center gap-4 p-4 bg-white rounded-xl border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all duration-200 cursor-pointer">
        <Avatar src={thread.author.avatar} alt={thread.author.displayName} size="lg" showStatus isOnline={thread.author.isOnline} />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            {thread.isPinned && <Badge variant="accent" size="sm">&#128204; Pinned</Badge>}
            {thread.isHot && <Badge variant="error" size="sm">&#128293; Hot</Badge>}
          </div>
          <h4 className="font-medium text-slate-900 truncate">{thread.title}</h4>
          <div className="flex items-center gap-3 mt-2 text-xs text-slate-500">
            <span>{thread.author.displayName}</span>
            <span>•</span>
            <span>{thread.createdAt}</span>
          </div>
        </div>
        <div className="flex items-center gap-4 text-sm text-slate-500">
          <span className="flex items-center gap-1">
            <MessageCircle className="w-4 h-4" />
            {thread.replies}
          </span>
          <span className="flex items-center gap-1">
            <Eye className="w-4 h-4" />
            {thread.views}
          </span>
        </div>
      </div>
    );
  }

  return (
    <div onClick={onClick} className="bg-white rounded-xl border border-slate-200 hover:border-teal-200 hover:shadow-lg transition-all duration-200 cursor-pointer overflow-hidden">
      {/* Media indicator */}
      {thread.hasMedia && (
        <div className="h-32 bg-gradient-to-br from-slate-100 to-slate-200 relative">
          <div className="absolute inset-0 flex items-center justify-center">
            <Camera className="w-8 h-8 text-slate-400" />
          </div>
          <div className="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
            +3 images
          </div>
        </div>
      )}
      
      <div className="p-5">
        <div className="flex items-start gap-4">
          <div className="hidden sm:block">
            <VoteButton count={localVotes} userVote={vote} onVote={handleVote} />
          </div>
          
          <div className="flex-1 min-w-0">
            {/* Badges */}
            <div className="flex items-center gap-2 mb-2">
              <Badge variant="category" categoryColor={thread.category.color}>{thread.category.name}</Badge>
              {thread.isPinned && <Badge variant="accent" size="sm">&#128204; Pinned</Badge>}
              {thread.isHot && <Badge variant="error" size="sm">&#128293; Hot</Badge>}
            </div>
            
            {/* Title */}
            <h3 className="font-semibold text-slate-900 text-lg leading-snug mb-2 hover:text-teal-600 transition-colors duration-200">
              {thread.title}
            </h3>
            
            {/* Excerpt */}
            <p className="text-sm text-slate-600 line-clamp-2 mb-4">{thread.excerpt}</p>
            
            {/* Tags */}
            <div className="flex flex-wrap gap-2 mb-4">
              {thread.tags.map((tag) => (
                <span key={tag} className="text-xs text-teal-600 bg-teal-50 px-2 py-1 rounded-full">
                  #{tag}
                </span>
              ))}
            </div>
            
            {/* Meta */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Avatar src={thread.author.avatar} alt={thread.author.displayName} size="sm" />
                <div>
                  <p className="text-sm font-medium text-slate-900">{thread.author.displayName}</p>
                  <p className="text-xs text-slate-500">{thread.createdAt}</p>
                </div>
              </div>
              
              <div className="flex items-center gap-4 text-sm text-slate-500">
                <span className="flex items-center gap-1 hover:text-teal-600 transition-colors">
                  <MessageCircle className="w-4 h-4" />
                  {thread.replies}
                </span>
                <span className="flex items-center gap-1 hover:text-teal-600 transition-colors">
                  <Eye className="w-4 h-4" />
                  {thread.views}
                </span>
                <span className="flex items-center gap-1 hover:text-teal-600 transition-colors">
                  <Heart className="w-4 h-4" />
                  {localVotes}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Featured Thread Banner
interface FeaturedThreadProps {
  thread: Thread;
  onClick?: () => void;
}

export function FeaturedThread({ thread, onClick }: FeaturedThreadProps) {
  return (
    <div
      onClick={onClick}
      className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-teal-600 via-cyan-600 to-blue-600 cursor-pointer group"
    >
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 right-0 w-96 h-96 bg-white rounded-full -translate-y-1/2 translate-x-1/2" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-white rounded-full translate-y-1/2 -translate-x-1/2" />
      </div>
      
      <div className="relative p-8 md:p-12">
        <div className="flex items-center gap-2 mb-4">
          <Badge variant="default" size="md" className="bg-white/20 text-white backdrop-blur-sm">&#10024; Featured</Badge>
          <Badge variant="default" size="md" className="bg-white/20 text-white backdrop-blur-sm">&#128293; Trending</Badge>
        </div>
        
        <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 group-hover:text-cyan-100 transition-colors duration-300">
          {thread.title}
        </h2>
        
        <p className="text-white/80 text-lg mb-6 max-w-2xl">{thread.excerpt}</p>
        
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex items-center gap-3">
            <Avatar src={thread.author.avatar} alt={thread.author.displayName} size="md" className="ring-2 ring-white/30" />
            <div>
              <p className="text-white font-medium">{thread.author.displayName}</p>
              <p className="text-white/60 text-sm">{thread.createdAt}</p>
            </div>
          </div>
          
          <div className="flex items-center gap-6 text-white/80">
            <span className="flex items-center gap-2">
              <MessageCircle className="w-5 h-5" />
              {thread.replies} replies
            </span>
            <span className="flex items-center gap-2">
              <Eye className="w-5 h-5" />
              {thread.views.toLocaleString()} views
            </span>
          </div>
        </div>
        
        <div className="mt-6 flex items-center gap-3 text-white font-medium group-hover:gap-4 transition-all duration-300">
          Read Full Guide
          <ChevronRight className="w-5 h-5" />
        </div>
      </div>
    </div>
  );
}

// User Card
interface UserCardProps {
  user: User;
  variant?: "default" | "compact" | "list";
}

export function UserCard({ user, variant = "default" }: UserCardProps) {
  if (variant === "compact") {
    return (
      <div className="flex items-center gap-3 p-3 rounded-lg hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
        <Avatar src={user.avatar} alt={user.displayName} size="md" showStatus isOnline={user.isOnline} />
        <div className="flex-1 min-w-0">
          <p className="font-medium text-slate-900">{user.displayName}</p>
          <p className="text-sm text-slate-500">@{user.username}</p>
        </div>
        <Button variant="ghost" size="sm" icon={<UserPlus className="w-4 h-4" />}>
          Follow
        </Button>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-5 hover:border-teal-200 hover:shadow-lg transition-all duration-200">
      <div className="flex flex-col items-center text-center">
        <Avatar src={user.avatar} alt={user.displayName} size="xl" showStatus isOnline={user.isOnline} />
        <h3 className="font-semibold text-slate-900 mt-3">{user.displayName}</h3>
        <p className="text-sm text-slate-500">@{user.username}</p>
        {user.role && (
          <Badge variant={user.role === "admin" ? "error" : user.role === "moderator" ? "primary" : "default"} size="sm" className="mt-2 capitalize">
            {user.role}
          </Badge>
        )}
        <div className="flex items-center gap-4 mt-4 text-sm text-slate-500">
          <span>124 posts</span>
          <span>•</span>
          <span>2.3K followers</span>
        </div>
        <Button variant="secondary" size="sm" fullWidth className="mt-4">
          View Profile
        </Button>
      </div>
    </div>
  );
}

// Pagination Component
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  const getPageNumbers = () => {
    const pages: (number | string)[] = [];
    if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) pages.push(i);
    } else {
      if (currentPage <= 3) {
        pages.push(1, 2, 3, 4, "...", totalPages);
      } else if (currentPage >= totalPages - 2) {
        pages.push(1, "...", totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
      } else {
        pages.push(1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages);
      }
    }
    return pages;
  };

  return (
    <div className="flex items-center justify-center gap-2">
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="px-3 py-2 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
      >
        <ChevronRight className="w-4 h-4 rotate-180" />
      </button>
      
      {getPageNumbers().map((page, index) => (
        <button
          key={index}
          onClick={() => typeof page === "number" && onPageChange(page)}
          disabled={page === "..."}
          className={`w-10 h-10 rounded-lg font-medium transition-colors duration-200 ${
            page === currentPage
              ? "bg-teal-600 text-white"
              : page === "..."
              ? "text-slate-400 cursor-default"
              : "border border-slate-200 text-slate-600 hover:bg-slate-50"
          }`}
        >
          {page}
        </button>
      ))}
      
      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="px-3 py-2 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
      >
        <ChevronRight className="w-4 h-4" />
      </button>
    </div>
  );
}

// ============================================================================
// MODAL COMPONENT
// ============================================================================

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
}

export function Modal({ isOpen, onClose, title, children, size = "md" }: ModalProps) {
  if (!isOpen) return null;

  const sizes = {
    sm: "max-w-md",
    md: "max-w-lg",
    lg: "max-w-2xl",
    xl: "max-w-4xl",
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onClick={onClose} />
      
      {/* Modal */}
      <div className="flex min-h-full items-center justify-center p-4">
        <div className={`relative w-full ${sizes[size]} bg-white rounded-2xl shadow-2xl transform transition-all duration-300`}>
          {/* Header */}
          <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
            <h2 className="text-xl font-semibold text-slate-900">{title}</h2>
            <button
              onClick={onClose}
              className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors duration-200"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
          
          {/* Content */}
          <div className="p-6">{children}</div>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// MAIN APPLICATION
// ============================================================================

export default function ReallyWorldForum() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [currentPage, setCurrentPage] = useState(1);
  const [showNewThreadModal, setShowNewThreadModal] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" | "warning" } | null>(null);

  const showToast = (message: string, type: "success" | "error" | "info" | "warning" = "info") => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 4000);
  };

  return (
    <ThemeContext.Provider value={{ colors, spacing, borderRadius, shadows }}>
      <div className="min-h-screen bg-slate-50">
        {/* Header */}
        <Header onMenuToggle={() => setSidebarOpen(!sidebarOpen)} />
        
        {/* Navigation */}
        <Navigation />
        
        {/* Main Layout */}
        <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex gap-6">
            {/* Sidebar */}
            <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
            
            {/* Main Content */}
            <main className="flex-1 min-w-0">
              {/* Page Header */}
              <div className="mb-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h1 className="text-2xl font-bold text-slate-900">Explore Communities</h1>
                    <p className="text-slate-500 mt-1">Discover travel stories and connect with fellow wanderers</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant={viewMode === "grid" ? "primary" : "secondary"}
                      size="sm"
                      icon={<Grid className="w-4 h-4" />}
                      onClick={() => setViewMode("grid")}
                    />
                    <Button
                      variant={viewMode === "list" ? "primary" : "secondary"}
                      size="sm"
                      icon={<List className="w-4 h-4" />}
                      onClick={() => setViewMode("list")}
                    />
                  </div>
                </div>
                
                {/* Filters */}
                <div className="flex items-center gap-3 flex-wrap">
                  <Button variant="secondary" size="sm" icon={<Filter className="w-4 h-4" />}>
                    Filters
                  </Button>
                  <button className="px-3 py-1.5 text-sm font-medium text-teal-600 bg-teal-50 rounded-full">All Categories</button>
                  <button className="px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-full transition-colors">Destinations</button>
                  <button className="px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-full transition-colors">Travel Tips</button>
                  <button className="px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-full transition-colors">Photography</button>
                </div>
              </div>

              {/* Featured Thread */}
              <section className="mb-8">
                <FeaturedThread thread={threads[0]} onClick={() => showToast("Opening featured thread...", "info")} />
              </section>

              {/* Categories Grid */}
              <section className="mb-8">
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-lg font-semibold text-slate-900">Browse Categories</h2>
                  <Button variant="ghost" size="sm" onClick={() => showToast("View all categories", "info")}>
                    View All
                    <ChevronRight className="w-4 h-4" />
                  </Button>
                </div>
                
                {viewMode === "grid" ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {categories.map((category) => (
                      <CategoryCard
                        key={category.id}
                        category={category}
                        onClick={() => showToast(`Opening ${category.name} category`, "info")}
                      />
                    ))}
                  </div>
                ) : (
                  <div className="space-y-3">
                    {categories.map((category) => (
                      <div
                        key={category.id}
                        className="flex items-center gap-4 p-4 bg-white rounded-xl border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all duration-200 cursor-pointer"
                        onClick={() => showToast(`Opening ${category.name} category`, "info")}
                      >
                        <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${category.gradient} flex items-center justify-center`}>
                          <category.icon className="w-6 h-6 text-white" />
                        </div>
                        <div className="flex-1">
                          <h3 className="font-semibold text-slate-900">{category.name}</h3>
                          <p className="text-sm text-slate-500">{category.description}</p>
                        </div>
                        <div className="text-right text-sm text-slate-500">
                          <p>{category.threadCount.toLocaleString()} threads</p>
                          <p>{category.postCount.toLocaleString()} posts</p>
                        </div>
                        <ChevronRight className="w-5 h-5 text-slate-400" />
                      </div>
                    ))}
                  </div>
                )}
              </section>

              {/* Recent Threads */}
              <section>
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-lg font-semibold text-slate-900">Recent Discussions</h2>
                  <Button variant="primary" size="sm" icon={<Plus className="w-4 h-4" />} onClick={() => setShowNewThreadModal(true)}>
                    New Thread
                  </Button>
                </div>
                
                <div className="space-y-4">
                  {threads.map((thread) => (
                    <ThreadPreview
                      key={thread.id}
                      thread={thread}
                      onClick={() => showToast("Opening thread...", "info")}
                    />
                  ))}
                </div>
                
                {/* Pagination */}
                <div className="mt-6">
                  <Pagination
                    currentPage={currentPage}
                    totalPages={12}
                    onPageChange={setCurrentPage}
                  />
                </div>
              </section>

              {/* Stats Section */}
              <section className="mt-8 bg-gradient


Отлично! Я создал для вас полноценный конфиг дизайна форума в стиле **ReallyWorld** — современной платформы для путешественников и сообщества.

## &#128203; Что было создано:

### &#127912; Дизайн-система (Design Tokens)
- **Цветовая палитра**: бирюзовый (#0D9488), песчаный (#F5F0E8), коралловый акцент (#F97316), тёмный режим (#1E293B)
- **Типографика**: Inter для интерфейса, Playfair Display для заголовков
- **Отступы и радиусы**: система на базе 4px, закругления 8-16px
- **Тени**: многослойные, мягкие с эффектом свечения

### &#129513; UI-компоненты
- **Button** — 5 вариантов (primary, secondary, ghost, danger, accent)
- **Card** — 3 стиля (elevated, outlined, gradient)
- **Badge** — система меток с цветами категорий
- **Avatar** — с индикатором онлайн-статуса
- **Input** — стандартное поле и поисковое
- **VoteButton** — голосование вверх/вниз
- **Toast** — уведомления

### &#128208; Layout-компоненты
- **Header** — логотип, поиск, уведомления, меню пользователя
- **Sidebar** — быстрый доступ, тренды, активные пользователи, статистика
- **Navigation** — мега-меню с категориями

### &#127919; Функциональные компоненты
- **CategoryCard** — карточки категорий с градиентами
- **ThreadPreview** — превью темы с голосованием и метаданными
- **FeaturedThread** — баннер избранной темы
- **UserCard** — профили пользователей
- **Pagination** — пагинация с переходами
- **Modal** — модальные окна с backdrop blur

Хотите, чтобы я внёс какие-то изменения — например, добавил другие цвета, изменил структуру или адаптировал под конкретную тематику вашего форума? Могу также экспортировать конфиг в формате CSS variables или JSON для использования в других проектах.