[V0_FILE]typescriptreact:file="app/discover/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Home, ArrowLeft } from "lucide-react" export default function NotFound() { return (

Page Not Found

The page you're looking for doesn't exist or has been moved.

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { RefreshCw, Home } from "lucide-react" import Link from "next/link" export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { console.error(error) }, [error]) return (

⚠️

Something went wrong!

An error occurred while loading this page.

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isEdit="true" isMerged="true" export default function Loading() { return (

Scrolla

) } [V0_FILE]typescriptreact:file="next.config.mjs" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { appDir: true, }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { domains: ['placeholder.svg'], unoptimized: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/discover/page.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { ArrowLeft, Search, TrendingUp, Users, Star, Eye, MessageCircle, UserPlus, UserCheck, Filter, } from "lucide-react" import Link from "next/link" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function DiscoverPage() { const [searchQuery, setSearchQuery] = React.useState("") const [activeTab, setActiveTab] = React.useState("trending") const [selectedGenre, setSelectedGenre] = React.useState("all") const [followedAuthors, setFollowedAuthors] = React.useState([]) const genres = ["all", "Sci-Fi", "Romance", "Fantasy", "Mystery", "Thriller", "Drama", "Horror", "Adventure"] const featuredAuthors = [ { id: "author-1", name: "Sarah Chen", avatar: "/placeholder.svg?height=60&width=60", bio: "Sci-fi enthusiast writing about digital worlds", followers: 1234, stories: 5, genres: ["Sci-Fi", "Thriller"], verified: true, }, { id: "author-2", name: "Alex Rivera", avatar: "/placeholder.svg?height=60&width=60", bio: "Romance writer crafting heartwarming tales", followers: 892, stories: 3, genres: ["Romance", "Drama"], verified: false, }, { id: "author-3", name: "Maya Patel", avatar: "/placeholder.svg?height=60&width=60", bio: "Fantasy world builder and adventure seeker", followers: 2156, stories: 8, genres: ["Fantasy", "Adventure"], verified: true, }, { id: "author-4", name: "James Wilson", avatar: "/placeholder.svg?height=60&width=60", bio: "Mystery writer with a twist", followers: 567, stories: 4, genres: ["Mystery", "Horror"], verified: false, }, ] const trendingStories = [ { id: "trending-1", title: "The Last Algorithm", author: "Sarah Chen", authorId: "author-1", authorAvatar: "/placeholder.svg?height=40&width=40", genre: "Sci-Fi", episodes: 15, rating: 4.9, views: "12.5k", comments: 234, description: "In a world where AI controls everything, one programmer discovers the truth...", trending: true, new: false, }, { id: "trending-2", title: "Midnight Express", author: "Maya Patel", authorId: "author-3", authorAvatar: "/placeholder.svg?height=40&width=40", genre: "Fantasy", episodes: 8, rating: 4.7, views: "8.9k", comments: 156, description: "A magical train that only appears at midnight carries passengers to other realms...", trending: true, new: true, }, { id: "trending-3", title: "The Silent Witness", author: "James Wilson", authorId: "author-4", authorAvatar: "/placeholder.svg?height=40&width=40", genre: "Mystery", episodes: 12, rating: 4.6, views: "6.7k", comments: 89, description: "A detective who can't speak must solve the city's most complex murder case...", trending: true, new: false, }, ] React.useEffect(() => { try { if (typeof window !== "undefined") { const followed = localStorage.getItem("scrolla-followed-authors") if (followed) { setFollowedAuthors(JSON.parse(followed)) } } } catch (error) { console.error("Error loading followed authors:", error) } }, []) const handleFollowAuthor = (authorId: string) => { try { if (typeof window !== "undefined") { const isFollowing = followedAuthors.includes(authorId) let updatedFollowed: string[] if (isFollowing) { updatedFollowed = followedAuthors.filter((id) => id !== authorId) } else { updatedFollowed = [...followedAuthors, authorId] } setFollowedAuthors(updatedFollowed) localStorage.setItem("scrolla-followed-authors", JSON.stringify(updatedFollowed)) } } catch (error) { console.error("Error following author:", error) } } const filteredAuthors = featuredAuthors.filter((author) => { if (searchQuery) { const query = searchQuery.toLowerCase() return ( author.name.toLowerCase().includes(query) || author.bio.toLowerCase().includes(query) || author.genres.some((genre) => genre.toLowerCase().includes(query)) ) } return true }) const filteredStories = trendingStories.filter((story) => { const matchesSearch = !searchQuery || story.title.toLowerCase().includes(searchQuery.toLowerCase()) || story.author.toLowerCase().includes(searchQuery.toLowerCase()) || story.description.toLowerCase().includes(searchQuery.toLowerCase()) const matchesGenre = selectedGenre === "all" || story.genre === selectedGenre return matchesSearch && matchesGenre }) return (

Discover

setSearchQuery(e.target.value)} className="pl-10" />

{activeTab === "trending" && (

Featured Authors

{followedAuthors.length} Following

{filteredAuthors.map((author) => { const isFollowing = followedAuthors.includes(author.id) return (

{author.name[0]}

{author.name}

{author.verified && ( ✓ Verified )}

{author.bio}

{author.genres.map((genre) => ( {genre} ))}

{author.followers.toLocaleString()} followers {author.stories} stories

) })}

)}

) } [V0_FILE]typescriptreact:file="app/following/page.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { ArrowLeft, Users, Bell, BellOff, UserMinus, BookOpen } from "lucide-react" import Link from "next/link" export default function FollowingPage() { const [followedAuthors, setFollowedAuthors] = React.useState([]) const [authorNotifications, setAuthorNotifications] = React.useState>({}) const [activeTab, setActiveTab] = React.useState("updates") const followedAuthorsData = [ { id: "author-1", name: "Sarah Chen", avatar: "/placeholder.svg?height=60&width=60", bio: "Sci-fi enthusiast writing about digital worlds", followers: 1234, stories: 5, genres: ["Sci-Fi", "Thriller"], verified: true, lastActive: "2 hours ago", }, { id: "author-3", name: "Maya Patel", avatar: "/placeholder.svg?height=60&width=60", bio: "Fantasy world builder and adventure seeker", followers: 2156, stories: 8, genres: ["Fantasy", "Adventure"], verified: true, lastActive: "1 day ago", }, ] const recentUpdates = [ { id: "update-1", type: "new_episode", authorId: "author-1", authorName: "Sarah Chen", authorAvatar: "/placeholder.svg?height=40&width=40", storyId: "story-1", storyTitle: "The Last Algorithm", episodeTitle: "Chapter 16: The Revelation", timestamp: "2 hours ago", genre: "Sci-Fi", }, { id: "update-2", type: "new_story", authorId: "author-3", authorName: "Maya Patel", authorAvatar: "/placeholder.svg?height=40&width=40", storyId: "story-2", storyTitle: "The Crystal Guardians", episodeTitle: "Prologue: The Awakening", timestamp: "1 day ago", genre: "Fantasy", }, ] React.useEffect(() => { try { if (typeof window !== "undefined") { const followed = localStorage.getItem("scrolla-followed-authors") if (followed) { setFollowedAuthors(JSON.parse(followed)) } const notifications = localStorage.getItem("scrolla-author-notifications") if (notifications) { setAuthorNotifications(JSON.parse(notifications)) } } } catch (error) { console.error("Error loading following data:", error) } }, []) const handleUnfollow = (authorId: string) => { try { if (typeof window !== "undefined") { const updatedFollowed = followedAuthors.filter((id) => id !== authorId) setFollowedAuthors(updatedFollowed) localStorage.setItem("scrolla-followed-authors", JSON.stringify(updatedFollowed)) const updatedNotifications = { ...authorNotifications } delete updatedNotifications[authorId] setAuthorNotifications(updatedNotifications) localStorage.setItem("scrolla-author-notifications", JSON.stringify(updatedNotifications)) } } catch (error) { console.error("Error unfollowing author:", error) } } const handleToggleNotifications = (authorId: string) => { try { if (typeof window !== "undefined") { const updatedNotifications = { ...authorNotifications, [authorId]: !authorNotifications[authorId], } setAuthorNotifications(updatedNotifications) localStorage.setItem("scrolla-author-notifications", JSON.stringify(updatedNotifications)) } } catch (error) { console.error("Error toggling notifications:", error) } } const followedAuthorsWithData = followedAuthorsData.filter((author) => followedAuthors.includes(author.id)) const recentUpdatesFromFollowed = recentUpdates.filter((update) => followedAuthors.includes(update.authorId)) return (

Following

{followedAuthors.length}

{activeTab === "updates" && (

{recentUpdatesFromFollowed.length === 0 ? (

No Recent Updates

{followedAuthors.length === 0 ? "You're not following any authors yet." : "Your followed authors haven't posted recently."}

) : ( recentUpdatesFromFollowed.map((update) => (

{update.authorName[0]}

{update.authorName} {update.genre} {update.type === "new_story" && ( New Story )}

{update.type === "new_episode" ? (

Published a new episode: "{update.episodeTitle}" in{" "} {update.storyTitle}

) : (

Started a new story:{" "} {update.storyTitle}

)}

{update.timestamp}

)) )}

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

{followedAuthorsWithData.length === 0 ? (

No Followed Authors

Start following authors to see their latest updates here.

) : ( followedAuthorsWithData.map((author) => { const hasNotifications = authorNotifications[author.id] || false return (

{author.name[0]}

{author.name}

{author.verified && ( ✓ Verified )}

{author.bio}

{author.genres.map((genre) => ( {genre} ))}

{author.followers.toLocaleString()} {author.stories} stories Active {author.lastActive}

) }) )}

)}

) } [V0_FILE]typescriptreact:file="app/write/page.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Save, Send, Type, CheckCircle } from "lucide-react" import Link from "next/link" import { useRouter } from "next/navigation" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function WritePage() { const [episodeTitle, setEpisodeTitle] = React.useState("") const [episodeContent, setEpisodeContent] = React.useState("") const [storyTitle, setStoryTitle] = React.useState("") const [isPublishing, setIsPublishing] = React.useState(false) const [publishSuccess, setPublishSuccess] = React.useState(false) const [genre, setGenre] = React.useState("") const router = useRouter() const genres = [ { value: "Sci-Fi", label: "Sci-Fi" }, { value: "Romance", label: "Romance" }, { value: "Fantasy", label: "Fantasy" }, { value: "Mystery", label: "Mystery" }, { value: "Thriller", label: "Thriller" }, { value: "Drama", label: "Drama" }, { value: "Comedy", label: "Comedy" }, { value: "Horror", label: "Horror" }, ] const characterCount = episodeContent.length const maxCharacters = 2000 const isOverLimit = characterCount > maxCharacters const handlePublish = () => { if (isOverLimit || !episodeTitle.trim() || !episodeContent.trim() || !storyTitle.trim() || !genre) { alert("Please fill in all fields, select a genre, and stay within character limit.") return } setIsPublishing(true) try { if (typeof window !== "undefined") { const existingStories = JSON.parse(localStorage.getItem("scrolla-stories") || "[]") const newStory = { id: Date.now(), title: storyTitle, author: "John Writer", authorAvatar: "/placeholder.svg?height=40&width=40", genre: genre, episodes: 1, rating: 4.5, views: "1", comments: 0, lastUpdated: "Just now", description: `A new ${genre.toLowerCase()} story - ${episodeTitle}`, trending: false, episodeData: [ { id: 1, title: episodeTitle, content: episodeContent, publishedAt: "Just now", likes: 0, comments: 0, characterCount: episodeContent.length, }, ], } existingStories.unshift(newStory) localStorage.setItem("scrolla-stories", JSON.stringify(existingStories)) setPublishSuccess(true) setTimeout(() => { router.push("/") }, 2000) } } catch (error) { console.error("Error publishing story:", error) alert("Failed to publish story. Please try again.") } finally { setIsPublishing(false) } } if (publishSuccess) { return (

Episode Published!

Your episode "{episodeTitle}" has been successfully published.

Redirecting to home...

) } return (

Write Episode

Story Information

Story Title setStoryTitle(e.target.value)} />

Genre

Write Episode

1800 ? "secondary" : "outline"}> {characterCount}/{maxCharacters}

