ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"SWRDataProvider"] 103:[] 104:[["gJHlvLOgLj8","b_Gdqgbteb49b"]] 105:[["gJHlvLOgLj8",{"templateVersionId":null,"templateCanonId":null}]] 106:[["gJHlvLOgLj8","$D2025-06-11T13:53:04.147Z"]] 107:[["gJHlvLOgLj8",false]] 108:[["gJHlvLOgLj8","$undefined"]] 109:[["gJHlvLOgLj8",null]] 10a:[["gJHlvLOgLj8",true]] 10b:[["gJHlvLOgLj8",true]] 10c:[] 10d:T2a14c2,[V0_FILE]typescriptreact:file="components/json-editor.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { AlertCircle, Check } from "lucide-react" import { validateJson } from "@/lib/validate-json" interface JsonEditorProps { initialData: any onUpdate: (data: any) => void } export function JsonEditor({ initialData, onUpdate }: JsonEditorProps) { const [jsonText, setJsonText] = useState(() => JSON.stringify(initialData, null, 2)) const [error, setError] = useState(null) const [isValid, setIsValid] = useState(true) useEffect(() => { // Update the text when initialData changes setJsonText(JSON.stringify(initialData, null, 2)) }, [initialData]) const handleTextChange = (e: React.ChangeEvent) => { const newText = e.target.value setJsonText(newText) // Validate on each change const { isValid, error } = validateJson(newText) setIsValid(isValid) setError(error) } const handleApply = () => { try { const parsedData = JSON.parse(jsonText) onUpdate(parsedData) setError(null) setIsValid(true) } catch (err) { if (err instanceof Error) { setError(err.message) } else { setError("Invalid JSON") } setIsValid(false) } } const handleFormat = () => { try { const parsed = JSON.parse(jsonText) setJsonText(JSON.stringify(parsed, null, 2)) setError(null) setIsValid(true) } catch (err) { // Don't update the text if it's invalid if (err instanceof Error) { setError(err.message) } else { setError("Invalid JSON") } setIsValid(false) } } return (

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

{isValid && !error && jsonText.trim() !== "" && (
        <Alert className="bg-green-50 text-green-800 border-green-200">
          <Check className="h-4 w-4 text-green-600" />
          <AlertDescription>Valid JSON</AlertDescription>
        </Alert>
      )}

<div className="flex justify-end gap-2">
        <Button variant="outline" onClick={handleFormat}>
          Format
        </Button>
        <Button onClick={handleApply} disabled={!isValid}>
          Apply Changes
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/validate-json.ts"
export function validateJson(jsonString: string): { isValid: boolean; error: string | null } {
  if (!jsonString.trim()) {
    return { isValid: false, error: "JSON cannot be empty" }
  }

try {
    JSON.parse(jsonString)
    return { isValid: true, error: null }
  } catch (err) {
    if (err instanceof Error) {
      return { isValid: false, error: err.message }
    }
    return { isValid: false, error: "Invalid JSON" }
  }
}
[V0_FILE]typescriptreact:file="components/mission-viewer.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface MissionData {
  project: {
    name: string
    slogan: string
    mission: string
    vision: string
    key_values: Record<string, string>
  }
}

interface MissionViewerProps {
  data: MissionData
}

export function MissionViewer({ data }: MissionViewerProps) {
  const { project } = data
  const keyValues = Object.entries(project.key_values)

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="text-2xl">{project.name}</CardTitle>
          <CardDescription className="text-lg italic">{project.slogan}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <h3 className="text-lg font-semibold mb-2">Mission</h3>
            <p className="text-muted-foreground">{project.mission}</p>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-2">Vision</h3>
            <p className="text-muted-foreground">{project.vision}</p>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Key Values</CardTitle>
          <CardDescription>The core principles that guide our work</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {keyValues.map(([key, value]) => (
              <div key={key} className="p-3 border rounded-lg">
                <div className="flex items-center gap-2 mb-2">
                  <Badge variant="outline" className="capitalize">
                    {key}
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground">{value}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mission-page.tsx"
"use client"
import { MissionViewer } from "@/components/mission-viewer"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

// Sample mission data
const missionData = {
  project: {
    name: "Yunus Inspire",
    slogan: "Empowering the minds of Bangladesh, one dream at a time",
    mission:
      "To inspire and enable Bangladeshi students by providing free, accessible, and innovative resources in technology and programming, ensuring every learner has the tools to unlock their potential and contribute meaningfully to a prosperous and equitable society.",
    vision:
      "To establish a generation of confident, skilled, and ethical leaders who will drive innovation, unity, and sustainable progress, building a brighter future for Bangladesh while honoring the enduring legacy of Nobel Laureate Professor Muhammad Yunus.",
    key_values: {
      empowerment: "Students are empowered with knowledge, tools, and mentorship.",
      equality: "Ensuring equal access for all, irrespective of socio-economic background.",
      collaboration: "Encouraging teamwork and a shared vision for growth.",
      sustainability: "Promoting responsible and sustainable technological practices.",
      innovation: "Fostering creativity and problem-solving through modern technology.",
      inspiration: "Guided by the values and spirit of Professor Yunus to shape a better society.",
      integrity: "Upholding honesty, respect, and social responsibility.",
    },
  },
}

export default function MissionPage() {
  return (
    <main className="container mx-auto py-10 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to JSON Viewer
            </Button>
          </Link>
        </div>

<h1 className="text-3xl font-bold mb-6">Yunus Inspire Mission</h1>

<MissionViewer data={missionData} />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/project-plan-viewer.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

interface BudgetItem {
  category: string
  cost: string
  details: string
}

interface ProjectPlanData {
  phase_1: {
    title: string
    objectives_finalization: string[]
    team_formation: string[]
    timeline_setup: string
  }
  phase_2: {
    title: string
    frontend_development: string[]
    backend_development: string[]
    integration: string
    testing: string[]
  }
  phase_3: {
    title: string
    course_creation: string[]
    practice_tasks: string[]
    resources: string[]
  }
  phase_4: {
    title: string
    social_media_setup: string[]
    engagement_activities: string[]
    forum_creation: string
  }
  phase_5: {
    title: string
    website_hosting: string
    launch_event: string[]
    marketing_campaign: string[]
  }
  budget_proposal: {
    estimated_budget_breakdown: BudgetItem[]
    total_estimated_budget: string
  }
}

interface ProjectPlanViewerProps {
  data: ProjectPlanData
}

export function ProjectPlanViewer({ data }: ProjectPlanViewerProps) {
  return (
    <div className="space-y-6">
      <Tabs defaultValue="phases">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="phases">Project Phases</TabsTrigger>
          <TabsTrigger value="budget">Budget</TabsTrigger>
        </TabsList>

<TabsContent value="budget" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Budget Proposal</CardTitle>
              <CardDescription>
                Total Estimated Budget:{" "}
                <span className="font-bold text-primary">{data.budget_proposal.total_estimated_budget}</span>
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {data.budget_proposal.estimated_budget_breakdown.map((item, index) => (
                  <div key={index} className="flex flex-col sm:flex-row justify-between p-4 border rounded-lg">
                    <div>
                      <h3 className="font-medium">{item.category}</h3>
                      <p className="text-sm text-muted-foreground">{item.details}</p>
                    </div>
                    <div className="mt-2 sm:mt-0">
                      <Badge variant="outline" className="text-lg font-semibold">
                        {item.cost}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

interface PhaseCardProps {
  phase: string
  title: string
  items: {
    title: string
    list: string[]
  }[]
}

function PhaseCard({ phase, title, items }: PhaseCardProps) {
  return (
    <Card>
      <CardHeader>
        <Badge className="w-fit mb-2">{phase}</Badge>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((item, index) => (
            <div key={index} className="space-y-2">
              <h3 className="font-medium text-sm">{item.title}</h3>
              <ul className="space-y-1">
                {item.list.map((listItem, i) => (
                  <li key={i} className="text-sm text-muted-foreground">
                    • {listItem}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/project-plan-page.tsx"
"use client"
import { ProjectPlanViewer } from "@/components/project-plan-viewer"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

// Sample project plan data
const projectPlanData = {
  phase_1: {
    title: "Initial Planning and Strategy",
    objectives_finalization: [
      "Determine the project's goals, purpose, and primary content",
      "Plan strategies to attract students",
      "Technological decisions: React.js (Frontend), Node.js (Backend), Hosting with Vercel",
    ],
    team_formation: [
      "Recruit one Frontend Developer",
      "Recruit one Backend Developer",
      "Recruit one UI/UX Designer",
      "Recruit one Project Manager",
      "Recruit one Content Creator",
    ],
    timeline_setup: "Aim to complete the project within 3 months",
  },
  phase_2: {
    title: "Website Development",
    frontend_development: [
      "Develop Landing Page",
      "Develop Courses Page",
      "Develop Community Section",
      "Develop Contact Page",
    ],
    backend_development: ["Setup Database", "Implement Authentication (JWT/OAuth)", "Build RESTful APIs"],
    integration: "Establish proper connection between Frontend and Backend",
    testing: ["Conduct Beta Testing", "Fix Bugs"],
  },
  phase_3: {
    title: "Content Development",
    course_creation: ["Create simple and small courses on HTML, CSS, Python, and GitHub"],
    practice_tasks: ["Add beginner-level tasks for student practice"],
    resources: ["Setup Interactive Code Editor", "Provide Downloadable PDF Guides", "Create Video Tutorials"],
  },
  phase_4: {
    title: "Community Building",
    social_media_setup: ["Create LinkedIn and Facebook pages", "Add logo and cover images"],
    engagement_activities: ["Organize coding challenges", "Host mentorship programs"],
    forum_creation: "Develop Q&A platform for students",
  },
  phase_5: {
    title: "Launch and Promotion",
    website_hosting: "Host the website on Vercel",
    launch_event: ["Organize launch event on social media and community platforms"],
    marketing_campaign: ["Run promotions and media coverage targeting students"],
  },
  budget_proposal: {
    estimated_budget_breakdown: [
      {
        category: "Website Development",
        cost: "$5,000",
        details: "Frontend, Backend, Integration, Hosting",
      },
      {
        category: "Content Creation",
        cost: "$2,000",
        details: "Course material, Video Tutorials, Resources",
      },
      {
        category: "Team Salaries",
        cost: "$10,000",
        details: "Developers, Designers, Project Manager",
      },
      {
        category: "Marketing",
        cost: "$3,000",
        details: "Social Media Ads, Community Promotion",
      },
      {
        category: "Hosting and Tools",
        cost: "$1,000",
        details: "Vercel Hosting, Azure DevOps, Domain Costs",
      },
      {
        category: "Miscellaneous Costs",
        cost: "$1,000",
        details: "Unexpected expenses and small adjustments",
      },
    ],
    total_estimated_budget: "$22,000",
  },
}

export default function ProjectPlanPage() {
  return (
    <main className="container mx-auto py-10 px-4">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/">
            <Button variant="outline" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to JSON Viewer
            </Button>
          </Link>
        </div>

<h1 className="text-3xl font-bold mb-6">Yunus Inspire Project Plan</h1>

<ProjectPlanViewer data={projectPlanData} />
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/project-structure-viewer.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChevronDown, ChevronRight, Folder, FileText } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Search } from "lucide-react"

interface ProjectStructureViewerProps {
  structure: Record<string, any>
  projectName: string
}

export function ProjectStructureViewer({ structure, projectName }: ProjectStructureViewerProps) {
  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set([]))
  const [searchTerm, setSearchTerm] = useState("")

const togglePath = (path: string) => {
    const newExpandedPaths = new Set(expandedPaths)
    if (newExpandedPaths.has(path)) {
      newExpandedPaths.delete(path)
    } else {
      newExpandedPaths.add(path)
    }
    setExpandedPaths(newExpandedPaths)
  }

const renderStructure = (obj: any, path = "", depth = 0) => {
    if (typeof obj !== "object" || obj === null) {
      const matchesSearch =
        searchTerm &&
        (path.toLowerCase().includes(searchTerm.toLowerCase()) ||
          String(obj).toLowerCase().includes(searchTerm.toLowerCase()))

return (
        <div className={`ml-${depth * 4} flex items-center py-1 ${matchesSearch ? "bg-yellow-100" : ""}`} key={path}>
          <FileText className="h-4 w-4 mr-2 text-blue-500" />
          <span className="text-sm">{path.split(".").pop()}</span>
          <span className="text-xs text-gray-500 ml-2">- {obj}</span>
        </div>
      )
    }

const isExpanded = expandedPaths.has(path)
    const matchesSearch = searchTerm && path.toLowerCase().includes(searchTerm.toLowerCase())
    const keys = Object.keys(obj)
    const folderName = path ? path.split("/").pop() : projectName

return (
      <div key={path} className={matchesSearch ? "bg-yellow-100" : ""}>
        <div
          className={`flex items-center cursor-pointer py-1 hover:bg-gray-100 ${depth > 0 ? `ml-${depth * 4}` : ""}`}
          onClick={() => togglePath(path)}
        >
          {isExpanded ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
          <Folder className="h-4 w-4 mr-2 text-yellow-500" />
          <span className="text-sm font-medium">{folderName}</span>
          <span className="text-xs text-gray-500 ml-2">({keys.length} items)</span>
        </div>

{isExpanded && (
          <div className="ml-4 border-l-2 pl-2 border-gray-200">
            {keys.map((key) => {
              const newPath = path ? `${path}/${key}` : key
              return renderStructure(obj[key], newPath, depth + 1)
            })}
          </div>
        )}
      </div>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{projectName} Structure</CardTitle>
        <CardDescription>Explore the project file structure</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <Label htmlFor="search-structure" className="sr-only">
            Search
          </Label>
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="search-structure"
              placeholder="Search in structure..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>

<div className="max-h-[500px] overflow-auto border rounded p-4">{renderStructure(structure)}</div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/table-view.tsx"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Search } from "lucide-react"

interface TableViewProps {
  data: any
}

export function TableView({ data }: TableViewProps) {
  const [searchTerm, setSearchTerm] = useState("")

// Convert JSON to flat array for table display
  const flattenObject = (obj: any, prefix = ""): Record<string, any>[] => {
    let result: Record<string, any>[] = []

if (typeof obj !== "object" || obj === null) {
      return [{ key: prefix, value: String(obj), type: typeof obj }]
    }

for (const key in obj) {
      const newKey = prefix ? `${prefix}.${key}` : key
      if (typeof obj[key] === "object" && obj[key] !== null) {
        result = [...result, ...flattenObject(obj[key], newKey)]
      } else {
        result.push({ key: newKey, value: String(obj[key]), type: typeof obj[key] })
      }
    }

return result
  }

const tableData = flattenObject(data)

// Filter data based on search term
  const filteredData = tableData.filter(
    (item) =>
      item.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.value.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <div className="flex-1">
          <Label htmlFor="table-search" className="sr-only">
            Search
          </Label>
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="table-search"
              placeholder="অনুসন্ধান করুন..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>

<div className="border rounded-md overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[40%]">Key</TableHead>
              <TableHead className="w-[50%]">Value</TableHead>
              <TableHead className="w-[10%]">Type</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredData.length > 0 ? (
              filteredData.map((item, index) => (
                <TableRow
                  key={index}
                  className={
                    searchTerm &&
                    (item.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
                      item.value.toLowerCase().includes(searchTerm.toLowerCase()))
                      ? "bg-yellow-50"
                      : ""
                  }
                >
                  <TableCell className="font-medium">{item.key}</TableCell>
                  <TableCell>{item.value}</TableCell>
                  <TableCell>{item.type}</TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={3} className="text-center py-4">
                  No data found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from "react"

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

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="relative w-full overflow-auto">
      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
      {...props}
    />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
  ),
)
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"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="components/ui/card.tsx"
import * as React from "react"

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

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
[V0_FILE]json:file="public/data/infinity-nexus.json"
{
  "project": {
    "name": "Infinity Nexus",
    "slogan": "Empowering Knowledge, Transforming Futures.",
    "description": "Infinity Nexus is a global-standard data hub, originating in Cox's Bazar, Bangladesh, designed to collect, process, analyze, and secure data for scientific research, climate action, socio-economic progress, and AI-driven knowledge innovation. Built on advanced AI, blockchain security, quantum computing, and next-gen cloud infrastructure, this project will reshape global data accessibility and serve as a master command center for pioneering research in space, sustainability, and future technology."
  },
  "goals": {
    "short_term": [
      "Establish physical infrastructure in Cox's Bazar with high-tech data labs",
      "Develop AI-powered data collection and analytics pipelines",
      "Launch global partnerships with NASA, MIT, OpenAI, UN Climate Programs",
      "Implement Zero Trust Security Model & Blockchain-based Data Protection",
      "Deploy climate change forecasting models using AI & satellite imaging"
    ],
    "mid_term": [
      "Expand to international collaboration hubs in different continents",
      "Introduce AI-powered educational platforms for global research communities",
      "Deploy IoT sensor networks for environmental data tracking",
      "Integrate Quantum Computing for large-scale scientific problem-solving",
      "Secure UN & World Bank funding to scale global environmental initiatives"
    ],
    "long_term": [
      "Establish Infinity Nexus as a recognized scientific and technology institution",
      "Provide space research data to assist global interstellar projects",
      "Expand into autonomous AI-driven decision-making systems for global sustainability",
      "Transform Cox's Bazar into a World-Class Research Hub & Knowledge City",
      "Collaborate on human-centered AI models for ethical tech evolution"
    ]
  },
  "impact": {
    "national": [
      "Establish Bangladesh's first high-tech, AI-driven data research center",
      "Position Bangladesh as a leader in global scientific innovation",
      "Enhance climate change mitigation strategies with real-time environmental analysis",
      "Boost local technological expertise, creating thousands of research jobs"
    ],
    "international": [
      "Develop a universal open-source data model for global research use",
      "Partner with space agencies, top universities, and AI think tanks",
      "Provide critical data for international scientific advancements in AI & sustainability",
      "Influence future global policymaking with AI-driven climate & social analytics"
    ]
  },
  "conclusion": "Infinity Nexus is not just a project—it is a movement that will redefine how the world sees knowledge, data, and scientific evolution. The vision, dedication, and persistence behind this initiative prove that this is not a distant future—it begins NOW."
}
[V0_FILE]json:file="public/data/trusted-ally-coxs-bazar.json"
{
  "name": "trusted-ally-coxs-bazar",
  "version": "1.0.0",
  "description": "A comprehensive microservices-based district management system for Cox's Bazar",
  "private": true,
  "author": {
    "name": "MJ Ahmad",
    "email": "mjahmad2024@outlook.com",
    "url": "https://github.com/MJ-AHMAD"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/MJ-AHMAD/coxs"
  },
  "funding": [
    {
      "type": "github",
      "url": "https://github.com/Sponsors/MJ-AHMAD"
    },
    {
      "type": "kofi",
      "url": "https://ko-fi.com/mjahmad"
    }
  ],
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "test": "jest",
    "test:watch": "jest --watch",
    "prepare": "husky install"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^4.1.0",
    "framer-motion": "^11.0.3",
    "lucide-react": "^0.323.0",
    "next": "^15.1.0",
    "next-themes": "^0.2.1",
    "react": "^19.1.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "^19.1.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.0",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.11.19",
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-config-next": "^15.1.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-tailwindcss": "^3.14.3",
    "husky": "^9.0.11",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^15.2.2",
    "postcss": "^8.4.35",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,css,md}": ["prettier --write"]
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "packageManager": "pnpm@10.9.0",
  "projectStructure": {
    "app": {
      "layout.tsx": "Root layout with metadata and providers",
      "page.tsx": "Home page with project overview",
      "globals.css": "Global styles including Tailwind directives",
      "about": {
        "page.tsx": "About page with project information"
      },
      "administrative": {
        "page.tsx": "Administrative services page",
        "contact-logs": {
          "page.tsx": "Contact logs for administrators"
        },
        "founder": {
          "layout.tsx": "Layout for founder pages",
          "page.tsx": "Founder information page"
        },
        "logs": {
          "page.tsx": "System logs for administrators"
        }
      },
      "ads": {
        "page.tsx": "Advertising opportunities page"
      },
      "archive": {
        "loading.tsx": "Loading state for archive page",
        "page.tsx": "Archive of historical data and documents"
      },
      "arabic": {
        "page.tsx": "Arabic language version of the site"
      },
      "bangla": {
        "page.tsx": "Bangla language version of the site"
      },
      "cli": {
        "page.tsx": "Command Line Interface documentation"
      },
      "climate-hub": {
        "page.tsx": "Climate information and resources"
      },
      "contact": {
        "page.tsx": "Contact form and information"
      },
      "contributing": {
        "page.tsx": "Guidelines for contributing to the project"
      },
      "docs": {
        "page.tsx": "Project documentation"
      },
      "donation": {
        "page.tsx": "Donation options and information"
      },
      "economic-hub": {
        "EconomicHubClientPage.tsx": "Client component for economic hub",
        "loading.tsx": "Loading state for economic hub",
        "page.tsx": "Economic information and resources"
      },
      "education-hub": {
        "page.tsx": "Education information and resources"
      },
      "english": {
        "page.tsx": "English language version of the site"
      },
      "health-hub": {
        "page.tsx": "Health information and resources"
      },
      "infrastructure-hub": {
        "page.tsx": "Infrastructure information and resources"
      },
      "initiatives": {
        "digital-divide": {
          "page.tsx": "Digital divide initiative information"
        }
      },
      "investment": {
        "page.tsx": "Investment opportunities information"
      },
      "license": {
        "page.tsx": "Project license information"
      },
      "marine-resource-hub": {
        "page.tsx": "Marine resources information"
      },
      "mjahmad": {
        "page.tsx": "MJ Ahmad profile page"
      },
      "news": {
        "chief-advisor-initiative": {
          "page.tsx": "Chief advisor initiative news"
        },
        "digital-literacy": {
          "page.tsx": "Digital literacy news"
        },
        "flood-relief": {
          "page.tsx": "Flood relief news"
        },
        "page.tsx": "News overview page"
      },
      "research-hub": {
        "page.tsx": "Research information and resources"
      },
      "rohingya": {
        "page.tsx": "Rohingya refugee response information"
      },
      "sitemap": {
        "page.tsx": "Site navigation structure"
      },
      "social-initiatives": {
        "page.tsx": "Social initiatives information"
      },
      "tourist-hub": {
        "page.tsx": "Tourism information and resources"
      },
      "actions": {
        "contact.ts": "Server action for contact form",
        "log-contact.ts": "Server action for logging contacts",
        "newsletter.ts": "Server action for newsletter subscriptions"
      },
      "api": {
        "contact-logs": {
          "route.ts": "API route for contact logs"
        },
        "logs": {
          "route.ts": "API route for system logs"
        }
      }
    },
    "components": {
      "contact-form.tsx": "Contact form component",
      "enhanced-services-section.tsx": "Enhanced services section component",
      "featured-project.tsx": "Featured project component",
      "footer.tsx": "Footer component with links and information",
      "founder-contact-form.tsx": "Contact form for founder",
      "hero-slideshow.tsx": "Hero slideshow component",
      "home-testimonials.tsx": "Testimonials component for home page",
      "image-carousel.tsx": "Image carousel component",
      "language-selector.tsx": "Language selector component",
      "mobile-nav.tsx": "Mobile navigation component",
      "navbar.tsx": "Navigation bar component",
      "news-updates.tsx": "News updates component",
      "newsletter-subscription.tsx": "Newsletter subscription component",
      "open-source-banner.tsx": "Open source project banner component",
      "package-cards.tsx": "Package cards component",
      "statistics-section.tsx": "Statistics section component",
      "testimonials.tsx": "Testimonials component",
      "vision-projects-section.tsx": "Vision projects section component",
      "ui": {
        "accordion.tsx": "Accordion UI component",
        "alert-dialog.tsx": "Alert dialog UI component",
        "alert.tsx": "Alert UI component",
        "aspect-ratio.tsx": "Aspect ratio UI component",
        "avatar.tsx": "Avatar UI component",
        "badge.tsx": "Badge UI component",
        "button.tsx": "Button UI component",
        "calendar.tsx": "Calendar UI component",
        "card.tsx": "Card UI component",
        "checkbox.tsx": "Checkbox UI component",
        "dialog.tsx": "Dialog UI component",
        "dropdown-menu.tsx": "Dropdown menu UI component",
        "input.tsx": "Input UI component",
        "label.tsx": "Label UI component",
        "navigation-menu.tsx": "Navigation menu UI component",
        "popover.tsx": "Popover UI component",
        "progress.tsx": "Progress UI component",
        "select.tsx": "Select UI component",
        "separator.tsx": "Separator UI component",
        "sheet.tsx": "Sheet UI component",
        "tabs.tsx": "Tabs UI component",
        "toast.tsx": "Toast UI component",
        "toaster.tsx": "Toaster UI component",
        "tooltip.tsx": "Tooltip UI component"
      }
    },
    "hooks": {
      "use-media-query.ts": "Hook for media queries",
      "use-mobile.tsx": "Hook for detecting mobile devices",
      "use-toast.ts": "Hook for toast notifications"
    },
    "lib": {
      "utils.ts": "Utility functions"
    },
    "middleware.ts": "Next.js middleware for request processing",
    "public": {
      "images": {
        "logo.svg": "Project logo",
        "hero-bg.jpg": "Hero background image",
        "sponsors": {
          "github.svg": "GitHub sponsor logo",
          "kofi.svg": "Ko-fi logo"
        }
      },
      "icons": {
        "favicon.ico": "Favicon",
        "icon-192.png": "192x192 icon",
        "icon-512.png": "512x512 icon"
      }
    }
  },
  "microservices": {
    "core": {
      "api-gateway": "API Gateway for routing requests to microservices",
      "service-registry": "Service discovery and registration",
      "config-server": "Centralized configuration management",
      "auth-service": "Authentication and authorization",
      "monitoring": "System monitoring and logging"
    },
    "domain": {
      "tourist-hub": "Tourism management microservice",
      "education-hub": "Education management microservice",
      "economic-hub": "Economic development microservice",
      "climate-hub": "Climate information microservice",
      "social-initiatives": "Social initiatives microservice",
      "health-hub": "Healthcare management microservice",
      "marine-resource-hub": "Marine resources microservice",
      "infrastructure-hub": "Infrastructure management microservice",
      "research-hub": "Research management microservice",
      "water-resources-hub": "Water resources microservice",
      "community-hub": "Community engagement microservice",
      "sustainable-development-hub": "Sustainable development microservice"
    },
    "support": {
      "administrative": "Administrative services",
      "sitemap": "Site navigation structure",
      "cli": "Command-line tools",
      "ads": "Advertisement management",
      "archive": "Data archiving services"
    },
    "i18n": {
      "i18n-service": "Internationalization service with support for English, Bangla, and Arabic"
    }
  },
  "deployment": {
    "docker": "Docker configuration files",
    "kubernetes": "Kubernetes configuration files",
    "ci-cd": "CI/CD pipeline configurations",
    "docker-compose.yml": "Docker Compose configuration"
  },
  "documentation": {
    "docs": "System documentation",
    "README.md": "Project overview",
    "CONTRIBUTING.md": "Contribution guidelines",
    "CODE_OF_CONDUCT.md": "Code of conduct for contributors",
    "SECURITY.md": "Security policy and reporting vulnerabilities",
    "CHANGELOG.md": "Project changelog"
  },
  "openSource": {
    "license": "MIT",
    "contributors": [
      {
        "name": "MJ Ahmad",
        "email": "mjahmad2024@outlook.com",
        "url": "https://github.com/MJ-AHMAD"
      }
    ],
    "sponsorship": {
      "github": "https://github.com/Sponsors/MJ-AHMAD",
      "kofi": "https://ko-fi.com/mjahmad"
    },
    "community": {
      "discussions": "https://github.com/MJ-AHMAD/coxs/discussions",
      "issues": "https://github.com/MJ-AHMAD/coxs/issues",
      "pullRequests": "https://github.com/MJ-AHMAD/coxs/pulls"
    }
  },
  "config": {
    "next": {
      "output": "standalone",
      "experimental": {
        "serverActions": true,
        "serverComponentsExternalPackages": []
      }
    },
    "tailwind": {
      "content": ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
      "theme": {
        "extend": {
          "colors": {
            "primary": {
              "DEFAULT": "hsl(222.2, 47.4%, 11.2%)",
              "foreground": "hsl(210, 40%, 98%)"
            },
            "secondary": {
              "DEFAULT": "hsl(210, 40%, 96.1%)",
              "foreground": "hsl(222.2, 47.4%, 11.2%)"
            },
            "muted": {
              "DEFAULT": "hsl(210, 40%, 96.1%)",
              "foreground": "hsl(215.4, 16.3%, 46.9%)"
            },
            "accent": {
              "DEFAULT": "hsl(210, 40%, 96.1%)",
              "foreground": "hsl(222.2, 47.4%, 11.2%)"
            },
            "destructive": {
              "DEFAULT": "hsl(0, 100%, 50%)",
              "foreground": "hsl(210, 40%, 98%)"
            },
            "border": "hsl(214.3, 31.8%, 91.4%)",
            "input": "hsl(214.3, 31.8%, 91.4%)",
            "ring": "hsl(222.2, 84%, 4.9%)",
            "background": "hsl(0, 0%, 100%)",
            "foreground": "hsl(222.2, 84%, 4.9%)",
            "card": {
              "DEFAULT": "hsl(0, 0%, 100%)",
              "foreground": "hsl(222.2, 84%, 4.9%)"
            },
            "popover": {
              "DEFAULT": "hsl(0, 0%, 100%)",
              "foreground": "hsl(222.2, 84%, 4.9%)"
            }
          },
          "borderRadius": {
            "lg": "var(--radius)",
            "md": "calc(var(--radius) - 2px)",
            "sm": "calc(var(--radius) - 4px)"
          },
          "keyframes": {
            "accordion-down": {
              "from": { "height": "0" },
              "to": { "height": "var(--radix-accordion-content-height)" }
            },
            "accordion-up": {
              "from": { "height": "var(--radix-accordion-content-height)" },
              "to": { "height": "0" }
            }
          },
          "animation": {
            "accordion-down": "accordion-down 0.2s ease-out",
            "accordion-up": "accordion-up 0.2s ease-out"
          }
        }
      },
      "plugins": ["tailwindcss-animate"]
    },
    "eslint": {
      "extends": ["next/core-web-vitals", "prettier", "plugin:tailwindcss/recommended"],
      "plugins": ["tailwindcss"],
      "rules": {
        "react/no-unescaped-entities": "off",
        "@next/next/no-img-element": "off",
        "tailwindcss/no-custom-classname": "off"
      }
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "tabWidth": 2,
      "trailingComma": "es5",
      "printWidth": 100,
      "plugins": ["prettier-plugin-tailwindcss"]
    },
    "typescript": {
      "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
          {
            "name": "next"
          }
        ],
        "paths": {
          "@/*": ["./*"]
        }
      },
      "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
      "exclude": ["node_modules"]
    }
  }
}
[V0_FILE]typescriptreact:file="components/presentation-outline.tsx"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function PresentationOutline() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8 text-center">
        MJ-AHMAD: Transforming Bangladesh Through Education and Innovation
      </h1>

<Tabs defaultValue="structure" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="structure">Presentation Structure</TabsTrigger>
          <TabsTrigger value="design">Design Guidelines</TabsTrigger>
          <TabsTrigger value="tips">Presentation Tips</TabsTrigger>
        </TabsList>

<TabsContent value="structure" className="space-y-6">
          <Card>
            <CardHeader>
              <Badge className="w-fit mb-2">Section 1</Badge>
              <CardTitle>Introduction and Personal Journey</CardTitle>
              <CardDescription>Slides 1-5</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Slide 1: Title Slide</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Title: "Transforming Bangladesh Through Education and Innovation"</li>
                  <li>Subtitle: "A Vision by Md Jafor Ahmad (MJ Ahmad)"</li>
                  <li>Professional photo of MJ Ahmad</li>
                  <li>Date of presentation</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 2: Personal Introduction</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Brief professional bio: "Visionary Leader, Social Worker, and Dedicated Citizen"</li>
                  <li>Photo of MJ Ahmad in a professional setting</li>
                  <li>Key credentials and background</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 3: Personal Journey</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Timeline of key milestones in MJ Ahmad's journey</li>
                  <li>Formative experiences that shaped his vision</li>
                  <li>Brief narrative of what inspired his commitment to education and community development</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 4: Core Values</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>
                    Visual representation of core values: Transparency, Ethics, Accountability, Inclusivity, Innovation,
                    Sustainability
                  </li>
                  <li>Brief explanation of how these values guide all initiatives</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 5: Vision for Bangladesh</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Compelling vision statement</li>
                  <li>Visual representation of the transformation envisioned</li>
                  <li>Key impact areas: Education, Technology, Environment, Community Development, Leadership</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Badge className="w-fit mb-2">Section 2</Badge>
              <CardTitle>Flagship Initiatives</CardTitle>
              <CardDescription>Slides 6-13</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Slide 6: Overview of Initiatives</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Visual map showing the ecosystem of initiatives</li>
                  <li>How the initiatives complement each other</li>
                  <li>Collective impact statement</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slides 7-8: Yunus Inspire</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Inspiration behind the initiative</li>
                  <li>Mission and vision</li>
                  <li>Key features and implementation plan</li>
                  <li>Expected impact with visual metrics</li>
                  <li>Current status and next steps</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slides 9-10: Trusted Ally</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Core concept and purpose</li>
                  <li>Key features and implementation approach</li>
                  <li>Success stories and testimonials</li>
                  <li>Current status and expansion plans</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 11: Transforming Cox's Bazar</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Vision for regional transformation</li>
                  <li>Focus areas and implementation approach</li>
                  <li>Timeline and key milestones</li>
                  <li>Expected outcomes by 2028</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slides 12-13: Infinity Nexus</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Innovative concept and global vision</li>
                  <li>Short, mid, and long-term goals</li>
                  <li>National and international impact</li>
                  <li>Visual representation of the data hub concept</li>
                  <li>Strategic partnerships needed</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Badge className="w-fit mb-2">Section 3</Badge>
              <CardTitle>Educational Resources and Impact</CardTitle>
              <CardDescription>Slides 14-17</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Slide 14: Open Source Learning Resources</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Overview of the educational resources created</li>
                  <li>Philosophy behind open source education</li>
                  <li>Visual showcase of learning paths</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 15: Learning Paths Showcase</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Visual representation of key learning paths</li>
                  <li>Structure and progression from beginner to advanced</li>
                  <li>Real examples of student projects</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 16: Community Projects</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Overview of community initiatives</li>
                  <li>Hackathons and events</li>
                  <li>Student groups and networks</li>
                  <li>Photos from community events</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 17: Educational Impact</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Key metrics: students reached, communities impacted, resources created</li>
                  <li>Success stories with photos</li>
                  <li>Testimonials from students and community members</li>
                  <li>Long-term educational impact vision</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Badge className="w-fit mb-2">Section 4</Badge>
              <CardTitle>Current Challenges and Support Needs</CardTitle>
              <CardDescription>Slides 18-22</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Slide 18: Current Situation</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Transparent overview of current challenges</li>
                  <li>Health challenges faced by MJ Ahmad</li>
                  <li>Impact on initiative progress</li>
                  <li>Transition to support needs</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 19: Support Opportunities</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Overview of different ways to support</li>
                  <li>Financial support for medical treatment</li>
                  <li>Project funding opportunities</li>
                  <li>Partnership and collaboration options</li>
                  <li>Volunteer opportunities</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 20: Funding Needs</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Transparent breakdown of funding needs</li>
                  <li>Medical treatment costs</li>
                  <li>Project implementation budgets</li>
                  <li>Resource development costs</li>
                  <li>Clear explanation of how funds will be used</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 21: Partnership Opportunities</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Types of partnerships sought</li>
                  <li>Benefits for partners</li>
                  <li>Collaboration models</li>
                  <li>Examples of successful partnerships</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 22: Transparency Commitment</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Commitment to transparent fund management</li>
                  <li>Reporting and accountability mechanisms</li>
                  <li>How progress and impact will be communicated</li>
                  <li>Governance structure for initiatives</li>
                </ul>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Badge className="w-fit mb-2">Section 5</Badge>
              <CardTitle>Vision for the Future and Call to Action</CardTitle>
              <CardDescription>Slides 23-25</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Slide 23: 5-Year Vision</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Visual roadmap of the 5-year vision</li>
                  <li>Key milestones and expected outcomes</li>
                  <li>Transformative impact on Bangladesh</li>
                  <li>How support will enable this vision</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 24: The Opportunity</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>The unique opportunity for supporters to be part of this transformation</li>
                  <li>Long-term impact of support</li>
                  <li>Legacy potential for supporters</li>
                  <li>Emotional connection to the vision</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide 25: Call to Action</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Clear, specific calls to action</li>
                  <li>Next steps for different types of support</li>
                  <li>Contact information and follow-up process</li>
                  <li>Thank you message</li>
                  <li>Powerful closing quote or statement</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="design" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Design Guidelines</CardTitle>
              <CardDescription>Recommendations for creating a visually compelling presentation</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Color Scheme</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Primary colors: Deep blue and green (representing trust, growth, and sustainability)</li>
                  <li>Secondary colors: Accent with orange or gold (representing innovation and opportunity)</li>
                  <li>Use white space effectively for a clean, professional look</li>
                  <li>Ensure sufficient contrast for readability</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Typography</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Use a clean, professional sans-serif font for headings (e.g., Montserrat, Roboto)</li>
                  <li>Use a highly readable font for body text (e.g., Open Sans, Lato)</li>
                  <li>
                    Maintain consistent font sizes: 28-32pt for titles, 20-24pt for subtitles, 18-20pt for body text
                  </li>
                  <li>Use bold for emphasis rather than italics or underlining</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Visual Elements</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Use high-quality, authentic photos of MJ Ahmad, projects, and beneficiaries</li>
                  <li>Include infographics for data and statistics</li>
                  <li>Use icons consistently to represent key concepts</li>
                  <li>Include maps to show geographical impact</li>
                  <li>Use before/after visuals to show transformation</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Slide Layout</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Maintain consistent layout with clear visual hierarchy</li>
                  <li>Limit text to 5-7 bullet points per slide</li>
                  <li>Use the 40-60 rule: 40% text, 60% visuals</li>
                  <li>Include slide numbers for easy reference</li>
                  <li>Use section dividers to clearly separate content sections</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Branding Elements</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Create a simple logo or visual identifier for the presentation</li>
                  <li>Include consistent footer with contact information</li>
                  <li>Use consistent visual style across all initiative descriptions</li>
                  <li>Consider a subtle watermark or background element for cohesion</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="tips" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Presentation Tips</CardTitle>
              <CardDescription>Recommendations for delivering an effective presentation</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Preparation</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Customize the presentation for each specific audience</li>
                  <li>Research potential supporters beforehand to address their specific interests</li>
                  <li>Prepare talking points for each slide, but don't read directly from slides</li>
                  <li>Practice the presentation multiple times to ensure smooth delivery</li>
                  <li>Prepare answers for potential questions</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Delivery</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Begin with a powerful personal story that connects to your vision</li>
                  <li>Speak with authentic passion about your initiatives</li>
                  <li>Use a conversational tone rather than a formal lecture style</li>
                  <li>Make eye contact with audience members</li>
                  <li>Pace yourself - aim for 1-2 minutes per slide</li>
                  <li>Be transparent about challenges while maintaining optimism about solutions</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Engagement</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Consider including a brief video testimonial if possible</li>
                  <li>Have physical samples of educational materials if relevant</li>
                  <li>Invite questions throughout rather than only at the end</li>
                  <li>Share brief, powerful stories of individual impact</li>
                  <li>Connect your work to the interests and values of your audience</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Follow-up</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Prepare handouts with key information and contact details</li>
                  <li>Have a clear process for next steps after the presentation</li>
                  <li>Send a thank-you email with additional information within 24 hours</li>
                  <li>Offer to connect interested supporters with beneficiaries or partners</li>
                  <li>Create a simple one-page summary document for easy sharing</li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Technical Considerations</h3>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Save the presentation in multiple formats (PPTX, PDF)</li>
                  <li>Have a backup copy on a USB drive and in cloud storage</li>
                  <li>Test all equipment before the presentation</li>
                  <li>Consider having a printed version as backup</li>
                  <li>If presenting virtually, ensure stable internet connection and proper lighting</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/slide-examples.tsx"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function SlideExamples() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8 text-center">Key Slide Examples</h1>

<Tabs defaultValue="title" className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="title">Title</TabsTrigger>
          <TabsTrigger value="vision">Vision</TabsTrigger>
          <TabsTrigger value="initiatives">Initiatives</TabsTrigger>
          <TabsTrigger value="support">Support</TabsTrigger>
          <TabsTrigger value="action">Call to Action</TabsTrigger>
        </TabsList>

<TabsContent value="title">
          <Card className="border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-white">
            <CardContent className="pt-10 pb-16 px-8">
              <div className="text-center space-y-8">
                <h1 className="text-4xl font-bold text-blue-800">
                  Transforming Bangladesh Through Education and Innovation
                </h1>
                <h2 className="text-2xl text-green-700">A Vision by Md Jafor Ahmad (MJ Ahmad)</h2>

<div className="w-32 h-32 mx-auto bg-gray-200 rounded-full flex items-center justify-center text-gray-500">
                  [Photo]
                </div>

<div className="absolute bottom-4 right-4 text-xs text-gray-400">
                  "Transparent, Ethical, and Accountable"
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-4 text-sm text-gray-600">
            <p>
              <strong>Title Slide Notes:</strong>
            </p>
            <ul className="list-disc pl-6">
              <li>Use a professional photo that conveys approachability and vision</li>
              <li>The subtitle establishes your identity and ownership of the vision</li>
              <li>The gradient background creates visual interest while maintaining professionalism</li>
              <li>The tagline "Transparent, Ethical, and Accountable" subtly reinforces core values</li>
              <li>Keep this slide clean and impactful - it sets the tone for the entire presentation</li>
            </ul>
          </div>
        </TabsContent>

<TabsContent value="vision">
          <Card className="border-2 border-green-200 bg-white">
            <CardContent className="pt-6 pb-8 px-8">
              <div className="space-y-6">
                <h1 className="text-2xl font-bold text-green-800 border-b-2 border-green-200 pb-2">
                  Vision for Bangladesh
                </h1>

<div className="flex gap-6">
                  <div className="w-1/2">
                    <p className="text-lg font-medium text-blue-700 mb-4">
                      "To empower Bangladeshi communities through education, technology, and sustainable development
                      initiatives that create lasting positive change and opportunities for future generations."
                    </p>

<div className="mt-6 space-y-2">
                      <p className="font-medium">Long-term Goals:</p>
                      <ul className="list-disc pl-6 text-sm">
                        <li>Establish Bangladesh as a hub for technological innovation</li>
                        <li>Create sustainable educational models</li>
                        <li>Build a network of empowered communities</li>
                        <li>Foster ethical leadership and transparent governance</li>
                        <li>Develop technology solutions for local challenges</li>
                      </ul>
                    </div>
                  </div>

<div className="w-1/2 border-l-2 border-green-100 pl-6">
                    <p className="font-medium mb-3">Impact Areas:</p>

<div className="grid grid-cols-2 gap-3">
                      <div className="bg-blue-50 p-3 rounded-lg">
                        <p className="font-medium text-blue-700">Education</p>
                        <p className="text-xs">Transforming access and quality through technology</p>
                      </div>

<div className="bg-green-50 p-3 rounded-lg">
                        <p className="font-medium text-green-700">Technology</p>
                        <p className="text-xs">Building capacity and digital literacy</p>
                      </div>

<div className="bg-amber-50 p-3 rounded-lg">
                        <p className="font-medium text-amber-700">Environment</p>
                        <p className="text-xs">Promoting sustainability and climate resilience</p>
                      </div>

<div className="bg-purple-50 p-3 rounded-lg">
                        <p className="font-medium text-purple-700">Community</p>
                        <p className="text-xs">Empowering community-led development</p>
                      </div>
                    </div>

<div className="mt-4 bg-gray-100 p-3 rounded-lg text-center">
                      [Visual representation of transformation]
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-4 text-sm text-gray-600">
            <p>
              <strong>Vision Slide Notes:</strong>
            </p>
            <ul className="list-disc pl-6">
              <li>The vision statement is highlighted to ensure it stands out</li>
              <li>Impact areas are visually organized with color coding for easy comprehension</li>
              <li>The layout balances text and visual elements</li>
              <li>Long-term goals are concisely presented as bullet points</li>
              <li>When presenting, elaborate on how these elements connect to create a cohesive vision</li>
            </ul>
          </div>
        </TabsContent>

<TabsContent value="initiatives">
          <Card className="border-2 border-blue-200 bg-white">
            <CardContent className="pt-6 pb-8 px-8">
              <div className="space-y-6">
                <h1 className="text-2xl font-bold text-blue-800 border-b-2 border-blue-200 pb-2">
                  Yunus Inspire: Educational Initiative
                </h1>

<div className="grid grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <p className="font-medium text-green-700">Inspiration:</p>
                      <p className="text-sm">Inspired by the legacy of Nobel Laureate Professor Muhammad Yunus</p>
                    </div>

<div>
                      <p className="font-medium text-green-700">Mission:</p>
                      <p className="text-sm">
                        To provide free, accessible, and innovative resources in technology and programming, ensuring
                        every learner can unlock their potential.
                      </p>
                    </div>

<div>
                      <p className="font-medium text-green-700">Key Features:</p>
                      <ul className="list-disc pl-6 text-sm">
                        <li>Interactive courses in HTML, CSS, Python, GitHub</li>
                        <li>Interactive Code Editors</li>
                        <li>Downloadable Study Guides</li>
                        <li>Community Forums and Mentorship</li>
                      </ul>
                    </div>
                  </div>

<div className="space-y-4">
                    <div className="bg-gray-100 p-3 rounded-lg h-32 flex items-center justify-center text-gray-500">
                      [Visual of platform interface]
                    </div>

<div>
                      <p className="font-medium text-blue-700">Implementation Status:</p>
                      <div className="bg-blue-50 p-3 rounded-lg">
                        <p className="text-sm">In development phase, seeking funding and partnerships</p>
                        <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2">
                          <div className="bg-blue-600 h-2.5 rounded-full w-[35%]"></div>
                        </div>
                        <div className="flex justify-between text-xs mt-1">
                          <span>Planning</span>
                          <span>Development</span>
                          <span>Launch</span>
                        </div>
                      </div>
                    </div>

<div>
                      <p className="font-medium text-blue-700">Expected Impact:</p>
                      <ul className="list-disc pl-6 text-sm">
                        <li>Educate thousands of students nationwide</li>
                        <li>Develop technical and leadership skills</li>
                        <li>Create a network of innovators</li>
                        <li>Bridge the digital divide in Bangladesh</li>
                      </ul>
                    </div>
                  </div>
                </div>

<div className="bg-blue-50 p-3 rounded-lg mt-2">
                  <p className="font-medium text-blue-700 text-sm">Budget Estimate: $22,000</p>
                  <div className="grid grid-cols-5 gap-2 mt-2">
                    <div className="bg-blue-100 p-1 rounded text-xs text-center">
                      Development
                      <br />
                      $5,000
                    </div>
                    <div className="bg-green-100 p-1 rounded text-xs text-center">
                      Content
                      <br />
                      $2,000
                    </div>
                    <div className="bg-amber-100 p-1 rounded text-xs text-center">
                      Team
                      <br />
                      $10,000
                    </div>
                    <div className="bg-purple-100 p-1 rounded text-xs text-center">
                      Marketing
                      <br />
                      $3,000
                    </div>
                    <div className="bg-gray-100 p-1 rounded text-xs text-center">
                      Other
                      <br />
                      $2,000
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-4 text-sm text-gray-600">
            <p>
              <strong>Initiative Slide Notes:</strong>
            </p>
            <ul className="list-disc pl-6">
              <li>Each initiative should have 1-2 dedicated slides with consistent structure</li>
              <li>Visual elements help illustrate the concept and current status</li>
              <li>Budget information is presented transparently but concisely</li>
              <li>Progress indicators show current status and next steps</li>
              <li>When presenting, emphasize how this initiative connects to the overall vision</li>
            </ul>
          </div>
        </TabsContent>

<TabsContent value="support">
          <Card className="border-2 border-amber-200 bg-white">
            <CardContent className="pt-6 pb-8 px-8">
              <div className="space-y-6">
                <h1 className="text-2xl font-bold text-amber-800 border-b-2 border-amber-200 pb-2">
                  Support Opportunities
                </h1>

<div className="grid grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="bg-amber-50 p-4 rounded-lg">
                      <p className="font-medium text-amber-700 mb-2">Current Situation</p>
                      <p className="text-sm">
                        MJ Ahmad is facing health challenges that require medical treatment while continuing to develop
                        educational initiatives that benefit thousands of students across Bangladesh.
                      </p>
                    </div>

<div>
                      <p className="font-medium text-amber-700">Support Needs:</p>
                      <ul className="list-disc pl-6 text-sm">
                        <li>Medical treatment funding</li>
                        <li>Project implementation resources</li>
                        <li>Technical expertise and partnerships</li>
                        <li>Content development support</li>
                        <li>Community outreach assistance</li>
                      </ul>
                    </div>

<div className="bg-blue-50 p-3 rounded-lg">
                      <p className="font-medium text-blue-700 mb-1">Transparency Commitment</p>
                      <p className="text-xs">
                        All contributions are managed with complete transparency. Regular updates on fund utilization
                        and project progress are provided to all supporters.
                      </p>
                    </div>
                  </div>

<div className="space-y-4">
                    <p className="font-medium text-amber-700">Ways to Support:</p>

<div className="grid grid-cols-2 gap-3">
                      <div className="bg-green-50 p-3 rounded-lg">
                        <p className="font-medium text-green-700">Financial Support</p>
                        <ul className="list-disc pl-6 text-xs">
                          <li>One-time donations</li>
                          <li>Monthly recurring support</li>
                          <li>Specific project funding</li>
                          <li>Medical support fund</li>
                        </ul>
                      </div>

<div className="bg-blue-50 p-3 rounded-lg">
                        <p className="font-medium text-blue-700">Partnerships</p>
                        <ul className="list-disc pl-6 text-xs">
                          <li>Educational institutions</li>
                          <li>Corporate sponsorships</li>
                          <li>NGO collaborations</li>
                          <li>Technology providers</li>
                        </ul>
                      </div>

<div className="bg-purple-50 p-3 rounded-lg">
                        <p className="font-medium text-purple-700">Volunteer Support</p>
                        <ul className="list-disc pl-6 text-xs">
                          <li>Technical mentors</li>
                          <li>Content creators</li>
                          <li>Community organizers</li>
                          <li>Translation assistance</li>
                        </ul>
                      </div>

<div className="bg-amber-50 p-3 rounded-lg">
                        <p className="font-medium text-amber-700">Resource Sharing</p>
                        <ul className="list-disc pl-6 text-xs">
                          <li>Educational materials</li>
                          <li>Technology access</li>
                          <li>Venue space</li>
                          <li>Professional services</li>
                        </ul>
                      </div>
                    </div>

<div className="bg-gray-50 p-3 rounded-lg">
                      <p className="font-medium text-gray-700 mb-1">Impact of Your Support</p>
                      <div className="flex justify-between text-xs text-center">
                        <div>
                          <div className="font-bold text-blue-700 text-lg">5,000+</div>
                          <div>Students Reached</div>
                        </div>
                        <div>
                          <div className="font-bold text-green-700 text-lg">12</div>
                          <div>Communities Impacted</div>
                        </div>
                        <div>
                          <div className="font-bold text-amber-700 text-lg">250+</div>
                          <div>Resources Created</div>
                        </div>
                        <div>
                          <div className="font-bold text-purple-700 text-lg">45</div>
                          <div>Volunteer Mentors</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-4 text-sm text-gray-600">
            <p>
              <strong>Support Slide Notes:</strong>
            </p>
            <ul className="list-disc pl-6">
              <li>Present the current situation honestly but with dignity</li>
              <li>Organize support options clearly with visual distinction</li>
              <li>Include impact metrics to show the value of support</li>
              <li>Emphasize transparency and accountability</li>
              <li>When presenting, be direct about needs while maintaining a positive focus on impact</li>
            </ul>
          </div>
        </TabsContent>

<TabsContent value="action">
          <Card className="border-2 border-green-200 bg-gradient-to-br from-blue-50 to-white">
            <CardContent className="pt-10 pb-16 px-8">
              <div className="text-center space-y-8">
                <h1 className="text-3xl font-bold text-blue-800">Join Us in Transforming Bangladesh</h1>

<p className="text-lg text-green-700 max-w-2xl mx-auto">
                  "Your support today will help create a future where every Bangladeshi student has access to quality
                  education, technology skills, and opportunities to thrive."
                </p>

<div className="grid grid-cols-3 gap-6 mt-8">
                  <div className="bg-blue-50 p-4 rounded-lg text-left">
                    <p className="font-bold text-blue-700 mb-2">Support Financially</p>
                    <p className="text-sm mb-3">Contribute to medical treatment and project implementation.</p>
                    <p className="text-sm font-medium">Next Steps:</p>
                    <ul className="list-disc pl-6 text-xs">
                      <li>One-time or recurring donations</li>
                      <li>Project-specific funding</li>
                      <li>Medical support fund</li>
                    </ul>
                  </div>

<div className="bg-green-50 p-4 rounded-lg text-left">
                    <p className="font-bold text-green-700 mb-2">Partner With Us</p>
                    <p className="text-sm mb-3">Collaborate on educational initiatives and community development.</p>
                    <p className="text-sm font-medium">Next Steps:</p>
                    <ul className="list-disc pl-6 text-xs">
                      <li>Schedule a follow-up meeting</li>
                      <li>Explore partnership models</li>
                      <li>Identify shared objectives</li>
                    </ul>
                  </div>

<div className="bg-amber-50 p-4 rounded-lg text-left">
                    <p className="font-bold text-amber-700 mb-2">Volunteer Your Skills</p>
                    <p className="text-sm mb-3">Contribute your expertise to help our initiatives succeed.</p>
                    <p className="text-sm font-medium">Next Steps:</p>
                    <ul className="list-disc pl-6 text-xs">
                      <li>Complete volunteer interest form</li>
                      <li>Join our mentor network</li>
                      <li>Participate in upcoming events</li>
                    </ul>
                  </div>
                </div>

<div className="mt-8 text-center">
                  <p className="font-medium text-blue-700 mb-2">Contact Information</p>
                  <p className="text-sm">Email: mjahmad2024@outlook.com | Phone: +8801336221217</p>
                  <p className="text-sm">LinkedIn: linkedin.com/in/jafor-ahmad | GitHub: github.com/MJ-AHMAD</p>
                </div>

<div className="mt-6 text-center">
                  <p className="text-sm italic text-gray-600">
                    "The future belongs to those who believe in the beauty of their dreams." - Eleanor Roosevelt
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="mt-4 text-sm text-gray-600">
            <p>
              <strong>Call to Action Slide Notes:</strong>
            </p>
            <ul className="list-disc pl-6">
              <li>Make the call to action clear, specific, and actionable</li>
              <li>Provide multiple ways to engage based on different supporter capacities</li>
              <li>Include all necessary contact information</li>
              <li>End with an inspirational quote that reinforces the vision</li>
              <li>When presenting, express sincere gratitude and enthusiasm for potential collaboration</li>
            </ul>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/presentation-resources.tsx"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function PresentationResources() {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8 text-center">Supporting Resources</h1>

<Tabs defaultValue="materials" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="materials">Supplementary Materials</TabsTrigger>
          <TabsTrigger value="software">Recommended Software</TabsTrigger>
          <TabsTrigger value="templates">Templates & Resources</TabsTrigger>
        </TabsList>

<TabsContent value="materials" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Supplementary Materials</CardTitle>
              <CardDescription>Additional documents to support your presentation</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">One-Page Executive Summary</h3>
                <p className="text-muted-foreground mb-2">Create a concise one-page document that summarizes:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Your vision and mission</li>
                  <li>Key initiatives and their current status</li>
                  <li>Support needs and opportunities</li>
                  <li>Expected impact</li>
                  <li>Contact information</li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  This can be handed out at the beginning or end of your presentation.
                </p>
              </div>

<div>
                <h3 className="font-medium text-lg">Detailed Initiative Profiles</h3>
                <p className="text-muted-foreground mb-2">Create 1-2 page profiles for each major initiative:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Comprehensive description and background</li>
                  <li>Detailed implementation plan</li>
                  <li>Budget breakdown</li>
                  <li>Timeline with milestones</li>
                  <li>Success metrics and evaluation plan</li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  These can be provided as follow-up materials for interested supporters.
                </p>
              </div>

<div>
                <h3 className="font-medium text-lg">Support Options Guide</h3>
                <p className="text-muted-foreground mb-2">Create a detailed guide outlining ways to support:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Donation options with specific impact descriptions</li>
                  <li>Partnership models with benefits and requirements</li>
                  <li>Volunteer opportunities with time commitments</li>
                  <li>In-kind support options</li>
                  <li>Process for each type of support</li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  This helps supporters understand exactly how they can help and what impact their support will have.
                </p>
              </div>

<div>
                <h3 className="font-medium text-lg">Testimonial Collection</h3>
                <p className="text-muted-foreground mb-2">Compile testimonials from:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>Students who have benefited from your resources</li>
                  <li>Community members impacted by your initiatives</li>
                  <li>Partners who have collaborated with you</li>
                  <li>Educators who have used your materials</li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  Include photos when possible to create a personal connection.
                </p>
              </div>

<div>
                <h3 className="font-medium text-lg">Medical Situation Summary</h3>
                <p className="text-muted-foreground mb-2">
                  Create a brief, dignified summary of your health situation:
                </p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>General nature of health challenges</li>
                  <li>Treatment needs and timeline</li>
                  <li>Impact on work and initiatives</li>
                  <li>How support will help both recovery and continued work</li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  This should be handled sensitively and only shared when appropriate.
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="software" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Recommended Software</CardTitle>
              <CardDescription>Tools to create and deliver your presentation</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Presentation Software</h3>
                <div className="grid grid-cols-3 gap-4 mt-2">
                  <div className="border rounded-lg p-3">
                    <p className="font-medium">Microsoft PowerPoint</p>
                    <p className="text-xs text-muted-foreground">Industry standard with powerful features</p>
                    <Badge className="mt-2 bg-blue-100 text-blue-800 hover:bg-blue-200">Paid</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Google Slides</p>
                    <p className="text-xs text-muted-foreground">Cloud-based, easy collaboration</p>
                    <Badge className="mt-2 bg-green-100 text-green-800 hover:bg-green-200">Free</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Canva</p>
                    <p className="text-xs text-muted-foreground">Design-focused with templates</p>
                    <Badge className="mt-2 bg-purple-100 text-purple-800 hover:bg-purple-200">Freemium</Badge>
                  </div>
                </div>
              </div>

<div>
                <h3 className="font-medium text-lg">Design Resources</h3>
                <div className="grid grid-cols-3 gap-4 mt-2">
                  <div className="border rounded-lg p-3">
                    <p className="font-medium">Unsplash</p>
                    <p className="text-xs text-muted-foreground">High-quality free stock photos</p>
                    <Badge className="mt-2 bg-green-100 text-green-800 hover:bg-green-200">Free</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Flaticon</p>
                    <p className="text-xs text-muted-foreground">Icons and vector graphics</p>
                    <Badge className="mt-2 bg-purple-100 text-purple-800 hover:bg-purple-200">Freemium</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Pexels</p>
                    <p className="text-xs text-muted-foreground">Free stock photos and videos</p>
                    <Badge className="mt-2 bg-green-100 text-green-800 hover:bg-green-200">Free</Badge>
                  </div>
                </div>
              </div>

<div>
                <h3 className="font-medium text-lg">Data Visualization</h3>
                <div className="grid grid-cols-3 gap-4 mt-2">
                  <div className="border rounded-lg p-3">
                    <p className="font-medium">Infogram</p>
                    <p className="text-xs text-muted-foreground">Interactive charts and infographics</p>
                    <Badge className="mt-2 bg-purple-100 text-purple-800 hover:bg-purple-200">Freemium</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Tableau Public</p>
                    <p className="text-xs text-muted-foreground">Powerful data visualization</p>
                    <Badge className="mt-2 bg-green-100 text-green-800 hover:bg-green-200">Free</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Visme</p>
                    <p className="text-xs text-muted-foreground">Visual content creation platform</p>
                    <Badge className="mt-2 bg-purple-100 text-purple-800 hover:bg-purple-200">Freemium</Badge>
                  </div>
                </div>
              </div>

<div>
                <h3 className="font-medium text-lg">PDF Creation and Management</h3>
                <div className="grid grid-cols-3 gap-4 mt-2">
                  <div className="border rounded-lg p-3">
                    <p className="font-medium">Adobe Acrobat</p>
                    <p className="text-xs text-muted-foreground">Professional PDF creation and editing</p>
                    <Badge className="mt-2 bg-blue-100 text-blue-800 hover:bg-blue-200">Paid</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Smallpdf</p>
                    <p className="text-xs text-muted-foreground">Online PDF tools</p>
                    <Badge className="mt-2 bg-purple-100 text-purple-800 hover:bg-purple-200">Freemium</Badge>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">PDF Escape</p>
                    <p className="text-xs text-muted-foreground">Free online PDF editor</p>
                    <Badge className="mt-2 bg-green-100 text-green-800 hover:bg-green-200">Free</Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="templates" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Templates & Resources</CardTitle>
              <CardDescription>Ready-to-use templates and helpful resources</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-medium text-lg">Presentation Templates</h3>
                <p className="text-muted-foreground mb-2">Free and premium templates to use as starting points:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>
                    <a
                      href="https://slidesgo.com/theme/non-profit-organization-pitch-deck"
                      className="text-blue-600 hover:underline"
                    >
                      Non-Profit Organization Pitch Deck (SlidesGo)
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://www.canva.com/presentations/templates/nonprofit/"
                      className="text-blue-600 hover:underline"
                    >
                      Canva Non-Profit Templates
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://www.slideteam.net/powerpoint-presentation-slides/non-profit-organization-ppt-templates.html"
                      className="text-blue-600 hover:underline"
                    >
                      SlideTeam Non-Profit Templates
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://www.microsoft.com/en-us/microsoft-365/templates/non-profit"
                      className="text-blue-600 hover:underline"
                    >
                      Microsoft Office Non-Profit Templates
                    </a>
                  </li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Color Scheme Resources</h3>
                <p className="text-muted-foreground mb-2">Tools to create professional color schemes:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>
                    <a href="https://coolors.co/" className="text-blue-600 hover:underline">
                      Coolors - Color Scheme Generator
                    </a>
                  </li>
                  <li>
                    <a href="https://color.adobe.com/create/color-wheel" className="text-blue-600 hover:underline">
                      Adobe Color Wheel
                    </a>
                  </li>
                  <li>
                    <a href="https://colorhunt.co/" className="text-blue-600 hover:underline">
                      Color Hunt - Color Palettes
                    </a>
                  </li>
                </ul>
                <p className="text-sm text-blue-600 mt-2">
                  Recommended colors for your presentation: Deep blues (#1A365D, #2A4365), Greens (#276749, #38A169),
                  Accent orange (#DD6B20)
                </p>
              </div>

<div>
                <h3 className="font-medium text-lg">Font Recommendations</h3>
                <p className="text-muted-foreground mb-2">Professional fonts that work well for presentations:</p>
                <div className="grid grid-cols-2 gap-4 mt-2">
                  <div className="border rounded-lg p-3">
                    <p className="font-medium">Headings</p>
                    <ul className="list-disc pl-6 text-xs">
                      <li>Montserrat</li>
                      <li>Roboto</li>
                      <li>Open Sans</li>
                      <li>Raleway</li>
                      <li>Poppins</li>
                    </ul>
                  </div>

<div className="border rounded-lg p-3">
                    <p className="font-medium">Body Text</p>
                    <ul className="list-disc pl-6 text-xs">
                      <li>Lato</li>
                      <li>Source Sans Pro</li>
                      <li>Roboto</li>
                      <li>Open Sans</li>
                      <li>Nunito</li>
                    </ul>
                  </div>
                </div>
                <p className="text-sm text-blue-600 mt-2">All these fonts are available on Google Fonts for free.</p>
              </div>

<div>
                <h3 className="font-medium text-lg">Icon Resources</h3>
                <p className="text-muted-foreground mb-2">Free icon libraries to enhance your presentation:</p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>
                    <a href="https://www.flaticon.com/" className="text-blue-600 hover:underline">
                      Flaticon
                    </a>
                  </li>
                  <li>
                    <a href="https://icons8.com/" className="text-blue-600 hover:underline">
                      Icons8
                    </a>
                  </li>
                  <li>
                    <a href="https://thenounproject.com/" className="text-blue-600 hover:underline">
                      The Noun Project
                    </a>
                  </li>
                  <li>
                    <a href="https://fontawesome.com/" className="text-blue-600 hover:underline">
                      Font Awesome
                    </a>
                  </li>
                </ul>
              </div>

<div>
                <h3 className="font-medium text-lg">Pitch Deck Guides</h3>
                <p className="text-muted-foreground mb-2">
                  Helpful resources for creating effective pitch presentations:
                </p>
                <ul className="list-disc pl-6 text-muted-foreground">
                  <li>
                    <a
                      href="https://www.ycombinator.com/library/4T-how-to-design-a-better-pitch-deck"
                      className="text-blue-600 hover:underline"
                    >
                      Y Combinator: How to Design a Better Pitch Deck
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://www.techstars.com/the-line/advice/how-to-create-a-solid-pitch-deck-for-investors"
                      className="text-blue-600 hover:underline"
                    >
                      Techstars: How to Create a Solid Pitch Deck
                    </a>
                  </li>
                  <li>
                    <a
                      href="https://www.forbes.com/sites/allbusiness/2019/11/05/investor-pitch-deck-guide/"
                      className="text-blue-600 hover:underline"
                    >
                      Forbes: Guide to Creating a Pitch Deck
                    </a>
                  </li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]png:file="public/programming-course.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/programming-course-JsS4bhbmR1DjdIxIzE9uL5QZNE6NWA.png"
[V0_FILE]png:file="public/web-development-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/web-development-concept-xSP2DwmRyW6rQ43WHwTDPgg14pYVid.png"
[V0_FILE]png:file="public/mobile-app-development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-development-9ILIRrDEqOBpmth90Sm38e0PD6SiwR.png"
[V0_FILE]png:file="public/leadership-book.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leadership-book-azEwcdjx76IqMpqdF0riA9Q8gY9AI5.png"
[V0_FILE]png:file="public/premium-membership.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/student-membership.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/student-membership-URXxSn5nCwO2h3bJz0pNVmuRKcrfGx.png"
[V0_FILE]png:file="public/inspirational-tshirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inspirational-tshirt-kzyda2wlXKtYKXtrI48wUguKxcSOX0.png"
[V0_FILE]png:file="public/inspirational-mug.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inspirational-mug-Frvk0HwuO29xjuoeTzWJVBiRIdPdCp.png"
[V0_FILE]png:file="public/notebook-set.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-set-fTUoA8psyBWDQmHqxfy8RUGXbw7RIP.png"
[V0_FILE]typescriptreact:file="app/products/page.tsx"
import type { Metadata } from "next"
import Link from "next/link"
import { ChevronRight, ShoppingBag, Coffee, Users, Package, Briefcase, MapPin, Heart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import ProductHero from "@/components/products/product-hero"
import FeaturedProducts from "@/components/products/featured-products"
import TestimonialSection from "@/components/products/testimonial-section"
import SupportBanner from "@/components/products/support-banner"
import TourismSection from "@/components/products/tourism-section"
import MentalHealthTips from "@/components/products/mental-health-tips"

export const metadata: Metadata = {
  title: "Products & Services | MJ-AHMAD",
  description: "Support our mission of free education through merchandise, memberships, and services.",
}

export default function ProductsPage() {
  return (
    <main className="min-h-screen">
      <ProductHero />

<div className="container mx-auto px-4 py-12">
        <div className="flex items-center gap-2 mb-8">
          <Link href="/" className="text-muted-foreground hover:text-primary text-sm">
            Home
          </Link>
          <ChevronRight className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm font-medium">Products & Services</span>
        </div>

<div className="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-12">
          <h2 className="text-xl font-bold text-blue-800 mb-2">Our Education Philosophy</h2>
          <p className="text-blue-700">
            We believe education is a fundamental right for every individual. All our educational resources are
            completely free. Your support through merchandise purchases, memberships, and services helps us continue our
            mission of providing free education to everyone.
          </p>
        </div>

<section className="mt-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Support Our Mission</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Every purchase helps us provide free education to students across Bangladesh. Browse our merchandise,
              memberships, and services.
            </p>
          </div>

<Tabs defaultValue="merchandise" className="w-full">
            <TabsList className="grid w-full grid-cols-2 md:grid-cols-5 mb-8">
              <TabsTrigger value="merchandise" className="flex items-center gap-2">
                <Package className="h-4 w-4" />
                <span>Merchandise</span>
              </TabsTrigger>
              <TabsTrigger value="memberships" className="flex items-center gap-2">
                <Users className="h-4 w-4" />
                <span>Memberships</span>
              </TabsTrigger>
              <TabsTrigger value="business" className="flex items-center gap-2">
                <Briefcase className="h-4 w-4" />
                <span>Business Services</span>
              </TabsTrigger>
              <TabsTrigger value="tourism" className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                <span>Cox's Bazar Tours</span>
              </TabsTrigger>
              <TabsTrigger value="support" className="flex items-center gap-2">
                <Coffee className="h-4 w-4" />
                <span>Support Us</span>
              </TabsTrigger>
            </TabsList>

<TabsContent value="support" className="space-y-8">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card className="overflow-hidden flex flex-col h-full transition-all hover:shadow-md">
                  <div className="bg-amber-50 p-8 flex justify-center">
                    <Coffee className="h-24 w-24 text-amber-500" />
                  </div>
                  <CardHeader>
                    <CardTitle>Buy Me a Coffee</CardTitle>
                    <CardDescription>Support my work with a one-time donation</CardDescription>
                  </CardHeader>
                  <CardContent className="flex-grow">
                    <p className="text-muted-foreground mb-4">
                      Your support helps me continue creating free educational resources for students across Bangladesh.
                    </p>
                    <div className="flex gap-2 flex-wrap">
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $5
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $10
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $25
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $50
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        Custom
                      </Badge>
                    </div>
                  </CardContent>
                  <CardFooter className="border-t bg-muted/50 pt-4">
                    <Button className="w-full">
                      <Coffee className="h-4 w-4 mr-2" />
                      Buy Me a Coffee
                    </Button>
                  </CardFooter>
                </Card>

<Card className="overflow-hidden flex flex-col h-full transition-all hover:shadow-md">
                  <div className="bg-gray-50 p-8 flex justify-center">
                    <svg className="h-24 w-24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5807 20.2772 21.0497 21.7437 19.0074C23.2101 16.965 23.9993 14.5143 24 12C24 5.37 18.63 0 12 0Z"
                        fill="#181717"
                      />
                    </svg>
                  </div>
                  <CardHeader>
                    <CardTitle>GitHub Sponsor</CardTitle>
                    <CardDescription>Become a monthly sponsor on GitHub</CardDescription>
                  </CardHeader>
                  <CardContent className="flex-grow">
                    <p className="text-muted-foreground mb-4">
                      Support my open-source educational projects with a monthly contribution through GitHub Sponsors.
                    </p>
                    <div className="flex gap-2 flex-wrap">
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $5/month
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $10/month
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $25/month
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        Custom
                      </Badge>
                    </div>
                  </CardContent>
                  <CardFooter className="border-t bg-muted/50 pt-4">
                    <Button className="w-full">
                      <Heart className="h-4 w-4 mr-2" />
                      Become a Sponsor
                    </Button>
                  </CardFooter>
                </Card>

<Card className="overflow-hidden flex flex-col h-full transition-all hover:shadow-md">
                  <div className="bg-blue-50 p-8 flex justify-center">
                    <Heart className="h-24 w-24 text-blue-500" />
                  </div>
                  <CardHeader>
                    <CardTitle>Medical Support Fund</CardTitle>
                    <CardDescription>Help with medical treatment expenses</CardDescription>
                  </CardHeader>
                  <CardContent className="flex-grow">
                    <p className="text-muted-foreground mb-4">
                      MJ Ahmad is currently facing health challenges. Your contribution to the medical fund will help
                      with treatment expenses.
                    </p>
                    <div className="flex gap-2 flex-wrap">
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $50
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $100
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $250
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        $500
                      </Badge>
                      <Badge variant="outline" className="cursor-pointer hover:bg-primary/10">
                        Custom
                      </Badge>
                    </div>
                  </CardContent>
                  <CardFooter className="border-t bg-muted/50 pt-4">
                    <Button className="w-full">
                      <Heart className="h-4 w-4 mr-2" />
                      Contribute to Medical Fund
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </section>

<section className="mt-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Find answers to common questions about our products and services.
            </p>
          </div>

<FaqCard
              question="How can I access your free educational resources?"
              answer="All our educational resources are available completely free on our website under the 'Resources' section. No registration or payment is required. We believe education is a fundamental right and should be accessible to everyone."
            />
          </div>
        </section>
      </div>
    </main>
  )
}

interface ProductCardProps {
  title: string
  description: string
  price: string
  image: string
  badge?: string
  details: string[]
  duration?: string
  level?: string
  type?: string
  note?: string
}

function ProductCard({
  title,
  description,
  price,
  image,
  badge,
  details,
  duration,
  level,
  type,
  note,
}: ProductCardProps) {
  return (
    <Card className="overflow-hidden flex flex-col h-full transition-all hover:shadow-md">
      <div className="relative">
        <img src={image || "/placeholder.svg"} alt={title} className="w-full h-48 object-cover" />
        {badge && <Badge className="absolute top-3 right-3 bg-primary text-white">{badge}</Badge>}
      </div>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>{title}</CardTitle>
            {type && <CardDescription className="mt-1">{type}</CardDescription>}
          </div>
          <div className="text-right">
            <span className="font-bold text-lg text-primary">{price}</span>
            {duration && <p className="text-xs text-muted-foreground">{duration}</p>}
          </div>
        </div>
      </CardHeader>
      <CardContent className="flex-grow">
        <p className="text-muted-foreground mb-4">{description}</p>

{level && (
          <Badge variant="outline" className="mb-3">
            {level} Level
          </Badge>
        )}

<div className="mt-4">
          <h4 className="font-medium text-sm mb-2">What's Included:</h4>
          <ul className="space-y-1">
            {details.map((detail, index) => (
              <li key={index} className="text-sm text-muted-foreground flex items-start">
                <ChevronRight className="h-4 w-4 mr-1 text-primary shrink-0 mt-0.5" />
                <span>{detail}</span>
              </li>
            ))}
          </ul>
        </div>

{note && <p className="mt-4 text-sm text-muted-foreground italic">Note: {note}</p>}
      </CardContent>
      <CardFooter className="border-t bg-muted/50 pt-4">
        <div className="w-full flex flex-col sm:flex-row gap-3">
          <Button className="w-full sm:w-auto flex-1" variant="outline">
            Learn More
          </Button>
          <Button className="w-full sm:w-auto flex-1">
            <ShoppingBag className="h-4 w-4 mr-2" />
            Add to Cart
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}

interface FaqCardProps {
  question: string
  answer: string
}

function FaqCard({ question, answer }: FaqCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">{question}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground">{answer}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/products/product-hero.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Package, Coffee, MapPin, Heart } from "lucide-react"

export default function ProductHero() {
  const [currentSlide, setCurrentSlide] = useState(0)

const slides = [
    {
      title: "Support Free Education Through Merchandise",
      description:
        "Browse our collection of inspirational t-shirts, mugs, and more. Every purchase helps us provide free education to students across Bangladesh.",
      cta: "Shop Merchandise",
      icon: <Package className="h-5 w-5 mr-2" />,
      image: "/hero-merchandise-collection.png",
      color: "from-blue-900 to-blue-700",
    },
    {
      title: "Discover Cox's Bazar Weekend Experiences",
      description:
        "Explore our curated weekend tour packages in beautiful Cox's Bazar. Adventure, relaxation, and cultural experiences await you.",
      cta: "View Tour Packages",
      icon: <MapPin className="h-5 w-5 mr-2" />,
      image: "/coxs-bazar-sunset.png",
      color: "from-amber-900 to-amber-700",
    },
    {
      title: "Support Our Mission",
      description:
        "Help us make education free for everyone. Your support through Ko-fi, GitHub Sponsors, or our medical fund makes a real difference.",
      cta: "Support Now",
      icon: <Heart className="h-5 w-5 mr-2" />,
      image: "/education-support-hero.png",
      color: "from-green-900 to-green-700",
    },
  ]

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length)
    }, 6000)

return () => clearInterval(interval)
  }, [slides.length])

return (
    <div className="relative h-[500px] md:h-[600px] overflow-hidden">
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 transition-opacity duration-1000 ${
            index === currentSlide ? "opacity-100" : "opacity-0 pointer-events-none"
          }`}
        >
          <div className="absolute inset-0 bg-black/50 z-10" />
          <div className={`absolute inset-0 bg-gradient-to-r ${slide.color} mix-blend-multiply z-10`} />
          <img
            src={slide.image || "/placeholder.svg"}
            alt={slide.title}
            className="absolute inset-0 w-full h-full object-cover"
          />
          <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center">
            <div className="max-w-2xl">
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">{slide.title}</h1>
              <p className="text-lg md:text-xl text-white/90 mb-8">{slide.description}</p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-white text-primary hover:bg-white/90">
                  {slide.icon}
                  {slide.cta}
                </Button>
                <Button size="lg" variant="outline" className="text-white border-white hover:bg-white/20">
                  <Coffee className="h-5 w-5 mr-2" />
                  Buy Me a Coffee
                </Button>
              </div>
            </div>
          </div>
        </div>
      ))}

<div className="absolute bottom-6 left-0 right-0 z-30 flex justify-center gap-2">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-3 h-3 rounded-full transition-all ${
              index === currentSlide ? "bg-white scale-125" : "bg-white/50"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/products/featured-products.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ShoppingBag, Star, ArrowRight } from "lucide-react"

export default function FeaturedProducts() {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)

const featuredProducts = [
    {
      id: "merch-001",
      title: "Inspirational T-Shirt (Men)",
      type: "Apparel",
      price: "$24.99",
      image: "/mens-tshirt.png",
      badge: "Popular",
      rating: 4.8,
      reviews: 124,
    },
    {
      id: "merch-002",
      title: "Inspirational T-Shirt (Women)",
      type: "Apparel",
      price: "$24.99",
      image: "/womens-tshirt.png",
      badge: "Trending",
      rating: 4.7,
      reviews: 98,
    },
    {
      id: "tour-001",
      title: "Weekend Beach Retreat",
      type: "Cox's Bazar Tour",
      price: "$149.99",
      image: "/beach-retreat.png",
      badge: "Best Seller",
      rating: 4.9,
      reviews: 87,
    },
    {
      id: "membership-001",
      title: "Premium Supporter",
      type: "Annual Membership",
      price: "$99.99",
      image: "/premium-membership.png",
      badge: "Best Value",
      rating: 5.0,
      reviews: 56,
    },
  ]

return (
    <section>
      <div className="flex justify-between items-end mb-8">
        <div>
          <h2 className="text-3xl font-bold">Featured Products</h2>
          <p className="text-muted-foreground mt-2">Our most popular offerings, handpicked for you</p>
        </div>
        <Button variant="ghost" className="gap-2">
          View All <ArrowRight className="h-4 w-4" />
        </Button>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {featuredProducts.map((product, index) => (
          <Card
            key={product.id}
            className="overflow-hidden group"
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
          >
            <div className="relative">
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.title}
                className={`w-full h-48 object-cover transition-transform duration-500 ${
                  hoveredIndex === index ? "scale-110" : "scale-100"
                }`}
              />
              <Badge className="absolute top-3 right-3 bg-primary text-white">{product.badge}</Badge>
            </div>
            <CardContent className="pt-4">
              <div className="flex justify-between items-start mb-2">
                <div>
                  <h3 className="font-bold">{product.title}</h3>
                  <p className="text-sm text-muted-foreground">{product.type}</p>
                </div>
                <span className="font-bold text-primary">{product.price}</span>
              </div>
              <div className="flex items-center mt-2">
                <div className="flex items-center">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="ml-1 text-sm font-medium">{product.rating}</span>
                </div>
                <span className="text-xs text-muted-foreground ml-2">({product.reviews} reviews)</span>
              </div>
            </CardContent>
            <CardFooter className="border-t pt-4">
              <Button className="w-full">
                <ShoppingBag className="h-4 w-4 mr-2" />
                Add to Cart
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/products/tourism-section.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, Clock, MapPin, Utensils, Umbrella, Camera, Compass } from "lucide-react"

export default function TourismSection() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null)

const tourPackages = [
    {
      id: "weekend-retreat",
      title: "Weekend Beach Retreat",
      description: "A relaxing weekend getaway at Cox's Bazar's pristine beaches with guided activities.",
      price: "$149.99",
      image: "/beach-retreat.png",
      badge: "Most Popular",
      duration: "2 days, 1 night",
      groupSize: "1-4 people",
      includes: [
        "Beachfront accommodation",
        "Breakfast and dinner",
        "Guided beach walk",
        "Sunset photography session",
        "Beach bonfire experience",
      ],
      highlights: ["Marine Drive sunset views", "Inani Beach exploration", "Local seafood dining"],
    },
    {
      id: "adventure-weekend",
      title: "Adventure Weekend",
      description: "An action-packed weekend exploring Cox's Bazar's natural wonders and adventure activities.",
      price: "$199.99",
      image: "/adventure-weekend.png",
      badge: "Thrilling",
      duration: "2 days, 1 night",
      groupSize: "2-6 people",
      includes: [
        "Comfortable accommodation",
        "All meals included",
        "Parasailing experience",
        "Hiking to Himchari",
        "Jeep safari to Teknaf",
      ],
      highlights: ["Adrenaline water sports", "Himchari National Park", "Beach camping"],
    },
    {
      id: "cultural-experience",
      title: "Cultural Experience Weekend",
      description: "Immerse yourself in the rich culture and heritage of Cox's Bazar and surrounding areas.",
      price: "$179.99",
      image: "/cultural-weekend.png",
      badge: "Enriching",
      duration: "2 days, 1 night",
      groupSize: "2-8 people",
      includes: [
        "Traditional guesthouse stay",
        "All authentic local meals",
        "Visit to Rakhaine village",
        "Traditional craft workshops",
        "Local market tour with guide",
      ],
      highlights: ["Buddhist temples", "Local craft learning", "Traditional cuisine"],
    },
    {
      id: "family-fun",
      title: "Family Fun Weekend",
      description: "A perfect weekend getaway for families with activities for all ages at Cox's Bazar.",
      price: "$249.99",
      image: "/family-weekend.png",
      badge: "Family-Friendly",
      duration: "2 days, 1 night",
      groupSize: "Family of 4-6",
      includes: [
        "Family suite accommodation",
        "All meals and snacks",
        "Beach games and activities",
        "Marine aquarium visit",
        "Souvenir making workshop",
      ],
      highlights: ["Child-friendly activities", "Family beach games", "Educational marine experiences"],
    },
  ]

const specialOffers = [
    {
      title: "Midweek Special",
      description: "20% off on all packages for Tuesday-Thursday bookings",
      code: "MIDWEEK20",
      validUntil: "Ongoing",
    },
    {
      title: "Group Discount",
      description: "15% off for groups of 6 or more people",
      code: "GROUP15",
      validUntil: "Ongoing",
    },
    {
      title: "Early Bird",
      description: "10% off when booking 30+ days in advance",
      code: "EARLYBIRD10",
      validUntil: "Ongoing",
    },
    {
      title: "Summer Special",
      description: "Free beach activity package with any weekend booking",
      code: "SUMMER2023",
      validUntil: "September 30, 2023",
    },
  ]

return (
    <div className="space-y-8">
      <div className="text-center mb-8">
        <h3 className="text-2xl font-bold mb-2">Cox's Bazar Weekend Experiences</h3>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Explore the beauty of Cox's Bazar with our curated weekend packages. Perfect for a quick getaway from the
          hustle and bustle of daily life.
        </p>
      </div>

<Tabs defaultValue="packages" className="w-full">
        <TabsList className="grid w-full grid-cols-2 mb-8">
          <TabsTrigger value="packages">Weekend Packages</TabsTrigger>
          <TabsTrigger value="offers">Special Offers</TabsTrigger>
        </TabsList>

<TabsContent value="packages" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {tourPackages.map((pkg) => (
              <Card key={pkg.id} className="overflow-hidden flex flex-col h-full hover:shadow-md transition-all">
                <div className="relative">
                  <img
                    src={pkg.image || "/placeholder.svg?height=200&width=400&query=" + pkg.title.toLowerCase()}
                    alt={pkg.title}
                    className="w-full h-48 object-cover"
                  />
                  <Badge className="absolute top-3 right-3 bg-primary text-white">{pkg.badge}</Badge>
                </div>
                <CardHeader>
                  <div className="flex justify-between items-start">
                    <CardTitle>{pkg.title}</CardTitle>
                    <span className="font-bold text-lg text-primary">{pkg.price}</span>
                  </div>
                </CardHeader>
                <CardContent className="flex-grow">
                  <p className="text-muted-foreground mb-4">{pkg.description}</p>

<div className="flex flex-wrap gap-3 mb-4">
                    <Badge variant="outline" className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {pkg.duration}
                    </Badge>
                    <Badge variant="outline" className="flex items-center gap-1">
                      <Users className="h-3 w-3" />
                      {pkg.groupSize}
                    </Badge>
                  </div>

<div className="mt-4">
                    <h4 className="font-medium text-sm mb-2">Package Includes:</h4>
                    <ul className="space-y-1">
                      {pkg.includes.map((item, index) => (
                        <li key={index} className="text-sm text-muted-foreground flex items-start">
                          <span className="text-primary mr-2">✓</span>
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

<div className="mt-4">
                    <h4 className="font-medium text-sm mb-2">Highlights:</h4>
                    <div className="flex flex-wrap gap-2">
                      {pkg.highlights.map((highlight, index) => (
                        <Badge key={index} variant="secondary">
                          {highlight}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="border-t bg-muted/50 pt-4">
                  <div className="w-full flex flex-col sm:flex-row gap-3">
                    <Button
                      className="w-full sm:w-auto flex-1"
                      variant="outline"
                      onClick={() => setSelectedPackage(pkg.id)}
                    >
                      View Details
                    </Button>
                    <Button className="w-full sm:w-auto flex-1">Book Now</Button>
                  </div>
                </CardFooter>
              </Card>
            ))}
          </div>

<div className="bg-blue-50 border border-blue-100 rounded-lg p-6 mt-8">
            <h3 className="text-xl font-bold text-blue-800 mb-4 flex items-center">
              <MapPin className="h-5 w-5 mr-2" />
              Why Visit Cox's Bazar?
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="bg-white p-4 rounded-lg shadow-sm">
                <div className="flex items-center mb-2">
                  <Umbrella className="h-5 w-5 text-amber-500 mr-2" />
                  <h4 className="font-medium">World's Longest Beach</h4>
                </div>
                <p className="text-sm text-muted-foreground">
                  Experience the breathtaking 120km unbroken sandy beach, the longest natural sea beach in the world.
                </p>
              </div>

<div className="bg-white p-4 rounded-lg shadow-sm">
                <div className="flex items-center mb-2">
                  <Camera className="h-5 w-5 text-amber-500 mr-2" />
                  <h4 className="font-medium">Stunning Sunsets</h4>
                </div>
                <p className="text-sm text-muted-foreground">
                  Witness spectacular sunsets over the Bay of Bengal that create unforgettable memories.
                </p>
              </div>

<div className="bg-white p-4 rounded-lg shadow-sm">
                <div className="flex items-center mb-2">
                  <Utensils className="h-5 w-5 text-amber-500 mr-2" />
                  <h4 className="font-medium">Seafood Delights</h4>
                </div>
                <p className="text-sm text-muted-foreground">
                  Savor the freshest seafood prepared with authentic local flavors and traditional recipes.
                </p>
              </div>

<div className="bg-white p-4 rounded-lg shadow-sm">
                <div className="flex items-center mb-2">
                  <Compass className="h-5 w-5 text-amber-500 mr-2" />
                  <h4 className="font-medium">Natural Wonders</h4>
                </div>
                <p className="text-sm text-muted-foreground">
                  Explore nearby attractions like Himchari National Park, Inani Beach, and Buddhist temples.
                </p>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="offers" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {specialOffers.map((offer, index) => (
              <Card key={index} className="overflow-hidden hover:shadow-md transition-all">
                <CardHeader>
                  <CardTitle className="text-xl">{offer.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground mb-4">{offer.description}</p>
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center">
                      <span className="font-medium mr-2">Promo Code:</span>
                      <Badge>{offer.code}</Badge>
                    </div>
                    <div className="flex items-center">
                      <span className="font-medium mr-2">Valid Until:</span>
                      <span className="text-muted-foreground">{offer.validUntil}</span>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="border-t bg-muted/50 pt-4">
                  <Button className="w-full">Apply to Booking</Button>
                </CardFooter>
              </Card>
            ))}
          </div>

<Card className="bg-amber-50 border-amber-100">
            <CardHeader>
              <CardTitle className="text-amber-800">How to Redeem Offers</CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="list-decimal pl-5 space-y-2 text-amber-700">
                <li>Select your preferred weekend package</li>
                <li>Click "Book Now" to start the booking process</li>
                <li>Enter the promo code in the designated field during checkout</li>
                <li>The discount will be automatically applied to your total</li>
                <li>Complete your booking and receive confirmation</li>
              </ol>
              <p className="mt-4 text-sm text-amber-600">
                Note: Offers cannot be combined. Only one promo code can be applied per booking.
              </p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

<div className="bg-muted p-6 rounded-lg">
        <h3 className="text-xl font-bold mb-4">Custom Tour Packages</h3>
        <p className="mb-4">
          Looking for something specific? We can create custom tour packages tailored to your preferences, group size,
          and interests.
        </p>
        <Button>Contact for Custom Package</Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/products/mental-health-tips.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Brain, Heart, Coffee, Moon, Sun, Smile, BookOpen } from "lucide-react"

export default function MentalHealthTips() {
  const [expandedTip, setExpandedTip] = useState<number | null>(null)

const toggleTip = (index: number) => {
    if (expandedTip === index) {
      setExpandedTip(null)
    } else {
      setExpandedTip(index)
    }
  }

const dailyTips = [
    {
      icon: <Sun className="h-8 w-8 text-amber-500" />,
      title: "Morning Mindfulness",
      shortDesc: "Start your day with 5 minutes of mindful breathing.",
      fullDesc:
        "Begin each morning with 5 minutes of mindful breathing before checking your phone. Sit comfortably, focus on your breath, and set positive intentions for the day. This simple practice can reduce anxiety and improve focus throughout the day.",
    },
    {
      icon: <Coffee className="h-8 w-8 text-amber-700" />,
      title: "Mindful Breaks",
      shortDesc: "Take short mindful breaks during your workday.",
      fullDesc:
        "Incorporate 2-3 minute mindful breaks every few hours during your workday. Step away from screens, focus on your breathing, and observe your surroundings with full attention. These micro-breaks can prevent burnout and restore mental energy.",
    },
    {
      icon: <Heart className="h-8 w-8 text-red-500" />,
      title: "Self-Compassion Practice",
      shortDesc: "Treat yourself with the kindness you offer others.",
      fullDesc:
        "Practice self-compassion by speaking to yourself as you would to a good friend. When facing challenges or making mistakes, acknowledge your feelings without judgment and remind yourself that imperfection is part of being human. This practice reduces self-criticism and builds emotional resilience.",
    },
    {
      icon: <Moon className="h-8 w-8 text-indigo-400" />,
      title: "Evening Reflection",
      shortDesc: "Reflect on three positive moments before sleep.",
      fullDesc:
        "Before sleeping, take a few minutes to reflect on three positive moments from your day, no matter how small. This practice trains your brain to notice and appreciate positive experiences, improving your overall outlook and helping you fall asleep with a peaceful mindset.",
    },
  ]

const weeklyPractices = [
    {
      title: "Digital Detox Day",
      description:
        "Designate one day per week (or even half a day) as a 'digital detox' where you minimize screen time and reconnect with nature, hobbies, or loved ones without digital distractions.",
    },
    {
      title: "Gratitude Journaling",
      description:
        "Set aside 15 minutes once a week to write down things you're grateful for. This practice has been shown to significantly increase happiness and reduce depression.",
    },
    {
      title: "Nature Connection",
      description:
        "Spend at least 2 hours in nature weekly. Research shows this amount significantly boosts health and wellbeing. Visit Cox's Bazar beach, local parks, or any green space.",
    },
    {
      title: "Creative Expression",
      description:
        "Dedicate time weekly to creative activities without judgment or expectation. This could be drawing, writing, cooking, music, or any form of creative expression that brings you joy.",
    },
  ]

const resources = [
    {
      title: "Free Meditation Resources",
      items: ["Insight Timer app", "Smiling Mind app", "UCLA Mindful app", "YouTube guided meditations"],
    },
    {
      title: "Mental Health Support",
      items: [
        "National Mental Health Helpline: 16000",
        "Kaan Pete Roi (emotional support): 01779554391",
        "Bangladesh Association of Psychiatrists",
      ],
    },
    {
      title: "Recommended Reading",
      items: [
        "The Mindful Way Through Depression",
        "Atomic Habits by James Clear",
        "Man's Search for Meaning by Viktor Frankl",
      ],
    },
  ]

return (
    <section className="mt-20">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold mb-4">Mental Health & Wellbeing</h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Simple practices and resources to support your mental wellbeing. Education extends beyond academics to caring
          for our minds and hearts.
        </p>
      </div>

<Tabs defaultValue="daily" className="w-full">
        <TabsList className="grid w-full grid-cols-3 mb-8">
          <TabsTrigger value="daily" className="flex items-center gap-2">
            <Brain className="h-4 w-4" />
            <span>Daily Practices</span>
          </TabsTrigger>
          <TabsTrigger value="weekly" className="flex items-center gap-2">
            <Smile className="h-4 w-4" />
            <span>Weekly Wellbeing</span>
          </TabsTrigger>
          <TabsTrigger value="resources" className="flex items-center gap-2">
            <BookOpen className="h-4 w-4" />
            <span>Resources</span>
          </TabsTrigger>
        </TabsList>

<TabsContent value="daily">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {dailyTips.map((tip, index) => (
              <Card key={index} className="overflow-hidden hover:shadow-md transition-all">
                <CardHeader className="pb-2">
                  <div className="flex justify-center mb-4">{tip.icon}</div>
                  <CardTitle className="text-center">{tip.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    {expandedTip === index ? tip.fullDesc : tip.shortDesc}
                  </p>
                </CardContent>
                <CardFooter className="pt-0 flex justify-center">
                  <Button variant="ghost" size="sm" onClick={() => toggleTip(index)}>
                    {expandedTip === index ? "Show Less" : "Read More"}
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="weekly">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {weeklyPractices.map((practice, index) => (
              <Card key={index} className="overflow-hidden hover:shadow-md transition-all">
                <CardHeader>
                  <CardTitle>{practice.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{practice.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="resources">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {resources.map((resource, index) => (
              <Card key={index} className="overflow-hidden hover:shadow-md transition-all">
                <CardHeader>
                  <CardTitle>{resource.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {resource.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start">
                        <span className="text-primary mr-2">•</span>
                        <span className="text-muted-foreground">{item}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
      </Tabs>

<div className="mt-12 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-6 text-center">
        <h3 className="text-xl font-bold mb-2">Need Someone to Talk To?</h3>
        <p className="mb-4 max-w-2xl mx-auto">
          Sometimes the best support comes from a compassionate listener. If you're going through a difficult time,
          don't hesitate to reach out.
        </p>
        <Button>Contact for Support</Button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/products/support-banner.tsx"
import { Button } from "@/components/ui/button"
import { Heart, ExternalLink } from "lucide-react"

export default function SupportBanner() {
  return (
    <section className="mt-20">
      <div className="bg-gradient-to-r from-blue-900 to-blue-700 rounded-lg overflow-hidden">
        <div className="container mx-auto px-4 py-12 md:py-16">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="md:w-2/3">
              <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">Support Our Free Education Mission</h2>
              <p className="text-white/90 mb-6 max-w-2xl">
                MJ Ahmad is currently facing health challenges while continuing to develop free educational resources
                that benefit thousands of students. Your support helps both with medical treatment and ensuring
                education remains free for everyone.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button className="bg-white text-primary hover:bg-white/90">
                  <Heart className="h-5 w-5 mr-2 text-red-500" />
                  Make a Donation
                </Button>
                <Button variant="outline" className="text-white border-white hover:bg-white/20">
                  <ExternalLink className="h-5 w-5 mr-2" />
                  Learn More About Our Mission
                </Button>
              </div>
            </div>
            <div className="md:w-1/3 flex justify-center">
              <div className="bg-white/10 backdrop-blur-sm p-6 rounded-lg border border-white/20 text-center">
                <h3 className="text-xl font-bold text-white mb-3">Your Impact</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-white/10 p-3 rounded-lg">
                    <p className="text-2xl font-bold text-white">5,000+</p>
                    <p className="text-sm text-white/80">Students Reached</p>
                  </div>
                  <div className="bg-white/10 p-3 rounded-lg">
                    <p className="text-2xl font-bold text-white">12</p>
                    <p className="text-sm text-white/80">Communities Impacted</p>
                  </div>
                  <div className="bg-white/10 p-3 rounded-lg">
                    <p className="text-2xl font-bold text-white">250+</p>
                    <p className="text-sm text-white/80">Free Resources</p>
                  </div>
                  <div className="bg-white/10 p-3 rounded-lg">
                    <p className="text-2xl font-bold text-white">45</p>
                    <p className="text-sm text-white/80">Volunteer Mentors</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/products/testimonial-section.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Star, ChevronLeft, ChevronRight, Quote } from "lucide-react"
import { Button } from "@/components/ui/button"

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

const testimonials = [
    {
      name: "Rahima Khan",
      role: "Student, Dhaka University",
      quote:
        "The free educational resources provided by MJ Ahmad completely transformed my learning journey. The structured content and practical approach gave me the confidence to pursue my dreams. I'm so grateful education is kept free for everyone!",
      rating: 5,
      image: "/woman-portrait.png",
      product: "Free Educational Resources",
    },
    {
      name: "Abdul Karim",
      role: "Community Leader, Cox's Bazar",
      quote:
        "The Weekend Beach Retreat was a perfect getaway! The attention to detail, knowledgeable guides, and beautiful accommodations made it an unforgettable experience. I appreciate that proceeds support free education initiatives.",
      rating: 5,
      image: "/thoughtful-man-portrait.png",
      product: "Weekend Beach Retreat",
    },
    {
      name: "Dr. Fatima Rahman",
      role: "Professor, BUET",
      quote:
        "The Premium Supporter Membership provides exceptional value while supporting a noble cause. I'm proud to be part of a community that believes in making education accessible to everyone. The exclusive events and resources are excellent, but knowing my contribution helps students across Bangladesh is the real reward.",
      rating: 5,
      image: "/woman-professor-portrait.png",
      product: "Premium Supporter Membership",
    },
  ]

const nextTestimonial = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length)
  }

const prevTestimonial = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length)
  }

useEffect(() => {
    const interval = setInterval(() => {
      nextTestimonial()
    }, 8000)

return () => clearInterval(interval)
  }, [])

return (
    <section className="mt-20 py-16 bg-muted/30 rounded-lg">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold mb-4">What Our Community Says</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Read testimonials from students, community members, and supporters who have experienced our products and
            services.
          </p>
        </div>

<div className="relative max-w-4xl mx-auto">
          <div className="overflow-hidden">
            <div
              className="flex transition-transform duration-500 ease-in-out"
              style={{ transform: `translateX(-${currentIndex * 100}%)` }}
            >
              {testimonials.map((testimonial, index) => (
                <div key={index} className="w-full flex-shrink-0 px-4">
                  <Card className="bg-white shadow-lg">
                    <CardContent className="pt-6 pb-6">
                      <div className="flex flex-col md:flex-row gap-6 items-center md:items-start">
                        <div className="md:w-1/4 flex flex-col items-center text-center">
                          <div className="w-24 h-24 rounded-full overflow-hidden mb-3">
                            <img
                              src={testimonial.image || "/placeholder.svg"}
                              alt={testimonial.name}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <h3 className="font-bold">{testimonial.name}</h3>
                          <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                          <div className="flex mt-2">
                            {[...Array(5)].map((_, i) => (
                              <Star
                                key={i}
                                className={`h-4 w-4 ${
                                  i < testimonial.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                                }`}
                              />
                            ))}
                          </div>
                        </div>

<div className="md:w-3/4">
                          <div className="relative">
                            <Quote className="h-8 w-8 text-primary/20 absolute -top-4 -left-4" />
                            <p className="text-lg italic mb-4">"{testimonial.quote}"</p>
                          </div>
                          <p className="text-sm font-medium text-primary">Experience: {testimonial.product}</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              ))}
            </div>
          </div>

<div className="flex justify-center mt-6 gap-2">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentIndex(index)}
                className={`w-2.5 h-2.5 rounded-full transition-all ${
                  index === currentIndex ? "bg-primary scale-125" : "bg-primary/30"
                }`}
                aria-label={`Go to testimonial ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx"
import type { Metadata } from "next"
import Link from "next/link"
import { ChevronRight, Trash2, ShoppingBag, ArrowRight, CreditCard } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"

export const metadata: Metadata = {
  title: "Shopping Cart | MJ-AHMAD",
  description: "Review your cart and checkout",
}

export default function CartPage() {
  // Sample cart data - in a real app, this would come from a state management system
  const cartItems = [
    {
      id: "merch-001",
      name: "Inspirational T-Shirt (Men)",
      price: 24.99,
      quantity: 1,
      image: "/mens-tshirt.png",
      options: "Size: M, Color: Navy Blue",
    },
    {
      id: "merch-003",
      name: "Inspirational Mug",
      price: 19.99,
      quantity: 2,
      image: "/inspirational-mug.png",
      options: "",
    },
    {
      id: "tour-001",
      name: "Weekend Beach Retreat",
      price: 149.99,
      quantity: 1,
      image: "/beach-retreat.png",
      options: "Date: June 15-16, 2023",
    },
  ]

const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
  const shipping = 5.99
  const total = subtotal + shipping

return (
    <main className="container mx-auto px-4 py-12">
      <div className="flex items-center gap-2 mb-8">
        <Link href="/" className="text-muted-foreground hover:text-primary text-sm">
          Home
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <Link href="/products" className="text-muted-foreground hover:text-primary text-sm">
          Products
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <span className="text-sm font-medium">Cart</span>
      </div>

{cartItems.length > 0 ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Cart Items ({cartItems.length})</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {cartItems.map((item) => (
                  <div key={item.id} className="flex flex-col sm:flex-row gap-4 py-4 border-b">
                    <div className="sm:w-24 h-24 rounded-md overflow-hidden flex-shrink-0">
                      <img
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div className="flex-grow">
                      <h3 className="font-medium">{item.name}</h3>
                      {item.options && <p className="text-sm text-muted-foreground">{item.options}</p>}
                      <div className="flex items-center gap-4 mt-2">
                        <div className="flex items-center border rounded-md">
                          <button className="px-3 py-1 border-r">-</button>
                          <span className="px-4 py-1">{item.quantity}</span>
                          <button className="px-3 py-1 border-l">+</button>
                        </div>
                        <button className="text-sm text-red-500 flex items-center gap-1">
                          <Trash2 className="h-4 w-4" /> Remove
                        </button>
                      </div>
                    </div>
                    <div className="text-right font-medium">${(item.price * item.quantity).toFixed(2)}</div>
                  </div>
                ))}
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline">Continue Shopping</Button>
                <Button variant="ghost" className="text-red-500">
                  <Trash2 className="h-4 w-4 mr-2" /> Clear Cart
                </Button>
              </CardFooter>
            </Card>
          </div>

<div>
            <Card>
              <CardHeader>
                <CardTitle>Order Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span>${subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Shipping</span>
                  <span>${shipping.toFixed(2)}</span>
                </div>

<div className="pt-4">
                  <div className="flex items-center gap-2 mb-2">
                    <span className="text-sm font-medium">Promo Code</span>
                  </div>
                  <div className="flex gap-2">
                    <Input placeholder="Enter code" className="flex-grow" />
                    <Button variant="outline">Apply</Button>
                  </div>
                </div>

<div className="flex justify-between font-bold">
                  <span>Total</span>
                  <span>${total.toFixed(2)}</span>
                </div>

<div className="mt-6 space-y-4">
              <div className="flex items-center gap-2">
                <img src="/github-sponsor.svg" alt="GitHub Sponsors" className="h-6 w-6" />
                <span className="text-sm font-medium">Also available on GitHub Sponsors</span>
              </div>
              <div className="flex items-center gap-2">
                <img src="/ko-fi.png" alt="Ko-fi" className="h-6 w-6" />
                <span className="text-sm font-medium">Support us on Ko-fi</span>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="text-center py-12">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-muted mb-4">
            <ShoppingBag className="h-8 w-8 text-muted-foreground" />
          </div>
          <h2 className="text-2xl font-bold mb-2">Your cart is empty</h2>
          <p className="text-muted-foreground mb-6">Looks like you haven't added anything to your cart yet.</p>
          <Button asChild>
            <Link href="/products">
              Browse Products <ArrowRight className="ml-2 h-4 w-4" />
            </Link>
          </Button>
        </div>
      )}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx"
import type { Metadata } from "next"
import Link from "next/link"
import { ChevronRight, CreditCard, ShieldCheck, ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export const metadata: Metadata = {
  title: "Checkout | MJ-AHMAD",
  description: "Complete your purchase",
}

export default function CheckoutPage() {
  // Sample cart data - in a real app, this would come from a state management system
  const cartItems = [
    {
      id: "merch-001",
      name: "Inspirational T-Shirt (Men)",
      price: 24.99,
      quantity: 1,
      image: "/mens-tshirt.png",
      options: "Size: M, Color: Navy Blue",
    },
    {
      id: "merch-003",
      name: "Inspirational Mug",
      price: 19.99,
      quantity: 2,
      image: "/inspirational-mug.png",
      options: "",
    },
    {
      id: "tour-001",
      name: "Weekend Beach Retreat",
      price: 149.99,
      quantity: 1,
      image: "/beach-retreat.png",
      options: "Date: June 15-16, 2023",
    },
  ]

const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
  const shipping = 5.99
  const total = subtotal + shipping

return (
    <main className="container mx-auto px-4 py-12">
      <div className="flex items-center gap-2 mb-8">
        <Link href="/" className="text-muted-foreground hover:text-primary text-sm">
          Home
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <Link href="/products" className="text-muted-foreground hover:text-primary text-sm">
          Products
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <Link href="/cart" className="text-muted-foreground hover:text-primary text-sm">
          Cart
        </Link>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <span className="text-sm font-medium">Checkout</span>
      </div>

<div className="flex items-center gap-3 mb-8">
        <CreditCard className="h-6 w-6" />
        <h1 className="text-3xl font-bold">Checkout</h1>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Contact Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="first-name">First Name</Label>
                  <Input id="first-name" placeholder="Enter your first name" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="last-name">Last Name</Label>
                  <Input id="last-name" placeholder="Enter your last name" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email Address</Label>
                <Input id="email" type="email" placeholder="Enter your email address" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">Phone Number</Label>
                <Input id="phone" placeholder="Enter your phone number" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Shipping Address</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="address">Street Address</Label>
                <Input id="address" placeholder="Enter your street address" />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="city">City</Label>
                  <Input id="city" placeholder="Enter your city" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="state">State/Province</Label>
                  <Input id="state" placeholder="Enter your state or province" />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="zip">Postal/ZIP Code</Label>
                  <Input id="zip" placeholder="Enter your postal or ZIP code" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="country">Country</Label>
                  <Input id="country" placeholder="Enter your country" />
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Payment Method</CardTitle>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="card" className="w-full">
                <TabsList className="grid w-full grid-cols-3 mb-4">
                  <TabsTrigger value="card">Credit Card</TabsTrigger>
                  <TabsTrigger value="paypal">PayPal</TabsTrigger>
                  <TabsTrigger value="bank">Bank Transfer</TabsTrigger>
                </TabsList>

<TabsContent value="card" className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="card-number">Card Number</Label>
                    <Input id="card-number" placeholder="0000 0000 0000 0000" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="expiry">Expiry Date</Label>
                      <Input id="expiry" placeholder="MM/YY" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="cvv">CVV</Label>
                      <Input id="cvv" placeholder="123" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="name-on-card">Name on Card</Label>
                    <Input id="name-on-card" placeholder="Enter name as it appears on card" />
                  </div>
                </TabsContent>

<TabsContent value="paypal" className="space-y-4">
                  <div className="text-center py-8">
                    <img src="/paypal-logo.png" alt="PayPal" className="h-12 mx-auto mb-4" />
                    <p className="text-muted-foreground mb-4">
                      You will be redirected to PayPal to complete your payment securely.
                    </p>
                    <Button>Continue to PayPal</Button>
                  </div>
                </TabsContent>

<TabsContent value="bank" className="space-y-4">
                  <div className="bg-muted p-4 rounded-md">
                    <h3 className="font-medium mb-2">Bank Transfer Details</h3>
                    <p className="text-sm text-muted-foreground mb-2">
                      Please transfer the total amount to the following bank account:
                    </p>
                    <div className="space-y-1 text-sm">
                      <p>
                        <span className="font-medium">Bank Name:</span> Bangladesh Bank
                      </p>
                      <p>
                        <span className="font-medium">Account Name:</span> MJ Ahmad Educational Foundation
                      </p>
                      <p>
                        <span className="font-medium">Account Number:</span> 1234567890
                      </p>
                      <p>
                        <span className="font-medium">Branch:</span> Cox's Bazar
                      </p>
                      <p>
                        <span className="font-medium">Reference:</span> Your Order Number
                      </p>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="transfer-date">Transfer Date</Label>
                    <Input id="transfer-date" type="date" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="transfer-reference">Transfer Reference</Label>
                    <Input id="transfer-reference" placeholder="Enter your bank transfer reference" />
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>

<div className="flex items-center gap-2 text-sm text-muted-foreground">
            <ShieldCheck className="h-4 w-4 text-green-500" />
            <span>Your payment information is secure and encrypted</span>
          </div>
        </div>

<div>
          <Card className="sticky top-4">
            <CardHeader>
              <CardTitle>Order Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                {cartItems.map((item) => (
                  <div key={item.id} className="flex justify-between text-sm py-2">
                    <span>
                      {item.name} x {item.quantity}
                    </span>
                    <span>${(item.price * item.quantity).toFixed(2)}</span>
                  </div>
                ))}
              </div>

<div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span>${subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Shipping</span>
                  <span>${shipping.toFixed(2)}</span>
                </div>
              </div>

<div className="flex justify-between font-bold">
                <span>Total</span>
                <span>${total.toFixed(2)}</span>
              </div>

<div className="pt-4">
                <RadioGroup defaultValue="standard">
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="standard" id="standard" />
                    <Label htmlFor="standard">Standard Shipping (3-5 business days)</Label>
                  </div>
                  <div className="flex items-center space-x-2 mt-2">
                    <RadioGroupItem value="express" id="express" />
                    <Label htmlFor="express">Express Shipping (1-2 business days) +$10.00</Label>
                  </div>
                </RadioGroup>
              </div>

<div className="bg-blue-50 p-4 rounded-md text-sm text-blue-700">
                <p className="font-medium mb-1">Your purchase supports free education</p>
                <p>
                  100% of profits go towards providing free educational resources and supporting MJ Ahmad's medical
                  treatment.
                </p>
              </div>
            </CardContent>
            <CardFooter className="flex-col space-y-4">
              <Button className="w-full" size="lg">
                Complete Order
              </Button>
              <Button variant="outline" className="w-full" asChild>
                <Link href="/cart">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Return to Cart
                </Link>
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]png:file="public/mens-tshirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inspirational-tshirt-kzyda2wlXKtYKXtrI48wUguKxcSOX0.png"
[V0_FILE]png:file="public/womens-tshirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inspirational-tshirt-kzyda2wlXKtYKXtrI48wUguKxcSOX0.png"
[V0_FILE]png:file="public/beach-retreat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/adventure-weekend.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/cultural-weekend.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/family-weekend.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/corporate-workshop.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/csr-development.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/executive-mentorship.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/corporate-speaking.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/corporate-membership.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/family-membership.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-membership-tBzGc7SubW5qqKyBncICWf34A6BYnB.png"
[V0_FILE]png:file="public/poster-set.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-set-fTUoA8psyBWDQmHqxfy8RUGXbw7RIP.png"
[V0_FILE]png:file="public/tote-bag.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-set-fTUoA8psyBWDQmHqxfy8RUGXbw7RIP.png"
[V0_FILE]png:file="public/paypal-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-set-fTUoA8psyBWDQmHqxfy8RUGXbw7RIP.png"
[V0_FILE]png:file="public/hero-merchandise-collection.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero-merchandise-collection-HqcIj6XFOb4NxfxNOOp375YAXi87N2.png"
[V0_FILE]png:file="public/coxs-bazar-sunset.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coxs-bazar-sunset-0AyKj8TSrJeOi8pOHkv2mFyWFgICIw.png"
[V0_FILE]png:file="public/education-support-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/education-support-hero-X1EqR3vVl5NipMzDc4cs2mGeg4nUPp.png"
[V0_FILE]png:file="public/woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-portrait-i6YpMsSJsAkeQezUNTLNW1HblBpTkc.png"
[V0_FILE]png:file="public/thoughtful-man-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thoughtful-man-portrait-gSibKomdb6OmWSjTKONYMMykq5fNWa.png"
[V0_FILE]png:file="public/woman-professor-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-professor-portrait-8d3KfmqXCQKvm2pHJTAX93ZF3TmORH.png"
[V0_FILE]png:file="public/ko-fi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ko-fi-0dsnakXCEwsmkV3odezDxoML5JTmkW.png"
[V0_FILE]typescriptreact:file="components/json-viewer.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChevronDown, ChevronRight, Search, Copy, Check } from "lucide-react"

interface JsonViewerProps {
  data: any
}

export function JsonViewer({ data }: JsonViewerProps) {
  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set([]))
  const [searchTerm, setSearchTerm] = useState("")
  const [copiedPath, setCopiedPath] = useState<string | null>(null)

const copyValue = (path: string, value: any) => {
    const textToCopy = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value)

navigator.clipboard.writeText(textToCopy)
    setCopiedPath(path)

setTimeout(() => {
      setCopiedPath(null)
    }, 2000)
  }

// Function to check if a path or its children match the search term
  const pathMatchesSearch = (path: string, value: any): boolean => {
    if (path.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true
    }

if (typeof value === "object" && value !== null) {
      return Object.keys(value).some((key) => {
        const childPath = `${path}.${key}`
        return pathMatchesSearch(childPath, value[key])
      })
    }

return false
  }

// Recursively render the JSON tree with search highlighting
  const renderValue = (value: any, path: string, depth = 0) => {
    if (value === null) return null

// For objects and arrays
    if (typeof value === "object") {
      const isArray = Array.isArray(value)
      const isExpanded = expandedPaths.has(path)
      const matchesSearch = searchTerm && pathMatchesSearch(path, value)

// Auto-expand paths that match search
      if (matchesSearch && searchTerm && !isExpanded) {
        setExpandedPaths((prev) => new Set([...prev, path]))
      }

const keys = isArray ? [...Array(value.length).keys()] : Object.keys(value)
      const pathName = path === "root" ? "root" : path.split(".").pop()

return (
        <div className={`ml-${depth * 4} ${matchesSearch ? "bg-yellow-100" : ""}`}>
          <div className="flex items-center">
            <div className="flex items-center cursor-pointer" onClick={() => togglePath(path)}>
              {isExpanded ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
              <span className="text-gray-700 font-medium mr-1">{pathName}:</span>
              <span className="text-purple-600">
                {isArray ? "[" : "{"}
                {keys.length}
                {isArray ? "]" : "}"}
              </span>
            </div>
            <button
              className="ml-2 p-1 rounded-sm hover:bg-gray-200 focus:outline-none"
              onClick={(e) => {
                e.stopPropagation()
                copyValue(path, value)
              }}
            >
              {copiedPath === path ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
            </button>
          </div>

{isExpanded && (
            <div className="ml-4 border-l-2 pl-2 border-gray-200">
              {keys.map((key) => (
                <div key={`${path}.${key}`} className="my-1">
                  <span className={isArray ? "text-gray-500 mr-2" : "text-blue-600 mr-2"}>
                    {isArray ? key : `"${key}"`}
                    {!isArray && ":"}
                  </span>
                  {renderValue(value[key], `${path}.${key}`, depth + 1)}
                </div>
              ))}
            </div>
          )}
        </div>
      )
    }

// For primitive values
    return (
      <div className="flex items-center">
        <span className="text-green-600">{typeof value === "string" ? `"${value}"` : String(value)}</span>
        <button
          className="ml-2 p-1 rounded-sm hover:bg-gray-200 focus:outline-none"
          onClick={(e) => {
            e.stopPropagation()
            copyValue(path, value)
          }}
        >
          {copiedPath === path ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
        </button>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <div className="flex-1">
          <Label htmlFor="search" className="sr-only">
            Search
          </Label>
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="search"
              placeholder="অনুসন্ধান করুন..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>

<div className="font-mono text-sm overflow-auto max-h-[500px] p-4 bg-white rounded border">
        {renderValue(data, "root")}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/iss-tracker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Globe, Rocket, ArrowUp } from "lucide-react"

export function ISSTracker() {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [issData, setIssData] = useState({
    latitude: -80.6789,
    longitude: -47.421,
    velocity: 27976.08,
    altitude: 409.37,
    lastUpdated: new Date(),
  })

// Update the current time every second
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

return () => clearInterval(timer)
  }, [])

// Simulate ISS data updates every 30 seconds
  useEffect(() => {
    const updateISSData = () => {
      // In a real application, this would fetch data from an API
      // Here we're just simulating small changes to the values
      setIssData({
        latitude: issData.latitude + (Math.random() * 0.2 - 0.1),
        longitude: issData.longitude + (Math.random() * 0.2 - 0.1),
        velocity: issData.velocity + (Math.random() * 10 - 5),
        altitude: issData.altitude + (Math.random() * 0.5 - 0.25),
        lastUpdated: new Date(),
      })
    }

const dataTimer = setInterval(updateISSData, 30000)
    return () => clearInterval(dataTimer)
  }, [issData])

// Format time as HH:MM:SS AM/PM
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      hour12: true,
    })
  }

// Format date as MM/DD/YYYY
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      month: "numeric",
      day: "numeric",
      year: "numeric",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex flex-col items-center justify-center text-center space-y-2">
        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">ISS Real-time Update</h2>
        <p className="text-lg text-muted-foreground">
          {formatTime(currentTime)} | {formatDate(currentTime)}
        </p>
      </div>

<p className="text-center max-w-[800px] mx-auto text-muted-foreground">
        Experience the cutting-edge of space technology with our real-time data feed from the International Space
        Station.
      </p>

<div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <Globe className="h-5 w-5 text-primary" />
              ISS Location
            </CardTitle>
            <CardDescription>Current position</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="text-sm font-medium text-muted-foreground mb-1">Latitude</div>
                <div className="text-2xl font-bold">{issData.latitude.toFixed(4)}°</div>
              </div>
              <Separator />
              <div>
                <div className="text-sm font-medium text-muted-foreground mb-1">Longitude</div>
                <div className="text-2xl font-bold">{issData.longitude.toFixed(4)}°</div>
              </div>
              <div className="text-xs text-muted-foreground">Last updated: {formatTime(issData.lastUpdated)}</div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <Rocket className="h-5 w-5 text-primary" />
              ISS Velocity
            </CardTitle>
            <CardDescription>Current speed</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="text-3xl font-bold">{issData.velocity.toFixed(2)} km/h</div>
                <div className="text-sm text-muted-foreground mt-1">Orbiting Earth every ~90 minutes</div>
              </div>
              <div className="text-xs text-muted-foreground">Last updated: {formatTime(issData.lastUpdated)}</div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <ArrowUp className="h-5 w-5 text-primary" />
              ISS Altitude
            </CardTitle>
            <CardDescription>Current height</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="text-3xl font-bold">{issData.altitude.toFixed(2)} km</div>
                <div className="text-sm text-muted-foreground mt-1">Above Earth's surface</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card className="overflow-hidden">
        <CardHeader className="pb-2">
          <CardTitle>Live Earth View from ISS</CardTitle>
          <CardDescription>
            Experience a real-time view of our beautiful planet from the International Space Station as it orbits Earth,
            featuring stunning spacewalk footage.
          </CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          <div className="aspect-video bg-muted relative">
            <div className="absolute inset-0 flex items-center justify-center">
              <img
                src="/earth-from-iss.png"
                alt="Live Earth view from the International Space Station"
                className="w-full h-full object-cover"
              />
              <div className="absolute top-4 left-4 bg-red-600 text-white text-xs px-2 py-1 rounded-full animate-pulse">
                LIVE
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]png:file="public/earth-from-iss.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/earth-from-iss-e4MAYgm03jSpAOwzOtJWJBAsY1RmfF.png"
[V0_FILE]typescriptreact:file="app/future-technology/page.tsx"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Rocket, Lightbulb, Globe, Cpu } from "lucide-react"
import { Footer } from "@/components/footer"

export default function FutureTechnologyPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-grow">
        {/* Hero Section */}
        <section className="bg-gradient-to-b from-blue-900 to-indigo-900 text-white py-16">
          <div className="container mx-auto px-4">
            <div className="flex flex-col items-center justify-center text-center space-y-6">
              <div className="inline-block p-3 bg-white/10 rounded-full mb-2">
                <Rocket className="h-12 w-12 text-blue-300" />
              </div>
              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">Future Technology</h1>
              <p className="text-xl text-blue-200">Today in Bangladesh</p>
              <p className="max-w-[800px] text-blue-100">
                Experience the latest technological innovations and real-time data from the ISS as we take you into the
                future.
              </p>
            </div>
          </div>
        </section>

{/* ISS Tracker Section */}
        <section className="py-16 bg-slate-50 dark:bg-slate-900">
          <div className="container mx-auto px-4">
            <div className="flex flex-col items-center justify-center text-center space-y-4 mb-10">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">ISS Real-time Update</h2>
              <p className="text-lg text-muted-foreground">3:25:48 AM | 5/12/2025</p>
              <p className="max-w-[800px] text-muted-foreground">
                Experience the cutting-edge of space technology with our real-time data feed from the International
                Space Station.
              </p>
            </div>

<div className="grid gap-6 md:grid-cols-3">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="flex items-center gap-2">
                    <Globe className="h-5 w-5 text-primary" />
                    ISS Location
                  </CardTitle>
                  <CardDescription>Current position</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="text-sm font-medium text-muted-foreground mb-1">Latitude</div>
                      <div className="text-2xl font-bold">-80.6789°</div>
                    </div>
                    <div className="h-px bg-border" />
                    <div>
                      <div className="text-sm font-medium text-muted-foreground mb-1">Longitude</div>
                      <div className="text-2xl font-bold">-47.4210°</div>
                    </div>
                    <div className="text-xs text-muted-foreground">Last updated: 3:21:03 AM</div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="flex items-center gap-2">
                    <Rocket className="h-5 w-5 text-primary" />
                    ISS Velocity
                  </CardTitle>
                  <CardDescription>Current speed</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="text-3xl font-bold">27976.08 km/h</div>
                      <div className="text-sm text-muted-foreground mt-1">Orbiting Earth every ~90 minutes</div>
                    </div>
                    <div className="text-xs text-muted-foreground">Last updated: 3:21:03 AM</div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <path d="m12 19-7-7 7-7" />
                      <path d="M19 12H5" />
                    </svg>
                    ISS Altitude
                  </CardTitle>
                  <CardDescription>Current height</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="text-3xl font-bold">409.37 km</div>
                      <div className="text-sm text-muted-foreground mt-1">Above Earth's surface</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="mt-12">
              <Card className="overflow-hidden">
                <CardHeader className="pb-2">
                  <CardTitle>Live Earth View from ISS</CardTitle>
                  <CardDescription>
                    Experience a real-time view of our beautiful planet from the International Space Station as it
                    orbits Earth, featuring stunning spacewalk footage.
                  </CardDescription>
                </CardHeader>
                <CardContent className="p-0">
                  <div className="aspect-video bg-muted relative">
                    <div className="absolute inset-0 flex items-center justify-center">
                      <img
                        src="/earth-from-iss.png"
                        alt="Live Earth view from the International Space Station"
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute top-4 left-4 bg-red-600 text-white text-xs px-2 py-1 rounded-full animate-pulse">
                        LIVE
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Technology Initiatives Section */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="flex flex-col items-center justify-center text-center space-y-4 mb-10">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Technology Initiatives in Bangladesh</h2>
              <p className="text-muted-foreground max-w-[800px] mx-auto">
                Discover cutting-edge technology projects and initiatives currently underway in Bangladesh.
              </p>
            </div>

<div className="grid gap-6 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle>Digital Bangladesh Vision 2041</CardTitle>
                  <CardDescription>
                    A comprehensive national initiative to transform Bangladesh into a digitally advanced nation by
                    2041.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm inline-block">
                      In progress
                    </div>
                    <div>
                      <h4 className="font-medium mb-2">Key Areas</h4>
                      <ul className="space-y-1 text-sm">
                        <li className="flex items-center gap-2">
                          <Cpu className="h-4 w-4 text-primary" />
                          Smart city development
                        </li>
                        <li className="flex items-center gap-2">
                          <Cpu className="h-4 w-4 text-primary" />
                          Digital infrastructure expansion
                        </li>
                        <li className="flex items-center gap-2">
                          <Cpu className="h-4 w-4 text-primary" />
                          E-governance implementation
                        </li>
                        <li className="flex items-center gap-2">
                          <Cpu className="h-4 w-4 text-primary" />
                          Digital literacy programs
                        </li>
                        <li className="flex items-center gap-2">
                          <Cpu className="h-4 w-4 text-primary" />
                          Technology innovation hubs
                        </li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Bangladesh Satellite-2 Project</CardTitle>
                  <CardDescription>
                    Following the successful deployment of Bangabandhu Satellite-1, this project aims to expand
                    Bangladesh's space capabilities.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 px-3 py-1 rounded-full text-sm inline-block">
                      Planning phase
                    </div>
                    <div>
                      <h4 className="font-medium mb-2">Key Areas</h4>
                      <ul className="space-y-1 text-sm">
                        <li className="flex items-center gap-2">
                          <Rocket className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Enhanced telecommunications coverage
                        </li>
                        <li className="flex items-center gap-2">
                          <Rocket className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Earth observation capabilities
                        </li>
                        <li className="flex items-center gap-2">
                          <Rocket className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Weather monitoring systems
                        </li>
                        <li className="flex items-center gap-2">
                          <Rocket className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Disaster management support
                        </li>
                        <li className="flex items-center gap-2">
                          <Rocket className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                          Research and development opportunities
                        </li>
                      </ul>
                    </div>
                    <div className="text-sm text-muted-foreground">Expected launch: 2027</div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>AI Research Center of Bangladesh</CardTitle>
                  <CardDescription>
                    A national center for artificial intelligence research and development to position Bangladesh as an
                    AI innovation hub.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 px-3 py-1 rounded-full text-sm inline-block">
                      Operational
                    </div>
                    <div>
                      <h4 className="font-medium mb-2">Key Areas</h4>
                      <ul className="space-y-1 text-sm">
                        <li className="flex items-center gap-2">
                          <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                          Natural language processing for Bengali
                        </li>
                        <li className="flex items-center gap-2">
                          <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                          Computer vision applications
                        </li>
                        <li className="flex items-center gap-2">
                          <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                          AI for agriculture optimization
                        </li>
                        <li className="flex items-center gap-2">
                          <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                          Healthcare AI solutions
                        </li>
                        <li className="flex items-center gap-2">
                          <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                          Smart manufacturing systems
                        </li>
                      </ul>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      Location: Dhaka University of Engineering & Technology
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Technology Forecast Section */}
        <section className="py-16 bg-slate-50 dark:bg-slate-900">
          <div className="container mx-auto px-4">
            <div className="flex flex-col items-center justify-center text-center space-y-4 mb-10">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Technology Forecast for Bangladesh</h2>
              <p className="text-muted-foreground max-w-[800px] mx-auto">
                Predictions and trends for technological development in Bangladesh over the next decade.
              </p>
            </div>

<div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <div className="bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300 px-3 py-1 rounded-full text-sm inline-block mb-2">
                    2025-2030
                  </div>
                  <CardTitle>Artificial Intelligence</CardTitle>
                  <CardDescription>Transformative Impact</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="mb-4">
                    Bangladesh will become a regional hub for AI development, with specialized focus on Bengali language
                    processing and agricultural applications.
                  </p>
                  <div>
                    <h4 className="font-medium mb-2">Key Drivers</h4>
                    <ul className="space-y-1 text-sm">
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                        Government investment in AI research centers
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                        Growing pool of AI specialists
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                        Industry-academia partnerships
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                        International collaboration opportunities
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <div className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 px-3 py-1 rounded-full text-sm inline-block mb-2">
                    2025-2035
                  </div>
                  <CardTitle>Renewable Energy</CardTitle>
                  <CardDescription>High Impact</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="mb-4">
                    Solar and wind energy infrastructure will expand to cover 40% of Bangladesh's energy needs, with
                    innovative floating solar farms addressing land scarcity issues.
                  </p>
                  <div>
                    <h4 className="font-medium mb-2">Key Drivers</h4>
                    <ul className="space-y-1 text-sm">
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                        Climate change mitigation policies
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                        Decreasing costs of renewable technologies
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                        International climate funding
                      </li>
                      <li className="flex items-center gap-2">
                        <Lightbulb className="h-4 w-4 text-green-600 dark:text-green-400" />
                        Energy security concerns
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]png:file="public/digital-network-data-visualization.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-network-data-visualization-b0BRV4JskR5pvXGKTlWB7rHP3yn8t5.png"
[V0_FILE]plaintext:file="public/space-station-orbit.mp4" url="https://v0.blob.com/Nt9Hs.mp4"
[V0_FILE]png:file="public/space-station-poster.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/space-station-poster-Atv8yb0TToRORJAb3BzUtQKHDsHhXg.png"
[V0_FILE]typescriptreact:file="app/infinity-nexus/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { ArrowRight, Cloud, Heart, Mail, Database, Cpu, Globe, BarChart3, BrainCircuit, Rocket } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { SpaceVideoBackground } from "@/components/space-video-background"

export default function InfinityNexus() {
  const hubs = [
    {
      name: "Data Collection Hub",
      icon: Database,
      description: "Advanced systems for collecting and processing diverse data sources",
    },
    {
      name: "AI Research Center",
      icon: BrainCircuit,
      description: "Cutting-edge AI research and development for sustainable solutions",
    },
    {
      name: "Climate Analytics",
      icon: Cloud,
      description: "Climate data analysis and forecasting for environmental protection",
    },
    {
      name: "Space Research",
      icon: Rocket,
      description: "Collaboration with space agencies for interstellar research projects",
    },
    {
      name: "Global Partnerships",
      icon: Globe,
      description: "International collaborations with leading research institutions",
    },
    {
      name: "Quantum Computing",
      icon: Cpu,
      description: "Next-generation computing solutions for complex scientific problems",
    },
  ]

const goals = [
    {
      timeframe: "Short-term",
      items: [
        "Establish physical infrastructure in Cox's Bazar with high-tech data labs",
        "Develop AI-powered data collection and analytics pipelines",
        "Launch global partnerships with NASA, MIT, OpenAI, UN Climate Programs",
        "Implement Zero Trust Security Model & Blockchain-based Data Protection",
        "Deploy climate change forecasting models using AI & satellite imaging",
      ],
    },
    {
      timeframe: "Mid-term",
      items: [
        "Expand to international collaboration hubs in different continents",
        "Introduce AI-powered educational platforms for global research communities",
        "Deploy IoT sensor networks for environmental data tracking",
        "Integrate Quantum Computing for large-scale scientific problem-solving",
        "Secure UN & World Bank funding to scale global environmental initiatives",
      ],
    },
    {
      timeframe: "Long-term",
      items: [
        "Establish Infinity Nexus as a recognized scientific and technology institution",
        "Provide space research data to assist global interstellar projects",
        "Expand into autonomous AI-driven decision-making systems for global sustainability",
        "Transform Cox's Bazar into a World-Class Research Hub & Knowledge City",
        "Collaborate on human-centered AI models for ethical tech evolution",
      ],
    },
  ]

const impacts = {
    national: [
      "Establish Bangladesh's first high-tech, AI-driven data research center",
      "Position Bangladesh as a leader in global scientific innovation",
      "Enhance climate change mitigation strategies with real-time environmental analysis",
      "Boost local technological expertise, creating thousands of research jobs",
    ],
    international: [
      "Develop a universal open-source data model for global research use",
      "Partner with space agencies, top universities, and AI think tanks",
      "Provide critical data for international scientific advancements in AI & sustainability",
      "Influence future global policymaking with AI-driven climate & social analytics",
    ],
  }

return (
    <div className="container mx-auto px-4 py-12">
      {/* Hero Section with Space Video Background */}
      <div
        className="relative overflow-hidden rounded-xl bg-black text-white p-8 md:p-12 mb-12"
        style={{ height: "600px" }}
      >
        <SpaceVideoBackground />

<div className="relative z-10 max-w-3xl mt-16">
          <Badge variant="outline" className="mb-4 px-3 py-1 text-white border-white/40 backdrop-blur-sm bg-black/30">
            Research & Data Hub
          </Badge>
          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-shadow-lg">Infinity Nexus</h1>
          <p className="text-xl mb-4 text-blue-100 backdrop-blur-sm bg-black/30 p-2 inline-block">
            A global-standard data hub originating in Cox's Bazar
          </p>
          <p className="text-lg mb-8 text-blue-100/90 backdrop-blur-sm bg-black/30 p-2">
            Designed to collect, process, analyze, and secure data for scientific research, climate action,
            socio-economic progress, and AI-driven knowledge innovation.
          </p>
          <div className="flex flex-wrap gap-4">
            <Button asChild className="bg-white text-blue-700 hover:bg-blue-50 backdrop-blur-sm">
              <Link href="#vision">Explore Vision</Link>
            </Button>
            <Button asChild variant="outline" className="text-white border-white/40 hover:bg-white/10 backdrop-blur-sm">
              <Link href="#goals">View Goals</Link>
            </Button>
          </div>
        </div>
      </div>

{/* Vision Section */}
      <section id="vision" className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 bg-clip-text text-transparent">
            Our Vision
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Built on advanced AI, blockchain security, quantum computing, and next-gen cloud infrastructure, this
            project will reshape global data accessibility and serve as a master command center for pioneering research
            in space, sustainability, and future technology.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {hubs.map((hub) => (
            <Card key={hub.name} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <hub.icon className="h-5 w-5 text-blue-600" />
                  {hub.name}
                </CardTitle>
                <CardDescription>{hub.description}</CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </section>

{/* Goals Section */}
      <section id="goals" className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 bg-clip-text text-transparent">
            Strategic Goals
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Our comprehensive roadmap for transforming data research and innovation
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {goals.map((timeframe) => (
            <Card key={timeframe.timeframe} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-center">{timeframe.timeframe} Goals</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {timeframe.items.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <ArrowRight className="h-5 w-5 text-blue-600 mr-2 shrink-0 mt-0.5" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

{/* Impact Section */}
      <section id="impact" className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 bg-clip-text text-transparent">
            Expected Impact
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Transforming research capabilities and driving innovation at national and global scales
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BarChart3 className="h-5 w-5 text-blue-600" />
                National Impact
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                {impacts.national.map((item, index) => (
                  <li key={index} className="flex items-start">
                    <ArrowRight className="h-5 w-5 text-blue-600 mr-2 shrink-0 mt-0.5" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>

<Card className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Globe className="h-5 w-5 text-blue-600" />
                International Impact
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                {impacts.international.map((item, index) => (
                  <li key={index} className="flex items-start">
                    <ArrowRight className="h-5 w-5 text-blue-600 mr-2 shrink-0 mt-0.5" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Current Status */}
      <section id="status" className="mb-16">
        <div className="text-center mb-10">
          <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700 bg-clip-text text-transparent">
            Current Status
          </h2>
        </div>

<Card className="hover:shadow-lg transition-shadow">
          <CardHeader>
            <CardTitle className="text-center">Conceptual Phase</CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <p className="text-lg mb-6">
              Currently in conceptual phase, seeking initial seed funding and strategic partnerships
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Button asChild className="gap-2">
                <Link href="#">
                  <Heart className="h-4 w-4" />
                  Support This Project
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="mailto:mjahmad2024@outlook.com">
                  <Mail className="h-4 w-4" />
                  Contact for Partnerships
                </Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/space-video-background.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import { Loader2 } from "lucide-react"

export function SpaceVideoBackground() {
  const [isLoading, setIsLoading] = useState(true)
  const [currentTime, setCurrentTime] = useState("")
  const [coordinates, setCoordinates] = useState({ lat: "51.6032", long: "0.1410" })
  const [dataStream, setDataStream] = useState<string[]>([])
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const particles: Particle[] = []

interface Particle {
    x: number
    y: number
    size: number
    speedX: number
    speedY: number
    color: string
  }

// Initialize canvas and particles
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const resizeCanvas = () => {
      canvas.width = canvas.offsetWidth
      canvas.height = canvas.offsetHeight
      initParticles()
    }

window.addEventListener("resize", resizeCanvas)
    resizeCanvas()

// Create particles
    function initParticles() {
      particles.length = 0
      const particleCount = Math.floor((canvas.width * canvas.height) / 10000)

for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 2 + 0.5,
          speedX: Math.random() * 0.5 - 0.25,
          speedY: Math.random() * 0.5 - 0.25,
          color: `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, 255, ${Math.random() * 0.5 + 0.25})`,
        })
      }
    }

// Animation loop
    function animate() {
      if (!ctx || !canvas) return

// Create gradient background
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
      gradient.addColorStop(0, "rgba(10, 20, 50, 1)")
      gradient.addColorStop(0.5, "rgba(20, 30, 70, 1)")
      gradient.addColorStop(1, "rgba(30, 40, 90, 1)")

ctx.fillStyle = gradient
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw and update particles
      particles.forEach((particle) => {
        ctx.fillStyle = particle.color
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
        ctx.fill()

particle.x += particle.speedX
        particle.y += particle.speedY

// Wrap around edges
        if (particle.x < 0) particle.x = canvas.width
        if (particle.x > canvas.width) particle.x = 0
        if (particle.y < 0) particle.y = canvas.height
        if (particle.y > canvas.height) particle.y = 0
      })

// Draw grid lines
      ctx.strokeStyle = "rgba(255, 255, 255, 0.05)"
      ctx.lineWidth = 0.5

const gridSize = 50
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.stroke()
      }

for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.stroke()
      }

// Scanning effect
      const scanLineY = ((Date.now() % 5000) / 5000) * canvas.height
      const scanGradient = ctx.createLinearGradient(0, scanLineY - 20, 0, scanLineY + 20)
      scanGradient.addColorStop(0, "rgba(100, 150, 255, 0)")
      scanGradient.addColorStop(0.5, "rgba(100, 150, 255, 0.1)")
      scanGradient.addColorStop(1, "rgba(100, 150, 255, 0)")

ctx.fillStyle = scanGradient
      ctx.fillRect(0, scanLineY - 20, canvas.width, 40)

requestAnimationFrame(animate)
    }

animate()

setTimeout(() => {
      setIsLoading(false)
    }, 1500)

return () => {
      window.removeEventListener("resize", resizeCanvas)
    }
  }, [])

// Simulate data stream
  useEffect(() => {
    const dataPoints = [
      "Oxygen levels: 21.2%",
      "Temperature: -4.3°C",
      "Radiation: 12.4 μSv/h",
      "Altitude: 408.8 km",
      "Velocity: 27,600 km/h",
      "Solar array output: 98.7%",
      "Communication signal: Strong",
      "Research module status: Nominal",
      "Crew activity: Scientific research",
      "Next orbital pass: 42 min",
    ]

const interval = setInterval(() => {
      setDataStream((prev) => {
        const newData = [...prev, dataPoints[Math.floor(Math.random() * dataPoints.length)]]
        return newData.slice(-5) // Keep only the last 5 items
      })

// Update coordinates slightly to simulate movement
      setCoordinates({
        lat: (Number.parseFloat(coordinates.lat) + (Math.random() * 0.01 - 0.005)).toFixed(4),
        long: (Number.parseFloat(coordinates.long) + (Math.random() * 0.01 - 0.005)).toFixed(4),
      })

// Update time
      const now = new Date()
      setCurrentTime(
        `${now.getUTCHours().toString().padStart(2, "0")}:${now
          .getUTCMinutes()
          .toString()
          .padStart(2, "0")}:${now.getUTCSeconds().toString().padStart(2, "0")} UTC`,
      )
    }, 2000)

return () => clearInterval(interval)
  }, [coordinates])

return (
    <div className="absolute inset-0 overflow-hidden">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-black z-10">
          <Loader2 className="h-12 w-12 text-white animate-spin" />
          <span className="ml-2 text-white text-lg">Establishing connection to ISS feed...</span>
        </div>
      )}

{/* Canvas background instead of video */}
      <canvas ref={canvasRef} className="absolute w-full h-full object-cover" />

{/* Overlay with data visualization elements */}
      <div className="absolute inset-0 bg-gradient-to-r from-blue-900/30 via-indigo-900/20 to-purple-900/30">
        {/* Additional effects handled by canvas */}
      </div>

{/* HUD Elements */}
      <div className="absolute top-4 left-4 text-blue-300 text-xs font-mono opacity-70">
        <div>LIVE FEED: INTERNATIONAL RESEARCH STATION</div>
        <div>TIME: {currentTime}</div>
        <div>
          COORDINATES: {coordinates.lat}° N, {coordinates.long}° E
        </div>
        <div>STATUS: TRANSMITTING</div>
      </div>

{/* Data Stream */}
      <div className="absolute bottom-4 left-4 text-green-300 text-xs font-mono opacity-70">
        <div>DATA STREAM:</div>
        {dataStream.map((data, index) => (
          <div key={index} className="animate-pulse" style={{ animationDelay: `${index * 0.2}s` }}>
            > {data}
          </div>
        ))}
      </div>

{/* Connection Status */}
      <div className="absolute top-4 right-4 flex items-center text-xs font-mono text-blue-300 opacity-70">
        <div className="h-2 w-2 rounded-full bg-green-500 mr-2 animate-pulse"></div>
        SECURE CONNECTION ESTABLISHED
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/eunoia-quest/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Footer } from "@/components/footer"
import {
  Book,
  BookOpen,
  Printer,
  Globe,
  Lightbulb,
  Users,
  Github,
  Coffee,
  Database,
  Layers,
  BookMarked,
  School,
  Heart,
  Copy,
} from "lucide-react"
import { Progress } from "@/components/ui/progress"

export default function EunoiaQuestPage() {
  // Data from the JSON file
  const eunoiaData = {
    project: {
      name: "Eunoia Quest - Quranic Research & Distribution",
      description:
        "A global initiative originating from Bangladesh to advance Quranic research, printing, and distribution while ensuring accessibility for all.",
      branding: {
        name: "Eunoia Quest",
        slogan: "Exploring the Depths of Knowledge & Inner Peace",
        logo: "assets/logo.png",
        theme: {
          primary_colors: ["#1A3D5F", "#F5C97F", "#D8B185"],
          secondary_colors: ["#000000", "#FFFFFF"],
          font_style: "Serif, Arabic Calligraphy",
        },
      },
      core_objectives: [
        "Facilitate Quranic research with open-access manuscripts.",
        "Print high-quality Quran copies for distribution globally.",
        "Ensure inclusivity by bridging Islamic education and technology.",
        "Develop AI-powered analytical tools for Quranic interpretation.",
        "Provide accessible learning platforms for students worldwide.",
      ],
      research: {
        focus_areas: [
          "Cosmology & Quranic Insights",
          "Embryology & Quranic Verses",
          "Oceanography & Natural Barriers",
          "Advanced Tafsir & Linguistic Analysis",
          "Blockchain-based Quranic Authentication",
        ],
        contributors: ["Islamic Scholars", "Scientists", "AI Experts"],
        publication_formats: ["PDF", "ePub", "Interactive Digital Modules"],
        funding_requirements: {
          total_budget: "500000 USD",
          current_balance: "75000 USD",
          funding_sources: ["Crowdfunding", "Institutional Grants", "Private Sponsors"],
          donation_links: {
            github_sponsors: "https://github.com/sponsors/MJ-AHMAD/",
            ko_fi: "https://ko-fi.com/mjahmad",
          },
        },
      },
      printing_distribution: {
        printed_copies_since_2020: "470000",
        distribution_regions: ["Bangladesh", "Pakistan", "Malaysia", "Nigeria", "Europe"],
        current_demand: "250000 copies",
        challenges: ["Financial Constraints", "Logistics Barriers"],
        funding_goal: "Secure printing & distribution for 500000 new copies",
        logistics_partners: ["Local Islamic Institutions", "International Nonprofits"],
        quality_standards: {
          paper_quality: "High GSM, non-reflective",
          ink_quality: "Fade-resistant, authentic Arabic typography",
          translation_accuracy: "Verified by Islamic scholars",
        },
      },
      digital_library: {
        accessibility: {
          multi_language_support: ["Arabic", "English", "Bengali", "Urdu"],
          "open-source resources": true,
          "interactive search": true,
        },
        features: [
          "High-resolution classical manuscripts",
          "AI-powered linguistic and tafsir analysis",
          "Voice-recognition for Quranic recitations",
        ],
      },
      education_technology: {
        student_beneficiaries: "250000+",
        tech_integration: [
          "AI-powered Tajweed Assistance",
          "Blockchain-based Quran Authenticity",
          "VR-based Quranic exploration",
        ],
        special_programs: {
          "Bangladesh-focused_initiatives": [
            "Digitizing Islamic education curricula",
            "Scholarship programs for Islamic studies",
            "Enhancing accessibility for rural students",
          ],
        },
      },
      community_involvement: {
        global_research_network: true,
        "open-source_collaborations": true,
        volunteer_contributions: ["Scholarly writing", "Translation efforts", "Printing & distribution support"],
      },
      repository_setup: {
        github_repo: "https://github.com/MJ-AHMAD/AL-QURAN-JOURNEY.git",
        structure: [
          "/README.md",
          "/CONTRIBUTING.md",
          "/CODE_OF_CONDUCT.md",
          "/docs/",
          "/src/",
          "/assets/",
          "/LICENSE",
          "/funding.json",
        ],
      },
      future_expansion: {
        next_milestones: [
          "Expand Quranic printing operations internationally",
          "Develop AI-driven Quranic research engine",
          "Enhance interactive learning experiences for students",
          "Secure additional funding for operational growth",
        ],
      },
    },
  }

const data = eunoiaData.project
  const fundingPercentage =
    (Number.parseInt(data.research.funding_requirements.current_balance) /
      Number.parseInt(data.research.funding_requirements.total_budget)) *
    100

return (
    <div className="min-h-screen bg-gradient-to-b from-[#f8f4e8] to-white dark:from-slate-950 dark:to-slate-900">
      {/* Hero Section */}
      <div className="relative bg-[#1A3D5F] text-white">
        <div className="absolute inset-0 bg-[url('/placeholder-hrutm.png')] bg-cover bg-center opacity-20"></div>
        <div className="container mx-auto px-4 py-20 relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-serif font-bold mb-4">{data.branding.name}</h1>
            <p className="text-xl md:text-2xl font-serif italic mb-8">{data.branding.slogan}</p>
            <p className="text-lg mb-8">{data.description}</p>
            <div className="flex flex-wrap justify-center gap-4">
              <Button className="bg-[#F5C97F] text-[#1A3D5F] hover:bg-[#D8B185]">
                <Heart className="mr-2 h-4 w-4" /> Support Our Mission
              </Button>
              <Button variant="outline" className="border-[#F5C97F] text-[#F5C97F] hover:bg-[#1A3D5F]/50">
                <BookOpen className="mr-2 h-4 w-4" /> Explore Resources
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Core Objectives */}
      <section className="py-16 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-serif font-bold text-center mb-12 text-[#1A3D5F] dark:text-[#F5C97F]">
            Core Objectives
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {data.core_objectives.map((objective, index) => (
              <Card key={index} className="border-[#1A3D5F]/20 dark:border-[#F5C97F]/20">
                <CardContent className="pt-6">
                  <div className="bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                    {index === 0 && <Book className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                    {index === 1 && <Printer className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                    {index === 2 && <Globe className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                    {index === 3 && <Database className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                    {index === 4 && <School className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                  </div>
                  <p className="text-lg">{objective}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Tabs for Different Areas */}
      <section className="py-16 bg-[#f8f4e8] dark:bg-slate-950">
        <div className="container mx-auto px-4">
          <Tabs defaultValue="research" className="w-full">
            <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 mb-8">
              <TabsTrigger
                value="research"
                className="data-[state=active]:bg-[#1A3D5F] data-[state=active]:text-white dark:data-[state=active]:bg-[#F5C97F] dark:data-[state=active]:text-[#1A3D5F]"
              >
                <BookMarked className="mr-2 h-4 w-4" />
                Research
              </TabsTrigger>
              <TabsTrigger
                value="printing"
                className="data-[state=active]:bg-[#1A3D5F] data-[state=active]:text-white dark:data-[state=active]:bg-[#F5C97F] dark:data-[state=active]:text-[#1A3D5F]"
              >
                <Printer className="mr-2 h-4 w-4" />
                Printing & Distribution
              </TabsTrigger>
              <TabsTrigger
                value="digital"
                className="data-[state=active]:bg-[#1A3D5F] data-[state=active]:text-white dark:data-[state=active]:bg-[#F5C97F] dark:data-[state=active]:text-[#1A3D5F]"
              >
                <Layers className="mr-2 h-4 w-4" />
                Digital Library
              </TabsTrigger>
              <TabsTrigger
                value="education"
                className="data-[state=active]:bg-[#1A3D5F] data-[state=active]:text-white dark:data-[state=active]:bg-[#F5C97F] dark:data-[state=active]:text-[#1A3D5F]"
              >
                <School className="mr-2 h-4 w-4" />
                Education & Technology
              </TabsTrigger>
            </TabsList>

{/* Research Tab */}
            <TabsContent value="research" className="border rounded-lg p-6 bg-white dark:bg-slate-900">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-2xl font-serif font-bold mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                    Research Focus Areas
                  </h3>
                  <ul className="space-y-3">
                    {data.research.focus_areas.map((area, index) => (
                      <li key={index} className="flex items-start">
                        <Lightbulb className="h-5 w-5 mr-2 text-[#F5C97F] dark:text-[#F5C97F] flex-shrink-0 mt-0.5" />
                        <span>{area}</span>
                      </li>
                    ))}
                  </ul>

<h3 className="text-2xl font-serif font-bold mt-8 mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                    Contributors
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {data.research.contributors.map((contributor, index) => (
                      <span key={index} className="px-3 py-1 bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 rounded-full text-sm">
                        {contributor}
                      </span>
                    ))}
                  </div>

<h3 className="text-2xl font-serif font-bold mt-8 mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                    Publication Formats
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {data.research.publication_formats.map((format, index) => (
                      <span key={index} className="px-3 py-1 bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 rounded-full text-sm">
                        {format}
                      </span>
                    ))}
                  </div>
                </div>

<div>
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Funding Requirements</CardTitle>
                      <CardDescription>Help us reach our funding goals</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-6">
                        <div>
                          <div className="flex justify-between mb-2">
                            <span>Current Progress</span>
                            <span className="font-medium">{fundingPercentage.toFixed(1)}%</span>
                          </div>
                          <Progress
                            value={fundingPercentage}
                            className="h-2 bg-[#1A3D5F]/20 dark:bg-[#F5C97F]/20"
                            indicatorClassName="bg-[#F5C97F] dark:bg-[#F5C97F]"
                          />
                          <div className="flex justify-between mt-2 text-sm text-muted-foreground">
                            <span>{data.research.funding_requirements.current_balance} USD</span>
                            <span>{data.research.funding_requirements.total_budget} USD</span>
                          </div>
                        </div>

<div>
                          <h4 className="font-medium mb-2">Funding Sources</h4>
                          <ul className="space-y-1">
                            {data.research.funding_requirements.funding_sources.map((source, index) => (
                              <li key={index} className="text-sm">
                                {source}
                              </li>
                            ))}
                          </ul>
                        </div>

<div className="flex flex-col space-y-2">
                          <a
                            href={data.research.funding_requirements.donation_links.github_sponsors}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center rounded-md bg-[#1A3D5F] px-4 py-2 text-sm font-medium text-white hover:bg-[#1A3D5F]/90 dark:bg-[#F5C97F] dark:text-[#1A3D5F] dark:hover:bg-[#D8B185]"
                          >
                            <Github className="mr-2 h-4 w-4" /> Support on GitHub
                          </a>
                          <a
                            href={data.research.funding_requirements.donation_links.ko_fi}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center justify-center rounded-md bg-[#F5C97F] px-4 py-2 text-sm font-medium text-[#1A3D5F] hover:bg-[#D8B185] dark:bg-[#1A3D5F] dark:text-white dark:hover:bg-[#1A3D5F]/90"
                          >
                            <Coffee className="mr-2 h-4 w-4" /> Support on Ko-fi
                          </a>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>

{/* Printing & Distribution Tab */}
            <TabsContent value="printing" className="border rounded-lg p-6 bg-white dark:bg-slate-900">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <div className="mb-8">
                    <h3 className="text-2xl font-serif font-bold mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                      Printing & Distribution
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                      <Card className="bg-[#1A3D5F]/5 dark:bg-[#F5C97F]/5 border-none">
                        <CardContent className="pt-6">
                          <p className="text-sm text-muted-foreground">Printed Copies Since 2020</p>
                          <p className="text-3xl font-bold text-[#1A3D5F] dark:text-[#F5C97F]">
                            {data.printing_distribution.printed_copies_since_2020}
                          </p>
                        </CardContent>
                      </Card>
                      <Card className="bg-[#1A3D5F]/5 dark:bg-[#F5C97F]/5 border-none">
                        <CardContent className="pt-6">
                          <p className="text-sm text-muted-foreground">Current Demand</p>
                          <p className="text-3xl font-bold text-[#1A3D5F] dark:text-[#F5C97F]">
                            {data.printing_distribution.current_demand}
                          </p>
                        </CardContent>
                      </Card>
                    </div>
                  </div>

<div className="mb-8">
                    <h3 className="text-xl font-serif font-bold mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                      Distribution Regions
                    </h3>
                    <div className="flex flex-wrap gap-2">
                      {data.printing_distribution.distribution_regions.map((region, index) => (
                        <span
                          key={index}
                          className="px-3 py-1 bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 rounded-full text-sm"
                        >
                          {region}
                        </span>
                      ))}
                    </div>
                  </div>

<div>
                    <h3 className="text-xl font-serif font-bold mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">Challenges</h3>
                    <ul className="space-y-2">
                      {data.printing_distribution.challenges.map((challenge, index) => (
                        <li key={index} className="flex items-start">
                          <span className="inline-flex items-center justify-center rounded-full bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 h-6 w-6 text-xs mr-2 flex-shrink-0">
                            {index + 1}
                          </span>
                          <span>{challenge}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

<div>
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Funding Goal</CardTitle>
                      <CardDescription>{data.printing_distribution.funding_goal}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-6">
                        <div>
                          <h4 className="font-medium mb-2">Logistics Partners</h4>
                          <ul className="space-y-1">
                            {data.printing_distribution.logistics_partners.map((partner, index) => (
                              <li key={index} className="text-sm">
                                {partner}
                              </li>
                            ))}
                          </ul>
                        </div>

<div>
                          <h4 className="font-medium mb-2">Quality Standards</h4>
                          <div className="space-y-3">
                            <div>
                              <p className="text-sm font-medium">Paper Quality</p>
                              <p className="text-sm text-muted-foreground">
                                {data.printing_distribution.quality_standards.paper_quality}
                              </p>
                            </div>
                            <div>
                              <p className="text-sm font-medium">Ink Quality</p>
                              <p className="text-sm text-muted-foreground">
                                {data.printing_distribution.quality_standards.ink_quality}
                              </p>
                            </div>
                            <div>
                              <p className="text-sm font-medium">Translation Accuracy</p>
                              <p className="text-sm text-muted-foreground">
                                {data.printing_distribution.quality_standards.translation_accuracy}
                              </p>
                            </div>
                          </div>
                        </div>

<Button className="w-full bg-[#1A3D5F] hover:bg-[#1A3D5F]/90 dark:bg-[#F5C97F] dark:text-[#1A3D5F] dark:hover:bg-[#D8B185]">
                          Support Printing & Distribution
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>

{/* Digital Library Tab */}
            <TabsContent value="digital" className="border rounded-lg p-6 bg-white dark:bg-slate-900">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-2xl font-serif font-bold mb-6 text-[#1A3D5F] dark:text-[#F5C97F]">
                    Digital Library
                  </h3>

<div className="mb-8">
                    <h4 className="text-xl font-medium mb-4">Accessibility</h4>
                    <div className="space-y-4">
                      <div>
                        <p className="font-medium mb-2">Multi-Language Support</p>
                        <div className="flex flex-wrap gap-2">
                          {data.digital_library.accessibility.multi_language_support.map((language, index) => (
                            <span
                              key={index}
                              className="px-3 py-1 bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 rounded-full text-sm"
                            >
                              {language}
                            </span>
                          ))}
                        </div>
                      </div>

<div className="flex items-center space-x-2">
                        <div
                          className={`h-4 w-4 rounded-full ${data.digital_library.accessibility["open-source resources"] ? "bg-green-500" : "bg-red-500"}`}
                        ></div>
                        <span>Open-Source Resources</span>
                      </div>

<div className="flex items-center space-x-2">
                        <div
                          className={`h-4 w-4 rounded-full ${data.digital_library.accessibility["interactive search"] ? "bg-green-500" : "bg-red-500"}`}
                        ></div>
                        <span>Interactive Search</span>
                      </div>
                    </div>
                  </div>
                </div>

<div>
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Features</CardTitle>
                      <CardDescription>Advanced digital library capabilities</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-4">
                        {data.digital_library.features.map((feature, index) => (
                          <li key={index} className="flex items-start">
                            <div className="bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                              {index === 0 && <BookOpen className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                              {index === 1 && <Database className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                              {index === 2 && <Layers className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                            </div>
                            <div>
                              <p>{feature}</p>
                            </div>
                          </li>
                        ))}
                      </ul>

<Button className="w-full mt-6 bg-[#1A3D5F] hover:bg-[#1A3D5F]/90 dark:bg-[#F5C97F] dark:text-[#1A3D5F] dark:hover:bg-[#D8B185]">
                        Explore Digital Library
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>

{/* Education & Technology Tab */}
            <TabsContent value="education" className="border rounded-lg p-6 bg-white dark:bg-slate-900">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-2xl font-serif font-bold mb-4 text-[#1A3D5F] dark:text-[#F5C97F]">
                    Education & Technology
                  </h3>

<div className="mb-6">
                    <Card className="bg-[#1A3D5F]/5 dark:bg-[#F5C97F]/5 border-none">
                      <CardContent className="pt-6">
                        <p className="text-sm text-muted-foreground">Student Beneficiaries</p>
                        <p className="text-3xl font-bold text-[#1A3D5F] dark:text-[#F5C97F]">
                          {data.education_technology.student_beneficiaries}
                        </p>
                      </CardContent>
                    </Card>
                  </div>

<div className="mb-8">
                    <h4 className="text-xl font-medium mb-4">Tech Integration</h4>
                    <ul className="space-y-3">
                      {data.education_technology.tech_integration.map((tech, index) => (
                        <li key={index} className="flex items-start">
                          <div className="bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                            {index === 0 && <Lightbulb className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                            {index === 1 && <Database className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                            {index === 2 && <Globe className="h-4 w-4 text-[#1A3D5F] dark:text-[#F5C97F]" />}
                          </div>
                          <div>
                            <p>{tech}</p>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

<div>
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">
                        Bangladesh-Focused Initiatives
                      </CardTitle>
                      <CardDescription>Special programs for local communities</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-4">
                        {data.education_technology.special_programs["Bangladesh-focused_initiatives"].map(
                          (initiative, index) => (
                            <li key={index} className="flex items-start">
                              <span className="inline-flex items-center justify-center rounded-full bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 h-6 w-6 text-xs mr-2 flex-shrink-0">
                                {index + 1}
                              </span>
                              <span>{initiative}</span>
                            </li>
                          ),
                        )}
                      </ul>

<Button className="w-full mt-6 bg-[#1A3D5F] hover:bg-[#1A3D5F]/90 dark:bg-[#F5C97F] dark:text-[#1A3D5F] dark:hover:bg-[#D8B185]">
                        Support Educational Initiatives
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

{/* Community Involvement */}
      <section className="py-16 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-serif font-bold text-center mb-12 text-[#1A3D5F] dark:text-[#F5C97F]">
            Community Involvement
          </h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 mb-4">
                  <Globe className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />
                </div>
                <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Global Research Network</CardTitle>
              </CardHeader>
              <CardContent>
                <p>
                  Join our international network of researchers, scholars, and enthusiasts collaborating on Quranic
                  studies.
                </p>
                <Button
                  variant="outline"
                  className="mt-4 w-full border-[#1A3D5F] text-[#1A3D5F] hover:bg-[#1A3D5F] hover:text-white dark:border-[#F5C97F] dark:text-[#F5C97F] dark:hover:bg-[#F5C97F] dark:hover:text-[#1A3D5F]"
                >
                  Join Network
                </Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 mb-4">
                  <Github className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />
                </div>
                <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Open-Source Collaborations</CardTitle>
              </CardHeader>
              <CardContent>
                <p>Contribute to our open-source projects and help improve our digital tools and resources.</p>
                <Button
                  variant="outline"
                  className="mt-4 w-full border-[#1A3D5F] text-[#1A3D5F] hover:bg-[#1A3D5F] hover:text-white dark:border-[#F5C97F] dark:text-[#F5C97F] dark:hover:bg-[#F5C97F] dark:hover:text-[#1A3D5F]"
                >
                  View GitHub
                </Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <div className="flex items-center justify-center h-12 w-12 rounded-full bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 mb-4">
                  <Users className="h-6 w-6 text-[#1A3D5F] dark:text-[#F5C97F]" />
                </div>
                <CardTitle className="text-[#1A3D5F] dark:text-[#F5C97F]">Volunteer Contributions</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {data.community_involvement.volunteer_contributions.map((contribution, index) => (
                    <li key={index} className="flex items-center">
                      <span className="h-1.5 w-1.5 rounded-full bg-[#1A3D5F] dark:bg-[#F5C97F] mr-2"></span>
                      <span>{contribution}</span>
                    </li>
                  ))}
                </ul>
                <Button
                  variant="outline"
                  className="mt-4 w-full border-[#1A3D5F] text-[#1A3D5F] hover:bg-[#1A3D5F] hover:text-white dark:border-[#F5C97F] dark:text-[#F5C97F] dark:hover:bg-[#F5C97F] dark:hover:text-[#1A3D5F]"
                >
                  Volunteer With Us
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Future Expansion */}
      <section className="py-16 bg-[#1A3D5F] text-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-serif font-bold text-center mb-12 text-[#F5C97F]">Future Expansion</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-2xl font-serif font-bold mb-6 text-[#F5C97F]">Next Milestones</h3>
              <ul className="space-y-4">
                {data.future_expansion.next_milestones.map((milestone, index) => (
                  <li key={index} className="flex items-start">
                    <div className="bg-[#F5C97F]/20 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0 text-[#F5C97F]">
                      {index + 1}
                    </div>
                    <div>
                      <p>{milestone}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

<div className="bg-[#F5C97F]/10 rounded-lg p-6">
              <h3 className="text-2xl font-serif font-bold mb-6 text-[#F5C97F]">Get Involved</h3>
              <p className="mb-6">
                Join us in our mission to advance Quranic research and distribution. There are many ways to contribute
                to this important work.
              </p>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Button className="bg-[#F5C97F] text-[#1A3D5F] hover:bg-[#D8B185]">
                  <Heart className="mr-2 h-4 w-4" /> Donate
                </Button>
                <Button variant="outline" className="border-[#F5C97F] text-[#F5C97F] hover:bg-[#F5C97F]/20">
                  <Users className="mr-2 h-4 w-4" /> Volunteer
                </Button>
                <Button variant="outline" className="border-[#F5C97F] text-[#F5C97F] hover:bg-[#F5C97F]/20">
                  <Github className="mr-2 h-4 w-4" /> Contribute
                </Button>
                <Button variant="outline" className="border-[#F5C97F] text-[#F5C97F] hover:bg-[#F5C97F]/20">
                  <Globe className="mr-2 h-4 w-4" /> Spread the Word
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Repository */}
      <section className="py-16 bg-[#f8f4e8] dark:bg-slate-950">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-serif font-bold mb-6 text-[#1A3D5F] dark:text-[#F5C97F]">
              Open Source Repository
            </h2>
            <p className="mb-8">
              Our project is fully open source. You can access our code, contribute, and help us improve.
            </p>

<div className="inline-flex items-center justify-center p-1 rounded-md bg-[#1A3D5F]/10 dark:bg-[#F5C97F]/10 mb-8">
              <code className="text-sm font-mono px-4 py-2">{data.repository_setup.github_repo}</code>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={() => {
                  navigator.clipboard.writeText(data.repository_setup.github_repo)
                }}
              >
                <Copy className="h-4 w-4" />
                <span className="sr-only">Copy</span>
              </Button>
            </div>

<a
              href={data.repository_setup.github_repo}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center rounded-md bg-[#1A3D5F] px-4 py-2 text-sm font-medium text-white hover:bg-[#1A3D5F]/90 dark:bg-[#F5C97F] dark:text-[#1A3D5F] dark:hover:bg-[#D8B185]"
            >
              <Github className="mr-2 h-4 w-4" /> View on GitHub
            </a>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/placeholder-hrutm.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png"
[V0_FILE]typescriptreact:file="lib/json-structure.ts" isQuickEdit="true"
export const updatedJsonStructure = {
  root: {
    "MJ-AHMAD": {
      personal: {
        personal_information: {
          full_name: "Md Jafor Ahmad",
          nickname: "MJ Ahmad",
          date_of_birth: "November 10, 1989",
          nationality: "Bangladeshi",
          official_documents: {
            nid: "3734108768",
            tin_certificate: "425092691933",
            passport_number: "A02019678",
          },
          contact_information: {
            email: "mjahmad2024@outlook.com",
            phone: "+8801336221217",
          },
          professional_accounts: {
            linkedin: "https://linkedin.com/in/jafor-ahmad",
            github: "https://github.com/MJ-AHMAD",
            microsoft_learning_username: "MJAHMAD-5742",
          },
          social_media_presence: {
            facebook: ["https://facebook.com/mdjaforahmad10.11.1989", "https://facebook.com/mj.ahmad.768732"],
            linkedin: "https://linkedin.com/in/jafor-ahmad",
            github: "https://github.com/MJ-AHMAD",
          },
        },
        philosophy_and_values: {
          core_values: {
            transparency: "Commitment to open and honest communication in all endeavors",
            ethics: "Upholding the highest ethical standards in personal and professional life",
            accountability: "Taking responsibility for actions and decisions",
            inclusivity: "Ensuring equal opportunities and access for all",
            innovation: "Embracing creative solutions to address challenges",
            sustainability: "Promoting long-term, environmentally conscious development",
          },
          personal_message:
            "Through steadfast dedication, ethical values, and innovative approaches, I seek to create meaningful opportunities and inspire a future full of possibilities. I believe that education is the cornerstone of progress, and together we can build a brighter future for Bangladesh. I welcome every student and supporter to join this journey of transformation.",
        },
        my_core_values: [
          {
            name: "Transparency",
            description: "Commitment to open and honest communication in all endeavors",
            icon: "BookOpen",
          },
          {
            name: "Ethics",
            description: "Upholding the highest ethical standards in personal and professional life",
            icon: "Heart",
          },
          {
            name: "Accountability",
            description: "Taking responsibility for actions and decisions",
            icon: "Coffee",
          },
          {
            name: "Inclusivity",
            description: "Ensuring equal opportunities and access for all",
            icon: "Users",
          },
          {
            name: "Innovation",
            description: "Embracing creative solutions to address challenges",
            icon: "GraduationCap",
          },
          {
            name: "Sustainability",
            description: "Promoting long-term, environmentally conscious development",
            icon: "Gift",
          },
        ],
        contact: {
          primary_email: "mjahmad2024@outlook.com",
          phone: "+8801336221217",
          social_media: {
            linkedin: "https://linkedin.com/in/jafor-ahmad",
            github: "https://github.com/MJ-AHMAD",
            facebook: "https://facebook.com/mj.ahmad.768732",
          },
          preferred_contact_method: "Email is the preferred method for initial contact.",
          response_time: "Please allow 24-48 hours for a response due to health considerations.",
          for_urgent_matters:
            "For urgent matters related to ongoing projects or support, please include 'URGENT' in the email subject line.",
        },
        financial_information: {
          bank_accounts: {
            regular_accounts: [
              {
                name: "City Bank Ltd",
                account_number: "1502835465001",
                account_name: "QURANER FARIWALA",
                swift_code: "CIBLBDDH",
                routing_number: "225271548",
              },
              {
                name: "MTB",
                account_number: "1301010000896",
                account_name: "QURANER FARIWALA",
                swift_code: "MTBAUA2D",
                routing_number: "145275358",
              },
              {
                name: "Eastern Bank Ltd.",
                account_number: "1011070611663",
                account_name: "QURANER FARIWALA",
                swift_code: "EBLDBDDHOBU",
                routing_number: "095275358",
              },
              {
                name: "BRAC BANK",
                account_number: "2060133490001",
                account_name: "QURANER FARIWALA",
                swift_code: "BRAKBDDH",
                routing_number: "060271103",
              },
            ],
            international_accounts: [
              {
                name: "The Bankers Bank",
                account_number: "111869395099",
                account_name: "Md Jafor Ahmad",
                swift_code: "BBOKUS44",
                routing_number: "103913434",
                currency: "USD",
              },
            ],
            mobile_banking: [
              {
                name: "Bkash Merchant",
                account_number: "01788856628",
                account_name: "QURANER FARIWALA",
                type: "merchant account",
              },
              {
                name: "Bkash Personal",
                account_number: "01920082926",
                account_name: "MJ AHMAD",
                type: "personal account",
              },
              {
                name: "Nagad",
                account_number: "01788856628",
                account_name: "Md Jafor Ahmad",
                type: "personal account",
              },
              {
                name: "Rocket",
                account_number: "01920082926-6",
                account_name: "Md Jafor Ahmad",
                type: "personal account",
              },
            ],
          },
          donation_information: {
            preferred_methods: ["Bank Transfer", "Mobile Banking"],
            donation_purposes: [
              "Educational Initiatives",
              "Quranic Research & Distribution",
              "Community Development Projects",
              "Medical Support",
            ],
            transparency_policy:
              "All donations are tracked and reported with complete transparency. Regular updates on fund utilization are provided to donors.",
          },
        },
      },
      professional: {
        professional_profile: {
          title: "Visionary Leader, Social Worker, and Dedicated Citizen",
          summary:
            "Md Jafor Ahmad stands as a symbol of dedication and transparency, maintaining the highest ethical standards throughout his life. He remains committed to becoming a trusted ally for communities, enabling impactful change through education and social empowerment.",
          introduction:
            "Md Jafor Ahmad, widely known as MJ Ahmad, is a visionary leader, social worker, and dedicated citizen of Bangladesh. Driven by a profound belief in the transformative potential of education, technology, and inclusivity, Md Jafor Ahmad has devoted his life to inspiring change and empowering the next generation.",
          key_skills: [
            "Strategic Leadership and Management",
            "Social Advocacy and Community Engagement",
            "Transparent and Ethical Decision-Making",
            "Technical and Creative Problem-Solving",
            "Innovation and Collaboration",
          ],
          achievements: [
            {
              title: "Social Service Initiatives",
              description:
                "Since 2014, Md Jafor Ahmad has actively organized and led impactful social service projects, focusing on community development, education, and sustainability. His presence on platforms like Facebook highlights his unwavering commitment to empowering communities.",
              profiles: {
                first_profile: "https://facebook.com/mdjaforahmad10.11.1989",
                current_profile: "https://facebook.com/mj.ahmad.768732",
              },
            },
            {
              title: "Educational Programs",
              description:
                "Developed comprehensive educational programs focusing on technology, programming, and innovation to empower Bangladeshi youth with essential skills for the future.",
            },
            {
              title: "Environmental Development",
              description:
                "Led initiatives for sustainable environmental practices and climate action, particularly in the Cox's Bazar region.",
            },
            {
              title: "Community Building",
              description:
                "Created platforms for community engagement, mentorship, and knowledge sharing to foster collaboration and growth.",
            },
          ],
          verified_accounts: {
            screenshots: [
              "IJM Volunteer Dashboard",
              "PayPal Developer Dashboard",
              "Microsoft Developer Community",
              "Microsoft Tech Community",
            ],
          },
        },
        vision: {
          mission_statement:
            "To empower Bangladeshi communities through education, technology, and sustainable development initiatives that create lasting positive change and opportunities for future generations.",
          long_term_goals: [
            "Establish Bangladesh as a hub for technological innovation and education in South Asia",
            "Create sustainable educational models that can be replicated across developing nations",
            "Build a network of empowered communities that drive their own development",
            "Foster a culture of ethical leadership and transparent governance",
            "Develop technology solutions that address critical local challenges",
          ],
          impact_areas: {
            education: "Transforming educational access and quality through technology and innovative teaching methods",
            technology: "Building technological capacity and digital literacy across Bangladesh",
            environment:
              "Promoting sustainable practices and climate resilience, particularly in vulnerable coastal areas",
            community_development: "Empowering communities to lead their own development initiatives",
            leadership: "Nurturing the next generation of ethical, innovative leaders",
          },
        },
        flagship_initiatives: {
          "Yunus Inspire": {
            type: "Educational Initiative",
            inspiration: "Inspired by the legacy of Nobel Laureate Professor Muhammad Yunus",
            description:
              "With inspiration from Professor Muhammad Yunus, I initiated Yunus Inspire, a project aimed at empowering Bangladeshi youth through education, technology, and ethical practices, paving the way for sustainable progress.",
            mission:
              "To inspire and enable Bangladeshi students by providing free, accessible, and innovative resources in technology and programming, ensuring every learner has the tools to unlock their potential and contribute meaningfully to a prosperous and equitable society.",
            vision:
              "To establish a generation of confident, skilled, and ethical leaders who will drive innovation, unity, and sustainable progress, building a brighter future for Bangladesh while honoring the enduring legacy of Nobel Laureate Professor Muhammad Yunus.",
            key_features: {
              free_courses: "Interactive courses in HTML, CSS, Python, GitHub, and Data Science",
              learning_resources: ["Interactive Code Editors", "Downloadable Study Guides", "Video Tutorials"],
              community_support: "Forums, Discussion Boards, and Mentorship Programs",
              framework: "Transparent and Ethical Practices",
            },
            implementation_plan: {
              phase_1: {
                title: "Initial Planning and Strategy",
                objectives_finalization: [
                  "Determine the project's goals, purpose, and primary content",
                  "Plan strategies to attract students",
                  "Technological decisions: React.js (Frontend), Node.js (Backend), Hosting with Vercel",
                ],
                team_formation: [
                  "Recruit one Frontend Developer",
                  "Recruit one Backend Developer",
                  "Recruit one UI/UX Designer",
                  "Recruit one Project Manager",
                  "Recruit one Content Creator",
                ],
                timeline_setup: "Aim to complete the project within 3 months",
              },
              phase_2: {
                title: "Website Development",
                frontend_development: [
                  "Develop Landing Page",
                  "Develop Courses Page",
                  "Develop Community Section",
                  "Develop Contact Page",
                ],
                backend_development: ["Setup Database", "Implement Authentication (JWT/OAuth)", "Build RESTful APIs"],
                integration: "Establish proper connection between Frontend and Backend",
                testing: ["Conduct Beta Testing", "Fix Bugs"],
              },
              phase_3: {
                title: "Content Development",
                course_creation: ["Create simple and small courses on HTML, CSS, Python, and GitHub"],
                practice_tasks: ["Add beginner-level tasks for student practice"],
                resources: [
                  "Setup Interactive Code Editor",
                  "Provide Downloadable PDF Guides",
                  "Create Video Tutorials",
                ],
              },
              phase_4: {
                title: "Community Building",
                social_media_setup: ["Create LinkedIn and Facebook pages", "Add logo and cover images"],
                engagement_activities: ["Organize coding challenges", "Host mentorship programs"],
                forum_creation: "Develop Q&A platform for students",
              },
              phase_5: {
                title: "Launch and Promotion",
                website_hosting: "Host the website on Vercel",
                launch_event: ["Organize launch event on social media and community platforms"],
                marketing_campaign: ["Run promotions and media coverage targeting students"],
              },
            },
            budget_proposal: {
              estimated_budget_breakdown: [
                {
                  category: "Website Development",
                  cost: "$5,000",
                  details: "Frontend, Backend, Integration, Hosting",
                },
                {
                  category: "Content Creation",
                  cost: "$2,000",
                  details: "Course material, Video Tutorials, Resources",
                },
                {
                  category: "Team Salaries",
                  cost: "$10,000",
                  details: "Developers, Designers, Project Manager",
                },
                {
                  category: "Marketing",
                  cost: "$3,000",
                  details: "Social Media Ads, Community Promotion",
                },
                {
                  category: "Hosting and Tools",
                  cost: "$1,000",
                  details: "Vercel Hosting, Azure DevOps, Domain Costs",
                },
                {
                  category: "Miscellaneous Costs",
                  cost: "$1,000",
                  details: "Unexpected expenses and small adjustments",
                },
              ],
              total_estimated_budget: "$22,000",
            },
            expected_impact: [
              "Educate thousands of students nationwide",
              "Develop technical and leadership skills among the youth",
              "Create a network of innovators contributing to sustainable progress",
              "Establish a model for free, high-quality technical education",
              "Bridge the digital divide in Bangladesh",
            ],
            current_status: "In development phase, seeking funding and partnerships",
            website: "https://yunusinspire.org", // Placeholder URL
          },
          "Trusted Ally": {
            type: "Community Development Platform",
            description:
              "As the founder of Trusted Ally, I continue to create bridges between resources and communities, focusing on education and long-term development.",
            mission:
              "To serve as a trusted intermediary connecting communities with resources, expertise, and support systems needed for sustainable development.",
            links: {
              website: "https://tallybd.vercel.app",
              linkedin: "https://linkedin.com/company/tallybd",
            },
            key_features: [
              "Resource mapping and allocation",
              "Community needs assessment",
              "Educational program development",
              "Sustainable development initiatives",
              "Transparent governance models",
            ],
            current_status: "Operational with limited resources, seeking expansion funding",
          },
          "Transforming Cox's Bazar": {
            type: "Regional Development Initiative",
            description:
              "Trusted Ally is committed to transforming Cox's Bazar into an educated, model district through targeted projects and sustainable development initiatives over the next four years.",
            vision:
              "By 2028, we envision Cox's Bazar as a model district where education, sustainability, and community well-being flourish together. Through our targeted initiatives and collaborative approach, we aim to create lasting positive change that benefits all residents and serves as an inspiration for other coastal regions.",
            focus_areas: [
              "Educational infrastructure development",
              "Sustainable tourism practices",
              "Environmental conservation",
              "Digital literacy programs",
              "Community-led governance models",
            ],
            implementation_approach:
              "Phased, community-centered development with transparent governance and regular impact assessment",
            current_status: "Initial assessment phase completed, seeking partnerships and funding",
          },
          "Infinity Nexus": {
            type: "Data and Research Hub",
            vision:
              "Infinity Nexus is a global-standard data hub, originating in Cox's Bazar, Bangladesh, designed to collect, process, analyze, and secure data for scientific research, climate action, socio-economic progress, and AI-driven knowledge innovation. Built on advanced AI, blockchain security, quantum computing, and next-gen cloud infrastructure, this project will reshape global data accessibility and serve as a master command center for pioneering research in space, sustainability, and future technology.",
            goals: {
              short_term: [
                "Establish physical infrastructure in Cox's Bazar with high-tech data labs",
                "Develop AI-powered data collection and analytics pipelines",
                "Launch global partnerships with NASA, MIT, OpenAI, UN Climate Programs",
                "Implement Zero Trust Security Model & Blockchain-based Data Protection",
                "Deploy climate change forecasting models using AI & satellite imaging",
              ],
              mid_term: [
                "Expand to international collaboration hubs in different continents",
                "Introduce AI-powered educational platforms for global research communities",
                "Deploy IoT sensor networks for environmental data tracking",
                "Integrate Quantum Computing for large-scale scientific problem-solving",
                "Secure UN & World Bank funding to scale global environmental initiatives",
              ],
              long_term: [
                "Establish Infinity Nexus as a recognized scientific and technology institution",
                "Provide space research data to assist global interstellar projects",
                "Expand into autonomous AI-driven decision-making systems for global sustainability",
                "Transform Cox's Bazar into a World-Class Research Hub & Knowledge City",
                "Collaborate on human-centered AI models for ethical tech evolution",
              ],
            },
            impact: {
              national: [
                "Establish Bangladesh's first high-tech, AI-driven data research center",
                "Position Bangladesh as a leader in global scientific innovation",
                "Enhance climate change mitigation strategies with real-time environmental analysis",
                "Boost local technological expertise, creating thousands of research jobs",
              ],
              international: [
                "Develop a universal open-source data model for global research use",
                "Partner with space agencies, top universities, and AI think tanks",
                "Provide critical data for international scientific advancements in AI & sustainability",
                "Influence future global policymaking with AI-driven climate & social analytics",
              ],
            },
            current_status: "Conceptual phase, seeking initial seed funding and strategic partnerships",
          },
        },
        educational_resources: {
          overview: {
            title: "Open Source Learning Resources",
            description:
              "A comprehensive collection of learning projects designed specifically for Bangladeshi students. All resources are completely open source and freely available for educational purposes.",
            vision:
              "To empower Bangladeshi students with high-quality, accessible technology education that bridges the gap between theoretical knowledge and practical skills.",
            license: "MIT License",
            contribution_guidelines:
              "Contributions are welcome through GitHub. Please follow the project's contribution guidelines for submitting issues, feature requests, or pull requests.",
            how_to_use:
              "Each learning path is designed to be self-paced. Start with the beginner modules and progress through intermediate to advanced levels. Complete the projects at each stage to reinforce your learning.",
          },
          learning_paths: {
            json_mastery: {
              title: "JSON Mastery",
              description:
                "Learn to work with JSON data structures, parsing, validation, and integration with various programming languages.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "Introduction to JSON",
                      description: "Learn the basics of JSON syntax, structure, and common use cases.",
                      topics: [
                        "JSON syntax and data types",
                        "JSON vs XML",
                        "Creating valid JSON objects",
                        "JSON Arrays and Objects",
                      ],
                      project: "Create a personal profile in JSON format",
                      estimated_hours: 2,
                    },
                    {
                      title: "JSON Validation",
                      description: "Learn to validate JSON using online tools and programming libraries.",
                      topics: ["Common JSON errors", "JSON validation tools", "JSON schemas"],
                      project: "Create and validate a complex JSON structure with nested objects and arrays",
                      estimated_hours: 3,
                    },
                  ],
                  resources: [
                    "https://www.json.org/",
                    "https://jsonlint.com/",
                    "https://github.com/MJ-AHMAD/json-examples",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "Working with JSON in JavaScript",
                      description: "Learn to parse, manipulate and stringify JSON data in JavaScript.",
                      topics: [
                        "JSON.parse() and JSON.stringify()",
                        "Error handling when parsing JSON",
                        "Transforming JSON data",
                        "Working with deeply nested JSON",
                      ],
                      project: "Build a web page that loads and displays JSON data with dynamic filtering capabilities",
                      estimated_hours: 4,
                    },
                    {
                      title: "JSON and APIs",
                      description: "Learn how JSON is used in RESTful APIs and how to work with API responses.",
                      topics: [
                        "RESTful API concepts",
                        "Reading API documentation",
                        "Making API requests with fetch",
                        "Processing JSON API responses",
                      ],
                      project: "Create a weather dashboard using a public weather API",
                      estimated_hours: 5,
                    },
                  ],
                  resources: [
                    "https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON",
                    "https://www.w3schools.com/js/js_json_intro.asp",
                    "https://github.com/MJ-AHMAD/json-api-examples",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "JSON Schema and Validation",
                      description: "Learn to define and use JSON schemas for validation and documentation.",
                      topics: [
                        "Creating JSON schemas",
                        "Validation using AJV",
                        "JSON schema references",
                        "Complex validation scenarios",
                      ],
                      project: "Create a data validation system for a form with JSON schema",
                      estimated_hours: 6,
                    },
                    {
                      title: "Building JSON-based Database Solutions",
                      description: "Design and implement document databases using JSON.",
                      topics: [
                        "Document database concepts",
                        "JSON-based storage",
                        "Indexing JSON data",
                        "Query optimization",
                      ],
                      project: "Build a simple document database with JSON files",
                      estimated_hours: 8,
                    },
                  ],
                  resources: [
                    "https://json-schema.org/",
                    "https://github.com/ajv-validator/ajv",
                    "https://github.com/MJ-AHMAD/json-database-example",
                  ],
                },
              },
            },
            powershell: {
              title: "PowerShell Automation",
              description: "Master PowerShell for automation, system administration, and Windows management.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "PowerShell Basics",
                      description: "Introduction to PowerShell syntax, commands, and environment.",
                      topics: [
                        "PowerShell console and ISE",
                        "Basic cmdlets",
                        "PowerShell syntax",
                        "Variables and data types",
                      ],
                      project: "Create a script that inventories system information",
                      estimated_hours: 3,
                    },
                    {
                      title: "Working with Files and Folders",
                      description: "Learn to manage files and folders using PowerShell.",
                      topics: [
                        "Navigation cmdlets",
                        "Creating and removing files/folders",
                        "Reading and writing to files",
                        "File properties and attributes",
                      ],
                      project: "Build a file organization script that sorts files by type into folders",
                      estimated_hours: 4,
                    },
                  ],
                  resources: [
                    "https://learn.microsoft.com/en-us/powershell/scripting/overview",
                    "https://github.com/MJ-AHMAD/powershell-basics",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "PowerShell Scripting",
                      description: "Learn to write scripts with functions, loops, and conditional logic.",
                      topics: [
                        "Functions and parameters",
                        "Control flow (if/else, switch)",
                        "Loops (foreach, while, for)",
                        "Error handling",
                      ],
                      project: "Create a system health monitoring script with alerts",
                      estimated_hours: 6,
                    },
                    {
                      title: "PowerShell Modules",
                      description: "Learn to create and use PowerShell modules for code reuse.",
                      topics: [
                        "Module structure",
                        "Creating custom modules",
                        "Publishing and installing modules",
                        "Module versioning",
                      ],
                      project: "Develop a reusable module for file system operations",
                      estimated_hours: 5,
                    },
                  ],
                  resources: [
                    "https://learn.microsoft.com/en-us/powershell/scripting/developer/module/writing-a-windows-powershell-module",
                    "https://github.com/PowerShell/PowerShell",
                    "https://github.com/MJ-AHMAD/powershell-modules",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "PowerShell for DevOps",
                      description: "Advanced PowerShell for automation and DevOps scenarios.",
                      topics: [
                        "PowerShell DSC (Desired State Configuration)",
                        "Automated deployments",
                        "Infrastructure as Code",
                        "CI/CD integration",
                      ],
                      project: "Implement a complete server configuration solution using DSC",
                      estimated_hours: 10,
                    },
                    {
                      title: "PowerShell and Azure",
                      description: "Learn to manage Azure resources using PowerShell.",
                      topics: ["Azure PowerShell module", "Resource management", "Automation accounts", "Runbooks"],
                      project: "Build an Azure automation solution with PowerShell",
                      estimated_hours: 12,
                    },
                  ],
                  resources: [
                    "https://learn.microsoft.com/en-us/powershell/dsc/overview",
                    "https://github.com/MJ-AHMAD/powershell-devops",
                  ],
                },
              },
            },
            git_version_control: {
              title: "Git Version Control",
              description: "Master Git for version control, collaboration, and project management.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "Git Fundamentals",
                      description: "Learn the basic concepts and commands of Git.",
                      topics: [
                        "Repository initialization",
                        "Staging and committing",
                        "Viewing history",
                        "Git workflow",
                      ],
                      project: "Set up a Git repository for a personal website project",
                      estimated_hours: 3,
                    },
                    {
                      title: "Branching and Merging",
                      description: "Learn to work with branches for parallel development.",
                      topics: [
                        "Creating branches",
                        "Switching between branches",
                        "Merging branches",
                        "Resolving merge conflicts",
                      ],
                      project: "Implement a feature branch workflow for a simple project",
                      estimated_hours: 4,
                    },
                  ],
                  resources: [
                    "https://git-scm.com/book/en/v2",
                    "https://www.atlassian.com/git/tutorials",
                    "https://github.com/MJ-AHMAD/git-basics",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "Remote Repositories and Collaboration",
                      description: "Learn to work with remote repositories and collaborate with others.",
                      topics: [
                        "GitHub, GitLab, and Bitbucket",
                        "Pushing and pulling",
                        "Pull requests and code reviews",
                        "Collaborative workflows",
                      ],
                      project: "Contribute to an open source project on GitHub",
                      estimated_hours: 5,
                    },
                    {
                      title: "Git Best Practices",
                      description: "Learn best practices for effective Git usage.",
                      topics: ["Commit message conventions", "Repository structure", "Gitignore files", "Git hooks"],
                      project: "Set up a standardized Git workflow for a team project",
                      estimated_hours: 4,
                    },
                  ],
                  resources: [
                    "https://github.com/features/code-review/",
                    "https://www.conventionalcommits.org/",
                    "https://github.com/MJ-AHMAD/git-workflow-examples",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "Advanced Git Operations",
                      description: "Master complex Git operations and workflows.",
                      topics: ["Rebasing", "Cherry-picking", "Interactive rebase", "Submodules and subtrees"],
                      project: "Develop a complex Git workflow for a multi-module project",
                      estimated_hours: 8,
                    },
                    {
                      title: "Git Internals",
                      description: "Understand how Git works internally.",
                      topics: [
                        "Git objects and refs",
                        "The .git directory",
                        "Git plumbing commands",
                        "Custom Git commands",
                      ],
                      project: "Build a custom Git analytics tool",
                      estimated_hours: 10,
                    },
                  ],
                  resources: [
                    "https://git-scm.com/book/en/v2/Git-Internals-Plumbing-and-Porcelain",
                    "https://github.com/git/git",
                    "https://github.com/MJ-AHMAD/git-advanced-techniques",
                  ],
                },
              },
            },
            api_development: {
              title: "API Development",
              description: "Learn to design, build, and consume APIs for modern applications.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "API Fundamentals",
                      description: "Introduction to API concepts and architecture.",
                      topics: ["What are APIs", "REST principles", "HTTP methods", "API endpoints"],
                      project: "Design a simple API for a book library",
                      estimated_hours: 3,
                    },
                    {
                      title: "Consuming APIs",
                      description: "Learn to use existing APIs in your applications.",
                      topics: ["API authentication", "Making API requests", "Handling responses", "Error handling"],
                      project: "Build a weather dashboard using a public API",
                      estimated_hours: 5,
                    },
                  ],
                  resources: [
                    "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",
                    "https://github.com/public-apis/public-apis",
                    "https://github.com/MJ-AHMAD/api-basics",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "Building RESTful APIs",
                      description: "Learn to build your own RESTful APIs.",
                      topics: [
                        "API design principles",
                        "Resource modeling",
                        "CRUD operations",
                        "Authentication and authorization",
                      ],
                      project: "Develop a RESTful API for a blog platform",
                      estimated_hours: 8,
                    },
                    {
                      title: "API Testing and Documentation",
                      description: "Learn to test and document your APIs.",
                      topics: [
                        "Unit and integration testing",
                        "Postman and other tools",
                        "OpenAPI/Swagger",
                        "API versioning",
                      ],
                      project: "Add comprehensive tests and documentation to your blog API",
                      estimated_hours: 6,
                    },
                  ],
                  resources: [
                    "https://swagger.io/specification/",
                    "https://www.getpostman.com/",
                    "https://github.com/MJ-AHMAD/api-design-examples",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "GraphQL",
                      description: "Learn the GraphQL API query language and runtime.",
                      topics: ["GraphQL vs REST", "Schemas and types", "Queries and mutations", "Resolvers"],
                      project: "Convert a REST API to GraphQL",
                      estimated_hours: 10,
                    },
                    {
                      title: "API Security and Performance",
                      description: "Advanced techniques for secure and performant APIs.",
                      topics: ["OAuth 2.0 and JWT", "Rate limiting", "Caching strategies", "Performance optimization"],
                      project: "Implement advanced security and performance features for an existing API",
                      estimated_hours: 12,
                    },
                  ],
                  resources: [
                    "https://graphql.org/",
                    "https://oauth.net/2/",
                    "https://github.com/MJ-AHMAD/advanced-api-techniques",
                  ],
                },
              },
            },
            web_development: {
              title: "Web Development",
              description: "Master front-end and back-end technologies for modern web applications.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "HTML and CSS Fundamentals",
                      description: "Learn the building blocks of web pages.",
                      topics: [
                        "HTML document structure",
                        "Semantic HTML elements",
                        "CSS selectors and properties",
                        "Responsive design basics",
                      ],
                      project: "Create a personal portfolio website",
                      estimated_hours: 10,
                    },
                    {
                      title: "JavaScript Basics",
                      description: "Introduction to JavaScript programming for the web.",
                      topics: ["Variables and data types", "Functions and scope", "DOM manipulation", "Event handling"],
                      project: "Build an interactive form with validation",
                      estimated_hours: 8,
                    },
                  ],
                  resources: [
                    "https://developer.mozilla.org/en-US/docs/Web",
                    "https://www.w3schools.com/",
                    "https://github.com/MJ-AHMAD/web-dev-fundamentals",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "Responsive Web Design",
                      description: "Create websites that work on all devices.",
                      topics: [
                        "Flexbox and Grid",
                        "Media queries",
                        "Mobile-first approach",
                        "CSS frameworks (Bootstrap/Tailwind)",
                      ],
                      project: "Redesign your portfolio for full responsiveness",
                      estimated_hours: 12,
                    },
                    {
                      title: "Front-end Frameworks",
                      description: "Learn to build applications with modern frameworks.",
                      topics: ["React fundamentals", "Component architecture", "State management", "Routing"],
                      project: "Create a single-page application for a todo list",
                      estimated_hours: 15,
                    },
                  ],
                  resources: [
                    "https://reactjs.org/docs/getting-started.html",
                    "https://tailwindcss.com/docs",
                    "https://github.com/MJ-AHMAD/responsive-web-design",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "Full-Stack Development",
                      description: "Combine front-end and back-end skills for complete applications.",
                      topics: ["API integration", "Authentication systems", "Database design", "Deployment"],
                      project: "Build a full-featured social media platform",
                      estimated_hours: 25,
                    },
                    {
                      title: "Performance Optimization",
                      description: "Advanced techniques for optimizing web applications.",
                      topics: ["Code splitting", "Lazy loading", "Caching strategies", "Web vitals optimization"],
                      project: "Optimize an existing application for performance",
                      estimated_hours: 15,
                    },
                  ],
                  resources: [
                    "https://nextjs.org/docs",
                    "https://web.dev/",
                    "https://github.com/MJ-AHMAD/full-stack-projects",
                  ],
                },
              },
            },
            python_programming: {
              title: "Python Programming",
              description: "Learn Python from basics to advanced concepts for versatile application development.",
              author: "MJ Ahmad",
              levels: {
                beginner: {
                  modules: [
                    {
                      title: "Python Basics",
                      description: "Introduction to Python syntax and fundamental concepts.",
                      topics: [
                        "Variables and data types",
                        "Control flow (if/else, loops)",
                        "Functions and modules",
                        "Basic data structures",
                      ],
                      project: "Create a simple calculator application",
                      estimated_hours: 5,
                    },
                    {
                      title: "File Operations and Error Handling",
                      description: "Learn to work with files and handle errors in Python.",
                      topics: [
                        "Reading and writing files",
                        "Working with different file formats",
                        "Error handling with try/except",
                        "Context managers",
                      ],
                      project: "Build a log analysis tool",
                      estimated_hours: 4,
                    },
                  ],
                  resources: [
                    "https://docs.python.org/3/tutorial/",
                    "https://www.learnpython.org/",
                    "https://github.com/MJ-AHMAD/python-basics",
                  ],
                },
                intermediate: {
                  modules: [
                    {
                      title: "Object-Oriented Programming",
                      description: "Learn object-oriented programming principles in Python.",
                      topics: [
                        "Classes and objects",
                        "Inheritance and polymorphism",
                        "Encapsulation and abstraction",
                        "Magic methods",
                      ],
                      project: "Design a library management system with OOP principles",
                      estimated_hours: 8,
                    },
                    {
                      title: "Data Analysis with Python",
                      description: "Learn to analyze and visualize data with Python libraries.",
                      topics: [
                        "NumPy and Pandas",
                        "Data manipulation",
                        "Data visualization with Matplotlib and Seaborn",
                        "Basic statistical analysis",
                      ],
                      project: "Analyze a dataset and create a dashboard with insights",
                      estimated_hours: 10,
                    },
                  ],
                  resources: [
                    "https://pandas.pydata.org/docs/",
                    "https://numpy.org/doc/",
                    "https://github.com/MJ-AHMAD/python-data-analysis",
                  ],
                },
                advanced: {
                  modules: [
                    {
                      title: "Web Development with Flask/Django",
                      description: "Learn to build web applications with Python frameworks.",
                      topics: [
                        "MVC architecture",
                        "Routing and controllers",
                        "Templates and forms",
                        "Authentication and authorization",
                      ],
                      project: "Build a full-featured blog platform with user authentication",
                      estimated_hours: 15,
                    },
                    {
                      title: "Machine Learning with Python",
                      description: "Introduction to machine learning concepts and implementation.",
                      topics: [
                        "Scikit-learn library",
                        "Supervised learning",
                        "Unsupervised learning",
                        "Model evaluation",
                      ],
                      project: "Develop a predictive model for a real-world dataset",
                      estimated_hours: 20,
                    },
                  ],
                  resources: [
                    "https://flask.palletsprojects.com/",
                    "https://www.djangoproject.com/",
                    "https://scikit-learn.org/stable/documentation.html",
                    "https://github.com/MJ-AHMAD/python-advanced-projects",
                  ],
                },
              },
            },
          },
          community_projects: {
            open_source_initiatives: [
              {
                name: "Bangladesh Developers Hub",
                description:
                  "A collaborative platform for Bangladeshi developers to showcase projects, share knowledge, and connect with each other.",
                repository: "https://github.com/MJ-AHMAD/bd-dev-hub",
                how_to_contribute: "Contributions welcome through pull requests, documentation, or mentoring.",
              },
              {
                name: "Learning Resource Translator",
                description:
                  "A project to translate programming tutorials and documentation into Bengali for easier access by local students.",
                repository: "https://github.com/MJ-AHMAD/bengali-dev-docs",
                how_to_contribute: "Help with translation, proofreading, or adding new resources.",
              },
              {
                name: "Rural Tech Education",
                description:
                  "Initiatives to bring technology education to rural areas of Bangladesh through offline resources and workshops.",
                repository: "https://github.com/MJ-AHMAD/rural-tech-ed",
                how_to_contribute: "Develop offline-accessible learning materials or volunteer as a mentor.",
              },
            ],
            hackathons_and_events: [
              {
                name: "Bangladesh Code Jam",
                description:
                  "Annual coding competition for students across Bangladesh with focus on practical problem-solving.",
                date: "October 2025",
                registration_link: "https://bdcodejam.org",
              },
              {
                name: "Tech for Bangladesh",
                description: "Hackathon focused on developing solutions for local problems using technology.",
                date: "July 2025",
                registration_link: "https://techforbd.org",
              },
            ],
            student_groups: [
              {
                name: "Campus Code Club",
                description:
                  "Network of university coding clubs across Bangladesh, supported with resources and mentorship.",
                join_link: "https://campuscodeclub.bd",
                universities: ["Dhaka University", "BUET", "Chittagong University", "Rajshahi University"],
              },
              {
                name: "Young Innovators Bangladesh",
                description:
                  "Program for high school students to learn coding and participate in innovation challenges.",
                join_link: "https://younginnovatorsbd.org",
                age_group: "14-18 years",
              },
            ],
          },
        },
        products_and_services: {
          merchandise: [
            {
              id: "merch-001",
              name: "Men's Inspirational T-Shirt",
              description: "High-quality cotton t-shirt with inspirational message for men.",
              price: 24.99,
              currency: "USD",
              image: "/mens-tshirt.png",
              category: "Apparel",
              featured: true,
              details: {
                sizes: ["S", "M", "L", "XL", "XXL"],
                colors: ["Black", "White", "Navy Blue"],
                material: "100% Organic Cotton",
                careInstructions: "Machine wash cold, tumble dry low",
              },
            },
            {
              id: "merch-002",
              name: "Women's Inspirational T-Shirt",
              description: "High-quality cotton t-shirt with inspirational message for women.",
              price: 24.99,
              currency: "USD",
              image: "/womens-tshirt.png",
              category: "Apparel",
              featured: true,
              details: {
                sizes: ["XS", "S", "M", "L", "XL"],
                colors: ["Black", "White", "Pink", "Light Blue"],
                material: "100% Organic Cotton",
                careInstructions: "Machine wash cold, tumble dry low",
              },
            },
            {
              id: "merch-003",
              name: "Inspirational Mug",
              description: "Ceramic mug with motivational quote for your morning coffee.",
              price: 19.99,
              currency: "USD",
              image: "/inspirational-mug.png",
              category: "Merchandise",
              featured: true,
              details: {
                capacity: "11oz",
                material: "Ceramic",
                dishwasherSafe: true,
                microwaveSafe: true,
              },
            },
            {
              id: "merch-004",
              name: "Notebook Set",
              description: "Set of 3 eco-friendly notebooks with inspirational covers.",
              price: 15.99,
              currency: "USD",
              image: "/notebook-set.png",
              category: "Merchandise",
              featured: false,
              details: {
                pages: 80,
                size: "A5",
                material: "Recycled paper",
                includes: "3 notebooks with different designs",
              },
            },
            {
              id: "merch-005",
              name: "Inspirational Poster Set",
              description: "Set of 3 high-quality posters with motivational quotes and designs.",
              price: 29.99,
              currency: "USD",
              image: "/poster-set.png",
              category: "Merchandise",
              featured: false,
              details: {
                size: "18x24 inches",
                material: "Premium matte paper",
                includes: "3 posters with different designs",
              },
            },
            {
              id: "merch-006",
              name: "Tote Bag",
              description: "Eco-friendly canvas tote bag with inspirational design.",
              price: 18.99,
              currency: "USD",
              image: "/tote-bag.png",
              category: "Apparel",
              featured: false,
              details: {
                size: "15x16 inches",
                material: "100% Organic Canvas",
                washable: true,
                capacity: "Up to 22 lbs",
              },
            },
          ],
          memberships: [
            {
              id: "membership-001",
              name: "Corporate Membership",
              description:
                "Annual subscription for businesses to support educational initiatives and gain access to corporate workshops.",
              price: 499.99,
              currency: "USD",
              image: "/corporate-membership.png",
              category: "Membership",
              featured: true,
              details: {
                duration: "1 year",
                benefits: [
                  "Access to corporate workshops and training materials",
                  "Quarterly CSR consultation",
                  "Company logo on supporter page",
                  "Priority access to events",
                  "Custom workshop for employees",
                  "Impact reports for CSR documentation",
                ],
                renewalOption: true,
              },
            },
            {
              id: "membership-002",
              name: "Family Membership",
              description:
                "Annual membership for families to support educational initiatives and gain access to family events.",
              price: 149.99,
              currency: "USD",
              image: "/family-membership.png",
              category: "Membership",
              featured: false,
              details: {
                duration: "1 year",
                benefits: [
                  "Access to family events and workshops",
                  "Educational resources for children",
                  "Quarterly family activities",
                  "Discounts on merchandise",
                  "Priority registration for youth programs",
                ],
                renewalOption: true,
              },
            },
          ],
          tourism_experiences: [
            {
              id: "tour-001",
              name: "Weekend Beach Retreat",
              description: "A relaxing weekend at Cox's Bazar with guided meditation and beach activities.",
              price: 199.99,
              currency: "USD",
              image: "/beach-retreat.png",
              category: "Tourism",
              featured: true,
              details: {
                duration: "2 days, 1 night",
                includes: [
                  "Beachfront accommodation",
                  "Guided meditation sessions",
                  "Sunrise yoga",
                  "Beach bonfire",
                  "Local seafood dinner",
                ],
                groupSize: "5-15 people",
                availableDates: ["Every weekend from October to March"],
              },
            },
            {
              id: "tour-002",
              name: "Adventure Weekend",
              description: "An action-packed weekend exploring the natural wonders around Cox's Bazar.",
              price: 249.99,
              currency: "USD",
              image: "/adventure-weekend.png",
              category: "Tourism",
              featured: false,
              details: {
                duration: "2 days, 1 night",
                includes: [
                  "Hiking to Himchari National Park",
                  "Waterfall exploration",
                  "Kayaking",
                  "Beach camping",
                  "BBQ dinner",
                ],
                groupSize: "5-10 people",
                availableDates: ["First weekend of every month"],
              },
            },
            {
              id: "tour-003",
              name: "Cultural Experience Weekend",
              description: "Immerse yourself in the local culture and traditions of Cox's Bazar region.",
              price: 179.99,
              currency: "USD",
              image: "/cultural-weekend.png",
              category: "Tourism",
              featured: false,
              details: {
                duration: "2 days, 1 night",
                includes: [
                  "Visit to local fishing village",
                  "Traditional cooking class",
                  "Cultural performance",
                  "Handicraft workshop",
                  "Local market tour",
                ],
                groupSize: "5-12 people",
                availableDates: ["Last weekend of every month"],
              },
            },
            {
              id: "tour-004",
              name: "Family Fun Weekend",
              description: "A weekend of family-friendly activities and bonding at Cox's Bazar.",
              price: 299.99,
              currency: "USD",
              image: "/family-weekend.png",
              category: "Tourism",
              featured: false,
              details: {
                duration: "2 days, 1 night",
                includes: [
                  "Family accommodation",
                  "Beach games and competitions",
                  "Sandcastle building",
                  "Marine life education",
                  "Family dinner",
                ],
                groupSize: "2-3 families",
                availableDates: ["Second weekend of every month"],
              },
            },
          ],
          corporate_services: [
            {
              id: "service-001",
              type: "workshop",
              name: "Corporate Leadership Workshop",
              description: "Interactive workshop for developing ethical leadership skills in corporate teams.",
              price: 999.99,
              currency: "USD",
              image: "/corporate-workshop.png",
              category: "Workshop",
              featured: true,
              details: {
                duration: "1 day",
                participants: "Up to 20",
                topics: [
                  "Ethical decision-making",
                  "Transparent communication",
                  "Team building",
                  "Sustainable business practices",
                  "Corporate social responsibility",
                ],
                includes: ["Workshop materials", "Certificate of participation", "Follow-up consultation"],
                location: "On-site at your location (travel fees may apply)",
              },
            },
            {
              id: "service-002",
              type: "consulting",
              name: "CSR Development Program",
              description:
                "Customized consulting for companies to develop effective corporate social responsibility programs.",
              price: 1499.99,
              currency: "USD",
              image: "/csr-development.png",
              category: "Consulting",
              featured: false,
              details: {
                duration: "4 weeks",
                deliverables: [
                  "CSR assessment",
                  "Program design document",
                  "Implementation strategy",
                  "Impact measurement framework",
                  "2 follow-up consultations",
                ],
                format: "Virtual or in-person (Bangladesh only)",
              },
            },
            {
              id: "service-003",
              type: "mentorship",
              name: "Executive Mentorship Program",
              description:
                "One-on-one mentorship for executives focused on ethical leadership and sustainable business practices.",
              price: 799.99,
              currency: "USD",
              image: "/executive-mentorship.png",
              category: "Mentorship",
              featured: false,
              details: {
                duration: "3 months",
                sessions: "6 one-hour sessions",
                format: "Virtual meetings",
                focus: [
                  "Personal leadership development",
                  "Ethical decision-making",
                  "Sustainable business strategies",
                  "Community engagement",
                  "Impact assessment",
                ],
              },
            },
            {
              id: "service-004",
              type: "speaking",
              name: "Corporate Speaking Engagement",
              description:
                "Inspirational talks on ethical leadership, sustainability, and corporate social responsibility.",
              price: "Contact for pricing",
              currency: "USD",
              image: "/corporate-speaking.png",
              category: "Speaking",
              featured: false,
              details: {
                duration: "45-90 minutes",
                topics: [
                  "Ethical business practices",
                  "Corporate social responsibility",
                  "Sustainable business models",
                  "Community engagement",
                  "Leadership for positive change",
                ],
                includes: ["Customized presentation", "Q&A session", "Optional workshop component"],
                availability: "Limited - book in advance",
              },
            },
          ],
          mental_health_resources: {
            daily_practices: [
              "5-minute morning meditation",
              "Gratitude journaling",
              "Mindful breathing exercises",
              "Digital detox hour",
              "Evening reflection",
            ],
            weekly_activities: [
              "Nature walk or hike",
              "Creative expression (art, music, writing)",
              "Community service",
              "Social connection time",
              "Learning something new",
            ],
            resources: [
              {
                name: "Stress Management Guide",
                format: "PDF",
                description: "Comprehensive guide to managing stress in daily life",
              },
              {
                name: "Meditation Audio Series",
                format: "MP3",
                description: "Guided meditations for different situations and needs",
              },
              {
                name: "Wellbeing Journal Template",
                format: "PDF",
                description: "Structured journal template for tracking mental wellbeing",
              },
            ],
            support_contacts: {
              national_helpline: "+880 1234 567890",
              email_support: "mentalhealth@mjahmad.org",
              community_groups: ["Dhaka Wellness Circle", "Cox's Bazar Support Network", "Online Support Community"],
            },
          },
        },
        support_opportunities: {
          overview: {
            title: "Support MJ Ahmad's Vision and Initiatives",
            description:
              "Your support can help transform educational access and community development across Bangladesh. MJ Ahmad is currently facing health challenges and needs assistance to continue his impactful work.",
            impact_statement:
              "Every contribution directly supports the development and implementation of open source educational resources and community development initiatives that benefit thousands of students and community members across Bangladesh.",
            current_needs:
              "MJ Ahmad is currently seeking financial support for medical treatment and to sustain the ongoing development of educational resources and community initiatives.",
            transparency_commitment:
              "All contributions are managed with complete transparency. Regular updates on fund utilization and project progress are provided to all supporters.",
          },
          donation_options: [
            {
              id: "donation-001",
              type: "one-time",
              name: "One-Time Donation",
              description: "Support MJ Ahmad's initiatives with a one-time contribution of any amount.",
              suggestedAmounts: [10, 25, 50, 100],
              currency: "USD",
              image: "/donation-support.png",
              featured: true,
            },
            {
              id: "donation-002",
              type: "recurring",
              name: "Monthly Support",
              description: "Become a monthly supporter to help sustain ongoing projects and medical treatment.",
              suggestedAmounts: [10, 15, 25],
              currency: "USD",
              image: "/monthly-support.png",
              featured: true,
            },
            {
              id: "donation-003",
              type: "specific",
              name: "Support a Student",
              description: "Fund a student's education and technology training for one year.",
              amount: 250,
              currency: "USD",
              image: "/student-support.png",
              featured: false,
            },
            {
              id: "donation-004",
              type: "specific",
              name: "Medical Support Fund",
              description: "Contribute specifically to MJ Ahmad's medical treatment and recovery.",
              amount: 500,
              currency: "USD",
              image: "/medical-support.png",
              featured: true,
            },
          ],
          partnership_opportunities: [
            {
              type: "Educational Institution",
              description: "Partner with MJ Ahmad to implement educational programs and resources in your institution.",
              benefits: [
                "Access to comprehensive educational resources",
                "Customized training programs",
                "Technology integration support",
                "Student mentorship opportunities",
              ],
              contact_email: "partnerships@mjahmad.org",
            },
            {
              type: "Corporate Sponsorship",
              description:
                "Support open source educational initiatives as part of your corporate social responsibility.",
              benefits: [
                "Brand visibility on educational platforms",
                "Employee volunteer opportunities",
                "Impact reporting for CSR documentation",
                "Access to talent pipeline",
              ],
              contact_email: "corporate@mjahmad.org",
            },
            {
              type: "NGO Collaboration",
              description: "Collaborate on community development and educational initiatives.",
              benefits: [
                "Shared resources and expertise",
                "Expanded reach and impact",
                "Joint funding opportunities",
                "Technology integration support",
              ],
              contact_email: "ngo@mjahmad.org",
            },
          ],
          volunteer_opportunities: [
            {
              role: "Technical Mentor",
              description: "Guide students through technical learning paths and projects.",
              requirements: "Experience in software development, web development, or related fields.",
              time_commitment: "2-4 hours per week",
              contact_email: "volunteer@mjahmad.org",
            },
            {
              role: "Content Creator",
              description: "Develop educational content for various learning paths.",
              requirements: "Subject matter expertise and content creation skills.",
              time_commitment: "Flexible",
              contact_email: "content@mjahmad.org",
            },
            {
              role: "Community Organizer",
              description: "Help organize events, workshops, and community initiatives.",
              requirements: "Strong organizational and communication skills.",
              time_commitment: "4-6 hours per week during events",
              contact_email: "community@mjahmad.org",
            },
          ],
          testimonials: [
            {
              name: "Rahima Khan",
              role: "Student, Dhaka University",
              quote:
                "MJ Ahmad's resources helped me transition from a complete beginner to a confident web developer. The structured learning paths and practical projects made all the difference.",
              image: "/testimonials/rahima.jpg",
            },
            {
              name: "Abdul Karim",
              role: "Community Leader, Cox's Bazar",
              quote:
                "The Trusted Ally initiative has transformed how our community approaches education and development. MJ Ahmad's vision and dedication have inspired an entire generation.",
              image: "/testimonials/abdul.jpg",
            },
            {
              name: "Dr. Fatima Rahman",
              role: "Professor, BUET",
              quote:
                "The quality and accessibility of these open source educational resources are remarkable. They address a critical gap in our educational system and empower students regardless of their background.",
              image: "/testimonials/fatima.jpg",
            },
          ],
          impact_metrics: {
            students_reached: 5000,
            communities_impacted: 12,
            educational_resources_created: 250,
            volunteer_mentors: 45,
            success_stories: 120,
          },
        },
      },
      future_technology: {
        overview: {
          title: "Future Technology",
          subtitle: "Today in Bangladesh",
          description:
            "Experience the latest technological innovations and real-time data from the ISS as we take you into the future.",
        },
        iss_tracker: {
          title: "ISS Real-time Update",
          timestamp: "3:25:48 AM | 5/12/2025",
          description:
            "Experience the cutting-edge of space technology with our real-time data feed from the International Space Station.",
          location: {
            title: "ISS Location",
            subtitle: "Current position",
            latitude: -80.6789,
            longitude: -47.421,
            last_updated: "3:21:03 AM",
          },
          velocity: {
            title: "ISS Velocity",
            subtitle: "Current speed",
            speed: 27976.08,
            unit: "km/h",
            note: "Orbiting Earth every ~90 minutes",
            last_updated: "3:21:03 AM",
          },
          altitude: {
            title: "ISS Altitude",
            subtitle: "Current height",
            height: 409.37,
            unit: "km",
            note: "Above Earth's surface",
          },
          live_view: {
            title: "Live Earth View from ISS",
            description:
              "Experience a real-time view of our beautiful planet from the International Space Station as it orbits Earth, featuring stunning spacewalk footage.",
            stream_url: "https://livestream.nasa.gov/iss",
            fallback_image: "/iss-earth-view.jpg",
          },
        },
        bangladesh_tech_initiatives: {
          title: "Technology Initiatives in Bangladesh",
          description: "Discover cutting-edge technology projects and initiatives currently underway in Bangladesh.",
          featured_projects: [
            {
              name: "Digital Bangladesh Vision 2041",
              description:
                "A comprehensive national initiative to transform Bangladesh into a digitally advanced nation by 2041.",
              status: "In progress",
              key_areas: [
                "Smart city development",
                "Digital infrastructure expansion",
                "E-governance implementation",
                "Digital literacy programs",
                "Technology innovation hubs",
              ],
              website: "https://digitalbangladesh2041.gov.bd",
            },
            {
              name: "Bangladesh Satellite-2 Project",
              description:
                "Following the successful deployment of Bangabandhu Satellite-1, this project aims to expand Bangladesh's space capabilities.",
              status: "Planning phase",
              key_areas: [
                "Enhanced telecommunications coverage",
                "Earth observation capabilities",
                "Weather monitoring systems",
                "Disaster management support",
                "Research and development opportunities",
              ],
              expected_launch: "2027",
            },
            {
              name: "AI Research Center of Bangladesh",
              description:
                "A national center for artificial intelligence research and development to position Bangladesh as an AI innovation hub.",
              status: "Operational",
              key_areas: [
                "Natural language processing for Bengali",
                "Computer vision applications",
                "AI for agriculture optimization",
                "Healthcare AI solutions",
                "Smart manufacturing systems",
              ],
              location: "Dhaka University of Engineering & Technology",
            },
          ],
          upcoming_events: [
            {
              name: "Bangladesh Digital Summit 2025",
              date: "June 15-17, 2025",
              location: "Bangabandhu International Conference Center, Dhaka",
              description:
                "Annual gathering of technology leaders, innovators, and policymakers to showcase and discuss the latest technological advancements in Bangladesh.",
            },
            {
              name: "Space Technology Expo Bangladesh",
              date: "August 8-10, 2025",
              location: "Bangladesh Space Research and Remote Sensing Organization (SPARRSO), Dhaka",
              description:
                "Exhibition featuring space technology innovations, satellite applications, and opportunities for collaboration in space research.",
            },
            {
              name: "AI & Robotics Hackathon 2025",
              date: "September 22-24, 2025",
              location: "Bangladesh University of Engineering and Technology (BUET), Dhaka",
              description:
                "Competitive event challenging participants to develop innovative AI and robotics solutions for local problems.",
            },
          ],
        },
        space_education_initiatives: {
          title: "Space Education in Bangladesh",
          description:
            "Programs and resources designed to inspire the next generation of space scientists and engineers in Bangladesh.",
          programs: [
            {
              name: "Bangladesh Space Academy",
              target_audience: "High school and university students",
              description:
                "Educational program offering courses in astronomy, astrophysics, satellite technology, and space engineering.",
              activities: [
                "Hands-on workshops",
                "Observatory visits",
                "Space mission simulations",
                "Rocket building competitions",
                "International space camp exchanges",
              ],
              website: "https://spaceacademy.bd",
            },
            {
              name: "Young Astronomers Club of Bangladesh",
              target_audience: "Students aged 10-18",
              description:
                "Nationwide network of astronomy clubs fostering interest in space science through observation activities and educational programs.",
              activities: [
                "Star gazing events",
                "Telescope building workshops",
                "Space art competitions",
                "Astronomy quizzes",
                "Space documentary screenings",
              ],
              chapters: ["Dhaka", "Chittagong", "Rajshahi", "Khulna", "Sylhet"],
            },
            {
              name: "Bangladesh Space Research Foundation",
              target_audience: "Researchers and professionals",
              description:
                "Non-profit organization supporting space research and education through grants, scholarships, and public outreach.",
              initiatives: [
                "Research funding for space-related projects",
                "Scholarships for space science students",
                "Public lectures and seminars",
                "Publication of space science materials in Bengali",
                "Teacher training programs",
              ],
              established: "2020",
              headquarters: "Dhaka",
            },
          ],
          resources: {
            educational_materials: [
              {
                name: "Space Science in Bengali",
                type: "Book series",
                description:
                  "Comprehensive series of books covering astronomy, space exploration, and satellite technology in Bengali language.",
                publisher: "Bangladesh Space Research Foundation",
                available_at: ["Public libraries", "School libraries", "Online PDF downloads"],
              },
              {
                name: "Virtual Space Museum",
                type: "Interactive website",
                description:
                  "Digital platform featuring 3D models of spacecraft, virtual tours of the solar system, and educational games about space.",
                url: "https://virtualspacemuseum.bd",
                features: ["VR compatibility", "Mobile app version", "Offline downloadable content"],
              },
              {
                name: "Bangladesh in Space",
                type: "Documentary series",
                description:
                  "Series highlighting Bangladesh's journey in space exploration and satellite technology development.",
                episodes: 8,
                available_on: ["Bangladesh Television", "YouTube", "Educational institutions"],
              },
            ],
            observation_facilities: [
              {
                name: "National Space Observatory",
                location: "Nilgiri Hills, Bandarban",
                equipment: ["2-meter optical telescope", "Radio telescope array", "Solar observatory"],
                public_access: "Weekend tours and monthly observation nights",
                research_focus: "Stellar astronomy and exoplanet detection",
              },
              {
                name: "University Observatories Network",
                description: "Collaborative network of observatories at major universities across Bangladesh",
                participating_institutions: 7,
                shared_resources: true,
                student_access: "Integrated into astronomy and physics curricula",
              },
            ],
          },
        },
        future_tech_predictions: {
          title: "Technology Forecast for Bangladesh",
          description: "Predictions and trends for technological development in Bangladesh over the next decade.",
          key_trends: [
            {
              area: "Artificial Intelligence",
              prediction:
                "Bangladesh will become a regional hub for AI development, with specialized focus on Bengali language processing and agricultural applications.",
              timeline: "2025-2030",
              impact_level: "Transformative",
              key_drivers: [
                "Government investment in AI research centers",
                "Growing pool of AI specialists",
                "Industry-academia partnerships",
                "International collaboration opportunities",
              ],
            },
            {
              area: "Renewable Energy",
              prediction:
                "Solar and wind energy infrastructure will expand to cover 40% of Bangladesh's energy needs, with innovative floating solar farms addressing land scarcity issues.",
              timeline: "2025-2035",
              impact_level: "High",
              key_drivers: [
                "Climate change mitigation policies",
                "Decreasing costs of renewable technologies",
                "International climate funding",
                "Energy security concerns",
              ],
            },
            {
              area: "Space Technology",
              prediction:
                "Bangladesh will launch its second satellite and establish a comprehensive Earth observation program for climate monitoring and disaster management.",
              timeline: "2027-2030",
              impact_level: "Significant",
              key_drivers: [
                "Success of Bangabandhu Satellite-1",
                "Growing space technology expertise",
                "Climate vulnerability necessitating better monitoring",
                "Regional cooperation in space initiatives",
              ],
            },
            {
              area: "Digital Infrastructure",
              prediction:
                "Nationwide 5G coverage and expanded fiber optic networks will enable smart city implementations in all major urban centers.",
              timeline: "2025-2028",
              impact_level: "Transformative",
              key_drivers: [
                "Digital Bangladesh initiatives",
                "Private sector telecommunications investment",
                "Growing digital economy",
                "Urban development priorities",
              ],
            },
          ],
          challenges_and_opportunities: {
            challenges: [
              "Digital divide between urban and rural areas",
              "Cybersecurity vulnerabilities with increased connectivity",
              "Skilled workforce development to match technological growth",
              "Climate change impacts on infrastructure",
              "Regulatory frameworks keeping pace with technological change",
            ],
            opportunities: [
              "Leapfrogging older technologies to implement cutting-edge solutions",
              "Developing Bangladesh-specific technology solutions for local challenges",
              "Growing technology export sector, particularly in software and AI",
              "Technology-driven solutions for climate adaptation",
              "Digital inclusion creating new economic opportunities",
            ],
          },
        },
      },
    },
  },
}
[V0_FILE]typescriptreact:file="app/json-structure/page.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { ChevronDown, ChevronRight, Copy, Check, FileJson, Code } from "lucide-react"
import { updatedJsonStructure } from "@/lib/json-structure"

export default function JsonStructurePage() {
  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(["root", "root.MJ-AHMAD"]))
  const [isCopied, setIsCopied] = useState(false)

const handleCopy = () => {
    navigator.clipboard.writeText(JSON.stringify(updatedJsonStructure, null, 2))
    setIsCopied(true)
    setTimeout(() => {
      setIsCopied(false)
    }, 2000)
  }

const renderValue = (value: any, path: string, depth = 0) => {
    if (value === null) return <span className="text-gray-500">null</span>

if (typeof value === "object") {
      const isArray = Array.isArray(value)
      const isExpanded = expandedPaths.has(path)
      const keys = isArray ? [...Array(value.length).keys()] : Object.keys(value)
      const pathName = path.split(".").pop()

return (
        <div className={`ml-${depth * 4}`}>
          <div
            className="flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 p-1 rounded"
            onClick={() => togglePath(path)}
          >
            {isExpanded ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
            <span className="text-gray-700 dark:text-gray-300 font-medium mr-1">{pathName}:</span>
            <span className={isArray ? "text-purple-600 dark:text-purple-400" : "text-blue-600 dark:text-blue-400"}>
              {isArray ? "[" : "{"}
              {keys.length}
              {isArray ? "]" : "}"}
            </span>
          </div>

{isExpanded && (
            <div className="ml-4 border-l-2 pl-2 border-gray-200 dark:border-gray-700">
              {keys.map((key) => (
                <div key={`${path}.${key}`} className="my-1">
                  <span className={isArray ? "text-gray-500 mr-2" : "text-blue-600 dark:text-blue-400 mr-2"}>
                    {isArray ? key : `"${key}"`}
                    {!isArray && ":"}
                  </span>
                  {renderValue(value[key], `${path}.${key}`, depth + 1)}
                </div>
              ))}
            </div>
          )}
        </div>
      )
    }

// For primitive values
    if (typeof value === "string") {
      return <span className="text-green-600 dark:text-green-400">"{value}"</span>
    } else if (typeof value === "number") {
      return <span className="text-orange-600 dark:text-orange-400">{value}</span>
    } else if (typeof value === "boolean") {
      return <span className="text-purple-600 dark:text-purple-400">{String(value)}</span>
    }

return <span>{String(value)}</span>
  }

return (
    <div className="container mx-auto py-10 px-4">
      <div className="flex flex-col items-center justify-center space-y-4 text-center mb-8">
        <div className="space-y-2">
          <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl">JSON Structure</h1>
          <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
            Explore the complete data structure of the MJ-AHMAD platform
          </p>
        </div>
      </div>

<div className="grid gap-6 md:grid-cols-3 lg:gap-12">
        <div className="md:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle>Structure Overview</CardTitle>
              <CardDescription>The main sections of the JSON structure</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-primary"></div>
                  <div className="text-sm font-medium">Personal Information</div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-blue-500"></div>
                  <div className="text-sm font-medium">Professional Profile</div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-green-500"></div>
                  <div className="text-sm font-medium">Initiatives</div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-yellow-500"></div>
                  <div className="text-sm font-medium">Educational Resources</div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-purple-500"></div>
                  <div className="text-sm font-medium">Products & Services</div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 rounded-full bg-red-500"></div>
                  <div className="text-sm font-medium">Support Opportunities</div>
                </div>
              </div>

<div className="mt-6">
                <p className="text-sm text-muted-foreground">
                  The JSON structure is organized into two main sections under MJ-AHMAD:
                </p>
                <ul className="mt-2 space-y-1 text-sm list-disc list-inside">
                  <li>
                    <strong>Personal</strong> - Contains personal information, values, and contact details
                  </li>
                  <li>
                    <strong>Professional</strong> - Contains professional profile, initiatives, resources, products, and
                    support opportunities
                  </li>
                </ul>
              </div>

<Button className="w-full mt-6" onClick={handleCopy}>
                {isCopied ? <Check className="mr-2 h-4 w-4" /> : <Copy className="mr-2 h-4 w-4" />}
                {isCopied ? "Copied!" : "Copy Full JSON"}
              </Button>
            </CardContent>
          </Card>
        </div>

<div className="md:col-span-2">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>JSON Structure Explorer</CardTitle>
                <CardDescription>Interactive view of the complete data structure</CardDescription>
              </div>
              <div className="flex items-center space-x-2">
                <FileJson className="h-5 w-5 text-primary" />
                <Code className="h-5 w-5 text-muted-foreground" />
              </div>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="tree">
                <TabsList className="grid w-full grid-cols-2 mb-4">
                  <TabsTrigger value="tree">Tree View</TabsTrigger>
                  <TabsTrigger value="raw">Raw JSON</TabsTrigger>
                </TabsList>
                <TabsContent
                  value="tree"
                  className="p-4 border rounded-md bg-muted/30 min-h-[500px] max-h-[700px] overflow-auto"
                >
                  {renderValue(updatedJsonStructure, "root")}
                </TabsContent>
                <TabsContent
                  value="raw"
                  className="p-4 border rounded-md bg-muted/30 min-h-[500px] max-h-[700px] overflow-auto"
                >
                  <pre className="text-xs">{JSON.stringify(updatedJsonStructure, null, 2)}</pre>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      </div>

<div className="mt-12">
        <Card>
          <CardHeader>
            <CardTitle>Structure Details</CardTitle>
            <CardDescription>Explanation of key sections in the JSON structure</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg font-medium">Personal Section</h3>
                <p className="text-muted-foreground mt-1">
                  Contains all personal information, values, and contact details for MJ-AHMAD.
                </p>
                <ul className="mt-2 space-y-1 text-sm list-disc list-inside">
                  <li>
                    <strong>personal_information</strong> - Basic personal details, official documents, and contact
                    information
                  </li>
                  <li>
                    <strong>philosophy_and_values</strong> - Core values and personal message
                  </li>
                  <li>
                    <strong>my_core_values</strong> - Detailed list of core values with descriptions and icons
                  </li>
                  <li>
                    <strong>contact</strong> - Comprehensive contact information and preferences
                  </li>
                </ul>
              </div>

<div>
                <h3 className="text-lg font-medium">Professional Section</h3>
                <p className="text-muted-foreground mt-1">
                  Contains all professional information, initiatives, resources, products, and support opportunities.
                </p>
                <ul className="mt-2 space-y-1 text-sm list-disc list-inside">
                  <li>
                    <strong>professional_profile</strong> - Professional background, skills, and achievements
                  </li>
                  <li>
                    <strong>vision</strong> - Mission statement, long-term goals, and impact areas
                  </li>
                  <li>
                    <strong>flagship_initiatives</strong> - Key projects like Yunus Inspire, Trusted Ally, etc.
                  </li>
                  <li>
                    <strong>educational_resources</strong> - Free learning paths and community projects
                  </li>
                  <li>
                    <strong>products_and_services</strong> - Merchandise, memberships, tourism experiences, and
                    corporate services
                  </li>
                  <li>
                    <strong>support_opportunities</strong> - Ways to support MJ-AHMAD's vision and initiatives
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/mjahmad.png" url="https://sjc.microlink.io/oqp1jiUXMUN9q6UrlsfU0jhy4fomphyuRuPDyLXOmSFGgS7ffzQkWVqe_iAw-Wq2ESDOcdCNCotg-sVt34NA-g.jpeg"
[V0_FILE]typescriptreact:file="app/markdown-structure/markdown-structure-page-client.tsx" isFixed="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { Footer } from "@/components/footer"
import {
  FileText,
  Hash,
  ListOrdered,
  ListTree,
  ImageIcon,
  LinkIcon,
  Quote,
  Code,
  Table,
  Copy,
  Facebook,
  Linkedin,
  Globe,
  MessageSquare,
  Twitter,
} from "lucide-react"

function CopyButton({ text }: { text: string }) {
  return (
    <button
      onClick={() => {
        navigator.clipboard.writeText(text)
        // You could add a toast notification here
      }}
      className="absolute top-2 right-2 p-1.5 rounded-md bg-slate-700/50 hover:bg-slate-700/70 text-slate-200"
      aria-label="Copy to clipboard"
    >
      <Copy className="h-4 w-4" />
    </button>
  )
}

export default function MarkdownStructurePageClient() {
  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4">Markdown Structure Guide</h1>
            <p className="text-xl text-muted-foreground">
              A comprehensive reference for creating well-structured documentation using Markdown
            </p>
          </div>

<div className="space-y-12">
            {/* Introduction Section */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Introduction to Markdown</h2>
              <div className="prose dark:prose-invert max-w-none">
                <p>
                  Markdown is a lightweight markup language with plain text formatting syntax designed to be converted
                  to HTML and many other formats. It's widely used for documentation, README files, forum posts, and
                  more due to its simplicity and readability.
                </p>
                <p>
                  This guide provides a comprehensive overview of Markdown syntax and best practices for creating
                  well-structured documentation.
                </p>
              </div>
            </section>

{/* Content Templates Section */}
            <section id="content-templates">
              <h2 className="text-2xl font-semibold mb-6">Content Templates</h2>
              <p className="mb-6">
                Ready-to-use content templates for various platforms. Simply click the copy button and paste into your
                desired platform.
              </p>

<div className="space-y-8">
                {/* Facebook Templates */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Facebook className="h-5 w-5 mr-2 text-blue-600" />
                    <h3 className="text-xl font-medium">Facebook Templates</h3>
                  </div>

{/* Standard Post */}
                  <div className="mb-6">
                    <h4 className="font-medium mb-2">Standard Post</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`📢 Exciting news to share!

I'm thrilled to announce [your announcement]. This is a significant milestone for [context about why this matters].

Key highlights:
• [Point 1]
• [Point 2]
• [Point 3]

I'd like to thank [people or organizations to thank] for their support throughout this journey.

What are your thoughts? Let me know in the comments below!

#[Hashtag1] #[Hashtag2] #[Hashtag3]`}</code>
                      </pre>
                      <CopyButton
                        text={`📢 Exciting news to share!

I'm thrilled to announce [your announcement]. This is a significant milestone for [context about why this matters].

Key highlights:
• [Point 1]
• [Point 2]
• [Point 3]

I'd like to thank [people or organizations to thank] for their support throughout this journey.

What are your thoughts? Let me know in the comments below!

#[Hashtag1] #[Hashtag2] #[Hashtag3]`}
                      />
                    </div>
                  </div>

{/* Event Announcement */}
                  <div>
                    <h4 className="font-medium mb-2">Event Announcement</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`🗓️ SAVE THE DATE: [Event Name]

Join us for [brief description of event] on [date] at [time] at [location/platform].

What to expect:
• [Feature 1]
• [Feature 2]
• [Feature 3]

Registration details: [link or instructions]

Don't miss this opportunity to [benefit of attending]!

Tag a friend who would be interested! 👇

#[EventHashtag] #[Hashtag2] #[Hashtag3]`}</code>
                      </pre>
                      <CopyButton
                        text={`🗓️ SAVE THE DATE: [Event Name]

Join us for [brief description of event] on [date] at [time] at [location/platform].

What to expect:
• [Feature 1]
• [Feature 2]
• [Feature 3]

Registration details: [link or instructions]

Don't miss this opportunity to [benefit of attending]!

Tag a friend who would be interested! 👇

#[EventHashtag] #[Hashtag2] #[Hashtag3]`}
                      />
                    </div>
                  </div>
                </div>

{/* LinkedIn Templates */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Linkedin className="h-5 w-5 mr-2 text-blue-700" />
                    <h3 className="text-xl font-medium">LinkedIn Templates</h3>
                  </div>

{/* Professional Update */}
                  <div className="mb-6">
                    <h4 className="font-medium mb-2">Professional Update</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`I'm excited to share that [your update]! 🎉

Over the past [timeframe], I've been [what you've been doing], and today marks an important milestone in my professional journey.

What I've learned along the way:
1. [Lesson 1]
2. [Lesson 2]
3. [Lesson 3]

I'm grateful to [people or organizations to thank] for their support and guidance.

What's next: [your next steps or goals]

I'd love to hear about your experiences with [related topic]. Comment below or message me directly!

#[ProfessionalHashtag] #[IndustryHashtag] #[CareerDevelopment]`}</code>
                      </pre>
                      <CopyButton
                        text={`I'm excited to share that [your update]! 🎉

Over the past [timeframe], I've been [what you've been doing], and today marks an important milestone in my professional journey.

What I've learned along the way:
1. [Lesson 1]
2. [Lesson 2]
3. [Lesson 3]

I'm grateful to [people or organizations to thank] for their support and guidance.

What's next: [your next steps or goals]

I'd love to hear about your experiences with [related topic]. Comment below or message me directly!

#[ProfessionalHashtag] #[IndustryHashtag] #[CareerDevelopment]`}
                      />
                    </div>
                  </div>

{/* Article Post */}
                  <div>
                    <h4 className="font-medium mb-2">Article Introduction</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`📝 I've just published a new article on [topic]

In this piece, I explore:
• [Key point 1]
• [Key point 2]
• [Key point 3]

Why this matters: [brief explanation of significance]

I'd appreciate your thoughts and feedback! Read the full article here: [link]

Special thanks to [acknowledgments] for their insights that contributed to this piece.

#[ContentHashtag] #[IndustryHashtag] #[ThoughtLeadership]`}</code>
                      </pre>
                      <CopyButton
                        text={`📝 I've just published a new article on [topic]

In this piece, I explore:
• [Key point 1]
• [Key point 2]
• [Key point 3]

Why this matters: [brief explanation of significance]

I'd appreciate your thoughts and feedback! Read the full article here: [link]

Special thanks to [acknowledgments] for their insights that contributed to this piece.

#[ContentHashtag] #[IndustryHashtag] #[ThoughtLeadership]`}
                      />
                    </div>
                  </div>
                </div>

{/* Blog Post Templates */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Globe className="h-5 w-5 mr-2 text-green-600" />
                    <h3 className="text-xl font-medium">Blog Post Templates</h3>
                  </div>

{/* How-To Article */}
                  <div className="mb-6">
                    <h4 className="font-medium mb-2">How-To Article</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`# How to [Accomplish Task] in [Number] Simple Steps

![Featured Image Alt Text](image-url.jpg)

## Introduction

In this guide, I'll walk you through the process of [accomplishing task]. By the end of this article, you'll be able to [benefit or outcome].

## Why This Matters

[Explain the importance or relevance of the topic]

## Prerequisites

Before we begin, make sure you have:
- [Requirement 1]
- [Requirement 2]
- [Requirement 3]

## Step 1: [First Step]

[Detailed explanation of the first step]

\`\`\`
[Code example if applicable]
\`\`\`

## Step 2: [Second Step]

[Detailed explanation of the second step]

![Step 2 Image Alt Text](step2-image-url.jpg)

## Step 3: [Third Step]

[Detailed explanation of the third step]

> Pro tip: [Helpful advice related to this step]

## Step 4: [Fourth Step]

[Detailed explanation of the fourth step]

## Common Challenges and Solutions

### Challenge 1: [Common Problem]
Solution: [How to solve it]

### Challenge 2: [Another Common Problem]
Solution: [How to solve it]

## Conclusion

Now you've successfully [accomplished task]. Remember that [important takeaway or reminder].

## Next Steps

Consider exploring these related topics:
- [Related Topic 1]
- [Related Topic 2]
- [Related Topic 3]

## Questions?

Leave a comment below if you have any questions or run into any issues!

*Last updated: [Date]*`}</code>
                      </pre>
                      <CopyButton
                        text={`# How to [Accomplish Task] in [Number] Simple Steps

![Featured Image Alt Text](image-url.jpg)

## Introduction

In this guide, I'll walk you through the process of [accomplishing task]. By the end of this article, you'll be able to [benefit or outcome].

## Why This Matters

[Explain the importance or relevance of the topic]

## Prerequisites

Before we begin, make sure you have:
- [Requirement 1]
- [Requirement 2]
- [Requirement 3]

## Step 1: [First Step]

[Detailed explanation of the first step]

\`\`\`
[Code example if applicable]
\`\`\`

## Step 2: [Second Step]

[Detailed explanation of the second step]

![Step 2 Image Alt Text](step2-image-url.jpg)

## Step 3: [Third Step]

[Detailed explanation of the third step]

> Pro tip: [Helpful advice related to this step]

## Step 4: [Fourth Step]

[Detailed explanation of the fourth step]

## Common Challenges and Solutions

### Challenge 1: [Common Problem]
Solution: [How to solve it]

### Challenge 2: [Another Common Problem]
Solution: [How to solve it]

## Conclusion

Now you've successfully [accomplished task]. Remember that [important takeaway or reminder].

## Next Steps

Consider exploring these related topics:
- [Related Topic 1]
- [Related Topic 2]
- [Related Topic 3]

## Questions?

Leave a comment below if you have any questions or run into any issues!

*Last updated: [Date]*`}
                      />
                    </div>
                  </div>

{/* Opinion/Analysis Post */}
                  <div>
                    <h4 className="font-medium mb-2">Opinion/Analysis Post</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`# [Provocative Title: Opinion or Analysis on Topic]

![Featured Image Alt Text](image-url.jpg)

## Introduction

[Opening hook that introduces your perspective on the topic]

## The Current Landscape

[Overview of the current situation or conventional wisdom about the topic]

## Key Observations

### 1. [First Major Point]

[Detailed explanation with evidence or examples]

### 2. [Second Major Point]

[Detailed explanation with evidence or examples]

### 3. [Third Major Point]

[Detailed explanation with evidence or examples]

## Common Misconceptions

[Address and correct prevalent misconceptions about the topic]

## Looking Ahead

[Your predictions or recommendations for the future]

## Conclusion

[Summarize your main arguments and leave readers with a thought-provoking closing statement]

## References

1. [Citation 1]
2. [Citation 2]
3. [Citation 3]

*Disclaimer: The opinions expressed in this post are my own and do not necessarily reflect the views of my employer or any organizations I'm affiliated with.*`}</code>
                      </pre>
                      <CopyButton
                        text={`# [Provocative Title: Opinion or Analysis on Topic]

![Featured Image Alt Text](image-url.jpg)

## Introduction

[Opening hook that introduces your perspective on the topic]

## The Current Landscape

[Overview of the current situation or conventional wisdom about the topic]

## Key Observations

### 1. [First Major Point]

[Detailed explanation with evidence or examples]

### 2. [Second Major Point]

[Detailed explanation with evidence or examples]

### 3. [Third Major Point]

[Detailed explanation with evidence or examples]

## Common Misconceptions

[Address and correct prevalent misconceptions about the topic]

## Looking Ahead

[Your predictions or recommendations for the future]

## Conclusion

[Summarize your main arguments and leave readers with a thought-provoking closing statement]

## References

1. [Citation 1]
2. [Citation 2]
3. [Citation 3]

*Disclaimer: The opinions expressed in this post are my own and do not necessarily reflect the views of my employer or any organizations I'm affiliated with.*`}
                      />
                    </div>
                  </div>
                </div>

{/* Twitter/X Templates */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Twitter className="h-5 w-5 mr-2 text-blue-400" />
                    <h3 className="text-xl font-medium">Twitter/X Templates</h3>
                  </div>

{/* Thread Starter */}
                  <div className="mb-6">
                    <h4 className="font-medium mb-2">Thread Starter</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`🧵 [Number] insights about [Topic] that will change how you think about [Related Area]:

1/[Total] [First insight with strong hook]`}</code>
                      </pre>
                      <CopyButton
                        text={`🧵 [Number] insights about [Topic] that will change how you think about [Related Area]:

1/[Total] [First insight with strong hook]`}
                      />
                    </div>
                  </div>

{/* Thread Continuation */}
                  <div>
                    <h4 className="font-medium mb-2">Thread Continuation (Numbered Tweets)</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`2/[Total] [Second insight]

[Expand on the point with evidence, example, or story]

3/[Total] [Third insight]

[Expand on the point with evidence, example, or story]

...

[Total]/[Total] [Final insight or conclusion]

[Call to action, question, or invitation for engagement]

Like and retweet if you found this useful!

#[Hashtag1] #[Hashtag2]`}</code>
                      </pre>
                      <CopyButton
                        text={`2/[Total] [Second insight]

[Expand on the point with evidence, example, or story]

3/[Total] [Third insight]

[Expand on the point with evidence, example, or story]

...

[Total]/[Total] [Final insight or conclusion]

[Call to action, question, or invitation for engagement]

Like and retweet if you found this useful!

#[Hashtag1] #[Hashtag2]`}
                      />
                    </div>
                  </div>
                </div>

{/* Email Newsletter Templates */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <MessageSquare className="h-5 w-5 mr-2 text-purple-600" />
                    <h3 className="text-xl font-medium">Email Newsletter Templates</h3>
                  </div>

{/* Monthly Update */}
                  <div>
                    <h4 className="font-medium mb-2">Monthly Update</h4>
                    <div className="relative">
                      <pre className="bg-slate-100 dark:bg-slate-800 p-4 rounded overflow-x-auto">
                        <code>{`Subject: [Month] Update: [Key Highlight or Theme]

Hi [First Name],

I hope this email finds you well. Here's what's been happening in [Month]:

## What's New

• [Update 1]: [Brief description]
• [Update 2]: [Brief description]
• [Update 3]: [Brief description]

## Featured Content

This month's highlight: [Title of featured content]

[Brief description of why this content is valuable and what readers will learn]

[Read More/Watch Now/Listen Here] → [Link]

## Coming Soon

Here's what to look forward to next month:

• [Upcoming item 1]
• [Upcoming item 2]
• [Upcoming item 3]

## Resource of the Month

[Name of resource]: [Brief description]

[Get Access] → [Link]

## Final Thoughts

[Personal note or reflection related to the month's theme]

As always, I appreciate your support and would love to hear your thoughts. Just reply to this email to share your feedback.

Until next time,

[Your Name]

P.S. [Call to action or special announcement]`}</code>
                      </pre>
                      <CopyButton
                        text={`Subject: [Month] Update: [Key Highlight or Theme]

Hi [First Name],

I hope this email finds you well. Here's what's been happening in [Month]:

## What's New

• [Update 1]: [Brief description]
• [Update 2]: [Brief description]
• [Update 3]: [Brief description]

## Featured Content

This month's highlight: [Title of featured content]

[Brief description of why this content is valuable and what readers will learn]

[Read More/Watch Now/Listen Here] → [Link]

## Coming Soon

Here's what to look forward to next month:

• [Upcoming item 1]
• [Upcoming item 2]
• [Upcoming item 3]

## Resource of the Month

[Name of resource]: [Brief description]

[Get Access] → [Link]

## Final Thoughts

[Personal note or reflection related to the month's theme]

As always, I appreciate your support and would love to hear your thoughts. Just reply to this email to share your feedback.

Until next time,

[Your Name]

P.S. [Call to action or special announcement]`}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </section>

{/* Basic Syntax Section */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Basic Syntax</h2>

<div className="grid gap-8 md:grid-cols-2">
                {/* Headers */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Hash className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Headers</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Use # symbols to create headings:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6`}</code>
                    </pre>
                  </div>
                </div>

{/* Emphasis */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <FileText className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Emphasis</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Format text with emphasis:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`*Italic text*
_Also italic text_

**Bold text**
__Also bold text__

***Bold and italic***
**_Also bold and italic_**`}</code>
                    </pre>
                  </div>
                </div>

{/* Lists */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <ListOrdered className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Lists</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create ordered and unordered lists:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`Unordered list:
- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
- Item 3

Ordered list:
1. First item
2. Second item
3. Third item`}</code>
                    </pre>
                  </div>
                </div>

{/* Links */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <LinkIcon className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Links</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create links to other resources:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`[Link text](https://example.com)

[Link with title](https://example.com "Title")

Reference-style links:
[link text][reference]

[reference]: https://example.com`}</code>
                    </pre>
                  </div>
                </div>

{/* Images */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <ImageIcon className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Images</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Insert images:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`![Alt text](image-url.jpg)

![Alt text](image-url.jpg "Optional title")

Reference-style:
![Alt text][image-id]

[image-id]: image-url.jpg "Optional title"`}</code>
                    </pre>
                  </div>
                </div>

{/* Blockquotes */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Quote className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Blockquotes</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create blockquotes:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`> This is a blockquote
> 
> It can span multiple lines

Nested blockquotes:
> Outer quote
>> Nested quote`}</code>
                    </pre>
                  </div>
                </div>
              </div>
            </section>

{/* Advanced Syntax Section */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Advanced Syntax</h2>

<div className="grid gap-8 md:grid-cols-2">
                {/* Code Blocks */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Code className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Code Blocks</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Format code with syntax highlighting:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`Inline code: \`code\`

Code block with backticks:
\`\`\`javascript
function example() {
  console.log("Hello, world!");
}
\`\`\`

Indented code block:
    // This is a code block
    function example() {
      return true;
    }`}</code>
                    </pre>
                  </div>
                </div>

{/* Tables */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <Table className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Tables</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create tables:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Alignment:
| Left     | Center   | Right    |
| :------- | :------: | -------: |
| Left     | Center   | Right    |`}</code>
                    </pre>
                  </div>
                </div>

{/* Task Lists */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <ListTree className="h-5 w-5 mr-2 text-primary" />
                    <h3 className="text-xl font-medium">Task Lists</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create task lists with checkboxes:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`- [x] Completed task
- [ ] Incomplete task
- [ ] Another task
  - [x] Completed subtask
  - [ ] Incomplete subtask`}</code>
                    </pre>
                  </div>
                </div>

{/* Horizontal Rules */}
                <div className="bg-slate-50 dark:bg-slate-900 p-6 rounded-lg border">
                  <div className="flex items-center mb-4">
                    <div className="h-5 w-5 mr-2 text-primary flex items-center justify-center">—</div>
                    <h3 className="text-xl font-medium">Horizontal Rules</h3>
                  </div>
                  <div className="prose dark:prose-invert max-w-none">
                    <p>Create horizontal rules:</p>
                    <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded overflow-x-auto">
                      <code>{`Three or more of:

---
***
___`}</code>
                    </pre>
                  </div>
                </div>
              </div>
            </section>

{/* Best Practices Section */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Best Practices</h2>
              <div className="prose dark:prose-invert max-w-none">
                <ul>
                  <li>Use headers to create a clear document structure</li>
                  <li>Keep paragraphs concise and focused on a single topic</li>
                  <li>Use lists to organize related items</li>
                  <li>Include code blocks with appropriate syntax highlighting</li>
                  <li>Add descriptive alt text to images</li>
                  <li>Use tables to present structured data</li>
                  <li>Include links to relevant resources</li>
                  <li>Use consistent formatting throughout your document</li>
                </ul>
              </div>
            </section>

{/* Resources Section */}
            <section>
              <h2 className="text-2xl font-semibold mb-4">Additional Resources</h2>
              <div className="prose dark:prose-invert max-w-none">
                <ul>
                  <li>
                    <a href="https://www.markdownguide.org/" target="_blank" rel="noopener noreferrer">
                      Markdown Guide
                    </a>{" "}
                    - Comprehensive documentation
                  </li>
                  <li>
                    <a href="https://github.github.com/gfm/" target="_blank" rel="noopener noreferrer">
                      GitHub Flavored Markdown
                    </a>{" "}
                    - GitHub's Markdown specification
                  </li>
                  <li>
                    <a href="https://dillinger.io/" target="_blank" rel="noopener noreferrer">
                      Dillinger
                    </a>{" "}
                    - Online Markdown editor
                  </li>
                  <li>
                    <a href="https://stackedit.io/" target="_blank" rel="noopener noreferrer">
                      StackEdit
                    </a>{" "}
                    - In-browser Markdown editor
                  </li>
                </ul>
              </div>
            </section>
          </div>

<div className="mt-12 text-center">
            <Link
              href="/"
              className="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              Return to Home
            </Link>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/markdown-structure/page.tsx" isFixed="true" isQuickEdit="true"
import type { Metadata } from "next"
import MarkdownStructurePageClient from "./markdown-structure-page-client"

export const metadata: Metadata = {
  title: "Markdown Structure Guide | MJ-AHMAD",
  description: "Comprehensive guide to Markdown syntax and structure for documentation",
}

export default function MarkdownStructurePage() {
  return <MarkdownStructurePageClient />
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/feedback-system/feedback-form.tsx"
"use client"

import { useState } from "react"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { toast } from "@/hooks/use-toast"
import { Loader2, Send } from "lucide-react"

const feedbackFormSchema = z.object({
  type: z.string({
    required_error: "Please select a feedback type",
  }),
  subject: z.string().min(5, {
    message: "Subject must be at least 5 characters.",
  }),
  message: z.string().min(10, {
    message: "Message must be at least 10 characters.",
  }),
  attachments: z.any().optional(),
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
})

type FeedbackFormValues = z.infer<typeof feedbackFormSchema>

const defaultValues: Partial<FeedbackFormValues> = {
  type: "",
  subject: "",
  message: "",
  email: "",
  name: "",
}

export function FeedbackForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)

const form = useForm<FeedbackFormValues>({
    resolver: zodResolver(feedbackFormSchema),
    defaultValues,
  })

async function onSubmit(data: FeedbackFormValues) {
    setIsSubmitting(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

// Generate unique tracking ID
      const trackingId = `FB-${Math.floor(100000 + Math.random() * 900000)}`

console.log("Submitted data:", { ...data, trackingId })

toast({
        title: "Feedback submitted successfully",
        description: `Your tracking ID is ${trackingId}. We'll respond within 48 hours.`,
      })

form.reset()
    } catch (error) {
      toast({
        title: "Error submitting feedback",
        description: "Please try again later.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Submit Feedback</CardTitle>
        <CardDescription>
          Share your complaints, suggestions, or comments with us. We value your input and will respond promptly.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Full Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter your full name" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input placeholder="your@email.com" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

<FormField
              control={form.control}
              name="type"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Feedback Type</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select feedback type" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="complaint">Complaint</SelectItem>
                      <SelectItem value="suggestion">Suggestion</SelectItem>
                      <SelectItem value="advice">Advice</SelectItem>
                      <SelectItem value="comment">Comment</SelectItem>
                      <SelectItem value="question">Question</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="subject"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Subject</FormLabel>
                  <FormControl>
                    <Input placeholder="Brief subject of your feedback" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="message"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Message</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="Provide detailed information about your feedback"
                      className="min-h-[150px]"
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>
                    Please include any relevant details to help us understand and address your feedback properly.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={form.control}
              name="attachments"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Attachments (Optional)</FormLabel>
                  <FormControl>
                    <Input
                      type="file"
                      multiple
                      onChange={(e) => {
                        field.onChange(e.target.files)
                      }}
                    />
                  </FormControl>
                  <FormDescription>
                    You can attach files (images, documents) to provide additional context.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

<Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Submitting...
                </>
              ) : (
                <>
                  <Send className="mr-2 h-4 w-4" />
                  Submit Feedback
                </>
              )}
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex flex-col text-xs text-muted-foreground">
        <p>
          Your feedback is important to us. All submissions are reviewed within 48 hours. You will receive a
          confirmation email with a tracking ID for reference.
        </p>
        <p className="mt-1">
          We respect your privacy. Information submitted will only be used to address your feedback.
        </p>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/feedback-system/feedback-tracker.tsx"
"use client"

const trackerFormSchema = z.object({
  trackingId: z.string().regex(/^FB-\d{6}$/, {
    message: "Please enter a valid tracking ID (Format: FB-XXXXXX)",
  }),
})

type TrackerFormValues = z.infer<typeof trackerFormSchema>

// Mock data for demonstration
const mockFeedbackData = {
  "FB-123456": {
    type: "complaint",
    subject: "Website Navigation Issue",
    status: "in-progress",
    submitted: "2023-05-15T10:30:00",
    lastUpdated: "2023-05-16T14:22:00",
    responseTime: "24 hours",
    assignedTo: "Support Team",
    response: "We are investigating the navigation issues you reported and will implement a fix in our next update.",
  },
  "FB-234567": {
    type: "suggestion",
    subject: "New Feature Proposal",
    status: "under-review",
    submitted: "2023-05-10T09:15:00",
    lastUpdated: "2023-05-12T11:45:00",
    responseTime: "48 hours",
    assignedTo: "Product Team",
    response: "Your suggestion is being evaluated by our product team for potential implementation in future releases.",
  },
  "FB-345678": {
    type: "complaint",
    subject: "Payment Processing Error",
    status: "resolved",
    submitted: "2023-05-08T16:20:00",
    lastUpdated: "2023-05-09T10:30:00",
    responseTime: "18 hours",
    assignedTo: "Finance Team",
    response:
      "The payment processing error has been resolved. We've implemented additional error handling to prevent this issue in the future.",
  },
}

const statusColors: Record<FeedbackStatus, string> = {
  pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
  "in-progress": "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
  "under-review": "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
  resolved: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
  closed: "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400",
  "not-found": "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
}

export function FeedbackTracker() {
  const [isSearching, setIsSearching] = useState(false)
  const [feedbackResult, setFeedbackResult] = useState<any>(null)
  const [resultStatus, setResultStatus] = useState<FeedbackStatus | null>(null)

const form = useForm<TrackerFormValues>({
    resolver: zodResolver(trackerFormSchema),
    defaultValues: {
      trackingId: "",
    },
  })

async function onSubmit(data: TrackerFormValues) {
    setIsSearching(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const result = mockFeedbackData[data.trackingId as keyof typeof mockFeedbackData]

if (result) {
        setFeedbackResult(result)
        setResultStatus(result.status as FeedbackStatus)
      } else {
        setFeedbackResult(null)
        setResultStatus("not-found")
        toast({
          title: "Feedback not found",
          description: "The tracking ID you entered doesn't exist in our system.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Error searching for feedback",
        description: "Please try again later.",
        variant: "destructive",
      })
    } finally {
      setIsSearching(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Track Your Feedback</CardTitle>
        <CardDescription>Enter your tracking ID to check the status of your submitted feedback.</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="trackingId"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Tracking ID</FormLabel>
                  <div className="flex space-x-2">
                    <FormControl>
                      <Input placeholder="FB-123456" {...field} />
                    </FormControl>
                    <Button type="submit" disabled={isSearching}>
                      {isSearching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
                    </Button>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
          </form>
        </Form>

{resultStatus && (
          <div className="mt-6 space-y-4">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-medium">Feedback Status</h3>
              <Badge className={statusColors[resultStatus]}>
                {resultStatus === "not-found"
                  ? "Not Found"
                  : resultStatus
                      .split("-")
                      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                      .join(" ")}
              </Badge>
            </div>

{feedbackResult && (
              <div className="border rounded-md p-4 space-y-3">
                <div className="grid grid-cols-2 gap-x-4 gap-y-2">
                  <div className="text-sm font-medium">Type:</div>
                  <div className="text-sm capitalize">{feedbackResult.type}</div>

<div className="text-sm font-medium">Subject:</div>
                  <div className="text-sm">{feedbackResult.subject}</div>

<div className="text-sm font-medium">Submitted:</div>
                  <div className="text-sm">{new Date(feedbackResult.submitted).toLocaleString()}</div>

<div className="text-sm font-medium">Last Updated:</div>
                  <div className="text-sm">{new Date(feedbackResult.lastUpdated).toLocaleString()}</div>

<div className="text-sm font-medium">Response Time:</div>
                  <div className="text-sm">{feedbackResult.responseTime}</div>

<div className="text-sm font-medium">Assigned To:</div>
                  <div className="text-sm">{feedbackResult.assignedTo}</div>
                </div>

<div className="pt-2 border-t">
                  <div className="text-sm font-medium mb-1">Response:</div>
                  <div className="text-sm bg-muted p-3 rounded">{feedbackResult.response}</div>
                </div>
              </div>
            )}

{resultStatus === "not-found" && (
              <div className="border border-red-200 rounded-md p-4 bg-red-50 dark:bg-red-900/10 dark:border-red-800">
                <p className="text-sm text-red-700 dark:text-red-400">
                  We couldn't find any feedback with the provided tracking ID. Please check the ID and try again. If you
                  recently submitted your feedback, it might take a few minutes to appear in our system.
                </p>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/feedback-system/feedback-dashboard.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronDown, ChevronUp, Clock, Filter, MessageSquare, Search, ThumbsUp, User, X } from "lucide-react"

// Mock data for demonstration
const mockFeedbackItems = [
  {
    id: "FB-123456",
    type: "complaint",
    subject: "Website Navigation Issue",
    message:
      "I'm having trouble navigating through the product pages. The sidebar menu disappears when I click on certain categories.",
    status: "in-progress",
    priority: "high",
    submittedBy: "John Doe",
    email: "john.doe@example.com",
    submitted: "2023-05-15T10:30:00",
    lastUpdated: "2023-05-16T14:22:00",
    assignedTo: "Support Team",
  },
  {
    id: "FB-234567",
    type: "suggestion",
    subject: "New Feature Proposal",
    message:
      "I'd like to suggest adding a dark mode option to the dashboard. It would be easier on the eyes when working late.",
    status: "under-review",
    priority: "medium",
    submittedBy: "Jane Smith",
    email: "jane.smith@example.com",
    submitted: "2023-05-10T09:15:00",
    lastUpdated: "2023-05-12T11:45:00",
    assignedTo: "Product Team",
  },
  {
    id: "FB-345678",
    type: "complaint",
    subject: "Payment Processing Error",
    message: "I received an error when trying to make a payment. The transaction failed but my card was charged.",
    status: "resolved",
    priority: "critical",
    submittedBy: "Robert Johnson",
    email: "robert.j@example.com",
    submitted: "2023-05-08T16:20:00",
    lastUpdated: "2023-05-09T10:30:00",
    assignedTo: "Finance Team",
  },
  {
    id: "FB-456789",
    type: "question",
    subject: "Account Verification Process",
    message: "How long does the account verification process usually take? I submitted my documents two days ago.",
    status: "pending",
    priority: "low",
    submittedBy: "Maria Garcia",
    email: "maria.g@example.com",
    submitted: "2023-05-17T08:45:00",
    lastUpdated: "2023-05-17T08:45:00",
    assignedTo: "Unassigned",
  },
  {
    id: "FB-567890",
    type: "comment",
    subject: "Great Customer Service",
    message:
      "I just wanted to thank your support team for their help with my recent issue. They were very professional and resolved my problem quickly.",
    status: "closed",
    priority: "low",
    submittedBy: "David Kim",
    email: "david.k@example.com",
    submitted: "2023-05-05T13:10:00",
    lastUpdated: "2023-05-05T15:30:00",
    assignedTo: "Support Team",
  },
  {
    id: "FB-678901",
    type: "advice",
    subject: "Improving User Onboarding",
    message:
      "Based on my experience, I think your user onboarding process could be improved by adding interactive tutorials.",
    status: "under-review",
    priority: "medium",
    submittedBy: "Sarah Williams",
    email: "sarah.w@example.com",
    submitted: "2023-05-12T11:00:00",
    lastUpdated: "2023-05-14T09:15:00",
    assignedTo: "Product Team",
  },
]

const statusColors: Record<string, string> = {
  pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
  "in-progress": "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
  "under-review": "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400",
  resolved: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
  closed: "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400",
}

const priorityColors: Record<string, string> = {
  low: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
  medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
  high: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400",
  critical: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
}

const typeIcons: Record<string, React.ReactNode> = {
  complaint: <MessageSquare className="h-4 w-4" />,
  suggestion: <ThumbsUp className="h-4 w-4" />,
  question: <Search className="h-4 w-4" />,
  comment: <MessageSquare className="h-4 w-4" />,
  advice: <User className="h-4 w-4" />,
}

export function FeedbackDashboard() {
  const [activeFilters, setActiveFilters] = useState<Record<string, string>>({})
  const [searchQuery, setSearchQuery] = useState("")
  const [sortField, setSortField] = useState("submitted")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")

const toggleSortDirection = () => {
    setSortDirection(sortDirection === "asc" ? "desc" : "asc")
  }

const applyFilter = (field: string, value: string) => {
    setActiveFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const removeFilter = (field: string) => {
    setActiveFilters((prev) => {
      const newFilters = { ...prev }
      delete newFilters[field]
      return newFilters
    })
  }

const clearAllFilters = () => {
    setActiveFilters({})
    setSearchQuery("")
  }

// Apply filters and search to feedback items
  const filteredFeedback = mockFeedbackItems
    .filter((item) => {
      // Check if item matches all active filters
      for (const [field, value] of Object.entries(activeFilters)) {
        if (item[field as keyof typeof item] !== value) {
          return false
        }
      }

// Check if item matches search query
      if (searchQuery) {
        const query = searchQuery.toLowerCase()
        return (
          item.subject.toLowerCase().includes(query) ||
          item.message.toLowerCase().includes(query) ||
          item.submittedBy.toLowerCase().includes(query) ||
          item.id.toLowerCase().includes(query)
        )
      }

return true
    })
    .sort((a, b) => {
      const fieldA = a[sortField as keyof typeof a]
      const fieldB = b[sortField as keyof typeof b]

if (typeof fieldA === "string" && typeof fieldB === "string") {
        return sortDirection === "asc" ? fieldA.localeCompare(fieldB) : fieldB.localeCompare(fieldA)
      }

return 0
    })

// Calculate statistics
  const stats = {
    total: mockFeedbackItems.length,
    pending: mockFeedbackItems.filter((item) => item.status === "pending").length,
    inProgress: mockFeedbackItems.filter((item) => item.status === "in-progress").length,
    resolved: mockFeedbackItems.filter((item) => item.status === "resolved" || item.status === "closed").length,
    complaints: mockFeedbackItems.filter((item) => item.type === "complaint").length,
    suggestions: mockFeedbackItems.filter((item) => item.type === "suggestion").length,
    other: mockFeedbackItems.filter((item) => !["complaint", "suggestion"].includes(item.type)).length,
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Feedback Management Dashboard</CardTitle>
        <CardDescription>Manage and respond to user feedback, complaints, and suggestions.</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="all">
          <div className="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4">
            <TabsList>
              <TabsTrigger value="all">All ({stats.total})</TabsTrigger>
              <TabsTrigger value="pending">Pending ({stats.pending})</TabsTrigger>
              <TabsTrigger value="in-progress">In Progress ({stats.inProgress})</TabsTrigger>
              <TabsTrigger value="resolved">Resolved ({stats.resolved})</TabsTrigger>
            </TabsList>

<div className="flex items-center gap-2">
              <Input
                placeholder="Search feedback..."
                className="max-w-xs"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

<div className="flex flex-wrap items-center gap-2 mb-4">
            <div className="flex items-center gap-2">
              <Filter className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">Filters:</span>
            </div>

<Select onValueChange={(value) => applyFilter("type", value)}>
              <SelectTrigger className="h-8 w-[130px]">
                <SelectValue placeholder="Type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="complaint">Complaint</SelectItem>
                <SelectItem value="suggestion">Suggestion</SelectItem>
                <SelectItem value="question">Question</SelectItem>
                <SelectItem value="comment">Comment</SelectItem>
                <SelectItem value="advice">Advice</SelectItem>
              </SelectContent>
            </Select>

<Select onValueChange={(value) => applyFilter("priority", value)}>
              <SelectTrigger className="h-8 w-[130px]">
                <SelectValue placeholder="Priority" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
                <SelectItem value="critical">Critical</SelectItem>
              </SelectContent>
            </Select>

<Select onValueChange={(value) => applyFilter("assignedTo", value)}>
              <SelectTrigger className="h-8 w-[150px]">
                <SelectValue placeholder="Assigned To" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Support Team">Support Team</SelectItem>
                <SelectItem value="Product Team">Product Team</SelectItem>
                <SelectItem value="Finance Team">Finance Team</SelectItem>
                <SelectItem value="Unassigned">Unassigned</SelectItem>
              </SelectContent>
            </Select>

<Button
              variant="outline"
              size="sm"
              className="h-8"
              onClick={clearAllFilters}
              disabled={Object.keys(activeFilters).length === 0 && !searchQuery}
            >
              Clear All
            </Button>
          </div>

{/* Active filter pills */}
          {Object.keys(activeFilters).length > 0 && (
            <div className="flex flex-wrap gap-2 mb-4">
              {Object.entries(activeFilters).map(([field, value]) => (
                <Badge key={field} variant="outline" className="px-2 py-1 flex items-center gap-1">
                  <span className="text-xs capitalize">
                    {field}: {value}
                  </span>
                  <X className="h-3 w-3 cursor-pointer" onClick={() => removeFilter(field)} />
                </Badge>
              ))}
            </div>
          )}

<div className="space-y-4">
            <div className="bg-muted/50 p-2 rounded-md grid grid-cols-12 gap-4 text-sm font-medium">
              <div
                className="col-span-3 flex items-center gap-1 cursor-pointer"
                onClick={() => {
                  setSortField("subject")
                  toggleSortDirection()
                }}
              >
                Subject
                {sortField === "subject" &&
                  (sortDirection === "asc" ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
              </div>
              <div className="col-span-2">Type</div>
              <div className="col-span-1">Status</div>
              <div className="col-span-1">Priority</div>
              <div className="col-span-2">Submitted By</div>
              <div
                className="col-span-2 flex items-center gap-1 cursor-pointer"
                onClick={() => {
                  setSortField("submitted")
                  toggleSortDirection()
                }}
              >
                Date
                {sortField === "submitted" &&
                  (sortDirection === "asc" ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
              </div>
              <div className="col-span-1">Actions</div>
            </div>

<TabsContent value="all" className="m-0">
              {filteredFeedback.length > 0 ? (
                <div className="space-y-2">
                  {filteredFeedback.map((item) => (
                    <div key={item.id} className="p-3 border rounded-md grid grid-cols-12 gap-4 items-center">
                      <div className="col-span-3">
                        <div className="font-medium">{item.subject}</div>
                        <div className="text-xs text-muted-foreground">{item.id}</div>
                      </div>
                      <div className="col-span-2">
                        <Badge variant="outline" className="flex items-center gap-1 capitalize">
                          {typeIcons[item.type]}
                          {item.type}
                        </Badge>
                      </div>
                      <div className="col-span-1">
                        <Badge className={statusColors[item.status]}>
                          {item.status
                            .split("-")
                            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                            .join(" ")}
                        </Badge>
                      </div>
                      <div className="col-span-1">
                        <Badge className={priorityColors[item.priority]}>
                          {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
                        </Badge>
                      </div>
                      <div className="col-span-2">
                        <div className="text-sm">{item.submittedBy}</div>
                        <div className="text-xs text-muted-foreground">{item.email}</div>
                      </div>
                      <div className="col-span-2 flex items-center gap-1">
                        <Clock className="h-3 w-3 text-muted-foreground" />
                        <span className="text-sm">{new Date(item.submitted).toLocaleDateString()}</span>
                      </div>
                      <div className="col-span-1">
                        <Button variant="ghost" size="sm">
                          View
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="p-8 text-center">
                  <p className="text-muted-foreground">No feedback items match your filters.</p>
                </div>
              )}
            </TabsContent>

<TabsContent value="pending" className="m-0">
              {filteredFeedback.filter((item) => item.status === "pending").length > 0 ? (
                <div className="space-y-2">
                  {filteredFeedback
                    .filter((item) => item.status === "pending")
                    .map((item) => (
                      <div key={item.id} className="p-3 border rounded-md grid grid-cols-12 gap-4 items-center">
                        <div className="col-span-3">
                          <div className="font-medium">{item.subject}</div>
                          <div className="text-xs text-muted-foreground">{item.id}</div>
                        </div>
                        <div className="col-span-2">
                          <Badge variant="outline" className="flex items-center gap-1 capitalize">
                            {typeIcons[item.type]}
                            {item.type}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={statusColors[item.status]}>
                            {item.status
                              .split("-")
                              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                              .join(" ")}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={priorityColors[item.priority]}>
                            {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
                          </Badge>
                        </div>
                        <div className="col-span-2">
                          <div className="text-sm">{item.submittedBy}</div>
                          <div className="text-xs text-muted-foreground">{item.email}</div>
                        </div>
                        <div className="col-span-2 flex items-center gap-1">
                          <Clock className="h-3 w-3 text-muted-foreground" />
                          <span className="text-sm">{new Date(item.submitted).toLocaleDateString()}</span>
                        </div>
                        <div className="col-span-1">
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </div>
                      </div>
                    ))}
                </div>
              ) : (
                <div className="p-8 text-center">
                  <p className="text-muted-foreground">No pending feedback items match your filters.</p>
                </div>
              )}
            </TabsContent>

<TabsContent value="in-progress" className="m-0">
              {filteredFeedback.filter((item) => item.status === "in-progress").length > 0 ? (
                <div className="space-y-2">
                  {filteredFeedback
                    .filter((item) => item.status === "in-progress")
                    .map((item) => (
                      <div key={item.id} className="p-3 border rounded-md grid grid-cols-12 gap-4 items-center">
                        <div className="col-span-3">
                          <div className="font-medium">{item.subject}</div>
                          <div className="text-xs text-muted-foreground">{item.id}</div>
                        </div>
                        <div className="col-span-2">
                          <Badge variant="outline" className="flex items-center gap-1 capitalize">
                            {typeIcons[item.type]}
                            {item.type}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={statusColors[item.status]}>
                            {item.status
                              .split("-")
                              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                              .join(" ")}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={priorityColors[item.priority]}>
                            {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
                          </Badge>
                        </div>
                        <div className="col-span-2">
                          <div className="text-sm">{item.submittedBy}</div>
                          <div className="text-xs text-muted-foreground">{item.email}</div>
                        </div>
                        <div className="col-span-2 flex items-center gap-1">
                          <Clock className="h-3 w-3 text-muted-foreground" />
                          <span className="text-sm">{new Date(item.submitted).toLocaleDateString()}</span>
                        </div>
                        <div className="col-span-1">
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </div>
                      </div>
                    ))}
                </div>
              ) : (
                <div className="p-8 text-center">
                  <p className="text-muted-foreground">No in-progress feedback items match your filters.</p>
                </div>
              )}
            </TabsContent>

<TabsContent value="resolved" className="m-0">
              {filteredFeedback.filter((item) => ["resolved", "closed"].includes(item.status)).length > 0 ? (
                <div className="space-y-2">
                  {filteredFeedback
                    .filter((item) => ["resolved", "closed"].includes(item.status))
                    .map((item) => (
                      <div key={item.id} className="p-3 border rounded-md grid grid-cols-12 gap-4 items-center">
                        <div className="col-span-3">
                          <div className="font-medium">{item.subject}</div>
                          <div className="text-xs text-muted-foreground">{item.id}</div>
                        </div>
                        <div className="col-span-2">
                          <Badge variant="outline" className="flex items-center gap-1 capitalize">
                            {typeIcons[item.type]}
                            {item.type}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={statusColors[item.status]}>
                            {item.status
                              .split("-")
                              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                              .join(" ")}
                          </Badge>
                        </div>
                        <div className="col-span-1">
                          <Badge className={priorityColors[item.priority]}>
                            {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
                          </Badge>
                        </div>
                        <div className="col-span-2">
                          <div className="text-sm">{item.submittedBy}</div>
                          <div className="text-xs text-muted-foreground">{item.email}</div>
                        </div>
                        <div className="col-span-2 flex items-center gap-1">
                          <Clock className="h-3 w-3 text-muted-foreground" />
                          <span className="text-sm">{new Date(item.submitted).toLocaleDateString()}</span>
                        </div>
                        <div className="col-span-1">
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </div>
                      </div>
                    ))}
                </div>
              ) : (
                <div className="p-8 text-center">
                  <p className="text-muted-foreground">No resolved feedback items match your filters.</p>
                </div>
              )}
            </TabsContent>
          </div>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/feedback-system/feedback-analytics.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { ArrowDown, ArrowUp, BarChart3, Clock, PieChartIcon } from "lucide-react"

// Mock data for demonstration
const typeData = [
  { name: "Complaints", value: 35, color: "#ef4444" },
  { name: "Suggestions", value: 25, color: "#22c55e" },
  { name: "Questions", value: 18, color: "#3b82f6" },
  { name: "Comments", value: 12, color: "#a855f7" },
  { name: "Advice", value: 10, color: "#f59e0b" },
]

const statusData = [
  { name: "Pending", value: 15, color: "#f59e0b" },
  { name: "In Progress", value: 23, color: "#3b82f6" },
  { name: "Under Review", value: 18, color: "#a855f7" },
  { name: "Resolved", value: 32, color: "#22c55e" },
  { name: "Closed", value: 12, color: "#6b7280" },
]

const priorityData = [
  { name: "Low", value: 45, color: "#3b82f6" },
  { name: "Medium", value: 32, color: "#f59e0b" },
  { name: "High", value: 18, color: "#f97316" },
  { name: "Critical", value: 5, color: "#ef4444" },
]

const timeToResolutionData = [
  { name: "Less than 1 day", value: 30 },
  { name: "1-2 days", value: 25 },
  { name: "3-5 days", value: 20 },
  { name: "6-10 days", value: 15 },
  { name: "More than 10 days", value: 10 },
]

const weeklyTrendsData = [
  { date: "May 1", new: 12, resolved: 8 },
  { date: "May 8", new: 15, resolved: 10 },
  { date: "May 15", new: 18, resolved: 14 },
  { date: "May 22", new: 22, resolved: 16 },
  { date: "May 29", new: 17, resolved: 20 },
  { date: "Jun 5", new: 25, resolved: 18 },
  { date: "Jun 12", new: 20, resolved: 22 },
]

const teamPerformanceData = [
  { name: "Support Team", resolved: 45, timeToResolve: 2.3 },
  { name: "Product Team", resolved: 32, timeToResolve: 4.1 },
  { name: "Finance Team", resolved: 18, timeToResolve: 1.8 },
  { name: "Technical Team", resolved: 25, timeToResolve: 3.2 },
]

const feedbackSourcesData = [
  { name: "Website Form", value: 45 },
  { name: "Email", value: 25 },
  { name: "Mobile App", value: 18 },
  { name: "Social Media", value: 12 },
]

export function FeedbackAnalytics() {
  // Calculate combined statistics
  const totalFeedback = typeData.reduce((sum, item) => sum + item.value, 0)
  const resolvedFeedback = statusData.find((item) => item.name === "Resolved")?.value || 0
  const closedFeedback = statusData.find((item) => item.name === "Closed")?.value || 0
  const totalResolved = resolvedFeedback + closedFeedback
  const resolutionRate = ((totalResolved / totalFeedback) * 100).toFixed(1)

const criticalFeedback = priorityData.find((item) => item.name === "Critical")?.value || 0
  const highFeedback = priorityData.find((item) => item.name === "High")?.value || 0
  const criticalHighRate = (((criticalFeedback + highFeedback) / totalFeedback) * 100).toFixed(1)

const pendingFeedback = statusData.find((item) => item.name === "Pending")?.value || 0
  const inProgressFeedback = statusData.find((item) => item.name === "In Progress")?.value || 0
  const underReviewFeedback = statusData.find((item) => item.name === "Under Review")?.value || 0
  const openFeedback = pendingFeedback + inProgressFeedback + underReviewFeedback

// Calculate week-over-week change
  const lastWeekNew = weeklyTrendsData[weeklyTrendsData.length - 2].new
  const currentWeekNew = weeklyTrendsData[weeklyTrendsData.length - 1].new
  const percentChange = (((currentWeekNew - lastWeekNew) / lastWeekNew) * 100).toFixed(1)
  const isIncreasing = currentWeekNew > lastWeekNew

return (
    <Card>
      <CardHeader>
        <CardTitle>Feedback Analytics & Insights</CardTitle>
        <CardDescription>
          Analyze feedback trends, performance metrics, and key insights to improve your service.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col space-y-1">
                <span className="text-sm text-muted-foreground">Total Feedback</span>
                <span className="text-2xl font-bold">{totalFeedback}</span>
                <div className="flex items-center gap-1 text-xs">
                  {isIncreasing ? (
                    <>
                      <ArrowUp className="h-3 w-3 text-red-500" />
                      <span className="text-red-500">{percentChange}% from last week</span>
                    </>
                  ) : (
                    <>
                      <ArrowDown className="h-3 w-3 text-green-500" />
                      <span className="text-green-500">{Math.abs(Number(percentChange))}% from last week</span>
                    </>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4">
              <div className="flex flex-col space-y-1">
                <span className="text-sm text-muted-foreground">Resolution Rate</span>
                <span className="text-2xl font-bold">{resolutionRate}%</span>
                <span className="text-xs text-muted-foreground">
                  {totalResolved} of {totalFeedback} resolved
                </span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4">
              <div className="flex flex-col space-y-1">
                <span className="text-sm text-muted-foreground">Open Feedback</span>
                <span className="text-2xl font-bold">{openFeedback}</span>
                <div className="flex items-center gap-1 text-xs">
                  <Badge variant="outline" className="text-xs px-1">
                    {pendingFeedback} pending
                  </Badge>
                  <Badge variant="outline" className="text-xs px-1">
                    {inProgressFeedback} in progress
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4">
              <div className="flex flex-col space-y-1">
                <span className="text-sm text-muted-foreground">Critical/High Issues</span>
                <span className="text-2xl font-bold">{criticalHighRate}%</span>
                <span className="text-xs text-muted-foreground">
                  {criticalFeedback + highFeedback} of {totalFeedback} items
                </span>
              </div>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="overview">
          <TabsList className="grid grid-cols-3 w-[400px] mb-6">
            <TabsTrigger value="overview">
              <PieChartIcon className="h-4 w-4 mr-2" />
              Overview
            </TabsTrigger>
            <TabsTrigger value="trends">
              <BarChart3 className="h-4 w-4 mr-2" />
              Trends
            </TabsTrigger>
            <TabsTrigger value="performance">
              <Clock className="h-4 w-4 mr-2" />
              Performance
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-8">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">Feedback by Type</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[250px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={typeData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {typeData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">Feedback by Status</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[250px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={statusData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {statusData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">Feedback by Priority</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[250px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={priorityData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {priorityData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">Time to Resolution</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={timeToResolutionData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" angle={-45} textAnchor="end" height={70} tickMargin={25} />
                        <YAxis />
                        <Tooltip />
                        <Bar dataKey="value" name="Count" fill="#3b82f6" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">Feedback Sources</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart
                        data={feedbackSourcesData}
                        layout="vertical"
                        margin={{ top: 20, right: 30, left: 60, bottom: 5 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis type="number" />
                        <YAxis dataKey="name" type="category" width={80} />
                        <Tooltip />
                        <Bar dataKey="value" name="Count" fill="#a855f7" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="trends">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Weekly Trends</CardTitle>
                <CardDescription>New vs. Resolved Feedback Items</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[400px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={weeklyTrendsData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line type="monotone" dataKey="new" name="New Feedback" stroke="#3b82f6" activeDot={{ r: 8 }} />
                      <Line type="monotone" dataKey="resolved" name="Resolved Feedback" stroke="#22c55e" />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="performance">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Team Performance</CardTitle>
                <CardDescription>Feedback Resolution by Team</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[400px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={teamPerformanceData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis yAxisId="left" orientation="left" stroke="#3b82f6" />
                      <YAxis
                        yAxisId="right"
                        orientation="right"
                        stroke="#f59e0b"
                        label={{ value: "Days to Resolve", angle: 90, position: "insideRight" }}
                      />
                      <Tooltip />
                      <Legend />
                      <Bar yAxisId="left" dataKey="resolved" name="Issues Resolved" fill="#3b82f6" />
                      <Line
                        yAxisId="right"
                        type="monotone"
                        dataKey="timeToResolve"
                        name="Avg. Days to Resolve"
                        stroke="#f59e0b"
                      />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/feedback-system/feedback-response.tsx"
"use client"

import { useState } from "react"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { toast } from "@/hooks/use-toast"
import { CheckCircle2, Clock, Info, Loader2, MessageSquare, RotateCcw, SendHorizonal, User } from "lucide-react"

// Response templates for different feedback types
const responseTemplates = {
  complaint: [
    {
      title: "Acknowledgment & Apology",
      content:
        "Thank you for bringing this issue to our attention. We sincerely apologize for the inconvenience you've experienced. We take all feedback seriously and are committed to resolving this matter promptly.",
    },
    {
      title: "Investigation Promise",
      content:
        "We're investigating the issue you've reported and will work diligently to resolve it. Our team will review all details thoroughly and implement necessary measures to prevent similar issues in the future.",
    },
    {
      title: "Resolution Update",
      content:
        "We've completed our investigation of your reported issue. We've identified the root cause and implemented a solution. Please let us know if you experience any further problems.",
    },
  ],
  suggestion: [
    {
      title: "Appreciation & Consideration",
      content:
        "Thank you for your valuable suggestion! We appreciate your thoughtful input and are excited to consider how it might enhance our services.  We appreciate your thoughtful input and are excited to consider how it might enhance our services. Our product team will review your suggestion carefully and evaluate how it aligns with our development roadmap.",
    },
    {
      title: "Implementation Plan",
      content:
        "Great news! We've reviewed your suggestion and are pleased to inform you that we plan to implement it in an upcoming update. Thank you for contributing to the improvement of our services.",
    },
    {
      title: "Alternative Solution",
      content:
        "Thank you for your suggestion. While we're unable to implement it exactly as proposed at this time, we've developed an alternative solution that addresses the core need you identified. We value your input and hope this alternative meets your requirements.",
    },
  ],
  question: [
    {
      title: "Direct Answer",
      content:
        "Thank you for your question. Here's the information you requested: [Insert specific answer]. We hope this clarifies your inquiry. Please don't hesitate to reach out if you need any further explanation.",
    },
    {
      title: "Additional Resources",
      content:
        "In response to your question, we've provided an answer and included links to additional resources that may be helpful: [Insert links/resources]. These should give you comprehensive information on the topic.",
    },
  ],
  advice: [
    {
      title: "Gratitude & Consideration",
      content:
        "Thank you for sharing your advice with us. We greatly appreciate your expertise and insights. Our team is reviewing your recommendations and considering how they might be implemented to improve our services.",
    },
    {
      title: "Implementation Update",
      content:
        "We wanted to update you on the advice you shared with us. We've incorporated several of your suggestions into our processes and have already begun to see positive results. Thank you for your valuable contribution.",
    },
  ],
  comment: [
    {
      title: "Acknowledgment",
      content:
        "Thank you for your comment. We appreciate you taking the time to share your thoughts with us. Your feedback is valuable and helps us understand how our users experience our services.",
    },
    {
      title: "Feedback Response",
      content:
        "We've received your comment and want to thank you for sharing your perspective. Your insights help us better understand our users' needs and expectations. We've taken note of your feedback for future improvements.",
    },
  ],
}

// Mock feedback item for demonstration
const mockFeedbackItem = {
  id: "FB-123456",
  type: "complaint",
  subject: "Website Navigation Issue",
  message:
    "I'm having trouble navigating through the product pages. The sidebar menu disappears when I click on certain categories. This makes it difficult to browse through your products efficiently. I've tried using different browsers but the issue persists. Could you please look into this and fix it? It's making shopping on your site quite frustrating.",
  status: "in-progress",
  priority: "high",
  submittedBy: "John Doe",
  email: "john.doe@example.com",
  submitted: "2023-05-15T10:30:00",
  lastUpdated: "2023-05-16T14:22:00",
  assignedTo: "Support Team",
  internalNotes: [
    {
      author: "Sarah (Support)",
      date: "2023-05-15T14:45:00",
      note: "Reproduced the issue on Chrome and Firefox. It appears to be related to a recent JavaScript update.",
    },
    {
      author: "Michael (Development)",
      date: "2023-05-16T09:22:00",
      note: "Identified the root cause. There's a conflict between our new filtering code and the sidebar component. Working on a fix now.",
    },
  ],
  responses: [
    {
      author: "Support Team",
      date: "2023-05-15T11:15:00",
      message:
        "Thank you for bringing this navigation issue to our attention, John. We apologize for the inconvenience you're experiencing. Our team has been able to reproduce the problem and we're currently working on a fix. We'll update you as soon as we have more information.",
    },
  ],
}

const responseFormSchema = z.object({
  trackingId: z.string(),
  responseType: z.string(),
  responseTemplate: z.string().optional(),
  message: z.string().min(10, {
    message: "Response message must be at least 10 characters.",
  }),
  internalNote: z.string().optional(),
  updateStatus: z.string(),
  notifyUser: z.boolean().default(true),
})

type ResponseFormValues = z.infer<typeof responseFormSchema>

export function FeedbackResponse() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [selectedTemplate, setSelectedTemplate] = useState("")
  const [feedbackItem, setFeedbackItem] = useState(mockFeedbackItem)

const form = useForm<ResponseFormValues>({
    resolver: zodResolver(responseFormSchema),
    defaultValues: {
      trackingId: feedbackItem.id,
      responseType: feedbackItem.type,
      message: "",
      internalNote: "",
      updateStatus: feedbackItem.status,
      notifyUser: true,
    },
  })

const watch = form.watch()

const handleTemplateSelect = (template: string) => {
    setSelectedTemplate(template)
    const selectedResponseType = watch.responseType as keyof typeof responseTemplates
    const templateContent = responseTemplates[selectedResponseType]?.find((t) => t.title === template)?.content || ""

form.setValue("message", templateContent)
  }

async function onSubmit(data: ResponseFormValues) {
    setIsSubmitting(true)

try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

// Create response object
      const newResponse = {
        author: "Support Team",
        date: new Date().toISOString(),
        message: data.message,
      }

// Create internal note if provided
      let newNote = null
      if (data.internalNote && data.internalNote.trim() !== "") {
        newNote = {
          author: "Admin User",
          date: new Date().toISOString(),
          note: data.internalNote,
        }
      }

// Update the feedback item (in a real app, this would be an API call)
      setFeedbackItem((prev) => ({
        ...prev,
        status: data.updateStatus,
        lastUpdated: new Date().toISOString(),
        responses: [...prev.responses, newResponse],
        internalNotes: newNote ? [...prev.internalNotes, newNote] : prev.internalNotes,
      }))

toast({
        title: "Response sent successfully",
        description: data.notifyUser
          ? "The user has been notified via email."
          : "Response added without user notification.",
      })

// Reset the form fields
      form.reset({
        trackingId: feedbackItem.id,
        responseType: feedbackItem.type,
        message: "",
        internalNote: "",
        updateStatus: data.updateStatus, // Maintain the updated status
        notifyUser: true,
      })
      setSelectedTemplate("")
    } catch (error) {
      toast({
        title: "Error sending response",
        description: "Please try again later.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

// Format date for display
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleString()
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="md:col-span-1">
        <Card>
          <CardHeader>
            <CardTitle>Feedback Details</CardTitle>
            <CardDescription>Review the feedback information before responding</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h3 className="text-sm font-medium mb-1">Status</h3>
              <Badge
                className={`${
                  feedbackItem.status === "in-progress"
                    ? "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
                    : feedbackItem.status === "resolved"
                      ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
                      : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
                }`}
              >
                {feedbackItem.status
                  .split("-")
                  .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                  .join(" ")}
              </Badge>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Tracking ID</h3>
              <p className="text-sm">{feedbackItem.id}</p>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Type</h3>
              <Badge variant="outline" className="capitalize">
                {feedbackItem.type}
              </Badge>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Priority</h3>
              <Badge
                className={`${
                  feedbackItem.priority === "high"
                    ? "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400"
                    : "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
                }`}
              >
                {feedbackItem.priority.charAt(0).toUpperCase() + feedbackItem.priority.slice(1)}
              </Badge>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Submitted By</h3>
              <p className="text-sm">{feedbackItem.submittedBy}</p>
              <p className="text-xs text-muted-foreground">{feedbackItem.email}</p>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Date Submitted</h3>
              <div className="flex items-center gap-1 text-sm">
                <Clock className="h-3 w-3 text-muted-foreground" />
                <span>{formatDate(feedbackItem.submitted)}</span>
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Last Updated</h3>
              <div className="flex items-center gap-1 text-sm">
                <Clock className="h-3 w-3 text-muted-foreground" />
                <span>{formatDate(feedbackItem.lastUpdated)}</span>
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium mb-1">Assigned To</h3>
              <p className="text-sm">{feedbackItem.assignedTo}</p>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="md:col-span-2">
        <Tabs defaultValue="message">
          <TabsList className="mb-4">
            <TabsTrigger value="message">
              <MessageSquare className="h-4 w-4 mr-2" />
              Message
            </TabsTrigger>
            <TabsTrigger value="responses">
              <SendHorizonal className="h-4 w-4 mr-2" />
              Responses
            </TabsTrigger>
            <TabsTrigger value="notes">
              <Info className="h-4 w-4 mr-2" />
              Internal Notes
            </TabsTrigger>
          </TabsList>

<TabsContent value="message" className="m-0">
            <Card>
              <CardHeader>
                <CardTitle>{feedbackItem.subject}</CardTitle>
                <CardDescription>
                  Submitted by {feedbackItem.submittedBy} on {formatDate(feedbackItem.submitted)}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="bg-muted p-4 rounded-md whitespace-pre-wrap">{feedbackItem.message}</div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="responses" className="m-0 space-y-4">
            {feedbackItem.responses.map((response, index) => (
              <Card key={index}>
                <CardHeader className="pb-2">
                  <div className="flex justify-between items-center">
                    <CardTitle className="text-base flex items-center">
                      <User className="h-4 w-4 mr-2" />
                      {response.author}
                    </CardTitle>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Clock className="h-3 w-3" />
                      <span>{formatDate(response.date)}</span>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm whitespace-pre-wrap">{response.message}</p>
                </CardContent>
              </Card>
            ))}

{feedbackItem.responses.length === 0 && (
              <div className="text-center p-8 border rounded-md bg-muted/50">
                <p className="text-muted-foreground">No responses yet.</p>
              </div>
            )}
          </TabsContent>

<TabsContent value="notes" className="m-0 space-y-4">
            {feedbackItem.internalNotes.map((note, index) => (
              <Card key={index}>
                <CardHeader className="pb-2">
                  <div className="flex justify-between items-center">
                    <CardTitle className="text-base flex items-center">
                      <User className="h-4 w-4 mr-2" />
                      {note.author}
                    </CardTitle>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Clock className="h-3 w-3" />
                      <span>{formatDate(note.date)}</span>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm whitespace-pre-wrap">{note.note}</p>
                </CardContent>
              </Card>
            ))}

{feedbackItem.internalNotes.length === 0 && (
              <div className="text-center p-8 border rounded-md bg-muted/50">
                <p className="text-muted-foreground">No internal notes yet.</p>
              </div>
            )}
          </TabsContent>
        </Tabs>

<Card className="mt-6">
          <CardHeader>
            <CardTitle>Respond to Feedback</CardTitle>
            <CardDescription>Send a response to the user and update the feedback status</CardDescription>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="trackingId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Tracking ID</FormLabel>
                        <FormControl>
                          <Input {...field} disabled />
                        </FormControl>
                      </FormItem>
                    )}
                  />

<FormField
                    control={form.control}
                    name="responseType"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Response Type</FormLabel>
                        <Select
                          onValueChange={(value) => {
                            field.onChange(value)
                            setSelectedTemplate("")
                            form.setValue("message", "")
                          }}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select response type" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="complaint">Complaint</SelectItem>
                            <SelectItem value="suggestion">Suggestion</SelectItem>
                            <SelectItem value="question">Question</SelectItem>
                            <SelectItem value="advice">Advice</SelectItem>
                            <SelectItem value="comment">Comment</SelectItem>
                          </SelectContent>
                        </Select>
                      </FormItem>
                    )}
                  />
                </div>

<div>
                  <FormLabel>Response Templates</FormLabel>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2">
                    {responseTemplates[watch.responseType as keyof typeof responseTemplates]?.map((template, index) => (
                      <Button
                        key={index}
                        type="button"
                        variant={selectedTemplate === template.title ? "default" : "outline"}
                        className="h-auto py-2 px-3 justify-start"
                        onClick={() => handleTemplateSelect(template.title)}
                      >
                        <span className="text-sm">{template.title}</span>
                      </Button>
                    ))}
                  </div>
                </div>

<FormField
                  control={form.control}
                  name="message"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Response Message</FormLabel>
                      <FormControl>
                        <Textarea placeholder="Enter your response to the user" className="min-h-[150px]" {...field} />
                      </FormControl>
                      <FormDescription>
                        This message will be sent to the user. Be clear, professional, and helpful.
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

<FormField
                  control={form.control}
                  name="internalNote"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Internal Note (Optional)</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="Add an internal note visible only to staff"
                          className="min-h-[100px]"
                          {...field}
                        />
                      </FormControl>
                      <FormDescription>
                        This note will not be visible to the user and is for internal reference only.
                      </FormDescription>
                    </FormItem>
                  )}
                />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="updateStatus"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Update Status</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select new status" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="pending">Pending</SelectItem>
                            <SelectItem value="in-progress">In Progress</SelectItem>
                            <SelectItem value="under-review">Under Review</SelectItem>
                            <SelectItem value="resolved">Resolved</SelectItem>
                            <SelectItem value="closed">Closed</SelectItem>
                          </SelectContent>
                        </Select>
                      </FormItem>
                    )}
                  />

<FormField
                    control={form.control}
                    name="notifyUser"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-end space-x-3 space-y-0 rounded-md border p-4">
                        <FormControl>
                          <input type="checkbox" checked={field.value} onChange={field.onChange} className="h-4 w-4" />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel>Notify User</FormLabel>
                          <FormDescription>Send an email notification to the user.</FormDescription>
                        </div>
                      </FormItem>
                    )}
                  />
                </div>

<div className="flex justify-end space-x-2">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      form.reset()
                      setSelectedTemplate("")
                    }}
                  >
                    <RotateCcw className="mr-2 h-4 w-4" />
                    Reset
                  </Button>
                  <Button type="submit" disabled={isSubmitting}>
                    {isSubmitting ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Sending...
                      </>
                    ) : (
                      <>
                        <SendHorizonal className="mr-2 h-4 w-4" />
                        Send Response
                      </>
                    )}
                  </Button>
                </div>
              </form>
            </Form>
          </CardContent>
          <CardFooter className="flex flex-col text-xs text-muted-foreground border-t pt-4">
            <div className="flex items-center gap-1">
              <CheckCircle2 className="h-3 w-3 text-green-500" />
              <span>All responses are logged and tracked for quality assurance purposes.</span>
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/feedback-system/page.tsx"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { FeedbackForm } from "@/components/feedback-system/feedback-form"
import { FeedbackTracker } from "@/components/feedback-system/feedback-tracker"
import { FeedbackDashboard } from "@/components/feedback-system/feedback-dashboard"
import { FeedbackAnalytics } from "@/components/feedback-system/feedback-analytics"
import { FeedbackResponse } from "@/components/feedback-system/feedback-response"
import { MessageSquare, BarChart3, ArrowRight } from "lucide-react"

export default function FeedbackSystemPage() {
  const [role, setRole] = useState<"user" | "admin">("user")

return (
    <div className="container mx-auto py-10 px-4">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-3xl font-bold mb-2">Feedback & Communication System</h1>
          <p className="text-muted-foreground">
            A comprehensive system for submitting, tracking, and managing feedback, complaints, and suggestions.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm mr-2">View as:</span>
          <Tabs value={role} onValueChange={(value) => setRole(value as "user" | "admin")} className="w-[300px]">
            <TabsList>
              <TabsTrigger value="user" className="flex-1">
                User View
              </TabsTrigger>
              <TabsTrigger value="admin" className="flex-1">
                Admin View
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </div>

{role === "user" ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FeedbackForm />
          <FeedbackTracker />
        </div>
      ) : (
        <Tabs defaultValue="dashboard">
          <TabsList className="w-full mb-6">
            <TabsTrigger value="dashboard">
              <MessageSquare className="h-4 w-4 mr-2" />
              Dashboard
            </TabsTrigger>
            <TabsTrigger value="analytics">
              <BarChart3 className="h-4 w-4 mr-2" />
              Analytics
            </TabsTrigger>
            <TabsTrigger value="respond">
              <ArrowRight className="h-4 w-4 mr-2" />
              Respond
            </TabsTrigger>
          </TabsList>

<TabsContent value="respond" className="mt-0">
            <FeedbackResponse />
          </TabsContent>
        </Tabs>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/feedback-system/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/wellness-dashboard/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { WellnessDashboard } from "@/components/wellness/wellness-dashboard"
import { useEffect } from "react"

export default function WellnessDashboardPage() {
  // Add sound effects for interactions
  useEffect(() => {
    // Only run on client-side
    if (typeof window === "undefined") return

// Create audio elements for different interactions
    const successSound = new Audio("/sounds/success.mp3")
    const clickSound = new Audio("/sounds/click.mp3")

// Lower the volume
    successSound.volume = 0.3
    clickSound.volume = 0.2

// Add event listeners for button clicks
    const handleButtonClick = () => {
      clickSound.currentTime = 0
      clickSound.play().catch((e) => console.log("Audio play failed:", e))
    }

const handleSuccess = () => {
      successSound.currentTime = 0
      successSound.play().catch((e) => console.log("Audio play failed:", e))
    }

// Add event listeners
    document.addEventListener("click", (e) => {
      if ((e.target as HTMLElement).tagName === "BUTTON") {
        handleButtonClick()
      }
    })

// Custom event for goal completion
    document.addEventListener("goalComplete", handleSuccess)

// Cleanup
    return () => {
      document.removeEventListener("click", handleButtonClick)
      document.removeEventListener("goalComplete", handleSuccess)
    }
  }, [])

return (
    <div className="min-h-screen bg-gradient-to-b from-background to-background/80 relative">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-[url('/abstract-wellness-pattern.png')] bg-repeat opacity-5 pointer-events-none"></div>

{/* Main content */}
      <div className="relative z-10">
        <WellnessDashboard />
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/sounds/success.mp3" query="short success sound effect"
[V0_FILE]plaintext:file="public/sounds/click.mp3" query="short click sound effect"
[V0_FILE]typescriptreact:file="components/wellness/water-tracker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { PlusCircle, MinusCircle, Droplet, Info } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Separator } from "@/components/ui/separator"

export function WaterTracker() {
  const [waterAmount, setWaterAmount] = useState(0)
  const [progress, setProgress] = useState(0)
  const [lastDrink, setLastDrink] = useState("")
  const [waterLog, setWaterLog] = useState<{ time: string; amount: number }[]>([])
  const [showWaterAnimation, setShowWaterAnimation] = useState(false)

const waterGoal = 8 // 8 glasses (2 liters)

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Load saved data from localStorage
      const savedAmount = localStorage.getItem("waterAmount")
      const savedProgress = localStorage.getItem("waterProgress")
      const savedLog = localStorage.getItem("waterLog")

if (savedAmount) setWaterAmount(Number.parseInt(savedAmount))
      if (savedProgress) setProgress(Number.parseInt(savedProgress))
      if (savedLog) {
        try {
          const parsedLog = JSON.parse(savedLog)
          setWaterLog(parsedLog)

// Set last drink time
          if (parsedLog.length > 0) {
            setLastDrink(parsedLog[parsedLog.length - 1].time)
          }
        } catch (e) {
          console.error("Error parsing water log:", e)
          setWaterLog([])
        }
      }
    }
  }, [])

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Save to localStorage whenever values change
      localStorage.setItem("waterAmount", waterAmount.toString())
      localStorage.setItem("waterProgress", progress.toString())
      localStorage.setItem("waterLog", JSON.stringify(waterLog))
    }
  }, [waterAmount, progress, waterLog])

const addWater = () => {
    if (waterAmount < waterGoal) {
      const newAmount = waterAmount + 1
      setWaterAmount(newAmount)
      setProgress(Math.round((newAmount / waterGoal) * 100))

const now = new Date()
      const timeString = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })
      setLastDrink(timeString)

setWaterLog([...waterLog, { time: timeString, amount: 1 }])

// Show water animation
      setShowWaterAnimation(true)
      setTimeout(() => setShowWaterAnimation(false), 1500)

// Dispatch goal complete event if target reached
      if (newAmount === waterGoal) {
        const event = new Event("goalComplete")
        document.dispatchEvent(event)
      }
    }
  }

const removeWater = () => {
    if (waterAmount > 0) {
      const newAmount = waterAmount - 1
      setWaterAmount(newAmount)
      setProgress(Math.round((newAmount / waterGoal) * 100))

// Remove the last log entry
      if (waterLog.length > 0) {
        const newLog = [...waterLog]
        newLog.pop()
        setWaterLog(newLog)

if (newLog.length > 0) {
          setLastDrink(newLog[newLog.length - 1].time)
        } else {
          setLastDrink("")
        }
      }
    }
  }

const resetWater = () => {
    setWaterAmount(0)
    setProgress(0)
    setWaterLog([])
    setLastDrink("")
  }

// Calculate time until next drink
  const getNextDrinkTime = () => {
    if (waterAmount >= waterGoal) return "Goal reached!"

const wakeHours = 16 // Assuming 16 waking hours
    const remainingGlasses = waterGoal - waterAmount
    const hoursPerGlass = wakeHours / waterGoal

return `Drink next glass in ${Math.round(hoursPerGlass * 60)} minutes`
  }

return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder-xtdhm.png')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Water Intake Tracker</CardTitle>
            <CardDescription>Track your daily water consumption</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4 relative z-10">
            <div className="flex justify-center">
              <div className="relative w-40 h-40 flex items-center justify-center">
                {/* Water fill animation */}
                <div
                  className="absolute bottom-0 left-0 right-0 bg-blue-500/30 rounded-full transition-all duration-1000 ease-out"
                  style={{
                    height: `${progress}%`,
                    boxShadow: "0 0 20px rgba(59, 130, 246, 0.5)",
                  }}
                ></div>

<div className="flex justify-center space-x-4">
              <Button variant="outline" size="icon" onClick={removeWater} disabled={waterAmount <= 0}>
                <MinusCircle className="h-4 w-4" />
              </Button>
              <Button
                variant="default"
                onClick={addWater}
                disabled={waterAmount >= waterGoal}
                className="bg-blue-500 hover:bg-blue-600"
              >
                <PlusCircle className="h-4 w-4 mr-2" />
                Add Glass
              </Button>
              <Button variant="outline" size="sm" onClick={resetWater}>
                Reset
              </Button>
            </div>

<Alert>
              <Info className="h-4 w-4" />
              <AlertTitle>Hydration Status</AlertTitle>
              <AlertDescription>
                {progress < 25
                  ? "You're dehydrated! Drink more water."
                  : progress < 50
                    ? "You need more water. Keep drinking!"
                    : progress < 75
                      ? "Good progress! Keep it up."
                      : progress < 100
                        ? "Almost there! Just a few more glasses."
                        : "Excellent! You've reached your water goal."}
              </AlertDescription>
            </Alert>

<div className="text-sm text-muted-foreground">
              <p>{getNextDrinkTime()}</p>
              {lastDrink && <p>Last drink: {lastDrink}</p>}
            </div>
          </CardContent>
        </Card>

<Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=600&query=water%20glass%20hydration')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Water Log</CardTitle>
            <CardDescription>Your water intake throughout the day</CardDescription>
          </CardHeader>
          <CardContent className="relative z-10">
            <div className="space-y-4">
              {waterLog.length > 0 ? (
                waterLog.map((log, index) => (
                  <div key={index} className="flex justify-between items-center">
                    <div className="flex items-center">
                      <Droplet className="h-4 w-4 mr-2 text-blue-500" />
                      <span>{log.time}</span>
                    </div>
                    <span>{log.amount} glass</span>
                  </div>
                ))
              ) : (
                <p className="text-center text-muted-foreground">No water intake recorded today</p>
              )}
            </div>
          </CardContent>
          <CardFooter className="flex flex-col items-start relative z-10">
            <Separator className="my-2" />
            <div className="space-y-2 w-full">
              <h4 className="font-medium">Benefits of Proper Hydration:</h4>
              <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
                <li>Improves physical performance</li>
                <li>Boosts energy levels and brain function</li>
                <li>Helps prevent headaches</li>
                <li>Aids digestion and prevents constipation</li>
                <li>Helps maintain healthy skin</li>
              </ul>
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wellness/exercise-tracker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Plus, Minus, Activity, Timer } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

type ExerciseLog = {
  type: string
  duration: number
  date: string
  time: string
  calories: number
}

export function ExerciseTracker() {
  const [exerciseMinutes, setExerciseMinutes] = useState(0)
  const [progress, setProgress] = useState(0)
  const [exerciseType, setExerciseType] = useState("walking")
  const [duration, setDuration] = useState(15)
  const [exerciseLog, setExerciseLog] = useState<ExerciseLog[]>([])
  const [showAnimation, setShowAnimation] = useState(false)

const exerciseGoal = 30 // 30 minutes daily

// Exercise types with calorie burn rates (calories per minute)
  const exerciseTypes = {
    walking: 4,
    running: 10,
    cycling: 8,
    swimming: 9,
    yoga: 3,
    strength: 6,
    hiit: 12,
  }

// Exercise icons
  const exerciseIcons: Record<string, string> = {
    walking: "🚶",
    running: "🏃",
    cycling: "🚴",
    swimming: "🏊",
    yoga: "🧘",
    strength: "🏋️",
    hiit: "⚡",
  }

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Load saved data from localStorage
      const savedMinutes = localStorage.getItem("exerciseMinutes")
      const savedProgress = localStorage.getItem("exerciseProgress")
      const savedLog = localStorage.getItem("exerciseLog")

if (savedMinutes) setExerciseMinutes(Number.parseInt(savedMinutes))
      if (savedProgress) setProgress(Number.parseInt(savedProgress))
      if (savedLog) {
        try {
          setExerciseLog(JSON.parse(savedLog))
        } catch (e) {
          console.error("Error parsing exercise log:", e)
          setExerciseLog([])
        }
      }
    }
  }, [])

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Save to localStorage whenever values change
      localStorage.setItem("exerciseMinutes", exerciseMinutes.toString())
      localStorage.setItem("exerciseProgress", progress.toString())
      localStorage.setItem("exerciseLog", JSON.stringify(exerciseLog))
    }
  }, [exerciseMinutes, progress, exerciseLog])

const logExercise = () => {
    const newTotalMinutes = exerciseMinutes + duration
    setExerciseMinutes(newTotalMinutes)
    setProgress(Math.min(Math.round((newTotalMinutes / exerciseGoal) * 100), 100))

const now = new Date()
    const dateString = now.toLocaleDateString("en-US", { month: "short", day: "numeric" })
    const timeString = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })

// Calculate calories burned based on exercise type
    const caloriesPerMinute = exerciseTypes[exerciseType as keyof typeof exerciseTypes] || 5
    const caloriesBurned = Math.round(duration * caloriesPerMinute)

const newLog: ExerciseLog = {
      type: exerciseType,
      duration: duration,
      date: dateString,
      time: timeString,
      calories: caloriesBurned,
    }

setExerciseLog([...exerciseLog, newLog])

// Show animation
    setShowAnimation(true)
    setTimeout(() => setShowAnimation(false), 1500)

// Dispatch goal complete event if target reached
    if (newTotalMinutes >= exerciseGoal && exerciseMinutes < exerciseGoal) {
      const event = new Event("goalComplete")
      document.dispatchEvent(event)
    }
  }

const resetExercise = () => {
    setExerciseMinutes(0)
    setProgress(0)
    setExerciseLog([])
  }

// Calculate total calories burned
  const totalCalories = exerciseLog.reduce((total, log) => total + log.calories, 0)

return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=600&query=fitness%20exercise%20activity')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Exercise Tracker</CardTitle>
            <CardDescription>Track your daily physical activity</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4 relative z-10">
            <div className="flex justify-center">
              <div className="relative w-40 h-40 flex items-center justify-center">
                <svg className="w-full h-full" viewBox="0 0 100 100">
                  <circle
                    className="text-gray-200 stroke-current"
                    strokeWidth="10"
                    cx="50"
                    cy="50"
                    r="40"
                    fill="none"
                  ></circle>
                  <circle
                    className="text-green-500 stroke-current"
                    strokeWidth="10"
                    strokeLinecap="round"
                    cx="50"
                    cy="50"
                    r="40"
                    fill="none"
                    strokeDasharray="251.2"
                    strokeDashoffset={251.2 - (251.2 * progress) / 100}
                  ></circle>
                </svg>
                <div className="absolute flex flex-col items-center justify-center">
                  <div className={`text-2xl ${showAnimation ? "animate-pulse" : ""}`}>
                    {exerciseIcons[exerciseType] || <Activity className="h-8 w-8 text-green-500" />}
                  </div>
                  <span className="text-2xl font-bold mt-1">
                    {exerciseMinutes}/{exerciseGoal}
                  </span>
                  <span className="text-sm text-muted-foreground">minutes</span>
                </div>
              </div>
            </div>

<div className="space-y-3">
              <div className="grid grid-cols-2 gap-2">
                <div className="space-y-1">
                  <label className="text-sm font-medium">Exercise Type</label>
                  <Select value={exerciseType} onValueChange={setExerciseType}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select exercise" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="walking">🚶 Walking</SelectItem>
                      <SelectItem value="running">🏃 Running</SelectItem>
                      <SelectItem value="cycling">🚴 Cycling</SelectItem>
                      <SelectItem value="swimming">🏊 Swimming</SelectItem>
                      <SelectItem value="yoga">🧘 Yoga</SelectItem>
                      <SelectItem value="strength">🏋️ Strength Training</SelectItem>
                      <SelectItem value="hiit">⚡ HIIT</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-1">
                  <label className="text-sm font-medium">Duration (minutes)</label>
                  <div className="flex items-center">
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={() => setDuration(Math.max(5, duration - 5))}
                      className="h-10 w-10"
                    >
                      <Minus className="h-4 w-4" />
                    </Button>
                    <Input
                      type="number"
                      value={duration}
                      onChange={(e) => setDuration(Number.parseInt(e.target.value) || 0)}
                      className="h-10 text-center mx-2"
                      min="5"
                      max="120"
                    />
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={() => setDuration(Math.min(120, duration + 5))}
                      className="h-10 w-10"
                    >
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

<div className="flex justify-center space-x-4 pt-2">
                <Button variant="default" onClick={logExercise} className="bg-green-500 hover:bg-green-600">
                  <Timer className="h-4 w-4 mr-2" />
                  Log Exercise
                </Button>
                <Button variant="outline" size="sm" onClick={resetExercise}>
                  Reset
                </Button>
              </div>
            </div>

<div className="flex justify-between items-center pt-2">
              <div>
                <p className="text-sm font-medium">Total Calories Burned</p>
                <p className="text-2xl font-bold">{totalCalories} kcal</p>
              </div>
              <div>
                <p className="text-sm font-medium">Weekly Target</p>
                <p className="text-2xl font-bold">{exerciseGoal * 7} min</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=600&query=fitness%20tracker%20activity%20log')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Activity Log</CardTitle>
            <CardDescription>Your exercise history</CardDescription>
          </CardHeader>
          <CardContent className="relative z-10">
            <div className="space-y-4">
              {exerciseLog.length > 0 ? (
                exerciseLog.map((log, index) => (
                  <div
                    key={index}
                    className="flex justify-between items-center p-2 rounded-lg hover:bg-muted/50 transition-colors"
                  >
                    <div>
                      <p className="font-medium capitalize">
                        <span className="mr-2">{exerciseIcons[log.type] || "🏃"}</span>
                        {log.type}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        {log.date} at {log.time}
                      </p>
                    </div>
                    <div className="text-right">
                      <p>{log.duration} min</p>
                      <p className="text-sm text-muted-foreground">{log.calories} kcal</p>
                    </div>
                  </div>
                ))
              ) : (
                <p className="text-center text-muted-foreground">No exercise recorded today</p>
              )}
            </div>
          </CardContent>
          <CardFooter className="flex flex-col items-start relative z-10">
            <Separator className="my-2" />
            <div className="space-y-2 w-full">
              <h4 className="font-medium">Exercise Benefits:</h4>
              <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
                <li>Improves cardiovascular health</li>
                <li>Increases strength and endurance</li>
                <li>Reduces stress and anxiety</li>
                <li>Improves sleep quality</li>
                <li>Boosts mood and energy levels</li>
              </ul>
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wellness/sleep-tracker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Moon, Clock, BedDouble, AlarmClock, Sparkles } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

type SleepLog = {
  date: string
  bedtime: string
  wakeTime: string
  duration: number
  quality: number
}

export function SleepTracker() {
  const [sleepHours, setSleepHours] = useState(0)
  const [progress, setProgress] = useState(0)
  const [bedtime, setBedtime] = useState("22:30")
  const [wakeTime, setWakeTime] = useState("06:30")
  const [sleepQuality, setSleepQuality] = useState(3)
  const [sleepLog, setSleepLog] = useState<SleepLog[]>([])
  const [showAnimation, setShowAnimation] = useState(false)

const sleepGoal = 8 // 8 hours daily

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Load saved data from localStorage
      const savedHours = localStorage.getItem("sleepHours")
      const savedProgress = localStorage.getItem("sleepProgress")
      const savedBedtime = localStorage.getItem("bedtime")
      const savedWakeTime = localStorage.getItem("wakeTime")
      const savedLog = localStorage.getItem("sleepLog")

if (savedHours) setSleepHours(Number.parseFloat(savedHours))
      if (savedProgress) setProgress(Number.parseInt(savedProgress))
      if (savedBedtime) setBedtime(savedBedtime)
      if (savedWakeTime) setWakeTime(savedWakeTime)
      if (savedLog) {
        try {
          setSleepLog(JSON.parse(savedLog))
        } catch (e) {
          console.error("Error parsing sleep log:", e)
          setSleepLog([])
        }
      }
    }
  }, [])

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Save to localStorage whenever values change
      localStorage.setItem("sleepHours", sleepHours.toString())
      localStorage.setItem("sleepProgress", progress.toString())
      localStorage.setItem("bedtime", bedtime)
      localStorage.setItem("wakeTime", wakeTime)
      localStorage.setItem("sleepLog", JSON.stringify(sleepLog))
    }
  }, [sleepHours, progress, bedtime, wakeTime, sleepLog])

const calculateSleepDuration = (bedtime: string, wakeTime: string) => {
    const [bedHours, bedMinutes] = bedtime.split(":").map(Number)
    const [wakeHours, wakeMinutes] = wakeTime.split(":").map(Number)

let hours = wakeHours - bedHours
    let minutes = wakeMinutes - bedMinutes

if (minutes < 0) {
      minutes += 60
      hours -= 1
    }

if (hours < 0) {
      hours += 24
    }

return hours + minutes / 60
  }

const logSleep = () => {
    const duration = calculateSleepDuration(bedtime, wakeTime)
    setSleepHours(duration)
    setProgress(Math.min(Math.round((duration / sleepGoal) * 100), 100))

const now = new Date()
    const dateString = now.toLocaleDateString("en-US", { month: "short", day: "numeric" })

const newLog: SleepLog = {
      date: dateString,
      bedtime: bedtime,
      wakeTime: wakeTime,
      duration: duration,
      quality: sleepQuality,
    }

setSleepLog([...sleepLog, newLog])

// Show animation
    setShowAnimation(true)
    setTimeout(() => setShowAnimation(false), 1500)

// Dispatch goal complete event if target reached
    if (duration >= sleepGoal && sleepHours < sleepGoal) {
      const event = new Event("goalComplete")
      document.dispatchEvent(event)
    }
  }

const resetSleep = () => {
    setSleepHours(0)
    setProgress(0)
    setSleepLog([])
  }

// Calculate average sleep quality
  const averageQuality =
    sleepLog.length > 0 ? Math.round(sleepLog.reduce((total, log) => total + log.quality, 0) / sleepLog.length) : 0

<div className="space-y-3">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="bedtime">Bedtime</Label>
                  <div className="flex items-center">
                    <BedDouble className="h-4 w-4 mr-2 text-muted-foreground" />
                    <Input id="bedtime" type="time" value={bedtime} onChange={(e) => setBedtime(e.target.value)} />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="wakeTime">Wake Time</Label>
                  <div className="flex items-center">
                    <AlarmClock className="h-4 w-4 mr-2 text-muted-foreground" />
                    <Input id="wakeTime" type="time" value={wakeTime} onChange={(e) => setWakeTime(e.target.value)} />
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <Label>Sleep Quality</Label>
                <div className="flex justify-between">
                  {[1, 2, 3, 4, 5].map((rating) => (
                    <Button
                      key={rating}
                      type="button"
                      variant={sleepQuality === rating ? "default" : "outline"}
                      className={sleepQuality === rating ? "bg-purple-500 hover:bg-purple-600" : ""}
                      onClick={() => setSleepQuality(rating)}
                    >
                      {rating}
                    </Button>
                  ))}
                </div>
                <div className="flex justify-between text-xs text-muted-foreground px-2">
                  <span>Poor</span>
                  <span>Excellent</span>
                </div>
              </div>

<div className="flex justify-center space-x-4 pt-2">
                <Button variant="default" onClick={logSleep} className="bg-purple-500 hover:bg-purple-600">
                  <Clock className="h-4 w-4 mr-2" />
                  Log Sleep
                </Button>
                <Button variant="outline" size="sm" onClick={resetSleep}>
                  Reset
                </Button>
              </div>
            </div>

<div className="flex justify-between items-center pt-2">
              <div>
                <p className="text-sm font-medium">Optimal Bedtime</p>
                <p className="text-xl font-bold">10:30 PM</p>
              </div>
              <div>
                <p className="text-sm font-medium">Optimal Wake Time</p>
                <p className="text-xl font-bold">6:30 AM</p>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=600&query=sleep%20cycle%20chart')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Sleep Log</CardTitle>
            <CardDescription>Your sleep history</CardDescription>
          </CardHeader>
          <CardContent className="relative z-10">
            <div className="space-y-4">
              {sleepLog.length > 0 ? (
                sleepLog.map((log, index) => (
                  <div
                    key={index}
                    className="flex justify-between items-center p-2 rounded-lg hover:bg-muted/50 transition-colors"
                  >
                    <div>
                      <p className="font-medium">{log.date}</p>
                      <p className="text-sm text-muted-foreground">
                        {log.bedtime} - {log.wakeTime}
                      </p>
                    </div>
                    <div className="text-right">
                      <p>{log.duration.toFixed(1)} hours</p>
                      <div className="flex">
                        {[...Array(5)].map((_, i) => (
                          <Moon
                            key={i}
                            className={`h-3 w-3 ${i < log.quality ? "text-purple-500" : "text-gray-300"}`}
                          />
                        ))}
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <p className="text-center text-muted-foreground">No sleep data recorded</p>
              )}
            </div>
          </CardContent>
          <CardFooter className="flex flex-col items-start relative z-10">
            <Separator className="my-2" />
            <div className="space-y-2 w-full">
              <h4 className="font-medium">Sleep Tips:</h4>
              <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
                <li>Maintain a consistent sleep schedule</li>
                <li>Avoid screens 1 hour before bedtime</li>
                <li>Keep your bedroom cool and dark</li>
                <li>Limit caffeine after 2 PM</li>
                <li>Practice relaxation techniques before bed</li>
              </ul>
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wellness/habit-tracker.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Check, Plus, Trash2, Sparkles } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

type Habit = {
  id: string
  name: string
  completed: boolean
  streak: number
  category: string
}

export function HabitTracker() {
  const [habits, setHabits] = useState<Habit[]>([
    { id: "1", name: "Drink 8 glasses of water", completed: false, streak: 0, category: "health" },
    { id: "2", name: "Exercise for 30 minutes", completed: false, streak: 0, category: "fitness" },
    { id: "3", name: "Read for 20 minutes", completed: false, streak: 0, category: "personal" },
    { id: "4", name: "Meditate for 10 minutes", completed: false, streak: 0, category: "mindfulness" },
    { id: "5", name: "Plan tomorrow's tasks", completed: false, streak: 0, category: "productivity" },
  ])

const [newHabitName, setNewHabitName] = useState("")
  const [newHabitCategory, setNewHabitCategory] = useState("health")
  const [completedHabits, setCompletedHabits] = useState(0)
  const [progress, setProgress] = useState(0)
  const [recentlyCompleted, setRecentlyCompleted] = useState<string | null>(null)

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Load saved data from localStorage
      const savedHabits = localStorage.getItem("habits")
      const savedCompleted = localStorage.getItem("completedHabits")
      const savedProgress = localStorage.getItem("habitProgress")

if (savedHabits) {
        try {
          setHabits(JSON.parse(savedHabits))
        } catch (e) {
          console.error("Error parsing habits:", e)
        }
      }
      if (savedCompleted) setCompletedHabits(Number.parseInt(savedCompleted))
      if (savedProgress) setProgress(Number.parseInt(savedProgress))
    }
  }, [])

useEffect(() => {
    // Calculate completed habits
    const completed = habits.filter((habit) => habit.completed).length
    setCompletedHabits(completed)
    setProgress(Math.round((completed / habits.length) * 100))

// Only run on client-side
    if (typeof window !== "undefined") {
      // Save to localStorage
      localStorage.setItem("habits", JSON.stringify(habits))
      localStorage.setItem("completedHabits", completed.toString())
      localStorage.setItem("habitProgress", progress.toString())
      localStorage.setItem("totalHabits", habits.length.toString())
    }
  }, [habits, progress])

const toggleHabit = (id: string) => {
    setHabits(
      habits.map((habit) => {
        if (habit.id === id) {
          const newCompleted = !habit.completed

// If completing a habit, show animation and possibly trigger goal complete
          if (newCompleted) {
            setRecentlyCompleted(id)
            setTimeout(() => setRecentlyCompleted(null), 2000)

// Check if this completes all habits
            const currentCompleted = habits.filter((h) => h.completed).length
            if (currentCompleted === habits.length - 1) {
              // This is the last habit to complete
              const event = new Event("goalComplete")
              document.dispatchEvent(event)
            }
          }

return {
            ...habit,
            completed: newCompleted,
            streak: newCompleted ? habit.streak + 1 : habit.streak,
          }
        }
        return habit
      }),
    )
  }

const addHabit = () => {
    if (newHabitName.trim()) {
      const newHabit: Habit = {
        id: Date.now().toString(),
        name: newHabitName.trim(),
        completed: false,
        streak: 0,
        category: newHabitCategory,
      }

setHabits([...habits, newHabit])
      setNewHabitName("")
    }
  }

const deleteHabit = (id: string) => {
    setHabits(habits.filter((habit) => habit.id !== id))
  }

const resetHabits = () => {
    setHabits(
      habits.map((habit) => ({
        ...habit,
        completed: false,
      })),
    )
  }

// Get category color
  const getCategoryColor = (category: string) => {
    switch (category) {
      case "health":
        return "text-blue-500"
      case "fitness":
        return "text-green-500"
      case "personal":
        return "text-purple-500"
      case "mindfulness":
        return "text-amber-500"
      case "productivity":
        return "text-red-500"
      default:
        return "text-gray-500"
    }
  }

// Get category emoji
  const getCategoryEmoji = (category: string) => {
    switch (category) {
      case "health":
        return "💧"
      case "fitness":
        return "🏃"
      case "personal":
        return "📚"
      case "mindfulness":
        return "🧘"
      case "productivity":
        return "✅"
      default:
        return "🔄"
    }
  }

<Dialog>
              <DialogTrigger asChild>
                <Button className="w-full bg-amber-500 hover:bg-amber-600">
                  <Plus className="h-4 w-4 mr-2" />
                  Add New Habit
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add New Habit</DialogTitle>
                  <DialogDescription>Create a new habit to track daily.</DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="habit-name">Habit Name</Label>
                    <Input
                      id="habit-name"
                      placeholder="e.g., Drink water, Exercise, Read..."
                      value={newHabitName}
                      onChange={(e) => setNewHabitName(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="habit-category">Category</Label>
                    <select
                      id="habit-category"
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                      value={newHabitCategory}
                      onChange={(e) => setNewHabitCategory(e.target.value)}
                    >
                      <option value="health">Health</option>
                      <option value="fitness">Fitness</option>
                      <option value="personal">Personal</option>
                      <option value="mindfulness">Mindfulness</option>
                      <option value="productivity">Productivity</option>
                    </select>
                  </div>
                </div>
                <DialogFooter>
                  <Button onClick={addHabit} className="bg-amber-500 hover:bg-amber-600">
                    Add Habit
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>

<div className="space-y-2">
              {habits.map((habit) => (
                <div
                  key={habit.id}
                  className={`flex items-center justify-between p-3 border rounded-lg transition-all duration-300 ${
                    recentlyCompleted === habit.id ? "bg-amber-100 dark:bg-amber-900/20" : ""
                  }`}
                >
                  <div className="flex items-center">
                    <Button
                      variant={habit.completed ? "default" : "outline"}
                      size="icon"
                      className={`mr-2 h-8 w-8 ${habit.completed ? "bg-amber-500 hover:bg-amber-600" : ""}`}
                      onClick={() => toggleHabit(habit.id)}
                    >
                      {habit.completed ? <Check className="h-4 w-4" /> : null}
                    </Button>
                    <div>
                      <p className={`font-medium ${habit.completed ? "line-through text-muted-foreground" : ""}`}>
                        <span className="mr-2">{getCategoryEmoji(habit.category)}</span>
                        {habit.name}
                      </p>
                      <div className="flex items-center">
                        <span className={`text-xs ${getCategoryColor(habit.category)}`}>
                          {habit.category.charAt(0).toUpperCase() + habit.category.slice(1)}
                        </span>
                        {habit.streak > 0 && (
                          <Badge variant="outline" className="ml-2 text-xs">
                            {habit.streak} day streak 🔥
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                  <Button variant="ghost" size="icon" onClick={() => deleteHabit(habit.id)}>
                    <Trash2 className="h-4 w-4 text-muted-foreground" />
                  </Button>
                </div>
              ))}
            </div>

<Button variant="outline" size="sm" onClick={resetHabits} className="w-full">
              Reset All Habits
            </Button>
          </CardContent>
        </Card>

<Card className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/placeholder.svg?height=400&width=600&query=habit%20building%20consistency')] bg-cover bg-center opacity-5"></div>
          <CardHeader className="relative z-10">
            <CardTitle>Habit Statistics</CardTitle>
            <CardDescription>Your habit performance and streaks</CardDescription>
          </CardHeader>
          <CardContent className="relative z-10">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-muted rounded-lg p-4 text-center">
                  <p className="text-sm text-muted-foreground">Completion Rate</p>
                  <p className="text-2xl font-bold">{progress}%</p>
                </div>
                <div className="bg-muted rounded-lg p-4 text-center">
                  <p className="text-sm text-muted-foreground">Longest Streak</p>
                  <p className="text-2xl font-bold">
                    {habits.length > 0 ? Math.max(...habits.map((h) => h.streak)) : 0} days
                  </p>
                </div>
              </div>

<div>
                <h4 className="font-medium mb-2">Habits by Category</h4>
                <div className="space-y-2">
                  {["health", "fitness", "personal", "mindfulness", "productivity"].map((category) => {
                    const categoryHabits = habits.filter((h) => h.category === category)
                    const completed = categoryHabits.filter((h) => h.completed).length
                    const total = categoryHabits.length

if (total === 0) return null

return (
                      <div key={category} className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div
                            className={`w-3 h-3 rounded-full mr-2 ${getCategoryColor(category).replace("text-", "bg-")}`}
                          ></div>
                          <span className="capitalize">
                            {getCategoryEmoji(category)} {category}
                          </span>
                        </div>
                        <div className="flex items-center">
                          <span>
                            {completed}/{total}
                          </span>
                          <Progress value={total > 0 ? (completed / total) * 100 : 0} className="h-2 w-20 ml-2" />
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex flex-col items-start relative z-10">
            <Separator className="my-2" />
            <div className="space-y-2 w-full">
              <h4 className="font-medium">Habit Building Tips:</h4>
              <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
                <li>Start with small, achievable habits</li>
                <li>Connect new habits to existing routines</li>
                <li>Track your progress consistently</li>
                <li>Focus on consistency, not perfection</li>
                <li>Celebrate your streaks and milestones</li>
              </ul>
            </div>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/wellness-meditation-nature-zen.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wellness-meditation-nature-zen-1Uu0yRZ7LK9LK63vPH1SNK1WBfJdxB.png"
[V0_FILE]png:file="public/abstract-wellness-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-wellness-pattern-6t1vaQGOvIGJza9aREsveAq781rZ1h.png"
[V0_FILE]png:file="public/placeholder-xtdhm.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png"
[V0_FILE]png:file="public/wellness-motivation-abstract.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wellness-motivation-abstract-pNa4fRzJW5HLtplZqkNHLSuGZjXsWp.png"
[V0_FILE]png:file="public/wellness-daily-routine.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wellness-daily-routine-lLAYh6OjmuLc7gNanqSGV3TnmcjYSy.png"
[V0_FILE]png:file="public/wellness-header-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wellness-header-bg-99gq6dzoCYnipFWG5nqx0F1araS8Rs.png"
[V0_FILE]typescriptreact:file="components/wellness/wellness-dashboard.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Droplet, Activity, Moon, Sun, Check, ArrowLeft, Heart, Sparkles } from "lucide-react"
import { WaterTracker } from "./water-tracker"
import { ExerciseTracker } from "./exercise-tracker"
import { SleepTracker } from "./sleep-tracker"
import { HabitTracker } from "./habit-tracker"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"

export function WellnessDashboard() {
  const [activeTab, setActiveTab] = useState("overview")
  const [overallProgress, setOverallProgress] = useState(0)
  const [date, setDate] = useState("")
  const [waterAmount, setWaterAmount] = useState(0)
  const [waterProgress, setWaterProgress] = useState(0)
  const [exerciseMinutes, setExerciseMinutes] = useState(0)
  const [exerciseProgress, setExerciseProgress] = useState(0)
  const [sleepHours, setSleepHours] = useState(0)
  const [sleepProgress, setSleepProgress] = useState(0)
  const [completedHabits, setCompletedHabits] = useState(0)
  const [totalHabits, setTotalHabits] = useState(5)
  const [habitProgress, setHabitProgress] = useState(0)
  const [showMotivation, setShowMotivation] = useState(false)
  const [motivationalQuote, setMotivationalQuote] = useState("")
  const [isLoaded, setIsLoaded] = useState(false)

const motivationalQuotes = [
    "The only bad workout is the one that didn't happen.",
    "Small daily improvements lead to stunning results.",
    "Your health is an investment, not an expense.",
    "Take care of your body. It's the only place you have to live.",
    "Wellness is the complete integration of body, mind, and spirit.",
    "The greatest wealth is health.",
    "Healthy habits today create a better tomorrow.",
    "Your body hears everything your mind says.",
    "Wellness is not a destination, but a path to optimal wellbeing.",
    "Self-care is not selfish. You cannot serve from an empty vessel.",
  ]

useEffect(() => {
    // Only run on client-side
    if (typeof window !== "undefined") {
      // Load data from localStorage
      const storedWaterAmount = localStorage.getItem("waterAmount")
      const storedWaterProgress = localStorage.getItem("waterProgress")
      const storedExerciseMinutes = localStorage.getItem("exerciseMinutes")
      const storedExerciseProgress = localStorage.getItem("exerciseProgress")
      const storedSleepHours = localStorage.getItem("sleepHours")
      const storedSleepProgress = localStorage.getItem("sleepProgress")
      const storedCompletedHabits = localStorage.getItem("completedHabits")
      const storedTotalHabits = localStorage.getItem("totalHabits")
      const storedHabitProgress = localStorage.getItem("habitProgress")

// Set state from localStorage if available
      if (storedWaterAmount) setWaterAmount(Number.parseInt(storedWaterAmount))
      if (storedWaterProgress) setWaterProgress(Number.parseInt(storedWaterProgress))
      if (storedExerciseMinutes) setExerciseMinutes(Number.parseInt(storedExerciseMinutes))
      if (storedExerciseProgress) setExerciseProgress(Number.parseInt(storedExerciseProgress))
      if (storedSleepHours) setSleepHours(Number.parseFloat(storedSleepHours))
      if (storedSleepProgress) setSleepProgress(Number.parseInt(storedSleepProgress))
      if (storedCompletedHabits) setCompletedHabits(Number.parseInt(storedCompletedHabits))
      if (storedTotalHabits) setTotalHabits(Number.parseInt(storedTotalHabits))
      if (storedHabitProgress) setHabitProgress(Number.parseInt(storedHabitProgress))

// Calculate overall progress
      const overall = Math.round(
        ((storedWaterProgress ? Number.parseInt(storedWaterProgress) : 0) +
          (storedExerciseProgress ? Number.parseInt(storedExerciseProgress) : 0) +
          (storedSleepProgress ? Number.parseInt(storedSleepProgress) : 0) +
          (storedHabitProgress ? Number.parseInt(storedHabitProgress) : 0)) /
          4,
      )

setOverallProgress(overall)

// Set random motivational quote
      setMotivationalQuote(motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)])

// Show motivation if progress is good
      if (overall > 75) {
        setShowMotivation(true)
        setTimeout(() => setShowMotivation(false), 5000)
      }
    }

// Set current date
    const today = new Date()
    setDate(today.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" }))

// Set loaded state after a small delay to trigger animations
    setTimeout(() => {
      setIsLoaded(true)
    }, 100)
  }, [])

return (
    <div className="container mx-auto p-4 space-y-6">
      {/* Enhanced Header with Background and Animations */}
      <div className="relative rounded-xl overflow-hidden mb-8 shadow-lg">
        <div className="absolute inset-0 bg-gradient-animated"></div>
        <div className="absolute inset-0 bg-[url('/wellness-header-bg.png')] bg-cover bg-center opacity-15 mix-blend-overlay"></div>

{/* Animated decorative elements */}
        <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl animate-float"></div>
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-teal-500/10 rounded-full translate-y-1/2 -translate-x-1/2 blur-xl animate-float animate-delay-300"></div>

{/* Small animated particles */}
        <div className="absolute top-1/4 left-1/4 w-6 h-6 bg-emerald-500/20 rounded-full blur-sm animate-pulse-subtle"></div>
        <div className="absolute bottom-1/4 right-1/3 w-4 h-4 bg-blue-500/20 rounded-full blur-sm animate-pulse-subtle animate-delay-200"></div>
        <div className="absolute top-1/2 right-1/4 w-5 h-5 bg-purple-500/20 rounded-full blur-sm animate-pulse-subtle animate-delay-400"></div>

<div className="relative z-10 p-6 md:p-8">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
              <div className={`flex items-center gap-2 ${isLoaded ? "animate-fade-in" : "opacity-0"}`}>
                <Link
                  href="/"
                  className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors hover:scale-105 transition-transform"
                >
                  <ArrowLeft className="h-4 w-4 mr-1" />
                  Back to Home
                </Link>
              </div>
              <div className="flex items-center gap-3 mt-2">
                <div
                  className={`bg-gradient-to-br from-teal-500 to-emerald-600 p-2 rounded-lg shadow-lg ${isLoaded ? "animate-slide-in-right animate-pulse-subtle" : "opacity-0"}`}
                >
                  <Heart className="h-6 w-6 text-white" />
                </div>
                <h1
                  className={`text-3xl font-bold tracking-tight ${isLoaded ? "animate-slide-in-right animate-delay-100" : "opacity-0"}`}
                >
                  Daily Wellness Dashboard
                </h1>
              </div>
              <p
                className={`text-muted-foreground mt-1 flex items-center ${isLoaded ? "animate-slide-in-right animate-delay-200" : "opacity-0"}`}
              >
                <span>{date}</span>
                {overallProgress > 75 && (
                  <span className="ml-2 inline-flex items-center text-amber-500">
                    <Sparkles className="h-4 w-4 mr-1 animate-sparkle" /> Great progress today!
                  </span>
                )}
              </p>
            </div>
            <div className={`flex items-center gap-2 ${isLoaded ? "animate-slide-in-left" : "opacity-0"}`}>
              <Badge
                variant={overallProgress > 75 ? "success" : "outline"}
                className={`px-4 py-2 text-sm transition-all duration-300 ${
                  overallProgress > 75
                    ? "bg-gradient-to-r from-emerald-500 to-teal-500 text-white animate-pulse-subtle"
                    : ""
                }`}
              >
                Overall Progress: {overallProgress}%
              </Badge>
              <Button
                variant="outline"
                size="sm"
                className="shadow-sm hover:shadow-md transition-shadow duration-300 hover:scale-105 transition-transform"
              >
                Export Data
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Motivational message */}
      {showMotivation && (
        <div className="bg-gradient-to-r from-emerald-500 to-teal-500 text-white p-4 rounded-lg animate-fade-in-out relative overflow-hidden">
          <div className="absolute inset-0 bg-[url('/wellness-motivation-abstract.png')] bg-cover bg-center opacity-10"></div>
          <div className="relative z-10">
            <p className="font-medium text-lg">{motivationalQuote}</p>
            <p className="text-sm opacity-90">Keep up the great work! Your wellness journey is on track.</p>
          </div>
        </div>
      )}

<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList
          className={`grid grid-cols-5 md:w-[600px] ${isLoaded ? "animate-slide-in-up animate-delay-300" : "opacity-0"}`}
        >
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="water">Water</TabsTrigger>
          <TabsTrigger value="exercise">Exercise</TabsTrigger>
          <TabsTrigger value="sleep">Sleep</TabsTrigger>
          <TabsTrigger value="habits">Habits</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card
              className={`relative overflow-hidden transition-all duration-300 hover:shadow-md ${isLoaded ? "animate-fade-in animate-delay-400" : "opacity-0"}`}
            >
              <div className="absolute inset-0 bg-blue-500/5"></div>
              <CardHeader className="pb-2 relative z-10">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Droplet className="h-4 w-4 mr-2 text-blue-500" />
                  Water Intake
                </CardTitle>
              </CardHeader>
              <CardContent className="relative z-10">
                <div className="text-2xl font-bold">{waterAmount}/8 glasses</div>
                <Progress value={waterProgress} className="h-2 mt-2" />
              </CardContent>
              <CardFooter className="pt-0 relative z-10">
                <p className="text-xs text-muted-foreground">Target: 2 liters (8 glasses)</p>
              </CardFooter>
            </Card>

<Card
              className={`relative overflow-hidden transition-all duration-300 hover:shadow-md ${isLoaded ? "animate-fade-in animate-delay-500" : "opacity-0"}`}
            >
              <div className="absolute inset-0 bg-green-500/5"></div>
              <CardHeader className="pb-2 relative z-10">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Activity className="h-4 w-4 mr-2 text-green-500" />
                  Exercise
                </CardTitle>
              </CardHeader>
              <CardContent className="relative z-10">
                <div className="text-2xl font-bold">{exerciseMinutes}/30 min</div>
                <Progress value={exerciseProgress} className="h-2 mt-2" />
              </CardContent>
              <CardFooter className="pt-0 relative z-10">
                <p className="text-xs text-muted-foreground">Target: 30 minutes daily</p>
              </CardFooter>
            </Card>

<Card
              className={`relative overflow-hidden transition-all duration-300 hover:shadow-md ${isLoaded ? "animate-fade-in animate-delay-500" : "opacity-0"}`}
            >
              <div className="absolute inset-0 bg-purple-500/5"></div>
              <CardHeader className="pb-2 relative z-10">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Moon className="h-4 w-4 mr-2 text-purple-500" />
                  Sleep
                </CardTitle>
              </CardHeader>
              <CardContent className="relative z-10">
                <div className="text-2xl font-bold">{sleepHours}/8 hours</div>
                <Progress value={sleepProgress} className="h-2 mt-2" />
              </CardContent>
              <CardFooter className="pt-0 relative z-10">
                <p className="text-xs text-muted-foreground">Target: 8 hours (10:30 PM - 6:30 AM)</p>
              </CardFooter>
            </Card>

<Card
              className={`relative overflow-hidden transition-all duration-300 hover:shadow-md ${isLoaded ? "animate-fade-in animate-delay-500" : "opacity-0"}`}
            >
              <div className="absolute inset-0 bg-amber-500/5"></div>
              <CardHeader className="pb-2 relative z-10">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Check className="h-4 w-4 mr-2 text-amber-500" />
                  Habits
                </CardTitle>
              </CardHeader>
              <CardContent className="relative z-10">
                <div className="text-2xl font-bold">
                  {completedHabits}/{totalHabits}
                </div>
                <Progress value={habitProgress} className="h-2 mt-2" />
              </CardContent>
              <CardFooter className="pt-0 relative z-10">
                <p className="text-xs text-muted-foreground">Daily habits completed</p>
              </CardFooter>
            </Card>
          </div>

<Card
            className={`relative overflow-hidden transition-all duration-300 hover:shadow-md ${isLoaded ? "animate-fade-in animate-delay-500" : "opacity-0"}`}
          >
            <div className="absolute inset-0 bg-[url('/wellness-daily-routine.png')] bg-cover bg-center opacity-5"></div>
            <CardHeader className="relative z-10">
              <CardTitle>Today's Schedule</CardTitle>
              <CardDescription>Your optimal daily routine</CardDescription>
            </CardHeader>
            <CardContent className="relative z-10">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <Sun className="h-5 w-5 mr-2 text-amber-500" />
                    <div>
                      <p className="font-medium">Morning Routine</p>
                      <p className="text-sm text-muted-foreground">6:30 AM - 8:00 AM</p>
                    </div>
                  </div>
                  <Badge variant={Math.random() > 0.5 ? "success" : "outline"}>
                    {Math.random() > 0.5 ? "Completed" : "Pending"}
                  </Badge>
                </div>

<div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <Activity className="h-5 w-5 mr-2 text-green-500" />
                    <div>
                      <p className="font-medium">Exercise</p>
                      <p className="text-sm text-muted-foreground">7:00 AM - 7:30 AM</p>
                    </div>
                  </div>
                  <Badge variant={exerciseProgress > 50 ? "success" : "outline"}>
                    {exerciseProgress > 50 ? "Completed" : "Pending"}
                  </Badge>
                </div>

<div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <Droplet className="h-5 w-5 mr-2 text-blue-500" />
                    <div>
                      <p className="font-medium">Drink Water</p>
                      <p className="text-sm text-muted-foreground">Throughout the day (8 glasses)</p>
                    </div>
                  </div>
                  <Badge variant={waterProgress > 50 ? "success" : "outline"}>
                    {waterProgress > 50 ? "On Track" : "Behind"}
                  </Badge>
                </div>

<div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <Moon className="h-5 w-5 mr-2 text-purple-500" />
                    <div>
                      <p className="font-medium">Bedtime Routine</p>
                      <p className="text-sm text-muted-foreground">10:00 PM - 10:30 PM</p>
                    </div>
                  </div>
                  <Badge variant="outline">Upcoming</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="habits">
          <HabitTracker />
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/password-protection.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Lock, Key, AlertCircle } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface PasswordProtectionProps {
  correctPassword: string
  onAuthenticated?: () => void
}

export function PasswordProtection({ correctPassword, onAuthenticated }: PasswordProtectionProps) {
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [attempts, setAttempts] = useState(0)
  const router = useRouter()

// Check if user is already authenticated in localStorage
  useEffect(() => {
    if (typeof window !== "undefined") {
      const authenticated = localStorage.getItem("personal-notes-authenticated") === "true"
      if (authenticated) {
        setIsAuthenticated(true)
        onAuthenticated?.()
      }
    }
  }, [onAuthenticated])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (password === correctPassword) {
      setIsAuthenticated(true)
      setError(null)
      localStorage.setItem("personal-notes-authenticated", "true")
      onAuthenticated?.()
    } else {
      setAttempts((prev) => prev + 1)
      setError("Incorrect password. Please try again.")

// If too many failed attempts, redirect to home
      if (attempts >= 4) {
        setTimeout(() => {
          router.push("/")
        }, 2000)
      }
    }
  }

if (isAuthenticated) {
    return null
  }

return (
    <div className="flex min-h-[80vh] items-center justify-center p-4 bg-gradient-to-b from-muted/50 to-muted">
      <Card className="w-full max-w-md shadow-lg animate-fadeIn">
        <CardHeader className="space-y-1">
          <div className="flex justify-center mb-4">
            <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
              <Lock className="h-8 w-8 text-primary" />
            </div>
          </div>
          <CardTitle className="text-2xl text-center">Protected Content</CardTitle>
          <CardDescription className="text-center">
            Please enter the password to access your personal notes.
          </CardDescription>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            {error && (
              <Alert variant="destructive" className="animate-shake">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
            <div className="space-y-2">
              <div className="relative">
                <Key className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  type="password"
                  placeholder="Enter password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10"
                  autoFocus
                />
              </div>
            </div>
          </CardContent>
          <CardFooter>
            <Button type="submit" className="w-full">
              Unlock
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="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.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--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;
  }
}

@layer utilities {
  .animate-fade-in-out {
    animation: fadeInOut 5s ease-in-out;
  }

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
  }

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
  }

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
  }

.animate-pulse-subtle {
    animation: pulseSubtle 3s infinite ease-in-out;
  }

.animate-float {
    animation: float 6s infinite ease-in-out;
  }

.animate-sparkle {
    animation: sparkle 2s infinite ease-in-out;
  }

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
  }

.animate-delay-100 {
    animation-delay: 100ms;
  }

.animate-delay-200 {
    animation-delay: 200ms;
  }

.animate-delay-300 {
    animation-delay: 300ms;
  }

.animate-delay-400 {
    animation-delay: 400ms;
  }

.animate-delay-500 {
    animation-delay: 500ms;
  }

@keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    10% {
      opacity: 1;
      transform: translateY(0);
    }
    90% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

@keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes pulseSubtle {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
    100% {
      transform: scale(1);
    }
  }

@keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0px);
    }
  }

@keyframes sparkle {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.1);
    }
    100% {
      opacity: 0.8;
      transform: scale(1);
    }
  }

@keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

.bg-gradient-wellness {
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.1) 0%,
    rgba(59, 130, 246, 0.1) 50%,
    rgba(139, 92, 246, 0.1) 100%
  );
}

.bg-gradient-animated {
  background: linear-gradient(
    135deg,
    rgba(20, 184, 166, 0.2) 0%,
    rgba(59, 130, 246, 0.2) 50%,
    rgba(139, 92, 246, 0.2) 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

.shadow-soft {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

/* Add a custom badge variant */
.badge-success {
  background: linear-gradient(to right, rgb(16, 185, 129), rgb(20, 184, 166));
  color: white;
}

/* Animations for password protection and notes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
[V0_FILE]png:file="public/abstract-notes-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-notes-pattern-dadt9HPOSmEnLvnhWmb1sXjl1Totfn.png"
[V0_FILE]markdown:file="public/data/social-media-hashtags.md"
# Social Media Hashtag Reference Guide

## General Purpose Hashtags

### Trending & Popular
\`\`\`
#trending #viral #popular #explore #followme #follow #like #share #comment #engagement #community
\`\`\`

### Content Types
\`\`\`
#photo #video #reels #shorts #tutorial #howto #guide #tips #tricks #advice #story #stories
\`\`\`

### Emotions & Reactions
\`\`\`
#love #happy #sad #excited #motivated #inspired #blessed #grateful #thankful #amazing #awesome
\`\`\`

## Platform-Specific Hashtags

### Instagram
\`\`\`
#instagram #instadaily #instagood #instamood #instaphoto #instapic #igers #igdaily #photooftheday #picoftheday #instagrammers #instastyle #instafashion #instatravel #instafood #instafitness
\`\`\`

### Twitter/X
\`\`\`
#twitterpost #tweet #twitterverse #twitterworld #tweetoftheday #twitterthoughts #twitterupdate #twittertrends #twitterchat #twitterfriends #twitterfam
\`\`\`

### LinkedIn
\`\`\`
#linkedin #linkedintips #linkedinlearning #linkedinlife #linkedinmarketing #linkedinnetworking #linkedinconnections #linkedinprofile #linkedinposts #linkedinstrategy #linkedinbusiness #linkedininfluencer #linkedincareer #linkedinjobs #linkedintraining
\`\`\`

### Facebook
\`\`\`
#facebook #facebooklive #facebookmarketing #facebookpage #facebookgroup #facebookads #facebooktips #facebookupdate #facebookbusiness #facebookcommunity #facebookevent
\`\`\`

### TikTok
\`\`\`
#tiktok #tiktokviral #tiktoktrend #tiktoker #tiktokdance #tiktokchallenge #tiktokmemes #tiktokfunny #tiktokfamous #tiktokforyou #tiktokfyp #tiktokcreator #tiktokmusic #tiktoklife #tiktokvideo
\`\`\`

### YouTube
\`\`\`
#youtube #youtuber #youtubechannel #youtubevideos #youtubecontent #youtubesubscribe #youtubemarketing #youtubegaming #youtubevlogger #youtubemusic #youtubeshorts #youtubelife #youtubecommunity
\`\`\`

### Pinterest
\`\`\`
#pinterest #pinterestinspired #pinterestideas #pinterestdiy #pinterestrecipes #pinterestfashion #pinteresthome #pinterestmarketing #pinterestworthy #pinterestfood #pinterestcraft #pinterestfinds
\`\`\`

## Industry & Niche Hashtags

### Business & Entrepreneurship
\`\`\`
#business #entrepreneur #entrepreneurship #startup #smallbusiness #businessowner #businesstips #businessgrowth #businessstrategy #businesscoach #businessmindset #businessopportunity #businesslife #businesssuccess #entrepreneurlife #entrepreneurmindset
\`\`\`

### Marketing & Digital Marketing
\`\`\`
#marketing #digitalmarketing #marketingstrategy #marketingtips #socialmediamarketing #contentmarketing #emailmarketing #marketingagency #marketingdigital #marketingonline #marketingplan #influencermarketing #affiliatemarketing #brandmarketing #videomarketing
\`\`\`

### Technology & IT
\`\`\`
#technology #tech #innovation #ai #artificialintelligence #machinelearning #datascience #programming #coding #developer #software #hardware #cybersecurity #blockchain #cryptocurrency #bitcoin #ethereum #web3 #metaverse #nft #iot #internetofthings #cloudcomputing
\`\`\`

### Health & Wellness
\`\`\`
#health #wellness #healthylifestyle #fitness #workout #exercise #nutrition #diet #mentalhealth #mindfulness #meditation #yoga #selfcare #selflove #healthyliving #healthyeating #healthyfood #healthandwellness #wellbeing #holistichealth
\`\`\`

### Travel & Adventure
\`\`\`
#travel #adventure #wanderlust #travelgram #travelphotography #traveltheworld #travelblogger #traveladdict #travelholic #travelguide #traveldiaries #travellife #travelcouple #travelfamily #travelbuddy #travelinfluencer #travelinspiration #travelgoals
\`\`\`

### Food & Cooking
\`\`\`
#food #foodie #foodporn #foodphotography #foodlover #foodblogger #foodgram #foodstagram #instafood #homemade #cooking #recipe #recipes #chef #baking #dessert #breakfast #lunch #dinner #healthyfood #veganfood #vegetarianfood #foodreview #foodguide
\`\`\`

### Fashion & Beauty
\`\`\`
#fashion #style #fashionista #fashionblogger #fashionstyle #fashionable #fashionweek #fashiondesigner #fashionphotography #fashionaddict #fashionlover #beauty #makeup #skincare #haircare #hairstyle #nails #cosmetics #beautytips #beautyblogger #beautyproducts
\`\`\`

### Education & Learning
\`\`\`
#education #learning #study #student #teacher #teaching #school #college #university #onlinelearning #elearning #knowledge #skills #training #course #workshop #webinar #certification #degree #diploma #scholarship #academic #research #science #math #history #literature
\`\`\`

### Art & Creativity
\`\`\`
#art #artist #artwork #creative #creativity #design #drawing #painting #illustration #sketch #digitalart #photography #photographer #photooftheday #graphicdesign #webdesign #uidesign #uxdesign #animation #3dart #sculpture #crafts #handmade #diy
\`\`\`

### Motivation & Inspiration
\`\`\`
#motivation #inspiration #motivationalquotes #inspirationalquotes #success #goals #dreams #believe #achieve #mindset #positivity #positivethinking #positivemindset #positivevibes #goodvibes #quotes #quoteoftheday #dailyquotes #lifequotes #wisdom #truth #life #lifestyle
\`\`\`

## Seasonal & Event Hashtags

### Holidays & Celebrations
\`\`\`
#christmas #newyear #halloween #thanksgiving #easter #valentinesday #mothersday #fathersday #4thofjuly #laborday #memorialday #stpatricksday #cincodemayo #diwali #eid #hanukkah #birthday #anniversary #wedding #graduation #celebration #party #holiday #holidays #festival
\`\`\`

### Seasons
\`\`\`
#spring #summer #fall #autumn #winter #seasonal #springvibes #summervibes #fallvibes #autumnvibes #wintervibes #springfashion #summerfashion #fallfashion #autumnfashion #winterfashion
\`\`\`

### Special Days & Awareness
\`\`\`
#worldmentalhealthday #earthday #internationalwomensday #pridemonth #blackhistorymonth #breastcancerawareness #autism #awareness #support #cause #charity #nonprofit #fundraising #donate #volunteer #giveback #community #socialimpact #sustainability #environment #climatechange
\`\`\`

## Location-Based Hashtags

### Countries
\`\`\`
#usa #canada #uk #australia #india #japan #china #germany #france #italy #spain #brazil #mexico #russia #southkorea #singapore #uae #southafrica #newzealand #thailand #indonesia #malaysia #philippines #vietnam #turkey #egypt #morocco #kenya #nigeria #ghana
\`\`\`

### Cities
\`\`\`
#newyork #losangeles #chicago #houston #miami #toronto #vancouver #london #paris #berlin #rome #madrid #barcelona #tokyo #seoul #beijing #shanghai #hongkong #singapore #sydney #melbourne #dubai #mumbai #delhi #bangkok #istanbul #cairo #capetown #lagos #nairobi
\`\`\`

### Travel Destinations
\`\`\`
#beach #mountains #lake #river #ocean #sea #island #forest #jungle #desert #nationalpark #cityscape #landscape #nature #wildlife #adventure #hiking #camping #roadtrip #backpacking #vacation #holiday #resort #hotel #airbnb #staycation
\`\`\`

## Content Strategy Hashtags

### Content Marketing
\`\`\`
#contentcreator #contentmarketing #contentcreation #contentwriter #contentwriting #contentstrategy #contentideas #blogpost #blogging #blogger #vlog #vlogger #podcast #podcaster #newsletter #ebook #whitepaper #casestudy #infographic #webinar #livestream
\`\`\`

### Call to Actions
\`\`\`
#followme #follow #like #comment #share #subscribe #linkinbio #clickthelink #swipeup #tagandfriend #doubleTap #savethispost #bookmarkit #joinme #signup #register #download #buynow #shopnow #ordernow #limitedtime #limitedoffer #discount #sale #promo #giveaway #contest
\`\`\`

### Growth & Engagement
\`\`\`
#growyourbusiness #growthstrategy #growthhacking #growthmindset #engagement #engagementpost #engagementtips #followers #followergrowth #audiencegrowth #communitybuilding #networking #collaboration #partnership #influencer #brandambassador #sponsored #ad #promotion
\`\`\`

## How to Use Hashtags Effectively

1. **Research relevant hashtags** for your niche and content
2. **Mix popular and niche hashtags** to maximize reach
3. **Create branded hashtags** for your business or campaign
4. **Keep hashtags relevant** to your content
5. **Don't overuse hashtags** - quality over quantity
6. **Monitor hashtag performance** and adjust your strategy
7. **Follow trending hashtags** in your industry
8. **Participate in hashtag challenges** and campaigns
9. **Create a hashtag library** for easy access and consistency
10. **Update your hashtag strategy** regularly based on performance

Remember, the most effective hashtags are those that are relevant to your content and audience. Use this guide as a starting point and customize your hashtag strategy based on your specific goals and target audience.
\`\`\`

Now, let's add a link to this hashtag page in the Personal Notes page:

```typescriptreact file="app/personal-notes/page.tsx"
[v0-no-op-code-block-prefix]"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { PasswordProtection } from "@/components/password-protection"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ArrowLeft, Save, Trash, Plus, Edit, FileText, Hash } from 'lucide-react'
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

interface Note {
  id: string
  title: string
  content: string
  createdAt: string
  updatedAt: string
}

export default function PersonalNotesPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [notes, setNotes] = useState<Note[]>([])
  const [currentNote, setCurrentNote] = useState<Note | null>(null)
  const [isEditing, setIsEditing] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

// Load notes from localStorage
  useEffect(() => {
    if (typeof window !== "undefined" && isAuthenticated) {
      try {
        const savedNotes = localStorage.getItem("personal-notes")
        if (savedNotes) {
          setNotes(JSON.parse(savedNotes))
        }
      } catch (error) {
        console.error("Failed to load notes:", error)
      }
    }
  }, [isAuthenticated])

// Save notes to localStorage
  useEffect(() => {
    if (typeof window !== "undefined" && notes.length > 0) {
      localStorage.setItem("personal-notes", JSON.stringify(notes))
    }
  }, [notes])

const handleAuthenticated = () => {
    setIsAuthenticated(true)
  }

const handleCreateNote = () => {
    const newNote: Note = {
      id: Date.now().toString(),
      title: "New Note",
      content: "",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }
    setCurrentNote(newNote)
    setIsEditing(true)
  }

const handleSaveNote = () => {
    if (!currentNote) return

const updatedNote = {
      ...currentNote,
      updatedAt: new Date().toISOString(),
    }

const noteExists = notes.some((note) => note.id === currentNote.id)

if (noteExists) {
      setNotes(notes.map((note) => (note.id === currentNote.id ? updatedNote : note)))
    } else {
      setNotes([...notes, updatedNote])
    }

setIsEditing(false)
    setCurrentNote(null)

toast({
      title: "Note saved",
      description: "Your note has been saved successfully.",
    })
  }

const handleDeleteNote = (id: string) => {
    setNotes(notes.filter((note) => note.id !== id))

if (currentNote?.id === id) {
      setCurrentNote(null)
      setIsEditing(false)
    }

toast({
      title: "Note deleted",
      description: "Your note has been deleted.",
      variant: "destructive",
    })
  }

const handleEditNote = (note: Note) => {
    setCurrentNote(note)
    setIsEditing(true)
  }

const handleViewNote = (note: Note) => {
    setCurrentNote(note)
    setIsEditing(false)
  }

const handleLogout = () => {
    if (typeof window !== "undefined") {
      localStorage.removeItem("personal-notes-authenticated")
      setIsAuthenticated(false)
      router.push("/")
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const openHashtagReference = () => {
    if (typeof window !== "undefined") {
      window.open("/data/social-media-hashtags.md", "_blank")
    }
  }

if (!isAuthenticated) {
    return (
      <PasswordProtection
        correctPassword={process.env.NEXT_PUBLIC_NOTES_PASSWORD || "password123"}
        onAuthenticated={handleAuthenticated}
      />
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/30">
      <header className="border-b bg-card shadow-sm">
        <div className="container flex items-center justify-between h-16 px-4">
          <div className="flex items-center gap-2">
            <Link href="/">
              <Button variant="ghost" size="icon">
                <ArrowLeft className="h-5 w-5" />
              </Button>
            </Link>
            <h1 className="text-xl font-semibold">Personal Notes</h1>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={openHashtagReference}>
              <Hash className="h-4 w-4 mr-2" />
              Hashtag Reference
            </Button>
            <Button variant="outline" onClick={handleLogout}>
              Logout
            </Button>
            <Button onClick={handleCreateNote}>
              <Plus className="h-4 w-4 mr-2" />
              New Note
            </Button>
          </div>
        </div>
      </header>

<div className="container px-4 py-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-1 space-y-4">
            <h2 className="text-lg font-medium flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Your Notes
            </h2>

{notes.length === 0 ? (
              <Card>
                <CardContent className="p-6 text-center text-muted-foreground">
                  <p>No notes yet. Create your first note!</p>
                </CardContent>
              </Card>
            ) : (
              <div className="space-y-2">
                {notes.map((note) => (
                  <Card
                    key={note.id}
                    className={`cursor-pointer transition-colors hover:bg-muted/50 ${currentNote?.id === note.id ? "border-primary" : ""}`}
                    onClick={() => handleViewNote(note)}
                  >
                    <CardContent className="p-4">
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-medium truncate">{note.title}</h3>
                          <p className="text-sm text-muted-foreground truncate">
                            {note.content.substring(0, 60)}
                            {note.content.length > 60 ? "..." : ""}
                          </p>
                          <p className="text-xs text-muted-foreground mt-2">Updated: {formatDate(note.updatedAt)}</p>
                        </div>
                        <div className="flex gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={(e) => {
                              e.stopPropagation()
                              handleEditNote(note)
                            }}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={(e) => {
                              e.stopPropagation()
                              handleDeleteNote(note.id)
                            }}
                          >
                            <Trash className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}
          </div>

<div className="md:col-span-2">
            {currentNote ? (
              <Card className="h-full">
                {isEditing ? (
                  <>
                    <CardHeader className="pb-3">
                      <Input
                        value={currentNote.title}
                        onChange={(e) => setCurrentNote({ ...currentNote, title: e.target.value })}
                        className="text-lg font-semibold"
                        placeholder="Note Title"
                      />
                    </CardHeader>
                    <CardContent>
                      <Textarea
                        value={currentNote.content}
                        onChange={(e) => setCurrentNote({ ...currentNote, content: e.target.value })}
                        className="min-h-[300px] resize-none"
                        placeholder="Write your note here..."
                      />
                    </CardContent>
                    <CardFooter className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        onClick={() => {
                          setIsEditing(false)
                          if (!notes.some((note) => note.id === currentNote.id)) {
                            setCurrentNote(null)
                          }
                        }}
                      >
                        Cancel
                      </Button>
                      <Button onClick={handleSaveNote}>
                        <Save className="h-4 w-4 mr-2" />
                        Save Note
                      </Button>
                    </CardFooter>
                  </>
                ) : (
                  <>
                    <CardHeader className="pb-3">
                      <CardTitle>{currentNote.title}</CardTitle>
                      <CardDescription>
                        Created: {formatDate(currentNote.createdAt)}
                        {currentNote.createdAt !== currentNote.updatedAt &&
                          ` • Updated: ${formatDate(currentNote.updatedAt)}`}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="whitespace-pre-wrap">{currentNote.content}</div>
                    </CardContent>
                    <CardFooter className="flex justify-end gap-2">
                      <Button variant="outline" onClick={() => handleEditNote(currentNote)}>
                        <Edit className="h-4 w-4 mr-2" />
                        Edit
                      </Button>
                      <Button variant="destructive" onClick={() => handleDeleteNote(currentNote.id)}>
                        <Trash className="h-4 w-4 mr-2" />
                        Delete
                      </Button>
                    </CardFooter>
                  </>
                )}
              </Card>
            ) : (
              <Card className="h-full flex items-center justify-center">
                <CardContent className="p-6 text-center text-muted-foreground">
                  <p>Select a note to view or create a new one</p>
                  <Button className="mt-4" onClick={handleCreateNote}>
                    <Plus className="h-4 w-4 mr-2" />
                    Create Note
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hashtag-reference/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { PasswordProtection } from "@/components/password-protection"
import MarkdownViewer from "@/components/markdown-viewer"

export default function HashtagReferencePage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const router = useRouter()

// Check if user is authenticated
  useEffect(() => {
    if (typeof window !== "undefined") {
      const authenticated = localStorage.getItem("personal-notes-authenticated")
      if (authenticated === "true") {
        setIsAuthenticated(true)
      }
    }
  }, [])

const handleAuthenticated = () => {
    if (typeof window !== "undefined") {
      localStorage.setItem("personal-notes-authenticated", "true")
      setIsAuthenticated(true)
    }
  }

return <MarkdownViewer filePath="/data/social-media-hashtags.md" />
}
[V0_FILE]markdown:file="public/data/feedback-templates.md"
# Comprehensive Feedback Templates

## Product Feedback

### Positive Product Feedback

\`\`\`
I recently purchased [Product Name] and I'm extremely satisfied with my experience. The [specific feature] works exactly as advertised and has significantly improved my [specific task/activity]. The quality exceeds my expectations, especially considering the reasonable price point. The customer service team was also very helpful when I had questions about [specific aspect]. I would definitely recommend this product to others looking for a reliable solution.
\`\`\`

### Constructive Product Feedback

\`\`\`
I've been using [Product Name] for [time period], and while I appreciate [positive aspect], I believe there's room for improvement. Specifically, the [feature/aspect] could be enhanced by [specific suggestion]. Additionally, I found the [another feature] somewhat difficult to navigate because [specific reason]. These adjustments would significantly improve the user experience. Despite these issues, I still find value in [positive aspect of product] and look forward to future updates.
\`\`\`

### Negative Product Feedback

\`\`\`
I regret to inform you that my experience with [Product Name] has been disappointing. After using it for [time period], I've encountered several issues including [specific problem 1], [specific problem 2], and [specific problem 3]. These problems have significantly impacted my ability to [intended use]. I've attempted to resolve these issues by [actions taken] but without success. I would appreciate [specific resolution - refund/replacement/fix]. I hope these concerns will be addressed promptly.
\`\`\`

## Service Feedback

### Positive Service Feedback

\`\`\`
I wanted to express my appreciation for the exceptional service I received from [Company/Person Name] on [date/time period]. [Employee name/department] was particularly helpful, demonstrating remarkable [qualities - e.g., patience, knowledge, efficiency] while assisting me with [specific situation]. The entire process was [positive descriptors - e.g., smooth, efficient, pleasant], and I was impressed by [specific aspect of service]. This level of customer care is why I continue to choose your company for my [service type] needs.
\`\`\`

### Constructive Service Feedback

\`\`\`
I'm writing regarding my recent experience with your [service type] on [date]. While I appreciated [positive aspect], I believe the service could be improved in several ways. The [specific aspect] took longer than expected because [reason if known]. Additionally, there seemed to be some confusion regarding [specific issue]. I would suggest [specific improvement] to enhance the customer experience. I value your company and hope this feedback helps improve your already good service.
\`\`\`

### Negative Service Feedback

\`\`\`
I'm writing to express my dissatisfaction with the service I received on [date] at [location/department]. My experience fell short of expectations in several ways. [Describe specific incident/issue in detail]. The staff member(s) involved were [description of behavior/attitude]. This experience caused me [describe impact - inconvenience, financial loss, etc.]. I would appreciate [specific resolution - apology, compensation, etc.]. I hope these issues will be addressed to prevent similar situations for other customers.
\`\`\`

## Website Feedback

### Positive Website Feedback

\`\`\`
I recently visited your website and wanted to share my positive experience. The site is exceptionally well-designed with an intuitive navigation system that made finding [specific information/product] very easy. The page loading speed was impressive, and I particularly appreciated the [specific feature - e.g., search functionality, product filters, etc.]. The mobile responsiveness was also excellent, allowing me to seamlessly continue browsing on my phone. The content was informative and answered all my questions about [specific topic]. Overall, your website provided an outstanding user experience.
\`\`\`

### Constructive Website Feedback

\`\`\`
I've been using your website regularly and have some suggestions that might enhance the user experience. While the overall design is appealing, I noticed that [specific feature] could be more intuitive if [suggestion]. Additionally, when trying to [specific action], I found it took several clicks to complete what could potentially be a simpler process. The [specific page] contains valuable information but could benefit from [suggestion - e.g., more visual elements, clearer headings, etc.]. These adjustments would make an already good website even better.
\`\`\`

### Negative Website Feedback

\`\`\`
I encountered several issues while attempting to use your website on [date/time]. Specifically, I was unable to [action - e.g., complete a purchase, find information, etc.] due to [specific problem - e.g., error messages, broken links, etc.]. Additionally, the [specific feature] did not function as expected when I [specific action]. The mobile version of the site was particularly problematic, with [specific mobile issues]. These technical issues prevented me from [intended action] and resulted in a frustrating user experience. I hope these issues can be addressed promptly.
\`\`\`

## App Feedback

### Positive App Feedback

\`\`\`
I've been using the [App Name] app for [time period] and I'm thoroughly impressed. The user interface is clean and intuitive, making navigation effortless. I particularly appreciate the [specific feature], which has helped me [specific benefit]. The app runs smoothly without crashing or lagging, even when I'm [specific intensive use]. The recent update that added [new feature] has made the experience even better. The developers clearly understand user needs and consistently deliver valuable improvements. I've already recommended this app to several friends.
\`\`\`

### Constructive App Feedback

\`\`\`
I've been using [App Name] for [time period] and while I enjoy many aspects of it, I have some suggestions for improvement. The [specific feature] works well, but could be enhanced by [specific suggestion]. I occasionally experience [minor issue] when trying to [specific action]. It would also be helpful if the app included [suggested new feature] to address [specific need]. Despite these suggestions, I find the app valuable for [specific use case] and appreciate the regular updates and improvements.
\`\`\`

### Negative App Feedback

\`\`\`
I'm experiencing significant issues with the [App Name] app that are affecting my user experience. Since [installing/updating] the app on [date/version], I've encountered [specific problem 1], [specific problem 2], and [specific problem 3]. These issues occur when I attempt to [specific action] and have resulted in [negative consequences - e.g., data loss, inability to use key features, etc.]. I've tried [troubleshooting steps taken] without resolution. I'm considering switching to an alternative app unless these critical issues are addressed in the next update.
\`\`\`

## Course/Educational Content Feedback

### Positive Course Feedback

\`\`\`
I recently completed [Course Name] and wanted to express my appreciation for the exceptional learning experience. The curriculum was comprehensive and well-structured, covering all the essential topics in [subject area]. [Instructor Name]'s teaching style was engaging and effective, making complex concepts accessible through clear explanations and practical examples. The course materials, especially [specific resource], were valuable and will serve as useful references in the future. The assignments and projects provided meaningful opportunities to apply the concepts learned. This course has significantly enhanced my knowledge and skills in [subject area], and I've already begun applying what I learned to [specific application].
\`\`\`

### Constructive Course Feedback

\`\`\`
I recently completed [Course Name] and while I found it valuable overall, I have some suggestions that might enhance the learning experience for future students. The content on [specific topic] was excellent, but [another topic] could benefit from more in-depth coverage or practical examples. The [specific assignment/project] was particularly challenging because [specific reason], and additional guidance or resources might help students succeed. I also think the course could be improved by incorporating more [suggestion - e.g., real-world applications, group discussions, etc.]. Despite these suggestions, I appreciated [positive aspects] and have gained valuable knowledge that will help me in [specific application].
\`\`\`

### Negative Course Feedback

\`\`\`
I'm writing to share my concerns about [Course Name] which I recently completed. Unfortunately, the course did not meet my expectations or learning needs for several reasons. The curriculum lacked depth in critical areas such as [specific topics], and the explanations for [complex concepts] were insufficient for developing a proper understanding. The course materials, particularly [specific resource], contained outdated information that doesn't reflect current industry standards. Additionally, [specific issue with course delivery/structure]. Given these significant shortcomings, I don't feel the course provided adequate value for the [time/money] invested. I would appreciate [specific resolution - e.g., partial refund, additional resources, etc.].
\`\`\`

## Event Feedback

### Positive Event Feedback

\`\`\`
I had the pleasure of attending [Event Name] on [date] and wanted to share my positive experience. The event was exceptionally well-organized, from the registration process to the closing remarks. The venue was appropriate for the occasion, with excellent facilities and accessibility. The agenda was well-structured, allowing sufficient time for each segment while maintaining an engaging pace throughout. I particularly enjoyed [specific session/speaker/activity], which provided valuable insights on [specific topic]. The networking opportunities were also excellent, enabling me to connect with several interesting professionals in [industry/field]. The catering and refreshments were of high quality and accommodated various dietary preferences. Overall, this was one of the best [type of event] I've attended, and I look forward to participating in future events organized by [Organization Name].
\`\`\`

### Constructive Event Feedback

\`\`\`
Thank you for organizing [Event Name] on [date]. I appreciated the opportunity to [learn about/network/participate in] [event purpose]. While many aspects of the event were well-executed, such as [positive elements], I believe there are opportunities for enhancement in future events. The [specific aspect - e.g., registration process, venue logistics, etc.] could be improved by [specific suggestion]. Additionally, the [another aspect] would benefit from [another suggestion]. It might also be worth considering [additional suggestion for future events]. Despite these suggestions, I found value in [positive aspects of the event] and would be interested in attending similar events in the future.
\`\`\`

### Negative Event Feedback

\`\`\`
I attended [Event Name] on [date] and regret to inform you that my experience fell significantly short of expectations. There were several issues that impacted my participation and the overall value I received. The [specific problem - e.g., disorganized registration, technical difficulties, etc.] caused [specific negative impact]. Additionally, the [another issue] was particularly disappointing because [reason]. The [third issue] also detracted from the experience. These problems collectively resulted in [overall negative outcome - e.g., wasted time, inability to achieve goals for attending, etc.]. I hope this feedback helps improve future events, as the concept and intended content seemed valuable despite the execution issues.
\`\`\`

## Restaurant/Food Service Feedback

### Positive Restaurant Feedback

\`\`\`
I recently dined at [Restaurant Name] on [date] and had an exceptional experience that I wanted to share. The ambiance was [description - e.g., warm, elegant, cozy] and created the perfect atmosphere for our [occasion]. Our server, [name if known], was attentive, knowledgeable, and provided excellent recommendations. The food was outstanding - particularly the [specific dish], which was prepared to perfection with [notable qualities]. The [another dish or aspect] also deserves special mention for [specific reason]. The timing of courses was well-paced, and the presentation was beautiful. The value for the quality received was excellent. This dining experience exceeded our expectations, and we've already planned our next visit. Thank you for a memorable meal.
\`\`\`

### Constructive Restaurant Feedback

\`\`\`
I dined at [Restaurant Name] on [date] and wanted to share some thoughts on my experience. There were many positive aspects to my visit, including [positive elements - e.g., friendly staff, delicious appetizers, etc.]. However, I noticed a few areas where improvements could enhance the dining experience. The [specific aspect - e.g., wait time, portion size, etc.] could be improved by [suggestion]. Additionally, the [another aspect] was somewhat [issue - e.g., inconsistent, underwhelming] compared to the rest of the experience. Despite these minor issues, I enjoyed my overall visit and appreciated [positive aspects]. I look forward to returning and seeing how the restaurant evolves.
\`\`\`

### Negative Restaurant Feedback

\`\`\`
I regret to inform you about my disappointing experience at [Restaurant Name] on [date]. Several aspects of my visit fell below reasonable expectations for a restaurant of this [price point/reputation]. Upon arrival, [describe any issues with greeting/seating]. The service was [describe issues - e.g., inattentive, rushed, etc.], which significantly impacted our dining experience. Regarding the food, the [specific dish] was [specific issue - e.g., overcooked, cold, etc.], and the [another dish] lacked [quality - e.g., flavor, freshness, etc.]. Additionally, [any other significant issues]. Given these concerns, I felt the value received did not justify the [cost/time]. I'm sharing this feedback in hopes that it will help improve the experience for future diners.
\`\`\`

## Hotel/Accommodation Feedback

### Positive Hotel Feedback

\`\`\`
I recently stayed at [Hotel Name] from [check-in date] to [check-out date] and wanted to express my appreciation for the exceptional experience. From the moment I arrived, the staff demonstrated outstanding hospitality, particularly [staff member name if known] who [specific positive action]. My [room type] exceeded expectations with its [positive attributes - e.g., cleanliness, comfort, view, etc.]. The [specific amenity - e.g., pool, restaurant, spa] was excellent and enhanced my stay significantly. The location proved perfect for [specific activities/purpose of visit]. The [another positive aspect - e.g., breakfast, housekeeping, concierge service] deserves special mention for [specific reason]. This stay represented excellent value, and I've already recommended your property to colleagues and friends. I look forward to returning on my next visit to [location].
\`\`\`

### Constructive Hotel Feedback

\`\`\`
Thank you for hosting my stay at [Hotel Name] from [check-in date] to [check-out date]. Overall, I had a pleasant experience and particularly appreciated [positive aspects - e.g., convenient location, friendly staff, etc.]. However, I would like to offer some suggestions that might enhance the guest experience. The [specific aspect - e.g., check-in process, room amenities, etc.] could be improved by [specific suggestion]. Additionally, I noticed that the [another aspect] would benefit from [another suggestion]. Despite these minor issues, my stay was comfortable, and I especially enjoyed [positive highlight]. I hope this feedback is helpful as you continue to refine the guest experience.
\`\`\`

### Negative Hotel Feedback

\`\`\`
I'm writing regarding my recent stay at [Hotel Name] from [check-in date] to [check-out date], which unfortunately fell short of expectations in several areas. Upon arrival, [describe any check-in issues]. The room condition was disappointing, specifically [describe problems - e.g., cleanliness issues, maintenance problems, noise, etc.]. Additionally, I experienced [other significant issues - e.g., staff interaction problems, billing discrepancies, etc.]. These issues impacted my stay by [specific negative effects]. I attempted to resolve these concerns by [actions taken - e.g., speaking with management], but [outcome of those attempts]. Given these experiences, I feel that the value received did not align with the [rate paid/brand expectations]. I would appreciate [specific resolution requested].
\`\`\`

## Employee Performance Feedback

### Positive Employee Feedback

\`\`\`
I would like to commend [Employee Name] for their exceptional performance during [time period/project]. [Name] consistently demonstrates [positive qualities - e.g., initiative, attention to detail, teamwork] that significantly contribute to our team's success. During the recent [specific project/situation], [he/she/they] [specific accomplishment] which resulted in [positive outcome - e.g., increased efficiency, client satisfaction, etc.]. [Name]'s approach to [specific responsibility] is particularly effective because [reason]. Additionally, [he/she/they] has shown growth in [skill area] and has become a resource for team members seeking guidance on [specific knowledge area]. [Name]'s positive attitude and professionalism enhance our work environment, and [his/her/their] contributions are highly valued.
\`\`\`

### Constructive Employee Feedback

\`\`\`
I appreciate [Employee Name]'s contributions to our team and would like to provide some feedback to support [his/her/their] continued growth. [Name] demonstrates clear strengths in [specific areas], particularly [provide example of good performance]. To further enhance effectiveness, I would suggest focusing on developing [specific skill/area for improvement]. For example, during [specific situation], approaching it by [suggested alternative approach] might have [potential better outcome]. I believe [Name] has significant potential to excel in [area] and would benefit from [specific development opportunity - e.g., training, mentoring, etc.]. I'm committed to supporting [his/her/their] professional development and am available to discuss strategies for growth in these areas.
\`\`\`

### Performance Improvement Feedback

\`\`\`
I'm providing this feedback regarding [Employee Name]'s performance over [time period] to address some concerns and establish a path forward. While [Name] has demonstrated strengths in [positive aspects], there are several areas requiring improvement. Specifically, [specific issue 1] has resulted in [negative impact]. Additionally, [specific issue 2] needs attention because [reason]. To address these concerns, I recommend the following action steps: 1) [specific improvement action], 2) [another improvement action], and 3) [additional recommendation]. We will reassess progress in [timeframe] with the expectation of seeing improvement in [specific metrics/behaviors]. I'm available to provide support through [offered resources - e.g., additional training, regular check-ins, etc.] and welcome discussion about how we can work together to achieve these improvements.
\`\`\`

## Academic Feedback

### Positive Assignment Feedback

\`\`\`
Your work on [assignment name] demonstrates excellent understanding of [subject/concepts]. I was particularly impressed with your [specific strength - e.g., analysis, research, creativity] in addressing [specific aspect of assignment]. The section on [specific part] showed insightful thinking, especially when you [specific example]. Your [writing/presentation/argument] was [positive qualities - e.g., clear, well-structured, persuasive] and effectively communicated your ideas. The way you incorporated [specific element - e.g., research, examples, data] strengthened your work considerably. Moving forward, I encourage you to continue developing your skills in [area of strength] while maintaining this level of quality. Excellent job!
\`\`\`

### Constructive Assignment Feedback

\`\`\`
Your work on [assignment name] shows good understanding of many key concepts, particularly [specific strength]. I appreciated your approach to [positive aspect] and your effort in [another positive element]. To strengthen future assignments, I suggest focusing on developing [area for improvement]. For example, the section on [specific part] would be more effective if you [specific suggestion]. Additionally, consider [another recommendation] to enhance your [specific skill - e.g., analysis, argument development, etc.]. I believe implementing these suggestions will help you advance from good work to excellent work. I'm available to discuss these points further if you would find that helpful. Overall, this is a solid effort with clear potential for even stronger performance.
\`\`\`

### Peer Review Feedback

\`\`\`
Thank you for the opportunity to review your [project/paper/presentation] on [topic]. Your work demonstrates several strengths, particularly [specific positive aspects]. I found your [specific section/argument/approach] especially effective because [reason]. The way you [specific technique/method used] contributed significantly to the overall quality. As you refine this work, you might consider [constructive suggestion 1] to further strengthen your [specific aspect]. Additionally, [constructive suggestion 2] could enhance the [another aspect]. I also wondered about [question or area to consider]. I hope these observations are helpful, and I appreciated learning from your perspective on this topic.
\`\`\`

## Community/Volunteer Feedback

### Positive Community Event Feedback

\`\`\`
I wanted to express my appreciation for the recent [community event/initiative] organized by [organization name]. The event successfully [achieved goal - e.g., brought neighbors together, addressed an important issue, etc.] and created [positive outcome - e.g., sense of connection, tangible improvement, etc.]. The [specific aspect - e.g., organization, inclusivity, activities] was particularly impressive. I especially valued the opportunity to [personal benefit - e.g., meet neighbors, learn about an issue, contribute to a cause]. The volunteers and organizers demonstrated remarkable [positive qualities] throughout the event. This initiative represents the kind of community engagement that makes our [neighborhood/city/community] special. I look forward to participating in future events and would be interested in supporting similar initiatives.
\`\`\`

### Constructive Volunteer Program Feedback

\`\`\`
As a volunteer with [organization/program] for [time period], I'd like to share some thoughts on my experience. The program successfully [positive aspects - e.g., addresses important needs, creates meaningful opportunities, etc.], and I've found personal satisfaction in [specific activities/contributions]. To enhance the volunteer experience and potentially increase impact, I would suggest considering [specific suggestion - e.g., improved orientation, clearer communication, etc.]. Additionally, the [specific aspect] might be more effective if [another suggestion]. These adjustments could help address [specific challenge or limitation] that I've observed. Despite these suggestions, I value my involvement with [organization] and appreciate the opportunity to contribute to [mission/cause]. Thank you for your ongoing efforts to make this program valuable for both volunteers and those we serve.
\`\`\`

## Software Development Feedback

### Bug Report Feedback

\`\`\`
I'm reporting an issue with [software name/version] that I encountered on [date/time] while using [operating system/browser/device]. When attempting to [specific action], the system [describe what happens instead of expected behavior]. This occurs consistently when [specific conditions]. I've attempted to resolve the issue by [troubleshooting steps taken] without success. This bug impacts [describe severity - e.g., prevents critical functionality, minor inconvenience, etc.]. I've attached [screenshots/logs/videos] to help illustrate the problem. Additional technical details that might be relevant: [any other system information]. Please let me know if you need any further information to address this issue.
\`\`\`

### Feature Request Feedback

\`\`\`
I'd like to suggest a new feature for [software name] that would enhance the user experience. Currently, users need to [describe current process/limitation] which [describe problem this creates]. Implementing [proposed feature] would [specific benefits - e.g., save time, improve workflow, etc.]. This feature would be particularly valuable for [specific use case or user type] because [reason]. Similar functionality exists in [competitors/other software] and is well-received by users. I envision this working by [specific implementation details if you have ideas]. I believe this addition would align with your product's focus on [core value - e.g., efficiency, user-friendliness, etc.] and would increase satisfaction among [specific user segment]. I'm happy to provide additional context or participate in any user research related to this suggestion.
\`\`\`

### User Experience Feedback

\`\`\`
After using [software/app/website] for [time period], I'd like to share feedback on the user experience. The [specific positive aspects - e.g., overall design, specific features] work well and provide [specific benefits]. However, I've found the [specific aspect - e.g., navigation, specific workflow] to be [issue - e.g., confusing, inefficient, etc.] because [specific reason]. When attempting to [common task], users must [describe current steps] which could be streamlined by [suggestion]. Additionally, the [another aspect] would be more intuitive if [another suggestion]. These adjustments would significantly improve the experience for [user type - e.g., new users, power users, specific roles]. Despite these suggestions, I find [software] valuable for [specific use case] and appreciate the continuous improvements your team implements.
\`\`\`

## Healthcare Feedback

### Positive Patient Experience Feedback

\`\`\`
I recently received care at [healthcare facility] on [date] and wanted to express my appreciation for the exceptional experience. From the initial [appointment scheduling/admission process], the staff demonstrated remarkable [positive qualities - e.g., efficiency, compassion, professionalism]. [Specific staff member/department] deserves special recognition for [specific positive action or quality]. The [specific aspect of care - e.g., explanation of procedures, attention to comfort, follow-up] was particularly impressive. The facility itself was [positive attributes - e.g., clean, well-organized, comfortable]. What stood out most was [most meaningful aspect of experience]. This level of care made a significant difference in my [health journey/specific condition] and reinforced my confidence in [healthcare provider/facility]. Thank you for your commitment to quality patient care.
\`\`\`

### Constructive Healthcare Feedback

\`\`\`
I'm writing regarding my recent experience at [healthcare facility] on [date]. While several aspects of my care were positive, particularly [positive elements], I believe there are opportunities to enhance the patient experience. The [specific aspect - e.g., wait time, communication, etc.] could be improved by [specific suggestion]. Additionally, I found the [another aspect] somewhat [issue - e.g., confusing, uncomfortable] because [specific reason]. It would be helpful if [specific recommendation]. Despite these suggestions, I appreciated [positive aspects of experience] and recognize the challenges healthcare providers face. I'm sharing this feedback constructively to support your ongoing quality improvement efforts.
\`\`\`

## General Purpose Feedback Templates

### Thank You Feedback

\`\`\`
I want to express my sincere gratitude for [specific action/service/help]. Your [quality - e.g., generosity, expertise, kindness] in [specific situation] has made a significant difference by [specific impact]. I particularly appreciated [specific aspect] because [reason it was meaningful]. The way you [specific action] demonstrated [positive quality] and [another positive quality]. This experience has [positive outcome - e.g., strengthened our relationship, solved a problem, etc.]. Thank you again for [action/support] - it truly matters and is deeply appreciated.
\`\`\`

### Suggestion Feedback

\`\`\`
I'd like to offer a suggestion regarding [topic/process/service] that I believe could create value. Currently, [describe current situation/process], which sometimes results in [current limitation/issue]. It might be beneficial to consider [specific suggestion] because [benefits - e.g., improved efficiency, better outcomes, enhanced experience]. This approach has worked well in [similar context/personal experience] and addresses the [specific need/challenge]. Implementation might involve [specific steps if relevant]. I'm offering this suggestion from a constructive perspective and appreciate your consideration of this idea.
\`\`\`

### Complaint Resolution Feedback

\`\`\`
I want to follow up regarding the complaint I submitted about [issue] on [date]. I appreciate [organization/person]'s response and the actions taken to address my concerns. Specifically, [describe resolution actions] effectively addressed the [specific aspect of complaint]. The [specific positive element - e.g., promptness, thoroughness, courtesy] of your response was particularly noteworthy. This experience has [impact on perception - e.g., restored my confidence, reinforced my loyalty, etc.]. Thank you for taking my feedback seriously and demonstrating commitment to [relevant value - e.g., customer satisfaction, quality, etc.]. I will continue to [ongoing relationship - e.g., use your services, recommend your company, etc.] based on this positive resolution experience.
\`\`\`

## How to Use These Templates Effectively

1. **Select the appropriate template** for your specific feedback situation
2. **Customize the bracketed sections** with your specific details and experiences
3. **Adjust the tone and language** to match your personal style and the relationship context
4. **Add specific examples** to make your feedback more credible and actionable
5. **Be honest but constructive**, even when providing negative feedback
6. **Proofread** before sending to ensure clarity and professionalism
7. **Consider timing** - provide feedback when it's most likely to be well-received
8. **Follow up** if appropriate, especially for important feedback that requires action

Remember, the most effective feedback is specific, timely, and delivered with appropriate context. These templates provide a starting point, but personalizing them to your situation will make them more impactful.
\`\`\`

Now, let's create a component to view the feedback templates:
[V0_FILE]typescriptreact:file="app/feedback-templates/page.tsx"
"use client"

export default function FeedbackTemplatesPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const router = useRouter()

const handleAuthenticated = () => {
    if (typeof window !== "undefined") {
      localStorage.setItem("personal-notes-authenticated", "true")
      setIsAuthenticated(true)
    }
  }

return <MarkdownViewer filePath="/data/feedback-templates.md" />
}
[V0_FILE]markdown:file="public/data/email-templates.md"
# Professional Email Templates

This collection provides a variety of email templates for different professional situations. Simply copy the template you need, replace the bracketed text [like this] with your specific information, and adjust the tone and content as needed for your specific situation.

## Introduction and Contact Emails

### Initial Contact / Introduction Email

\`\`\`
Subject: Introduction - MJ Ahmad [Position/Role]

Dear [Recipient Name],

I hope this email finds you well. My name is MJ Ahmad, and I am [your position/role] at [your organization/company]. I recently [how you learned about the recipient or their organization] and was impressed by [specific aspect that interested you].

I am reaching out to [purpose of your email - introduce yourself, explore collaboration opportunities, etc.]. [Brief 1-2 sentence description of your background or organization that is relevant to the recipient].

I would appreciate the opportunity to [specific request - have a brief call, meet for coffee, etc.] to discuss [specific topic] further. I am available [provide some availability options] and can accommodate your schedule.

Thank you for your time and consideration. I look forward to your response.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Follow-Up After Meeting

\`\`\`
Subject: Thank You for Meeting - Next Steps

Dear [Recipient Name],

Thank you for taking the time to meet with me [yesterday/last week/on date]. I greatly appreciated our conversation about [specific topic discussed] and found your insights on [particular point] especially valuable.

As discussed, I will [action item you promised]. I'm also looking forward to [next steps you both agreed on].

[If applicable: I've attached the [documents/information] we discussed for your reference.]

Please don't hesitate to reach out if you have any questions or if there's anything else I can provide.

Thank you again for your time and consideration.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Networking Connection Request

\`\`\`
Subject: Connecting After [Event/Mutual Connection Introduction]

Dear [Recipient Name],

I hope this email finds you well. My name is MJ Ahmad, and we [met at event/were introduced by mutual connection/I came across your profile on LinkedIn]. I was particularly impressed by your work on [specific project/achievement] and would value the opportunity to connect professionally.

[Brief paragraph about yourself and why you're interested in connecting - shared interests, complementary work, etc.]

I believe there could be potential for [collaboration/knowledge sharing/mutual support] in the area of [specific area]. I would appreciate the chance to [have a brief call/virtual coffee chat] to learn more about your work and explore how we might [potential benefit of connecting].

Thank you for considering my request. I look forward to the possibility of connecting.

Warm regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Business and Professional Emails

### Project Proposal

\`\`\`
Subject: Proposal for [Project Name]

Dear [Recipient Name],

I hope this email finds you well. Following our discussion about [previous conversation reference], I am pleased to submit a proposal for [project name/description].

Project Overview:
[Brief 2-3 sentence description of the project]

Key Benefits:
- [Benefit 1]
- [Benefit 2]
- [Benefit 3]

Proposed Timeline:
- [Phase 1]: [Dates] - [Deliverables]
- [Phase 2]: [Dates] - [Deliverables]
- [Phase 3]: [Dates] - [Deliverables]

Budget Estimate: [Amount or range]

[I've attached a detailed proposal document with more information about our approach, methodology, and expected outcomes.]

I believe this project will [main value proposition for the recipient]. I would be happy to discuss this proposal in more detail and answer any questions you might have. Please let me know if you would like to schedule a call to review this further.

Thank you for your consideration. I look forward to the possibility of working together on this initiative.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Request for Partnership/Collaboration

\`\`\`
Subject: Exploring Collaboration Opportunities Between [Your Organization] and [Their Organization]

Dear [Recipient Name],

I hope this email finds you well. My name is MJ Ahmad, and I am the [your position] at [your organization].

I have been following [their organization's] impressive work in [specific area] and believe there could be valuable opportunities for collaboration between our organizations. [Your organization] specializes in [your specialty/focus area], and I see potential synergies in [specific area of potential collaboration].

A partnership could benefit both organizations by:
- [Benefit 1]
- [Benefit 2]
- [Benefit 3]

I would appreciate the opportunity to discuss this potential collaboration further. Would you be available for a [call/meeting] in the coming weeks to explore how we might work together?

Thank you for considering this proposal. I look forward to your response.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Service/Product Inquiry

\`\`\`
Subject: Inquiry About [Their Product/Service]

Dear [Recipient Name/Department],

I hope this email finds you well. I am writing to inquire about [specific product/service] offered by your company.

Our organization, [your organization name], is currently [reason for interest - e.g., looking to upgrade our systems, exploring new solutions for X challenge, etc.]. I am particularly interested in learning more about:

1. [Specific question about features/capabilities]
2. [Question about pricing/packages]
3. [Question about implementation/support]
4. [Any other relevant questions]

Additionally, I would like to know if [specific question about customization/special requirements].

We are hoping to [implement/decide] by [timeframe], so your prompt response would be greatly appreciated. If it would be more convenient to discuss these questions via phone, I am available at [your phone number] during [your availability].

Thank you for your assistance. I look forward to your response.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Job Application Email

\`\`\`
Subject: Application for [Position Title] - MJ Ahmad

Dear [Hiring Manager's Name/Recruitment Team],

I am writing to express my interest in the [Position Title] role at [Company Name], as advertised on [where you found the job posting]. With [number of years] years of experience in [relevant field/industry] and a proven track record in [key skill/achievement relevant to the role], I am excited about the opportunity to bring my unique skills to your team.

In my current role as [Current Position] at [Current Company], I have [describe 1-2 key achievements relevant to the position you're applying for, with specific metrics if possible]. Prior to this, I [briefly mention previous relevant experience].

I am particularly drawn to [Company Name] because of [specific reasons why you want to work for this company - their mission, products, culture, etc.]. The [Position Title] role aligns perfectly with my professional goals to [brief mention of career goals relevant to the position].

Key qualifications and skills I bring include:
- [Relevant skill/qualification 1]
- [Relevant skill/qualification 2]
- [Relevant skill/qualification 3]
- [Relevant skill/qualification 4]

[I have attached my resume and cover letter for your review.] I would welcome the opportunity to discuss how my background, skills, and experiences would be an ideal fit for this position during an interview.

Thank you for considering my application. I look forward to the possibility of working with the [Company Name] team.

Best regards,
MJ Ahmad
[Your Contact Information]
[Your LinkedIn Profile (optional)]
\`\`\`

## Client Communication

### Project Status Update

\`\`\`
Subject: [Project Name] - Status Update [Date/Week Number]

Dear [Client Name],

I hope this email finds you well. I'm writing to provide you with an update on the progress of [Project Name].

Project Status Summary:
- Overall Status: [On track/Slightly delayed/Ahead of schedule]
- Current Phase: [Phase name/number]
- Completion: [X]% complete

Recent Accomplishments:
- [Accomplishment 1]
- [Accomplishment 2]
- [Accomplishment 3]

Current Challenges:
- [Challenge 1]: [Brief description and mitigation plan]
- [Challenge 2]: [Brief description and mitigation plan]

Next Steps:
- [Next step 1] - Expected completion: [date]
- [Next step 2] - Expected completion: [date]
- [Next step 3] - Expected completion: [date]

Action Items Requiring Your Input:
- [Item 1] - Decision needed by [date]
- [Item 2] - Feedback needed by [date]

[If applicable: I've attached [document name] for your review.]

Our next scheduled update meeting is on [date and time]. Please let me know if you have any questions or concerns before then.

Thank you for your continued support and collaboration.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Client Onboarding Email

\`\`\`
Subject: Welcome to [Your Company/Service] - Next Steps

Dear [Client Name],

Welcome to [Your Company/Service]! We're thrilled to have you on board and look forward to helping you [achieve specific goal/benefit of your service].

Here's what you can expect over the coming days:

Immediate Next Steps:
1. [First step - e.g., Schedule kickoff call] - [Brief description/instructions]
2. [Second step - e.g., Complete onboarding form] - [Brief description/instructions]
3. [Third step - e.g., Set up account access] - [Brief description/instructions]

Your Dedicated Team:
- [Team Member Name] - [Role], [email/contact info]
- [Team Member Name] - [Role], [email/contact info]
- [Team Member Name] - [Role], [email/contact info]

Important Resources:
- [Resource 1 - e.g., Client Portal]: [Link/instructions]
- [Resource 2 - e.g., Knowledge Base]: [Link/instructions]
- [Resource 3 - e.g., Support Center]: [Link/instructions]

Our regular business hours are [hours] [timezone], and you can reach our support team at [support email/phone] if you have any questions.

I'll be reaching out on [specific date] to schedule our kickoff call, but please don't hesitate to contact me directly if you need anything in the meantime.

We're excited to begin this journey with you!

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Proposal/Quote Follow-Up

\`\`\`
Subject: Following Up on [Project/Service] Proposal

Dear [Recipient Name],

I hope this email finds you well. I'm writing to follow up on the proposal for [project/service description] that I sent on [date of proposal].

I wanted to check if you've had a chance to review the proposal and if you have any questions or need any clarification. I'd be happy to schedule a call to discuss any aspects of the proposal in more detail.

As mentioned in the proposal, we believe we can [brief value proposition - e.g., help increase your conversion rates by 20% within three months] through our [approach/service/solution].

If you're ready to move forward, here are the next steps:
1. [First step - e.g., Sign and return the attached agreement]
2. [Second step - e.g., Initial payment]
3. [Third step - e.g., Kickoff meeting]

The proposal is valid until [expiration date], and we're currently booking projects to start [timeframe - e.g., in early June].

Thank you for considering [Your Company]. I look forward to your response and the potential opportunity to work together.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Community and Organization Emails

### Event Invitation

\`\`\`
Subject: Invitation: [Event Name] - [Date]

Dear [Recipient Name],

On behalf of [Organization Name], I am delighted to invite you to [Event Name], which will take place on [Date] at [Time] at [Location/Virtual Platform].

About the Event:
[Brief 2-3 sentence description of the event, its purpose, and significance]

Event Highlights:
- [Highlight 1 - e.g., Keynote speaker]
- [Highlight 2 - e.g., Networking opportunities]
- [Highlight 3 - e.g., Special presentations]
- [Highlight 4 - e.g., Exclusive content/resources]

Schedule:
[Time] - [Activity]
[Time] - [Activity]
[Time] - [Activity]
[Time] - [Activity]

[If applicable: Registration is required for this event. Please RSVP by [RSVP deadline] by [RSVP method - e.g., clicking the link below, replying to this email].]

[If applicable: There is a [fee amount] registration fee for this event, which includes [what the fee covers].]

[If virtual: Connection details will be sent to registered participants on [date].]

We believe your participation would greatly enhance our event, and we hope you can join us for what promises to be an engaging and valuable experience.

If you have any questions, please don't hesitate to contact [contact person] at [contact email/phone].

We look forward to your presence at [Event Name].

Warm regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Community Announcement

\`\`\`
Subject: [Important/Exciting] Announcement: [Brief Announcement Title]

Dear [Community Members/Team/Colleagues],

I hope this message finds you well. I am writing to share some [important/exciting] news regarding [topic of announcement].

[Main announcement paragraph - clearly state what is happening, when it's happening, and why it's important]

What This Means for You:
- [Impact point 1]
- [Impact point 2]
- [Impact point 3]

[If applicable: Next steps or actions required from recipients]

[If applicable: Additional resources or information available]

[If applicable: Timeline of changes or events]

If you have any questions or concerns about this announcement, please [contact method - e.g., reply to this email, contact person X, etc.].

Thank you for your [continued support/attention/understanding]. We [value your participation/appreciate your cooperation/look forward to your feedback].

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Volunteer Recruitment

\`\`\`
Subject: Join Us: Volunteer Opportunity with [Organization/Event Name]

Dear [Recipient Name],

I hope this email finds you well. [Organization Name] is currently seeking dedicated volunteers for [specific initiative/event/program], and I thought you might be interested in this opportunity.

About the Opportunity:
[Brief description of the volunteer role and its importance to the organization/cause]

Why We Need Your Help:
[Explain the impact volunteers will have and why this cause matters]

Volunteer Responsibilities:
- [Responsibility 1]
- [Responsibility 2]
- [Responsibility 3]
- [Responsibility 4]

Time Commitment:
[Specify hours per week/month, duration of commitment, specific dates if applicable]

Benefits of Volunteering:
- [Benefit 1 - e.g., Gain experience in specific area]
- [Benefit 2 - e.g., Networking opportunities]
- [Benefit 3 - e.g., Training provided]
- [Benefit 4 - e.g., Community impact]

How to Get Involved:
[Clear instructions on next steps - application process, contact person, deadline, etc.]

If you have any questions or would like more information, please don't hesitate to contact me at [your email/phone].

Thank you for considering this opportunity to make a difference with [Organization Name].

Warm regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Fundraising/Donation Request

\`\`\`
Subject: Support [Cause/Project Name] - Make a Difference Today

Dear [Recipient Name],

I hope this email finds you well. I am writing on behalf of [Organization Name] to invite you to support our [campaign/project/initiative] aimed at [brief description of the cause and its impact].

The Challenge:
[Describe the problem or need being addressed - be specific and compelling]

Our Solution:
[Explain how your organization is addressing this challenge and the impact of your work]

Your Support Makes a Difference:
[Explain specifically how donations will be used and the impact they will have]

- [Amount] provides [specific impact]
- [Amount] provides [specific impact]
- [Amount] provides [specific impact]

[Success story or brief example of previous impact, if applicable]

How to Donate:
[Clear instructions on donation methods - online, check, etc.]

[If applicable: Mention tax deductibility of donations]

[If applicable: Mention matching gift opportunity or campaign deadline]

Thank you for considering a contribution to [Organization/Cause]. Your generosity will help us [reiterate main impact].

If you have any questions about our work or how your donation will be used, please don't hesitate to contact me.

With gratitude,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Educational and Academic Emails

### Student Recommendation Request

\`\`\`
Subject: Request for Letter of Recommendation - [Your Name] for [Program/Position]

Dear Professor [Last Name],

I hope this email finds you well. I am writing to respectfully request a letter of recommendation for my application to [specific program/position/scholarship] at [institution/organization name]. The application deadline is [date], and I would be grateful if you could submit your letter by [date slightly before deadline].

I was a student in your [course name] class during [semester/year], where I [brief description of your performance, grade received, and any notable projects or contributions]. I believe you would be able to comment on my [specific skills or qualities relevant to the application - e.g., analytical abilities, research skills, work ethic].

My interest in [program/position] stems from [brief explanation of your interest and how it relates to your academic/career goals]. I believe my background in [relevant experience/coursework], combined with [other relevant qualifications], make me a strong candidate for this opportunity.

If you agree to write this recommendation, I would be happy to provide you with:
- My current resume/CV
- My statement of purpose/personal statement
- Details about the program/position
- Any other materials that would be helpful

I understand that writing a letter of recommendation requires significant time and effort, and I greatly appreciate your consideration of my request. If you feel you cannot write a strong letter or if your schedule doesn't permit, please let me know, and I will understand.

Thank you for your guidance and support throughout my academic journey.

Sincerely,
MJ Ahmad
[Your Student ID (if applicable)]
[Your Contact Information]
\`\`\`

### Academic Collaboration Proposal

\`\`\`
Subject: Research Collaboration Proposal: [Brief Topic Description]

Dear Professor [Last Name],

I hope this email finds you well. My name is MJ Ahmad, and I am a [your position - e.g., Assistant Professor, PhD candidate] in [your department] at [your institution]. I have been following your research on [specific research area] with great interest, particularly your work on [specific paper/project], which has significantly influenced my thinking on [related topic].

I am currently working on a research project focused on [brief description of your research], and I believe there could be valuable synergies between our research interests. Specifically, I am interested in exploring [potential area of collaboration].

The potential collaboration could involve:
- [Specific aspect of collaboration - e.g., Combining our methodological approaches]
- [Specific aspect of collaboration - e.g., Joint data analysis]
- [Specific aspect of collaboration - e.g., Co-authoring a paper]

I believe this collaboration would be mutually beneficial because [reasons why this collaboration would benefit both parties].

Would you be interested in discussing this potential collaboration further? I would be happy to share more details about my current work and explore how our research interests might align.

Thank you for considering this proposal. I look forward to your response.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Department/Institution]
[Your Contact Information]
\`\`\`

### Workshop/Training Announcement

\`\`\`
Subject: Upcoming Workshop: [Workshop Title] - [Date]

Dear [Recipient Name/Department/Team],

I am pleased to announce an upcoming workshop on [Workshop Topic], scheduled for [Date] from [Start Time] to [End Time] at [Location/Virtual Platform].

Workshop Overview:
This [duration - e.g., half-day, full-day] workshop will focus on [brief description of workshop content and goals]. Participants will learn [key learning objectives].

Key Topics:
- [Topic 1]
- [Topic 2]
- [Topic 3]
- [Topic 4]

Who Should Attend:
This workshop is designed for [target audience - e.g., beginners, advanced practitioners, specific roles].

Workshop Details:
- Date: [Date]
- Time: [Start Time] to [End Time]
- Location: [Physical location or virtual platform details]
- Cost: [Cost information or "Free"]
- Prerequisites: [Any required knowledge, equipment, or preparation]

Registration:
[Clear instructions on how to register, deadline, and any capacity limitations]

[If applicable: This workshop will be facilitated by [Facilitator Name], who [brief bio highlighting expertise relevant to the workshop].]

If you have any questions about the workshop, please contact [contact person] at [contact email/phone].

We hope you can join us for this valuable learning opportunity!

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Personal and Professional Development

### Mentorship Request

\`\`\`
Subject: Request for Mentorship in [Specific Field/Area]

Dear [Potential Mentor's Name],

I hope this email finds you well. My name is MJ Ahmad, and I am a [your current position/role] at [your organization/institution]. I have been following your work in [specific field/industry] for [time period] and have been particularly impressed by [specific achievement or quality you admire].

I am reaching out to inquire if you would be open to establishing a mentoring relationship. I am currently [brief description of your current situation and goals], and I believe your guidance and insights would be invaluable to my professional development.

Specifically, I hope to learn more about:
- [Learning goal 1]
- [Learning goal 2]
- [Learning goal 3]

I understand that mentoring requires a significant commitment of time and energy, and I would be respectful of your schedule and preferences. I envision [your expectations - e.g., meeting once a month for 30 minutes, occasional email exchanges].

In return, I can offer [what you can bring to the relationship - e.g., assistance with specific projects, a fresh perspective, etc.].

I would be grateful for the opportunity to discuss this further at your convenience. Please let me know if you would be interested and available for an initial conversation.

Thank you for considering my request.

Sincerely,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
[Your LinkedIn Profile (optional)]
\`\`\`

### Request for Informational Interview

\`\`\`
Subject: Request for Informational Interview - [Your Name], [Your Current Role]

Dear [Recipient Name],

I hope this email finds you well. My name is MJ Ahmad, and I am currently [your current position/situation]. I discovered your profile through [how you found them - e.g., LinkedIn, mutual connection, article they wrote] and have been impressed by your experience and accomplishments in [their field/industry].

I am very interested in learning more about [specific aspect of their career/industry] and would greatly value the opportunity to gain insights from someone with your expertise. Would you be willing to spare 20-30 minutes for an informational interview, either virtually or over coffee, at your convenience?

I'm particularly interested in discussing:
- [Specific question or topic]
- [Specific question or topic]
- [Specific question or topic]

I understand you have a busy schedule, and I would be happy to work around your availability. I promise to be well-prepared and respectful of your time.

Thank you for considering my request. I look forward to the possibility of learning from your experience.

Best regards,
MJ Ahmad
[Your Current Position/Role]
[Your Contact Information]
[Your LinkedIn Profile (optional)]
\`\`\`

### Professional Introduction (via Mutual Connection)

\`\`\`
Subject: Introduction via [Mutual Connection's Name]

Dear [Recipient Name],

I hope this email finds you well. My name is MJ Ahmad, and [Mutual Connection's Name] suggested I reach out to you regarding [specific reason - e.g., shared professional interests, potential collaboration, career advice].

[Brief paragraph about yourself - your current role, relevant background, and why you're interested in connecting]

[Mutual Connection's Name] mentioned your expertise in [specific area] and thought we might benefit from connecting due to [specific reason]. I'm particularly interested in [specific aspect of their work or experience you'd like to discuss].

I would greatly appreciate the opportunity to [specific request - e.g., have a brief conversation, ask a few questions, explore potential collaboration]. I'm happy to accommodate your schedule if you're available.

Thank you for considering my request. I look forward to the possibility of connecting.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Customer Service and Support

### Customer Service Response (General)

\`\`\`
Subject: Re: [Original Subject Line]

Dear [Customer Name],

Thank you for contacting [Company Name] customer support. I appreciate you bringing this matter to our attention.

[Acknowledgment of their specific issue/question]

[Clear, direct response to their query or resolution to their problem. If multiple questions were asked, consider using bullet points for clarity]

[If applicable: Next steps or what they can expect]

[If applicable: Additional resources or information that might be helpful]

If you have any further questions or concerns, please don't hesitate to reply to this email or contact us at [support phone number]. Our support team is available [hours of operation].

Thank you for choosing [Company Name]. We value your business and are committed to providing you with the best possible experience.

Best regards,
MJ Ahmad
Customer Support Specialist
[Company Name]
[Contact Information]
\`\`\`

### Apology for Service Issue

\`\`\`
Subject: Our Apologies Regarding [Brief Description of Issue]

Dear [Customer Name],

I want to personally apologize for the [specific issue - e.g., delay in shipping, service interruption, billing error] you recently experienced with [Company Name]. We understand how [frustrating/inconvenient/disappointing] this situation has been, and we take full responsibility for this shortcoming in our service.

[Explanation of what happened - be honest but concise, without making excuses]

We have taken the following steps to address this issue:
1. [Action taken]
2. [Action taken]
3. [Action taken]

To make this right, we would like to offer you [specific remedy - e.g., refund, discount, free service, etc.].

We value your business and are committed to earning back your trust. Your feedback helps us improve our service for you and all our customers.

If you have any questions or wish to discuss this matter further, please contact me directly at [your direct contact information].

Thank you for your understanding and for giving us the opportunity to make this right.

Sincerely,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Product/Service Feedback Request

\`\`\`
Subject: We Value Your Feedback on [Product/Service Name]

Dear [Customer Name],

I hope you're enjoying your experience with [Product/Service Name]. As someone who has been using our [product/service] for [timeframe], your insights are incredibly valuable to us.

We're constantly working to improve our offerings, and customer feedback plays a crucial role in that process. Would you be willing to take a few minutes to share your thoughts on your experience so far?

Specifically, we'd love to hear:
- What features or aspects you find most useful
- Any challenges or frustrations you've encountered
- Features or improvements you'd like to see in the future
- Your overall satisfaction with the [product/service]

You can share your feedback by [preferred method - e.g., replying to this email, completing this short survey (link), scheduling a brief call].

As a token of our appreciation for your time, we'd like to offer you [incentive if applicable - e.g., discount code, free month of service, etc.].

Thank you for being a valued customer. Your feedback will directly influence our future developments and improvements.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Formal and Administrative Emails

### Meeting Request

\`\`\`
Subject: Request for Meeting: [Brief Topic Description]

Dear [Recipient Name],

I hope this email finds you well. I am writing to request a meeting to discuss [specific topic/purpose of meeting].

Proposed agenda items include:
1. [Agenda item 1]
2. [Agenda item 2]
3. [Agenda item 3]

I anticipate the meeting will take approximately [estimated duration]. Would any of the following times work for your schedule?
- [Option 1: Day, Date, Time]
- [Option 2: Day, Date, Time]
- [Option 3: Day, Date, Time]

[If applicable: The meeting will take place at [location]/via [platform for virtual meetings].]

[If applicable: Other attendees will include [names and roles of other attendees].]

[If applicable: Please find attached [any relevant documents for pre-reading].]

Please let me know which time works best for you, or feel free to suggest an alternative that better fits your schedule.

Thank you for your consideration. I look forward to our discussion.

Best regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Formal Request (General Purpose)

\`\`\`
Subject: Formal Request: [Brief Description of Request]

Dear [Recipient Name/Department],

I hope this email finds you well. I am writing to formally request [clearly state what you are requesting].

Request Details:
- Purpose: [Explain why you are making this request]
- Specifics: [Include any specific details about what you need]
- Timeline: [When you need it by, if applicable]
- [Any other relevant details]

[If applicable: This request is in accordance with [relevant policy, procedure, or precedent].]

[If applicable: I have attached [any supporting documents] for your reference.]

I would appreciate your consideration of this request. If you need any additional information or clarification, please don't hesitate to contact me at [your contact information].

Thank you for your attention to this matter. I look forward to your response.

Respectfully,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Formal Complaint

\`\`\`
Subject: Formal Complaint Regarding [Brief Description of Issue]

Dear [Recipient Name/Department],

I am writing to formally lodge a complaint regarding [specific issue/incident/service/product].

Incident Details:
- Date and Time: [When the incident occurred]
- Location/Platform: [Where the incident occurred]
- Reference/Order Number: [If applicable]
- Description: [Detailed description of the issue/incident]

Prior Communication:
[Summary of any previous attempts to resolve the issue, including dates and names of people you spoke with]

Impact:
[Explain how this issue has affected you/your organization]

Requested Resolution:
[Clearly state what you would consider a satisfactory resolution]

I have attached [any relevant documentation, photos, receipts, etc.] to support this complaint.

I would appreciate your prompt attention to this matter. I look forward to your response and a timely resolution.

Sincerely,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

## Thank You and Appreciation Emails

### Thank You for Business/Partnership

\`\`\`
Subject: Thank You for Your Partnership

Dear [Recipient Name],

I wanted to take a moment to express my sincere gratitude for our business partnership over the [time period - e.g., past year, past quarter].

Your [organization/company] has been [specific positive attribute - e.g., instrumental in our growth, a pleasure to work with], and I particularly appreciate [specific aspect of the partnership you value].

[Specific positive outcome or achievement resulting from the partnership]

I look forward to continuing our successful collaboration and exploring new opportunities to [shared goal - e.g., innovate, grow, serve our community] together.

Thank you again for your trust and partnership.

Warm regards,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Thank You for Support/Help

\`\`\`
Subject: Heartfelt Thanks for Your Support

Dear [Recipient Name],

I wanted to express my sincere gratitude for your [support/help/assistance] with [specific situation or project]. Your [specific action they took - e.g., guidance, time, expertise] was invaluable and made a significant difference in [outcome or impact].

[Personal note about how their help affected you or the situation]

[If applicable: I'm happy to report that (positive outcome or progress update)]

Thank you again for your generosity and kindness. I truly appreciate having you as a [colleague/mentor/friend/connection].

With gratitude,
MJ Ahmad
[Your Position/Title]
[Your Organization]
[Your Contact Information]
\`\`\`

### Thank You After Interview

\`\`\`
Subject: Thank You for the Opportunity to Interview for [Position]

Dear [Interviewer's Name],

Thank you for taking the time to meet with me [today/yesterday/date] to discuss the [Position Title] role at [Company Name]. I appreciated the opportunity to learn more about the position and the company.

Our conversation about [specific topic discussed] was particularly interesting, and I was excited to hear about [something positive you learned about the role or company]. The role sounds like an excellent match for my skills in [relevant skill] and my experience with [relevant experience].

[Optional: Address any question you felt you didn't answer completely or provide additional information that supports your candidacy]

After our discussion, I am even more enthusiastic about the possibility of joining the [Company Name] team and contributing to [specific project or company goal mentioned during interview].

Thank you again for your time and consideration. I look forward to hearing from you about the next steps in the process.

Best regards,
MJ Ahmad
[Your Contact Information]
\`\`\`

## Email Tips and Best Practices

### General Email Etiquette

1. **Be concise**: Keep emails brief and to the point.
2. **Use clear subject lines**: Make them specific and relevant to the content.
3. **Proofread**: Always check for spelling and grammar errors before sending.
4. **Respond promptly**: Aim to reply within 24-48 hours.
5. **Use professional language**: Avoid slang, jargon, and emoticons in formal emails.
6. **Format for readability**: Use short paragraphs, bullet points, and white space.
7. **Include a signature**: Provide your contact information and title.
8. **Be mindful of tone**: Remember that tone can be difficult to convey in writing.

### Customizing These Templates

1. **Personalize**: Always replace placeholder text with specific information.
2. **Adjust tone**: Modify the formality level based on your relationship with the recipient.
3. **Add relevant details**: Include specific information pertinent to your situation.
4. **Remove irrelevant sections**: Delete any parts that don't apply to your specific case.
5. **Check for consistency**: Ensure the tone and style are consistent throughout.
\`\`\`

Now, let's create a page to view the email templates:
[V0_FILE]typescriptreact:file="app/email-templates/page.tsx"
import MarkdownViewer from "@/components/markdown-viewer"

export default function EmailTemplatesPage() {
  return <MarkdownViewer filePath="/data/email-templates.md" />
}
[V0_FILE]typescriptreact:file="components/dhaka-time.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Clock, Timer } from "lucide-react"
import { formatDhakaDate, formatDhakaTime } from "@/lib/date-utils"

export function DhakaTime() {
  const [currentTime, setCurrentTime] = useState<Date>(new Date())
  const [countdownTime, setCountdownTime] = useState<string>("00:00:00")

useEffect(() => {
    // Update time every second
    const timer = setInterval(() => {
      // Get current time
      const now = new Date()
      setCurrentTime(now)

// Calculate countdown to 11:59 PM
      const endOfDay = new Date(now)
      endOfDay.setHours(23, 59, 0, 0) // 11:59 PM

let diff = endOfDay.getTime() - now.getTime()

// If it's already past 11:59 PM, set countdown to 0
      if (diff < 0) {
        diff = 0
      }

// Convert to hours, minutes, seconds
      const hours = Math.floor(diff / (1000 * 60 * 60))
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((diff % (1000 * 60)) / 1000)

setCountdownTime(
        `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`,
      )
    }, 1000)

return () => clearInterval(timer)
  }, [])

return (
    <div className="flex flex-col sm:flex-row gap-2 text-sm">
      <Card className="flex-1">
        <CardContent className="flex items-center p-2">
          <Clock className="h-4 w-4 mr-2" />
          <div>
            <div>{formatDhakaDate(currentTime)}</div>
            <div className="font-mono">{formatDhakaTime(currentTime)}</div>
            <div className="text-xs text-muted-foreground">Dhaka, Bangladesh</div>
          </div>
        </CardContent>
      </Card>

<Card className="flex-1">
        <CardContent className="flex items-center p-2">
          <Timer className="h-4 w-4 mr-2" />
          <div>
            <div className="font-mono text-lg">{countdownTime}</div>
            <div className="text-xs text-muted-foreground">Countdown to 11:59 PM</div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default DhakaTime
[V0_FILE]typescript:file="lib/date-utils.ts"
/**
 * Utility functions for date and time handling
 */

/**
 * Formats a date for Dhaka timezone
 */
export function formatDhakaDate(date: Date): string {
  const options: Intl.DateTimeFormatOptions = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "Asia/Dhaka",
  }
  return date.toLocaleDateString("en-US", options)
}

/**
 * Formats time for Dhaka timezone
 */
export function formatDhakaTime(date: Date): string {
  const options: Intl.DateTimeFormatOptions = {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: true,
    timeZone: "Asia/Dhaka",
  }
  return date.toLocaleTimeString("en-US", options)
}
[V0_FILE]typescriptreact:file="components/life-dashboard.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Clock, Calendar, TrendingUp, TrendingDown, Target, ClipboardList, Timer } from "lucide-react"
import { formatDhakaDate, formatDhakaTime } from "@/lib/date-utils"

export function LifeDashboard() {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [lifePercentage, setLifePercentage] = useState(0)
  const [timeRemaining, setTimeRemaining] = useState("")

// Use global average life expectancy of 73 years
  const lifeExpectancy = 73

// Calculate life percentage and time remaining
  useEffect(() => {
    const calculateLifeMetrics = () => {
      const now = new Date()
      setCurrentTime(now)

// Assuming birth date of November 10, 1989
      const birthDate = new Date("1989-11-10")
      const ageInMilliseconds = now.getTime() - birthDate.getTime()
      const ageInYears = ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25)

// Calculate percentage of life lived based on life expectancy
      const percentageLived = (ageInYears / lifeExpectancy) * 100
      setLifePercentage(Math.min(percentageLived, 100))

// Calculate time remaining
      const remainingYears = Math.max(0, lifeExpectancy - ageInYears)
      const years = Math.floor(remainingYears)
      const months = Math.floor((remainingYears - years) * 12)
      const days = Math.floor(((remainingYears - years) * 12 - months) * 30.44)

setTimeRemaining(`${years} years, ${months} months, ${days} days`)
    }

calculateLifeMetrics()

// Update every minute
    const interval = setInterval(calculateLifeMetrics, 60000)
    return () => clearInterval(interval)
  }, [])

// Birth date: November 10, 1989
  const birthDate = new Date("1989-11-10")
  const [lifeStats, setLifeStats] = useState({
    totalDays: 0,
    totalYears: 0,
    productiveDays: 0,
    wastedDays: 0,
    accomplishments: 0,
    losses: 0,
    remainingProductiveYears: 0,
  })
  const [lifeCountdown, setLifeCountdown] = useState("")

// Update current date every second
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

return () => clearInterval(timer)
  }, [])

// Calculate life statistics
  useEffect(() => {
    const calculateStats = () => {
      // Calculate total days lived
      const totalMilliseconds = currentTime.getTime() - birthDate.getTime()
      const totalDays = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24))
      const totalYears = (totalMilliseconds / (1000 * 60 * 60 * 24 * 365.25)).toFixed(2)

// Estimate productive vs wasted days (example calculation)
      // Assuming 60% productive days (this would be customized by the user)
      const productiveDays = Math.floor(totalDays * 0.6)
      const wastedDays = totalDays - productiveDays

// Assuming average productive life is 75 years
      const remainingProductiveYears = Math.max(0, (75 - Number.parseFloat(totalYears)).toFixed(2))

// Example accomplishments and losses (would be customized)
      const accomplishments = Math.floor(productiveDays / 100) // 1 accomplishment per 100 productive days
      const losses = Math.floor(wastedDays / 200) // 1 loss per 200 wasted days

// Calculate life expectancy countdown (global average of 73 years)
      const lifeExpectancy = 73 * 365.25 * 24 * 60 * 60 * 1000 // 73 years in milliseconds
      const lifeElapsed = currentTime.getTime() - birthDate.getTime()
      const lifeRemaining = Math.max(0, lifeExpectancy - lifeElapsed)

// Convert to years, days, hours, minutes, seconds
      const years = Math.floor(lifeRemaining / (1000 * 60 * 60 * 24 * 365.25))
      const days = Math.floor((lifeRemaining % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24))
      const hours = Math.floor((lifeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      const minutes = Math.floor((lifeRemaining % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((lifeRemaining % (1000 * 60)) / 1000)

setLifeCountdown(`${years}y ${days}d ${hours}h ${minutes}m ${seconds}s`)

setLifeStats({
        totalDays,
        totalYears: Number.parseFloat(totalYears),
        productiveDays,
        wastedDays,
        accomplishments,
        losses,
        remainingProductiveYears: Number.parseFloat(remainingProductiveYears),
      })
    }

calculateStats()

// Update countdown every second
    const countdownTimer = setInterval(calculateStats, 1000)
    return () => clearInterval(countdownTimer)
  }, [currentTime])

// Format time as HH:MM:SS for Dhaka time
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      hour12: true,
      timeZone: "Asia/Dhaka",
    })
  }

// Format date as Month Day, Year for Dhaka
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      month: "long",
      day: "numeric",
      year: "numeric",
      timeZone: "Asia/Dhaka",
    })
  }

// Calculate percentage of life lived (assuming average lifespan of 73 years)
  const productivePercentage = (lifeStats.productiveDays / lifeStats.totalDays) * 100

return (
    <div className="space-y-6">
      <Card className="mb-6">
        <CardHeader className="pb-2">
          <CardTitle className="text-xl flex justify-between items-center">
            <span>Life Dashboard</span>
            <span className="text-sm font-normal text-muted-foreground">
              Based on {lifeExpectancy} year average life expectancy
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between mb-1">
                <span className="text-sm font-medium">Life Progress</span>
                <span className="text-sm font-medium">{lifePercentage.toFixed(2)}%</span>
              </div>
              <Progress value={lifePercentage} className="h-2" />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-muted/50 p-3 rounded-md">
                <div className="text-sm font-medium mb-1">Estimated Time Remaining</div>
                <div className="text-xl font-bold text-amber-500 animate-pulse">{timeRemaining}</div>
              </div>

<div className="bg-muted/50 p-3 rounded-md">
                <div className="text-sm font-medium mb-1">Current Time (Dhaka)</div>
                <div className="text-xl font-mono">{formatDhakaTime(currentTime)}</div>
                <div className="text-sm text-muted-foreground">{formatDhakaDate(currentTime)}</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-2xl flex items-center">
            <Clock className="mr-2 h-6 w-6" />
            Life Dashboard
          </CardTitle>
          <CardDescription>Time accountability from birth ({formatDate(birthDate)}) to present</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center mb-4">
            <div className="text-4xl font-bold">{formatTime(currentTime)}</div>
            <div className="text-muted-foreground">{formatDate(currentTime)}</div>
            <div className="text-sm">Dhaka, Bangladesh</div>
          </div>

<div className="text-center mb-6 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg">
            <div className="text-sm font-medium text-red-700 dark:text-red-400 mb-1">Life Expectancy Countdown</div>
            <div className="text-2xl font-mono font-bold text-red-800 dark:text-red-300 flex items-center justify-center">
              <Timer className="h-5 w-5 mr-2" />
              {lifeCountdown}
            </div>
            <div className="text-xs text-red-600 dark:text-red-400 mt-1">
              Based on global average life expectancy (73 years)
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm font-medium">Life Journey</span>
                <span className="text-sm text-muted-foreground">{lifePercentage.toFixed(1)}% complete</span>
              </div>
              <Progress value={lifePercentage} className="h-2" />
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Birth</span>
                <span>Current: {lifeStats.totalYears} years</span>
                <span>73 years</span>
              </div>
            </div>

<div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-sm font-medium">Productivity Ratio</span>
                <span className="text-sm text-muted-foreground">{productivePercentage.toFixed(1)}% productive</span>
              </div>
              <Progress value={productivePercentage} className="h-2" />
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>0%</span>
                <span>Target: 80%</span>
                <span>100%</span>
              </div>
            </div>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Card className="bg-muted/50">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <Calendar className="h-5 w-5 text-muted-foreground" />
                  <span className="text-xs text-muted-foreground">Total</span>
                </div>
                <div className="mt-2">
                  <div className="text-2xl font-bold">{lifeStats.totalDays.toLocaleString()}</div>
                  <p className="text-xs text-muted-foreground">Days Lived</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-muted/50">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <TrendingUp className="h-5 w-5 text-green-500" />
                  <span className="text-xs text-muted-foreground">Productive</span>
                </div>
                <div className="mt-2">
                  <div className="text-2xl font-bold">{lifeStats.productiveDays.toLocaleString()}</div>
                  <p className="text-xs text-muted-foreground">Days Used Well</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-muted/50">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <TrendingDown className="h-5 w-5 text-red-500" />
                  <span className="text-xs text-muted-foreground">Wasted</span>
                </div>
                <div className="mt-2">
                  <div className="text-2xl font-bold">{lifeStats.wastedDays.toLocaleString()}</div>
                  <p className="text-xs text-muted-foreground">Days Lost</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-muted/50">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <Target className="h-5 w-5 text-blue-500" />
                  <span className="text-xs text-muted-foreground">Remaining</span>
                </div>
                <div className="mt-2">
                  <div className="text-2xl font-bold">{lifeStats.remainingProductiveYears}</div>
                  <p className="text-xs text-muted-foreground">Productive Years</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

<Tabs defaultValue="achievements">
        <TabsList className="grid grid-cols-3 mb-4">
          <TabsTrigger value="achievements">
            <TrendingUp className="h-4 w-4 mr-2" />
            Achievements
          </TabsTrigger>
          <TabsTrigger value="future">
            <Target className="h-4 w-4 mr-2" />
            Future Goals
          </TabsTrigger>
          <TabsTrigger value="daily">
            <ClipboardList className="h-4 w-4 mr-2" />
            Daily Record
          </TabsTrigger>
        </TabsList>

<TabsContent value="achievements">
          <Card>
            <CardHeader>
              <CardTitle>Life Balance Sheet</CardTitle>
              <CardDescription>What you've earned and what you've lost</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-lg font-semibold flex items-center text-green-600">
                    <TrendingUp className="h-5 w-5 mr-2" />
                    Accomplishments
                  </h3>
                  <ul className="mt-2 space-y-2">
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Knowledge & Skills:</span> Acquired expertise in programming, web
                        development, and data analysis
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Projects:</span> Developed multiple community initiatives and
                        educational platforms
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Relationships:</span> Built meaningful connections with community
                        members and collaborators
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Impact:</span> Positively influenced education and sustainability
                        in Bangladesh
                      </div>
                    </li>
                  </ul>
                </div>

<div>
                  <h3 className="text-lg font-semibold flex items-center text-red-600">
                    <TrendingDown className="h-5 w-5 mr-2" />
                    Losses
                  </h3>
                  <ul className="mt-2 space-y-2">
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Time:</span> Approximately {lifeStats.wastedDays.toLocaleString()}{" "}
                        days not used to full potential
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Opportunities:</span> Missed chances for growth and impact due to
                        procrastination
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Health:</span> Periods of neglecting physical and mental wellbeing
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2">•</div>
                      <div>
                        <span className="font-medium">Focus:</span> Energy dispersed across too many initiatives
                        simultaneously
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="future">
          <Card>
            <CardHeader>
              <CardTitle>Future Targets</CardTitle>
              <CardDescription>What you should accomplish and how much effort is required</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold mb-2">Target Achievements</h3>
                  <ul className="space-y-3">
                    <li className="flex items-start">
                      <div className="mr-2 bg-blue-100 text-blue-800 rounded-full h-5 w-5 flex items-center justify-center text-xs">
                        1
                      </div>
                      <div>
                        <span className="font-medium">Educational Impact:</span> Expand educational platforms to reach
                        50,000+ students across Bangladesh
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2 bg-blue-100 text-blue-800 rounded-full h-5 w-5 flex items-center justify-center text-xs">
                        2
                      </div>
                      <div>
                        <span className="font-medium">Technological Innovation:</span> Develop 3 new technology
                        solutions addressing critical local challenges
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2 bg-blue-100 text-blue-800 rounded-full h-5 w-5 flex items-center justify-center text-xs">
                        3
                      </div>
                      <div>
                        <span className="font-medium">Community Development:</span> Transform Cox's Bazar into a model
                        for sustainable development
                      </div>
                    </li>
                    <li className="flex items-start">
                      <div className="mr-2 bg-blue-100 text-blue-800 rounded-full h-5 w-5 flex items-center justify-center text-xs">
                        4
                      </div>
                      <div>
                        <span className="font-medium">Personal Growth:</span> Master 2 new technical skills annually and
                        publish research findings
                      </div>
                    </li>
                  </ul>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Required Effort</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <Card className="bg-muted/30">
                      <CardContent className="p-4">
                        <h4 className="font-medium text-sm mb-2">Daily Investment</h4>
                        <ul className="space-y-1 text-sm">
                          <li className="flex justify-between">
                            <span>Focused work:</span>
                            <span className="font-medium">6-8 hours</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Learning:</span>
                            <span className="font-medium">1-2 hours</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Planning:</span>
                            <span className="font-medium">30 minutes</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Reflection:</span>
                            <span className="font-medium">30 minutes</span>
                          </li>
                        </ul>
                      </CardContent>
                    </Card>

<Card className="bg-muted/30">
                      <CardContent className="p-4">
                        <h4 className="font-medium text-sm mb-2">Weekly Targets</h4>
                        <ul className="space-y-1 text-sm">
                          <li className="flex justify-between">
                            <span>Project milestones:</span>
                            <span className="font-medium">3-5</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Networking:</span>
                            <span className="font-medium">2-3 hours</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Content creation:</span>
                            <span className="font-medium">4-6 hours</span>
                          </li>
                          <li className="flex justify-between">
                            <span>Community engagement:</span>
                            <span className="font-medium">3-4 hours</span>
                          </li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Productivity Formula</h3>
                  <div className="bg-muted/30 p-4 rounded-lg">
                    <p className="text-sm">
                      To maximize your remaining {lifeStats.remainingProductiveYears} productive years:
                    </p>
                    <ul className="mt-2 space-y-1 text-sm">
                      <li className="flex items-start">
                        <div className="mr-2">•</div>
                        <div>Increase daily productive time by 20% through better time management</div>
                      </li>
                      <li className="flex items-start">
                        <div className="mr-2">•</div>
                        <div>Focus 80% of effort on the 20% of activities that produce the most impact</div>
                      </li>
                      <li className="flex items-start">
                        <div className="mr-2">•</div>
                        <div>Eliminate 3 major time-wasting activities from your routine</div>
                      </li>
                      <li className="flex items-start">
                        <div className="mr-2">•</div>
                        <div>Implement a weekly review system to continuously optimize your approach</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="daily">
          <Card>
            <CardHeader>
              <CardTitle>Daily Accountability Record</CardTitle>
              <CardDescription>Track each day's productivity and be your own judge</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="flex flex-col md:flex-row gap-4">
                  <Card className="flex-1 bg-muted/30">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-base">Today's Plan</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        <li className="flex items-center">
                          <input type="checkbox" id="task1" className="mr-2 h-4 w-4" />
                          <label htmlFor="task1" className="text-sm">
                            Complete project milestone
                          </label>
                        </li>
                        <li className="flex items-center">
                          <input type="checkbox" id="task2" className="mr-2 h-4 w-4" />
                          <label htmlFor="task2" className="text-sm">
                            Learn new technical skill (1 hour)
                          </label>
                        </li>
                        <li className="flex items-center">
                          <input type="checkbox" id="task3" className="mr-2 h-4 w-4" />
                          <label htmlFor="task3" className="text-sm">
                            Community outreach (2 hours)
                          </label>
                        </li>
                        <li className="flex items-center">
                          <input type="checkbox" id="task4" className="mr-2 h-4 w-4" />
                          <label htmlFor="task4" className="text-sm">
                            Content creation for educational platform
                          </label>
                        </li>
                        <li className="flex items-center">
                          <input type="checkbox" id="task5" className="mr-2 h-4 w-4" />
                          <label htmlFor="task5" className="text-sm">
                            Review weekly goals and adjust
                          </label>
                        </li>
                      </ul>
                    </CardContent>
                  </Card>

<Card className="flex-1 bg-muted/30">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-base">Time Allocation</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>Productive Work</span>
                            <span>6 hours</span>
                          </div>
                          <Progress value={75} className="h-2" />
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>Learning</span>
                            <span>1 hour</span>
                          </div>
                          <Progress value={50} className="h-2" />
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>Rest & Renewal</span>
                            <span>2 hours</span>
                          </div>
                          <Progress value={100} className="h-2" />
                        </div>
                        <div>
                          <div className="flex justify-between text-sm mb-1">
                            <span>Wasted Time</span>
                            <span>1.5 hours</span>
                          </div>
                          <Progress value={30} className="h-2" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-3">Daily Reflection</h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Card className="bg-green-50 dark:bg-green-900/20">
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base text-green-700 dark:text-green-400">Accomplishments</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <textarea
                          className="w-full h-24 p-2 text-sm bg-white/50 dark:bg-black/10 border rounded-md"
                          placeholder="What did you accomplish today?"
                        >

Time Wasted Tomorrow's Plan

) } [V0_FILE]typescriptreact:file="components/time-capsule.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Clock, Save, Trash2, Lock, Unlock } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function TimeCapsule() { const [message, setMessage] = useState("") const [savedMessages, setSavedMessages] = useState>([]) const [isLoading, setIsLoading] = useState(true) const { toast } = useToast() // Load saved messages from localStorage useEffect(() => { if (typeof window !== "undefined") { try { const saved = localStorage.getItem("timeCapsuleMessages") if (saved) { setSavedMessages(JSON.parse(saved)) } } catch (error) { console.error("Error loading saved messages:", error) } setIsLoading(false) } }, []) // Save messages to localStorage when they change useEffect(() => { if (!isLoading && typeof window !== "undefined") { localStorage.setItem("timeCapsuleMessages", JSON.stringify(savedMessages)) } }, [savedMessages, isLoading]) const handleSaveMessage = () => { if (!message.trim()) { toast({ title: "Empty message", description: "Please enter a message to save.", variant: "destructive", }) return } const now = new Date() const timestamp = now.toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", }) setSavedMessages([...savedMessages, { text: message, timestamp, locked: false }]) setMessage("") toast({ title: "Message saved", description: "Your message has been saved to your time capsule.", }) } const handleDeleteMessage = (index: number) => { if (savedMessages[index].locked) { toast({ title: "Message locked", description: "Unlock the message before deleting it.", variant: "destructive", }) return } const newMessages = [...savedMessages] newMessages.splice(index, 1) setSavedMessages(newMessages) toast({ title: "Message deleted", description: "Your message has been removed from the time capsule.", }) } const toggleLock = (index: number) => { const newMessages = [...savedMessages] newMessages[index].locked = !newMessages[index].locked setSavedMessages(newMessages) toast({ title: newMessages[index].locked ? "Message locked" : "Message unlocked", description: newMessages[index].locked ? "This message is now protected from deletion." : "This message can now be deleted.", }) } if (isLoading) { return

} return ( Time Capsule

setMessage(e.target.value)}
              className="min-h-[100px]"
            />
            <Button onClick={handleSaveMessage} className="mt-2 w-full">
              <Save className="h-4 w-4 mr-2" />
              Save Message
            </Button>
          </div>

<div className="space-y-3">
            <h3 className="font-medium">Saved Messages</h3>
            {savedMessages.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No messages saved yet. Write something to your future self!
              </p>
            ) : (
              savedMessages.map((msg, index) => (
                <div
                  key={index}
                  className={`p-3 rounded-md border ${msg.locked ? "bg-amber-50 dark:bg-amber-950/20" : "bg-muted/30"}`}
                >
                  <div className="flex justify-between items-start mb-2">
                    <Badge variant="outline" className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      <span className="text-xs">{msg.timestamp}</span>
                    </Badge>
                    <div className="flex gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-6 w-6"
                        onClick={() => toggleLock(index)}
                        title={msg.locked ? "Unlock message" : "Lock message"}
                      >
                        {msg.locked ? <Lock className="h-3 w-3" /> : <Unlock className="h-3 w-3" />}
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-6 w-6 text-destructive"
                        onClick={() => handleDeleteMessage(index)}
                        disabled={msg.locked}
                        title="Delete message"
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>
                  <p className="text-sm whitespace-pre-wrap">{msg.text}</p>
                </div>
              ))
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]markdown:file="public/data/gratitude-templates.md"
# Gratitude Templates

## Financial Support

### For Donations

#### General Donation Thank You

\`\`\`
Dear [Name],

I am deeply grateful for your generous donation of [amount/item]. Your support means a great deal to me and will significantly contribute to [specific purpose or goal]. Your kindness has made a meaningful difference, and I am truly thankful for your belief in my work.

With sincere appreciation,
[Your Name]
\`\`\`

#### For Recurring Donations

\`\`\`
Dear [Name],

I want to express my heartfelt gratitude for your continued support through your monthly donations. Your consistent generosity provides stability and allows me to plan effectively for [project/initiative]. Your commitment to this cause demonstrates remarkable dedication, and I am profoundly thankful.

With deepest appreciation,
[Your Name]
\`\`\`

#### For Anonymous Donations

\`\`\`
To my generous supporter,

Though I may not know your name, I am deeply touched by your kindness and generosity. Your anonymous donation of [amount/item] will help tremendously with [specific purpose]. Please know that your support, while given without recognition, is deeply appreciated and will be used thoughtfully.

With sincere gratitude,
[Your Name]
\`\`\`

### For Grants

#### Grant Approval Thank You

\`\`\`
Dear [Organization/Foundation Name],

I am honored and grateful to be selected as a recipient of the [Grant Name]. This support will be instrumental in advancing [specific project or initiative]. I deeply appreciate your confidence in my work and promise to uphold the values and expectations associated with this grant. I look forward to sharing the progress and outcomes made possible by your generosity.

With sincere appreciation,
[Your Name]
\`\`\`

#### Grant Renewal Thank You

\`\`\`
Dear [Organization/Foundation Name],

I am writing to express my profound gratitude for renewing the [Grant Name] for another [time period]. Your continued support validates the work we have accomplished together and enables us to build upon our progress. This renewal is not taken for granted, and I remain committed to achieving the objectives we share.

With deepest appreciation,
[Your Name]
\`\`\`

### For Investments

#### Angel Investment Thank You

\`\`\`
Dear [Investor Name],

I am deeply grateful for your decision to invest [amount] in [project/business]. Your belief in my vision means a great deal, and I value not only your financial support but also the vote of confidence it represents. I am committed to working diligently to ensure this investment yields positive results, and I look forward to our partnership.

With sincere appreciation,
[Your Name]
\`\`\`

#### For Seed Funding

\`\`\`
Dear [Investor/Group Name],

I want to express my profound gratitude for your seed investment of [amount] in [startup/project]. This funding comes at a critical juncture and will enable us to [specific goals: develop prototype, conduct market research, etc.]. I am honored by your trust and excited about building this venture with your support.

With appreciation and enthusiasm,
[Your Name]
\`\`\`

### For Loans

#### Personal Loan Thank You

\`\`\`
Dear [Name],

I am deeply grateful for your trust and generosity in providing me with a loan of [amount]. This financial support comes at a crucial time and will help me to [specific purpose]. I want to assure you of my commitment to repaying this loan as agreed, and I truly value your kindness and understanding.

With sincere thanks,
[Your Name]
\`\`\`

#### Easy Terms Loan Thank You

\`\`\`
Dear [Name/Institution],

I want to express my heartfelt appreciation for providing me with a loan under such favorable terms. Your understanding of my situation and willingness to offer [specific favorable conditions] demonstrate exceptional kindness. This support will enable me to [specific purpose] without undue financial pressure, and I am truly grateful.

With deep appreciation,
[Your Name]
\`\`\`

## Non-Financial Support

### For Mentorship

#### Mentorship Appreciation

\`\`\`
Dear [Mentor's Name],

I want to express my profound gratitude for your mentorship and guidance. The time and wisdom you have shared with me have been invaluable to my [personal/professional] development. Your insights on [specific advice] have particularly transformed my approach to [specific area]. I am truly fortunate to have you as a mentor.

With deep appreciation,
[Your Name]
\`\`\`

#### For Career Guidance

\`\`\`
Dear [Name],

I am writing to thank you sincerely for the career guidance you have provided. Your advice about [specific guidance] has been instrumental in helping me navigate [specific career challenge or decision]. I value your expertise and the generosity with which you have shared it. Your support has made a significant difference in my professional journey.

With gratitude,
[Your Name]
\`\`\`

### For Technical Assistance

#### Technical Support Thank You

\`\`\`
Dear [Name/Team],

I want to express my sincere appreciation for the technical assistance you provided with [specific issue or project]. Your expertise and prompt support were crucial in resolving [specific problem] and allowed me to [specific outcome]. I am particularly grateful for your patience in explaining [technical concept] in a way that was accessible.

With thanks,
[Your Name]
\`\`\`

#### For IT Support

\`\`\`
Dear [Name/Team],

I am writing to thank you for your exceptional IT support. Your assistance with [specific issue] was both timely and effective, saving me from significant disruption. I particularly appreciate your [specific quality: patience, thoroughness, clear explanations], which made the process much easier. Your expertise is truly valuable.

Gratefully,
[Your Name]
\`\`\`

### For Partnerships

#### Business Partnership Thank You

\`\`\`
Dear [Partner's Name/Organization],

I want to express my sincere gratitude for our partnership. Your collaboration on [specific project/initiative] has been invaluable, bringing [specific benefits: new perspectives, resources, expertise] that have significantly enhanced our work. I appreciate your commitment to our shared goals and look forward to continuing our productive relationship.

With appreciation,
[Your Name]
\`\`\`

#### For Collaborative Projects

\`\`\`
Dear [Collaborator's Name/Team],

I am writing to thank you for your exceptional collaboration on [project name]. Your contributions of [specific input: ideas, skills, resources] were instrumental to the project's success. I particularly valued your [specific quality: creativity, reliability, problem-solving], which enhanced our work together. It has been a privilege to collaborate with you.

With sincere thanks,
[Your Name]
\`\`\`

## Personal Support

### For Emotional Support

#### Personal Support Thank You

\`\`\`
Dear [Name],

I want to express my heartfelt gratitude for your unwavering support during [specific challenging time or situation]. Your kindness, understanding, and presence meant more than words can express. The way you [specific action: listened, offered encouragement, checked in regularly] provided me with strength when I needed it most. I am truly fortunate to have you in my life.

With deep appreciation,
[Your Name]
\`\`\`

#### For Being There During Difficult Times

\`\`\`
Dear [Name],

I am writing to thank you from the bottom of my heart for being there for me during [specific difficult period]. Your support through [specific actions: phone calls, visits, practical help] made an immeasurable difference during a challenging time. Your kindness and compassion will always be remembered and cherished.

With profound gratitude,
[Your Name]
\`\`\`

### For Encouragement

#### For Motivation and Encouragement

\`\`\`
Dear [Name],

I want to express my sincere appreciation for your constant encouragement and belief in me. Your words of support regarding [specific situation or goal] gave me the confidence to [specific action or achievement]. Your ability to see potential in me, even when I couldn't see it myself, has been a true gift.

With heartfelt thanks,
[Your Name]
\`\`\`

#### For Believing in My Vision

\`\`\`
Dear [Name],

I am deeply grateful for your unwavering belief in my vision for [specific project or goal]. When others expressed doubt, your encouragement and support remained constant. Your confidence in me has been a powerful motivator, and I want you to know how much your faith has meant to my journey.

With sincere appreciation,
[Your Name]
\`\`\`

## Institutional Support

### For Educational Institutions

#### For Educational Opportunity

\`\`\`
Dear [Institution Name/Representative],

I want to express my profound gratitude for the educational opportunity provided through [specific program, scholarship, or course]. This experience has significantly enhanced my knowledge of [subject area] and has opened new possibilities for my [academic/professional] future. I particularly appreciate [specific aspect of the program] and am committed to making the most of this valuable opportunity.

With sincere thanks,
[Your Name]
\`\`\`

#### For Research Support

\`\`\`
Dear [Institution/Department/Individual],

I am writing to express my deep appreciation for the research support provided for [specific research project]. The [resources/funding/facilities] made available have been instrumental in advancing this work. I am particularly grateful for [specific aspect of support], which enabled [specific achievement or progress]. This support has made a significant difference to the quality and scope of my research.

With gratitude,
[Your Name]
\`\`\`

### For Government Support

#### For Public Services

\`\`\`
Dear [Government Department/Official],

I want to express my sincere appreciation for the public services provided by [specific department or program]. The [specific service] has made a significant positive impact on [specific aspect of life or work]. I particularly value the [efficiency/accessibility/quality] of these services and recognize the important work being done to support the community.

With thanks,
[Your Name]
\`\`\`

#### For Policy Support

\`\`\`
Dear [Government Official/Department],

I am writing to express my gratitude for your support of policies that [specific benefit or protection]. Your advocacy for [specific policy or legislation] demonstrates a commitment to [specific value or goal] that I deeply appreciate. This work makes a meaningful difference to [specific group or issue] and contributes to a more [just/sustainable/equitable] society.

With appreciation,
[Your Name]
\`\`\`

## Recognition and Appreciation

### For Public Recognition

#### For Award or Honor

\`\`\`
Dear [Organization/Committee],

I am deeply honored and grateful to be recognized with the [specific award or honor]. This acknowledgment of my work in [specific field or achievement] is both humbling and encouraging. I want to express my sincere appreciation to the [selection committee/organization] for this recognition, which motivates me to continue striving for excellence in my endeavors.

With heartfelt thanks,
[Your Name]
\`\`\`

#### For Media Coverage

\`\`\`
Dear [Journalist/Publication],

I want to express my sincere gratitude for your recent coverage of [specific project, event, or achievement]. Your thoughtful and accurate reporting in [article/program title] has helped bring attention to [specific issue or work] in a meaningful way. I particularly appreciate your focus on [specific aspect highlighted], which captures the essence of what we are trying to accomplish.

With appreciation,
[Your Name]
\`\`\`

### For Community Support

#### For Community Engagement

\`\`\`
Dear [Community Group/Leader],

I am writing to express my heartfelt thanks for the community support shown for [specific project or initiative]. The engagement and enthusiasm demonstrated by [specific actions or contributions] have been truly inspiring. This collective effort exemplifies the power of community and has significantly enhanced the impact of our work together.

With deep gratitude,
[Your Name]
\`\`\`

#### For Volunteer Support

\`\`\`
Dear [Volunteer/Volunteer Group],

I want to express my profound appreciation for your volunteer support with [specific project or event]. Your dedication of time and energy to [specific tasks or responsibilities] made a tremendous difference to the success of our efforts. Your willingness to contribute your [skills/expertise/enthusiasm] exemplifies the spirit of service that is so valuable to our community.

With sincere thanks,
[Your Name]
[V0_FILE]typescriptreact:file="app/gratitude-templates/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { PasswordProtection } from "@/components/password-protection"
import { MarkdownViewer } from "@/components/markdown-viewer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Gift } from "lucide-react"
import Link from "next/link"

export default function GratitudeTemplatesPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    // Check if user is authenticated
    if (typeof window !== "undefined") {
      const authenticated = localStorage.getItem("notesAuthenticated") === "true"
      setIsAuthenticated(authenticated)
      setIsLoading(false)
    }
  }, [])

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

if (!isAuthenticated) {
    return <PasswordProtection onAuthenticated={() => setIsAuthenticated(true)} redirectPath="/gratitude-templates" />
  }

return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Gift className="h-6 w-6 text-primary" />
          <h1 className="text-3xl font-bold">Gratitude Templates</h1>
        </div>
        <Link href="/personal-notes">
          <Button variant="outline" size="sm" className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            Back to Notes
          </Button>
        </Link>
      </div>

<div className="bg-card rounded-lg shadow-lg p-6 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-5"
          style={{ backgroundImage: "url('/abstract-notes-pattern.png')" }}
        ></div>
        <div className="relative z-10">
          <MarkdownViewer filePath="/data/gratitude-templates.md" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/markdown-viewer.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Copy, Check, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

interface MarkdownViewerProps {
  filePath: string
}

export function MarkdownViewer({ filePath }: MarkdownViewerProps) {
  const [content, setContent] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [copyStates, setCopyStates] = useState<Record<string, boolean>>({})
  const { toast } = useToast()

useEffect(() => {
    const fetchMarkdown = async () => {
      try {
        setIsLoading(true)
        const response = await fetch(filePath)
        if (!response.ok) {
          throw new Error(`Failed to fetch markdown: ${response.status}`)
        }
        const text = await response.text()
        setContent(text)
        setError(null)
      } catch (err) {
        setError(err instanceof Error ? err.message : "An unknown error occurred")
        console.error("Error fetching markdown:", err)
      } finally {
        setIsLoading(false)
      }
    }

fetchMarkdown()
  }, [filePath])

const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text).then(
      () => {
        setCopyStates({ ...copyStates, [id]: true })
        toast({
          title: "Copied to clipboard",
          description: "The content has been copied to your clipboard.",
        })
        setTimeout(() => {
          setCopyStates({ ...copyStates, [id]: false })
        }, 2000)
      },
      (err) => {
        console.error("Could not copy text: ", err)
        toast({
          title: "Failed to copy",
          description: "There was an error copying to clipboard.",
          variant: "destructive",
        })
      },
    )
  }

const renderMarkdown = () => {
    if (!content) return null

// Split the content by lines
    const lines = content.split("\n")
    const result = []
    let currentSection = null
    let currentCodeBlock = null
    let codeBlockId = 0

for (let i = 0; i < lines.length; i++) {
      const line = lines[i]

// Handle headings
      if (line.startsWith("# ")) {
        result.push(
          <h1 key={`h1-${i}`} className="text-3xl font-bold mt-8 mb-4">
            {line.substring(2)}
          </h1>,
        )
        currentSection = null
      } else if (line.startsWith("## ")) {
        result.push(
          <h2 key={`h2-${i}`} className="text-2xl font-semibold mt-6 mb-3">
            {line.substring(3)}
          </h2>,
        )
        currentSection = null
      } else if (line.startsWith("### ")) {
        result.push(
          <h3 key={`h3-${i}`} className="text-xl font-medium mt-4 mb-2">
            {line.substring(4)}
          </h3>,
        )
        currentSection = line.substring(4)
      } else if (line.startsWith("```")) {
        // Start or end of code block
        if (currentCodeBlock === null) {
          // Start of code block
          currentCodeBlock = []
        } else {
          // End of code block
          const blockId = `code-block-${codeBlockId++}`
          const codeContent = currentCodeBlock.join("\n")
          result.push(
            <div key={blockId} className="relative my-4">
              <pre className="bg-muted p-4 rounded-md overflow-x-auto">
                <code className="text-sm">{codeContent}</code>
              </pre>
              <Button
                variant="outline"
                size="sm"
                className="absolute top-2 right-2"
                onClick={() => copyToClipboard(codeContent, blockId)}
              >
                {copyStates[blockId] ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>,
          )
          currentCodeBlock = null
        }
      } else if (currentCodeBlock !== null) {
        // Inside code block
        currentCodeBlock.push(line)
      } else if (line.trim() === "") {
        // Empty line
        result.push(<div key={`empty-${i}`} className="my-2"></div>)
      } else {
        // Regular paragraph
        result.push(
          <p key={`p-${i}`} className="my-2">
            {line}
          </p>,
        )
      }
    }

return result
  }

if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
      </div>
    )
  }

if (error) {
    return (
      <Card className="mx-auto max-w-4xl my-8">
        <CardContent className="p-6">
          <div className="text-center text-destructive">
            <h2 className="text-xl font-semibold mb-2">Error Loading Content</h2>
            <p>{error}</p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="container px-4 py-6 max-w-4xl mx-auto">
      <div className="flex items-center mb-6">
        <Link href="/personal-notes">
          <Button variant="ghost" size="icon" className="mr-2">
            <ArrowLeft className="h-5 w-5" />
          </Button>
        </Link>
        <h1 className="text-2xl font-bold">Content Reference</h1>
      </div>

<Card>
        <CardContent className="p-6">
          <div className="prose prose-sm max-w-none dark:prose-invert">{renderMarkdown()}</div>
        </CardContent>
      </Card>
    </div>
  )
}

// Also add a default export for backward compatibility
export default MarkdownViewer
[V0_FILE]markdown:file="public/data/chatting-templates.md"
# Social Media Chatting & Reply Templates

This reference guide provides templates for effective communication across various social media platforms and messaging apps. Use these templates to maintain professional and engaging conversations.

## WhatsApp

### Initial Contact

\`\`\`
Hi [Name], 
This is [Your Name]. I got your contact from [Source]. I wanted to reach out regarding [Topic/Reason]. Would you have some time to discuss this?
\`\`\`

### Follow-up Message

\`\`\`
Hello [Name],
I hope you're doing well. I'm following up on our previous conversation about [Topic]. Have you had a chance to consider [Specific Point]? I'd appreciate your thoughts.
\`\`\`

### Professional Group Introduction

\`\`\`
Hello everyone,
I'm [Your Name], [Your Position] at [Your Organization]. I'm excited to join this group to [Purpose of Joining]. Looking forward to our discussions and collaboration.
\`\`\`

### Meeting Request

\`\`\`
Hi [Name],
I'd like to schedule a quick call/meeting to discuss [Topic]. Would you be available on [Date] at [Time]? If not, please suggest a time that works better for you.
\`\`\`

### Thank You Message

\`\`\`
Thank you, [Name], for your time and insights on [Topic]. The information you shared was very helpful. I appreciate your assistance!
\`\`\`

## Instagram

### Comment Response

\`\`\`
@[username] Thank you for your comment! [Personalized response to their specific comment]. Feel free to DM me if you have any other questions.
\`\`\`

### DM Introduction

\`\`\`
Hi [Name]! I really enjoyed your content about [Topic]. I'm [Brief Introduction] and I'd love to connect about [Reason for Contact]. Looking forward to hearing from you!
\`\`\`

### Collaboration Request

\`\`\`
Hello @[username], I've been following your work and I'm impressed with [Specific Content]. I'm reaching out to explore a potential collaboration on [Project/Idea]. Would you be interested in discussing this further?
\`\`\`

### Content Appreciation

\`\`\`
Your post on [Topic] really resonated with me because [Reason]. Thank you for sharing your perspective! I've shared it with my network as well.
\`\`\`

### Story Response

\`\`\`
I saw your story about [Topic] and wanted to share my thoughts. [Your Opinion/Experience]. Have you considered [Question/Suggestion]?
\`\`\`

## Facebook Messenger

### Networking Introduction

\`\`\`
Hello [Name], we're connected on Facebook through [Mutual Connection/Group]. I'm reaching out because [Reason for Contact]. I'd love to learn more about your work in [Their Field/Interest].
\`\`\`

### Event Invitation

\`\`\`
Hi [Name]! I'm organizing an event on [Topic] on [Date] at [Time]. Given your interest in [Related Field], I thought you might want to join us. Here are the details: [Event Link/Details]. Hope to see you there!
\`\`\`

### Resource Sharing

\`\`\`
Hello [Name], I came across this [Article/Video/Resource] about [Topic] and immediately thought of our conversation about [Related Topic]. Here's the link: [URL]. I'd love to hear your thoughts on it!
\`\`\`

### Group Chat Introduction

\`\`\`
Hello everyone! I'm [Your Name], and I'm new to this group. I'm interested in [Topic/Purpose of the Group] because [Your Reason]. Looking forward to engaging with all of you!
\`\`\`

### Support Request

\`\`\`
Hi [Name], I hope you're doing well. I'm working on [Project/Task] and remembered you have experience with [Specific Skill/Knowledge]. Would you mind sharing some insights or tips that could help me?
\`\`\`

## LinkedIn

### Connection Request

\`\`\`
Hello [Name], I'm [Your Name], [Your Position] at [Your Company]. I'm reaching out to connect because [Reason - shared industry, mutual connections, interest in their work]. I believe we could benefit from being connected on LinkedIn. Looking forward to networking with you.
\`\`\`

### Job Inquiry

\`\`\`
Dear [Name], I hope this message finds you well. I noticed you're [Their Position] at [Their Company]. I'm very interested in opportunities in [Field/Department] at your organization. Would you be open to a brief conversation about the work culture and potential openings? Thank you for your time.
\`\`\`

### Post Engagement

\`\`\`
Thank you for sharing this insightful post on [Topic]. I particularly appreciated your point about [Specific Point]. In my experience, [Add Your Relevant Experience/Perspective]. What are your thoughts on [Related Question]?
\`\`\`

### Recommendation Request

\`\`\`
Hi [Name], I hope you're doing well. We worked together at [Company/Project] where I [Your Role/Contribution]. I'm updating my LinkedIn profile and would greatly appreciate if you could write a recommendation highlighting our collaboration. I'd be happy to reciprocate as well. Thank you for considering.
\`\`\`

### Introduction to Mutual Connection

\`\`\`
Hello [Name], I noticed we're both connected with [Mutual Connection]. [Mutual Connection] has spoken highly of your work in [Field/Industry]. I'm [Your Brief Introduction] and I'm interested in [Reason for Contact]. I'd appreciate the opportunity to connect and learn from your experience.
\`\`\`

## Twitter/X

### Reply to Industry News

\`\`\`
Interesting development in [Industry]! This could impact [Specific Area] by [Potential Impact]. What do you think about the implications for [Related Topic]? #[Relevant Hashtag]
\`\`\`

### Thread Starter

\`\`\`
I've been thinking about [Topic] lately, and wanted to share some insights from my experience in [Your Field]. Here's a thread on [Specific Aspect]... (1/5)
\`\`\`

### Quote Tweet

\`\`\`
Adding my perspective: [Your Brief Opinion]. This highlights the importance of [Related Point] in our approach to [Broader Topic]. #[Relevant Hashtag]
\`\`\`

### Direct Message Introduction

\`\`\`
Hi [Name], I've been following your tweets on [Topic] and really value your insights. I'm [Brief Introduction] and would love to connect about [Specific Reason]. Would you be open to a quick conversation?
\`\`\`

### Networking Follow-up

\`\`\`
Great connecting with you at [Event/Online Discussion]! As promised, here's the [Resource/Link] we discussed. Looking forward to continuing our conversation about [Topic].
\`\`\`

## Telegram

### Professional Group Introduction

\`\`\`
Hello everyone, I'm [Your Name], [Your Position/Profession]. I joined this group to [Your Purpose - learn, share knowledge, network, etc.] in the field of [Topic/Industry]. Looking forward to valuable discussions!
\`\`\`

### One-on-One Professional Chat

\`\`\`
Hello [Name], this is [Your Name] ([Context - how you got their contact]). I'm reaching out regarding [Specific Topic/Project]. Would this be a good time to discuss [Brief Description of What You Want to Discuss]?
\`\`\`

### Channel Announcement

\`\`\`
📢 Important Update 📢
[Title of Announcement]

Dear channel members,
[Detailed information about the update/announcement]

Key points:
• [Point 1]
• [Point 2]
• [Point 3]

For more information: [Link if applicable]
Please [desired action] by [deadline if applicable].

Thank you for your attention!
\`\`\`

### Technical Support Request

\`\`\`
Hello [Support/Person Name],

I'm experiencing an issue with [Product/Service/Feature].

Details:
• Problem: [Describe the issue]
• When it started: [Time/Date]
• Steps to reproduce: [List steps]
• What I've tried: [Solutions attempted]

Could you please assist with resolving this? I've attached [screenshots/logs] for reference.

Thank you!
\`\`\`

### Event Coordination

\`\`\`
Hello [Group/Person Name],

I'm organizing [Event Name] on [Date] at [Time].

Event details:
• Topic: [Brief description]
• Duration: [Length of event]
• Location/Platform: [Where it will be held]
• What to prepare: [Any prerequisites]

Please confirm your participation by [Deadline].
Looking forward to seeing you there!
\`\`\`

## Slack

### Channel Introduction

\`\`\`
Hello everyone! 👋
I'm [Your Name], joining the team as [Your Role]. I'll be working on [Projects/Areas of Responsibility]. Previously, I was at [Previous Experience] where I focused on [Relevant Skills/Achievements].

I'm passionate about [Professional Interests] and in my free time, I enjoy [Personal Interests/Hobbies].

Looking forward to collaborating with all of you!
\`\`\`

### Project Update

\`\`\`
@channel Project Update: [Project Name]

Status: [On track/Delayed/Ahead of schedule]

Completed this week:
• [Task 1]
• [Task 2]

In progress:
• [Task 3] - [Owner] - [Expected completion]
• [Task 4] - [Owner] - [Expected completion]

Blockers:
• [Issue 1] - Need input from [Team/Person]

Next steps:
• [Upcoming task 1]
• [Upcoming task 2]

Questions or concerns? Thread them below or ping me directly.
\`\`\`

### Meeting Summary

\`\`\`
Meeting Summary: [Meeting Title]
Date: [Date]
Participants: @[person1] @[person2] @[person3]

Key points discussed:
1. [Topic 1]: [Brief summary]
2. [Topic 2]: [Brief summary]

Decisions made:
• [Decision 1]
• [Decision 2]

Action items:
• @[person1]: [Task] by [Deadline]
• @[person2]: [Task] by [Deadline]

Next meeting: [Date and Time]
\`\`\`

### Help Request

\`\`\`
Hey team, I could use some help with [Specific Issue/Question].

Context:
• [Background information]
• [What I've tried so far]
• [Specific question or help needed]

Any insights would be greatly appreciated! Thanks in advance.
\`\`\`

### Celebration/Recognition

\`\`\`
@channel I'd like to give a shoutout to @[person] for [Achievement/Contribution]! 🎉

This has helped our team [Positive Impact] and demonstrates [Positive Quality].

Great work and thank you for your dedication!
\`\`\`

## Discord

### Server Introduction

\`\`\`
Hello everyone! 👋
I'm [Your Name/Username], new to this server. I'm interested in [Topic/Community Focus] because [Your Reason/Background].

A bit about me:
• Experience: [Relevant experience]
• Currently working on: [Current projects/interests]
• Looking to: [Goals for joining]

Looking forward to being part of this community!
\`\`\`

### Help Channel Question

\`\`\`
**Help Request: [Brief Topic]**

Hi everyone, I'm trying to [What you're attempting] but encountering [Issue].

**Details:**
• [Specific information about your setup/situation]
• [Steps you've already taken]
• [Error messages if applicable]

Has anyone faced something similar or have suggestions on how to resolve this?

Thanks in advance for any help!
\`\`\`

### Event Coordination

\`\`\`
@everyone **Upcoming Event: [Event Name]**

📅 **Date & Time:** [Date] at [Time] ([Time Zone])
🎯 **What:** [Brief description]
📍 **Where:** [Channel/Voice Channel/External platform]
⏱️ **Duration:** Approximately [Length]

**Details:**
[More comprehensive explanation of the event]

**To Participate:**
[Any requirements or preparation needed]

React with ✅ if you plan to join!
\`\`\`

### Resource Sharing

\`\`\`
**Resource Share: [Topic/Title]**

I found this [article/video/tool] that I thought would be valuable for our community:

**[Title of Resource]**
Link: [URL]

**Why it's useful:**
• [Point 1]
• [Point 2]

**Key takeaways:**
[Brief summary of main points]

Let me know your thoughts if you check it out!
\`\`\`

### Collaboration Request

\`\`\`
Hi @[username], I noticed your messages about [Topic/Project]. I'm working on something similar and would love to collaborate.

**My project:**
[Brief description of what you're working on]

**Potential collaboration:**
[How you could work together]

Would you be interested in discussing this further? We could chat in a thread or DM if you prefer.
\`\`\`

## General Professional Communication

### Networking Follow-up

\`\`\`
Dear [Name],

It was a pleasure meeting you at [Event/Place] on [Date]. I enjoyed our conversation about [Topic Discussed] and appreciated your insights on [Specific Point].

As mentioned, I'd like to [Reason for Follow-up - share a resource, connect further, etc.]. [Additional context or information].

I look forward to staying in touch and potentially collaborating in the future.

Best regards,
[Your Name]
[Your Contact Information]
\`\`\`

### Request for Information

\`\`\`
Hello [Name],

I hope this message finds you well. My name is [Your Name], and I am [Your Position/Brief Introduction].

I'm reaching out because I'm seeking information about [Specific Topic/Request]. [Additional context about why you need this information and how it will be used].

Specifically, I would like to know:
1. [Question 1]
2. [Question 2]
3. [Question 3]

Any insights you could provide would be greatly appreciated. If there's someone else who might be better positioned to help with this inquiry, please let me know.

Thank you for your time and assistance.

Best regards,
[Your Name]
[Your Contact Information]
\`\`\`

### Feedback Request

\`\`\`
Dear [Name],

I hope you're doing well. I recently completed [Project/Task/Work] and would greatly value your feedback.

Specifically, I would appreciate your thoughts on:
• [Aspect 1]
• [Aspect 2]
• [Aspect 3]

Your expertise in [Their Area of Expertise] makes your opinion particularly valuable to me. Any suggestions for improvement would be welcomed.

Thank you in advance for your time and insights.

Best regards,
[Your Name]
\`\`\`

### Apology Message

\`\`\`
Dear [Name],

I want to sincerely apologize for [Specific Incident/Issue]. I understand that [Impact of the Situation] and take full responsibility.

[Explanation - brief, not an excuse]. This does not reflect my/our usual standards, and I regret any inconvenience or disappointment this has caused.

Moving forward, I will [Steps to Prevent Recurrence]. I value our [relationship/partnership] and am committed to rebuilding your trust.

Please let me know if there's anything else I can do to address this situation.

Sincerely,
[Your Name]
\`\`\`

### Thank You Note

\`\`\`
Dear [Name],

I wanted to express my sincere gratitude for [What They Did - help, support, opportunity, etc.]. Your [Specific Action] has made a significant difference by [Positive Impact].

[Additional personalized note about the specific situation or your appreciation].

Thank you again for your [generosity/support/guidance/etc.]. I look forward to [Future Interaction if applicable].

With appreciation,
[Your Name]
\`\`\`

## Customer Service Responses

### Initial Response to Inquiry

\`\`\`
Hello [Customer Name],

Thank you for reaching out to [Company Name]. I appreciate your interest in our [products/services].

Regarding your question about [Topic of Inquiry], [Provide Clear Answer/Information].

If you have any further questions or need additional information, please don't hesitate to ask. I'm here to help!

Best regards,
[Your Name]
[Your Position]
[Company Name]
\`\`\`

### Problem Resolution

\`\`\`
Dear [Customer Name],

Thank you for bringing this issue to our attention. I understand you're experiencing [Brief Description of Problem], and I apologize for any inconvenience this has caused.

I've looked into this matter and [Explanation of What Happened]. To resolve this, I have [Actions Taken to Fix the Issue].

[Additional Information or Next Steps if applicable].

Please let me know if this resolves your concern or if there's anything else we can assist with. Your satisfaction is important to us.

Best regards,
[Your Name]
[Your Position]
[Company Name]
\`\`\`

### Follow-up After Service

\`\`\`
Hello [Customer Name],

I'm following up regarding the [service/product/issue] we recently [provided/resolved] for you. I wanted to ensure that everything is working as expected and that you're satisfied with the outcome.

Has the [solution/product] met your expectations? Is there anything else you need assistance with?

Your feedback is valuable to us as we strive to provide the best possible service to our customers.

Thank you for choosing [Company Name]. We appreciate your business!

Best regards,
[Your Name]
[Your Position]
[Company Name]
\`\`\`

### Handling a Complaint

\`\`\`
Dear [Customer Name],

I sincerely apologize for the negative experience you've had with [Product/Service/Situation]. We take your feedback very seriously, and I understand your frustration with [Specific Issue].

I want to assure you that this is not the standard of service we aim to provide. After reviewing your situation, I have [Immediate Action Taken].

Additionally, we will [Longer-term Solution or Prevention Measure] to ensure this doesn't happen again.

As a gesture of our commitment to making this right, I would like to offer [Appropriate Compensation or Solution if applicable].

Please let me know if this addresses your concerns or if there's anything else we can do to improve your experience with us.

Thank you for bringing this to our attention and giving us the opportunity to make it right.

Sincerely,
[Your Name]
[Your Position]
[Company Name]
\`\`\`

### Product Information Request

\`\`\`
Hello [Customer Name],

Thank you for your interest in our [Product Name]. I'm happy to provide the information you requested.

[Product Name] features:
• [Feature 1]: [Brief Description]
• [Feature 2]: [Brief Description]
• [Feature 3]: [Brief Description]

Regarding your specific question about [Their Question], [Detailed Answer].

The price for this product is [Price], and it's currently [In Stock/Out of Stock/Available for Pre-order].

If you'd like to proceed with a purchase or have any other questions, please let me know. I'm here to help!

Best regards,
[Your Name]
[Your Position]
[Company Name]
[V0_FILE]typescriptreact:file="app/chatting-templates/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { PasswordProtection } from "@/components/password-protection"
import { MarkdownViewer } from "@/components/markdown-viewer"
import { Button } from "@/components/ui/button"
import { ArrowLeft, MessageCircle } from "lucide-react"
import Link from "next/link"

export default function ChattingTemplatesPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

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

if (!isAuthenticated) {
    return (
      <PasswordProtection
        correctPassword={process.env.NEXT_PUBLIC_NOTES_PASSWORD || "password123"}
        onAuthenticated={() => setIsAuthenticated(true)}
      />
    )
  }

return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <MessageCircle className="h-6 w-6 text-primary" />
          <h1 className="text-3xl font-bold">Social Media Chatting Templates</h1>
        </div>
        <Link href="/personal-notes">
          <Button variant="outline" size="sm" className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            Back to Notes
          </Button>
        </Link>
      </div>

<div className="bg-card rounded-lg shadow-lg p-6 relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-5"
          style={{ backgroundImage: "url('/abstract-notes-pattern.png')" }}
        ></div>
        <div className="relative z-10">
          <MarkdownViewer filePath="/data/chatting-templates.md" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/personal-notes/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { PasswordProtection } from "@/components/password-protection"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, MessageSquare, Mail, Gift, MessageCircle } from "lucide-react"
import Link from "next/link"

export default function PersonalNotesPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

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

if (!isAuthenticated) {
    return <PasswordProtection onAuthenticated={() => setIsAuthenticated(true)} redirectPath="/personal-notes" />
  }

return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Personal Notes</h1>
        <p className="text-muted-foreground">Your private collection of notes and templates</p>
      </div>

<div className="flex flex-wrap gap-4 mb-8">
        <Link href="/hashtag-reference">
          <Button variant="outline" className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Social Media Hashtags
          </Button>
        </Link>
        <Link href="/feedback-templates">
          <Button variant="outline" className="flex items-center gap-2">
            <MessageSquare className="h-4 w-4" />
            Feedback Templates
          </Button>
        </Link>
        <Link href="/email-templates">
          <Button variant="outline" className="flex items-center gap-2">
            <Mail className="h-4 w-4" />
            Email Templates
          </Button>
        </Link>
        <Link href="/gratitude-templates">
          <Button variant="outline" className="flex items-center gap-2">
            <Gift className="h-4 w-4" />
            Gratitude Templates
          </Button>
        </Link>
        <Link href="/chatting-templates">
          <Button variant="outline" className="flex items-center gap-2">
            <MessageCircle className="h-4 w-4" />
            Chatting Templates
          </Button>
        </Link>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-primary" />
              Social Media Hashtags
            </CardTitle>
            <CardDescription>Reference guide for social media hashtags by platform and topic</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-sm">
              A comprehensive collection of hashtags organized by platform and category to enhance your social media
              presence.
            </p>
            <Link href="/hashtag-reference">
              <Button>View Hashtags</Button>
            </Link>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5 text-primary" />
              Feedback Templates
            </CardTitle>
            <CardDescription>Templates for providing constructive feedback in various contexts</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-sm">
              Professionally crafted templates for delivering effective feedback to students, colleagues, and team
              members.
            </p>
            <Link href="/feedback-templates">
              <Button>View Templates</Button>
            </Link>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Mail className="h-5 w-5 text-primary" />
              Email Templates
            </CardTitle>
            <CardDescription>Professional email templates for various business situations</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-sm">
              Ready-to-use email templates for networking, outreach, follow-ups, and professional communications.
            </p>
            <Link href="/email-templates">
              <Button>View Emails</Button>
            </Link>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Gift className="h-5 w-5 text-primary" />
              Gratitude Templates
            </CardTitle>
            <CardDescription>Templates for expressing thanks for various types of support</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-sm">
              Thoughtful templates for expressing gratitude for donations, grants, investments, loans, mentorship, and
              other forms of support.
            </p>
            <Link href="/gratitude-templates">
              <Button>View Gratitude Templates</Button>
            </Link>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageCircle className="h-5 w-5 text-primary" />
              Chatting Templates
            </CardTitle>
            <CardDescription>
              Templates for effective communication on social media and messaging platforms
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p className="mb-4 text-sm">
              Professional templates for various types of conversations across WhatsApp, Instagram, LinkedIn, Twitter,
              Slack, Discord, and more.
            </p>
            <Link href="/chatting-templates">
              <Button>View Chatting Templates</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tracking-system/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/tracking/batch-actions.tsx"
"use client"

import { useState } from "react"
import { Check, FileText, Mail, MoreHorizontal, Printer, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { toast } from "@/components/ui/use-toast"
import { Badge } from "@/components/ui/badge"

interface BatchActionsProps {
  items: any[]
  onExport: (items: any[], format: string) => void
  onEmailSelected: (items: any[]) => void
  onPrintSelected: (items: any[]) => void
}

export function BatchActions({ items, onExport, onEmailSelected, onPrintSelected }: BatchActionsProps) {
  const [selectedItems, setSelectedItems] = useState<any[]>([])
  const [selectAll, setSelectAll] = useState(false)

const handleSelectAll = () => {
    if (selectAll) {
      setSelectedItems([])
    } else {
      setSelectedItems([...items])
    }
    setSelectAll(!selectAll)
  }

const handleSelectItem = (item: any) => {
    if (selectedItems.some((i) => i.id === item.id)) {
      setSelectedItems(selectedItems.filter((i) => i.id !== item.id))
      setSelectAll(false)
    } else {
      setSelectedItems([...selectedItems, item])
      if (selectedItems.length + 1 === items.length) {
        setSelectAll(true)
      }
    }
  }

const isSelected = (item: any) => {
    return selectedItems.some((i) => i.id === item.id)
  }

const handleBatchExport = (format: string) => {
    if (selectedItems.length === 0) {
      toast({
        title: "No items selected",
        description: "Please select at least one item to export",
        variant: "destructive",
      })
      return
    }

onExport(selectedItems, format)
    toast({
      title: `Exporting ${selectedItems.length} items as ${format.toUpperCase()}`,
      description: "Your export is being prepared...",
    })
  }

const handleBatchEmail = () => {
    if (selectedItems.length === 0) {
      toast({
        title: "No items selected",
        description: "Please select at least one item to email",
        variant: "destructive",
      })
      return
    }

onEmailSelected(selectedItems)
  }

const handleBatchPrint = () => {
    if (selectedItems.length === 0) {
      toast({
        title: "No items selected",
        description: "Please select at least one item to print",
        variant: "destructive",
      })
      return
    }

onPrintSelected(selectedItems)
  }

const clearSelection = () => {
    setSelectedItems([])
    setSelectAll(false)
  }

return (
    <div className="w-full">
      <div className="flex items-center justify-between mb-4 bg-muted/30 p-2 rounded-md">
        <div className="flex items-center space-x-2">
          <Checkbox id="select-all" checked={selectAll} onCheckedChange={handleSelectAll} />
          <label htmlFor="select-all" className="text-sm font-medium">
            Select All
          </label>
        </div>

{selectedItems.length > 0 && (
          <div className="flex items-center space-x-4">
            <Badge variant="outline" className="flex items-center gap-1">
              <Check className="h-3 w-3" />
              {selectedItems.length} selected
            </Badge>

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm">
                  Batch Actions <MoreHorizontal className="ml-2 h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>Export Options</DropdownMenuLabel>
                <DropdownMenuItem onClick={() => handleBatchExport("pdf")}>
                  <FileText className="mr-2 h-4 w-4" />
                  Export as PDF
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => handleBatchExport("csv")}>
                  <FileText className="mr-2 h-4 w-4" />
                  Export as CSV
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => handleBatchExport("excel")}>
                  <FileText className="mr-2 h-4 w-4" />
                  Export as Excel
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleBatchEmail}>
                  <Mail className="mr-2 h-4 w-4" />
                  Email Selected
                </DropdownMenuItem>
                <DropdownMenuItem onClick={handleBatchPrint}>
                  <Printer className="mr-2 h-4 w-4" />
                  Print Selected
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={clearSelection}>
                  <X className="mr-2 h-4 w-4" />
                  Clear Selection
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

<div className="space-y-1">
        {items.map((item) => (
          <div
            key={item.id}
            className={`flex items-center space-x-2 p-2 rounded-md ${isSelected(item) ? "bg-muted/50" : "hover:bg-muted/20"}`}
          >
            <Checkbox
              id={`item-${item.id}`}
              checked={isSelected(item)}
              onCheckedChange={() => handleSelectItem(item)}
            />
            <label
              htmlFor={`item-${item.id}`}
              className="flex-1 text-sm cursor-pointer flex items-center justify-between"
            >
              <span>
                {item.id} - {item.name || item.description}
              </span>
              <span className="text-muted-foreground">{new Date(item.date).toLocaleDateString()}</span>
            </label>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-template-selector.tsx"
"use client"

import { useState } from "react"
import { Check, Layout } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { toast } from "@/components/ui/use-toast"

// Define available templates
export const invoiceTemplates = [
  {
    id: "classic",
    name: "Classic",
    description: "Traditional professional invoice layout",
    previewImage: "/placeholder.svg?key=f4w3q",
    primaryColor: "#2563eb",
    accentColor: "#dbeafe",
    fontFamily: "Inter, sans-serif",
  },
  {
    id: "modern",
    name: "Modern",
    description: "Clean and minimal design with bold accents",
    previewImage: "/placeholder.svg?key=lgq9o",
    primaryColor: "#7c3aed",
    accentColor: "#f3e8ff",
    fontFamily: "Inter, sans-serif",
  },
  {
    id: "elegant",
    name: "Elegant",
    description: "Sophisticated design with serif fonts",
    previewImage: "/placeholder.svg?key=qsy5t",
    primaryColor: "#0f766e",
    accentColor: "#ccfbf1",
    fontFamily: "Georgia, serif",
  },
  {
    id: "creative",
    name: "Creative",
    description: "Colorful design with modern layout",
    previewImage: "/creative-invoice-template.png",
    primaryColor: "#c2410c",
    accentColor: "#ffedd5",
    fontFamily: "Inter, sans-serif",
  },
  {
    id: "corporate",
    name: "Corporate",
    description: "Professional design for business use",
    previewImage: "/corporate-invoice-template.png",
    primaryColor: "#1e40af",
    accentColor: "#dbeafe",
    fontFamily: "Inter, sans-serif",
  },
]

interface InvoiceTemplateSelectorProps {
  currentTemplate: string
  onTemplateChange: (templateId: string) => void
}

export function InvoiceTemplateSelector({
  currentTemplate = "classic",
  onTemplateChange,
}: InvoiceTemplateSelectorProps) {
  const [selectedTemplate, setSelectedTemplate] = useState(currentTemplate)
  const [isOpen, setIsOpen] = useState(false)

const handleSave = () => {
    onTemplateChange(selectedTemplate)
    setIsOpen(false)
    toast({
      title: "Template updated",
      description: `Invoice template changed to ${invoiceTemplates.find((t) => t.id === selectedTemplate)?.name}`,
    })
  }

return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <Layout className="h-4 w-4" />
          Change Template
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Select Invoice Template</DialogTitle>
          <DialogDescription>
            Choose a template design for your invoices. This will apply to newly generated invoices.
          </DialogDescription>
        </DialogHeader>

<div className="py-4">
          <RadioGroup
            value={selectedTemplate}
            onValueChange={setSelectedTemplate}
            className="grid grid-cols-1 md:grid-cols-2 gap-4"
          >
            {invoiceTemplates.map((template) => (
              <div
                key={template.id}
                className={`relative border rounded-lg p-4 cursor-pointer transition-all ${
                  selectedTemplate === template.id
                    ? "border-primary ring-2 ring-primary/20"
                    : "border-border hover:border-primary/50"
                }`}
              >
                <RadioGroupItem value={template.id} id={`template-${template.id}`} className="sr-only" />
                <Label htmlFor={`template-${template.id}`} className="cursor-pointer flex flex-col gap-2">
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className="font-medium">{template.name}</h3>
                      <p className="text-sm text-muted-foreground">{template.description}</p>
                    </div>
                    {selectedTemplate === template.id && (
                      <div className="bg-primary text-primary-foreground rounded-full p-1">
                        <Check className="h-3 w-3" />
                      </div>
                    )}
                  </div>

<div className="flex items-center gap-2 mt-2">
                    <div
                      className="w-4 h-4 rounded-full"
                      style={{ backgroundColor: template.primaryColor }}
                      title="Primary color"
                    />
                    <div
                      className="w-4 h-4 rounded-full"
                      style={{ backgroundColor: template.accentColor }}
                      title="Accent color"
                    />
                    <span className="text-xs text-muted-foreground ml-auto">{template.fontFamily.split(",")[0]}</span>
                  </div>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSave}>Apply Template</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-templates/index.tsx"
import { ClassicInvoice } from "./classic-invoice"
import { ModernInvoice } from "./modern-invoice"
import { ElegantInvoice } from "./elegant-invoice"
import { CreativeInvoice } from "./creative-invoice"
import { CorporateInvoice } from "./corporate-invoice"

export interface InvoiceData {
  id: string
  date: string
  dueDate?: string
  type: string
  name: string
  description: string
  amount: number
  status: string
  category: string
  contact?: {
    name: string
    email: string
    phone?: string
    address?: string
  }
  items?: Array<{
    description: string
    quantity: number
    unitPrice: number
    total: number
  }>
  notes?: string
  terms?: string
  logo?: string
  companyInfo?: {
    name: string
    address: string
    email: string
    phone: string
    website?: string
  }
  paymentInfo?: {
    method: string
    details: string
  }
}

interface InvoiceTemplateProps {
  data: InvoiceData
  templateId: string
}

export function InvoiceTemplate({ data, templateId = "classic" }: InvoiceTemplateProps) {
  switch (templateId) {
    case "modern":
      return <ModernInvoice data={data} />
    case "elegant":
      return <ElegantInvoice data={data} />
    case "creative":
      return <CreativeInvoice data={data} />
    case "corporate":
      return <CorporateInvoice data={data} />
    case "classic":
    default:
      return <ClassicInvoice data={data} />
  }
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-templates/classic-invoice.tsx"
import type { InvoiceData } from "./index"

interface ClassicInvoiceProps {
  data: InvoiceData
}

export function ClassicInvoice({ data }: ClassicInvoiceProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount)
  }

const calculateTotal = () => {
    if (data.items && data.items.length > 0) {
      return data.items.reduce((sum, item) => sum + item.total, 0)
    }
    return data.amount
  }

return (
    <div className="bg-white p-8 rounded-lg shadow-lg max-w-4xl mx-auto" id="invoice-template">
      {/* Header */}
      <div className="flex justify-between items-start mb-8">
        <div>
          {data.logo ? (
            <img src={data.logo || "/placeholder.svg"} alt="Company Logo" className="h-16 mb-2" />
          ) : (
            <div className="text-2xl font-bold text-blue-600">{data.companyInfo?.name || "Your Company"}</div>
          )}
          {data.companyInfo && (
            <div className="text-sm text-gray-600">
              <p>{data.companyInfo.address}</p>
              <p>{data.companyInfo.email}</p>
              <p>{data.companyInfo.phone}</p>
              {data.companyInfo.website && <p>{data.companyInfo.website}</p>}
            </div>
          )}
        </div>

<div className="text-right">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">INVOICE</h1>
          <p className="text-gray-600">
            <span className="font-semibold">Invoice #:</span> {data.id}
          </p>
          <p className="text-gray-600">
            <span className="font-semibold">Date:</span> {new Date(data.date).toLocaleDateString()}
          </p>
          {data.dueDate && (
            <p className="text-gray-600">
              <span className="font-semibold">Due Date:</span> {new Date(data.dueDate).toLocaleDateString()}
            </p>
          )}
          <p className="text-gray-600 capitalize">
            <span className="font-semibold">Type:</span> {data.type}
          </p>
        </div>
      </div>

{/* Client Info */}
      {data.contact && (
        <div className="mb-8 p-4 bg-gray-50 rounded-md">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">Bill To:</h2>
          <p className="font-medium">{data.contact.name}</p>
          {data.contact.address && <p className="text-gray-600">{data.contact.address}</p>}
          {data.contact.email && <p className="text-gray-600">{data.contact.email}</p>}
          {data.contact.phone && <p className="text-gray-600">{data.contact.phone}</p>}
        </div>
      )}

{/* Items */}
      <div className="mb-8">
        <table className="w-full border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="py-3 px-4 text-left text-gray-700 font-semibold">Description</th>
              <th className="py-3 px-4 text-right text-gray-700 font-semibold">Quantity</th>
              <th className="py-3 px-4 text-right text-gray-700 font-semibold">Unit Price</th>
              <th className="py-3 px-4 text-right text-gray-700 font-semibold">Amount</th>
            </tr>
          </thead>
          <tbody>
            {data.items && data.items.length > 0 ? (
              data.items.map((item, index) => (
                <tr key={index} className="border-b border-gray-200">
                  <td className="py-4 px-4 text-gray-800">{item.description}</td>
                  <td className="py-4 px-4 text-right text-gray-800">{item.quantity}</td>
                  <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(item.unitPrice)}</td>
                  <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(item.total)}</td>
                </tr>
              ))
            ) : (
              <tr className="border-b border-gray-200">
                <td className="py-4 px-4 text-gray-800">{data.description}</td>
                <td className="py-4 px-4 text-right text-gray-800">1</td>
                <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(data.amount)}</td>
                <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(data.amount)}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

{/* Summary */}
      <div className="flex justify-end mb-8">
        <div className="w-64">
          <div className="flex justify-between py-2 border-b border-gray-200">
            <span className="font-medium text-gray-700">Subtotal:</span>
            <span className="text-gray-800">{formatCurrency(calculateTotal())}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-gray-200">
            <span className="font-medium text-gray-700">Tax (0%):</span>
            <span className="text-gray-800">{formatCurrency(0)}</span>
          </div>
          <div className="flex justify-between py-3 font-semibold">
            <span className="text-gray-700">Total:</span>
            <span className="text-blue-600 text-xl">{formatCurrency(calculateTotal())}</span>
          </div>
        </div>
      </div>

{/* Payment Info */}
      {data.paymentInfo && (
        <div className="mb-8 p-4 bg-blue-50 rounded-md">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">Payment Information:</h2>
          <p className="text-gray-700">
            <span className="font-medium">Method:</span> {data.paymentInfo.method}
          </p>
          <p className="text-gray-700">{data.paymentInfo.details}</p>
        </div>
      )}

{/* Notes & Terms */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        {data.notes && (
          <div>
            <h3 className="text-md font-semibold text-gray-700 mb-2">Notes:</h3>
            <p className="text-gray-600">{data.notes}</p>
          </div>
        )}

{data.terms && (
          <div>
            <h3 className="text-md font-semibold text-gray-700 mb-2">Terms & Conditions:</h3>
            <p className="text-gray-600">{data.terms}</p>
          </div>
        )}
      </div>

{/* Footer */}
      <div className="text-center text-gray-500 text-sm pt-4 border-t border-gray-200">
        <p>Thank you for your business!</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-templates/modern-invoice.tsx"
import type { InvoiceData } from "./index"

interface ModernInvoiceProps {
  data: InvoiceData
}

export function ModernInvoice({ data }: ModernInvoiceProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount)
  }

const calculateTotal = () => {
    if (data.items && data.items.length > 0) {
      return data.items.reduce((sum, item) => sum + item.total, 0)
    }
    return data.amount
  }

return (
    <div className="bg-white p-8 rounded-lg shadow-lg max-w-4xl mx-auto" id="invoice-template">
      {/* Header with accent color */}
      <div className="bg-purple-600 text-white p-6 -mx-8 -mt-8 mb-8 rounded-t-lg">
        <div className="flex justify-between items-center">
          <div>
            {data.logo ? (
              <img src={data.logo || "/placeholder.svg"} alt="Company Logo" className="h-16 mb-2" />
            ) : (
              <div className="text-2xl font-bold">{data.companyInfo?.name || "Your Company"}</div>
            )}
          </div>

<div className="text-right">
            <h1 className="text-3xl font-bold mb-1">INVOICE</h1>
            <p className="text-purple-200"># {data.id}</p>
          </div>
        </div>
      </div>

{/* Invoice Info & Client Info */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <div>
          <h2 className="text-lg font-semibold text-gray-700 mb-3 border-b border-purple-200 pb-1">Invoice Details</h2>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-gray-600">Date Issued:</span>
              <span className="font-medium">{new Date(data.date).toLocaleDateString()}</span>
            </div>
            {data.dueDate && (
              <div className="flex justify-between">
                <span className="text-gray-600">Due Date:</span>
                <span className="font-medium">{new Date(data.dueDate).toLocaleDateString()}</span>
              </div>
            )}
            <div className="flex justify-between">
              <span className="text-gray-600">Type:</span>
              <span className="font-medium capitalize">{data.type}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Status:</span>
              <span
                className={`font-medium ${
                  data.status === "paid"
                    ? "text-green-600"
                    : data.status === "pending"
                      ? "text-amber-600"
                      : "text-red-600"
                }`}
              >
                {data.status.toUpperCase()}
              </span>
            </div>
          </div>
        </div>

<div>
          {data.contact && (
            <>
              <h2 className="text-lg font-semibold text-gray-700 mb-3 border-b border-purple-200 pb-1">Bill To</h2>
              <div className="space-y-1">
                <p className="font-medium">{data.contact.name}</p>
                {data.contact.address && <p className="text-gray-600">{data.contact.address}</p>}
                {data.contact.email && <p className="text-gray-600">{data.contact.email}</p>}
                {data.contact.phone && <p className="text-gray-600">{data.contact.phone}</p>}
              </div>
            </>
          )}
        </div>
      </div>

{/* Company Info */}
      {data.companyInfo && (
        <div className="mb-8 p-4 bg-purple-50 rounded-md">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">From</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="font-medium">{data.companyInfo.name}</p>
              <p className="text-gray-600">{data.companyInfo.address}</p>
            </div>
            <div>
              <p className="text-gray-600">{data.companyInfo.email}</p>
              <p className="text-gray-600">{data.companyInfo.phone}</p>
              {data.companyInfo.website && <p className="text-gray-600">{data.companyInfo.website}</p>}
            </div>
          </div>
        </div>
      )}

{/* Items */}
      <div className="mb-8">
        <h2 className="text-lg font-semibold text-gray-700 mb-3 border-b border-purple-200 pb-1">Invoice Items</h2>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-purple-100">
                <th className="py-3 px-4 text-left text-gray-700 font-semibold rounded-tl-md">Description</th>
                <th className="py-3 px-4 text-right text-gray-700 font-semibold">Quantity</th>
                <th className="py-3 px-4 text-right text-gray-700 font-semibold">Unit Price</th>
                <th className="py-3 px-4 text-right text-gray-700 font-semibold rounded-tr-md">Amount</th>
              </tr>
            </thead>
            <tbody>
              {data.items && data.items.length > 0 ? (
                data.items.map((item, index) => (
                  <tr key={index} className="border-b border-gray-200">
                    <td className="py-4 px-4 text-gray-800">{item.description}</td>
                    <td className="py-4 px-4 text-right text-gray-800">{item.quantity}</td>
                    <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(item.unitPrice)}</td>
                    <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(item.total)}</td>
                  </tr>
                ))
              ) : (
                <tr className="border-b border-gray-200">
                  <td className="py-4 px-4 text-gray-800">{data.description}</td>
                  <td className="py-4 px-4 text-right text-gray-800">1</td>
                  <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(data.amount)}</td>
                  <td className="py-4 px-4 text-right text-gray-800">{formatCurrency(data.amount)}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

{/* Summary */}
      <div className="flex justify-end mb-8">
        <div className="w-64 bg-purple-50 p-4 rounded-md">
          <div className="flex justify-between py-2 border-b border-purple-100">
            <span className="font-medium text-gray-700">Subtotal:</span>
            <span className="text-gray-800">{formatCurrency(calculateTotal())}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-purple-100">
            <span className="font-medium text-gray-700">Tax (0%):</span>
            <span className="text-gray-800">{formatCurrency(0)}</span>
          </div>
          <div className="flex justify-between py-3 font-semibold">
            <span className="text-gray-700">Total:</span>
            <span className="text-purple-600 text-xl">{formatCurrency(calculateTotal())}</span>
          </div>
        </div>
      </div>

{/* Payment Info */}
      {data.paymentInfo && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-gray-700 mb-3 border-b border-purple-200 pb-1">
            Payment Information
          </h2>
          <div className="bg-gray-50 p-4 rounded-md">
            <p className="text-gray-700">
              <span className="font-medium">Method:</span> {data.paymentInfo.method}
            </p>
            <p className="text-gray-700">{data.paymentInfo.details}</p>
          </div>
        </div>
      )}

{/* Notes & Terms */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        {data.notes && (
          <div>
            <h3 className="text-md font-semibold text-gray-700 mb-2 border-b border-purple-200 pb-1">Notes</h3>
            <p className="text-gray-600">{data.notes}</p>
          </div>
        )}

{data.terms && (
          <div>
            <h3 className="text-md font-semibold text-gray-700 mb-2 border-b border-purple-200 pb-1">
              Terms & Conditions
            </h3>
            <p className="text-gray-600">{data.terms}</p>
          </div>
        )}
      </div>

{/* Footer */}
      <div className="text-center bg-purple-600 text-white p-4 rounded-md">
        <p>Thank you for your business!</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/batch-export-dialog.tsx"
"use client"

import { useState } from "react"
import { FileText } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { toast } from "@/components/ui/use-toast"
import { Progress } from "@/components/ui/progress"

interface BatchExportDialogProps {
  isOpen: boolean
  onClose: () => void
  selectedItems: any[]
  onExport: (format: string, fields: string[]) => void
}

export function BatchExportDialog({ isOpen, onClose, selectedItems, onExport }: BatchExportDialogProps) {
  const [exportFormat, setExportFormat] = useState("pdf")
  const [selectedFields, setSelectedFields] = useState<string[]>([
    "id",
    "date",
    "type",
    "name",
    "description",
    "amount",
    "status",
    "category",
  ])
  const [isExporting, setIsExporting] = useState(false)
  const [progress, setProgress] = useState(0)

const availableFields = [
    { id: "id", label: "ID" },
    { id: "date", label: "Date" },
    { id: "type", label: "Type" },
    { id: "name", label: "Name" },
    { id: "description", label: "Description" },
    { id: "amount", label: "Amount" },
    { id: "status", label: "Status" },
    { id: "category", label: "Category" },
    { id: "contact", label: "Contact Information" },
    { id: "items", label: "Line Items" },
    { id: "notes", label: "Notes" },
  ]

const toggleField = (field: string) => {
    if (selectedFields.includes(field)) {
      setSelectedFields(selectedFields.filter((f) => f !== field))
    } else {
      setSelectedFields([...selectedFields, field])
    }
  }

const selectAllFields = () => {
    setSelectedFields(availableFields.map((field) => field.id))
  }

const deselectAllFields = () => {
    setSelectedFields([])
  }

const handleExport = async () => {
    if (selectedFields.length === 0) {
      toast({
        title: "No fields selected",
        description: "Please select at least one field to include in the export",
        variant: "destructive",
      })
      return
    }

setIsExporting(true)

// Simulate export progress
    let currentProgress = 0
    const interval = setInterval(() => {
      currentProgress += 10
      setProgress(currentProgress)

if (currentProgress >= 100) {
        clearInterval(interval)

// Simulate export completion
        setTimeout(() => {
          onExport(exportFormat, selectedFields)
          setIsExporting(false)
          onClose()

toast({
            title: "Export complete",
            description: `Successfully exported ${selectedItems.length} items as ${exportFormat.toUpperCase()}`,
          })
        }, 500)
      }
    }, 200)
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>Export {selectedItems.length} Items</DialogTitle>
          <DialogDescription>Choose export format and select which fields to include in the export.</DialogDescription>
        </DialogHeader>

<div className="py-4 space-y-6">
          {/* Export Format */}
          <div>
            <h3 className="text-sm font-medium mb-3">Export Format</h3>
            <RadioGroup
              value={exportFormat}
              onValueChange={setExportFormat}
              className="grid grid-cols-2 sm:grid-cols-4 gap-2"
            >
              <div className="flex items-center space-x-2 border rounded-md p-2">
                <RadioGroupItem value="pdf" id="format-pdf" />
                <Label htmlFor="format-pdf" className="flex items-center">
                  <FileText className="h-4 w-4 mr-2" />
                  PDF
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-md p-2">
                <RadioGroupItem value="csv" id="format-csv" />
                <Label htmlFor="format-csv" className="flex items-center">
                  <FileText className="h-4 w-4 mr-2" />
                  CSV
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-md p-2">
                <RadioGroupItem value="excel" id="format-excel" />
                <Label htmlFor="format-excel" className="flex items-center">
                  <FileText className="h-4 w-4 mr-2" />
                  Excel
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-md p-2">
                <RadioGroupItem value="json" id="format-json" />
                <Label htmlFor="format-json" className="flex items-center">
                  <FileText className="h-4 w-4 mr-2" />
                  JSON
                </Label>
              </div>
            </RadioGroup>
          </div>

{/* Field Selection */}
          <div>
            <div className="flex justify-between items-center mb-3">
              <h3 className="text-sm font-medium">Fields to Include</h3>
              <div className="flex space-x-2">
                <Button variant="outline" size="sm" onClick={selectAllFields}>
                  Select All
                </Button>
                <Button variant="outline" size="sm" onClick={deselectAllFields}>
                  Deselect All
                </Button>
              </div>
            </div>

<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
              {availableFields.map((field) => (
                <div key={field.id} className="flex items-center space-x-2 border rounded-md p-2">
                  <Checkbox
                    id={`field-${field.id}`}
                    checked={selectedFields.includes(field.id)}
                    onCheckedChange={() => toggleField(field.id)}
                  />
                  <Label htmlFor={`field-${field.id}`}>{field.label}</Label>
                </div>
              ))}
            </div>
          </div>

{/* Export Summary */}
          <div className="bg-muted/50 p-3 rounded-md">
            <p className="text-sm">
              Exporting <strong>{selectedItems.length}</strong> items as <strong>{exportFormat.toUpperCase()}</strong>{" "}
              with <strong>{selectedFields.length}</strong> fields.
            </p>
          </div>

{/* Progress */}
          {isExporting && (
            <div className="space-y-2">
              <Progress value={progress} className="h-2" />
              <p className="text-sm text-center text-muted-foreground">Exporting... {progress}%</p>
            </div>
          )}
        </div>

<DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={isExporting}>
            Cancel
          </Button>
          <Button onClick={handleExport} disabled={isExporting || selectedFields.length === 0}>
            {isExporting ? "Exporting..." : "Export"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-template-manager.tsx"
"use client"

import { useState } from "react"
import { Layout, Plus, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"
import { invoiceTemplates } from "./invoice-template-selector"

interface InvoiceTemplateManagerProps {
  currentTemplate: string
  onTemplateChange: (templateId: string) => void
}

export function InvoiceTemplateManager({ currentTemplate = "classic", onTemplateChange }: InvoiceTemplateManagerProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [activeTab, setActiveTab] = useState("browse")
  const [selectedTemplate, setSelectedTemplate] = useState(currentTemplate)

// For custom template creation
  const [customTemplate, setCustomTemplate] = useState({
    name: "",
    primaryColor: "#3b82f6",
    accentColor: "#dbeafe",
    fontFamily: "Inter, sans-serif",
    headerStyle: "standard",
    footerStyle: "standard",
  })

const handleCreateCustomTemplate = () => {
    if (!customTemplate.name) {
      toast({
        title: "Template name required",
        description: "Please provide a name for your custom template",
        variant: "destructive",
      })
      return
    }

// In a real app, this would save the custom template to storage
    toast({
      title: "Custom template created",
      description: `Template "${customTemplate.name}" has been created`,
    })

setActiveTab("browse")
  }

return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <Layout className="h-4 w-4" />
          Manage Templates
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[700px]">
        <DialogHeader>
          <DialogTitle>Invoice Templates</DialogTitle>
          <DialogDescription>Browse available templates or create your own custom template.</DialogDescription>
        </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid grid-cols-2 mb-4">
            <TabsTrigger value="browse">Browse Templates</TabsTrigger>
            <TabsTrigger value="create">Create Custom</TabsTrigger>
          </TabsList>

<TabsContent value="browse" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {invoiceTemplates.map((template) => (
                <div
                  key={template.id}
                  className={`relative border rounded-lg p-4 cursor-pointer transition-all ${
                    selectedTemplate === template.id
                      ? "border-primary ring-2 ring-primary/20"
                      : "border-border hover:border-primary/50"
                  }`}
                  onClick={() => setSelectedTemplate(template.id)}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className="font-medium">{template.name}</h3>
                      <p className="text-xs text-muted-foreground">{template.description}</p>
                    </div>
                  </div>

{selectedTemplate === template.id && (
                    <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-1">
                      <Settings className="h-3 w-3" />
                    </div>
                  )}
                </div>
              ))}

{/* Custom template placeholder */}
              <div
                className="border border-dashed rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer hover:border-primary/50 transition-all"
                onClick={() => setActiveTab("create")}
              >
                <Plus className="h-8 w-8 text-muted-foreground mb-2" />
                <p className="text-sm font-medium">Create Custom Template</p>
                <p className="text-xs text-muted-foreground">Design your own invoice template</p>
              </div>
            </div>
          </TabsContent>

<TabsContent value="create" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="template-name">Template Name</Label>
                  <Input
                    id="template-name"
                    value={customTemplate.name}
                    onChange={(e) => setCustomTemplate({ ...customTemplate, name: e.target.value })}
                    placeholder="My Custom Template"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="primary-color">Primary Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="primary-color"
                      type="color"
                      value={customTemplate.primaryColor}
                      onChange={(e) => setCustomTemplate({ ...customTemplate, primaryColor: e.target.value })}
                      className="w-12 h-10 p-1"
                    />
                    <Input
                      value={customTemplate.primaryColor}
                      onChange={(e) => setCustomTemplate({ ...customTemplate, primaryColor: e.target.value })}
                      className="flex-1"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="accent-color">Accent Color</Label>
                  <div className="flex gap-2">
                    <Input
                      id="accent-color"
                      type="color"
                      value={customTemplate.accentColor}
                      onChange={(e) => setCustomTemplate({ ...customTemplate, accentColor: e.target.value })}
                      className="w-12 h-10 p-1"
                    />
                    <Input
                      value={customTemplate.accentColor}
                      onChange={(e) => setCustomTemplate({ ...customTemplate, accentColor: e.target.value })}
                      className="flex-1"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="font-family">Font Family</Label>
                  <select
                    id="font-family"
                    value={customTemplate.fontFamily}
                    onChange={(e) => setCustomTemplate({ ...customTemplate, fontFamily: e.target.value })}
                    className="w-full p-2 border rounded-md"
                  >
                    <option value="Inter, sans-serif">Inter (Sans-serif)</option>
                    <option value="Georgia, serif">Georgia (Serif)</option>
                    <option value="Courier New, monospace">Courier New (Monospace)</option>
                    <option value="Arial, sans-serif">Arial (Sans-serif)</option>
                  </select>
                </div>
              </div>

<div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="header-style">Header Style</Label>
                  <select
                    id="header-style"
                    value={customTemplate.headerStyle}
                    onChange={(e) => setCustomTemplate({ ...customTemplate, headerStyle: e.target.value })}
                    className="w-full p-2 border rounded-md"
                  >
                    <option value="standard">Standard</option>
                    <option value="modern">Modern</option>
                    <option value="minimal">Minimal</option>
                    <option value="bold">Bold</option>
                  </select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="footer-style">Footer Style</Label>
                  <select
                    id="footer-style"
                    value={customTemplate.footerStyle}
                    onChange={(e) => setCustomTemplate({ ...customTemplate, footerStyle: e.target.value })}
                    className="w-full p-2 border rounded-md"
                  >
                    <option value="standard">Standard</option>
                    <option value="centered">Centered</option>
                    <option value="minimal">Minimal</option>
                    <option value="detailed">Detailed</option>
                  </select>
                </div>

<div className="border rounded-md p-4 bg-muted/30">
                  <h3 className="font-medium mb-2">Preview</h3>
                  <div
                    className="h-40 border rounded-md overflow-hidden"
                    style={{
                      backgroundColor: "white",
                      fontFamily: customTemplate.fontFamily.split(",")[0],
                    }}
                  >
                    <div className="p-3 text-white" style={{ backgroundColor: customTemplate.primaryColor }}>
                      <div className="flex justify-between">
                        <div className="font-bold">Your Company</div>
                        <div>INVOICE</div>
                      </div>
                    </div>
                    <div className="p-3">
                      <div className="text-sm mb-2">Invoice #INV-001</div>
                      <div
                        className="w-full h-4 mb-2 rounded"
                        style={{ backgroundColor: customTemplate.accentColor }}
                      ></div>
                      <div
                        className="w-3/4 h-4 mb-2 rounded"
                        style={{ backgroundColor: customTemplate.accentColor }}
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

<div className="flex justify-end space-x-2">
              <Button variant="outline" onClick={() => setActiveTab("browse")}>
                Cancel
              </Button>
              <Button onClick={handleCreateCustomTemplate}>Create Template</Button>
            </div>
          </TabsContent>
        </Tabs>

<DialogFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSave} disabled={activeTab === "create"}>
            Apply Template
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/batch-email-dialog.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { Progress } from "@/components/ui/progress"

interface BatchEmailDialogProps {
  isOpen: boolean
  onClose: () => void
  selectedItems: any[]
  onSendEmails: (recipients: string[], subject: string, message: string) => void
}

export function BatchEmailDialog({ isOpen, onClose, selectedItems, onSendEmails }: BatchEmailDialogProps) {
  const [recipients, setRecipients] = useState("")
  const [subject, setSubject] = useState(`Your Invoice${selectedItems.length > 1 ? "s" : ""}`)
  const [message, setMessage] = useState(
    `Dear Customer,\n\nPlease find attached your invoice${selectedItems.length > 1 ? "s" : ""} as requested.\n\nThank you for your business.\n\nBest regards,\nYour Company`,
  )
  const [isSending, setIsSending] = useState(false)
  const [progress, setProgress] = useState(0)

const validateEmail = (email: string) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
  }

const handleSend = async () => {
    const emailList = recipients
      .split(",")
      .map((email) => email.trim())
      .filter((email) => email)

// Validate emails
    const invalidEmails = emailList.filter((email) => !validateEmail(email))
    if (invalidEmails.length > 0) {
      toast({
        title: "Invalid email addresses",
        description: `The following emails are invalid: ${invalidEmails.join(", ")}`,
        variant: "destructive",
      })
      return
    }

if (emailList.length === 0) {
      toast({
        title: "No recipients",
        description: "Please enter at least one email address",
        variant: "destructive",
      })
      return
    }

setIsSending(true)

// Simulate sending progress
    let currentProgress = 0
    const interval = setInterval(() => {
      currentProgress += 10
      setProgress(currentProgress)

if (currentProgress >= 100) {
        clearInterval(interval)

// Simulate sending completion
        setTimeout(() => {
          onSendEmails(emailList, subject, message)
          setIsSending(false)
          onClose()

toast({
            title: "Emails sent successfully",
            description: `${selectedItems.length} invoice${selectedItems.length > 1 ? "s" : ""} sent to ${emailList.length} recipient${emailList.length > 1 ? "s" : ""}`,
          })

// Reset form
          setRecipients("")
          setSubject(`Your Invoice${selectedItems.length > 1 ? "s" : ""}`)
          setMessage(
            `Dear Customer,\n\nPlease find attached your invoice${selectedItems.length > 1 ? "s" : ""} as requested.\n\nThank you for your business.\n\nBest regards,\nYour Company`,
          )
        }, 500)
      }
    }, 200)
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>
            Email {selectedItems.length} Invoice{selectedItems.length > 1 ? "s" : ""}
          </DialogTitle>
          <DialogDescription>
            Send the selected invoice{selectedItems.length > 1 ? "s" : ""} to one or more recipients.
          </DialogDescription>
        </DialogHeader>

<div className="py-4 space-y-4">
          <div className="space-y-2">
            <Label htmlFor="recipients">Recipients</Label>
            <Input
              id="recipients"
              placeholder="email@example.com, another@example.com"
              value={recipients}
              onChange={(e) => setRecipients(e.target.value)}
              disabled={isSending}
            />
            <p className="text-xs text-muted-foreground">Separate multiple email addresses with commas</p>
          </div>

<div className="space-y-2">
            <Label htmlFor="subject">Subject</Label>
            <Input id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} disabled={isSending} />
          </div>

<div className="space-y-2">
            <Label htmlFor="message">Message</Label>
            <Textarea
              id="message"
              rows={6}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              disabled={isSending}
            />
          </div>

<div className="bg-muted/50 p-3 rounded-md">
            <p className="text-sm">
              Sending <strong>{selectedItems.length}</strong> invoice{selectedItems.length > 1 ? "s" : ""} as PDF
              attachment{selectedItems.length > 1 ? "s" : ""}.
            </p>
          </div>

{/* Progress */}
          {isSending && (
            <div className="space-y-2">
              <Progress value={progress} className="h-2" />
              <p className="text-sm text-center text-muted-foreground">Sending... {progress}%</p>
            </div>
          )}
        </div>

<DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={isSending}>
            Cancel
          </Button>
          <Button onClick={handleSend} disabled={isSending || !recipients.trim()}>
            {isSending ? "Sending..." : "Send"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/batch-export.tsx"
"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"
import { Download, FileSpreadsheet, FileText, FileCog, Mail, Printer, CheckSquare, Square, Loader2 } from "lucide-react"

interface Transaction {
  id: string
  type: string
  name: string
  amount: number
  date: string
  status: string
  category: string
  contact: string
  email?: string
  notes?: string
}

interface BatchExportProps {
  transactions: Transaction[]
  selectedIds: string[]
  onSelectAll: () => void
  onClearSelection: () => void
  isAllSelected: boolean
}

export function BatchExport({
  transactions,
  selectedIds,
  onSelectAll,
  onClearSelection,
  isAllSelected,
}: BatchExportProps) {
  const [open, setOpen] = useState(false)
  const [exportFormat, setExportFormat] = useState("pdf")
  const [isExporting, setIsExporting] = useState(false)
  const [includeFields, setIncludeFields] = useState({
    id: true,
    type: true,
    name: true,
    amount: true,
    date: true,
    status: true,
    category: true,
    contact: true,
    email: true,
    notes: true,
  })

const selectedTransactions = transactions.filter((t) => selectedIds.includes(t.id))

const handleExport = async () => {
    setIsExporting(true)

// Simulate export process
    await new Promise((resolve) => setTimeout(resolve, 1500))

// Show success message
    toast({
      title: "Export successful",
      description: `${selectedIds.length} invoices exported as ${exportFormat.toUpperCase()}`,
    })

setIsExporting(false)
    setOpen(false)
  }

const toggleField = (field: keyof typeof includeFields) => {
    setIncludeFields((prev) => ({
      ...prev,
      [field]: !prev[field],
    }))
  }

return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between bg-muted/50 p-2 rounded-md">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" className="h-8" onClick={isAllSelected ? onClearSelection : onSelectAll}>
            {isAllSelected ? <CheckSquare className="h-4 w-4 mr-1" /> : <Square className="h-4 w-4 mr-1" />}
            {isAllSelected ? "Deselect All" : "Select All"}
          </Button>
          <span className="text-sm text-muted-foreground">
            {selectedIds.length} {selectedIds.length === 1 ? "item" : "items"} selected
          </span>
        </div>

<div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            className="h-8"
            onClick={() => setOpen(true)}
            disabled={selectedIds.length === 0}
          >
            <Download className="h-4 w-4 mr-1" />
            Batch Export
          </Button>
          <Button variant="outline" size="sm" className="h-8" disabled={selectedIds.length === 0}>
            <Mail className="h-4 w-4 mr-1" />
            Email Selected
          </Button>
          <Button variant="outline" size="sm" className="h-8" disabled={selectedIds.length === 0}>
            <Printer className="h-4 w-4 mr-1" />
            Print Selected
          </Button>
        </div>
      </div>

<Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Batch Export</DialogTitle>
            <DialogDescription>
              Export {selectedIds.length} {selectedIds.length === 1 ? "invoice" : "invoices"} in your preferred format.
            </DialogDescription>
          </DialogHeader>

<div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="export-format">Export Format</Label>
              <Select value={exportFormat} onValueChange={setExportFormat}>
                <SelectTrigger id="export-format">
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pdf">
                    <div className="flex items-center">
                      <FileText className="h-4 w-4 mr-2" />
                      <span>PDF Documents</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="csv">
                    <div className="flex items-center">
                      <FileSpreadsheet className="h-4 w-4 mr-2" />
                      <span>CSV Spreadsheet</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="xlsx">
                    <div className="flex items-center">
                      <FileSpreadsheet className="h-4 w-4 mr-2" />
                      <span>Excel Spreadsheet</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="json">
                    <div className="flex items-center">
                      <FileCog className="h-4 w-4 mr-2" />
                      <span>JSON Data</span>
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="grid gap-2">
              <Label>Include Fields</Label>
              <div className="grid grid-cols-2 gap-2">
                {Object.entries(includeFields).map(([field, included]) => (
                  <div key={field} className="flex items-center space-x-2">
                    <Checkbox
                      id={`field-${field}`}
                      checked={included}
                      onCheckedChange={() => toggleField(field as keyof typeof includeFields)}
                    />
                    <Label htmlFor={`field-${field}`} className="capitalize">
                      {field}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleExport} disabled={isExporting}>
              {isExporting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Exporting...
                </>
              ) : (
                <>
                  <Download className="mr-2 h-4 w-4" />
                  Export {selectedIds.length} {selectedIds.length === 1 ? "Invoice" : "Invoices"}
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/invoice-preview.tsx"
"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"
import { Eye, Download, Printer, Mail, Copy } from "lucide-react"

interface Transaction {
  id: string
  type: string
  name: string
  amount: number
  date: string
  status: string
  category: string
  contact: string
  email?: string
  notes?: string
}

interface InvoicePreviewProps {
  transaction: Transaction
  templateId: string
}

export function InvoicePreview({ transaction, templateId }: InvoicePreviewProps) {
  const [isLoading, setIsLoading] = useState(false)

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

// Simulate download process
    setTimeout(() => {
      setIsLoading(false)
      toast({
        title: "Invoice downloaded",
        description: `Invoice #${transaction.id} has been downloaded as PDF`,
      })
    }, 1500)
  }

const handlePrint = () => {
    toast({
      title: "Print dialog opened",
      description: "The print dialog has been opened in a new window",
    })
  }

const handleEmail = () => {
    toast({
      title: "Email dialog opened",
      description: "You can now send this invoice via email",
    })
  }

const handleCopyLink = () => {
    // Simulate copying a link
    toast({
      title: "Link copied",
      description: "Invoice link has been copied to clipboard",
    })
  }

// Render different templates based on templateId
  const renderTemplate = () => {
    switch (templateId) {
      case "modern":
        return <ModernTemplate transaction={transaction} />
      case "creative":
        return <CreativeTemplate transaction={transaction} />
      case "corporate":
        return <CorporateTemplate transaction={transaction} />
      case "nonprofit":
        return <NonprofitTemplate transaction={transaction} />
      case "classic":
      default:
        return <ClassicTemplate transaction={transaction} />
    }
  }

return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon">
          <Eye className="h-4 w-4" />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[800px]">
        <DialogHeader>
          <DialogTitle>Invoice Preview</DialogTitle>
          <DialogDescription>
            Preview invoice #{transaction.id} using the {templateId} template
          </DialogDescription>
        </DialogHeader>

<div className="my-4 border rounded-md p-4 bg-white">{renderTemplate()}</div>

<DialogFooter className="flex-col sm:flex-row gap-2">
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={handleCopyLink}>
              <Copy className="h-4 w-4 mr-2" />
              Copy Link
            </Button>
            <Button variant="outline" size="sm" onClick={handleEmail}>
              <Mail className="h-4 w-4 mr-2" />
              Email
            </Button>
            <Button variant="outline" size="sm" onClick={handlePrint}>
              <Printer className="h-4 w-4 mr-2" />
              Print
            </Button>
          </div>
          <Button size="sm" onClick={handleDownload} disabled={isLoading}>
            <Download className="h-4 w-4 mr-2" />
            {isLoading ? "Downloading..." : "Download PDF"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

// Template Components
function ClassicTemplate({ transaction }: { transaction: Transaction }) {
  return (
    <div className="font-serif">
      <div className="flex justify-between items-start mb-8">
        <div>
          <h1 className="text-2xl font-bold">INVOICE</h1>
          <p className="text-sm text-gray-600">#{transaction.id}</p>
        </div>
        <div className="text-right">
          <p className="font-bold">Your Organization Name</p>
          <p className="text-sm">123 Business Street</p>
          <p className="text-sm">City, State ZIP</p>
          <p className="text-sm">contact@example.com</p>
        </div>
      </div>

<div className="flex justify-between mb-8">
        <div>
          <h2 className="font-bold mb-2">Bill To:</h2>
          <p>{transaction.contact}</p>
          <p>{transaction.email || "No email provided"}</p>
        </div>
        <div className="text-right">
          <h2 className="font-bold mb-2">Invoice Details:</h2>
          <p>
            <span className="font-semibold">Date:</span> {transaction.date}
          </p>
          <p>
            <span className="font-semibold">Status:</span> {transaction.status}
          </p>
          <p>
            <span className="font-semibold">Category:</span> {transaction.category}
          </p>
        </div>
      </div>

<table className="w-full mb-8 border-collapse">
        <thead>
          <tr className="border-b-2 border-gray-300">
            <th className="text-left py-2">Description</th>
            <th className="text-left py-2">Type</th>
            <th className="text-right py-2">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr className="border-b border-gray-200">
            <td className="py-3">{transaction.name}</td>
            <td className="py-3">{transaction.type}</td>
            <td className="py-3 text-right">${transaction.amount.toFixed(2)}</td>
          </tr>
          <tr className="border-b border-gray-200">
            <td className="py-3 font-bold text-right" colSpan={2}>
              Total:
            </td>
            <td className="py-3 text-right font-bold">${transaction.amount.toFixed(2)}</td>
          </tr>
        </tbody>
      </table>

<div className="border-t-2 border-gray-300 pt-4">
        <h2 className="font-bold mb-2">Notes:</h2>
        <p className="text-sm">{transaction.notes || "No additional notes"}</p>
        <p className="mt-4 text-sm">Thank you for your business!</p>
      </div>
    </div>
  )
}

function ModernTemplate({ transaction }: { transaction: Transaction }) {
  return (
    <div className="font-sans bg-white">
      <div className="bg-blue-600 text-white p-6 rounded-t-md">
        <div className="flex justify-between items-center">
          <h1 className="text-3xl font-light">INVOICE</h1>
          <div>
            <p className="text-sm opacity-80">Your Organization</p>
            <p className="text-2xl font-bold">#{transaction.id}</p>
          </div>
        </div>
      </div>

<div className="p-6">
        <div className="grid grid-cols-2 gap-8 mb-8">
          <div>
            <h2 className="text-sm uppercase text-gray-500 mb-2">Bill To</h2>
            <p className="font-medium text-lg">{transaction.contact}</p>
            <p className="text-gray-600">{transaction.email || "No email provided"}</p>
          </div>
          <div>
            <h2 className="text-sm uppercase text-gray-500 mb-2">Details</h2>
            <div className="grid grid-cols-2 gap-2">
              <p className="text-gray-600">Date:</p>
              <p>{transaction.date}</p>
              <p className="text-gray-600">Status:</p>
              <p>{transaction.status}</p>
              <p className="text-gray-600">Category:</p>
              <p>{transaction.category}</p>
            </div>
          </div>
        </div>

<div className="mb-8">
          <div className="bg-gray-100 p-3 rounded-t-md grid grid-cols-3">
            <h3 className="font-medium">Description</h3>
            <h3 className="font-medium">Type</h3>
            <h3 className="font-medium text-right">Amount</h3>
          </div>
          <div className="p-3 border-b grid grid-cols-3">
            <p>{transaction.name}</p>
            <p>{transaction.type}</p>
            <p className="text-right">${transaction.amount.toFixed(2)}</p>
          </div>
          <div className="p-3 flex justify-end">
            <div className="w-1/3">
              <div className="flex justify-between font-medium">
                <p>Total:</p>
                <p>${transaction.amount.toFixed(2)}</p>
              </div>
            </div>
          </div>
        </div>

<div className="bg-gray-50 p-4 rounded-md">
          <h2 className="font-medium mb-2">Notes:</h2>
          <p className="text-gray-600">{transaction.notes || "No additional notes"}</p>
        </div>

<div className="mt-8 text-center text-gray-500 text-sm">
          <p>Thank you for your business!</p>
          <p>contact@example.com | (123) 456-7890</p>
        </div>
      </div>
    </div>
  )
}

function CreativeTemplate({ transaction }: { transaction: Transaction }) {
  return (
    <div className="font-sans bg-gradient-to-br from-purple-50 to-blue-50 p-6 rounded-md">
      <div className="flex justify-between items-start mb-8">
        <div>
          <h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-600">
            INVOICE
          </h1>
          <p className="text-gray-600">#{transaction.id}</p>
        </div>
        <div className="bg-white p-4 rounded-md shadow-sm">
          <p className="font-bold text-purple-600">Your Organization</p>
          <p className="text-sm">creative@example.com</p>
        </div>
      </div>

<div className="grid grid-cols-2 gap-8 mb-8">
        <div className="bg-white p-4 rounded-md shadow-sm">
          <h2 className="font-bold text-purple-600 mb-2">Bill To:</h2>
          <p className="text-lg">{transaction.contact}</p>
          <p className="text-gray-600">{transaction.email || "No email provided"}</p>
        </div>
        <div className="bg-white p-4 rounded-md shadow-sm">
          <h2 className="font-bold text-purple-600 mb-2">Invoice Details:</h2>
          <div className="grid grid-cols-2 gap-1">
            <p className="text-gray-600">Date:</p>
            <p>{transaction.date}</p>
            <p className="text-gray-600">Status:</p>
            <p>{transaction.status}</p>
            <p className="text-gray-600">Category:</p>
            <p>{transaction.category}</p>
          </div>
        </div>
      </div>

<div className="bg-white rounded-md overflow-hidden shadow-sm mb-8">
        <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-3 grid grid-cols-3">
          <h3>Description</h3>
          <h3>Type</h3>
          <h3 className="text-right">Amount</h3>
        </div>
        <div className="p-4 border-b grid grid-cols-3">
          <p>{transaction.name}</p>
          <p>{transaction.type}</p>
          <p className="text-right font-medium">${transaction.amount.toFixed(2)}</p>
        </div>
        <div className="p-4 bg-gray-50">
          <div className="flex justify-end">
            <div className="w-1/3">
              <div className="flex justify-between font-bold">
                <p>Total:</p>
                <p>${transaction.amount.toFixed(2)}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

<div className="bg-white p-4 rounded-md shadow-sm mb-8">
        <h2 className="font-bold text-purple-600 mb-2">Notes:</h2>
        <p>{transaction.notes || "No additional notes"}</p>
      </div>

<div className="text-center">
        <p className="text-gray-600">Thank you for your business!</p>
        <div className="mt-2 inline-block bg-gradient-to-r from-purple-600 to-blue-600 p-0.5 rounded-full">
          <div className="bg-white px-4 py-1 rounded-full">
            <p className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-600 font-bold">
              Your Creative Organization
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

function CorporateTemplate({ transaction }: { transaction: Transaction }) {
  return (
    <div className="font-sans">
      <div className="bg-gray-800 text-white p-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold">CORPORATE INVOICE</h1>
            <p className="text-sm opacity-80">Professional Financial Document</p>
          </div>
          <div className="text-right">
            <p className="text-sm opacity-80">Invoice Number</p>
            <p className="text-xl">{transaction.id}</p>
          </div>
        </div>
      </div>

<div className="p-6 border-l border-r border-b">
        <div className="flex justify-between mb-8">
          <div>
            <h2 className="text-gray-800 font-bold text-sm uppercase mb-2">From</h2>
            <p className="font-bold">Your Corporation, Inc.</p>
            <p>123 Corporate Plaza</p>
            <p>Business City, BZ 10001</p>
            <p>accounting@corporation.com</p>
          </div>
          <div className="text-right">
            <h2 className="text-gray-800 font-bold text-sm uppercase mb-2">To</h2>
            <p className="font-bold">{transaction.contact}</p>
            <p>{transaction.email || "No email provided"}</p>
          </div>
        </div>

<div className="mb-8">
          <div className="grid grid-cols-2 gap-4 mb-4">
            <div className="bg-gray-100 p-3">
              <h3 className="text-gray-800 font-bold text-sm uppercase mb-1">Invoice Date</h3>
              <p>{transaction.date}</p>
            </div>
            <div className="bg-gray-100 p-3">
              <h3 className="text-gray-800 font-bold text-sm uppercase mb-1">Status</h3>
              <p>{transaction.status}</p>
            </div>
          </div>
        </div>

<table className="w-full mb-8">
          <thead>
            <tr className="bg-gray-800 text-white">
              <th className="text-left p-3">Description</th>
              <th className="text-left p-3">Type</th>
              <th className="text-right p-3">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b">
              <td className="p-3">{transaction.name}</td>
              <td className="p-3">{transaction.type}</td>
              <td className="p-3 text-right">${transaction.amount.toFixed(2)}</td>
            </tr>
            <tr className="bg-gray-100">
              <td className="p-3 text-right font-bold" colSpan={2}>
                Total:
              </td>
              <td className="p-3 text-right font-bold">${transaction.amount.toFixed(2)}</td>
            </tr>
          </tbody>
        </table>

<div className="border-t pt-4">
          <h2 className="text-gray-800 font-bold text-sm uppercase mb-2">Notes</h2>
          <p>{transaction.notes || "No additional notes"}</p>

<div className="mt-8 text-center">
            <p className="text-sm text-gray-600">Thank you for your business</p>
            <p className="text-sm text-gray-600">Payment terms: Net 30 days</p>
          </div>
        </div>
      </div>
    </div>
  )
}

function NonprofitTemplate({ transaction }: { transaction: Transaction }) {
  return (
    <div className="font-sans">
      <div className="bg-green-600 text-white p-6 rounded-t-md">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold">DONATION RECEIPT</h1>
            <p className="text-sm opacity-80">Thank You For Your Support</p>
          </div>
          <div className="text-right">
            <p className="text-sm opacity-80">Receipt Number</p>
            <p className="text-xl">{transaction.id}</p>
          </div>
        </div>
      </div>

<div className="p-6 border-l border-r border-b rounded-b-md">
        <div className="mb-6 text-center bg-green-50 p-4 rounded-md">
          <h2 className="text-xl font-bold text-green-800">Thank You For Your Generous Support!</h2>
          <p className="text-green-700">Your contribution helps us make a difference.</p>
        </div>

<div className="grid grid-cols-2 gap-6 mb-8">
          <div>
            <h2 className="font-bold text-green-800 mb-2">Donor Information:</h2>
            <p className="font-medium">{transaction.contact}</p>
            <p>{transaction.email || "No email provided"}</p>
          </div>
          <div>
            <h2 className="font-bold text-green-800 mb-2">Donation Details:</h2>
            <div className="grid grid-cols-2 gap-1">
              <p className="text-gray-600">Date:</p>
              <p>{transaction.date}</p>
              <p className="text-gray-600">Category:</p>
              <p>{transaction.category}</p>
              <p className="text-gray-600">Status:</p>
              <p>{transaction.status}</p>
            </div>
          </div>
        </div>

<div className="bg-green-50 p-4 rounded-md mb-8">
          <h2 className="font-bold text-green-800 mb-2">Donation Summary:</h2>
          <div className="flex justify-between items-center border-b border-green-200 py-3">
            <div>
              <p className="font-medium">{transaction.name}</p>
              <p className="text-sm text-gray-600">{transaction.type}</p>
            </div>
            <p className="text-xl font-bold">${transaction.amount.toFixed(2)}</p>
          </div>
          <div className="flex justify-between items-center pt-3">
            <p className="font-bold">Total Donation:</p>
            <p className="text-xl font-bold">${transaction.amount.toFixed(2)}</p>
          </div>
        </div>

<div className="border-t border-green-200 pt-4">
          <h2 className="font-bold text-green-800 mb-2">Notes:</h2>
          <p>{transaction.notes || "No additional notes"}</p>

<div className="mt-8 text-center">
            <p className="text-green-800 font-medium">Your Nonprofit Organization Name</p>
            <p className="text-sm text-gray-600">123 Charity Lane, Giving City, GC 10001</p>
            <p className="text-sm text-gray-600">Tax ID: 12-3456789</p>
            <div className="mt-4 p-3 bg-green-50 rounded-md">
              <p className="text-sm">
                This letter serves as your official receipt. Your donation may be tax-deductible to the extent allowed
                by law. No goods or services were provided in exchange for this contribution.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/tracking-system-enhancements.tsx"
"use client"

import { useState } from "react"
import { BatchExport } from "./batch-export"
import { InvoiceTemplates } from "./invoice-templates"
import { InvoicePreview } from "./invoice-preview"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Download, Settings, Mail, Printer } from "lucide-react"

// Sample data for demonstration
const sampleTransactions = [
  {
    id: "INV-2023-001",
    type: "Donation",
    name: "Monthly Support",
    amount: 250.0,
    date: "2023-05-15",
    status: "Completed",
    category: "Regular Donor",
    contact: "John Smith",
    email: "john@example.com",
    notes: "Recurring monthly donation",
  },
  {
    id: "INV-2023-002",
    type: "Product",
    name: "Leadership Book",
    amount: 35.99,
    date: "2023-05-18",
    status: "Shipped",
    category: "Books",
    contact: "Sarah Johnson",
    email: "sarah@example.com",
  },
  {
    id: "INV-2023-003",
    type: "Service",
    name: "Consulting Session",
    amount: 150.0,
    date: "2023-05-20",
    status: "Scheduled",
    category: "Consulting",
    contact: "Michael Brown",
    email: "michael@example.com",
    notes: "2-hour virtual session",
  },
  {
    id: "INV-2023-004",
    type: "Donation",
    name: "Project Funding",
    amount: 1000.0,
    date: "2023-05-22",
    status: "Completed",
    category: "Project Support",
    contact: "Corporate Partner Inc.",
    email: "partner@corp.com",
    notes: "Designated for education initiative",
  },
  {
    id: "INV-2023-005",
    type: "Product",
    name: "Merchandise Bundle",
    amount: 85.5,
    date: "2023-05-25",
    status: "Processing",
    category: "Merchandise",
    contact: "Emily Wilson",
    email: "emily@example.com",
  },
]

export function TrackingSystemEnhancements() {
  const [selectedTemplate, setSelectedTemplate] = useState("classic")
  const [selectedIds, setSelectedIds] = useState<string[]>([])

const isAllSelected = selectedIds.length === sampleTransactions.length

const handleSelectAll = () => {
    if (isAllSelected) {
      setSelectedIds([])
    } else {
      setSelectedIds(sampleTransactions.map((t) => t.id))
    }
  }

const handleSelectItem = (id: string) => {
    if (selectedIds.includes(id)) {
      setSelectedIds(selectedIds.filter((itemId) => itemId !== id))
    } else {
      setSelectedIds([...selectedIds, id])
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Transaction Management</h2>
        <div className="flex gap-2">
          <InvoiceTemplates onSelectTemplate={setSelectedTemplate} selectedTemplate={selectedTemplate} />
          <Button variant="outline">
            <Settings className="h-4 w-4 mr-2" />
            Settings
          </Button>
        </div>
      </div>

<BatchExport
        transactions={sampleTransactions}
        selectedIds={selectedIds}
        onSelectAll={handleSelectAll}
        onClearSelection={() => setSelectedIds([])}
        isAllSelected={isAllSelected}
      />

<div className="rounded-md border">
        <div className="bg-muted/50 p-3 flex items-center">
          <div className="w-8">
            <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="Select all" />
          </div>
          <div className="flex-1 grid grid-cols-6 gap-2 font-medium">
            <div>ID</div>
            <div>Type</div>
            <div>Name</div>
            <div>Amount</div>
            <div>Date</div>
            <div>Actions</div>
          </div>
        </div>

{sampleTransactions.map((transaction) => (
          <div key={transaction.id} className="p-3 flex items-center border-t">
            <div className="w-8">
              <Checkbox
                checked={selectedIds.includes(transaction.id)}
                onCheckedChange={() => handleSelectItem(transaction.id)}
                aria-label={`Select invoice ${transaction.id}`}
              />
            </div>
            <div className="flex-1 grid grid-cols-6 gap-2">
              <div>{transaction.id}</div>
              <div>{transaction.type}</div>
              <div>{transaction.name}</div>
              <div>${transaction.amount.toFixed(2)}</div>
              <div>{transaction.date}</div>
              <div className="flex gap-1">
                <InvoicePreview transaction={transaction} templateId={selectedTemplate} />
                <Button variant="ghost" size="icon">
                  <Download className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <Mail className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <Printer className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>

<div className="bg-muted/30 rounded-md p-4">
        <h3 className="font-medium mb-2">Quick Guide: Batch Operations</h3>
        <ul className="text-sm space-y-1 text-muted-foreground">
          <li>• Select multiple invoices using the checkboxes</li>
          <li>• Use the batch actions menu to perform operations on all selected items</li>
          <li>• Change invoice template designs using the "Invoice Templates" button</li>
          <li>• Preview any invoice by clicking the eye icon</li>
        </ul>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tracking-system-demo/page.tsx"
"use client"

import { TrackingSystemEnhancements } from "@/components/tracking/tracking-system-enhancements"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TrackingSystemDemoPage() {
  return (
    <div className="container mx-auto py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Enhanced Tracking System</h1>
        <p className="text-muted-foreground">Manage transactions with batch operations and custom invoice templates</p>
      </div>

<Tabs defaultValue="transactions">
        <TabsList className="mb-4">
          <TabsTrigger value="transactions">Transactions</TabsTrigger>
          <TabsTrigger value="templates">Invoice Templates</TabsTrigger>
          <TabsTrigger value="batch">Batch Operations</TabsTrigger>
        </TabsList>

<TabsContent value="transactions">
          <Card>
            <CardHeader>
              <CardTitle>Transaction Management</CardTitle>
              <CardDescription>View, export, and manage all your transactions with enhanced tools</CardDescription>
            </CardHeader>
            <CardContent>
              <TrackingSystemEnhancements />
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="templates">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Invoice Templates</CardTitle>
                <CardDescription>Choose from multiple professional invoice designs</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p>
                    The custom invoice templates system allows you to select from various professionally designed
                    templates or create your own custom designs.
                  </p>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Classic template - Traditional professional design</li>
                    <li>Modern template - Clean, contemporary aesthetic</li>
                    <li>Creative template - Unique design with artistic elements</li>
                    <li>Corporate template - Formal business style</li>
                    <li>Nonprofit template - Donation receipt focused</li>
                  </ul>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Custom Template Designer</CardTitle>
                <CardDescription>Create your own invoice templates with HTML and CSS</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p>
                    For advanced users, the system allows creating completely custom invoice templates using HTML and
                    CSS. Your templates can include:
                  </p>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Custom branding elements and logos</li>
                    <li>Specialized layouts for different transaction types</li>
                    <li>Dynamic content based on transaction properties</li>
                    <li>Conditional formatting and styling</li>
                    <li>Responsive designs for different viewing contexts</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="batch">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Batch Export</CardTitle>
                <CardDescription>Export multiple invoices at once in various formats</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p>
                    The batch export functionality allows you to select multiple invoices and export them all at once in
                    your preferred format.
                  </p>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>PDF - Professional documents for sharing</li>
                    <li>CSV - Spreadsheet format for data analysis</li>
                    <li>Excel - Native spreadsheet format with formatting</li>
                    <li>JSON - Structured data for technical applications</li>
                  </ul>
                  <p className="text-sm text-muted-foreground mt-4">
                    You can also customize which fields to include in your exports, making it easy to create reports
                    tailored to specific needs.
                  </p>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Batch Email</CardTitle>
                <CardDescription>Send multiple invoices to recipients in one operation</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p>
                    With batch email functionality, you can send multiple invoices to their respective recipients in a
                    single operation.
                  </p>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Personalized emails for each recipient</li>
                    <li>Customizable email templates</li>
                    <li>Attach invoices as PDF documents</li>
                    <li>Include payment links and instructions</li>
                    <li>Schedule emails for future delivery</li>
                  </ul>
                  <p className="text-sm text-muted-foreground mt-4">
                    This feature saves significant time when sending monthly invoices or donation receipts to multiple
                    contacts.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/demo-link.tsx"
"use client"

import { Button } from "@/components/ui/button"
import Link from "next/link"
import { ExternalLink } from "lucide-react"

export function DemoLink() {
  return (
    <div className="flex justify-end mb-4">
      <Button variant="outline" asChild>
        <Link href="/tracking-system-demo">
          <ExternalLink className="h-4 w-4 mr-2" />
          View Enhanced Features Demo
        </Link>
      </Button>
    </div>
  )
}
[V0_FILE]png:file="public/creative-invoice-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-invoice-template-IkoxaWDHBoj2BKYaNGyT51Qk2wCGED.png"
[V0_FILE]png:file="public/corporate-invoice-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/corporate-invoice-template-hii8qGLsDlKvrf475TsjN2jFWGmthm.png"
[V0_FILE]png:file="public/classic-invoice-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-invoice-template-WvIFLLyuRR9IPx1kTlE0vPqyeH3sFq.png"
[V0_FILE]typescriptreact:file="components/tracking/invoice-templates.tsx"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Check, Edit, Plus, Trash } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"

export type InvoiceTemplate = "classic" | "modern" | "minimal" | "professional" | "branded"

type TemplateOption = {
  id: InvoiceTemplate
  name: string
  description: string
  image: string
}

const defaultTemplates: TemplateOption[] = [
  {
    id: "classic",
    name: "Classic",
    description: "Traditional professional invoice layout",
    image: "/classic-invoice-template.png",
  },
  {
    id: "modern",
    name: "Modern",
    description: "Clean, contemporary design with emphasis on clarity",
    image: "/corporate-invoice-template.png",
  },
  {
    id: "minimal",
    name: "Minimal",
    description: "Simplified design focusing on essential information",
    image: "/creative-invoice-template.png",
  },
  {
    id: "professional",
    name: "Professional",
    description: "Formal business style with detailed sections",
    image: "/classic-invoice-template.png",
  },
  {
    id: "branded",
    name: "Branded",
    description: "Customizable template with prominent branding",
    image: "/corporate-invoice-template.png",
  },
]

type CustomTemplate = {
  id: string
  name: string
  description: string
  html: string
  css: string
}

interface InvoiceTemplatesProps {
  selectedTemplate?: InvoiceTemplate
  onSelectTemplate?: (template: InvoiceTemplate) => void
  showPreview?: boolean
  previewData?: any
}

export function InvoiceTemplates({
  selectedTemplate = "classic",
  onSelectTemplate,
  showPreview = true,
  previewData,
}: InvoiceTemplatesProps) {
  const [templates, setTemplates] = useState<TemplateOption[]>(defaultTemplates)
  const [customTemplates, setCustomTemplates] = useState<CustomTemplate[]>([])
  const [newTemplate, setNewTemplate] = useState<CustomTemplate>({
    id: "",
    name: "",
    description: "",
    html: "",
    css: "",
  })
  const [isCreatingTemplate, setIsCreatingTemplate] = useState(false)
  const [isEditingTemplate, setIsEditingTemplate] = useState<string | null>(null)

const handleSelectTemplate = (template: InvoiceTemplate) => {
    if (onSelectTemplate) {
      onSelectTemplate(template)
    }
  }

const handleSaveCustomTemplate = () => {
    if (!newTemplate.name) {
      toast({
        title: "Template name required",
        description: "Please provide a name for your custom template",
        variant: "destructive",
      })
      return
    }

const id = `custom-${Date.now()}`
    const template = { ...newTemplate, id }

setCustomTemplates([...customTemplates, template])
    setNewTemplate({
      id: "",
      name: "",
      description: "",
      html: "",
      css: "",
    })

setIsCreatingTemplate(false)

toast({
      title: "Template created",
      description: "Your custom template has been saved",
    })
  }

const handleUpdateCustomTemplate = () => {
    if (!isEditingTemplate) return

setCustomTemplates(customTemplates.map((template) => (template.id === isEditingTemplate ? newTemplate : template)))

setIsEditingTemplate(null)
    setNewTemplate({
      id: "",
      name: "",
      description: "",
      html: "",
      css: "",
    })

toast({
      title: "Template updated",
      description: "Your custom template has been updated",
    })
  }

const handleDeleteCustomTemplate = (id: string) => {
    setCustomTemplates(customTemplates.filter((template) => template.id !== id))

toast({
      title: "Template deleted",
      description: "The custom template has been removed",
    })
  }

const handleEditCustomTemplate = (template: CustomTemplate) => {
    setNewTemplate(template)
    setIsEditingTemplate(template.id)
  }

return (
    <div className="space-y-6">
      <Tabs defaultValue="gallery">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="gallery">Template Gallery</TabsTrigger>
          <TabsTrigger value="custom">Custom Templates</TabsTrigger>
        </TabsList>

<TabsContent value="gallery" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {templates.map((template) => (
              <Card
                key={template.id}
                className={`cursor-pointer transition-all hover:shadow-md ${selectedTemplate === template.id ? "ring-2 ring-primary" : ""}`}
                onClick={() => handleSelectTemplate(template.id)}
              >
                <CardHeader className="p-4">
                  <CardTitle className="text-lg flex items-center justify-between">
                    {template.name}
                    {selectedTemplate === template.id && <Check className="h-5 w-5 text-primary" />}
                  </CardTitle>
                  <CardDescription>{template.description}</CardDescription>
                </CardHeader>
                <CardContent className="p-0">
                  <div className="relative h-40 w-full overflow-hidden">
                    <Image
                      src={template.image || "/placeholder.svg"}
                      alt={template.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                </CardContent>
                <CardFooter className="p-4">
                  <Button
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={(e) => {
                      e.stopPropagation()
                      handleSelectTemplate(template.id)
                    }}
                  >
                    {selectedTemplate === template.id ? "Selected" : "Select Template"}
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="custom" className="space-y-4">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-medium">Your Custom Templates</h3>
            <Dialog open={isCreatingTemplate} onOpenChange={setIsCreatingTemplate}>
              <DialogTrigger asChild>
                <Button size="sm">
                  <Plus className="h-4 w-4 mr-2" />
                  Create Template
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-3xl">
                <DialogHeader>
                  <DialogTitle>Create Custom Invoice Template</DialogTitle>
                  <DialogDescription>Design your own invoice template with HTML and CSS</DialogDescription>
                </DialogHeader>

<div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="name" className="text-right">
                      Name
                    </Label>
                    <Input
                      id="name"
                      value={newTemplate.name}
                      onChange={(e) => setNewTemplate({ ...newTemplate, name: e.target.value })}
                      className="col-span-3"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="description" className="text-right">
                      Description
                    </Label>
                    <Input
                      id="description"
                      value={newTemplate.description}
                      onChange={(e) => setNewTemplate({ ...newTemplate, description: e.target.value })}
                      className="col-span-3"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-start gap-4">
                    <Label htmlFor="html" className="text-right pt-2">
                      HTML
                    </Label>
                    <Textarea
                      id="html"
                      value={newTemplate.html}
                      onChange={(e) => setNewTemplate({ ...newTemplate, html: e.target.value })}
                      className="col-span-3 font-mono text-sm h-40"
                      placeholder="<div class='invoice'>...</div>"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-start gap-4">
                    <Label htmlFor="css" className="text-right pt-2">
                      CSS
                    </Label>
                    <Textarea
                      id="css"
                      value={newTemplate.css}
                      onChange={(e) => setNewTemplate({ ...newTemplate, css: e.target.value })}
                      className="col-span-3 font-mono text-sm h-40"
                      placeholder=".invoice { ... }"
                    />
                  </div>
                </div>

<DialogFooter>
                  <Button variant="outline" onClick={() => setIsCreatingTemplate(false)}>
                    Cancel
                  </Button>
                  <Button onClick={handleSaveCustomTemplate}>Save Template</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>

{customTemplates.length === 0 ? (
            <div className="text-center p-8 border rounded-lg bg-muted/20">
              <p className="text-muted-foreground">You haven't created any custom templates yet</p>
              <Button variant="outline" className="mt-4" onClick={() => setIsCreatingTemplate(true)}>
                <Plus className="h-4 w-4 mr-2" />
                Create Your First Template
              </Button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {customTemplates.map((template) => (
                <Card key={template.id}>
                  <CardHeader>
                    <CardTitle className="text-lg">{template.name}</CardTitle>
                    <CardDescription>{template.description}</CardDescription>
                  </CardHeader>
                  <CardFooter className="flex justify-between">
                    <div className="flex space-x-2">
                      <Button variant="outline" size="sm" onClick={() => handleEditCustomTemplate(template)}>
                        <Edit className="h-4 w-4 mr-2" />
                        Edit
                      </Button>
                      <Button variant="destructive" size="sm" onClick={() => handleDeleteCustomTemplate(template.id)}>
                        <Trash className="h-4 w-4 mr-2" />
                        Delete
                      </Button>
                    </div>
                    <Button
                      size="sm"
                      onClick={() => {
                        // Handle using custom template
                        toast({
                          title: "Custom template selected",
                          description: `Using ${template.name} template`,
                        })
                      }}
                    >
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          )}

{isEditingTemplate && (
            <Dialog open={!!isEditingTemplate} onOpenChange={(open) => !open && setIsEditingTemplate(null)}>
              <DialogContent className="max-w-3xl">
                <DialogHeader>
                  <DialogTitle>Edit Custom Template</DialogTitle>
                  <DialogDescription>Update your custom invoice template</DialogDescription>
                </DialogHeader>

<div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="edit-name" className="text-right">
                      Name
                    </Label>
                    <Input
                      id="edit-name"
                      value={newTemplate.name}
                      onChange={(e) => setNewTemplate({ ...newTemplate, name: e.target.value })}
                      className="col-span-3"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="edit-description" className="text-right">
                      Description
                    </Label>
                    <Input
                      id="edit-description"
                      value={newTemplate.description}
                      onChange={(e) => setNewTemplate({ ...newTemplate, description: e.target.value })}
                      className="col-span-3"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-start gap-4">
                    <Label htmlFor="edit-html" className="text-right pt-2">
                      HTML
                    </Label>
                    <Textarea
                      id="edit-html"
                      value={newTemplate.html}
                      onChange={(e) => setNewTemplate({ ...newTemplate, html: e.target.value })}
                      className="col-span-3 font-mono text-sm h-40"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-start gap-4">
                    <Label htmlFor="edit-css" className="text-right pt-2">
                      CSS
                    </Label>
                    <Textarea
                      id="edit-css"
                      value={newTemplate.css}
                      onChange={(e) => setNewTemplate({ ...newTemplate, css: e.target.value })}
                      className="col-span-3 font-mono text-sm h-40"
                    />
                  </div>
                </div>

<DialogFooter>
                  <Button variant="outline" onClick={() => setIsEditingTemplate(null)}>
                    Cancel
                  </Button>
                  <Button onClick={handleUpdateCustomTemplate}>Update Template</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          )}
        </TabsContent>
      </Tabs>

{showPreview && selectedTemplate && (
        <div className="mt-8 border rounded-lg p-4">
          <h3 className="text-lg font-medium mb-4">Template Preview</h3>
          <div className="bg-white rounded-lg shadow-lg p-6 max-w-4xl mx-auto">
            {/* This would be replaced with actual template preview rendering */}
            <div className="aspect-[8.5/11] bg-white border rounded-lg overflow-hidden">
              <Image
                src={templates.find((t) => t.id === selectedTemplate)?.image || "/classic-invoice-template.png"}
                alt="Invoice Preview"
                width={850}
                height={1100}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tracking-system/page.tsx" isQuickEdit="true"
"use client"

import { Textarea } from "@/components/ui/textarea"

import { Label } from "@/components/ui/label"

import { useState } from "react"
import { Download, FileText, Mail, Plus, Printer, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PasswordProtection } from "@/components/password-protection"
import { invoiceTemplates } from "@/components/tracking/invoice-template-selector"
import type { InvoiceTemplate } from "@/components/tracking/invoice-templates"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import {
  BarChart,
  PieChart,
  ArrowUpDown,
  ChevronLeft,
  FileDown,
  FileIcon as FilePdf,
  X,
  Check,
  MoreHorizontal,
  Palette,
  Calendar,
  DollarSign,
  Package,
  Users,
  Clock,
  Filter,
} from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"
import { InvoiceTemplates } from "@/components/tracking/invoice-templates"

interface Transaction {
  id: string
  type: TransactionType
  name: string
  description: string
  amount: number
  date: string
  status: TransactionStatus
  contactName: string
  contactEmail: string
  contactPhone: string
  notes: string
  invoiceNumber?: string
  template?: InvoiceTemplate
}

// Mock data for demonstration
const generateMockData = () => {
  const types = ["donation", "product", "service", "offer"]
  const statuses = ["paid", "pending", "cancelled"]
  const categories = ["education", "health", "environment", "community", "technology"]

const mockData = []

for (let i = 1; i <= 50; i++) {
    const type = types[Math.floor(Math.random() * types.length)]
    const status = statuses[Math.floor(Math.random() * statuses.length)]
    const category = categories[Math.floor(Math.random() * categories.length)]
    const amount = Math.floor(Math.random() * 1000) + 10
    const date = new Date(new Date().getFullYear(), new Date().getMonth(), Math.floor(Math.random() * 28) + 1)
      .toISOString()
      .slice(0, 10)

mockData.push({
      id: `TRX-${i}`,
      type,
      name: `Transaction ${i}`,
      description: `A ${type} for ${category}`,
      amount,
      date,
      status,
      contactName: `Contact ${i}`,
      contactEmail: `contact${i}@example.com`,
      contactPhone: `123-456-${i}`,
      notes: `Notes for transaction ${i}`,
      invoiceNumber: `INV-${i}`,
      template: invoiceTemplates[Math.floor(Math.random() * invoiceTemplates.length)].value as InvoiceTemplate,
    })
  }

return mockData
}

// Helper functions
const generateUniqueId = (type: TransactionType) => {
  const prefix = type === "donation" ? "DON" : type === "product" ? "PRD" : type === "service" ? "SRV" : "OFR"
  const timestamp = Date.now().toString().slice(-6)
  const random = Math.floor(Math.random() * 1000)
    .toString()
    .padStart(3, "0")
  return `${prefix}-${timestamp}-${random}`
}

const generateInvoiceNumber = (transaction: Transaction) => {
  const prefix =
    transaction.type === "donation"
      ? "INV-DON"
      : transaction.type === "product"
        ? "INV-PRD"
        : transaction.type === "service"
          ? "INV-SRV"
          : "INV-OFR"
  const date = new Date().toISOString().slice(0, 10).replace(/-/g, "")
  const random = Math.floor(Math.random() * 10000)
    .toString()
    .padStart(4, "0")
  return `${prefix}-${date}-${random}`
}

// Sample data
const sampleTransactions: Transaction[] = [
  {
    id: "DON-123456-001",
    type: "donation",
    name: "Education Fund Donation",
    description: "Donation for the Cox's Bazar education initiative",
    amount: 500,
    date: "2023-05-15",
    status: "completed",
    contactName: "John Doe",
    contactEmail: "john@example.com",
    contactPhone: "+1234567890",
    notes: "Recurring annual donation",
    invoiceNumber: "INV-DON-20230515-0001",
    template: "classic",
  },
  {
    id: "PRD-654321-002",
    type: "product",
    name: "Leadership Book",
    description: "Book on leadership principles",
    amount: 24.99,
    date: "2023-06-20",
    status: "completed",
    contactName: "Jane Smith",
    contactEmail: "jane@example.com",
    contactPhone: "+9876543210",
    notes: "Express shipping requested",
    invoiceNumber: "INV-PRD-20230620-0002",
    template: "modern",
  },
  {
    id: "SRV-789012-003",
    type: "service",
    name: "Mentorship Program",
    description: "3-month mentorship for young entrepreneurs",
    amount: 299.99,
    date: "2023-07-10",
    status: "pending",
    contactName: "Robert Johnson",
    contactEmail: "robert@example.com",
    contactPhone: "+1122334455",
    notes: "Interested in technology focus",
    invoiceNumber: "INV-SRV-20230710-0003",
    template: "professional",
  },
  {
    id: "OFR-345678-004",
    type: "offer",
    name: "Community Workshop",
    description: "Free workshop for local community",
    amount: 0,
    date: "2023-08-05",
    status: "completed",
    contactName: "Community Center",
    contactEmail: "info@communitycenter.org",
    contactPhone: "+5544332211",
    notes: "Venue provided by the center",
    invoiceNumber: "INV-OFR-20230805-0004",
    template: "minimal",
  },
]

export default function TrackingSystemPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [transactions, setTransactions] = useState<Transaction[]>(sampleTransactions)
  const [newTransaction, setNewTransaction] = useState<Partial<Transaction>>({
    type: "donation",
    name: "",
    description: "",
    amount: 0,
    date: new Date().toISOString().slice(0, 10),
    status: "pending",
    contactName: "",
    contactEmail: "",
    contactPhone: "",
    notes: "",
    template: "classic",
  })
  const [searchTerm, setSearchTerm] = useState("")
  const [filterType, setFilterType] = useState<string>("all")
  const [filterStatus, setFilterStatus] = useState<string>("all")
  const [sortField, setSortField] = useState<string>("date")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")
  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null)
  const [exportFormat, setExportFormat] = useState<ExportFormat>("csv")
  const [exportFields, setExportFields] = useState({
    id: true,
    type: true,
    name: true,
    description: true,
    amount: true,
    date: true,
    status: true,
    contactName: true,
    contactEmail: true,
    contactPhone: true,
    notes: true,
    invoiceNumber: true,
  })
  const [emailRecipient, setEmailRecipient] = useState("")
  const [emailSubject, setEmailSubject] = useState("")
  const [emailMessage, setEmailMessage] = useState("")
  const [isEmailSending, setIsEmailSending] = useState(false)
  const [selectedInvoices, setSelectedInvoices] = useState<string[]>([])
  const [selectAll, setSelectAll] = useState(false)
  const [defaultTemplate, setDefaultTemplate] = useState<InvoiceTemplate>("classic")
  const [currentTemplate, setCurrentTemplate] = useState<InvoiceTemplate>("classic")
  const [isBatchProcessing, setIsBatchProcessing] = useState(false)

const { toast } = useToast()

if (!isAuthenticated) {
    return <PasswordProtection onAuthenticated={() => setIsAuthenticated(true)} />
  }

const handleAddTransaction = () => {
    if (!newTransaction.name || !newTransaction.description || newTransaction.amount === undefined) {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields",
        variant: "destructive",
      })
      return
    }

const id = generateUniqueId(newTransaction.type as TransactionType)
    const transaction: Transaction = {
      id,
      type: newTransaction.type as TransactionType,
      name: newTransaction.name,
      description: newTransaction.description,
      amount: newTransaction.amount,
      date: newTransaction.date || new Date().toISOString().slice(0, 10),
      status: newTransaction.status as TransactionStatus,
      contactName: newTransaction.contactName || "",
      contactEmail: newTransaction.contactEmail || "",
      contactPhone: newTransaction.contactPhone || "",
      notes: newTransaction.notes || "",
      template: (newTransaction.template as InvoiceTemplate) || defaultTemplate,
    }

// Generate invoice number if needed
    if (transaction.status === "completed") {
      transaction.invoiceNumber = generateInvoiceNumber(transaction)
    }

setTransactions([transaction, ...transactions])

// Reset form
    setNewTransaction({
      type: "donation",
      name: "",
      description: "",
      amount: 0,
      date: new Date().toISOString().slice(0, 10),
      status: "pending",
      contactName: "",
      contactEmail: "",
      contactPhone: "",
      notes: "",
      template: defaultTemplate,
    })

toast({
      title: "Transaction Added",
      description: `${transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)} has been added successfully with ID: ${id}`,
    })
  }

const handleGenerateInvoice = (transaction: Transaction) => {
    if (!transaction.invoiceNumber) {
      const updatedTransactions = transactions.map((t) => {
        if (t.id === transaction.id) {
          return { ...t, invoiceNumber: generateInvoiceNumber(t), status: "completed" }
        }
        return t
      })
      setTransactions(updatedTransactions)

toast({
        title: "Invoice Generated",
        description: `Invoice has been generated for ${transaction.name}`,
      })
    } else {
      setSelectedTransaction(transaction)
      setCurrentTemplate(transaction.template || defaultTemplate)
    }
  }

const handleViewInvoice = (transaction: Transaction) => {
    setSelectedTransaction(transaction)
    setCurrentTemplate(transaction.template || defaultTemplate)
  }

const handleExportData = () => {
    // Get filtered transactions
    const dataToExport = filteredTransactions.map((transaction) => {
      const exportedTransaction: any = {}

// Only include selected fields
      if (exportFields.id) exportedTransaction.id = transaction.id
      if (exportFields.type) exportedTransaction.type = transaction.type
      if (exportFields.name) exportedTransaction.name = transaction.name
      if (exportFields.description) exportedTransaction.description = transaction.description
      if (exportFields.amount) exportedTransaction.amount = transaction.amount
      if (exportFields.date) exportedTransaction.date = transaction.date
      if (exportFields.status) exportedTransaction.status = transaction.status
      if (exportFields.contactName) exportedTransaction.contactName = transaction.contactName
      if (exportFields.contactEmail) exportedTransaction.contactEmail = transaction.contactEmail
      if (exportFields.contactPhone) exportedTransaction.contactPhone = transaction.contactPhone
      if (exportFields.notes) exportedTransaction.notes = transaction.notes
      if (exportFields.invoiceNumber) exportedTransaction.invoiceNumber = transaction.invoiceNumber || ""

return exportedTransaction
    })

// Export based on selected format
    if (exportFormat === "csv") {
      exportAsCSV(dataToExport)
    } else if (exportFormat === "excel") {
      exportAsExcel(dataToExport)
    } else if (exportFormat === "json") {
      exportAsJSON(dataToExport)
    } else if (exportFormat === "pdf") {
      exportAsPDF(dataToExport)
    }
  }

const exportAsCSV = (data: any[]) => {
    if (data.length === 0) {
      toast({
        title: "No Data to Export",
        description: "There are no transactions matching your current filters.",
        variant: "destructive",
      })
      return
    }

// Get headers from the first object
    const headers = Object.keys(data[0])

// Create CSV content
    let csvContent = headers.join(",") + "\n"

// Add data rows
    data.forEach((item) => {
      const row = headers
        .map((header) => {
          // Handle special characters and ensure proper CSV formatting
          const cell = item[header]?.toString() || ""
          return `"${cell.replace(/"/g, '""')}"`
        })
        .join(",")
      csvContent += row + "\n"
    })

// Create and download the file
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", `transactions_export_${new Date().toISOString().slice(0, 10)}.csv`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

toast({
      title: "Export Successful",
      description: `${data.length} transactions exported as CSV`,
    })
  }

const exportAsExcel = (data: any[]) => {
    // In a real implementation, you would use a library like xlsx
    // For this demo, we'll simulate Excel export with CSV
    exportAsCSV(data)

toast({
      title: "Export Successful",
      description: `${data.length} transactions exported as Excel (CSV format)`,
    })
  }

const exportAsJSON = (data: any[]) => {
    if (data.length === 0) {
      toast({
        title: "No Data to Export",
        description: "There are no transactions matching your current filters.",
        variant: "destructive",
      })
      return
    }

// Create JSON content
    const jsonContent = JSON.stringify(data, null, 2)

// Create and download the file
    const blob = new Blob([jsonContent], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", `transactions_export_${new Date().toISOString().slice(0, 10)}.json`)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

toast({
      title: "Export Successful",
      description: `${data.length} transactions exported as JSON`,
    })
  }

const exportAsPDF = (data: any[]) => {
    // In a real implementation, you would use a library like jspdf
    // For this demo, we'll simulate PDF export
    toast({
      title: "PDF Export",
      description: `${data.length} transactions would be exported as PDF. In a production environment, this would generate a PDF file.`,
    })
  }

const handleSendEmail = () => {
    if (!selectedTransaction) return

if (!emailRecipient) {
      toast({
        title: "Missing Email",
        description: "Please enter a recipient email address",
        variant: "destructive",
      })
      return
    }

setIsEmailSending(true)

// Simulate sending email
    setTimeout(() => {
      setIsEmailSending(false)

toast({
        title: "Email Sent",
        description: `Invoice ${selectedTransaction.invoiceNumber} has been sent to ${emailRecipient}`,
      })

// Reset email form
      setEmailRecipient("")
      setEmailSubject("")
      setEmailMessage("")
    }, 2000)
  }

const handleSelectInvoice = (invoiceNumber: string, isChecked: boolean) => {
    if (isChecked) {
      setSelectedInvoices([...selectedInvoices, invoiceNumber])
    } else {
      setSelectedInvoices(selectedInvoices.filter((id) => id !== invoiceNumber))
    }
  }

const handleSelectAllInvoices = (isChecked: boolean) => {
    setSelectAll(isChecked)
    if (isChecked) {
      const allInvoiceNumbers = transactions.filter((t) => t.invoiceNumber).map((t) => t.invoiceNumber as string)
      setSelectedInvoices(allInvoiceNumbers)
    } else {
      setSelectedInvoices([])
    }
  }

const handleBatchExport = (format: ExportFormat) => {
    if (selectedInvoices.length === 0) {
      toast({
        title: "No Invoices Selected",
        description: "Please select at least one invoice to export",
        variant: "destructive",
      })
      return
    }

setIsBatchProcessing(true)

// Get selected transactions
    const selectedTransactions = transactions.filter(
      (t) => t.invoiceNumber && selectedInvoices.includes(t.invoiceNumber),
    )

// Simulate batch processing
    setTimeout(() => {
      setIsBatchProcessing(false)

toast({
        title: "Batch Export Complete",
        description: `${selectedInvoices.length} invoices have been exported as ${format.toUpperCase()}`,
      })
    }, 2000)
  }

const handleBatchEmail = () => {
    if (selectedInvoices.length === 0) {
      toast({
        title: "No Invoices Selected",
        description: "Please select at least one invoice to email",
        variant: "destructive",
      })
      return
    }

setIsBatchProcessing(true)

// Simulate batch email sending
    setTimeout(() => {
      setIsBatchProcessing(false)

toast({
        title: "Batch Email Complete",
        description: `${selectedInvoices.length} invoices have been queued for email delivery`,
      })
    }, 2000)
  }

const handleUpdateTemplate = (transaction: Transaction, template: InvoiceTemplate) => {
    // Update the transaction with the new template
    const updatedTransactions = transactions.map((t) => {
      if (t.id === transaction.id) {
        return { ...t, template }
      }
      return t
    })

setTransactions(updatedTransactions)

if (selectedTransaction && selectedTransaction.id === transaction.id) {
      setSelectedTransaction({ ...selectedTransaction, template })
      setCurrentTemplate(template)
    }

toast({
      title: "Template Updated",
      description: `Invoice template has been updated to ${template.charAt(0).toUpperCase() + template.slice(1)}`,
    })
  }

const handleSetDefaultTemplate = (template: InvoiceTemplate) => {
    setDefaultTemplate(template)

toast({
      title: "Default Template Set",
      description: `Default invoice template has been set to ${template.charAt(0).toUpperCase() + template.slice(1)}`,
    })
  }

// Filter and sort transactions
  const filteredTransactions = transactions
    .filter((transaction) => {
      const matchesSearch =
        transaction.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        transaction.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
        transaction.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (transaction.invoiceNumber && transaction.invoiceNumber.toLowerCase().includes(searchTerm.toLowerCase()))

const matchesType = filterType === "all" || transaction.type === filterType
      const matchesStatus = filterStatus === "all" || transaction.status === filterStatus

return matchesSearch && matchesType && matchesStatus
    })
    .sort((a, b) => {
      if (sortField === "date") {
        return sortDirection === "asc"
          ? new Date(a.date).getTime() - new Date(b.date).getTime()
          : new Date(b.date).getTime() - new Date(a.date).getTime()
      } else if (sortField === "amount") {
        return sortDirection === "asc" ? a.amount - b.amount : b.amount - a.amount
      } else if (sortField === "name") {
        return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
      }
      return 0
    })

// Calculate statistics
  const totalDonations = transactions
    .filter((t) => t.type === "donation" && t.status === "completed")
    .reduce((sum, t) => sum + t.amount, 0)

const totalSales = transactions
    .filter((t) => (t.type === "product" || t.type === "service") && t.status === "completed")
    .reduce((sum, t) => sum + t.amount, 0)

const pendingTransactions = transactions.filter((t) => t.status === "pending").length

const transactionsByType = {
    donation: transactions.filter((t) => t.type === "donation").length,
    product: transactions.filter((t) => t.type === "product").length,
    service: transactions.filter((t) => t.type === "service").length,
    offer: transactions.filter((t) => t.type === "offer").length,
  }

return (
    <div className="container mx-auto py-6 px-4 max-w-7xl">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold">Tracking & Management System</h1>
          <p className="text-muted-foreground">
            Track donations, products, services, and offers with unique IDs and invoicing
          </p>
        </div>
        <Link href="/" className="flex items-center text-sm text-muted-foreground hover:text-foreground">
          <ChevronLeft className="h-4 w-4 mr-1" />
          Back to Home
        </Link>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total Donations</p>
                <h3 className="text-2xl font-bold">${totalDonations.toFixed(2)}</h3>
              </div>
              <div className="p-2 bg-primary/10 rounded-full">
                <DollarSign className="h-5 w-5 text-primary" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total Sales</p>
                <h3 className="text-2xl font-bold">${totalSales.toFixed(2)}</h3>
              </div>
              <div className="p-2 bg-primary/10 rounded-full">
                <Package className="h-5 w-5 text-primary" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Pending Transactions</p>
                <h3 className="text-2xl font-bold">{pendingTransactions}</h3>
              </div>
              <div className="p-2 bg-primary/10 rounded-full">
                <Clock className="h-5 w-5 text-primary" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total Transactions</p>
                <h3 className="text-2xl font-bold">{transactions.length}</h3>
              </div>
              <div className="p-2 bg-primary/10 rounded-full">
                <Users className="h-5 w-5 text-primary" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="transactions">
        <TabsList className="grid grid-cols-4 mb-8">
          <TabsTrigger value="transactions">
            <FileText className="h-4 w-4 mr-2" />
            Transactions
          </TabsTrigger>
          <TabsTrigger value="add">
            <Plus className="h-4 w-4 mr-2" />
            Add New
          </TabsTrigger>
          <TabsTrigger value="invoices">
            <FilePdf className="h-4 w-4 mr-2" />
            Invoices
          </TabsTrigger>
          <TabsTrigger value="reports">
            <BarChart className="h-4 w-4 mr-2" />
            Reports
          </TabsTrigger>
        </TabsList>

<TabsContent value="transactions">
          <Card>
            <CardHeader>
              <CardTitle>All Transactions</CardTitle>
              <CardDescription>View and manage all transactions with detailed information</CardDescription>

<div className="flex flex-col md:flex-row gap-4 mt-4">
                <div className="relative flex-1">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search by name, ID, or invoice number..."
                    className="pl-8"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>

<div className="flex gap-2">
                  <Select value={filterType} onValueChange={setFilterType}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="h-4 w-4 mr-2" />
                      <SelectValue placeholder="Type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Types</SelectItem>
                      <SelectItem value="donation">Donations</SelectItem>
                      <SelectItem value="product">Products</SelectItem>
                      <SelectItem value="service">Services</SelectItem>
                      <SelectItem value="offer">Offers</SelectItem>
                    </SelectContent>
                  </Select>

<Select value={filterStatus} onValueChange={setFilterStatus}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="h-4 w-4 mr-2" />
                      <SelectValue placeholder="Status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Status</SelectItem>
                      <SelectItem value="pending">Pending</SelectItem>
                      <SelectItem value="completed">Completed</SelectItem>
                      <SelectItem value="cancelled">Cancelled</SelectItem>
                    </SelectContent>
                  </Select>

<Select value={sortField} onValueChange={setSortField}>
                    <SelectTrigger className="w-[130px]">
                      <ArrowUpDown className="h-4 w-4 mr-2" />
                      <SelectValue placeholder="Sort By" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="date">Date</SelectItem>
                      <SelectItem value="amount">Amount</SelectItem>
                      <SelectItem value="name">Name</SelectItem>
                    </SelectContent>
                  </Select>

<Button
                    variant="outline"
                    size="icon"
                    onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
                  >
                    {sortDirection === "asc" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="lucide lucide-arrow-up"
                      >
                        <path d="m5 12 7-7 7 7" />
                        <path d="M12 19V5" />
                      </svg>
                    ) : (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="lucide lucide-arrow-down"
                      >
                        <path d="M12 5v14" />
                        <path d="m19 12-7 7-7-7" />
                      </svg>
                    )}
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <div className="relative w-full overflow-auto">
                  <table className="w-full caption-bottom text-sm">
                    <thead>
                      <tr className="border-b bg-muted/50">
                        <th className="h-10 px-4 text-left font-medium">ID</th>
                        <th className="h-10 px-4 text-left font-medium">Type</th>
                        <th className="h-10 px-4 text-left font-medium">Name</th>
                        <th className="h-10 px-4 text-left font-medium">Amount</th>
                        <th className="h-10 px-4 text-left font-medium">Date</th>
                        <th className="h-10 px-4 text-left font-medium">Status</th>
                        <th className="h-10 px-4 text-left font-medium">Invoice</th>
                        <th className="h-10 px-4 text-left font-medium">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredTransactions.length === 0 ? (
                        <tr className="border-b">
                          <td colSpan={8} className="p-4 text-center text-muted-foreground">
                            No transactions found
                          </td>
                        </tr>
                      ) : (
                        filteredTransactions.map((transaction) => (
                          <tr key={transaction.id} className="border-b">
                            <td className="p-4 align-middle font-mono text-xs">{transaction.id}</td>
                            <td className="p-4 align-middle capitalize">{transaction.type}</td>
                            <td className="p-4 align-middle">{transaction.name}</td>
                            <td className="p-4 align-middle">${transaction.amount.toFixed(2)}</td>
                            <td className="p-4 align-middle">{transaction.date}</td>
                            <td className="p-4 align-middle">
                              <span
                                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                                  transaction.status === "completed"
                                    ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                                    : transaction.status === "pending"
                                      ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
                                      : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
                                }`}
                              >
                                {transaction.status}
                              </span>
                            </td>
                            <td className="p-4 align-middle font-mono text-xs">{transaction.invoiceNumber || "-"}</td>
                            <td className="p-4 align-middle">
                              <Button variant="outline" size="sm" onClick={() => handleGenerateInvoice(transaction)}>
                                <FileText className="h-4 w-4 mr-2" />
                                {transaction.invoiceNumber ? "View" : "Generate"}
                              </Button>
                            </td>
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="text-sm text-muted-foreground">
                Showing {filteredTransactions.length} of {transactions.length} transactions
              </div>

<Dialog>
                <DialogTrigger asChild>
                  <Button variant="outline">
                    <FileDown className="h-4 w-4 mr-2" />
                    Export Data
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-md">
                  <DialogHeader>
                    <DialogTitle>Export Transactions</DialogTitle>
                    <DialogDescription>
                      Export your transaction data in various formats for reporting and analysis.
                    </DialogDescription>
                  </DialogHeader>

<div className="grid gap-4 py-4">
                    <div className="grid gap-2">
                      <Label htmlFor="export-format">Export Format</Label>
                      <Select value={exportFormat} onValueChange={(value) => setExportFormat(value as ExportFormat)}>
                        <SelectTrigger id="export-format">
                          <SelectValue placeholder="Select format" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="csv">CSV</SelectItem>
                          <SelectItem value="excel">Excel</SelectItem>
                          <SelectItem value="json">JSON</SelectItem>
                          <SelectItem value="pdf">PDF</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <Label className="mb-2 block">Fields to Export</Label>
                      <div className="grid grid-cols-2 gap-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-id"
                            checked={exportFields.id}
                            onCheckedChange={(checked) => setExportFields({ ...exportFields, id: checked === true })}
                          />
                          <label htmlFor="export-id" className="text-sm">
                            ID
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-type"
                            checked={exportFields.type}
                            onCheckedChange={(checked) => setExportFields({ ...exportFields, type: checked === true })}
                          />
                          <label htmlFor="export-type" className="text-sm">
                            Type
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-name"
                            checked={exportFields.name}
                            onCheckedChange={(checked) => setExportFields({ ...exportFields, name: checked === true })}
                          />
                          <label htmlFor="export-name" className="text-sm">
                            Name
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-description"
                            checked={exportFields.description}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, description: checked === true })
                            }
                          />
                          <label htmlFor="export-description" className="text-sm">
                            Description
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-amount"
                            checked={exportFields.amount}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, amount: checked === true })
                            }
                          />
                          <label htmlFor="export-amount" className="text-sm">
                            Amount
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-date"
                            checked={exportFields.date}
                            onCheckedChange={(checked) => setExportFields({ ...exportFields, date: checked === true })}
                          />
                          <label htmlFor="export-date" className="text-sm">
                            Date
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-status"
                            checked={exportFields.status}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, status: checked === true })
                            }
                          />
                          <label htmlFor="export-status" className="text-sm">
                            Status
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-contactName"
                            checked={exportFields.contactName}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, contactName: checked === true })
                            }
                          />
                          <label htmlFor="export-contactName" className="text-sm">
                            Contact Name
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-contactEmail"
                            checked={exportFields.contactEmail}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, contactEmail: checked === true })
                            }
                          />
                          <label htmlFor="export-contactEmail" className="text-sm">
                            Contact Email
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-contactPhone"
                            checked={exportFields.contactPhone}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, contactPhone: checked === true })
                            }
                          />
                          <label htmlFor="export-contactPhone" className="text-sm">
                            Contact Phone
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-notes"
                            checked={exportFields.notes}
                            onCheckedChange={(checked) => setExportFields({ ...exportFields, notes: checked === true })}
                          />
                          <label htmlFor="export-notes" className="text-sm">
                            Notes
                          </label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox
                            id="export-invoiceNumber"
                            checked={exportFields.invoiceNumber}
                            onCheckedChange={(checked) =>
                              setExportFields({ ...exportFields, invoiceNumber: checked === true })
                            }
                          />
                          <label htmlFor="export-invoiceNumber" className="text-sm">
                            Invoice Number
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>

<DialogFooter className="sm:justify-start">
                    <DialogClose asChild>
                      <Button type="button" variant="secondary">
                        Cancel
                      </Button>
                    </DialogClose>
                    <Button type="button" onClick={handleExportData}>
                      <FileDown className="h-4 w-4 mr-2" />
                      Export {filteredTransactions.length} Transactions
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="add">
          <Card>
            <CardHeader>
              <CardTitle>Add New Transaction</CardTitle>
              <CardDescription>Create a new donation, product, service, or offer entry</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid gap-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="type">Transaction Type</Label>
                    <Select
                      value={newTransaction.type}
                      onValueChange={(value) =>
                        setNewTransaction({ ...newTransaction, type: value as TransactionType })
                      }
                    >
                      <SelectTrigger id="type">
                        <SelectValue placeholder="Select type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="donation">Donation</SelectItem>
                        <SelectItem value="product">Product</SelectItem>
                        <SelectItem value="service">Service</SelectItem>
                        <SelectItem value="offer">Offer</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="name">Name</Label>
                    <Input
                      id="name"
                      placeholder="Enter name"
                      value={newTransaction.name}
                      onChange={(e) => setNewTransaction({ ...newTransaction, name: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="amount">Amount</Label>
                    <Input
                      id="amount"
                      type="number"
                      placeholder="0.00"
                      value={newTransaction.amount?.toString() || ""}
                      onChange={(e) =>
                        setNewTransaction({ ...newTransaction, amount: Number.parseFloat(e.target.value) || 0 })
                      }
                    />
                  </div>

<div>
                    <Label htmlFor="date">Date</Label>
                    <Input
                      id="date"
                      type="date"
                      value={newTransaction.date}
                      onChange={(e) => setNewTransaction({ ...newTransaction, date: e.target.value })}
                    />
                  </div>
                </div>

<div>
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    placeholder="Enter description"
                    value={newTransaction.description}
                    onChange={(e) => setNewTransaction({ ...newTransaction, description: e.target.value })}
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="contactName">Contact Name</Label>
                    <Input
                      id="contactName"
                      placeholder="Enter contact name"
                      value={newTransaction.contactName || ""}
                      onChange={(e) => setNewTransaction({ ...newTransaction, contactName: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="contactEmail">Contact Email</Label>
                    <Input
                      id="contactEmail"
                      type="email"
                      placeholder="Enter contact email"
                      value={newTransaction.contactEmail || ""}
                      onChange={(e) => setNewTransaction({ ...newTransaction, contactEmail: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="contactPhone">Contact Phone</Label>
                    <Input
                      id="contactPhone"
                      placeholder="Enter contact phone"
                      value={newTransaction.contactPhone || ""}
                      onChange={(e) => setNewTransaction({ ...newTransaction, contactPhone: e.target.value })}
                    />
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="status">Status</Label>
                    <Select
                      value={newTransaction.status as string}
                      onValueChange={(value) =>
                        setNewTransaction({ ...newTransaction, status: value as TransactionStatus })
                      }
                    >
                      <SelectTrigger id="status">
                        <SelectValue placeholder="Select status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="pending">Pending</SelectItem>
                        <SelectItem value="completed">Completed</SelectItem>
                        <SelectItem value="cancelled">Cancelled</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="template">Invoice Template</Label>
                    <Select
                      value={(newTransaction.template as string) || defaultTemplate}
                      onValueChange={(value) =>
                        setNewTransaction({ ...newTransaction, template: value as InvoiceTemplate })
                      }
                    >
                      <SelectTrigger id="template">
                        <SelectValue placeholder="Select template" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="classic">Classic</SelectItem>
                        <SelectItem value="modern">Modern</SelectItem>
                        <SelectItem value="minimal">Minimal</SelectItem>
                        <SelectItem value="professional">Professional</SelectItem>
                        <SelectItem value="branded">Branded</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div>
                  <Label htmlFor="notes">Notes</Label>
                  <Textarea
                    id="notes"
                    placeholder="Enter additional notes"
                    value={newTransaction.notes || ""}
                    onChange={(e) => setNewTransaction({ ...newTransaction, notes: e.target.value })}
                  />
                </div>

<Button onClick={handleAddTransaction}>
                  <Plus className="h-4 w-4 mr-2" />
                  Add Transaction
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="invoices">
          <Card>
            <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div>
                <CardTitle>Invoice Management</CardTitle>
                <CardDescription>Generate and manage invoices for all transactions</CardDescription>
              </div>

<div className="flex flex-col md:flex-row gap-2">
                <Dialog>
                  <DialogTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Palette className="h-4 w-4 mr-2" />
                      Default Template
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                      <DialogTitle>Set Default Invoice Template</DialogTitle>
                      <DialogDescription>Choose a default template for all new invoices</DialogDescription>
                    </DialogHeader>

<div className="py-4">
                      <RadioGroup
                        value={defaultTemplate}
                        onValueChange={(value) => handleSetDefaultTemplate(value as InvoiceTemplate)}
                      >
                        <div className="flex items-center space-x-2 mb-2">
                          <RadioGroupItem value="classic" id="classic" />
                          <Label htmlFor="classic">Classic</Label>
                        </div>
                        <div className="flex items-center space-x-2 mb-2">
                          <RadioGroupItem value="modern" id="modern" />
                          <Label htmlFor="modern">Modern</Label>
                        </div>
                        <div className="flex items-center space-x-2 mb-2">
                          <RadioGroupItem value="minimal" id="minimal" />
                          <Label htmlFor="minimal">Minimal</Label>
                        </div>
                        <div className="flex items-center space-x-2 mb-2">
                          <RadioGroupItem value="professional" id="professional" />
                          <Label htmlFor="professional">Professional</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="branded" id="branded" />
                          <Label htmlFor="branded">Branded</Label>
                        </div>
                      </RadioGroup>
                    </div>

{selectedInvoices.length > 0 && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="default" size="sm" disabled={isBatchProcessing}>
                        {isBatchProcessing ? (
                          <>
                            <svg
                              className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                            >
                              <circle
                                className="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                strokeWidth="4"
                              ></circle>
                              <path
                                className="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                              ></path>
                            </svg>
                            Processing...
                          </>
                        ) : (
                          <>Batch Actions ({selectedInvoices.length})</>
                        )}
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Batch Actions</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => handleBatchExport("pdf")}>
                        <FilePdf className="h-4 w-4 mr-2" />
                        Export as PDF
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => handleBatchExport("csv")}>
                        <FileDown className="h-4 w-4 mr-2" />
                        Export as CSV
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={handleBatchEmail}>
                        <Mail className="h-4 w-4 mr-2" />
                        Email Invoices
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => setSelectedInvoices([])}>
                        <X className="h-4 w-4 mr-2" />
                        Clear Selection
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}
              </div>
            </CardHeader>
            <CardContent>
              {/* Add this where appropriate in the UI */}
              <InvoiceTemplates
                selectedTemplate="classic"
                onSelectTemplate={(template) => {
                  console.log("Selected template:", template)
                  // Update the selected template in your state
                }}
              />
              <div className="rounded-md border">
                <div className="relative w-full overflow-auto">
                  <table className="w-full caption-bottom text-sm">
                    <thead>
                      <tr className="border-b bg-muted/50">
                        <th className="h-10 w-[40px] px-2">
                          <Checkbox
                            checked={selectAll}
                            onCheckedChange={handleSelectAllInvoices}
                            aria-label="Select all invoices"
                          />
                        </th>
                        <th className="h-10 px-4 text-left font-medium">Invoice Number</th>
                        <th className="h-10 px-4 text-left font-medium">Transaction ID</th>
                        <th className="h-10 px-4 text-left font-medium">Type</th>
                        <th className="h-10 px-4 text-left font-medium">Name</th>
                        <th className="h-10 px-4 text-left font-medium">Amount</th>
                        <th className="h-10 px-4 text-left font-medium">Date</th>
                        <th className="h-10 px-4 text-left font-medium">Template</th>
                        <th className="h-10 px-4 text-left font-medium">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {transactions.filter((t) => t.invoiceNumber).length === 0 ? (
                        <tr className="border-b">
                          <td colSpan={9} className="p-4 text-center text-muted-foreground">
                            No invoices generated yet
                          </td>
                        </tr>
                      ) : (
                        transactions
                          .filter((t) => t.invoiceNumber)
                          .map((transaction) => (
                            <tr key={transaction.invoiceNumber} className="border-b">
                              <td className="p-2 align-middle text-center">
                                <Checkbox
                                  checked={selectedInvoices.includes(transaction.invoiceNumber as string)}
                                  onCheckedChange={(checked) =>
                                    handleSelectInvoice(transaction.invoiceNumber as string, checked === true)
                                  }
                                  aria-label={`Select invoice ${transaction.invoiceNumber}`}
                                />
                              </td>
                              <td className="p-4 align-middle font-mono text-xs">{transaction.invoiceNumber}</td>
                              <td className="p-4 align-middle font-mono text-xs">{transaction.id}</td>
                              <td className="p-4 align-middle capitalize">{transaction.type}</td>
                              <td className="p-4 align-middle">{transaction.name}</td>
                              <td className="p-4 align-middle">${transaction.amount.toFixed(2)}</td>
                              <td className="p-4 align-middle">{transaction.date}</td>
                              <td className="p-4 align-middle capitalize">{transaction.template || defaultTemplate}</td>
                              <td className="p-4 align-middle">
                                <div className="flex gap-2">
                                  <Button variant="outline" size="sm" onClick={() => handleViewInvoice(transaction)}>
                                    <FilePdf className="h-4 w-4 mr-2" />
                                    View
                                  </Button>
                                  <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                      <Button variant="ghost" size="icon">
                                        <MoreHorizontal className="h-4 w-4" />
                                        <span className="sr-only">More options</span>
                                      </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end">
                                      <DropdownMenuLabel>Invoice Actions</DropdownMenuLabel>
                                      <DropdownMenuSeparator />
                                      <DropdownMenuItem
                                        onClick={() => {
                                          setSelectedTransaction(transaction)
                                          setEmailRecipient(transaction.contactEmail)
                                          setEmailSubject(
                                            `Invoice ${transaction.invoiceNumber} for ${transaction.name}`,
                                          )
                                          setEmailMessage(
                                            `Dear ${transaction.contactName},\n\nPlease find attached the invoice ${transaction.invoiceNumber} for ${transaction.name}.\n\nAmount: $${transaction.amount.toFixed(2)}\nDate: ${transaction.date}\n\nThank you for your business.\n\nBest regards,\nMJ Ahmad`,
                                          )
                                        }}
                                      >
                                        <Mail className="h-4 w-4 mr-2" />
                                        Email Invoice
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => exportAsPDF([transaction])}>
                                        <Download className="h-4 w-4 mr-2" />
                                        Download PDF
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => window.print()}>
                                        <Printer className="h-4 w-4 mr-2" />
                                        Print
                                      </DropdownMenuItem>
                                      <DropdownMenuSeparator />
                                      <DropdownMenuLabel>Change Template</DropdownMenuLabel>
                                      <DropdownMenuItem onClick={() => handleUpdateTemplate(transaction, "classic")}>
                                        <div
                                          className={`h-3 w-3 rounded-full mr-2 ${transaction.template === "classic" ? "bg-primary" : "bg-muted"}`}
                                        />
                                        Classic
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUpdateTemplate(transaction, "modern")}>
                                        <div
                                          className={`h-3 w-3 rounded-full mr-2 ${transaction.template === "modern" ? "bg-primary" : "bg-muted"}`}
                                        />
                                        Modern
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUpdateTemplate(transaction, "minimal")}>
                                        <div
                                          className={`h-3 w-3 rounded-full mr-2 ${transaction.template === "minimal" ? "bg-primary" : "bg-muted"}`}
                                        />
                                        Minimal
                                      </DropdownMenuItem>
                                      <DropdownMenuItem
                                        onClick={() => handleUpdateTemplate(transaction, "professional")}
                                      >
                                        <div
                                          className={`h-3 w-3 rounded-full mr-2 ${transaction.template === "professional" ? "bg-primary" : "bg-muted"}`}
                                        />
                                        Professional
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUpdateTemplate(transaction, "branded")}>
                                        <div
                                          className={`h-3 w-3 rounded-full mr-2 ${transaction.template === "branded" ? "bg-primary" : "bg-muted"}`}
                                        />
                                        Branded
                                      </DropdownMenuItem>
                                    </DropdownMenuContent>
                                  </DropdownMenu>
                                </div>
                              </td>
                            </tr>
                          ))
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="text-sm text-muted-foreground">
                {selectedInvoices.length > 0
                  ? `${selectedInvoices.length} invoices selected`
                  : `${transactions.filter((t) => t.invoiceNumber).length} invoices total`}
              </div>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="reports">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Transaction Summary</CardTitle>
                <CardDescription>Overview of all transactions by type and status</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-80 flex items-center justify-center">
                  <div className="text-center">
                    <PieChart className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                        <span>Donations: {transactionsByType.donation}</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                        <span>Products: {transactionsByType.product}</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                        <span>Services: {transactionsByType.service}</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
                        <span>Offers: {transactionsByType.offer}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" onClick={() => exportAsPDF([])}>
                  <Download className="h-4 w-4 mr-2" />
                  Export Chart as PDF
                </Button>
              </CardFooter>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Monthly Overview</CardTitle>
                <CardDescription>Transaction trends over time</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-80 flex items-center justify-center">
                  <div className="text-center">
                    <BarChart className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
                    <p className="text-sm text-muted-foreground">
                      Detailed monthly reports can be generated and exported for analysis
                    </p>
                    <Button className="mt-4" variant="outline">
                      <Calendar className="h-4 w-4 mr-2" />
                      Generate Monthly Report
                    </Button>
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" onClick={() => exportAsPDF([])}>
                  <Download className="h-4 w-4 mr-2" />
                  Export Chart as PDF
                </Button>
              </CardFooter>
            </Card>

<Card className="md:col-span-2">
              <CardHeader>
                <CardTitle>Financial Summary</CardTitle>
                <CardDescription>Overview of financial transactions and revenue</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="rounded-md border">
                  <div className="relative w-full overflow-auto">
                    <table className="w-full caption-bottom text-sm">
                      <thead>
                        <tr className="border-b bg-muted/50">
                          <th className="h-10 px-4 text-left font-medium">Category</th>
                          <th className="h-10 px-4 text-left font-medium">Total Amount</th>
                          <th className="h-10 px-4 text-left font-medium">Transactions</th>
                          <th className="h-10 px-4 text-left font-medium">Average</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-4 align-middle font-medium">Donations</td>
                          <td className="p-4 align-middle">${totalDonations.toFixed(2)}</td>
                          <td className="p-4 align-middle">{transactionsByType.donation}</td>
                          <td className="p-4 align-middle">
                            $
                            {transactionsByType.donation > 0
                              ? (totalDonations / transactionsByType.donation).toFixed(2)
                              : "0.00"}
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4 align-middle font-medium">Products</td>
                          <td className="p-4 align-middle">
                            $
                            {transactions
                              .filter((t) => t.type === "product" && t.status === "completed")
                              .reduce((sum, t) => sum + t.amount, 0)
                              .toFixed(2)}
                          </td>
                          <td className="p-4 align-middle">{transactionsByType.product}</td>
                          <td className="p-4 align-middle">
                            $
                            {transactionsByType.product > 0
                              ? (
                                  transactions
                                    .filter((t) => t.type === "product" && t.status === "completed")
                                    .reduce((sum, t) => sum + t.amount, 0) / transactionsByType.product
                                ).toFixed(2)
                              : "0.00"}
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4 align-middle font-medium">Services</td>
                          <td className="p-4 align-middle">
                            $
                            {transactions
                              .filter((t) => t.type === "service" && t.status === "completed")
                              .reduce((sum, t) => sum + t.amount, 0)
                              .toFixed(2)}
                          </td>
                          <td className="p-4 align-middle">{transactionsByType.service}</td>
                          <td className="p-4 align-middle">
                            $
                            {transactionsByType.service > 0
                              ? (
                                  transactions
                                    .filter((t) => t.type === "service" && t.status === "completed")
                                    .reduce((sum, t) => sum + t.amount, 0) / transactionsByType.service
                                ).toFixed(2)
                              : "0.00"}
                          </td>
                        </tr>
                        <tr>
                          <td className="p-4 align-middle font-medium">Offers</td>
                          <td className="p-4 align-middle">
                            $
                            {transactions
                              .filter((t) => t.type === "offer" && t.status === "completed")
                              .reduce((sum, t) => sum + t.amount, 0)
                              .toFixed(2)}
                          </td>
                          <td className="p-4 align-middle">{transactionsByType.offer}</td>
                          <td className="p-4 align-middle">
                            $
                            {transactionsByType.offer > 0
                              ? (
                                  transactions
                                    .filter((t) => t.type === "offer" && t.status === "completed")
                                    .reduce((sum, t) => sum + t.amount, 0) / transactionsByType.offer
                                ).toFixed(2)
                              : "0.00"}
                          </td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr className="border-t">
                          <td className="p-4 align-middle font-medium">Total</td>
                          <td className="p-4 align-middle font-medium">${(totalDonations + totalSales).toFixed(2)}</td>
                          <td className="p-4 align-middle font-medium">{transactions.length}</td>
                          <td className="p-4 align-middle font-medium">
                            $
                            {transactions.length > 0
                              ? ((totalDonations + totalSales) / transactions.length).toFixed(2)
                              : "0.00"}
                          </td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <div className="flex gap-2 w-full justify-end">
                  <Button
                    variant="outline"
                    onClick={() =>
                      exportAsCSV([
                        {
                          Category: "Donations",
                          "Total Amount": totalDonations.toFixed(2),
                          Transactions: transactionsByType.donation,
                          Average:
                            transactionsByType.donation > 0
                              ? (totalDonations / transactionsByType.donation).toFixed(2)
                              : "0.00",
                        },
                        // Add other categories...
                      ])
                    }
                  >
                    <FileDown className="h-4 w-4 mr-2" />
                    Export as CSV
                  </Button>
                  <Button variant="outline" onClick={() => exportAsPDF([])}>
                    <FilePdf className="h-4 w-4 mr-2" />
                    Export as PDF
                  </Button>
                </div>
              </CardFooter>
            </Card>
          </div>
        </TabsContent>
      </Tabs>

{/* Invoice PDF View Dialog */}
      {selectedTransaction && (
        <Dialog open={!!selectedTransaction} onOpenChange={(open) => !open && setSelectedTransaction(null)}>
          <DialogContent className="sm:max-w-3xl">
            <DialogHeader>
              <DialogTitle>Invoice {selectedTransaction.invoiceNumber}</DialogTitle>
              <DialogDescription>View, download or email this invoice</DialogDescription>
            </DialogHeader>

<div className="bg-white p-8 rounded-lg border">
              <div className="flex justify-between items-start mb-8">
                <div>
                  <h2 className="text-2xl font-bold">INVOICE</h2>
                  <p className="text-sm text-gray-500 mt-1">#{selectedTransaction.invoiceNumber}</p>
                </div>
                <div className="text-right">
                  <h3 className="font-bold">MJ Ahmad</h3>
                  <p className="text-sm">Cox's Bazar, Bangladesh</p>
                  <p className="text-sm">mjahmad2024@outlook.com</p>
                  <p className="text-sm">+880 1336 221217</p>
                </div>
              </div>

<div className="grid grid-cols-2 gap-8 mb-8">
                <div>
                  <h4 className="font-semibold text-gray-700 mb-2">Bill To:</h4>
                  <p className="font-medium">{selectedTransaction.contactName}</p>
                  <p className="text-sm">{selectedTransaction.contactEmail}</p>
                  <p className="text-sm">{selectedTransaction.contactPhone}</p>
                </div>
                <div>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    <div className="font-semibold text-gray-700">Invoice Number:</div>
                    <div>{selectedTransaction.invoiceNumber}</div>

<div className="font-semibold text-gray-700">Transaction ID:</div>
                    <div>{selectedTransaction.id}</div>

<div className="font-semibold text-gray-700">Date:</div>
                    <div>{selectedTransaction.date}</div>

<div className="font-semibold text-gray-700">Status:</div>
                    <div className="capitalize">{selectedTransaction.status}</div>
                  </div>
                </div>
              </div>

<div className="mb-8">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-gray-100">
                      <th className="text-left py-2 px-4">Description</th>
                      <th className="text-right py-2 px-4">Amount</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr className="border-b">
                      <td className="py-4 px-4">
                        <div className="font-medium">{selectedTransaction.name}</div>
                        <div className="text-gray-600 mt-1">{selectedTransaction.description}</div>
                      </td>
                      <td className="py-4 px-4 text-right">${selectedTransaction.amount.toFixed(2)}</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td className="py-4 px-4 text-right font-semibold">Total:</td>
                      <td className="py-4 px-4 text-right font-bold">${selectedTransaction.amount.toFixed(2)}</td>
                    </tr>
                  </tfoot>
                </table>
              </div>

{selectedTransaction.notes && (
                <div className="mb-8">
                  <h4 className="font-semibold text-gray-700 mb-2">Notes:</h4>
                  <p className="text-sm bg-gray-50 p-3 rounded">{selectedTransaction.notes}</p>
                </div>
              )}

<div className="text-center text-sm text-gray-500 mt-8">
                <p>Thank you for your support!</p>
              </div>
            </div>

<DialogFooter className="flex flex-col sm:flex-row gap-2">
              <Button variant="outline" onClick={() => exportAsPDF([])}>
                <Download className="h-4 w-4 mr-2" />
                Download PDF
              </Button>
              <Button variant="outline" onClick={() => window.print()}>
                <Printer className="h-4 w-4 mr-2" />
                Print
              </Button>
              <Dialog>
                <DialogTrigger asChild>
                  <Button>
                    <Mail className="h-4 w-4 mr-2" />
                    Email Invoice
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-md">
                  <DialogHeader>
                    <DialogTitle>Email Invoice</DialogTitle>
                    <DialogDescription>Send this invoice via email to the recipient.</DialogDescription>
                  </DialogHeader>

<div className="grid gap-4 py-4">
                    <div className="grid gap-2">
                      <Label htmlFor="email-recipient">Recipient Email</Label>
                      <Input
                        id="email-recipient"
                        type="email"
                        placeholder="recipient@example.com"
                        value={emailRecipient}
                        onChange={(e) => setEmailRecipient(e.target.value)}
                      />
                    </div>

<div className="grid gap-2">
                      <Label htmlFor="email-subject">Subject</Label>
                      <Input
                        id="email-subject"
                        placeholder="Invoice for your recent transaction"
                        value={emailSubject}
                        onChange={(e) => setEmailSubject(e.target.value)}
                      />
                    </div>

<div className="grid gap-2">
                      <Label htmlFor="email-message">Message</Label>
                      <Textarea
                        id="email-message"
                        placeholder="Enter your message here..."
                        rows={4}
                        value={emailMessage}
                        onChange={(e) => setEmailMessage(e.target.value)}
                      />
                    </div>
                  </div>

<DialogFooter>
                    <DialogClose asChild>
                      <Button type="button" variant="secondary">
                        <X className="h-4 w-4 mr-2" />
                        Cancel
                      </Button>
                    </DialogClose>
                    <Button type="button" onClick={handleSendEmail} disabled={isEmailSending}>
                      {isEmailSending ? (
                        <>
                          <svg
                            className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Sending...
                        </>
                      ) : (
                        <>
                          <Check className="h-4 w-4 mr-2" />
                          Send Email
                        </>
                      )}
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/advanced-reports.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import {
  BarChartIcon,
  Calendar,
  Download,
  FileDown,
  LineChartIcon,
  Filter,
  Printer,
  Share2,
  BarChart2,
  PieChartIcon,
} from "lucide-react"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts"
import { ChartContainer, ChartTooltip } from "@/components/ui/chart"
import { Badge } from "@/components/ui/badge"

// Type definitions
interface Transaction {
  id: string
  type: string
  name: string
  amount: number
  date: string
  status: string
  category: string
  contactName: string
  contactEmail?: string
  contactPhone?: string
}

interface AdvancedReportsProps {
  transactions: Transaction[]
}

export function AdvancedReports({ transactions }: AdvancedReportsProps) {
  const [reportPeriod, setReportPeriod] = useState<"daily" | "weekly" | "monthly" | "quarterly" | "yearly">("monthly")
  const [selectedCategory, setSelectedCategory] = useState<string>("all")
  const [selectedType, setSelectedType] = useState<string>("all")
  const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
    from: new Date(new Date().setDate(new Date().getDate() - 30)),
    to: new Date(),
  })

// Process transactions for time-based reports
  const processTimeData = () => {
    const sortedTransactions = [...transactions].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())

const filteredTransactions = sortedTransactions.filter((t) => {
      const transactionDate = new Date(t.date)
      const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
      const passesCategoryFilter = selectedCategory === "all" || t.category === selectedCategory
      const passesTypeFilter = selectedType === "all" || t.type === selectedType
      return passesDateFilter && passesCategoryFilter && passesTypeFilter
    })

// Create data for daily, weekly, monthly, quarterly, or yearly
    if (reportPeriod === "daily") {
      // Daily data
      const dailyData: Record<string, { date: string; value: number; count: number }> = {}

filteredTransactions.forEach((t) => {
        const date = t.date
        if (!dailyData[date]) {
          dailyData[date] = { date, value: 0, count: 0 }
        }
        dailyData[date].value += t.amount
        dailyData[date].count += 1
      })

return Object.values(dailyData)
    } else if (reportPeriod === "weekly") {
      // Weekly data
      const weeklyData: Record<string, { week: string; value: number; count: number }> = {}

filteredTransactions.forEach((t) => {
        const date = new Date(t.date)
        const year = date.getFullYear()
        // Get ISO week number
        const week = getWeekNumber(date)
        const weekKey = `${year}-W${week}`

if (!weeklyData[weekKey]) {
          weeklyData[weekKey] = { week: weekKey, value: 0, count: 0 }
        }
        weeklyData[weekKey].value += t.amount
        weeklyData[weekKey].count += 1
      })

return Object.values(weeklyData)
    } else if (reportPeriod === "monthly") {
      // Monthly data
      const monthlyData: Record<string, { month: string; value: number; count: number }> = {}

filteredTransactions.forEach((t) => {
        const date = new Date(t.date)
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const monthKey = `${year}-${month.toString().padStart(2, "0")}`

if (!monthlyData[monthKey]) {
          monthlyData[monthKey] = { month: monthKey, value: 0, count: 0 }
        }
        monthlyData[monthKey].value += t.amount
        monthlyData[monthKey].count += 1
      })

return Object.values(monthlyData)
    } else if (reportPeriod === "quarterly") {
      // Quarterly data
      const quarterlyData: Record<string, { quarter: string; value: number; count: number }> = {}

filteredTransactions.forEach((t) => {
        const date = new Date(t.date)
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const quarter = Math.ceil(month / 3)
        const quarterKey = `${year}-Q${quarter}`

if (!quarterlyData[quarterKey]) {
          quarterlyData[quarterKey] = { quarter: quarterKey, value: 0, count: 0 }
        }
        quarterlyData[quarterKey].value += t.amount
        quarterlyData[quarterKey].count += 1
      })

return Object.values(quarterlyData)
    } else {
      // Yearly data
      const yearlyData: Record<string, { year: string; value: number; count: number }> = {}

filteredTransactions.forEach((t) => {
        const date = new Date(t.date)
        const year = date.getFullYear().toString()

if (!yearlyData[year]) {
          yearlyData[year] = { year, value: 0, count: 0 }
        }
        yearlyData[year].value += t.amount
        yearlyData[year].count += 1
      })

return Object.values(yearlyData)
    }
  }

const getWeekNumber = (date: Date) => {
    const firstDayOfYear = new Date(date.getFullYear(), 0, 1)
    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000
    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7)
  }

// Process transactions for category-based reports
  const processCategoryData = () => {
    const categoryData: Record<string, { name: string; value: number; count: number }> = {}

const filteredTransactions = transactions.filter((t) => {
      const transactionDate = new Date(t.date)
      const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
      const passesTypeFilter = selectedType === "all" || t.type === selectedType
      return passesDateFilter && passesTypeFilter
    })

filteredTransactions.forEach((t) => {
      const category = t.category || "Uncategorized"
      if (!categoryData[category]) {
        categoryData[category] = { name: category, value: 0, count: 0 }
      }
      categoryData[category].value += t.amount
      categoryData[category].count += 1
    })

return Object.values(categoryData)
  }

// Process transactions for type-based reports
  const processTypeData = () => {
    const typeData: Record<string, { name: string; value: number; count: number }> = {}

const filteredTransactions = transactions.filter((t) => {
      const transactionDate = new Date(t.date)
      const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
      const passesCategoryFilter = selectedCategory === "all" || t.category === selectedCategory
      return passesDateFilter && passesCategoryFilter
    })

filteredTransactions.forEach((t) => {
      const type = t.type || "Uncategorized"
      if (!typeData[type]) {
        typeData[type] = { name: type, value: 0, count: 0 }
      }
      typeData[type].value += t.amount
      typeData[type].count += 1
    })

return Object.values(typeData)
  }

// Process transactions for status-based reports
  const processStatusData = () => {
    const statusData: Record<string, { name: string; value: number; count: number }> = {}

const filteredTransactions = transactions.filter((t) => {
      const transactionDate = new Date(t.date)
      const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
      const passesCategoryFilter = selectedCategory === "all" || t.category === selectedCategory
      const passesTypeFilter = selectedType === "all" || t.type === selectedType
      return passesDateFilter && passesCategoryFilter && passesTypeFilter
    })

filteredTransactions.forEach((t) => {
      const status = t.status || "Unknown"
      if (!statusData[status]) {
        statusData[status] = { name: status, value: 0, count: 0 }
      }
      statusData[status].value += t.amount
      statusData[status].count += 1
    })

return Object.values(statusData)
  }

// Prepare data for rendering
  const timeData = processTimeData()
  const categoryData = processCategoryData()
  const typeData = processTypeData()
  const statusData = processStatusData()

// Calculate summary statistics
  const totalAmount = transactions
    .filter((t) => {
      const transactionDate = new Date(t.date)
      const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
      const passesCategoryFilter = selectedCategory === "all" || t.category === selectedCategory
      const passesTypeFilter = selectedType === "all" || t.type === selectedType
      return passesDateFilter && passesCategoryFilter && passesTypeFilter
    })
    .reduce((sum, t) => sum + t.amount, 0)

const transactionCount = transactions.filter((t) => {
    const transactionDate = new Date(t.date)
    const passesDateFilter = transactionDate >= dateRange.from && transactionDate <= dateRange.to
    const passesCategoryFilter = selectedCategory === "all" || t.category === selectedCategory
    const passesTypeFilter = selectedType === "all" || t.type === selectedType
    return passesDateFilter && passesCategoryFilter && passesTypeFilter
  }).length

const averageAmount = transactionCount > 0 ? totalAmount / transactionCount : 0

// Chart colors
  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#A569BD", "#5DADE2", "#48C9B0", "#F4D03F"]

// Handle report export
  const handleExportReport = () => {
    console.log("Exporting report...")
    // Implementation would depend on the desired export format and mechanism
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
              <CardTitle>Advanced Reports</CardTitle>
              <CardDescription>Analyze transaction data with customizable views and filters</CardDescription>
            </div>
            <Button onClick={handleExportReport}>
              <Download className="h-4 w-4 mr-2" />
              Export Report
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="space-y-2">
              <label className="text-sm font-medium">Date Range</label>
              <DateRangePicker
                from={dateRange.from}
                to={dateRange.to}
                onSelect={(range) => {
                  if (range?.from && range?.to) {
                    setDateRange({ from: range.from, to: range.to })
                  }
                }}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Time Period</label>
              <Select value={reportPeriod} onValueChange={(value: any) => setReportPeriod(value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select period" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="daily">Daily</SelectItem>
                  <SelectItem value="weekly">Weekly</SelectItem>
                  <SelectItem value="monthly">Monthly</SelectItem>
                  <SelectItem value="quarterly">Quarterly</SelectItem>
                  <SelectItem value="yearly">Yearly</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Category</label>
                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Categories</SelectItem>
                    <SelectItem value="education">Education</SelectItem>
                    <SelectItem value="health">Health</SelectItem>
                    <SelectItem value="environment">Environment</SelectItem>
                    <SelectItem value="community">Community</SelectItem>
                    <SelectItem value="technology">Technology</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Type</label>
                <Select value={selectedType} onValueChange={setSelectedType}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="donation">Donations</SelectItem>
                    <SelectItem value="product">Products</SelectItem>
                    <SelectItem value="service">Services</SelectItem>
                    <SelectItem value="offer">Offers</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

{/* Summary Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <Card>
              <CardContent className="pt-6">
                <div className="text-center">
                  <p className="text-sm font-medium text-muted-foreground">Total Amount</p>
                  <h3 className="text-2xl font-bold">${totalAmount.toFixed(2)}</h3>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-center">
                  <p className="text-sm font-medium text-muted-foreground">Transaction Count</p>
                  <h3 className="text-2xl font-bold">{transactionCount}</h3>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-center">
                  <p className="text-sm font-medium text-muted-foreground">Average Amount</p>
                  <h3 className="text-2xl font-bold">${averageAmount.toFixed(2)}</h3>
                </div>
              </CardContent>
            </Card>
          </div>

<Tabs defaultValue="time">
            <TabsList className="mb-6">
              <TabsTrigger value="time">
                <LineChartIcon className="h-4 w-4 mr-2" />
                Time-based Analysis
              </TabsTrigger>
              <TabsTrigger value="category">
                <PieChartIcon className="h-4 w-4 mr-2" />
                Category Analysis
              </TabsTrigger>
              <TabsTrigger value="type">
                <BarChartIcon className="h-4 w-4 mr-2" />
                Type Analysis
              </TabsTrigger>
              <TabsTrigger value="status">
                <BarChart2 className="h-4 w-4 mr-2" />
                Status Analysis
              </TabsTrigger>
            </TabsList>

<TabsContent value="time" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>{reportPeriod.charAt(0).toUpperCase() + reportPeriod.slice(1)} Revenue Trend</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        amount: {
                          label: "Amount ($)",
                          color: "hsl(var(--chart-1))",
                        },
                        transactions: {
                          label: "Transaction Count",
                          color: "hsl(var(--chart-2))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={timeData} margin={{ top: 5, right: 30, left: 20, bottom: 30 }}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis
                            dataKey={
                              reportPeriod === "daily"
                                ? "date"
                                : reportPeriod === "weekly"
                                  ? "week"
                                  : reportPeriod === "monthly"
                                    ? "month"
                                    : reportPeriod === "quarterly"
                                      ? "quarter"
                                      : "year"
                            }
                            angle={-45}
                            textAnchor="end"
                            height={60}
                          />
                          <YAxis yAxisId="left" orientation="left" />
                          <YAxis yAxisId="right" orientation="right" />
                          <ChartTooltip />
                          <Legend />
                          <Line
                            yAxisId="left"
                            type="monotone"
                            dataKey="value"
                            name="Revenue"
                            stroke="var(--color-amount)"
                            activeDot={{ r: 8 }}
                          />
                          <Line
                            yAxisId="right"
                            type="monotone"
                            dataKey="count"
                            name="Transactions"
                            stroke="var(--color-transactions)"
                          />
                        </LineChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <div className="flex space-x-2">
                    <Badge variant="outline">
                      <Calendar className="h-3.5 w-3.5 mr-1" />
                      {reportPeriod.charAt(0).toUpperCase() + reportPeriod.slice(1)} View
                    </Badge>
                    <Badge variant="outline">
                      <Filter className="h-3.5 w-3.5 mr-1" />
                      {selectedCategory === "all" ? "All Categories" : selectedCategory}
                    </Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <Printer className="h-3.5 w-3.5 mr-1" />
                      Print
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="h-3.5 w-3.5 mr-1" />
                      Export
                    </Button>
                    <Button variant="outline" size="sm">
                      <Share2 className="h-3.5 w-3.5 mr-1" />
                      Share
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="category" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Revenue by Category</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        amount: {
                          label: "Amount ($)",
                          color: "hsl(var(--chart-1))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <PieChart margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                          <Pie
                            data={categoryData}
                            cx="50%"
                            cy="50%"
                            labelLine={true}
                            label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                            outerRadius={120}
                            fill="#8884d8"
                            dataKey="value"
                          >
                            {categoryData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                            ))}
                          </Pie>
                          <ChartTooltip formatter={(value: number) => [`$${value.toFixed(2)}`, "Amount"]} />
                          <Legend />
                        </PieChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <div className="flex space-x-2">
                    <Badge variant="outline">
                      <Calendar className="h-3.5 w-3.5 mr-1" />
                      {`${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`}
                    </Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <Printer className="h-3.5 w-3.5 mr-1" />
                      Print
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="h-3.5 w-3.5 mr-1" />
                      Export
                    </Button>
                    <Button variant="outline" size="sm">
                      <Share2 className="h-3.5 w-3.5 mr-1" />
                      Share
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="type" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Revenue by Transaction Type</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        amount: {
                          label: "Amount ($)",
                          color: "hsl(var(--chart-1))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={typeData} margin={{ top: 5, right: 30, left: 20, bottom: 30 }}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="name" angle={0} />
                          <YAxis />
                          <ChartTooltip formatter={(value: number) => [`$${value.toFixed(2)}`, "Amount"]} />
                          <Legend />
                          <Bar dataKey="value" name="Amount" fill="var(--color-amount)">
                            {typeData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                            ))}
                          </Bar>
                        </BarChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <div className="flex space-x-2">
                    <Badge variant="outline">
                      <Calendar className="h-3.5 w-3.5 mr-1" />
                      {`${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`}
                    </Badge>
                    <Badge variant="outline">
                      <Filter className="h-3.5 w-3.5 mr-1" />
                      {selectedCategory === "all" ? "All Categories" : selectedCategory}
                    </Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <Printer className="h-3.5 w-3.5 mr-1" />
                      Print
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="h-3.5 w-3.5 mr-1" />
                      Export
                    </Button>
                    <Button variant="outline" size="sm">
                      <Share2 className="h-3.5 w-3.5 mr-1" />
                      Share
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="status" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Revenue by Status</CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        amount: {
                          label: "Amount ($)",
                          color: "hsl(var(--chart-1))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <BarChart
                          data={statusData}
                          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                          layout="vertical"
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis type="number" />
                          <YAxis dataKey="name" type="category" />
                          <ChartTooltip formatter={(value: number) => [`$${value.toFixed(2)}`, "Amount"]} />
                          <Legend />
                          <Bar dataKey="value" name="Amount" fill="var(--color-amount)">
                            {statusData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                            ))}
                          </Bar>
                        </BarChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <div className="flex space-x-2">
                    <Badge variant="outline">
                      <Calendar className="h-3.5 w-3.5 mr-1" />
                      {`${dateRange.from.toLocaleDateString()} - ${dateRange.to.toLocaleDateString()}`}
                    </Badge>
                    <Badge variant="outline">
                      <Filter className="h-3.5 w-3.5 mr-1" />
                      {selectedCategory === "all" ? "All Categories" : selectedCategory}
                    </Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="outline" size="sm">
                      <Printer className="h-3.5 w-3.5 mr-1" />
                      Print
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="h-3.5 w-3.5 mr-1" />
                      Export
                    </Button>
                    <Button variant="outline" size="sm">
                      <Share2 className="h-3.5 w-3.5 mr-1" />
                      Share
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/date-range-picker.tsx"
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface DateRangePickerProps extends React.HTMLAttributes<HTMLDivElement> {
  from: Date
  to: Date
  onSelect: (range: DateRange | undefined) => void
}

export function DateRangePicker({ className, from, to, onSelect }: DateRangePickerProps) {
  const [date, setDate] = React.useState<DateRange | undefined>({
    from,
    to,
  })

React.useEffect(() => {
    setDate({ from, to })
  }, [from, to])

return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                </>
              ) : (
                format(date.from, "LLL dd, y")
              )
            ) : (
              <span>Pick a date</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={from}
            selected={date}
            onSelect={(newDate) => {
              setDate(newDate)
              onSelect(newDate)
            }}
            numberOfMonths={2}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
"use client"

import type * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/tracking/workflow-management.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Download,
  FileCheck,
  FileDown,
  FileText,
  Plus,
  Send,
  UserCheck,
  CheckCircle,
  XCircle,
  AlertCircle,
  Eye,
  Loader2,
} from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"

interface WorkflowItem {
  id: string
  title: string
  type: string
  description: string
  status: "draft" | "submitted" | "in_review" | "approved" | "rejected"
  createdAt: string
  dueAt?: string
  submittedAt?: string
  reviewedAt?: string
  approvedAt?: string
  rejectedAt?: string
  creator: User
  reviewer?: User
  approver?: User
  comments: WorkflowComment[]
  attachments: WorkflowAttachment[]
  reportData?: any
}

interface WorkflowComment {
  id: string
  content: string
  createdAt: string
  user: User
}

interface WorkflowAttachment {
  id: string
  name: string
  type: string
  size: number
  url: string
  createdAt: string
}

interface User {
  id: string
  name: string
  email: string
  role: "staff" | "supervisor" | "manager" | "director"
  avatar?: string
}

// Mock current user
const currentUser: User = {
  id: "user-1",
  name: "John Doe",
  email: "john.doe@example.com",
  role: "staff",
  avatar: "/stylized-jd-initials.png",
}

// Mock workflow items
const mockWorkflowItems: WorkflowItem[] = [
  {
    id: "wf-001",
    title: "Monthly Sales Report - May 2025",
    type: "monthly_report",
    description: "Complete sales analysis for May 2025 including trends, product performance, and regional breakdown.",
    status: "approved",
    createdAt: "2025-06-01T09:00:00Z",
    dueAt: "2025-06-05T17:00:00Z",
    submittedAt: "2025-06-03T14:30:00Z",
    reviewedAt: "2025-06-04T10:15:00Z",
    approvedAt: "2025-06-04T16:45:00Z",
    creator: {
      id: "user-1",
      name: "John Doe",
      email: "john.doe@example.com",
      role: "staff",
      avatar: "/stylized-jd-initials.png",
    },
    reviewer: {
      id: "user-2",
      name: "Jane Smith",
      email: "jane.smith@example.com",
      role: "supervisor",
      avatar: "/javascript-code.png",
    },
    approver: {
      id: "user-3",
      name: "Michael Johnson",
      email: "michael.johnson@example.com",
      role: "director",
      avatar: "/abstract-geometric-mj.png",
    },
    comments: [
      {
        id: "comment-1",
        content: "Great work on the regional breakdown analysis!",
        createdAt: "2025-06-04T11:30:00Z",
        user: {
          id: "user-2",
          name: "Jane Smith",
          email: "jane.smith@example.com",
          role: "supervisor",
          avatar: "/javascript-code.png",
        },
      },
      {
        id: "comment-2",
        content: "Approved. The year-over-year comparisons are particularly insightful.",
        createdAt: "2025-06-04T16:45:00Z",
        user: {
          id: "user-3",
          name: "Michael Johnson",
          email: "michael.johnson@example.com",
          role: "director",
          avatar: "/abstract-geometric-mj.png",
        },
      },
    ],
    attachments: [
      {
        id: "attach-1",
        name: "may_2025_sales_report.pdf",
        type: "application/pdf",
        size: 2456000,
        url: "#",
        createdAt: "2025-06-03T14:30:00Z",
      },
      {
        id: "attach-2",
        name: "sales_raw_data.xlsx",
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        size: 1230000,
        url: "#",
        createdAt: "2025-06-03T14:30:00Z",
      },
    ],
  },
  {
    id: "wf-002",
    title: "Weekly Product Performance - Week 22",
    type: "weekly_report",
    description: "Analysis of product performance for week 22, including top sellers and inventory status.",
    status: "in_review",
    createdAt: "2025-05-30T11:20:00Z",
    dueAt: "2025-06-02T17:00:00Z",
    submittedAt: "2025-06-01T16:45:00Z",
    creator: {
      id: "user-1",
      name: "John Doe",
      email: "john.doe@example.com",
      role: "staff",
      avatar: "/stylized-jd-initials.png",
    },
    reviewer: {
      id: "user-2",
      name: "Jane Smith",
      email: "jane.smith@example.com",
      role: "supervisor",
      avatar: "/javascript-code.png",
    },
    comments: [
      {
        id: "comment-3",
        content: "Please add more details about inventory turnover rates for the top products.",
        createdAt: "2025-06-02T09:15:00Z",
        user: {
          id: "user-2",
          name: "Jane Smith",
          email: "jane.smith@example.com",
          role: "supervisor",
          avatar: "/javascript-code.png",
        },
      },
    ],
    attachments: [
      {
        id: "attach-3",
        name: "week22_product_performance.pdf",
        type: "application/pdf",
        size: 1820000,
        url: "#",
        createdAt: "2025-06-01T16:45:00Z",
      },
    ],
  },
  {
    id: "wf-003",
    title: "Daily Operations Summary - June 3, 2025",
    type: "daily_report",
    description:
      "Summary of daily operations including transaction volume, customer service metrics, and logistics performance.",
    status: "draft",
    createdAt: "2025-06-03T16:30:00Z",
    dueAt: "2025-06-04T10:00:00Z",
    creator: {
      id: "user-1",
      name: "John Doe",
      email: "john.doe@example.com",
      role: "staff",
      avatar: "/stylized-jd-initials.png",
    },
    comments: [],
    attachments: [],
  },
]

export function WorkflowManagement() {
  const [workflowItems, setWorkflowItems] = useState<WorkflowItem[]>(mockWorkflowItems)
  const [activeItemId, setActiveItemId] = useState<string | null>(null)
  const [filterStatus, setFilterStatus] = useState<string>("all")
  const [filterType, setFilterType] = useState<string>("all")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [newComment, setNewComment] = useState("")
  const [signatureConfirmation, setSignatureConfirmation] = useState("")

const activeItem = workflowItems.find((item) => item.id === activeItemId)

const filteredItems = workflowItems.filter((item) => {
    const matchesStatus = filterStatus === "all" || item.status === filterStatus
    const matchesType = filterType === "all" || item.type === filterType
    return matchesStatus && matchesType
  })

const handleItemClick = (id: string) => {
    setActiveItemId(id)
  }

const handleSubmitReport = (itemId: string) => {
    setIsSubmitting(true)

// Simulate submission delay
    setTimeout(() => {
      setWorkflowItems((prev) =>
        prev.map((item) => {
          if (item.id === itemId) {
            return {
              ...item,
              status: "submitted",
              submittedAt: new Date().toISOString(),
            }
          }
          return item
        }),
      )
      setIsSubmitting(false)
    }, 1500)
  }

const handleApproveReport = (itemId: string) => {
    if (signatureConfirmation !== currentUser.name) {
      return
    }

setWorkflowItems((prev) =>
      prev.map((item) => {
        if (item.id === itemId) {
          const newStatus = item.status === "in_review" ? "approved" : item.status
          return {
            ...item,
            status: newStatus,
            approvedAt: new Date().toISOString(),
            approver: currentUser,
          }
        }
        return item
      }),
    )

setSignatureConfirmation("")
  }

const handleRejectReport = (itemId: string) => {
    if (signatureConfirmation !== currentUser.name) {
      return
    }

setWorkflowItems((prev) =>
      prev.map((item) => {
        if (item.id === itemId) {
          return {
            ...item,
            status: "rejected",
            rejectedAt: new Date().toISOString(),
          }
        }
        return item
      }),
    )

setSignatureConfirmation("")
  }

const handleReviewReport = (itemId: string) => {
    if (signatureConfirmation !== currentUser.name) {
      return
    }

setWorkflowItems((prev) =>
      prev.map((item) => {
        if (item.id === itemId) {
          const newStatus = item.status === "submitted" ? "in_review" : item.status
          return {
            ...item,
            status: newStatus,
            reviewedAt: new Date().toISOString(),
            reviewer: currentUser,
          }
        }
        return item
      }),
    )

setSignatureConfirmation("")
  }

const handleAddComment = (itemId: string) => {
    if (!newComment.trim()) return

const comment: WorkflowComment = {
      id: `comment-${Date.now()}`,
      content: newComment,
      createdAt: new Date().toISOString(),
      user: currentUser,
    }

setWorkflowItems((prev) =>
      prev.map((item) => {
        if (item.id === itemId) {
          return {
            ...item,
            comments: [...item.comments, comment],
          }
        }
        return item
      }),
    )

setNewComment("")
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return "N/A"
    const date = new Date(dateString)
    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
  }

const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "draft":
        return "bg-gray-200 text-gray-800"
      case "submitted":
        return "bg-blue-100 text-blue-800"
      case "in_review":
        return "bg-yellow-100 text-yellow-800"
      case "approved":
        return "bg-green-100 text-green-800"
      case "rejected":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "draft":
        return <FileText className="h-4 w-4" />
      case "submitted":
        return <Send className="h-4 w-4" />
      case "in_review":
        return <Eye className="h-4 w-4" />
      case "approved":
        return <CheckCircle className="h-4 w-4" />
      case "rejected":
        return <XCircle className="h-4 w-4" />
      default:
        return <AlertCircle className="h-4 w-4" />
    }
  }

const getReportTypeLabel = (type: string) => {
    switch (type) {
      case "daily_report":
        return "Daily Report"
      case "weekly_report":
        return "Weekly Report"
      case "monthly_report":
        return "Monthly Report"
      case "quarterly_report":
        return "Quarterly Report"
      case "annual_report":
        return "Annual Report"
      case "product_report":
        return "Product Report"
      case "service_report":
        return "Service Report"
      case "sales_report":
        return "Sales Report"
      default:
        return type
          .split("_")
          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
          .join(" ")
    }
  }

const getWorkflowProgress = (item: WorkflowItem) => {
    switch (item.status) {
      case "draft":
        return 25
      case "submitted":
        return 50
      case "in_review":
        return 75
      case "approved":
        return 100
      case "rejected":
        return 100
      default:
        return 0
    }
  }

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Workflow Management</h2>
          <p className="text-muted-foreground">
            Create, submit, review, and approve reports through a structured workflow
          </p>
        </div>

<div className="flex items-center gap-2">
          <Select value={filterStatus} onValueChange={setFilterStatus}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="draft">Drafts</SelectItem>
              <SelectItem value="submitted">Submitted</SelectItem>
              <SelectItem value="in_review">In Review</SelectItem>
              <SelectItem value="approved">Approved</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
            </SelectContent>
          </Select>

<Select value={filterType} onValueChange={setFilterType}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Types</SelectItem>
              <SelectItem value="daily_report">Daily Reports</SelectItem>
              <SelectItem value="weekly_report">Weekly Reports</SelectItem>
              <SelectItem value="monthly_report">Monthly Reports</SelectItem>
              <SelectItem value="quarterly_report">Quarterly Reports</SelectItem>
              <SelectItem value="annual_report">Annual Reports</SelectItem>
            </SelectContent>
          </Select>

<Dialog>
            <DialogTrigger asChild>
              <Button>
                <Plus className="h-4 w-4 mr-2" />
                New Report
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[600px]">
              <DialogHeader>
                <DialogTitle>Create New Report</DialogTitle>
                <DialogDescription>Create a new report to be submitted through the workflow</DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="report-title">Report Title</Label>
                  <Input id="report-title" placeholder="Enter report title" />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="report-type">Report Type</Label>
                  <Select>
                    <SelectTrigger id="report-type">
                      <SelectValue placeholder="Select report type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily_report">Daily Report</SelectItem>
                      <SelectItem value="weekly_report">Weekly Report</SelectItem>
                      <SelectItem value="monthly_report">Monthly Report</SelectItem>
                      <SelectItem value="quarterly_report">Quarterly Report</SelectItem>
                      <SelectItem value="annual_report">Annual Report</SelectItem>
                      <SelectItem value="product_report">Product Report</SelectItem>
                      <SelectItem value="service_report">Service Report</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="report-description">Description</Label>
                  <Textarea id="report-description" placeholder="Enter report description" />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="report-due">Due Date</Label>
                  <Input id="report-due" type="datetime-local" />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="report-attachments">Attachments</Label>
                  <Input id="report-attachments" type="file" multiple />
                </div>
              </div>
              <DialogFooter>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
                <Button type="button">Create Draft</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle>Report List</CardTitle>
              <CardDescription>{filteredItems.length} reports found</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[600px] pr-4">
                <div className="space-y-4">
                  {filteredItems.length === 0 ? (
                    <div className="text-center p-4 text-muted-foreground">No reports found matching your filters</div>
                  ) : (
                    filteredItems.map((item) => (
                      <div
                        key={item.id}
                        className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                          activeItemId === item.id ? "border-primary bg-primary/5" : ""
                        }`}
                        onClick={() => handleItemClick(item.id)}
                      >
                        <div className="flex justify-between items-start mb-2">
                          <h3 className="font-medium line-clamp-1">{item.title}</h3>
                          <Badge className={`${getStatusColor(item.status)} flex items-center gap-1`}>
                            {getStatusIcon(item.status)}
                            <span className="capitalize">{item.status.replace("_", " ")}</span>
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground line-clamp-2 mb-2">{item.description}</p>
                        <div className="flex justify-between items-center text-xs text-muted-foreground">
                          <span>{getReportTypeLabel(item.type)}</span>
                          <span>{new Date(item.createdAt).toLocaleDateString()}</span>
                        </div>
                        <Progress className="mt-2 h-1" value={getWorkflowProgress(item)} />
                      </div>
                    ))
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </div>

<div className="md:col-span-2">
          {activeItem ? (
            <Card>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <Badge className={`${getStatusColor(activeItem.status)} mb-2 flex items-center gap-1`}>
                      {getStatusIcon(activeItem.status)}
                      <span className="capitalize">{activeItem.status.replace("_", " ")}</span>
                    </Badge>
                    <CardTitle>{activeItem.title}</CardTitle>
                    <CardDescription>{getReportTypeLabel(activeItem.type)}</CardDescription>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      <FileDown className="h-4 w-4 mr-2" />
                      Export
                    </Button>
                    {activeItem.status === "draft" && (
                      <Button size="sm" onClick={() => handleSubmitReport(activeItem.id)} disabled={isSubmitting}>
                        {isSubmitting ? (
                          <>
                            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                            Submitting...
                          </>
                        ) : (
                          <>
                            <Send className="h-4 w-4 mr-2" />
                            Submit
                          </>
                        )}
                      </Button>
                    )}
                  </div>
                </div>
              </CardHeader>

<CardContent>
                <Tabs defaultValue="details">
                  <TabsList>
                    <TabsTrigger value="details">Details</TabsTrigger>
                    <TabsTrigger value="workflow">Workflow</TabsTrigger>
                    <TabsTrigger value="comments">
                      Comments
                      <Badge className="ml-2" variant="secondary">
                        {activeItem.comments.length}
                      </Badge>
                    </TabsTrigger>
                    <TabsTrigger value="attachments">
                      Attachments
                      <Badge className="ml-2" variant="secondary">
                        {activeItem.attachments.length}
                      </Badge>
                    </TabsTrigger>
                  </TabsList>

<TabsContent value="details" className="space-y-4">
                    <div className="border rounded-lg p-4 mt-4">
                      <h3 className="font-medium mb-2">Description</h3>
                      <p className="text-muted-foreground">{activeItem.description}</p>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="border rounded-lg p-4">
                        <h3 className="font-medium mb-3">Report Information</h3>
                        <div className="space-y-2">
                          <div className="flex justify-between items-center">
                            <span className="text-sm text-muted-foreground">Created At:</span>
                            <span className="text-sm">{formatDate(activeItem.createdAt)}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-sm text-muted-foreground">Due Date:</span>
                            <span className="text-sm">{formatDate(activeItem.dueAt)}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-sm text-muted-foreground">Submitted At:</span>
                            <span className="text-sm">{formatDate(activeItem.submittedAt)}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-sm text-muted-foreground">Current Status:</span>
                            <Badge className={getStatusColor(activeItem.status)}>
                              {activeItem.status.replace("_", " ")}
                            </Badge>
                          </div>
                        </div>
                      </div>

<div className="border rounded-lg p-4">
                        <h3 className="font-medium mb-3">Participants</h3>
                        <div className="space-y-3">
                          <div className="flex items-center gap-3">
                            <Avatar>
                              <AvatarImage
                                src={activeItem.creator.avatar || "/placeholder.svg"}
                                alt={activeItem.creator.name}
                              />
                              <AvatarFallback>
                                {activeItem.creator.name
                                  .split(" ")
                                  .map((n) => n[0])
                                  .join("")}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <p className="text-sm font-medium">{activeItem.creator.name}</p>
                              <p className="text-xs text-muted-foreground">Creator • {activeItem.creator.role}</p>
                            </div>
                          </div>

{activeItem.reviewer && (
                            <div className="flex items-center gap-3">
                              <Avatar>
                                <AvatarImage
                                  src={activeItem.reviewer.avatar || "/placeholder.svg"}
                                  alt={activeItem.reviewer.name}
                                />
                                <AvatarFallback>
                                  {activeItem.reviewer.name
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div>
                                <p className="text-sm font-medium">{activeItem.reviewer.name}</p>
                                <p className="text-xs text-muted-foreground">Reviewer • {activeItem.reviewer.role}</p>
                              </div>
                            </div>
                          )}

{activeItem.approver && (
                            <div className="flex items-center gap-3">
                              <Avatar>
                                <AvatarImage
                                  src={activeItem.approver.avatar || "/placeholder.svg"}
                                  alt={activeItem.approver.name}
                                />
                                <AvatarFallback>
                                  {activeItem.approver.name
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div>
                                <p className="text-sm font-medium">{activeItem.approver.name}</p>
                                <p className="text-xs text-muted-foreground">Approver • {activeItem.approver.role}</p>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </TabsContent>

<div className="relative pl-12 pb-8">
                        <div className="absolute left-[22px] top-1 w-4 h-4 rounded-full bg-green-500 border-4 border-background" />
                        <div>
                          <h3 className="font-medium">Report Created</h3>
                          <p className="text-sm text-muted-foreground">
                            {formatDate(activeItem.createdAt)} by {activeItem.creator.name}
                          </p>
                          <Badge variant="outline" className="mt-2 text-xs">
                            Draft
                          </Badge>
                        </div>
                      </div>

{activeItem.submittedAt && (
                        <div className="relative pl-12 pb-8">
                          <div className="absolute left-[22px] top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-background" />
                          <div>
                            <h3 className="font-medium">Report Submitted</h3>
                            <p className="text-sm text-muted-foreground">
                              {formatDate(activeItem.submittedAt)} by {activeItem.creator.name}
                            </p>
                            <Badge variant="outline" className="mt-2 text-xs">
                              Submitted
                            </Badge>
                          </div>
                        </div>
                      )}

{activeItem.reviewedAt && (
                        <div className="relative pl-12 pb-8">
                          <div className="absolute left-[22px] top-1 w-4 h-4 rounded-full bg-yellow-500 border-4 border-background" />
                          <div>
                            <h3 className="font-medium">Report Reviewed</h3>
                            <p className="text-sm text-muted-foreground">
                              {formatDate(activeItem.reviewedAt)} by {activeItem.reviewer?.name}
                            </p>
                            <Badge variant="outline" className="mt-2 text-xs">
                              In Review
                            </Badge>
                          </div>
                        </div>
                      )}

{activeItem.approvedAt && (
                        <div className="relative pl-12">
                          <div className="absolute left-[22px] top-1 w-4 h-4 rounded-full bg-green-500 border-4 border-background" />
                          <div>
                            <h3 className="font-medium">Report Approved</h3>
                            <p className="text-sm text-muted-foreground">
                              {formatDate(activeItem.approvedAt)} by {activeItem.approver?.name}
                            </p>
                            <Badge variant="outline" className="mt-2 text-xs">
                              Approved
                            </Badge>
                          </div>
                        </div>
                      )}

{activeItem.rejectedAt && (
                        <div className="relative pl-12">
                          <div className="absolute left-[22px] top-1 w-4 h-4 rounded-full bg-red-500 border-4 border-background" />
                          <div>
                            <h3 className="font-medium">Report Rejected</h3>
                            <p className="text-sm text-muted-foreground">
                              {formatDate(activeItem.rejectedAt)} by{" "}
                              {activeItem.reviewer?.name || activeItem.approver?.name}
                            </p>
                            <Badge variant="outline" className="mt-2 text-xs">
                              Rejected
                            </Badge>
                          </div>
                        </div>
                      )}
                    </div>

{/* Next Actions */}
                    {activeItem.status !== "approved" && activeItem.status !== "rejected" && (
                      <div className="bg-muted/50 p-4 rounded-lg">
                        <h3 className="font-medium mb-2">Next Actions</h3>

{activeItem.status === "draft" && (
                          <div className="space-y-2">
                            <p className="text-sm text-muted-foreground">
                              This report is still in draft state and needs to be submitted.
                            </p>
                            <Button onClick={() => handleSubmitReport(activeItem.id)} disabled={isSubmitting}>
                              {isSubmitting ? (
                                <>
                                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                                  Submitting...
                                </>
                              ) : (
                                <>
                                  <Send className="h-4 w-4 mr-2" />
                                  Submit Report
                                </>
                              )}
                            </Button>
                          </div>
                        )}

{activeItem.status === "submitted" && (
                          <div className="space-y-2">
                            <p className="text-sm text-muted-foreground">
                              This report has been submitted and is waiting for review by a supervisor.
                            </p>
                            <Dialog>
                              <DialogTrigger asChild>
                                <Button>
                                  <UserCheck className="h-4 w-4 mr-2" />
                                  Mark as Reviewed
                                </Button>
                              </DialogTrigger>
                              <DialogContent>
                                <DialogHeader>
                                  <DialogTitle>Confirm Review</DialogTitle>
                                  <DialogDescription>
                                    Are you sure you want to mark this report as reviewed? This action will update the
                                    workflow status.
                                  </DialogDescription>
                                </DialogHeader>
                                <div className="py-4">
                                  <p className="text-sm text-muted-foreground mb-4">
                                    Type your name below to confirm this action. This will serve as your digital
                                    signature.
                                  </p>
                                  <Input
                                    value={signatureConfirmation}
                                    onChange={(e) => setSignatureConfirmation(e.target.value)}
                                    placeholder="Type your full name"
                                  />
                                </div>
                                <DialogFooter>
                                  <Button variant="outline" onClick={() => setSignatureConfirmation("")}>
                                    Cancel
                                  </Button>
                                  <Button
                                    onClick={() => handleReviewReport(activeItem.id)}
                                    disabled={signatureConfirmation !== currentUser.name}
                                  >
                                    Confirm Review
                                  </Button>
                                </DialogFooter>
                              </DialogContent>
                            </Dialog>
                          </div>
                        )}

{activeItem.status === "in_review" && (
                          <div className="space-y-4">
                            <p className="text-sm text-muted-foreground">
                              This report has been reviewed and is waiting for final approval.
                            </p>
                            <div className="flex gap-2">
                              <Dialog>
                                <DialogTrigger asChild>
                                  <Button>
                                    <CheckCircle className="h-4 w-4 mr-2" />
                                    Approve Report
                                  </Button>
                                </DialogTrigger>
                                <DialogContent>
                                  <DialogHeader>
                                    <DialogTitle>Confirm Approval</DialogTitle>
                                    <DialogDescription>
                                      Are you sure you want to approve this report? This action will mark the workflow
                                      as complete.
                                    </DialogDescription>
                                  </DialogHeader>
                                  <div className="py-4">
                                    <p className="text-sm text-muted-foreground mb-4">
                                      Type your name below to confirm this action. This will serve as your digital
                                      signature.
                                    </p>
                                    <Input
                                      value={signatureConfirmation}
                                      onChange={(e) => setSignatureConfirmation(e.target.value)}
                                      placeholder="Type your full name"
                                    />
                                  </div>
                                  <DialogFooter>
                                    <Button variant="outline" onClick={() => setSignatureConfirmation("")}>
                                      Cancel
                                    </Button>
                                    <Button
                                      onClick={() => handleApproveReport(activeItem.id)}
                                      disabled={signatureConfirmation !== currentUser.name}
                                    >
                                      Confirm Approval
                                    </Button>
                                  </DialogFooter>
                                </DialogContent>
                              </Dialog>

<Dialog>
                                <DialogTrigger asChild>
                                  <Button variant="outline">
                                    <XCircle className="h-4 w-4 mr-2" />
                                    Reject Report
                                  </Button>
                                </DialogTrigger>
                                <DialogContent>
                                  <DialogHeader>
                                    <DialogTitle>Confirm Rejection</DialogTitle>
                                    <DialogDescription>
                                      Are you sure you want to reject this report? The report will need to be revised
                                      and resubmitted.
                                    </DialogDescription>
                                  </DialogHeader>
                                  <div className="py-4">
                                    <p className="text-sm text-muted-foreground mb-4">
                                      Type your name below to confirm this action. This will serve as your digital
                                      signature.
                                    </p>
                                    <Input
                                      value={signatureConfirmation}
                                      onChange={(e) => setSignatureConfirmation(e.target.value)}
                                      placeholder="Type your full name"
                                    />
                                  </div>
                                  <DialogFooter>
                                    <Button variant="outline" onClick={() => setSignatureConfirmation("")}>
                                      Cancel
                                    </Button>
                                    <Button
                                      variant="destructive"
                                      onClick={() => handleRejectReport(activeItem.id)}
                                      disabled={signatureConfirmation !== currentUser.name}
                                    >
                                      Confirm Rejection
                                    </Button>
                                  </DialogFooter>
                                </DialogContent>
                              </Dialog>
                            </div>
                          </div>
                        )}
                      </div>
                    )}
                  </TabsContent>

<TabsContent value="comments" className="space-y-4 mt-4">
                    <ScrollArea className="h-[300px] pr-4">
                      {activeItem.comments.length === 0 ? (
                        <div className="text-center p-6 text-muted-foreground">No comments yet</div>
                      ) : (
                        <div className="space-y-4">
                          {activeItem.comments.map((comment) => (
                            <div key={comment.id} className="flex gap-4 p-4 border rounded-lg">
                              <Avatar>
                                <AvatarImage src={comment.user.avatar || "/placeholder.svg"} alt={comment.user.name} />
                                <AvatarFallback>
                                  {comment.user.name
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div className="flex-1">
                                <div className="flex justify-between items-center mb-2">
                                  <span className="font-medium">{comment.user.name}</span>
                                  <span className="text-xs text-muted-foreground">{formatDate(comment.createdAt)}</span>
                                </div>
                                <p className="text-sm">{comment.content}</p>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </ScrollArea>

<div className="pt-4 border-t space-y-4">
                      <h3 className="font-medium">Add a Comment</h3>
                      <Textarea
                        placeholder="Type your comment here..."
                        value={newComment}
                        onChange={(e) => setNewComment(e.target.value)}
                      />
                      <Button onClick={() => handleAddComment(activeItem.id)} disabled={!newComment.trim()}>
                        Add Comment
                      </Button>
                    </div>
                  </TabsContent>

<TabsContent value="attachments" className="space-y-4 mt-4">
                    {activeItem.attachments.length === 0 ? (
                      <div className="text-center p-6 text-muted-foreground">No attachments yet</div>
                    ) : (
                      <div className="space-y-2">
                        {activeItem.attachments.map((attachment) => (
                          <div key={attachment.id} className="flex items-center justify-between p-3 border rounded-lg">
                            <div className="flex items-center gap-3">
                              <FileText className="h-8 w-8 text-blue-500" />
                              <div>
                                <p className="font-medium">{attachment.name}</p>
                                <p className="text-xs text-muted-foreground">
                                  {formatFileSize(attachment.size)} • Added {formatDate(attachment.createdAt)}
                                </p>
                              </div>
                            </div>
                            <Button variant="ghost" size="sm">
                              <Download className="h-4 w-4" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}

<div className="pt-4 border-t">
                      <h3 className="font-medium mb-2">Add Attachments</h3>
                      <div className="flex items-center gap-2">
                        <Input type="file" id="attachment" />
                        <Button>Upload</Button>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="flex flex-col items-center justify-center min-h-[400px] text-center p-6">
                <FileCheck className="h-16 w-16 text-muted-foreground mb-4" />
                <h3 className="text-xl font-medium mb-2">No Report Selected</h3>
                <p className="text-muted-foreground mb-4">
                  Select a report from the list to view its details and manage its workflow
                </p>
                <Dialog>
                  <DialogTrigger asChild>
                    <Button>
                      <Plus className="h-4 w-4 mr-2" />
                      Create New Report
                    </Button>
                  </DialogTrigger>
                  <DialogContent>{/* Dialog content would be the same as above */}</DialogContent>
                </Dialog>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/archive-management.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Calendar,
  Download,
  Eye,
  File,
  FileArchive,
  FileSpreadsheet,
  FileText,
  FolderOpen,
  Printer,
  Search,
  SlidersHorizontal,
  Trash2,
} from "lucide-react"
import { DataTable } from "@/components/ui/data-table"
import type { ColumnDef } from "@tanstack/react-table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { DateRangePicker } from "@/components/ui/date-range-picker"

interface ArchiveItem {
  id: string
  title: string
  type: string
  category: string
  reportDate: string
  archivedDate: string
  archivedBy: string
  fileType: string
  fileSize: number
  tags: string[]
  status: string
  department: string
  viewCount: number
  downloadCount: number
}

// Mock archive data
const mockArchiveData: ArchiveItem[] = Array.from({ length: 50 }).map((_, i) => {
  const types = ["daily", "weekly", "monthly", "quarterly", "annual"]
  const categories = ["sales", "finance", "inventory", "marketing", "operations"]
  const fileTypes = ["pdf", "xlsx", "docx", "csv", "json"]
  const statuses = ["active", "archived", "confidential"]
  const departments = ["sales", "marketing", "finance", "operations", "executive"]
  const tags = ["important", "financial", "audit", "tax", "budget", "forecast", "report", "analysis"]

const randomDate = (start: Date, end: Date) => {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
  }

const reportDate = randomDate(new Date(2024, 0, 1), new Date()).toISOString()
  const archivedDate = randomDate(new Date(reportDate), new Date()).toISOString()

const randomTags = Array.from({ length: Math.floor(Math.random() * 3) + 1 }).map(() => {
    return tags[Math.floor(Math.random() * tags.length)]
  })

return {
    id: `arch-${(i + 1).toString().padStart(3, "0")}`,
    title: `${types[Math.floor(Math.random() * types.length)].charAt(0).toUpperCase() + types[Math.floor(Math.random() * types.length)].slice(1)} ${categories[Math.floor(Math.random() * categories.length)].charAt(0).toUpperCase() + categories[Math.floor(Math.random() * categories.length)].slice(1)} Report ${i + 1}`,
    type: types[Math.floor(Math.random() * types.length)],
    category: categories[Math.floor(Math.random() * categories.length)],
    reportDate,
    archivedDate,
    archivedBy: ["John Doe", "Jane Smith", "Michael Johnson"][Math.floor(Math.random() * 3)],
    fileType: fileTypes[Math.floor(Math.random() * fileTypes.length)],
    fileSize: Math.floor(Math.random() * 5000000) + 500000, // Random between 500KB and 5MB
    tags: [...new Set(randomTags)], // Remove duplicates
    status: statuses[Math.floor(Math.random() * statuses.length)],
    department: departments[Math.floor(Math.random() * departments.length)],
    viewCount: Math.floor(Math.random() * 50),
    downloadCount: Math.floor(Math.random() * 30),
  }
})

export function ArchiveManagement() {
  const [searchQuery, setSearchQuery] = useState("")
  const [filterType, setFilterType] = useState("all")
  const [filterCategory, setFilterCategory] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")
  const [filterFileType, setFilterFileType] = useState("all")
  const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
    from: new Date(new Date().setMonth(new Date().getMonth() - 3)),
    to: new Date(),
  })
  const [selectedItem, setSelectedItem] = useState<ArchiveItem | null>(null)
  const [selectedItems, setSelectedItems] = useState<string[]>([])

// Filter archive data
  const filteredData = mockArchiveData.filter((item) => {
    const matchesSearch =
      item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))

const matchesType = filterType === "all" || item.type === filterType
    const matchesCategory = filterCategory === "all" || item.category === filterCategory
    const matchesStatus = filterStatus === "all" || item.status === filterStatus
    const matchesFileType = filterFileType === "all" || item.fileType === filterFileType

const itemDate = new Date(item.reportDate)
    const matchesDate = itemDate >= dateRange.from && itemDate <= dateRange.to

return matchesSearch && matchesType && matchesCategory && matchesStatus && matchesFileType && matchesDate
  })

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

const getFileIcon = (fileType: string) => {
    switch (fileType) {
      case "pdf":
        return <FileText className="h-8 w-8 text-red-500" />
      case "xlsx":
        return <FileSpreadsheet className="h-8 w-8 text-green-500" />
      case "docx":
        return <File className="h-8 w-8 text-blue-500" />
      case "csv":
        return <FileSpreadsheet className="h-8 w-8 text-emerald-500" />
      case "json":
        return <FileText className="h-8 w-8 text-amber-500" />
      default:
        return <File className="h-8 w-8 text-gray-500" />
    }
  }

const handleViewItem = (item: ArchiveItem) => {
    setSelectedItem(item)
  }

const handleSelectItem = (id: string, selected: boolean) => {
    if (selected) {
      setSelectedItems([...selectedItems, id])
    } else {
      setSelectedItems(selectedItems.filter((i) => i !== id))
    }
  }

const handleBulkDownload = () => {
    console.log("Downloading selected items:", selectedItems)
    // Implementation would handle the bulk download process
  }

// Table columns definition
  const columns: ColumnDef<ArchiveItem>[] = [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "title",
      header: "Title",
      cell: ({ row }) => {
        const item = row.original
        return (
          <div className="flex items-start gap-3">
            {getFileIcon(item.fileType)}
            <div>
              <div className="font-medium">{item.title}</div>
              <div className="text-xs text-muted-foreground">ID: {item.id}</div>
            </div>
          </div>
        )
      },
    },
    {
      accessorKey: "reportDate",
      header: "Report Date",
      cell: ({ row }) => formatDate(row.original.reportDate),
    },
    {
      accessorKey: "type",
      header: "Type",
      cell: ({ row }) => <span className="capitalize">{row.original.type}</span>,
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => {
        const status = row.original.status
        const statusColors: Record<string, string> = {
          active: "bg-green-100 text-green-800",
          archived: "bg-blue-100 text-blue-800",
          confidential: "bg-red-100 text-red-800",
        }

return <Badge className={statusColors[status] || "bg-gray-100 text-gray-800"}>{status}</Badge>
      },
    },
    {
      accessorKey: "fileType",
      header: "Format",
      cell: ({ row }) => row.original.fileType.toUpperCase(),
    },
    {
      accessorKey: "fileSize",
      header: "Size",
      cell: ({ row }) => formatFileSize(row.original.fileSize),
    },
    {
      id: "actions",
      cell: ({ row }) => {
        const item = row.original
        return (
          <div className="flex gap-1">
            <Button variant="ghost" size="icon" onClick={() => handleViewItem(item)}>
              <Eye className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon">
              <Download className="h-4 w-4" />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  <SlidersHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>Actions</DropdownMenuLabel>
                <DropdownMenuItem className="cursor-pointer">
                  <Printer className="h-4 w-4 mr-2" /> Print
                </DropdownMenuItem>
                <DropdownMenuItem className="cursor-pointer">
                  <Eye className="h-4 w-4 mr-2" /> View Details
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="cursor-pointer text-destructive">
                  <Trash2 className="h-4 w-4 mr-2" /> Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )
      },
    },
  ]

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Archive Management</h2>
          <p className="text-muted-foreground">Search, browse, and retrieve archived reports and documents</p>
        </div>

<div className="flex items-center gap-2">
          <Button variant="outline">
            <FolderOpen className="h-4 w-4 mr-2" />
            New Folder
          </Button>
          <Button>
            <FileArchive className="h-4 w-4 mr-2" />
            Archive Reports
          </Button>
        </div>
      </div>

<Card>
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search by title, ID, or tag..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

<div className="flex flex-wrap gap-2">
              <DateRangePicker
                from={dateRange.from}
                to={dateRange.to}
                onSelect={(range) => {
                  if (range?.from && range?.to) {
                    setDateRange({ from: range.from, to: range.to })
                  }
                }}
              />

<Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger className="w-[130px]">
                  <SelectValue placeholder="Type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="daily">Daily</SelectItem>
                  <SelectItem value="weekly">Weekly</SelectItem>
                  <SelectItem value="monthly">Monthly</SelectItem>
                  <SelectItem value="quarterly">Quarterly</SelectItem>
                  <SelectItem value="annual">Annual</SelectItem>
                </SelectContent>
              </Select>

<Select value={filterCategory} onValueChange={setFilterCategory}>
                <SelectTrigger className="w-[130px]">
                  <SelectValue placeholder="Category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Categories</SelectItem>
                  <SelectItem value="sales">Sales</SelectItem>
                  <SelectItem value="finance">Finance</SelectItem>
                  <SelectItem value="inventory">Inventory</SelectItem>
                  <SelectItem value="marketing">Marketing</SelectItem>
                  <SelectItem value="operations">Operations</SelectItem>
                </SelectContent>
              </Select>

<Select value={filterFileType} onValueChange={setFilterFileType}>
                <SelectTrigger className="w-[130px]">
                  <SelectValue placeholder="File Type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Formats</SelectItem>
                  <SelectItem value="pdf">PDF</SelectItem>
                  <SelectItem value="xlsx">Excel</SelectItem>
                  <SelectItem value="docx">Word</SelectItem>
                  <SelectItem value="csv">CSV</SelectItem>
                  <SelectItem value="json">JSON</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>

<CardContent>
          <Tabs defaultValue="table">
            <TabsList className="mb-4">
              <TabsTrigger value="table">
                <FileText className="h-4 w-4 mr-2" />
                Table View
              </TabsTrigger>
              <TabsTrigger value="grid">
                <FolderOpen className="h-4 w-4 mr-2" />
                Grid View
              </TabsTrigger>
            </TabsList>

<TabsContent value="table">
              <div className="rounded-md border">
                <DataTable
                  columns={columns}
                  data={filteredData}
                  onRowSelectionChange={(rows) => {
                    setSelectedItems(Array.from(rows))
                  }}
                />
              </div>

{selectedItems.length > 0 && (
                <div className="flex items-center justify-between mt-4 p-2 bg-muted rounded-md">
                  <p className="text-sm text-muted-foreground">{selectedItems.length} items selected</p>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => setSelectedItems([])}>
                      Clear Selection
                    </Button>
                    <Button size="sm" onClick={handleBulkDownload}>
                      <Download className="h-4 w-4 mr-2" />
                      Download Selected
                    </Button>
                  </div>
                </div>
              )}
            </TabsContent>

<TabsContent value="grid">
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {filteredData.length === 0 ? (
                  <div className="col-span-full text-center p-8 text-muted-foreground">
                    No archive items match your search criteria
                  </div>
                ) : (
                  filteredData.map((item) => (
                    <div
                      key={item.id}
                      className="group border rounded-lg p-4 hover:border-primary transition-colors cursor-pointer"
                      onClick={() => handleViewItem(item)}
                    >
                      <div className="flex items-start justify-between mb-3">
                        {getFileIcon(item.fileType)}
                        <Badge className="capitalize">{item.fileType}</Badge>
                      </div>
                      <h3 className="font-medium mb-1 line-clamp-2">{item.title}</h3>
                      <p className="text-xs text-muted-foreground mb-2">
                        {formatDate(item.reportDate)} • {formatFileSize(item.fileSize)}
                      </p>
                      <div className="flex flex-wrap gap-1 mt-2">
                        {item.tags.map((tag) => (
                          <Badge key={tag} variant="outline" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                      <div className="mt-3 pt-2 border-t flex items-center justify-between text-xs text-muted-foreground">
                        <span>{item.department}</span>
                        <span className="flex items-center">
                          <Eye className="h-3 w-3 mr-1" /> {item.viewCount}
                        </span>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>

<CardFooter className="flex justify-between">
          <div className="text-sm text-muted-foreground">
            Showing {filteredData.length} of {mockArchiveData.length} archive items
          </div>
        </CardFooter>
      </Card>

{selectedItem && (
        <Dialog open={!!selectedItem} onOpenChange={(open) => !open && setSelectedItem(null)}>
          <DialogContent className="sm:max-w-[700px]">
            <DialogHeader>
              <DialogTitle>{selectedItem.title}</DialogTitle>
              <DialogDescription>Archive ID: {selectedItem.id}</DialogDescription>
            </DialogHeader>

<div className="grid gap-4 py-4">
              <div className="flex items-start gap-4">
                {getFileIcon(selectedItem.fileType)}
                <div className="flex-1">
                  <h3 className="font-medium">{selectedItem.title}</h3>
                  <div className="text-sm text-muted-foreground mb-2">
                    {formatFileSize(selectedItem.fileSize)} • {selectedItem.fileType.toUpperCase()}
                  </div>
                  <div className="flex flex-wrap gap-1 mb-2">
                    {selectedItem.tags.map((tag) => (
                      <Badge key={tag} variant="outline" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Report Date</Label>
                  <div className="text-sm flex items-center">
                    <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
                    {formatDate(selectedItem.reportDate)}
                  </div>
                </div>

<div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Archived Date</Label>
                  <div className="text-sm flex items-center">
                    <FileArchive className="h-4 w-4 mr-2 text-muted-foreground" />
                    {formatDate(selectedItem.archivedDate)}
                  </div>
                </div>

<div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Department</Label>
                  <div className="text-sm capitalize">{selectedItem.department}</div>
                </div>

<div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Category</Label>
                  <div className="text-sm capitalize">{selectedItem.category}</div>
                </div>

<div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Report Type</Label>
                  <div className="text-sm capitalize">{selectedItem.type}</div>
                </div>

<div className="space-y-2">
                  <Label className="text-xs text-muted-foreground">Status</Label>
                  <Badge
                    className={
                      selectedItem.status === "active"
                        ? "bg-green-100 text-green-800"
                        : selectedItem.status === "archived"
                          ? "bg-blue-100 text-blue-800"
                          : "bg-red-100 text-red-800"
                    }
                  >
                    {selectedItem.status}
                  </Badge>
                </div>
              </div>

<div className="space-y-2">
                <Label className="text-xs text-muted-foreground">Statistics</Label>
                <div className="flex gap-4 text-sm">
                  <div className="flex items-center">
                    <Eye className="h-4 w-4 mr-2 text-muted-foreground" />
                    {selectedItem.viewCount} views
                  </div>
                  <div className="flex items-center">
                    <Download className="h-4 w-4 mr-2 text-muted-foreground" />
                    {selectedItem.downloadCount} downloads
                  </div>
                </div>
              </div>
            </div>

<DialogFooter>
              <Button variant="outline">
                <Printer className="h-4 w-4 mr-2" />
                Print
              </Button>
              <Button>
                <Download className="h-4 w-4 mr-2" />
                Download
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/data-table.tsx"
"use client"

import * as React from "react"
import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  onRowSelectionChange?: (rowSelection: Set<string>) => void
}

export function DataTable<TData, TValue>({ columns, data, onRowSelectionChange }: DataTableProps<TData, TValue>) {
  const [rowSelection, setRowSelection] = React.useState({})

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onRowSelectionChange: setRowSelection,
    state: {
      rowSelection,
    },
  })

React.useEffect(() => {
    if (onRowSelectionChange) {
      const selectedRowIds = new Set<string>()

Object.keys(rowSelection).forEach((idx) => {
        const rowData = data[Number.parseInt(idx)]
        if (rowData && "id" in rowData) {
          selectedRowIds.add(rowData.id as string)
        }
      })

onRowSelectionChange(selectedRowIds)
    }
  }, [rowSelection, data, onRowSelectionChange])

return (
    <div>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  )
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-between space-x-2 py-4">
        <div className="text-sm text-muted-foreground">
          Showing {table.getFilteredRowModel().rows.length} of {data.length} items
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

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

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]png:file="public/stylized-jd-initials.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stylized-jd-initials-O3NjUQ0QRHkvqxV1teMAFpGyapO7Ln.png"
[V0_FILE]png:file="public/javascript-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/javascript-code-KewRs7r2noXkmjGtFPVPIKVgjK45Ig.png"
[V0_FILE]png:file="public/abstract-geometric-mj.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-mj-d2FE4oaTRq3kX7HKnChOPZCZc7cu0P.png"
[V0_FILE]typescriptreact:file="components/tracking/real-time-collaboration.tsx"
"use client"

import { useState, useEffect } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { AlertCircle, Bell, Clock, Edit, Eye, MessageSquare, Send, Share2, UserPlus, Users } from "lucide-react"

interface User {
  id: string
  name: string
  email: string
  role: string
  avatar?: string
  status: "online" | "away" | "offline" | "editing"
  lastActive?: string
  currentSection?: string
}

interface Comment {
  id: string
  user: User
  content: string
  timestamp: string
  replyTo?: string
  edited?: boolean
  reactions?: { [key: string]: string[] }
}

interface EditHistory {
  id: string
  user: User
  section: string
  timestamp: string
  description: string
}

interface Notification {
  id: string
  type: "comment" | "edit" | "mention" | "share" | "system"
  user?: User
  content: string
  timestamp: string
  read: boolean
  relatedId?: string
}

interface CollaborationProps {
  documentId: string
  documentTitle: string
  currentUser: User
}

export function RealTimeCollaboration({ documentId, documentTitle, currentUser }: CollaborationProps) {
  // Mock active users
  const [activeUsers, setActiveUsers] = useState<User[]>([
    {
      id: "user-1",
      name: "John Doe",
      email: "john.doe@example.com",
      role: "Editor",
      avatar: "/stylized-jd-initials.png",
      status: "online",
      lastActive: new Date().toISOString(),
      currentSection: "Financial Summary",
    },
    {
      id: "user-2",
      name: "Jane Smith",
      email: "jane.smith@example.com",
      role: "Reviewer",
      avatar: "/javascript-code.png",
      status: "editing",
      lastActive: new Date().toISOString(),
      currentSection: "Market Analysis",
    },
    {
      id: "user-3",
      name: "Michael Johnson",
      email: "michael.johnson@example.com",
      role: "Viewer",
      avatar: "/abstract-geometric-mj.png",
      status: "away",
      lastActive: new Date(Date.now() - 15 * 60000).toISOString(),
    },
    {
      id: "user-4",
      name: "Sarah Williams",
      email: "sarah.williams@example.com",
      role: "Admin",
      status: "offline",
      lastActive: new Date(Date.now() - 120 * 60000).toISOString(),
    },
  ])

// Mock comments
  const [comments, setComments] = useState<Comment[]>([
    {
      id: "comment-1",
      user: {
        id: "user-2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "Reviewer",
        avatar: "/javascript-code.png",
        status: "online",
      },
      content: "The Q2 projections look promising. Can we add more detail to the regional breakdown?",
      timestamp: new Date(Date.now() - 45 * 60000).toISOString(),
      reactions: {
        "👍": ["user-1", "user-3"],
        "💡": ["user-4"],
      },
    },
    {
      id: "comment-2",
      user: {
        id: "user-1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "Editor",
        avatar: "/stylized-jd-initials.png",
        status: "online",
      },
      content:
        "I've updated the regional breakdown with more granular data. @Jane Smith please review when you have a moment.",
      timestamp: new Date(Date.now() - 30 * 60000).toISOString(),
      replyTo: "comment-1",
    },
    {
      id: "comment-3",
      user: {
        id: "user-3",
        name: "Michael Johnson",
        email: "michael.johnson@example.com",
        role: "Viewer",
        avatar: "/abstract-geometric-mj.png",
        status: "away",
      },
      content: "The competitive analysis section needs more depth. I suggest we include the recent market shifts.",
      timestamp: new Date(Date.now() - 20 * 60000).toISOString(),
    },
  ])

// Mock edit history
  const [editHistory, setEditHistory] = useState<EditHistory[]>([
    {
      id: "edit-1",
      user: {
        id: "user-1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "Editor",
        avatar: "/stylized-jd-initials.png",
        status: "online",
      },
      section: "Executive Summary",
      timestamp: new Date(Date.now() - 120 * 60000).toISOString(),
      description: "Updated key performance indicators and growth projections",
    },
    {
      id: "edit-2",
      user: {
        id: "user-2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "Reviewer",
        avatar: "/javascript-code.png",
        status: "editing",
      },
      section: "Market Analysis",
      timestamp: new Date(Date.now() - 60 * 60000).toISOString(),
      description: "Added competitor analysis and market share data",
    },
    {
      id: "edit-3",
      user: {
        id: "user-1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "Editor",
        avatar: "/stylized-jd-initials.png",
        status: "online",
      },
      section: "Financial Summary",
      timestamp: new Date(Date.now() - 30 * 60000).toISOString(),
      description: "Updated Q2 projections based on latest sales data",
    },
  ])

// Mock notifications
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: "notif-1",
      type: "comment",
      user: {
        id: "user-2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "Reviewer",
        avatar: "/javascript-code.png",
        status: "online",
      },
      content: "Jane Smith commented on the Q2 projections",
      timestamp: new Date(Date.now() - 45 * 60000).toISOString(),
      read: false,
      relatedId: "comment-1",
    },
    {
      id: "notif-2",
      type: "mention",
      user: {
        id: "user-1",
        name: "John Doe",
        email: "john.doe@example.com",
        role: "Editor",
        avatar: "/stylized-jd-initials.png",
        status: "online",
      },
      content: "John Doe mentioned you in a comment",
      timestamp: new Date(Date.now() - 30 * 60000).toISOString(),
      read: true,
      relatedId: "comment-2",
    },
    {
      id: "notif-3",
      type: "edit",
      user: {
        id: "user-2",
        name: "Jane Smith",
        email: "jane.smith@example.com",
        role: "Reviewer",
        avatar: "/javascript-code.png",
        status: "editing",
      },
      content: "Jane Smith is editing the Market Analysis section",
      timestamp: new Date(Date.now() - 5 * 60000).toISOString(),
      read: false,
    },
    {
      id: "notif-4",
      type: "system",
      content: "This document will be automatically saved in 5 minutes",
      timestamp: new Date(Date.now() - 1 * 60000).toISOString(),
      read: false,
    },
  ])

const [newComment, setNewComment] = useState("")
  const [unreadCount, setUnreadCount] = useState(notifications.filter((notif) => !notif.read).length)

// Simulate real-time updates
  useEffect(() => {
    const interval = setInterval(() => {
      // Randomly update user status
      setActiveUsers((prev) => {
        const newUsers = [...prev]
        const randomIndex = Math.floor(Math.random() * newUsers.length)
        const statuses: ("online" | "away" | "editing")[] = ["online", "away", "editing"]
        const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]

if (newUsers[randomIndex].id !== currentUser.id) {
          newUsers[randomIndex] = {
            ...newUsers[randomIndex],
            status: randomStatus,
            lastActive: new Date().toISOString(),
          }
        }

return newUsers
      })

// Randomly add a new comment (10% chance)
      if (Math.random() < 0.1) {
        const randomUser = activeUsers[Math.floor(Math.random() * activeUsers.length)]
        if (randomUser.id !== currentUser.id && randomUser.status !== "offline") {
          const newCommentObj: Comment = {
            id: `comment-${Date.now()}`,
            user: randomUser,
            content: `This is a simulated real-time comment from ${randomUser.name}.`,
            timestamp: new Date().toISOString(),
          }

setComments((prev) => [...prev, newCommentObj])

// Add notification for the new comment
          const newNotification: Notification = {
            id: `notif-${Date.now()}`,
            type: "comment",
            user: randomUser,
            content: `${randomUser.name} added a new comment`,
            timestamp: new Date().toISOString(),
            read: false,
            relatedId: newCommentObj.id,
          }

setNotifications((prev) => [newNotification, ...prev])
          setUnreadCount((prev) => prev + 1)
        }
      }
    }, 15000) // Update every 15 seconds

return () => clearInterval(interval)
  }, [activeUsers, currentUser.id])

const handleAddComment = () => {
    if (!newComment.trim()) return

const newCommentObj: Comment = {
      id: `comment-${Date.now()}`,
      user: currentUser,
      content: newComment,
      timestamp: new Date().toISOString(),
    }

setComments((prev) => [...prev, newCommentObj])
    setNewComment("")

// Simulate other users seeing the comment
    setTimeout(() => {
      // Add reactions randomly
      if (Math.random() > 0.5) {
        const randomUser = activeUsers.find((u) => u.id !== currentUser.id && u.status !== "offline")
        if (randomUser) {
          const reactions = ["👍", "❤️", "🎉", "💡", "👏"]
          const randomReaction = reactions[Math.floor(Math.random() * reactions.length)]

setComments((prev) =>
            prev.map((comment) => {
              if (comment.id === newCommentObj.id) {
                return {
                  ...comment,
                  reactions: {
                    ...(comment.reactions || {}),
                    [randomReaction]: [randomUser.id],
                  },
                }
              }
              return comment
            }),
          )
        }
      }
    }, 5000)
  }

const markAllAsRead = () => {
    setNotifications((prev) => prev.map((notif) => ({ ...notif, read: true })))
    setUnreadCount(0)
  }

const formatTime = (timestamp: string) => {
    const date = new Date(timestamp)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()
    const diffMins = Math.floor(diffMs / 60000)

if (diffMins < 1) return "Just now"
    if (diffMins < 60) return `${diffMins}m ago`

const diffHours = Math.floor(diffMins / 60)
    if (diffHours < 24) return `${diffHours}h ago`

return date.toLocaleDateString()
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "bg-green-500"
      case "editing":
        return "bg-blue-500"
      case "away":
        return "bg-yellow-500"
      default:
        return "bg-gray-500"
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "online":
        return "Online"
      case "editing":
        return "Editing"
      case "away":
        return "Away"
      default:
        return "Offline"
    }
  }

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "comment":
        return <MessageSquare className="h-4 w-4" />
      case "edit":
        return <Edit className="h-4 w-4" />
      case "mention":
        return <Users className="h-4 w-4" />
      case "share":
        return <Share2 className="h-4 w-4" />
      default:
        return <AlertCircle className="h-4 w-4" />
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>Real-Time Collaboration</CardTitle>
            <CardDescription>Collaborate with team members on "{documentTitle}"</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" className="relative">
                    <Bell className="h-4 w-4" />
                    {unreadCount > 0 && (
                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                        {unreadCount}
                      </span>
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="bottom">
                  <div className="w-80">
                    <div className="flex justify-between items-center mb-2">
                      <h3 className="font-medium">Notifications</h3>
                      <Button variant="ghost" size="sm" onClick={markAllAsRead}>
                        Mark all as read
                      </Button>
                    </div>
                    <ScrollArea className="h-64">
                      {notifications.length === 0 ? (
                        <div className="text-center py-4 text-muted-foreground">No notifications</div>
                      ) : (
                        <div className="space-y-2">
                          {notifications.map((notification) => (
                            <div
                              key={notification.id}
                              className={`p-2 rounded-md text-sm ${notification.read ? "bg-background" : "bg-muted"}`}
                            >
                              <div className="flex gap-2 items-start">
                                {notification.user ? (
                                  <Avatar className="h-8 w-8">
                                    <AvatarImage
                                      src={notification.user.avatar || "/placeholder.svg"}
                                      alt={notification.user.name}
                                    />
                                    <AvatarFallback>
                                      {notification.user.name
                                        .split(" ")
                                        .map((n) => n[0])
                                        .join("")}
                                    </AvatarFallback>
                                  </Avatar>
                                ) : (
                                  <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                                    {getNotificationIcon(notification.type)}
                                  </div>
                                )}
                                <div className="flex-1">
                                  <p>{notification.content}</p>
                                  <div className="flex justify-between items-center mt-1">
                                    <span className="text-xs text-muted-foreground">
                                      {formatTime(notification.timestamp)}
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </ScrollArea>
                  </div>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
            <Button variant="outline" size="sm">
              <UserPlus className="h-4 w-4 mr-2" />
              Invite
            </Button>
            <Button size="sm">
              <Share2 className="h-4 w-4 mr-2" />
              Share
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="comments">
          <TabsList className="mb-4">
            <TabsTrigger value="comments">
              <MessageSquare className="h-4 w-4 mr-2" />
              Comments
            </TabsTrigger>
            <TabsTrigger value="activity">
              <Clock className="h-4 w-4 mr-2" />
              Activity
            </TabsTrigger>
            <TabsTrigger value="users">
              <Users className="h-4 w-4 mr-2" />
              Active Users ({activeUsers.filter((u) => u.status !== "offline").length})
            </TabsTrigger>
          </TabsList>

<TabsContent value="comments" className="space-y-4">
            <ScrollArea className="h-[300px] pr-4">
              {comments.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">No comments yet. Start the conversation!</div>
              ) : (
                <div className="space-y-4">
                  {comments.map((comment) => (
                    <div
                      key={comment.id}
                      className={`p-4 rounded-lg border ${comment.replyTo ? "ml-8 mt-[-8px]" : ""}`}
                    >
                      <div className="flex gap-3">
                        <Avatar>
                          <AvatarImage src={comment.user.avatar || "/placeholder.svg"} alt={comment.user.name} />
                          <AvatarFallback>
                            {comment.user.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <div className="flex justify-between items-center">
                            <div className="flex items-center gap-2">
                              <span className="font-medium">{comment.user.name}</span>
                              <span className="text-xs text-muted-foreground">{formatTime(comment.timestamp)}</span>
                              {comment.edited && <span className="text-xs text-muted-foreground">(edited)</span>}
                            </div>
                            <div className="flex gap-1">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <MessageSquare className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Edit className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                          <p className="mt-1">{comment.content}</p>

{/* Reactions */}
                          {comment.reactions && Object.keys(comment.reactions).length > 0 && (
                            <div className="flex gap-1 mt-2">
                              {Object.entries(comment.reactions).map(([emoji, users]) => (
                                <Badge key={emoji} variant="outline" className="flex items-center gap-1 py-0 h-6">
                                  <span>{emoji}</span>
                                  <span className="text-xs">{users.length}</span>
                                </Badge>
                              ))}
                              <Button variant="ghost" size="icon" className="h-6 w-6 rounded-full">
                                <span className="text-xs">+</span>
                              </Button>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </ScrollArea>

<div className="pt-2 border-t">
              <div className="flex gap-3">
                <Avatar>
                  <AvatarImage src={currentUser.avatar || "/placeholder.svg"} alt={currentUser.name} />
                  <AvatarFallback>
                    {currentUser.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <Textarea
                    placeholder="Add a comment..."
                    value={newComment}
                    onChange={(e) => setNewComment(e.target.value)}
                    className="min-h-[80px]"
                  />
                  <div className="flex justify-end mt-2">
                    <Button onClick={handleAddComment} disabled={!newComment.trim()}>
                      <Send className="h-4 w-4 mr-2" />
                      Send
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="activity">
            <ScrollArea className="h-[400px] pr-4">
              <div className="space-y-4">
                {editHistory.map((edit) => (
                  <div key={edit.id} className="flex gap-3 p-3 border rounded-lg">
                    <Avatar>
                      <AvatarImage src={edit.user.avatar || "/placeholder.svg"} alt={edit.user.name} />
                      <AvatarFallback>
                        {edit.user.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{edit.user.name}</span>
                        <span className="text-xs text-muted-foreground">{formatTime(edit.timestamp)}</span>
                      </div>
                      <p className="text-sm mt-1">
                        Edited <span className="font-medium">{edit.section}</span>
                      </p>
                      <p className="text-sm text-muted-foreground mt-1">{edit.description}</p>
                    </div>
                  </div>
                ))}

{comments.map((comment) => (
                  <div key={`activity-${comment.id}`} className="flex gap-3 p-3 border rounded-lg">
                    <Avatar>
                      <AvatarImage src={comment.user.avatar || "/placeholder.svg"} alt={comment.user.name} />
                      <AvatarFallback>
                        {comment.user.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{comment.user.name}</span>
                        <span className="text-xs text-muted-foreground">{formatTime(comment.timestamp)}</span>
                      </div>
                      <p className="text-sm mt-1">Added a comment</p>
                      <p className="text-sm text-muted-foreground mt-1 line-clamp-1">{comment.content}</p>
                    </div>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="users">
            <div className="space-y-3">
              {activeUsers.map((user) => (
                <div key={user.id} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className="relative">
                      <Avatar>
                        <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                        <AvatarFallback>
                          {user.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <span
                        className={`absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background ${getStatusColor(
                          user.status,
                        )}`}
                      />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{user.name}</span>
                        <Badge variant="outline" className="text-xs">
                          {user.role}
                        </Badge>
                      </div>
                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <span>{getStatusText(user.status)}</span>
                        {user.status === "editing" && user.currentSection && (
                          <>
                            <span>•</span>
                            <span>Editing {user.currentSection}</span>
                          </>
                        )}
                        {user.lastActive && (
                          <>
                            <span>•</span>
                            <span>
                              {user.status === "online" || user.status === "editing"
                                ? "Active now"
                                : `Last active ${formatTime(user.lastActive)}`}
                            </span>
                          </>
                        )}
                      </div>
                    </div>
                  </div>
                  <Button variant="ghost" size="sm">
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Message
                  </Button>
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="border-t pt-4">
        <div className="flex items-center justify-between w-full text-sm">
          <div className="flex items-center gap-2">
            <div className="flex -space-x-2">
              {activeUsers
                .filter((u) => u.status !== "offline")
                .slice(0, 3)
                .map((user) => (
                  <Avatar key={user.id} className="border-2 border-background h-6 w-6">
                    <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                    <AvatarFallback className="text-xs">
                      {user.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                ))}
              {activeUsers.filter((u) => u.status !== "offline").length > 3 && (
                <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background">
                  +{activeUsers.filter((u) => u.status !== "offline").length - 3}
                </div>
              )}
            </div>
            <span className="text-muted-foreground">
              {activeUsers.filter((u) => u.status !== "offline").length} active now
            </span>
          </div>
          <div className="flex items-center gap-1 text-muted-foreground">
            <Eye className="h-4 w-4" />
            <span>Real-time updates enabled</span>
          </div>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/tracking/ai-insights.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import {
  AlertCircle,
  ArrowDown,
  ArrowUp,
  BarChart,
  Brain,
  ChevronDown,
  ChevronUp,
  Download,
  FileText,
  LineChart,
  Lightbulb,
  RefreshCw,
  Search,
  TrendingUp,
  Zap,
} from "lucide-react"
import {
  Bar,
  BarChart as RechartsBarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart as RechartsLineChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts"
import { ChartContainer, ChartTooltip } from "@/components/ui/chart"

interface AIInsightsProps {
  data: any
}

export function AIInsights({ data }: AIInsightsProps) {
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [analysisProgress, setAnalysisProgress] = useState(100)
  const [lastAnalyzed, setLastAnalyzed] = useState<string>("2025-05-19T13:45:00Z")

// Mock AI insights data
  const insights = [
    {
      id: "insight-1",
      type: "trend",
      title: "Increasing Donation Trend",
      description:
        "Donations have increased by 23% over the last quarter, significantly outpacing the previous year's growth rate of 12%.",
      impact: "high",
      category: "financial",
      confidence: 92,
      recommendation:
        "Consider expanding donation channels and increasing marketing efforts to capitalize on this positive trend.",
      data: [
        { month: "Jan", value: 4000 },
        { month: "Feb", value: 4200 },
        { month: "Mar", value: 4500 },
        { month: "Apr", value: 4800 },
        { month: "May", value: 5200 },
        { month: "Jun", value: 5800 },
      ],
    },
    {
      id: "insight-2",
      type: "anomaly",
      title: "Unusual Product Return Rate",
      description:
        "Product returns for the 'Inspirational T-shirt' category have increased by 35% in the last month, deviating from the normal pattern.",
      impact: "medium",
      category: "operations",
      confidence: 87,
      recommendation: "Investigate product quality issues and customer feedback for the affected product category.",
      data: [
        { name: "Normal Rate", value: 8 },
        { name: "Current Rate", value: 12.8 },
      ],
    },
    {
      id: "insight-3",
      type: "prediction",
      title: "Q3 Revenue Forecast",
      description:
        "Based on current trends and seasonal patterns, Q3 revenue is predicted to reach $1.2M, a 15% increase over the same period last year.",
      impact: "high",
      category: "financial",
      confidence: 85,
      recommendation: "Prepare inventory and staffing levels to accommodate the projected growth in Q3.",
      data: [
        { quarter: "Q1", actual: 850000, predicted: 850000 },
        { quarter: "Q2", actual: 920000, predicted: 900000 },
        { quarter: "Q3", actual: null, predicted: 1200000 },
        { quarter: "Q4", actual: null, predicted: 1350000 },
      ],
    },
    {
      id: "insight-4",
      type: "correlation",
      title: "Service Engagement Correlation",
      description:
        "There is a strong correlation (r=0.78) between email campaign frequency and service engagement rates, particularly for educational services.",
      impact: "medium",
      category: "marketing",
      confidence: 83,
      recommendation:
        "Increase email campaign frequency for educational services while testing different content strategies.",
      data: [
        { campaigns: 2, engagement: 15 },
        { campaigns: 3, engagement: 25 },
        { campaigns: 4, engagement: 35 },
        { campaigns: 5, engagement: 48 },
        { campaigns: 6, engagement: 52 },
        { campaigns: 7, engagement: 58 },
      ],
    },
    {
      id: "insight-5",
      type: "opportunity",
      title: "Untapped Market Segment",
      description:
        "Analysis of customer demographics reveals an underserved segment: young professionals (25-34) interested in corporate social responsibility programs.",
      impact: "high",
      category: "strategic",
      confidence: 79,
      recommendation:
        "Develop targeted offerings for young professionals focused on corporate social responsibility and workplace giving programs.",
      data: [
        { age: "18-24", current: 15, potential: 18 },
        { age: "25-34", current: 22, potential: 42 },
        { age: "35-44", current: 38, potential: 45 },
        { age: "45-54", current: 32, potential: 35 },
        { age: "55+", current: 28, potential: 30 },
      ],
    },
  ]

const performanceMetrics = [
    {
      name: "Donation Conversion Rate",
      value: 4.2,
      change: 0.8,
      trend: "up",
      benchmark: 3.1,
    },
    {
      name: "Average Order Value",
      value: 78.5,
      change: -2.3,
      trend: "down",
      benchmark: 82.0,
    },
    {
      name: "Customer Retention",
      value: 68.9,
      change: 5.2,
      trend: "up",
      benchmark: 65.0,
    },
    {
      name: "Cost per Acquisition",
      value: 22.4,
      change: -1.8,
      trend: "up",
      benchmark: 25.0,
    },
    {
      name: "Inventory Turnover",
      value: 12.3,
      change: 0.5,
      trend: "up",
      benchmark: 10.5,
    },
  ]

const anomalyDetection = [
    {
      id: "anomaly-1",
      metric: "Website Traffic",
      value: 15420,
      expected: 12500,
      deviation: 23.4,
      date: "2025-05-15",
      status: "positive",
      description: "Significant increase in website traffic, possibly due to recent marketing campaign",
    },
    {
      id: "anomaly-2",
      metric: "Cart Abandonment",
      value: 42.8,
      expected: 28.5,
      deviation: 50.2,
      date: "2025-05-17",
      status: "negative",
      description: "Unusually high cart abandonment rate, may indicate checkout process issues",
    },
    {
      id: "anomaly-3",
      metric: "Email Open Rate",
      value: 12.3,
      expected: 22.7,
      deviation: -45.8,
      date: "2025-05-18",
      status: "negative",
      description: "Email open rates significantly below normal, check for deliverability issues",
    },
  ]

const predictiveScenarios = [
    {
      id: "scenario-1",
      name: "Base Case",
      probability: 65,
      revenue: 1250000,
      growth: 12,
      description: "Continuation of current trends with moderate growth",
    },
    {
      id: "scenario-2",
      name: "Optimistic Case",
      probability: 20,
      revenue: 1450000,
      growth: 28,
      description: "Accelerated growth due to new product launches and expanded market reach",
    },
    {
      id: "scenario-3",
      name: "Conservative Case",
      probability: 15,
      revenue: 1050000,
      growth: 5,
      description: "Slower growth due to market saturation and increased competition",
    },
  ]

const handleRefreshAnalysis = () => {
    setIsAnalyzing(true)
    setAnalysisProgress(0)

// Simulate analysis progress
    const interval = setInterval(() => {
      setAnalysisProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          setIsAnalyzing(false)
          setLastAnalyzed(new Date().toISOString())
          return 100
        }
        return prev + 10
      })
    }, 300)
  }

const getImpactColor = (impact: string) => {
    switch (impact) {
      case "high":
        return "bg-red-100 text-red-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      case "low":
        return "bg-green-100 text-green-800"
      default:
        return "bg-blue-100 text-blue-800"
    }
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "trend":
        return <TrendingUp className="h-4 w-4" />
      case "anomaly":
        return <AlertCircle className="h-4 w-4" />
      case "prediction":
        return <LineChart className="h-4 w-4" />
      case "correlation":
        return <BarChart className="h-4 w-4" />
      case "opportunity":
        return <Lightbulb className="h-4 w-4" />
      default:
        return <Brain className="h-4 w-4" />
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString()
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Brain className="h-5 w-5" />
              AI-Powered Insights
            </CardTitle>
            <CardDescription>Intelligent analysis and recommendations based on your data</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <div className="text-xs text-muted-foreground">Last analyzed: {formatDate(lastAnalyzed)}</div>
            <Button variant="outline" size="sm" onClick={handleRefreshAnalysis} disabled={isAnalyzing}>
              {isAnalyzing ? (
                <>
                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                  Analyzing...
                </>
              ) : (
                <>
                  <RefreshCw className="h-4 w-4 mr-2" />
                  Refresh Analysis
                </>
              )}
            </Button>
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Export Insights
            </Button>
          </div>
        </div>
        {isAnalyzing && (
          <div className="mt-2">
            <div className="flex justify-between text-xs mb-1">
              <span>Analyzing your data...</span>
              <span>{analysisProgress}%</span>
            </div>
            <Progress value={analysisProgress} />
          </div>
        )}
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="key-insights">
          <TabsList className="mb-4">
            <TabsTrigger value="key-insights">
              <Zap className="h-4 w-4 mr-2" />
              Key Insights
            </TabsTrigger>
            <TabsTrigger value="performance">
              <LineChart className="h-4 w-4 mr-2" />
              Performance Metrics
            </TabsTrigger>
            <TabsTrigger value="anomalies">
              <AlertCircle className="h-4 w-4 mr-2" />
              Anomaly Detection
            </TabsTrigger>
            <TabsTrigger value="predictions">
              <TrendingUp className="h-4 w-4 mr-2" />
              Predictive Analysis
            </TabsTrigger>
          </TabsList>

<TabsContent value="key-insights">
            <div className="space-y-4">
              {insights.map((insight) => (
                <Card key={insight.id}>
                  <CardHeader className="pb-2">
                    <div className="flex justify-between items-start">
                      <div className="flex items-start gap-2">
                        <div
                          className={`p-2 rounded-full ${
                            insight.type === "anomaly"
                              ? "bg-red-100"
                              : insight.type === "opportunity"
                                ? "bg-green-100"
                                : "bg-blue-100"
                          }`}
                        >
                          {getTypeIcon(insight.type)}
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-medium">{insight.title}</h3>
                            <Badge className={getImpactColor(insight.impact)}>
                              {insight.impact.charAt(0).toUpperCase() + insight.impact.slice(1)} Impact
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground mt-1">{insight.description}</p>
                        </div>
                      </div>
                      <Badge variant="outline" className="flex items-center gap-1">
                        <Brain className="h-3 w-3" />
                        {insight.confidence}% Confidence
                      </Badge>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="h-[200px] mt-4">
                      {insight.type === "trend" && (
                        <ChartContainer
                          config={{
                            value: {
                              label: "Value",
                              color: "hsl(var(--chart-1))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsLineChart data={insight.data}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="month" />
                              <YAxis />
                              <ChartTooltip />
                              <Line type="monotone" dataKey="value" stroke="var(--color-value)" activeDot={{ r: 8 }} />
                            </RechartsLineChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      )}

{insight.type === "anomaly" && (
                        <ChartContainer
                          config={{
                            value: {
                              label: "Value",
                              color: "hsl(var(--chart-1))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsBarChart data={insight.data}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="name" />
                              <YAxis />
                              <ChartTooltip />
                              <Bar dataKey="value" fill="var(--color-value)">
                                {insight.data.map((entry, index) => (
                                  <Cell key={`cell-${index}`} fill={index === 0 ? "#8884d8" : "#ff8042"} />
                                ))}
                              </Bar>
                            </RechartsBarChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      )}

{insight.type === "prediction" && (
                        <ChartContainer
                          config={{
                            actual: {
                              label: "Actual",
                              color: "hsl(var(--chart-1))",
                            },
                            predicted: {
                              label: "Predicted",
                              color: "hsl(var(--chart-2))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsLineChart data={insight.data}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="quarter" />
                              <YAxis />
                              <ChartTooltip />
                              <Line
                                type="monotone"
                                dataKey="actual"
                                stroke="var(--color-actual)"
                                strokeWidth={2}
                                dot={{ r: 6 }}
                              />
                              <Line
                                type="monotone"
                                dataKey="predicted"
                                stroke="var(--color-predicted)"
                                strokeDasharray="5 5"
                              />
                            </RechartsLineChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      )}

{insight.type === "correlation" && (
                        <ChartContainer
                          config={{
                            engagement: {
                              label: "Engagement",
                              color: "hsl(var(--chart-1))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsLineChart data={insight.data}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="campaigns" label={{ value: "Email Campaigns", position: "bottom" }} />
                              <YAxis label={{ value: "Engagement Rate (%)", angle: -90, position: "left" }} />
                              <ChartTooltip />
                              <Line
                                type="monotone"
                                dataKey="engagement"
                                stroke="var(--color-engagement)"
                                activeDot={{ r: 8 }}
                              />
                            </RechartsLineChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      )}

{insight.type === "opportunity" && (
                        <ChartContainer
                          config={{
                            current: {
                              label: "Current",
                              color: "hsl(var(--chart-1))",
                            },
                            potential: {
                              label: "Potential",
                              color: "hsl(var(--chart-2))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <RechartsBarChart data={insight.data}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="age" />
                              <YAxis />
                              <ChartTooltip />
                              <Legend />
                              <Bar dataKey="current" fill="var(--color-current)" />
                              <Bar dataKey="potential" fill="var(--color-potential)" />
                            </RechartsBarChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      )}
                    </div>

<div className="mt-4 p-3 bg-muted/50 rounded-lg">
                      <div className="flex items-center gap-2 mb-1">
                        <Lightbulb className="h-4 w-4 text-yellow-500" />
                        <h4 className="font-medium">AI Recommendation</h4>
                      </div>
                      <p className="text-sm">{insight.recommendation}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="performance">
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {performanceMetrics.map((metric) => (
                  <Card key={metric.name}>
                    <CardContent className="pt-6">
                      <div className="flex justify-between items-start">
                        <h3 className="font-medium">{metric.name}</h3>
                        <Badge
                          variant="outline"
                          className={`flex items-center gap-1 ${
                            (metric.trend === "up" && metric.name !== "Cost per Acquisition") ||
                            (metric.trend === "down" && metric.name === "Cost per Acquisition")
                              ? "text-green-600"
                              : "text-red-600"
                          }`}
                        >
                          {metric.trend === "up" ? (
                            <ChevronUp className="h-3 w-3" />
                          ) : (
                            <ChevronDown className="h-3 w-3" />
                          )}
                          {Math.abs(metric.change).toFixed(1)}%
                        </Badge>
                      </div>
                      <div className="mt-2">
                        <div className="text-3xl font-bold">
                          {metric.name.includes("Rate") || metric.name.includes("Retention")
                            ? `${metric.value}%`
                            : metric.name === "Average Order Value" || metric.name === "Cost per Acquisition"
                              ? `$${metric.value}`
                              : metric.value}
                        </div>
                        <div className="flex items-center mt-1 text-sm text-muted-foreground">
                          <span>Industry benchmark:</span>
                          <span className="ml-1 font-medium">
                            {metric.name.includes("Rate") || metric.name.includes("Retention")
                              ? `${metric.benchmark}%`
                              : metric.name === "Average Order Value" || metric.name === "Cost per Acquisition"
                                ? `$${metric.benchmark}`
                                : metric.benchmark}
                          </span>
                          <div
                            className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
                              (metric.value > metric.benchmark && metric.name !== "Cost per Acquisition") ||
                              (metric.value < metric.benchmark && metric.name === "Cost per Acquisition")
                                ? "bg-green-100 text-green-800"
                                : "bg-red-100 text-red-800"
                            }`}
                          >
                            {(metric.value > metric.benchmark && metric.name !== "Cost per Acquisition") ||
                            (metric.value < metric.benchmark && metric.name === "Cost per Acquisition")
                              ? "Above"
                              : "Below"}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Performance Trends</CardTitle>
                  <CardDescription>Key metrics performance over the last 6 months</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        donations: {
                          label: "Donations",
                          color: "hsl(var(--chart-1))",
                        },
                        products: {
                          label: "Products",
                          color: "hsl(var(--chart-2))",
                        },
                        services: {
                          label: "Services",
                          color: "hsl(var(--chart-3))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <RechartsLineChart
                          data={[
                            {
                              month: "Dec",
                              donations: 4000,
                              products: 2400,
                              services: 1800,
                            },
                            {
                              month: "Jan",
                              donations: 4200,
                              products: 2100,
                              services: 2200,
                            },
                            {
                              month: "Feb",
                              donations: 4500,
                              products: 2600,
                              services: 2400,
                            },
                            {
                              month: "Mar",
                              donations: 4800,
                              products: 2900,
                              services: 2600,
                            },
                            {
                              month: "Apr",
                              donations: 5200,
                              products: 3100,
                              services: 2800,
                            },
                            {
                              month: "May",
                              donations: 5800,
                              products: 3400,
                              services: 3200,
                            },
                          ]}
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="month" />
                          <YAxis />
                          <ChartTooltip />
                          <Legend />
                          <Line
                            type="monotone"
                            dataKey="donations"
                            stroke="var(--color-donations)"
                            activeDot={{ r: 8 }}
                          />
                          <Line type="monotone" dataKey="products" stroke="var(--color-products)" />
                          <Line type="monotone" dataKey="services" stroke="var(--color-services)" />
                        </RechartsLineChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="anomalies">
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {anomalyDetection.map((anomaly) => (
                  <Card key={anomaly.id}>
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <CardTitle className="text-base font-medium">{anomaly.metric}</CardTitle>
                        <Badge
                          className={
                            anomaly.status === "positive" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                          }
                        >
                          {anomaly.deviation > 0 ? "+" : ""}
                          {anomaly.deviation.toFixed(1)}%
                        </Badge>
                      </div>
                      <CardDescription>{anomaly.date}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="flex items-center justify-between mb-4">
                        <div>
                          <div className="text-sm text-muted-foreground">Actual</div>
                          <div className="text-2xl font-bold">
                            {anomaly.metric.includes("Rate") ? `${anomaly.value}%` : anomaly.value.toLocaleString()}
                          </div>
                        </div>
                        <div className="text-2xl px-4">vs</div>
                        <div>
                          <div className="text-sm text-muted-foreground">Expected</div>
                          <div className="text-2xl font-bold">
                            {anomaly.metric.includes("Rate")
                              ? `${anomaly.expected}%`
                              : anomaly.expected.toLocaleString()}
                          </div>
                        </div>
                      </div>
                      <div className="p-3 bg-muted/50 rounded-lg text-sm">
                        <div className="flex items-center gap-2 mb-1">
                          <AlertCircle className="h-4 w-4" />
                          <span className="font-medium">AI Analysis</span>
                        </div>
                        <p>{anomaly.description}</p>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Anomaly Detection Dashboard</CardTitle>
                  <CardDescription>AI-powered monitoring of key metrics to detect unusual patterns</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        actual: {
                          label: "Actual",
                          color: "hsl(var(--chart-1))",
                        },
                        expected: {
                          label: "Expected Range",
                          color: "hsl(var(--chart-2))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <RechartsLineChart
                          data={[
                            {
                              date: "05/10",
                              actual: 12500,
                              upper: 13000,
                              lower: 11500,
                            },
                            {
                              date: "05/11",
                              actual: 12800,
                              upper: 13200,
                              lower: 11700,
                            },
                            {
                              date: "05/12",
                              actual: 13100,
                              upper: 13400,
                              lower: 11900,
                            },
                            {
                              date: "05/13",
                              actual: 13400,
                              upper: 13600,
                              lower: 12100,
                            },
                            {
                              date: "05/14",
                              actual: 13800,
                              upper: 13800,
                              lower: 12300,
                            },
                            {
                              date: "05/15",
                              actual: 15420,
                              upper: 14000,
                              lower: 12500,
                              anomaly: true,
                            },
                            {
                              date: "05/16",
                              actual: 14200,
                              upper: 14200,
                              lower: 12700,
                            },
                            {
                              date: "05/17",
                              actual: 14500,
                              upper: 14400,
                              lower: 12900,
                            },
                            {
                              date: "05/18",
                              actual: 14800,
                              upper: 14600,
                              lower: 13100,
                            },
                            {
                              date: "05/19",
                              actual: 15100,
                              upper: 14800,
                              lower: 13300,
                              anomaly: true,
                            },
                          ]}
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="date" />
                          <YAxis />
                          <ChartTooltip />
                          <Line
                            type="monotone"
                            dataKey="upper"
                            stroke="var(--color-expected)"
                            strokeDasharray="5 5"
                            dot={false}
                          />
                          <Line
                            type="monotone"
                            dataKey="lower"
                            stroke="var(--color-expected)"
                            strokeDasharray="5 5"
                            dot={false}
                          />
                          <Line
                            type="monotone"
                            dataKey="actual"
                            stroke="var(--color-actual)"
                            strokeWidth={2}
                            dot={(props) => {
                              const { cx, cy, payload } = props
                              return payload.anomaly ? (
                                <circle cx={cx} cy={cy} r={6} fill="red" stroke="var(--color-actual)" strokeWidth={2} />
                              ) : (
                                <circle
                                  cx={cx}
                                  cy={cy}
                                  r={4}
                                  fill="var(--color-actual)"
                                  stroke="var(--color-actual)"
                                  strokeWidth={1}
                                />
                              )
                            }}
                          />
                        </RechartsLineChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="predictions">
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {predictiveScenarios.map((scenario) => (
                  <Card key={scenario.id}>
                    <CardContent className="pt-6">
                      <div className="flex justify-between items-start mb-2">
                        <h3 className="font-medium">{scenario.name}</h3>
                        <Badge variant="outline">{scenario.probability}% Probability</Badge>
                      </div>
                      <div className="space-y-3">
                        <div>
                          <div className="text-sm text-muted-foreground">Projected Revenue</div>
                          <div className="text-2xl font-bold">${(scenario.revenue / 1000).toFixed(0)}K</div>
                        </div>
                        <div>
                          <div className="text-sm text-muted-foreground">Growth Rate</div>
                          <div className="flex items-center">
                            <span className="text-xl font-bold">{scenario.growth}%</span>
                            <span
                              className={`ml-2 flex items-center ${
                                scenario.growth > 10 ? "text-green-600" : "text-yellow-600"
                              }`}
                            >
                              {scenario.growth > 10 ? (
                                <ArrowUp className="h-4 w-4 mr-1" />
                              ) : (
                                <ArrowDown className="h-4 w-4 mr-1" />
                              )}
                              {scenario.growth > 10 ? "Strong" : "Moderate"}
                            </span>
                          </div>
                        </div>
                        <div className="text-sm text-muted-foreground mt-2">{scenario.description}</div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Revenue Forecast (Next 12 Months)</CardTitle>
                  <CardDescription>
                    AI-generated revenue projections based on historical data and market trends
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px]">
                    <ChartContainer
                      config={{
                        base: {
                          label: "Base Case",
                          color: "hsl(var(--chart-1))",
                        },
                        optimistic: {
                          label: "Optimistic Case",
                          color: "hsl(var(--chart-2))",
                        },
                        conservative: {
                          label: "Conservative Case",
                          color: "hsl(var(--chart-3))",
                        },
                      }}
                    >
                      <ResponsiveContainer width="100%" height="100%">
                        <RechartsLineChart
                          data={[
                            {
                              month: "Jun",
                              base: 105,
                              optimistic: 110,
                              conservative: 100,
                            },
                            {
                              month: "Jul",
                              base: 110,
                              optimistic: 118,
                              conservative: 102,
                            },
                            {
                              month: "Aug",
                              base: 115,
                              optimistic: 125,
                              conservative: 105,
                            },
                            {
                              month: "Sep",
                              base: 120,
                              optimistic: 132,
                              conservative: 108,
                            },
                            {
                              month: "Oct",
                              base: 125,
                              optimistic: 140,
                              conservative: 110,
                            },
                            {
                              month: "Nov",
                              base: 130,
                              optimistic: 148,
                              conservative: 112,
                            },
                            {
                              month: "Dec",
                              base: 140,
                              optimistic: 160,
                              conservative: 118,
                            },
                            {
                              month: "Jan",
                              base: 135,
                              optimistic: 155,
                              conservative: 115,
                            },
                            {
                              month: "Feb",
                              base: 140,
                              optimistic: 162,
                              conservative: 118,
                            },
                            {
                              month: "Mar",
                              base: 145,
                              optimistic: 170,
                              conservative: 120,
                            },
                            {
                              month: "Apr",
                              base: 150,
                              optimistic: 178,
                              conservative: 122,
                            },
                            {
                              month: "May",
                              base: 155,
                              optimistic: 185,
                              conservative: 125,
                            },
                          ]}
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="month" />
                          <YAxis label={{ value: "Revenue (K $)", angle: -90, position: "left" }} />
                          <ChartTooltip />
                          <Legend />
                          <Line type="monotone" dataKey="base" stroke="var(--color-base)" strokeWidth={2} />
                          <Line
                            type="monotone"
                            dataKey="optimistic"
                            stroke="var(--color-optimistic)"
                            strokeDasharray="5 5"
                          />
                          <Line
                            type="monotone"
                            dataKey="conservative"
                            stroke="var(--color-conservative)"
                            strokeDasharray="3 3"
                          />
                        </RechartsLineChart>
                      </ResponsiveContainer>
                    </ChartContainer>
                  </div>

<div className="mt-6 p-4 bg-muted/50 rounded-lg">
                    <div className="flex items-center gap-2 mb-2">
                      <Brain className="h-5 w-5 text-primary" />
                      <h3 className="font-medium">AI Forecast Summary</h3>
                    </div>
                    <p className="text-sm mb-3">
                      Based on current trends and market conditions, our AI predicts continued growth with a 65%
                      probability of achieving the base case scenario. Key factors influencing this forecast include:
                    </p>
                    <ul className="text-sm space-y-1 list-disc pl-5">
                      <li>Seasonal patterns suggest stronger performance in Q4 2025</li>
                      <li>Recent marketing campaigns are expected to drive 12-15% increase in new customers</li>
                      <li>Product line expansion could accelerate growth beyond base projections</li>
                      <li>Market competition remains a risk factor for the conservative scenario</li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="border-t pt-4">
        <div className="flex justify-between items-center w-full text-sm text-muted-foreground">
          <div className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            <span>Analyzing data from 1,245 records</span>
          </div>
          <div className="flex items-center gap-2">
            <Search className="h-4 w-4" />
            <span>AI model: Advanced Analytics v2.3</span>
          </div>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

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

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="app/advanced-tracking/page.tsx"
"use client"

import { useState } from "react"
import { AdvancedReports } from "@/components/tracking/advanced-reports"
import { WorkflowManagement } from "@/components/tracking/workflow-management"
import { ArchiveManagement } from "@/components/tracking/archive-management"
import { RealTimeCollaboration } from "@/components/tracking/real-time-collaboration"
import { AIInsights } from "@/components/tracking/ai-insights"
import { PasswordProtection } from "@/components/password-protection"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart, Brain, Clock, FileArchive, FileCheck, Home, MessageSquare, Settings, Users } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

// Mock data for transactions
const mockTransactions = Array.from({ length: 100 }).map((_, i) => {
  const types = ["donation", "product", "service", "offer"]
  const statuses = ["pending", "completed", "cancelled"]
  const categories = ["education", "health", "environment", "community", "technology"]

const randomDate = (start: Date, end: Date) => {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
  }

return {
    id: `TRX-${(i + 1).toString().padStart(3, "0")}`,
    type: types[Math.floor(Math.random() * types.length)],
    name: `Transaction ${i + 1}`,
    description: `Description for transaction ${i + 1}`,
    amount: Math.floor(Math.random() * 1000) + 10,
    date: randomDate(new Date(2024, 0, 1), new Date())
      .toISOString()
      .split("T")[0],
    status: statuses[Math.floor(Math.random() * statuses.length)],
    category: categories[Math.floor(Math.random() * categories.length)],
    contactName: `Contact ${i + 1}`,
    contactEmail: `contact${i + 1}@example.com`,
    contactPhone: `+1234567${i.toString().padStart(4, "0")}`,
  }
})

// Mock current user
const currentUser = {
  id: "user-1",
  name: "John Doe",
  email: "john.doe@example.com",
  role: "staff",
  avatar: "/stylized-jd-initials.png",
  status: "online",
}

export default function AdvancedTrackingPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)

if (!isAuthenticated) {
    return <PasswordProtection onAuthenticated={() => setIsAuthenticated(true)} />
  }

return (
    <div className="container mx-auto py-6 px-4 max-w-7xl">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Advanced Tracking & Workflow System</h1>
          <p className="text-muted-foreground">Comprehensive reporting, workflow management, and archiving system</p>
        </div>
        <div className="flex items-center gap-2">
          <Link href="/">
            <Button variant="outline" size="sm">
              <Home className="h-4 w-4 mr-2" />
              Back to Home
            </Button>
          </Link>
          <Link href="/tracking-system">
            <Button variant="outline" size="sm">
              <FileCheck className="h-4 w-4 mr-2" />
              Standard Tracking
            </Button>
          </Link>
        </div>
      </div>

<Tabs defaultValue="reports" className="space-y-6">
        <TabsList className="grid grid-cols-1 md:grid-cols-6 mb-8">
          <TabsTrigger value="reports">
            <BarChart className="h-4 w-4 mr-2" />
            Advanced Reports
          </TabsTrigger>
          <TabsTrigger value="workflow">
            <Clock className="h-4 w-4 mr-2" />
            Workflow Management
          </TabsTrigger>
          <TabsTrigger value="archive">
            <FileArchive className="h-4 w-4 mr-2" />
            Archive Management
          </TabsTrigger>
          <TabsTrigger value="collaboration">
            <MessageSquare className="h-4 w-4 mr-2" />
            Collaboration
          </TabsTrigger>
          <TabsTrigger value="ai-insights">
            <Brain className="h-4 w-4 mr-2" />
            AI Insights
          </TabsTrigger>
          <TabsTrigger value="settings">
            <Settings className="h-4 w-4 mr-2" />
            System Settings
          </TabsTrigger>
        </TabsList>

<TabsContent value="settings">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="border rounded-lg p-6">
              <h3 className="text-lg font-medium mb-4">User Permissions</h3>
              <p className="text-muted-foreground mb-4">
                Configure user roles and permissions for different system components
              </p>
              <div className="flex items-center gap-2">
                <Users className="h-5 w-5 text-muted-foreground" />
                <span>5 active users</span>
              </div>
              <Button className="mt-4" variant="outline">
                Manage Permissions
              </Button>
            </div>

<div className="border rounded-lg p-6">
              <h3 className="text-lg font-medium mb-4">Workflow Configuration</h3>
              <p className="text-muted-foreground mb-4">
                Customize approval workflows, notification settings, and escalation paths
              </p>
              <div className="flex items-center gap-2">
                <Clock className="h-5 w-5 text-muted-foreground" />
                <span>3 active workflows</span>
              </div>
              <Button className="mt-4" variant="outline">
                Configure Workflows
              </Button>
            </div>

<div className="border rounded-lg p-6">
              <h3 className="text-lg font-medium mb-4">Report Templates</h3>
              <p className="text-muted-foreground mb-4">Manage report templates, custom fields, and export formats</p>
              <div className="flex items-center gap-2">
                <FileCheck className="h-5 w-5 text-muted-foreground" />
                <span>12 templates defined</span>
              </div>
              <Button className="mt-4" variant="outline">
                Edit Templates
              </Button>
            </div>

<div className="border rounded-lg p-6">
              <h3 className="text-lg font-medium mb-4">AI Configuration</h3>
              <p className="text-muted-foreground mb-4">
                Configure AI analysis settings, insight preferences, and data sources
              </p>
              <div className="flex items-center gap-2">
                <Brain className="h-5 w-5 text-muted-foreground" />
                <span>AI analysis enabled</span>
              </div>
              <Button className="mt-4" variant="outline">
                Configure AI
              </Button>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/focus-dashboard.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
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 { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  BarChart,
  Target,
  Clock,
  Calendar,
  CheckCircle2,
  AlertCircle,
  FileText,
  Users,
  MessageSquare,
  Bell,
  Plus,
  MoreHorizontal,
  Zap,
  Flame,
  Lightbulb,
} from "lucide-react"
import { ProjectMetrics } from "./project-metrics"
import { TaskList } from "./task-list"
import { ActivityFeed } from "./activity-feed"
import { TeamMembers } from "./team-members"
import { MilestoneTimeline } from "./milestone-timeline"
import { ProjectInsights } from "./project-insights"
import { FocusTimer } from "./focus-timer"
import { DistractionBlocker } from "./distraction-blocker"

// Sample project data
const sampleProjects = [
  {
    id: "proj-1",
    name: "Website Redesign",
    description: "Complete overhaul of company website with modern design and improved UX",
    progress: 68,
    priority: "High",
    dueDate: "2023-12-15",
    status: "In Progress",
    owner: "Alex Johnson",
    team: ["alex", "sarah", "michael", "jessica"],
    tasks: {
      total: 24,
      completed: 16,
      inProgress: 5,
      blocked: 3,
    },
    milestones: [
      { id: "ms-1", name: "Design Approval", dueDate: "2023-10-10", completed: true },
      { id: "ms-2", name: "Frontend Development", dueDate: "2023-11-15", completed: true },
      { id: "ms-3", name: "Backend Integration", dueDate: "2023-11-30", completed: false },
      { id: "ms-4", name: "Testing & QA", dueDate: "2023-12-10", completed: false },
      { id: "ms-5", name: "Launch", dueDate: "2023-12-15", completed: false },
    ],
    recentActivities: [
      {
        id: "act-1",
        user: "sarah",
        action: "completed task",
        item: "Implement responsive design",
        time: "2 hours ago",
      },
      { id: "act-2", user: "michael", action: "commented on", item: "API Integration", time: "4 hours ago" },
      { id: "act-3", user: "alex", action: "updated", item: "Project timeline", time: "Yesterday" },
    ],
  },
  {
    id: "proj-2",
    name: "Mobile App Development",
    description: "Create a cross-platform mobile application for customer engagement",
    progress: 42,
    priority: "Medium",
    dueDate: "2024-01-20",
    status: "In Progress",
    owner: "Sarah Williams",
    team: ["sarah", "david", "emma", "alex"],
    tasks: {
      total: 32,
      completed: 13,
      inProgress: 8,
      blocked: 1,
    },
    milestones: [
      { id: "ms-1", name: "Requirements Gathering", dueDate: "2023-09-30", completed: true },
      { id: "ms-2", name: "UI/UX Design", dueDate: "2023-10-31", completed: true },
      { id: "ms-3", name: "Core Functionality", dueDate: "2023-12-15", completed: false },
      { id: "ms-4", name: "Beta Testing", dueDate: "2024-01-10", completed: false },
      { id: "ms-5", name: "App Store Submission", dueDate: "2024-01-20", completed: false },
    ],
    recentActivities: [
      { id: "act-1", user: "emma", action: "uploaded", item: "New app icons", time: "1 hour ago" },
      { id: "act-2", user: "david", action: "fixed bug in", item: "Authentication module", time: "Yesterday" },
      { id: "act-3", user: "sarah", action: "scheduled", item: "Team review meeting", time: "2 days ago" },
    ],
  },
  {
    id: "proj-3",
    name: "Market Expansion Strategy",
    description: "Research and develop strategy for entering new international markets",
    progress: 25,
    priority: "Critical",
    dueDate: "2023-12-31",
    status: "At Risk",
    owner: "Michael Chen",
    team: ["michael", "jessica", "robert", "emma"],
    tasks: {
      total: 18,
      completed: 4,
      inProgress: 6,
      blocked: 2,
    },
    milestones: [
      { id: "ms-1", name: "Market Research", dueDate: "2023-10-31", completed: true },
      { id: "ms-2", name: "Competitor Analysis", dueDate: "2023-11-15", completed: false },
      { id: "ms-3", name: "Strategy Development", dueDate: "2023-12-10", completed: false },
      { id: "ms-4", name: "Executive Presentation", dueDate: "2023-12-20", completed: false },
      { id: "ms-5", name: "Implementation Plan", dueDate: "2023-12-31", completed: false },
    ],
    recentActivities: [
      { id: "act-1", user: "robert", action: "added", item: "New market research data", time: "3 hours ago" },
      { id: "act-2", user: "michael", action: "updated", item: "Risk assessment", time: "Yesterday" },
      {
        id: "act-3",
        user: "jessica",
        action: "completed",
        item: "Competitor analysis for Region A",
        time: "3 days ago",
      },
    ],
  },
]

export function FocusDashboard() {
  const [activeProject, setActiveProject] = useState(sampleProjects[0])
  const [focusMode, setFocusMode] = useState(false)
  const [showNewProjectForm, setShowNewProjectForm] = useState(false)
  const [newProject, setNewProject] = useState({
    name: "",
    description: "",
    dueDate: "",
    priority: "Medium",
  })

// Calculate days remaining
  const calculateDaysRemaining = (dueDate: string) => {
    const today = new Date()
    const due = new Date(dueDate)
    const diffTime = due.getTime() - today.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays
  }

const daysRemaining = calculateDaysRemaining(activeProject.dueDate)

// Status badge color
  const getStatusColor = (status: string) => {
    switch (status) {
      case "Completed":
        return "bg-green-500 hover:bg-green-600"
      case "In Progress":
        return "bg-blue-500 hover:bg-blue-600"
      case "At Risk":
        return "bg-amber-500 hover:bg-amber-600"
      case "Delayed":
        return "bg-red-500 hover:bg-red-600"
      default:
        return "bg-slate-500 hover:bg-slate-600"
    }
  }

// Priority badge color
  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "Critical":
        return "bg-red-500 hover:bg-red-600"
      case "High":
        return "bg-orange-500 hover:bg-orange-600"
      case "Medium":
        return "bg-blue-500 hover:bg-blue-600"
      case "Low":
        return "bg-green-500 hover:bg-green-600"
      default:
        return "bg-slate-500 hover:bg-slate-600"
    }
  }

// Toggle focus mode
  const toggleFocusMode = () => {
    setFocusMode(!focusMode)
  }

// Handle new project form
  const handleNewProjectChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setNewProject((prev) => ({ ...prev, [name]: value }))
  }

const handleNewProjectSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real app, you would save the new project to your backend
    console.log("New project:", newProject)
    setShowNewProjectForm(false)
    setNewProject({
      name: "",
      description: "",
      dueDate: "",
      priority: "Medium",
    })
  }

return (
    <div className={`container mx-auto p-4 transition-all duration-300 ${focusMode ? "max-w-4xl" : "max-w-7xl"}`}>
      {/* Header with Focus Mode Toggle */}
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-3xl font-bold flex items-center">
            <Target className="mr-2 h-8 w-8 text-primary" />
            Project Focus Dashboard
          </h1>
          <p className="text-muted-foreground">Stay focused on your most important targets and projects</p>
        </div>
        <div className="flex items-center gap-4">
          <Button
            variant={focusMode ? "default" : "outline"}
            onClick={toggleFocusMode}
            className="flex items-center gap-2"
          >
            <Zap className={`h-4 w-4 ${focusMode ? "text-white" : "text-amber-500"}`} />
            {focusMode ? "Exit Focus Mode" : "Enter Focus Mode"}
          </Button>
          <Button onClick={() => setShowNewProjectForm(true)} className="flex items-center gap-2">
            <Plus className="h-4 w-4" />
            New Project
          </Button>
        </div>
      </div>

{/* Project Selection (Hidden in Focus Mode) */}
      {!focusMode && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {sampleProjects.map((project) => (
            <Card
              key={project.id}
              className={`cursor-pointer transition-all hover:shadow-md ${activeProject.id === project.id ? "ring-2 ring-primary" : ""}`}
              onClick={() => setActiveProject(project)}
            >
              <CardHeader className="pb-2">
                <div className="flex justify-between items-start">
                  <CardTitle className="text-lg">{project.name}</CardTitle>
                  <Badge className={getPriorityColor(project.priority)}>{project.priority}</Badge>
                </div>
                <CardDescription className="line-clamp-2">{project.description}</CardDescription>
              </CardHeader>
              <CardContent className="pb-2">
                <div className="flex justify-between items-center mb-2 text-sm">
                  <span className="flex items-center">
                    <Clock className="h-4 w-4 mr-1 text-muted-foreground" />
                    {calculateDaysRemaining(project.dueDate)} days left
                  </span>
                  <Badge variant="outline" className={`${getStatusColor(project.status)} text-white`}>
                    {project.status}
                  </Badge>
                </div>
                <Progress value={project.progress} className="h-2" />
              </CardContent>
              <CardFooter className="pt-0">
                <div className="flex justify-between items-center w-full">
                  <div className="flex -space-x-2">
                    {project.team.slice(0, 3).map((member, i) => (
                      <Avatar key={i} className="h-6 w-6 border-2 border-background">
                        <AvatarFallback className="text-xs">{member.charAt(0).toUpperCase()}</AvatarFallback>
                      </Avatar>
                    ))}
                    {project.team.length > 3 && (
                      <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background">
                        +{project.team.length - 3}
                      </div>
                    )}
                  </div>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <CheckCircle2 className="h-4 w-4 mr-1" />
                    {project.tasks.completed}/{project.tasks.total}
                  </div>
                </div>
              </CardFooter>
            </Card>
          ))}
        </div>
      )}

{/* Active Project Dashboard */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Content - 2/3 width on large screens */}
        <div className="lg:col-span-2 space-y-6">
          {/* Project Header */}
          <Card>
            <CardHeader className="pb-2">
              <div className="flex justify-between">
                <div>
                  <CardTitle className="text-2xl flex items-center">
                    {activeProject.name}
                    <Badge className={`ml-3 ${getPriorityColor(activeProject.priority)}`}>
                      {activeProject.priority}
                    </Badge>
                    <Badge variant="outline" className={`ml-2 ${getStatusColor(activeProject.status)} text-white`}>
                      {activeProject.status}
                    </Badge>
                  </CardTitle>
                  <CardDescription className="mt-1">{activeProject.description}</CardDescription>
                </div>
                <Button variant="outline" size="icon">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                <div className="bg-muted/50 p-3 rounded-lg">
                  <div className="text-sm text-muted-foreground">Progress</div>
                  <div className="text-2xl font-bold">{activeProject.progress}%</div>
                  <Progress value={activeProject.progress} className="h-2 mt-2" />
                </div>
                <div className="bg-muted/50 p-3 rounded-lg">
                  <div className="text-sm text-muted-foreground">Due Date</div>
                  <div className="text-2xl font-bold flex items-center">
                    <Calendar className="h-5 w-5 mr-1 text-muted-foreground" />
                    <span>
                      {new Date(activeProject.dueDate).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                    </span>
                  </div>
                  <div className={`text-sm mt-1 ${daysRemaining < 7 ? "text-red-500" : "text-muted-foreground"}`}>
                    {daysRemaining} days remaining
                  </div>
                </div>
                <div className="bg-muted/50 p-3 rounded-lg">
                  <div className="text-sm text-muted-foreground">Tasks</div>
                  <div className="text-2xl font-bold">
                    {activeProject.tasks.completed}/{activeProject.tasks.total}
                  </div>
                  <div className="grid grid-cols-3 gap-1 mt-2">
                    <div className="text-xs">
                      <span className="inline-block h-2 w-2 rounded-full bg-green-500 mr-1"></span>
                      Done: {activeProject.tasks.completed}
                    </div>
                    <div className="text-xs">
                      <span className="inline-block h-2 w-2 rounded-full bg-blue-500 mr-1"></span>
                      Active: {activeProject.tasks.inProgress}
                    </div>
                    <div className="text-xs">
                      <span className="inline-block h-2 w-2 rounded-full bg-red-500 mr-1"></span>
                      Blocked: {activeProject.tasks.blocked}
                    </div>
                  </div>
                </div>
                <div className="bg-muted/50 p-3 rounded-lg">
                  <div className="text-sm text-muted-foreground">Team</div>
                  <div className="text-2xl font-bold">{activeProject.team.length}</div>
                  <div className="flex mt-2 -space-x-2">
                    {activeProject.team.slice(0, 4).map((member, i) => (
                      <Avatar key={i} className="h-6 w-6 border-2 border-background">
                        <AvatarFallback className="text-xs">{member.charAt(0).toUpperCase()}</AvatarFallback>
                      </Avatar>
                    ))}
                    {activeProject.team.length > 4 && (
                      <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background">
                        +{activeProject.team.length - 4}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Tabs for Tasks, Timeline, and Activity */}
          <Tabs defaultValue="tasks">
            <TabsList className="grid grid-cols-3 mb-4">
              <TabsTrigger value="tasks" className="flex items-center">
                <CheckCircle2 className="h-4 w-4 mr-2" />
                Tasks
              </TabsTrigger>
              <TabsTrigger value="timeline" className="flex items-center">
                <BarChart className="h-4 w-4 mr-2" />
                Timeline
              </TabsTrigger>
              <TabsTrigger value="activity" className="flex items-center">
                <MessageSquare className="h-4 w-4 mr-2" />
                Activity
              </TabsTrigger>
            </TabsList>

<TabsContent value="tasks">
              <Card>
                <CardHeader className="pb-2">
                  <div className="flex justify-between items-center">
                    <CardTitle>Project Tasks</CardTitle>
                    <Button size="sm">
                      <Plus className="h-4 w-4 mr-1" />
                      Add Task
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <TaskList />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="timeline">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle>Project Timeline</CardTitle>
                </CardHeader>
                <CardContent>
                  <MilestoneTimeline milestones={activeProject.milestones} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="activity">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle>Recent Activity</CardTitle>
                </CardHeader>
                <CardContent>
                  <ActivityFeed activities={activeProject.recentActivities} />
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>

{/* Project Metrics */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle>Project Metrics</CardTitle>
            </CardHeader>
            <CardContent>
              <ProjectMetrics />
            </CardContent>
          </Card>
        </div>

{/* Sidebar - 1/3 width on large screens */}
        <div className="space-y-6">
          {/* Focus Timer (Only visible in focus mode) */}
          {focusMode && (
            <Card className="bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center">
                  <Flame className="h-5 w-5 mr-2 text-primary" />
                  Focus Session
                </CardTitle>
              </CardHeader>
              <CardContent>
                <FocusTimer />
              </CardContent>
            </Card>
          )}

{/* Team Members */}
          <Card>
            <CardHeader className="pb-2">
              <div className="flex justify-between items-center">
                <CardTitle className="flex items-center">
                  <Users className="h-5 w-5 mr-2 text-muted-foreground" />
                  Team
                </CardTitle>
                <Button variant="ghost" size="sm" className="text-xs">
                  View All
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <TeamMembers />
            </CardContent>
          </Card>

{/* Project Insights */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center">
                <Lightbulb className="h-5 w-5 mr-2 text-amber-500" />
                AI Insights
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ProjectInsights />
            </CardContent>
          </Card>

{/* Distraction Blocker (Only visible in focus mode) */}
          {focusMode && (
            <Card className="bg-gradient-to-br from-red-500/10 to-red-500/5 border-red-500/20">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center">
                  <AlertCircle className="h-5 w-5 mr-2 text-red-500" />
                  Distraction Blocker
                </CardTitle>
              </CardHeader>
              <CardContent>
                <DistractionBlocker />
              </CardContent>
            </Card>
          )}

{/* Upcoming Deadlines */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center">
                <Calendar className="h-5 w-5 mr-2 text-muted-foreground" />
                Upcoming Deadlines
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {activeProject.milestones
                  .filter((m) => !m.completed)
                  .sort((a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime())
                  .slice(0, 3)
                  .map((milestone) => (
                    <div key={milestone.id} className="flex justify-between items-center">
                      <div>
                        <div className="font-medium">{milestone.name}</div>
                        <div className="text-sm text-muted-foreground">
                          {new Date(milestone.dueDate).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                        </div>
                      </div>
                      <div
                        className={`text-sm ${
                          calculateDaysRemaining(milestone.dueDate) < 3
                            ? "text-red-500"
                            : calculateDaysRemaining(milestone.dueDate) < 7
                              ? "text-amber-500"
                              : "text-muted-foreground"
                        }`}
                      >
                        {calculateDaysRemaining(milestone.dueDate)} days left
                      </div>
                    </div>
                  ))}
                {activeProject.milestones.filter((m) => !m.completed).length === 0 && (
                  <div className="text-center py-4 text-muted-foreground">All milestones completed!</div>
                )}
              </div>
            </CardContent>
          </Card>

{/* Quick Actions */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle>Quick Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-2">
                <Button variant="outline" className="justify-start">
                  <FileText className="h-4 w-4 mr-2" />
                  Generate Report
                </Button>
                <Button variant="outline" className="justify-start">
                  <Bell className="h-4 w-4 mr-2" />
                  Set Reminder
                </Button>
                <Button variant="outline" className="justify-start">
                  <Users className="h-4 w-4 mr-2" />
                  Team Meeting
                </Button>
                <Button variant="outline" className="justify-start">
                  <MessageSquare className="h-4 w-4 mr-2" />
                  Send Update
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* New Project Form Modal */}
      {showNewProjectForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <Card className="w-full max-w-md">
            <CardHeader>
              <CardTitle>Create New Project</CardTitle>
              <CardDescription>Add a new project to track and manage</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleNewProjectSubmit} className="space-y-4">
                <div className="space-y-2">
                  <label htmlFor="name" className="text-sm font-medium">
                    Project Name
                  </label>
                  <Input
                    id="name"
                    name="name"
                    value={newProject.name}
                    onChange={handleNewProjectChange}
                    placeholder="Enter project name"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="description" className="text-sm font-medium">
                    Description
                  </label>
                  <Textarea
                    id="description"
                    name="description"
                    value={newProject.description}
                    onChange={handleNewProjectChange}
                    placeholder="Enter project description"
                    rows={3}
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label htmlFor="dueDate" className="text-sm font-medium">
                      Due Date
                    </label>
                    <Input
                      id="dueDate"
                      name="dueDate"
                      type="date"
                      value={newProject.dueDate}
                      onChange={handleNewProjectChange}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="priority" className="text-sm font-medium">
                      Priority
                    </label>
                    <select
                      id="priority"
                      name="priority"
                      value={newProject.priority}
                      onChange={handleNewProjectChange}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    >
                      <option value="Low">Low</option>
                      <option value="Medium">Medium</option>
                      <option value="High">High</option>
                      <option value="Critical">Critical</option>
                    </select>
                  </div>
                </div>
              </form>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" onClick={() => setShowNewProjectForm(false)}>
                Cancel
              </Button>
              <Button onClick={handleNewProjectSubmit}>Create Project</Button>
            </CardFooter>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/task-list.tsx"
"use client"

import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { MoreHorizontal, AlertCircle, Clock, ArrowUp, ArrowRight, ArrowDown, MessageSquare } from "lucide-react"

// Sample tasks data
const sampleTasks = [
  {
    id: "task-1",
    title: "Design homepage wireframes",
    description: "Create wireframes for the new homepage design",
    status: "Completed",
    priority: "High",
    assignee: "sarah",
    dueDate: "2023-11-05",
    comments: 3,
  },
  {
    id: "task-2",
    title: "Implement responsive navigation",
    description: "Create responsive navigation menu for all device sizes",
    status: "In Progress",
    priority: "High",
    assignee: "alex",
    dueDate: "2023-11-10",
    comments: 5,
  },
  {
    id: "task-3",
    title: "Set up CI/CD pipeline",
    description: "Configure continuous integration and deployment pipeline",
    status: "Blocked",
    priority: "Critical",
    assignee: "michael",
    dueDate: "2023-11-12",
    comments: 2,
  },
  {
    id: "task-4",
    title: "Create API documentation",
    description: "Document all API endpoints and parameters",
    status: "Not Started",
    priority: "Medium",
    assignee: "jessica",
    dueDate: "2023-11-15",
    comments: 0,
  },
  {
    id: "task-5",
    title: "Implement authentication system",
    description: "Set up user authentication and authorization",
    status: "In Progress",
    priority: "High",
    assignee: "david",
    dueDate: "2023-11-18",
    comments: 7,
  },
]

export function TaskList() {
  const [tasks, setTasks] = useState(sampleTasks)
  const [filter, setFilter] = useState("all")

// Filter tasks based on status
  const filteredTasks =
    filter === "all" ? tasks : tasks.filter((task) => task.status.toLowerCase() === filter.toLowerCase())

// Get status badge color
  const getStatusColor = (status: string) => {
    switch (status) {
      case "Completed":
        return "bg-green-500 hover:bg-green-600"
      case "In Progress":
        return "bg-blue-500 hover:bg-blue-600"
      case "Blocked":
        return "bg-red-500 hover:bg-red-600"
      case "Not Started":
        return "bg-slate-500 hover:bg-slate-600"
      default:
        return "bg-slate-500 hover:bg-slate-600"
    }
  }

// Get priority icon
  const getPriorityIcon = (priority: string) => {
    switch (priority) {
      case "Critical":
        return <ArrowUp className="h-3 w-3 text-red-500" />
      case "High":
        return <ArrowUp className="h-3 w-3 text-orange-500" />
      case "Medium":
        return <ArrowRight className="h-3 w-3 text-blue-500" />
      case "Low":
        return <ArrowDown className="h-3 w-3 text-green-500" />
      default:
        return <ArrowRight className="h-3 w-3 text-slate-500" />
    }
  }

// Toggle task completion
  const toggleTaskCompletion = (taskId: string) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId
          ? {
              ...task,
              status: task.status === "Completed" ? "In Progress" : "Completed",
            }
          : task,
      ),
    )
  }

return (
    <div>
      {/* Task Filters */}
      <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
        <Button variant={filter === "all" ? "default" : "outline"} size="sm" onClick={() => setFilter("all")}>
          All
        </Button>
        <Button
          variant={filter === "in progress" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("in progress")}
        >
          In Progress
        </Button>
        <Button
          variant={filter === "completed" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("completed")}
        >
          Completed
        </Button>
        <Button variant={filter === "blocked" ? "default" : "outline"} size="sm" onClick={() => setFilter("blocked")}>
          Blocked
        </Button>
        <Button
          variant={filter === "not started" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("not started")}
        >
          Not Started
        </Button>
      </div>

{/* Tasks List */}
      <div className="space-y-3">
        {filteredTasks.map((task) => (
          <div
            key={task.id}
            className={`p-3 border rounded-lg transition-all ${
              task.status === "Completed" ? "bg-muted/30" : "bg-background hover:shadow-sm"
            }`}
          >
            <div className="flex items-start gap-3">
              <Checkbox
                checked={task.status === "Completed"}
                onCheckedChange={() => toggleTaskCompletion(task.id)}
                className="mt-1"
              />
              <div className="flex-1 min-w-0">
                <div className="flex items-start justify-between gap-2">
                  <h3
                    className={`font-medium ${task.status === "Completed" ? "line-through text-muted-foreground" : ""}`}
                  >
                    {task.title}
                  </h3>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <Badge variant="outline" className={`${getStatusColor(task.status)} text-white text-xs`}>
                      {task.status}
                    </Badge>
                    <Button variant="ghost" size="icon" className="h-7 w-7">
                      <MoreHorizontal className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <p className="text-sm text-muted-foreground line-clamp-2 mt-1">{task.description}</p>
                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-2 text-xs text-muted-foreground">
                  <div className="flex items-center">
                    <Avatar className="h-5 w-5 mr-1">
                      <AvatarFallback className="text-[10px]">{task.assignee.charAt(0).toUpperCase()}</AvatarFallback>
                    </Avatar>
                    <span>{task.assignee}</span>
                  </div>
                  <div className="flex items-center">
                    <Clock className="h-3 w-3 mr-1" />
                    <span>
                      {new Date(task.dueDate).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                    </span>
                  </div>
                  <div className="flex items-center">
                    {getPriorityIcon(task.priority)}
                    <span className="ml-1">{task.priority}</span>
                  </div>
                  {task.status === "Blocked" && (
                    <div className="flex items-center text-red-500">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      <span>Blocked</span>
                    </div>
                  )}
                  {task.comments > 0 && (
                    <div className="flex items-center">
                      <MessageSquare className="h-3 w-3 mr-1" />
                      <span>{task.comments}</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}

{filteredTasks.length === 0 && (
          <div className="text-center py-8 text-muted-foreground">No tasks found matching the current filter.</div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/milestone-timeline.tsx"
"use client"

import { CheckCircle, Circle } from "lucide-react"

interface Milestone {
  id: string
  name: string
  dueDate: string
  completed: boolean
}

interface MilestoneTimelineProps {
  milestones: Milestone[]
}

export function MilestoneTimeline({ milestones }: MilestoneTimelineProps) {
  // Sort milestones by due date
  const sortedMilestones = [...milestones].sort((a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime())

return (
    <div className="relative">
      {/* Timeline line */}
      <div className="absolute left-3.5 top-0 bottom-0 w-0.5 bg-muted-foreground/20" />

{/* Milestones */}
      <div className="space-y-8">
        {sortedMilestones.map((milestone, index) => (
          <div key={milestone.id} className="relative pl-10">
            {/* Milestone indicator */}
            <div className="absolute left-0 top-0.5">
              {milestone.completed ? (
                <CheckCircle className="h-7 w-7 text-green-500 bg-background rounded-full" />
              ) : (
                <Circle className="h-7 w-7 text-muted-foreground/50 bg-background rounded-full" />
              )}
            </div>

{/* Milestone content */}
            <div className={`${milestone.completed ? "opacity-70" : ""}`}>
              <h3 className={`text-lg font-medium ${milestone.completed ? "line-through text-muted-foreground" : ""}`}>
                {milestone.name}
              </h3>
              <div className="flex items-center text-sm text-muted-foreground mt-1">
                <span>
                  Due:{" "}
                  {new Date(milestone.dueDate).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "short",
                    day: "numeric",
                  })}
                </span>
                {milestone.completed && (
                  <span className="ml-3 text-green-500 flex items-center">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Completed
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/activity-feed.tsx"
"use client"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

interface Activity {
  id: string
  user: string
  action: string
  item: string
  time: string
}

interface ActivityFeedProps {
  activities: Activity[]
}

export function ActivityFeed({ activities }: ActivityFeedProps) {
  return (
    <div className="space-y-4">
      {activities.map((activity) => (
        <div key={activity.id} className="flex items-start gap-3">
          <Avatar className="h-8 w-8">
            <AvatarFallback>{activity.user.charAt(0).toUpperCase()}</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="text-sm">
              <span className="font-medium">{activity.user}</span>{" "}
              <span className="text-muted-foreground">{activity.action}</span>{" "}
              <span className="font-medium">{activity.item}</span>
            </div>
            <div className="text-xs text-muted-foreground mt-1">{activity.time}</div>
          </div>
        </div>
      ))}

{activities.length === 0 && <div className="text-center py-8 text-muted-foreground">No recent activity.</div>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/project-metrics.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart4, PieChart, LineChart, TrendingUp } from "lucide-react"

export function ProjectMetrics() {
  return (
    <Tabs defaultValue="progress">
      <TabsList className="grid grid-cols-4 mb-4">
        <TabsTrigger value="progress" className="flex items-center">
          <BarChart4 className="h-4 w-4 mr-2" />
          Progress
        </TabsTrigger>
        <TabsTrigger value="tasks" className="flex items-center">
          <PieChart className="h-4 w-4 mr-2" />
          Tasks
        </TabsTrigger>
        <TabsTrigger value="time" className="flex items-center">
          <LineChart className="h-4 w-4 mr-2" />
          Time
        </TabsTrigger>
        <TabsTrigger value="performance" className="flex items-center">
          <TrendingUp className="h-4 w-4 mr-2" />
          Performance
        </TabsTrigger>
      </TabsList>

<TabsContent value="progress">
        <Card>
          <CardContent className="pt-6">
            <div className="h-[200px] flex items-center justify-center bg-muted/30 rounded-md">
              <div className="text-center">
                <BarChart4 className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
                <p className="text-muted-foreground">Progress chart visualization would appear here</p>
                <p className="text-xs text-muted-foreground mt-1">Showing weekly progress over time</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="tasks">
        <Card>
          <CardContent className="pt-6">
            <div className="h-[200px] flex items-center justify-center bg-muted/30 rounded-md">
              <div className="text-center">
                <PieChart className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
                <p className="text-muted-foreground">Task distribution chart would appear here</p>
                <p className="text-xs text-muted-foreground mt-1">Showing tasks by status and assignee</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="time">
        <Card>
          <CardContent className="pt-6">
            <div className="h-[200px] flex items-center justify-center bg-muted/30 rounded-md">
              <div className="text-center">
                <LineChart className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
                <p className="text-muted-foreground">Time tracking chart would appear here</p>
                <p className="text-xs text-muted-foreground mt-1">Showing hours spent per day/week</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="performance">
        <Card>
          <CardContent className="pt-6">
            <div className="h-[200px] flex items-center justify-center bg-muted/30 rounded-md">
              <div className="text-center">
                <TrendingUp className="h-10 w-10 mx-auto text-muted-foreground mb-2" />
                <p className="text-muted-foreground">Performance metrics would appear here</p>
                <p className="text-xs text-muted-foreground mt-1">Showing velocity, burndown, and efficiency</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/team-members.tsx"
"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

// Sample team members data
const teamMembers = [
  {
    id: "user-1",
    name: "Alex Johnson",
    role: "Project Lead",
    avatar: "/abstract-letter-aj.png",
    status: "online",
    tasks: 8,
    completedTasks: 5,
  },
  {
    id: "user-2",
    name: "Sarah Williams",
    role: "UX Designer",
    avatar: "/stylized-sw.png",
    status: "online",
    tasks: 6,
    completedTasks: 4,
  },
  {
    id: "user-3",
    name: "Michael Chen",
    role: "Frontend Developer",
    avatar: "/microphone-concert-stage.png",
    status: "away",
    tasks: 10,
    completedTasks: 7,
  },
  {
    id: "user-4",
    name: "Jessica Taylor",
    role: "Backend Developer",
    avatar: "/abstract-geometric-jt.png",
    status: "offline",
    tasks: 7,
    completedTasks: 3,
  },
]

export function TeamMembers() {
  // Get status indicator color
  const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "bg-green-500"
      case "away":
        return "bg-amber-500"
      case "offline":
        return "bg-slate-300"
      default:
        return "bg-slate-300"
    }
  }

return (
    <div className="space-y-3">
      {teamMembers.map((member) => (
        <div key={member.id} className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="relative">
              <Avatar>
                <AvatarImage src={member.avatar || "/placeholder.svg"} alt={member.name} />
                <AvatarFallback>
                  {member.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <span
                className={`absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background ${getStatusColor(member.status)}`}
              />
            </div>
            <div>
              <div className="font-medium">{member.name}</div>
              <div className="text-xs text-muted-foreground">{member.role}</div>
            </div>
          </div>
          <div className="text-sm">
            <Badge variant="outline" className="text-xs">
              {member.completedTasks}/{member.tasks} tasks
            </Badge>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/project-insights.tsx"
"use client"

import { AlertTriangle, TrendingUp, Lightbulb, CheckCircle, XCircle } from "lucide-react"
import { Separator } from "@/components/ui/separator"

export function ProjectInsights() {
  return (
    <div className="space-y-4">
      {/* Risk Alert */}
      <div className="flex gap-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
        <AlertTriangle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
        <div>
          <h4 className="font-medium text-red-600 dark:text-red-400">Risk Detected</h4>
          <p className="text-sm text-muted-foreground">
            Backend integration milestone is at risk of missing the deadline. Consider allocating additional resources.
          </p>
        </div>
      </div>

{/* Positive Trend */}
      <div className="flex gap-3 p-3 bg-green-500/10 border border-green-500/20 rounded-lg">
        <TrendingUp className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
        <div>
          <h4 className="font-medium text-green-600 dark:text-green-400">Positive Trend</h4>
          <p className="text-sm text-muted-foreground">
            Task completion rate has increased by 15% in the last week. Team productivity is improving.
          </p>
        </div>
      </div>

{/* Recommendations */}
      <div>
        <h4 className="font-medium flex items-center mb-2">
          <Lightbulb className="h-4 w-4 mr-2 text-amber-500" />
          AI Recommendations
        </h4>
        <div className="space-y-2">
          <div className="flex gap-2 items-start">
            <CheckCircle className="h-4 w-4 text-green-500 mt-0.5" />
            <p className="text-sm">Schedule a team meeting to address the backend integration blockers</p>
          </div>
          <div className="flex gap-2 items-start">
            <CheckCircle className="h-4 w-4 text-green-500 mt-0.5" />
            <p className="text-sm">Consider breaking down the API integration task into smaller subtasks</p>
          </div>
          <div className="flex gap-2 items-start">
            <CheckCircle className="h-4 w-4 text-green-500 mt-0.5" />
            <p className="text-sm">Reallocate resources from completed design tasks to backend development</p>
          </div>
        </div>
      </div>

{/* Project Health */}
      <div>
        <h4 className="font-medium mb-2">Project Health Assessment</h4>
        <div className="space-y-2">
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
              <span className="text-sm">Timeline</span>
            </div>
            <span className="text-sm text-green-500">On Track</span>
          </div>
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <AlertTriangle className="h-4 w-4 text-amber-500 mr-2" />
              <span className="text-sm">Budget</span>
            </div>
            <span className="text-sm text-amber-500">At Risk</span>
          </div>
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <XCircle className="h-4 w-4 text-red-500 mr-2" />
              <span className="text-sm">Resources</span>
            </div>
            <span className="text-sm text-red-500">Insufficient</span>
          </div>
          <div className="flex justify-between items-center">
            <div className="flex items-center">
              <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
              <span className="text-sm">Quality</span>
            </div>
            <span className="text-sm text-green-500">Good</span>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/focus-timer.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Play, Pause, RotateCcw, Bell } from "lucide-react"

export function FocusTimer() {
  const [isRunning, setIsRunning] = useState(false)
  const [timeLeft, setTimeLeft] = useState(25 * 60) // 25 minutes in seconds
  const [totalTime, setTotalTime] = useState(25 * 60) // 25 minutes in seconds
  const [timerType, setTimerType] = useState<"focus" | "break">("focus")
  const [sessionsCompleted, setSessionsCompleted] = useState(0)

// Format time as MM:SS
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

// Calculate progress percentage
  const progressPercentage = ((totalTime - timeLeft) / totalTime) * 100

// Timer effect
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null

if (isRunning && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1)
      }, 1000)
    } else if (isRunning && timeLeft === 0) {
      // Timer completed
      setIsRunning(false)

// Play notification sound (would be implemented in a real app)
      console.log("Timer completed!")

// Switch timer type and reset
      if (timerType === "focus") {
        setSessionsCompleted((prev) => prev + 1)
        setTimerType("break")
        setTimeLeft(5 * 60) // 5 minute break
        setTotalTime(5 * 60)
      } else {
        setTimerType("focus")
        setTimeLeft(25 * 60) // Back to 25 minute focus
        setTotalTime(25 * 60)
      }
    }

return () => {
      if (interval) clearInterval(interval)
    }
  }, [isRunning, timeLeft, timerType])

// Start/pause timer
  const toggleTimer = () => {
    setIsRunning(!isRunning)
  }

// Reset timer
  const resetTimer = () => {
    setIsRunning(false)
    if (timerType === "focus") {
      setTimeLeft(25 * 60)
    } else {
      setTimeLeft(5 * 60)
    }
  }

return (
    <div className="text-center">
      <div className="mb-4">
        <h3 className="text-lg font-bold mb-1">{timerType === "focus" ? "Focus Session" : "Break Time"}</h3>
        <p className="text-sm text-muted-foreground">
          {timerType === "focus" ? "Stay focused on your current task" : "Take a short break to recharge"}
        </p>
      </div>

<div className="relative mb-6">
        <div className="text-4xl font-mono font-bold mb-2">{formatTime(timeLeft)}</div>
        <Progress value={progressPercentage} className="h-2" />
      </div>

<div className="flex justify-center gap-2 mb-4">
        <Button onClick={toggleTimer} variant="outline" size="icon" className="h-10 w-10 rounded-full">
          {isRunning ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
        </Button>
        <Button onClick={resetTimer} variant="outline" size="icon" className="h-10 w-10 rounded-full">
          <RotateCcw className="h-4 w-4" />
        </Button>
      </div>

<div className="text-sm text-muted-foreground">
        {sessionsCompleted > 0 && (
          <div className="flex items-center justify-center gap-1">
            <Bell className="h-3 w-3" />
            <span>
              {sessionsCompleted} {sessionsCompleted === 1 ? "session" : "sessions"} completed
            </span>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/project-focus/distraction-blocker.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, BellOff, Smartphone, Globe, MessageSquare } from "lucide-react"

export function DistractionBlocker() {
  const [blockers, setBlockers] = useState({
    notifications: true,
    socialMedia: true,
    email: false,
    messaging: false,
  })

// Toggle blocker state
  const toggleBlocker = (blocker: keyof typeof blockers) => {
    setBlockers((prev) => ({
      ...prev,
      [blocker]: !prev[blocker],
    }))
  }

return (
    <div className="space-y-4">
      <div className="text-sm text-muted-foreground mb-2">
        Enable blockers to minimize distractions during your focus sessions.
      </div>

<div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <BellOff className="h-4 w-4 text-muted-foreground" />
            <span>Notifications</span>
          </div>
          <Switch checked={blockers.notifications} onCheckedChange={() => toggleBlocker("notifications")} />
        </div>

<div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Globe className="h-4 w-4 text-muted-foreground" />
            <span>Social Media</span>
            <Badge variant="outline" className="text-xs">
              Top Distraction
            </Badge>
          </div>
          <Switch checked={blockers.socialMedia} onCheckedChange={() => toggleBlocker("socialMedia")} />
        </div>

<div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
            <span>Email</span>
          </div>
          <Switch checked={blockers.email} onCheckedChange={() => toggleBlocker("email")} />
        </div>

<div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Smartphone className="h-4 w-4 text-muted-foreground" />
            <span>Messaging</span>
          </div>
          <Switch checked={blockers.messaging} onCheckedChange={() => toggleBlocker("messaging")} />
        </div>
      </div>

<div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-3 flex gap-2">
        <AlertTriangle className="h-5 w-5 text-amber-500 flex-shrink-0" />
        <div className="text-sm">
          <p className="font-medium text-amber-600 dark:text-amber-400">Distraction Alert</p>
          <p className="text-muted-foreground">
            You've been distracted 8 times in your last focus session. Enable more blockers to improve focus.
          </p>
        </div>
      </div>

<Button className="w-full">Block All Distractions</Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/project-focus/page.tsx"
import { FocusDashboard } from "@/components/project-focus/focus-dashboard"

export default function ProjectFocusPage() {
  return <FocusDashboard />
}
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"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-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background 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/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

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

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]png:file="public/abstract-letter-aj.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-letter-aj-U3fUPwGG9D92mfdRPcPSbLm7XcBSkH.png"
[V0_FILE]png:file="public/stylized-sw.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stylized-sw-MQBVlkeuNpfwIYeADAar3j7PnnAuBZ.png"
[V0_FILE]png:file="public/microphone-concert-stage.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/microphone-concert-stage-DdhU5OnZ5HgTAifpVkMgi5M7pPHb6F.png"
[V0_FILE]png:file="public/abstract-geometric-jt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-jt-o7O4rFQ5mANLWhMk0iyq62p1KFqAHs.png"
[V0_FILE]typescriptreact:file="app/meeting-preparation/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/meeting-preparation-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/meeting-preparation-bg-L38rrJDxRA6f9wwgtO41iebEXbMHNy.png"
[V0_FILE]typescriptreact:file="components/meeting-export.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Download, FileText, FileSpreadsheet, Check } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { toast } from "@/components/ui/use-toast"

// Define the meeting type
interface MeetingTopic {
  id: string
  title: string
  notes: string
  completed: boolean
}

interface MeetingQA {
  id: string
  question: string
  answer: string
}

interface MeetingMaterial {
  id: string
  title: string
  type: string
  url: string
}

interface MeetingRequest {
  id: string
  request: string
  status: "pending" | "approved" | "rejected"
}

interface Meeting {
  id: string
  title: string
  date: string
  time: string
  location: string
  participants: string[]
  description: string
  topics: MeetingTopic[]
  qa: MeetingQA[]
  materials: MeetingMaterial[]
  requests: MeetingRequest[]
}

interface MeetingExportProps {
  meeting: Meeting | null
}

export function MeetingExport({ meeting }: MeetingExportProps) {
  const [exporting, setExporting] = useState(false)

if (!meeting) return null

const exportAsPDF = async () => {
    setExporting(true)
    try {
      // Dynamically import jsPDF to avoid SSR issues
      const { default: jsPDF } = await import("jspdf")
      const doc = new jsPDF()

// Add title
      doc.setFontSize(20)
      doc.text(meeting.title, 20, 20)

// Add meeting details
      doc.setFontSize(12)
      doc.text(`Date: ${meeting.date}`, 20, 30)
      doc.text(`Time: ${meeting.time}`, 20, 37)
      doc.text(`Location: ${meeting.location}`, 20, 44)

// Add participants
      doc.text("Participants:", 20, 54)
      meeting.participants.forEach((participant, index) => {
        doc.text(`- ${participant}`, 25, 61 + index * 7)
      })

let yPosition = 61 + meeting.participants.length * 7 + 10

// Add description
      doc.text("Description:", 20, yPosition)
      const descriptionLines = doc.splitTextToSize(meeting.description, 170)
      doc.text(descriptionLines, 25, yPosition + 7)

yPosition += 7 + descriptionLines.length * 7 + 10

// Add topics
      doc.text("Discussion Topics:", 20, yPosition)
      yPosition += 7
      meeting.topics.forEach((topic, index) => {
        const status = topic.completed ? "[✓]" : "[ ]"
        doc.text(`${status} ${topic.title}`, 25, yPosition + index * 7)
      })

yPosition += meeting.topics.length * 7 + 10

// Add Q&A
      if (meeting.qa.length > 0) {
        doc.text("Q&A:", 20, yPosition)
        yPosition += 7
        meeting.qa.forEach((qa, index) => {
          doc.text(`Q: ${qa.question}`, 25, yPosition + index * 14)
          doc.text(`A: ${qa.answer}`, 25, yPosition + 7 + index * 14)
        })

yPosition += meeting.qa.length * 14 + 10
      }

// Add materials
      if (meeting.materials.length > 0) {
        doc.text("Materials:", 20, yPosition)
        yPosition += 7
        meeting.materials.forEach((material, index) => {
          doc.text(`- ${material.title} (${material.type})`, 25, yPosition + index * 7)
        })

yPosition += meeting.materials.length * 7 + 10
      }

// Add requests
      if (meeting.requests.length > 0) {
        doc.text("Requests:", 20, yPosition)
        yPosition += 7
        meeting.requests.forEach((request, index) => {
          doc.text(`- ${request.request} [${request.status}]`, 25, yPosition + index * 7)
        })
      }

// Save the PDF
      doc.save(`${meeting.title.replace(/\s+/g, "_")}_preparation.pdf`)

toast({
        title: "Export successful",
        description: "Meeting preparation exported as PDF",
      })
    } catch (error) {
      console.error("Error exporting to PDF:", error)
      toast({
        title: "Export failed",
        description: "There was an error exporting to PDF",
        variant: "destructive",
      })
    } finally {
      setExporting(false)
    }
  }

const exportAsCSV = () => {
    setExporting(true)
    try {
      // Create CSV content
      let csvContent = "data:text/csv;charset=utf-8,"

// Add meeting details
      csvContent += `Title,${meeting.title}\r\n`
      csvContent += `Date,${meeting.date}\r\n`
      csvContent += `Time,${meeting.time}\r\n`
      csvContent += `Location,${meeting.location}\r\n`
      csvContent += `Description,${meeting.description.replace(/,/g, ";").replace(/\n/g, " ")}\r\n\r\n`

// Add participants
      csvContent += "Participants\r\n"
      meeting.participants.forEach((participant) => {
        csvContent += `${participant}\r\n`
      })
      csvContent += "\r\n"

// Add topics
      csvContent += "Discussion Topics,Status\r\n"
      meeting.topics.forEach((topic) => {
        csvContent += `${topic.title.replace(/,/g, ";")},${topic.completed ? "Completed" : "Pending"}\r\n`
      })
      csvContent += "\r\n"

// Add Q&A
      if (meeting.qa.length > 0) {
        csvContent += "Question,Answer\r\n"
        meeting.qa.forEach((qa) => {
          csvContent += `${qa.question.replace(/,/g, ";")},${qa.answer.replace(/,/g, ";")}\r\n`
        })
        csvContent += "\r\n"
      }

// Add materials
      if (meeting.materials.length > 0) {
        csvContent += "Material,Type,URL\r\n"
        meeting.materials.forEach((material) => {
          csvContent += `${material.title.replace(/,/g, ";")},${material.type},${material.url}\r\n`
        })
        csvContent += "\r\n"
      }

// Add requests
      if (meeting.requests.length > 0) {
        csvContent += "Request,Status\r\n"
        meeting.requests.forEach((request) => {
          csvContent += `${request.request.replace(/,/g, ";")},${request.status}\r\n`
        })
      }

// Create download link
      const encodedUri = encodeURI(csvContent)
      const link = document.createElement("a")
      link.setAttribute("href", encodedUri)
      link.setAttribute("download", `${meeting.title.replace(/\s+/g, "_")}_preparation.csv`)
      document.body.appendChild(link)

// Trigger download
      link.click()
      document.body.removeChild(link)

toast({
        title: "Export successful",
        description: "Meeting preparation exported as CSV",
      })
    } catch (error) {
      console.error("Error exporting to CSV:", error)
      toast({
        title: "Export failed",
        description: "There was an error exporting to CSV",
        variant: "destructive",
      })
    } finally {
      setExporting(false)
    }
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="gap-2">
          <Download className="h-4 w-4" />
          Export
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={exportAsPDF} disabled={exporting} className="cursor-pointer">
          <FileText className="h-4 w-4 mr-2" />
          Export as PDF
          {exporting && <Check className="h-4 w-4 ml-2" />}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={exportAsCSV} disabled={exporting} className="cursor-pointer">
          <FileSpreadsheet className="h-4 w-4 mr-2" />
          Export as CSV
          {exporting && <Check className="h-4 w-4 ml-2" />}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isFixed="true" isQuickEdit="true"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
      inset && "pl-8",
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, checked, children, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <Check className="h-4 w-4" />
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <Circle className="h-2 w-2 fill-current text-current" />
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/use-toast.tsx"
import { useToast, toast } from "@/hooks/use-toast"

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/meeting-preparation/meeting-dashboard.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ProjectFolderStructure } from "./project-folder-structure"
import {
  Calendar,
  Clock,
  Users,
  FileText,
  CheckSquare,
  HelpCircle,
  Presentation,
  MessageSquare,
  Download,
  Share2,
  Printer,
} from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

interface MeetingDashboardProps {
  meetingDate: string
  meetingTime: string
  meetingLocation: string
  contactPerson: string
  projectName: string
  organizationName: string
}

export function MeetingDashboard({
  meetingDate,
  meetingTime,
  meetingLocation,
  contactPerson,
  projectName,
  organizationName,
}: MeetingDashboardProps) {
  const [activeTab, setActiveTab] = useState("overview")

// Mock data for the dashboard
  const preparationProgress = 85
  const documentsReady = 12
  const totalDocuments = 14

const keyTasks = [
    { id: 1, task: "Finalize sponsorship proposal", completed: true },
    { id: 2, task: "Prepare presentation slides", completed: true },
    { id: 3, task: "Compile case studies and testimonials", completed: true },
    { id: 4, task: "Review Q&A preparation document", completed: true },
    { id: 5, task: "Practice presentation delivery", completed: false },
    { id: 6, task: "Prepare follow-up email template", completed: true },
  ]

const meetingAgenda = [
    { id: 1, time: "2:00 PM", item: "Introduction and Welcome", duration: "5 min" },
    { id: 2, time: "2:05 PM", item: "Infinity Nexus Project Overview", duration: "15 min" },
    { id: 3, time: "2:20 PM", item: "Sponsorship Proposal Presentation", duration: "20 min" },
    { id: 4, time: "2:40 PM", item: "Benefits for Sponsors", duration: "15 min" },
    { id: 5, time: "2:55 PM", item: "Q&A Session", duration: "20 min" },
    { id: 6, time: "3:15 PM", item: "Next Steps and Action Items", duration: "10 min" },
    { id: 7, time: "3:25 PM", item: "Closing Remarks", duration: "5 min" },
  ]

return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Sponsorship Meeting Dashboard</h1>
          <p className="text-muted-foreground">Preparation for financial institution sponsorship meeting</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <Printer className="h-4 w-4 mr-2" />
            Print
          </Button>
          <Button variant="outline" size="sm">
            <Share2 className="h-4 w-4 mr-2" />
            Share
          </Button>
          <Button variant="outline" size="sm">
            <Download className="h-4 w-4 mr-2" />
            Export
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Meeting Details</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center">
                <Calendar className="h-4 w-4 mr-2 text-muted-foreground" />
                <span className="text-sm">{meetingDate}</span>
              </div>
              <div className="flex items-center">
                <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                <span className="text-sm">{meetingTime}</span>
              </div>
              <div className="flex items-center">
                <Users className="h-4 w-4 mr-2 text-muted-foreground" />
                <span className="text-sm">Contact: {contactPerson}</span>
              </div>
              <div className="flex items-center">
                <FileText className="h-4 w-4 mr-2 text-muted-foreground" />
                <span className="text-sm">Location: {meetingLocation}</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Project Information</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center">
                <span className="text-sm font-medium">Project:</span>
                <Badge variant="outline" className="ml-2">
                  {projectName}
                </Badge>
              </div>
              <div className="flex items-center">
                <span className="text-sm font-medium">Organization:</span>
                <span className="text-sm ml-2">{organizationName}</span>
              </div>
              <div className="flex items-center">
                <span className="text-sm font-medium">Focus Area:</span>
                <span className="text-sm ml-2">Cox's Bazar, Bangladesh</span>
              </div>
              <div className="flex items-center">
                <span className="text-sm font-medium">Type:</span>
                <span className="text-sm ml-2">Sponsorship Request</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Preparation Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between mb-1">
                  <span className="text-sm font-medium">Overall Progress</span>
                  <span className="text-sm font-medium">{preparationProgress}%</span>
                </div>
                <Progress value={preparationProgress} className="h-2" />
              </div>

<div className="grid grid-cols-2 gap-2">
                <div className="bg-muted rounded-md p-2 text-center">
                  <div className="text-2xl font-bold">{documentsReady}</div>
                  <div className="text-xs text-muted-foreground">Documents Ready</div>
                </div>
                <div className="bg-muted rounded-md p-2 text-center">
                  <div className="text-2xl font-bold">{totalDocuments}</div>
                  <div className="text-xs text-muted-foreground">Total Documents</div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="overview" onValueChange={setActiveTab} className="space-y-4">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="documents">Documents</TabsTrigger>
          <TabsTrigger value="agenda">Agenda</TabsTrigger>
          <TabsTrigger value="tasks">Tasks</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Meeting Objective</CardTitle>
              </CardHeader>
              <CardContent>
                <p>
                  Secure financial sponsorship for the Infinity Nexus project by presenting a compelling case for
                  partnership, demonstrating clear benefits, and establishing next steps for formal agreement.
                </p>

<div className="mt-4">
                  <h4 className="font-medium mb-2">Key Outcomes:</h4>
                  <ul className="list-disc pl-5 space-y-1">
                    <li>Establish strong first impression and relationship</li>
                    <li>Clearly communicate project vision and impact</li>
                    <li>Address potential concerns and questions</li>
                    <li>Secure commitment for next steps in sponsorship process</li>
                    <li>Identify specific areas of interest for customized proposal</li>
                  </ul>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Key Discussion Points</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <CheckSquare className="h-5 w-5 mr-2 text-green-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="font-medium">Project Vision & Impact</p>
                      <p className="text-sm text-muted-foreground">
                        Global standard data hub for scientific research with focus on Cox's Bazar
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <CheckSquare className="h-5 w-5 mr-2 text-green-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="font-medium">Sponsorship Requirements</p>
                      <p className="text-sm text-muted-foreground">
                        Financial needs, resource allocation, and implementation timeline
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <CheckSquare className="h-5 w-5 mr-2 text-green-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="font-medium">Sponsor Benefits</p>
                      <p className="text-sm text-muted-foreground">
                        Brand visibility, access to innovations, community engagement
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <CheckSquare className="h-5 w-5 mr-2 text-green-500 flex-shrink-0 mt-0.5" />
                    <div>
                      <p className="font-medium">Partnership Structure</p>
                      <p className="text-sm text-muted-foreground">
                        Sponsorship tiers, recognition, and engagement opportunities
                      </p>
                    </div>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Preparation Checklist</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <h4 className="font-medium flex items-center mb-2">
                    <Presentation className="h-4 w-4 mr-2" />
                    Presentation Materials
                  </h4>
                  <ul className="space-y-1">
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Main presentation deck</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Project overview document</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Budget breakdown</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Visual assets & infographics</span>
                    </li>
                  </ul>
                </div>

<div>
                  <h4 className="font-medium flex items-center mb-2">
                    <HelpCircle className="h-4 w-4 mr-2" />
                    Q&A Preparation
                  </h4>
                  <ul className="space-y-1">
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Anticipated questions doc</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Technical FAQ</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Objection handling guide</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Supporting statistics</span>
                    </li>
                  </ul>
                </div>

<div>
                  <h4 className="font-medium flex items-center mb-2">
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Follow-up Materials
                  </h4>
                  <ul className="space-y-1">
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Thank you email template</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Draft partnership agreement</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Next steps document</span>
                    </li>
                    <li className="flex items-center">
                      <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                      <span className="text-sm">Additional resources list</span>
                    </li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="documents">
          <Card>
            <CardHeader>
              <CardTitle>Project Documents</CardTitle>
            </CardHeader>
            <CardContent>
              <ProjectFolderStructure />
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="agenda">
          <Card>
            <CardHeader>
              <CardTitle>Meeting Agenda</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <h3 className="font-medium">Detailed Timeline</h3>
                  <Badge variant="outline">Total: 90 minutes</Badge>
                </div>

<div className="space-y-2">
                  {meetingAgenda.map((item, index) => (
                    <div key={item.id} className="flex items-start p-3 rounded-md border">
                      <div className="flex-shrink-0 w-16 text-center">
                        <div className="font-medium">{item.time}</div>
                        <div className="text-xs text-muted-foreground">{item.duration}</div>
                      </div>
                      <Separator orientation="vertical" className="mx-4 h-10" />
                      <div>
                        <div className="font-medium">{item.item}</div>
                        <div className="text-sm text-muted-foreground">
                          {index === 0 && "Brief introduction of attendees and meeting objectives"}
                          {index === 1 && "Present vision, mission, current status, and future roadmap"}
                          {index === 2 && "Detail financial requirements, resource allocation, and timeline"}
                          {index === 3 && "Explain brand visibility, data access, and engagement opportunities"}
                          {index === 4 && "Address questions from financial institution representatives"}
                          {index === 5 && "Establish follow-up timeline and documentation sharing plan"}
                          {index === 6 && "Thank participants and summarize key points"}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

<div className="bg-muted p-4 rounded-md">
                  <h4 className="font-medium mb-2">Presentation Tips:</h4>
                  <ul className="list-disc pl-5 space-y-1 text-sm">
                    <li>Begin with a compelling story about the impact of data sharing in research</li>
                    <li>Use visual aids effectively, especially when presenting statistics</li>
                    <li>Allow time for questions throughout, not just during Q&A</li>
                    <li>Emphasize local impact in Cox's Bazar alongside global significance</li>
                    <li>Close with a clear, specific call to action regarding next steps</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="tasks">
          <Card>
            <CardHeader>
              <CardTitle>Preparation Tasks</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-medium mb-2">Key Tasks</h3>
                  <div className="space-y-2">
                    {keyTasks.map((task) => (
                      <div key={task.id} className="flex items-center p-3 rounded-md border">
                        <div
                          className={`flex-shrink-0 h-5 w-5 rounded-full mr-3 ${task.completed ? "bg-green-500" : "bg-amber-500"}`}
                        />
                        <div className="flex-grow">
                          <span className={task.completed ? "line-through text-muted-foreground" : ""}>
                            {task.task}
                          </span>
                        </div>
                        <Badge variant={task.completed ? "outline" : "secondary"}>
                          {task.completed ? "Completed" : "Pending"}
                        </Badge>
                      </div>
                    ))}
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-muted p-4 rounded-md">
                    <h4 className="font-medium mb-2">Pre-Meeting Checklist:</h4>
                    <ul className="space-y-1 text-sm">
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                        <span>Confirm meeting details with all participants</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                        <span>Test presentation equipment and connectivity</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                        <span>Prepare printed copies of key documents</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-green-500" />
                        <span>Review latest financial institution news</span>
                      </li>
                    </ul>
                  </div>

<div className="bg-muted p-4 rounded-md">
                    <h4 className="font-medium mb-2">Post-Meeting Actions:</h4>
                    <ul className="space-y-1 text-sm">
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span>Send thank you email within 24 hours</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span>Share requested additional information</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span>Schedule follow-up meeting if appropriate</span>
                      </li>
                      <li className="flex items-center">
                        <CheckSquare className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span>Update CRM with meeting outcomes</span>
                      </li>
                    </ul>
                  </div>
                </div>

<div className="p-4 border rounded-md">
                  <h4 className="font-medium mb-2">Team Responsibilities:</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                      <h5 className="text-sm font-medium">MJ Ahmad</h5>
                      <ul className="text-sm mt-1 space-y-1">
                        <li>Lead presentation</li>
                        <li>Project vision overview</li>
                        <li>Final Q&A responses</li>
                      </ul>
                    </div>
                    <div>
                      <h5 className="text-sm font-medium">Technical Lead</h5>
                      <ul className="text-sm mt-1 space-y-1">
                        <li>Technical implementation details</li>
                        <li>Data security explanations</li>
                        <li>Technical Q&A support</li>
                      </ul>
                    </div>
                    <div>
                      <h5 className="text-sm font-medium">Financial Officer</h5>
                      <ul className="text-sm mt-1 space-y-1">
                        <li>Budget presentation</li>
                        <li>ROI calculations</li>
                        <li>Financial documentation</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/meeting-preparation/document-preview.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import {
  Download,
  X,
  ZoomIn,
  ZoomOut,
  RotateCw,
  Copy,
  Printer,
  FileText,
  FileImage,
  FileIcon as FilePresentationIcon,
  FileSpreadsheetIcon,
  FileArchiveIcon,
  ExternalLink,
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

interface File {
  id: string
  name: string
  type: "pdf" | "docx" | "md" | "pptx" | "xlsx" | "image" | "zip"
  content?: string
  url?: string
}

interface DocumentPreviewProps {
  file: File | null
  isOpen: boolean
  onClose: () => void
}

export function DocumentPreview({ file, isOpen, onClose }: DocumentPreviewProps) {
  const [zoom, setZoom] = useState(100)
  const [activeTab, setActiveTab] = useState<"preview" | "properties">("preview")
  const { toast } = useToast()

// Reset zoom when file changes
  useEffect(() => {
    setZoom(100)
    setActiveTab("preview")
  }, [file])

if (!file) return null

const handleZoomIn = () => {
    setZoom((prev) => Math.min(prev + 25, 200))
  }

const handleZoomOut = () => {
    setZoom((prev) => Math.max(prev - 25, 50))
  }

const handleResetZoom = () => {
    setZoom(100)
  }

const handleCopyContent = () => {
    if (file.content) {
      navigator.clipboard.writeText(file.content)
      toast({
        title: "Content copied",
        description: "Document content has been copied to clipboard",
      })
    }
  }

const handlePrint = () => {
    toast({
      title: "Print requested",
      description: "Printing functionality would be implemented here",
    })
  }

const handleDownload = () => {
    if (file.content) {
      const blob = new Blob([file.content], { type: "text/plain" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = file.name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

toast({
        title: "File downloaded",
        description: `${file.name} has been downloaded.`,
      })
    } else {
      toast({
        title: "Download simulated",
        description: `In a real app, ${file.name} would download now.`,
      })
    }
  }

const getFileIcon = () => {
    switch (file.type) {
      case "pdf":
        return <FileText className="h-6 w-6 text-red-500" />
      case "docx":
        return <FileText className="h-6 w-6 text-blue-500" />
      case "md":
        return <FileText className="h-6 w-6 text-green-500" />
      case "pptx":
        return <FilePresentationIcon className="h-6 w-6 text-orange-500" />
      case "xlsx":
        return <FileSpreadsheetIcon className="h-6 w-6 text-green-600" />
      case "image":
        return <FileImage className="h-6 w-6 text-purple-500" />
      case "zip":
        return <FileArchiveIcon className="h-6 w-6 text-yellow-500" />
      default:
        return <FileText className="h-6 w-6 text-gray-500" />
    }
  }

const renderPreview = () => {
    if (file.content && file.type === "md") {
      return (
        <div className="prose dark:prose-invert max-w-none p-6" style={{ zoom: `${zoom}%` }}>
          <pre className="whitespace-pre-wrap text-sm p-4 bg-gray-50 dark:bg-gray-900 rounded-md">{file.content}</pre>
        </div>
      )
    }

if (file.type === "image" && file.url) {
      return (
        <div className="flex justify-center p-6">
          <img
            src={file.url || "/placeholder.svg"}
            alt={file.name}
            className="max-w-full h-auto rounded-md"
            style={{ zoom: `${zoom}%` }}
          />
        </div>
      )
    }

if (file.type === "pdf" && file.url) {
      return (
        <div className="w-full h-[70vh]">
          <iframe
            src={`${file.url}#toolbar=0&navpanes=0`}
            className="w-full h-full border-0 rounded-md"
            title={file.name}
          />
        </div>
      )
    }

// For other file types, show a placeholder with download option
    return (
      <div className="flex flex-col items-center justify-center p-12 text-center">
        <div className="text-6xl mb-4">{getFileIcon()}</div>
        <h3 className="text-xl font-semibold mb-2">{file.name}</h3>
        <p className="text-muted-foreground mb-6">Preview not available for this file type.</p>
        <div className="flex gap-2">
          <Button onClick={handleDownload}>
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>
          {file.url && (
            <Button variant="outline">
              <ExternalLink className="h-4 w-4 mr-2" />
              Open in New Tab
            </Button>
          )}
        </div>
      </div>
    )
  }

const renderProperties = () => {
    return (
      <div className="p-6 space-y-4">
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">File Name</h3>
          <p>{file.name}</p>
        </div>
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">File Type</h3>
          <p>{file.type.toUpperCase()}</p>
        </div>
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Size</h3>
          <p>{file.content ? `${Math.round(file.content.length / 1024)} KB` : "Unknown"}</p>
        </div>
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Created</h3>
          <p>May 15, 2025</p>
        </div>
        <div>
          <h3 className="text-sm font-medium text-muted-foreground mb-1">Last Modified</h3>
          <p>May 18, 2025</p>
        </div>
        {file.content && (
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-1">Content Preview</h3>
            <p className="text-sm text-muted-foreground truncate">{file.content.substring(0, 150)}...</p>
          </div>
        )}
      </div>
    )
  }

return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-4xl w-full h-[85vh] flex flex-col p-0">
        <DialogHeader className="px-6 py-2 flex flex-row items-center justify-between border-b">
          <div className="flex items-center">
            {getFileIcon()}
            <DialogTitle className="ml-2">{file.name}</DialogTitle>
          </div>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" onClick={handleZoomOut} disabled={zoom <= 50}>
              <ZoomOut className="h-4 w-4" />
            </Button>
            <span className="text-sm w-12 text-center">{zoom}%</span>
            <Button variant="ghost" size="icon" onClick={handleZoomIn} disabled={zoom >= 200}>
              <ZoomIn className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleResetZoom}>
              <RotateCw className="h-4 w-4" />
            </Button>
            <Separator orientation="vertical" className="h-6 mx-1" />
            {file.content && (
              <Button variant="ghost" size="icon" onClick={handleCopyContent}>
                <Copy className="h-4 w-4" />
              </Button>
            )}
            <Button variant="ghost" size="icon" onClick={handlePrint}>
              <Printer className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleDownload}>
              <Download className="h-4 w-4" />
            </Button>
            <Separator orientation="vertical" className="h-6 mx-1" />
            <Button variant="ghost" size="icon" onClick={onClose}>
              <X className="h-4 w-4" />
            </Button>
          </div>
        </DialogHeader>

<Tabs
          value={activeTab}
          onValueChange={(value) => setActiveTab(value as "preview" | "properties")}
          className="flex-1 flex flex-col"
        >
          <div className="border-b px-6 py-2">
            <TabsList>
              <TabsTrigger value="preview">Preview</TabsTrigger>
              <TabsTrigger value="properties">Properties</TabsTrigger>
            </TabsList>
          </div>

<ScrollArea className="flex-1">
            <TabsContent value="preview" className="mt-0 h-full">
              {renderPreview()}
            </TabsContent>
            <TabsContent value="properties" className="mt-0">
              {renderProperties()}
            </TabsContent>
          </ScrollArea>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/meeting-preparation/document-preview-modal.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import {
  Download,
  ZoomIn,
  ZoomOut,
  RotateCw,
  Copy,
  Printer,
  ExternalLink,
  Maximize2,
  Minimize2,
  Share2,
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

interface File {
  id: string
  name: string
  type: string
  content?: string
  url?: string
}

interface DocumentPreviewModalProps {
  file: File | null
  isOpen: boolean
  onClose: () => void
}

export function DocumentPreviewModal({ file, isOpen, onClose }: DocumentPreviewModalProps) {
  const [zoom, setZoom] = useState(100)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [activeTab, setActiveTab] = useState("preview")
  const { toast } = useToast()

useEffect(() => {
    setZoom(100)
    setActiveTab("preview")
  }, [file])

useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement)
    }

document.addEventListener("fullscreenchange", handleFullscreenChange)
    return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange)
    }
  }, [])

if (!file) return null

const handleZoomIn = () => {
    setZoom((prev) => Math.min(prev + 25, 200))
  }

const handleZoomOut = () => {
    setZoom((prev) => Math.max(prev - 25, 50))
  }

const handleResetZoom = () => {
    setZoom(100)
  }

const handlePrint = () => {
    window.print()
  }

const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch((err) => {
        console.error(`Error attempting to enable fullscreen: ${err.message}`)
      })
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      }
    }
  }

const handleShare = () => {
    toast({
      title: "Share functionality",
      description: "Sharing options would appear here in a real application.",
    })
  }

const getFileIcon = () => {
    switch (file.type) {
      case "pdf":
        return "📄"
      case "docx":
        return "📝"
      case "md":
        return "📋"
      case "pptx":
        return "📊"
      case "xlsx":
        return "📈"
      case "image":
        return "🖼️"
      case "zip":
        return "🗄️"
      default:
        return "📄"
    }
  }

const renderPreview = () => {
    if (file.content && (file.type === "md" || file.type === "txt")) {
      return (
        <div className="prose dark:prose-invert max-w-none p-6" style={{ zoom: `${zoom}%` }}>
          <pre className="whitespace-pre-wrap text-sm p-4 bg-gray-50 dark:bg-gray-900 rounded-md overflow-auto">
            {file.content}
          </pre>
        </div>
      )
    }

if (file.type === "pdf" && file.url) {
      return (
        <div className="w-full h-[70vh]">
          <iframe src={file.url} className="w-full h-full border-0 rounded-md" title={file.name} />
        </div>
      )
    }

// For other file types, show a placeholder
    return (
      <div className="flex flex-col items-center justify-center p-12 text-center">
        <div className="text-6xl mb-4">{getFileIcon()}</div>
        <h3 className="text-xl font-semibold mb-2">{file.name}</h3>
        <p className="text-muted-foreground mb-6">Preview not available for this file type.</p>
        <div className="flex gap-2">
          <Button onClick={handleDownload}>
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>
          {file.url && (
            <Button variant="outline">
              <ExternalLink className="h-4 w-4 mr-2" />
              Open in New Tab
            </Button>
          )}
        </div>
      </div>
    )
  }

return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent
        className={`max-w-5xl w-full ${
          isFullscreen ? "h-screen max-h-screen rounded-none m-0 p-0" : "h-[85vh]"
        } flex flex-col p-0`}
      >
        <DialogHeader className="px-6 py-2 flex flex-row items-center justify-between border-b">
          <div className="flex items-center">
            <span className="mr-2 text-xl">{getFileIcon()}</span>
            <DialogTitle>{file.name}</DialogTitle>
          </div>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" onClick={handleZoomOut} disabled={zoom <= 50}>
              <ZoomOut className="h-4 w-4" />
            </Button>
            <span className="text-sm w-12 text-center">{zoom}%</span>
            <Button variant="ghost" size="icon" onClick={handleZoomIn} disabled={zoom >= 200}>
              <ZoomIn className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleResetZoom}>
              <RotateCw className="h-4 w-4" />
            </Button>
            <Separator orientation="vertical" className="h-6 mx-1" />
            {file.content && (
              <Button variant="ghost" size="icon" onClick={handleCopyContent}>
                <Copy className="h-4 w-4" />
              </Button>
            )}
            <Button variant="ghost" size="icon" onClick={handlePrint}>
              <Printer className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleDownload}>
              <Download className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleShare}>
              <Share2 className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" onClick={toggleFullscreen}>
              {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
            </Button>
          </div>
        </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
          <div className="border-b px-6 py-2">
            <TabsList>
              <TabsTrigger value="preview">Preview</TabsTrigger>
              <TabsTrigger value="properties">Properties</TabsTrigger>
            </TabsList>
          </div>

import { useState, useEffect } from "react"
import {
  ChevronDown,
  ChevronRight,
  FileText,
  FolderOpen,
  FolderIcon,
  Copy,
  Download,
  Eye,
  FileCode,
  FileImage,
  FileIcon as FilePresentationIcon,
  FileSpreadsheetIcon,
  FileArchiveIcon,
} from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useToast } from "@/components/ui/use-toast"
import { DocumentPreviewModal } from "./document-preview-modal"

// Define the folder structure types
interface File {
  id: string
  name: string
  type: "pdf" | "docx" | "md" | "pptx" | "xlsx" | "image" | "zip"
  content?: string
  url?: string
}

interface FolderType {
  id: string
  name: string
  files: File[]
  subfolders: FolderType[]
  expanded?: boolean
}

// Sample data structure for Infinity Nexus project
const infinityNexusData: FolderType = {
  id: "root",
  name: "Infinity Nexus Sponsorship Meeting",
  expanded: true,
  files: [
    {
      id: "meeting-agenda",
      name: "Meeting Agenda.md",
      type: "md",
      content: `# Infinity Nexus Sponsorship Meeting Agenda
      
Date: 23rd, 2:00 PM
Location: Financial Institution Headquarters
Participants: MJ AHMAD (Trusted Ally), Financial Institution Representatives

## Agenda Items:

1. **Introduction and Welcome** (5 minutes)
   - Brief introduction of attendees
   - Overview of meeting objectives

2. **Infinity Nexus Project Overview** (15 minutes)
   - Project vision and mission
   - Current status and achievements
   - Future roadmap

3. **Sponsorship Proposal Presentation** (20 minutes)
   - Financial requirements
   - Resource allocation plan
   - Timeline and milestones

4. **Benefits for Sponsors** (15 minutes)
   - Brand visibility and recognition
   - Access to research data and innovations
   - Community engagement opportunities

5. **Q&A Session** (20 minutes)
   - Address questions from financial institution

6. **Next Steps and Action Items** (10 minutes)
   - Follow-up timeline
   - Documentation sharing
   - Future meeting schedule

7. **Closing Remarks** (5 minutes)`,
    },
  ],
  subfolders: [
    {
      id: "project-overview",
      name: "1. Project Overview",
      expanded: false,
      files: [
        {
          id: "executive-summary",
          name: "Executive Summary.pdf",
          type: "pdf",
          url: "/data/infinity-nexus-executive-summary.pdf",
        },
        {
          id: "project-vision",
          name: "Project Vision & Mission.md",
          type: "md",
          content: `# Infinity Nexus: Vision & Mission

## Vision
To establish a globally recognized, open-source data hub that accelerates scientific research and innovation through standardized data sharing and collaboration.

## Mission
Infinity Nexus aims to create an inclusive, accessible platform that connects researchers, innovators, and institutions worldwide, with a special focus on emerging markets and underrepresented communities, starting with our base in Cox's Bazar, Bangladesh.

## Core Values
- **Openness**: Commitment to open-source principles and transparent operations
- **Inclusivity**: Ensuring accessibility for researchers from all backgrounds
- **Innovation**: Fostering creative solutions to global challenges
- **Integrity**: Maintaining the highest standards of data ethics and research practices
- **Impact**: Focusing on real-world applications that improve lives

## Strategic Objectives
1. Develop a standardized framework for scientific data sharing
2. Build a robust technological infrastructure for data storage and analysis
3. Create a vibrant community of researchers and innovators
4. Establish partnerships with academic institutions, industry leaders, and funding organizations
5. Implement educational programs to enhance data literacy and research capabilities`,
        },
        {
          id: "current-progress",
          name: "Current Progress Report.pptx",
          type: "pptx",
          url: "/data/infinity-nexus-progress.pptx",
        },
        {
          id: "team-structure",
          name: "Team Structure.docx",
          type: "docx",
          url: "/data/infinity-nexus-team.docx",
        },
      ],
      subfolders: [],
    },
    {
      id: "sponsorship-proposal",
      name: "2. Sponsorship Proposal",
      expanded: false,
      files: [
        {
          id: "detailed-proposal",
          name: "Detailed Sponsorship Proposal.pdf",
          type: "pdf",
          url: "/data/infinity-nexus-sponsorship.pdf",
        },
        {
          id: "budget-breakdown",
          name: "Budget Breakdown.xlsx",
          type: "xlsx",
          url: "/data/infinity-nexus-budget.xlsx",
        },
        {
          id: "funding-tiers",
          name: "Sponsorship Tiers.md",
          type: "md",
          content: `# Infinity Nexus Sponsorship Tiers

## Platinum Tier: $100,000+
- **Recognition**: Named as "Founding Partner" on all Infinity Nexus platforms and publications
- **Branding**: Prominent logo placement on website, annual reports, and all major events
- **Access**: Exclusive access to all research data and innovations before public release
- **Engagement**: Quarterly strategic meetings with Infinity Nexus leadership team
- **Events**: VIP access to all Infinity Nexus events and conferences
- **Impact**: Direct input on strategic direction and research priorities

## Gold Tier: $50,000 - $99,999
- **Recognition**: Named as "Gold Partner" on Infinity Nexus platforms and publications
- **Branding**: Logo placement on website, annual reports, and major events
- **Access**: Priority access to research data and innovations
- **Engagement**: Bi-annual meetings with Infinity Nexus leadership team
- **Events**: Priority registration for all Infinity Nexus events and conferences
- **Impact**: Opportunity to suggest research focus areas

## Silver Tier: $25,000 - $49,999
- **Recognition**: Named as "Silver Partner" on Infinity Nexus platforms
- **Branding**: Logo placement on website and annual reports
- **Access**: Early access to selected research data and innovations
- **Engagement**: Annual meeting with Infinity Nexus project leads
- **Events**: Complimentary passes to major Infinity Nexus events
- **Impact**: Recognition in project outcomes related to sponsored areas

## Bronze Tier: $10,000 - $24,999
- **Recognition**: Named as "Bronze Partner" on Infinity Nexus website
- **Branding**: Logo placement on website
- **Access**: Access to public research data and innovations
- **Engagement**: Invitations to Infinity Nexus community events
- **Events**: Discounted passes to Infinity Nexus events
- **Impact**: Recognition in general project communications

## Community Supporter: Up to $9,999
- **Recognition**: Listed as "Community Supporter" on Infinity Nexus website
- **Engagement**: Regular updates on project progress
- **Events**: Invitation to annual community showcase
- **Impact**: Contributing to the advancement of open scientific research`,
        },
        {
          id: "timeline",
          name: "Implementation Timeline.docx",
          type: "docx",
          url: "/data/infinity-nexus-timeline.docx",
        },
      ],
      subfolders: [],
    },
    {
      id: "benefits-impact",
      name: "3. Benefits & Impact",
      expanded: false,
      files: [
        {
          id: "sponsor-benefits",
          name: "Sponsor Benefits Overview.pdf",
          type: "pdf",
          url: "/data/infinity-nexus-benefits.pdf",
        },
        {
          id: "case-studies",
          name: "Success Case Studies.pptx",
          type: "pptx",
          url: "/data/infinity-nexus-case-studies.pptx",
        },
        {
          id: "impact-metrics",
          name: "Impact Metrics.md",
          type: "md",
          content: `# Infinity Nexus: Impact Metrics

## Current Impact Metrics

### Research Acceleration
- **Data Sharing**: 250+ datasets standardized and shared
- **Research Papers**: 15 publications citing Infinity Nexus data
- **Collaboration**: 30+ cross-institutional research projects initiated

### Community Growth
- **Researchers**: 120+ active researchers using the platform
- **Institutions**: 25 academic and research institutions participating
- **Countries**: Representation from 18 countries across 5 continents

### Educational Impact
- **Training Sessions**: 40+ data science workshops conducted
- **Students Reached**: 350+ students trained in data standards
- **Educational Materials**: 20+ open-source learning modules developed

### Local Impact in Cox's Bazar
- **Local Employment**: 15 full-time positions created
- **Skills Development**: 75+ local residents trained in technical skills
- **Infrastructure**: Establishment of a data center with renewable energy

## Projected Impact with Sponsorship

### Research Acceleration
- **Data Sharing**: Scale to 1,000+ datasets within 18 months
- **Research Papers**: Facilitate 50+ publications annually
- **Collaboration**: Enable 100+ cross-institutional projects

### Community Growth
- **Researchers**: Expand to 500+ active researchers
- **Institutions**: Partner with 100+ institutions globally
- **Countries**: Extend reach to 40+ countries

### Educational Impact
- **Training Sessions**: Conduct 100+ workshops annually
- **Students Reached**: Train 1,500+ students in data science
- **Educational Materials**: Develop comprehensive curriculum in 5 languages

### Local Impact in Cox's Bazar
- **Local Employment**: Create 50+ technical positions
- **Skills Development**: Establish a technology training center for 500+ residents annually
- **Infrastructure**: Expand data center and establish a research hub

### Sustainable Development Goals Alignment
- **SDG 4**: Quality Education
- **SDG 8**: Decent Work and Economic Growth
- **SDG 9**: Industry, Innovation, and Infrastructure
- **SDG 17**: Partnerships for the Goals`,
        },
        {
          id: "testimonials",
          name: "Partner Testimonials.docx",
          type: "docx",
          url: "/data/infinity-nexus-testimonials.docx",
        },
      ],
      subfolders: [],
    },
    {
      id: "presentation-materials",
      name: "4. Presentation Materials",
      expanded: false,
      files: [
        {
          id: "main-presentation",
          name: "Main Sponsorship Presentation.pptx",
          type: "pptx",
          url: "/data/infinity-nexus-presentation.pptx",
        },
        {
          id: "demo-materials",
          name: "Platform Demo Materials.zip",
          type: "zip",
          url: "/data/infinity-nexus-demo.zip",
        },
        {
          id: "presentation-script",
          name: "Presentation Script.md",
          type: "md",
          content: `# Infinity Nexus Sponsorship Presentation Script

## Introduction Slide
"Good afternoon and thank you for meeting with us today. I'm MJ AHMAD, representing Trusted Ally, and I'm excited to share with you our groundbreaking project, Infinity Nexus."

## Vision & Mission Slide
"Infinity Nexus is an open-source initiative creating a global standard data hub for scientific research and innovation. Our mission is to accelerate scientific discovery by breaking down data silos and enabling seamless collaboration across borders and disciplines."

## Problem Statement Slide
"Today, scientific research is hampered by fragmented data standards, limited access to resources, and insufficient collaboration infrastructure. This is particularly acute in emerging regions like Cox's Bazar, where we're based, despite the tremendous talent and potential there."

## Solution Slide
"Infinity Nexus addresses these challenges by providing:
1. A standardized framework for scientific data sharing
2. Robust infrastructure for data storage and analysis
3. Collaborative tools for researchers worldwide
4. Educational resources to build capacity in underserved communities"

## Current Progress Slide
"We've already made significant progress, with over 120 researchers from 25 institutions across 18 countries actively using our platform. We've facilitated 15 published research papers and standardized more than 250 datasets."

## Impact Slide
"Beyond the numbers, we're creating real impact by:
- Accelerating research in critical fields like climate science and public health
- Building technical capacity in Cox's Bazar, creating jobs and opportunities
- Democratizing access to scientific tools and knowledge"

## Sponsorship Need Slide
"To scale our impact, we're seeking strategic partners who share our vision. Your sponsorship would enable us to:
1. Expand our technical infrastructure
2. Develop advanced data analysis tools
3. Extend our educational programs
4. Increase our global outreach"

## Sponsorship Tiers Slide
"We offer several partnership levels, each with unique benefits tailored to align with your organization's goals and values. From prominent branding to exclusive access to innovations, we ensure meaningful returns on your investment."

## Benefits Slide
"By partnering with Infinity Nexus, you'll:
- Associate your brand with cutting-edge innovation and social impact
- Gain early access to emerging research and technologies
- Connect with a global network of scientific leaders
- Contribute directly to sustainable development goals"

## Case Study Slide
"Let me share a brief example of how our platform has already made a difference..."

## Call to Action Slide
"We invite you to join us in this journey to transform how scientific research is conducted globally. Your support would be instrumental in bringing this vision to life."

## Closing Slide
"Thank you for your time today. I'm happy to answer any questions you might have about Infinity Nexus and how we can create a meaningful partnership."`,
        },
        {
          id: "visual-assets",
          name: "Visual Assets & Infographics.pdf",
          type: "pdf",
          url: "/data/infinity-nexus-visuals.pdf",
        },
      ],
      subfolders: [],
    },
    {
      id: "qa-preparation",
      name: "5. Q&A Preparation",
      expanded: false,
      files: [
        {
          id: "anticipated-questions",
          name: "Anticipated Questions & Answers.md",
          type: "md",
          content: `# Anticipated Questions & Prepared Answers

## Project Viability

**Q: How does Infinity Nexus differentiate itself from existing data sharing platforms?**

A: Infinity Nexus is unique in three key ways:
1. We focus specifically on standardization across scientific disciplines, not just within them
2. We're built from the ground up with emerging markets in mind, ensuring accessibility for researchers with limited resources
3. We combine data infrastructure with educational components, building capacity alongside providing tools

**Q: What is your sustainability plan beyond initial sponsorship?**

A: We've developed a multi-faceted sustainability strategy:
1. Tiered membership model for institutions (while keeping core access free for individual researchers)
2. Data analytics services for organizations requiring specialized support
3. Grant funding for specific research initiatives
4. Consulting services leveraging our expertise in data standardization
5. Educational program fees from institutions that can afford them (while maintaining scholarships for those who cannot)

## Financial Considerations

**Q: How will our sponsorship funds be allocated?**

A: Your sponsorship will be allocated approximately as follows:
- 40% to technical infrastructure development and maintenance
- 25% to research staff and data scientists
- 20% to educational programs and community building
- 10% to global outreach and partnership development
- 5% to administrative costs

We maintain complete transparency in our financial reporting and would provide detailed quarterly updates on fund utilization.

**Q: What is your expected ROI timeline for sponsors?**

A: Sponsors begin seeing returns immediately through brand visibility and association with innovation. Tangible metrics typically develop along this timeline:
- Immediate: Brand visibility across our platform and events
- 3-6 months: Access to initial research outputs and community engagement
- 6-12 months: Measurable impact metrics in sponsored research areas
- 12-24 months: Potential commercial applications from supported research

## Technical Questions

**Q: How do you ensure data security and privacy?**

A: We implement a comprehensive security framework:
- End-to-end encryption for all sensitive data
- Granular access controls allowing researchers to determine sharing parameters
- Regular security audits by independent third parties
- Compliance with international data protection standards including GDPR
- Ethical review process for all data collection methodologies

**Q: How scalable is your platform?**

A: Infinity Nexus is built on a cloud-native, microservices architecture specifically designed for scalability:
- Containerized applications that can scale horizontally
- Distributed database systems optimized for scientific datasets
- Automated load balancing and resource allocation
- Modular design allowing independent scaling of different components
- Current architecture tested to handle 100x our present user base

## Impact Assessment

**Q: How do you measure the success of your project?**

A: We track success through multiple dimensions:
- Research outputs: publications, patents, and innovations
- Community growth: user numbers, institutional partnerships, geographic reach
- Educational impact: training completions, skill development metrics
- Economic impact: jobs created, research funding facilitated
- Technological advancement: adoption of our data standards, platform utilization metrics

We provide comprehensive quarterly impact reports to all sponsors.

**Q: What is your specific impact in Cox's Bazar?**

A: In Cox's Bazar, we've created:
- A technology hub employing 15 local residents in technical roles
- Training programs that have upskilled 75+ community members
- Partnerships with local educational institutions to develop tech curriculum
- Infrastructure improvements including renewable-powered computing resources
- Research opportunities connecting local challenges with global expertise

## Partnership Details

**Q: What level of involvement can sponsors have in project direction?**

A: We offer tiered engagement opportunities:
- Platinum sponsors join our advisory board with direct input on strategic priorities
- Gold sponsors participate in quarterly roadmap discussions
- All sponsors can propose specific research initiatives aligned with their interests
- We maintain scientific independence while welcoming collaborative direction

**Q: How do you handle potential conflicts between multiple sponsors?**

A: We've established clear governance principles:
- Transparent decision-making processes documented and shared with all partners
- Equitable influence based on partnership tier, not just financial contribution
- Focus on consensus-building through facilitated discussions
- Independent scientific committee to resolve research priority questions
- Commitment to open-source principles as a foundational value`,
        },
        {
          id: "technical-faq",
          name: "Technical FAQ.docx",
          type: "docx",
          url: "/data/infinity-nexus-technical-faq.docx",
        },
        {
          id: "objection-handling",
          name: "Objection Handling Guide.md",
          type: "md",
          content: `# Objection Handling Guide

## Financial Concerns

### Objection: "The sponsorship amounts seem high for an early-stage project."

**Response Approach:**
- Acknowledge the investment is significant
- Frame as strategic long-term partnership, not just donation
- Highlight comprehensive value package beyond typical sponsorships
- Offer to discuss custom sponsorship structure if needed

**Key Talking Points:**
"I understand your concern about the investment level. What we're offering is not just a traditional sponsorship but a strategic partnership with multiple returns. Our tiered approach allows organizations to find the right entry point, and we're open to discussing a custom arrangement that aligns with your specific objectives while still delivering meaningful impact."

### Objection: "We need more concrete ROI metrics before committing."

**Response Approach:**
- Validate the need for clear ROI measurement
- Present our existing metrics framework
- Offer to develop custom KPIs specific to their priorities
- Propose a smaller initial engagement with defined success metrics

**Key Talking Points:**
"That's a very reasonable request. We've developed a comprehensive metrics framework tracking everything from research outputs to community growth. I'd be happy to share our current impact reports. Additionally, we could work together to develop custom KPIs aligned specifically with your organizational priorities, and potentially start with a smaller engagement to demonstrate value before expanding our partnership."

## Project Viability Concerns

### Objection: "How do we know this project will succeed long-term?"

**Response Approach:**
- Highlight existing traction and milestones achieved
- Discuss our sustainability planning
- Share testimonials from current partners
- Outline risk mitigation strategies

**Key Talking Points:**
"That's an important consideration for any partnership. Let me share some key indicators of our trajectory: we've already secured participation from 25 research institutions across 18 countries, standardized 250+ datasets, and facilitated 15 published papers. Our sustainability plan includes diversified revenue streams beyond sponsorships. We've also implemented robust risk management protocols including regular strategic reviews and adaptable roadmaps."

### Objection: "There are many similar initiatives in this space."

**Response Approach:**
- Acknowledge the active ecosystem
- Clearly articulate our unique differentiators
- Explain our collaborative rather than competitive approach
- Highlight our specific focus on emerging markets

**Key Talking Points:**
"You're right that data sharing in research is an active space, which validates the need. Our differentiation comes from three key areas: our focus on cross-disciplinary standardization rather than single-field solutions, our ground-up design for accessibility in resource-limited settings, and our integrated educational component. We actually collaborate with several of the platforms you might be thinking of, as we see our role as complementary rather than competitive in advancing open science."

## Implementation Concerns

### Objection: "Your timeline seems ambitious."

**Response Approach:**
- Acknowledge the ambitious nature of our goals
- Explain our phased implementation approach
- Highlight our team's relevant experience
- Discuss contingency planning

**Key Talking Points:**
"We are indeed setting ambitious goals because the need is urgent. However, we've developed a phased implementation plan with clear milestones and dependencies. Our team brings extensive experience from similar large-scale projects, including [specific examples]. We've also built in contingency buffers and have identified specific decision points where we can adjust scope if needed without compromising core deliverables."

### Objection: "How will you manage data quality with so many contributors?"

**Response Approach:**
- Outline our multi-layered quality assurance process
- Explain our standardization frameworks and tools
- Discuss our community review mechanisms
- Share examples of successful quality management

**Key Talking Points:**
"Data quality is foundational to our mission. We've implemented a comprehensive approach including automated validation tools, standardized metadata requirements, peer review processes, and quality scoring systems. Our platform includes both pre-submission quality checks and post-submission community review mechanisms. We've successfully applied these methods in our pilot phase, achieving 98% compliance with quality standards across diverse data types."

## Partnership Fit Concerns

### Objection: "We're not sure this aligns with our strategic priorities."

**Response Approach:**
- Ask questions to better understand their priorities
- Highlight relevant aspects of our work that align
- Suggest potential customization of the partnership
- Propose a workshop to explore alignment opportunities

**Key Talking Points:**
"I appreciate your transparency. May I ask about your current strategic priorities? [After listening] There seem to be several potential connection points, particularly in [areas mentioned]. We could explore a customized partnership focusing specifically on these areas of alignment. I'd be happy to arrange a workshop with our respective teams to dive deeper into how we might structure a partnership that directly advances your strategic objectives."

### Objection: "We prefer exclusive partnerships."

**Response Approach:**
- Acknowledge the value of exclusivity in certain contexts
- Explain our open-source, collaborative philosophy
- Discuss exclusive elements we can offer within our model
- Highlight the benefits of the broader ecosystem

**Key Talking Points:**
"I understand the value of exclusivity in strategic partnerships. While our core platform is open-source by design, we can offer exclusive elements such as named research initiatives, priority access to innovations, exclusive events, or first implementation of new features. Many of our partners have found that the collaborative ecosystem actually multiplies their investment by leveraging the contributions of the broader community while still maintaining their distinct recognition and benefits."`,
        },
      ],
      subfolders: [],
    },
    {
      id: "follow-up-materials",
      name: "6. Follow-up Materials",
      expanded: false,
      files: [
        {
          id: "thank-you-template",
          name: "Thank You Email Template.md",
          type: "md",
          content: `# Thank You Email Template

Subject: Thank You for Meeting About Infinity Nexus Sponsorship

Dear [Financial Institution Representative],

I wanted to express my sincere gratitude for taking the time to meet with me today regarding potential sponsorship for the Infinity Nexus project. Your insights and questions were valuable, and I appreciate your thoughtful consideration of our proposal.

As discussed, Infinity Nexus aims to create a global standard data hub for scientific research and innovation, with operations centered in Cox's Bazar. Your support would be instrumental in helping us achieve this vision and create meaningful impact in both the scientific community and local development.

## Next Steps

As promised during our meeting, I'm attaching the following additional information:
- [Specific document requested during meeting]
- [Answers to follow-up questions]
- [Any other promised materials]

I'll reach out next week as discussed to schedule a follow-up conversation with [mentioned stakeholders]. In the meantime, please don't hesitate to contact me if you have any questions or require any additional information.

## Additional Resources

For your convenience, here are links to some of the resources we discussed:
- Infinity Nexus current platform: [URL]
- Recent research publication using our data standards: [URL]
- Video testimonials from current partners: [URL]

Thank you again for your time and consideration. We're excited about the potential to partner with [Financial Institution Name] and look forward to continuing our conversation.

Warm regards,

MJ AHMAD
Trusted Ally
[Contact Information]`,
        },
        {
          id: "partnership-agreement",
          name: "Draft Partnership Agreement.docx",
          type: "docx",
          url: "/data/infinity-nexus-agreement.docx",
        },
        {
          id: "next-steps",
          name: "Next Steps Document.md",
          type: "md",
          content: `# Next Steps After Initial Sponsorship Meeting

## Immediate Follow-up (Within 24 Hours)
- [ ] Send thank you email with any promised materials
- [ ] Document all questions asked and feedback received
- [ ] Share meeting summary with internal team
- [ ] Begin preparing any requested additional information

## Short-term Actions (1-2 Weeks)
- [ ] Schedule follow-up meeting or call as discussed
- [ ] Prepare and send customized proposal based on meeting feedback
- [ ] Connect relevant technical team members if technical questions arose
- [ ] Share any recent project updates or developments

## Medium-term Actions (2-4 Weeks)
- [ ] Develop detailed implementation plan specific to this partnership
- [ ] Create custom impact measurement framework aligned with sponsor priorities
- [ ] Prepare draft partnership agreement for review
- [ ] Arrange demonstration or site visit if appropriate

## Partnership Development Timeline
1. Initial Meeting (Completed)
2. Proposal Refinement (1-2 weeks)
3. Technical Deep Dive (if needed) (2-3 weeks)
4. Partnership Agreement Review (3-4 weeks)
5. Agreement Finalization (4-6 weeks)
6. Partnership Announcement (Mutually agreed timing)
7. Implementation Kickoff (Per agreement)

## Communication Plan
- Primary Contact: [Financial Institution Representative]
- Frequency: [As discussed in meeting]
- Preferred Method: [Email/Phone/Other as specified]
- Updates to Include:
  * Project progress reports
  * Impact metrics
  * Upcoming opportunities for engagement
  * Media and publication mentions

## Potential Customizations Based on Meeting Feedback
- [Note specific areas of interest expressed during the meeting]
- [Note any concerns raised that need addressing]
- [Note any specific benefits that seemed most valuable to them]

## Resources Needed
- [List any internal resources needed to support this potential partnership]
- [Note any additional materials that need to be created]
- [Identify team members who should be involved in next steps]`,
        },
      ],
      subfolders: [],
    },
    {
      id: "reference-materials",
      name: "7. Reference Materials",
      expanded: false,
      files: [
        {
          id: "market-research",
          name: "Market Research & Analysis.pdf",
          type: "pdf",
          url: "/data/infinity-nexus-market-research.pdf",
        },
        {
          id: "competitor-analysis",
          name: "Competitor Analysis.xlsx",
          type: "xlsx",
          url: "/data/infinity-nexus-competitors.xlsx",
        },
        {
          id: "industry-trends",
          name: "Industry Trends.md",
          type: "md",
          content: `# Key Industry Trends in Open Science & Data Sharing

## 1. Increasing Demand for Open Access

### Current State
The scientific community is experiencing unprecedented demand for open access to research data and findings. According to recent studies:
- 78% of researchers report being unable to access data they need for their work
- 65% of research funding organizations now mandate some form of open data sharing
- Citations for papers with open data are 25% higher on average than those without

### Implications for Infinity Nexus
This trend directly validates our mission and approach. Our platform addresses this growing demand by providing:
- Standardized frameworks for data sharing across disciplines
- Accessible infrastructure for researchers in all settings
- Tools that make compliance with open data mandates straightforward

## 2. Fragmentation of Data Standards

### Current State
Despite progress in open science, data standardization remains highly fragmented:
- Over 80 different metadata standards exist across scientific disciplines
- Only 23% of published datasets meet minimum reusability requirements
- Cross-disciplinary research is hampered by incompatible data formats

### Implications for Infinity Nexus
Our focus on standardization addresses this critical gap:
- Our cross-disciplinary standards framework harmonizes existing standards
- Our validation tools help researchers meet quality requirements
- Our translation layers enable interoperability between different formats

## 3. Emerging Markets as Innovation Hubs

### Current State
Research and innovation landscapes are shifting globally:
- Emerging markets account for 45% of new research publications, up from 25% a decade ago
- 60% of new researchers are based outside traditional research centers
- Research from emerging markets is cited 40% less despite comparable quality

### Implications for Infinity Nexus
Our base in Cox's Bazar positions us at the forefront of this trend:
- We're building infrastructure specifically designed for emerging market contexts
- Our platform reduces barriers to global visibility for researchers in these regions
- Our educational components address skill gaps that limit participation

## 4. AI and Machine Learning in Research

### Current State
AI is transforming how research is conducted and data is analyzed:
- 70% of researchers report using AI tools in some aspect of their work
- Machine learning requires large, standardized datasets to be effective
- Ethical concerns about AI training data are growing

### Implications for Infinity Nexus
Our platform is designed with AI-readiness in mind:
- Standardized data formats make our repositories ideal for AI training
- Our ethical frameworks address concerns about responsible AI use
- Our tools include AI-powered analysis capabilities accessible to all users

## 5. Collaborative and Distributed Research Models

### Current State
Research is becoming increasingly collaborative and distributed:
- The average number of authors per paper has increased 50% in the last decade
- 85% of breakthrough papers involve international collaboration
- Distributed research teams face significant coordination challenges

### Implications for Infinity Nexus
Our platform facilitates this collaborative approach:
- Real-time collaboration tools built into our data environment
- Standardized workflows that improve coordination efficiency
- Attribution and credit systems that recognize all contributors

## 6. Funding Shifts Toward Impact and Open Science

### Current State
Research funding models are evolving:
- 65% of major funders now require open science practices
- Impact-oriented metrics are replacing traditional publication counts
- Private sector funding for open research has increased 120% in five years

### Implications for Infinity Nexus
Our model aligns perfectly with these funding trends:
- Built-in compliance with open science requirements
- Comprehensive impact metrics tracking
- Structured engagement opportunities for private sector partners`,
        },
        {
          id: "technical-specifications",
          name: "Technical Specifications.docx",
          type: "docx",
          url: "/data/infinity-nexus-tech-specs.docx",
        },
      ],
      subfolders: [],
    },
    {
      id: "media-assets",
      name: "8. Media Assets",
      expanded: false,
      files: [
        {
          id: "project-logos",
          name: "Project Logos & Branding.zip",
          type: "zip",
          url: "/data/infinity-nexus-branding.zip",
        },
        {
          id: "photos",
          name: "Cox's Bazar Location Photos.image",
          type: "image",
          url: "/coxs-bazar-sunset.png",
        },
        {
          id: "team-photos",
          name: "Team Photos.image",
          type: "image",
          url: "/mjahmad.png",
        },
      ],
      subfolders: [],
    },
  ],
}

export function ProjectFolderStructure() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [expandedFolders, setExpandedFolders] = useState<Record<string, boolean>>({})
  const [previewOpen, setPreviewOpen] = useState(false)
  const { toast } = useToast()

// Initialize expanded state from the data structure
  useEffect(() => {
    const initialExpanded: Record<string, boolean> = {}

function traverseFolder(folder: FolderType) {
      initialExpanded[folder.id] = folder.expanded || false
      folder.subfolders.forEach(traverseFolder)
    }

traverseFolder(infinityNexusData)
    setExpandedFolders(initialExpanded)
  }, [])

const toggleFolder = (folderId: string) => {
    setExpandedFolders((prev) => ({
      ...prev,
      [folderId]: !prev[folderId],
    }))
  }

const handleFileClick = (file: File) => {
    setSelectedFile(file)
    setPreviewOpen(true)
  }

const copyToClipboard = (text: string) => {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        toast({
          title: "Copied to clipboard",
          description: "Content has been copied to your clipboard.",
          duration: 3000,
        })
      })
      .catch((err) => {
        toast({
          title: "Failed to copy",
          description: "There was an error copying to clipboard.",
          variant: "destructive",
          duration: 3000,
        })
        console.error("Failed to copy: ", err)
      })
  }

const downloadFile = (file: File) => {
    // For demonstration purposes - in a real app, this would download the actual file
    if (file.content) {
      const blob = new Blob([file.content], { type: "text/plain" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = file.name
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

toast({
        title: "File downloaded",
        description: `${file.name} has been downloaded.`,
        duration: 3000,
      })
    } else {
      toast({
        title: "Download simulated",
        description: `In a real app, ${file.name} would download now.`,
        duration: 3000,
      })
    }
  }

const renderFolder = (folder: FolderType) => {
    const isExpanded = expandedFolders[folder.id]

return (
      <div key={folder.id} className="pl-2">
        <div
          className="flex items-center py-1 px-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded cursor-pointer"
          onClick={() => toggleFolder(folder.id)}
        >
          {isExpanded ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
          {isExpanded ? (
            <FolderOpen className="h-4 w-4 mr-2 text-blue-500" />
          ) : (
            <FolderIcon className="h-4 w-4 mr-2 text-blue-500" />
          )}
          <span className="text-sm font-medium">{folder.name}</span>
        </div>

{isExpanded && (
          <div className="ml-4 border-l border-gray-200 dark:border-gray-700 pl-2">
            {folder.files.map((file) => renderFile(file))}
            {folder.subfolders.map((subfolder) => renderFolder(subfolder))}
          </div>
        )}
      </div>
    )
  }

const getFileIcon = (fileType: string) => {
    switch (fileType) {
      case "pdf":
        return <FileText className="h-4 w-4 mr-2 text-red-500" />
      case "docx":
        return <FileText className="h-4 w-4 mr-2 text-blue-500" />
      case "md":
        return <FileCode className="h-4 w-4 mr-2 text-green-500" />
      case "pptx":
        return <FilePresentationIcon className="h-4 w-4 mr-2 text-orange-500" />
      case "xlsx":
        return <FileSpreadsheetIcon className="h-4 w-4 mr-2 text-green-600" />
      case "image":
        return <FileImage className="h-4 w-4 mr-2 text-purple-500" />
      case "zip":
        return <FileArchiveIcon className="h-4 w-4 mr-2 text-yellow-500" />
      default:
        return <FileText className="h-4 w-4 mr-2 text-gray-500" />
    }
  }

const renderFile = (file: File) => {
    return (
      <div
        key={file.id}
        className={`flex items-center py-1 px-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded cursor-pointer ${selectedFile?.id === file.id ? "bg-gray-100 dark:bg-gray-800" : ""}`}
        onClick={() => handleFileClick(file)}
      >
        {getFileIcon(file.type)}
        <span className="text-sm">{file.name}</span>
      </div>
    )
  }

return (
    <div className="flex flex-col md:flex-row gap-4 h-[calc(100vh-200px)] min-h-[500px]">
      {/* Folder structure */}
      <Card className="w-full md:w-1/3 overflow-hidden">
        <CardContent className="p-4">
          <h3 className="text-lg font-semibold mb-2">Project Files</h3>
          <Separator className="my-2" />
          <ScrollArea className="h-[calc(100vh-280px)] min-h-[400px]">{renderFolder(infinityNexusData)}</ScrollArea>
        </CardContent>
      </Card>

{/* File preview */}
      <Card className="w-full md:w-2/3 overflow-hidden">
        <CardContent className="p-4">
          {selectedFile ? (
            <>
              <div className="flex justify-between items-center mb-2">
                <h3 className="text-lg font-semibold">{selectedFile.name}</h3>
                <div className="flex gap-2">
                  {selectedFile.content && (
                    <Button variant="outline" size="sm" onClick={() => copyToClipboard(selectedFile.content || "")}>
                      <Copy className="h-4 w-4 mr-2" />
                      Copy
                    </Button>
                  )}
                  <Button variant="outline" size="sm" onClick={() => downloadFile(selectedFile)}>
                    <Download className="h-4 w-4 mr-2" />
                    Download
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setPreviewOpen(true)}>
                    <Eye className="h-4 w-4 mr-2" />
                    Preview
                  </Button>
                </div>
              </div>
              <Separator className="my-2" />
              <ScrollArea className="h-[calc(100vh-280px)] min-h-[400px]">
                {selectedFile.content ? (
                  <div className="prose dark:prose-invert max-w-none">
                    <pre className="whitespace-pre-wrap text-sm p-4 bg-gray-50 dark:bg-gray-900 rounded-md">
                      {selectedFile.content}
                    </pre>
                  </div>
                ) : selectedFile.type === "image" ? (
                  <div className="flex justify-center">
                    <img
                      src={selectedFile.url || "/placeholder.svg"}
                      alt={selectedFile.name}
                      className="max-w-full h-auto rounded-md"
                    />
                  </div>
                ) : (
                  <div className="flex flex-col items-center justify-center h-full">
                    <div className="text-4xl mb-4">{getFileIcon(selectedFile.type)}</div>
                    <p className="text-center text-gray-500 dark:text-gray-400">
                      Preview not available for this file type.
                      <br />
                      Please download the file to view its contents.
                    </p>
                  </div>
                )}
              </ScrollArea>
            </>
          ) : (
            <div className="flex flex-col items-center justify-center h-[calc(100vh-280px)] min-h-[400px]">
              <FileText className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
              <p className="text-center text-gray-500 dark:text-gray-400">
                Select a file from the project structure to preview its contents.
              </p>
            </div>
          )}
        </CardContent>
      </Card>

{/* Document Preview Modal */}
      <DocumentPreviewModal file={selectedFile} isOpen={previewOpen} onClose={() => setPreviewOpen(false)} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

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

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="app/infinity-nexus-meeting/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MeetingDashboard } from "@/components/meeting-preparation/meeting-dashboard"
import { PronunciationPractice } from "@/components/meeting-preparation/pronunciation-practice"
import { ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"

export default function InfinityNexusMeetingPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("dashboard")

// Sample documents for pronunciation practice
  const practiceDocuments = [
    {
      id: "presentation-script",
      name: "Presentation Script",
      content: `Good afternoon and thank you for meeting with us today. I'm MJ AHMAD, representing Trusted Ally, and I'm excited to share with you our groundbreaking project, Infinity Nexus.

Infinity Nexus is an open-source initiative creating a global standard data hub for scientific research and innovation. Our mission is to accelerate scientific discovery by breaking down data silos and enabling seamless collaboration across borders and disciplines.

Today, scientific research is hampered by fragmented data standards, limited access to resources, and insufficient collaboration infrastructure. This is particularly acute in emerging regions like Cox's Bazar, where we're based, despite the tremendous talent and potential there.

Infinity Nexus addresses these challenges by providing:
1. A standardized framework for scientific data sharing
2. Robust infrastructure for data storage and analysis
3. Collaborative tools for researchers worldwide
4. Educational resources to build capacity in underserved communities

We've already made significant progress, with over 120 researchers from 25 institutions across 18 countries actively using our platform. We've facilitated 15 published research papers and standardized more than 250 datasets.

To scale our impact, we're seeking strategic partners who share our vision. Your sponsorship would enable us to:
1. Expand our technical infrastructure
2. Develop advanced data analysis tools
3. Extend our educational programs
4. Increase our global outreach

Thank you for your time today. I'm happy to answer any questions you might have about Infinity Nexus and how we can create a meaningful partnership.`,
    },
    {
      id: "qa-responses",
      name: "Q&A Responses",
      content: `Q: How does Infinity Nexus differentiate itself from existing data sharing platforms?

Q: What is your sustainability plan beyond initial sponsorship?

Q: How will our sponsorship funds be allocated?

We maintain complete transparency in our financial reporting and would provide detailed quarterly updates on fund utilization.`,
    },
    {
      id: "sponsorship-tiers",
      name: "Sponsorship Tiers",
      content: `Platinum Tier: $100,000+
Recognition: Named as "Founding Partner" on all Infinity Nexus platforms and publications
Branding: Prominent logo placement on website, annual reports, and all major events
Access: Exclusive access to all research data and innovations before public release
Engagement: Quarterly strategic meetings with Infinity Nexus leadership team
Events: VIP access to all Infinity Nexus events and conferences
Impact: Direct input on strategic direction and research priorities

Gold Tier: $50,000 - $99,999
Recognition: Named as "Gold Partner" on Infinity Nexus platforms and publications
Branding: Logo placement on website, annual reports, and major events
Access: Priority access to research data and innovations
Engagement: Bi-annual meetings with Infinity Nexus leadership team
Events: Priority registration for all Infinity Nexus events and conferences
Impact: Opportunity to suggest research focus areas

Silver Tier: $25,000 - $49,999
Recognition: Named as "Silver Partner" on Infinity Nexus platforms
Branding: Logo placement on website and annual reports
Access: Early access to selected research data and innovations
Engagement: Annual meeting with Infinity Nexus project leads
Events: Complimentary passes to major Infinity Nexus events
Impact: Recognition in project outcomes related to sponsored areas`,
    },
  ]

return (
    <div className="container mx-auto py-6 px-4 md:px-6">
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center">
          <Button variant="ghost" size="sm" onClick={() => router.push("/meeting-preparation")} className="mr-2">
            <ArrowLeft className="h-4 w-4 mr-1" />
            Back to Meetings
          </Button>
          <h1 className="text-2xl font-bold">Infinity Nexus Sponsorship Meeting</h1>
        </div>
        <div className="text-sm text-muted-foreground">May 23, 2025 • 2:00 PM</div>
      </div>

<Tabs defaultValue="dashboard" value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid grid-cols-3 md:grid-cols-5 lg:w-[600px]">
          <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
          <TabsTrigger value="documents">Documents</TabsTrigger>
          <TabsTrigger value="practice">Practice</TabsTrigger>
          <TabsTrigger value="notes">Notes</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>

<TabsContent value="documents">
          <Card>
            <CardHeader>
              <CardTitle>Meeting Documents</CardTitle>
            </CardHeader>
            <CardContent>
              {/* The existing ProjectFolderStructure component would be here */}
              <div className="text-center py-12 text-muted-foreground">
                Document browser is available in the full application.
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notes">
          <Card>
            <CardHeader>
              <CardTitle>Meeting Notes</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center py-12 text-muted-foreground">
                Note-taking functionality is available in the full application.
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="settings">
          <Card>
            <CardHeader>
              <CardTitle>Meeting Settings</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center py-12 text-muted-foreground">
                Settings configuration is available in the full application.
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/meeting-preparation/pronunciation-practice.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  Play,
  Pause,
  SkipForward,
  SkipBack,
  Volume2,
  Mic,
  FileText,
  Settings,
  RefreshCw,
  Save,
  Trash2,
  Square,
  AlertTriangle,
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { audioController } from "@/lib/audio-controller"

interface PronunciationPracticeProps {
  documents?: Array<{
    id: string
    name: string
    content: string
  }>
}

export function PronunciationPractice({ documents = [] }: PronunciationPracticeProps) {
  const { toast } = useToast()
  const [text, setText] = useState("")
  const [selectedDocument, setSelectedDocument] = useState<string | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const [currentMode, setCurrentMode] = useState<"word" | "sentence">("sentence")
  const [rate, setRate] = useState(0.8)
  const [pitch, setPitch] = useState(1)
  const [volume, setVolume] = useState(1)
  const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null)
  const [availableVoices, setAvailableVoices] = useState<SpeechSynthesisVoice[]>([])
  const [currentIndex, setCurrentIndex] = useState(0)
  const [segments, setSegments] = useState<string[]>([])
  const [highlightedText, setHighlightedText] = useState("")
  const [autoAdvance, setAutoAdvance] = useState(true)
  const [repeatCount, setRepeatCount] = useState(1)
  const [currentRepeat, setCurrentRepeat] = useState(0)
  const [showSettings, setShowSettings] = useState(false)
  const [recordedAudio, setRecordedAudio] = useState<string | null>(null)
  const [isRecording, setIsRecording] = useState(false)
  const [savedPractices, setSavedPractices] = useState<Array<{ name: string; text: string }>>([])
  const [speechSynthesisAvailable, setSpeechSynthesisAvailable] = useState(true)
  const [isTesting, setIsTesting] = useState(false)
  const [isStoppingAudio, setIsStoppingAudio] = useState(false)

const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunksRef = useRef<BlobPart[]>([])
  const speechSynthesisRef = useRef<SpeechSynthesis | null>(null)
  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
  const audioElementRef = useRef<HTMLAudioElement | null>(null)

// Clear any pending timeouts
  const clearTimeouts = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
      timeoutRef.current = null
    }
  }

// Initialize speech synthesis
  useEffect(() => {
    if (typeof window !== "undefined" && "speechSynthesis" in window) {
      speechSynthesisRef.current = window.speechSynthesis

// Force cancel any ongoing speech
      try {
        speechSynthesisRef.current.cancel()
      } catch (e) {
        console.error("Error cancelling speech:", e)
      }

const loadVoices = () => {
        try {
          const voices = speechSynthesisRef.current?.getVoices() || []
          const englishVoices = voices.filter((voice) => voice.lang.includes("en"))
          setAvailableVoices(englishVoices)

// Set a default voice (preferably a female English voice)
          const defaultVoice =
            englishVoices.find((v) => v.name.includes("Female") && v.lang.includes("en-US")) ||
            englishVoices.find((v) => v.lang.includes("en-US")) ||
            (englishVoices.length > 0 ? englishVoices[0] : null)

if (defaultVoice) setVoice(defaultVoice)
        } catch (e) {
          console.error("Error loading voices:", e)
        }
      }

// Chrome loads voices asynchronously
      if (speechSynthesisRef.current?.onvoiceschanged !== undefined) {
        speechSynthesisRef.current.onvoiceschanged = loadVoices
      }

loadVoices()

// Load saved practices from localStorage
      const savedItems = localStorage.getItem("pronunciation-practices")
      if (savedItems) {
        try {
          setSavedPractices(JSON.parse(savedItems))
        } catch (e) {
          console.error("Failed to load saved practices", e)
        }
      }
    } else {
      console.error("Speech synthesis not supported")
      setSpeechSynthesisAvailable(false)
      toast({
        title: "Speech synthesis not supported",
        description: "Your browser doesn't support speech synthesis. Please try using Chrome, Edge, or Safari.",
        variant: "destructive",
      })
    }

// Create a hidden audio element for recorded audio
    const audioElement = new Audio()
    audioElementRef.current = audioElement

return () => {
      // Cleanup function
      stopAllAudio()

// Clean up audio element
      if (audioElementRef.current) {
        audioElementRef.current.pause()
        audioElementRef.current.src = ""
      }
    }
  }, [])

// Update segments when text or mode changes
  useEffect(() => {
    if (currentMode === "word") {
      setSegments(text.trim().split(/\s+/))
    } else {
      // Split by sentence - look for .!? followed by space or end of string
      setSegments(text.trim().split(/(?<=[.!?])\s+|(?<=[.!?])$/))
    }
    setCurrentIndex(0)
    setCurrentRepeat(0)
    updateHighlightedText(0)
  }, [text, currentMode])

// Load document content when selected
  useEffect(() => {
    if (selectedDocument) {
      const doc = documents.find((d) => d.id === selectedDocument)
      if (doc) {
        setText(doc.content)
      }
    }
  }, [selectedDocument, documents])

// Stop all audio when component unmounts
  useEffect(() => {
    return () => {
      stopAllAudio()
    }
  }, [])

// Function to stop all audio playback
  const stopAllAudio = () => {
    setIsStoppingAudio(true)

// Use our global audio controller to force stop all audio
    audioController.forceStopAllAudio()

// Cancel speech synthesis
    if (speechSynthesisRef.current) {
      try {
        speechSynthesisRef.current.cancel()

// Some browsers need multiple cancel calls
        setTimeout(() => {
          if (speechSynthesisRef.current) {
            speechSynthesisRef.current.cancel()
          }
        }, 50)
      } catch (e) {
        console.error("Error cancelling speech:", e)
      }
    }

// Clear any pending timeouts
    clearTimeouts()

// Reset state
    setIsPlaying(false)
    setIsPaused(false)
    setIsTesting(false)

// Stop recording if active
    if (isRecording && mediaRecorderRef.current) {
      try {
        mediaRecorderRef.current.stop()
        setIsRecording(false)
      } catch (e) {
        console.error("Error stopping recording:", e)
      }
    }

// Reset audio element if it exists
    if (audioElementRef.current) {
      try {
        audioElementRef.current.pause()
        audioElementRef.current.currentTime = 0
      } catch (e) {
        console.error("Error resetting audio element:", e)
      }
    }

// After a short delay, reset the stopping state
    setTimeout(() => {
      setIsStoppingAudio(false)
    }, 300)
  }

// Update highlighted text based on current index
  const updateHighlightedText = (index: number) => {
    if (segments.length === 0) return

let highlighted = ""
    for (let i = 0; i < segments.length; i++) {
      if (i === index) {
        highlighted += `<span class="bg-primary/20 text-primary font-bold">${segments[i]}</span>`
      } else {
        highlighted += segments[i]
      }

if (currentMode === "word" && i < segments.length - 1) {
        highlighted += " "
      } else if (currentMode === "sentence" && i < segments.length - 1) {
        highlighted += " "
      }
    }

setHighlightedText(highlighted)
  }

// Speech synthesis functions
  const speakSegment = (index: number) => {
    if (!speechSynthesisAvailable || !speechSynthesisRef.current) {
      toast({
        title: "Speech synthesis not available",
        description: "Your browser doesn't support speech synthesis.",
        variant: "destructive",
      })
      return
    }

if (!voice || index >= segments.length || segments.length === 0) return

// Cancel any ongoing speech
    stopPlayback()

const segment = segments[index]
    if (!segment.trim()) {
      handleSpeechEnd()
      return
    }

try {
      const utterance = new SpeechSynthesisUtterance(segment)
      utterance.voice = voice
      utterance.rate = rate
      utterance.pitch = pitch
      utterance.volume = volume

utterance.onend = handleSpeechEnd
      utterance.onerror = (event) => {
        console.error("SpeechSynthesis error:", event)
        toast({
          title: "Speech synthesis error",
          description: "There was an error playing the audio. Please try again.",
          variant: "destructive",
        })
        handleSpeechEnd()
      }

utteranceRef.current = utterance

// Set the global state to indicate speech is active
      audioController.setSpeechSynthesisActive(true)

speechSynthesisRef.current.speak(utterance)
      updateHighlightedText(index)
    } catch (error) {
      console.error("Error in speech synthesis:", error)
      toast({
        title: "Speech synthesis error",
        description: "There was an error initializing the speech system. Please refresh the page and try again.",
        variant: "destructive",
      })

// Reset the global state
      audioController.setSpeechSynthesisActive(false)
    }
  }

const handleSpeechEnd = () => {
    // Clear any existing timeouts
    clearTimeouts()

if (currentRepeat < repeatCount - 1) {
      // Repeat the same segment
      setCurrentRepeat((prev) => prev + 1)
      timeoutRef.current = setTimeout(() => speakSegment(currentIndex), 500)
    } else {
      // Move to next segment if autoAdvance is enabled
      setCurrentRepeat(0)
      if (autoAdvance && currentIndex < segments.length - 1) {
        const nextIndex = currentIndex + 1
        setCurrentIndex(nextIndex)
        timeoutRef.current = setTimeout(() => speakSegment(nextIndex), 500)
      } else if (autoAdvance && currentIndex === segments.length - 1) {
        // Reached the end
        setIsPlaying(false)

// Reset the global state
        audioController.setSpeechSynthesisActive(false)

toast({
          title: "Practice completed",
          description: "You've reached the end of the text.",
        })
      }
    }
  }

// Playback controls
  const togglePlayPause = () => {
    if (segments.length === 0) return

if (isPlaying) {
      if (speechSynthesisRef.current?.speaking) {
        if (isPaused) {
          try {
            speechSynthesisRef.current.resume()
            setIsPaused(false)
          } catch (e) {
            console.error("Error resuming speech:", e)
            // If resume fails, try to restart
            stopPlayback()
            setIsPlaying(true)
            setIsPaused(false)
            speakSegment(currentIndex)
          }
        } else {
          try {
            speechSynthesisRef.current.pause()
            setIsPaused(true)
          } catch (e) {
            console.error("Error pausing speech:", e)
            stopPlayback()
          }
        }
      } else {
        // If not speaking but isPlaying is true, restart
        speakSegment(currentIndex)
      }
    } else {
      setIsPlaying(true)
      setIsPaused(false)
      speakSegment(currentIndex)
    }
  }

const stopPlayback = () => {
    if (speechSynthesisRef.current) {
      try {
        speechSynthesisRef.current.cancel()

// Reset the global state
        audioController.setSpeechSynthesisActive(false)
      } catch (e) {
        console.error("Error cancelling speech:", e)
      }
    }

clearTimeouts()
  }

const nextSegment = () => {
    stopPlayback()
    if (currentIndex < segments.length - 1) {
      const nextIndex = currentIndex + 1
      setCurrentIndex(nextIndex)
      updateHighlightedText(nextIndex)
      setCurrentRepeat(0)

if (isPlaying) {
        timeoutRef.current = setTimeout(() => speakSegment(nextIndex), 100)
      }
    }
  }

const previousSegment = () => {
    stopPlayback()
    if (currentIndex > 0) {
      const prevIndex = currentIndex - 1
      setCurrentIndex(prevIndex)
      updateHighlightedText(prevIndex)
      setCurrentRepeat(0)

if (isPlaying) {
        timeoutRef.current = setTimeout(() => speakSegment(prevIndex), 100)
      }
    }
  }

// Recording functions
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mediaRecorder = new MediaRecorder(stream)
      mediaRecorderRef.current = mediaRecorder
      audioChunksRef.current = []

mediaRecorder.ondataavailable = (event) => {
        audioChunksRef.current.push(event.data)
      }

mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: "audio/wav" })
        const audioUrl = URL.createObjectURL(audioBlob)
        setRecordedAudio(audioUrl)

// Stop all tracks on the stream
        stream.getTracks().forEach((track) => track.stop())
      }

mediaRecorder.start()
      setIsRecording(true)

toast({
        title: "Recording started",
        description: "Speak now to record your pronunciation.",
      })
    } catch (error) {
      console.error("Error accessing microphone:", error)
      toast({
        title: "Microphone access denied",
        description: "Please allow microphone access to record your pronunciation.",
        variant: "destructive",
      })
    }
  }

const stopRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop()
      setIsRecording(false)

toast({
        title: "Recording stopped",
        description: "Your pronunciation has been recorded.",
      })
    }
  }

// Save and load functions
  const savePractice = () => {
    if (!text.trim()) {
      toast({
        title: "Cannot save empty practice",
        description: "Please enter some text before saving.",
        variant: "destructive",
      })
      return
    }

const practiceName = prompt("Enter a name for this practice session:")
    if (!practiceName) return

const newPractice = { name: practiceName, text }
    const updatedPractices = [...savedPractices, newPractice]

setSavedPractices(updatedPractices)
    localStorage.setItem("pronunciation-practices", JSON.stringify(updatedPractices))

toast({
      title: "Practice saved",
      description: `"${practiceName}" has been saved successfully.`,
    })
  }

const loadPractice = (index: number) => {
    if (index >= 0 && index < savedPractices.length) {
      setText(savedPractices[index].text)
      stopPlayback()
      setCurrentIndex(0)
      setCurrentRepeat(0)

toast({
        title: "Practice loaded",
        description: `"${savedPractices[index].name}" has been loaded.`,
      })
    }
  }

const deletePractice = (index: number) => {
    const updatedPractices = [...savedPractices]
    updatedPractices.splice(index, 1)

setSavedPractices(updatedPractices)
    localStorage.setItem("pronunciation-practices", JSON.stringify(updatedPractices))

toast({
      title: "Practice deleted",
      description: "The practice session has been deleted.",
    })
  }

const testSound = () => {
    if (!speechSynthesisAvailable || !speechSynthesisRef.current) {
      toast({
        title: "Speech synthesis not available",
        description: "Your browser doesn't support speech synthesis.",
        variant: "destructive",
      })
      return
    }

// Cancel any ongoing speech and clear timeouts
    stopAllAudio()
    setIsTesting(true)

try {
      const testUtterance = new SpeechSynthesisUtterance("This is a test. Your sound system is working correctly.")
      if (voice) {
        testUtterance.voice = voice
      }
      testUtterance.rate = rate
      testUtterance.pitch = pitch
      testUtterance.volume = volume

testUtterance.onend = () => {
        setIsTesting(false)

// Reset the global state
        audioController.setSpeechSynthesisActive(false)

toast({
          title: "Sound test completed",
          description: "If you heard the test message, your sound system is working correctly.",
        })
      }

testUtterance.onerror = (event) => {
        console.error("SpeechSynthesis error:", event)
        setIsTesting(false)

// Reset the global state
        audioController.setSpeechSynthesisActive(false)

toast({
          title: "Sound test failed",
          description: "There was an error playing the test sound.",
          variant: "destructive",
        })
      }

// Set the global state to indicate speech is active
      audioController.setSpeechSynthesisActive(true)

speechSynthesisRef.current.speak(testUtterance)
    } catch (e) {
      console.error("Error in test sound:", e)
      setIsTesting(false)

// Reset the global state
      audioController.setSpeechSynthesisActive(false)

toast({
        title: "Sound test failed",
        description: "There was an error initializing the speech system.",
        variant: "destructive",
      })
    }
  }

// Add a sample document if none are provided
  const effectiveDocuments =
    documents.length > 0
      ? documents
      : [
          {
            id: "sample-1",
            name: "Sample Presentation Introduction",
            content:
              "Good morning everyone. I'm delighted to present our Infinity Nexus sponsorship proposal. Today, I'll walk you through our vision, the market opportunity, and the benefits of partnering with us. Our goal is to create a sustainable impact while providing excellent returns on your investment.",
          },
        ]

return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl">Pronunciation Practice</CardTitle>
            <CardDescription>Improve your English pronunciation for the meeting</CardDescription>
          </div>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm" onClick={testSound} disabled={isTesting || isStoppingAudio}>
              {isTesting ? (
                <>
                  <Volume2 className="h-4 w-4 mr-2 animate-pulse" />
                  Testing...
                </>
              ) : (
                <>
                  <Volume2 className="h-4 w-4 mr-2" />
                  Test Sound
                </>
              )}
            </Button>

<Button
              variant="destructive"
              size="sm"
              onClick={stopAllAudio}
              disabled={(!isPlaying && !isTesting) || isStoppingAudio}
              className="min-w-[100px]"
            >
              {isStoppingAudio ? (
                <>
                  <Square className="h-4 w-4 mr-2 animate-pulse" />
                  Stopping...
                </>
              ) : (
                <>
                  <Square className="h-4 w-4 mr-2" />
                  Stop All
                </>
              )}
            </Button>

<Button variant="outline" size="sm" onClick={() => setShowSettings(!showSettings)}>
              <Settings className="h-4 w-4 mr-2" />
              Settings
            </Button>
          </div>
        </div>

{!speechSynthesisAvailable && (
          <div className="mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md flex items-center text-yellow-800 dark:text-yellow-400">
            <AlertTriangle className="h-4 w-4 mr-2 flex-shrink-0" />
            <p className="text-sm">
              Speech synthesis is not available in your browser. Please try Chrome, Edge, or Safari for the best
              experience.
            </p>
          </div>
        )}
      </CardHeader>

<CardContent>
        <Tabs defaultValue="practice" className="w-full">
          <TabsList className="mb-4">
            <TabsTrigger value="practice">Practice</TabsTrigger>
            <TabsTrigger value="documents">Documents</TabsTrigger>
            <TabsTrigger value="saved">Saved Practices</TabsTrigger>
          </TabsList>

<TabsContent value="practice" className="space-y-4">
            {/* Text input area */}
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-2">
                  <Badge
                    variant={currentMode === "sentence" ? "default" : "outline"}
                    onClick={() => setCurrentMode("sentence")}
                    className="cursor-pointer"
                  >
                    Sentence Mode
                  </Badge>
                  <Badge
                    variant={currentMode === "word" ? "default" : "outline"}
                    onClick={() => setCurrentMode("word")}
                    className="cursor-pointer"
                  >
                    Word Mode
                  </Badge>
                </div>
                <div className="flex items-center space-x-2">
                  <Button variant="outline" size="sm" onClick={savePractice}>
                    <Save className="h-4 w-4 mr-1" />
                    Save
                  </Button>
                </div>
              </div>

{text ? (
                <ScrollArea className="h-[200px] border rounded-md p-4">
                  <div
                    className="prose max-w-none dark:prose-invert"
                    dangerouslySetInnerHTML={{ __html: highlightedText }}
                  />
                </ScrollArea>
              ) : (
                <Textarea
                  placeholder="Enter or paste text for pronunciation practice..."
                  className="h-[200px]"
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
              )}
            </div>

{/* Playback controls */}
            <div className="bg-muted/50 p-4 rounded-md">
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={previousSegment}
                    disabled={currentIndex === 0 || segments.length === 0 || isStoppingAudio}
                  >
                    <SkipBack className="h-4 w-4" />
                  </Button>

<Button
                    variant={isPlaying ? (isPaused ? "default" : "secondary") : "default"}
                    onClick={togglePlayPause}
                    disabled={segments.length === 0 || isStoppingAudio}
                    className="w-24"
                  >
                    {isPlaying ? (
                      isPaused ? (
                        <Play className="h-4 w-4 mr-2" />
                      ) : (
                        <Pause className="h-4 w-4 mr-2" />
                      )
                    ) : (
                      <Play className="h-4 w-4 mr-2" />
                    )}
                    {isPlaying ? (isPaused ? "Resume" : "Pause") : "Play"}
                  </Button>

<div className="flex items-center space-x-2">
                  <Button
                    variant={isRecording ? "destructive" : "outline"}
                    size="sm"
                    onClick={isRecording ? stopRecording : startRecording}
                    disabled={isStoppingAudio}
                  >
                    <Mic className="h-4 w-4 mr-1" />
                    {isRecording ? "Stop Recording" : "Record Yourself"}
                  </Button>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <Label>Repeat</Label>
                    <div className="flex items-center space-x-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 w-6 p-0"
                        onClick={() => setRepeatCount(Math.max(1, repeatCount - 1))}
                        disabled={isStoppingAudio}
                      >
                        -
                      </Button>
                      <span className="w-6 text-center">{repeatCount}</span>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 w-6 p-0"
                        onClick={() => setRepeatCount(Math.min(5, repeatCount + 1))}
                        disabled={isStoppingAudio}
                      >
                        +
                      </Button>
                    </div>
                  </div>

<div className="flex items-center space-x-2">
                    <Label htmlFor="auto-advance" className="flex-grow">
                      Auto-advance
                    </Label>
                    <Switch
                      id="auto-advance"
                      checked={autoAdvance}
                      onCheckedChange={setAutoAdvance}
                      disabled={isStoppingAudio}
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Volume2 className="h-4 w-4" />
                    <Slider
                      value={[volume * 100]}
                      min={0}
                      max={100}
                      step={1}
                      onValueChange={(value) => setVolume(value[0] / 100)}
                      disabled={isStoppingAudio}
                    />
                  </div>

<div className="flex items-center space-x-2">
                    <RefreshCw className="h-4 w-4" />
                    <Slider
                      value={[rate * 100]}
                      min={50}
                      max={200}
                      step={5}
                      onValueChange={(value) => setRate(value[0] / 100)}
                      disabled={isStoppingAudio}
                    />
                    <span className="text-xs w-8">{rate.toFixed(1)}x</span>
                  </div>
                </div>
              </div>

{recordedAudio && (
                <div className="mt-4 p-2 border rounded-md">
                  <div className="text-sm font-medium mb-1">Your Recording:</div>
                  <audio src={recordedAudio} controls className="w-full h-10" ref={audioElementRef} />
                </div>
              )}
            </div>

{/* Settings panel */}
            {showSettings && (
              <div className="border rounded-md p-4 space-y-4">
                <h3 className="font-medium">Voice Settings</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="voice-select">Voice</Label>
                    <Select
                      value={voice?.name}
                      onValueChange={(value) => {
                        const selectedVoice = availableVoices.find((v) => v.name === value)
                        if (selectedVoice) setVoice(selectedVoice)
                      }}
                      disabled={isStoppingAudio}
                    >
                      <SelectTrigger id="voice-select">
                        <SelectValue placeholder="Select a voice" />
                      </SelectTrigger>
                      <SelectContent>
                        {availableVoices.map((v) => (
                          <SelectItem key={v.name} value={v.name}>
                            {v.name} ({v.lang})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="pitch-slider">Pitch</Label>
                    <div className="flex items-center space-x-2">
                      <Slider
                        id="pitch-slider"
                        value={[pitch * 50]}
                        min={25}
                        max={75}
                        step={5}
                        onValueChange={(value) => setPitch(value[0] / 50)}
                        disabled={isStoppingAudio}
                      />
                      <span className="text-xs w-8">{pitch.toFixed(1)}</span>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </TabsContent>

<TabsContent value="documents" className="space-y-4">
            <div className="text-sm text-muted-foreground mb-2">Select a document to practice pronunciation:</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {effectiveDocuments.length > 0 ? (
                effectiveDocuments.map((doc) => (
                  <Card
                    key={doc.id}
                    className={`cursor-pointer hover:border-primary transition-colors ${selectedDocument === doc.id ? "border-primary" : ""}`}
                    onClick={() => setSelectedDocument(doc.id)}
                  >
                    <CardContent className="p-4 flex items-start space-x-3">
                      <FileText className="h-8 w-8 text-primary flex-shrink-0" />
                      <div>
                        <h3 className="font-medium">{doc.name}</h3>
                        <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
                          {doc.content.substring(0, 100)}...
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                ))
              ) : (
                <div className="col-span-2 text-center py-8 text-muted-foreground">
                  No documents available. Add documents to practice pronunciation.
                </div>
              )}
            </div>
          </TabsContent>

<TabsContent value="saved" className="space-y-4">
            <div className="text-sm text-muted-foreground mb-2">Your saved practice sessions:</div>

{savedPractices.length > 0 ? (
              <div className="space-y-2">
                {savedPractices.map((practice, index) => (
                  <div key={index} className="flex items-center justify-between p-3 border rounded-md">
                    <div className="flex-grow">
                      <h3 className="font-medium">{practice.name}</h3>
                      <p className="text-sm text-muted-foreground line-clamp-1">{practice.text.substring(0, 60)}...</p>
                    </div>
                    <div className="flex space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => loadPractice(index)}
                        disabled={isStoppingAudio}
                      >
                        Load
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => deletePractice(index)}
                        disabled={isStoppingAudio}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                No saved practices. Save your practice sessions to access them later.
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/meeting-preparation/audio-test.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Volume2, Square } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { audioController } from "@/lib/audio-controller"

export function AudioTest() {
  const { toast } = useToast()
  const [isPlaying, setIsPlaying] = useState(false)
  const [isStoppingAudio, setIsStoppingAudio] = useState(false)
  const audioContextRef = useRef<AudioContext | null>(null)
  const oscillatorRef = useRef<OscillatorNode | null>(null)
  const gainNodeRef = useRef<GainNode | null>(null)

// Cleanup on unmount
  useEffect(() => {
    return () => {
      stopAllAudio()
    }
  }, [])

// Function to stop all audio
  const stopAllAudio = () => {
    setIsStoppingAudio(true)

// Use our global audio controller to force stop all audio
    audioController.forceStopAllAudio()

if (oscillatorRef.current) {
      try {
        oscillatorRef.current.stop()
        oscillatorRef.current.disconnect()
        oscillatorRef.current = null
      } catch (e) {
        // Ignore errors if oscillator is already stopped
      }
    }

if (gainNodeRef.current) {
      try {
        gainNodeRef.current.disconnect()
        gainNodeRef.current = null
      } catch (e) {
        // Ignore errors
      }
    }

setIsPlaying(false)

// After a short delay, reset the stopping state
    setTimeout(() => {
      setIsStoppingAudio(false)
    }, 300)
  }

const playTestSound = () => {
    // First stop any existing audio
    stopAllAudio()

// Wait a moment to ensure previous audio is stopped
    setTimeout(() => {
      try {
        // Create AudioContext if it doesn't exist
        if (!audioContextRef.current) {
          audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
        }

const context = audioContextRef.current

// Create an oscillator
        const oscillator = context.createOscillator()
        const gainNode = context.createGain()

oscillatorRef.current = oscillator
        gainNodeRef.current = gainNode

// Configure the oscillator
        oscillator.type = "sine"
        oscillator.frequency.setValueAtTime(440, context.currentTime) // A4 note

// Configure the gain (volume)
        gainNode.gain.setValueAtTime(0.1, context.currentTime) // Low volume
        gainNode.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 1)

// Connect the nodes
        oscillator.connect(gainNode)
        gainNode.connect(context.destination)

// Play the sound
        oscillator.start()
        oscillator.stop(context.currentTime + 1) // Stop after 1 second

setIsPlaying(true)

// Reset playing state after sound ends
        setTimeout(() => {
          setIsPlaying(false)
          stopAllAudio() // Ensure cleanup
          toast({
            title: "Audio test completed",
            description: "If you heard a beep sound, your audio system is working correctly.",
          })
        }, 1100) // Slightly longer than the sound duration
      } catch (error) {
        console.error("Error playing test sound:", error)
        toast({
          title: "Audio test failed",
          description: "There was an error playing the test sound. Please check your browser permissions.",
          variant: "destructive",
        })
        setIsPlaying(false)
        setIsStoppingAudio(false)
      }
    }, 300)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">Audio System Test</CardTitle>
        <CardDescription>Test your browser's audio system</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col items-center space-y-4">
          <p className="text-sm text-center text-muted-foreground">
            Click the button below to play a test sound. If you hear the sound, your audio system is working correctly.
          </p>
          <div className="flex space-x-2 w-full max-w-xs">
            <Button onClick={playTestSound} disabled={isPlaying || isStoppingAudio} className="flex-1">
              <Volume2 className="mr-2 h-4 w-4" />
              Play Test Sound
            </Button>

{isPlaying && (
              <Button variant="destructive" onClick={stopAllAudio} className="w-24" disabled={isStoppingAudio}>
                {isStoppingAudio ? (
                  <Square className="mr-2 h-4 w-4 animate-pulse" />
                ) : (
                  <Square className="mr-2 h-4 w-4" />
                )}
                {isStoppingAudio ? "..." : "Stop"}
              </Button>
            )}
          </div>
          <div className="text-xs text-muted-foreground mt-2">
            Note: Make sure your device volume is turned up and not muted.
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/audio-controller-component.tsx"
"use client"

import { useEffect } from "react"
import { audioController } from "@/lib/audio-controller"

export function AudioControllerComponent() {
  useEffect(() => {
    // Force stop all audio when the component mounts
    audioController.forceStopAllAudio()

// Add event listener for page unload
    const handleBeforeUnload = () => {
      audioController.forceStopAllAudio()
    }

// Add event listener for visibility change (tab switching)
    const handleVisibilityChange = () => {
      if (document.visibilityState === "hidden") {
        audioController.forceStopAllAudio()
      }
    }

window.addEventListener("beforeunload", handleBeforeUnload)
    document.addEventListener("visibilitychange", handleVisibilityChange)

// Add keyboard shortcut for emergency stop (Escape key)
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        audioController.forceStopAllAudio()
      }
    }

window.addEventListener("keydown", handleKeyDown)

return () => {
      // Clean up event listeners
      window.removeEventListener("beforeunload", handleBeforeUnload)
      document.removeEventListener("visibilitychange", handleVisibilityChange)
      window.removeEventListener("keydown", handleKeyDown)

// Force stop all audio when the component unmounts
      audioController.forceStopAllAudio()
    }
  }, [])

// This component doesn't render anything
  return null
}
[V0_FILE]typescript:file="lib/translation-service.ts" isFixed="true" isQuickEdit="true"
// Simple mock translation service
// In a real application, this would connect to a translation API

// Cache for quick translations
const translationCache: Record<string, string> = {
  hello: "হ্যালো",
  "thank you": "ধন্যবাদ",
  yes: "হ্যাঁ",
  no: "না",
  please: "দয়া করে",
  "excuse me": "মাফ করবেন",
  sorry: "দুঃখিত",
  "good morning": "শুভ সকাল",
  "good afternoon": "শুভ অপরাহ্ন",
  "good evening": "শুভ সন্ধ্যা",
  goodbye: "বিদায়",
  "how are you": "আপনি কেমন আছেন",
  "i'm fine": "আমি ভালো আছি",
  "what is your name": "আপনার নাম কি",
  "my name is": "আমার নাম",
  "nice to meet you": "আপনার সাথে দেখা করে ভালো লাগলো",
  "i don't understand": "আমি বুঝতে পারছি না",
  "can you repeat that": "আপনি কি আবার বলতে পারবেন",
  "can you speak more slowly": "আপনি কি আরও ধীরে কথা বলতে পারবেন",
  "do you speak english": "আপনি কি ইংরেজি বলতে পারেন",
  "i speak a little english": "আমি একটু ইংরেজি বলতে পারি",
  "where is": "কোথায়",
  "how much is this": "এটার দাম কত",
  "i would like": "আমি চাই",
  "i need help": "আমার সাহায্য দরকার",
  "call the police": "পুলিশকে ডাকুন",
  "call a doctor": "একজন ডাক্তারকে ডাকুন",
  "i'm lost": "আমি হারিয়ে গেছি",
  "i'm sick": "আমি অসুস্থ",
  "i'm hungry": "আমি ক্ষুধার্ত",
  "i'm thirsty": "আমি তৃষ্ণার্ত",
  "i'm tired": "আমি ক্লান্ত",
  "i'm cold": "আমি ঠান্ডা",
  "i'm hot": "আমি গরম",
  "i agree": "আমি একমত",
  "i disagree": "আমি একমত নই",
  "i understand": "আমি বুঝতে পারছি",
  "i don't know": "আমি জানি না",
  maybe: "হয়তো",
  "of course": "অবশ্যই",
  certainly: "নিশ্চয়ই",
  absolutely: "একদমই",
  definitely: "নিশ্চিতভাবে",
  probably: "সম্ভবত",
  possibly: "সম্ভবত",
  unfortunately: "দুর্ভাগ্যবশত",
  fortunately: "সৌভাগ্যবশত",
  actually: "আসলে",
  basically: "মূলত",
  generally: "সাধারণত",
  specifically: "বিশেষভাবে",
  exactly: "ঠিক তাই",
  approximately: "আনুমানিকভাবে",
  roughly: "মোটামুটিভাবে",
  "more or less": "কম বেশি",
  "let me think": "আমাকে ভাবতে দিন",
  "let me see": "আমাকে দেখতে দিন",
  "let me check": "আমাকে চেক করতে দিন",
  "one moment please": "একটু অপেক্ষা করুন",
  "just a second": "একটু অপেক্ষা করুন",
  "hold on": "অপেক্ষা করুন",
  "wait a minute": "একটু অপেক্ষা করুন",
  "i'll be right back": "আমি এখনই ফিরে আসছি",
  "could you please repeat that": "আপনি কি অনুগ্রহ করে আবার বলতে পারবেন",
  "i understand, thank you": "আমি বুঝতে পেরেছি, ধন্যবাদ",
  "let me think about it": "আমাকে এটা নিয়ে ভাবতে দিন",
  "that's a good point": "এটা একটি ভালো যুক্তি",
  "i agree with you": "আমি আপনার সাথে একমত",
  "i see your point": "আমি আপনার যুক্তি বুঝতে পারছি",
  "that makes sense": "এটা যুক্তিসঙ্গত",
  "i'm not sure i understand": "আমি নিশ্চিত নই যে আমি বুঝতে পেরেছি",
  "could you clarify that": "আপনি কি এটা আরও পরিষ্কার করতে পারবেন",
  "could you give an example": "আপনি কি একটি উদাহরণ দিতে পারবেন",
  "i have a question": "আমার একটি প্রশ্ন আছে",
  "what do you think": "আপনি কী মনে করেন",
  "in my opinion": "আমার মতে",
  "from my perspective": "আমার দৃষ্টিকোণ থেকে",
  "i believe": "আমি বিশ্বাস করি",
  "i think": "আমি মনে করি",
  "i feel": "আমি অনুভব করি",
  "i suggest": "আমি পরামর্শ দিচ্ছি",
  "i recommend": "আমি সুপারিশ করছি",
  "i propose": "আমি প্রস্তাব করছি",
  "let's discuss": "আসুন আলোচনা করি",
  "let's consider": "আসুন বিবেচনা করি",
  "let's explore": "আসুন অন্বেষণ করি",
  "let's analyze": "আসুন বিশ্লেষণ করি",
  "let's review": "আসুন পর্যালোচনা করি",
  "let's summarize": "আসুন সারসংক্ষেপ করি",
  "to conclude": "শেষ করার জন্য",
  "in conclusion": "উপসংহারে",
  "to sum up": "সংক্ষেপে",
  "in summary": "সংক্ষেপে",
  finally: "অবশেষে",
  lastly: "সর্বশেষে",
  "moving on": "এগিয়ে যাচ্ছি",
  "next point": "পরবর্তী বিষয়",
  "next item": "পরবর্তী আইটেম",
  "next topic": "পরবর্তী বিষয়",
  "next question": "পরবর্তী প্রশ্ন",
  "any questions": "কোন প্রশ্ন আছে",
  "any comments": "কোন মন্তব্য আছে",
  "any feedback": "কোন প্রতিক্রিয়া আছে",
  "any suggestions": "কোন পরামর্শ আছে",
  "any concerns": "কোন উদ্বেগ আছে",
  "any thoughts": "কোন চিন্তা আছে",
  "thank you for your time": "আপনার সময়ের জন্য ধন্যবাদ",
  "thank you for your attention": "আপনার মনোযোগের জন্য ধন্যবাদ",
  "thank you for listening": "শোনার জন্য ধন্যবাদ",
  "thank you for your patience": "আপনার ধৈর্যের জন্য ধন্যবাদ",
  "thank you for your understanding": "আপনার বোঝার জন্য ধন্যবাদ",
  "thank you for your cooperation": "আপনার সহযোগিতার জন্য ধন্যবাদ",
  "thank you for your support": "আপনার সমর্থনের জন্য ধন্যবাদ",
  "thank you for your help": "আপনার সাহায্যের জন্য ধন্যবাদ",
  "thank you for your feedback": "আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ",
  "thank you for your input": "আপনার ইনপুটের জন্য ধন্যবাদ",
  "thank you for your contribution": "আপনার অবদানের জন্য ধন্যবাদ",
  "thank you for your participation": "আপনার অংশগ্রহণের জন্য ধন্যবাদ",
  "have a nice day": "আপনার দিনটি শুভ হোক",
  "have a good weekend": "আপনার সপ্তাহান্ত শুভ হোক",
  "have a good evening": "আপনার সন্ধ্যা শুভ হোক",
  "have a good night": "আপনার রাত্রি শুভ হোক",
  "see you tomorrow": "আগামীকাল দেখা হবে",
  "see you next week": "আগামী সপ্তাহে দেখা হবে",
  "see you next time": "পরবর্তী সময়ে দেখা হবে",
  "see you soon": "শীঘ্রই দেখা হবে",
  "take care": "নিজের যত্ন নিন",
  "all the best": "শুভকামনা",
  "best regards": "শুভেচ্ছান্তে",
  "kind regards": "শুভেচ্ছান্তে",
  "warm regards": "আন্তরিক শুভেচ্ছান্তে",
  sincerely: "আন্তরিকভাবে",
  "yours truly": "আপনার বিশ্বস্ত",
  "yours faithfully": "আপনার বিশ্বস্ত",
  "yours sincerely": "আপনার আন্তরিক",
  "best wishes": "শুভকামনা",
  "warm wishes": "আন্তরিক শুভকামনা",
  "good luck": "শুভকামনা",
  congratulations: "অভিনন্দন",
  "well done": "সাবাশ",
  "great job": "চমৎকার কাজ",
  "excellent work": "চমৎকার কাজ",
  "outstanding performance": "অসাধারণ পারফরম্যান্স",
  "impressive results": "চমৎকার ফলাফল",
  "keep up the good work": "ভালো কাজ চালিয়ে যান",
  "keep it up": "এভাবেই চালিয়ে যান",
  "i appreciate your effort": "আমি আপনার প্রচেষ্টা সরাহনা করি",
  "i value your opinion": "আমি আপনার মতামতকে মূল্য দেই",
  "i respect your decision": "আমি আপনার সিদ্ধান্তকে সম্মান করি",
  "i support your idea": "আমি আপনার ধারণাকে সমর্থন করি",
  "i endorse your proposal": "আমি আপনার প্রস্তাবকে সমর্থন করি",
  "i back your initiative": "আমি আপনার উদ্যোগকে সমর্থন করি",
  "i'm impressed": "আমি মুগ্ধ",
  "i'm surprised": "আমি অবাক",
  "i'm delighted": "আমি আনন্দিত",
  "i'm pleased": "আমি সন্তুষ্ট",
  "i'm satisfied": "আমি সন্তুষ্ট",
  "i'm happy": "আমি খুশি",
  "i'm excited": "আমি উত্তেজিত",
  "i'm thrilled": "আমি রোমাঞ্চিত",
  "i'm enthusiastic": "আমি উৎসাহী",
  "i'm optimistic": "আমি আশাবাদী",
  "i'm confident": "আমি আত্মবিশ্বাসী",
  "i'm hopeful": "আমি আশাবাদী",
  "i'm looking forward to": "আমি অপেক্ষা করছি",
  "i'm eager to": "আমি আগ্রহী",
  "i'm keen to": "আমি আগ্রহী",
  "i'm ready to": "আমি প্রস্তুত",
  "i'm willing to": "আমি ইচ্ছুক",
  "i'm prepared to": "আমি প্রস্তুত",
  "i'm available to": "আমি উপলব্ধ",
  "i'm free to": "আমি মুক্ত",
  "i'm open to": "আমি উন্মুক্ত",
  "i'm flexible": "আমি নমনীয়",
  "i'm adaptable": "আমি অভিযোজনযোগ্য",
  "i'm versatile": "আমি বহুমুখী",
  "i'm resourceful": "আমি সম্পদশালী",
  "i'm creative": "আমি সৃজনশীল",
  "i'm innovative": "আমি উদ্ভাবনী",
  "i'm proactive": "আমি সক্রিয়",
  "i'm reactive": "আমি প্রতিক্রিয়াশীল",
  "i'm responsive": "আমি সাড়া দেওয়ার যোগ্য",
  "i'm attentive": "আমি মনোযোগী",
  "i'm focused": "আমি মনোনিবেশ করি",
  "i'm concentrated": "আমি একাগ্র",
  "i'm dedicated": "আমি নিবেদিত",
  "i'm committed": "আমি প্রতিশ্রুতিবদ্ধ",
  "i'm devoted": "আমি নিবেদিত",
  "i'm loyal": "আমি অনুগত",
  "i'm faithful": "আমি বিশ্বস্ত",
  "i'm trustworthy": "আমি বিশ্বাসযোগ্য",
  "i'm reliable": "আমি নির্ভরযোগ্য",
  "i'm dependable": "আমি নির্ভরযোগ্য",
  "i'm consistent": "আমি সামঞ্জস্যপূর্ণ",
  "i'm persistent": "আমি অধ্যবসায়ী",
  "i'm determined": "আমি দৃঢ়প্রতিজ্ঞ",
  "i'm resolute": "আমি দৃঢ়সংকল্প",
  "i'm steadfast": "আমি অটল",
  "i'm unwavering": "আমি অবিচল",
  "i'm firm": "আমি দৃঢ়",
  "i'm decisive": "আমি নিশ্চিত",
  "i'm assertive": "আমি দৃঢ়",
  "i'm confident": "আমি আত্মবিশ্বাসী",
  "i'm self-assured": "আমি আত্মবিশ্বাসী",
  "i'm self-reliant": "আমি আত্মনির্ভরশীল",
  "i'm independent": "আমি স্বাধীন",
  "i'm autonomous": "আমি স্বায়ত্তশাসিত",
  "i'm self-sufficient": "আমি আত্মনির্ভরশীল",
  "i'm capable": "আমি সক্ষম",
  "i'm competent": "আমি যোগ্য",
  "i'm skilled": "আমি দক্ষ",
  "i'm proficient": "আমি পারদর্শী",
  "i'm experienced": "আমি অভিজ্ঞ",
  "i'm knowledgeable": "আমি জ্ঞানী",
  "i'm informed": "আমি অবহিত",
  "i'm educated": "আমি শিক্ষিত",
  "i'm trained": "আমি প্রশিক্ষিত",
  "i'm qualified": "আমি যোগ্য",
  "i'm certified": "আমি প্রত্যয়িত",
  "i'm accredited": "আমি স্বীকৃত",
  "i'm licensed": "আমি লাইসেন্সপ্রাপ্ত",
  "i'm authorized": "আমি অনুমোদিত",
  "i'm empowered": "আমি ক্ষমতাপ্রাপ্ত",
  "i'm enabled": "আমি সক্ষম",
  "i'm equipped": "আমি সজ্জিত",
  "i'm prepared": "আমি প্রস্তুত",
  "i'm ready": "আমি প্রস্তুত",
  "i'm set": "আমি প্রস্তুত",
  "i'm good to go": "আমি যেতে প্রস্তুত",
  "i'm all set": "আমি সম্পূর্ণ প্রস্তুত",
  "i'm on board": "আমি সম্মত",
  "i'm in": "আমি আছি",
  "i'm with you": "আমি আপনার সাথে আছি",
  "i'm behind you": "আমি আপনার পিছনে আছি",
  "i'm by your side": "আমি আপনার পাশে আছি",
  "i'm on your side": "আমি আপনার পক্ষে আছি",
  "i'm for you": "আমি আপনার জন্য আছি",
  "i'm here for you": "আমি আপনার জন্য এখানে আছি",
  "i'm available for you": "আমি আপনার জন্য উপলব্ধ আছি",
  "i'm at your service": "আমি আপনার সেবায় আছি",
  "i'm at your disposal": "আমি আপনার ব্যবহারের জন্য আছি",
  "i'm at your command": "আমি আপনার আদেশে আছি",
  "i'm at your beck and call": "আমি আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm yours": "আমি আপনার",
  "i'm all yours": "আমি সম্পূর্ণ আপনার",
  "i'm entirely yours": "আমি সম্পূর্ণ আপনার",
  "i'm completely yours": "আমি সম্পূর্ণ আপনার",
  "i'm totally yours": "আমি সম্পূর্ণ আপনার",
  "i'm absolutely yours": "আমি সম্পূর্ণ আপনার",
  "i'm utterly yours": "আমি সম্পূর্ণ আপনার",
  "i'm wholly yours": "আমি সম্পূর্ণ আপনার",
  "i'm fully yours": "আমি সম্পূর্ণ আপনার",
  "i'm entirely at your disposal": "আমি সম্পূর্ণভাবে আপনার ব্যবহারের জন্য আছি",
  "i'm completely at your service": "আমি সম্পূর্ণভাবে আপনার সেবায় আছি",
  "i'm totally at your command": "আমি সম্পূর্ণভাবে আপনার আদেশে আছি",
  "i'm absolutely at your beck and call": "আমি সম্পূর্ণভাবে আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm utterly devoted to you": "আমি সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm wholly committed to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রতিশ্রুতিবদ্ধ",
  "i'm fully dedicated to you": "আমি সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm entirely loyal to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অনুগত",
  "i'm completely faithful to you": "আমি সম্পূর্ণভাবে আপনার প্রতি বিশ্বস্ত",
  "i'm totally trustworthy to you": "আমি সম্পূর্ণভাবে আপনার প্রতি বিশ্বাসযোগ্য",
  "i'm absolutely reliable to you": "আমি সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm utterly dependable to you": "আমি সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm wholly consistent to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সামঞ্জস্যপূর্ণ",
  "i'm fully persistent to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অধ্যবসায়ী",
  "i'm entirely determined to you": "আমি সম্পূর্ণভাবে আপনার প্রতি দৃঢ়প্রতিজ্ঞ",
  "i'm completely resolute to you": "আমি সম্পূর্ণভাবে আপনার প্রতি দৃঢ়সংকল্প",
  "i'm totally steadfast to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অটল",
  "i'm absolutely unwavering to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অবিচল",
  "i'm utterly firm to you": "আমি সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm wholly decisive to you": "আমি সম্পূর্ণভাবে আপনার প্রতি নিশ্চিত",
  "i'm fully assertive to you": "আমি সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm entirely confident to you": "আমি সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm completely self-assured to you": "আমি সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm totally self-reliant to you": "আমি সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm absolutely independent to you": "আমি সম্পূর্ণভাবে আপনার প্রতি স্বাধীন",
  "i'm utterly autonomous to you": "আমি সম্পূর্ণভাবে আপনার প্রতি স্বায়ত্তশাসিত",
  "i'm wholly self-sufficient to you": "আমি সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm fully capable to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সক্ষম",
  "i'm entirely competent to you": "আমি সম্পূর্ণভাবে আপনার প্রতি যোগ্য",
  "i'm completely skilled to you": "আমি সম্পূর্ণভাবে আপনার প্রতি দক্ষ",
  "i'm totally proficient to you": "আমি সম্পূর্ণভাবে আপনার প্রতি পারদর্শী",
  "i'm absolutely experienced to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অভিজ্ঞ",
  "i'm utterly knowledgeable to you": "আমি সম্পূর্ণভাবে আপনার প্রতি জ্ঞানী",
  "i'm wholly informed to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অবহিত",
  "i'm fully educated to you": "আমি সম্পূর্ণভাবে আপনার প্রতি শিক্ষিত",
  "i'm entirely trained to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রশিক্ষিত",
  "i'm completely qualified to you": "আমি সম্পূর্ণভাবে আপনার প্রতি যোগ্য",
  "i'm totally certified to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রত্যয়িত",
  "i'm absolutely accredited to you": "আমি সম্পূর্ণভাবে আপনার প্রতি স্বীকৃত",
  "i'm utterly licensed to you": "আমি সম্পূর্ণভাবে আপনার প্রতি লাইসেন্সপ্রাপ্ত",
  "i'm wholly authorized to you": "আমি সম্পূর্ণভাবে আপনার প্রতি অনুমোদিত",
  "i'm fully empowered to you": "আমি সম্পূর্ণভাবে আপনার প্রতি ক্ষমতাপ্রাপ্ত",
  "i'm entirely enabled to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সক্ষম",
  "i'm completely equipped to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সজ্জিত",
  "i'm totally prepared to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm absolutely ready to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm utterly set to you": "আমি সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm wholly good to go to you": "আমি সম্পূর্ণভাবে আপনার প্রতি যেতে প্রস্তুত",
  "i'm fully all set to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সম্পূর্ণ প্রস্তুত",
  "i'm entirely on board to you": "আমি সম্পূর্ণভাবে আপনার প্রতি সম্মত",
  "i'm completely in to you": "আমি সম্পূর্ণভাবে আপনার প্রতি আছি",
  "i'm totally with you to you": "আমি সম্পূর্ণভাবে আপনার সাথে আছি",
  "i'm absolutely behind you to you": "আমি সম্পূর্ণভাবে আপনার পিছনে আছি",
  "i'm utterly by your side to you": "আমি সম্পূর্ণভাবে আপনার পাশে আছি",
  "i'm wholly on your side to you": "আমি সম্পূর্ণভাবে আপনার পক্ষে আছি",
  "i'm fully for you to you": "আমি সম্পূর্ণভাবে আপনার জন্য আছি",
  "i'm entirely here for you to you": "আমি সম্পূর্ণভাবে আপনার জন্য এখানে আছি",
  "i'm completely available for you to you": "আমি সম্পূর্ণভাবে আপনার জন্য উপলব্ধ আছি",
  "i'm totally at your service to you": "আমি সম্পূর্ণভাবে আপনার সেবায় আছি",
  "i'm absolutely at your disposal to you": "আমি সম্পূর্ণভাবে আপনার ব্যবহারের জন্য আছি",
  "i'm utterly at your command to you": "আমি সম্পূর্ণভাবে আপনার আদেশে আছি",
  "i'm wholly at your beck and call to you": "আমি সম্পূর্ণভাবে আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm fully yours to you": "আমি সম্পূর্ণভাবে আপনার",
  "i'm entirely all yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm completely entirely yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm totally completely yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm absolutely totally yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm utterly absolutely yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm wholly utterly yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm fully wholly yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm entirely fully yours to you": "আমি সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm completely entirely at your disposal to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ব্যবহারের জন্য আছি",
  "i'm totally completely at your service to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার সেবায় আছি",
  "i'm absolutely totally at your command to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার আদেশে আছি",
  "i'm utterly absolutely at your beck and call to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm wholly utterly devoted to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm fully wholly committed to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রতিশ্রুতিবদ্ধ",
  "i'm entirely fully dedicated to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm completely entirely loyal to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অনুগত",
  "i'm totally completely faithful to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি বিশ্বস্ত",
  "i'm absolutely totally trustworthy to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি বিশ্বাসযোগ্য",
  "i'm utterly absolutely reliable to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm wholly utterly dependable to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm fully wholly consistent to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সামঞ্জস্যপূর্ণ",
  "i'm entirely fully persistent to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অধ্যবসায়ী",
  "i'm completely entirely determined to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়প্রতিজ্ঞ",
  "i'm totally completely resolute to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়সংকল্প",
  "i'm absolutely totally steadfast to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অটল",
  "i'm utterly absolutely unwavering to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অবিচল",
  "i'm wholly utterly firm to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm fully wholly decisive to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিশ্চিত",
  "i'm entirely fully assertive to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm completely entirely confident to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm totally completely self-assured to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm absolutely totally self-reliant to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm utterly absolutely independent to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি স্বাধীন",
  "i'm wholly utterly autonomous to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি স্বায়ত্তশাসিত",
  "i'm fully wholly self-sufficient to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm entirely fully capable to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সক্ষম",
  "i'm completely entirely competent to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি যোগ্য",
  "i'm totally completely skilled to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দক্ষ",
  "i'm absolutely totally proficient to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি পারদর্শী",
  "i'm utterly absolutely experienced to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অভিজ্ঞ",
  "i'm wholly utterly knowledgeable to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি জ্ঞানী",
  "i'm fully wholly informed to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অবহিত",
  "i'm entirely fully educated to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি শিক্ষিত",
  "i'm completely entirely trained to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রশিক্ষিত",
  "i'm totally completely qualified to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি যোগ্য",
  "i'm absolutely totally certified to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রত্যয়িত",
  "i'm utterly absolutely accredited to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি স্বীকৃত",
  "i'm wholly utterly licensed to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি লাইসেন্সপ্রাপ্ত",
  "i'm fully wholly authorized to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অনুমোদিত",
  "i'm entirely fully empowered to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি ক্ষমতাপ্রাপ্ত",
  "i'm completely entirely enabled to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সক্ষম",
  "i'm totally completely equipped to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সজ্জিত",
  "i'm absolutely totally prepared to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm utterly absolutely ready to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm wholly utterly set to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রস্তুত",
  "i'm fully wholly good to go to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি যেতে প্রস্তুত",
  "i'm entirely fully all set to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সম্পূর্ণ প্রস্তুত",
  "i'm completely entirely on board to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সম্মত",
  "i'm totally completely in to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আছি",
  "i'm absolutely totally with you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার সাথে আছি",
  "i'm utterly absolutely behind you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার পিছনে আছি",
  "i'm wholly utterly by your side to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার পাশে আছি",
  "i'm fully wholly on your side to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার পক্ষে আছি",
  "i'm entirely fully for you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার জন্য আছি",
  "i'm completely entirely here for you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার জন্য এখানে আছি",
  "i'm totally completely available for you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার জন্য উপলব্ধ আছি",
  "i'm absolutely totally at your service to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার সেবায় আছি",
  "i'm utterly absolutely at your disposal to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ব্যবহারের জন্য আছি",
  "i'm wholly utterly at your command to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার আদেশে আছি",
  "i'm fully wholly at your beck and call to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm entirely fully yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার",
  "i'm completely entirely all yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm totally completely entirely yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm absolutely totally completely yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm utterly absolutely totally yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm wholly utterly absolutely yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm fully wholly utterly yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm entirely fully wholly yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm completely entirely fully yours to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণ আপনার",
  "i'm totally completely entirely at your disposal to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ব্যবহারের জন্য আছি",
  "i'm absolutely totally completely at your service to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার সেবায় আছি",
  "i'm utterly absolutely totally at your command to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার আদেশে আছি",
  "i'm wholly utterly absolutely at your beck and call to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার ডাকে সাড়া দিতে প্রস্তুত",
  "i'm fully wholly utterly devoted to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm entirely fully wholly committed to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি প্রতিশ্রুতিবদ্ধ",
  "i'm completely entirely fully dedicated to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিবেদিত",
  "i'm totally completely entirely loyal to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অনুগত",
  "i'm absolutely totally completely faithful to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি বিশ্বস্ত",
  "i'm utterly absolutely totally trustworthy to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি বিশ্বাসযোগ্য",
  "i'm wholly utterly absolutely reliable to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm fully wholly utterly dependable to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নির্ভরযোগ্য",
  "i'm entirely fully wholly consistent to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সামঞ্জস্যপূর্ণ",
  "i'm completely entirely fully persistent to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অধ্যবসায়ী",
  "i'm totally completely entirely determined to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়প্রতিজ্ঞ",
  "i'm absolutely totally completely resolute to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়সংকল্প",
  "i'm utterly absolutely totally steadfast to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অটল",
  "i'm wholly utterly absolutely unwavering to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অবিচল",
  "i'm fully wholly utterly firm to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm entirely fully wholly decisive to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি নিশ্চিত",
  "i'm completely entirely fully assertive to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দৃঢ়",
  "i'm totally completely entirely confident to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm absolutely totally completely self-assured to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মবিশ্বাসী",
  "i'm utterly absolutely totally self-reliant to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm wholly utterly absolutely independent to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি স্বাধীন",
  "i'm fully wholly utterly autonomous to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি স্বায়ত্তশাসিত",
  "i'm entirely fully wholly self-sufficient to you to you to you":
    "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি আত্মনির্ভরশীল",
  "i'm completely entirely fully capable to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি সক্ষম",
  "i'm totally completely entirely competent to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি যোগ্য",
  "i'm absolutely totally completely skilled to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি দক্ষ",
  "i'm utterly absolutely totally proficient to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি পারদর্শী",
  "i'm wholly utterly absolutely experienced to you to you to you": "আমি সম্পূর্ণভাবে সম্পূর্ণভাবে সম্পূর্ণভাবে আপনার প্রতি অভিজ্ঞ",
}

// Simple translation function that uses the cache or returns a placeholder
export async function translateToBengali(text: string): Promise<string> {
  // Convert to lowercase for cache lookup
  const lowerText = text.toLowerCase().trim()

// Check if we have this exact phrase in our cache
  if (translationCache[lowerText]) {
    return translationCache[lowerText]
  }

// Check for partial matches in our cache
  for (const key in translationCache) {
    if (lowerText.includes(key)) {
      return translationCache[key]
    }
  }

// If no match found, return a simulated translation
  // In a real app, this would call a translation API
  return `${text} (বাংলা অনুবাদ)`
}

// Get instant translation without async
export function getInstantTranslation(text: string): string | null {
  const lowerText = text.toLowerCase().trim()

// Check if we have this exact phrase in our cache
  if (translationCache[lowerText]) {
    return translationCache[lowerText]
  }

// Check for partial matches in our cache
  for (const key in translationCache) {
    if (lowerText.includes(key)) {
      return translationCache[key]
    }
  }

return null
}

// Get suggestions based on input
export function getSuggestions(input: string): Array<{ english: string; bengali: string }> {
  const lowerInput = input.toLowerCase().trim()
  const suggestions: Array<{ english: string; bengali: string }> = []

// Find matching phrases in our cache
  for (const key in translationCache) {
    if (key.includes(lowerInput) || lowerInput.includes(key)) {
      suggestions.push({
        english: key,
        bengali: translationCache[key],
      })

// Limit to 5 suggestions
      if (suggestions.length >= 5) {
        break
      }
    }
  }

return suggestions
}
[V0_FILE]typescriptreact:file="components/meeting-preparation/real-time-translator.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
  Mic,
  MicOff,
  Volume2,
  Settings,
  Save,
  Clipboard,
  ClipboardCheck,
  Languages,
  ImportIcon as Translate,
  MessageSquare,
  BookOpen,
  BookmarkPlus,
  Trash2,
} from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { translateToBengali, getInstantTranslation, getSuggestions } from "@/lib/translation-service"
import { audioController } from "@/lib/audio-controller"

interface TranscriptItem {
  id: string
  timestamp: Date
  english: string
  bengali: string
  isSaved?: boolean
}

interface SavedPhrase {
  english: string
  bengali: string
}

export function RealTimeTranslator() {
  const { toast } = useToast()
  const [isListening, setIsListening] = useState(false)
  const [transcript, setTranscript] = useState<TranscriptItem[]>([])
  const [savedPhrases, setSavedPhrases] = useState<SavedPhrase[]>([])
  const [showSettings, setShowSettings] = useState(false)
  const [autoScroll, setAutoScroll] = useState(true)
  const [showInstantTranslation, setShowInstantTranslation] = useState(true)
  const [instantTranslation, setInstantTranslation] = useState<{ english: string; bengali: string } | null>(null)
  const [quickResponses, setQuickResponses] = useState<SavedPhrase[]>([
    { english: "Could you please repeat that?", bengali: "আপনি কি অনুগ্রহ করে আবার বলতে পারবেন?" },
    { english: "I understand, thank you.", bengali: "আমি বুঝতে পেরেছি, ধন্যবাদ।" },
    { english: "Let me think about it.", bengali: "আমাকে এটা নিয়ে ভাবতে দিন।" },
    { english: "That's a good point.", bengali: "এটা একটি ভালো যুক্তি।" },
    { english: "I agree with you.", bengali: "আমি আপনার সাথে একমত।" },
  ])
  const [customResponse, setCustomResponse] = useState("")
  const [customResponseTranslation, setCustomResponseTranslation] = useState("")
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
  const [suggestions, setSuggestions] = useState<Array<{ english: string; bengali: string }>>([])
  const [isTranslating, setIsTranslating] = useState(false)

const recognitionRef = useRef<any>(null)
  const scrollAreaRef = useRef<HTMLDivElement>(null)

// Initialize speech recognition
  useEffect(() => {
    if (typeof window !== "undefined") {
      // Check if the browser supports SpeechRecognition
      const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition

if (SpeechRecognition) {
        const recognition = new SpeechRecognition()
        recognition.continuous = true
        recognition.interimResults = true
        recognition.lang = "en-US"

recognition.onresult = async (event: any) => {
          const lastResult = event.results[event.results.length - 1]
          const transcript = lastResult[0].transcript.trim()

// Update instant translation for the current speech
          if (lastResult.isFinal) {
            // Add to transcript
            const translatedText = await translateToBengali(transcript)

setTranscript((prev) => [
              ...prev,
              {
                id: Date.now().toString(),
                timestamp: new Date(),
                english: transcript,
                bengali: translatedText,
              },
            ])

setInstantTranslation(null)
          } else {
            // Show instant translation while speaking
            const instantTrans = getInstantTranslation(transcript)
            if (instantTrans && showInstantTranslation) {
              setInstantTranslation({
                english: transcript,
                bengali: instantTrans,
              })
            } else {
              setIsTranslating(true)
              try {
                const translatedText = await translateToBengali(transcript)
                setInstantTranslation({
                  english: transcript,
                  bengali: translatedText,
                })
              } catch (error) {
                console.error("Translation error:", error)
              } finally {
                setIsTranslating(false)
              }
            }
          }
        }

recognition.onerror = (event: any) => {
          console.error("Speech recognition error", event.error)
          if (event.error === "not-allowed") {
            toast({
              title: "Microphone access denied",
              description: "Please allow microphone access to use the translator.",
              variant: "destructive",
            })
            setIsListening(false)
          }
        }

recognition.onend = () => {
          // Restart recognition if still listening
          if (isListening) {
            recognition.start()
          }
        }

recognitionRef.current = recognition
      } else {
        toast({
          title: "Speech recognition not supported",
          description: "Your browser doesn't support speech recognition. Please try Chrome, Edge, or Safari.",
          variant: "destructive",
        })
      }
    }

// Load saved phrases from localStorage
    const savedItems = localStorage.getItem("saved-phrases")
    if (savedItems) {
      try {
        setSavedPhrases(JSON.parse(savedItems))
      } catch (e) {
        console.error("Failed to load saved phrases", e)
      }
    }

return () => {
      if (recognitionRef.current) {
        try {
          recognitionRef.current.stop()
        } catch (e) {
          console.error("Error stopping speech recognition:", e)
        }
      }
    }
  }, [])

// Auto-scroll effect
  useEffect(() => {
    if (autoScroll && scrollAreaRef.current && transcript.length > 0) {
      const scrollArea = scrollAreaRef.current
      scrollArea.scrollTop = scrollArea.scrollHeight
    }
  }, [transcript, autoScroll])

// Toggle listening
  const toggleListening = () => {
    if (!recognitionRef.current) {
      toast({
        title: "Speech recognition not available",
        description: "Your browser doesn't support speech recognition.",
        variant: "destructive",
      })
      return
    }

if (isListening) {
      recognitionRef.current.stop()
      setIsListening(false)
      setInstantTranslation(null)
    } else {
      try {
        recognitionRef.current.start()
        setIsListening(true)

toast({
          title: "Listening started",
          description: "The translator is now listening for English speech.",
        })
      } catch (error) {
        console.error("Error starting speech recognition:", error)
        toast({
          title: "Error starting speech recognition",
          description: "There was an error starting the speech recognition. Please try again.",
          variant: "destructive",
        })
      }
    }
  }

// Save a phrase
  const savePhrase = (item: TranscriptItem) => {
    const newSavedPhrases = [...savedPhrases, { english: item.english, bengali: item.bengali }]

setSavedPhrases(newSavedPhrases)
    localStorage.setItem("saved-phrases", JSON.stringify(newSavedPhrases))

// Mark as saved in transcript
    setTranscript((prev) => prev.map((t) => (t.id === item.id ? { ...t, isSaved: true } : t)))

toast({
      title: "Phrase saved",
      description: "The phrase has been saved to your collection.",
    })
  }

// Delete a saved phrase
  const deleteSavedPhrase = (index: number) => {
    const newSavedPhrases = [...savedPhrases]
    newSavedPhrases.splice(index, 1)

setSavedPhrases(newSavedPhrases)
    localStorage.setItem("saved-phrases", JSON.stringify(newSavedPhrases))

toast({
      title: "Phrase deleted",
      description: "The phrase has been removed from your collection.",
    })
  }

// Copy text to clipboard
  const copyToClipboard = (text: string, index: number) => {
    navigator.clipboard.writeText(text)
    setCopiedIndex(index)

setTimeout(() => {
      setCopiedIndex(null)
    }, 2000)

toast({
      title: "Copied to clipboard",
      description: "The text has been copied to your clipboard.",
    })
  }

// Clear transcript
  const clearTranscript = () => {
    setTranscript([])
    toast({
      title: "Transcript cleared",
      description: "The transcript has been cleared.",
    })
  }

// Handle custom response input
  const handleCustomResponseChange = async (value: string) => {
    setCustomResponse(value)

if (value.trim()) {
      // Get suggestions
      const newSuggestions = getSuggestions(value)
      setSuggestions(newSuggestions)

// Translate
      try {
        const translation = await translateToBengali(value)
        setCustomResponseTranslation(translation)
      } catch (error) {
        console.error("Translation error:", error)
      }
    } else {
      setSuggestions([])
      setCustomResponseTranslation("")
    }
  }

// Save custom response
  const saveCustomResponse = () => {
    if (!customResponse.trim()) return

const newQuickResponses = [...quickResponses, { english: customResponse, bengali: customResponseTranslation }]

setQuickResponses(newQuickResponses)
    setCustomResponse("")
    setCustomResponseTranslation("")
    setSuggestions([])

toast({
      title: "Response saved",
      description: "Your custom response has been saved.",
    })
  }

// Format timestamp
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

// Speak text
  const speakText = (text: string, language: "en" | "bn") => {
    // Stop any ongoing speech
    if (audioController && typeof audioController.forceStopAllAudio === "function") {
      audioController.forceStopAllAudio()
    }

if ("speechSynthesis" in window) {
      const utterance = new SpeechSynthesisUtterance(text)

// Set language
      utterance.lang = language === "en" ? "en-US" : "bn-BD"

// Find an appropriate voice
      const voices = window.speechSynthesis.getVoices()
      const voice = voices.find((v) => v.lang.includes(language === "en" ? "en" : "bn"))
      if (voice) {
        utterance.voice = voice
      }

window.speechSynthesis.speak(utterance)
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl flex items-center">
              <Translate className="h-5 w-5 mr-2" />
              Real-Time Meeting Translator
            </CardTitle>
            <CardDescription>Translate English speech to Bengali in real-time</CardDescription>
          </div>
          <div className="flex space-x-2">
            <Button variant={isListening ? "destructive" : "default"} onClick={toggleListening}>
              {isListening ? (
                <>
                  <MicOff className="h-4 w-4 mr-2" />
                  Stop Listening
                </>
              ) : (
                <>
                  <Mic className="h-4 w-4 mr-2" />
                  Start Listening
                </>
              )}
            </Button>

<Button variant="outline" size="icon" onClick={() => setShowSettings(!showSettings)}>
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>

{isListening && instantTranslation && (
          <div className="mt-2 p-3 bg-primary/10 rounded-md border border-primary/20 animate-pulse">
            <div className="text-sm font-medium">Current Speech:</div>
            <p className="text-sm">{instantTranslation.english}</p>
            <p className="text-sm font-medium mt-1 text-primary">{instantTranslation.bengali}</p>
          </div>
        )}

{isListening && isTranslating && !instantTranslation && (
          <div className="mt-2 p-3 bg-primary/10 rounded-md border border-primary/20 animate-pulse">
            <div className="text-sm font-medium">Translating...</div>
          </div>
        )}

{showSettings && (
          <div className="mt-2 p-3 bg-muted rounded-md">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Label htmlFor="auto-scroll" className="text-sm">
                  Auto-scroll transcript
                </Label>
                <Switch id="auto-scroll" checked={autoScroll} onCheckedChange={setAutoScroll} />
              </div>

<div className="flex items-center space-x-2">
                <Label htmlFor="instant-translation" className="text-sm">
                  Show instant translation
                </Label>
                <Switch
                  id="instant-translation"
                  checked={showInstantTranslation}
                  onCheckedChange={setShowInstantTranslation}
                />
              </div>

<Button variant="outline" size="sm" onClick={clearTranscript}>
                Clear Transcript
              </Button>
            </div>
          </div>
        )}
      </CardHeader>

<CardContent>
        <Tabs defaultValue="transcript" className="w-full">
          <TabsList className="mb-4">
            <TabsTrigger value="transcript" className="flex items-center">
              <MessageSquare className="h-4 w-4 mr-2" />
              Transcript
            </TabsTrigger>
            <TabsTrigger value="responses" className="flex items-center">
              <MessageSquare className="h-4 w-4 mr-2" />
              Quick Responses
            </TabsTrigger>
            <TabsTrigger value="saved" className="flex items-center">
              <BookOpen className="h-4 w-4 mr-2" />
              Saved Phrases
            </TabsTrigger>
          </TabsList>

<TabsContent value="transcript" className="space-y-4">
            <ScrollArea className="h-[400px] pr-4" ref={scrollAreaRef}>
              {transcript.length > 0 ? (
                <div className="space-y-3">
                  {transcript.map((item) => (
                    <div key={item.id} className="p-3 border rounded-md">
                      <div className="flex justify-between items-start mb-1">
                        <Badge variant="outline">{formatTime(item.timestamp)}</Badge>
                        <div className="flex space-x-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => speakText(item.english, "en")}
                            title="Play English"
                          >
                            <Volume2 className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(item.english, Number.parseInt(item.id))}
                            title="Copy English"
                          >
                            {copiedIndex === Number.parseInt(item.id) ? (
                              <ClipboardCheck className="h-3 w-3" />
                            ) : (
                              <Clipboard className="h-3 w-3" />
                            )}
                          </Button>
                          {!item.isSaved && (
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6"
                              onClick={() => savePhrase(item)}
                              title="Save Phrase"
                            >
                              <BookmarkPlus className="h-3 w-3" />
                            </Button>
                          )}
                        </div>
                      </div>
                      <p className="text-sm">{item.english}</p>
                      <Separator className="my-2" />
                      <div className="flex justify-between items-start">
                        <p className="text-sm font-medium text-primary">{item.bengali}</p>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-6 w-6 mt-[-4px]"
                          onClick={() => copyToClipboard(item.bengali, -Number.parseInt(item.id))}
                          title="Copy Bengali"
                        >
                          {copiedIndex === -Number.parseInt(item.id) ? (
                            <ClipboardCheck className="h-3 w-3" />
                          ) : (
                            <Clipboard className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="h-full flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <Languages className="h-12 w-12 mx-auto mb-2 opacity-20" />
                    <p>No transcript yet. Start listening to begin translation.</p>
                  </div>
                </div>
              )}
            </ScrollArea>
          </TabsContent>

<TabsContent value="responses" className="space-y-4">
            <div className="space-y-2 mb-4">
              <Label htmlFor="custom-response">Create Custom Response</Label>
              <div className="flex space-x-2">
                <div className="flex-1">
                  <Input
                    id="custom-response"
                    placeholder="Type your response in English..."
                    value={customResponse}
                    onChange={(e) => handleCustomResponseChange(e.target.value)}
                  />

{suggestions.length > 0 && (
                    <div className="mt-1 p-2 border rounded-md bg-background">
                      {suggestions.map((suggestion, index) => (
                        <div
                          key={index}
                          className="p-1 text-sm hover:bg-muted rounded cursor-pointer"
                          onClick={() => {
                            setCustomResponse(suggestion.english)
                            setCustomResponseTranslation(suggestion.bengali)
                            setSuggestions([])
                          }}
                        >
                          {suggestion.english}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
                <Button onClick={saveCustomResponse} disabled={!customResponse.trim()}>
                  <Save className="h-4 w-4 mr-2" />
                  Save
                </Button>
              </div>

{customResponseTranslation && (
                <div className="p-2 border rounded-md mt-2">
                  <p className="text-sm font-medium">Bengali Translation:</p>
                  <p className="text-sm">{customResponseTranslation}</p>
                </div>
              )}
            </div>

<div className="space-y-2">
              <h3 className="text-sm font-medium">Quick Responses</h3>
              <div className="grid grid-cols-1 gap-2">
                {quickResponses.map((response, index) => (
                  <div key={index} className="p-3 border rounded-md">
                    <div className="flex justify-between items-start">
                      <p className="text-sm">{response.english}</p>
                      <div className="flex space-x-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-6 w-6"
                          onClick={() => speakText(response.english, "en")}
                          title="Play English"
                        >
                          <Volume2 className="h-3 w-3" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-6 w-6"
                          onClick={() => copyToClipboard(response.english, index)}
                          title="Copy English"
                        >
                          {copiedIndex === index ? (
                            <ClipboardCheck className="h-3 w-3" />
                          ) : (
                            <Clipboard className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </div>
                    <Separator className="my-2" />
                    <div className="flex justify-between items-start">
                      <p className="text-sm font-medium text-primary">{response.bengali}</p>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-6 w-6"
                        onClick={() => copyToClipboard(response.bengali, -index - 1000)}
                        title="Copy Bengali"
                      >
                        {copiedIndex === -index - 1000 ? (
                          <ClipboardCheck className="h-3 w-3" />
                        ) : (
                          <Clipboard className="h-3 w-3" />
                        )}
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </TabsContent>

<TabsContent value="saved" className="space-y-4">
            <ScrollArea className="h-[400px] pr-4">
              {savedPhrases.length > 0 ? (
                <div className="space-y-2">
                  {savedPhrases.map((phrase, index) => (
                    <div key={index} className="p-3 border rounded-md">
                      <div className="flex justify-between items-start">
                        <p className="text-sm">{phrase.english}</p>
                        <div className="flex space-x-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => speakText(phrase.english, "en")}
                            title="Play English"
                          >
                            <Volume2 className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(phrase.english, index + 2000)}
                            title="Copy English"
                          >
                            {copiedIndex === index + 2000 ? (
                              <ClipboardCheck className="h-3 w-3" />
                            ) : (
                              <Clipboard className="h-3 w-3" />
                            )}
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6 text-destructive"
                            onClick={() => deleteSavedPhrase(index)}
                            title="Delete Phrase"
                          >
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                      <Separator className="my-2" />
                      <div className="flex justify-between items-start">
                        <p className="text-sm font-medium text-primary">{phrase.bengali}</p>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-6 w-6"
                          onClick={() => copyToClipboard(phrase.bengali, -index - 2000)}
                          title="Copy Bengali"
                        >
                          {copiedIndex === -index - 2000 ? (
                            <ClipboardCheck className="h-3 w-3" />
                          ) : (
                            <Clipboard className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="h-full flex items-center justify-center text-muted-foreground">
                  <div className="text-center">
                    <BookOpen className="h-12 w-12 mx-auto mb-2 opacity-20" />
                    <p>No saved phrases yet. Save phrases from the transcript to build your collection.</p>
                  </div>
                </div>
              )}
            </ScrollArea>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/audio-controller.ts" isFixed="true" isQuickEdit="true"
// Simple audio controller
export const audioController = {
  forceStopAllAudio: () => {
    if (typeof window !== "undefined" && window.speechSynthesis) {
      window.speechSynthesis.cancel()
    }
  },
}
[V0_FILE]typescriptreact:file="app/yunus-inspire/page.tsx"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"
import { ThemeToggle } from "@/components/theme-toggle"
import { Footer } from "@/components/footer"
import { DhakaTime } from "@/components/dhaka-time"
import {
  BookOpen,
  Code,
  Heart,
  Users,
  Lightbulb,
  GraduationCap,
  Globe,
  ArrowRight,
  CheckCircle,
  Calendar,
  MapPin,
  ExternalLink,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

export default function YunusInspirePage() {
  const [isLoaded, setIsLoaded] = useState(false)

useEffect(() => {
    setIsLoaded(true)
  }, [])

const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 },
    },
  }

const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

return (
    <div className="min-h-screen flex flex-col">
      <header className="border-b sticky top-0 z-10 bg-background">
        <div className="container mx-auto py-4 px-4 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <Link href="/">
              <Image
                src="/mjahmad.png"
                alt="MJ-AHMAD Logo"
                width={40}
                height={40}
                className="object-contain rounded-full"
              />
            </Link>
            <div>
              <h1 className="text-xl font-bold">Yunus Inspire</h1>
              <p className="text-xs text-muted-foreground">An Educational Initiative by MJ-AHMAD</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/" className="text-sm font-medium hover:underline">
              Home
            </Link>
            <ThemeToggle />
          </div>
        </div>
      </header>

<main className="flex-grow">
        {/* Hero Section */}
        <section className="relative bg-gradient-to-r from-blue-600 to-indigo-700 text-white overflow-hidden">
          <div className="absolute inset-0 bg-grid-white/10 bg-[size:20px_20px] opacity-20"></div>
          <div className="container mx-auto px-4 py-16 md:py-24 relative z-10">
            <motion.div
              className="max-w-3xl mx-auto text-center"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={fadeIn}
            >
              <Badge className="mb-4 bg-white/20 hover:bg-white/30 text-white border-none">
                Educational Initiative
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Yunus Inspire</h1>
              <p className="text-xl md:text-2xl mb-8 text-blue-100">
                Empowering Bangladeshi youth through education, technology, and ethical practices
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button size="lg" className="bg-white text-blue-700 hover:bg-blue-50">
                  Get Involved <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
                <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
                  Learn More
                </Button>
              </div>
            </motion.div>
          </div>
          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent"></div>
        </section>

{/* Mission & Vision */}
        <section className="container mx-auto px-4 py-16">
          <motion.div
            className="max-w-3xl mx-auto text-center mb-12"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={fadeIn}
          >
            <h2 className="text-3xl font-bold mb-4">Our Mission & Vision</h2>
            <p className="text-lg text-muted-foreground">
              Inspired by Nobel Laureate Muhammad Yunus, we aim to create sustainable educational opportunities that
              empower the next generation of Bangladeshi leaders and innovators.
            </p>
          </motion.div>

<motion.div
            className="grid md:grid-cols-2 gap-8"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={staggerContainer}
          >
            <motion.div variants={fadeIn}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Lightbulb className="mr-2 h-5 w-5 text-blue-600" />
                    Our Mission
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p>
                    To create accessible, high-quality educational resources and programs that bridge the gap between
                    traditional education and the skills needed for the future, with a focus on technology,
                    entrepreneurship, and ethical leadership.
                  </p>
                </CardContent>
              </Card>
            </motion.div>

<motion.div variants={fadeIn}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Globe className="mr-2 h-5 w-5 text-blue-600" />
                    Our Vision
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p>
                    A Bangladesh where every young person has the opportunity to develop their full potential,
                    regardless of their background, and contribute to building a more equitable, innovative, and
                    sustainable society.
                  </p>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

{/* Core Focus Areas */}
        <section className="bg-muted/50 py-16">
          <div className="container mx-auto px-4">
            <motion.div
              className="max-w-3xl mx-auto text-center mb-12"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={fadeIn}
            >
              <h2 className="text-3xl font-bold mb-4">Core Focus Areas</h2>
              <p className="text-lg text-muted-foreground">
                Our initiative focuses on three interconnected pillars to create comprehensive development
                opportunities.
              </p>
            </motion.div>

<motion.div
              className="grid md:grid-cols-3 gap-8"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={staggerContainer}
            >
              <motion.div variants={fadeIn}>
                <Card className="h-full border-t-4 border-t-blue-600">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <BookOpen className="mr-2 h-5 w-5 text-blue-600" />
                      Education
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Digital literacy programs for underserved communities</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Scholarship opportunities for promising students</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Teacher training and curriculum development</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>

<motion.div variants={fadeIn}>
                <Card className="h-full border-t-4 border-t-indigo-600">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Code className="mr-2 h-5 w-5 text-indigo-600" />
                      Technology
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Coding bootcamps and software development training</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Tech innovation hubs in rural and urban areas</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Open source technology solutions for local challenges</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>

<motion.div variants={fadeIn}>
                <Card className="h-full border-t-4 border-t-purple-600">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Heart className="mr-2 h-5 w-5 text-purple-600" />
                      Ethics & Leadership
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Ethical leadership development programs</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Community service and social responsibility initiatives</span>
                      </li>
                      <li className="flex items-start">
                        <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                        <span>Mentorship networks connecting youth with role models</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </div>
        </section>

{/* Programs & Initiatives */}
        <section className="container mx-auto px-4 py-16">
          <motion.div
            className="max-w-3xl mx-auto text-center mb-12"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={fadeIn}
          >
            <h2 className="text-3xl font-bold mb-4">Our Programs & Initiatives</h2>
            <p className="text-lg text-muted-foreground">
              Explore our diverse range of programs designed to create meaningful impact across Bangladesh.
            </p>
          </motion.div>

<Tabs defaultValue="education" className="w-full">
            <TabsList className="grid grid-cols-3 max-w-md mx-auto mb-8">
              <TabsTrigger value="education">Education</TabsTrigger>
              <TabsTrigger value="technology">Technology</TabsTrigger>
              <TabsTrigger value="leadership">Leadership</TabsTrigger>
            </TabsList>

<TabsContent value="education">
              <motion.div
                className="grid md:grid-cols-2 gap-8"
                initial="hidden"
                animate={isLoaded ? "visible" : "hidden"}
                variants={staggerContainer}
              >
                <motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Digital Literacy Camps</CardTitle>
                      <CardDescription>Mobile education centers reaching remote areas</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        Our mobile digital literacy camps travel to remote villages across Bangladesh, providing
                        hands-on computer training, internet skills, and basic digital literacy.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <Users className="mr-2 h-4 w-4" />
                        <span>5,000+ students reached annually</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <MapPin className="mr-2 h-4 w-4" />
                        <span>Operating in 12 districts</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>

<motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Teacher Empowerment Program</CardTitle>
                      <CardDescription>Equipping educators with modern teaching methods</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        This program trains teachers in innovative pedagogical approaches, technology integration, and
                        student-centered learning methodologies to transform classroom experiences.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <Users className="mr-2 h-4 w-4" />
                        <span>1,200+ teachers trained</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Calendar className="mr-2 h-4 w-4" />
                        <span>Year-round workshops</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>
              </motion.div>
            </TabsContent>

<TabsContent value="technology">
              <motion.div
                className="grid md:grid-cols-2 gap-8"
                initial="hidden"
                animate={isLoaded ? "visible" : "hidden"}
                variants={staggerContainer}
              >
                <motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Code Bangladesh</CardTitle>
                      <CardDescription>Free coding bootcamps for youth</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        Intensive 12-week coding bootcamps teaching web development, mobile app development, and
                        software engineering fundamentals to young Bangladeshis.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <GraduationCap className="mr-2 h-4 w-4" />
                        <span>800+ graduates employed in tech</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <MapPin className="mr-2 h-4 w-4" />
                        <span>Centers in Dhaka, Chittagong, and Sylhet</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>

<motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Rural Tech Hubs</CardTitle>
                      <CardDescription>Technology centers in underserved communities</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        Community technology centers providing internet access, computer resources, and technology
                        training to rural communities across Bangladesh.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <MapPin className="mr-2 h-4 w-4" />
                        <span>15 hubs established nationwide</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Users className="mr-2 h-4 w-4" />
                        <span>30,000+ community members served</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>
              </motion.div>
            </TabsContent>

<TabsContent value="leadership">
              <motion.div
                className="grid md:grid-cols-2 gap-8"
                initial="hidden"
                animate={isLoaded ? "visible" : "hidden"}
                variants={staggerContainer}
              >
                <motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Youth Leadership Academy</CardTitle>
                      <CardDescription>Developing ethical leaders for tomorrow</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        A comprehensive leadership development program for young Bangladeshis, focusing on ethical
                        decision-making, community service, and social entrepreneurship.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <Users className="mr-2 h-4 w-4" />
                        <span>500+ graduates leading community initiatives</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Calendar className="mr-2 h-4 w-4" />
                        <span>6-month intensive program</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>

<motion.div variants={fadeIn}>
                  <Card>
                    <CardHeader>
                      <CardTitle>Mentor Connect</CardTitle>
                      <CardDescription>Connecting youth with industry leaders</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <p className="mb-4">
                        A mentorship platform connecting young Bangladeshis with experienced professionals and leaders
                        across various industries for guidance and career development.
                      </p>
                      <div className="flex items-center text-sm text-muted-foreground mb-2">
                        <Users className="mr-2 h-4 w-4" />
                        <span>2,000+ active mentorship relationships</span>
                      </div>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Globe className="mr-2 h-4 w-4" />
                        <span>Mentors from 15+ countries</span>
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full">
                        Learn More
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>
              </motion.div>
            </TabsContent>
          </Tabs>
        </section>

{/* Impact & Testimonials */}
        <section className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 py-16">
          <div className="container mx-auto px-4">
            <motion.div
              className="max-w-3xl mx-auto text-center mb-12"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={fadeIn}
            >
              <h2 className="text-3xl font-bold mb-4">Our Impact</h2>
              <p className="text-lg text-muted-foreground">
                Since our founding, Yunus Inspire has created meaningful change across Bangladesh.
              </p>
            </motion.div>

<motion.div
              className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={staggerContainer}
            >
              <motion.div variants={fadeIn} className="text-center">
                <div className="text-4xl font-bold text-blue-600 mb-2">50,000+</div>
                <div className="text-sm text-muted-foreground">Students Reached</div>
              </motion.div>

<motion.div variants={fadeIn} className="text-center">
                <div className="text-4xl font-bold text-indigo-600 mb-2">25</div>
                <div className="text-sm text-muted-foreground">Districts Served</div>
              </motion.div>

<motion.div variants={fadeIn} className="text-center">
                <div className="text-4xl font-bold text-purple-600 mb-2">120+</div>
                <div className="text-sm text-muted-foreground">Partner Organizations</div>
              </motion.div>

<motion.div variants={fadeIn} className="text-center">
                <div className="text-4xl font-bold text-green-600 mb-2">85%</div>
                <div className="text-sm text-muted-foreground">Program Completion Rate</div>
              </motion.div>
            </motion.div>

<motion.div
              className="max-w-3xl mx-auto"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={fadeIn}
            >
              <Card>
                <CardHeader>
                  <CardTitle className="text-center">Testimonials</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div className="p-4 border rounded-lg bg-background">
                      <p className="italic mb-4">
                        "Yunus Inspire's coding bootcamp completely changed my life. I went from having no technical
                        skills to becoming a full-stack developer at a leading tech company in Dhaka. The mentorship and
                        support I received were invaluable."
                      </p>
                      <div className="flex items-center">
                        <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-3">
                          RA
                        </div>
                        <div>
                          <div className="font-medium">Rahima Akter</div>
                          <div className="text-sm text-muted-foreground">Code Bangladesh Graduate, 2022</div>
                        </div>
                      </div>
                    </div>

<div className="p-4 border rounded-lg bg-background">
                      <p className="italic mb-4">
                        "As a teacher from a rural school, the Teacher Empowerment Program gave me the tools and
                        confidence to transform my classroom. My students are more engaged than ever, and I've seen
                        remarkable improvements in their learning outcomes."
                      </p>
                      <div className="flex items-center">
                        <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-3">
                          MH
                        </div>
                        <div>
                          <div className="font-medium">Mohammad Hossain</div>
                          <div className="text-sm text-muted-foreground">Teacher, Rangpur District</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </section>

{/* Get Involved */}
        <section className="container mx-auto px-4 py-16">
          <motion.div
            className="max-w-3xl mx-auto text-center mb-12"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={fadeIn}
          >
            <h2 className="text-3xl font-bold mb-4">Get Involved</h2>
            <p className="text-lg text-muted-foreground">
              Join us in our mission to empower Bangladeshi youth through education, technology, and ethical leadership.
            </p>
          </motion.div>

<motion.div
            className="grid md:grid-cols-3 gap-8"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={staggerContainer}
          >
            <motion.div variants={fadeIn}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Users className="mr-2 h-5 w-5 text-blue-600" />
                    Volunteer
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4">
                    Share your skills and expertise by volunteering as a teacher, mentor, or program facilitator.
                  </p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Teaching and training opportunities</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Mentorship programs</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Event organization and support</span>
                    </li>
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Become a Volunteer</Button>
                </CardFooter>
              </Card>
            </motion.div>

<motion.div variants={fadeIn}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Heart className="mr-2 h-5 w-5 text-red-600" />
                    Donate
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4">
                    Support our programs financially to help us reach more communities and expand our impact.
                  </p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>One-time or recurring donations</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Sponsor a student or program</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Corporate giving opportunities</span>
                    </li>
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Make a Donation</Button>
                </CardFooter>
              </Card>
            </motion.div>

<motion.div variants={fadeIn}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Globe className="mr-2 h-5 w-5 text-green-600" />
                    Partner
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4">
                    Collaborate with us as an organization to create greater impact through shared resources and
                    expertise.
                  </p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>NGO and nonprofit partnerships</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Corporate social responsibility initiatives</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="mr-2 h-4 w-4 text-green-600 mt-1 flex-shrink-0" />
                      <span>Academic and research collaborations</span>
                    </li>
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className="w-full">Become a Partner</Button>
                </CardFooter>
              </Card>
            </motion.div>
          </motion.div>
        </section>

{/* Open Source Section */}
        <section className="bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 py-16">
          <div className="container mx-auto px-4">
            <motion.div
              className="max-w-3xl mx-auto text-center mb-12"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={fadeIn}
            >
              <Badge className="mb-4">Open Source</Badge>
              <h2 className="text-3xl font-bold mb-4">Join Our Open Source Community</h2>
              <p className="text-lg text-muted-foreground">
                Yunus Inspire believes in the power of open collaboration. Our educational resources, curriculum
                materials, and technology solutions are open source and freely available.
              </p>
            </motion.div>

<motion.div
              className="grid md:grid-cols-2 gap-8"
              initial="hidden"
              animate={isLoaded ? "visible" : "hidden"}
              variants={staggerContainer}
            >
              <motion.div variants={fadeIn}>
                <Card className="h-full">
                  <CardHeader>
                    <CardTitle>Educational Resources</CardTitle>
                    <CardDescription>Free and open curriculum materials</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="mb-4">
                      Access our complete library of educational resources, including lesson plans, teaching materials,
                      and assessment tools for various subjects and grade levels.
                    </p>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <Badge variant="outline">Lesson Plans</Badge>
                      <Badge variant="outline">Teaching Materials</Badge>
                      <Badge variant="outline">Assessment Tools</Badge>
                      <Badge variant="outline">Interactive Activities</Badge>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full flex items-center">
                      Access Resources
                      <ExternalLink className="ml-2 h-4 w-4" />
                    </Button>
                  </CardFooter>
                </Card>
              </motion.div>

<motion.div variants={fadeIn}>
                <Card className="h-full">
                  <CardHeader>
                    <CardTitle>Technology Solutions</CardTitle>
                    <CardDescription>Open source software for education</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="mb-4">
                      Contribute to our open source technology projects designed to address educational challenges in
                      Bangladesh and similar contexts around the world.
                    </p>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <Badge variant="outline">Learning Management Systems</Badge>
                      <Badge variant="outline">Educational Apps</Badge>
                      <Badge variant="outline">Data Collection Tools</Badge>
                      <Badge variant="outline">Accessibility Solutions</Badge>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full flex items-center">
                      View GitHub Repository
                      <ExternalLink className="ml-2 h-4 w-4" />
                    </Button>
                  </CardFooter>
                </Card>
              </motion.div>
            </motion.div>
          </div>
        </section>

{/* Contact Section */}
        <section className="container mx-auto px-4 py-16">
          <motion.div
            className="max-w-3xl mx-auto text-center mb-12"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={fadeIn}
          >
            <h2 className="text-3xl font-bold mb-4">Contact Us</h2>
            <p className="text-lg text-muted-foreground">
              Have questions or want to learn more about Yunus Inspire? We'd love to hear from you.
            </p>
          </motion.div>

<motion.div
            className="max-w-xl mx-auto"
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
            variants={fadeIn}
          >
            <Card>
              <CardContent className="pt-6">
                <div className="space-y-4">
                  <div className="flex items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                      </svg>
                    </div>
                    <div>
                      <div className="text-sm text-muted-foreground">Phone</div>
                      <div className="font-medium">+880 1336-221217</div>
                    </div>
                  </div>

<div className="flex items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                      </svg>
                    </div>
                    <div>
                      <div className="text-sm text-muted-foreground">Email</div>
                      <div className="font-medium">info@yunusinspire.org</div>
                    </div>
                  </div>

<div className="flex items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                      </svg>
                    </div>
                    <div>
                      <div className="text-sm text-muted-foreground">Address</div>
                      <div className="font-medium">123 Innovation Street, Dhaka, Bangladesh</div>
                    </div>
                  </div>
                </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/trusted-ally/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { ThemeToggle } from "@/components/theme-toggle"
import { Footer } from "@/components/footer"
import {
  Users,
  BookOpen,
  Briefcase,
  Heart,
  GraduationCap,
  Leaf,
  Globe,
  Building,
  BarChart3,
  CheckCircle2,
  MapPin,
  Share2,
  HandHeart,
  Handshake,
  type LucideIcon,
  ChevronRight,
  Smartphone,
  Clock,
  Github,
} from "lucide-react"

interface StatCardProps {
  icon: LucideIcon
  value: string
  label: string
  color: string
}

const StatCard = ({ icon: Icon, value, label, color }: StatCardProps) => (
  <Card className="border-none shadow-md">
    <CardContent className="p-6 flex flex-col items-center text-center">
      <div className={`w-12 h-12 rounded-full ${color} flex items-center justify-center mb-4`}>
        <Icon className="h-6 w-6 text-white" />
      </div>
      <h3 className="text-3xl font-bold mb-1">{value}</h3>
      <p className="text-muted-foreground text-sm">{label}</p>
    </CardContent>
  </Card>
)

interface ProgramCardProps {
  title: string
  description: string
  icon: LucideIcon
  color: string
}

const ProgramCard = ({ title, description, icon: Icon, color }: ProgramCardProps) => (
  <Card className="border-none shadow-md h-full">
    <CardHeader className={`${color} text-white rounded-t-lg`}>
      <div className="flex items-center gap-2">
        <Icon className="h-5 w-5" />
        <CardTitle className="text-lg font-medium">{title}</CardTitle>
      </div>
    </CardHeader>
    <CardContent className="p-6">
      <p className="text-muted-foreground">{description}</p>
    </CardContent>
  </Card>
)

interface TestimonialProps {
  quote: string
  name: string
  role: string
  avatar: string
}

const Testimonial = ({ quote, name, role, avatar }: TestimonialProps) => (
  <Card className="h-full border-none shadow-md bg-muted/30">
    <CardContent className="p-6 flex flex-col h-full">
      <div className="flex-1">
        <p className="italic text-muted-foreground mb-4">"{quote}"</p>
      </div>
      <div className="flex items-center gap-3 mt-4">
        <Image
          src={avatar || "/placeholder.svg"}
          alt={name}
          width={48}
          height={48}
          className="rounded-full object-cover"
        />
        <div>
          <p className="font-semibold">{name}</p>
          <p className="text-sm text-muted-foreground">{role}</p>
        </div>
      </div>
    </CardContent>
  </Card>
)

export default function TrustedAllyPage() {
  const [scrollY, setScrollY] = useState(0)
  const [isMounted, setIsMounted] = useState(false)

useEffect(() => {
    setIsMounted(true)
    const handleScroll = () => {
      setScrollY(window.scrollY)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

if (!isMounted) {
    return null
  }

return (
    <div className="min-h-screen bg-background">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          <Link href="/" className="flex items-center gap-2">
            <Image src="/coxs-bazar-sunset.png" alt="Trusted Ally Logo" width={40} height={40} className="rounded-md" />
            <span className="font-bold text-xl">Trusted Ally</span>
          </Link>
          <div className="flex items-center gap-4">
            <div className="hidden md:flex gap-6">
              <Link href="#about" className="text-sm font-medium hover:text-primary transition-colors">
                About
              </Link>
              <Link href="#programs" className="text-sm font-medium hover:text-primary transition-colors">
                Programs
              </Link>
              <Link href="#impact" className="text-sm font-medium hover:text-primary transition-colors">
                Impact
              </Link>
              <Link href="#get-involved" className="text-sm font-medium hover:text-primary transition-colors">
                Get Involved
              </Link>
            </div>
            <ThemeToggle />
            <Button asChild size="sm">
              <Link href="#donate">Support Us</Link>
            </Button>
          </div>
        </div>
      </nav>

{/* Hero Section */}
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center z-0"
          style={{ backgroundImage: "url('/coxs-bazar-sunset.png')" }}
        />
        <div className="absolute inset-0 bg-black/60 z-10" />
        <div className="container mx-auto px-4 py-24 md:py-32 relative z-20 text-white">
          <div className="max-w-3xl mx-auto text-center">
            <Badge className="bg-primary text-white mb-4">Community Development Platform</Badge>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
              Creating bridges between resources and communities
            </h1>
            <p className="text-lg md:text-xl text-gray-200 mb-8">
              Trusted Ally is dedicated to empowering communities through education and sustainable development, with a
              focus on building long-term solutions and partnerships.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" asChild>
                <Link href="#get-involved">Get Involved</Link>
              </Button>
              <Button size="lg" variant="outline" className="text-white border-white hover:bg-white/10" asChild>
                <Link href="#about">Learn More</Link>
              </Button>
            </div>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent z-20" />
      </section>

{/* About Section */}
      <section id="about" className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <Badge className="mb-3" variant="outline">
              ABOUT US
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Who We Are</h2>
            <p className="text-muted-foreground">
              Trusted Ally was established to create sustainable bridges between resources and communities in need. We
              focus on education, infrastructure, and long-term development solutions.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-10 items-center mb-16">
            <div>
              <h3 className="text-2xl font-bold mb-4">Our Mission</h3>
              <p className="text-muted-foreground mb-6">
                To create meaningful connections between resources and communities, focusing on education and long-term
                development that empowers people to build better futures for themselves.
              </p>
              <h3 className="text-2xl font-bold mb-4">Our Vision</h3>
              <p className="text-muted-foreground mb-6">
                A world where all communities have equal access to resources, education, and opportunities for
                sustainable growth and self-determination.
              </p>
              <div className="flex items-center gap-2">
                <Badge variant="secondary">Community-Driven</Badge>
                <Badge variant="secondary">Sustainable</Badge>
                <Badge variant="secondary">Transparent</Badge>
                <Badge variant="secondary">Educational</Badge>
              </div>
            </div>
            <Image
              src="/education-support-hero.png"
              alt="Community Education Initiative"
              width={600}
              height={400}
              className="rounded-lg shadow-lg object-cover w-full"
            />
          </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card className="text-center border-none shadow-md">
              <CardHeader className="pb-2">
                <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto">
                  <BuildingCommunity className="h-6 w-6 text-blue-600 dark:text-blue-300" />
                </div>
              </CardHeader>
              <CardContent>
                <h3 className="font-bold text-lg mb-2">Community Focus</h3>
                <p className="text-muted-foreground">
                  We work directly with communities to identify their unique needs and aspirations.
                </p>
              </CardContent>
            </Card>

<Card className="text-center border-none shadow-md">
              <CardHeader className="pb-2">
                <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto">
                  <Leaf className="h-6 w-6 text-green-600 dark:text-green-300" />
                </div>
              </CardHeader>
              <CardContent>
                <h3 className="font-bold text-lg mb-2">Sustainability</h3>
                <p className="text-muted-foreground">
                  Our solutions are designed to be environmentally and economically sustainable.
                </p>
              </CardContent>
            </Card>

<Card className="text-center border-none shadow-md">
              <CardHeader className="pb-2">
                <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mx-auto">
                  <GraduationCap className="h-6 w-6 text-purple-600 dark:text-purple-300" />
                </div>
              </CardHeader>
              <CardContent>
                <h3 className="font-bold text-lg mb-2">Education First</h3>
                <p className="text-muted-foreground">
                  We believe education is the foundation for long-term community development.
                </p>
              </CardContent>
            </Card>

<Card className="text-center border-none shadow-md">
              <CardHeader className="pb-2">
                <div className="w-12 h-12 bg-amber-100 dark:bg-amber-900 rounded-full flex items-center justify-center mx-auto">
                  <Handshake className="h-6 w-6 text-amber-600 dark:text-amber-300" />
                </div>
              </CardHeader>
              <CardContent>
                <h3 className="font-bold text-lg mb-2">Strong Partnerships</h3>
                <p className="text-muted-foreground">
                  We collaborate with local and international partners to maximize impact.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Programs Section */}
      <section id="programs" className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <Badge className="mb-3" variant="outline">
              OUR PROGRAMS
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">How We Create Impact</h2>
            <p className="text-muted-foreground">
              Our comprehensive programs are designed to address the core needs of communities while building lasting
              capacity for self-sufficiency.
            </p>
          </div>

<Tabs defaultValue="education" className="mb-12">
            <TabsList className="flex justify-center mb-8 w-full max-w-2xl mx-auto">
              <TabsTrigger value="education" className="flex-1">
                <BookOpen className="h-4 w-4 mr-2" />
                Education
              </TabsTrigger>
              <TabsTrigger value="infrastructure" className="flex-1">
                <Building className="h-4 w-4 mr-2" />
                Infrastructure
              </TabsTrigger>
              <TabsTrigger value="economic" className="flex-1">
                <Briefcase className="h-4 w-4 mr-2" />
                Economic
              </TabsTrigger>
              <TabsTrigger value="health" className="flex-1">
                <Heart className="h-4 w-4 mr-2" />
                Health
              </TabsTrigger>
            </TabsList>

<TabsContent value="education">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <div>
                  <h3 className="text-2xl font-bold mb-4">Educational Initiatives</h3>
                  <p className="text-muted-foreground mb-6">
                    Our educational programs focus on improving access to quality education for all community members,
                    from early childhood through adult literacy and vocational training.
                  </p>
                  <ul className="space-y-3">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>School infrastructure improvement and learning resources</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Teacher training and professional development</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Digital literacy programs and computer labs</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Scholarship programs for underprivileged students</span>
                    </li>
                  </ul>
                  <Button className="mt-6" asChild>
                    <Link href="#">
                      Learn More
                      <ChevronRight className="ml-1 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
                <Image
                  src="/programming-course.png"
                  alt="Educational Initiative"
                  width={500}
                  height={350}
                  className="rounded-lg shadow-lg object-cover w-full"
                />
              </div>
            </TabsContent>

<TabsContent value="infrastructure">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <Image
                  src="/digital-network-data-visualization.png"
                  alt="Infrastructure Development"
                  width={500}
                  height={350}
                  className="rounded-lg shadow-lg object-cover w-full order-2 md:order-1"
                />
                <div className="order-1 md:order-2">
                  <h3 className="text-2xl font-bold mb-4">Infrastructure Development</h3>
                  <p className="text-muted-foreground mb-6">
                    We help communities build and maintain the physical infrastructure needed for development, focusing
                    on projects that create lasting impact.
                  </p>
                  <ul className="space-y-3">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Clean water access and sanitation systems</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Renewable energy solutions for remote communities</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Road and bridge construction for improved access</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Community centers and public spaces development</span>
                    </li>
                  </ul>
                  <Button className="mt-6" asChild>
                    <Link href="#">
                      Learn More
                      <ChevronRight className="ml-1 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            </TabsContent>

<TabsContent value="economic">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <div>
                  <h3 className="text-2xl font-bold mb-4">Economic Empowerment</h3>
                  <p className="text-muted-foreground mb-6">
                    Our economic programs focus on creating sustainable livelihoods and financial independence for
                    community members through skills training and entrepreneurship support.
                  </p>
                  <ul className="space-y-3">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Microfinance and small business loans</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Vocational training and skills development</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Women's economic empowerment initiatives</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Market access and supply chain support</span>
                    </li>
                  </ul>
                  <Button className="mt-6" asChild>
                    <Link href="#">
                      Learn More
                      <ChevronRight className="ml-1 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
                <Image
                  src="/web-development-concept.png"
                  alt="Economic Empowerment"
                  width={500}
                  height={350}
                  className="rounded-lg shadow-lg object-cover w-full"
                />
              </div>
            </TabsContent>

<TabsContent value="health">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <Image
                  src="/wellness-motivation-abstract.png"
                  alt="Community Health Initiative"
                  width={500}
                  height={350}
                  className="rounded-lg shadow-lg object-cover w-full order-2 md:order-1"
                />
                <div className="order-1 md:order-2">
                  <h3 className="text-2xl font-bold mb-4">Health & Wellness</h3>
                  <p className="text-muted-foreground mb-6">
                    Our health programs address both immediate needs and long-term health infrastructure, focusing on
                    prevention and sustainable healthcare solutions.
                  </p>
                  <ul className="space-y-3">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Mobile health clinics for remote communities</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Maternal and child health education</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Clean water and sanitation for disease prevention</span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <span>Mental health awareness and support services</span>
                    </li>
                  </ul>
                  <Button className="mt-6" asChild>
                    <Link href="#">
                      Learn More
                      <ChevronRight className="ml-1 h-4 w-4" />
                    </Link>
                  </Button>
                </div>
              </div>
            </TabsContent>
          </Tabs>

{/* Impact Section */}
      <section id="impact" className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <Badge className="mb-3" variant="outline">
              OUR IMPACT
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Creating Lasting Change</h2>
            <p className="text-muted-foreground">
              Our work has created meaningful impact across communities, changing lives and building sustainable
              futures.
            </p>
          </div>

<div className="mb-12">
            <Card className="border-none shadow-md overflow-hidden">
              <CardContent className="p-0">
                <div className="grid md:grid-cols-2">
                  <div className="bg-primary text-primary-foreground p-8">
                    <h3 className="text-2xl font-bold mb-4">Our Progress</h3>
                    <p className="mb-6">
                      We continuously measure our impact and strive to improve our effectiveness in creating sustainable
                      change.
                    </p>
                    <div className="space-y-6">
                      <div>
                        <div className="flex justify-between text-sm mb-2">
                          <span>Educational Access</span>
                          <span>85%</span>
                        </div>
                        <Progress value={85} className="h-2 bg-white/20" />
                      </div>
                      <div>
                        <div className="flex justify-between text-sm mb-2">
                          <span>Clean Water Projects</span>
                          <span>78%</span>
                        </div>
                        <Progress value={78} className="h-2 bg-white/20" />
                      </div>
                      <div>
                        <div className="flex justify-between text-sm mb-2">
                          <span>Economic Development</span>
                          <span>62%</span>
                        </div>
                        <Progress value={62} className="h-2 bg-white/20" />
                      </div>
                      <div>
                        <div className="flex justify-between text-sm mb-2">
                          <span>Healthcare Initiatives</span>
                          <span>70%</span>
                        </div>
                        <Progress value={70} className="h-2 bg-white/20" />
                      </div>
                    </div>
                  </div>
                  <div className="p-8">
                    <h3 className="text-2xl font-bold mb-4">Sustainable Development Goals</h3>
                    <p className="text-muted-foreground mb-6">
                      Our work aligns with the UN Sustainable Development Goals to create a better and more sustainable
                      future for all.
                    </p>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="flex items-center gap-2">
                        <Badge className="bg-blue-600 text-white">SDG 4</Badge>
                        <span>Quality Education</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className="bg-red-600 text-white">SDG 3</Badge>
                        <span>Good Health</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className="bg-green-600 text-white">SDG 6</Badge>
                        <span>Clean Water</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className="bg-amber-600 text-white">SDG 8</Badge>
                        <span>Economic Growth</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className="bg-purple-600 text-white">SDG 5</Badge>
                        <span>Gender Equality</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge className="bg-teal-600 text-white">SDG 11</Badge>
                        <span>Sustainable Communities</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="max-w-3xl mx-auto text-center mb-8">
            <h3 className="text-2xl font-bold mb-4">Testimonials</h3>
            <p className="text-muted-foreground">
              Hear from the communities and partners we've worked with about the impact of our programs.
            </p>
          </div>

{/* Get Involved Section */}
      <section id="get-involved" className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <Badge className="mb-3" variant="outline">
              GET INVOLVED
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Join Our Mission</h2>
            <p className="text-muted-foreground">
              There are many ways you can contribute to our work and help create lasting change in communities.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 mb-16">
            <Card className="border-none shadow-md">
              <CardHeader className="bg-blue-600 text-white rounded-t-lg">
                <CardTitle className="flex items-center gap-2">
                  <HandHeart className="h-5 w-5" />
                  Volunteer
                </CardTitle>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-muted-foreground mb-6">
                  Share your skills and time to make a direct impact. We need volunteers for both field work and remote
                  support.
                </p>
                <ul className="space-y-2 mb-4">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Teaching and educational support</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Professional skills (medical, technical, etc.)</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Administrative and organizational help</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button className="w-full" asChild>
                  <Link href="#">Become a Volunteer</Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="border-none shadow-md">
              <CardHeader className="bg-purple-600 text-white rounded-t-lg">
                <CardTitle className="flex items-center gap-2">
                  <Heart className="h-5 w-5" />
                  Donate
                </CardTitle>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-muted-foreground mb-6">
                  Your financial support helps us implement programs and create sustainable change in communities.
                </p>
                <ul className="space-y-2 mb-4">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>One-time or recurring donations</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Sponsor specific projects or initiatives</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>100% of donations go directly to programs</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter id="donate">
                <Button className="w-full" variant="default" asChild>
                  <Link href="#">Make a Donation</Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="border-none shadow-md">
              <CardHeader className="bg-green-600 text-white rounded-t-lg">
                <CardTitle className="flex items-center gap-2">
                  <Handshake className="h-5 w-5" />
                  Partner
                </CardTitle>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-muted-foreground mb-6">
                  Organizations can partner with us to amplify impact through funding, in-kind support, or collaborative
                  projects.
                </p>
                <ul className="space-y-2 mb-4">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Corporate social responsibility initiatives</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>NGO and foundation partnerships</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-500 mt-1 flex-shrink-0" />
                    <span>Research and development collaborations</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button className="w-full" asChild>
                  <Link href="#">Become a Partner</Link>
                </Button>
              </CardFooter>
            </Card>
          </div>

<div className="bg-primary text-primary-foreground rounded-lg overflow-hidden shadow-lg">
            <div className="p-8">
              <div className="max-w-3xl mx-auto text-center">
                <h3 className="text-2xl font-bold mb-4">Subscribe to Our Newsletter</h3>
                <p className="mb-6">Stay updated on our projects, impact stories, and opportunities to get involved.</p>
                <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
                  <input
                    type="email"
                    placeholder="Your email address"
                    className="px-4 py-2 rounded-md text-foreground w-full"
                  />
                  <Button variant="secondary">Subscribe</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Open Source Section */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <Badge className="mb-3" variant="outline">
              OPEN SOURCE
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Open Source Resources</h2>
            <p className="text-muted-foreground">
              As part of our commitment to transparency and knowledge sharing, we provide open source resources for
              community development.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8 mb-12">
            <Card className="border-none shadow-md h-full">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Github className="h-5 w-5" />
                  Open Source Projects
                </CardTitle>
                <CardDescription>
                  Access our publicly available development tools, educational materials, and project frameworks.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <Code className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Community Development Toolkit</h4>
                      <p className="text-sm text-muted-foreground">
                        Framework and resources for community-based development projects.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <BookOpen className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Educational Resources</h4>
                      <p className="text-sm text-muted-foreground">
                        Curriculum, learning materials, and teaching guides for various subjects.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <BarChart3 className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Impact Measurement Tools</h4>
                      <p className="text-sm text-muted-foreground">
                        Methods and templates for tracking and evaluating development impact.
                      </p>
                    </div>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="https://github.com">
                    <Github className="mr-2 h-4 w-4" />
                    Visit GitHub Repository
                  </Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="border-none shadow-md h-full">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Globe className="h-5 w-5" />
                  Knowledge Base
                </CardTitle>
                <CardDescription>
                  Explore our collection of research, case studies, and best practices in community development.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <FileText className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Case Studies & Reports</h4>
                      <p className="text-sm text-muted-foreground">
                        Detailed analyses of our projects with lessons learned and best practices.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <Video className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Training Videos</h4>
                      <p className="text-sm text-muted-foreground">
                        Educational videos on various aspects of community development and project management.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="bg-primary/10 p-2 rounded-md">
                      <LightbulbIconNew className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">Research Papers</h4>
                      <p className="text-sm text-muted-foreground">
                        Academic and practical research on sustainable development approaches.
                      </p>
                    </div>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="#">
                    <BookOpen className="mr-2 h-4 w-4" />
                    Access Knowledge Base
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          </div>

<div className="text-center">
            <h3 className="text-xl font-bold mb-4">Contribute to Our Open Source Community</h3>
            <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
              We welcome contributions from developers, educators, researchers, and anyone passionate about community
              development.
            </p>
            <Button asChild>
              <Link href="#">
                <Share2 className="mr-2 h-4 w-4" />
                Join Our Community
              </Link>
            </Button>
          </div>
        </div>
      </section>

{/* Contact Section */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="grid md:grid-cols-2 gap-8">
              <div>
                <Badge className="mb-3" variant="outline">
                  CONTACT US
                </Badge>
                <h2 className="text-3xl font-bold mb-4">Get in Touch</h2>
                <p className="text-muted-foreground mb-6">
                  Have questions or want to learn more about our work? We'd love to hear from you.
                </p>
                <div className="space-y-4 mb-8">
                  <div className="flex items-start gap-3">
                    <MapPin className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <h4 className="font-medium">Main Office</h4>
                      <p className="text-muted-foreground">Cox's Bazar, Bangladesh</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Mail className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <h4 className="font-medium">Email</h4>
                      <p className="text-muted-foreground">contact@trustedally.org</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Smartphone className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <h4 className="font-medium">Phone</h4>
                      <p className="text-muted-foreground">+880 1336-221217</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <Clock className="h-5 w-5 text-primary mt-0.5" />
                    <div>
                      <h4 className="font-medium">Working Hours</h4>
                      <p className="text-muted-foreground">Sunday - Thursday: 9:00 AM - 5:00 PM</p>
                    </div>
                  </div>
                </div>
                <div className="flex gap-3">
                  <Button size="icon" variant="outline" asChild>
                    <Link href="#">
                      <Facebook className="h-4 w-4" />
                      <span className="sr-only">Facebook</span>
                    </Link>
                  </Button>
                  <Button size="icon" variant="outline" asChild>
                    <Link href="#">
                      <Twitter className="h-4 w-4" />
                      <span className="sr-only">Twitter</span>
                    </Link>
                  </Button>
                  <Button size="icon" variant="outline" asChild>
                    <Link href="#">
                      <Instagram className="h-4 w-4" />
                      <span className="sr-only">Instagram</span>
                    </Link>
                  </Button>
                  <Button size="icon" variant="outline" asChild>
                    <Link href="#">
                      <Linkedin className="h-4 w-4" />
                      <span className="sr-only">LinkedIn</span>
                    </Link>
                  </Button>
                </div>
              </div>
              <div>
                <Card className="border-none shadow-md">
                  <CardHeader>
                    <CardTitle>Send Us a Message</CardTitle>
                    <CardDescription>
                      Fill out the form below and we'll get back to you as soon as possible.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <form className="space-y-4">
                      <div className="grid sm:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <label htmlFor="name" className="text-sm font-medium">
                            Name
                          </label>
                          <input
                            id="name"
                            type="text"
                            className="w-full px-3 py-2 border rounded-md"
                            placeholder="Your name"
                          />
                        </div>
                        <div className="space-y-2">
                          <label htmlFor="email" className="text-sm font-medium">
                            Email
                          </label>
                          <input
                            id="email"
                            type="email"
                            className="w-full px-3 py-2 border rounded-md"
                            placeholder="Your email"
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="subject" className="text-sm font-medium">
                          Subject
                        </label>
                        <input
                          id="subject"
                          type="text"
                          className="w-full px-3 py-2 border rounded-md"
                          placeholder="What is this regarding?"
                        />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="message" className="text-sm font-medium">
                          Message
                        </label>
                        <textarea
                          id="message"
                          className="w-full px-3 py-2 border rounded-md min-h-[120px]"
                          placeholder="Your message"
                        />
                      </div>
                      <Button className="w-full" type="submit">
                        Send Message
                      </Button>
                    </form>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <Footer />
    </div>
  )
}

// Component for Icons
function BuildingCommunity(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M3 9v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9" />
      <path d="M21 5H3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z" />
      <path d="M12 19v-4" />
      <path d="M8 19v-9" />
      <path d="M16 19v-9" />
    </svg>
  )
}

function Code(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="16 18 22 12 16 6" />
      <polyline points="8 6 2 12 8 18" />
    </svg>
  )
}

function FileText(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
      <polyline points="14 2 14 8 20 8" />
      <line x1="16" x2="8" y1="13" y2="13" />
      <line x1="16" x2="8" y1="17" y2="17" />
      <line x1="10" x2="8" y1="9" y2="9" />
    </svg>
  )
}

function Video(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m22 8-6 4 6 4V8Z" />
      <rect width="14" height="12" x="2" y="6" rx="2" ry="2" />
    </svg>
  )
}

function LightbulbIconNew(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
      <path d="M9 18h6" />
      <path d="M10 22h4" />
    </svg>
  )
}

function Mail(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="20" height="16" x="2" y="4" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
  )
}

function Facebook(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>
  )
}

function Twitter(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
    </svg>
  )
}

function Instagram(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
    </svg>
  )
}

function Linkedin(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect width="4" height="12" x="2" y="9" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="app/mental-strength/page.tsx"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Footer } from "@/components/footer"
import {
  Heart,
  Video,
  Music,
  Quote,
  BookOpen,
  Lightbulb,
  ArrowRight,
  Play,
  Pause,
  SkipBack,
  SkipForward,
  Volume2,
  Share2,
  Bookmark,
  MessageCircle,
} from "lucide-react"

export default function MentalStrengthPage() {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentAudio, setCurrentAudio] = useState<string | null>(null)

const togglePlay = (audioId: string) => {
    if (currentAudio === audioId && isPlaying) {
      setIsPlaying(false)
      setCurrentAudio(null)
    } else {
      setIsPlaying(true)
      setCurrentAudio(audioId)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
      {/* Hero Section */}
      <section className="relative h-[70vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="/serene-mountain-sunrise.png"
            alt="Inspirational Landscape"
            fill
            className="object-cover brightness-[0.7]"
            priority
          />
        </div>
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
          <Badge className="mb-4 bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm">Journey to Strength</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
            Finding Strength in Your Darkest Moments
          </h1>
          <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
            When life feels overwhelming, remember that your struggles are developing your strengths. This is not the
            end of your journey, but a powerful turning point.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <Button size="lg" className="bg-white text-slate-900 hover:bg-white/90">
              Begin Your Journey
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/20">
              Learn More
            </Button>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-50 to-transparent dark:from-slate-950"></div>
      </section>

{/* Introduction */}
      <section className="py-16 px-4 max-w-4xl mx-auto text-center">
        <div className="inline-block mb-6">
          <Heart className="h-12 w-12 text-rose-500 mx-auto mb-2" />
          <Separator className="w-24 mx-auto bg-rose-200 dark:bg-rose-800" />
        </div>
        <h2 className="text-3xl md:text-4xl font-bold mb-6">A Safe Haven for Your Mind and Heart</h2>
        <p className="text-lg text-slate-700 dark:text-slate-300 mb-8 leading-relaxed">
          We all face moments when our mental strength wavers, when disappointment clouds our vision, or when life's
          accidents leave us feeling broken. This space is created for those moments—a sanctuary where you can find the
          courage to continue, the strength to persevere, and the motivation to transform your struggles into growth.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
          <Card className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border-rose-100 dark:border-rose-900 hover:shadow-md transition-all">
            <CardHeader className="text-center pb-2">
              <Video className="h-8 w-8 text-rose-500 mx-auto mb-2" />
              <CardTitle>Visual Inspiration</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-slate-600 dark:text-slate-300">
                Powerful videos that inspire resilience and courage through visual storytelling.
              </p>
            </CardContent>
          </Card>
          <Card className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border-rose-100 dark:border-rose-900 hover:shadow-md transition-all">
            <CardHeader className="text-center pb-2">
              <Music className="h-8 w-8 text-rose-500 mx-auto mb-2" />
              <CardTitle>Audio Healing</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-slate-600 dark:text-slate-300">
                Soothing sounds, guided meditations, and motivational talks to calm your mind.
              </p>
            </CardContent>
          </Card>
          <Card className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm border-rose-100 dark:border-rose-900 hover:shadow-md transition-all">
            <CardHeader className="text-center pb-2">
              <Quote className="h-8 w-8 text-rose-500 mx-auto mb-2" />
              <CardTitle>Words of Wisdom</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-slate-600 dark:text-slate-300">
                Quotes, stories, and wisdom that provide perspective and ignite your inner strength.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Main Content Tabs */}
      <section className="py-16 px-4 max-w-6xl mx-auto">
        <Tabs defaultValue="videos" className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-12">
            <TabsTrigger value="videos" className="text-base py-3">
              <Video className="h-4 w-4 mr-2" />
              Videos
            </TabsTrigger>
            <TabsTrigger value="audio" className="text-base py-3">
              <Music className="h-4 w-4 mr-2" />
              Audio
            </TabsTrigger>
            <TabsTrigger value="wisdom" className="text-base py-3">
              <Quote className="h-4 w-4 mr-2" />
              Wisdom
            </TabsTrigger>
          </TabsList>

{/* Videos Tab */}
          <TabsContent value="videos" className="space-y-8">
            <div className="text-center mb-12">
              <h3 className="text-2xl font-bold mb-4">Visual Journeys to Strength</h3>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                These videos offer powerful visual narratives that inspire resilience, courage, and hope. Embed codes
                will be added later, but you can explore the descriptions below.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {/* Video Placeholder 1 */}
              <Card className="overflow-hidden">
                <div className="relative h-64 bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
                  <Image src="/mountain-climber-sunrise.png" alt="Overcoming Challenges" fill className="object-cover" />
                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                    <Button
                      size="icon"
                      className="h-16 w-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm"
                    >
                      <Play className="h-8 w-8 text-white" />
                    </Button>
                  </div>
                </div>
                <CardHeader>
                  <CardTitle>Overcoming Impossible Challenges</CardTitle>
                  <CardDescription>
                    Stories of people who transformed their greatest obstacles into stepping stones
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-slate-600 dark:text-slate-400">
                    This video showcases remarkable stories of individuals who faced seemingly insurmountable challenges
                    and not only overcame them but used them as catalysts for extraordinary growth.
                  </p>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Badge variant="outline">Inspiration</Badge>
                  <div className="flex gap-2">
                    <Button size="icon" variant="ghost">
                      <Share2 className="h-4 w-4" />
                    </Button>
                    <Button size="icon" variant="ghost">
                      <Bookmark className="h-4 w-4" />
                    </Button>
                  </div>
                </CardFooter>
              </Card>

{/* Video Placeholder 2 */}
              <Card className="overflow-hidden">
                <div className="relative h-64 bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
                  <Image src="/phoenix-rebirth.png" alt="Rising From Failure" fill className="object-cover" />
                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                    <Button
                      size="icon"
                      className="h-16 w-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm"
                    >
                      <Play className="h-8 w-8 text-white" />
                    </Button>
                  </div>
                </div>
                <CardHeader>
                  <CardTitle>Rising From the Ashes of Failure</CardTitle>
                  <CardDescription>How setbacks become the foundation for your greatest comeback</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-slate-600 dark:text-slate-400">
                    This powerful video explores how our most painful failures often contain the seeds of our most
                    meaningful successes, featuring stories of famous failures that preceded legendary achievements.
                  </p>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Badge variant="outline">Motivation</Badge>
                  <div className="flex gap-2">
                    <Button size="icon" variant="ghost">
                      <Share2 className="h-4 w-4" />
                    </Button>
                    <Button size="icon" variant="ghost">
                      <Bookmark className="h-4 w-4" />
                    </Button>
                  </div>
                </CardFooter>
              </Card>

{/* Video Placeholder 3 */}
              <Card className="overflow-hidden">
                <div className="relative h-64 bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
                  <Image
                    src="/placeholder.svg?height=400&width=600&query=person meditating on cliff edge at sunset, peaceful"
                    alt="Finding Inner Peace"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                    <Button
                      size="icon"
                      className="h-16 w-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm"
                    >
                      <Play className="h-8 w-8 text-white" />
                    </Button>
                  </div>
                </div>
                <CardHeader>
                  <CardTitle>Finding Peace in Chaos</CardTitle>
                  <CardDescription>Techniques to maintain mental clarity during life's storms</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-slate-600 dark:text-slate-400">
                    Learn practical techniques for finding calm within life's chaos. This video guides you through
                    mindfulness practices that help you maintain clarity and purpose even in your most challenging
                    moments.
                  </p>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Badge variant="outline">Mindfulness</Badge>
                  <div className="flex gap-2">
                    <Button size="icon" variant="ghost">
                      <Share2 className="h-4 w-4" />
                    </Button>
                    <Button size="icon" variant="ghost">
                      <Bookmark className="h-4 w-4" />
                    </Button>
                  </div>
                </CardFooter>
              </Card>

{/* Video Placeholder 4 */}
              <Card className="overflow-hidden">
                <div className="relative h-64 bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
                  <Image
                    src="/placeholder.svg?height=400&width=600&query=diverse group of people supporting each other, community"
                    alt="Community Support"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                    <Button
                      size="icon"
                      className="h-16 w-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm"
                    >
                      <Play className="h-8 w-8 text-white" />
                    </Button>
                  </div>
                </div>
                <CardHeader>
                  <CardTitle>The Power of Community</CardTitle>
                  <CardDescription>How connection heals and strengthens us through difficult times</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-slate-600 dark:text-slate-400">
                    This heartwarming video explores how human connection and community support can be transformative
                    during our darkest moments, featuring real stories of how relationships helped people overcome
                    trauma.
                  </p>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Badge variant="outline">Connection</Badge>
                  <div className="flex gap-2">
                    <Button size="icon" variant="ghost">
                      <Share2 className="h-4 w-4" />
                    </Button>
                    <Button size="icon" variant="ghost">
                      <Bookmark className="h-4 w-4" />
                    </Button>
                  </div>
                </CardFooter>
              </Card>
            </div>

<div className="text-center mt-8">
              <Button variant="outline" className="mt-4">
                Load More Videos
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </TabsContent>

{/* Audio Tab */}
          <TabsContent value="audio" className="space-y-8">
            <div className="text-center mb-12">
              <h3 className="text-2xl font-bold mb-4">Healing Sounds for Your Soul</h3>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                Immerse yourself in audio experiences designed to calm your mind, inspire your heart, and strengthen
                your resolve. From guided meditations to motivational talks.
              </p>
            </div>

<div className="space-y-6">
              {/* Audio Player 1 */}
              <Card className="overflow-hidden">
                <div className="flex flex-col md:flex-row">
                  <div className="relative w-full md:w-48 h-48 bg-gradient-to-br from-rose-400 to-purple-600 flex items-center justify-center">
                    <Music className="h-12 w-12 text-white" />
                  </div>
                  <div className="flex-1 p-6">
                    <div className="mb-4">
                      <h4 className="text-xl font-semibold mb-1">Finding Your Inner Strength</h4>
                      <p className="text-sm text-slate-500 dark:text-slate-400">Guided Meditation • 15 minutes</p>
                    </div>
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-6">
                      A calming guided meditation that helps you connect with your inner reservoir of strength and
                      resilience, perfect for moments when you feel overwhelmed or discouraged.
                    </p>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Button
                          size="icon"
                          variant="outline"
                          className="h-10 w-10 rounded-full"
                          onClick={() => togglePlay("audio1")}
                        >
                          {currentAudio === "audio1" && isPlaying ? (
                            <Pause className="h-5 w-5" />
                          ) : (
                            <Play className="h-5 w-5" />
                          )}
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipBack className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipForward className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="flex items-center gap-2">
                        <Volume2 className="h-4 w-4 text-slate-500" />
                        <div className="w-24 h-1 bg-slate-200 dark:bg-slate-700 rounded-full">
                          <div className="w-3/4 h-full bg-rose-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button size="icon" variant="ghost">
                          <Share2 className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost">
                          <Bookmark className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

{/* Audio Player 2 */}
              <Card className="overflow-hidden">
                <div className="flex flex-col md:flex-row">
                  <div className="relative w-full md:w-48 h-48 bg-gradient-to-br from-blue-400 to-emerald-600 flex items-center justify-center">
                    <Music className="h-12 w-12 text-white" />
                  </div>
                  <div className="flex-1 p-6">
                    <div className="mb-4">
                      <h4 className="text-xl font-semibold mb-1">Turning Pain Into Power</h4>
                      <p className="text-sm text-slate-500 dark:text-slate-400">Motivational Talk • 22 minutes</p>
                    </div>
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-6">
                      An inspiring talk that explores how our most painful experiences can become the source of our
                      greatest strengths, with practical advice for transforming suffering into growth.
                    </p>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Button
                          size="icon"
                          variant="outline"
                          className="h-10 w-10 rounded-full"
                          onClick={() => togglePlay("audio2")}
                        >
                          {currentAudio === "audio2" && isPlaying ? (
                            <Pause className="h-5 w-5" />
                          ) : (
                            <Play className="h-5 w-5" />
                          )}
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipBack className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipForward className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="flex items-center gap-2">
                        <Volume2 className="h-4 w-4 text-slate-500" />
                        <div className="w-24 h-1 bg-slate-200 dark:bg-slate-700 rounded-full">
                          <div className="w-1/2 h-full bg-blue-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button size="icon" variant="ghost">
                          <Share2 className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost">
                          <Bookmark className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

{/* Audio Player 3 */}
              <Card className="overflow-hidden">
                <div className="flex flex-col md:flex-row">
                  <div className="relative w-full md:w-48 h-48 bg-gradient-to-br from-amber-400 to-red-600 flex items-center justify-center">
                    <Music className="h-12 w-12 text-white" />
                  </div>
                  <div className="flex-1 p-6">
                    <div className="mb-4">
                      <h4 className="text-xl font-semibold mb-1">Calming Anxiety Soundscape</h4>
                      <p className="text-sm text-slate-500 dark:text-slate-400">Ambient Sound • 30 minutes</p>
                    </div>
                    <p className="text-sm text-slate-600 dark:text-slate-300 mb-6">
                      A carefully composed soundscape designed to reduce anxiety and create a sense of peace and safety,
                      combining gentle nature sounds with soothing musical elements.
                    </p>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Button
                          size="icon"
                          variant="outline"
                          className="h-10 w-10 rounded-full"
                          onClick={() => togglePlay("audio3")}
                        >
                          {currentAudio === "audio3" && isPlaying ? (
                            <Pause className="h-5 w-5" />
                          ) : (
                            <Play className="h-5 w-5" />
                          )}
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipBack className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost" className="h-8 w-8 rounded-full">
                          <SkipForward className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="flex items-center gap-2">
                        <Volume2 className="h-4 w-4 text-slate-500" />
                        <div className="w-24 h-1 bg-slate-200 dark:bg-slate-700 rounded-full">
                          <div className="w-1/3 h-full bg-amber-500 rounded-full"></div>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button size="icon" variant="ghost">
                          <Share2 className="h-4 w-4" />
                        </Button>
                        <Button size="icon" variant="ghost">
                          <Bookmark className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </div>

<div className="text-center mt-8">
              <Button variant="outline" className="mt-4">
                Explore More Audio
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </TabsContent>

{/* Wisdom Tab */}
          <TabsContent value="wisdom" className="space-y-8">
            <div className="text-center mb-12">
              <h3 className="text-2xl font-bold mb-4">Words That Heal and Inspire</h3>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                Discover powerful quotes, stories, and wisdom that provide perspective, comfort, and motivation during
                difficult times. Let these words be your companions on the journey to resilience.
              </p>
            </div>

{/* Quotes Section */}
            <div className="mb-12">
              <h4 className="text-xl font-semibold mb-6 flex items-center">
                <Quote className="h-5 w-5 mr-2 text-rose-500" />
                Quotes to Strengthen Your Spirit
              </h4>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-rose-100 dark:border-rose-900">
                  <CardContent className="pt-6">
                    <blockquote className="text-lg italic border-l-4 border-rose-500 pl-4 py-2">
                      "The wound is the place where the Light enters you."
                    </blockquote>
                    <p className="text-right text-sm text-slate-500 mt-2">— Rumi</p>
                  </CardContent>
                </Card>

<Card className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-rose-100 dark:border-rose-900">
                  <CardContent className="pt-6">
                    <blockquote className="text-lg italic border-l-4 border-rose-500 pl-4 py-2">
                      "Rock bottom became the solid foundation on which I rebuilt my life."
                    </blockquote>
                    <p className="text-right text-sm text-slate-500 mt-2">— J.K. Rowling</p>
                  </CardContent>
                </Card>

<Card className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-rose-100 dark:border-rose-900">
                  <CardContent className="pt-6">
                    <blockquote className="text-lg italic border-l-4 border-rose-500 pl-4 py-2">
                      "What lies behind us and what lies before us are tiny matters compared to what lies within us."
                    </blockquote>
                    <p className="text-right text-sm text-slate-500 mt-2">— Ralph Waldo Emerson</p>
                  </CardContent>
                </Card>

<Card className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border-rose-100 dark:border-rose-900">
                  <CardContent className="pt-6">
                    <blockquote className="text-lg italic border-l-4 border-rose-500 pl-4 py-2">
                      "You may encounter many defeats, but you must not be defeated. In fact, it may be necessary to
                      encounter the defeats, so you can know who you are, what you can rise from, how you can still come
                      out of it."
                    </blockquote>
                    <p className="text-right text-sm text-slate-500 mt-2">— Maya Angelou</p>
                  </CardContent>
                </Card>
              </div>
            </div>

{/* Stories Section */}
            <div className="mb-12">
              <h4 className="text-xl font-semibold mb-6 flex items-center">
                <BookOpen className="h-5 w-5 mr-2 text-rose-500" />
                Stories of Transformation
              </h4>

<div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>The Phoenix's Journey</CardTitle>
                    <CardDescription>A story of rebirth after devastating loss</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-slate-600 dark:text-slate-300 mb-4">
                      After losing everything in a natural disaster, Sarah found herself at a crossroads. With her home
                      destroyed and her business in ruins, depression threatened to consume her. But through small daily
                      acts of courage and the support of unexpected allies, she began to rebuild not just her external
                      life, but her inner strength.
                    </p>
                    <p className="text-slate-600 dark:text-slate-300">
                      Five years later, Sarah's new business employs people who have faced similar losses, creating a
                      community of resilience that transforms trauma into purpose. Her story reminds us that our
                      greatest pain can become the birthplace of our most meaningful contribution.
                    </p>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Badge variant="outline">Resilience</Badge>
                    <div className="flex gap-2">
                      <Button size="sm" variant="ghost">
                        <MessageCircle className="h-4 w-4 mr-2" />
                        Reflect
                      </Button>
                      <Button size="sm" variant="ghost">
                        <Share2 className="h-4 w-4 mr-2" />
                        Share
                      </Button>
                    </div>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>The Broken Instrument</CardTitle>
                    <CardDescription>Finding beauty in imperfection</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-slate-600 dark:text-slate-300 mb-4">
                      A master violinist was devastated when his prized instrument was damaged beyond repair. For
                      months, he couldn't bring himself to play music, feeling that his identity and purpose had been
                      shattered along with his violin.
                    </p>
                    <p className="text-slate-600 dark:text-slate-300">
                      One day, he discovered the Japanese art of Kintsugi—repairing broken pottery with gold to
                      highlight rather than hide the damage. Inspired, he commissioned a luthier to repair his violin in
                      a similar way, embracing its scars rather than concealing them. The repaired violin produced a
                      sound that was different but hauntingly beautiful, with resonances impossible in an undamaged
                      instrument. His concerts now begin with the story of his broken violin, touching hearts in ways
                      his perfect performances never could.
                    </p>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Badge variant="outline">Transformation</Badge>
                    <div className="flex gap-2">
                      <Button size="sm" variant="ghost">
                        <MessageCircle className="h-4 w-4 mr-2" />
                        Reflect
                      </Button>
                      <Button size="sm" variant="ghost">
                        <Share2 className="h-4 w-4 mr-2" />
                        Share
                      </Button>
                    </div>
                  </CardFooter>
                </Card>
              </div>
            </div>

{/* Wisdom Practices */}
            <div>
              <h4 className="text-xl font-semibold mb-6 flex items-center">
                <Lightbulb className="h-5 w-5 mr-2 text-rose-500" />
                Practical Wisdom Exercises
              </h4>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>The Gratitude Shift</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-slate-600 dark:text-slate-300">
                      When overwhelmed by negative emotions, take 5 minutes to write down three things you're grateful
                      for, no matter how small. This simple practice activates brain regions associated with positive
                      emotions and can create an immediate shift in perspective.
                    </p>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      Try This Practice
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Future Self Letter</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-slate-600 dark:text-slate-300">
                      Write a letter from your future self who has overcome your current challenges. What wisdom would
                      they share? What perspective would they offer? This exercise helps you tap into your own inner
                      wisdom and creates hope by visualizing a positive future.
                    </p>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      Try This Practice
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Strength Inventory</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-slate-600 dark:text-slate-300">
                      List five challenges you've overcome in the past and the personal strengths each one revealed or
                      developed in you. Then identify which of these strengths might help you with your current
                      situation. This reminds you of your proven resilience.
                    </p>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      Try This Practice
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </section>

{/* Community Support Section */}
      <section className="py-16 px-4 bg-gradient-to-r from-rose-50 to-slate-50 dark:from-rose-950 dark:to-slate-950">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">You Are Not Alone</h2>
          <p className="text-lg text-slate-700 dark:text-slate-300 mb-12 max-w-2xl mx-auto">
            Join our supportive community of individuals who understand the journey through difficult times. Share your
            story, find encouragement, and connect with others who are walking similar paths.
          </p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="text-center">
              <CardHeader>
                <div className="mx-auto bg-rose-100 dark:bg-rose-900 w-16 h-16 rounded-full flex items-center justify-center mb-2">
                  <MessageCircle className="h-8 w-8 text-rose-600 dark:text-rose-300" />
                </div>
                <CardTitle>Share Your Story</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600 dark:text-slate-300">
                  Your journey matters. Share your experiences in a safe, supportive environment and inspire others with
                  your resilience.
                </p>
              </CardContent>
              <CardFooter className="flex justify-center">
                <Button>Connect Now</Button>
              </CardFooter>
            </Card>

<Card className="text-center">
              <CardHeader>
                <div className="mx-auto bg-rose-100 dark:bg-rose-900 w-16 h-16 rounded-full flex items-center justify-center mb-2">
                  <Heart className="h-8 w-8 text-rose-600 dark:text-rose-300" />
                </div>
                <CardTitle>Find Support</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600 dark:text-slate-300">
                  Connect with trained volunteers who can provide emotional support and practical guidance during
                  difficult times.
                </p>
              </CardContent>
              <CardFooter className="flex justify-center">
                <Button>Reach Out</Button>
              </CardFooter>
            </Card>

<Card className="text-center">
              <CardHeader>
                <div className="mx-auto bg-rose-100 dark:bg-rose-900 w-16 h-16 rounded-full flex items-center justify-center mb-2">
                  <Lightbulb className="h-8 w-8 text-rose-600 dark:text-rose-300" />
                </div>
                <CardTitle>Learn Together</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600 dark:text-slate-300">
                  Join virtual workshops and discussion groups focused on building resilience, managing emotions, and
                  finding meaning in difficulty.
                </p>
              </CardContent>
              <CardFooter className="flex justify-center">
                <Button>Join Workshop</Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

{/* Call to Action */}
      <section className="py-20 px-4 text-center">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">Begin Your Journey to Strength Today</h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 mb-8">
            Every moment of darkness contains the seeds of light. Every challenge holds the potential for growth. You
            have the strength within you—let us help you discover it.
          </p>
          <Button size="lg" className="bg-rose-600 hover:bg-rose-700">
            Start Your Healing Journey
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]png:file="public/serene-mountain-sunrise.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/serene-mountain-sunrise-sKSQcrYeG4PAhjFnTNtdTIz8kd7Bg3.png"
[V0_FILE]png:file="public/mountain-climber-sunrise.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mountain-climber-sunrise-U6XK7iUPqhxgwisl5ng1xPeWcTNzy2.png"
[V0_FILE]png:file="public/phoenix-rebirth.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/phoenix-rebirth-qSRuqKEMJZaZGiL8GT1dWjuS9Mz4nY.png"
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { transform: "translateY(20px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
        slideDown: {
          "0%": { transform: "translateY(-20px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
        slideLeft: {
          "0%": { transform: "translateX(20px)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
        slideRight: {
          "0%": { transform: "translateX(-20px)", opacity: "0" },
          "100%": { transform: "translateX(0)", opacity: "1" },
        },
        wave: {
          "0%": { transform: "rotate(0.0deg)" },
          "10%": { transform: "rotate(14.0deg)" },
          "20%": { transform: "rotate(-8.0deg)" },
          "30%": { transform: "rotate(14.0deg)" },
          "40%": { transform: "rotate(-4.0deg)" },
          "50%": { transform: "rotate(10.0deg)" },
          "60%": { transform: "rotate(0.0deg)" },
          "100%": { transform: "rotate(0.0deg)" },
        },
        float: {
          "0%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
          "100%": { transform: "translateY(0px)" },
        },
        pulse: {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.5" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-in": "fadeIn 0.5s ease-out forwards",
        "slide-up": "slideUp 0.5s ease-out forwards",
        "slide-down": "slideDown 0.5s ease-out forwards",
        "slide-left": "slideLeft 0.5s ease-out forwards",
        "slide-right": "slideRight 0.5s ease-out forwards",
        wave: "wave 1.5s ease-in-out infinite",
        float: "float 3s ease-in-out infinite",
        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]png:file="public/placeholder-ias72.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png"
[V0_FILE]png:file="public/placeholder-fdlug.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png"
[V0_FILE]png:file="public/serene-blue-planet.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/serene-blue-planet-5o5oDq17v9Ypv4corr8zoPs6pY1QFY.png"
[V0_FILE]png:file="public/blue-gas-giant.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/blue-gas-giant-j5Ry4A0ZFVqADPta0pvo55jYDmlgi0.png"
[V0_FILE]png:file="public/red-rocky-planet.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/red-rocky-planet-FjGAlz28IYhZG5NoMJno6S0VB4JZYK.png"
[V0_FILE]png:file="public/ringed-gas-giant.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ringed-gas-giant-zbM1YoKkBibRigtNWS6D8ooN5YZ6T5.png"
[V0_FILE]png:file="public/earth-daymap.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/textures/earth_daymap-ITgiyvethSfjz5oSgicM57st4sqksb.png"
[V0_FILE]png:file="public/earth-nightmap.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/earth-nightmap-CyHh5GeFvNnl346PAA0uRmrRAuatJA.png"
[V0_FILE]png:file="public/earth-clouds.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/earth-clouds-DImbaZ1saS0DokXlDcDI1z1qXddJ6s.png"
[V0_FILE]png:file="public/earth-normal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/textures/earth-normal-map-ZpSkMFOgKfbwBVTrnBlutEM75dm3or.png"
[V0_FILE]png:file="public/earth-specular.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/assets/earth-specular-sDW3yJ11iNB4eMStRMhBGePvvFINPE.png"
[V0_FILE]png:file="public/moon-map.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/moon-map-bReMbyioDZj9oVPyTLVmN2maFKpVn1.png"
[V0_FILE]typescriptreact:file="components/stats-section.tsx"
"use client"

import type React from "react"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { Users, GraduationCap, Building, MapPin } from "lucide-react"

interface Stat {
  id: string
  value: string
  label: string
  icon: React.ReactNode
}

export function StatsSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })

const stats: Stat[] = [
    {
      id: "people-impacted",
      value: "10,000+",
      label: "People Impacted",
      icon: <Users className="h-6 w-6" />,
    },
    {
      id: "educational-programs",
      value: "25+",
      label: "Educational Programs",
      icon: <GraduationCap className="h-6 w-6" />,
    },
    {
      id: "partner-organizations",
      value: "15+",
      label: "Partner Organizations",
      icon: <Building className="h-6 w-6" />,
    },
    {
      id: "communities-served",
      value: "12+",
      label: "Communities Served",
      icon: <MapPin className="h-6 w-6" />,
    },
  ]

const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.6 } },
  }

return (
    <section className="py-16 bg-white dark:bg-slate-950">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Collaborative Progress</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Grateful to be part of these collective efforts to support communities across Bangladesh
          </p>
        </div>

<motion.div
          ref={ref}
          className="grid grid-cols-2 md:grid-cols-4 gap-8"
          variants={container}
          initial="hidden"
          animate={isInView ? "show" : "hidden"}
        >
          {stats.map((stat) => (
            <motion.div key={stat.id} className="text-center" variants={item}>
              <div className="inline-flex items-center justify-center p-3 bg-blue-100 dark:bg-blue-900/30 rounded-full text-blue-700 dark:text-blue-300 mb-4">
                {stat.icon}
              </div>
              <h3 className="text-3xl md:text-4xl font-bold mb-2">{stat.value}</h3>
              <p className="text-muted-foreground">{stat.label}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/earth-moon-visualization.tsx"
"use client"

import { useEffect, useRef, useState } from "react"

export function EarthMoonVisualization() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    // Check if device is mobile
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const resizeCanvas = () => {
      const dpr = window.devicePixelRatio || 1
      canvas.width = window.innerWidth * dpr
      canvas.height = window.innerHeight * dpr
      ctx.scale(dpr, dpr)
      canvas.style.width = `${window.innerWidth}px`
      canvas.style.height = `${window.innerHeight}px`
    }

resizeCanvas()
    window.addEventListener("resize", resizeCanvas)

// Create stars - fewer on mobile
    const starCount = isMobile ? 50 : 150
    const stars: { x: number; y: number; radius: number; opacity: number }[] = []
    for (let i = 0; i < starCount; i++) {
      stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * (isMobile ? 1 : 1.5),
        opacity: Math.random() * 0.7 + 0.3,
      })
    }

// Animation variables
    let earthAngle = 0
    let moonAngle = 0
    let animationFrameId: number

// Animation function
    const animate = () => {
      if (!ctx || !canvas) return

// Clear canvas
      ctx.fillStyle = "rgba(0, 0, 20, 1)"
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw stars
      stars.forEach((star) => {
        ctx.beginPath()
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`
        ctx.fill()
      })

// Center of canvas
      const centerX = window.innerWidth / 2
      const centerY = window.innerHeight / 2

// Earth parameters - smaller on mobile
      const earthRadius = Math.min(window.innerWidth, window.innerHeight) * (isMobile ? 0.08 : 0.1)
      const earthX = centerX
      const earthY = centerY

// Draw Earth
      const gradient = ctx.createRadialGradient(earthX, earthY, 0, earthX, earthY, earthRadius)
      gradient.addColorStop(0, "#1e3a8a")
      gradient.addColorStop(0.5, "#3b82f6")
      gradient.addColorStop(1, "#1e3a8a")

ctx.beginPath()
      ctx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2)
      ctx.fillStyle = gradient
      ctx.fill()

// Draw Earth "continents" - fewer on mobile
      ctx.fillStyle = "#10b981"
      const continentCount = isMobile ? 4 : 7
      for (let i = 0; i < continentCount; i++) {
        const angle = earthAngle + i * (Math.PI / 3.5)
        const x = earthX + earthRadius * 0.7 * Math.cos(angle)
        const y = earthY + earthRadius * 0.7 * Math.sin(angle)
        const size = earthRadius * (0.2 + Math.random() * 0.3)

ctx.beginPath()
        ctx.arc(x, y, size, 0, Math.PI * 2)
        ctx.fill()
      }

// Moon parameters
      const moonRadius = earthRadius * 0.3
      const moonDistance = earthRadius * 3
      const moonX = earthX + moonDistance * Math.cos(moonAngle)
      const moonY = earthY + moonDistance * Math.sin(moonAngle)

// Draw Moon
      ctx.beginPath()
      ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2)
      ctx.fillStyle = "#e5e7eb"
      ctx.fill()

// Draw Moon craters - fewer on mobile
      ctx.fillStyle = "#9ca3af"
      const craterCount = isMobile ? 2 : 3
      for (let i = 0; i < craterCount; i++) {
        const craterAngle = i * (Math.PI / 1.5)
        const craterX = moonX + moonRadius * 0.5 * Math.cos(craterAngle)
        const craterY = moonY + moonRadius * 0.5 * Math.sin(craterAngle)
        const craterSize = moonRadius * (0.2 + Math.random() * 0.1)

ctx.beginPath()
        ctx.arc(craterX, craterY, craterSize, 0, Math.PI * 2)
        ctx.fill()
      }

// Update angles for next frame - slower on mobile
      earthAngle += isMobile ? 0.003 : 0.005
      moonAngle += isMobile ? 0.006 : 0.01

animationFrameId = requestAnimationFrame(animate)
    }

// Start animation
    animate()

// Cleanup
    return () => {
      window.removeEventListener("resize", resizeCanvas)
      window.removeEventListener("resize", checkMobile)
      cancelAnimationFrame(animationFrameId)
    }
  }, [isMobile])

return (
    <div className="absolute inset-0 z-0">
      <canvas
        ref={canvasRef}
        className="w-full h-full"
        style={{ background: "linear-gradient(to bottom, #000000, #0a0a2a)" }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/resources-section.tsx"
"use client"

import type React from "react"

import { useRef } from "react"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Sparkles, Heart, Target, Calendar, FileText, BarChart3, ArrowRight } from "lucide-react"

interface Resource {
  id: string
  title: string
  description: string
  icon: React.ReactNode
  color: string
  link: string
}

export function ResourcesSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-50px" })

const resources: Resource[] = [
    {
      id: "mental-strength",
      title: "Mental Strength",
      description: "Find courage and motivation during life's most challenging moments.",
      icon: <Sparkles className="h-5 w-5" />,
      color: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300",
      link: "/mental-strength",
    },
    {
      id: "wellness-dashboard",
      title: "Wellness Dashboard",
      description: "Track your daily wellness activities and build healthy habits.",
      icon: <Heart className="h-5 w-5" />,
      color: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300",
      link: "/wellness-dashboard",
    },
    {
      id: "project-focus",
      title: "Project Focus",
      description: "Stay focused on your most important targets with real-time tracking.",
      icon: <Target className="h-5 w-5" />,
      color: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
      link: "/project-focus",
    },
    {
      id: "meeting-preparation",
      title: "Meeting Preparation",
      description: "Organize and prepare for meetings with individuals and organizations.",
      icon: <Calendar className="h-5 w-5" />,
      color: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
      link: "/meeting-preparation",
    },
    {
      id: "personal-notes",
      title: "Personal Notes",
      description: "Access your password-protected personal notes and templates.",
      icon: <FileText className="h-5 w-5" />,
      color: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
      link: "/personal-notes",
    },
    {
      id: "tracking-system",
      title: "Tracking System",
      description: "Comprehensive system for tracking donations, products, and services.",
      icon: <BarChart3 className="h-5 w-5" />,
      color: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
      link: "/tracking-system",
    },
  ]

const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.05,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { duration: 0.3 } },
  }

return (
    <section className="py-12 md:py-20 bg-white dark:bg-slate-950" id="resources">
      <div className="container mx-auto px-4">
        <div className="text-center mb-8 md:mb-16">
          <h2 className="text-2xl md:text-4xl font-bold mb-3 md:mb-4">Learning Resources</h2>
          <p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto">
            Tools I'm exploring on my journey of continuous learning and personal development
          </p>
        </div>

<motion.div
          ref={ref}
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"
          variants={container}
          initial="hidden"
          animate={isInView ? "show" : "hidden"}
        >
          {resources.map((resource) => (
            <motion.div key={resource.id} variants={item} className="will-change-transform">
              <Card className="h-full hover:shadow-md transition-all duration-300">
                <CardContent className="p-4 md:p-6">
                  <div
                    className={`inline-flex items-center justify-center p-2 rounded-lg ${resource.color} mb-3 md:mb-4`}
                  >
                    {resource.icon}
                  </div>
                  <h3 className="text-lg md:text-xl font-medium mb-2">{resource.title}</h3>
                  <p className="text-sm md:text-base text-muted-foreground mb-3 md:mb-4">{resource.description}</p>
                  <Button asChild variant="ghost" className="p-0 h-auto group">
                    <Link href={resource.link} className="flex items-center text-sm font-medium">
                      Explore
                      <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/cosmic-visualization.tsx"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

export function CosmicVisualization() {
  const [isMobile, setIsMobile] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)
    return () => window.removeEventListener("resize", checkMobile)
  }, [])

return (
    <div
      ref={containerRef}
      className="relative w-full h-[300px] md:h-[500px] rounded-xl overflow-hidden bg-slate-900 shadow-xl"
    >
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/30 via-slate-900 to-slate-950"></div>

{/* Stars */}
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: "radial-gradient(2px 2px at var(--x) var(--y), white, rgba(0,0,0,0))",
          backgroundSize: "200px 200px",
          backgroundPosition: "0 0, 100px 100px",
          animation: "twinkle 8s ease-in-out infinite alternate",
        }}
      ></div>

{/* Sun */}
      <div
        className="absolute w-20 h-20 md:w-32 md:h-32 rounded-full bg-yellow-300 blur-sm"
        style={{
          top: "50%",
          left: "10%",
          transform: "translateY(-50%)",
          boxShadow: "0 0 60px 30px rgba(255, 214, 0, 0.3), 0 0 100px 60px rgba(255, 147, 0, 0.2)",
        }}
      ></div>

{/* Earth */}
      <div
        className="absolute"
        style={{
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          animation: "orbit 30s linear infinite",
        }}
      >
        <div className="relative w-16 h-16 md:w-24 md:h-24">
          <Image
            src="/earth-daymap.png"
            alt="Earth"
            fill
            sizes="(max-width: 768px) 64px, 96px"
            className="rounded-full animate-spin-slow"
            style={{ animationDuration: "20s" }}
            priority
          />
          <div
            className="absolute inset-0 rounded-full bg-gradient-to-r from-transparent via-transparent to-black/50 animate-spin-slow"
            style={{ animationDuration: "20s" }}
          ></div>
        </div>

{/* Moon */}
        <div
          className="absolute w-4 h-4 md:w-6 md:h-6 rounded-full bg-gray-300"
          style={{
            top: "50%",
            left: "140%",
            transform: "translateY(-50%)",
            animation: "moonOrbit 8s linear infinite",
            boxShadow: "inset -2px 0 3px rgba(0, 0, 0, 0.6)",
          }}
        ></div>
      </div>

{/* Mars */}
      <div
        className="absolute"
        style={{
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          animation: "orbit 56s linear infinite",
          animationDelay: "-15s",
        }}
      >
        <div className="w-4 h-4 md:w-6 md:h-6 rounded-full bg-red-500"></div>
      </div>

{/* Jupiter */}
      <div
        className="absolute"
        style={{
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          animation: "orbit 120s linear infinite",
          animationDelay: "-40s",
        }}
      >
        <div className="w-8 h-8 md:w-12 md:h-12 rounded-full bg-amber-300 opacity-80"></div>
      </div>

{/* Shooting star */}
      <div
        className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white"
        style={{
          top: "30%",
          left: "80%",
          boxShadow: "0 0 4px 2px rgba(255, 255, 255, 0.4)",
          animation: "shootingStar 6s linear infinite",
        }}
      ></div>

{/* Knowledge symbols */}
      <div className="absolute top-1/4 left-1/4 text-white opacity-20 animate-pulse text-xl md:text-3xl">π</div>
      <div
        className="absolute bottom-1/4 right-1/3 text-white opacity-20 animate-pulse text-xl md:text-3xl"
        style={{ animationDelay: "1s" }}
      >
        E=mc²
      </div>
      <div
        className="absolute top-1/3 right-1/4 text-white opacity-20 animate-pulse text-xl md:text-3xl"
        style={{ animationDelay: "2s" }}
      >
        ∞
      </div>

{/* Overlay gradient for text readability */}
      <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div>

## Our Pledge

We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.

## Our Standards

Examples of behavior that contributes to a positive environment for our
community include:

* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
  overall community

Examples of unacceptable behavior include:

* The use of sexualized language or imagery, and sexual attention or
  advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
  address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Enforcement Responsibilities

Project maintainers are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.

Project maintainers have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.

## Scope

This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the project team at mjahmad2024@outlook.com. All
complaints will be reviewed and investigated promptly and fairly.

All project maintainers are obligated to respect the privacy and security of the
reporter of any incident.

## Enforcement Guidelines

Project maintainers will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:

### 1. Correction

**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.

**Consequence**: A private, written warning from project maintainers, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.

### 2. Warning

**Community Impact**: A violation through a single incident or series
of actions.

**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.

### 3. Temporary Ban

**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.

**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.

### 4. Permanent Ban

**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.

**Consequence**: A permanent ban from any sort of public interaction within
the community.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
\`\`\`

Let's create a CONTRIBUTING.md file:
[V0_FILE]markdown:file="LICENSE"
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
[V0_FILE]markdown:file=".github/ISSUE_TEMPLATE/bug_report.md"
---
name: Bug report
about: Create a report to help us improve
title: '[BUG] '
labels: bug
assignees: ''
---

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Environment (please complete the following information):**
 - OS: [e.g. iOS, Windows]
 - Browser [e.g. chrome, safari]
 - Version [e.g. 22]
 - Device: [e.g. iPhone6, Desktop]

**Additional context**
Add any other context about the problem here.
[V0_FILE]markdown:file=".github/ISSUE_TEMPLATE/feature_request.md"
---
name: Feature request
about: Suggest an idea for this project
title: '[FEATURE] '
labels: enhancement
assignees: ''
---

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**
A clear and concise description of what you want to happen.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.

**Additional context**
Add any other context or screenshots about the feature request here.
[V0_FILE]markdown:file=".github/PULL_REQUEST_TEMPLATE.md"
## Description

## Related Issue

## Motivation and Context

## How Has This Been Tested?

## Screenshots (if appropriate):

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:


- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have read the **CONTRIBUTING** document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
[V0_FILE]markdown:file="SECURITY.md"
# Security Policy

## Supported Versions

Use this section to tell people about which versions of your project are currently being supported with security updates.

| Version | Supported          |
| ------- | ------------------ |
| 1.0.x   | :white_check_mark: |
| < 1.0   | :x:                |

## Reporting a Vulnerability

We take the security of MJ-AHMAD OVERVIEW seriously. If you believe you've found a security vulnerability, please follow these steps:

1. **Do Not** disclose the vulnerability publicly
2. Email the details to mjahmad2024@outlook.com
   - Provide a description of the vulnerability
   - Steps to reproduce the issue
   - Potential impact
   - Any suggestions for remediation if you have them

## What to Expect

- You will receive acknowledgment of your report within 48 hours
- We will investigate and provide an update on the vulnerability
- We will work with you to understand and address the issue
- Once the vulnerability is fixed, we will publicly acknowledge your responsible disclosure (unless you prefer to remain anonymous)

Thank you for helping keep MJ-AHMAD OVERVIEW and its users safe!
[V0_FILE]yaml:file=".github/FUNDING.yml"
# These are supported funding model platforms

github: [MJ-AHMAD]
ko_fi: mjahmad
custom: ['https://github.com/sponsors/MJ-AHMAD']
[V0_FILE]plaintext:file=".gitignore"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

# IDE
.idea/
.vscode/
*.sublime-project
*.sublime-workspace

# Logs
logs
*.log

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Cache
.cache/
.npm/

# Build artifacts
dist/
[V0_FILE]markdown:file="CHANGELOG.md"
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added
- Initial project setup
- Wellness Dashboard with water, exercise, sleep, and habit tracking
- Project Focus with task management and focus timer
- Meeting Preparation tools
- Tracking System for invoices and reporting
- Personal Notes with password protection
- JSON and Markdown structure visualization
- ISS Tracker
- Time Management features
- Open source project setup with documentation

## [1.0.0] - 2023-05-21

### Added
- Initial release

[Unreleased]: https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/compare/v1.0.0...HEAD
[1.0.0]: https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/releases/tag/v1.0.0
\`\`\`

```plaintext file=".npmrc"
save-exact=true
[V0_FILE]plaintext:file=".editorconfig"
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

# 4 space indentation for Python files
[*.py]
indent_size = 4

# Tab indentation for Makefiles
[Makefile]
indent_style = tab

# Markdown files
[*.md]
trim_trailing_whitespace = false
[V0_FILE]plaintext:file=".github/CODEOWNERS"
# These owners will be the default owners for everything in
# the repo. Unless a later match takes precedence,
# @MJ-AHMAD will be requested for review when someone opens a pull request.
*       @MJ-AHMAD

# Order is important; the last matching pattern takes the most precedence.

# Core components
/components/           @MJ-AHMAD
/app/                  @MJ-AHMAD
/lib/                  @MJ-AHMAD

# Documentation
/docs/                 @MJ-AHMAD
*.md                   @MJ-AHMAD

# Configuration files
*.json                 @MJ-AHMAD
*.js                   @MJ-AHMAD
*.ts                   @MJ-AHMAD
*.tsx                  @MJ-AHMAD
[V0_FILE]yaml:file=".github/dependabot.yml" isFixed="true" isQuickEdit="true"
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 10
    assignees:
      - "MJ-AHMAD"
    reviewers:
      - "MJ-AHMAD"
    labels:
      - "dependencies"
      - "npm"

# Enable version updates for GitHub Actions
  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 5
    assignees:
      - "MJ-AHMAD"
    reviewers:
      - "MJ-AHMAD"
    labels:
      - "dependencies"
      - "github-actions"
[V0_FILE]yaml:file=".github/workflows/stale.yml"
name: Mark stale issues and pull requests

on:
  schedule:
  - cron: "30 1 * * *"

jobs:
  stale:
    runs-on: ubuntu-latest
    permissions:
      issues: write
      pull-requests: write

steps:
    - uses: actions/stale@v8
      with:
        repo-token: ${{ secrets.GITHUB_TOKEN }}
        stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
        stale-pr-message: 'This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
        stale-issue-label: 'stale'
        stale-pr-label: 'stale'
        days-before-stale: 60
        days-before-close: 7
        exempt-issue-labels: 'pinned,security,enhancement,bug'
        exempt-pr-labels: 'pinned,security,work-in-progress'
[V0_FILE]yaml:file=".github/workflows/ci.yml" isFixed="true" isQuickEdit="true"
name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

strategy:
      matrix:
        node-version: [18.x, 20.x]

steps:
    - uses: actions/checkout@v3
    
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build
      run: npm run build
      
    - name: Lint
      run: npm run lint
      
    - name: Type check
      run: npm run type-check
      
    - name: Test
      run: npm test
      
  deploy:
    needs: build
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18.x'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build
      run: npm run build
      
    - name: Deploy
      run: echo "Add your deployment script here"
      # Add your deployment steps here
[V0_FILE]markdown:file="SUPPORT.md"
# Support

This article explains where to get help with MJ-AHMAD OVERVIEW. Please read through the following guidelines.

> 👉 **Note**: before participating in our community, please read our [Code of Conduct](CODE_OF_CONDUCT.md). By interacting with this repository, organization, or community you agree to abide by its terms.

## Asking Quality Questions

Questions can go to [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions) or [Discord](https://discord.gg/wQkqJw3Y).

Help us help you! Spend time framing questions and add links and resources. Spending the extra time up front can help save everyone time in the long run. Here are some tips:

* [Talk to a duck](https://rubberduckdebugging.com)! Don't simply post "I found a bug" or ask "is this a bug?". Explain what you're trying to do, what you expected to happen, and what actually happened.
* Search to see if a similar question has been asked
* Try to define what you need help with:
  * Is there something in particular you want to do?
  * What problem are you encountering and what steps have you taken to try and fix it?
  * Is there a concept you don't understand?
* Provide sample code, such as a [CodeSandbox](https://codesandbox.io) or a small repo, if possible
* Screenshots can help, but if there's important text such as code or error messages in them, please also provide those as text
* The more time you put into asking your question, the better we can help you

## Contributions

See [CONTRIBUTING.md](CONTRIBUTING.md) for information on how to contribute.

## Documentation

* [README](README.md): Overview of the project
* [CONTRIBUTING](CONTRIBUTING.md): Development workflow
* [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md): Community guidelines
* [LICENSE](LICENSE): Project license

## Contact

If you need to contact the project maintainer directly:

* Email: mjahmad2024@outlook.com
* GitHub: [@MJ-AHMAD](https://github.com/MJ-AHMAD)
* LinkedIn: [@in/jafor-ahmad/](https://www.linkedin.com/in/jafor-ahmad/)
* Twitter: [@mjahmad25](https://twitter.com/mjahmad25)
[V0_FILE]markdown:file="GOVERNANCE.md"
# Project Governance

This document outlines the governance model for the MJ-AHMAD OVERVIEW project. It describes the roles, responsibilities, and processes for decision making within the project.

## Roles and Responsibilities

### Project Maintainer

The Project Maintainer is responsible for the overall direction and vision of the project. Currently, this role is held by [MJ-AHMAD](https://github.com/MJ-AHMAD).

Responsibilities include:
- Setting the strategic direction of the project
- Making final decisions when consensus cannot be reached
- Managing the release process
- Appointing Core Contributors
- Ensuring the project adheres to its Code of Conduct

### Core Contributors

Core Contributors are individuals who have made significant contributions to the project and have been granted commit access to the repository.

Responsibilities include:
- Reviewing and merging pull requests
- Triaging issues
- Mentoring new contributors
- Participating in design discussions
- Contributing code, documentation, and other improvements

### Contributors

Contributors are individuals who contribute to the project in various ways, such as submitting pull requests, reporting issues, or improving documentation.

## Decision Making Process

### Feature Requests and Bug Fixes

1. **Proposal**: Anyone can propose a new feature or bug fix by creating an issue in the GitHub repository.
2. **Discussion**: The proposal is discussed by the community, Core Contributors, and the Project Maintainer.
3. **Implementation**: If approved, the feature or fix can be implemented by any contributor through a pull request.
4. **Review**: Pull requests are reviewed by Core Contributors and the Project Maintainer.
5. **Merge**: Once approved, the pull request is merged by a Core Contributor or the Project Maintainer.

### Major Decisions

Major decisions that affect the project's direction, architecture, or community require broader consensus:

1. **Proposal**: A detailed proposal is created as an issue or discussion.
2. **Discussion Period**: A minimum 2-week discussion period allows for community feedback.
3. **Decision**: The Project Maintainer makes the final decision, taking into account community feedback.

## Becoming a Contributor

Anyone can become a contributor by:
- Submitting pull requests
- Reporting and triaging issues
- Improving documentation
- Helping other users

## Becoming a Core Contributor

Contributors who consistently make valuable contributions may be invited to become Core Contributors by the Project Maintainer. Criteria include:
- Quality and quantity of contributions
- Adherence to the project's Code of Conduct
- Participation in discussions and reviews
- Mentorship of other contributors

## Communication Channels

- **GitHub Issues and Pull Requests**: For specific code-related discussions
- **GitHub Discussions**: For general questions and discussions
- **Discord**: For real-time communication and community building

## Changes to Governance

Changes to this governance document require approval from the Project Maintainer after a public discussion period of at least 2 weeks.

## Code of Conduct

All participants in the project are expected to follow the [Code of Conduct](CODE_OF_CONDUCT.md).
[V0_FILE]markdown:file="ROADMAP.md"
# MJ-AHMAD OVERVIEW Roadmap

This document outlines the development roadmap for the MJ-AHMAD OVERVIEW project, providing a high-level view of planned features, improvements, and milestones.

## Current Version: 1.0.0

## Short-term Goals (Next 3 months)

### Core Features
- [ ] Enhance Wellness Dashboard with customizable metrics
- [ ] Add data export functionality to all tracking components
- [ ] Implement dark mode toggle across all pages
- [ ] Improve mobile responsiveness for all components

### Technical Improvements
- [ ] Optimize performance for large datasets
- [ ] Implement comprehensive error handling
- [ ] Add unit tests for core components
- [ ] Improve accessibility compliance

### Documentation
- [ ] Create comprehensive API documentation
- [ ] Add more code examples and tutorials
- [ ] Improve inline code documentation

## Mid-term Goals (3-6 months)

### Core Features
- [ ] Add multi-language support
- [ ] Implement user authentication system
- [ ] Create data visualization dashboard
- [ ] Add offline support with service workers

### Technical Improvements
- [ ] Migrate to Next.js App Router (if not already using it)
- [ ] Implement server-side rendering for all pages
- [ ] Add end-to-end testing
- [ ] Optimize bundle size

### Community
- [ ] Create contributor onboarding process
- [ ] Establish regular community meetings
- [ ] Develop plugin/extension system

## Long-term Goals (6+ months)

### Core Features
- [ ] Implement AI-powered insights and recommendations
- [ ] Add collaborative features for team projects
- [ ] Create mobile applications (iOS/Android)
- [ ] Develop desktop application

### Technical Improvements
- [ ] Implement real-time synchronization
- [ ] Add advanced data analytics
- [ ] Explore blockchain integration for data verification
- [ ] Implement advanced security features

### Community and Business
- [ ] Establish sustainable funding model
- [ ] Create educational resources and courses
- [ ] Develop partnership program
- [ ] Host community events and hackathons

## How to Contribute

We welcome contributions to help us achieve these goals! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) file for details on how to get involved.

## Feedback

This roadmap is not set in stone and may evolve based on user feedback and changing priorities. If you have suggestions or would like to see certain features prioritized, please open an issue on our GitHub repository or join the discussion in our community channels.

Last updated: May 21, 2023
[V0_FILE]yaml:file="CITATION.cff"
cff-version: 1.2.0
message: "If you use this software, please cite it as below."
authors:
  - family-names: "Ahmad"
    given-names: "Jafor"
    orcid: "https://orcid.org/0000-0000-0000-0000"
title: "MJ-AHMAD OVERVIEW"
version: 1.0.0
date-released: 2023-05-21
url: "https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW"
repository-code: "https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW"
license: MIT
[V0_FILE]yaml:file=".github/config.yml"
# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome

# Comment to be posted to on first time issues
newIssueWelcomeComment: >
  Thanks for opening your first issue here! Be sure to follow the issue template and provide as much information as possible.

# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome

# Comment to be posted to on PRs from first time contributors
newPRWelcomeComment: >
  Thanks for opening this pull request! Please check out our contributing guidelines and make sure your PR follows them.

# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge

# Comment to be posted to on pull requests merged by a first time user
firstPRMergeComment: >
  Congrats on merging your first pull request! We appreciate your contribution!

# Configuration for request-info - https://github.com/behaviorbot/request-info

# *Required* Comment to reply with
requestInfoReplyComment: >
  We would appreciate it if you could provide more information about this issue/PR.

# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
requestInfoLabelToAdd: needs-more-info

# Configuration for sentiment-bot - https://github.com/behaviorbot/sentiment-bot

# *Required* Comment to reply with
sentimentBotReplyComment: >
  Please be sure to review the code of conduct and be respectful of other users.

# When a comment contains words matching the regex below, the comment will be marked as toxic and a comment will be posted.
sentimentBotToxicityThreshold: .7

# Comment to post when a toxic comment is posted
sentimentBotReplyComment: >
  Please be sure to review our code of conduct and be respectful of other users.
[V0_FILE]yaml:file=".github/ISSUE_TEMPLATE/config.yml"
blank_issues_enabled: false
contact_links:
  - name: GitHub Discussions
    url: https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions
    about: Please ask and answer questions here.
  - name: Discord Community
    url: https://discord.gg/wQkqJw3Y
    about: Join our Discord community for real-time discussions.
  - name: Security Issue
    url: https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/security/policy
    about: Please report security vulnerabilities here.
[V0_FILE]markdown:file=".github/ISSUE_TEMPLATE/documentation.md" isFixed="true" isQuickEdit="true"
---
name: Documentation
about: Suggest improvements or report issues with documentation
title: '[DOCS] '
labels: documentation
assignees: ''
---

**Is your documentation request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I found it difficult to understand how to [...]

**Describe the solution you'd like**
A clear and concise description of what you want to happen.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions you've considered.

**Additional context**
Add any other context or screenshots about the documentation request here.
[V0_FILE]markdown:file="wiki/Home.md"
# MJ-AHMAD OVERVIEW Wiki

Welcome to the official wiki for the MJ-AHMAD OVERVIEW project! This wiki serves as the comprehensive documentation hub for users, contributors, and developers.

![MJ-AHMAD OVERVIEW Logo](../public/abstract-geometric-mj.png)

## 📚 Wiki Contents

- [Getting Started](Getting-Started)
- [Installation Guide](Installation-Guide)
- [Features](Features)
- [Components](Components)
- [API Documentation](API-Documentation)
- [Architecture](Architecture)
- [Contributing to the Wiki](Contributing-to-the-Wiki)
- [FAQ](FAQ)
- [Troubleshooting](Troubleshooting)

## 🌟 About MJ-AHMAD OVERVIEW

MJ-AHMAD OVERVIEW is a comprehensive personal dashboard and productivity suite designed to enhance personal and professional productivity. It includes various tools for wellness tracking, project management, meeting preparation, and more.

## 🔗 Quick Links

- [GitHub Repository](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW)
- [Issue Tracker](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues)
- [Project Roadmap](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/ROADMAP.md)
- [Contributing Guidelines](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/CONTRIBUTING.md)

## 💖 Support the Project

If you find this project helpful, please consider supporting it:

- [GitHub Sponsors](https://github.com/sponsors/MJ-AHMAD)
- [Ko-fi](https://ko-fi.com/mjahmad)

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/LICENSE) file for details.
\`\`\`

Now, let's create the Getting Started guide:
[V0_FILE]markdown:file="wiki/Getting-Started.md"
# Getting Started with MJ-AHMAD OVERVIEW

This guide will help you get started with MJ-AHMAD OVERVIEW, understand its core features, and navigate through the application.

## Prerequisites

Before you begin, ensure you have:

- A modern web browser (Chrome, Firefox, Safari, or Edge)
- Node.js 18.x or higher (for local development)
- npm or yarn (for local development)

## Quick Start

1. **Visit the deployed application** (if available):
   - [MJ-AHMAD OVERVIEW App](https://mj-ahmad-overview.vercel.app)

2. **For local development**:
   - Follow the [Installation Guide](Installation-Guide) to set up the project locally

## Navigation Guide

MJ-AHMAD OVERVIEW consists of several key sections:

### 1. Home Dashboard

The main landing page provides an overview of all available tools and features.

![Home Dashboard](../public/placeholder-fdlug.png)

### 2. Wellness Dashboard

Track your wellness metrics including:
- Water intake
- Exercise
- Sleep patterns
- Daily habits

Navigate to: `/wellness-dashboard`

### 3. Project Focus

Manage your projects with:
- Task lists
- Milestone timelines
- Focus timer
- Distraction blocker

Navigate to: `/project-focus`

### 4. Meeting Preparation

Prepare for important meetings with:
- Document previews
- Pronunciation practice
- Real-time translation tools

Navigate to: `/meeting-preparation`

### 5. Tracking System

Advanced invoice and tracking management:
- Invoice templates
- Batch actions
- Advanced reporting

Navigate to: `/tracking-system`

### 6. Personal Notes

Password-protected notes and templates:
- Email templates
- Feedback templates
- Gratitude templates
- Chatting templates

Navigate to: `/personal-notes`, `/email-templates`, etc.

## Authentication

Some sections of the application require authentication:

1. Personal Notes: Protected with `NEXT_PUBLIC_NOTES_PASSWORD`
2. Sensitive Data: Protected with `NEXT_PUBLIC_NOTES_PASSWORD_2`

## Next Steps

- Explore the [Features](Features) documentation for detailed information about each feature
- Check out the [Components](Components) documentation to understand the building blocks of the application
- Visit the [FAQ](FAQ) for answers to common questions
- If you encounter issues, refer to the [Troubleshooting](Troubleshooting) guide

## Need Help?

If you need assistance:
- Check the [FAQ](FAQ) section
- Visit the [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions)
- Join our [Discord community](https://discord.gg/wQkqJw3Y)
- Open an [issue](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues) if you found a bug
\`\`\`

Let's create the Installation Guide:
[V0_FILE]markdown:file="wiki/Installation-Guide.md"
# Installation Guide

This guide provides detailed instructions for setting up MJ-AHMAD OVERVIEW locally for development or personal use.

## System Requirements

- **Node.js**: Version 18.x or higher
- **npm** (6.x or higher) or **yarn** (1.22.x or higher)
- **Git**: For cloning the repository
- **Modern web browser**: Chrome, Firefox, Safari, or Edge

## Basic Installation

### 1. Clone the Repository

\`\`\`bash
git clone https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW.git
cd MJ-AHMAD-OVERVIEW
\`\`\`

### 2. Install Dependencies

Using npm:
\`\`\`bash
npm install
\`\`\`

Or using yarn:
\`\`\`bash
yarn install
\`\`\`

### 3. Set Up Environment Variables

Create a `.env.local` file in the root directory with the following variables:

\`\`\`
NEXT_PUBLIC_NOTES_PASSWORD=your_password_here
NEXT_PUBLIC_NOTES_PASSWORD_2=your_second_password_here
\`\`\`

### 4. Run the Development Server

Using npm:
\`\`\`bash
npm run dev
\`\`\`

Or using yarn:
\`\`\`bash
yarn dev
\`\`\`

### 5. Access the Application

Open your browser and navigate to:
\`\`\`
http://localhost:3000
\`\`\`

## Production Deployment

### Building for Production

Using npm:
\`\`\`bash
npm run build
\`\`\`

Or using yarn:
\`\`\`bash
yarn build
\`\`\`

### Running in Production Mode

Using npm:
\`\`\`bash
npm start
\`\`\`

Or using yarn:
\`\`\`bash
yarn start
\`\`\`

## Deployment Options

### Vercel (Recommended)

1. Fork the repository to your GitHub account
2. Sign up for [Vercel](https://vercel.com)
3. Import your forked repository
4. Set the environment variables in the Vercel dashboard
5. Deploy

### Netlify

1. Fork the repository to your GitHub account
2. Sign up for [Netlify](https://netlify.com)
3. Import your forked repository
4. Set the build command to `npm run build` or `yarn build`
5. Set the publish directory to `out`
6. Set the environment variables in the Netlify dashboard
7. Deploy

### Docker Deployment

A Dockerfile is provided for containerized deployment:

1. Build the Docker image:
\`\`\`bash
docker build -t mj-ahmad-overview .
\`\`\`

2. Run the container:
\`\`\`bash
docker run -p 3000:3000 -e NEXT_PUBLIC_NOTES_PASSWORD=your_password_here -e NEXT_PUBLIC_NOTES_PASSWORD_2=your_second_password_here mj-ahmad-overview
\`\`\`

## Troubleshooting Installation Issues

### Common Issues

1. **Node.js version incompatibility**
   - Solution: Use nvm (Node Version Manager) to install and use the correct Node.js version

2. **Port 3000 already in use**
   - Solution: Change the port by using `PORT=3001 npm run dev` or edit the package.json scripts

3. **Missing dependencies**
   - Solution: Run `npm install` or `yarn install` again

4. **Build errors**
   - Solution: Check the console for specific error messages and refer to the [Troubleshooting](Troubleshooting) page

For more detailed troubleshooting, see the [Troubleshooting](Troubleshooting) page.

## Updating the Application

To update to the latest version:

\`\`\`bash
git pull origin main
npm install
# or
yarn install
\`\`\`

## Next Steps

After installation:
- Follow the [Getting Started](Getting-Started) guide
- Explore the [Features](Features) documentation
- Learn about the [Architecture](Architecture)
\`\`\`

Now, let's create the Features documentation:
[V0_FILE]markdown:file="wiki/Features.md"
# Features Documentation

This page provides detailed information about all the features available in MJ-AHMAD OVERVIEW.

## Table of Contents

- [Wellness Dashboard](#wellness-dashboard)
- [Project Focus](#project-focus)
- [Meeting Preparation](#meeting-preparation)
- [Tracking System](#tracking-system)
- [Personal Notes](#personal-notes)
- [JSON & Markdown Structure](#json--markdown-structure)
- [ISS Tracker](#iss-tracker)
- [Time Management](#time-management)
- [Products & E-commerce](#products--e-commerce)

## Wellness Dashboard

The Wellness Dashboard helps you track and improve your daily wellness habits.

### Water Tracker

![Water Tracker](../public/wellness-meditation-nature-zen.png)

**Location**: `/wellness-dashboard`

**Features**:
- Track daily water intake
- Set personalized goals
- View historical data
- Receive reminders

**Usage**:
1. Navigate to the Wellness Dashboard
2. Use the "+" button to add water intake
3. View your progress in the circular chart

### Exercise Tracker

**Location**: `/wellness-dashboard`

**Features**:
- Log different types of exercises
- Track duration and intensity
- Set weekly goals
- View exercise history

### Sleep Tracker

**Location**: `/wellness-dashboard`

**Features**:
- Record sleep duration
- Track sleep quality
- Analyze sleep patterns
- Set sleep goals

### Habit Tracker

**Location**: `/wellness-dashboard`

**Features**:
- Create custom habits to track
- Set frequency (daily, weekly, etc.)
- View streak information
- Get insights on habit formation

## Project Focus

The Project Focus section helps you manage projects and maintain focus.

### Focus Dashboard

**Location**: `/project-focus`

**Features**:
- Overview of all projects
- Task completion metrics
- Recent activity feed
- Quick access to priority tasks

### Task List

**Location**: `/project-focus`

**Features**:
- Create and manage tasks
- Set priorities and deadlines
- Track completion status
- Filter and sort tasks

### Milestone Timeline

**Location**: `/project-focus`

**Features**:
- Visual timeline of project milestones
- Progress tracking
- Deadline management
- Dependency visualization

### Focus Timer

**Location**: `/project-focus`

**Features**:
- Pomodoro technique timer
- Customizable work/break intervals
- Session tracking
- Focus statistics

### Distraction Blocker

**Location**: `/project-focus`

**Features**:
- Block distracting websites
- Set focus periods
- Track distraction attempts
- Focus mode

## Meeting Preparation

Prepare effectively for meetings with comprehensive tools.

### Meeting Dashboard

**Location**: `/meeting-preparation`

**Features**:
- Meeting overview
- Document organization
- Preparation checklist
- Time management

### Document Preview

**Location**: `/meeting-preparation`

**Features**:
- Preview meeting documents
- Add notes and annotations
- Organize by meeting
- Quick reference during meetings

### Pronunciation Practice

**Location**: `/meeting-preparation`

**Features**:
- Practice difficult terms
- Audio playback
- Record and compare
- Pronunciation tips

### Real-time Translator

**Location**: `/meeting-preparation`

**Features**:
- Translate text in real-time
- Support for multiple languages
- Save common phrases
- Quick access during meetings

## Tracking System

Advanced tracking and invoice management system.

### Invoice Templates

**Location**: `/tracking-system`

**Features**:
- Multiple professional templates
- Customizable fields
- Preview before sending
- Save as PDF

### Batch Actions

**Location**: `/tracking-system`

**Features**:
- Process multiple invoices
- Bulk email sending
- Batch status updates
- Export in various formats

### Advanced Reports

**Location**: `/tracking-system`

**Features**:
- Financial summaries
- Client payment history
- Outstanding invoice tracking
- Custom report generation

## Personal Notes

Password-protected notes and templates for personal and professional use.

### Email Templates

**Location**: `/email-templates`

**Features**:
- Pre-written email templates
- Customizable fields
- Categories for different purposes
- Copy to clipboard functionality

### Feedback Templates

**Location**: `/feedback-templates`

**Features**:
- Structured feedback formats
- Positive and constructive templates
- Industry-specific options
- Customizable sections

### Gratitude Templates

**Location**: `/gratitude-templates`

**Features**:
- Daily gratitude prompts
- Structured reflection templates
- Historical tracking
- Mood correlation

### Chatting Templates

**Location**: `/chatting-templates`

**Features**:
- Conversation starters
- Professional messaging templates
- Follow-up templates
- Quick responses

## JSON & Markdown Structure

Tools for visualizing and managing structured data.

### JSON Viewer

**Location**: `/json-structure`

**Features**:
- Interactive JSON visualization
- Syntax highlighting
- Collapsible nodes
- Search functionality

### Markdown Viewer

**Location**: `/markdown-structure`

**Features**:
- Markdown rendering
- Live preview
- Template library
- Export options

## ISS Tracker

Track the International Space Station in real-time.

**Location**: `/future-technology`

**Features**:
- Real-time ISS location
- Pass predictions
- Crew information
- Visual tracking on world map

## Time Management

Tools for effective time management and life tracking.

### Life Dashboard

**Features**:
- Life goals tracking
- Progress visualization
- Milestone celebration
- Reflection prompts

### Time Capsule

**Features**:
- Create digital time capsules
- Set future open dates
- Add photos, videos, and notes
- Receive notifications when ready

## Products & E-commerce

Browse and purchase products related to personal development.

**Location**: `/products`

**Features**:
- Product categories
- Secure checkout
- Membership options
- Digital and physical products

## Additional Resources

- [API Documentation](API-Documentation) - For developers integrating with the platform
- [Components](Components) - Detailed information about UI components
- [Architecture](Architecture) - System architecture and design patterns
\`\`\`

Let's create the Components documentation:
[V0_FILE]markdown:file="wiki/Components.md"
# Components Documentation

This page provides detailed information about the key components used in MJ-AHMAD OVERVIEW. Understanding these components will help developers contribute to the project or customize it for their needs.

## UI Components

### Header

**File**: `components/header.tsx`

**Description**: The main navigation header for the application.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { Header } from '@/components/header'

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}
\`\`\`

### Footer

**File**: `components/footer.tsx`

**Description**: The footer component with links, social media, and sponsor information.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { Footer } from '@/components/footer'

export default function Layout({ children }) {
  return (
    <>
      <main>{children}</main>
      <Footer />
    </>
  )
}
\`\`\`

### Theme Toggle

**File**: `components/theme-toggle.tsx`

**Description**: Button component for toggling between light and dark themes.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { ThemeToggle } from '@/components/theme-toggle'

export default function Header() {
  return (
    <header>
      <div className="flex items-center">
        <ThemeToggle />
      </div>
    </header>
  )
}
\`\`\`

### Password Protection

**File**: `components/password-protection.tsx`

**Description**: Component for password-protecting content.

**Props**:
- `password`: string - The password to check against
- `children`: ReactNode - Content to display when authenticated

**Usage**:
\`\`\`jsx
import { PasswordProtection } from '@/components/password-protection'

export default function ProtectedPage() {
  return (
    <PasswordProtection password={process.env.NEXT_PUBLIC_NOTES_PASSWORD}>
      <div>Protected content here</div>
    </PasswordProtection>
  )
}
\`\`\`

## Wellness Components

### Water Tracker

**File**: `components/wellness/water-tracker.tsx`

**Description**: Component for tracking daily water intake.

**Props**:
- `goal`: number - Daily water intake goal in ml
- `initialValue`: number - Initial water intake value

**Usage**:
\`\`\`jsx
import { WaterTracker } from '@/components/wellness/water-tracker'

export default function WellnessDashboard() {
  return (
    <div>
      <WaterTracker goal={2000} initialValue={0} />
    </div>
  )
}
\`\`\`

### Exercise Tracker

**File**: `components/wellness/exercise-tracker.tsx`

**Description**: Component for tracking exercise activities.

**Props**:
- `weeklyGoal`: number - Weekly exercise goal in minutes

**Usage**:
\`\`\`jsx
import { ExerciseTracker } from '@/components/wellness/exercise-tracker'

export default function WellnessDashboard() {
  return (
    <div>
      <ExerciseTracker weeklyGoal={150} />
    </div>
  )
}
\`\`\`

### Sleep Tracker

**File**: `components/wellness/sleep-tracker.tsx`

**Description**: Component for tracking sleep patterns.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { SleepTracker } from '@/components/wellness/sleep-tracker'

export default function WellnessDashboard() {
  return (
    <div>
      <SleepTracker />
    </div>
  )
}
\`\`\`

### Habit Tracker

**File**: `components/wellness/habit-tracker.tsx`

**Description**: Component for tracking daily habits.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { HabitTracker } from '@/components/wellness/habit-tracker'

export default function WellnessDashboard() {
  return (
    <div>
      <HabitTracker />
    </div>
  )
}
\`\`\`

## Project Focus Components

### Focus Dashboard

**File**: `components/project-focus/focus-dashboard.tsx`

**Description**: Main dashboard for project focus features.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { FocusDashboard } from '@/components/project-focus/focus-dashboard'

export default function ProjectFocusPage() {
  return <FocusDashboard />
}
\`\`\`

### Task List

**File**: `components/project-focus/task-list.tsx`

**Description**: Component for managing tasks.

**Props**:
- `projectId`: string - Optional project ID to filter tasks

**Usage**:
\`\`\`jsx
import { TaskList } from '@/components/project-focus/task-list'

export default function ProjectTasks() {
  return <TaskList projectId="project-1" />
}
\`\`\`

### Milestone Timeline

**File**: `components/project-focus/milestone-timeline.tsx`

**Description**: Visual timeline for project milestones.

**Props**:
- `projectId`: string - Project ID to display milestones for

**Usage**:
\`\`\`jsx
import { MilestoneTimeline } from '@/components/project-focus/milestone-timeline'

export default function ProjectTimeline() {
  return <MilestoneTimeline projectId="project-1" />
}
\`\`\`

### Focus Timer

**File**: `components/project-focus/focus-timer.tsx`

**Description**: Pomodoro-style timer for focused work sessions.

**Props**:
- `workDuration`: number - Work duration in minutes (default: 25)
- `breakDuration`: number - Break duration in minutes (default: 5)

**Usage**:
\`\`\`jsx
import { FocusTimer } from '@/components/project-focus/focus-timer'

export default function FocusPage() {
  return <FocusTimer workDuration={25} breakDuration={5} />
}
\`\`\`

## Meeting Preparation Components

### Meeting Dashboard

**File**: `components/meeting-preparation/meeting-dashboard.tsx`

**Description**: Dashboard for meeting preparation.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { MeetingDashboard } from '@/components/meeting-preparation/meeting-dashboard'

export default function MeetingPreparationPage() {
  return <MeetingDashboard />
}
\`\`\`

### Document Preview

**File**: `components/meeting-preparation/document-preview.tsx`

**Description**: Component for previewing meeting documents.

**Props**:
- `documentUrl`: string - URL of the document to preview

**Usage**:
\`\`\`jsx
import { DocumentPreview } from '@/components/meeting-preparation/document-preview'

export default function DocumentPage() {
  return <DocumentPreview documentUrl="/documents/meeting-agenda.pdf" />
}
\`\`\`

### Pronunciation Practice

**File**: `components/meeting-preparation/pronunciation-practice.tsx`

**Description**: Tool for practicing pronunciation of difficult terms.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { PronunciationPractice } from '@/components/meeting-preparation/pronunciation-practice'

export default function PracticePage() {
  return <PronunciationPractice />
}
\`\`\`

## Tracking System Components

### Invoice Templates

**File**: `components/tracking/invoice-templates.tsx`

**Description**: Component for selecting and customizing invoice templates.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { InvoiceTemplates } from '@/components/tracking/invoice-templates'

export default function InvoicePage() {
  return <InvoiceTemplates />
}
\`\`\`

### Batch Actions

**File**: `components/tracking/batch-actions.tsx`

**Description**: Component for performing batch actions on invoices.

**Props**:
- `selectedInvoices`: string[] - Array of selected invoice IDs

**Usage**:
\`\`\`jsx
import { BatchActions } from '@/components/tracking/batch-actions'

export default function BatchPage() {
  const selectedInvoices = ['inv-001', 'inv-002']
  return <BatchActions selectedInvoices={selectedInvoices} />
}
\`\`\`

### Advanced Reports

**File**: `components/tracking/advanced-reports.tsx`

**Description**: Component for generating advanced reports.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { AdvancedReports } from '@/components/tracking/advanced-reports'

export default function ReportsPage() {
  return <AdvancedReports />
}
\`\`\`

## Visualization Components

### JSON Viewer

**File**: `components/json-viewer.tsx`

**Description**: Component for visualizing JSON data.

**Props**:
- `data`: object - JSON data to visualize
- `expandLevel`: number - Default expand level (default: 1)

**Usage**:
\`\`\`jsx
import { JSONViewer } from '@/components/json-viewer'

export default function JsonPage() {
  const data = { name: 'John', age: 30 }
  return <JSONViewer data={data} expandLevel={2} />
}
\`\`\`

### Markdown Viewer

**File**: `components/markdown-viewer.tsx`

**Description**: Component for rendering Markdown content.

**Props**:
- `content`: string - Markdown content to render
- `className`: string - Optional CSS class

**Usage**:
\`\`\`jsx
import { MarkdownViewer } from '@/components/markdown-viewer'

export default function MarkdownPage() {
  const content = '# Hello\n\nThis is **markdown**.'
  return <MarkdownViewer content={content} />
}
\`\`\`

### ISS Tracker

**File**: `components/iss-tracker.tsx`

**Description**: Component for tracking the International Space Station.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { ISSTracker } from '@/components/iss-tracker'

export default function ISSPage() {
  return <ISSTracker />
}
\`\`\`

### Earth Moon Visualization

**File**: `components/earth-moon-visualization.tsx`

**Description**: 3D visualization of Earth and Moon.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { EarthMoonVisualization } from '@/components/earth-moon-visualization'

export default function SpacePage() {
  return <EarthMoonVisualization />
}
\`\`\`

## Utility Components

### Dhaka Time

**File**: `components/dhaka-time.tsx`

**Description**: Component displaying current time in Dhaka.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { DhakaTime } from '@/components/dhaka-time'

export default function TimePage() {
  return <DhakaTime />
}
\`\`\`

### Time Capsule

**File**: `components/time-capsule.tsx`

**Description**: Digital time capsule component.

**Props**:
- None

**Usage**:
\`\`\`jsx
import { TimeCapsule } from '@/components/time-capsule'

export default function CapsulePage() {
  return <TimeCapsule />
}
\`\`\`

## Component Best Practices

When creating new components or modifying existing ones, follow these best practices:

1. **Component Structure**:
   - Use functional components with hooks
   - Keep components focused on a single responsibility
   - Extract reusable logic into custom hooks

2. **Props**:
   - Define prop types using TypeScript interfaces
   - Provide default values for optional props
   - Use destructuring for props

3. **State Management**:
   - Use React's useState for component-level state
   - Use React Context for shared state
   - Consider using useReducer for complex state logic

4. **Styling**:
   - Use Tailwind CSS utility classes
   - Follow the project's color scheme and design system
   - Ensure components are responsive

5. **Accessibility**:
   - Use semantic HTML elements
   - Include ARIA attributes where necessary
   - Ensure keyboard navigation works
   - Maintain sufficient color contrast

6. **Performance**:
   - Memoize expensive calculations with useMemo
   - Optimize re-renders with React.memo and useCallback
   - Lazy load components when appropriate

For more detailed information on specific components, refer to the component files directly or check the API documentation.
\`\`\`

Let's create the API Documentation:
[V0_FILE]markdown:file="wiki/API-Documentation.md"
# API Documentation

This page documents the internal APIs and hooks used in MJ-AHMAD OVERVIEW. This information is primarily for developers who want to extend or modify the application.

## Table of Contents

- [Utility Functions](#utility-functions)
- [Custom Hooks](#custom-hooks)
- [Data Fetching](#data-fetching)
- [Authentication](#authentication)
- [State Management](#state-management)
- [External APIs](#external-apis)

## Utility Functions

### Date Utils

**File**: `lib/date-utils.ts`

**Functions**:

#### `formatDate(date: Date, format?: string): string`

Formats a date according to the specified format.

**Parameters**:
- `date`: Date object to format
- `format`: (Optional) Format string (default: 'YYYY-MM-DD')

**Returns**: Formatted date string

**Example**:
\`\`\`typescript
import { formatDate } from '@/lib/date-utils'

const today = new Date()
const formattedDate = formatDate(today, 'DD MMM YYYY')
console.log(formattedDate) // e.g., "21 May 2025"
\`\`\`

#### `getDaysBetween(startDate: Date, endDate: Date): number`

Calculates the number of days between two dates.

**Parameters**:
- `startDate`: Start date
- `endDate`: End date

**Returns**: Number of days

**Example**:
\`\`\`typescript
import { getDaysBetween } from '@/lib/date-utils'

const start = new Date('2025-01-01')
const end = new Date('2025-01-10')
const days = getDaysBetween(start, end)
console.log(days) // 9
\`\`\`

### JSON Validation

**File**: `lib/validate-json.ts`

**Functions**:

#### `validateJSON(json: string): { valid: boolean; error?: string }`

Validates a JSON string.

**Parameters**:
- `json`: JSON string to validate

**Returns**: Object with validation result
- `valid`: Boolean indicating if JSON is valid
- `error`: Error message if invalid

**Example**:
\`\`\`typescript
import { validateJSON } from '@/lib/validate-json'

const jsonString = '{"name": "John", "age": 30}'
const result = validateJSON(jsonString)
console.log(result) // { valid: true }
\`\`\`

### JSON Structure

**File**: `lib/json-structure.ts`

**Functions**:

#### `analyzeJSONStructure(json: object): { depth: number; keys: string[]; types: Record<string, string> }`

Analyzes the structure of a JSON object.

**Parameters**:
- `json`: JSON object to analyze

**Returns**: Object with structure analysis
- `depth`: Maximum nesting depth
- `keys`: Array of top-level keys
- `types`: Record of key-type pairs

**Example**:
\`\`\`typescript
import { analyzeJSONStructure } from '@/lib/json-structure'

const json = { name: "John", age: 30, address: { city: "New York" } }
const analysis = analyzeJSONStructure(json)
console.log(analysis)
// { depth: 2, keys: ["name", "age", "address"], types: { name: "string", age: "number", address: "object" } }
\`\`\`

## Custom Hooks

### `useLocalStorage`

**File**: `hooks/use-local-storage.ts`

**Description**: Hook for persisting state in localStorage.

**Parameters**:
- `key`: Storage key
- `initialValue`: Initial state value

**Returns**: [storedValue, setValue] tuple

**Example**:
\`\`\`typescript
import { useLocalStorage } from '@/hooks/use-local-storage'

function WaterTracker() {
  const [waterIntake, setWaterIntake] = useLocalStorage('water-intake', 0)
  
  return (
    <div>
      <p>Water intake: {waterIntake}ml</p>
      <button onClick={() => setWaterIntake(waterIntake + 250)}>
        Add 250ml
      </button>
    </div>
  )
}
\`\`\`

### `useMobile`

**File**: `hooks/use-mobile.tsx`

**Description**: Hook for detecting mobile devices.

**Parameters**: None

**Returns**: Boolean indicating if the device is mobile

**Example**:
\`\`\`typescript
import { useMobile } from '@/hooks/use-mobile'

function ResponsiveComponent() {
  const isMobile = useMobile()
  
  return (
    <div>
      {isMobile ? (
        <MobileView />
      ) : (
        <DesktopView />
      )}
    </div>
  )
}
\`\`\`

## Data Fetching

### ISS Position API

**File**: `components/iss-tracker.tsx`

**Endpoint**: `https://api.wheretheiss.at/v1/satellites/25544`

**Description**: Fetches the current position of the International Space Station.

**Response Format**:
\`\`\`json
{
  "latitude": 50.11,
  "longitude": -118.36,
  "altitude": 408.05,
  "velocity": 27635.5,
  "visibility": "daylight",
  "timestamp": 1653325788
}
\`\`\`

**Example Usage**:
\`\`\`typescript
async function fetchISSPosition() {
  try {
    const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544')
    const data = await response.json()
    return data
  } catch (error) {
    console.error('Error fetching ISS position:', error)
    return null
  }
}
\`\`\`

## Authentication

### Password Protection

**File**: `components/password-protection.tsx`

**Description**: Simple password-based authentication for protected content.

**Usage**:
\`\`\`typescript
import { PasswordProtection } from '@/components/password-protection'

function ProtectedPage() {
  return (
    <PasswordProtection password={process.env.NEXT_PUBLIC_NOTES_PASSWORD}>
      <div>Protected content here</div>
    </PasswordProtection>
  )
}
\`\`\`

## State Management

The application primarily uses React's built-in state management with hooks. For more complex state, custom hooks and context providers are used.

### Theme Context

**File**: `components/theme-provider.tsx`

**Description**: Context provider for theme state (light/dark).

**Usage**:
\`\`\`typescript
import { useTheme } from '@/components/theme-provider'

function ThemedComponent() {
  const { theme, setTheme } = useTheme()
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Toggle theme
      </button>
    </div>
  )
}
\`\`\`

## External APIs

### Translation Service

**File**: `lib/translation-service.ts`

**Description**: Service for translating text between languages.

**Functions**:

#### `translateText(text: string, targetLanguage: string): Promise<string>`

Translates text to the target language.

**Parameters**:
- `text`: Text to translate
- `targetLanguage`: Target language code (e.g., 'fr', 'es')

**Returns**: Promise resolving to translated text

**Example**:
\`\`\`typescript
import { translateText } from '@/lib/translation-service'

async function translateExample() {
  try {
    const translated = await translateText('Hello world', 'fr')
    console.log(translated) // "Bonjour le monde"
  } catch (error) {
    console.error('Translation error:', error)
  }
}
\`\`\`

### Audio Controller

**File**: `lib/audio-controller.ts`

**Description**: Service for audio playback and recording.

**Functions**:

#### `playAudio(src: string): Promise<void>`

Plays an audio file.

**Parameters**:
- `src`: Audio file source URL

**Returns**: Promise that resolves when audio starts playing

**Example**:
\`\`\`typescript
import { playAudio } from '@/lib/audio-controller'

function AudioPlayer() {
  const handlePlay = async () => {
    try {
      await playAudio('/sounds/success.mp3')
    } catch (error) {
      console.error('Audio playback error:', error)
    }
  }
  
  return (
    <button onClick={handlePlay}>Play Sound</button>
  )
}
\`\`\`

## API Best Practices

When working with APIs in this project, follow these best practices:

1. **Error Handling**:
   - Always wrap API calls in try/catch blocks
   - Provide meaningful error messages
   - Consider implementing retry logic for network requests

2. **Loading States**:
   - Show loading indicators during API calls
   - Implement skeleton screens for better UX

3. **Caching**:
   - Cache API responses when appropriate
   - Use SWR or React Query for data fetching and caching

4. **Authentication**:
   - Secure sensitive API endpoints
   - Don't expose API keys in client-side code

5. **Rate Limiting**:
   - Implement rate limiting for API calls
   - Use debouncing for user-triggered API calls

6. **Data Validation**:
   - Validate API responses
   - Handle edge cases and empty states

For more information on specific APIs or to contribute new APIs, please refer to the [Contributing Guidelines](Contributing-to-the-Wiki).
\`\`\`

Let's create the Architecture documentation:
[V0_FILE]markdown:file="wiki/Architecture.md"
# Architecture

This page provides an overview of the MJ-AHMAD OVERVIEW architecture, explaining the system design, data flow, and key architectural decisions.

## System Overview

MJ-AHMAD OVERVIEW is built as a Next.js application using the App Router, with a client-side architecture for most features and server-side rendering for improved SEO and initial load performance.

![Architecture Diagram](../public/placeholder-ias72.png)

## Key Technologies

- **Framework**: Next.js 14+ with App Router
- **UI Library**: React 18+
- **Styling**: Tailwind CSS with shadcn/ui components
- **State Management**: React Context API and Hooks
- **Data Storage**: Local Storage, IndexedDB
- **3D Rendering**: Three.js
- **Data Visualization**: Chart.js
- **Authentication**: Simple password protection

## Directory Structure

\`\`\`
MJ-AHMAD-OVERVIEW/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   ├── [feature]/          # Feature-specific pages
│   └── api/                # API routes
├── components/             # React components
│   ├── ui/                 # UI components (shadcn)
│   ├── [feature]/          # Feature-specific components
│   └── ...                 # Shared components
├── hooks/                  # Custom React hooks
├── lib/                    # Utility functions and services
├── public/                 # Static assets
│   ├── data/               # JSON and Markdown data files
│   ├── sounds/             # Audio files
│   └── ...                 # Images and other assets
└── ...                     # Configuration files
\`\`\`

## Data Flow

### Client-Side Data Flow

1. **User Interaction**: User interacts with a component
2. **State Update**: Component updates local state or context
3. **Persistence**: Data is persisted to localStorage or IndexedDB if needed
4. **UI Update**: UI re-renders to reflect the new state

### Server-Side Data Flow

1. **Request**: Browser requests a page
2. **Server Rendering**: Next.js server renders the initial HTML
3. **Hydration**: Client-side JavaScript takes over and makes the page interactive
4. **API Calls**: Client makes API calls to fetch additional data as needed

## Key Architectural Patterns

### Component Architecture

The application follows a component-based architecture with:

1. **Page Components**: Top-level components that represent routes
2. **Feature Components**: Components specific to a feature area
3. **UI Components**: Reusable UI elements
4. **Layout Components**: Components that define page structure

### State Management

State management follows these principles:

1. **Component State**: Local state for component-specific data
2. **Context API**: Shared state for related components
3. **Custom Hooks**: Encapsulated state logic for reusability
4. **Persistence**: Local storage for persisting state across sessions

### Authentication

The application uses a simple password-based authentication system:

1. **Password Protection**: Content is protected with environment variable passwords
2. **Client-Side Validation**: Passwords are validated on the client side
3. **Session Storage**: Authentication state is stored in session storage

## Performance Optimizations

1. **Code Splitting**: Automatic code splitting with Next.js
2. **Lazy Loading**: Components and routes are loaded on demand
3. **Image Optimization**: Next.js Image component for optimized images
4. **Memoization**: React.memo and useMemo for expensive calculations
5. **Debouncing**: Input handlers are debounced to reduce unnecessary renders

## Security Considerations

1. **Environment Variables**: Sensitive data stored in environment variables
2. **Client-Side Security**: Limited to basic protection, not suitable for highly sensitive data
3. **Content Security Policy**: Implemented for additional security
4. **Input Validation**: All user inputs are validated

## Deployment Architecture

The application is designed to be deployed on Vercel or similar platforms:

1. **Static Generation**: Pages are pre-rendered at build time when possible
2. **Server-Side Rendering**: Dynamic pages use server-side rendering
3. **Edge Functions**: API routes can be deployed as edge functions for better performance
4. **CDN**: Static assets are served from a CDN

## Testing Strategy

1. **Unit Tests**: Individual components and functions
2. **Integration Tests**: Component interactions
3. **End-to-End Tests**: Complete user flows
4. **Visual Regression Tests**: UI appearance

## Future Architecture Considerations

1. **Backend Integration**: Adding a proper backend for data persistence
2. **Authentication**: Implementing more robust authentication
3. **Real-time Features**: Adding WebSocket support for real-time collaboration
4. **Offline Support**: Implementing service workers for offline functionality
5. **Internationalization**: Adding multi-language support

## Design Decisions and Trade-offs

### Client-Side vs. Server-Side

The application primarily uses client-side rendering for:
- Better interactivity
- Reduced server load
- Offline capabilities

Server-side rendering is used for:
- Initial page load
- SEO optimization
- Content that doesn't require interactivity

### Local Storage vs. Backend Database

The application uses local storage instead of a backend database for:
- Simplicity of deployment
- Privacy (data stays on the user's device)
- No need for user accounts

Trade-offs:
- Limited storage capacity
- Data not synchronized across devices
- Data can be lost if browser storage is cleared

### Custom Components vs. UI Libraries

The application uses shadcn/ui components for:
- Consistent design
- Accessibility
- Reduced development time

Custom components are created when:
- Specific functionality is needed
- UI requirements don't match existing components
- Performance optimizations are required

## Contributing to the Architecture

When contributing to the project architecture:

1. **Follow Existing Patterns**: Maintain consistency with the existing architecture
2. **Document Changes**: Update this document when making architectural changes
3. **Consider Performance**: Evaluate the performance impact of architectural decisions
4. **Maintain Simplicity**: Avoid unnecessary complexity
5. **Test Thoroughly**: Ensure changes don't break existing functionality

For more detailed information on specific architectural aspects, refer to the code documentation and comments.
\`\`\`

Let's create the Contributing to the Wiki page:
[V0_FILE]markdown:file="wiki/Contributing-to-the-Wiki.md"
# Contributing to the Wiki

This guide explains how to contribute to the MJ-AHMAD OVERVIEW wiki. The wiki is an important resource for users and developers, and your contributions help make it better.

## Getting Started

### Prerequisites

To contribute to the wiki, you'll need:

1. A GitHub account
2. Basic knowledge of Markdown
3. Understanding of the MJ-AHMAD OVERVIEW project

### Wiki Structure

The wiki is organized into several main sections:

1. **Home**: Overview and navigation
2. **Getting Started**: Basic usage instructions
3. **Installation Guide**: Setup instructions
4. **Features**: Detailed feature documentation
5. **Components**: Component documentation
6. **API Documentation**: Internal APIs and hooks
7. **Architecture**: System design and data flow
8. **FAQ**: Frequently asked questions
9. **Troubleshooting**: Common issues and solutions

## How to Contribute

### Editing Existing Pages

1. Navigate to the wiki page you want to edit
2. Click the "Edit" button in the top-right corner
3. Make your changes in the editor
4. Preview your changes to ensure they look correct
5. Add a commit message describing your changes
6. Click "Save Page"

### Creating New Pages

1. Navigate to the wiki home page
2. Click the "New Page" button
3. Enter a title for your page
4. Write your content using Markdown
5. Preview your changes
6. Add a commit message
7. Click "Save Page"
8. Update the Home page to include a link to your new page

### Linking Pages

To link to another wiki page, use the following syntax:

\`\`\`markdown
[Page Title](Page-Title)
\`\`\`

For example:

\`\`\`markdown
See the [Installation Guide](Installation-Guide) for setup instructions.
\`\`\`

### Adding Images

To add images to the wiki:

1. Upload the image to the repository's `public` directory
2. Reference the image in your wiki page:

\`\`\`markdown
![Alt Text](../public/image-name.png)
\`\`\`

## Markdown Guidelines

### Headers

Use headers to organize your content:

\`\`\`markdown
# Main Title (H1)
## Section (H2)
### Subsection (H3)
#### Minor Subsection (H4)
\`\`\`

### Lists

For unordered lists:

\`\`\`markdown
- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
\`\`\`

For ordered lists:

\`\`\`markdown
1. First step
2. Second step
   1. Substep 2.1
   2. Substep 2.2
\`\`\`

### Code Blocks

For inline code, use backticks:

\`\`\`markdown
Use the `useState` hook for component state.
\`\`\`

For code blocks, use triple backticks with a language identifier:

\`\`\`markdown
\\`\`\`typescript
function example() {
  const [state, setState] = useState(0);
  return state;
}
\```
\`\`\`

### Tables

Create tables using the following syntax:

\`\`\`markdown
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |
\`\`\`

### Emphasis

\`\`\`markdown
*Italic text*
**Bold text**
***Bold italic text***
\`\`\`

## Style Guide

### General Guidelines

1. **Be Clear and Concise**: Write in simple, direct language
2. **Use Active Voice**: "Click the button" instead of "The button should be clicked"
3. **Be Consistent**: Use consistent terminology throughout the wiki
4. **Include Examples**: Provide code examples and use cases
5. **Use Visuals**: Add screenshots, diagrams, or GIFs when helpful

### Page Structure

Each page should follow this general structure:

1. **Title**: Clear, descriptive title (H1)
2. **Introduction**: Brief overview of the topic
3. **Table of Contents**: For longer pages
4. **Main Content**: Organized with headers and subheaders
5. **Examples**: Practical examples of usage
6. **Related Resources**: Links to related pages or external resources

### Naming Conventions

1. **Page Titles**: Use Title Case (e.g., "Getting Started")
2. **File Names**: Use kebab-case for file names (e.g., "getting-started.md")
3. **Code Examples**: Follow the project's coding style

## Review Process

After submitting your changes:

1. Other contributors may review your changes
2. You may receive feedback or suggestions for improvement
3. Make any requested changes
4. Once approved, your changes will be merged into the wiki

## Best Practices

1. **Keep Information Updated**: Update documentation when features change
2. **Cross-Reference**: Link related topics within the wiki
3. **Be Comprehensive**: Cover edge cases and potential issues
4. **Consider All Users**: Write for both beginners and experienced users
5. **Test Instructions**: Verify that your instructions work as described

## Getting Help

If you need help with wiki contributions:

1. Ask in the [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions)
2. Join our [Discord community](https://discord.gg/wQkqJw3Y)
3. Contact the project maintainers

Thank you for contributing to the MJ-AHMAD OVERVIEW wiki! Your efforts help make the project more accessible and useful for everyone.
\`\`\`

Let's create the FAQ page:
[V0_FILE]markdown:file="wiki/FAQ.md"
# Frequently Asked Questions (FAQ)

This page answers common questions about MJ-AHMAD OVERVIEW. If you don't find your question here, please check the [Troubleshooting](Troubleshooting) page or ask in our [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions).

## General Questions

### What is MJ-AHMAD OVERVIEW?

### Is MJ-AHMAD OVERVIEW free to use?

Yes, MJ-AHMAD OVERVIEW is an open-source project released under the MIT License. You can use it for free, modify it, and even use it in commercial projects.

### Can I contribute to MJ-AHMAD OVERVIEW?

We welcome contributions from everyone. Please see our [Contributing Guidelines](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/CONTRIBUTING.md) for more information on how to get started.

### What technologies does MJ-AHMAD OVERVIEW use?

MJ-AHMAD OVERVIEW is built with:
- Next.js (React framework)
- Tailwind CSS (styling)
- shadcn/ui (UI components)
- Three.js (3D visualizations)
- Chart.js (data visualization)

### How do I report a bug?

You can report bugs by opening an issue on our [GitHub Issues page](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues). Please use the bug report template and provide as much detail as possible.

### How do I request a new feature?

Feature requests can be submitted through our [GitHub Issues page](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues) using the feature request template.

## Installation & Setup

### What are the system requirements?

- Node.js 18.x or higher
- npm or yarn
- Modern web browser (Chrome, Firefox, Safari, or Edge)

### How do I install MJ-AHMAD OVERVIEW?

Please see our detailed [Installation Guide](Installation-Guide) for step-by-step instructions.

### Why am I getting a "Module not found" error?

This usually happens when:
1. You haven't installed all dependencies (`npm install` or `yarn install`)
2. You're using an incorrect import path
3. The module you're trying to import doesn't exist

Try running `npm install` or `yarn install` again to ensure all dependencies are installed.

### How do I set up environment variables?

Create a `.env.local` file in the root directory of your project and add the required variables:

\`\`\`
NEXT_PUBLIC_NOTES_PASSWORD=your_password_here
NEXT_PUBLIC_NOTES_PASSWORD_2=your_second_password_here
\`\`\`

### Can I deploy MJ-AHMAD OVERVIEW to Vercel/Netlify/other platforms?

Yes, MJ-AHMAD OVERVIEW can be deployed to any platform that supports Next.js applications. We recommend Vercel for the best compatibility and performance.

## Features & Usage

### How do I access password-protected sections?

Password-protected sections require the password you set in your environment variables. Enter the password when prompted to access these sections.

### Does MJ-AHMAD OVERVIEW store my data?

MJ-AHMAD OVERVIEW stores your data locally in your browser's localStorage or IndexedDB. Your data does not leave your device unless you explicitly export it.

### Can I use MJ-AHMAD OVERVIEW offline?

Most features work offline once the application has been loaded. However, some features like the ISS Tracker require an internet connection.

### How do I track my water intake?

Navigate to the Wellness Dashboard (`/wellness-dashboard`) and use the Water Tracker component. Click the "+" button to add water intake and track your progress toward your daily goal.

### How do I create a new task?

Go to the Project Focus section (`/project-focus`) and use the Task List component. Click "Add Task," enter the task details, and save.

### Can I export my data?

Yes, most sections include export functionality. Look for the "Export" or "Download" buttons in the respective components.

### How do I customize invoice templates?

In the Tracking System section (`/tracking-system`), select "Invoice Templates" and choose a template to customize. You can modify colors, layout, and content as needed.

## Troubleshooting

### Why isn't my data saving?

This could be due to:
1. Your browser's localStorage being full
2. Privacy settings blocking localStorage
3. Using incognito/private browsing mode

Try clearing some browser storage or using a different browser.

### The application is running slowly. How can I improve performance?

- Close unused browser tabs
- Clear your browser cache
- Reduce the amount of data stored in the application
- Use Chrome or Firefox for best performance

### Why are some features not working on mobile?

Some features may have limited functionality on mobile devices due to screen size constraints or browser capabilities. We're continuously working to improve mobile support.

### I forgot my password for protected sections. What can I do?

Since the password is stored in your environment variables, you can change it by updating your `.env.local` file and restarting the application.

## Development & Customization

### How do I create a custom component?

1. Create a new file in the `components` directory
2. Write your component using React and Tailwind CSS
3. Import and use it in your pages or other components

See the [Components](Components) documentation for more details.

### Can I modify the existing components?

Yes, you can modify any component to suit your needs. We recommend creating a copy of the component with a different name to avoid conflicts with future updates.

### How do I add a new page?

Create a new file in the `app` directory following the Next.js App Router conventions. For example, to add a page at `/my-new-page`, create `app/my-new-page/page.tsx`.

### How do I change the theme colors?

You can modify the theme colors in the `tailwind.config.ts` file. Look for the `colors` section and update the values as needed.

### How do I contribute code to the project?

Please see our [Contributing Guidelines](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/CONTRIBUTING.md) for detailed information on contributing code.

## Support & Community

### Where can I get help if I'm stuck?

- Check this FAQ and the [Troubleshooting](Troubleshooting) page
- Ask in [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions)
- Join our [Discord community](https://discord.gg/wQkqJw3Y)

### How can I support the project?

- [GitHub Sponsors](https://github.com/sponsors/MJ-AHMAD)
- [Ko-fi](https://ko-fi.com/mjahmad)
- Contribute code, documentation, or bug reports
- Share the project with others

### Are there any video tutorials available?

We're working on creating video tutorials. Check our GitHub repository or Discord server for updates.

### Can I use MJ-AHMAD OVERVIEW for commercial purposes?

Yes, the MIT License allows for commercial use. However, please review the full license terms in the [LICENSE](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/blob/main/LICENSE) file.

### How do I stay updated on new releases?

- Watch the GitHub repository
- Follow [@mjahmad25](https://twitter.com/mjahmad25) on Twitter
- Join our [Discord server](https://discord.gg/wQkqJw3Y)
\`\`\`

Finally, let's create the Troubleshooting page:
[V0_FILE]markdown:file="wiki/Troubleshooting.md"
# Troubleshooting

This page provides solutions to common issues you might encounter while using MJ-AHMAD OVERVIEW. If you don't find a solution to your problem here, please ask for help in our [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions) or [Discord community](https://discord.gg/wQkqJw3Y).

## Table of Contents

- [Installation Issues](#installation-issues)
- [Environment Variables](#environment-variables)
- [Performance Issues](#performance-issues)
- [Data Persistence](#data-persistence)
- [UI and Display Issues](#ui-and-display-issues)
- [Feature-Specific Issues](#feature-specific-issues)
- [Mobile Device Issues](#mobile-device-issues)
- [Browser Compatibility](#browser-compatibility)
- [Development Issues](#development-issues)

## Installation Issues

### Error: Cannot find module 'next'

**Problem**: When running `npm run dev` or `yarn dev`, you get an error saying the module 'next' cannot be found.

**Solution**:
1. Make sure you've installed all dependencies:
   \`\`\`bash
   npm install
   # or
   yarn install
   \`\`\`
2. If that doesn't work, try deleting the `node_modules` folder and reinstalling:
   \`\`\`bash
   rm -rf node_modules
   npm install
   # or
   yarn install
   \`\`\`

### Error: Port 3000 is already in use

**Problem**: When starting the development server, you get an error saying port 3000 is already in use.

**Solution**:
1. Find and close the process using port 3000, or
2. Start the server on a different port:
   \`\`\`bash
   PORT=3001 npm run dev
   # or
   PORT=3001 yarn dev
   \`\`\`

### Error: Node.js version is not supported

**Problem**: You get an error about an unsupported Node.js version.

**Solution**:
1. Check your Node.js version:
   \`\`\`bash
   node -v
   \`\`\`
2. If it's below v18.x, install a newer version:
   - Using nvm (recommended):
     \`\`\`bash
     nvm install 18
     nvm use 18
     \`\`\`
   - Or download from [nodejs.org](https://nodejs.org/)

## Environment Variables

### Error: Cannot read environment variables

**Problem**: The application can't access environment variables, resulting in features not working correctly.

**Solution**:
1. Make sure you've created a `.env.local` file in the root directory
2. Ensure the variable names are correct:
   \`\`\`
   NEXT_PUBLIC_NOTES_PASSWORD=your_password_here
   NEXT_PUBLIC_NOTES_PASSWORD_2=your_second_password_here
   \`\`\`
3. Restart the development server after making changes to environment variables

### Password protection not working

**Problem**: You can't access password-protected sections even with the correct password.

**Solution**:
1. Check that your environment variables are set correctly
2. Make sure you're using the exact password (passwords are case-sensitive)
3. Clear your browser's localStorage and try again:
   - Open browser DevTools (F12)
   - Go to Application > Local Storage
   - Clear the storage for your domain
   - Refresh the page

## Performance Issues

### Application runs slowly

**Problem**: The application is sluggish or unresponsive.

**Solution**:
1. Close unused browser tabs and applications
2. Clear your browser cache:
   - Chrome: Settings > Privacy and security > Clear browsing data
   - Firefox: Options > Privacy & Security > Cookies and Site Data > Clear Data
3. Reduce the amount of data stored in the application
4. Try a different browser (Chrome or Firefox recommended)
5. If using a development build, switch to a production build:
   \`\`\`bash
   npm run build
   npm start
   # or
   yarn build
   yarn start
   \`\`\`

### High memory usage

**Problem**: The application uses a lot of memory, causing your system to slow down.

**Solution**:
1. Close and reopen the browser
2. Disable browser extensions that might be interfering
3. If using 3D visualizations, try disabling them temporarily
4. Reduce the amount of data stored in the application

## Data Persistence

### Data not saving

**Problem**: Your data isn't being saved between sessions.

**Solution**:
1. Make sure you're not using incognito/private browsing mode
2. Check if your browser allows localStorage:
   - Open browser DevTools (F12)
   - Go to Application > Local Storage
   - Verify you can add items
3. Check if your browser's storage is full:
   - Clear some localStorage data from other sites
   - Export and backup your data, then clear the application's storage

### Data disappeared after browser update

**Problem**: Your data is gone after updating your browser.

**Solution**:
1. Check if your browser has a backup feature
2. In the future, regularly export your data as a backup
3. If using Chrome, check if your data is still available in an older user profile

## UI and Display Issues

### Layout appears broken

**Problem**: The layout is misaligned, overlapping, or otherwise broken.

**Solution**:
1. Try resizing your browser window
2. Clear your browser cache and reload
3. Try a different browser
4. Check if you have custom CSS or zoom settings that might be interfering

### Dark mode not working correctly

**Problem**: Dark mode doesn't apply properly or has visual glitches.

**Solution**:
1. Toggle dark mode off and on again
2. Check if your browser or OS has a forced dark mode setting that might be interfering
3. Clear your browser cache and reload
4. Check if you have browser extensions that modify page styles

### Images not loading

**Problem**: Images are missing or show as broken links.

**Solution**:
1. Check your internet connection
2. Clear your browser cache and reload
3. Try a different browser
4. If you're running the application locally, make sure all image files are in the correct locations

## Feature-Specific Issues

### Water Tracker not updating

**Problem**: The Water Tracker doesn't update when adding water intake.

**Solution**:
1. Check if localStorage is enabled in your browser
2. Try clicking the button multiple times
3. Refresh the page and try again
4. Clear the application's localStorage and start fresh

### ISS Tracker not showing the current position

**Problem**: The ISS Tracker doesn't show the current position of the International Space Station.

**Solution**:
1. Check your internet connection
2. The API might be temporarily unavailable; try again later
3. Check if your browser blocks third-party requests
4. Try a different browser

### Focus Timer stops when switching tabs

**Problem**: The Focus Timer pauses or behaves incorrectly when switching browser tabs.

**Solution**:
1. This is expected behavior in some browsers to save resources
2. Keep the tab visible or use a separate timer
3. Some browsers allow background processes; check your browser settings

## Mobile Device Issues

### Features not working on mobile

**Problem**: Some features don't work correctly on mobile devices.

**Solution**:
1. Make sure you're using a modern mobile browser
2. Try landscape orientation for better layout
3. Some features may have limited functionality on mobile due to screen size or browser capabilities
4. Try using the desktop version of the site if your mobile browser supports it

### Touch interactions not working

**Problem**: Touch interactions (swipe, pinch, etc.) don't work as expected.

**Solution**:
1. Make sure your device and browser support touch events
2. Try updating your mobile browser
3. Some features may require mouse interaction and don't have touch equivalents yet

## Browser Compatibility

### Application doesn't work in Internet Explorer

**Problem**: The application doesn't load or behaves incorrectly in Internet Explorer.

**Solution**:
Internet Explorer is not supported. Please use a modern browser like:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari

### Visual glitches in specific browsers

**Problem**: You see visual glitches or layout issues in specific browsers.

**Solution**:
1. Try updating your browser to the latest version
2. Clear your browser cache and reload
3. Try disabling browser extensions
4. Report the issue on our [GitHub Issues page](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues) with details about your browser and OS

## Development Issues

### Build fails with TypeScript errors

**Problem**: The build process fails with TypeScript type errors.

**Solution**:
1. Make sure you're using the correct TypeScript version
2. Run `npx tsc --noEmit` to see all type errors
3. Fix the errors one by one, starting with the most critical ones
4. If you're having trouble with third-party library types, check if you need to install `@types/` packages

### Component styles not applying

**Problem**: Tailwind CSS styles are not being applied to components.

**Solution**:
1. Make sure Tailwind is properly configured
2. Check if you're using the correct class names
3. Make sure the component is properly imported and rendered
4. Try running `npm run build:css` or equivalent to rebuild the CSS

### Server Actions not working

**Problem**: Next.js Server Actions are not working as expected.

**Solution**:
1. Make sure you're using the 'use server' directive at the top of your server action files
2. Check if you're using the correct import paths
3. Verify that your Next.js version supports Server Actions
4. Check the server logs for any errors

### Changes not reflecting in development server

**Problem**: Your code changes are not reflected when running the development server.

**Solution**:
1. Make sure you saved the file
2. Check if the development server is watching for changes
3. Try restarting the development server
4. Clear your browser cache and reload

## Still Having Issues?

If you're still experiencing problems after trying these solutions:

1. Search for similar issues in our [GitHub Issues](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/issues)
2. Ask for help in our [GitHub Discussions](https://github.com/MJ-AHMAD/MJ-AHMAD-OVERVIEW/discussions)
3. Join our [Discord community](https://discord.gg/wQkqJw3Y) for real-time support
4. Contact the project maintainer at [mjahmad2024@outlook.com](mailto:mjahmad2024@outlook.com)

When reporting issues, please provide:
- Detailed description of the problem
- Steps to reproduce
- Browser and OS information
- Screenshots or videos if applicable
- Any error messages from the console
\`\`\`
[V0_FILE]markdown:file="CONTRIBUTING.md"
# Contributing to Collective Compass

First off, thank you for considering contributing to Collective Compass! It's people like you that make this project such a great tool for everyone.

## Code of Conduct

This project and everyone participating in it is governed by the [Collective Compass Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [contact@collectivecompass.org](mailto:contact@collectivecompass.org).

## How Can I Contribute?

### Reporting Bugs

This section guides you through submitting a bug report. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports.

**Before Submitting A Bug Report:**

* Check the [issues](https://github.com/collective-compass/collective-compass/issues) to see if the problem has already been reported. If it has and the issue is still open, add a comment to the existing issue instead of opening a new one.
* Use the [issue template](https://github.com/collective-compass/collective-compass/blob/main/.github/ISSUE_TEMPLATE/bug_report.md) to create the report.

**How Do I Submit A Good Bug Report?**

* Use a clear and descriptive title.
* Describe the exact steps to reproduce the problem.
* Provide specific examples to demonstrate the steps.
* Describe the behavior you observed after following the steps.
* Explain which behavior you expected to see instead and why.
* Include screenshots if possible.
* Include your environment details (OS, browser, etc.).

### Suggesting Enhancements

This section guides you through submitting an enhancement suggestion, including completely new features and minor improvements to existing functionality.

**Before Submitting An Enhancement Suggestion:**

* Check if the enhancement has already been suggested in the [issues](https://github.com/collective-compass/collective-compass/issues).
* Use the [feature request template](https://github.com/collective-compass/collective-compass/blob/main/.github/ISSUE_TEMPLATE/feature_request.md).

**How Do I Submit A Good Enhancement Suggestion?**

* Use a clear and descriptive title.
* Provide a step-by-step description of the suggested enhancement.
* Provide specific examples to demonstrate the steps.
* Describe the current behavior and explain which behavior you expected to see instead and why.
* Explain why this enhancement would be useful to most users.
* List some other applications where this enhancement exists, if applicable.

### Your First Code Contribution

Unsure where to begin contributing? You can start by looking through these `beginner` and `help-wanted` issues:

* [Beginner issues](https://github.com/collective-compass/collective-compass/labels/good%20first%20issue) - issues which should only require a few lines of code, and a test or two.
* [Help wanted issues](https://github.com/collective-compass/collective-compass/labels/help%20wanted) - issues which should be a bit more involved than `beginner` issues.

### Pull Requests

* Fill in the required template
* Do not include issue numbers in the PR title
* Include screenshots and animated GIFs in your pull request whenever possible
* Follow the [JavaScript](#javascript-styleguide) and [CSS](#css-styleguide) styleguides
* Include thoughtfully-worded, well-structured tests
* Document new code
* End all files with a newline

## Styleguides

### Git Commit Messages

* Use the present tense ("Add feature" not "Added feature")
* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
* Limit the first line to 72 characters or less
* Reference issues and pull requests liberally after the first line
* Consider starting the commit message with an applicable emoji:
    * 🎨 `:art:` when improving the format/structure of the code
    * 🐎 `:racehorse:` when improving performance
    * 🚱 `:non-potable_water:` when plugging memory leaks
    * 📝 `:memo:` when writing docs
    * 🐛 `:bug:` when fixing a bug
    * 🔥 `:fire:` when removing code or files
    * 💚 `:green_heart:` when fixing the CI build
    * ✅ `:white_check_mark:` when adding tests
    * 🔒 `:lock:` when dealing with security
    * ⬆️ `:arrow_up:` when upgrading dependencies
    * ⬇️ `:arrow_down:` when downgrading dependencies
    * 👕 `:shirt:` when removing linter warnings

### JavaScript Styleguide

All JavaScript code is linted with [ESLint](https://eslint.org/) and formatted with [Prettier](https://prettier.io/).

* Prefer the object spread operator (`{...anotherObj}`) to `Object.assign()`
* Use functional components with hooks over class components
* Use async/await over Promise chains
* Use template literals over string concatenation
* Use destructuring where appropriate

### CSS Styleguide

* Use Tailwind CSS utility classes
* Follow the component-based styling approach
* Use CSS variables for theming
* Ensure responsive design for all components

## Additional Notes

### Issue and Pull Request Labels

This section lists the labels we use to help us track and manage issues and pull requests.

* `bug` - Issues that are bugs
* `documentation` - Issues or PRs related to documentation
* `duplicate` - Issues that are duplicates of other issues
* `enhancement` - Issues that are feature requests
* `good first issue` - Issues that are good for newcomers
* `help wanted` - Issues that need assistance
* `invalid` - Issues that are invalid or non-reproducible
* `question` - Issues that are questions
* `wontfix` - Issues that won't be fixed

## Thank You!

Your contributions to open source, large or small, make projects like this possible. Thank you for taking the time to contribute.
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

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

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/cta-section.tsx" isQuickEdit="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Github } from "lucide-react"
import Link from "next/link"

// Export both as named export and default export to be safe
export function CtaSection() {
  return (
    <section className="py-12 md:py-20 relative overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-900 to-purple-900 opacity-90"></div>
        <div className="absolute inset-0 bg-[url('/mountain-climber-sunrise.png')] bg-cover bg-center mix-blend-overlay"></div>
      </div>

<div className="container mx-auto px-4 relative z-10">
        <motion.div
          className="max-w-3xl mx-auto text-center text-white"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          <h2 className="text-2xl md:text-3xl font-bold mb-4">Join Our Open-Source Community</h2>
          <p className="text-base md:text-xl text-blue-100 mb-8">
            Collective Compass is built by the community, for the community. Your contributions, big or small, make a
            difference in shaping this project for everyone.
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="https://github.com/collective-compass/collective-compass" target="_blank">
              <Button className="bg-white text-blue-900 hover:bg-blue-50 w-full sm:w-auto">
                <Github className="mr-2 h-4 w-4" />
                Contribute on GitHub
              </Button>
            </Link>
            <Link href="https://github.com/collective-compass/collective-compass/blob/main/CONTRIBUTING.md">
              <Button className="bg-blue-700 hover:bg-blue-600 w-full sm:w-auto">How to Contribute</Button>
            </Link>
            <Link href="https://discord.gg/collectivecompass">
              <Button className="bg-purple-700 hover:bg-purple-600 w-full sm:w-auto">Join the Discussion</Button>
            </Link>
          </div>
        </motion.div>
      </div>
    </section>
  )
}

// Also export as default
export default CtaSection
[V0_FILE]png:file="public/diverse-person-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-person-portrait-oBJN8W7MJrri0llZKsufZBiYCr8b1R.png"
[V0_FILE]png:file="public/woman-developer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-developer-JRmxsPpkru0NJ4kALJV5AxDVQqhWr8.png"
[V0_FILE]png:file="public/man-developer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/man-developer-EDPuHAusQHJqlGq5w1cwFgs5B6rh3S.png"
[V0_FILE]png:file="public/woman-engineer-at-work.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-engineer-at-work-6E3qWraoZcTAByAWXRz4gLZ5bHqhtQ.png"
[V0_FILE]png:file="public/developer-working.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-working-s0GkSP5mtK9sAWGaoG5jurlSlbne6s.png"
[V0_FILE]png:file="public/programmer.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/programmer-SIBLa4DZLNXtqwFM9W2gW4l08C1ucs.png"
[V0_FILE]png:file="public/developer-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-woman-qoSacCzs9bB3QcUEMQMMu1VowpIpIH.png"
[V0_FILE]typescriptreact:file="components/introduction-section.tsx"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Code, Lightbulb, Heart, GraduationCap, MessageSquare, Users } from "lucide-react"

export function IntroductionSection() {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.3,
      },
    },
  }

const item = {
    hidden: { opacity: 0, y: 10 },
    show: { opacity: 1, y: 0, transition: { duration: 0.3 } },
  }

return (
    <section className="py-10 md:py-16 bg-white dark:bg-slate-950">
      <div className="container mx-auto px-4">
        <Card className="border-0 shadow-lg bg-gradient-to-r from-slate-50 to-white dark:from-slate-900 dark:to-slate-800">
          <CardContent className="p-4 md:p-8">
            <motion.div
              className="space-y-3 md:space-y-4"
              variants={container}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, margin: "-50px" }}
            >
              <motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-blue-100 dark:bg-blue-900/30">
                  <Code className="w-4 h-4 md:w-5 md:h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <p className="text-base md:text-lg font-medium">👋 Welcome to INFINITY NEXUS</p>
              </motion.div>

<motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-purple-100 dark:bg-purple-900/30">
                  <Lightbulb className="w-4 h-4 md:w-5 md:h-5 text-purple-600 dark:text-purple-400" />
                </div>
                <p className="text-sm md:text-base text-slate-700 dark:text-slate-300">
                  👀 An open-source hub for technological innovation and personal growth
                </p>
              </motion.div>

<motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-rose-100 dark:bg-rose-900/30">
                  <Heart className="w-4 h-4 md:w-5 md:h-5 text-rose-600 dark:text-rose-400" />
                </div>
                <p className="text-sm md:text-base text-slate-700 dark:text-slate-300">
                  💞️ Envisioned by MJ AHMAD and dedicated to the world for collective benefit
                </p>
              </motion.div>

<motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-amber-100 dark:bg-amber-900/30">
                  <Users className="w-4 h-4 md:w-5 md:h-5 text-amber-600 dark:text-amber-400" />
                </div>
                <p className="text-sm md:text-base text-slate-700 dark:text-slate-300">
                  💞️ Open to everyone - your contributions are welcome to enhance this vision
                </p>
              </motion.div>

<motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/30">
                  <GraduationCap className="w-4 h-4 md:w-5 md:h-5 text-emerald-600 dark:text-emerald-400" />
                </div>
                <p className="text-sm md:text-base text-slate-700 dark:text-slate-300">
                  📫 Committed to lifelong learning and personal development for all
                </p>
              </motion.div>

<motion.div variants={item} className="flex items-center gap-3">
                <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-cyan-100 dark:bg-cyan-900/30">
                  <MessageSquare className="w-4 h-4 md:w-5 md:h-5 text-cyan-600 dark:text-cyan-400" />
                </div>
                <p className="text-sm md:text-base text-slate-700 dark:text-slate-300">
                  😄 Join our growing community of technology enthusiasts and collaborators
                </p>
              </motion.div>
            </motion.div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}
[V0_FILE]markdown:file="README.md"
# INFINITY NEXUS & TRUSTED ALLY

<div align="center">
  <img src="public/abstract-geometric-mj.png" alt="MJ AHMAD Logo" width="200" />
  <h1>MJ AHMAD's Vision</h1>
  <p>An open-source productivity suite with tools for wellness tracking, project management, and personal development - envisioned by MJ AHMAD and dedicated to benefit everyone.</p>
  
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
  [![GitHub Sponsors](https://img.shields.io/github/sponsors/mj-ahmad?style=flat&logo=github&logoColor=white&color=pink)](https://github.com/sponsors/mj-ahmad)
  [![Ko-fi](https://img.shields.io/badge/Ko--fi-Support-ff5f5f?style=flat&logo=ko-fi)](https://ko-fi.com/mjahmad)
  [![GitHub issues](https://img.shields.io/github/issues/mj-ahmad/infinity-nexus)](https://github.com/mj-ahmad/infinity-nexus/issues)
  [![GitHub stars](https://img.shields.io/github/stars/mj-ahmad/infinity-nexus)](https://github.com/mj-ahmad/infinity-nexus/stargazers)
</div>

## 🌟 Overview

INFINITY NEXUS is an open-source productivity suite designed to enhance personal and professional growth, originally envisioned by MJ AHMAD and now open to contributions from everyone. It includes various tools for wellness tracking, project management, meeting preparation, and more - all created with the goal of benefiting everyone equally.

## ✨ Features

- **Life Dashboard**: Track water intake, exercise, sleep, and habits
- **Project Focus**: Manage tasks, milestones, and team collaboration
- **Meeting Preparation**: Prepare for meetings with document previews and pronunciation practice
- **Tracking System**: Advanced invoice management and reporting
- **Personal Notes**: Password-protected notes and templates
- **JSON & Markdown Structure**: Visualize and manage structured data
- **ISS Tracker**: Real-time International Space Station tracking
- **Time Management**: Life dashboard and time capsule features

## 🚀 Getting Started

### Prerequisites

- Node.js 18.x or higher
- npm or yarn

### Installation

1. Clone the repository:
   \`\`\`bash
   git clone https://github.com/mj-ahmad/infinity-nexus.git
   cd infinity-nexus
   \`\`\`

2. Install dependencies:
   \`\`\`bash
   npm install
   # or
   yarn install
   \`\`\`

3. Set up environment variables:
   Create a `.env.local` file in the root directory and add:
   \`\`\`
   NEXT_PUBLIC_NOTES_PASSWORD=your_password_here
   NEXT_PUBLIC_NOTES_PASSWORD_2=your_second_password_here
   \`\`\`

4. Run the development server:
   \`\`\`bash
   npm run dev
   # or
   yarn dev
   \`\`\`

5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.

## 🛠️ Technologies

- **Framework**: [Next.js](https://nextjs.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) with [shadcn/ui](https://ui.shadcn.com/)
- **State Management**: React Context API and Hooks
- **3D Visualization**: Three.js
- **Data Visualization**: Chart.js
- **Markdown Rendering**: React Markdown

## 👥 Contributing

While this project was originally envisioned by MJ AHMAD, contributions from everyone are welcome! Whether you're fixing a bug, adding a feature, or improving documentation, your help is appreciated.

### How to Contribute

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

Please read our [Contributing Guidelines](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md) before submitting a pull request.

## 💖 Support

If you find this project helpful, please consider supporting it:

- [GitHub Sponsors](https://github.com/sponsors/mj-ahmad)
- [Ko-fi](https://ko-fi.com/mjahmad)

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 📬 Contact

- GitHub: [@mj-ahmad](https://github.com/mj-ahmad)
- Discord: [Join our community](https://discord.gg/mjahmad)
- Twitter: [@MJ_Ahmad](https://twitter.com/MJ_Ahmad)
- Email: [contact@mjahmad.com](mailto:contact@mjahmad.com)

## 🙏 Acknowledgements

- MJ AHMAD for the original vision and dedication to open source
- All contributors who have helped shape this project
- The open source community for their invaluable tools and libraries
- Everyone who has shared their knowledge and experiences to make this project better
\`\`\`

Let's update the CommunityProgress component to reflect your vision:
[V0_FILE]png:file="public/coder.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coder-j1ou72jdEVJQK9nQyfTu6OCQKHpDWj.png"
[V0_FILE]png:file="public/woman-coder.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-coder-H9UwCKtK7Qndjh8MvoGxYEGeJR9yo2.png"
[V0_FILE]png:file="public/software-developer-workspace.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-developer-workspace-HyLIEOdUw8sHGUAG9VqkPEOtpSMQCk.png"
[V0_FILE]png:file="public/programmer-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/programmer-man-6bwtzECduXoI4APMEOtAzc4v1Wba02.png"
[V0_FILE]typescriptreact:file="components/personal-journey.tsx"
"use client"

import { useState } from "react"
import Image from "next/image"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Award, Briefcase, Lightbulb, Heart, Globe, GraduationCap } from "lucide-react"

export function PersonalJourney() {
  const [activeTab, setActiveTab] = useState("story")

const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
  }

const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

return (
    <section className="py-12 bg-gradient-to-b from-white to-slate-50 dark:from-slate-950 dark:to-slate-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">My Journey</h2>
          <p className="text-lg text-slate-600 dark:text-slate-400 max-w-3xl mx-auto">
            The path that led to the creation of INFINITY NEXUS & TRUSTED ALLY
          </p>
        </div>

<div className="text-center mb-6">
                <h3 className="text-2xl font-bold mb-2">MJ AHMAD</h3>
                <p className="text-primary font-medium">Visionary & Founder</p>
                <div className="flex flex-wrap justify-center gap-2 mt-3">
                  <Badge variant="outline" className="bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
                    Technologist
                  </Badge>
                  <Badge
                    variant="outline"
                    className="bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800"
                  >
                    Educator
                  </Badge>
                  <Badge
                    variant="outline"
                    className="bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800"
                  >
                    Visionary
                  </Badge>
                  <Badge
                    variant="outline"
                    className="bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800"
                  >
                    Community Builder
                  </Badge>
                </div>
              </div>
            </div>
          </motion.div>

<motion.div
            className="lg:col-span-2"
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeIn}
          >
            <Card className="border-0 shadow-lg">
              <CardContent className="p-0">
                <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
                  <TabsList className="w-full grid grid-cols-4 rounded-none">
                    <TabsTrigger value="story">My Story</TabsTrigger>
                    <TabsTrigger value="education">Education</TabsTrigger>
                    <TabsTrigger value="career">Career</TabsTrigger>
                    <TabsTrigger value="vision">Vision</TabsTrigger>
                  </TabsList>

<TabsContent value="story" className="p-6 space-y-4">
                    <motion.div
                      variants={staggerContainer}
                      initial="hidden"
                      animate={activeTab === "story" ? "visible" : "hidden"}
                      className="space-y-6"
                    >
                      <motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <BookOpen className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">The Beginning</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            My journey began in Bangladesh, where I developed a deep passion for technology and its
                            potential to transform lives. From an early age, I was fascinated by how digital tools could
                            connect people and create opportunities regardless of geographical boundaries.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Heart className="h-6 w-6 text-rose-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Finding Purpose</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            Through my experiences working with diverse communities, I discovered my purpose: to create
                            tools and systems that empower individuals to reach their full potential. I believe that
                            technology, when designed with empathy and accessibility in mind, can be a powerful
                            equalizer.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Globe className="h-6 w-6 text-blue-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Global Perspective</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            My journey has taken me across different cultures and communities, giving me a global
                            perspective on the challenges and opportunities we face collectively. This diverse
                            experience has shaped my approach to creating solutions that are culturally sensitive and
                            globally relevant.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Lightbulb className="h-6 w-6 text-amber-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">The Spark</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            The idea for INFINITY NEXUS & TRUSTED ALLY came during a period of reflection on how I could
                            combine my technical skills with my passion for community development. I envisioned a
                            platform that would not only provide practical tools but also foster a sense of community
                            and shared purpose.
                          </p>
                        </div>
                      </motion.div>
                    </motion.div>
                  </TabsContent>

<TabsContent value="education" className="p-6 space-y-4">
                    <motion.div
                      variants={staggerContainer}
                      initial="hidden"
                      animate={activeTab === "education" ? "visible" : "hidden"}
                      className="space-y-6"
                    >
                      <motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <GraduationCap className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Formal Education</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            I hold a degree in Computer Science with a focus on human-computer interaction. My academic
                            journey provided me with a strong foundation in both technical skills and understanding user
                            needs.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <BookOpen className="h-6 w-6 text-emerald-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Continuous Learning</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            Beyond formal education, I am committed to lifelong learning. I regularly participate in
                            workshops, online courses, and conferences to stay at the forefront of technological
                            innovations and best practices in community building.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Award className="h-6 w-6 text-amber-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Certifications & Achievements</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            I have earned certifications in project management, user experience design, and community
                            leadership. These credentials reflect my commitment to excellence and continuous improvement
                            in my areas of expertise.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Globe className="h-6 w-6 text-blue-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Global Perspective</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            My educational journey has been enriched by exposure to diverse educational systems and
                            philosophies. This global perspective has been invaluable in creating solutions that
                            resonate with people from different cultural backgrounds.
                          </p>
                        </div>
                      </motion.div>
                    </motion.div>
                  </TabsContent>

<TabsContent value="career" className="p-6 space-y-4">
                    <motion.div
                      variants={staggerContainer}
                      initial="hidden"
                      animate={activeTab === "career" ? "visible" : "hidden"}
                      className="space-y-6"
                    >
                      <motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Briefcase className="h-6 w-6 text-primary" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Professional Experience</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            My career spans over a decade in technology and community development. I've worked with
                            startups, educational institutions, and non-profit organizations, gaining diverse experience
                            in creating impactful digital solutions.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Lightbulb className="h-6 w-6 text-amber-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Innovation Leadership</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            Throughout my career, I've led initiatives focused on technological innovation for social
                            impact. I've guided teams in developing solutions that address real-world challenges while
                            maintaining technical excellence.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <GraduationCap className="h-6 w-6 text-blue-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Mentorship & Education</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            Sharing knowledge has been a consistent thread throughout my career. I've mentored emerging
                            technologists and taught courses on programming, design thinking, and community building,
                            helping to nurture the next generation of innovators.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Heart className="h-6 w-6 text-rose-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Community Engagement</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            Beyond my formal roles, I've been actively involved in community initiatives, organizing
                            hackathons, workshops, and events that bring people together to solve problems
                            collaboratively. These experiences have reinforced my belief in the power of
                            community-driven innovation.
                          </p>
                        </div>
                      </motion.div>
                    </motion.div>
                  </TabsContent>

<TabsContent value="vision" className="p-6 space-y-4">
                    <motion.div
                      variants={staggerContainer}
                      initial="hidden"
                      animate={activeTab === "vision" ? "visible" : "hidden"}
                      className="space-y-6"
                    >
                      <motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Lightbulb className="h-6 w-6 text-amber-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">The Genesis of INFINITY NEXUS & TRUSTED ALLY</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            The vision for this project emerged from my desire to create a comprehensive platform that
                            addresses the multifaceted needs of individuals and communities in our digital age. I
                            envisioned tools that would not only enhance productivity but also promote well-being and
                            meaningful connection.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Globe className="h-6 w-6 text-blue-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Global Impact</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            My vision extends beyond creating useful tools—I aim to foster a global community of
                            individuals committed to personal growth and collective progress. By making these resources
                            freely available as an open-source project, I hope to remove barriers to access and empower
                            people worldwide.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-1">
                          <Heart className="h-6 w-6 text-rose-500" />
                        </div>
                        <div>
                          <h4 className="text-xl font-semibold mb-2">Core Values</h4>
                          <p className="text-slate-600 dark:text-slate-400">
                            This project is built on the values of accessibility, transparency, community collaboration,
                            and excellence. I believe that technology should serve humanity, not the other way around,
                            and that the best solutions emerge when diverse perspectives come together in a spirit of
                            shared purpose.
                          </p>
                        </div>
                      </motion.div>

<motion.div variants={fadeIn} className="flex gap-4">
                        <div className="flex-shrink-0 mt-</article></body></html>