88:I[903690,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2g0oc9k27bg22.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/143w7nhyqckcs.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2g0oc9k27bg22.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/143w7nhyqckcs.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"SWRDataProvider"] 8b:[] 8c:[["b_BhlZOD4I6wu",null],["b_4C4EUfqd8VQ",null],["b_5icn4flozux",null],["b_19tpnv7llAa",null],["b_fpyxrRqsZHr",null],["b_pZgG50lUC2f",null]] 8d:[["b_BhlZOD4I6wu",{"templateVersionId":null,"templateCanonId":null}],["b_4C4EUfqd8VQ",{"templateVersionId":null,"templateCanonId":null}],["b_5icn4flozux",{"templateVersionId":null,"templateCanonId":null}],["b_19tpnv7llAa",{"templateVersionId":null,"templateCanonId":null}],["b_fpyxrRqsZHr",{"templateVersionId":null,"templateCanonId":null}],["b_pZgG50lUC2f",{"templateVersionId":null,"templateCanonId":null}]] 8e:[["b_tpmr9pZ9rfz","$D2026-01-15T15:13:59.726Z"],["b_uP5NY2HMWBw","$D2026-01-20T07:54:01.688Z"],["b_IC3eS1OMDh4","$D2026-01-20T07:56:19.604Z"],["b_KkJx53O6UnE","$D2026-01-20T07:57:40.780Z"],["b_KN99JfEcIJs","$D2026-01-30T18:12:32.742Z"],["b_vqrb47XIIGd","$D2026-02-03T08:58:46.392Z"],["b_NTYjPsIeWQl","$D2026-02-03T09:13:39.621Z"],["b_y0PK7Ix8FUD","$D2026-02-03T09:18:43.028Z"],["b_p6ej3zY0n7o","$D2026-02-03T09:18:59.633Z"],["b_JD4fSxjOkEm","$D2026-02-03T09:32:22.763Z"],["b_QJ6TkkLqP6c","$D2026-02-03T09:32:37.255Z"],["b_KgBJH5vKxJv","$D2026-02-03T09:37:31.329Z"],["b_VuqMs5rLnqL","$D2026-02-03T09:37:50.802Z"],["b_Z9w5VE3tLCX","$D2026-02-05T20:53:19.910Z"],["b_BhlZOD4I6wu","$D2026-02-05T21:12:46.627Z"],["b_4C4EUfqd8VQ","$D2026-05-09T09:18:38.697Z"],["b_5icn4flozux","$D2026-05-09T09:18:58.844Z"],["b_19tpnv7llAa","$D2026-05-09T09:19:50.547Z"],["b_fpyxrRqsZHr","$D2026-05-09T09:20:46.624Z"],["b_pZgG50lUC2f","$D2026-05-09T09:22:45.669Z"]] 8f:[["b_BhlZOD4I6wu",false],["b_4C4EUfqd8VQ",false],["b_5icn4flozux",false],["b_19tpnv7llAa",false],["b_fpyxrRqsZHr",false],["b_pZgG50lUC2f",false]] 90:[["b_BhlZOD4I6wu","$undefined"],["b_4C4EUfqd8VQ","$undefined"],["b_5icn4flozux","$undefined"],["b_19tpnv7llAa","$undefined"],["b_fpyxrRqsZHr","$undefined"],["b_pZgG50lUC2f",{"deploymentId":"dpl_BU8pC1pEWkKf4VzXVwE7Pef7gZQJ","showV0Button":true}]] 91:[["b_BhlZOD4I6wu",null],["b_4C4EUfqd8VQ",null],["b_5icn4flozux",null],["b_19tpnv7llAa",null],["b_fpyxrRqsZHr",null],["b_pZgG50lUC2f",null]] 92:[["b_BhlZOD4I6wu",true],["b_4C4EUfqd8VQ",true],["b_5icn4flozux",true],["b_19tpnv7llAa",true],["b_fpyxrRqsZHr",true],["b_pZgG50lUC2f",true]] 93:[["b_BhlZOD4I6wu",true],["b_4C4EUfqd8VQ",true],["b_5icn4flozux",true],["b_19tpnv7llAa",true],["b_fpyxrRqsZHr",true],["b_pZgG50lUC2f",true]] 94:[] 95:T25399,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MobileAppShell } from "@/components/mobile-app-shell" export default function Home() { return } [V0_FILE]typescriptreact:file="components/mobile-app-shell.tsx" isMerged="true" "use client" import { useState } from "react" import { BottomNavigation } from "./navigation/bottom-navigation" import { SideMenu } from "./navigation/side-menu" import { FlowScreen } from "./screens/flow-screen" import { EventsScreen } from "./screens/events-screen" import { MeetScreen } from "./screens/meet-screen" import { NotificationsScreen } from "./screens/notifications-screen" import { ProfileScreen } from "./screens/profile-screen" import { SearchScreen } from "./screens/search-screen" import { Header } from "./navigation/header" export type ActiveScreen = "flow" | "events" | "meet" | "notifications" | "profile" | "search" export function MobileAppShell() { const [activeScreen, setActiveScreen] = useState("flow") const [sideMenuOpen, setSideMenuOpen] = useState(false) const [activeCommunity, setActiveCommunity] = useState("emsi") const renderScreen = () => { switch (activeScreen) { case "flow": return case "events": return case "meet": return case "notifications": return case "profile": return case "search": return setActiveScreen("flow")} /> default: return } } return (

{/* Side Menu Overlay */} setSideMenuOpen(false)} activeCommunity={activeCommunity} onCommunityChange={setActiveCommunity} /> {/* Header */} {activeScreen !== "search" && (

setSideMenuOpen(true)} onSearchClick={() => setActiveScreen("search")} /> )} {/* Main Content */}

{renderScreen()}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="components/navigation/header.tsx" isMerged="true" "use client" import { Menu, Search, MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" interface HeaderProps { onMenuClick: () => void onSearchClick: () => void } export function Header({ onMenuClick, onSearchClick }: HeaderProps) { return (

{/* Meeting Challenge Logo */}

) } [V0_FILE]typescriptreact:file="components/navigation/bottom-navigation.tsx" isMerged="true" "use client" import { Waves, Calendar, Radar, Bell } from "lucide-react" import { cn } from "@/lib/utils" import type { ActiveScreen } from "../mobile-app-shell" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" interface BottomNavigationProps { activeScreen: ActiveScreen onNavigate: (screen: ActiveScreen) => void } export function BottomNavigation({ activeScreen, onNavigate }: BottomNavigationProps) { const navItems = [ { id: "flow" as const, icon: Waves, label: "Flow" }, { id: "events" as const, icon: Calendar, label: "Etkinlikler" }, { id: "meet" as const, icon: Radar, label: "Meet" }, { id: "notifications" as const, icon: Bell, label: "Bildirimler" }, ] return ( ) } [V0_FILE]typescriptreact:file="components/navigation/side-menu.tsx" isMerged="true" "use client" import { useState } from "react" import { X, ChevronDown, ChevronUp, Hash, CheckCheck } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface SideMenuProps { isOpen: boolean onClose: () => void activeCommunity: string onCommunityChange: (community: string) => void } interface Channel { id: string name: string emoji?: string hasUnread?: boolean subChannels?: { id: string; name: string; hasUnread?: boolean }[] } interface ChannelSection { id: string title: string emoji?: string channels: Channel[] } const communities = [ { id: "emsi", name: "EMSI", emoji: "🦋" }, { id: "tech", name: "Tech Community", emoji: "💻" }, { id: "design", name: "Design Hub", emoji: "🎨" }, ] const channelSections: ChannelSection[] = [ { id: "student", title: "ÖĞRENCİ İŞLERİ", emoji: "😬", channels: [ { id: "announcements", name: "Duyurular", emoji: "📢", subChannels: [{ id: "gifts", name: "Bağış Paketleri ve Hediye..." }], }, { id: "asko", name: "Aşko Bi Baksana", emoji: "❓", hasUnread: true, subChannels: [ { id: "tomorrow", name: "Yarın" }, { id: "expired", name: "Süresi geçti" }, { id: "today", name: "Bugün" }, ], }, { id: "teams", name: "Ekiplerimiz ve Kurullarımız" }, { id: "forms", name: "Tüm Formlar" }, { id: "goygoy", name: "Ekip Goygoy" }, { id: "showcase", name: "Çıkar göster" }, { id: "lovers", name: "Aşkolar" }, { id: "about-channels", name: "Kanallar hakkında" }, { id: "application", name: "Başvuru süreci" }, ], }, ] const frequentChannels = [ { id: "tweet", name: "Emsi Tweet", emoji: "🐣", hasUnread: true }, { id: "story", name: "Emsi Story", emoji: "🎬" }, { id: "help", name: "Yardımlaşma", emoji: "🤝", hasUnread: true }, { id: "together", name: "Birlikte Gidelim", emoji: "📍", hasUnread: true }, ] export function SideMenu({ isOpen, onClose, activeCommunity, onCommunityChange }: SideMenuProps) { const [expandedSections, setExpandedSections] = useState(["student"]) const [expandedChannels, setExpandedChannels] = useState(["announcements", "asko"]) const [showCommunityPicker, setShowCommunityPicker] = useState(false) const toggleSection = (sectionId: string) => { setExpandedSections((prev) => prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId], ) } const toggleChannel = (channelId: string) => { setExpandedChannels((prev) => prev.includes(channelId) ? prev.filter((id) => id !== channelId) : [...prev, channelId], ) } const currentCommunity = communities.find((c) => c.id === activeCommunity) return ( <> {/* Backdrop */}

{/* Side Menu Panel */}

{/* Community Selector at Very Top */}

{/* Community Picker Dropdown */} {showCommunityPicker && (

{communities.map((community) => ( ))}

)} {/* Small Mark All Read Button */}

{/* Channels List */}

{channelSections.map((section) => (

{expandedSections.includes(section.id) && (

{section.channels.map((channel) => (

{channel.subChannels && expandedChannels.includes(channel.id) && (

{channel.subChannels.map((sub) => ( ))}

)}

))}

)}

))} {/* Frequently Used */}

SIK KULLANILANLAR

{frequentChannels.map((channel) => ( ))}

) } [V0_FILE]typescriptreact:file="components/home/feed-filters.tsx" isMerged="true" "use client" import { Calendar, MapPin, ChevronDown } from "lucide-react" export function FeedFilters() { return (

) } [V0_FILE]typescriptreact:file="components/home/story-feed.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Heart, MessageCircle, Share } from "lucide-react" import Image from "next/image" interface StoryFeedProps { source: "following" | "everyone" } const stories = [ { id: 1, user: { name: "Ahmet Y.", avatar: "/young-turkish-man.jpg" }, image: "/young-turkish-man-casual.jpg", caption: "Hafta sonu kahve keyfim", time: "2s önce", likes: 24, comments: 5, }, { id: 2, user: { name: "Elif K.", avatar: "/young-turkish-woman.jpg" }, image: "/professional-turkish-woman.jpg", caption: "Yeni ofisimden selamlar!", time: "5s önce", likes: 47, comments: 12, }, { id: 3, user: { name: "Zeynep A.", avatar: "/turkish-woman-student.jpg" }, image: "/young-turkish-woman-student.jpg", caption: "Ders arası kamp pikniği", time: "15s önce", likes: 89, comments: 23, }, { id: 4, user: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" }, image: "/turkish-man-with-beard.jpg", caption: "Topluluk buluşmasından kareler", time: "25s önce", likes: 156, comments: 34, }, { id: 5, user: { name: "Selin K.", avatar: "/turkish-woman-professional.jpg" }, image: "/turkish-woman-young.jpg", caption: "Bugün mutlu bir gündü", time: "1sa önce", likes: 67, comments: 8, }, ] export function StoryFeed({ source }: StoryFeedProps) { const filteredStories = source === "following" ? stories.slice(0, 3) : stories return (

{filteredStories.map((story) => (

{/* Header */}

{story.user.name[0]}

{story.user.name} {story.time}

{/* Photo */}

{/* Actions & Caption */}

{story.user.name}{" "} {story.caption}

))}

) } [V0_FILE]typescriptreact:file="components/home/tweet-feed.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Heart, MessageCircle, Share2 } from "lucide-react" interface TweetFeedProps { source: "following" | "everyone" } const tweets = [ { id: 1, user: { name: "Zeynep A.", avatar: "/turkish-woman-with-hijab.jpg" }, content: "Bugünkü online toplantıda görüşmek üzere! 💻 #EMSIMeeting", time: "1s önce", likes: 24, comments: 5, community: "EMSI", }, { id: 2, user: { name: "Can B.", avatar: "/young-turkish-man-casual.jpg" }, content: "Yeni proje fikirlerim var, paylaşmak isteyen var mı? DM atın! 🚀", time: "3s önce", likes: 18, comments: 12, community: "Tech Community", }, ] export function TweetFeed({ source }: TweetFeedProps) { const filteredTweets = source === "following" ? tweets.slice(0, 1) : tweets return (