1800 ? "bg-yellow-500" : "bg-primary" }`} style={{ width: `${Math.min((characterCount / maxCharacters) * 100, 100)}%` }} />

Episode Title setEpisodeTitle(e.target.value)} />

Episode Content

setEpisodeContent(e.target.value)}
                rows={15}
                className={`resize-none transition-colors ${
                  isOverLimit
                    ? "border-destructive focus:border-destructive"
                    : characterCount > 1800
                      ? "border-yellow-500 focus:border-yellow-500"
                      : ""
                }`}
              />
              {isOverLimit && (
                <p className="text-sm text-destructive mt-1">
                  Episode exceeds the 2,000 character limit by {characterCount - maxCharacters} characters.
                </p>
              )}
            </div>

<Card className="bg-muted/50">
              <CardContent className="p-4">
                <div className="flex items-start gap-2">
                  <Type className="h-4 w-4 mt-0.5 text-muted-foreground" />
                  <div>
                    <h4 className="font-medium text-sm mb-1">Writing Tips</h4>
                    <ul className="text-xs text-muted-foreground space-y-1">
                      <li>• Keep episodes concise and engaging</li>
                      <li>• End with a hook to keep readers coming back</li>
                      <li>• Use dialogue and action to move the story forward</li>
                      <li>• Each episode should advance the plot or develop characters</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/story/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ArrowLeft, Star, Eye, MessageCircle, Heart, Share } from "lucide-react"
import Link from "next/link"

export default function StoryPage({ params }: { params: { id: string } }) {
  const [story, setStory] = React.useState(null)
  const [isLiked, setIsLiked] = React.useState(false)
  const [isFollowingAuthor, setIsFollowingAuthor] = React.useState(false)

React.useEffect(() => {
    loadStory()
    checkIfLiked()
  }, [params.id])

React.useEffect(() => {
    checkIfFollowingAuthor()
  }, [story])

const loadStory = () => {
    try {
      if (typeof window !== "undefined") {
        const savedStories = JSON.parse(localStorage.getItem("scrolla-stories") || "[]")
        const foundStory = savedStories.find((s) => s.id.toString() === params.id)

if (foundStory) {
          setStory(foundStory)
        } else {
          // Default story data
          setStory({
            id: params.id,
            title: "The Digital Nomad",
            author: "Sarah Chen",
            authorAvatar: "/placeholder.svg?height=40&width=40",
            genre: "Sci-Fi",
            rating: 4.8,
            views: "2.3k",
            followers: 156,
            description:
              "A programmer discovers a hidden world within the internet and must navigate between reality and the digital realm.",
            episodeData: [
              {
                id: 1,
                title: "The Discovery",
                content: "Sarah stared at her screen, the code blurring before her tired eyes...",
                publishedAt: "2 hours ago",
                likes: 23,
                comments: 5,
              },
            ],
          })
        }
      }
    } catch (error) {
      console.error("Error loading story:", error)
    }
  }

const checkIfLiked = () => {
    try {
      if (typeof window !== "undefined") {
        const likedStories = JSON.parse(localStorage.getItem("scrolla-liked-stories") || "[]")
        const isStoryLiked = likedStories.some((like) => like.storyId.toString() === params.id)
        setIsLiked(isStoryLiked)
      }
    } catch (error) {
      console.error("Error checking like status:", error)
    }
  }

const handleLike = () => {
    if (!story) return

try {
      if (typeof window !== "undefined") {
        const currentLikes = JSON.parse(localStorage.getItem("scrolla-liked-stories") || "[]")
        const existingIndex = currentLikes.findIndex((like) => like.storyId.toString() === params.id)

if (existingIndex >= 0) {
          // Unlike
          currentLikes.splice(existingIndex, 1)
          setIsLiked(false)
        } else {
          // Like
          const newLike = {
            id: `like-${Date.now()}`,
            storyId: story.id,
            storyTitle: story.title,
            authorName: story.author,
            genre: story.genre,
            likedAt: new Date().toISOString(),
          }
          currentLikes.unshift(newLike)
          setIsLiked(true)
        }

localStorage.setItem("scrolla-liked-stories", JSON.stringify(currentLikes))
      }
    } catch (error) {
      console.error("Error toggling like:", error)
    }
  }

const checkIfFollowingAuthor = () => {
    try {
      if (typeof window !== "undefined" && story) {
        const followedAuthors = localStorage.getItem("scrolla-followed-authors")
        if (followedAuthors) {
          const followed = JSON.parse(followedAuthors)
          // Create a simple author ID from the author name for consistency
          const authorId = `author-${story.author.toLowerCase().replace(/\s+/g, "-")}`
          setIsFollowingAuthor(followed.includes(authorId))
        }
      }
    } catch (error) {
      console.error("Error checking follow status:", error)
    }
  }

const handleFollowAuthor = () => {
    if (!story) return

try {
      if (typeof window !== "undefined") {
        const authorId = `author-${story.author.toLowerCase().replace(/\s+/g, "-")}`
        const followedAuthors = JSON.parse(localStorage.getItem("scrolla-followed-authors") || "[]")

let updatedFollowed
        if (isFollowingAuthor) {
          updatedFollowed = followedAuthors.filter((id) => id !== authorId)
          setIsFollowingAuthor(false)
        } else {
          updatedFollowed = [...followedAuthors, authorId]
          setIsFollowingAuthor(true)
        }

localStorage.setItem("scrolla-followed-authors", JSON.stringify(updatedFollowed))
      }
    } catch (error) {
      console.error("Error following author:", error)
    }
  }

if (!story) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div>Loading...</div>
      </div>
    )
  }

const episodes = story.episodeData || []

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <h1 className="font-semibold truncate">{story.title}</h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6 pb-20">
        {/* Story Header */}
        <Card className="mb-6">
          <CardHeader>
            <div className="flex items-start gap-4">
              <Avatar className="h-12 w-12">
                <AvatarImage src={story.authorAvatar || "/placeholder.svg"} />
                <AvatarFallback>{story.author[0]}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <h1 className="text-xl font-bold mb-1">{story.title}</h1>
                <p className="text-sm text-muted-foreground mb-2">by {story.author}</p>
                <div className="flex items-center gap-2 mb-3">
                  <Badge variant="outline">{story.genre}</Badge>
                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Star className="h-3 w-3 fill-current text-yellow-500" />
                    {story.rating}
                  </span>
                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Eye className="h-3 w-3" />
                    {story.views}
                  </span>
                </div>
                <div className="flex gap-2">
                  <Button size="sm" variant={isFollowingAuthor ? "outline" : "default"} onClick={handleFollowAuthor}>
                    {isFollowingAuthor ? "Following" : "Follow"}
                  </Button>
                  <Button size="sm" variant={isLiked ? "default" : "outline"} onClick={handleLike}>
                    <Heart className={`h-4 w-4 mr-1 ${isLiked ? "fill-current" : ""}`} />
                    {isLiked ? "Liked" : "Like"}
                  </Button>
                  <Button size="sm" variant="outline">
                    <Share className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground leading-relaxed">{story.description}</p>
            <div className="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
              <span>{story.followers || 0} followers</span>
              <span>{episodes.length} episodes</span>
            </div>
          </CardContent>
        </Card>

{/* Episodes List */}
        <div className="space-y-3">
          <h2 className="text-lg font-semibold mb-4">Episodes ({episodes.length})</h2>
          {episodes.length === 0 ? (
            <Card className="p-8 text-center">
              <p className="text-muted-foreground">No episodes published yet.</p>
            </Card>
          ) : (
            episodes.map((episode, index) => (
              <Card key={episode.id} className="hover:shadow-md transition-shadow cursor-pointer">
                <CardContent className="p-4">
                  <div className="flex items-start gap-3">
                    <div className="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                      <span className="text-sm font-medium text-primary">{index + 1}</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-medium mb-1">{episode.title}</h3>
                      <p className="text-sm text-muted-foreground mb-2 line-clamp-2">
                        {episode.content.substring(0, 150)}...
                      </p>
                      <div className="flex items-center justify-between text-xs text-muted-foreground">
                        <span>{episode.publishedAt}</span>
                        <div className="flex items-center gap-3">
                          <span className="flex items-center gap-1">
                            <Heart className="h-3 w-3" />
                            {episode.likes}
                          </span>
                          <span className="flex items-center gap-1">
                            <MessageCircle className="h-3 w-3" />
                            {episode.comments}
                          </span>
                          <span className="text-xs">{episode.characterCount || episode.content.length} chars</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/pi-integration.ts" isMerged="true"
"use client"

// Pi Network integration utilities
export interface PiUser {
  uid: string
  username: string
  accessToken: string
  // Add other Pi profile fields as needed
}

export class PiIntegration {
  private static instance: PiIntegration
  private piSDK: any = null

static getInstance(): PiIntegration {
    if (!PiIntegration.instance) {
      PiIntegration.instance = new PiIntegration()
    }
    return PiIntegration.instance
  }

async initializePi(): Promise<boolean> {
    try {
      // Check if running in Pi Browser
      if (typeof window !== "undefined" && (window as any).Pi) {
        this.piSDK = (window as any).Pi
        return true
      }

// Fallback: Try to load Pi SDK
      const { Pi } = await import("@pi-network/sdk")
      this.piSDK = new Pi()
      return true
    } catch (error) {
      console.warn("Pi SDK not available:", error)
      return false
    }
  }

async authenticateWithPi(): Promise<PiUser | null> {
    if (!this.piSDK) {
      await this.initializePi()
    }

try {
      // Request authentication with required scopes
      const scopes = ["username", "profile"]
      const authResult = await this.piSDK.authenticate(scopes)

if (authResult.accessToken) {
        const user = await this.piSDK.getUser()

const piUser: PiUser = {
          uid: user.uid,
          username: user.username,
          accessToken: authResult.accessToken,
        }

// Store Pi user data
        localStorage.setItem("pi-user", JSON.stringify(piUser))
        return piUser
      }
    } catch (error) {
      console.error("Pi authentication failed:", error)
    }

return null
  }

async syncProfileWithPi(): Promise<boolean> {
    try {
      const piUser = await this.authenticateWithPi()
      if (!piUser) return false

// Get current Scrolla profile
      const currentProfile = JSON.parse(localStorage.getItem("scrolla-user") || "{}")

// Merge Pi profile data with Scrolla profile
      const syncedProfile = {
        ...currentProfile,
        id: piUser.uid,
        name: piUser.username,
        piConnected: true,
        piUsername: piUser.username,
        lastPiSync: new Date().toISOString(),
      }

// Save synced profile
      localStorage.setItem("scrolla-user", JSON.stringify(syncedProfile))
      return true
    } catch (error) {
      console.error("Profile sync failed:", error)
      return false
    }
  }

isPiAvailable(): boolean {
    return typeof window !== "undefined" && ((window as any).Pi || this.piSDK !== null)
  }

getPiUser(): PiUser | null {
    try {
      const stored = localStorage.getItem("pi-user")
      return stored ? JSON.parse(stored) : null
    } catch {
      return null
    }
  }
}
[V0_FILE]typescriptreact:file="components/pi-sync-button.tsx" isMerged="true"
"use client"

import React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Zap, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
import { PiIntegration } from "@/lib/pi-integration"

export function PiSyncButton() {
  const [isConnected, setIsConnected] = React.useState(false)
  const [isLoading, setIsLoading] = React.useState(false)
  const [piAvailable, setPiAvailable] = React.useState(false)
  const [piUser, setPiUser] = React.useState(null)

const piIntegration = PiIntegration.getInstance()

React.useEffect(() => {
    checkPiAvailability()
    checkExistingConnection()
  }, [])

const checkPiAvailability = async () => {
    const available = piIntegration.isPiAvailable()
    setPiAvailable(available)

if (!available) {
      // Try to initialize Pi SDK
      const initialized = await piIntegration.initializePi()
      setPiAvailable(initialized)
    }
  }

const checkExistingConnection = () => {
    const user = piIntegration.getPiUser()
    if (user) {
      setPiUser(user)
      setIsConnected(true)
    }
  }

const handlePiSync = async () => {
    setIsLoading(true)

try {
      const success = await piIntegration.syncProfileWithPi()
      if (success) {
        setIsConnected(true)
        const user = piIntegration.getPiUser()
        setPiUser(user)

// Trigger profile refresh in parent component
        window.dispatchEvent(new CustomEvent("profile-updated"))
      }
    } catch (error) {
      console.error("Pi sync failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (!piAvailable) {
    return (
      <Card className="border-orange-200 bg-orange-50">
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <AlertCircle className="h-5 w-5 text-orange-600" />
            <div className="flex-1">
              <p className="text-sm font-medium text-orange-800">Pi Browser Not Detected</p>
              <p className="text-xs text-orange-600">Open this app in Pi Browser to sync your profile</p>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className={`border-2 ${isConnected ? "border-green-200 bg-green-50" : "border-purple-200 bg-purple-50"}`}>
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`p-2 rounded-full ${isConnected ? "bg-green-100" : "bg-purple-100"}`}>
              {isConnected ? (
                <CheckCircle className="h-5 w-5 text-green-600" />
              ) : (
                <Zap className="h-5 w-5 text-purple-600" />
              )}
            </div>
            <div>
              <div className="flex items-center gap-2">
                <p className="font-medium text-sm">Pi Network Profile</p>
                {isConnected && (
                  <Badge variant="secondary" className="text-xs">
                    Connected
                  </Badge>
                )}
              </div>
              <p className="text-xs text-muted-foreground">
                {isConnected ? `Synced as @${piUser?.username}` : "Sync your Pi Browser profile"}
              </p>
            </div>
          </div>

<Button
            size="sm"
            variant={isConnected ? "outline" : "default"}
            onClick={handlePiSync}
            disabled={isLoading}
            className="gap-2"
          >
            {isLoading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                Syncing...
              </>
            ) : isConnected ? (
              "Re-sync"
            ) : (
              <>
                <Zap className="h-4 w-4" />
                Connect Pi
              </>
            )}
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/pi-app-studio.ts" isMerged="true"
"use client"

// Pi App Studio SDK integration
export interface PiUser {
  uid: string
  username: string
  accessToken: string
}

export class PiAppStudioIntegration {
  private static instance: PiAppStudioIntegration
  private piSDK: any = null

static getInstance(): PiAppStudioIntegration {
    if (!PiAppStudioIntegration.instance) {
      PiAppStudioIntegration.instance = new PiAppStudioIntegration()
    }
    return PiAppStudioIntegration.instance
  }

async initializePi(): Promise<boolean> {
    try {
      // Pi App Studio uses window.Pi
      if (typeof window !== "undefined" && (window as any).Pi) {
        this.piSDK = (window as any).Pi
        await this.piSDK.init({ version: "2.0" })
        return true
      }
      return false
    } catch (error) {
      console.warn("Pi SDK initialization failed:", error)
      return false
    }
  }

async authenticateUser(): Promise<PiUser | null> {
    if (!this.piSDK) {
      const initialized = await this.initializePi()
      if (!initialized) return null
    }

try {
      // Request authentication with required scopes
      const scopes = ["username", "payments"] // Add payments if needed later
      const authResult = await this.piSDK.authenticate(scopes, {
        onIncompletePaymentFound: (payment: any) => {
          console.log("Incomplete payment found:", payment)
        },
      })

if (authResult.accessToken && authResult.user) {
        const piUser: PiUser = {
          uid: authResult.user.uid,
          username: authResult.user.username,
          accessToken: authResult.accessToken,
        }

// Store Pi user data
        localStorage.setItem("pi-user", JSON.stringify(piUser))
        return piUser
      }
    } catch (error) {
      console.error("Pi authentication failed:", error)
    }

return null
  }

async signOut(): Promise<void> {
    try {
      if (this.piSDK) {
        await this.piSDK.signOut()
      }
      localStorage.removeItem("pi-user")
    } catch (error) {
      console.error("Pi sign out failed:", error)
    }
  }

isPiAppStudio(): boolean {
    return typeof window !== "undefined" && (window as any).Pi !== undefined
  }

import React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Zap, CheckCircle, AlertCircle, Loader2, LogOut } from "lucide-react"
import { PiAppStudioIntegration } from "@/lib/pi-app-studio"

export function PiAppStudioSync() {
  const [isConnected, setIsConnected] = React.useState(false)
  const [isLoading, setIsLoading] = React.useState(false)
  const [piAvailable, setPiAvailable] = React.useState(false)
  const [piUser, setPiUser] = React.useState(null)

const piIntegration = PiAppStudioIntegration.getInstance()

React.useEffect(() => {
    checkPiAvailability()
    checkExistingConnection()
  }, [])

const checkPiAvailability = async () => {
    const available = piIntegration.isPiAppStudio()
    setPiAvailable(available)

if (available) {
      await piIntegration.initializePi()
    }
  }

const checkExistingConnection = () => {
    const user = piIntegration.getPiUser()
    if (user) {
      setPiUser(user)
      setIsConnected(true)
    }
  }

const handlePiAuth = async () => {
    setIsLoading(true)

try {
      const user = await piIntegration.authenticateUser()
      if (user) {
        setPiUser(user)
        setIsConnected(true)

// Sync with Scrolla profile
        const currentProfile = JSON.parse(localStorage.getItem("scrolla-user") || "{}")
        const syncedProfile = {
          ...currentProfile,
          id: user.uid,
          name: user.username,
          piConnected: true,
          piUsername: user.username,
          lastPiSync: new Date().toISOString(),
        }

localStorage.setItem("scrolla-user", JSON.stringify(syncedProfile))
        window.dispatchEvent(new CustomEvent("profile-updated"))
      }
    } catch (error) {
      console.error("Pi authentication failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSignOut = async () => {
    setIsLoading(true)
    try {
      await piIntegration.signOut()
      setPiUser(null)
      setIsConnected(false)

// Update Scrolla profile
      const currentProfile = JSON.parse(localStorage.getItem("scrolla-user") || "{}")
      const updatedProfile = {
        ...currentProfile,
        piConnected: false,
        piUsername: null,
      }
      localStorage.setItem("scrolla-user", JSON.stringify(updatedProfile))
      window.dispatchEvent(new CustomEvent("profile-updated"))
    } catch (error) {
      console.error("Sign out failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (!piAvailable) {
    return (
      <Card className="border-orange-200 bg-orange-50">
        <CardContent className="p-4">
          <div className="flex items-center gap-3">
            <AlertCircle className="h-5 w-5 text-orange-600" />
            <div className="flex-1">
              <p className="text-sm font-medium text-orange-800">Pi App Studio Required</p>
              <p className="text-xs text-orange-600">This feature works in Pi App Studio environment</p>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className={`border-2 ${isConnected ? "border-green-200 bg-green-50" : "border-purple-200 bg-purple-50"}`}>
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`p-2 rounded-full ${isConnected ? "bg-green-100" : "bg-purple-100"}`}>
              {isConnected ? (
                <CheckCircle className="h-5 w-5 text-green-600" />
              ) : (
                <Zap className="h-5 w-5 text-purple-600" />
              )}
            </div>
            <div>
              <div className="flex items-center gap-2">
                <p className="font-medium text-sm">Pi Network Profile</p>
                {isConnected && (
                  <Badge variant="secondary" className="text-xs">
                    Connected
                  </Badge>
                )}
              </div>
              <p className="text-xs text-muted-foreground">
                {isConnected ? `Synced as @${piUser?.username}` : "Connect your Pi Network profile"}
              </p>
            </div>
          </div>

<div className="flex gap-2">
            {isConnected && (
              <Button
                size="sm"
                variant="outline"
                onClick={handleSignOut}
                disabled={isLoading}
                className="gap-1 bg-transparent"
              >
                <LogOut className="h-4 w-4" />
              </Button>
            )}

<Button
              size="sm"
              variant={isConnected ? "outline" : "default"}
              onClick={handlePiAuth}
              disabled={isLoading}
              className="gap-2"
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  {isConnected ? "Syncing..." : "Connecting..."}
                </>
              ) : isConnected ? (
                "Re-sync"
              ) : (
                <>
                  <Zap className="h-4 w-4" />
                  Connect Pi
                </>
              )}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]markdown:file="docs/privacy-policy.md" isMerged="true"
# Privacy Policy for Scrolla

**Last Updated: [Current Date]**
**Effective Date: [Current Date]**

## 1. Introduction

Scrolla ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our episodic storytelling platform.

## 2. Information We Collect

### 2.1 Personal Information
- **Account Information**: Username, email address (if provided)
- **Profile Data**: Display name, bio, avatar/profile picture
- **Pi Network Data**: Pi username, Pi user ID (when connected)

### 2.2 Content Information
- **Stories and Episodes**: Text content you create and publish
- **Comments**: Your comments on stories and episodes
- **Interactions**: Likes, follows, reading history

### 2.3 Technical Information
- **Device Information**: Browser type, device type, operating system
- **Usage Data**: Pages visited, time spent, features used
- **Local Storage**: Data stored in your browser's local storage

### 2.4 Pi Network Integration
- **Pi Profile Data**: Username, verification status (when you connect)
- **Authentication Tokens**: Secure tokens for Pi Network integration
- **Transaction Data**: Pi payment information (if applicable in future)

## 3. How We Use Your Information

### 3.1 Core App Functions
- Provide storytelling platform services
- Enable user authentication and profile management
- Display your published content to other users
- Facilitate social features (following, commenting, liking)

### 3.2 Pi Network Integration
- Sync your profile with Pi Network account
- Authenticate your identity through Pi Network
- Enable Pi-based features and payments (future)

### 3.3 App Improvement
- Analyze usage patterns to improve user experience
- Identify and fix technical issues
- Develop new features based on user behavior

## 4. Information Sharing and Disclosure

### 4.1 Public Information
- **Published Content**: Stories, episodes, and comments are public
- **Profile Information**: Username, bio, and avatar are visible to other users
- **Social Interactions**: Likes, follows, and reading activity may be visible

### 4.2 Pi Network Integration
- **Limited Sharing**: Only necessary data shared with Pi Network for authentication
- **No Third-Party Sales**: We do not sell your Pi Network data to third parties

### 4.3 Legal Requirements
We may disclose information if required by law or to:
- Comply with legal processes
- Protect our rights and safety
- Prevent fraud or abuse

## 5. Data Storage and Security

### 5.1 Local Storage
- Primary data storage in your browser's local storage
- Data remains on your device unless explicitly shared

### 5.2 Pi Network Integration
- Secure authentication through Pi Network protocols
- Encrypted communication with Pi Network services

### 5.3 Security Measures
- Industry-standard security practices
- Regular security updates and monitoring
- Secure data transmission (HTTPS)

## 6. Your Rights and Choices

### 6.1 Account Control
- Edit or delete your profile information
- Remove published content
- Disconnect Pi Network integration

### 6.2 Data Access
- View all data associated with your account
- Export your content and data
- Request data deletion

### 6.3 Privacy Settings
- Control visibility of your profile and activity
- Manage Pi Network connection settings
- Opt out of certain data collection

## 7. Children's Privacy

Scrolla is not intended for children under 13. We do not knowingly collect personal information from children under 13. If you believe a child has provided us with personal information, please contact us.

## 8. International Users

If you are accessing Scrolla from outside [Your Country], please note that your information may be transferred to, stored, and processed in [Your Country] where our servers are located.

## 9. Changes to Privacy Policy

We may update this Privacy Policy periodically. We will notify users of significant changes through:
- In-app notifications
- Email notifications (if provided)
- Updated "Last Modified" date

## 10. Contact Information

For privacy-related questions or concerns:
- **Email**: privacy@scrolla.app
- **Contact Form**: [Your contact method]
- **Address**: [Your business address if applicable]

## 11. Pi Network Specific Terms

### 11.1 Pi Integration
- Pi Network integration is optional
- You can disconnect Pi Network at any time
- Pi-related data follows Pi Network's privacy policies

### 11.2 Future Pi Features
- Payment integration (when available)
- Enhanced verification features
- Pi ecosystem benefits

---

*This Privacy Policy is designed to comply with GDPR, CCPA, and other privacy regulations. Consult with legal counsel for specific compliance requirements.*
[V0_FILE]markdown:file="docs/terms-of-service.md" isMerged="true"
# Terms of Service for Scrolla

**Last Updated: [Current Date]**
**Effective Date: [Current Date]**

## 1. Acceptance of Terms

By accessing or using Scrolla ("the Service"), you agree to be bound by these Terms of Service ("Terms"). If you do not agree to these Terms, do not use the Service.

## 2. Description of Service

Scrolla is a mobile-first platform for episodic storytelling where:
- Writers can publish stories in episodes (max 2,000 characters per episode)
- Readers can discover, read, comment, and review episodes
- Users can follow authors and engage with the community
- Optional Pi Network integration for enhanced features

## 3. User Accounts and Registration

### 3.1 Account Creation
- You may use Scrolla with or without creating an account
- Account creation enables additional features
- You are responsible for maintaining account security

### 3.2 Pi Network Integration
- Pi Network connection is optional
- Pi integration requires valid Pi Network account
- Pi-related features subject to Pi Network terms

### 3.3 Account Responsibilities
- Provide accurate information
- Maintain confidentiality of login credentials
- Notify us of unauthorized account access

## 4. User Content and Conduct

### 4.1 Content Guidelines
**Permitted Content:**
- Original stories and creative writing
- Constructive comments and reviews
- Appropriate profile information

**Prohibited Content:**
- Copyrighted material without permission
- Hate speech, harassment, or discrimination
- Adult content or explicit material
- Spam, malware, or malicious content
- False or misleading information

### 4.2 Content Ownership
- You retain ownership of content you create
- You grant Scrolla license to display and distribute your content
- You can delete your content at any time

### 4.3 Community Standards
- Respect other users and their content
- Provide constructive feedback
- Follow episode length limits (2,000 characters)
- Use appropriate language and behavior

## 5. Intellectual Property

### 5.1 Your Content
- You own the intellectual property rights to your original content
- You are responsible for ensuring you have rights to content you post
- You grant Scrolla a non-exclusive license to use your content on the platform

### 5.2 Scrolla Platform
- Scrolla owns all rights to the platform, design, and functionality
- You may not copy, modify, or distribute our platform code
- Our trademarks and branding are protected

### 5.3 Third-Party Content
- Respect others' intellectual property rights
- Report copyright infringement to us
- We will respond to valid DMCA takedown requests

## 6. Pi Network Integration

### 6.1 Optional Integration
- Pi Network features are optional
- You can connect or disconnect Pi Network at any time
- Pi integration enhances but doesn't replace core functionality

### 6.2 Pi Network Terms
- Pi-related features subject to Pi Network Terms of Service
- Pi payments and transactions follow Pi Network policies
- We are not responsible for Pi Network service issues

### 6.3 Future Pi Features
- Payment integration for premium features (when available)
- Enhanced verification and reputation systems
- Pi ecosystem rewards and benefits

## 7. Privacy and Data Protection

### 7.1 Data Collection
- We collect minimal data necessary for service operation
- See our Privacy Policy for detailed information
- You control most of your data sharing preferences

### 7.2 Local Storage
- Primary data storage in your browser
- Data portability and export available
- You can delete your data at any time

## 8. Service Availability and Modifications

### 8.1 Service Availability
- We strive for high uptime but cannot guarantee 100% availability
- Maintenance and updates may temporarily interrupt service
- We are not liable for service interruptions

### 8.2 Service Modifications
- We may modify features and functionality
- Significant changes will be communicated to users
- Continued use constitutes acceptance of modifications

## 9. Prohibited Uses

You may not use Scrolla to:
- Violate any laws or regulations
- Infringe on others' rights
- Distribute malware or harmful code
- Attempt to hack or compromise the platform
- Create multiple accounts to circumvent restrictions
- Use automated tools to access the service

## 10. Termination

### 10.1 Your Right to Terminate
- You may stop using Scrolla at any time
- You may delete your account and data
- You may disconnect Pi Network integration

### 10.2 Our Right to Terminate
We may suspend or terminate your access if you:
- Violate these Terms of Service
- Engage in prohibited conduct
- Pose a security risk to the platform

### 10.3 Effect of Termination
- Your access to the service will be discontinued
- Your content may be removed from the platform
- Some data may be retained for legal compliance

## 11. Disclaimers and Limitations

### 11.1 Service Disclaimers
- Scrolla is provided "as is" without warranties
- We do not guarantee accuracy of user-generated content
- We are not responsible for user interactions or disputes

### 11.2 Limitation of Liability
- Our liability is limited to the maximum extent permitted by law
- We are not liable for indirect, incidental, or consequential damages
- Total liability shall not exceed the amount you paid for the service

## 12. Indemnification

You agree to indemnify and hold Scrolla harmless from claims arising from:
- Your use of the service
- Your content or conduct
- Your violation of these terms
- Your violation of others' rights

## 13. Governing Law and Disputes

### 13.1 Governing Law
These Terms are governed by the laws of [Your Jurisdiction].

### 13.2 Dispute Resolution
- First attempt: Good faith negotiation
- Binding arbitration for unresolved disputes
- Class action waiver (where legally permitted)

## 14. Miscellaneous

### 14.1 Entire Agreement
These Terms constitute the entire agreement between you and Scrolla.

### 14.2 Severability
If any provision is found invalid, the remaining provisions remain in effect.

### 14.3 Updates to Terms
- We may update these Terms periodically
- Significant changes will be communicated to users
- Continued use constitutes acceptance of updated Terms

## 15. Contact Information

For questions about these Terms:
- **Email**: legal@scrolla.app
- **Contact Form**: [Your contact method]
- **Address**: [Your business address if applicable]

---

*These Terms of Service are designed to be fair and protective for both users and the platform. Consult with legal counsel for specific legal compliance requirements.*
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, Mail } from "lucide-react"
import Link from "next/link"

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <Shield className="h-5 w-5 text-primary" />
            <h1 className="font-semibold">Privacy Policy</h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6 pb-20">
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              Privacy Policy for Scrolla
            </CardTitle>
            <p className="text-sm text-muted-foreground">Last Updated: {new Date().toLocaleDateString()}</p>
          </CardHeader>
        </Card>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">1. Introduction</CardTitle>
            </CardHeader>
            <CardContent className="prose prose-sm max-w-none">
              <p>
                Scrolla ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains how
                we collect, use, disclose, and safeguard your information when you use our episodic storytelling
                platform.
              </p>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">2. Information We Collect</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">2.1 Personal Information</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Account Information: Username, email address (if provided)</li>
                  <li>• Profile Data: Display name, bio, avatar/profile picture</li>
                  <li>• Pi Network Data: Pi username, Pi user ID (when connected)</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">2.2 Content Information</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Stories and Episodes: Text content you create and publish</li>
                  <li>• Comments: Your comments on stories and episodes</li>
                  <li>• Interactions: Likes, follows, reading history</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">2.3 Technical Information</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Device Information: Browser type, device type, operating system</li>
                  <li>• Usage Data: Pages visited, time spent, features used</li>
                  <li>• Local Storage: Data stored in your browser's local storage</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">3. How We Use Your Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">3.1 Core App Functions</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Provide storytelling platform services</li>
                  <li>• Enable user authentication and profile management</li>
                  <li>• Display your published content to other users</li>
                  <li>• Facilitate social features (following, commenting, liking)</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">3.2 Pi Network Integration</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Sync your profile with Pi Network account</li>
                  <li>• Authenticate your identity through Pi Network</li>
                  <li>• Enable Pi-based features and payments (future)</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">4. Data Storage and Security</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">4.1 Local Storage</h4>
                <p className="text-sm text-muted-foreground">
                  Primary data storage in your browser's local storage. Data remains on your device unless explicitly
                  shared.
                </p>
              </div>
              <div>
                <h4 className="font-medium mb-2">4.2 Security Measures</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Industry-standard security practices</li>
                  <li>• Secure data transmission (HTTPS)</li>
                  <li>• Encrypted Pi Network communication</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">5. Your Rights and Choices</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                <li>• Edit or delete your profile information</li>
                <li>• Remove published content</li>
                <li>• Disconnect Pi Network integration</li>
                <li>• Export your content and data</li>
                <li>• Control visibility of your profile and activity</li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">6. Pi Network Integration</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-2">
                Pi Network integration is optional and can be connected or disconnected at any time.
              </p>
              <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                <li>• Only necessary data shared with Pi Network for authentication</li>
                <li>• We do not sell your Pi Network data to third parties</li>
                <li>• Pi-related data follows Pi Network's privacy policies</li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">7. Contact Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2 text-sm">
                <Mail className="h-4 w-4" />
                <span>For privacy-related questions: privacy@scrolla.app</span>
              </div>
              <p className="text-xs text-muted-foreground mt-2">We will respond to privacy inquiries within 30 days.</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Scale, Mail } from "lucide-react"
import Link from "next/link"

export default function TermsOfServicePage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <Scale className="h-5 w-5 text-primary" />
            <h1 className="font-semibold">Terms of Service</h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6 pb-20">
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Scale className="h-5 w-5" />
              Terms of Service for Scrolla
            </CardTitle>
            <p className="text-sm text-muted-foreground">Last Updated: {new Date().toLocaleDateString()}</p>
          </CardHeader>
        </Card>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">1. Acceptance of Terms</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">
                By accessing or using Scrolla ("the Service"), you agree to be bound by these Terms of Service. If you
                do not agree to these Terms, do not use the Service.
              </p>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">2. Description of Service</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-2">
                Scrolla is a mobile-first platform for episodic storytelling where:
              </p>
              <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                <li>• Writers can publish stories in episodes (max 2,000 characters per episode)</li>
                <li>• Readers can discover, read, comment, and review episodes</li>
                <li>• Users can follow authors and engage with the community</li>
                <li>• Optional Pi Network integration for enhanced features</li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">3. User Content and Conduct</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2 text-green-700">✅ Permitted Content:</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Original stories and creative writing</li>
                  <li>• Constructive comments and reviews</li>
                  <li>• Appropriate profile information</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2 text-red-700">❌ Prohibited Content:</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Copyrighted material without permission</li>
                  <li>• Hate speech, harassment, or discrimination</li>
                  <li>• Adult content or explicit material</li>
                  <li>• Spam, malware, or malicious content</li>
                  <li>• False or misleading information</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">4. Content Ownership</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm text-muted-foreground space-y-2">
                <li>
                  • <strong>You retain ownership</strong> of content you create
                </li>
                <li>
                  • <strong>You grant Scrolla license</strong> to display and distribute your content
                </li>
                <li>
                  • <strong>You can delete</strong> your content at any time
                </li>
                <li>
                  • <strong>You are responsible</strong> for ensuring you have rights to content you post
                </li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">5. Pi Network Integration</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">5.1 Optional Integration</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Pi Network features are optional</li>
                  <li>• You can connect or disconnect Pi Network at any time</li>
                  <li>• Pi integration enhances but doesn't replace core functionality</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">5.2 Pi Network Terms</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Pi-related features subject to Pi Network Terms of Service</li>
                  <li>• Pi payments and transactions follow Pi Network policies</li>
                  <li>• We are not responsible for Pi Network service issues</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">6. Community Standards</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                <li>• Respect other users and their content</li>
                <li>• Provide constructive feedback</li>
                <li>• Follow episode length limits (2,000 characters)</li>
                <li>• Use appropriate language and behavior</li>
                <li>• Report inappropriate content or behavior</li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">7. Account Termination</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">Your Rights:</h4>
                <ul className="text-sm text-muted-foreground space-y-1 ml-4">
                  <li>• Stop using Scrolla at any time</li>
                  <li>• Delete your account and data</li>
                  <li>• Disconnect Pi Network integration</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium mb-2">Our Rights:</h4>
                <p className="text-sm text-muted-foreground">
                  We may suspend or terminate your access if you violate these Terms, engage in prohibited conduct, or
                  pose a security risk to the platform.
                </p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">8. Contact Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2 text-sm mb-2">
                <Mail className="h-4 w-4" />
                <span>For questions about these Terms: legal@scrolla.app</span>
              </div>
              <p className="text-xs text-muted-foreground">We will respond to legal inquiries within 30 days.</p>
            </CardContent>
          </Card>

<Card className="border-amber-200 bg-amber-50">
            <CardContent className="p-4">
              <p className="text-sm text-amber-800">
                <strong>Important:</strong> These Terms of Service are designed to be fair and protective for both users
                and the platform. By using Scrolla, you acknowledge that you have read, understood, and agree to be
                bound by these terms.
              </p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/legal-footer.tsx" isMerged="true"
"use client"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"

export function LegalFooter() {
  return (
    <footer className="border-t bg-muted/30 mt-8">
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-col items-center gap-4 text-center">
          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            <Link href="/privacy" className="hover:text-foreground transition-colors">
              Privacy Policy
            </Link>
            <Separator orientation="vertical" className="h-4" />
            <Link href="/terms" className="hover:text-foreground transition-colors">
              Terms of Service
            </Link>
            <Separator orientation="vertical" className="h-4" />
            <span>© 2024 Scrolla</span>
          </div>
          <p className="text-xs text-muted-foreground max-w-md">
            Scrolla is an episodic storytelling platform. By using this service, you agree to our Terms of Service and
            Privacy Policy.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/challenges/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import {
  ArrowLeft,
  Trophy,
  Users,
  Zap,
  Target,
  Gift,
  TrendingUp,
  Calendar,
  Coins,
  CheckCircle,
  Loader2,
} from "lucide-react"
import Link from "next/link"
import { PiChallengeSystem, type Challenge } from "@/lib/pi-challenge-system"

export default function ChallengeDetailPage({ params }: { params: { id: string } }) {
  const [challenge, setChallenge] = React.useState<Challenge | null>(null)
  const [isJoining, setIsJoining] = React.useState(false)
  const [hasJoined, setHasJoined] = React.useState(false)
  const [userRank, setUserRank] = React.useState<number | null>(null)

const challengeSystem = PiChallengeSystem.getInstance()

React.useEffect(() => {
    loadChallenge()
  }, [params.id])

const loadChallenge = () => {
    const challengeData = challengeSystem.getChallengeById(params.id)
    setChallenge(challengeData)

if (challengeData) {
      // Mock user ID - in real app, get from authentication
      const userId = "user-1"
      const userParticipant = challengeData.participants.find((p) => p.userId === userId)
      setHasJoined(!!userParticipant)

if (userParticipant) {
        const rank = challengeSystem.getUserRank(params.id, userId)
        setUserRank(rank)
      }
    }
  }

const handleJoinChallenge = async () => {
    if (!challenge) return

setIsJoining(true)
    try {
      // Mock user data - in real app, get from authentication
      const userId = "user-1"
      const username = "John Writer"
      const avatar = "/placeholder.svg?height=40&width=40"

await challengeSystem.joinChallenge(challenge.id, userId, username, avatar)
      setHasJoined(true)
      loadChallenge() // Refresh challenge data
    } catch (error) {
      console.error("Error joining challenge:", error)
      alert(error instanceof Error ? error.message : "Failed to join challenge")
    } finally {
      setIsJoining(false)
    }
  }

const formatTimeRemaining = (endDate: string) => {
    const now = new Date()
    const end = new Date(endDate)
    const diff = end.getTime() - now.getTime()

if (diff <= 0) return "Ended"

const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

if (days > 0) return `${days}d ${hours}h ${minutes}m`
    if (hours > 0) return `${hours}h ${minutes}m`
    return `${minutes}m`
  }

const calculateProgress = (startDate: string, endDate: string) => {
    const now = new Date()
    const start = new Date(startDate)
    const end = new Date(endDate)

const total = end.getTime() - start.getTime()
    const elapsed = now.getTime() - start.getTime()

return Math.max(0, Math.min(100, (elapsed / total) * 100))
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "text-green-600 bg-green-100"
      case "upcoming":
        return "text-blue-600 bg-blue-100"
      case "ended":
        return "text-orange-600 bg-orange-100"
      case "completed":
        return "text-purple-600 bg-purple-100"
      default:
        return "text-gray-600 bg-gray-100"
    }
  }

const calculatePrizeDistribution = () => {
    if (!challenge) return []

const N = challenge.participants.length // Number of participants
    const E = challenge.entryFee // Entry fee per user
    const prizePool = N * E // Total prize pool

if (N === 0) return []

const distributions = []

// Calculate top 10% count
    const top10Count = Math.max(1, Math.floor(N * 0.1))
    const top10Eligible = N >= 10 ? top10Count - 3 : 0

// 1st Place: 50% of prize pool + 3.14 Pi bonus
    if (N >= 1) {
      distributions.push({
        place: "🥇 1st Place",
        percentage: "50%",
        amount: 0.5 * N * E,
        bonus: 3.14,
        formula: `(0.5 × ${N} × ${E}) + 3.14`,
      })
    }

// 2nd Place: 30% of prize pool
    if (N >= 2) {
      distributions.push({
        place: "🥈 2nd Place",
        percentage: "30%",
        amount: 0.3 * N * E,
        formula: `0.3 × ${N} × ${E}`,
      })
    }

// 3rd Place: 5% of prize pool
    if (N >= 3) {
      distributions.push({
        place: "🥉 3rd Place",
        percentage: "5%",
        amount: 0.05 * N * E,
        formula: `0.05 × ${N} × ${E}`,
      })
    }

// Top 10%: Each gets 0.5 × E
    if (top10Eligible > 0) {
      const individualAmount = 0.5 * E
      distributions.push({
        place: `🏆 Top 10% (${top10Eligible} users)`,
        percentage: "5% total",
        amount: individualAmount,
        shared: true,
        totalShared: top10Eligible * individualAmount,
        formula: `0.5 × ${E} each`,
      })
    }

return distributions
  }

// Add operator revenue calculation
  const calculateOperatorRevenue = () => {
    if (!challenge) return 0
    const N = challenge.participants.length
    const E = challenge.entryFee
    return 0.1 * N * E
  }

if (!challenge) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div>Challenge not found</div>
      </div>
    )
  }

const sortedParticipants = [...challenge.participants].sort((a, b) => b.score - a.score)
  const prizeDistribution = calculatePrizeDistribution()

return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/challenges">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <Trophy className="h-5 w-5 text-primary" />
            <h1 className="font-semibold truncate">{challenge.title}</h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6 pb-20">
        {/* Challenge Header */}
        <Card className="mb-6">
          <CardHeader>
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <h1 className="text-xl font-bold">{challenge.title}</h1>
                  <Badge className={getStatusColor(challenge.status)}>
                    {challenge.status === "active" && "🔥 Active"}
                    {challenge.status === "upcoming" && "⏰ Upcoming"}
                    {challenge.status === "ended" && "⏳ Calculating"}
                    {challenge.status === "completed" && "✅ Completed"}
                  </Badge>
                </div>
                <p className="text-muted-foreground mb-4">{challenge.description}</p>

{/* Challenge Progress */}
                {challenge.status === "active" && (
                  <div className="mb-4">
                    <div className="flex items-center justify-between text-sm mb-2">
                      <span className="font-medium">Time Remaining</span>
                      <span className="text-muted-foreground">{formatTimeRemaining(challenge.endDate)}</span>
                    </div>
                    <Progress value={calculateProgress(challenge.startDate, challenge.endDate)} className="h-3" />
                  </div>
                )}

{/* User Status */}
                {hasJoined && (
                  <div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg mb-4">
                    <CheckCircle className="h-5 w-5 text-green-600" />
                    <div>
                      <p className="text-sm font-medium text-green-800">You're participating in this challenge!</p>
                      {userRank && <p className="text-xs text-green-600">Current rank: #{userRank}</p>}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </CardHeader>
        </Card>

{/* Challenge Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardContent className="p-4 text-center">
              <Coins className="h-6 w-6 mx-auto mb-2 text-yellow-500" />
              <div className="text-lg font-bold">{challenge.entryFee}π</div>
              <div className="text-xs text-muted-foreground">Entry Fee</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <Gift className="h-6 w-6 mx-auto mb-2 text-purple-500" />
              <div className="text-lg font-bold">{challenge.prizePool.toFixed(2)}π</div>
              <div className="text-xs text-muted-foreground">Prize Pool</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <Users className="h-6 w-6 mx-auto mb-2 text-blue-500" />
              <div className="text-lg font-bold">
                {challenge.participants.length}
                {challenge.maxParticipants && `/${challenge.maxParticipants}`}
              </div>
              <div className="text-xs text-muted-foreground">Participants</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 text-center">
              <Calendar className="h-6 w-6 mx-auto mb-2 text-green-500" />
              <div className="text-lg font-bold">
                {Math.ceil(
                  (new Date(challenge.endDate).getTime() - new Date(challenge.startDate).getTime()) /
                    (1000 * 60 * 60 * 24),
                )}
                d
              </div>
              <div className="text-xs text-muted-foreground">Duration</div>
            </CardContent>
          </Card>
        </div>

{/* Join Challenge Button */}
        {!hasJoined && (challenge.status === "upcoming" || challenge.status === "active") && (
          <Card className="mb-6 border-primary">
            <CardContent className="p-6 text-center">
              <Trophy className="h-12 w-12 mx-auto mb-4 text-primary" />
              <h3 className="text-lg font-semibold mb-2">Ready to compete?</h3>
              <p className="text-muted-foreground mb-4">
                Join this challenge for {challenge.entryFee}π and compete for your share of the{" "}
                {challenge.prizePool.toFixed(2)}π prize pool!
              </p>
              <Button onClick={handleJoinChallenge} disabled={isJoining} className="gap-2">
                {isJoining ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Joining...
                  </>
                ) : (
                  <>
                    <Zap className="h-4 w-4" />
                    Join Challenge ({challenge.entryFee}π)
                  </>
                )}
              </Button>
            </CardContent>
          </Card>
        )}

{/* Prize Distribution */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Gift className="h-5 w-5" />
              Prize Distribution
            </CardTitle>
            <div className="text-sm text-muted-foreground">
              Formula: N = {challenge.participants.length} participants, E = {challenge.entryFee}π entry fee
            </div>
          </CardHeader>
          <CardContent>
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <div className="text-sm font-medium text-blue-800 mb-2">Prize Pool Calculation</div>
              <div className="text-xs text-blue-600">
                Prize Pool = N × E = {challenge.participants.length} × {challenge.entryFee}π ={" "}
                {challenge.prizePool.toFixed(2)}π
              </div>
            </div>

<div className="space-y-3">
              {prizeDistribution.map((prize, index) => (
                <div key={index} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                  <div className="flex items-center gap-3">
                    <span className="text-lg">{prize.place.split(" ")[0]}</span>
                    <div>
                      <div className="font-medium">{prize.place}</div>
                      <div className="text-xs text-muted-foreground">
                        {prize.formula && <span className="font-mono bg-gray-100 px-1 rounded">{prize.formula}</span>}
                        {prize.shared && " (shared equally)"}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-bold">
                      {prize.shared ? (
                        <>
                          <div>{prize.amount.toFixed(2)}π each</div>
                          <div className="text-xs text-muted-foreground">{prize.totalShared?.toFixed(2)}π total</div>
                        </>
                      ) : (
                        <div>{prize.amount.toFixed(2)}π</div>
                      )}
                    </div>
                    {prize.bonus && <div className="text-xs text-green-600">+ {prize.bonus}π bonus</div>}
                  </div>
                </div>
              ))}
            </div>

<div className="space-y-2 text-xs text-muted-foreground">
              <div className="flex justify-between">
                <span>Operator Revenue (10%):</span>
                <span className="font-mono">{calculateOperatorRevenue().toFixed(2)}π</span>
              </div>
              <div className="flex justify-between">
                <span>1st Place Bonus (separate):</span>
                <span className="font-mono">3.14π</span>
              </div>
              <div className="pt-2 border-t">
                <div className="text-xs text-muted-foreground">
                  * The 3.14π bonus for 1st place is paid separately from the prize pool
                </div>
                <div className="text-xs text-muted-foreground">
                  * Each Top 10% participant receives exactly 0.5 × Entry Fee
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Challenge Rules */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="h-5 w-5" />
              Challenge Rules
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              {challenge.rules.map((rule, index) => (
                <li key={index} className="flex items-start gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
                  <span>{rule}</span>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>

{/* Leaderboard */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5" />
              Leaderboard ({challenge.participants.length} participants)
            </CardTitle>
          </CardHeader>
          <CardContent>
            {sortedParticipants.length === 0 ? (
              <div className="text-center py-8">
                <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                <p className="text-muted-foreground">No participants yet. Be the first to join!</p>
              </div>
            ) : (
              <div className="space-y-3">
                {sortedParticipants.map((participant, index) => (
                  <div
                    key={participant.userId}
                    className={`flex items-center gap-4 p-3 rounded-lg ${
                      index < 3
                        ? "bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-200"
                        : "bg-muted/30"
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <div
                        className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${
                          index === 0
                            ? "bg-yellow-500 text-white"
                            : index === 1
                              ? "bg-gray-400 text-white"
                              : index === 2
                                ? "bg-orange-500 text-white"
                                : "bg-muted text-muted-foreground"
                        }`}
                      >
                        {index < 3 ? (index === 0 ? "🥇" : index === 1 ? "🥈" : "🥉") : index + 1}
                      </div>
                      <Avatar className="h-10 w-10">
                        <AvatarImage src={participant.avatar || "/placeholder.svg"} />
                        <AvatarFallback>{participant.username[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{participant.username}</div>
                        <div className="text-xs text-muted-foreground">
                          Joined {new Date(participant.entryDate).toLocaleDateString()}
                        </div>
                      </div>
                    </div>
                    <div className="ml-auto text-right">
                      <div className="font-bold text-lg">{participant.score.toLocaleString()}</div>
                      <div className="text-xs text-muted-foreground">points</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/challenges/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { ArrowLeft, Trophy, Users, Zap, Target, Gift, TrendingUp, Coins } from "lucide-react"
import Link from "next/link"
import { PiChallengeSystem, type Challenge } from "@/lib/pi-challenge-system"

export default function ChallengesPage() {
  const [challenges, setChallenges] = React.useState<Challenge[]>([])
  const [activeTab, setActiveTab] = React.useState("active")
  const [userChallenges, setUserChallenges] = React.useState<Challenge[]>([])

const challengeSystem = PiChallengeSystem.getInstance()

React.useEffect(() => {
    loadChallenges()
  }, [])

const loadChallenges = () => {
    const allChallenges = challengeSystem.getAllChallenges()
    setChallenges(allChallenges)

// Mock user ID - in real app, get from authentication
    const userId = "user-1"
    const userParticipating = challengeSystem.getUserChallenges(userId)
    setUserChallenges(userParticipating)
  }

const getFilteredChallenges = () => {
    switch (activeTab) {
      case "active":
        return challenges.filter((c) => c.status === "active" || c.status === "upcoming")
      case "my":
        return userChallenges
      case "completed":
        return challenges.filter((c) => c.status === "completed")
      default:
        return challenges
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-500"
      case "upcoming":
        return "bg-blue-500"
      case "ended":
        return "bg-orange-500"
      case "completed":
        return "bg-purple-500"
      default:
        return "bg-gray-500"
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "active":
        return "🔥 Active"
      case "upcoming":
        return "⏰ Upcoming"
      case "ended":
        return "⏳ Calculating"
      case "completed":
        return "✅ Completed"
      default:
        return status
    }
  }

const formatTimeRemaining = (endDate: string) => {
    const now = new Date()
    const end = new Date(endDate)
    const diff = end.getTime() - now.getTime()

if (diff <= 0) return "Ended"

const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

if (days > 0) return `${days}d ${hours}h remaining`
    return `${hours}h remaining`
  }

const calculateProgress = (startDate: string, endDate: string) => {
    const now = new Date()
    const start = new Date(startDate)
    const end = new Date(endDate)

const total = end.getTime() - start.getTime()
    const elapsed = now.getTime() - start.getTime()

return Math.max(0, Math.min(100, (elapsed / total) * 100))
  }

return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <Trophy className="h-5 w-5 text-primary" />
            <h1 className="font-semibold">Pi Challenges</h1>
          </div>
        </div>
      </header>

{/* Challenge Stats */}
      <div className="container mx-auto px-4 py-4">
        <div className="grid grid-cols-3 gap-4 mb-6">
          <Card className="text-center">
            <CardContent className="p-4">
              <Trophy className="h-6 w-6 mx-auto mb-2 text-yellow-500" />
              <div className="text-lg font-bold">{challenges.filter((c) => c.status === "active").length}</div>
              <div className="text-xs text-muted-foreground">Active</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="p-4">
              <Users className="h-6 w-6 mx-auto mb-2 text-blue-500" />
              <div className="text-lg font-bold">{userChallenges.length}</div>
              <div className="text-xs text-muted-foreground">Joined</div>
            </CardContent>
          </Card>
          <Card className="text-center">
            <CardContent className="p-4">
              <Coins className="h-6 w-6 mx-auto mb-2 text-purple-500" />
              <div className="text-lg font-bold">{challenges.reduce((sum, c) => sum + c.prizePool, 0).toFixed(2)}π</div>
              <div className="text-xs text-muted-foreground">Total Prizes</div>
            </CardContent>
          </Card>
        </div>

{/* Tabs */}
        <div className="flex gap-2 mb-4">
          <Button
            variant={activeTab === "active" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("active")}
            className="gap-2"
          >
            <Zap className="h-4 w-4" />
            Active ({challenges.filter((c) => c.status === "active" || c.status === "upcoming").length})
          </Button>
          <Button
            variant={activeTab === "my" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("my")}
            className="gap-2"
          >
            <Target className="h-4 w-4" />
            My Challenges ({userChallenges.length})
          </Button>
          <Button
            variant={activeTab === "completed" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("completed")}
            className="gap-2"
          >
            <Trophy className="h-4 w-4" />
            Completed ({challenges.filter((c) => c.status === "completed").length})
          </Button>
        </div>
      </div>

{/* Challenges List */}
      <div className="container mx-auto px-4 pb-20">
        <div className="space-y-4">
          {getFilteredChallenges().length === 0 ? (
            <Card className="p-8 text-center">
              <Trophy className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <h3 className="font-semibold mb-2">No Challenges Found</h3>
              <p className="text-muted-foreground mb-4">
                {activeTab === "my"
                  ? "You haven't joined any challenges yet."
                  : "No challenges available in this category."}
              </p>
              {activeTab === "my" && <Button onClick={() => setActiveTab("active")}>Browse Active Challenges</Button>}
            </Card>
          ) : (
            getFilteredChallenges().map((challenge) => (
              <Link key={challenge.id} href={`/challenges/${challenge.id}`}>
                <Card className="hover:shadow-md transition-shadow">
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-semibold text-lg">{challenge.title}</h3>
                          <Badge variant="secondary" className={`text-xs ${getStatusColor(challenge.status)}`}>
                            {getStatusText(challenge.status)}
                          </Badge>
                          {challenge.type === "writing" && <Badge variant="outline">✍️ Writing</Badge>}
                          {challenge.type === "reading" && <Badge variant="outline">📚 Reading</Badge>}
                          {challenge.type === "engagement" && <Badge variant="outline">💬 Engagement</Badge>}
                        </div>
                        <p className="text-sm text-muted-foreground mb-3">{challenge.description}</p>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    {/* Challenge Progress */}
                    {challenge.status === "active" && (
                      <div className="mb-4">
                        <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
                          <span>Progress</span>
                          <span>{formatTimeRemaining(challenge.endDate)}</span>
                        </div>
                        <Progress value={calculateProgress(challenge.startDate, challenge.endDate)} className="h-2" />
                      </div>
                    )}

{/* Challenge Info */}
                    <div className="grid grid-cols-2 gap-4 mb-4">
                      <div className="flex items-center gap-2 text-sm">
                        <Coins className="h-4 w-4 text-yellow-500" />
                        <span className="text-muted-foreground">Entry:</span>
                        <span className="font-medium">{challenge.entryFee}π</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Gift className="h-4 w-4 text-purple-500" />
                        <span className="text-muted-foreground">Prize Pool:</span>
                        <span className="font-medium">
                          {(challenge.participants.length * challenge.entryFee).toFixed(2)}π
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Users className="h-4 w-4 text-blue-500" />
                        <span className="text-muted-foreground">Participants:</span>
                        <span className="font-medium">
                          {challenge.participants.length}
                          {challenge.maxParticipants && `/${challenge.maxParticipants}`}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Trophy className="h-4 w-4 text-orange-500" />
                        <span className="text-muted-foreground">1st Prize:</span>
                        <span className="font-medium">
                          {challenge.participants.length > 0
                            ? `${(0.5 * challenge.participants.length * challenge.entryFee + 3.14).toFixed(2)}π`
                            : `${(0.5 * challenge.entryFee + 3.14).toFixed(2)}π*`}
                        </span>
                      </div>
                    </div>

{/* Prize Distribution Preview */}
                    <div className="bg-muted/50 rounded-lg p-3 mb-3">
                      <div className="text-xs font-medium mb-2 flex items-center gap-1">
                        <Trophy className="h-3 w-3" />
                        Prize Formula (N={challenge.participants.length}, E={challenge.entryFee}π)
                      </div>
                      <div className="grid grid-cols-2 gap-2 text-xs">
                        <div>🥇 1st: 50%×N×E + 3.14π</div>
                        <div>🥈 2nd: 30%×N×E</div>
                        <div>🥉 3rd: 5%×N×E</div>
                        <div>🏆 Top 10%: 0.5×E each</div>
                      </div>
                    </div>

{/* Top Participants */}
                    {challenge.participants.length > 0 && (
                      <div>
                        <div className="text-xs font-medium mb-2 flex items-center gap-1">
                          <TrendingUp className="h-3 w-3" />
                          Top Participants
                        </div>
                        <div className="flex -space-x-2">
                          {challenge.participants
                            .sort((a, b) => b.score - a.score)
                            .slice(0, 5)
                            .map((participant, index) => (
                              <Avatar key={participant.userId} className="h-6 w-6 border-2 border-background">
                                <AvatarImage src={participant.avatar || "/placeholder.svg"} />
                                <AvatarFallback className="text-xs">{participant.username[0]}</AvatarFallback>
                              </Avatar>
                            ))}
                          {challenge.participants.length > 5 && (
                            <div className="h-6 w-6 rounded-full bg-muted border-2 border-background flex items-center justify-center">
                              <span className="text-xs font-medium">+{challenge.participants.length - 5}</span>
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </Link>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/pi-challenge-system.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export interface Challenge {
  id: string
  title: string
  description: string
  type: "writing" | "reading" | "engagement"
  entryFee: number // in Pi
  startDate: string
  endDate: string
  status: "upcoming" | "active" | "ended" | "calculating" | "completed"
  participants: ChallengeParticipant[]
  prizePool: number
  maxParticipants?: number
  rules: string[]
  scoringCriteria: ScoringCriteria
}

export interface ChallengeParticipant {
  userId: string
  username: string
  avatar: string
  entryDate: string
  score: number
  rank?: number
  performance: ParticipantPerformance
  hasPaid: boolean
  paymentTxId?: string
}

export interface ParticipantPerformance {
  episodesWritten?: number
  totalCharacters?: number
  likesReceived?: number
  commentsReceived?: number
  storiesRead?: number
  engagementScore?: number
  completionTime?: number // in minutes
  qualityScore?: number
}

export interface ScoringCriteria {
  episodesWritten: number // points per episode
  charactersWritten: number // points per 100 characters
  likesReceived: number // points per like
  commentsReceived: number // points per comment
  storiesRead: number // points per story read
  qualityBonus: number // bonus for high-quality content
  speedBonus: number // bonus for early completion
}

export interface PrizeDistribution {
  rank: number
  percentage: number
  amount: number
  bonus?: number
  description: string
}

export class PiChallengeSystem {
  private static instance: PiChallengeSystem
  private challenges: Challenge[] = []

static getInstance(): PiChallengeSystem {
    if (!PiChallengeSystem.instance) {
      PiChallengeSystem.instance = new PiChallengeSystem()
    }
    return PiChallengeSystem.instance
  }

constructor() {
    this.loadChallenges()
    this.initializeDefaultChallenges()
  }

private loadChallenges() {
    try {
      if (typeof window !== "undefined") {
        const saved = localStorage.getItem("scrolla-challenges")
        if (saved) {
          this.challenges = JSON.parse(saved)
        }
      }
    } catch (error) {
      console.error("Error loading challenges:", error)
    }
  }

private saveChallenges() {
    try {
      if (typeof window !== "undefined") {
        localStorage.setItem("scrolla-challenges", JSON.stringify(this.challenges))
      }
    } catch (error) {
      console.error("Error saving challenges:", error)
    }
  }

private initializeDefaultChallenges() {
    if (this.challenges.length === 0) {
      const defaultChallenges: Challenge[] = [
        {
          id: "weekly-writer-1",
          title: "Weekly Writer Challenge",
          description: "Write the most engaging episodes in 7 days. Quality and engagement matter!",
          type: "writing",
          entryFee: 0.5,
          startDate: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // Tomorrow
          endDate: new Date(Date.now() + 8 * 24 * 60 * 60 * 1000).toISOString(), // 8 days from now
          status: "upcoming",
          participants: [],
          prizePool: 0,
          maxParticipants: 100,
          rules: [
            "Write at least 3 episodes during the challenge period",
            "Each episode must be 1000-2000 characters",
            "Episodes must be original content",
            "Scoring based on likes, comments, and quality",
          ],
          scoringCriteria: {
            episodesWritten: 100,
            charactersWritten: 1,
            likesReceived: 50,
            commentsReceived: 25,
            storiesRead: 10,
            qualityBonus: 200,
            speedBonus: 100,
          },
        },
        {
          id: "speed-reader-1",
          title: "Speed Reader Marathon",
          description: "Read and engage with the most stories in 3 days!",
          type: "reading",
          entryFee: 0.5,
          startDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
          endDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
          status: "upcoming",
          participants: [],
          prizePool: 0,
          maxParticipants: 50,
          rules: [
            "Read at least 20 complete stories",
            "Leave meaningful comments on at least 10 stories",
            "Like episodes you genuinely enjoy",
            "Quality of engagement matters more than quantity",
          ],
          scoringCriteria: {
            episodesWritten: 0,
            charactersWritten: 0,
            likesReceived: 0,
            commentsReceived: 0,
            storiesRead: 100,
            qualityBonus: 150,
            speedBonus: 50,
          },
        },
      ]

this.challenges = defaultChallenges
      this.saveChallenges()
    }
  }

getAllChallenges(): Challenge[] {
    return this.challenges
  }

getChallengeById(id: string): Challenge | null {
    return this.challenges.find((c) => c.id === id) || null
  }

getActiveChallenges(): Challenge[] {
    return this.challenges.filter((c) => c.status === "active")
  }

getUpcomingChallenges(): Challenge[] {
    return this.challenges.filter((c) => c.status === "upcoming")
  }

async joinChallenge(challengeId: string, userId: string, username: string, avatar: string): Promise<boolean> {
    const challenge = this.getChallengeById(challengeId)
    if (!challenge) return false

// Check if user already joined
    if (challenge.participants.some((p) => p.userId === userId)) {
      throw new Error("You have already joined this challenge")
    }

// Check if challenge is full
    if (challenge.maxParticipants && challenge.participants.length >= challenge.maxParticipants) {
      throw new Error("Challenge is full")
    }

// Check if challenge is still accepting participants
    if (challenge.status !== "upcoming" && challenge.status !== "active") {
      throw new Error("Challenge is no longer accepting participants")
    }

try {
      // Simulate Pi payment (in real implementation, use Pi SDK)
      const paymentResult = await this.processPiPayment(challenge.entryFee, userId)

if (paymentResult.success) {
        const participant: ChallengeParticipant = {
          userId,
          username,
          avatar,
          entryDate: new Date().toISOString(),
          score: 0,
          performance: {
            episodesWritten: 0,
            totalCharacters: 0,
            likesReceived: 0,
            commentsReceived: 0,
            storiesRead: 0,
            engagementScore: 0,
            completionTime: 0,
            qualityScore: 0,
          },
          hasPaid: true,
          paymentTxId: paymentResult.txId,
        }

challenge.participants.push(participant)
        // Recalculate prize pool: N × E
        challenge.prizePool = challenge.participants.length * challenge.entryFee
        this.saveChallenges()
        return true
      }
    } catch (error) {
      console.error("Error joining challenge:", error)
      throw error
    }

return false
  }

private async processPiPayment(amount: number, userId: string): Promise<{ success: boolean; txId?: string }> {
    // Mock Pi payment - in real implementation, use Pi SDK
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          success: true,
          txId: `pi_tx_${Date.now()}_${userId}`,
        })
      }, 1000)
    })
  }

updateParticipantScore(challengeId: string, userId: string, performance: Partial<ParticipantPerformance>) {
    const challenge = this.getChallengeById(challengeId)
    if (!challenge) return

const participant = challenge.participants.find((p) => p.userId === userId)
    if (!participant) return

// Update performance
    Object.assign(participant.performance, performance)

// Calculate new score
    participant.score = this.calculateScore(participant.performance, challenge.scoringCriteria)

this.saveChallenges()
  }

private calculateScore(performance: ParticipantPerformance, criteria: ScoringCriteria): number {
    let score = 0

score += (performance.episodesWritten || 0) * criteria.episodesWritten
    score += Math.floor((performance.totalCharacters || 0) / 100) * criteria.charactersWritten
    score += (performance.likesReceived || 0) * criteria.likesReceived
    score += (performance.commentsReceived || 0) * criteria.commentsReceived
    score += (performance.storiesRead || 0) * criteria.storiesRead

// Quality bonus
    if (performance.qualityScore && performance.qualityScore > 0.8) {
      score += criteria.qualityBonus
    }

// Speed bonus
    if (performance.completionTime && performance.completionTime < 60) {
      score += criteria.speedBonus
    }

return Math.round(score)
  }

endChallenge(challengeId: string): PrizeDistribution[] {
    const challenge = this.getChallengeById(challengeId)
    if (!challenge) return []

// Sort participants by score
    challenge.participants.sort((a, b) => b.score - a.score)

// Assign ranks
    challenge.participants.forEach((participant, index) => {
      participant.rank = index + 1
    })

challenge.status = "completed"

// Calculate prize distribution
    const prizeDistribution = this.calculatePrizeDistribution(challenge)

this.saveChallenges()
    return prizeDistribution
  }

private calculatePrizeDistribution(challenge: Challenge): PrizeDistribution[] {
    const N = challenge.participants.length // Number of participants
    const E = challenge.entryFee // Entry fee per user
    const prizePool = N * E // Total prize pool

const distributions: PrizeDistribution[] = []

if (N === 0) return distributions

// Calculate top 10% count (minimum 1, exclude top 3 if N >= 10)
    const top10Count = Math.max(1, Math.floor(N * 0.1))
    const top10Eligible = N >= 10 ? top10Count - 3 : 0 // Exclude top 3 if we have enough participants

// 1st Place: 50% of prize pool + 3.14 Pi bonus
    if (N >= 1) {
      distributions.push({
        rank: 1,
        percentage: 50,
        amount: 0.5 * N * E,
        bonus: 3.14,
        description: "🥇 1st Place Winner",
      })
    }

// 2nd Place: 30% of prize pool
    if (N >= 2) {
      distributions.push({
        rank: 2,
        percentage: 30,
        amount: 0.3 * N * E,
        description: "🥈 2nd Place",
      })
    }

// 3rd Place: 5% of prize pool
    if (N >= 3) {
      distributions.push({
        rank: 3,
        percentage: 5,
        amount: 0.05 * N * E,
        description: "🥉 3rd Place",
      })
    }

// Top 10%: 5% of prize pool shared equally (each gets 0.5 × E)
    if (top10Eligible > 0) {
      const individualTop10Prize = 0.5 * E // Each top 10% user gets 0.5 × E

for (let rank = 4; rank <= top10Count; rank++) {
        distributions.push({
          rank,
          percentage: ((0.5 * E) / (N * E)) * 100, // Calculate percentage for display
          amount: individualTop10Prize,
          description: "🏆 Top 10%",
        })
      }
    }

return distributions
  }

// Add new method to calculate operator revenue
  getOperatorRevenue(challenge: Challenge): number {
    const N = challenge.participants.length
    const E = challenge.entryFee
    return 0.1 * N * E // 10% of total prize pool
  }

// Add method to calculate total distributed amount
  getTotalDistributedAmount(challenge: Challenge): number {
    const N = challenge.participants.length
    const E = challenge.entryFee

if (N === 0) return 0

let totalDistributed = 0

// 1st place: 50% + 3.14 Pi bonus
    if (N >= 1) {
      totalDistributed += 0.5 * N * E + 3.14
    }

// 2nd place: 30%
    if (N >= 2) {
      totalDistributed += 0.3 * N * E
    }

// 3rd place: 5%
    if (N >= 3) {
      totalDistributed += 0.05 * N * E
    }

// Top 10%: Each gets 0.5 × E
    const top10Count = Math.max(1, Math.floor(N * 0.1))
    const top10Eligible = N >= 10 ? top10Count - 3 : 0

if (top10Eligible > 0) {
      totalDistributed += top10Eligible * (0.5 * E)
    }

return totalDistributed
  }

// Add method to validate prize distribution
  validatePrizeDistribution(challenge: Challenge): {
    isValid: boolean
    prizePool: number
    totalDistributed: number
    operatorRevenue: number
    remaining: number
  } {
    const N = challenge.participants.length
    const E = challenge.entryFee
    const prizePool = N * E

const totalDistributed = this.getTotalDistributedAmount(challenge)
    const operatorRevenue = this.getOperatorRevenue(challenge)
    const remaining = prizePool - (totalDistributed - 3.14) - operatorRevenue // Subtract 3.14 as it's paid separately

return {
      isValid: Math.abs(remaining) < 0.01, // Allow for small floating point errors
      prizePool,
      totalDistributed,
      operatorRevenue,
      remaining,
    }
  }

getUserChallenges(userId: string): Challenge[] {
    return this.challenges.filter((challenge) => challenge.participants.some((p) => p.userId === userId))
  }

getUserRank(challengeId: string, userId: string): number | null {
    const challenge = this.getChallengeById(challengeId)
    if (!challenge) return null

const participant = challenge.participants.find((p) => p.userId === userId)
    return participant?.rank || null
  }
}
[V0_FILE]typescriptreact:file="app/connections/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/premium/page.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Crown, Check, Zap, Star, Sparkles } from "lucide-react"
import Link from "next/link"
import { PREMIUM_FEATURES } from "@/lib/types"
import { isPremiumUser, setPremiumStatus } from "@/lib/storage"

const PRICING_PLANS = [
  {
    id: "monthly",
    name: "Monthly",
    price: "2.99",
    period: "month",
    popular: false,
    savings: null,
  },
  {
    id: "yearly",
    name: "Yearly",
    price: "29.99",
    period: "year",
    popular: true,
    savings: "Save 17%",
  },
  {
    id: "lifetime",
    name: "Lifetime",
    price: "99.99",
    period: "one-time",
    popular: false,
    savings: "Best Value",
  },
]

export default function PremiumPage() {
  const [selectedPlan, setSelectedPlan] = React.useState("yearly")
  const [isPremium, setIsPremium] = React.useState(false)
  const [isProcessing, setIsProcessing] = React.useState(false)

React.useEffect(() => {
    setIsPremium(isPremiumUser())
  }, [])

const handleUpgrade = async (planId: string) => {
    setIsProcessing(true)

// Simulate Pi payment processing
    await new Promise((resolve) => setTimeout(resolve, 2000))

// Set premium status
    setPremiumStatus(true)
    setIsPremium(true)
    setIsProcessing(false)

// Show success message
    alert("Welcome to Scrolla Premium! 🎉")
  }

const featuresByCategory = PREMIUM_FEATURES.reduce(
    (acc, feature) => {
      if (!acc[feature.category]) {
        acc[feature.category] = []
      }
      acc[feature.category].push(feature)
      return acc
    },
    {} as Record<string, typeof PREMIUM_FEATURES>,
  )

if (isPremium) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
        <header className="sticky top-0 z-50 bg-white/80 backdrop-blur border-b">
          <div className="container mx-auto px-4 py-3">
            <div className="flex items-center gap-3">
              <Link href="/">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
              </Link>
              <Crown className="h-5 w-5 text-yellow-500" />
              <h1 className="font-semibold">Premium</h1>
            </div>
          </div>
        </header>

<div className="container mx-auto px-4 py-6 max-w-md">
          <Card className="bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
            <CardContent className="p-6 text-center">
              <Crown className="h-16 w-16 mx-auto mb-4 text-yellow-500" />
              <h2 className="text-xl font-bold mb-2">You're Premium! 🎉</h2>
              <p className="text-muted-foreground mb-4">Enjoy unlimited connections and all premium features.</p>
              <Badge className="bg-yellow-500 text-white">Premium Member</Badge>
            </CardContent>
          </Card>

<div className="mt-6 space-y-4">
            {Object.entries(featuresByCategory).map(([category, features]) => (
              <Card key={category}>
                <CardHeader>
                  <CardTitle className="text-sm capitalize">{category.replace("_", " ")}</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="space-y-3">
                    {features.map((feature) => (
                      <div key={feature.id} className="flex items-center gap-3">
                        <div className="text-lg">{feature.icon}</div>
                        <div className="flex-1">
                          <div className="font-medium text-sm">{feature.name}</div>
                          <div className="text-xs text-muted-foreground">{feature.description}</div>
                        </div>
                        <Check className="h-4 w-4 text-green-500" />
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50">
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <Crown className="h-5 w-5 text-yellow-500" />
            <h1 className="font-semibold">Go Premium</h1>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-6 max-w-md">
        {/* Hero Section */}
        <Card className="mb-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0">
          <CardContent className="p-6 text-center">
            <Sparkles className="h-12 w-12 mx-auto mb-4" />
            <h2 className="text-xl font-bold mb-2">Unlock Deeper Connections</h2>
            <p className="opacity-90">Remove limits and discover unlimited meaningful relationships</p>
          </CardContent>
        </Card>

{/* Pricing Plans */}
        <div className="space-y-3 mb-6">
          {PRICING_PLANS.map((plan) => (
            <Card
              key={plan.id}
              className={`cursor-pointer transition-all ${
                selectedPlan === plan.id ? "ring-2 ring-purple-500 bg-purple-50" : "hover:shadow-md"
              } ${plan.popular ? "border-purple-300" : ""}`}
              onClick={() => setSelectedPlan(plan.id)}
            >
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-4 h-4 rounded-full border-2 ${
                        selectedPlan === plan.id ? "bg-purple-500 border-purple-500" : "border-gray-300"
                      }`}
                    />
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{plan.name}</span>
                        {plan.popular && (
                          <Badge className="bg-purple-500 text-white text-xs">
                            <Star className="h-3 w-3 mr-1" />
                            Popular
                          </Badge>
                        )}
                      </div>
                      <div className="text-sm text-muted-foreground">
                        {plan.savings && <span className="text-green-600 font-medium">{plan.savings} • </span>}π
                        {plan.price}/{plan.period}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold">π{plan.price}</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Upgrade Button */}
        <Button
          onClick={() => handleUpgrade(selectedPlan)}
          disabled={isProcessing}
          className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 mb-6"
          size="lg"
        >
          {isProcessing ? (
            <>
              <Zap className="h-4 w-4 mr-2 animate-spin" />
              Processing...
            </>
          ) : (
            <>
              <Crown className="h-4 w-4 mr-2" />
              Upgrade to Premium
            </>
          )}
        </Button>

{/* Features */}
        <div className="space-y-4">
          {Object.entries(featuresByCategory).map(([category, features]) => (
            <Card key={category}>
              <CardHeader>
                <CardTitle className="text-sm capitalize flex items-center gap-2">
                  <Sparkles className="h-4 w-4" />
                  {category.replace("_", " ")} Features
                </CardTitle>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="space-y-3">
                  {features.map((feature) => (
                    <div key={feature.id} className="flex items-center gap-3">
                      <div className="text-lg">{feature.icon}</div>
                      <div className="flex-1">
                        <div className="font-medium text-sm">{feature.name}</div>
                        <div className="text-xs text-muted-foreground">{feature.description}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Free vs Premium Comparison */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle className="text-sm">Free vs Premium</CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-3 text-sm">
              <div className="flex justify-between">
                <span>Daily discoveries</span>
                <div className="flex gap-4">
                  <span className="text-muted-foreground">20</span>
                  <span className="font-medium text-purple-600">Unlimited</span>
                </div>
              </div>
              <div className="flex justify-between">
                <span>Profile filters</span>
                <div className="flex gap-4">
                  <span className="text-muted-foreground">Basic</span>
                  <span className="font-medium text-purple-600">Advanced</span>
                </div>
              </div>
              <div className="flex justify-between">
                <span>Connection priority</span>
                <div className="flex gap-4">
                  <span className="text-muted-foreground">Standard</span>
                  <span className="font-medium text-purple-600">Priority</span>
                </div>
              </div>
              <div className="flex justify-between">
                <span>Quote updates</span>
                <div className="flex gap-4">
                  <span className="text-muted-foreground">1/day</span>
                  <span className="font-medium text-purple-600">Unlimited</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Payment Info */}
        <Card className="mt-6 bg-blue-50 border-blue-200">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <Zap className="h-5 w-5 text-blue-600 mt-0.5" />
              <div>
                <h3 className="font-medium text-blue-900 mb-1">Secure Pi Payment</h3>
                <p className="text-sm text-blue-700">
                  Payment processed securely through Pi Network. Cancel anytime from your Pi Wallet.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]markdown:file="README.md" isMerged="true"
# Scrolla - Minimalist Penpal App

A photo-free, emotion-driven penpal app where connections begin with feelings, not appearances.

## 🌟 Core Concept

Scrolla removes the superficiality of photo-based dating/friendship apps by focusing on:
- **Emotional states** instead of photos
- **3 descriptive keywords** instead of lengthy bios  
- **Meaningful quotes** instead of pickup lines
- **Pi Browser DM integration** for secure messaging

## 📱 App Structure

### Main Features

1. **Profile Discovery** (`/`)
   - Swipe through anonymous profiles
   - View emotional state, keywords, and quotes
   - Daily limit for free users (20 swipes)
   - Unlimited for premium users

2. **Profile Management** (`/profile`)
   - Set emotional state from 10 predefined options
   - Choose 3 descriptive keywords
   - Write a meaningful quote (150 chars max)
   - View unique connection code

3. **Connections** (`/connections`)
   - View sent/received connection requests
   - Copy connection codes for Pi Browser DM
   - Track connection status

4. **Premium Features** (`/premium`)
   - Unlimited daily swipes
   - Advanced filtering options
   - Priority connection requests
   - Enhanced customization

### User Flow

\`\`\`
1. User creates profile (emotional state + 3 keywords + quote)
2. User discovers other profiles by swiping
3. User sends connection request (right swipe)
4. Recipient gets connection code
5. Both users message via Pi Browser DM using connection code
\`\`\`

## 💰 Freemium Monetization Plan

### Free Tier
- 20 profile discoveries per day
- Basic emotional states and keywords
- Standard connection requests
- 1 quote update per day

### Premium Tier (π2.99/month, π29.99/year, π99.99 lifetime)

#### Discovery Features
- **Unlimited Scrolling**: No daily discovery limits
- **Advanced Filters**: Filter by emotional state, keywords, location
- **Smart Matching**: AI-powered compatibility suggestions

#### Connection Features  
- **Priority Connections**: Your requests appear first
- **Connection Insights**: See when your requests were viewed
- **Batch Connections**: Send multiple requests efficiently

#### Customization Features
- **Daily Quote Changes**: Update quotes multiple times per day
- **Custom Emotional States**: Create personalized emotional states
- **Profile Themes**: Customize profile appearance

#### Analytics Features
- **Emotional Journey**: Track your emotional state history
- **Connection Analytics**: Success rates and response times
- **Compatibility Insights**: See why you matched with someone

### Revenue Projections
- **Target**: 10,000 active users
- **Conversion Rate**: 15% to premium
- **Monthly Revenue**: π4,485 (1,500 premium users × π2.99)
- **Annual Revenue**: π53,820

## 🔧 Technical Implementation

### Data Structure
\`\`\`typescript
interface UserProfile {
  id: string
  connectionCode: string // 8-character unique code
  emotionalState: EmotionalState
  keywords: [string, string, string] // Exactly 3
  quote: string // Max 150 characters
  isPremium: boolean
  stats: ConnectionStats
}
\`\`\`

### Privacy & Security
- No photos or personal identifiers stored
- All messaging through Pi Browser's secure DM
- Connection codes as the only link between users
- Local storage for user data

### Pi Network Integration
- Pi Browser DM for messaging
- Pi payments for premium subscriptions
- Connection codes work seamlessly with Pi ecosystem

## 🎯 Competitive Advantages

1. **Privacy-First**: No photos, real names, or personal data
2. **Emotion-Focused**: Deeper connections through emotional states
3. **Minimalist Design**: Clean, distraction-free interface
4. **Pi Integration**: Native Pi Browser messaging
5. **Meaningful Connections**: Quality over quantity approach

## 🚀 Launch Strategy

### Phase 1: MVP Launch
- Core swiping functionality
- Basic profile creation
- Pi Browser DM integration
- Free tier with daily limits

### Phase 2: Premium Features
- Advanced filtering
- Premium subscriptions
- Analytics dashboard
- Enhanced customization

### Phase 3: Community Features
- Group connections
- Emotional state communities
- Compatibility matching
- Social features

## 📊 Success Metrics

- **User Engagement**: Daily active users, session duration
- **Connection Quality**: Response rates, conversation length
- **Premium Conversion**: Free-to-premium conversion rate
- **Retention**: 7-day, 30-day user retention
- **Revenue**: Monthly recurring revenue growth

---

*Scrolla: Where emotions meet, connections grow* 💜
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowDown, Heart, Clock } from "lucide-react"
import Link from "next/link"
import type { UserProfile } from "@/lib/types"
import { getUnviewedProfiles, addViewedProfile, getCurrentUserProfile } from "@/lib/storage"

export default function HomePage() {
  const [profiles, setProfiles] = React.useState<UserProfile[]>([])
  const [currentIndex, setCurrentIndex] = React.useState(0)
  const [userProfile, setUserProfile] = React.useState<UserProfile | null>(null)
  const [isLoading, setIsLoading] = React.useState(true)
  const [showConnectionSent, setShowConnectionSent] = React.useState(false)

React.useEffect(() => {
    initializeApp()
  }, [])

const initializeApp = () => {
    setIsLoading(true)

// Check if user has a profile
    const profile = getCurrentUserProfile()
    setUserProfile(profile)

// Load profiles for browsing
    const unviewedProfiles = getUnviewedProfiles()
    setProfiles(unviewedProfiles)

setIsLoading(false)
  }

const handleSendLetter = () => {
    const currentProfile = profiles[currentIndex]
    if (currentProfile) {
      // Mark as viewed and show connection sent
      addViewedProfile(currentProfile.id)
      setShowConnectionSent(true)

// Auto-hide after 2 seconds and move to next
      setTimeout(() => {
        setShowConnectionSent(false)
        handleNextProfile()
      }, 2000)
    }
  }

const handleNextProfile = () => {
    const currentProfile = profiles[currentIndex]
    if (currentProfile) {
      addViewedProfile(currentProfile.id)
    }

if (currentIndex < profiles.length - 1) {
      setCurrentIndex(currentIndex + 1)
    } else {
      const newProfiles = getUnviewedProfiles()
      if (newProfiles.length > 0) {
        setProfiles(newProfiles)
        setCurrentIndex(0)
      }
    }
  }

const getCurrentTime = () => {
    const now = new Date()
    const timeString = now.toLocaleTimeString("en-US", {
      hour12: false,
      hour: "2-digit",
      minute: "2-digit",
    })
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
    const offset = now.getTimezoneOffset()
    const offsetHours = Math.abs(Math.floor(offset / 60))
    const offsetSign = offset <= 0 ? "+" : "-"
    return `${timeString} (GMT${offsetSign}${offsetHours})`
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50 flex items-center justify-center">
        <div className="text-center space-y-4">
          <div className="w-8 h-8 border-2 border-purple-300 border-t-purple-600 rounded-full animate-spin mx-auto"></div>
          <div className="space-y-2">
            <h2 className="text-xl font-light text-slate-700">Scrolla</h2>
            <p className="text-sm text-slate-500">Finding kindred spirits...</p>
          </div>
        </div>
      </div>
    )
  }

if (!userProfile) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50">
        <div className="container mx-auto px-6 py-16 max-w-sm">
          <div className="text-center space-y-8">
            {/* Logo/Title */}
            <div className="space-y-3">
              <h1 className="text-3xl font-light text-slate-800 tracking-wide">Scrolla</h1>
              <div className="w-16 h-px bg-gradient-to-r from-transparent via-purple-300 to-transparent mx-auto"></div>
              <p className="text-slate-600 font-light leading-relaxed">
                Anonymous connections through emotions and words
              </p>
            </div>

{/* Welcome Card */}
            <Card className="bg-white/70 backdrop-blur-sm border-0 shadow-lg">
              <CardContent className="p-8 space-y-6">
                <div className="space-y-4">
                  <div className="text-4xl">💌</div>
                  <h2 className="text-lg font-light text-slate-700">Welcome to meaningful connections</h2>
                  <p className="text-sm text-slate-600 leading-relaxed">
                    Share your current emotion, three words that describe you, and a thoughtful quote. No photos, no
                    usernames—just authentic human connection.
                  </p>
                </div>

<div className="space-y-3 text-xs text-slate-500">
                  <div className="flex items-center gap-2">
                    <div className="w-1 h-1 bg-purple-400 rounded-full"></div>
                    <span>Completely anonymous profiles</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-1 h-1 bg-purple-400 rounded-full"></div>
                    <span>Connect through shared emotions</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-1 h-1 bg-purple-400 rounded-full"></div>
                    <span>Exchange letters with kindred spirits</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Link href="/profile/create">
              <Button className="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 text-base font-light tracking-wide shadow-lg">
                Begin Your Journey
              </Button>
            </Link>

<p className="text-xs text-slate-400 leading-relaxed">
              By continuing, you agree to connect authentically and respectfully with others seeking meaningful
              conversations.
            </p>
          </div>
        </div>
      </div>
    )
  }

const currentProfile = profiles[currentIndex]

if (!currentProfile) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50 flex items-center justify-center">
        <div className="text-center space-y-6 px-6">
          <div className="text-5xl">📮</div>
          <div className="space-y-2">
            <h2 className="text-xl font-light text-slate-700">No more letters today</h2>
            <p className="text-sm text-slate-500 max-w-xs mx-auto leading-relaxed">
              You've discovered all available souls. Check back tomorrow for new connections.
            </p>
          </div>
          <Button
            onClick={() => window.location.reload()}
            variant="outline"
            className="rounded-full px-8 py-3 border-purple-200 text-purple-600 hover:bg-purple-50"
          >
            Refresh
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-purple-100">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-xl font-light text-slate-800 tracking-wide">Scrolla</h1>
            <div className="flex items-center gap-4">
              <div className="text-xs text-slate-500">
                {currentIndex + 1} of {profiles.length}
              </div>
              <Link href="/profile">
                <Button variant="ghost" size="sm" className="rounded-full w-8 h-8 p-0">
                  <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Profile Card */}
        <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl overflow-hidden">
          <CardContent className="p-0">
            {/* Emotion Header */}
            <div className="bg-gradient-to-r from-purple-100 to-indigo-100 p-8 text-center">
              <div className="space-y-4">
                <div className="text-5xl">{currentProfile.emotionalState.emoji}</div>
                <div className="space-y-2">
                  <h2 className="text-2xl font-light text-slate-800 tracking-wide">
                    {currentProfile.emotionalState.name}
                  </h2>
                  <p className="text-sm text-slate-600 font-light italic">
                    "{currentProfile.emotionalState.description}"
                  </p>
                </div>
              </div>
            </div>

{/* Content */}
            <div className="p-8 space-y-8">
              {/* Keywords */}
              <div className="space-y-4">
                <h3 className="text-xs uppercase tracking-wider text-slate-400 font-medium">
                  Three words that describe me
                </h3>
                <div className="flex flex-wrap gap-2 justify-center">
                  {currentProfile.keywords.map((keyword, index) => (
                    <Badge
                      key={index}
                      variant="outline"
                      className="px-4 py-2 rounded-full border-purple-200 text-purple-700 bg-purple-50/50 font-light"
                    >
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>

{/* Quote */}
              <div className="space-y-4">
                <h3 className="text-xs uppercase tracking-wider text-slate-400 font-medium">A thought to share</h3>
                <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-6 border border-purple-100/50">
                  <p className="text-slate-700 leading-relaxed font-light italic text-center">
                    "{currentProfile.quote}"
                  </p>
                </div>
              </div>

{/* Time */}
              <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
                <Clock className="w-3 h-3" />
                <span className="font-mono">{getCurrentTime()}</span>
              </div>
            </div>

{/* Action Button */}
            <div className="p-8 pt-0">
              <Button
                onClick={handleSendLetter}
                className="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 text-base font-light tracking-wide shadow-lg"
                disabled={showConnectionSent}
              >
                {showConnectionSent ? (
                  <div className="flex items-center gap-2">
                    <Heart className="w-4 h-4 fill-current" />
                    <span>Letter Sent</span>
                  </div>
                ) : (
                  "Send Letter"
                )}
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Navigation Hint */}
        <div className="text-center mt-8 space-y-4">
          <Button
            onClick={handleNextProfile}
            variant="ghost"
            size="sm"
            className="rounded-full text-slate-500 hover:text-slate-700"
          >
            <ArrowDown className="w-4 h-4 mr-2" />
            Skip to next soul
          </Button>

<p className="text-xs text-slate-400">{profiles.length - currentIndex - 1} more souls to discover</p>
        </div>
      </div>

{/* Connection Sent Overlay */}
      {showConnectionSent && (
        <div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50">
          <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl rounded-2xl mx-6">
            <CardContent className="p-8 text-center space-y-4">
              <div className="text-4xl">💌</div>
              <div className="space-y-2">
                <h3 className="text-lg font-light text-slate-800">Letter sent</h3>
                <p className="text-sm text-slate-600 font-light">
                  If they send one back, you'll both receive connection codes to continue your conversation.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/create/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { ArrowLeft, Sparkles, RefreshCw } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { EMOTIONAL_STATES, SUGGESTED_KEYWORDS } from "@/lib/types"
import { saveUserProfile } from "@/lib/storage"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function CreateProfilePage() {
  const router = useRouter()
  const [formData, setFormData] = React.useState({
    emotionalState: "peaceful",
    keywords: ["", "", ""] as [string, string, string],
    quote: "",
  })
  const [errors, setErrors] = React.useState<string[]>([])
  const [currentStep, setCurrentStep] = React.useState(1)

const handleKeywordChange = (index: number, value: string) => {
    const newKeywords = [...formData.keywords] as [string, string, string]
    newKeywords[index] = value.toLowerCase().trim()
    setFormData({ ...formData, keywords: newKeywords })
  }

const validateStep = (step: number): boolean => {
    const newErrors: string[] = []

if (step === 1) {
      // Emotion validation is automatic
      return true
    }

if (step === 2) {
      if (formData.keywords.some((k) => k.length === 0)) {
        newErrors.push("All three keywords are required")
      }
      if (formData.keywords.some((k) => k.length > 20)) {
        newErrors.push("Keywords must be 20 characters or less")
      }
      if (new Set(formData.keywords).size !== 3) {
        newErrors.push("All keywords must be unique")
      }
    }

if (step === 3) {
      if (formData.quote.trim().length === 0) {
        newErrors.push("A meaningful quote is required")
      }
      if (formData.quote.length > 150) {
        newErrors.push("Quote must be 150 characters or less")
      }
    }

setErrors(newErrors)
    return newErrors.length === 0
  }

const handleNext = () => {
    if (validateStep(currentStep)) {
      if (currentStep < 3) {
        setCurrentStep(currentStep + 1)
      } else {
        handleSubmit()
      }
    }
  }

const handleSubmit = () => {
    const profile = saveUserProfile({
      emotionalState: EMOTIONAL_STATES[formData.emotionalState],
      keywords: formData.keywords,
      quote: formData.quote.trim(),
    })

if (profile) {
      router.push("/")
    }
  }

const suggestKeyword = (index: number) => {
    const usedKeywords = formData.keywords.filter((k) => k.length > 0)
    const availableKeywords = SUGGESTED_KEYWORDS.filter((k) => !usedKeywords.includes(k))
    const randomKeyword = availableKeywords[Math.floor(Math.random() * availableKeywords.length)]

if (randomKeyword) {
      handleKeywordChange(index, randomKeyword)
    }
  }

const getRandomKeywords = () => {
    const shuffled = [...SUGGESTED_KEYWORDS].sort(() => 0.5 - Math.random())
    const selected = shuffled.slice(0, 3) as [string, string, string]
    setFormData({ ...formData, keywords: selected })
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-purple-100">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/">
                <Button variant="ghost" size="sm" className="rounded-full">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
              </Link>
              <h1 className="font-light text-slate-800 tracking-wide">Create Profile</h1>
            </div>
            <div className="text-xs text-slate-500">{currentStep} of 3</div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Progress */}
        <div className="mb-8">
          <div className="w-full bg-purple-100 rounded-full h-1">
            <div
              className="bg-gradient-to-r from-purple-400 to-indigo-400 h-1 rounded-full transition-all duration-500"
              style={{ width: `${(currentStep / 3) * 100}%` }}
            />
          </div>
        </div>

{/* Step 1: Emotional State */}
        {currentStep === 1 && (
          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl">
            <CardHeader className="text-center p-8 pb-6">
              <div className="text-4xl mb-4">🌙</div>
              <CardTitle className="text-xl font-light text-slate-800 tracking-wide">
                How are you feeling right now?
              </CardTitle>
              <p className="text-sm text-slate-600 font-light mt-2">
                Choose the emotion that best describes your current state of mind
              </p>
            </CardHeader>
            <CardContent className="p-8 pt-0 space-y-6">
              <Select
                value={formData.emotionalState}
                onValueChange={(value) => setFormData({ ...formData, emotionalState: value })}
              >
                <SelectTrigger className="w-full border-purple-200 rounded-2xl py-6 text-center">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="rounded-2xl">
                  {Object.values(EMOTIONAL_STATES).map((state) => (
                    <SelectItem key={state.id} value={state.id} className="rounded-xl">
                      <div className="flex items-center gap-3 py-2">
                        <span className="text-xl">{state.emoji}</span>
                        <div className="text-left">
                          <div className="font-medium">{state.name}</div>
                          <div className="text-xs text-slate-500">{state.description}</div>
                        </div>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{/* Preview */}
              <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-6 border border-purple-100/50 text-center">
                <div className="text-3xl mb-2">{EMOTIONAL_STATES[formData.emotionalState]?.emoji}</div>
                <div className="text-lg font-light text-slate-800 mb-1">
                  {EMOTIONAL_STATES[formData.emotionalState]?.name}
                </div>
                <div className="text-sm text-slate-600 font-light italic">
                  "{EMOTIONAL_STATES[formData.emotionalState]?.description}"
                </div>
              </div>

<Button
                onClick={handleNext}
                className="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 text-base font-light tracking-wide shadow-lg"
              >
                Continue
              </Button>
            </CardContent>
          </Card>
        )}

{/* Step 2: Keywords */}
        {currentStep === 2 && (
          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl">
            <CardHeader className="text-center p-8 pb-6">
              <div className="text-4xl mb-4">✨</div>
              <CardTitle className="text-xl font-light text-slate-800 tracking-wide">
                Three words that describe you
              </CardTitle>
              <p className="text-sm text-slate-600 font-light mt-2">
                Choose words that capture your essence and personality
              </p>
            </CardHeader>
            <CardContent className="p-8 pt-0 space-y-6">
              <div className="space-y-4">
                {formData.keywords.map((keyword, index) => (
                  <div key={index} className="space-y-2">
                    <Label className="text-xs uppercase tracking-wider text-slate-400 font-medium">
                      Word {index + 1}
                    </Label>
                    <div className="flex gap-2">
                      <Input
                        value={keyword}
                        onChange={(e) => handleKeywordChange(index, e.target.value)}
                        placeholder="Enter a word..."
                        maxLength={20}
                        className="flex-1 border-purple-200 rounded-2xl py-3 text-center font-light"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => suggestKeyword(index)}
                        className="rounded-full border-purple-200 text-purple-600 hover:bg-purple-50"
                      >
                        <Sparkles className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>

{/* Random Keywords Button */}
              <Button
                type="button"
                variant="outline"
                onClick={getRandomKeywords}
                className="w-full border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-3 font-light bg-transparent"
              >
                <RefreshCw className="w-4 h-4 mr-2" />
                Surprise me with random words
              </Button>

{/* Keyword Suggestions */}
              <div className="space-y-3">
                <p className="text-xs uppercase tracking-wider text-slate-400 font-medium">Popular choices</p>
                <div className="flex flex-wrap gap-2">
                  {SUGGESTED_KEYWORDS.slice(0, 12).map((keyword) => (
                    <Badge
                      key={keyword}
                      variant="outline"
                      className="cursor-pointer hover:bg-purple-50 border-purple-200 text-purple-700 rounded-full px-3 py-1 font-light"
                      onClick={() => {
                        const emptyIndex = formData.keywords.findIndex((k) => k === "")
                        if (emptyIndex !== -1) {
                          handleKeywordChange(emptyIndex, keyword)
                        }
                      }}
                    >
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>

{/* Errors */}
              {errors.length > 0 && (
                <div className="bg-red-50 border border-red-200 rounded-2xl p-4">
                  <ul className="text-sm text-red-700 space-y-1">
                    {errors.map((error, index) => (
                      <li key={index}>• {error}</li>
                    ))}
                  </ul>
                </div>
              )}

<div className="flex gap-3">
                <Button
                  onClick={() => setCurrentStep(1)}
                  variant="outline"
                  className="flex-1 border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-6 font-light"
                >
                  Back
                </Button>
                <Button
                  onClick={handleNext}
                  className="flex-1 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 font-light"
                >
                  Continue
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Step 3: Quote */}
        {currentStep === 3 && (
          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl">
            <CardHeader className="text-center p-8 pb-6">
              <div className="text-4xl mb-4">💭</div>
              <CardTitle className="text-xl font-light text-slate-800 tracking-wide">
                Share a meaningful thought
              </CardTitle>
              <p className="text-sm text-slate-600 font-light mt-2">
                A quote, reflection, or idea that represents who you are right now
              </p>
            </CardHeader>
            <CardContent className="p-8 pt-0 space-y-6">
              <div className="space-y-2">
                <Textarea
                  value={formData.quote}
                  onChange={(e) => setFormData({ ...formData, quote: e.target.value })}
                  placeholder="What's on your mind? Share a thought that feels authentic to you..."
                  maxLength={150}
                  rows={4}
                  className="border-purple-200 rounded-2xl p-4 font-light leading-relaxed resize-none"
                />
                <div className="flex justify-between text-xs text-slate-500">
                  <span>This will be the first thing people connect with</span>
                  <span className="font-mono">{formData.quote.length}/150</span>
                </div>
              </div>

{/* Preview */}
              <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-6 border border-purple-100/50">
                <p className="text-slate-700 leading-relaxed font-light italic text-center">
                  {formData.quote || "Your thoughtful quote will appear here..."}
                </p>
              </div>

<div className="flex gap-3">
                <Button
                  onClick={() => setCurrentStep(2)}
                  variant="outline"
                  className="flex-1 border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-6 font-light"
                >
                  Back
                </Button>
                <Button
                  onClick={handleNext}
                  className="flex-1 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 font-light"
                >
                  Create Profile
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Bottom Text */}
        <div className="text-center mt-8">
          <p className="text-xs text-slate-400 leading-relaxed max-w-xs mx-auto">
            Your profile remains completely anonymous. Connect through emotions and authentic thoughts, not appearances.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Edit3, Clock } from "lucide-react"
import Link from "next/link"
import { getCurrentUserProfile } from "@/lib/storage"
import type { UserProfile } from "@/lib/types"

export default function ProfilePage() {
  const [profile, setProfile] = React.useState<UserProfile | null>(null)

React.useEffect(() => {
    const userProfile = getCurrentUserProfile()
    setProfile(userProfile)
  }, [])

if (!profile) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50 flex items-center justify-center">
        <div className="text-center space-y-4">
          <p className="text-slate-600 font-light">No profile found</p>
          <Link href="/profile/create">
            <Button className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-8 py-3">
              Create Profile
            </Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-purple-100">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/">
                <Button variant="ghost" size="sm" className="rounded-full">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
              </Link>
              <h1 className="font-light text-slate-800 tracking-wide">My Profile</h1>
            </div>
            <Link href="/profile/edit">
              <Button
                variant="outline"
                size="sm"
                className="rounded-full border-purple-200 text-purple-600 hover:bg-purple-50 bg-transparent"
              >
                <Edit3 className="h-4 w-4 mr-1" />
                Edit
              </Button>
            </Link>
          </div>
        </div>
      </header>

<div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Profile Preview */}
        <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl overflow-hidden mb-8">
          <CardHeader className="text-center p-8 pb-6">
            <div className="text-4xl mb-4">👁️</div>
            <CardTitle className="text-xl font-light text-slate-800 tracking-wide">How others see you</CardTitle>
            <p className="text-sm text-slate-600 font-light mt-2">
              This is your anonymous profile as it appears to others
            </p>
          </CardHeader>
        </Card>

{/* Actual Profile Card (as others see it) */}
        <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl overflow-hidden">
          <CardContent className="p-0">
            {/* Emotion Header */}
            <div className="bg-gradient-to-r from-purple-100 to-indigo-100 p-8 text-center">
              <div className="space-y-4">
                <div className="text-5xl">{profile.emotionalState.emoji}</div>
                <div className="space-y-2">
                  <h2 className="text-2xl font-light text-slate-800 tracking-wide">{profile.emotionalState.name}</h2>
                  <p className="text-sm text-slate-600 font-light italic">"{profile.emotionalState.description}"</p>
                </div>
              </div>
            </div>

{/* Content */}
            <div className="p-8 space-y-8">
              {/* Keywords */}
              <div className="space-y-4">
                <h3 className="text-xs uppercase tracking-wider text-slate-400 font-medium">
                  Three words that describe me
                </h3>
                <div className="flex flex-wrap gap-2 justify-center">
                  {profile.keywords.map((keyword, index) => (
                    <Badge
                      key={index}
                      variant="outline"
                      className="px-4 py-2 rounded-full border-purple-200 text-purple-700 bg-purple-50/50 font-light"
                    >
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>

{/* Quote */}
              <div className="space-y-4">
                <h3 className="text-xs uppercase tracking-wider text-slate-400 font-medium">A thought to share</h3>
                <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-6 border border-purple-100/50">
                  <p className="text-slate-700 leading-relaxed font-light italic text-center">"{profile.quote}"</p>
                </div>
              </div>

{/* Mock Action Button (disabled) */}
            <div className="p-8 pt-0">
              <Button
                disabled
                className="w-full bg-gradient-to-r from-slate-300 to-slate-400 text-slate-600 border-0 rounded-full py-6 text-base font-light tracking-wide cursor-not-allowed"
              >
                Send Letter
              </Button>
              <p className="text-xs text-slate-400 text-center mt-2">
                This is how your "Send Letter" button appears to others
              </p>
            </div>
          </CardContent>
        </Card>

{/* Profile Info */}
        <Card className="bg-white/60 backdrop-blur-sm border-0 shadow-lg rounded-2xl mt-6">
          <CardContent className="p-6 space-y-4">
            <div className="text-center space-y-2">
              <h3 className="text-sm font-medium text-slate-700">Profile Details</h3>
              <div className="space-y-1 text-xs text-slate-500">
                <p>Created: {new Date(profile.createdAt).toLocaleDateString()}</p>
                <p>Last updated: {new Date(profile.lastActive).toLocaleDateString()}</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Actions */}
        <div className="space-y-3 mt-8">
          <Link href="/profile/edit">
            <Button
              variant="outline"
              className="w-full border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-6 font-light bg-transparent"
            >
              Edit Profile
            </Button>
          </Link>
          <Link href="/">
            <Button className="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 font-light">
              Continue Discovering
            </Button>
          </Link>
        </div>

{/* Privacy Note */}
        <div className="text-center mt-8">
          <p className="text-xs text-slate-400 leading-relaxed max-w-xs mx-auto">
            Your profile is completely anonymous. Only your current emotion, keywords, and quote are visible to others.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true"
"use client"

export interface EmotionalState {
  id: string
  name: string
  emoji: string
  color: string
  description: string
}

export interface UserProfile {
  id: string
  emotionalState: EmotionalState
  keywords: [string, string, string] // Exactly 3 keywords
  quote: string
  createdAt: string
  lastActive: string
}

export const EMOTIONAL_STATES: Record<string, EmotionalState> = {
  peaceful: {
    id: "peaceful",
    name: "Peaceful",
    emoji: "🕊️",
    color: "bg-blue-100 text-blue-800 border-blue-200",
    description: "Feeling calm and serene",
  },
  curious: {
    id: "curious",
    name: "Curious",
    emoji: "🤔",
    color: "bg-purple-100 text-purple-800 border-purple-200",
    description: "Eager to learn and explore",
  },
  creative: {
    id: "creative",
    name: "Creative",
    emoji: "🎨",
    color: "bg-pink-100 text-pink-800 border-pink-200",
    description: "Feeling inspired and artistic",
  },
  adventurous: {
    id: "adventurous",
    name: "Adventurous",
    emoji: "🌟",
    color: "bg-yellow-100 text-yellow-800 border-yellow-200",
    description: "Ready for new experiences",
  },
  contemplative: {
    id: "contemplative",
    name: "Contemplative",
    emoji: "🌙",
    color: "bg-indigo-100 text-indigo-800 border-indigo-200",
    description: "In a thoughtful, reflective mood",
  },
  energetic: {
    id: "energetic",
    name: "Energetic",
    emoji: "⚡",
    color: "bg-orange-100 text-orange-800 border-orange-200",
    description: "Full of energy and enthusiasm",
  },
  nostalgic: {
    id: "nostalgic",
    name: "Nostalgic",
    emoji: "🍂",
    color: "bg-amber-100 text-amber-800 border-amber-200",
    description: "Reflecting on memories",
  },
  hopeful: {
    id: "hopeful",
    name: "Hopeful",
    emoji: "🌅",
    color: "bg-green-100 text-green-800 border-green-200",
    description: "Optimistic about the future",
  },
  melancholic: {
    id: "melancholic",
    name: "Melancholic",
    emoji: "🌧️",
    color: "bg-gray-100 text-gray-800 border-gray-200",
    description: "Feeling bittersweet and pensive",
  },
  grateful: {
    id: "grateful",
    name: "Grateful",
    emoji: "🙏",
    color: "bg-emerald-100 text-emerald-800 border-emerald-200",
    description: "Appreciating life's blessings",
  },
}

export const SUGGESTED_KEYWORDS = [
  // Personality traits
  "introspective",
  "empathetic",
  "authentic",
  "philosophical",
  "spontaneous",
  "analytical",
  "dreamer",
  "pragmatic",
  "optimistic",
  "genuine",

// Interests & lifestyle
  "bookworm",
  "traveler",
  "musician",
  "artist",
  "writer",
  "thinker",
  "nature-lover",
  "minimalist",
  "tea-enthusiast",
  "stargazer",

// Values & approach
  "mindful",
  "compassionate",
  "curious",
  "growth-oriented",
  "open-minded",
  "deep",
  "thoughtful",
  "kind",
  "adventurous",
  "reflective",

// Lifestyle descriptors
  "night-owl",
  "early-bird",
  "coffee-lover",
  "urban",
  "rural",
  "homebody",
  "social",
  "solitary",
  "wanderer",
  "creative-soul",
]
[V0_FILE]typescriptreact:file="lib/storage.ts" isEdit="true" isMerged="true"
"use client"

import { type UserProfile, EMOTIONAL_STATES } from "./types"

const STORAGE_KEYS = {
  USER_PROFILE: "scrolla-user-profile",
  VIEWED_PROFILES: "scrolla-viewed-profiles",
}

// Safe localStorage access
const safeGetItem = (key: string): string | null => {
  if (typeof window === "undefined") return null
  try {
    return localStorage.getItem(key)
  } catch {
    return null
  }
}

const safeSetItem = (key: string, value: string): void => {
  if (typeof window === "undefined") return
  try {
    localStorage.setItem(key, value)
  } catch {
    // Ignore storage errors
  }
}

// Get current user profile
export const getCurrentUserProfile = (): UserProfile | null => {
  const stored = safeGetItem(STORAGE_KEYS.USER_PROFILE)
  if (stored) {
    try {
      return JSON.parse(stored)
    } catch {
      return null
    }
  }
  return null
}

// Create or update user profile
export const saveUserProfile = (profile: Partial<UserProfile>): UserProfile => {
  const existing = getCurrentUserProfile()

const updatedProfile: UserProfile = {
    id: existing?.id || `user_${Date.now()}`,
    emotionalState: profile.emotionalState || EMOTIONAL_STATES.peaceful,
    keywords: profile.keywords || ["thoughtful", "curious", "genuine"],
    quote: profile.quote || "Looking for meaningful connections...",
    createdAt: existing?.createdAt || new Date().toISOString(),
    lastActive: new Date().toISOString(),
  }

safeSetItem(STORAGE_KEYS.USER_PROFILE, JSON.stringify(updatedProfile))
  return updatedProfile
}

// Generate sample profiles for browsing
export const generateSampleProfiles = (count = 50): UserProfile[] => {
  const profiles: UserProfile[] = []
  const emotionalStates = Object.values(EMOTIONAL_STATES)

const sampleKeywordSets = [
    ["introspective", "bookworm", "night-owl"],
    ["adventurous", "traveler", "optimistic"],
    ["creative", "artist", "dreamer"],
    ["philosophical", "thinker", "deep"],
    ["empathetic", "genuine", "mindful"],
    ["curious", "coffee-lover", "urban"],
    ["nature-lover", "peaceful", "minimalist"],
    ["growth-oriented", "authentic", "reflective"],
    ["spontaneous", "social", "energetic"],
    ["contemplative", "writer", "stargazer"],
    ["analytical", "pragmatic", "thoughtful"],
    ["compassionate", "kind", "open-minded"],
    ["musician", "creative-soul", "passionate"],
    ["wanderer", "free-spirited", "adventurous"],
    ["homebody", "tea-enthusiast", "cozy"],
    ["early-bird", "optimistic", "grateful"],
    ["melancholic", "poet", "sensitive"],
    ["curious", "learner", "explorer"],
    ["minimalist", "intentional", "calm"],
    ["nostalgic", "storyteller", "warm"],
  ]

const sampleQuotes = [
    "The best conversations happen between strangers who become friends.",
    "Seeking someone who finds beauty in everyday moments.",
    "Let's share stories that matter, not just small talk.",
    "Believer in deep connections over surface-level chatter.",
    "Looking for a kindred spirit to explore ideas with.",
    "Life is too short for shallow conversations.",
    "Hoping to find someone who appreciates silence as much as words.",
    "Interested in the stories behind people's emotions.",
    "Searching for authentic connections in a digital world.",
    "Let's talk about dreams, fears, and everything in between.",
    "Finding magic in ordinary moments and meaningful exchanges.",
    "Collector of thoughts, seeker of understanding.",
    "Every person has a story worth hearing.",
    "Looking for someone to share quiet contemplations with.",
    "In search of conversations that linger in the mind.",
    "Hoping to connect with someone who values depth over breadth.",
    "Seeking a pen pal for life's beautiful complexities.",
    "Let's explore the world through each other's perspectives.",
    "Interested in the art of slow, thoughtful communication.",
    "Looking for someone who appreciates the power of words.",
    "Believe in the beauty of vulnerable, honest exchanges.",
    "Seeking connection through shared wonder and curiosity.",
    "Let's write letters that feel like warm embraces.",
    "In search of a soul who understands the language of emotions.",
    "Looking for someone to share the poetry of everyday life.",
    "Hoping to find a friend in the quiet corners of the internet.",
    "Seeking conversations that feel like coming home.",
    "Let's create a space for thoughts that matter.",
    "In search of genuine human connection in a noisy world.",
    "Looking for someone who believes in the magic of words.",
  ]

for (let i = 0; i < count; i++) {
    profiles.push({
      id: `sample_user_${i}`,
      emotionalState: emotionalStates[Math.floor(Math.random() * emotionalStates.length)],
      keywords: sampleKeywordSets[Math.floor(Math.random() * sampleKeywordSets.length)] as [string, string, string],
      quote: sampleQuotes[Math.floor(Math.random() * sampleQuotes.length)],
      createdAt: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
      lastActive: new Date(Date.now() - Math.random() * 24 * 60 * 60 * 1000).toISOString(),
    })
  }

return profiles
}

// Viewed profiles tracking
export const getViewedProfiles = (): string[] => {
  const stored = safeGetItem(STORAGE_KEYS.VIEWED_PROFILES)
  if (stored) {
    try {
      return JSON.parse(stored)
    } catch {
      return []
    }
  }
  return []
}

export const addViewedProfile = (profileId: string): void => {
  const viewed = getViewedProfiles()
  if (!viewed.includes(profileId)) {
    viewed.push(profileId)
    safeSetItem(STORAGE_KEYS.VIEWED_PROFILES, JSON.stringify(viewed))
  }
}

// Get unviewed profiles for browsing
export const getUnviewedProfiles = (): UserProfile[] => {
  const allProfiles = generateSampleProfiles(100)
  const viewedIds = getViewedProfiles()
  const currentUser = getCurrentUserProfile()

return allProfiles.filter((profile) => !viewedIds.includes(profile.id) && profile.id !== currentUser?.id)
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  }
}

/* Custom font weights for elegant typography */
.font-light {
  font-weight: 300;
}

.font-extralight {
  font-weight: 200;
}

/* Smooth transitions and animations */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for mobile */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

/* Gradient backgrounds */
.gradient-purple-blue {
  background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 50%, #e6f3ff 100%);
}

/* Card styling */
.postcard-shadow {
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.1), 0 2px 4px -1px rgba(139, 92, 246, 0.06), 0 0 0 1px
    rgba(139, 92, 246, 0.05);
}

/* Button hover effects */
.btn-float {
  @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
}

/* Text animations */
.text-fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading spinner */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Progress bar animation */
.progress-smooth {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Elegant form inputs */
.input-elegant {
  @apply border-purple-200 focus:border-purple-400 focus:ring-purple-400/20;
}

/* Postcard-like styling */
.postcard {
  background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
  border: 1px solid rgba(139, 92, 246, 0.1);
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.1), 0 10px 10px -5px rgba(139, 92, 246, 0.04);
}

/* Soft shadows for depth */
.soft-shadow {
  box-shadow: 0 1px 3px 0 rgba(139, 92, 246, 0.1), 0 1px 2px 0 rgba(139, 92, 246, 0.06);
}

/* Elegant typography */
.text-elegant {
  letter-spacing: 0.025em;
  line-height: 1.6;
}

/* Calm color palette utilities */
.text-calm-purple {
  color: #8b5cf6;
}

.text-calm-blue {
  color: #6366f1;
}

.text-calm-slate {
  color: #64748b;
}

.bg-calm-purple {
  background-color: #f3e8ff;
}

.bg-calm-blue {
  background-color: #e0e7ff;
}

.border-calm-purple {
  border-color: #d8b4fe;
}

/* Responsive design helpers */
@media (max-width: 640px) {
  .mobile-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Focus states for accessibility */
.focus-elegant:focus {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

/* Gentle hover states */
.hover-gentle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatTimeAgo(dateString: string): string {
  const now = new Date()
  const date = new Date(dateString)
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

if (diffInSeconds < 60) return "Just now"
  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`
  return `${Math.floor(diffInSeconds / 604800)}w ago`
}

export function validateKeywords(keywords: string[]): boolean {
  return (
    keywords.length === 3 &&
    keywords.every((k) => k.length > 0 && k.length <= 20) &&
    keywords.every((k) => /^[a-zA-Z-]+$/.test(k)) &&
    new Set(keywords).size === 3 // All unique
  )
}

export function validateQuote(quote: string): boolean {
  return quote.trim().length > 0 && quote.length <= 150
}

export function generateRandomId(): string {
  return Math.random().toString(36).substring(2) + Date.now().toString(36)
}

export function getCurrentTimeString(): string {
  const now = new Date()
  const timeString = now.toLocaleTimeString("en-US", {
    hour12: false,
    hour: "2-digit",
    minute: "2-digit",
  })
  const offset = now.getTimezoneOffset()
  const offsetHours = Math.abs(Math.floor(offset / 60))
  const offsetSign = offset <= 0 ? "+" : "-"
  return `${timeString} (GMT${offsetSign}${offsetHours})`
}
[V0_FILE]typescriptreact:file="app/connections/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { ArrowLeft, MessageCircle, Search, Copy, Check, Heart, Clock } from "lucide-react"
import Link from "next/link"

interface Connection {
  id: string
  connectionCode: string
  emotionalState: {
    name: string
    emoji: string
    description: string
  }
  keywords: [string, string, string]
  quote: string
  connectedAt: string
  status: "pending" | "connected" | "expired"
  isFromMe: boolean
}

export default function ConnectionsPage() {
  const [connections, setConnections] = React.useState<Connection[]>([
    {
      id: "conn_1",
      connectionCode: "MOON7384",
      emotionalState: {
        name: "Contemplative",
        emoji: "🌙",
        description: "In a thoughtful, reflective mood",
      },
      keywords: ["introspective", "writer", "stargazer"],
      quote: "Looking for someone to share quiet contemplations with.",
      connectedAt: "2024-01-15T14:30:00Z",
      status: "connected",
      isFromMe: false,
    },
    {
      id: "conn_2",
      connectionCode: "STAR9156",
      emotionalState: {
        name: "Creative",
        emoji: "🎨",
        description: "Feeling inspired and artistic",
      },
      keywords: ["artist", "dreamer", "passionate"],
      quote: "Let's create something beautiful together through words.",
      connectedAt: "2024-01-14T09:15:00Z",
      status: "pending",
      isFromMe: true,
    },
  ])

const [searchQuery, setSearchQuery] = React.useState("")
  const [copiedCode, setCopiedCode] = React.useState<string | null>(null)
  const [activeTab, setActiveTab] = React.useState<"all" | "connected" | "pending">("all")

const copyConnectionCode = (code: string) => {
    navigator.clipboard.writeText(code)
    setCopiedCode(code)
    setTimeout(() => setCopiedCode(null), 2000)
  }

const filteredConnections = connections.filter((conn) => {
    const matchesSearch =
      !searchQuery ||
      conn.connectionCode.toLowerCase().includes(searchQuery.toLowerCase()) ||
      conn.quote.toLowerCase().includes(searchQuery.toLowerCase()) ||
      conn.keywords.some((k) => k.toLowerCase().includes(searchQuery.toLowerCase()))

const matchesTab = activeTab === "all" || conn.status === activeTab

return matchesSearch && matchesTab
  })

const formatTimeAgo = (dateString: string) => {
    const now = new Date()
    const date = new Date(dateString)
    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))

if (diffInHours < 1) return "Just now"
    if (diffInHours < 24) return `${diffInHours}h ago`
    return `${Math.floor(diffInHours / 24)}d ago`
  }

<div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Search */}
        <div className="relative mb-6">
          <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 h-4 w-4" />
          <Input
            placeholder="Search connections..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-12 border-purple-200 rounded-2xl py-3 bg-white/80 backdrop-blur-sm"
          />
        </div>

{/* Tabs */}
        <div className="flex gap-2 mb-6">
          <Button
            variant={activeTab === "all" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("all")}
            className={`flex-1 rounded-full font-light ${
              activeTab === "all"
                ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
                : "text-purple-600 hover:bg-purple-50"
            }`}
          >
            All ({connections.length})
          </Button>
          <Button
            variant={activeTab === "connected" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("connected")}
            className={`flex-1 rounded-full font-light ${
              activeTab === "connected"
                ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
                : "text-purple-600 hover:bg-purple-50"
            }`}
          >
            Connected ({connections.filter((c) => c.status === "connected").length})
          </Button>
          <Button
            variant={activeTab === "pending" ? "default" : "ghost"}
            size="sm"
            onClick={() => setActiveTab("pending")}
            className={`flex-1 rounded-full font-light ${
              activeTab === "pending"
                ? "bg-gradient-to-r from-purple-500 to-indigo-500 text-white"
                : "text-purple-600 hover:bg-purple-50"
            }`}
          >
            Pending ({connections.filter((c) => c.status === "pending").length})
          </Button>
        </div>

{/* Connection Instructions */}
        <Card className="mb-6 bg-blue-50/80 backdrop-blur-sm border-blue-200 rounded-2xl">
          <CardContent className="p-6">
            <div className="flex items-start gap-3">
              <MessageCircle className="h-5 w-5 text-blue-600 mt-0.5" />
              <div>
                <h3 className="font-medium text-blue-900 mb-2">How to Connect</h3>
                <p className="text-sm text-blue-700 font-light leading-relaxed">
                  Use connection codes to start conversations in your preferred messaging app. Share the code with your
                  match to begin exchanging letters.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Connections List */}
        <div className="space-y-4">
          {filteredConnections.length === 0 ? (
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl">
              <CardContent className="p-12 text-center">
                <div className="text-5xl mb-4">💌</div>
                <h3 className="text-lg font-light text-slate-800 mb-2">No connections yet</h3>
                <p className="text-sm text-slate-600 font-light leading-relaxed mb-6">
                  Start discovering kindred spirits to build your first meaningful connections.
                </p>
                <Link href="/">
                  <Button className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full px-8 py-3 font-light">
                    Discover Souls
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ) : (
            filteredConnections.map((connection) => (
              <Card
                key={connection.id}
                className="bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl overflow-hidden"
              >
                <CardContent className="p-0">
                  {/* Status Header */}
                  <div
                    className={`p-4 ${
                      connection.status === "connected"
                        ? "bg-gradient-to-r from-green-100 to-emerald-100"
                        : connection.status === "pending"
                          ? "bg-gradient-to-r from-yellow-100 to-amber-100"
                          : "bg-gradient-to-r from-gray-100 to-slate-100"
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Badge
                          variant="outline"
                          className={`rounded-full font-light ${
                            connection.status === "connected"
                              ? "border-green-300 text-green-700 bg-green-50"
                              : connection.status === "pending"
                                ? "border-yellow-300 text-yellow-700 bg-yellow-50"
                                : "border-gray-300 text-gray-700 bg-gray-50"
                          }`}
                        >
                          {connection.status === "connected" && <Heart className="w-3 h-3 mr-1 fill-current" />}
                          {connection.status === "pending" && <Clock className="w-3 h-3 mr-1" />}
                          {connection.status === "connected" ? "Connected" : "Pending"}
                        </Badge>
                        <span className="text-xs text-slate-500 font-light">
                          {connection.isFromMe ? "You sent" : "They sent"} • {formatTimeAgo(connection.connectedAt)}
                        </span>
                      </div>
                    </div>
                  </div>

{/* Connection Content */}
                  <div className="p-6 space-y-6">
                    {/* Emotional State */}
                    <div className="text-center">
                      <div className="text-3xl mb-2">{connection.emotionalState.emoji}</div>
                      <h3 className="font-light text-slate-800 text-lg tracking-wide">
                        {connection.emotionalState.name}
                      </h3>
                      <p className="text-sm text-slate-600 font-light italic">
                        "{connection.emotionalState.description}"
                      </p>
                    </div>

{/* Keywords */}
                    <div className="flex flex-wrap gap-2 justify-center">
                      {connection.keywords.map((keyword, index) => (
                        <Badge
                          key={index}
                          variant="outline"
                          className="px-3 py-1 rounded-full border-purple-200 text-purple-700 bg-purple-50/50 font-light"
                        >
                          {keyword}
                        </Badge>
                      ))}
                    </div>

{/* Quote */}
                    <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-4 border border-purple-100/50">
                      <p className="text-slate-700 leading-relaxed font-light italic text-center text-sm">
                        "{connection.quote}"
                      </p>
                    </div>

{/* Connection Code */}
                    <div className="bg-gradient-to-r from-purple-100 to-indigo-100 rounded-2xl p-4">
                      <div className="text-center">
                        <p className="text-xs uppercase tracking-wider text-slate-500 font-medium mb-2">
                          Connection Code
                        </p>
                        <div className="flex items-center justify-center gap-3">
                          <span className="font-mono font-bold text-lg tracking-widest text-slate-800">
                            {connection.connectionCode}
                          </span>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => copyConnectionCode(connection.connectionCode)}
                            className="rounded-full p-2 hover:bg-white/50"
                          >
                            {copiedCode === connection.connectionCode ? (
                              <Check className="h-4 w-4 text-green-600" />
                            ) : (
                              <Copy className="h-4 w-4 text-slate-600" />
                            )}
                          </Button>
                        </div>
                        <p className="text-xs text-slate-500 font-light mt-2">
                          Share this code to start your conversation
                        </p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </div>

{/* Help Section */}
        <Card className="mt-8 bg-purple-50/80 backdrop-blur-sm border-purple-200 rounded-2xl">
          <CardHeader>
            <CardTitle className="text-sm font-light text-purple-900">Connection Tips</CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-2 text-sm text-purple-700 font-light">
              <p>• Connection codes are unique identifiers for each match</p>
              <p>• Share codes through your preferred messaging platform</p>
              <p>• Connections expire after 7 days if not activated</p>
              <p>• Be authentic and respectful in your conversations</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { ArrowLeft, Settings, Bell, Shield, Heart, Trash2, Download, Moon, Sun } from "lucide-react"
import Link from "next/link"

export default function SettingsPage() {
  const [settings, setSettings] = React.useState({
    notifications: true,
    darkMode: false,
    connectionReminders: true,
    profileVisibility: true,
    dataCollection: false,
    emailUpdates: false,
  })

const updateSetting = (key: string, value: boolean) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

const exportData = () => {
    const userData = {
      profile: JSON.parse(localStorage.getItem("scrolla-user-profile") || "{}"),
      connections: JSON.parse(localStorage.getItem("scrolla-connections") || "[]"),
      settings: settings,
      exportDate: new Date().toISOString(),
    }

const blob = new Blob([JSON.stringify(userData, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `scrolla-data-${new Date().toISOString().split("T")[0]}.json`
    a.click()
    URL.revokeObjectURL(url)
  }

const clearAllData = () => {
    if (confirm("Are you sure you want to delete all your data? This action cannot be undone.")) {
      localStorage.clear()
      window.location.href = "/"
    }
  }

<div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Notifications */}
        <Card className="mb-6 bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg font-light text-slate-800">
              <Bell className="h-5 w-5 text-purple-600" />
              Notifications
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <Label htmlFor="notifications" className="font-light text-slate-700">
                  Push Notifications
                </Label>
                <p className="text-sm text-slate-500 font-light">Get notified about new connections</p>
              </div>
              <Switch
                id="notifications"
                checked={settings.notifications}
                onCheckedChange={(checked) => updateSetting("notifications", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="reminders" className="font-light text-slate-700">
                  Connection Reminders
                </Label>
                <p className="text-sm text-slate-500 font-light">Gentle reminders to check messages</p>
              </div>
              <Switch
                id="reminders"
                checked={settings.connectionReminders}
                onCheckedChange={(checked) => updateSetting("connectionReminders", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="email" className="font-light text-slate-700">
                  Email Updates
                </Label>
                <p className="text-sm text-slate-500 font-light">Weekly digest of your connections</p>
              </div>
              <Switch
                id="email"
                checked={settings.emailUpdates}
                onCheckedChange={(checked) => updateSetting("emailUpdates", checked)}
              />
            </div>
          </CardContent>
        </Card>

{/* Privacy */}
        <Card className="mb-6 bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg font-light text-slate-800">
              <Shield className="h-5 w-5 text-purple-600" />
              Privacy
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <Label htmlFor="visibility" className="font-light text-slate-700">
                  Profile Visibility
                </Label>
                <p className="text-sm text-slate-500 font-light">Allow others to discover your profile</p>
              </div>
              <Switch
                id="visibility"
                checked={settings.profileVisibility}
                onCheckedChange={(checked) => updateSetting("profileVisibility", checked)}
              />
            </div>

<div className="flex items-center justify-between">
              <div>
                <Label htmlFor="data" className="font-light text-slate-700">
                  Anonymous Analytics
                </Label>
                <p className="text-sm text-slate-500 font-light">Help improve Scrolla with usage data</p>
              </div>
              <Switch
                id="data"
                checked={settings.dataCollection}
                onCheckedChange={(checked) => updateSetting("dataCollection", checked)}
              />
            </div>
          </CardContent>
        </Card>

{/* Appearance */}
        <Card className="mb-6 bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg font-light text-slate-800">
              {settings.darkMode ? (
                <Moon className="h-5 w-5 text-purple-600" />
              ) : (
                <Sun className="h-5 w-5 text-purple-600" />
              )}
              Appearance
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div>
                <Label htmlFor="darkMode" className="font-light text-slate-700">
                  Dark Mode
                </Label>
                <p className="text-sm text-slate-500 font-light">Switch to a darker theme</p>
              </div>
              <Switch
                id="darkMode"
                checked={settings.darkMode}
                onCheckedChange={(checked) => updateSetting("darkMode", checked)}
              />
            </div>
          </CardContent>
        </Card>

{/* Data Management */}
        <Card className="mb-6 bg-white/80 backdrop-blur-sm border-0 shadow-lg rounded-3xl">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-lg font-light text-slate-800">
              <Heart className="h-5 w-5 text-purple-600" />
              Your Data
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Button
              onClick={exportData}
              variant="outline"
              className="w-full border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-3 font-light bg-transparent"
            >
              <Download className="h-4 w-4 mr-2" />
              Export My Data
            </Button>

<Button
              onClick={clearAllData}
              variant="outline"
              className="w-full border-red-200 text-red-600 hover:bg-red-50 rounded-full py-3 font-light bg-transparent"
            >
              <Trash2 className="h-4 w-4 mr-2" />
              Delete All Data
            </Button>

<p className="text-xs text-slate-500 font-light text-center leading-relaxed">
              Your data is stored locally on your device. Exporting creates a backup file you can save.
            </p>
          </CardContent>
        </Card>

{/* About */}
        <Card className="bg-purple-50/80 backdrop-blur-sm border-purple-200 rounded-2xl">
          <CardContent className="p-6 text-center">
            <div className="text-3xl mb-3">💌</div>
            <h3 className="font-light text-slate-800 mb-2">Scrolla v1.0</h3>
            <p className="text-sm text-slate-600 font-light leading-relaxed mb-4">
              Connecting souls through emotions and authentic words, not appearances.
            </p>
            <div className="space-y-2 text-xs text-slate-500 font-light">
              <Link href="/privacy" className="block hover:text-purple-600 transition-colors">
                Privacy Policy
              </Link>
              <Link href="/terms" className="block hover:text-purple-600 transition-colors">
                Terms of Service
              </Link>
              <Link href="/support" className="block hover:text-purple-600 transition-colors">
                Support & Feedback
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/edit/page.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { ArrowLeft, Save, Sparkles, RefreshCw } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { EMOTIONAL_STATES, SUGGESTED_KEYWORDS } from "@/lib/types"
import { getCurrentUserProfile, saveUserProfile } from "@/lib/storage"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function EditProfilePage() {
  const router = useRouter()
  const [formData, setFormData] = React.useState({
    emotionalState: "peaceful",
    keywords: ["", "", ""] as [string, string, string],
    quote: "",
  })
  const [errors, setErrors] = React.useState<string[]>([])
  const [isLoading, setIsLoading] = React.useState(true)
  const [hasChanges, setHasChanges] = React.useState(false)

React.useEffect(() => {
    const profile = getCurrentUserProfile()
    if (profile) {
      setFormData({
        emotionalState: profile.emotionalState.id,
        keywords: [...profile.keywords],
        quote: profile.quote,
      })
    } else {
      router.push("/profile/create")
    }
    setIsLoading(false)
  }, [router])

React.useEffect(() => {
    setHasChanges(true)
  }, [formData])

const validateForm = (): boolean => {
    const newErrors: string[] = []

if (formData.keywords.some((k) => k.length === 0)) {
      newErrors.push("All three keywords are required")
    }
    if (formData.keywords.some((k) => k.length > 20)) {
      newErrors.push("Keywords must be 20 characters or less")
    }
    if (new Set(formData.keywords).size !== 3) {
      newErrors.push("All keywords must be unique")
    }

if (formData.quote.trim().length === 0) {
      newErrors.push("A meaningful quote is required")
    }
    if (formData.quote.length > 150) {
      newErrors.push("Quote must be 150 characters or less")
    }

setErrors(newErrors)
    return newErrors.length === 0
  }

const handleSubmit = () => {
    if (!validateForm()) return

const profile = saveUserProfile({
      emotionalState: EMOTIONAL_STATES[formData.emotionalState],
      keywords: formData.keywords,
      quote: formData.quote.trim(),
    })

if (profile) {
      router.push("/profile")
    }
  }

if (randomKeyword) {
      handleKeywordChange(index, randomKeyword)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50 flex items-center justify-center">
        <div className="text-center space-y-4">
          <div className="w-8 h-8 border-2 border-purple-300 border-t-purple-600 rounded-full animate-spin mx-auto"></div>
          <p className="text-slate-600 font-light">Loading your profile...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-purple-100">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/profile">
                <Button variant="ghost" size="sm" className="rounded-full">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
              </Link>
              <h1 className="font-light text-slate-800 tracking-wide">Edit Profile</h1>
            </div>
            {hasChanges && (
              <Badge variant="outline" className="border-orange-300 text-orange-700 bg-orange-50 rounded-full">
                Unsaved
              </Badge>
            )}
          </div>
        </div>
      </header>

<div className="container mx-auto px-6 py-8 max-w-sm">
        <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl rounded-3xl">
          <CardHeader className="text-center p-8 pb-6">
            <div className="text-4xl mb-4">✨</div>
            <CardTitle className="text-xl font-light text-slate-800 tracking-wide">Update your essence</CardTitle>
            <p className="text-sm text-slate-600 font-light mt-2">Modify how your soul appears to kindred spirits</p>
          </CardHeader>
          <CardContent className="p-8 pt-0 space-y-8">
            {/* Emotional State */}
            <div className="space-y-3">
              <Label className="text-sm font-medium text-slate-700">Current feeling</Label>
              <Select
                value={formData.emotionalState}
                onValueChange={(value) => setFormData({ ...formData, emotionalState: value })}
              >
                <SelectTrigger className="w-full border-purple-200 rounded-2xl py-6 text-center">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="rounded-2xl">
                  {Object.values(EMOTIONAL_STATES).map((state) => (
                    <SelectItem key={state.id} value={state.id} className="rounded-xl">
                      <div className="flex items-center gap-3 py-2">
                        <span className="text-xl">{state.emoji}</span>
                        <div className="text-left">
                          <div className="font-medium">{state.name}</div>
                          <div className="text-xs text-slate-500">{state.description}</div>
                        </div>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{/* Keywords */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label className="text-sm font-medium text-slate-700">Three describing words</Label>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={getRandomKeywords}
                  className="text-purple-600 hover:bg-purple-50 rounded-full"
                >
                  <RefreshCw className="w-4 h-4 mr-1" />
                  Random
                </Button>
              </div>

<div className="space-y-3">
                {formData.keywords.map((keyword, index) => (
                  <div key={index} className="flex gap-2">
                    <Input
                      value={keyword}
                      onChange={(e) => handleKeywordChange(index, e.target.value)}
                      placeholder={`Word ${index + 1}`}
                      maxLength={20}
                      className="flex-1 border-purple-200 rounded-2xl py-3 text-center font-light"
                    />
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => suggestKeyword(index)}
                      className="rounded-full border-purple-200 text-purple-600 hover:bg-purple-50"
                    >
                      <Sparkles className="w-4 h-4" />
                    </Button>
                  </div>
                ))}
              </div>

{/* Keyword Suggestions */}
              <div className="space-y-3">
                <p className="text-xs uppercase tracking-wider text-slate-400 font-medium">Quick picks</p>
                <div className="flex flex-wrap gap-2">
                  {SUGGESTED_KEYWORDS.slice(0, 9).map((keyword) => (
                    <Badge
                      key={keyword}
                      variant="outline"
                      className="cursor-pointer hover:bg-purple-50 border-purple-200 text-purple-700 rounded-full px-3 py-1 font-light text-xs"
                      onClick={() => {
                        const emptyIndex = formData.keywords.findIndex((k) => k === "")
                        if (emptyIndex !== -1) {
                          handleKeywordChange(emptyIndex, keyword)
                        }
                      }}
                    >
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>

{/* Quote */}
            <div className="space-y-3">
              <Label className="text-sm font-medium text-slate-700">Your meaningful thought</Label>
              <Textarea
                value={formData.quote}
                onChange={(e) => setFormData({ ...formData, quote: e.target.value })}
                placeholder="Share something that represents your current state of mind..."
                maxLength={150}
                rows={4}
                className="border-purple-200 rounded-2xl p-4 font-light leading-relaxed resize-none"
              />
              <div className="flex justify-between text-xs text-slate-500">
                <span>This is what draws people to connect with you</span>
                <span className="font-mono">{formData.quote.length}/150</span>
              </div>
            </div>

{/* Preview */}
            <div className="bg-gradient-to-br from-slate-50 to-purple-50/30 rounded-2xl p-6 border border-purple-100/50">
              <p className="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3 text-center">Preview</p>
              <div className="text-center space-y-3">
                <div className="text-2xl">{EMOTIONAL_STATES[formData.emotionalState]?.emoji}</div>
                <div className="font-light text-slate-800">{EMOTIONAL_STATES[formData.emotionalState]?.name}</div>
                <div className="flex flex-wrap gap-1 justify-center">
                  {formData.keywords
                    .filter((k) => k.length > 0)
                    .map((keyword, index) => (
                      <Badge
                        key={index}
                        variant="outline"
                        className="text-xs px-2 py-1 rounded-full border-purple-200 text-purple-700"
                      >
                        {keyword}
                      </Badge>
                    ))}
                </div>
                <p className="text-sm text-slate-700 font-light italic">
                  "{formData.quote || "Your quote will appear here..."}"
                </p>
              </div>
            </div>

{/* Errors */}
            {errors.length > 0 && (
              <div className="bg-red-50 border border-red-200 rounded-2xl p-4">
                <ul className="text-sm text-red-700 space-y-1">
                  {errors.map((error, index) => (
                    <li key={index}>• {error}</li>
                  ))}
                </ul>
              </div>
            )}

{/* Actions */}
            <div className="flex gap-3">
              <Link href="/profile" className="flex-1">
                <Button
                  variant="outline"
                  className="w-full border-purple-200 text-purple-600 hover:bg-purple-50 rounded-full py-6 font-light bg-transparent"
                >
                  Cancel
                </Button>
              </Link>
              <Button
                onClick={handleSubmit}
                className="flex-1 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white border-0 rounded-full py-6 font-light"
              >
                <Save className="h-4 w-4 mr-2" />
                Save Changes
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Bottom Note */}
        <div className="text-center mt-8">
          <p className="text-xs text-slate-400 leading-relaxed max-w-xs mx-auto">
            Changes to your profile will be visible to new connections immediately. Existing connections will see
            updates on their next visit.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true"
"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { MessageCircle, User, Settings, Home } from "lucide-react"

export function BottomNav() {
  const pathname = usePathname()

const navItems = [
    { href: "/", icon: Home, label: "Discover" },
    { href: "/connections", icon: MessageCircle, label: "Connect" },
    { href: "/profile", icon: User, label: "Profile" },
    { href: "/settings", icon: Settings, label: "Settings" },
  ]

// Don't show on certain pages
  if (pathname.includes("/profile/create") || pathname.includes("/profile/edit")) {
    return null
  }

return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-t border-purple-100">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-around py-2">
          {navItems.map(({ href, icon: Icon, label }) => {
            const isActive = pathname === href

return (
              <Link key={href} href={href}>
                <Button
                  variant="ghost"
                  size="sm"
                  className={`flex flex-col items-center gap-1 h-auto py-3 px-4 rounded-2xl ${
                    isActive
                      ? "bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700"
                      : "text-slate-500 hover:text-purple-600 hover:bg-purple-50"
                  }`}
                >
                  <Icon className={`h-5 w-5 ${isActive ? "fill-current" : ""}`} />
                  <span className="text-xs font-light">{label}</span>
                </Button>
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { BottomNav } from "@/components/bottom-nav"

const inter = Inter({
  subsets: ["latin"],
  weight: ["200", "300", "400", "500", "600", "700"],
  display: "swap",
})

export const metadata: Metadata = {
  title: "Scrolla - Anonymous Emotional Connections",
  description:
    "Connect with kindred spirits through emotions and words, not appearances. A minimalist penpal app for meaningful conversations.",
  keywords: ["penpal", "anonymous", "emotional", "connections", "letters", "meaningful", "conversations"],
  authors: [{ name: "Scrolla" }],
  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
  themeColor: "#8b5cf6",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Scrolla",
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <link rel="apple-touch-icon" href="/icon-192.png" />
        <link rel="manifest" href="/manifest.json" />
      </head>
      <body className={inter.className}>
        <main className="pb-20">{children}</main>
        <BottomNav />
      </body>
    </html>
  )
}
[V0_FILE]json:file="public/manifest.json" isMerged="true"
{
  "name": "Scrolla - Anonymous Connections",
  "short_name": "Scrolla",
  "description": "Connect with kindred spirits through emotions and words",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f3e8ff",
  "theme_color": "#8b5cf6",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["social", "lifestyle"],
  "lang": "en",
  "dir": "ltr"
}
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-500 data-[state=checked]:to-indigo-500 data-[state=unchecked]:bg-slate-200",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="lib/pi-network-sdk.ts"
"use client"

// Pi Network SDK Integration
// Official Pi SDK Documentation: https://developers.minepi.com/

export interface PiUser {
  uid: string
  username: string
  accessToken: string
}

export interface PiPayment {
  identifier: string
  user_uid: string
  amount: number
  memo: string
  metadata: Record<string, any>
  from_address: string
  to_address: string
  direction: string
  network: string
  status: {
    developer_approved: boolean
    transaction_verified: boolean
    developer_completed: boolean
    cancelled: boolean
    user_cancelled: boolean
  }
  transaction?: {
    txid: string
    verified: boolean
    _link: string
  }
}

export class PiNetworkSDK {
  private static instance: PiNetworkSDK
  private piSDK: any = null
  private isInitialized = false

static getInstance(): PiNetworkSDK {
    if (!PiNetworkSDK.instance) {
      PiNetworkSDK.instance = new PiNetworkSDK()
    }
    return PiNetworkSDK.instance
  }

/**
   * Initialize Pi SDK
   * Must be called before any other Pi operations
   */
  async initialize(): Promise<boolean> {
    try {
      // Check if running in Pi Browser
      if (typeof window !== "undefined" && (window as any).Pi) {
        this.piSDK = (window as any).Pi

// Initialize with version and sandbox mode for testnet
        await this.piSDK.init({
          version: "2.0",
          sandbox: process.env.NODE_ENV === "development", // Use sandbox for development
        })

this.isInitialized = true
        console.log("Pi SDK initialized successfully")
        return true
      }

console.warn("Pi SDK not available - not running in Pi Browser")
      return false
    } catch (error) {
      console.error("Pi SDK initialization failed:", error)
      return false
    }
  }

/**
   * Check if Pi SDK is available and initialized
   */
  isAvailable(): boolean {
    return this.isInitialized && this.piSDK !== null
  }

/**
   * Authenticate user with Pi Network
   * Required scopes: username, payments
   */
  async authenticate(): Promise<PiUser | null> {
    if (!this.isAvailable()) {
      throw new Error("Pi SDK not initialized")
    }

try {
      const scopes = ["username", "payments"]
      const authResult = await this.piSDK.authenticate(scopes, {
        onIncompletePaymentFound: (payment: PiPayment) => {
          console.log("Incomplete payment found:", payment)
          // Handle incomplete payments
          this.handleIncompletePayment(payment)
        },
      })

// Store authentication
        localStorage.setItem("pi-auth", JSON.stringify(piUser))
        return piUser
      }

return null
    } catch (error) {
      console.error("Pi authentication failed:", error)
      throw error
    }
  }

/**
   * Sign out from Pi Network
   */
  async signOut(): Promise<void> {
    if (!this.isAvailable()) return

try {
      await this.piSDK.signOut()
      localStorage.removeItem("pi-auth")
      console.log("Signed out from Pi Network")
    } catch (error) {
      console.error("Pi sign out failed:", error)
    }
  }

/**
   * Get stored Pi user data
   */
  getStoredUser(): PiUser | null {
    try {
      const stored = localStorage.getItem("pi-auth")
      return stored ? JSON.parse(stored) : null
    } catch {
      return null
    }
  }

/**
   * Create a payment request
   * For premium subscriptions, connection fees, etc.
   */
  async createPayment(paymentData: {
    amount: number
    memo: string
    metadata: Record<string, any>
  }): Promise<PiPayment | null> {
    if (!this.isAvailable()) {
      throw new Error("Pi SDK not initialized")
    }

try {
      const paymentRequest = {
        amount: paymentData.amount,
        memo: paymentData.memo,
        metadata: {
          ...paymentData.metadata,
          app: "scrolla",
          timestamp: new Date().toISOString(),
        },
      }

const payment = await this.piSDK.createPayment(paymentRequest, {
        onReadyForServerApproval: (paymentId: string) => {
          console.log("Payment ready for server approval:", paymentId)
          // Send to your backend for approval
          this.approvePaymentOnServer(paymentId)
        },
        onReadyForServerCompletion: (paymentId: string, txid: string) => {
          console.log("Payment ready for completion:", paymentId, txid)
          // Send to your backend for completion
          this.completePaymentOnServer(paymentId, txid)
        },
        onCancel: (paymentId: string) => {
          console.log("Payment cancelled:", paymentId)
        },
        onError: (error: any, payment?: PiPayment) => {
          console.error("Payment error:", error, payment)
        },
      })

return payment
    } catch (error) {
      console.error("Payment creation failed:", error)
      throw error
    }
  }

/**
   * Handle incomplete payments found during authentication
   */
  private async handleIncompletePayment(payment: PiPayment): Promise<void> {
    console.log("Handling incomplete payment:", payment)

// Check payment status and complete if necessary
    if (payment.status.developer_approved && !payment.status.developer_completed) {
      // Complete the payment
      await this.completePaymentOnServer(payment.identifier, payment.transaction?.txid || "")
    }
  }

/**
   * Server-side payment approval (mock implementation)
   * In production, this should call your backend API
   */
  private async approvePaymentOnServer(paymentId: string): Promise<void> {
    try {
      // Mock server approval - replace with actual API call
      console.log("Approving payment on server:", paymentId)

// Example API call:
      // const response = await fetch('/api/pi/approve-payment', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ paymentId })
      // })

// For demo purposes, auto-approve after delay
      setTimeout(async () => {
        if (this.piSDK) {
          await this.piSDK.approvePayment(paymentId)
        }
      }, 2000)
    } catch (error) {
      console.error("Server payment approval failed:", error)
    }
  }

/**
   * Server-side payment completion (mock implementation)
   * In production, this should call your backend API
   */
  private async completePaymentOnServer(paymentId: string, txid: string): Promise<void> {
    try {
      console.log("Completing payment on server:", paymentId, txid)

// Example API call:
      // const response = await fetch('/api/pi/complete-payment', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ paymentId, txid })
      // })

// For demo purposes, auto-complete after delay
      setTimeout(async () => {
        if (this.piSDK) {
          await this.piSDK.completePayment(paymentId, txid)
        }
      }, 1000)
    } catch (error) {
      console.error("Server payment completion failed:", error)
    }
  }

/**
   * Get payment by ID
   */
  async getPayment(paymentId: string): Promise<PiPayment | null> {
    if (!this.isAvailable()) {
      throw new Error("Pi SDK not initialized")
    }

try {
      const payment = await this.piSDK.getPayment(paymentId)
      return payment
    } catch (error) {
      console.error("Failed to get payment:", error)
      return null
    }
  }

/**
   * Open Pi Wallet for manual transactions
   */
  async openWallet(): Promise<void> {
    if (!this.isAvailable()) {
      throw new Error("Pi SDK not initialized")
    }

try {
      await this.piSDK.openWallet()
    } catch (error) {
      console.error("Failed to open wallet:", error)
    }
  }
}
[V0_FILE]typescriptreact:file="components/pi-integration.tsx"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Zap, CheckCircle, AlertCircle, Loader2, Wallet, Crown, Info } from "lucide-react"
import { PiNetworkSDK, type PiUser, type PiPayment } from "@/lib/pi-network-sdk"

interface PiIntegrationProps {
  onPaymentSuccess?: (payment: PiPayment) => void
  onAuthSuccess?: (user: PiUser) => void
}

export function PiIntegration({ onPaymentSuccess, onAuthSuccess }: PiIntegrationProps) {
  const [piSDK] = React.useState(() => PiNetworkSDK.getInstance())
  const [isInitialized, setIsInitialized] = React.useState(false)
  const [user, setUser] = React.useState<PiUser | null>(null)
  const [isLoading, setIsLoading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)
  const [paymentStatus, setPaymentStatus] = React.useState<string | null>(null)

React.useEffect(() => {
    initializePi()
  }, [])

const initializePi = async () => {
    try {
      setIsLoading(true)
      const initialized = await piSDK.initialize()
      setIsInitialized(initialized)

if (initialized) {
        // Check for stored user
        const storedUser = piSDK.getStoredUser()
        setUser(storedUser)
      }
    } catch (error) {
      setError("Failed to initialize Pi Network")
      console.error("Pi initialization error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleAuthenticate = async () => {
    try {
      setIsLoading(true)
      setError(null)

const authenticatedUser = await piSDK.authenticate()
      if (authenticatedUser) {
        setUser(authenticatedUser)
        onAuthSuccess?.(authenticatedUser)
      }
    } catch (error) {
      setError("Authentication failed. Please try again.")
      console.error("Authentication error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSignOut = async () => {
    try {
      setIsLoading(true)
      await piSDK.signOut()
      setUser(null)
    } catch (error) {
      setError("Sign out failed")
      console.error("Sign out error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handlePremiumPurchase = async () => {
    if (!user) {
      setError("Please authenticate first")
      return
    }

try {
      setIsLoading(true)
      setError(null)
      setPaymentStatus("Creating payment...")

const payment = await piSDK.createPayment({
        amount: 2.99,
        memo: "Scrolla Premium Subscription",
        metadata: {
          type: "premium_subscription",
          userId: user.uid,
          plan: "monthly",
        },
      })

if (payment) {
        setPaymentStatus("Payment created successfully!")
        onPaymentSuccess?.(payment)
      }
    } catch (error) {
      setError("Payment failed. Please try again.")
      console.error("Payment error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleConnectionFee = async () => {
    if (!user) {
      setError("Please authenticate first")
      return
    }

try {
      setIsLoading(true)
      setError(null)
      setPaymentStatus("Processing connection fee...")

const payment = await piSDK.createPayment({
        amount: 0.1,
        memo: "Scrolla Connection Fee",
        metadata: {
          type: "connection_fee",
          userId: user.uid,
        },
      })

if (payment) {
        setPaymentStatus("Connection fee paid!")
        onPaymentSuccess?.(payment)
      }
    } catch (error) {
      setError("Connection fee payment failed")
      console.error("Connection fee error:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (!isInitialized) {
    return (
      <Card className="border-orange-200 bg-orange-50">
        <CardContent className="p-6">
          <div className="flex items-center gap-3">
            <AlertCircle className="h-5 w-5 text-orange-600" />
            <div>
              <h3 className="font-medium text-orange-900">Pi Browser Required</h3>
              <p className="text-sm text-orange-700">
                This feature requires the Pi Browser app. Please open Scrolla in Pi Browser to access Pi Network
                features.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-4">
      {/* Pi Network Status */}
      <Card className={`border-2 ${user ? "border-green-200 bg-green-50" : "border-purple-200 bg-purple-50"}`}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-lg">
            <Zap className="h-5 w-5 text-purple-600" />
            Pi Network Integration
            {user && <Badge className="bg-green-500 text-white">Connected</Badge>}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {user ? (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Welcome, @{user.username}!</p>
                  <p className="text-sm text-muted-foreground">Pi Network account connected</p>
                </div>
                <Button variant="outline" size="sm" onClick={handleSignOut} disabled={isLoading}>
                  Sign Out
                </Button>
              </div>
            </div>
          ) : (
            <div className="space-y-3">
              <p className="text-sm text-muted-foreground">
                Connect your Pi Network account to access premium features and make payments.
              </p>
              <Button
                onClick={handleAuthenticate}
                disabled={isLoading}
                className="w-full bg-gradient-to-r from-purple-500 to-indigo-500"
              >
                {isLoading ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Connecting...
                  </>
                ) : (
                  <>
                    <Zap className="h-4 w-4 mr-2" />
                    Connect Pi Network
                  </>
                )}
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

{/* Payment Options */}
      {user && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Wallet className="h-5 w-5" />
              Pi Payments
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Premium Subscription */}
            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div className="flex items-center gap-3">
                <Crown className="h-5 w-5 text-yellow-500" />
                <div>
                  <p className="font-medium">Premium Subscription</p>
                  <p className="text-sm text-muted-foreground">Unlimited connections & features</p>
                </div>
              </div>
              <div className="text-right">
                <p className="font-bold">π2.99/month</p>
                <Button size="sm" onClick={handlePremiumPurchase} disabled={isLoading}>
                  {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Purchase"}
                </Button>
              </div>
            </div>

{/* Connection Fee */}
            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div className="flex items-center gap-3">
                <Zap className="h-5 w-5 text-blue-500" />
                <div>
                  <p className="font-medium">Priority Connection</p>
                  <p className="text-sm text-muted-foreground">Skip the queue for instant connections</p>
                </div>
              </div>
              <div className="text-right">
                <p className="font-bold">π0.1</p>
                <Button size="sm" variant="outline" onClick={handleConnectionFee} disabled={isLoading}>
                  {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Pay"}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Status Messages */}
      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{paymentStatus && (
        <Alert>
          <CheckCircle className="h-4 w-4" />
          <AlertDescription>{paymentStatus}</AlertDescription>
        </Alert>
      )}

{/* Development Info */}
      {process.env.NODE_ENV === "development" && (
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm">
              <Info className="h-4 w-4" />
              Development Mode
            </CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-blue-700">
            <p>Running in sandbox mode for testing. Payments will use Pi Testnet.</p>
            <p className="mt-2">
              <strong>Test in Pi Browser:</strong> Open this app in Pi Browser to test real Pi Network integration.
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pi-integration/page.tsx"
"use client"

import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, ExternalLink } from "lucide-react"
import Link from "next/link"
import { PiIntegration } from "@/components/pi-integration"
import type { PiPayment, PiUser } from "@/lib/pi-network-sdk"

export default function PiIntegrationPage() {
  const [payments, setPayments] = React.useState<PiPayment[]>([])
  const [connectedUser, setConnectedUser] = React.useState<PiUser | null>(null)

const handlePaymentSuccess = (payment: PiPayment) => {
    setPayments((prev) => [payment, ...prev])

// Handle different payment types
    if (payment.metadata.type === "premium_subscription") {
      // Activate premium features
      localStorage.setItem("scrolla-premium", "true")
      alert("Premium subscription activated! 🎉")
    } else if (payment.metadata.type === "connection_fee") {
      // Grant priority connection
      alert("Priority connection granted! ⚡")
    }
  }

const handleAuthSuccess = (user: PiUser) => {
    setConnectedUser(user)

// Sync with Scrolla profile
    const currentProfile = JSON.parse(localStorage.getItem("scrolla-user-profile") || "{}")
    const syncedProfile = {
      ...currentProfile,
      piConnected: true,
      piUsername: user.username,
      piUserId: user.uid,
      lastPiSync: new Date().toISOString(),
    }
    localStorage.setItem("scrolla-user-profile", JSON.stringify(syncedProfile))
  }

<div className="container mx-auto px-6 py-8 max-w-sm">
        {/* Integration Component */}
        <PiIntegration onPaymentSuccess={handlePaymentSuccess} onAuthSuccess={handleAuthSuccess} />

{/* Payment History */}
        {payments.length > 0 && (
          <Card className="mt-6">
            <CardHeader>
              <CardTitle className="text-lg">Recent Payments</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {payments.map((payment, index) => (
                  <div key={index} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                    <div>
                      <p className="font-medium text-sm">{payment.memo}</p>
                      <p className="text-xs text-muted-foreground">
                        {payment.metadata.type} • {new Date().toLocaleDateString()}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="font-bold">π{payment.amount}</p>
                      <p className="text-xs text-green-600">Completed</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

{/* Documentation Links */}
        <Card className="mt-6 bg-blue-50/80 backdrop-blur-sm border-blue-200">
          <CardHeader>
            <CardTitle className="text-sm">Pi Network Resources</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="space-y-2 text-sm">
              <a
                href="https://developers.minepi.com/"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800"
              >
                <ExternalLink className="h-4 w-4" />
                Pi Developer Documentation
              </a>
              <a
                href="https://developers.minepi.com/doc/javascript-sdk"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800"
              >
                <ExternalLink className="h-4 w-4" />
                JavaScript SDK Reference
              </a>
              <a
                href="https://developers.minepi.com/doc/payments"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800"
              >
                <ExternalLink className="h-4 w-4" />
                Payments API Guide
              </a>
              <a
                href="https://developers.minepi.com/doc/testnet"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-blue-600 hover:text-blue-800"
              >
                <ExternalLink className="h-4 w-4" />
                Testnet Documentation
              </a>
            </div>
          </CardContent>
        </Card>

{/* Implementation Notes */}
        <Card className="mt-6 bg-yellow-50/80 backdrop-blur-sm border-yellow-200">
          <CardHeader>
            <CardTitle className="text-sm">Implementation Notes</CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-yellow-800 space-y-2">
            <p>• Pi SDK only works in Pi Browser environment</p>
            <p>• Testnet mode is enabled in development</p>
            <p>• Server-side approval/completion required for production</p>
            <p>• All payments are processed through Pi Network's secure infrastructure</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
))
Alert.displayName = "Alert"

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
  ),
)
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertDescription }
[V0_FILE]typescriptreact:file="app/api/pi/approve-payment/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// Mock server-side payment approval endpoint
// In production, this would validate the payment and approve it
export async function POST(request: NextRequest) {
  try {
    const { paymentId } = await request.json()

if (!paymentId) {
      return NextResponse.json({ error: "Payment ID is required" }, { status: 400 })
    }

// Mock validation logic
    // In production, you would:
    // 1. Validate the payment details
    // 2. Check user permissions
    // 3. Verify payment amount and metadata
    // 4. Call Pi Network API to approve payment

console.log("Approving payment:", paymentId)

// Simulate API delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

return NextResponse.json({
      success: true,
      paymentId,
      message: "Payment approved successfully",
    })
  } catch (error) {
    console.error("Payment approval error:", error)
    return NextResponse.json({ error: "Payment approval failed" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/pi/complete-payment/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// Mock server-side payment completion endpoint
// In production, this would complete the payment after blockchain confirmation
export async function POST(request: NextRequest) {
  try {
    const { paymentId, txid } = await request.json()

if (!paymentId || !txid) {
      return NextResponse.json({ error: "Payment ID and transaction ID are required" }, { status: 400 })
    }

// Mock completion logic
    // In production, you would:
    // 1. Verify the blockchain transaction
    // 2. Update your database
    // 3. Grant user the purchased features
    // 4. Call Pi Network API to complete payment

console.log("Completing payment:", paymentId, txid)

// Simulate API delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

return NextResponse.json({
      success: true,
      paymentId,
      txid,
      message: "Payment completed successfully",
    })
  } catch (error) {
    console.error("Payment completion error:", error)
    return NextResponse.json({ error: "Payment completion failed" }, { status: 500 })
  }
}
[V0_FILE]markdown:file="docs/pi-network-integration.md"
# Pi Network Integration Guide

## Overview

This guide covers integrating Pi Network's SDK and payment system into Scrolla for premium features and micropayments.

## Pi Network Resources

### Official Documentation
- **Main Developer Portal**: https://developers.minepi.com/
- **JavaScript SDK**: https://developers.minepi.com/doc/javascript-sdk
- **Payments API**: https://developers.minepi.com/doc/payments
- **Testnet Guide**: https://developers.minepi.com/doc/testnet

### Key Concepts

#### 1. Pi Browser Environment
- Pi SDK only works within Pi Browser app
- Users must open your app through Pi Browser
- Automatic SDK injection via `window.Pi`

#### 2. Authentication Flow
\`\`\`javascript
// Initialize SDK
await Pi.init({ version: "2.0", sandbox: true })

// Authenticate user
const auth = await Pi.authenticate(["username", "payments"])
// Returns: { user: { uid, username }, accessToken }
\`\`\`

#### 3. Payment Flow
\`\`\`javascript
// Create payment
const payment = await Pi.createPayment({
  amount: 2.99,
  memo: "Premium subscription",
  metadata: { type: "premium" }
}, {
  onReadyForServerApproval: (paymentId) => {
    // Call your backend to approve
  },
  onReadyForServerCompletion: (paymentId, txid) => {
    // Call your backend to complete
  }
})
\`\`\`

## Implementation Steps

### 1. Environment Setup

#### Development (Testnet)
\`\`\`javascript
await Pi.init({ 
  version: "2.0", 
  sandbox: true  // Uses Pi Testnet
})
\`\`\`

#### Production (Mainnet)
\`\`\`javascript
await Pi.init({ 
  version: "2.0", 
  sandbox: false  // Uses Pi Mainnet
})
\`\`\`

### 2. Required Scopes
- `username`: Access to user's Pi username
- `payments`: Ability to create and process payments

### 3. Payment Types in Scrolla

#### Premium Subscription (π2.99/month)
\`\`\`javascript
{
  amount: 2.99,
  memo: "Scrolla Premium Subscription",
  metadata: {
    type: "premium_subscription",
    plan: "monthly",
    userId: user.uid
  }
}
\`\`\`

#### Connection Fee (π0.1)
\`\`\`javascript
{
  amount: 0.1,
  memo: "Priority Connection Fee",
  metadata: {
    type: "connection_fee",
    userId: user.uid
  }
}
\`\`\`

### 4. Server-Side Integration

#### Backend Requirements
- Approve payments after validation
- Complete payments after blockchain confirmation
- Handle incomplete payments during authentication

#### Example API Endpoints
\`\`\`
POST /api/pi/approve-payment
POST /api/pi/complete-payment
GET /api/pi/payment-status/:id
\`\`\`

## Testing

### 1. Pi Browser Setup
1. Download Pi Browser from app stores
2. Open your development URL in Pi Browser
3. Test authentication and payments

### 2. Testnet Testing
- Testnet Pi is free for testing
- All transactions are simulated
- Use sandbox mode in development

### 3. Payment Flow Testing
1. Create payment request
2. User approves in Pi Wallet
3. Server approves payment
4. Blockchain processes transaction
5. Server completes payment
6. User receives features

## Security Considerations

### 1. Server-Side Validation
- Always validate payments on your backend
- Never trust client-side payment status
- Verify transaction details before granting features

### 2. User Authentication
- Store Pi user data securely
- Implement proper session management
- Handle authentication errors gracefully

### 3. Payment Security
- Validate payment amounts and metadata
- Implement idempotency for payment operations
- Handle payment failures and refunds

## Error Handling

### Common Errors
- `Pi SDK not available`: Not in Pi Browser
- `Authentication failed`: User denied permissions
- `Payment cancelled`: User cancelled payment
- `Insufficient balance`: User lacks Pi coins

### Error Recovery
- Graceful fallbacks for non-Pi Browser users
- Retry mechanisms for failed payments
- Clear error messages for users

## Production Checklist

- [ ] Switch to mainnet mode (`sandbox: false`)
- [ ] Implement proper backend payment validation
- [ ] Set up payment webhook endpoints
- [ ] Test all payment flows thoroughly
- [ ] Implement proper error handling
- [ ] Add payment history and receipts
- [ ] Set up monitoring and logging
- [ ] Comply with Pi Network developer policies

## Monetization Strategy

### Premium Features (π2.99/month)
- Unlimited daily connections
- Advanced filtering options
- Priority connection requests
- Enhanced profile customization

### Micropayments
- Priority connections (π0.1)
- Profile boosts (π0.05)
- Special badges (π0.2)
- Connection insights (π0.15)

## Support Resources

- **Pi Developer Discord**: Community support
- **Pi Developer Portal**: Official documentation
- **GitHub Examples**: Sample implementations
- **Stack Overflow**: Technical questions with `pi-network` tag</article></body></html>

Page Not Found

Something went wrong!

Trending Stories

{story.title}

Featured Authors

{author.name}

No Recent Updates

No Followed Authors

{author.name}

Episode Published!