{filteredTweets.map((tweet) => (

{tweet.user.name[0]}

{tweet.user.name} • {tweet.community}

{tweet.content}

{tweet.time}

))}

) } [V0_FILE]typescriptreact:file="components/home/network-feed.tsx" isMerged="true" "use client" import React from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Briefcase, HelpCircle, MapPin, MessageCircle, Users } from "lucide-react" interface NetworkFeedProps { source: "following" | "everyone" } type PostType = "help" | "job" | "looking" | "request" interface NetworkPost { id: number user: { name: string; avatar: string } type: PostType title: string content: string time: string responses: number tags?: string[] } const networkPosts: NetworkPost[] = [ { id: 1, user: { name: "Ayşe T.", avatar: "/professional-turkish-woman.jpg" }, type: "help", title: "React Native konusunda yardım lazım", content: "Merhaba! Bir mobil uygulama projemde navigation sorunları yaşıyorum. Bu konuda deneyimli biri yardımcı olabilir mi?", time: "15dk önce", responses: 4, tags: ["React Native", "Mobile"], }, { id: 2, user: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" }, type: "job", title: "Frontend Developer arıyorum", content: "Startup'ımız için part-time React developer arıyoruz. Remote çalışma imkanı var. İlgilenenler DM atabilir.", time: "1sa önce", responses: 12, tags: ["İş İlanı", "React", "Remote"], }, { id: 3, user: { name: "Selin K.", avatar: "/young-turkish-woman-student.jpg" }, type: "looking", title: "Ankara'da UI/UX Designer tanıyor musunuz?", content: "Mezuniyet projemiz için bir UI/UX designer ile işbirliği yapmak istiyoruz. Öğrenci veya yeni mezun olabilir.", time: "2sa önce", responses: 7, tags: ["Ankara", "UI/UX", "Proje"], }, { id: 4, user: { name: "Mehmet D.", avatar: "/turkish-man-with-glasses.jpg" }, type: "request", title: "Topluluk etkinliği için mekan önerisi", content: "20-30 kişilik bir workshop düzenlemek istiyoruz. İstanbul Anadolu yakasında uygun mekan öneriniz var mı?", time: "3sa önce", responses: 9, tags: ["İstanbul", "Etkinlik"], }, { id: 5, user: { name: "Can B.", avatar: "/turkish-man-casual.jpg" }, type: "help", title: "Supabase authentication sorunu", content: "Email verification akışında takıldım. Benzer sorunu çözmüş olan var mı?", time: "4sa önce", responses: 6, tags: ["Supabase", "Auth"], }, ] const typeIcons: Record = { help: , job: , looking: , request: , } const typeLabels: Record = { help: "Yardım İsteniyor", job: "İş Arıyor", looking: "Kişi Arıyor", request: "Talep", } const typeColors: Record = { help: "bg-orange-100 text-orange-700", job: "bg-green-100 text-green-700", looking: "bg-blue-100 text-blue-700", request: "bg-purple-100 text-purple-700", } export function NetworkFeed({ source }: NetworkFeedProps) { const filteredPosts = source === "following" ? networkPosts.slice(0, 3) : networkPosts return (

{filteredPosts.map((post) => (

{/* Header */}

{post.user.name[0]}

{post.user.name} {post.time}

{typeIcons[post.type]} {typeLabels[post.type]}

{/* Content */}

{post.title}

{post.content}

{/* Tags */} {post.tags && (

{post.tags.map((tag) => ( #{tag} ))}

)} {/* Actions */}

))}

) } [V0_FILE]typescriptreact:file="components/screens/notifications-screen.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Calendar, AtSign, Users } from "lucide-react" import { cn } from "@/lib/utils" type NotificationType = "event" | "mention" | "community" interface Notification { id: number type: NotificationType title: string description: string time: string isRead: boolean avatar?: string } const notifications: Notification[] = [ { id: 1, type: "event", title: "Etkinlik Hatırlatması", description: "Online Tanışma Toplantımız 1 saat içinde başlıyor!", time: "5 dk önce", isRead: false, }, { id: 2, type: "mention", title: "Ahmet seni etiketledi", description: '"@mami bu konuda ne düşünüyorsun?" - #Yardımlaşma kanalında', time: "15 dk önce", isRead: false, avatar: "/placeholder.svg?height=40&width=40", }, { id: 3, type: "community", title: "Yeni Üye", description: "Tech Community'ye 5 yeni üye katıldı", time: "1 saat önce", isRead: true, }, { id: 4, type: "event", title: "Etkinlik Güncellendi", description: "Mavi Koltuk etkinliğinin saati değişti: 21:30", time: "2 saat önce", isRead: true, }, { id: 5, type: "mention", title: "Elif seni etiketledi", description: '"@mami projeye katılmak ister misin?" - DM', time: "3 saat önce", isRead: true, avatar: "/placeholder.svg?height=40&width=40", }, ] const typeIcons: Record = { event: Calendar, mention: AtSign, community: Users, } const typeColors: Record = { event: "bg-emerald-100 text-emerald-600", mention: "bg-blue-100 text-blue-600", community: "bg-purple-100 text-purple-600", } export function NotificationsScreen() { const unreadCount = notifications.filter((n) => !n.isRead).length return (

Bildirimler

{unreadCount > 0 &&

{unreadCount} okunmamış bildirim

}

{notifications.map((notification) => { const Icon = typeIcons[notification.type] return (

{notification.avatar ? ( U ) : (

)}

{notification.title} {!notification.isRead && }

{notification.description}

{notification.time}

) })}

) } [V0_FILE]typescriptreact:file="components/community/create-community-sheet.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" interface CreateCommunitySheetProps { isOpen: boolean onClose: () => void onCreate: (data: { name: string; description: string; visibility: string }) => void } export function CreateCommunitySheet({ isOpen, onClose, onCreate }: CreateCommunitySheetProps) { const [name, setName] = useState("") const [description, setDescription] = useState("") const [visibility, setVisibility] = useState<"public" | "private">("public") const handleSubmit = () => { if (name.trim() && description.trim()) { onCreate({ name, description, visibility }) setName("") setDescription("") setVisibility("public") onClose() } } return ( <> {/* Backdrop */}

{/* Sheet */}

Topluluk Oluştur

Topluluk Adı setName(e.target.value)} />

Açıklama

setDescription(e.target.value)}
              className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            />
          </div>

<div>
            <label className="mb-2 block text-sm font-medium">Görünürlük</label>
            <div className="flex gap-2">
              <button
                onClick={() => setVisibility("public")}
                className={cn(
                  "flex-1 rounded-lg border px-4 py-2 text-sm font-medium transition-colors",
                  visibility === "public"
                    ? "border-brand bg-brand/10 text-brand"
                    : "border-border text-muted-foreground hover:bg-muted",
                )}
              >
                Herkese Açık
              </button>
              <button
                onClick={() => setVisibility("private")}
                className={cn(
                  "flex-1 rounded-lg border px-4 py-2 text-sm font-medium transition-colors",
                  visibility === "private"
                    ? "border-brand bg-brand/10 text-brand"
                    : "border-border text-muted-foreground hover:bg-muted",
                )}
              >
                Özel
              </button>
            </div>
          </div>

<Button
            onClick={handleSubmit}
            className="w-full bg-brand text-white hover:bg-brand/90"
            disabled={!name.trim() || !description.trim()}
          >
            Topluluk Oluştur
          </Button>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/community/community-detail-sheet.tsx" isMerged="true"
"use client"

import { X, Users, Check, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface Community {
  id: string
  name: string
  description: string
  members: number
  emoji: string
  isJoined: boolean
}

interface CommunityDetailSheetProps {
  community: Community
  isOpen: boolean
  onClose: () => void
  onJoin: () => void
}

export function CommunityDetailSheet({ community, isOpen, onClose, onJoin }: CommunityDetailSheetProps) {
  return (
    <>
      {/* Backdrop */}
      <div
        className={cn(
          "fixed inset-0 z-40 bg-black/50 transition-opacity",
          isOpen ? "opacity-100" : "pointer-events-none opacity-0",
        )}
        onClick={onClose}
      />

{/* Sheet */}
      <div
        className={cn(
          "fixed inset-x-0 bottom-0 z-50 max-h-[80vh] transform overflow-y-auto rounded-t-2xl bg-background p-6 shadow-xl transition-transform duration-300",
          isOpen ? "translate-y-0" : "translate-y-full",
        )}
      >
        <div className="mb-4 flex items-start justify-between">
          <div className="flex items-center gap-3">
            <span className="text-4xl">{community.emoji}</span>
            <div>
              <h2 className="text-xl font-semibold">{community.name}</h2>
              <div className="flex items-center gap-1 text-sm text-muted-foreground">
                <Users className="h-4 w-4" />
                <span>{community.members} üye</span>
              </div>
            </div>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

<p className="text-muted-foreground">{community.description}</p>

<div className="mt-6">
          <Button
            onClick={onJoin}
            className={cn(
              "w-full",
              community.isJoined
                ? "border-brand bg-brand/10 text-brand hover:bg-brand/20"
                : "bg-brand text-white hover:bg-brand/90",
            )}
            variant={community.isJoined ? "outline" : "default"}
          >
            {community.isJoined ? (
              <>
                <Check className="mr-2 h-4 w-4" />
                Üyesin
              </>
            ) : (
              <>
                <Plus className="mr-2 h-4 w-4" />
                Topluluğa Katıl
              </>
            )}
          </Button>
        </div>
      </div>
    </>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.97 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  /* Updated primary to brand blue matching the app design */
  --primary: oklch(0.55 0.2 250);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.55 0.2 250);
  /* Added brand color token */
  --brand: oklch(0.55 0.2 250);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.55 0.2 250);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  /* Added brand color mapping */
  --color-brand: var(--brand);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Meeting Challenge - EMSI",
  description: "Mobile social community application for EMSI",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: "#3B82F6",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="tr">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]jpg:file="public/young-turkish-man.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-turkish-man-Fe24JsGCzdEELB8wUVEXD3Kxoc9JJk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-turkish-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-turkish-woman-YRMaL82jLAJAqMTAAu5bbccCrVQgUe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-man-with-glasses.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-man-with-glasses-6VK0SXGvDIbLeIdM6QvBze8DJNeyWT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-woman-with-hijab.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-woman-with-hijab-U2dJde95pquKUW1UWTjFM00WQsVYI4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-turkish-man-casual.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-turkish-man-casual-E6nyMDwFk2D6o6EvGOgrl1PLuk4RZ5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-turkish-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-turkish-woman-YXG71lxWOFuPrWUi37ZKTt6TcwWj9O.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-man-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-man-professional-sqioQ6QieSnDoArYK4JSj33bP1Gwz8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-turkish-woman-student.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-turkish-woman-student-Srf6TsOZeCuP7tpzF7X1cC9xsWeqYW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/young-turkish-man-smiling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/young-turkish-man-smiling-jrfqm5bh5HlN5gU9BWNwZTMxLvI6fn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-woman-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-woman-professional-SwbszyFP3NQqPJenTzXyIPuiwfroew.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-man-with-beard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-man-with-beard-X354SLOmfUy3xluk24WdsjM1xfUZy0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-woman-student.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-woman-student-wYuzoenzZeH5B57hOpKKMNWFHyA8Hl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-man-casual.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-man-casual-sl61sSTZqIuWOHKC8R4xlRwulNeMpY.jpg" isMerged="true"
[V0_FILE]jpg:file="public/turkish-woman-young.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/turkish-woman-young-HhyVFLC0dsIrBNGA5VCIMwiOcwshIf.jpg" isMerged="true"
[V0_FILE]png:file="public/images/img-9953.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_9953-qVXl4IRocR5bz5lKBJxcfx4X5Z9gxI.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/screens/search-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Search, Users, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import { CreateCommunitySheet } from "../community/create-community-sheet"
import { CommunityDetailScreen } from "../community/community-detail-screen"

interface Community {
  id: string
  name: string
  description: string
  members: number
  emoji: string
  image: string
  isJoined: boolean
  location?: string
  website?: string
}

const communities: Community[] = [
  {
    id: "emsi",
    name: "EMSI",
    description: "Türkiye'nin en büyük online gençlik topluluğu. Birlikte öğreniyor, birlikte büyüyoruz.",
    members: 1250,
    emoji: "🦋",
    image: "/young-turkish-man.jpg",
    isJoined: true,
    location: "Türkiye",
    website: "emsi.com",
  },
  {
    id: "tech",
    name: "Tech Community",
    description: "Yazılım, teknoloji ve kariyer gelişimi üzerine sohbet ve etkinlikler.",
    members: 890,
    emoji: "💻",
    image: "/turkish-man-professional.jpg",
    isJoined: false,
    location: "İstanbul",
  },
  {
    id: "design",
    name: "Design Hub",
    description: "UI/UX tasarımcıları ve grafik sanatçıları için buluşma noktası.",
    members: 456,
    emoji: "🎨",
    image: "/professional-turkish-woman.jpg",
    isJoined: false,
    location: "Ankara",
  },
  {
    id: "music",
    name: "Müzik Severler",
    description: "Her türden müzik tutkunlarının buluştuğu topluluk.",
    members: 234,
    emoji: "🎵",
    image: "/young-turkish-woman.jpg",
    isJoined: false,
  },
]

interface SearchScreenProps {
  onBack: () => void
}

export function SearchScreen({ onBack }: SearchScreenProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [showCreateSheet, setShowCreateSheet] = useState(false)
  const [selectedCommunity, setSelectedCommunity] = useState<Community | null>(null)
  const [communitiesState, setCommunitiesState] = useState(communities)

const filteredCommunities = communitiesState.filter(
    (c) =>
      c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const handleJoinCommunity = (communityId: string) => {
    setCommunitiesState((prev) =>
      prev.map((c) =>
        c.id === communityId ? { ...c, isJoined: !c.isJoined, members: c.isJoined ? c.members - 1 : c.members + 1 } : c,
      ),
    )
    if (selectedCommunity?.id === communityId) {
      setSelectedCommunity((prev) =>
        prev
          ? { ...prev, isJoined: !prev.isJoined, members: prev.isJoined ? prev.members - 1 : prev.members + 1 }
          : null,
      )
    }
  }

const handleCreateCommunity = (data: { name: string; description: string; visibility: string }) => {
    const newCommunity: Community = {
      id: data.name.toLowerCase().replace(/\s+/g, "-"),
      name: data.name,
      description: data.description,
      members: 1,
      emoji: "✨",
      image: "/young-turkish-man.jpg",
      isJoined: true,
    }
    setCommunitiesState((prev) => [newCommunity, ...prev])
  }

// Show Community Detail Page when a community is selected
  if (selectedCommunity) {
    return (
      <CommunityDetailScreen
        community={{
          id: selectedCommunity.id,
          name: selectedCommunity.name,
          description: selectedCommunity.description,
          memberCount: selectedCommunity.members,
          image: selectedCommunity.image,
          location: selectedCommunity.location,
          website: selectedCommunity.website,
        }}
        onBack={() => setSelectedCommunity(null)}
      />
    )
  }

return (
    <div className="flex h-full flex-col bg-muted">
      {/* Header */}
      <div className="flex items-center gap-3 bg-background px-4 py-3">
        <Button variant="ghost" size="icon" onClick={onBack}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <div className="flex items-center">
          <svg viewBox="0 0 180 40" className="h-8 w-auto">
            <text
              x="5"
              y="18"
              className="fill-brand font-semibold"
              style={{ fontSize: "14px", fontFamily: "system-ui" }}
            >
              Meeting
            </text>
            <text
              x="5"
              y="34"
              className="fill-brand font-semibold"
              style={{ fontSize: "14px", fontFamily: "system-ui" }}
            >
              Challenge
            </text>
            <rect x="0" y="5" width="2" height="30" className="fill-brand" rx="1" />
            <rect x="85" y="5" width="2" height="30" className="fill-brand" rx="1" />
            <path d="M0 5 L5 5" className="stroke-brand" strokeWidth="2" fill="none" />
            <path d="M0 35 L5 35" className="stroke-brand" strokeWidth="2" fill="none" />
            <path d="M82 5 L87 5" className="stroke-brand" strokeWidth="2" fill="none" />
            <path d="M82 35 L87 35" className="stroke-brand" strokeWidth="2" fill="none" />
          </svg>
        </div>
      </div>

{/* Search Input */}
      <div className="bg-background p-4">
        <div className="relative">
          <Input
            placeholder="Topluluk, etkinlik veya üye ara"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pr-10"
          />
          <Search className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
        </div>
      </div>

{/* Create Community Button */}
      <div className="px-4 py-2">
        <Button onClick={() => setShowCreateSheet(true)} className="w-full gap-2 bg-brand text-white hover:bg-brand/90">
          <Plus className="h-4 w-4" />
          Topluluk Oluştur
        </Button>
      </div>

{/* Communities List */}
      <div className="flex-1 overflow-y-auto p-4">
        {filteredCommunities.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="mb-4 text-6xl">🛸</div>
            <p className="text-center text-muted-foreground">Böyle bir sonuç bulunmamadır</p>
          </div>
        ) : (
          <div className="space-y-4">
            {filteredCommunities.map((community) => (
              <div key={community.id} className="overflow-hidden rounded-xl bg-background shadow-sm">
                <div className="p-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <span className="text-3xl">{community.emoji}</span>
                      <div>
                        {/* Clickable Community Name */}
                        <button
                          onClick={() => setSelectedCommunity(community)}
                          className="font-semibold text-foreground hover:text-brand hover:underline"
                        >
                          {community.name}
                        </button>
                        <div className="flex items-center gap-1 text-sm text-muted-foreground">
                          <Users className="h-4 w-4" />
                          <span>{community.members} üye</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p className="mt-2 text-sm text-muted-foreground line-clamp-2">{community.description}</p>
                  <Button
                    onClick={() => handleJoinCommunity(community.id)}
                    className={cn(
                      "mt-3 w-full",
                      community.isJoined
                        ? "border-brand bg-brand/10 text-brand hover:bg-brand/20"
                        : "bg-brand text-white hover:bg-brand/90",
                    )}
                    variant={community.isJoined ? "outline" : "default"}
                  >
                    {community.isJoined ? "Üyesin" : "Katıl"}
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

{/* Create Community Sheet */}
      <CreateCommunitySheet
        isOpen={showCreateSheet}
        onClose={() => setShowCreateSheet(false)}
        onCreate={handleCreateCommunity}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/announcement-banner.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ExternalLink, ChevronLeft, ChevronRight } from "lucide-react"

const announcements = [
  {
    id: 1,
    title: "İlk Dikey Dijital Dizimiz Yayında!",
    subtitle: "Kim Haklı?",
    description: "1. bölüm yayında, izle ve yorumlarını yap",
    icon: "🎬",
  },
  {
    id: 2,
    title: "Yeni Etkinlik Duyurusu",
    subtitle: "Topluluk Buluşması",
    description: "Bu hafta sonu online buluşmamız var",
    icon: "🎉",
  },
]

export function AnnouncementBanner() {
  const [currentIndex, setCurrentIndex] = useState(0)

const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 1) % announcements.length)
  }

const prevSlide = () => {
    setCurrentIndex((prev) => (prev - 1 + announcements.length) % announcements.length)
  }

const announcement = announcements[currentIndex]

return (
    <div className="relative mx-4 mt-3 overflow-hidden rounded-xl bg-emerald-500 px-3 py-2 text-white">
      <div className="flex items-center gap-2">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/20 text-lg">
          {announcement.icon}
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <h3 className="truncate text-sm font-semibold">{announcement.title}</h3>
            <span className="shrink-0 rounded bg-white/20 px-1 py-0.5 text-[10px]">
              {currentIndex + 1}/{announcements.length}
            </span>
          </div>
          <p className="truncate text-xs text-white/80">{announcement.subtitle}</p>
        </div>
        <button className="shrink-0 rounded-lg bg-white/20 p-1.5">
          <ExternalLink className="h-3.5 w-3.5" />
        </button>
      </div>
    </div>
  )
}

function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(" ")
}
[V0_FILE]typescriptreact:file="components/screens/events-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Calendar, MapPin, ChevronDown, Users, Check, Plus } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type EventFilter = "all" | "my-communities"

interface Event {
  id: number
  title: string
  description: string
  community: string
  date: string
  location: string
  attendees: number
  isAttending: boolean
  gradient?: string
}

const events: Event[] = [
  {
    id: 1,
    title: "Online Tanışma Toplantımız",
    description:
      "Emsi'ye yeni katılan arkadaşlarımız için. Sizlere topluluğumuzun dinamiklerini anlatacak, burada nasıl yaşadığımız ve birlikte neler yapabileceğimiz ...",
    community: "EMSI",
    date: "15.01.2026 21:00",
    location: "Google Meet",
    attendees: 47,
    isAttending: true,
  },
  {
    id: 2,
    title: "Mavi Koltuk 💙",
    description:
      "Topluluğumuzun en sevilen ve artık klasik haline gelmiş etkinliklerinden biriyle karşınızdayız. 🥳 Aseyo'nun moderatörlüğünde gerçekleşecek olan ...",
    community: "EMSI",
    date: "16.01.2026 21:30",
    location: "youtube.com/emsitivi",
    attendees: 6,
    isAttending: false,
    gradient: "from-blue-400 to-purple-500",
  },
  {
    id: 3,
    title: "Kod Yazma Atölyesi",
    description: "React ve Next.js ile modern web uygulamaları geliştirmeyi öğreneceğimiz bir workshop.",
    community: "Tech Community",
    date: "17.01.2026 19:00",
    location: "Discord",
    attendees: 23,
    isAttending: false,
  },
]

export function EventsScreen() {
  const [filter, setFilter] = useState<EventFilter>("all")
  const [eventsState, setEventsState] = useState(events)

const myCommunities = ["EMSI", "Tech Community"]
  const filteredEvents = filter === "my-communities" 
    ? eventsState.filter((e) => myCommunities.includes(e.community)) 
    : eventsState

const toggleAttendance = (eventId: number) => {
    setEventsState((prev) =>
      prev.map((event) =>
        event.id === eventId
          ? {
              ...event,
              isAttending: !event.isAttending,
              attendees: event.isAttending ? event.attendees - 1 : event.attendees + 1,
            }
          : event,
      ),
    )
  }

return (
    <div className="flex flex-col">
      {/* Filters */}
      <div className="flex items-center gap-4 bg-background px-4 py-3">
        <button className="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm">
          <Calendar className="h-4 w-4 text-muted-foreground" />
          <span>Bugün</span>
          <ChevronDown className="h-4 w-4 text-muted-foreground" />
        </button>
        <button className="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm">
          <MapPin className="h-4 w-4 text-muted-foreground" />
          <span>Ankara</span>
          <ChevronDown className="h-4 w-4 text-muted-foreground" />
        </button>
      </div>

{/* Event Source Toggle */}
      <div className="flex gap-2 bg-background px-4 pb-3">
        <button
          onClick={() => setFilter("all")}
          className={cn(
            "rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
            filter === "all" ? "bg-brand text-white" : "bg-muted text-muted-foreground",
          )}
        >
          Tüm Herkese Açık
        </button>
        <button
          onClick={() => setFilter("my-communities")}
          className={cn(
            "rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
            filter === "my-communities" ? "bg-brand text-white" : "bg-muted text-muted-foreground",
          )}
        >
          Topluluklarım
        </button>
      </div>

{/* Events List */}
      <div className="flex-1 space-y-4 p-4">
        {filteredEvents.map((event) => (
          <div key={event.id} className="overflow-hidden rounded-xl bg-background shadow-sm">
            {/* Community Badge */}
            <div className="border-b border-border px-4 py-2">
              <span className="text-xs font-medium text-brand">{event.community}</span>
            </div>

<div className="p-4">
              <div className="flex items-start justify-between">
                <h3 className="font-semibold text-foreground">{event.title}</h3>
                <div className="flex items-center gap-1 rounded-full bg-muted px-2 py-1">
                  <Users className="h-3.5 w-3.5 text-muted-foreground" />
                  <span className="text-xs text-muted-foreground">{event.attendees}</span>
                </div>
              </div>

<p className="mt-2 text-sm text-muted-foreground line-clamp-3">{event.description}</p>

<div className="mt-3 flex items-center gap-4 text-sm text-muted-foreground">
                <div className="flex items-center gap-1">
                  <Calendar className="h-4 w-4" />
                  <span>{event.date}</span>
                </div>
                <div className="flex items-center gap-1">
                  <MapPin className="h-4 w-4" />
                  <span>{event.location}</span>
                </div>
              </div>

<Button
                onClick={() => toggleAttendance(event.id)}
                className={cn(
                  "mt-4 w-full",
                  event.isAttending
                    ? "border-brand bg-brand/10 text-brand hover:bg-brand/20"
                    : event.gradient
                      ? `bg-gradient-to-r ${event.gradient} text-white hover:opacity-90`
                      : "bg-brand text-white hover:bg-brand/90",
                )}
                variant={event.isAttending ? "outline" : "default"}
              >
                {event.isAttending ? (
                  <>
                    <Check className="mr-2 h-4 w-4" />
                    Katılıyorsun
                  </>
                ) : (
                  <>
                    <Plus className="mr-2 h-4 w-4" />
                    Katıl
                  </>
                )}
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/community-logos/music-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-logos/music-logo-R31eky26z3LbryuDZ5xX9WmETgDmor.jpg" isMerged="true"
[V0_FILE]jpg:file="public/community-logos/emsi-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-logos/emsi-logo-peWh5FH6ZVFiiCOSMuxFvtA97nsb79.jpg" isMerged="true"
[V0_FILE]jpg:file="public/community-logos/tech-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-logos/tech-logo-qDGTmHDRSiSeEnXQNSU8tXq4S2YlPn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/community-logos/design-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-logos/design-logo-yB42gqb6pYEmlhRyyGc1lKgZAEsi2D.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/my-profile-photo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_7280-JxF5pa7A8JbgqRQd1yKunQx2uaVX4c.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/screens/profile-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Settings, Plus, UserPlus, ChevronRight, ArrowLeft, Calendar, MapPin, Users } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

type ProfileTab = "board" | "posts" | "mentions" | "events"

interface Community {
  id: string
  name: string
  logo: string
}

interface BoardNote {
  id: number
  author: { name: string; avatar: string }
  content: string
  time: string
}

interface RelationshipUser {
  id: number
  name: string
  avatar: string
  username: string
  bio: string
  tanidiklarimCount?: number
  taniyanlarCount?: number
  mutualCount?: number
}

interface UserEvent {
  id: number
  title: string
  date: string
  location: string
  isPast: boolean
}

const titles = ["Asko", "Emsi", "BY grup liderleri"]

const communities: Community[] = [
  { id: "emsi", name: "EMSI", logo: "/community-logos/emsi-logo.jpg" },
  { id: "tech", name: "Tech Community", logo: "/community-logos/tech-logo.jpg" },
  { id: "design", name: "Design Hub", logo: "/community-logos/design-logo.jpg" },
  { id: "music", name: "Muzik Kulubu", logo: "/community-logos/music-logo.jpg" },
]

const boardNotes: BoardNote[] = [
  {
    id: 1,
    author: { name: "Elif K.", avatar: "/young-turkish-woman.jpg" },
    content: "Harika bir topluluk yoneticisi! Etkinlikler icin tesekkurler",
    time: "2 gun once",
  },
  {
    id: 2,
    author: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" },
    content: "Tanistigima memnun oldum, gorusmek uzere!",
    time: "5 gun once",
  },
  {
    id: 3,
    author: { name: "Zeynep A.", avatar: "/turkish-woman-student.jpg" },
    content: "Online toplantidaki sunumun cok bilgilendiriciydi, eline saglik!",
    time: "1 hafta once",
  },
  {
    id: 4,
    author: { name: "Can B.", avatar: "/turkish-man-casual.jpg" },
    content: "Selam Mami! Kahve bulusmasi icin haberim var mi?",
    time: "2 hafta once",
  },
]

// Tanidiklarim - Mutual connections (both added each other)
const tanidiklarim: RelationshipUser[] = [
  { id: 1, name: "Elif Kaya", avatar: "/young-turkish-woman.jpg", username: "@elif", bio: "UX Designer", tanidiklarimCount: 89, taniyanlarCount: 124, mutualCount: 12 },
  { id: 2, name: "Burak Demir", avatar: "/turkish-man-professional.jpg", username: "@burak", bio: "Frontend Dev", tanidiklarimCount: 156, taniyanlarCount: 203, mutualCount: 8 },
  { id: 3, name: "Selin Aksoy", avatar: "/young-turkish-woman-student.jpg", username: "@selin", bio: "Ogrenci", tanidiklarimCount: 45, taniyanlarCount: 67, mutualCount: 15 },
  { id: 4, name: "Emre Can", avatar: "/turkish-man-with-glasses.jpg", username: "@emre", bio: "Backend Dev", tanidiklarimCount: 112, taniyanlarCount: 178, mutualCount: 6 },
  { id: 5, name: "Ayse Yildiz", avatar: "/professional-turkish-woman.jpg", username: "@ayse", bio: "Product Manager", tanidiklarimCount: 234, taniyanlarCount: 312, mutualCount: 23 },
  { id: 6, name: "Kaan Ozturk", avatar: "/young-turkish-man-casual.jpg", username: "@kaan", bio: "Designer", tanidiklarimCount: 78, taniyanlarCount: 95, mutualCount: 9 },
  { id: 7, name: "Zeynep Aksoy", avatar: "/turkish-woman-student.jpg", username: "@zeynep", bio: "Marketing", tanidiklarimCount: 167, taniyanlarCount: 198, mutualCount: 11 },
  { id: 8, name: "Ali Yilmaz", avatar: "/turkish-man-casual.jpg", username: "@ali", bio: "Freelancer", tanidiklarimCount: 56, taniyanlarCount: 89, mutualCount: 7 },
  { id: 9, name: "Deniz Korkmaz", avatar: "/turkish-woman-young.jpg", username: "@deniz", bio: "Content Creator", tanidiklarimCount: 289, taniyanlarCount: 456, mutualCount: 19 },
  { id: 10, name: "Mehmet Demir", avatar: "/turkish-man-with-beard.jpg", username: "@mehmet", bio: "DevOps", tanidiklarimCount: 134, taniyanlarCount: 167, mutualCount: 14 },
]

// Generate more tanidiklarim (total 127)
const allTanidiklarim: RelationshipUser[] = [
  ...tanidiklarim,
  ...Array.from({ length: 117 }, (_, i) => ({
    id: 11 + i,
    name: `Kullanici ${11 + i}`,
    avatar: i % 2 === 0 ? "/young-turkish-man.jpg" : "/young-turkish-woman.jpg",
    username: `@user${11 + i}`,
    bio: "Topluluk uyesi",
    tanidiklarimCount: Math.floor(Math.random() * 200) + 20,
    taniyanlarCount: Math.floor(Math.random() * 300) + 30,
    mutualCount: Math.floor(Math.random() * 20) + 1,
  })),
]

// Taniyanlar - People who added me (but I haven't added back)
const taniyanlar: RelationshipUser[] = [
  { id: 101, name: "Cem Yildirim", avatar: "/turkish-man-professional.jpg", username: "@cem", bio: "Startup Founder", tanidiklarimCount: 312, taniyanlarCount: 456, mutualCount: 5 },
  { id: 102, name: "Basak Kara", avatar: "/professional-turkish-woman.jpg", username: "@basak", bio: "HR Manager", tanidiklarimCount: 189, taniyanlarCount: 234, mutualCount: 8 },
  { id: 103, name: "Tolga Aslan", avatar: "/young-turkish-man-casual.jpg", username: "@tolga", bio: "Mobile Dev", tanidiklarimCount: 145, taniyanlarCount: 198, mutualCount: 3 },
  { id: 104, name: "Nazli Gunes", avatar: "/turkish-woman-young.jpg", username: "@nazli", bio: "Illustrator", tanidiklarimCount: 267, taniyanlarCount: 389, mutualCount: 12 },
  { id: 105, name: "Serkan Ay", avatar: "/turkish-man-with-beard.jpg", username: "@serkan", bio: "Data Scientist", tanidiklarimCount: 98, taniyanlarCount: 145, mutualCount: 6 },
  { id: 106, name: "Pelin Sen", avatar: "/young-turkish-woman-student.jpg", username: "@pelin", bio: "UI Designer", tanidiklarimCount: 134, taniyanlarCount: 178, mutualCount: 9 },
  { id: 107, name: "Onur Koc", avatar: "/turkish-man-casual.jpg", username: "@onur", bio: "Growth Hacker", tanidiklarimCount: 223, taniyanlarCount: 312, mutualCount: 7 },
  { id: 108, name: "Melis Tan", avatar: "/turkish-woman-professional.jpg", username: "@melis", bio: "Brand Manager", tanidiklarimCount: 178, taniyanlarCount: 245, mutualCount: 11 },
  { id: 109, name: "Baris Aktas", avatar: "/turkish-man-professional.jpg", username: "@baris", bio: "Architect", tanidiklarimCount: 89, taniyanlarCount: 123, mutualCount: 4 },
  { id: 110, name: "Dilan Yavuz", avatar: "/turkish-woman-student.jpg", username: "@dilan", bio: "Researcher", tanidiklarimCount: 56, taniyanlarCount: 78, mutualCount: 10 },
]

// Generate more taniyanlar (total 184)
const allTaniyanlar: RelationshipUser[] = [
  ...taniyanlar,
  ...Array.from({ length: 174 }, (_, i) => ({
    id: 111 + i,
    name: `Takipci ${111 + i}`,
    avatar: i % 2 === 0 ? "/turkish-man-with-glasses.jpg" : "/turkish-woman-student.jpg",
    username: `@follower${111 + i}`,
    bio: "EMSI uyesi",
    tanidiklarimCount: Math.floor(Math.random() * 150) + 20,
    taniyanlarCount: Math.floor(Math.random() * 200) + 30,
    mutualCount: Math.floor(Math.random() * 15) + 1,
  })),
]

// Sample events for profile
const userEvents: UserEvent[] = [
  { id: 1, title: "Online Tanisma Toplantimiz", date: "15.01.2026", location: "Google Meet", isPast: true },
  { id: 2, title: "Mavi Koltuk", date: "16.01.2026", location: "youtube.com/emsitivi", isPast: true },
  { id: 3, title: "Kahve Bulusmasi", date: "20.01.2026", location: "Ankara", isPast: true },
  { id: 4, title: "React Workshop", date: "10.02.2026", location: "Online", isPast: false },
  { id: 5, title: "Yillik Toplanti", date: "15.03.2026", location: "Istanbul", isPast: false },
]

// Sample mutual connections for social proof
const getMutualConnections = (userId: number): RelationshipUser[] => {
  // Return a subset of tanidiklarim as "mutual" connections
  return tanidiklarim.slice(0, Math.min(userId % 10 + 3, 10))
}

export function ProfileScreen() {
  const [activeTab, setActiveTab] = useState<ProfileTab>("board")
  const [selectedCommunity, setSelectedCommunity] = useState<string | null>(null)
  const [showList, setShowList] = useState<"tanidiklarim" | "taniyanlar" | "mutual" | null>(null)
  const [selectedUser, setSelectedUser] = useState<RelationshipUser | null>(null)
  const [mutualListForUser, setMutualListForUser] = useState<RelationshipUser[]>([])

const tabs = [
    { id: "board" as const, label: "Profil Panosu" },
    { id: "posts" as const, label: "Paylasimlar" },
    { id: "mentions" as const, label: "Etiketlenmeler" },
    { id: "events" as const, label: "Etkinlikler" },
  ]

// Handle opening mutual connections list
  const handleOpenMutualList = (user: RelationshipUser) => {
    setMutualListForUser(getMutualConnections(user.id))
    setShowList("mutual")
  }

// Social Stats Component - Redesigned with lighter, social aesthetic
  const SocialStats = ({
    tanidikCount,
    taniyanCount,
    onTanidikClick,
    onTaniyanClick,
  }: {
    tanidikCount: number
    taniyanCount: number
    onTanidikClick: () => void
    onTaniyanClick: () => void
  }) => (
    <div className="mt-4 flex items-center justify-center gap-8">
      <button onClick={onTanidikClick} className="group flex items-center gap-2 transition-opacity hover:opacity-70">
        <Users className="h-4 w-4 text-muted-foreground" />
        <span className="text-lg font-semibold text-foreground">{tanidikCount}</span>
        <span className="text-sm text-muted-foreground">Tanidiklar</span>
      </button>
      <div className="h-4 w-px bg-border" />
      <button onClick={onTaniyanClick} className="group flex items-center gap-2 transition-opacity hover:opacity-70">
        <Users className="h-4 w-4 text-muted-foreground" />
        <span className="text-lg font-semibold text-foreground">{taniyanCount}</span>
        <span className="text-sm text-muted-foreground">Taniyanlar</span>
      </button>
    </div>
  )

// Communities Section Component with Logos
  const CommunitiesSection = ({ communitiesList }: { communitiesList: Community[] }) => (
    <div className="rounded-xl bg-background p-4">
      <h2 className="mb-3 text-sm font-medium text-muted-foreground">Topluluklar</h2>
      <div className="flex gap-3">
        {communitiesList.map((community) => (
          <button
            key={community.id}
            onClick={() => setSelectedCommunity(selectedCommunity === community.id ? null : community.id)}
            className="group relative flex flex-col items-center"
          >
            <div
              className={cn(
                "h-14 w-14 overflow-hidden rounded-xl ring-2 ring-offset-2 transition-all",
                selectedCommunity === community.id
                  ? "ring-brand"
                  : "ring-transparent group-hover:ring-brand/50",
              )}
            >
              <img
                src={community.logo || "/placeholder.svg"}
                alt={community.name}
                className="h-full w-full object-cover"
              />
            </div>
            {selectedCommunity === community.id && (
              <span className="mt-1 text-xs text-brand">{community.name}</span>
            )}
          </button>
        ))}
      </div>
    </div>
  )

// Full Profile View for Another User
  if (selectedUser) {
    return (
      <div className="flex flex-col bg-muted">
        {/* Header */}
        <div className="flex items-center gap-3 border-b border-border bg-background px-4 py-3">
          <button onClick={() => setSelectedUser(null)} className="p-1">
            <ArrowLeft className="h-5 w-5" />
          </button>
          <span className="font-medium">Profil</span>
        </div>

{/* Profile Header */}
        <div className="bg-background px-4 py-4">
          <div className="flex items-start gap-4">
            <Avatar className="h-20 w-20">
              <AvatarImage src={selectedUser.avatar || "/placeholder.svg"} />
              <AvatarFallback>{selectedUser.name[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h1 className="text-xl font-semibold">{selectedUser.name}</h1>
              <p className="text-muted-foreground">{selectedUser.username}</p>
              <p className="mt-1 text-sm text-muted-foreground">{selectedUser.bio}</p>
            </div>
          </div>

{/* Redesigned Social Stats */}
          <SocialStats
            tanidikCount={selectedUser.tanidiklarimCount || 0}
            taniyanCount={selectedUser.taniyanlarCount || 0}
            onTanidikClick={() => {
              setMutualListForUser(allTanidiklarim.slice(0, selectedUser.tanidiklarimCount || 50))
              setShowList("tanidiklarim")
            }}
            onTaniyanClick={() => {
              setMutualListForUser(allTaniyanlar.slice(0, selectedUser.taniyanlarCount || 50))
              setShowList("taniyanlar")
            }}
          />

<Button className="mt-4 w-full gap-2 bg-brand text-white hover:bg-brand/90">
            <UserPlus className="h-4 w-4" />
            Tanidiklara Ekle
          </Button>

{/* Social Proof Line - Directly under the button */}
          {selectedUser.mutualCount && selectedUser.mutualCount > 0 && (
            <p className="mt-3 text-center text-[13px] text-muted-foreground">
              Tanidigin{" "}
              <button
                onClick={() => handleOpenMutualList(selectedUser)}
                className="font-medium text-brand hover:underline"
              >
                {selectedUser.mutualCount} kisi
              </button>{" "}
              bu kisiyi taniyor
            </p>
          )}
        </div>

{/* Tabs - Same as own profile */}
        <div className="flex gap-2 overflow-x-auto bg-background px-4 pb-2">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={cn(
                "whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
                activeTab === tab.id ? "bg-brand/10 text-brand" : "text-muted-foreground hover:bg-muted",
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>

{/* Tab Content - Full Profile */}
        <div className="flex-1 overflow-y-auto p-4">
          {activeTab === "board" && (
            <div className="space-y-4">
              {/* Communities Section with Logos */}
              <CommunitiesSection communitiesList={communities.slice(0, 3)} />

{/* Board Notes */}
              <div className="rounded-xl bg-background p-4">
                <div className="mb-3 flex items-center justify-between">
                  <h2 className="text-sm font-medium text-muted-foreground">Pano Notlari</h2>
                  <Button size="sm" variant="ghost" className="gap-1 text-brand hover:bg-brand/10 hover:text-brand">
                    <Plus className="h-4 w-4" />
                    Not Yaz
                  </Button>
                </div>
                <div className="space-y-3">
                  {boardNotes.slice(0, 3).map((note) => (
                    <div key={note.id} className="rounded-lg border border-border p-3">
                      <div className="flex items-center gap-2">
                        <Avatar className="h-8 w-8">
                          <AvatarImage src={note.author.avatar || "/placeholder.svg"} />
                          <AvatarFallback>{note.author.name[0]}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <span className="text-sm font-medium">{note.author.name}</span>
                          <span className="ml-2 text-xs text-muted-foreground">{note.time}</span>
                        </div>
                      </div>
                      <p className="mt-2 text-sm text-foreground">{note.content}</p>
                    </div>
                  ))}
                </div>
              </div>

{/* Titles */}
              <div className="rounded-xl bg-background p-4">
                <h2 className="mb-3 text-sm font-medium text-muted-foreground">Unvanlar</h2>
                <div className="flex flex-wrap gap-2">
                  {titles.slice(0, 2).map((title) => (
                    <span
                      key={title}
                      className="rounded-full border border-brand bg-brand/10 px-3 py-1 text-sm text-brand"
                    >
                      {title}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          )}

{activeTab === "posts" && (
            <div className="space-y-4">
              <div className="rounded-xl bg-background p-4">
                <div className="flex items-center gap-3">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={selectedUser.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{selectedUser.name[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">{selectedUser.name}</p>
                    <p className="text-xs text-muted-foreground">3 gun once</p>
                  </div>
                </div>
                <p className="mt-3 text-sm">Bugun harika bir etkinlik vardi, katilan herkese tesekkurler!</p>
              </div>
              <div className="rounded-xl bg-background p-4">
                <div className="flex items-center gap-3">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={selectedUser.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{selectedUser.name[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">{selectedUser.name}</p>
                    <p className="text-xs text-muted-foreground">1 hafta once</p>
                  </div>
                </div>
                <p className="mt-3 text-sm">Yeni projemiz icin geri bildirimlerinizi bekliyoruz!</p>
              </div>
            </div>
          )}

{activeTab === "mentions" && (
            <div className="space-y-4">
              <div className="rounded-xl bg-background p-4">
                <div className="flex items-center gap-3">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src="/young-turkish-woman.jpg" />
                    <AvatarFallback>E</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">Elif K.</p>
                    <p className="text-xs text-muted-foreground">2 gun once</p>
                  </div>
                </div>
                <p className="mt-3 text-sm">
                  <span className="text-brand">@{selectedUser.username?.slice(1)}</span> cok guzel bir paylasim olmus!
                </p>
              </div>
            </div>
          )}

{activeTab === "events" && (
            <div className="space-y-4">
              <h3 className="text-sm font-medium text-muted-foreground">Yaklasan Etkinlikler</h3>
              {userEvents
                .filter((e) => !e.isPast)
                .map((event) => (
                  <div key={event.id} className="rounded-xl bg-background p-4">
                    <h4 className="font-medium">{event.title}</h4>
                    <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <Calendar className="h-4 w-4" />
                        {event.date}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        {event.location}
                      </span>
                    </div>
                  </div>
                ))}

<h3 className="mt-6 text-sm font-medium text-muted-foreground">Gecmis Etkinlikler</h3>
              {userEvents
                .filter((e) => e.isPast)
                .map((event) => (
                  <div key={event.id} className="rounded-xl bg-background p-4 opacity-70">
                    <h4 className="font-medium">{event.title}</h4>
                    <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <Calendar className="h-4 w-4" />
                        {event.date}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        {event.location}
                      </span>
                    </div>
                  </div>
                ))}
            </div>
          )}
        </div>
      </div>
    )
  }

// Mutual Connections List View
  if (showList === "mutual") {
    return (
      <div className="flex flex-col bg-muted">
        <div className="flex items-center justify-between border-b border-border bg-background px-4 py-3">
          <div className="flex items-center gap-3">
            <button onClick={() => setShowList(null)} className="p-1">
              <ArrowLeft className="h-5 w-5" />
            </button>
            <span className="font-medium">Ortak Tanidiklar</span>
          </div>
          <span className="text-sm text-muted-foreground">{mutualListForUser.length} kisi</span>
        </div>
        <div className="flex-1 overflow-y-auto">
          {mutualListForUser.map((user) => (
            <button
              key={user.id}
              onClick={() => {
                setShowList(null)
                setSelectedUser(user)
              }}
              className="flex w-full items-center gap-3 border-b border-border bg-background px-4 py-3 text-left hover:bg-muted/50"
            >
              <Avatar className="h-12 w-12">
                <AvatarImage src={user.avatar || "/placeholder.svg"} />
                <AvatarFallback>{user.name[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <span className="font-medium">{user.name}</span>
                <p className="text-sm text-muted-foreground">{user.bio}</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </button>
          ))}
        </div>
      </div>
    )
  }

// Tanidiklarim or Taniyanlar List View
  if (showList) {
    const listData = showList === "tanidiklarim" ? allTanidiklarim : allTaniyanlar
    const listTitle = showList === "tanidiklarim" ? "Tanidiklar" : "Taniyanlar"

return (
      <div className="flex flex-col bg-muted">
        <div className="flex items-center justify-between border-b border-border bg-background px-4 py-3">
          <div className="flex items-center gap-3">
            <button onClick={() => setShowList(null)} className="p-1">
              <ArrowLeft className="h-5 w-5" />
            </button>
            <span className="font-medium">{listTitle}</span>
          </div>
          <span className="text-sm text-muted-foreground">{listData.length} kisi</span>
        </div>
        <div className="flex-1 overflow-y-auto">
          {listData.slice(0, 50).map((user) => (
            <button
              key={user.id}
              onClick={() => setSelectedUser(user)}
              className="flex w-full items-center gap-3 border-b border-border bg-background px-4 py-3 text-left hover:bg-muted/50"
            >
              <Avatar className="h-12 w-12">
                <AvatarImage src={user.avatar || "/placeholder.svg"} />
                <AvatarFallback>{user.name[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <span className="font-medium">{user.name}</span>
                <p className="text-sm text-muted-foreground">{user.username}</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </button>
          ))}
          {listData.length > 50 && (
            <div className="bg-background px-4 py-3 text-center text-sm text-muted-foreground">
              ve {listData.length - 50} kisi daha...
            </div>
          )}
        </div>
      </div>
    )
  }

return (
    <div className="flex flex-col bg-muted">
      {/* Profile Header */}
      <div className="bg-background px-4 py-4">
        <div className="flex items-start gap-4">
          <Avatar className="h-20 w-20">
            <AvatarImage src="/my-profile-photo.jpeg" />
            <AvatarFallback>MD</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="flex items-start justify-between">
              <div>
                <h1 className="text-xl font-semibold">Muhammet Dogan</h1>
                <p className="text-muted-foreground">@mami</p>
              </div>
              <Button variant="ghost" size="icon">
                <Settings className="h-5 w-5" />
              </Button>
            </div>
            <p className="mt-1 text-sm text-muted-foreground">Buralar eskiden dutluktu</p>
          </div>
        </div>

{/* Redesigned Social Stats - No boxes, inline typography */}
        <SocialStats
          tanidikCount={127}
          taniyanCount={184}
          onTanidikClick={() => setShowList("tanidiklarim")}
          onTaniyanClick={() => setShowList("taniyanlar")}
        />

<Button className="mt-4 w-full bg-brand text-white hover:bg-brand/90">Duzenle</Button>
      </div>

{/* Tabs */}
      <div className="flex gap-2 overflow-x-auto bg-background px-4 pb-2">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={cn(
              "whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium transition-colors",
              activeTab === tab.id ? "bg-brand/10 text-brand" : "text-muted-foreground hover:bg-muted",
            )}
          >
            {tab.label}
          </button>
        ))}
      </div>

{/* Tab Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {activeTab === "board" && (
          <div className="space-y-4">
            {/* Communities Section with Logos */}
            <CommunitiesSection communitiesList={communities} />

{/* Board Notes - Wall System */}
            <div className="rounded-xl bg-background p-4">
              <div className="mb-3 flex items-center justify-between">
                <h2 className="text-sm font-medium text-muted-foreground">Pano Notlari</h2>
                <Button size="sm" variant="ghost" className="gap-1 text-brand hover:bg-brand/10 hover:text-brand">
                  <Plus className="h-4 w-4" />
                  Not Yaz
                </Button>
              </div>
              <div className="space-y-3">
                {boardNotes.map((note) => (
                  <div key={note.id} className="rounded-lg border border-border p-3">
                    <div className="flex items-center gap-2">
                      <Avatar className="h-8 w-8">
                        <AvatarImage src={note.author.avatar || "/placeholder.svg"} />
                        <AvatarFallback>{note.author.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <span className="text-sm font-medium">{note.author.name}</span>
                        <span className="ml-2 text-xs text-muted-foreground">{note.time}</span>
                      </div>
                    </div>
                    <p className="mt-2 text-sm text-foreground">{note.content}</p>
                  </div>
                ))}
              </div>
            </div>

{/* Titles - At Bottom */}
            <div className="rounded-xl bg-background p-4">
              <h2 className="mb-3 text-sm font-medium text-muted-foreground">Unvanlar</h2>
              <div className="flex flex-wrap gap-2">
                {titles.map((title) => (
                  <span
                    key={title}
                    className="rounded-full border border-brand bg-brand/10 px-3 py-1 text-sm text-brand"
                  >
                    {title}
                  </span>
                ))}
              </div>
            </div>
          </div>
        )}

{activeTab === "posts" && (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <p className="text-muted-foreground">Henuz paylasim yok</p>
          </div>
        )}

{activeTab === "mentions" && (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <p className="text-muted-foreground">Henuz etiketlenme yok</p>
          </div>
        )}

{activeTab === "events" && (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <p className="text-muted-foreground">Katildigin etkinlik yok</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/community-detail-screen.tsx" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import {
  ArrowLeft,
  Users,
  Calendar,
  MapPin,
  Shield,
  Settings,
  X,
  ChevronRight,
  BarChart3,
  Eye,
  EyeOff,
  Plus,
  Trash2,
  GripVertical,
  Pencil,
  ToggleLeft,
  ToggleRight,
  Clock,
  UserCheck,
  Activity,
  FileText,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import Image from "next/image"

// ─── Types ──────────────────────────────────────────────────────────

interface Moderator {
  id: number
  name: string
  role: string
  avatar: string
  addedDate: string
}

interface CommunityChannel {
  id: string
  name: string
  enabled: boolean
}

interface CommunityEvent {
  id: number
  title: string
  date: string
  location: string
  attendees: number
}

interface CommunityDetailScreenProps {
  community: {
    id: string
    name: string
    description: string
    memberCount: number
    image: string
    logo?: string
    location?: string
    website?: string
  }
  onBack: () => void
}

// ─── Mock Data ──────────────────────────────────────────────────────

const communityLogos: Record<string, string> = {
  emsi: "/community-logos/emsi-logo.jpg",
  tech: "/community-logos/tech-logo.jpg",
  design: "/community-logos/design-logo.jpg",
  music: "/community-logos/music-logo.jpg",
}

const moderators: Moderator[] = [
  { id: 1, name: "Muhammet Dogan", role: "Kurucu", avatar: "/my-profile-photo.jpeg", addedDate: "2024-01-15" },
  { id: 2, name: "Elif Kaya", role: "Baskan Yardimcisi", avatar: "/young-turkish-woman.jpg", addedDate: "2024-03-01" },
  { id: 3, name: "Ahmet Yilmaz", role: "Etkinlik Sorumlusu", avatar: "/young-turkish-man.jpg", addedDate: "2024-05-12" },
  { id: 4, name: "Zeynep Aksoy", role: "Icerik Moderatoru", avatar: "/turkish-woman-student.jpg", addedDate: "2024-07-20" },
  { id: 5, name: "Burak Demir", role: "Topluluk Iliskileri", avatar: "/turkish-man-professional.jpg", addedDate: "2024-09-05" },
]

const communityEvents: CommunityEvent[] = [
  { id: 1, title: "Haftalik Bulusma", date: "25.02.2026 19:00", location: "Online - Google Meet", attendees: 23 },
  { id: 2, title: "Workshop: React Temelleri", date: "28.02.2026 14:00", location: "Istanbul - Kadikoy", attendees: 15 },
  { id: 3, title: "Mavi Koltuk", date: "01.03.2026 21:30", location: "youtube.com/emsitivi", attendees: 42 },
]

const defaultChannels: CommunityChannel[] = [
  { id: "announcements", name: "Duyurular", enabled: true },
  { id: "asko", name: "Asko Bi Baksana", enabled: true },
  { id: "teams", name: "Ekiplerimiz ve Kurullarimiz", enabled: true },
  { id: "forms", name: "Tum Formlar", enabled: true },
  { id: "goygoy", name: "Ekip Goygoy", enabled: true },
  { id: "showcase", name: "Cikar goster", enabled: true },
  { id: "help", name: "Yardimlaşma", enabled: false },
]

// ─── Community Detail Screen ────────────────────────────────────────

export function CommunityDetailScreen({ community, onBack }: CommunityDetailScreenProps) {
  const [activeTab, setActiveTab] = useState<CommunityTab>("pano")
  const [userRole, setUserRole] = useState<UserRole>("founder")
  const [showAdminPanel, setShowAdminPanel] = useState(false)

const logo = communityLogos[community.id] || community.image

const tabs: { id: CommunityTab; label: string }[] = [
    { id: "pano", label: "Pano" },
    { id: "events", label: "Etkinlikler" },
    { id: "moderators", label: "Moderatorler" },
    { id: "info", label: "Bilgi" },
  ]

const communityTaglines: Record<string, string> = {
    emsi: "Sosyal bag kuran, birlikte ureten bir topluluk",
    tech: "Teknoloji tutkusuyla birlesiyoruz",
    design: "Tasarimla hayata dokunanlar",
    music: "Muzikle birbirine baglananlar",
  }

const communityCities: Record<string, string> = {
    emsi: "Istanbul + 3 sehir",
    tech: "Istanbul + 1 sehir",
    design: "Ankara",
    music: "Izmir + 2 sehir",
  }

// Show admin panel if founder clicks edit
  if (showAdminPanel) {
    return <AdminPanel communityName={community.name} logo={logo} onBack={() => setShowAdminPanel(false)} />
  }

return (
    <div className="flex h-full flex-col bg-muted">
      {/* Role Switcher (for testing) */}
      <div className="flex items-center gap-1 bg-foreground/5 px-3 py-1.5">
        <span className="mr-1 text-[10px] uppercase tracking-wider text-muted-foreground">Rol:</span>
        {(["founder", "member", "non-member"] as UserRole[]).map((role) => (
          <button
            key={role}
            onClick={() => setUserRole(role)}
            className={cn(
              "rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors",
              userRole === role ? "bg-brand text-white" : "text-muted-foreground hover:bg-muted",
            )}
          >
            {role === "founder" ? "Kurucu" : role === "member" ? "Uye" : "Uye Degil"}
          </button>
        ))}
      </div>

{/* Header */}
      <div className="flex items-center gap-3 bg-background px-4 py-3">
        <button onClick={onBack} className="text-foreground">
          <ArrowLeft className="h-6 w-6" />
        </button>
        <h1 className="flex-1 text-lg font-semibold">{community.name}</h1>
      </div>

{/* Hero Section - Community Logo centered, soft gradient bg */}
      <div className="relative flex h-44 items-center justify-center overflow-hidden bg-gradient-to-br from-brand/20 via-brand/10 to-brand/5">
        {/* Subtle pattern dots */}
        <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
        <div className="relative">
          <div className="h-24 w-24 overflow-hidden rounded-full border-4 border-background shadow-xl">
            <Image
              src={logo || "/placeholder.svg"}
              alt={community.name}
              width={96}
              height={96}
              className="h-full w-full object-cover"
            />
          </div>
        </div>
      </div>

{/* Identity Block */}
      <div className="bg-background px-4 pb-4 pt-3">
        <h2 className="text-center text-xl font-bold">{community.name}</h2>
        <p className="mt-0.5 text-center text-sm text-muted-foreground">
          {community.memberCount.toLocaleString()} aktif uye{" "}
          <span className="mx-1">{"/"}</span>{" "}
          {communityCities[community.id] || community.location || "Turkiye"}
        </p>
        <p className="mt-1.5 text-center text-[13px] text-muted-foreground/70 italic">
          {communityTaglines[community.id] || community.description}
        </p>

{/* Membership Button - State-Based */}
        {userRole === "founder" ? (
          <Button
            onClick={() => setShowAdminPanel(true)}
            className="mt-4 w-full gap-2 bg-amber-500 text-white hover:bg-amber-600"
          >
            <Settings className="h-4 w-4" />
            Toplulugu Duzenle
          </Button>
        ) : userRole === "member" ? (
          <Button
            className="mt-4 w-full gap-2 border-emerald-500 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
            variant="outline"
          >
            <UserCheck className="h-4 w-4" />
            Katildin
          </Button>
        ) : (
          <Button className="mt-4 w-full gap-2 bg-brand text-white hover:bg-brand/90">
            <Plus className="h-4 w-4" />
            Katil
          </Button>
        )}
      </div>

{/* Tabs */}
      <div className="flex border-b border-border bg-background">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={cn(
              "flex-1 border-b-2 py-3 text-sm font-medium transition-colors",
              activeTab === tab.id
                ? "border-brand text-brand"
                : "border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            {tab.label}
          </button>
        ))}
      </div>

{/* Tab Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {activeTab === "pano" && <PanoTab communityId={community.id} memberCount={community.memberCount} />}
        {activeTab === "events" && <EventsTab events={communityEvents} />}
        {activeTab === "moderators" && <ModeratorsTab />}
        {activeTab === "info" && <InfoTab community={community} />}
      </div>
    </div>
  )
}

// ─── Pano Tab (Informational Panel, NOT a feed) ─────────────────────

function PanoTab({ communityId, memberCount }: { communityId: string; memberCount: number }) {
  const foundedDates: Record<string, string> = {
    emsi: "Ocak 2024",
    tech: "Mart 2024",
    design: "Haziran 2024",
    music: "Eylul 2024",
  }

const todayActive: Record<string, number> = {
    emsi: 187,
    tech: 64,
    design: 28,
    music: 19,
  }

const stats = [
    {
      icon: <Clock className="h-5 w-5 text-brand" />,
      label: "Kurulus Zamani",
      value: foundedDates[communityId] || "2024",
    },
    {
      icon: <Users className="h-5 w-5 text-brand" />,
      label: "Toplam Uye Sayisi",
      value: memberCount.toLocaleString(),
    },
    {
      icon: <Activity className="h-5 w-5 text-emerald-500" />,
      label: "Bugun Aktif Uye",
      value: (todayActive[communityId] || 12).toString(),
    },
  ]

return (
    <div className="space-y-3">
      {stats.map((stat, idx) => (
        <div
          key={idx}
          className="flex items-center gap-4 rounded-xl bg-background p-4 shadow-sm"
        >
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
            {stat.icon}
          </div>
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">{stat.label}</p>
            <p className="text-lg font-bold">{stat.value}</p>
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── Events Tab ─────────────────────────────────────────────────────

function EventsTab({ events }: { events: CommunityEvent[] }) {
  return (
    <div className="space-y-3">
      {events.map((event) => (
        <div key={event.id} className="rounded-xl bg-background p-4 shadow-sm">
          <h3 className="font-semibold">{event.title}</h3>
          <div className="mt-2 space-y-1.5">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Calendar className="h-4 w-4" />
              <span>{event.date}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <MapPin className="h-4 w-4" />
              <span>{event.location}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Users className="h-4 w-4" />
              <span>{event.attendees} katilimci</span>
            </div>
          </div>
          <Button size="sm" className="mt-3 w-full bg-brand text-white hover:bg-brand/90">
            Katil
          </Button>
        </div>
      ))}
    </div>
  )
}

// ─── Moderators Tab ─────────────────────────────────────────────────

function ModeratorsTab() {
  return (
    <div className="space-y-2">
      {moderators.map((mod, idx) => (
        <div
          key={mod.id}
          className="flex items-center gap-3 rounded-xl bg-background p-3 shadow-sm"
        >
          <span className="w-5 text-center text-xs font-medium text-muted-foreground">{idx + 1}</span>
          <Avatar className="h-12 w-12">
            <AvatarImage src={mod.avatar || "/placeholder.svg"} />
            <AvatarFallback>{mod.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <span className="font-medium">{mod.name}</span>
            <div className="flex items-center gap-1">
              <Shield className="h-3 w-3 text-brand" />
              <p className="text-sm text-muted-foreground">{mod.role}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── Info Tab ───────────────────────────────────────────────────────

function InfoTab({ community }: { community: CommunityDetailScreenProps["community"] }) {
  return (
    <div className="space-y-4">
      <div className="rounded-xl bg-background p-4 shadow-sm">
        <h3 className="font-semibold">Hakkinda</h3>
        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{community.description}</p>
      </div>

<div className="rounded-xl bg-background p-4 shadow-sm">
        <h3 className="font-semibold">Detaylar</h3>
        <div className="mt-2 space-y-2.5">
          <div className="flex items-center gap-2 text-sm">
            <Users className="h-4 w-4 text-muted-foreground" />
            <span>{community.memberCount} uye</span>
          </div>
          {community.location && (
            <div className="flex items-center gap-2 text-sm">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <span>{community.location}</span>
            </div>
          )}
        </div>
      </div>

<div className="rounded-xl bg-background p-4 shadow-sm">
        <h3 className="font-semibold">Kurallar</h3>
        <ul className="mt-2 space-y-2 text-sm leading-relaxed text-muted-foreground">
          <li>1. Saygili olun ve topluluk uyelerine nazik davranin.</li>
          <li>2. Spam ve reklam iceriklerden kacinin.</li>
          <li>3. Konu disi paylasimlar yapmayin.</li>
          <li>4. Kisisel bilgileri paylasmaktan kacinin.</li>
        </ul>
      </div>
    </div>
  )
}

// ─── Admin Panel (Toplulugu Duzenle) ────────────────────────────────

function AdminPanel({
  communityName,
  logo,
  onBack,
}: {
  communityName: string
  logo: string
  onBack: () => void
}) {
  const [activeSection, setActiveSection] = useState<AdminSection>("main")

if (activeSection !== "main") {
    return (
      <AdminSubSection
        section={activeSection}
        communityName={communityName}
        logo={logo}
        onBack={() => setActiveSection("main")}
      />
    )
  }

const menuItems: { id: AdminSection; icon: React.ReactNode; label: string; desc: string }[] = [
    { id: "info", icon: <Pencil className="h-5 w-5" />, label: "Topluluk Bilgileri", desc: "Ad, aciklama, logo, arka plan" },
    { id: "moderators", icon: <Shield className="h-5 w-5" />, label: "Moderatorler", desc: "Ekle, kaldir, sirala" },
    { id: "channels", icon: <FileText className="h-5 w-5" />, label: "Kanallar", desc: "Ac/kapat, yeniden adlandir" },
    { id: "events", icon: <Calendar className="h-5 w-5" />, label: "Etkinlikler", desc: "Olustur, duzenle, sil" },
    { id: "visibility", icon: <Eye className="h-5 w-5" />, label: "Gizlilik & Erisim", desc: "Herkese acik / ozel, onay" },
    { id: "analytics", icon: <BarChart3 className="h-5 w-5" />, label: "Analitik", desc: "Uye, aktivite, paylasim" },
  ]

return (
    <div className="flex h-full flex-col bg-muted">
      {/* Header */}
      <div className="flex items-center gap-3 bg-background px-4 py-3">
        <button onClick={onBack} className="text-foreground">
          <ArrowLeft className="h-6 w-6" />
        </button>
        <h1 className="flex-1 text-lg font-semibold">Toplulugu Duzenle</h1>
      </div>

{/* Community Preview */}
      <div className="flex items-center gap-3 bg-background px-4 pb-4">
        <div className="h-12 w-12 overflow-hidden rounded-full border-2 border-border">
          <Image src={logo || "/placeholder.svg"} alt={communityName} width={48} height={48} className="h-full w-full object-cover" />
        </div>
        <div>
          <p className="font-semibold">{communityName}</p>
          <p className="text-xs text-muted-foreground">Yonetim Paneli</p>
        </div>
      </div>

{/* Menu Items */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="space-y-2">
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveSection(item.id)}
              className="flex w-full items-center gap-3 rounded-xl bg-background p-4 text-left shadow-sm transition-colors hover:bg-muted/50"
            >
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-brand/10 text-brand">
                {item.icon}
              </div>
              <div className="flex-1">
                <p className="font-medium">{item.label}</p>
                <p className="text-xs text-muted-foreground">{item.desc}</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

// ─── Admin Sub Sections ─────────────────────────────────────────────

function AdminSubSection({
  section,
  communityName,
  logo,
  onBack,
}: {
  section: AdminSection
  communityName: string
  logo: string
  onBack: () => void
}) {
  const titles: Record<string, string> = {
    info: "Topluluk Bilgileri",
    moderators: "Moderatorler",
    channels: "Kanallar",
    events: "Etkinlikler",
    visibility: "Gizlilik & Erisim",
    analytics: "Analitik",
  }

return (
    <div className="flex h-full flex-col bg-muted">
      <div className="flex items-center gap-3 bg-background px-4 py-3">
        <button onClick={onBack} className="text-foreground">
          <ArrowLeft className="h-6 w-6" />
        </button>
        <h1 className="flex-1 text-lg font-semibold">{titles[section]}</h1>
      </div>

<div className="flex-1 overflow-y-auto p-4">
        {section === "info" && <AdminInfoSection communityName={communityName} logo={logo} />}
        {section === "moderators" && <AdminModeratorsSection />}
        {section === "channels" && <AdminChannelsSection />}
        {section === "events" && <AdminEventsSection />}
        {section === "visibility" && <AdminVisibilitySection />}
        {section === "analytics" && <AdminAnalyticsSection />}
      </div>
    </div>
  )
}

// ─── Admin: Info ────────────────────────────────────────────────────

function AdminInfoSection({ communityName, logo }: { communityName: string; logo: string }) {
  const [name, setName] = useState(communityName)
  const [description, setDescription] = useState("Sosyal bag kuran, birlikte ureten bir topluluk")
  const [cities, setCities] = useState("Istanbul, Ankara, Izmir, Bursa")

return (
    <div className="space-y-4">
      {/* Logo & Hero */}
      <div className="rounded-xl bg-background p-4 shadow-sm">
        <h3 className="font-semibold">Logo</h3>
        <div className="mt-3 flex items-center gap-3">
          <div className="h-16 w-16 overflow-hidden rounded-full border-2 border-border">
            <Image src={logo || "/placeholder.svg"} alt="logo" width={64} height={64} className="h-full w-full object-cover" />
          </div>
          <Button variant="outline" size="sm" className="bg-transparent">
            Logo Degistir
          </Button>
        </div>
        <div className="mt-4">
          <p className="text-sm text-muted-foreground">Arka Plan</p>
          <div className="mt-2 h-20 w-full rounded-lg bg-gradient-to-br from-brand/20 via-brand/10 to-brand/5" />
          <Button variant="outline" size="sm" className="mt-2 bg-transparent">
            Arka Plan Degistir
          </Button>
        </div>
      </div>

{/* Name */}
      <div className="rounded-xl bg-background p-4 shadow-sm">
        <label className="text-sm font-medium">Topluluk Adi</label>
        <Input value={name} onChange={(e) => setName(e.target.value)} className="mt-1" />
      </div>

{/* Description */}
      <div className="rounded-xl bg-background p-4 shadow-sm">
        <label className="text-sm font-medium">Aciklama</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={3}
          className="mt-1 w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand"
        />
      </div>

{/* Active Cities */}
      <div className="rounded-xl bg-background p-4 shadow-sm">
        <label className="text-sm font-medium">Aktif Sehirler</label>
        <Input value={cities} onChange={(e) => setCities(e.target.value)} className="mt-1" />
        <p className="mt-1 text-xs text-muted-foreground">Virgul ile ayirin</p>
      </div>

<Button className="w-full bg-brand text-white hover:bg-brand/90">Kaydet</Button>
    </div>
  )
}

// ─── Admin: Moderators ──────────────────────────────────────────────

function AdminModeratorsSection() {
  const [mods, setMods] = useState(moderators)

const removeMod = (id: number) => {
    setMods((prev) => prev.filter((m) => m.id !== id))
  }

return (
    <div className="space-y-3">
      <Button variant="outline" className="w-full gap-2 border-dashed border-brand bg-transparent text-brand">
        <Plus className="h-4 w-4" />
        Moderator Ekle
      </Button>

{mods.map((mod, idx) => (
        <div
          key={mod.id}
          className="flex items-center gap-3 rounded-xl bg-background p-3 shadow-sm"
        >
          <GripVertical className="h-4 w-4 text-muted-foreground/50" />
          <span className="w-5 text-center text-xs font-medium text-muted-foreground">{idx + 1}</span>
          <Avatar className="h-10 w-10">
            <AvatarImage src={mod.avatar || "/placeholder.svg"} />
            <AvatarFallback>{mod.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <span className="text-sm font-medium">{mod.name}</span>
            <p className="text-xs text-muted-foreground">{mod.role}</p>
          </div>
          {mod.role !== "Kurucu" && (
            <button onClick={() => removeMod(mod.id)} className="text-red-400 hover:text-red-600">
              <Trash2 className="h-4 w-4" />
            </button>
          )}
        </div>
      ))}

<p className="text-center text-xs text-muted-foreground">
        Siralamayi degistirmek icin sürükleyip birakin
      </p>
    </div>
  )
}

// ─── Admin: Channels ────────────────────────────────────────────────

function AdminChannelsSection() {
  const [channels, setChannels] = useState(defaultChannels)

const toggleChannel = (id: string) => {
    setChannels((prev) => prev.map((ch) => (ch.id === id ? { ...ch, enabled: !ch.enabled } : ch)))
  }

return (
    <div className="space-y-2">
      {channels.map((ch) => (
        <div
          key={ch.id}
          className="flex items-center gap-3 rounded-xl bg-background p-3 shadow-sm"
        >
          <GripVertical className="h-4 w-4 text-muted-foreground/50" />
          <div className="flex-1">
            <span className={cn("text-sm font-medium", !ch.enabled && "text-muted-foreground line-through")}>
              # {ch.name}
            </span>
          </div>
          <button onClick={() => toggleChannel(ch.id)} className="text-brand">
            {ch.enabled ? (
              <ToggleRight className="h-6 w-6 text-emerald-500" />
            ) : (
              <ToggleLeft className="h-6 w-6 text-muted-foreground" />
            )}
          </button>
        </div>
      ))}
    </div>
  )
}

// ─── Admin: Events ──────────────────────────────────────────────────

function AdminEventsSection() {
  return (
    <div className="space-y-3">
      <Button className="w-full gap-2 bg-brand text-white hover:bg-brand/90">
        <Plus className="h-4 w-4" />
        Etkinlik Olustur
      </Button>

{communityEvents.map((event) => (
        <div key={event.id} className="rounded-xl bg-background p-4 shadow-sm">
          <div className="flex items-start justify-between">
            <div>
              <h3 className="font-medium">{event.title}</h3>
              <p className="mt-0.5 text-sm text-muted-foreground">{event.date}</p>
              <p className="text-sm text-muted-foreground">{event.location}</p>
            </div>
            <div className="flex gap-1">
              <button className="rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-brand">
                <Pencil className="h-4 w-4" />
              </button>
              <button className="rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-red-500">
                <Trash2 className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── Admin: Visibility ──────────────────────────────────────────────

function AdminVisibilitySection() {
  const [isPublic, setIsPublic] = useState(true)
  const [requireApproval, setRequireApproval] = useState(false)

return (
    <div className="space-y-3">
      <div className="flex items-center justify-between rounded-xl bg-background p-4 shadow-sm">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-brand/10">
            {isPublic ? <Eye className="h-5 w-5 text-brand" /> : <EyeOff className="h-5 w-5 text-muted-foreground" />}
          </div>
          <div>
            <p className="font-medium">{isPublic ? "Herkese Acik" : "Ozel"}</p>
            <p className="text-xs text-muted-foreground">
              {isPublic ? "Herkes bulabilir ve gorebilir" : "Sadece davet ile katilim"}
            </p>
          </div>
        </div>
        <button onClick={() => setIsPublic(!isPublic)}>
          {isPublic ? (
            <ToggleRight className="h-7 w-7 text-emerald-500" />
          ) : (
            <ToggleLeft className="h-7 w-7 text-muted-foreground" />
          )}
        </button>
      </div>

<div className="flex items-center justify-between rounded-xl bg-background p-4 shadow-sm">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/10">
            <Shield className="h-5 w-5 text-amber-500" />
          </div>
          <div>
            <p className="font-medium">Onay Gerekli</p>
            <p className="text-xs text-muted-foreground">
              {requireApproval ? "Katilim icin moderator onayi gerekli" : "Herkes dogrudan katilabilir"}
            </p>
          </div>
        </div>
        <button onClick={() => setRequireApproval(!requireApproval)}>
          {requireApproval ? (
            <ToggleRight className="h-7 w-7 text-emerald-500" />
          ) : (
            <ToggleLeft className="h-7 w-7 text-muted-foreground" />
          )}
        </button>
      </div>
    </div>
  )
}

// ─── Admin: Analytics ───────────────────────────────────────────────

function AdminAnalyticsSection() {
  const stats = [
    { label: "Toplam Uye", value: "1,250", change: "+23 bu hafta", positive: true },
    { label: "Bugun Aktif", value: "187", change: "+12 dunden", positive: true },
    { label: "Toplam Paylasim", value: "3,456", change: "+89 bu hafta", positive: true },
    { label: "Etkinlik Katilimi", value: "78%", change: "-2% gecen haftaya gore", positive: false },
  ]

return (
    <div className="space-y-3">
      {stats.map((stat, idx) => (
        <div key={idx} className="rounded-xl bg-background p-4 shadow-sm">
          <p className="text-sm text-muted-foreground">{stat.label}</p>
          <p className="mt-1 text-2xl font-bold">{stat.value}</p>
          <p className={cn("mt-0.5 text-xs", stat.positive ? "text-emerald-500" : "text-red-400")}>
            {stat.change}
          </p>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/screens/flow-screen.tsx"
"use client"

import { useState } from "react"
import { Plus, X, Camera, MessageSquare, HelpCircle, Users, Radar, Heart, MessageCircle, Share, MapPin, Calendar } from "lucide-react"
import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { AnnouncementBanner } from "../home/announcement-banner"
import Image from "next/image"

interface FlowPost {
  id: number
  user: { name: string; avatar: string }
  type: PostType
  content: string
  image?: string
  time: string
  likes: number
  comments: number
  eventName?: string
  location?: string
  communityName?: string
}

const flowPosts: FlowPost[] = [
  {
    id: 1,
    user: { name: "Ahmet Y.", avatar: "/young-turkish-man.jpg" },
    type: "photo",
    content: "Hafta sonu Kadikoy'de guzel bir gun gecirdik!",
    image: "/young-turkish-man-casual.jpg",
    time: "2dk once",
    likes: 24,
    comments: 5,
  },
  {
    id: 2,
    user: { name: "Elif K.", avatar: "/young-turkish-woman.jpg" },
    type: "hangout",
    content: "Aksam 7'de Besiktas'ta bulusuyoruz, gelmek isteyen var mi?",
    location: "Besiktas Meydan",
    time: "15dk once",
    likes: 18,
    comments: 12,
  },
  {
    id: 3,
    user: { name: "Mehmet D.", avatar: "/turkish-man-with-glasses.jpg" },
    type: "help",
    content: "React Native'de navigation sorunu yasiyorum, yardimci olabilecek var mi?",
    time: "25dk once",
    likes: 3,
    comments: 8,
  },
  {
    id: 4,
    user: { name: "Zeynep A.", avatar: "/turkish-woman-student.jpg" },
    type: "thought",
    content: "Bugun cok guzel bir sey fark ettim: topluluk icinde olmak insani gercekten mutlu ediyor. Hepinize tesekkurler!",
    time: "45dk once",
    likes: 67,
    comments: 14,
  },
  {
    id: 5,
    user: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" },
    type: "memory",
    content: "Gecen haftaki etkinlikten unutulmaz anlar!",
    image: "/turkish-man-with-beard.jpg",
    eventName: "Mavi Koltuk Sohbetleri",
    time: "1sa once",
    likes: 89,
    comments: 23,
  },
  {
    id: 6,
    user: { name: "Selin K.", avatar: "/turkish-woman-professional.jpg" },
    type: "question",
    content: "Istanbul'da en iyi kahve icilen yer neresi sizce? Yeni mekanlar kesfetmek istiyorum!",
    time: "2sa once",
    likes: 34,
    comments: 41,
  },
  {
    id: 7,
    user: { name: "Can B.", avatar: "/turkish-man-casual.jpg" },
    type: "community",
    content: "Tech Community'de bu hafta yapay zeka atolyesi duzenliyoruz. Kayitlar acildi!",
    communityName: "Tech Community",
    time: "3sa once",
    likes: 56,
    comments: 19,
  },
  {
    id: 8,
    user: { name: "Ayse Y.", avatar: "/professional-turkish-woman.jpg" },
    type: "hangout",
    content: "Yarin ogle yemegine cikmak isteyen var mi? Kadikoy civarinda dusunuyorum.",
    location: "Kadikoy",
    time: "4sa once",
    likes: 12,
    comments: 7,
  },
]

const typeLabels: Record<PostType, { text: string; color: string; icon: React.ReactNode }> = {
  photo: { text: "", color: "", icon: null },
  thought: { text: "", color: "", icon: null },
  help: { text: "Yardim Lazim", color: "bg-orange-100 text-orange-700", icon: <HelpCircle className="h-3 w-3" /> },
  hangout: { text: "Birlikte Gidelim", color: "bg-green-100 text-green-700", icon: <Users className="h-3 w-3" /> },
  memory: { text: "Etkinlik Anisi", color: "bg-blue-100 text-blue-700", icon: <Calendar className="h-3 w-3" /> },
  community: { text: "Topluluk", color: "bg-purple-100 text-purple-700", icon: <Users className="h-3 w-3" /> },
  question: { text: "Soru", color: "bg-cyan-100 text-cyan-700", icon: <MessageSquare className="h-3 w-3" /> },
}

export function FlowScreen() {
  const [contentSource, setContentSource] = useState<ContentSource>("everyone")
  const [showCreateMenu, setShowCreateMenu] = useState(false)

const filteredPosts = contentSource === "acquaintances" 
    ? flowPosts.slice(0, 5) 
    : flowPosts

const createOptions = [
    { id: "photo", icon: Camera, label: "Fotograf paylas", color: "bg-pink-500" },
    { id: "thought", icon: MessageSquare, label: "Aklindakini yaz", color: "bg-blue-500" },
    { id: "help", icon: HelpCircle, label: "Yardim iste", color: "bg-orange-500" },
    { id: "hangout", icon: Users, label: "Birlikte plan yap", color: "bg-green-500" },
    { id: "meet", icon: Radar, label: "Meet'te gorun", color: "bg-purple-500" },
  ]

return (
    <div className="relative flex flex-col">
      {/* Announcement Banner */}
      <AnnouncementBanner />

{/* Content Source Tabs */}
      <div className="bg-background px-4 pt-3">
        <div className="flex gap-4 border-b border-border">
          <button
            onClick={() => setContentSource("acquaintances")}
            className={cn(
              "border-b-2 pb-2.5 text-sm font-medium transition-colors",
              contentSource === "acquaintances" ? "border-brand text-brand" : "border-transparent text-muted-foreground",
            )}
          >
            Tanidiklar
          </button>
          <button
            onClick={() => setContentSource("everyone")}
            className={cn(
              "border-b-2 pb-2.5 text-sm font-medium transition-colors",
              contentSource === "everyone" ? "border-brand text-brand" : "border-transparent text-muted-foreground",
            )}
          >
            Herkes
          </button>
        </div>
      </div>

{/* Flow Feed */}
      <div className="flex-1 space-y-3 p-4 pb-24">
        {filteredPosts.map((post) => (
          <div key={post.id} className="overflow-hidden rounded-xl bg-background shadow-sm">
            {/* Post Header */}
            <div className="flex items-center gap-3 p-3">
              <Avatar className="h-10 w-10">
                <AvatarImage src={post.user.avatar || "/placeholder.svg"} />
                <AvatarFallback>{post.user.name[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium">{post.user.name}</span>
                  {typeLabels[post.type].text && (
                    <span className={cn(
                      "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium",
                      typeLabels[post.type].color
                    )}>
                      {typeLabels[post.type].icon}
                      {typeLabels[post.type].text}
                    </span>
                  )}
                </div>
                <span className="text-xs text-muted-foreground">{post.time}</span>
              </div>
            </div>

{/* Event/Community Badge */}
            {post.eventName && (
              <div className="px-3 pb-2">
                <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-600">
                  <Calendar className="h-3 w-3" />
                  {post.eventName}
                </span>
              </div>
            )}
            {post.communityName && (
              <div className="px-3 pb-2">
                <span className="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-xs text-purple-600">
                  <Users className="h-3 w-3" />
                  {post.communityName}
                </span>
              </div>
            )}

{/* Content */}
            <p className="px-3 pb-3 text-sm">{post.content}</p>

{/* Location for hangouts */}
            {post.location && (
              <div className="px-3 pb-3">
                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                  <MapPin className="h-3 w-3" />
                  {post.location}
                </span>
              </div>
            )}

{/* Image */}
            {post.image && (
              <div className="relative aspect-square w-full">
                <Image
                  src={post.image || "/placeholder.svg"}
                  alt=""
                  fill
                  className="object-cover"
                />
              </div>
            )}

{/* Actions */}
            <div className="flex items-center gap-4 border-t border-border p-3">
              <button className="flex items-center gap-1 text-muted-foreground hover:text-red-500">
                <Heart className="h-5 w-5" />
                <span className="text-sm">{post.likes}</span>
              </button>
              <button className="flex items-center gap-1 text-muted-foreground hover:text-brand">
                <MessageCircle className="h-5 w-5" />
                <span className="text-sm">{post.comments}</span>
              </button>
              <button className="ml-auto text-muted-foreground hover:text-brand">
                <Share className="h-5 w-5" />
              </button>
            </div>
          </div>
        ))}
      </div>

{/* Floating Action Button with Menu */}
      <div className="fixed bottom-24 right-4 z-30">
        {/* Create Menu */}
        {showCreateMenu && (
          <div className="mb-3 flex flex-col gap-2">
            {createOptions.map((option) => (
              <button
                key={option.id}
                className="flex items-center gap-2 rounded-full bg-background px-4 py-2 shadow-lg animate-in slide-in-from-bottom-2"
                onClick={() => setShowCreateMenu(false)}
              >
                <span className={cn("flex h-8 w-8 items-center justify-center rounded-full text-white", option.color)}>
                  <option.icon className="h-4 w-4" />
                </span>
                <span className="text-sm font-medium">{option.label}</span>
              </button>
            ))}
          </div>
        )}

{/* FAB */}
        <div className="flex flex-col items-center gap-1.5">
          <button
            onClick={() => setShowCreateMenu(!showCreateMenu)}
            className={cn(
              "flex h-14 w-14 items-center justify-center rounded-full bg-brand shadow-lg transition-all",
              showCreateMenu && "rotate-45"
            )}
          >
            {showCreateMenu ? <X className="h-7 w-7 text-white" /> : <Plus className="h-7 w-7 text-white" />}
          </button>
          {!showCreateMenu && (
            <span className="whitespace-nowrap rounded-full bg-foreground/5 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground/70 backdrop-blur-sm">
              Ne paylasmak istersin?
            </span>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/screens/meet-screen.tsx"
"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { StickyNote, Settings2, Calendar, MapPin, Eye, X, Check } from "lucide-react"

type AvailabilityStatus = "available" | "later" | "unavailable"

interface Friend {
  id: number
  name: string
  avatar: string
  status: AvailabilityStatus
  statusText: string
  lastSeen?: string
}

const friends: Friend[] = [
  // 8 Available Now - Social, inviting messages
  {
    id: 1,
    name: "Ahmet Yılmaz",
    avatar: "/young-turkish-man-smiling.jpg",
    status: "available",
    statusText: "Bir kahve icmeye var misin?",
  },
  {
    id: 2,
    name: "Elif Kaya",
    avatar: "/turkish-woman-professional.jpg",
    status: "available",
    statusText: "Aksamustu yuruyuse cikilir",
  },
  {
    id: 3,
    name: "Burak Demir",
    avatar: "/turkish-man-professional.jpg",
    status: "available",
    statusText: "Konsere gidecek var mi?",
  },
  {
    id: 4,
    name: "Selin Aksoy",
    avatar: "/young-turkish-woman-student.jpg",
    status: "available",
    statusText: "Cay sohbeti yapalim mi?",
  },
  {
    id: 5,
    name: "Emre Can",
    avatar: "/turkish-man-with-glasses.jpg",
    status: "available",
    statusText: "Film izleyecek arkadas ariyorum",
  },
  {
    id: 6,
    name: "Ayse Yildiz",
    avatar: "/professional-turkish-woman.jpg",
    status: "available",
    statusText: "Kahvalti icin bulusabiliriz",
  },
  {
    id: 7,
    name: "Kaan Ozturk",
    avatar: "/young-turkish-man-casual.jpg",
    status: "available",
    statusText: "Basketbol oynayalim mi?",
  },
  {
    id: 8,
    name: "Deniz Korkmaz",
    avatar: "/turkish-woman-young.jpg",
    status: "available",
    statusText: "Yeni acilan kafeye gidelim!",
  },
  // 5 Available Later - Planning ahead
  {
    id: 9,
    name: "Mehmet Demir",
    avatar: "/turkish-man-with-beard.jpg",
    status: "later",
    statusText: "18:00'da bira icmeye gidelim",
  },
  {
    id: 10,
    name: "Zeynep Aksoy",
    avatar: "/turkish-woman-student.jpg",
    status: "later",
    statusText: "Aksam 8'de sinemaya var",
  },
  {
    id: 11,
    name: "Ali Yilmaz",
    avatar: "/turkish-man-casual.jpg",
    status: "later",
    statusText: "Is cikisi bi sey yapalim",
  },
  {
    id: 12,
    name: "Ceren Kaya",
    avatar: "/turkish-woman-professional.jpg",
    status: "later",
    statusText: "19:30 sonrasi müsaitim",
  },
  {
    id: 13,
    name: "Oguz Sahin",
    avatar: "/turkish-man-professional.jpg",
    status: "later",
    statusText: "Toplanti bitsin konusalim",
  },
  // 20 Unavailable
  {
    id: 14,
    name: "Can Bulut",
    avatar: "/turkish-man-casual.jpg",
    status: "unavailable",
    statusText: "Bugun musait degilim",
    lastSeen: "2 saat once",
  },
  {
    id: 15,
    name: "Selin Korkmaz",
    avatar: "/turkish-woman-young.jpg",
    status: "unavailable",
    statusText: "Mesgulum",
    lastSeen: "5 saat once",
  },
  {
    id: 16,
    name: "Berk Aydin",
    avatar: "/young-turkish-man.jpg",
    status: "unavailable",
    statusText: "Sinavlara calisiyorum",
    lastSeen: "1 saat once",
  },
  {
    id: 17,
    name: "Gamze Celik",
    avatar: "/young-turkish-woman.jpg",
    status: "unavailable",
    statusText: "Tatildeyim",
    lastSeen: "3 gun once",
  },
  {
    id: 18,
    name: "Murat Ozkan",
    avatar: "/turkish-man-with-glasses.jpg",
    status: "unavailable",
    statusText: "Yogun donem",
    lastSeen: "30dk once",
  },
  {
    id: 19,
    name: "Ipek Demir",
    avatar: "/turkish-woman-student.jpg",
    status: "unavailable",
    statusText: "Proje teslimi var",
    lastSeen: "4 saat once",
  },
  {
    id: 20,
    name: "Cem Yildirim",
    avatar: "/turkish-man-professional.jpg",
    status: "unavailable",
    statusText: "Is seyahati",
    lastSeen: "1 gun once",
  },
  {
    id: 21,
    name: "Basak Kara",
    avatar: "/professional-turkish-woman.jpg",
    status: "unavailable",
    statusText: "Rahatsizim",
    lastSeen: "6 saat once",
  },
  {
    id: 22,
    name: "Tolga Aslan",
    avatar: "/young-turkish-man-casual.jpg",
    status: "unavailable",
    statusText: "Aile ziyareti",
    lastSeen: "2 gun once",
  },
  {
    id: 23,
    name: "Nazli Gunes",
    avatar: "/turkish-woman-young.jpg",
    status: "unavailable",
    statusText: "Final haftasi",
    lastSeen: "8 saat once",
  },
  {
    id: 24,
    name: "Serkan Ay",
    avatar: "/turkish-man-with-beard.jpg",
    status: "unavailable",
    statusText: "Toplantida",
    lastSeen: "15dk once",
  },
  {
    id: 25,
    name: "Pelin Sen",
    avatar: "/young-turkish-woman-student.jpg",
    status: "unavailable",
    statusText: "Bugun yok",
    lastSeen: "3 saat once",
  },
  {
    id: 26,
    name: "Onur Koc",
    avatar: "/turkish-man-casual.jpg",
    status: "unavailable",
    statusText: "Spor yapiyorum",
    lastSeen: "1 saat once",
  },
  {
    id: 27,
    name: "Melis Tan",
    avatar: "/turkish-woman-professional.jpg",
    status: "unavailable",
    statusText: "Workshop'tayim",
    lastSeen: "45dk once",
  },
  {
    id: 28,
    name: "Baris Aktas",
    avatar: "/turkish-man-professional.jpg",
    status: "unavailable",
    statusText: "Yolda",
    lastSeen: "20dk once",
  },
  {
    id: 29,
    name: "Dilan Yavuz",
    avatar: "/turkish-woman-student.jpg",
    status: "unavailable",
    statusText: "Ders var",
    lastSeen: "2 saat once",
  },
  {
    id: 30,
    name: "Kerem Dogan",
    avatar: "/young-turkish-man-smiling.jpg",
    status: "unavailable",
    statusText: "Offline",
    lastSeen: "5 gun once",
  },
  {
    id: 31,
    name: "Asli Cetin",
    avatar: "/professional-turkish-woman.jpg",
    status: "unavailable",
    statusText: "Ucusta",
    lastSeen: "12 saat once",
  },
  {
    id: 32,
    name: "Efe Kilic",
    avatar: "/turkish-man-with-glasses.jpg",
    status: "unavailable",
    statusText: "Calisiyorum",
    lastSeen: "7 saat once",
  },
  {
    id: 33,
    name: "Yagmur Erdogan",
    avatar: "/turkish-woman-young.jpg",
    status: "unavailable",
    statusText: "Musait degil",
    lastSeen: "10 saat once",
  },
]

const statusColors: Record<AvailabilityStatus, string> = {
  available: "bg-green-500",
  later: "bg-yellow-500",
  unavailable: "bg-red-500",
}

const statusLabels: Record<AvailabilityStatus, string> = {
  available: "Su an musait",
  later: "Sonra musait",
  unavailable: "Musait degil",
}

export function MeetScreen() {
  const [isAvailable, setIsAvailable] = useState(false)
  const [showNoteInput, setShowNoteInput] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [availabilityNote, setAvailabilityNote] = useState("")
  const [plannedDate, setPlannedDate] = useState("")
  const [plannedTime, setPlannedTime] = useState("")
  const [selectedLocation, setSelectedLocation] = useState("Ankara")

const groupedFriends = {
    available: friends.filter((f) => f.status === "available"),
    later: friends.filter((f) => f.status === "later"),
    unavailable: friends.filter((f) => f.status === "unavailable"),
  }

return (
    <div className="flex flex-col bg-background">
      {/* Top Control Bar */}
      <div className="border-b border-border px-4 py-3">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-lg font-semibold">Meet</h1>
            <p className="text-xs text-muted-foreground">Kim musait? Kim ne yapmak istiyor?</p>
          </div>
          <div className="flex items-center gap-2">
            <button 
              onClick={() => setShowNoteInput(!showNoteInput)}
              className="rounded-lg p-2 hover:bg-muted"
            >
              <StickyNote className="h-5 w-5 text-muted-foreground" />
            </button>
            <button 
              onClick={() => setShowSettings(!showSettings)}
              className="rounded-lg p-2 hover:bg-muted"
            >
              <Settings2 className="h-5 w-5 text-muted-foreground" />
            </button>
          </div>
        </div>

{/* Availability Toggle Slider */}
        <div className="mt-3 flex items-center gap-3">
          <button
            onClick={() => setIsAvailable(!isAvailable)}
            className={cn(
              "relative h-8 w-16 rounded-full transition-colors",
              isAvailable ? "bg-green-500" : "bg-red-500"
            )}
          >
            <span
              className={cn(
                "absolute top-1 h-6 w-6 rounded-full bg-white shadow-md transition-all",
                isAvailable ? "left-9" : "left-1"
              )}
            />
          </button>
          <span className={cn(
            "text-sm font-medium",
            isAvailable ? "text-green-600" : "text-red-600"
          )}>
            {isAvailable ? "Musaitim" : "Musait Degilim"}
          </span>
        </div>

{/* Note Input */}
        {showNoteInput && (
          <div className="mt-3">
            <input
              type="text"
              value={availabilityNote}
              onChange={(e) => setAvailabilityNote(e.target.value)}
              placeholder="Bugun ne yapmak istersin? (orn: Kahve icmeye var mi?)"
              className="w-full rounded-lg border border-border bg-muted/50 px-3 py-2 text-sm focus:border-brand focus:outline-none"
            />
          </div>
        )}

{/* Settings Panel */}
        {showSettings && (
          <div className="mt-3 space-y-4 rounded-lg border border-border bg-muted/30 p-3">
            {/* Plan Future Availability */}
            <div>
              <div className="flex items-center gap-2 text-sm font-medium">
                <Calendar className="h-4 w-4 text-brand" />
                Plan (Sonra musait olarak gorunursun)
              </div>
              <div className="mt-2 flex gap-2">
                <input
                  type="date"
                  value={plannedDate}
                  onChange={(e) => setPlannedDate(e.target.value)}
                  className="flex-1 rounded-lg border border-border bg-background px-2 py-1.5 text-sm"
                />
                <input
                  type="time"
                  value={plannedTime}
                  onChange={(e) => setPlannedTime(e.target.value)}
                  className="w-24 rounded-lg border border-border bg-background px-2 py-1.5 text-sm"
                />
              </div>
            </div>

{/* Sort by Location */}
            <div>
              <div className="flex items-center gap-2 text-sm font-medium">
                <MapPin className="h-4 w-4 text-brand" />
                Konuma Gore Sirala
              </div>
              <select
                value={selectedLocation}
                onChange={(e) => setSelectedLocation(e.target.value)}
                className="mt-2 w-full rounded-lg border border-border bg-background px-2 py-1.5 text-sm"
              >
                <option value="Ankara">Ankara</option>
                <option value="Istanbul">Istanbul</option>
                <option value="Izmir">Izmir</option>
                <option value="Antalya">Antalya</option>
              </select>
            </div>

{/* Visibility Control */}
            <div>
              <div className="flex items-center gap-2 text-sm font-medium">
                <Eye className="h-4 w-4 text-brand" />
                Gorunurluk
              </div>
              <div className="mt-2 space-y-2">
                <label className="flex items-center gap-2">
                  <input type="radio" name="visibility" defaultChecked className="text-brand" />
                  <span className="text-sm">Herkes gorebilir</span>
                </label>
                <label className="flex items-center gap-2">
                  <input type="radio" name="visibility" className="text-brand" />
                  <span className="text-sm">Sadece tanidiklarim</span>
                </label>
                <label className="flex items-center gap-2">
                  <input type="radio" name="visibility" className="text-brand" />
                  <span className="text-sm">Secili kisiler</span>
                </label>
              </div>
            </div>
          </div>
        )}
      </div>

<div className="flex-1 overflow-y-auto">
        {(["available", "later", "unavailable"] as AvailabilityStatus[]).map((status) => (
          <div key={status} className="border-b border-border">
            <div className="flex items-center gap-2 bg-muted/50 px-4 py-2">
              <span className={cn("h-2.5 w-2.5 rounded-full", statusColors[status])} />
              <span className="text-sm font-medium">{statusLabels[status]}</span>
              <span className="text-sm text-muted-foreground">({groupedFriends[status].length})</span>
            </div>

export default function Home() {
  return <MobileAppShell />
}
[V0_FILE]typescriptreact:file="components/mobile-app-shell.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { BottomNavigation } from "./navigation/bottom-navigation"
import { SideMenu } from "./navigation/side-menu"
import { FlowScreen } from "./screens/flow-screen"
import { EventsScreen } from "./screens/events-screen"
import { MeetScreen } from "./screens/meet-screen"
import { NotificationsScreen } from "./screens/notifications-screen"
import { ProfileScreen } from "./screens/profile-screen"
import { SearchScreen } from "./screens/search-screen"
import { Header } from "./navigation/header"

export function MobileAppShell() {
  const [activeScreen, setActiveScreen] = useState<ActiveScreen>("flow")
  const [sideMenuOpen, setSideMenuOpen] = useState(false)
  const [activeCommunity, setActiveCommunity] = useState("emsi")

const renderScreen = () => {
    switch (activeScreen) {
      case "flow":
        return <FlowScreen />
      case "events":
        return <EventsScreen />
      case "meet":
        return <MeetScreen />
      case "notifications":
        return <NotificationsScreen />
      case "profile":
        return <ProfileScreen />
      case "search":
        return <SearchScreen onBack={() => setActiveScreen("flow")} />
      default:
        return <FlowScreen />
    }
  }

return (
    <div className="relative mx-auto flex h-[100dvh] max-w-md flex-col overflow-hidden bg-muted">
      {/* Side Menu Overlay */}
      <SideMenu
        isOpen={sideMenuOpen}
        onClose={() => setSideMenuOpen(false)}
        activeCommunity={activeCommunity}
        onCommunityChange={setActiveCommunity}
      />

{/* Header */}
      {activeScreen !== "search" && (
        <Header onMenuClick={() => setSideMenuOpen(true)} onSearchClick={() => setActiveScreen("search")} />
      )}

{/* Main Content */}
      <main className="flex-1 overflow-y-auto">{renderScreen()}</main>

{/* Bottom Navigation */}
      <BottomNavigation activeScreen={activeScreen} onNavigate={setActiveScreen} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navigation/header.tsx" isMerged="true"
"use client"

import { Menu, Search, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

interface HeaderProps {
  onMenuClick: () => void
  onSearchClick: () => void
}

export function Header({ onMenuClick, onSearchClick }: HeaderProps) {
  return (
    <header className="flex items-center justify-between bg-background px-4 py-3">
      <Button variant="ghost" size="icon" onClick={onMenuClick} className="text-foreground">
        <Menu className="h-6 w-6" />
      </Button>

{/* Meeting Challenge Logo */}
      <div className="flex items-center">
        <svg viewBox="0 0 180 40" className="h-8 w-auto">
          <text x="5" y="18" className="fill-brand font-semibold" style={{ fontSize: "14px", fontFamily: "system-ui" }}>
            Meeting
          </text>
          <text x="5" y="34" className="fill-brand font-semibold" style={{ fontSize: "14px", fontFamily: "system-ui" }}>
            Challenge
          </text>
          <rect x="0" y="5" width="2" height="30" className="fill-brand" rx="1" />
          <rect x="85" y="5" width="2" height="30" className="fill-brand" rx="1" />
          <path d="M0 5 L5 5" className="stroke-brand" strokeWidth="2" fill="none" />
          <path d="M0 35 L5 35" className="stroke-brand" strokeWidth="2" fill="none" />
          <path d="M82 5 L87 5" className="stroke-brand" strokeWidth="2" fill="none" />
          <path d="M82 35 L87 35" className="stroke-brand" strokeWidth="2" fill="none" />
        </svg>
      </div>

<div className="flex items-center gap-1">
        <Button variant="ghost" size="icon" onClick={onSearchClick} className="text-foreground">
          <Search className="h-5 w-5" />
        </Button>
        <Button variant="ghost" size="icon" className="relative text-foreground">
          <MessageCircle className="h-5 w-5" />
          <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand text-[10px] font-medium text-white">
            4
          </span>
        </Button>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/navigation/bottom-navigation.tsx" isMerged="true"
"use client"

import { Waves, Calendar, Radar, Bell } from "lucide-react"
import { cn } from "@/lib/utils"
import type { ActiveScreen } from "../mobile-app-shell"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface BottomNavigationProps {
  activeScreen: ActiveScreen
  onNavigate: (screen: ActiveScreen) => void
}

export function BottomNavigation({ activeScreen, onNavigate }: BottomNavigationProps) {
  const navItems = [
    { id: "flow" as const, icon: Waves, label: "Flow" },
    { id: "events" as const, icon: Calendar, label: "Etkinlikler" },
    { id: "meet" as const, icon: Radar, label: "Meet" },
    { id: "notifications" as const, icon: Bell, label: "Bildirimler" },
  ]

return (
    <nav className="flex items-center justify-around border-t border-border bg-background px-2 py-2 pb-6">
      {navItems.map((item) => (
        <button
          key={item.id}
          onClick={() => onNavigate(item.id)}
          className={cn(
            "flex flex-col items-center gap-0.5 p-2 transition-colors",
            activeScreen === item.id ? "text-brand" : "text-muted-foreground",
          )}
        >
          <item.icon className={cn("h-6 w-6", activeScreen === item.id && "fill-brand/10")} />
        </button>
      ))}

{/* Profile Avatar */}
      <button onClick={() => onNavigate("profile")} className="p-1">
        <Avatar
          className={cn("h-8 w-8 ring-2 ring-offset-1", activeScreen === "profile" ? "ring-brand" : "ring-transparent")}
        >
          <AvatarImage src="/my-profile-photo.jpeg" />
          <AvatarFallback>MD</AvatarFallback>
        </Avatar>
      </button>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/navigation/side-menu.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, ChevronDown, ChevronUp, Hash, CheckCheck } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface SideMenuProps {
  isOpen: boolean
  onClose: () => void
  activeCommunity: string
  onCommunityChange: (community: string) => void
}

interface Channel {
  id: string
  name: string
  emoji?: string
  hasUnread?: boolean
  subChannels?: { id: string; name: string; hasUnread?: boolean }[]
}

interface ChannelSection {
  id: string
  title: string
  emoji?: string
  channels: Channel[]
}

const communities = [
  { id: "emsi", name: "EMSI", emoji: "🦋" },
  { id: "tech", name: "Tech Community", emoji: "💻" },
  { id: "design", name: "Design Hub", emoji: "🎨" },
]

const channelSections: ChannelSection[] = [
  {
    id: "student",
    title: "ÖĞRENCİ İŞLERİ",
    emoji: "😬",
    channels: [
      {
        id: "announcements",
        name: "Duyurular",
        emoji: "📢",
        subChannels: [{ id: "gifts", name: "Bağış Paketleri ve Hediye..." }],
      },
      {
        id: "asko",
        name: "Aşko Bi Baksana",
        emoji: "❓",
        hasUnread: true,
        subChannels: [
          { id: "tomorrow", name: "Yarın" },
          { id: "expired", name: "Süresi geçti" },
          { id: "today", name: "Bugün" },
        ],
      },
      { id: "teams", name: "Ekiplerimiz ve Kurullarımız" },
      { id: "forms", name: "Tüm Formlar" },
      { id: "goygoy", name: "Ekip Goygoy" },
      { id: "showcase", name: "Çıkar göster" },
      { id: "lovers", name: "Aşkolar" },
      { id: "about-channels", name: "Kanallar hakkında" },
      { id: "application", name: "Başvuru süreci" },
    ],
  },
]

const frequentChannels = [
  { id: "tweet", name: "Emsi Tweet", emoji: "🐣", hasUnread: true },
  { id: "story", name: "Emsi Story", emoji: "🎬" },
  { id: "help", name: "Yardımlaşma", emoji: "🤝", hasUnread: true },
  { id: "together", name: "Birlikte Gidelim", emoji: "📍", hasUnread: true },
]

export function SideMenu({ isOpen, onClose, activeCommunity, onCommunityChange }: SideMenuProps) {
  const [expandedSections, setExpandedSections] = useState<string[]>(["student"])
  const [expandedChannels, setExpandedChannels] = useState<string[]>(["announcements", "asko"])
  const [showCommunityPicker, setShowCommunityPicker] = useState(false)

const toggleSection = (sectionId: string) => {
    setExpandedSections((prev) =>
      prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId],
    )
  }

const toggleChannel = (channelId: string) => {
    setExpandedChannels((prev) =>
      prev.includes(channelId) ? prev.filter((id) => id !== channelId) : [...prev, channelId],
    )
  }

const currentCommunity = communities.find((c) => c.id === activeCommunity)

return (
    <>
      {/* Backdrop */}
      <div
        className={cn(
          "fixed inset-0 z-40 bg-black/50 transition-opacity",
          isOpen ? "opacity-100" : "pointer-events-none opacity-0",
        )}
        onClick={onClose}
      />

{/* Side Menu Panel */}
      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 w-[85%] max-w-sm transform bg-background shadow-xl transition-transform duration-300",
          isOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <div className="flex h-full flex-col">
          {/* Community Selector at Very Top */}
          <div className="flex items-center gap-2 border-b border-border p-3">
            <button
              onClick={() => setShowCommunityPicker(!showCommunityPicker)}
              className="flex flex-1 items-center justify-between rounded-lg border border-brand bg-brand/5 px-4 py-2.5 text-brand"
            >
              <span className="font-medium">
                {currentCommunity?.emoji} {currentCommunity?.name}
              </span>
              <ChevronDown className={cn("h-4 w-4 transition-transform", showCommunityPicker && "rotate-180")} />
            </button>
            <Button variant="ghost" size="icon" onClick={onClose} className="shrink-0">
              <X className="h-5 w-5" />
            </Button>
          </div>

{/* Community Picker Dropdown */}
          {showCommunityPicker && (
            <div className="border-b border-border bg-muted/30 px-3 py-2">
              <div className="space-y-1">
                {communities.map((community) => (
                  <button
                    key={community.id}
                    onClick={() => {
                      onCommunityChange(community.id)
                      setShowCommunityPicker(false)
                    }}
                    className={cn(
                      "flex w-full items-center justify-between rounded-lg px-4 py-2 text-left transition-colors",
                      activeCommunity === community.id ? "bg-brand/10 text-brand" : "hover:bg-muted",
                    )}
                  >
                    <span>
                      {community.emoji} {community.name}
                    </span>
                    {activeCommunity === community.id && <CheckCheck className="h-4 w-4" />}
                  </button>
                ))}
              </div>
            </div>
          )}

{/* Small Mark All Read Button */}
          <div className="flex justify-end px-3 py-2">
            <button className="flex items-center gap-1 text-xs text-muted-foreground hover:text-brand">
              <CheckCheck className="h-3 w-3" />
              Tümünü okundu işaretle
            </button>
          </div>

{/* Channels List */}
          <div className="flex-1 overflow-y-auto px-2">
            {channelSections.map((section) => (
              <div key={section.id} className="mb-4">
                <button
                  onClick={() => toggleSection(section.id)}
                  className="flex w-full items-center justify-between px-2 py-2 text-sm font-semibold text-foreground"
                >
                  <span>
                    {section.title} {section.emoji}
                  </span>
                  {expandedSections.includes(section.id) ? (
                    <ChevronUp className="h-4 w-4" />
                  ) : (
                    <ChevronDown className="h-4 w-4" />
                  )}
                </button>

{expandedSections.includes(section.id) && (
                  <div className="space-y-0.5">
                    {section.channels.map((channel) => (
                      <div key={channel.id}>
                        <button
                          onClick={() => channel.subChannels && toggleChannel(channel.id)}
                          className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-muted"
                        >
                          {channel.hasUnread && <span className="h-2 w-2 rounded-full bg-brand" />}
                          <Hash className="h-4 w-4 text-muted-foreground" />
                          {channel.emoji && <span>{channel.emoji}</span>}
                          <span className="flex-1 text-sm">{channel.name}</span>
                          {channel.subChannels &&
                            (expandedChannels.includes(channel.id) ? (
                              <ChevronUp className="h-4 w-4 text-muted-foreground" />
                            ) : (
                              <ChevronDown className="h-4 w-4 text-muted-foreground" />
                            ))}
                        </button>

{channel.subChannels && expandedChannels.includes(channel.id) && (
                          <div className="ml-6 space-y-0.5">
                            {channel.subChannels.map((sub) => (
                              <button
                                key={sub.id}
                                className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-muted"
                              >
                                <span className="text-muted-foreground">↳</span>
                                {sub.name}
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}

{/* Frequently Used */}
            <div className="mb-4 border-t border-border pt-4">
              <div className="flex items-center justify-between px-2 py-2 text-sm font-semibold">
                <span>SIK KULLANILANLAR</span>
                <ChevronUp className="h-4 w-4" />
              </div>
              <div className="space-y-0.5">
                {frequentChannels.map((channel) => (
                  <button
                    key={channel.id}
                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-muted"
                  >
                    {channel.hasUnread && <span className="h-2 w-2 rounded-full bg-brand" />}
                    <Hash className="h-4 w-4 text-muted-foreground" />
                    {channel.emoji && <span>{channel.emoji}</span>}
                    <span className="flex-1 text-sm">{channel.name}</span>
                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/home/feed-filters.tsx" isMerged="true"
"use client"

import { Calendar, MapPin, ChevronDown } from "lucide-react"

export function FeedFilters() {
  return (
    <div className="flex items-center gap-4 px-4 py-3">
      <button className="flex items-center gap-2 rounded-lg bg-background px-3 py-2 text-sm">
        <Calendar className="h-4 w-4 text-muted-foreground" />
        <span>Bugün</span>
        <ChevronDown className="h-4 w-4 text-muted-foreground" />
      </button>
      <button className="flex items-center gap-2 rounded-lg bg-background px-3 py-2 text-sm">
        <MapPin className="h-4 w-4 text-muted-foreground" />
        <span>Ankara</span>
        <ChevronDown className="h-4 w-4 text-muted-foreground" />
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/story-feed.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Heart, MessageCircle, Share } from "lucide-react"
import Image from "next/image"

interface StoryFeedProps {
  source: "following" | "everyone"
}

const stories = [
  {
    id: 1,
    user: { name: "Ahmet Y.", avatar: "/young-turkish-man.jpg" },
    image: "/young-turkish-man-casual.jpg",
    caption: "Hafta sonu kahve keyfim",
    time: "2s önce",
    likes: 24,
    comments: 5,
  },
  {
    id: 2,
    user: { name: "Elif K.", avatar: "/young-turkish-woman.jpg" },
    image: "/professional-turkish-woman.jpg",
    caption: "Yeni ofisimden selamlar!",
    time: "5s önce",
    likes: 47,
    comments: 12,
  },
  {
    id: 3,
    user: { name: "Zeynep A.", avatar: "/turkish-woman-student.jpg" },
    image: "/young-turkish-woman-student.jpg",
    caption: "Ders arası kamp pikniği",
    time: "15s önce",
    likes: 89,
    comments: 23,
  },
  {
    id: 4,
    user: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" },
    image: "/turkish-man-with-beard.jpg",
    caption: "Topluluk buluşmasından kareler",
    time: "25s önce",
    likes: 156,
    comments: 34,
  },
  {
    id: 5,
    user: { name: "Selin K.", avatar: "/turkish-woman-professional.jpg" },
    image: "/turkish-woman-young.jpg",
    caption: "Bugün mutlu bir gündü",
    time: "1sa önce",
    likes: 67,
    comments: 8,
  },
]

export function StoryFeed({ source }: StoryFeedProps) {
  const filteredStories = source === "following" ? stories.slice(0, 3) : stories

return (
    <div className="space-y-4">
      {filteredStories.map((story) => (
        <div key={story.id} className="overflow-hidden rounded-xl bg-background shadow-sm">
          {/* Header */}
          <div className="flex items-center gap-3 p-3">
            <Avatar className="h-10 w-10 ring-2 ring-brand ring-offset-2">
              <AvatarImage src={story.user.avatar || "/placeholder.svg"} />
              <AvatarFallback>{story.user.name[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <span className="font-medium">{story.user.name}</span>
              <span className="block text-xs text-muted-foreground">{story.time}</span>
            </div>
          </div>

{/* Photo */}
          <div className="relative aspect-square w-full">
            <Image
              src={story.image || "/placeholder.svg"}
              alt={story.caption}
              fill
              className="object-cover"
            />
          </div>

{/* Actions & Caption */}
          <div className="p-3">
            <div className="flex items-center gap-4">
              <button className="flex items-center gap-1 text-muted-foreground hover:text-red-500">
                <Heart className="h-5 w-5" />
                <span className="text-sm">{story.likes}</span>
              </button>
              <button className="flex items-center gap-1 text-muted-foreground hover:text-brand">
                <MessageCircle className="h-5 w-5" />
                <span className="text-sm">{story.comments}</span>
              </button>
              <button className="ml-auto text-muted-foreground hover:text-brand">
                <Share className="h-5 w-5" />
              </button>
            </div>
            <p className="mt-2 text-sm">
              <span className="font-medium">{story.user.name}</span>{" "}
              {story.caption}
            </p>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/tweet-feed.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Heart, MessageCircle, Share2 } from "lucide-react"

interface TweetFeedProps {
  source: "following" | "everyone"
}

const tweets = [
  {
    id: 1,
    user: { name: "Zeynep A.", avatar: "/turkish-woman-with-hijab.jpg" },
    content: "Bugünkü online toplantıda görüşmek üzere! 💻 #EMSIMeeting",
    time: "1s önce",
    likes: 24,
    comments: 5,
    community: "EMSI",
  },
  {
    id: 2,
    user: { name: "Can B.", avatar: "/young-turkish-man-casual.jpg" },
    content: "Yeni proje fikirlerim var, paylaşmak isteyen var mı? DM atın! 🚀",
    time: "3s önce",
    likes: 18,
    comments: 12,
    community: "Tech Community",
  },
]

export function TweetFeed({ source }: TweetFeedProps) {
  const filteredTweets = source === "following" ? tweets.slice(0, 1) : tweets

return (
    <div className="space-y-4">
      {filteredTweets.map((tweet) => (
        <div key={tweet.id} className="rounded-xl bg-background p-4 shadow-sm">
          <div className="flex items-start gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src={tweet.user.avatar || "/placeholder.svg"} />
              <AvatarFallback>{tweet.user.name[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{tweet.user.name}</span>
                <span className="text-xs text-muted-foreground">• {tweet.community}</span>
              </div>
              <p className="mt-1 text-sm text-foreground">{tweet.content}</p>
              <div className="mt-3 flex items-center gap-6">
                <button className="flex items-center gap-1 text-muted-foreground hover:text-red-500">
                  <Heart className="h-4 w-4" />
                  <span className="text-xs">{tweet.likes}</span>
                </button>
                <button className="flex items-center gap-1 text-muted-foreground hover:text-brand">
                  <MessageCircle className="h-4 w-4" />
                  <span className="text-xs">{tweet.comments}</span>
                </button>
                <button className="text-muted-foreground hover:text-brand">
                  <Share2 className="h-4 w-4" />
                </button>
              </div>
              <span className="mt-2 block text-xs text-muted-foreground">{tweet.time}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/network-feed.tsx" isMerged="true"
"use client"

import React from "react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Briefcase, HelpCircle, MapPin, MessageCircle, Users } from "lucide-react"

interface NetworkFeedProps {
  source: "following" | "everyone"
}

type PostType = "help" | "job" | "looking" | "request"

interface NetworkPost {
  id: number
  user: { name: string; avatar: string }
  type: PostType
  title: string
  content: string
  time: string
  responses: number
  tags?: string[]
}

const networkPosts: NetworkPost[] = [
  {
    id: 1,
    user: { name: "Ayşe T.", avatar: "/professional-turkish-woman.jpg" },
    type: "help",
    title: "React Native konusunda yardım lazım",
    content: "Merhaba! Bir mobil uygulama projemde navigation sorunları yaşıyorum. Bu konuda deneyimli biri yardımcı olabilir mi?",
    time: "15dk önce",
    responses: 4,
    tags: ["React Native", "Mobile"],
  },
  {
    id: 2,
    user: { name: "Burak M.", avatar: "/turkish-man-professional.jpg" },
    type: "job",
    title: "Frontend Developer arıyorum",
    content: "Startup'ımız için part-time React developer arıyoruz. Remote çalışma imkanı var. İlgilenenler DM atabilir.",
    time: "1sa önce",
    responses: 12,
    tags: ["İş İlanı", "React", "Remote"],
  },
  {
    id: 3,
    user: { name: "Selin K.", avatar: "/young-turkish-woman-student.jpg" },
    type: "looking",
    title: "Ankara'da UI/UX Designer tanıyor musunuz?",
    content: "Mezuniyet projemiz için bir UI/UX designer ile işbirliği yapmak istiyoruz. Öğrenci veya yeni mezun olabilir.",
    time: "2sa önce",
    responses: 7,
    tags: ["Ankara", "UI/UX", "Proje"],
  },
  {
    id: 4,
    user: { name: "Mehmet D.", avatar: "/turkish-man-with-glasses.jpg" },
    type: "request",
    title: "Topluluk etkinliği için mekan önerisi",
    content: "20-30 kişilik bir workshop düzenlemek istiyoruz. İstanbul Anadolu yakasında uygun mekan öneriniz var mı?",
    time: "3sa önce",
    responses: 9,
    tags: ["İstanbul", "Etkinlik"],
  },
  {
    id: 5,
    user: { name: "Can B.", avatar: "/turkish-man-casual.jpg" },
    type: "help",
    title: "Supabase authentication sorunu",
    content: "Email verification akışında takıldım. Benzer sorunu çözmüş olan var mı?",
    time: "4sa önce",
    responses: 6,
    tags: ["Supabase", "Auth"],
  },
]

const typeIcons: Record<PostType, React.ReactNode> = {
  help: <HelpCircle className="h-4 w-4" />,
  job: <Briefcase className="h-4 w-4" />,
  looking: <Users className="h-4 w-4" />,
  request: <MapPin className="h-4 w-4" />,
}

const typeLabels: Record<PostType, string> = {
  help: "Yardım İsteniyor",
  job: "İş Arıyor",
  looking: "Kişi Arıyor",
  request: "Talep",
}

const typeColors: Record<PostType, string> = {
  help: "bg-orange-100 text-orange-700",
  job: "bg-green-100 text-green-700",
  looking: "bg-blue-100 text-blue-700",
  request: "bg-purple-100 text-purple-700",
}

export function NetworkFeed({ source }: NetworkFeedProps) {
  const filteredPosts = source === "following" ? networkPosts.slice(0, 3) : networkPosts

return (
    <div className="space-y-4">
      {filteredPosts.map((post) => (
        <div key={post.id} className="rounded-xl bg-background p-4 shadow-sm">
          {/* Header */}
          <div className="flex items-start gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src={post.user.avatar || "/placeholder.svg"} />
              <AvatarFallback>{post.user.name[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{post.user.name}</span>
                <span className="text-xs text-muted-foreground">{post.time}</span>
              </div>
              <span className={`mt-1 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${typeColors[post.type]}`}>
                {typeIcons[post.type]}
                {typeLabels[post.type]}
              </span>
            </div>
          </div>

{/* Content */}
          <div className="mt-3">
            <h3 className="font-semibold">{post.title}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{post.content}</p>
          </div>

{/* Tags */}
          {post.tags && (
            <div className="mt-3 flex flex-wrap gap-1">
              {post.tags.map((tag) => (
                <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
                  #{tag}
                </span>
              ))}
            </div>
          )}

{/* Actions */}
          <div className="mt-3 flex items-center justify-between border-t border-border pt-3">
            <button className="flex items-center gap-1 text-sm text-muted-foreground hover:text-brand">
              <MessageCircle className="h-4 w-4" />
              {post.responses} yanıt
            </button>
            <Button size="sm" variant="outline" className="border-brand text-brand hover:bg-brand/10 bg-transparent">
              Yardım Et
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/screens/notifications-screen.tsx" isMerged="true"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Calendar, AtSign, Users } from "lucide-react"
import { cn } from "@/lib/utils"

type NotificationType = "event" | "mention" | "community"

interface Notification {
  id: number
  type: NotificationType
  title: string
  description: string
  time: string
  isRead: boolean
  avatar?: string
}

const notifications: Notification[] = [
  {
    id: 1,
    type: "event",
    title: "Etkinlik Hatırlatması",
    description: "Online Tanışma Toplantımız 1 saat içinde başlıyor!",
    time: "5 dk önce",
    isRead: false,
  },
  {
    id: 2,
    type: "mention",
    title: "Ahmet seni etiketledi",
    description: '"@mami bu konuda ne düşünüyorsun?" - #Yardımlaşma kanalında',
    time: "15 dk önce",
    isRead: false,
    avatar: "/placeholder.svg?height=40&width=40",
  },
  {
    id: 3,
    type: "community",
    title: "Yeni Üye",
    description: "Tech Community'ye 5 yeni üye katıldı",
    time: "1 saat önce",
    isRead: true,
  },
  {
    id: 4,
    type: "event",
    title: "Etkinlik Güncellendi",
    description: "Mavi Koltuk etkinliğinin saati değişti: 21:30",
    time: "2 saat önce",
    isRead: true,
  },
  {
    id: 5,
    type: "mention",
    title: "Elif seni etiketledi",
    description: '"@mami projeye katılmak ister misin?" - DM',
    time: "3 saat önce",
    isRead: true,
    avatar: "/placeholder.svg?height=40&width=40",
  },
]

const typeIcons: Record<NotificationType, typeof Calendar> = {
  event: Calendar,
  mention: AtSign,
  community: Users,
}

const typeColors: Record<NotificationType, string> = {
  event: "bg-emerald-100 text-emerald-600",
  mention: "bg-blue-100 text-blue-600",
  community: "bg-purple-100 text-purple-600",
}

export function NotificationsScreen() {
  const unreadCount = notifications.filter((n) => !n.isRead).length

return (
    <div className="flex flex-col bg-background">
      <div className="flex items-center justify-between border-b border-border px-4 py-3">
        <div>
          <h1 className="text-lg font-semibold">Bildirimler</h1>
          {unreadCount > 0 && <p className="text-sm text-muted-foreground">{unreadCount} okunmamış bildirim</p>}
        </div>
        <button className="text-sm font-medium text-brand">Tümünü Okundu İşaretle</button>
      </div>

<div className="flex-1 divide-y divide-border overflow-y-auto">
        {notifications.map((notification) => {
          const Icon = typeIcons[notification.type]
          return (
            <div
              key={notification.id}
              className={cn("flex gap-3 px-4 py-3 transition-colors", !notification.isRead && "bg-brand/5")}
            >
              {notification.avatar ? (
                <Avatar className="h-10 w-10">
                  <AvatarImage src={notification.avatar || "/placeholder.svg"} />
                  <AvatarFallback>U</AvatarFallback>
                </Avatar>
              ) : (
                <div
                  className={cn(
                    "flex h-10 w-10 items-center justify-center rounded-full",
                    typeColors[notification.type],
                  )}
                >
                  <Icon className="h-5 w-5" />
                </div>
              )}
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium">{notification.title}</span>
                  {!notification.isRead && <span className="h-2 w-2 rounded-full bg-brand" />}
                </div>
                <p className="mt-0.5 text-sm text-muted-foreground">{notification.description}</p>
                <span className="mt-1 block text-xs text-muted-foreground">{notification.time}</span>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/community/create-community-sheet.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

interface CreateCommunitySheetProps {
  isOpen: boolean
  onClose: () => void
  onCreate: (data: { name: string; description: string; visibility: string }) => void
}

export function CreateCommunitySheet({ isOpen, onClose, onCreate }: CreateCommunitySheetProps) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [visibility, setVisibility] = useState<"public" | "private">("public")

const handleSubmit = () => {
    if (name.trim() && description.trim()) {
      onCreate({ name, description, visibility })
      setName("")
      setDescription("")
      setVisibility("public")
      onClose()
    }
  }

{/* Sheet */}
      <div
        className={cn(
          "fixed inset-x-0 bottom-0 z-50 transform rounded-t-2xl bg-background p-6 shadow-xl transition-transform duration-300",
          isOpen ? "translate-y-0" : "translate-y-full",
        )}
      >
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold">Topluluk Oluştur</h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

<div className="space-y-4">
          <div>
            <label className="mb-1 block text-sm font-medium">Topluluk Adı</label>
            <Input placeholder="Topluluk adını girin" value={name} onChange={(e) => setName(e.target.value)} />
          </div>

<div>
            <label className="mb-1 block text-sm font-medium">Açıklama</label>
            <textarea
              placeholder="Topluluğunuzu tanımlayın"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            />
          </div>