121:"ExplicitChatIdProvider" 122:I[903690,["$4a","$4b","$4c","$4d","$4e","$4f","$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","$77","$78","$79","$7a","$7b","$8d","$7e","$8e","$8f","$90","$91","$92","$93","$94","$95","$96","$97","$98","$99","$9a","$9b","$9c","$85","$9d","$86","$9e","$87","$9f","$a0","$a1","$a2","$a3","$a4","$80"],"$121"] 123:I[838238,["$4a","$4b","$4c","$4d","$4e","$4f","$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","$77","$78","$79","$7a","$7b","$8d","$7e","$8e","$8f","$90","$91","$92","$93","$94","$95","$96","$97","$98","$99","$9a","$9b","$9c","$85","$9d","$86","$9e","$87","$9f","$a0","$a1","$a2","$a3","$a4","$80"],"SWRDataProvider"] 125:[] 126:[["b_ZNcWfJQiZHh",null],["b_IbjnIDV4tGP",null],["b_nGn1PfRbZgp",null],["b_YLtqawZShBi",null]] 127:[["b_ZNcWfJQiZHh",{"templateVersionId":null,"templateCanonId":null}],["b_IbjnIDV4tGP",{"templateVersionId":null,"templateCanonId":null}],["b_nGn1PfRbZgp",{"templateVersionId":null,"templateCanonId":null}],["b_YLtqawZShBi",{"templateVersionId":null,"templateCanonId":null}]] 128:[["b_HcWzIzomGsA","$D2025-09-03T17:48:11.883Z"],["b_iefjouKW4NJ","$D2025-09-03T17:49:28.614Z"],["b_uLIqpA843C3","$D2025-09-03T17:50:50.268Z"],["b_4BQKxBzYcRH","$D2025-09-03T17:51:54.317Z"],["b_Iyb3DYHcvJ9","$D2025-09-03T17:53:26.800Z"],["b_AaZF6s6ZIl6","$D2025-09-03T17:59:18.976Z"],["b_sTO5zlXITK0","$D2025-09-03T18:01:01.120Z"],["b_7vLS2RLcqK7","$D2025-09-03T18:16:16.320Z"],["b_lYwFjNhMn83","$D2025-09-03T18:34:52.662Z"],["b_LSdyOAkJR5U","$D2025-09-03T18:35:19.486Z"],["b_A3yTmLg4XD9","$D2025-09-03T18:36:41.826Z"],["b_oxzFPxEXgor","$D2025-09-03T18:37:04.944Z"],["b_NiZnXDObWSW","$D2025-09-03T18:37:21.359Z"],["b_tGYlXfP8ouC","$D2025-09-03T18:37:54.068Z"],["b_lWhpGHVdU1O","$D2025-09-03T19:12:26.084Z"],["b_9uUfWSORn4P","$D2025-09-03T19:12:49.901Z"],["b_6Syc2QttC4q","$D2025-09-03T19:26:11.560Z"],["b_Qr7qErumtvc","$D2025-09-03T19:27:20.560Z"],["b_BQrl53DMW3C","$D2025-09-03T19:38:04.960Z"],["b_RSB27dU3oQS","$D2025-09-03T19:38:23.993Z"],["b_Vu2mw7r38q7","$D2025-09-03T20:42:24.051Z"],["b_bTWAbBiN1yO","$D2025-09-03T20:42:42.031Z"],["b_khElHVnsz7Z","$D2025-09-03T20:51:38.522Z"],["b_sCkmbORb53z","$D2025-09-03T20:52:58.040Z"],["b_EH58i3jONF4","$D2025-09-03T20:53:38.972Z"],["b_j7t8l3R2joy","$D2025-09-03T21:13:51.157Z"],["b_Wmn9KPoEA65","$D2025-09-03T21:14:02.783Z"],["b_6ddAwibA13E","$D2025-09-03T21:14:45.474Z"],["b_J6kP56wTGcA","$D2025-12-04T21:32:44.846Z"],["b_TUCqbj4WiTP","$D2025-12-04T21:33:10.286Z"],["b_IQiJqK6DFqh","$D2025-12-08T10:54:35.724Z"],["b_rdlOrSlM336","$D2025-12-08T10:54:49.496Z"],["b_ggjaPrOW9uV","$D2025-12-08T10:56:34.502Z"],["b_EqJGzQbSvAb","$D2025-12-08T10:57:29.698Z"],["b_R6DmZtCFiJQ","$D2025-12-08T10:59:31.645Z"],["b_2cwgm4mNFbm","$D2025-12-08T11:02:05.877Z"],["b_9U5QmdxN5St","$D2025-12-08T11:06:47.162Z"],["b_Ck7EQCTLclL","$D2025-12-08T11:07:27.232Z"],["b_VeTSsh2PUhD","$D2025-12-08T11:11:39.692Z"],["b_SyhAVMjVzL9","$D2025-12-08T11:23:32.135Z"],["b_zg4ab9a9WOT","$D2025-12-08T11:31:34.444Z"],["b_bqvPFjUTWPq","$D2025-12-11T12:48:07.224Z"],["b_w5KAhSrqUOZ","$D2025-12-11T12:58:12.105Z"],["b_h0MNJbHPUIV","$D2025-12-14T12:51:57.093Z"],["b_KSB1c3UV6lu","$D2025-12-14T16:30:41.496Z"],["b_BWZF0w7DE43","$D2025-12-14T16:31:51.077Z"],["b_37HphdSZa1p","$D2025-12-14T16:33:57.626Z"],["b_FMepKMRxc3l","$D2025-12-14T16:35:38.300Z"],["b_EI9FnSO72u4","$D2025-12-20T13:30:10.340Z"],["b_7Sob7pB5W0R","$D2025-12-22T15:30:49.515Z"],["b_g8goe98PJyc","$D2025-12-22T15:33:30.442Z"],["b_ZNcWfJQiZHh","$D2025-12-22T15:38:32.943Z"],["b_IbjnIDV4tGP","$D2025-12-22T15:39:30.890Z"],["b_nGn1PfRbZgp","$D2025-12-22T19:37:37.525Z"],["b_YLtqawZShBi","$D2025-12-22T19:38:24.839Z"]] 129:[["b_ZNcWfJQiZHh",false],["b_IbjnIDV4tGP",false],["b_nGn1PfRbZgp",false],["b_YLtqawZShBi",false]] 12a:[["b_ZNcWfJQiZHh","$undefined"],["b_IbjnIDV4tGP","$undefined"],["b_nGn1PfRbZgp","$undefined"],["b_YLtqawZShBi","$undefined"]] 12b:[["b_ZNcWfJQiZHh",null],["b_IbjnIDV4tGP",null],["b_nGn1PfRbZgp",null],["b_YLtqawZShBi",null]] 12c:[["b_ZNcWfJQiZHh",true],["b_IbjnIDV4tGP",true],["b_nGn1PfRbZgp",true],["b_YLtqawZShBi",true]] 12d:[["b_ZNcWfJQiZHh",true],["b_IbjnIDV4tGP",true],["b_nGn1PfRbZgp",true],["b_YLtqawZShBi",true]] 12e:[] 12f:T87fdd,[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for Buddies World Wide - warm, global, trustworthy */ --background: oklch(0.995 0.002 90); /* warm white */ --foreground: oklch(0.25 0.02 260); /* deep charcoal */ --card: oklch(1 0 0); /* pure white */ --card-foreground: oklch(0.25 0.02 260); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 260); --primary: oklch(0.55 0.22 145); /* vibrant green - buddies/420 theme */ --primary-foreground: oklch(1 0 0); --secondary: oklch(0.65 0.18 45); /* warm orange - global/friendly */ --secondary-foreground: oklch(1 0 0); --muted: oklch(0.96 0.01 90); --muted-foreground: oklch(0.45 0.02 260); --accent: oklch(0.58 0.2 280); /* purple accent */ --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0.01 90); --input: oklch(0.96 0.01 90); --ring: oklch(0.55 0.22 145 / 0.3); --chart-1: oklch(0.55 0.22 145); --chart-2: oklch(0.65 0.18 45); --chart-3: oklch(0.58 0.2 280); --chart-4: oklch(0.6 0.15 200); --chart-5: oklch(0.55 0.22 25); --radius: 0.625rem; --sidebar: oklch(0.98 0.005 90); --sidebar-foreground: oklch(0.25 0.02 260); --sidebar-primary: oklch(0.55 0.22 145); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.65 0.18 45); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.92 0.01 90); --sidebar-ring: oklch(0.55 0.22 145 / 0.3); } .dark { /* Dark mode for Buddies World Wide */ --background: oklch(0.15 0.01 260); --foreground: oklch(0.95 0.01 90); --card: oklch(0.2 0.01 260); --card-foreground: oklch(0.95 0.01 90); --popover: oklch(0.18 0.01 260); --popover-foreground: oklch(0.95 0.01 90); --primary: oklch(0.65 0.2 145); --primary-foreground: oklch(0.15 0.01 260); --secondary: oklch(0.7 0.18 45); --secondary-foreground: oklch(0.15 0.01 260); --muted: oklch(0.25 0.01 260); --muted-foreground: oklch(0.7 0.01 90); --accent: oklch(0.65 0.18 280); --accent-foreground: oklch(0.15 0.01 260); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(0.95 0.01 90); --border: oklch(0.28 0.01 260); --input: oklch(0.25 0.01 260); --ring: oklch(0.65 0.2 145 / 0.3); --chart-1: oklch(0.65 0.2 145); --chart-2: oklch(0.7 0.18 45); --chart-3: oklch(0.65 0.18 280); --chart-4: oklch(0.65 0.15 200); --chart-5: oklch(0.6 0.2 25); --sidebar: oklch(0.18 0.01 260); --sidebar-foreground: oklch(0.95 0.01 90); --sidebar-primary: oklch(0.65 0.2 145); --sidebar-primary-foreground: oklch(0.15 0.01 260); --sidebar-accent: oklch(0.7 0.18 45); --sidebar-accent-foreground: oklch(0.15 0.01 260); --sidebar-border: oklch(0.28 0.01 260); --sidebar-ring: oklch(0.65 0.2 145 / 0.3); } @theme inline { --font-sans: var(--font-inter), system-ui, sans-serif; --font-mono: var(--font-jetbrains-mono), monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" export default function SignupPage() { return (

ConnectSync

Create your account Join thousands of creators building amazing bio-links with AI-powered insights.

Or continue with

Already have an account? Sign in

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@stripe/stripe-js": "7.9.0", "@stripe/react-stripe-js": "4.0.0", "stripe": "18.5.0", "@supabase/ssr": "0.7.0", "@prisma/client": "6.15.0", "crypto": "1.0.1", "next-auth": "4.24.11", "nanoid": "5.1.5" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/dashboard/builder/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Eye, Save, ArrowLeft, LinkIcon, Instagram, Twitter, Youtube, Globe, Mail, Phone, GripVertical, Trash2, } from "lucide-react" import Link from "next/link" interface BioLink { id: string type: "link" | "social" | "contact" title: string url: string icon: string isActive: boolean } export default function BuilderPage() { const [bioLinks, setBioLinks] = useState([ { id: "1", type: "link", title: "My Website", url: "https://johndoe.com", icon: "globe", isActive: true, }, { id: "2", type: "social", title: "Follow me on Instagram", url: "https://instagram.com/johndoe", icon: "instagram", isActive: true, }, ]) const [profileData, setProfileData] = useState({ name: "John Doe", bio: "Content creator & entrepreneur. Sharing insights about tech and business.", avatar: "", customUrl: "johndoe", }) const addNewLink = (type: "link" | "social" | "contact") => { const newLink: BioLink = { id: Date.now().toString(), type, title: "", url: "", icon: type === "link" ? "globe" : type === "social" ? "instagram" : "mail", isActive: true, } setBioLinks([...bioLinks, newLink]) } const updateLink = (id: string, updates: Partial) => { setBioLinks(bioLinks.map((link) => (link.id === id ? { ...link, ...updates } : link))) } const removeLink = (id: string) => { setBioLinks(bioLinks.filter((link) => link.id !== id)) } const getIconComponent = (iconName: string) => { const icons = { globe: Globe, instagram: Instagram, twitter: Twitter, youtube: Youtube, mail: Mail, phone: Phone, link: LinkIcon, } const IconComponent = icons[iconName as keyof typeof icons] || Globe return } return (

{/* Header */}

Bio-Link Builder

Create and customize your bio-link page

{/* Builder Panel */}

Profile Links Design Profile Information Set up your profile details and custom URL

Display Name setProfileData({ ...profileData, name: e.target.value })} placeholder="Your name" />

Bio

setProfileData({ ...profileData, bio: e.target.value })}
                        placeholder="Tell people about yourself..."
                        rows={3}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="customUrl">Custom URL</Label>
                      <div className="flex">
                        <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
                          connectsync.app/
                        </span>
                        <Input
                          id="customUrl"
                          value={profileData.customUrl}
                          onChange={(e) => setProfileData({ ...profileData, customUrl: e.target.value })}
                          className="rounded-l-none"
                          placeholder="your-username"
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="links" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Add Links</CardTitle>
                    <CardDescription>Add different types of links to your bio-link page</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-3 gap-2">
                      <Button variant="outline" onClick={() => addNewLink("link")} className="h-20 flex-col">
                        <Globe className="h-6 w-6 mb-2" />
                        <span className="text-xs">Website</span>
                      </Button>
                      <Button variant="outline" onClick={() => addNewLink("social")} className="h-20 flex-col">
                        <Instagram className="h-6 w-6 mb-2" />
                        <span className="text-xs">Social</span>
                      </Button>
                      <Button variant="outline" onClick={() => addNewLink("contact")} className="h-20 flex-col">
                        <Mail className="h-6 w-6 mb-2" />
                        <span className="text-xs">Contact</span>
                      </Button>
                    </div>
                  </CardContent>
                </Card>

<div className="space-y-3">
                  {bioLinks.map((link, index) => (
                    <Card key={link.id}>
                      <CardContent className="p-4">
                        <div className="flex items-center gap-3">
                          <GripVertical className="h-4 w-4 text-muted-foreground cursor-move" />
                          <div className="flex-1 space-y-3">
                            <div className="flex items-center gap-2">
                              {getIconComponent(link.icon)}
                              <Badge variant="secondary" className="text-xs">
                                {link.type}
                              </Badge>
                              <Switch
                                checked={link.isActive}
                                onCheckedChange={(checked) => updateLink(link.id, { isActive: checked })}
                              />
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                              <Input
                                placeholder="Link title"
                                value={link.title}
                                onChange={(e) => updateLink(link.id, { title: e.target.value })}
                              />
                              <Input
                                placeholder="URL"
                                value={link.url}
                                onChange={(e) => updateLink(link.id, { url: e.target.value })}
                              />
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeLink(link.id)}
                            className="text-destructive hover:text-destructive"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>

<TabsContent value="design" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Design & Theme</CardTitle>
                    <CardDescription>Customize the appearance of your bio-link page</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>Theme</Label>
                      <div className="grid grid-cols-3 gap-2">
                        <Button variant="outline" className="h-16 bg-white border-2">
                          Light
                        </Button>
                        <Button variant="outline" className="h-16 bg-gray-900 text-white border-2">
                          Dark
                        </Button>
                        <Button
                          variant="outline"
                          className="h-16 bg-gradient-to-br from-purple-500 to-pink-500 text-white border-2"
                        >
                          Gradient
                        </Button>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label>Button Style</Label>
                      <div className="grid grid-cols-2 gap-2">
                        <Button variant="outline" className="justify-start bg-transparent">
                          Rounded
                        </Button>
                        <Button variant="outline" className="justify-start rounded-none bg-transparent">
                          Square
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>

{/* Preview Panel */}
          <div className="lg:sticky lg:top-8">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Eye className="h-4 w-4" />
                  Live Preview
                </CardTitle>
                <CardDescription>See how your bio-link page will look to visitors</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="bg-background border border-border rounded-lg p-6 max-w-sm mx-auto">
                  {/* Profile Section */}
                  <div className="text-center mb-6">
                    <div className="w-20 h-20 bg-primary/10 rounded-full mx-auto mb-4 flex items-center justify-center">
                      <span className="text-2xl font-semibold text-primary">{profileData.name.charAt(0) || "J"}</span>
                    </div>
                    <h2 className="text-lg font-semibold text-foreground mb-2">{profileData.name || "Your Name"}</h2>
                    <p className="text-sm text-muted-foreground">{profileData.bio || "Your bio will appear here..."}</p>
                  </div>

{/* Links Section */}
                  <div className="space-y-3">
                    {bioLinks
                      .filter((link) => link.isActive && link.title && link.url)
                      .map((link) => (
                        <div
                          key={link.id}
                          className="flex items-center gap-3 p-3 bg-card border border-border rounded-lg hover:bg-accent/50 transition-colors cursor-pointer"
                        >
                          {getIconComponent(link.icon)}
                          <span className="text-sm font-medium text-foreground">{link.title}</span>
                        </div>
                      ))}
                    {bioLinks.filter((link) => link.isActive && link.title && link.url).length === 0 && (
                      <div className="text-center py-8 text-muted-foreground">
                        <p className="text-sm">Add some links to see them here</p>
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/[username]/page.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Globe, Instagram, Twitter, Youtube, Mail, Phone, ExternalLink } from "lucide-react"
import { notFound } from "next/navigation"

interface BioLinkPageProps {
  params: {
    username: string
  }
}

// Mock data - in real app this would come from database
const getUserData = (username: string) => {
  if (username === "johndoe") {
    return {
      name: "John Doe",
      bio: "Content creator & entrepreneur. Sharing insights about tech and business.",
      avatar: "",
      links: [
        {
          id: "1",
          type: "link",
          title: "My Website",
          url: "https://johndoe.com",
          icon: "globe",
          isActive: true,
        },
        {
          id: "2",
          type: "social",
          title: "Follow me on Instagram",
          url: "https://instagram.com/johndoe",
          icon: "instagram",
          isActive: true,
        },
        {
          id: "3",
          type: "social",
          title: "YouTube Channel",
          url: "https://youtube.com/johndoe",
          icon: "youtube",
          isActive: true,
        },
        {
          id: "4",
          type: "contact",
          title: "Email Me",
          url: "mailto:john@example.com",
          icon: "mail",
          isActive: true,
        },
      ],
    }
  }
  return null
}

const getIconComponent = (iconName: string) => {
  const icons = {
    globe: Globe,
    instagram: Instagram,
    twitter: Twitter,
    youtube: Youtube,
    mail: Mail,
    phone: Phone,
  }
  const IconComponent = icons[iconName as keyof typeof icons] || Globe
  return <IconComponent className="h-5 w-5" />
}

export default function BioLinkPage({ params }: BioLinkPageProps) {
  const userData = getUserData(params.username)

if (!userData) {
    notFound()
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <Card className="border-0 shadow-lg">
          <CardContent className="p-8">
            {/* Profile Section */}
            <div className="text-center mb-8">
              <div className="w-24 h-24 bg-primary/10 rounded-full mx-auto mb-4 flex items-center justify-center">
                <span className="text-3xl font-semibold text-primary">{userData.name.charAt(0)}</span>
              </div>
              <h1 className="text-2xl font-bold text-foreground mb-3">{userData.name}</h1>
              <p className="text-muted-foreground leading-relaxed">{userData.bio}</p>
            </div>

{/* Links Section */}
            <div className="space-y-4">
              {userData.links
                .filter((link) => link.isActive)
                .map((link) => (
                  <a
                    key={link.id}
                    href={link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-4 p-4 bg-card border border-border rounded-lg hover:bg-accent/50 transition-all duration-200 hover:scale-[1.02] group"
                  >
                    <div className="flex-shrink-0 text-primary">{getIconComponent(link.icon)}</div>
                    <span className="flex-1 font-medium text-foreground group-hover:text-primary transition-colors">
                      {link.title}
                    </span>
                    <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
                  </a>
                ))}
            </div>

{/* Footer */}
            <div className="text-center mt-8 pt-6 border-t border-border">
              <p className="text-xs text-muted-foreground">
                Created with{" "}
                <a href="/" className="text-primary hover:underline font-medium">
                  ConnectSync
                </a>
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/ai-summaries/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { Sparkles, Copy, Download, Trash2, FileText, Zap, ArrowRight, Loader2, CheckCircle } from "lucide-react"

interface Summary {
  id: string
  title: string
  originalText: string
  summary: string
  type: "brief" | "detailed" | "bullet-points"
  createdAt: string
  wordCount: number
}

export default function AISummariesPage() {
  const [inputText, setInputText] = useState("")
  const [summaryType, setSummaryType] = useState<"brief" | "detailed" | "bullet-points">("brief")
  const [isGenerating, setIsGenerating] = useState(false)
  const [summaries, setSummaries] = useState<Summary[]>([
    {
      id: "1",
      title: "Product Launch Strategy",
      originalText: "Our new product launch strategy focuses on...",
      summary:
        "A comprehensive product launch strategy emphasizing digital marketing, influencer partnerships, and customer feedback integration to maximize market penetration and brand awareness.",
      type: "brief",
      createdAt: "2 hours ago",
      wordCount: 1250,
    },
    {
      id: "2",
      title: "Market Research Findings",
      originalText: "Based on our recent market research...",
      summary:
        "• 73% of target audience prefers mobile-first experiences\n• Social media engagement increased by 45% in Q4\n• Customer acquisition cost decreased by 23%\n• Brand awareness improved significantly in key demographics",
      type: "bullet-points",
      createdAt: "1 day ago",
      wordCount: 890,
    },
  ])

const generateSummary = async () => {
    if (!inputText.trim()) return

setIsGenerating(true)

// Simulate AI processing
    await new Promise((resolve) => setTimeout(resolve, 3000))

const newSummary: Summary = {
      id: Date.now().toString(),
      title: `Summary ${summaries.length + 1}`,
      originalText: inputText,
      summary: generateMockSummary(inputText, summaryType),
      type: summaryType,
      createdAt: "Just now",
      wordCount: inputText.split(" ").length,
    }

setSummaries([newSummary, ...summaries])
    setInputText("")
    setIsGenerating(false)
  }

const generateMockSummary = (text: string, type: "brief" | "detailed" | "bullet-points"): string => {
    const wordCount = text.split(" ").length
    if (type === "bullet-points") {
      return `• Key insight from your ${wordCount}-word content\n• Main theme focuses on core business objectives\n• Strategic recommendations for implementation\n• Actionable next steps identified`
    } else if (type === "detailed") {
      return `This comprehensive analysis of your ${wordCount}-word content reveals several key insights and strategic opportunities. The main themes center around business growth, customer engagement, and operational efficiency. The content demonstrates a clear understanding of market dynamics and presents actionable recommendations for implementation. Key takeaways include strategic positioning, competitive advantages, and measurable outcomes that align with business objectives.`
    } else {
      return `A concise analysis of your ${wordCount}-word content highlighting the main themes of business strategy, customer focus, and growth opportunities with actionable insights for implementation.`
    }
  }

const copySummary = (summary: string) => {
    navigator.clipboard.writeText(summary)
  }

const deleteSummary = (id: string) => {
    setSummaries(summaries.filter((s) => s.id !== id))
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-3 mb-2">
            <Sparkles className="h-6 w-6 text-secondary" />
            <h1 className="text-2xl font-semibold text-foreground">AI Content Summaries</h1>
          </div>
          <p className="text-muted-foreground">
            Transform long-form content into concise, engaging summaries for your bio-links and social media.
          </p>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Input Panel */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Zap className="h-5 w-5 text-secondary" />
                  Generate Summary
                </CardTitle>
                <CardDescription>
                  Paste your content below and let AI create the perfect summary for your audience.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="content">Content to Summarize</Label>
                  <Textarea
                    id="content"
                    placeholder="Paste your blog post, article, or any long-form content here..."
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                    rows={8}
                    className="resize-none"
                  />
                  <div className="flex justify-between text-sm text-muted-foreground">
                    <span>{inputText.split(" ").filter(Boolean).length} words</span>
                    <span>Recommended: 100+ words for best results</span>
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Summary Type</Label>
                  <div className="grid grid-cols-3 gap-2">
                    <Button
                      variant={summaryType === "brief" ? "default" : "outline"}
                      onClick={() => setSummaryType("brief")}
                      className="h-auto p-3 flex-col"
                    >
                      <FileText className="h-4 w-4 mb-1" />
                      <span className="text-xs">Brief</span>
                    </Button>
                    <Button
                      variant={summaryType === "detailed" ? "default" : "outline"}
                      onClick={() => setSummaryType("detailed")}
                      className="h-auto p-3 flex-col"
                    >
                      <FileText className="h-4 w-4 mb-1" />
                      <span className="text-xs">Detailed</span>
                    </Button>
                    <Button
                      variant={summaryType === "bullet-points" ? "default" : "outline"}
                      onClick={() => setSummaryType("bullet-points")}
                      className="h-auto p-3 flex-col"
                    >
                      <FileText className="h-4 w-4 mb-1" />
                      <span className="text-xs">Bullets</span>
                    </Button>
                  </div>
                </div>

<Button
                  onClick={generateSummary}
                  disabled={!inputText.trim() || isGenerating}
                  className="w-full"
                  size="lg"
                >
                  {isGenerating ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Generating Summary...
                    </>
                  ) : (
                    <>
                      <Sparkles className="mr-2 h-4 w-4" />
                      Generate AI Summary
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>

{/* Recent Summaries */}
            <Card>
              <CardHeader>
                <CardTitle>Recent Summaries</CardTitle>
                <CardDescription>Your latest AI-generated content summaries</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {summaries.map((summary) => (
                    <div key={summary.id} className="border border-border rounded-lg p-4 space-y-3">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            <h3 className="font-medium text-foreground">{summary.title}</h3>
                            <Badge variant="secondary" className="text-xs">
                              {summary.type}
                            </Badge>
                          </div>
                          <div className="text-sm text-muted-foreground mb-3">
                            {summary.wordCount} words • {summary.createdAt}
                          </div>
                        </div>
                        <div className="flex items-center gap-1">
                          <Button variant="ghost" size="sm" onClick={() => copySummary(summary.summary)}>
                            <Copy className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Download className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => deleteSummary(summary.id)}
                            className="text-destructive hover:text-destructive"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                      <div className="bg-muted/50 rounded-md p-3">
                        <p className="text-sm text-foreground whitespace-pre-line">{summary.summary}</p>
                      </div>
                    </div>
                  ))}

{summaries.length === 0 && (
                    <div className="text-center py-8">
                      <Sparkles className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                      <h3 className="font-medium text-foreground mb-2">No summaries yet</h3>
                      <p className="text-sm text-muted-foreground">Generate your first AI summary to see it here.</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Stats & Tips Panel */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Usage Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Summaries Generated</span>
                  <span className="font-semibold text-foreground">{summaries.length}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Words Processed</span>
                  <span className="font-semibold text-foreground">
                    {summaries.reduce((acc, s) => acc + s.wordCount, 0).toLocaleString()}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Time Saved</span>
                  <span className="font-semibold text-foreground">~{Math.floor(summaries.length * 2.5)}h</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Pro Tips</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex gap-3">
                  <CheckCircle className="h-4 w-4 text-secondary mt-0.5 flex-shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Use detailed content</p>
                    <p className="text-xs text-muted-foreground">Longer content produces better summaries</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-4 w-4 text-secondary mt-0.5 flex-shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Choose the right type</p>
                    <p className="text-xs text-muted-foreground">Brief for social media, detailed for blogs</p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-4 w-4 text-secondary mt-0.5 flex-shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-foreground">Edit and customize</p>
                    <p className="text-xs text-muted-foreground">AI summaries are a starting point</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <Download className="mr-2 h-4 w-4" />
                  Export All Summaries
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <FileText className="mr-2 h-4 w-4" />
                  Summary Templates
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
import { Sidebar } from "@/components/dashboard-sidebar"
import { Separator } from "@/components/ui/separator"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SidebarProvider>
      <Sidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <div className="flex items-center gap-2">
            <img src="/images/connectsync-logo.png" alt="ConnectSync" className="h-6 w-auto md:hidden" />
            <span className="font-semibold md:hidden">ConnectSync</span>
          </div>
        </header>
        <main className="flex-1 p-4">{children}</main>
      </SidebarInset>
    </SidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/analytics/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart3,
  TrendingUp,
  Users,
  MousePointer,
  Globe,
  Download,
  Calendar,
  ExternalLink,
  ArrowUp,
  ArrowDown,
} from "lucide-react"
import {
  AreaChart,
  Area,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts"

const clickData = [
  { date: "Jan 1", clicks: 45, visitors: 38 },
  { date: "Jan 2", clicks: 52, visitors: 42 },
  { date: "Jan 3", clicks: 48, visitors: 39 },
  { date: "Jan 4", clicks: 61, visitors: 51 },
  { date: "Jan 5", clicks: 55, visitors: 46 },
  { date: "Jan 6", clicks: 67, visitors: 58 },
  { date: "Jan 7", clicks: 73, visitors: 62 },
]

const deviceData = [
  { name: "Mobile", value: 68, color: "hsl(var(--chart-1))" },
  { name: "Desktop", value: 25, color: "hsl(var(--chart-2))" },
  { name: "Tablet", value: 7, color: "hsl(var(--chart-3))" },
]

const countryData = [
  { country: "United States", clicks: 342, percentage: 45 },
  { country: "United Kingdom", clicks: 156, percentage: 20 },
  { country: "Canada", clicks: 98, percentage: 13 },
  { country: "Australia", clicks: 76, percentage: 10 },
  { country: "Germany", clicks: 54, percentage: 7 },
  { country: "Others", clicks: 38, percentage: 5 },
]

const topLinks = [
  { title: "My Website", url: "https://johndoe.com", clicks: 234, change: 12 },
  { title: "Instagram Profile", url: "https://instagram.com/johndoe", clicks: 189, change: -5 },
  { title: "YouTube Channel", url: "https://youtube.com/johndoe", clicks: 156, change: 23 },
  { title: "Email Contact", url: "mailto:john@example.com", clicks: 98, change: 8 },
  { title: "LinkedIn Profile", url: "https://linkedin.com/in/johndoe", clicks: 67, change: -2 },
]

export default function AnalyticsPage() {
  const [timeRange, setTimeRange] = useState("7d")
  const [selectedBioLink, setSelectedBioLink] = useState("all")

const stats = {
    totalClicks: 1247,
    totalVisitors: 892,
    clickThroughRate: 68.5,
    avgSessionTime: "2m 34s",
  }

const exportData = (format: "csv" | "pdf") => {
    // Mock export functionality
    console.log(`Exporting data as ${format.toUpperCase()}`)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <BarChart3 className="h-6 w-6 text-primary" />
                <h1 className="text-2xl font-semibold text-foreground">Analytics</h1>
              </div>
              <p className="text-muted-foreground">Track performance and understand your audience</p>
            </div>
            <div className="flex items-center gap-3">
              <Select value={selectedBioLink} onValueChange={setSelectedBioLink}>
                <SelectTrigger className="w-48">
                  <SelectValue placeholder="Select bio-link" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Bio-Links</SelectItem>
                  <SelectItem value="main">My Main Bio-Link</SelectItem>
                  <SelectItem value="event">Event Promotion</SelectItem>
                </SelectContent>
              </Select>
              <Select value={timeRange} onValueChange={setTimeRange}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="Time range" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="7d">Last 7 days</SelectItem>
                  <SelectItem value="30d">Last 30 days</SelectItem>
                  <SelectItem value="90d">Last 90 days</SelectItem>
                  <SelectItem value="1y">Last year</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline">
                <Download className="mr-2 h-4 w-4" />
                Export
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Total Clicks</p>
                  <p className="text-2xl font-bold text-foreground">{stats.totalClicks.toLocaleString()}</p>
                </div>
                <MousePointer className="h-8 w-8 text-primary" />
              </div>
              <div className="flex items-center gap-1 mt-2">
                <ArrowUp className="h-3 w-3 text-secondary" />
                <span className="text-xs text-secondary">+12% from last week</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Unique Visitors</p>
                  <p className="text-2xl font-bold text-foreground">{stats.totalVisitors.toLocaleString()}</p>
                </div>
                <Users className="h-8 w-8 text-primary" />
              </div>
              <div className="flex items-center gap-1 mt-2">
                <ArrowUp className="h-3 w-3 text-secondary" />
                <span className="text-xs text-secondary">+8% from last week</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Click-through Rate</p>
                  <p className="text-2xl font-bold text-foreground">{stats.clickThroughRate}%</p>
                </div>
                <TrendingUp className="h-8 w-8 text-primary" />
              </div>
              <div className="flex items-center gap-1 mt-2">
                <ArrowDown className="h-3 w-3 text-accent" />
                <span className="text-xs text-accent">-2% from last week</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Avg. Session Time</p>
                  <p className="text-2xl font-bold text-foreground">{stats.avgSessionTime}</p>
                </div>
                <Calendar className="h-8 w-8 text-primary" />
              </div>
              <div className="flex items-center gap-1 mt-2">
                <ArrowUp className="h-3 w-3 text-secondary" />
                <span className="text-xs text-secondary">+15% from last week</span>
              </div>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="overview" className="space-y-6">
          <TabsList>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="audience">Audience</TabsTrigger>
            <TabsTrigger value="links">Top Links</TabsTrigger>
            <TabsTrigger value="export">Export</TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-6">
            <div className="grid lg:grid-cols-2 gap-6">
              {/* Clicks Over Time */}
              <Card>
                <CardHeader>
                  <CardTitle>Clicks Over Time</CardTitle>
                  <CardDescription>Daily clicks and unique visitors</CardDescription>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <AreaChart data={clickData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip />
                      <Area
                        type="monotone"
                        dataKey="clicks"
                        stackId="1"
                        stroke="hsl(var(--primary))"
                        fill="hsl(var(--primary))"
                        fillOpacity={0.6}
                      />
                      <Area
                        type="monotone"
                        dataKey="visitors"
                        stackId="2"
                        stroke="hsl(var(--secondary))"
                        fill="hsl(var(--secondary))"
                        fillOpacity={0.6}
                      />
                    </AreaChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

{/* Device Breakdown */}
              <Card>
                <CardHeader>
                  <CardTitle>Device Breakdown</CardTitle>
                  <CardDescription>Clicks by device type</CardDescription>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={deviceData}
                        cx="50%"
                        cy="50%"
                        innerRadius={60}
                        outerRadius={100}
                        paddingAngle={5}
                        dataKey="value"
                      >
                        {deviceData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                  <div className="flex justify-center gap-6 mt-4">
                    {deviceData.map((device) => (
                      <div key={device.name} className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: device.color }} />
                        <span className="text-sm text-muted-foreground">{device.name}</span>
                        <span className="text-sm font-medium text-foreground">{device.value}%</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="audience" className="space-y-6">
            <div className="grid lg:grid-cols-2 gap-6">
              {/* Geographic Data */}
              <Card>
                <CardHeader>
                  <CardTitle>Top Countries</CardTitle>
                  <CardDescription>Clicks by geographic location</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {countryData.map((country) => (
                      <div key={country.country} className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <Globe className="h-4 w-4 text-muted-foreground" />
                          <span className="text-sm font-medium text-foreground">{country.country}</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <div className="w-24 bg-muted rounded-full h-2">
                            <div className="bg-primary h-2 rounded-full" style={{ width: `${country.percentage}%` }} />
                          </div>
                          <span className="text-sm text-muted-foreground w-12 text-right">{country.clicks}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Traffic Sources */}
              <Card>
                <CardHeader>
                  <CardTitle>Traffic Sources</CardTitle>
                  <CardDescription>Where your visitors come from</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-foreground">Direct</span>
                      <span className="text-sm font-medium text-foreground">45%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-foreground">Instagram</span>
                      <span className="text-sm font-medium text-foreground">28%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-foreground">Twitter</span>
                      <span className="text-sm font-medium text-foreground">15%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-foreground">LinkedIn</span>
                      <span className="text-sm font-medium text-foreground">8%</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-foreground">Other</span>
                      <span className="text-sm font-medium text-foreground">4%</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="links" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Top Performing Links</CardTitle>
                <CardDescription>Your most clicked links and their performance</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {topLinks.map((link, index) => (
                    <div
                      key={link.title}
                      className="flex items-center justify-between p-4 border border-border rounded-lg"
                    >
                      <div className="flex items-center gap-4">
                        <div className="flex items-center justify-center w-8 h-8 bg-primary/10 rounded-full">
                          <span className="text-sm font-semibold text-primary">{index + 1}</span>
                        </div>
                        <div>
                          <h4 className="font-medium text-foreground">{link.title}</h4>
                          <p className="text-sm text-muted-foreground flex items-center gap-1">
                            <ExternalLink className="h-3 w-3" />
                            {link.url}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <div className="text-right">
                          <p className="font-semibold text-foreground">{link.clicks}</p>
                          <p className="text-xs text-muted-foreground">clicks</p>
                        </div>
                        <Badge variant={link.change > 0 ? "default" : "secondary"}>
                          {link.change > 0 ? "+" : ""}
                          {link.change}%
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="export" className="space-y-6">
            <div className="grid md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Export Analytics Data</CardTitle>
                  <CardDescription>Download your analytics data in various formats</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <Button onClick={() => exportData("csv")} className="w-full justify-start" variant="outline">
                      <Download className="mr-2 h-4 w-4" />
                      Export as CSV
                    </Button>
                    <Button onClick={() => exportData("pdf")} className="w-full justify-start" variant="outline">
                      <Download className="mr-2 h-4 w-4" />
                      Export as PDF Report
                    </Button>
                  </div>
                  <div className="text-sm text-muted-foreground">
                    <p>Exports include:</p>
                    <ul className="list-disc list-inside mt-2 space-y-1">
                      <li>Click and visitor data</li>
                      <li>Geographic breakdown</li>
                      <li>Device and browser stats</li>
                      <li>Top performing links</li>
                    </ul>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Scheduled Reports</CardTitle>
                  <CardDescription>Get regular analytics reports delivered to your email</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <Button className="w-full justify-start bg-transparent" variant="outline">
                      <Calendar className="mr-2 h-4 w-4" />
                      Weekly Report
                    </Button>
                    <Button className="w-full justify-start bg-transparent" variant="outline">
                      <Calendar className="mr-2 h-4 w-4" />
                      Monthly Report
                    </Button>
                  </div>
                  <div className="text-sm text-muted-foreground">
                    <p>Available on Pro and Business plans</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
"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/select.tsx" isMerged="true"
"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/separator.tsx" isMerged="true"
"use client"

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

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

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

export { Separator }
[V0_FILE]typescriptreact:file="app/api/create-checkout-session/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function POST(request: NextRequest) {
  try {
    const { priceId, customerId } = await request.json()

const session = await stripe.checkout.sessions.create({
      customer: customerId,
      payment_method_types: ["card"],
      line_items: [
        {
          price: priceId,
          quantity: 1,
        },
      ],
      mode: "subscription",
      success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
      subscription_data: {
        trial_period_days: 14,
      },
    })

return NextResponse.json({ sessionId: session.id })
  } catch (error) {
    console.error("Error creating checkout session:", error)
    return NextResponse.json({ error: "Error creating checkout session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/create-customer/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function POST(request: NextRequest) {
  try {
    const { email, name } = await request.json()

const customer = await stripe.customers.create({
      email,
      name,
    })

return NextResponse.json({ customerId: customer.id })
  } catch (error) {
    console.error("Error creating customer:", error)
    return NextResponse.json({ error: "Error creating customer" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/webhooks/stripe/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!

export async function POST(request: NextRequest) {
  try {
    const body = await request.text()
    const signature = request.headers.get("stripe-signature")!

const event = stripe.webhooks.constructEvent(body, signature, webhookSecret)

switch (event.type) {
      case "customer.subscription.created":
        // Handle new subscription
        console.log("Subscription created:", event.data.object)
        break
      case "customer.subscription.updated":
        // Handle subscription updates
        console.log("Subscription updated:", event.data.object)
        break
      case "customer.subscription.deleted":
        // Handle subscription cancellation
        console.log("Subscription cancelled:", event.data.object)
        break
      case "invoice.payment_succeeded":
        // Handle successful payment
        console.log("Payment succeeded:", event.data.object)
        break
      case "invoice.payment_failed":
        // Handle failed payment
        console.log("Payment failed:", event.data.object)
        break
      default:
        console.log(`Unhandled event type: ${event.type}`)
    }

return NextResponse.json({ received: true })
  } catch (error) {
    console.error("Webhook error:", error)
    return NextResponse.json({ error: "Webhook handler failed" }, { status: 400 })
  }
}
[V0_FILE]typescriptreact:file="app/api/get-subscription/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const customerId = searchParams.get("customerId")

if (!customerId) {
      return NextResponse.json({ error: "Customer ID required" }, { status: 400 })
    }

const subscriptions = await stripe.subscriptions.list({
      customer: customerId,
      status: "all",
      limit: 1,
    })

const subscription = subscriptions.data[0]

if (!subscription) {
      return NextResponse.json({ subscription: null })
    }

return NextResponse.json({
      subscription: {
        id: subscription.id,
        status: subscription.status,
        current_period_end: subscription.current_period_end,
        cancel_at_period_end: subscription.cancel_at_period_end,
        plan: subscription.items.data[0]?.price.nickname || "Unknown",
        amount: subscription.items.data[0]?.price.unit_amount || 0,
      },
    })
  } catch (error) {
    console.error("Error fetching subscription:", error)
    return NextResponse.json({ error: "Error fetching subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/cancel-subscription/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function POST(request: NextRequest) {
  try {
    const { subscriptionId } = await request.json()

const subscription = await stripe.subscriptions.update(subscriptionId, {
      cancel_at_period_end: true,
    })

return NextResponse.json({
      success: true,
      subscription: {
        id: subscription.id,
        cancel_at_period_end: subscription.cancel_at_period_end,
      },
    })
  } catch (error) {
    console.error("Error cancelling subscription:", error)
    return NextResponse.json({ error: "Error cancelling subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/create-portal-session/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function POST(request: NextRequest) {
  try {
    const { customerId } = await request.json()

const session = await stripe.billingPortal.sessions.create({
      customer: customerId,
      return_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard/billing`,
    })

return NextResponse.json({ url: session.url })
  } catch (error) {
    console.error("Error creating portal session:", error)
    return NextResponse.json({ error: "Error creating portal session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, ArrowRight, Sparkles } from "lucide-react"
import Link from "next/link"

export default function SuccessPage() {
  const searchParams = useSearchParams()
  const sessionId = searchParams.get("session_id")
  const [sessionData, setSessionData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchSession = async () => {
      if (!sessionId) {
        setLoading(false)
        return
      }

try {
        const response = await fetch(`/api/checkout-session?session_id=${sessionId}`)
        const data = await response.json()
        setSessionData(data)
      } catch (error) {
        console.error("Error fetching session:", error)
      } finally {
        setLoading(false)
      }
    }

fetchSession()
  }, [sessionId])

if (loading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Processing your subscription...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md text-center">
        <CardHeader className="pb-4">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-secondary/10">
            <CheckCircle className="h-8 w-8 text-secondary" />
          </div>
          <CardTitle className="text-2xl">Welcome to ConnectSync!</CardTitle>
          <CardDescription>Your subscription has been activated successfully</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-sm">
              <Sparkles className="h-4 w-4 text-secondary" />
              <span className="text-muted-foreground">14-day free trial started</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <CheckCircle className="h-4 w-4 text-secondary" />
              <span className="text-muted-foreground">Full access to all features</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <CheckCircle className="h-4 w-4 text-secondary" />
              <span className="text-muted-foreground">Cancel anytime during trial</span>
            </div>
          </div>

<div className="space-y-3">
            <Link href="/dashboard">
              <Button className="w-full" size="lg">
                Go to Dashboard
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <Link href="/dashboard/builder">
              <Button variant="outline" className="w-full bg-transparent">
                Create Your First Bio-Link
              </Button>
            </Link>
          </div>

<div className="text-xs text-muted-foreground">
            <p>
              Need help getting started?{" "}
              <Link href="/help" className="text-primary hover:underline">
                View our guide
              </Link>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/success/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/checkout-session/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20",
})

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const sessionId = searchParams.get("session_id")

if (!sessionId) {
      return NextResponse.json({ error: "Session ID required" }, { status: 400 })
    }

const session = await stripe.checkout.sessions.retrieve(sessionId, {
      expand: ["subscription", "customer"],
    })

return NextResponse.json({
      session: {
        id: session.id,
        payment_status: session.payment_status,
        customer_email: session.customer_details?.email,
        subscription_id: session.subscription,
      },
    })
  } catch (error) {
    console.error("Error retrieving session:", error)
    return NextResponse.json({ error: "Error retrieving session" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true"
-- ConnectSync Database Schema
-- Create all necessary tables for the SaaS application

-- Users profiles table (extends auth.users)
CREATE TABLE IF NOT EXISTS public.profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  display_name TEXT,
  bio TEXT,
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Bio-link pages
CREATE TABLE IF NOT EXISTS public.bio_pages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  theme TEXT DEFAULT 'default',
  is_published BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Links within bio pages
CREATE TABLE IF NOT EXISTS public.bio_links (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  bio_page_id UUID NOT NULL REFERENCES public.bio_pages(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  url TEXT NOT NULL,
  description TEXT,
  icon TEXT,
  position INTEGER DEFAULT 0,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- AI summaries
CREATE TABLE IF NOT EXISTS public.ai_summaries (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  original_content TEXT NOT NULL,
  summary_type TEXT NOT NULL CHECK (summary_type IN ('brief', 'detailed', 'bullet_points')),
  summary_content TEXT NOT NULL,
  word_count INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Subscriptions (for Stripe integration)
CREATE TABLE IF NOT EXISTS public.subscriptions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  stripe_customer_id TEXT UNIQUE,
  stripe_subscription_id TEXT UNIQUE,
  plan_type TEXT NOT NULL CHECK (plan_type IN ('free', 'pro', 'business')),
  status TEXT NOT NULL,
  current_period_start TIMESTAMP WITH TIME ZONE,
  current_period_end TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Analytics for bio-link clicks
CREATE TABLE IF NOT EXISTS public.link_analytics (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  bio_link_id UUID NOT NULL REFERENCES public.bio_links(id) ON DELETE CASCADE,
  bio_page_id UUID NOT NULL REFERENCES public.bio_pages(id) ON DELETE CASCADE,
  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  clicked_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  user_agent TEXT,
  ip_address INET,
  country TEXT,
  device_type TEXT
);

-- Enable Row Level Security on all tables
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.bio_pages ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.bio_links ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.ai_summaries ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.subscriptions ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.link_analytics ENABLE ROW LEVEL SECURITY;
[V0_FILE]sql:file="scripts/002_create_policies.sql" isMerged="true"
-- Row Level Security Policies for ConnectSync

-- Profiles policies
CREATE POLICY "profiles_select_own" ON public.profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "profiles_insert_own" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id);
CREATE POLICY "profiles_update_own" ON public.profiles FOR UPDATE USING (auth.uid() = id);
CREATE POLICY "profiles_delete_own" ON public.profiles FOR DELETE USING (auth.uid() = id);

-- Bio pages policies
CREATE POLICY "bio_pages_select_own" ON public.bio_pages FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "bio_pages_select_published" ON public.bio_pages FOR SELECT USING (is_published = true);
CREATE POLICY "bio_pages_insert_own" ON public.bio_pages FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "bio_pages_update_own" ON public.bio_pages FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "bio_pages_delete_own" ON public.bio_pages FOR DELETE USING (auth.uid() = user_id);

-- Bio links policies
CREATE POLICY "bio_links_select_via_page" ON public.bio_links FOR SELECT USING (
  EXISTS (
    SELECT 1 FROM public.bio_pages 
    WHERE bio_pages.id = bio_links.bio_page_id 
    AND (bio_pages.user_id = auth.uid() OR bio_pages.is_published = true)
  )
);
CREATE POLICY "bio_links_insert_own" ON public.bio_links FOR INSERT WITH CHECK (
  EXISTS (
    SELECT 1 FROM public.bio_pages 
    WHERE bio_pages.id = bio_links.bio_page_id 
    AND bio_pages.user_id = auth.uid()
  )
);
CREATE POLICY "bio_links_update_own" ON public.bio_links FOR UPDATE USING (
  EXISTS (
    SELECT 1 FROM public.bio_pages 
    WHERE bio_pages.id = bio_links.bio_page_id 
    AND bio_pages.user_id = auth.uid()
  )
);
CREATE POLICY "bio_links_delete_own" ON public.bio_links FOR DELETE USING (
  EXISTS (
    SELECT 1 FROM public.bio_pages 
    WHERE bio_pages.id = bio_links.bio_page_id 
    AND bio_pages.user_id = auth.uid()
  )
);

-- AI summaries policies
CREATE POLICY "ai_summaries_select_own" ON public.ai_summaries FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "ai_summaries_insert_own" ON public.ai_summaries FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "ai_summaries_update_own" ON public.ai_summaries FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "ai_summaries_delete_own" ON public.ai_summaries FOR DELETE USING (auth.uid() = user_id);

-- Subscriptions policies
CREATE POLICY "subscriptions_select_own" ON public.subscriptions FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "subscriptions_insert_own" ON public.subscriptions FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "subscriptions_update_own" ON public.subscriptions FOR UPDATE USING (auth.uid() = user_id);

-- Analytics policies
CREATE POLICY "analytics_select_own" ON public.link_analytics FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "analytics_insert_public" ON public.link_analytics FOR INSERT WITH CHECK (true); -- Allow public inserts for tracking
[V0_FILE]sql:file="scripts/003_create_functions.sql" isMerged="true"
-- Utility functions and triggers for ConnectSync

-- Function to handle new user profile creation
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
BEGIN
  INSERT INTO public.profiles (id, display_name)
  VALUES (
    new.id,
    COALESCE(new.raw_user_meta_data ->> 'display_name', split_part(new.email, '@', 1))
  )
  ON CONFLICT (id) DO NOTHING;

-- Create default subscription record
  INSERT INTO public.subscriptions (user_id, plan_type, status)
  VALUES (new.id, 'free', 'active')
  ON CONFLICT DO NOTHING;

RETURN new;
END;
$$;

-- Trigger to create profile on user signup
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.handle_new_user();

-- Function to update updated_at timestamp
CREATE OR REPLACE FUNCTION public.update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Add updated_at triggers
CREATE TRIGGER update_profiles_updated_at BEFORE UPDATE ON public.profiles
  FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();

CREATE TRIGGER update_bio_pages_updated_at BEFORE UPDATE ON public.bio_pages
  FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();

CREATE TRIGGER update_subscriptions_updated_at BEFORE UPDATE ON public.subscriptions
  FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();
[V0_FILE]typescriptreact:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescriptreact:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The "setAll" method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}
[V0_FILE]typescriptreact:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

const {
    data: { user },
  } = await supabase.auth.getUser()

// Redirect unauthenticated users to login for protected routes
  if (
    !user &&
    (request.nextUrl.pathname.startsWith("/dashboard") || request.nextUrl.pathname.startsWith("/protected"))
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/login"
    return NextResponse.redirect(url)
  }

// Redirect authenticated users away from auth pages
  if (user && (request.nextUrl.pathname.startsWith("/login") || request.nextUrl.pathname.startsWith("/signup"))) {
    const url = request.nextUrl.clone()
    url.pathname = "/dashboard"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]png:file="public/images/connectsync-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/connectsync%20app-2WkYPHP7BdNS9c2RzKROhqGeiPnRJK.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/auth-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import Link from "next/link"

interface AuthFormProps {
  mode: "login" | "signup"
  onSubmit: (data: any) => void
}

export function AuthForm({ mode, onSubmit }: AuthFormProps) {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    firstName: "",
    lastName: "",
    confirmPassword: "",
    acceptTerms: false,
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }

const handleChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

return (
    <Card>
      <CardHeader className="text-center">
        <CardTitle className="text-2xl">{mode === "login" ? "Welcome back" : "Create your account"}</CardTitle>
        <CardDescription>
          {mode === "login"
            ? "Sign in to your ConnectSync account to continue building amazing bio-links."
            : "Join thousands of creators building amazing bio-links with AI-powered insights."}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <form onSubmit={handleSubmit} className="space-y-4">
          {mode === "signup" && (
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="firstName">First name</Label>
                <Input
                  id="firstName"
                  placeholder="John"
                  className="bg-input"
                  value={formData.firstName}
                  onChange={(e) => handleChange("firstName", e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName">Last name</Label>
                <Input
                  id="lastName"
                  placeholder="Doe"
                  className="bg-input"
                  value={formData.lastName}
                  onChange={(e) => handleChange("lastName", e.target.value)}
                />
              </div>
            </div>
          )}

<div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder={mode === "login" ? "Enter your email" : "john@example.com"}
              className="bg-input"
              value={formData.email}
              onChange={(e) => handleChange("email", e.target.value)}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              type="password"
              placeholder={mode === "login" ? "Enter your password" : "Create a strong password"}
              className="bg-input"
              value={formData.password}
              onChange={(e) => handleChange("password", e.target.value)}
            />
          </div>

{mode === "signup" && (
            <div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm password</Label>
              <Input
                id="confirmPassword"
                type="password"
                placeholder="Confirm your password"
                className="bg-input"
                value={formData.confirmPassword}
                onChange={(e) => handleChange("confirmPassword", e.target.value)}
              />
            </div>
          )}

{mode === "login" && (
            <div className="flex items-center justify-between">
              <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                Forgot password?
              </Link>
            </div>
          )}

{mode === "signup" && (
            <div className="flex items-center space-x-2">
              <Checkbox
                id="terms"
                checked={formData.acceptTerms}
                onCheckedChange={(checked) => handleChange("acceptTerms", checked as boolean)}
              />
              <Label htmlFor="terms" className="text-sm">
                I agree to the{" "}
                <Link href="/terms" className="text-primary hover:underline">
                  Terms of Service
                </Link>{" "}
                and{" "}
                <Link href="/privacy" className="text-primary hover:underline">
                  Privacy Policy
                </Link>
              </Label>
            </div>
          )}

<Button type="submit" className="w-full">
            {mode === "login" ? "Sign In" : "Create Account"}
          </Button>
        </form>

<div className="relative">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t border-border" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
          </div>
        </div>

<Button variant="outline" className="w-full bg-transparent">
          Continue with Google
        </Button>

<div className="text-center text-sm">
          <span className="text-muted-foreground">
            {mode === "login" ? "Don't have an account? " : "Already have an account? "}
          </span>
          <Link href={mode === "login" ? "/signup" : "/login"} className="text-primary hover:underline">
            {mode === "login" ? "Sign up" : "Sign in"}
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Settings, User, Bell, Shield, Trash2, Save, Eye, EyeOff } from "lucide-react"

export default function SettingsPage() {
  const [profile, setProfile] = useState({
    firstName: "John",
    lastName: "Doe",
    email: "john@example.com",
    bio: "Content creator & entrepreneur. Sharing insights about tech and business.",
    customUrl: "johndoe",
    avatar: "",
  })

const [notifications, setNotifications] = useState({
    emailUpdates: true,
    marketingEmails: false,
    weeklyReports: true,
    securityAlerts: true,
  })

const [privacy, setPrivacy] = useState({
    profilePublic: true,
    showAnalytics: false,
    allowIndexing: true,
  })

const [showPassword, setShowPassword] = useState(false)

const handleSaveProfile = () => {
    // Mock save functionality
    console.log("Saving profile:", profile)
  }

const handleSaveNotifications = () => {
    // Mock save functionality
    console.log("Saving notifications:", notifications)
  }

const handleDeleteAccount = () => {
    // Mock delete functionality
    if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
      console.log("Deleting account...")
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-3 mb-2">
            <Settings className="h-6 w-6 text-primary" />
            <h1 className="text-2xl font-semibold text-foreground">Settings</h1>
          </div>
          <p className="text-muted-foreground">Manage your account settings and preferences</p>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <Tabs defaultValue="profile" className="space-y-6">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="profile">Profile</TabsTrigger>
              <TabsTrigger value="account">Account</TabsTrigger>
              <TabsTrigger value="notifications">Notifications</TabsTrigger>
              <TabsTrigger value="privacy">Privacy</TabsTrigger>
            </TabsList>

<TabsContent value="profile" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <User className="h-5 w-5" />
                    Profile Information
                  </CardTitle>
                  <CardDescription>
                    Update your profile information and customize how you appear to visitors
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-center gap-6">
                    <div className="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center">
                      <span className="text-2xl font-semibold text-primary">
                        {profile.firstName.charAt(0)}
                        {profile.lastName.charAt(0)}
                      </span>
                    </div>
                    <div className="space-y-2">
                      <Button variant="outline" size="sm">
                        Upload Photo
                      </Button>
                      <p className="text-xs text-muted-foreground">JPG, PNG or GIF. Max size 2MB.</p>
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">First Name</Label>
                      <Input
                        id="firstName"
                        value={profile.firstName}
                        onChange={(e) => setProfile({ ...profile, firstName: e.target.value })}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Last Name</Label>
                      <Input
                        id="lastName"
                        value={profile.lastName}
                        onChange={(e) => setProfile({ ...profile, lastName: e.target.value })}
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="bio">Bio</Label>
                    <Textarea
                      id="bio"
                      value={profile.bio}
                      onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
                      rows={3}
                      placeholder="Tell people about yourself..."
                    />
                    <p className="text-xs text-muted-foreground">{profile.bio.length}/160 characters</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="customUrl">Custom URL</Label>
                    <div className="flex">
                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
                        connectsync.app/
                      </span>
                      <Input
                        id="customUrl"
                        value={profile.customUrl}
                        onChange={(e) => setProfile({ ...profile, customUrl: e.target.value })}
                        className="rounded-l-none"
                      />
                    </div>
                  </div>

<Button onClick={handleSaveProfile}>
                    <Save className="mr-2 h-4 w-4" />
                    Save Profile
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="account" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Account Settings</CardTitle>
                  <CardDescription>Manage your account security and login information</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email Address</Label>
                    <Input
                      id="email"
                      type="email"
                      value={profile.email}
                      onChange={(e) => setProfile({ ...profile, email: e.target.value })}
                    />
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-medium text-foreground">Change Password</h3>
                    <div className="space-y-2">
                      <Label htmlFor="currentPassword">Current Password</Label>
                      <div className="relative">
                        <Input
                          id="currentPassword"
                          type={showPassword ? "text" : "password"}
                          placeholder="Enter current password"
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                          onClick={() => setShowPassword(!showPassword)}
                        >
                          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </Button>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="newPassword">New Password</Label>
                      <Input
                        id="newPassword"
                        type={showPassword ? "text" : "password"}
                        placeholder="Enter new password"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="confirmPassword">Confirm New Password</Label>
                      <Input
                        id="confirmPassword"
                        type={showPassword ? "text" : "password"}
                        placeholder="Confirm new password"
                      />
                    </div>
                    <Button variant="outline">Update Password</Button>
                  </div>

<div className="space-y-4">
                    <h3 className="text-lg font-medium text-foreground">Two-Factor Authentication</h3>
                    <div className="flex items-center justify-between p-4 border border-border rounded-lg">
                      <div>
                        <p className="font-medium text-foreground">Authenticator App</p>
                        <p className="text-sm text-muted-foreground">
                          Use an authenticator app to generate verification codes
                        </p>
                      </div>
                      <Badge variant="secondary">Not Enabled</Badge>
                    </div>
                    <Button variant="outline">Enable 2FA</Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="notifications" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Bell className="h-5 w-5" />
                    Notification Preferences
                  </CardTitle>
                  <CardDescription>Choose what notifications you want to receive</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Email Updates</p>
                        <p className="text-sm text-muted-foreground">
                          Receive updates about your bio-links and analytics
                        </p>
                      </div>
                      <Switch
                        checked={notifications.emailUpdates}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, emailUpdates: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Marketing Emails</p>
                        <p className="text-sm text-muted-foreground">
                          Receive tips, feature updates, and promotional content
                        </p>
                      </div>
                      <Switch
                        checked={notifications.marketingEmails}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, marketingEmails: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Weekly Reports</p>
                        <p className="text-sm text-muted-foreground">
                          Get weekly analytics reports delivered to your inbox
                        </p>
                      </div>
                      <Switch
                        checked={notifications.weeklyReports}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, weeklyReports: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Security Alerts</p>
                        <p className="text-sm text-muted-foreground">
                          Important security notifications about your account
                        </p>
                      </div>
                      <Switch
                        checked={notifications.securityAlerts}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, securityAlerts: checked })}
                      />
                    </div>
                  </div>

<Button onClick={handleSaveNotifications}>
                    <Save className="mr-2 h-4 w-4" />
                    Save Preferences
                  </Button>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="privacy" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Privacy Settings
                  </CardTitle>
                  <CardDescription>Control how your information is shared and displayed</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Public Profile</p>
                        <p className="text-sm text-muted-foreground">Make your bio-link page visible to everyone</p>
                      </div>
                      <Switch
                        checked={privacy.profilePublic}
                        onCheckedChange={(checked) => setPrivacy({ ...privacy, profilePublic: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Show Analytics</p>
                        <p className="text-sm text-muted-foreground">Display view counts on your bio-link page</p>
                      </div>
                      <Switch
                        checked={privacy.showAnalytics}
                        onCheckedChange={(checked) => setPrivacy({ ...privacy, showAnalytics: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-foreground">Search Engine Indexing</p>
                        <p className="text-sm text-muted-foreground">
                          Allow search engines to index your bio-link page
                        </p>
                      </div>
                      <Switch
                        checked={privacy.allowIndexing}
                        onCheckedChange={(checked) => setPrivacy({ ...privacy, allowIndexing: checked })}
                      />
                    </div>
                  </div>

<Button>
                    <Save className="mr-2 h-4 w-4" />
                    Save Privacy Settings
                  </Button>
                </CardContent>
              </Card>

<Card className="border-destructive/20">
                <CardHeader>
                  <CardTitle className="text-destructive">Danger Zone</CardTitle>
                  <CardDescription>Irreversible and destructive actions</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-medium text-foreground mb-2">Delete Account</h3>
                      <p className="text-sm text-muted-foreground mb-4">
                        Once you delete your account, there is no going back. Please be certain.
                      </p>
                      <Button variant="destructive" onClick={handleDeleteAccount}>
                        <Trash2 className="mr-2 h-4 w-4" />
                        Delete Account
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/bio-link/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// GET /api/bio-link - Retrieve user's bio-links
export async function GET(request: NextRequest) {
  try {
    // Mock data - in real app, fetch from database based on user auth
    const bioLinks = [
      {
        id: "1",
        title: "My Main Bio-Link",
        url: "connectsync.app/johndoe",
        clicks: 1247,
        isActive: true,
        lastUpdated: "2 hours ago",
        links: [
          {
            id: "1",
            type: "link",
            title: "My Website",
            url: "https://johndoe.com",
            icon: "globe",
            isActive: true,
          },
          {
            id: "2",
            type: "social",
            title: "Follow me on Instagram",
            url: "https://instagram.com/johndoe",
            icon: "instagram",
            isActive: true,
          },
        ],
      },
    ]

return NextResponse.json({ bioLinks })
  } catch (error) {
    console.error("Error fetching bio-links:", error)
    return NextResponse.json({ error: "Failed to fetch bio-links" }, { status: 500 })
  }
}

// POST /api/bio-link - Create new bio-link
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { title, customUrl, profile, links } = body

// Mock creation - in real app, save to database
    const newBioLink = {
      id: Date.now().toString(),
      title,
      url: `connectsync.app/${customUrl}`,
      clicks: 0,
      isActive: true,
      lastUpdated: "Just now",
      profile,
      links,
    }

return NextResponse.json({ bioLink: newBioLink }, { status: 201 })
  } catch (error) {
    console.error("Error creating bio-link:", error)
    return NextResponse.json({ error: "Failed to create bio-link" }, { status: 500 })
  }
}

// PATCH /api/bio-link - Update bio-link
export async function PATCH(request: NextRequest) {
  try {
    const body = await request.json()
    const { id, updates } = body

// Mock update - in real app, update in database
    console.log(`Updating bio-link ${id} with:`, updates)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating bio-link:", error)
    return NextResponse.json({ error: "Failed to update bio-link" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/public/[username]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// GET /api/public/[username] - Fetch public bio-link data
export async function GET(request: NextRequest, { params }: { params: { username: string } }) {
  try {
    const { username } = params

// Mock data - in real app, fetch from database
    if (username === "johndoe") {
      const userData = {
        name: "John Doe",
        bio: "Content creator & entrepreneur. Sharing insights about tech and business.",
        avatar: "",
        links: [
          {
            id: "1",
            type: "link",
            title: "My Website",
            url: "https://johndoe.com",
            icon: "globe",
            isActive: true,
          },
          {
            id: "2",
            type: "social",
            title: "Follow me on Instagram",
            url: "https://instagram.com/johndoe",
            icon: "instagram",
            isActive: true,
          },
          {
            id: "3",
            type: "social",
            title: "YouTube Channel",
            url: "https://youtube.com/johndoe",
            icon: "youtube",
            isActive: true,
          },
          {
            id: "4",
            type: "contact",
            title: "Email Me",
            url: "mailto:john@example.com",
            icon: "mail",
            isActive: true,
          },
        ],
        analytics: {
          views: 1247,
          clicks: 892,
        },
      }

// Track page view (in real app, increment in database)
      console.log(`[Analytics] Page view for ${username}`)

return NextResponse.json({ user: userData })
    }

return NextResponse.json({ error: "User not found" }, { status: 404 })
  } catch (error) {
    console.error("Error fetching public bio-link:", error)
    return NextResponse.json({ error: "Failed to fetch bio-link" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/summarize/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// POST /api/summarize - Generate AI summary
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { content, type = "brief" } = body

if (!content || content.trim().length < 50) {
      return NextResponse.json({ error: "Content must be at least 50 characters long" }, { status: 400 })
    }

// Mock AI processing - in real app, call AI service
    await new Promise((resolve) => setTimeout(resolve, 2000))

const wordCount = content.split(" ").length
    let summary = ""

switch (type) {
      case "bullet-points":
        summary = `• Key insight from your ${wordCount}-word content\n• Main theme focuses on core business objectives\n• Strategic recommendations for implementation\n• Actionable next steps identified`
        break
      case "detailed":
        summary = `This comprehensive analysis of your ${wordCount}-word content reveals several key insights and strategic opportunities. The main themes center around business growth, customer engagement, and operational efficiency. The content demonstrates a clear understanding of market dynamics and presents actionable recommendations for implementation. Key takeaways include strategic positioning, competitive advantages, and measurable outcomes that align with business objectives.`
        break
      default: // brief
        summary = `A concise analysis of your ${wordCount}-word content highlighting the main themes of business strategy, customer focus, and growth opportunities with actionable insights for implementation.`
    }

const summaryData = {
      id: Date.now().toString(),
      title: `Summary ${Date.now()}`,
      originalText: content,
      summary,
      type,
      createdAt: new Date().toISOString(),
      wordCount,
    }

return NextResponse.json({ summary: summaryData })
  } catch (error) {
    console.error("Error generating summary:", error)
    return NextResponse.json({ error: "Failed to generate summary" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/analytics/track/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// POST /api/analytics/track - Track clicks and views
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { type, username, linkId, metadata } = body

// Mock analytics tracking - in real app, save to database
    console.log(`[Analytics] ${type} tracked:`, {
      username,
      linkId,
      timestamp: new Date().toISOString(),
      userAgent: request.headers.get("user-agent"),
      ip: request.ip,
      ...metadata,
    })

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error tracking analytics:", error)
    return NextResponse.json({ error: "Failed to track analytics" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Plus,
  ExternalLink,
  Edit,
  BarChart3,
  Copy,
  Trash2,
  Activity,
  Zap,
  AlertCircle,
  CheckCircle,
  Clock,
  Settings,
} from "lucide-react"
import Link from "next/link"

export default function DashboardPage() {
  // Mock data for bio-links
  const bioLinks = [
    {
      id: 1,
      title: "My Main Bio-Link",
      url: "connectsync.app/johndoe",
      clicks: 1247,
      isActive: true,
      lastUpdated: "2 hours ago",
    },
    {
      id: 2,
      title: "Event Promotion",
      url: "connectsync.app/johndoe-event",
      clicks: 89,
      isActive: false,
      lastUpdated: "3 days ago",
    },
  ]

// Mock data for integrations and real-time activity
  const integrations = [
    { name: "Google Calendar", status: "connected", lastSync: "2 min ago", syncCount: 45 },
    { name: "Slack", status: "connected", lastSync: "5 min ago", syncCount: 23 },
    { name: "Trello", status: "error", lastSync: "1 hour ago", syncCount: 0 },
    { name: "Notion", status: "syncing", lastSync: "Just now", syncCount: 12 },
  ]

const recentActivity = [
    { type: "sync", message: "Google Calendar synced 3 new events", time: "2 min ago", status: "success" },
    { type: "trigger", message: "Slack notification sent for new Trello card", time: "5 min ago", status: "success" },
    { type: "error", message: "Trello sync failed - API limit reached", time: "1 hour ago", status: "error" },
    { type: "sync", message: "Notion database updated with 2 new entries", time: "2 hours ago", status: "success" },
  ]

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid md:grid-cols-5 gap-6 mb-8">
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Connected Apps</CardDescription>
              <CardTitle className="text-2xl">4</CardTitle>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Active Syncs</CardDescription>
              <CardTitle className="text-2xl text-green-600">3</CardTitle>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Total Bio-Links</CardDescription>
              <CardTitle className="text-2xl">2</CardTitle>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Total Clicks</CardDescription>
              <CardTitle className="text-2xl">1,336</CardTitle>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>AI Summaries</CardDescription>
              <CardTitle className="text-2xl">5</CardTitle>
            </CardHeader>
          </Card>
        </div>

<div className="grid lg:grid-cols-3 gap-8">
          {/* Integration Status */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Zap className="h-5 w-5 text-primary" />
                  Integration Status
                </CardTitle>
                <CardDescription>Real-time sync status for connected applications</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {integrations.map((integration, index) => (
                  <div key={index} className="flex items-center justify-between p-3 rounded-lg border border-border">
                    <div className="flex items-center gap-3">
                      <div
                        className={`w-3 h-3 rounded-full ${
                          integration.status === "connected"
                            ? "bg-green-500"
                            : integration.status === "syncing"
                              ? "bg-yellow-500 animate-pulse"
                              : "bg-red-500"
                        }`}
                      />
                      <div>
                        <p className="font-medium text-foreground">{integration.name}</p>
                        <p className="text-sm text-muted-foreground">
                          Last sync: {integration.lastSync} • {integration.syncCount} items synced
                        </p>
                      </div>
                    </div>
                    <Badge
                      variant={
                        integration.status === "connected"
                          ? "default"
                          : integration.status === "syncing"
                            ? "secondary"
                            : "destructive"
                      }
                    >
                      {integration.status}
                    </Badge>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Bio-Links List */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>Your Bio-Links</CardTitle>
                  <Button variant="outline" size="sm">
                    <BarChart3 className="mr-2 h-4 w-4" />
                    View Analytics
                  </Button>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                {bioLinks.map((link) => (
                  <div key={link.id} className="flex items-center justify-between p-4 rounded-lg border border-border">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="font-semibold text-foreground">{link.title}</h3>
                        <Badge variant={link.isActive ? "default" : "secondary"}>
                          {link.isActive ? "Active" : "Inactive"}
                        </Badge>
                      </div>
                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <ExternalLink className="h-3 w-3" />
                          {link.url}
                        </span>
                        <span>{link.clicks} clicks</span>
                        <span>Updated {link.lastUpdated}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button variant="ghost" size="sm">
                        <Copy className="h-4 w-4" />
                      </Button>
                      <Link href={`/dashboard/builder/${link.id}`}>
                        <Button variant="ghost" size="sm">
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button variant="ghost" size="sm">
                        <BarChart3 className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>
          </div>

{/* Real-time Activity Feed */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Activity className="h-5 w-5 text-primary" />
                  Recent Activity
                </CardTitle>
                <CardDescription>Live updates from your connected apps</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {recentActivity.map((activity, index) => (
                  <div key={index} className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
                    <div className="mt-1">
                      {activity.status === "success" ? (
                        <CheckCircle className="h-4 w-4 text-green-500" />
                      ) : activity.status === "error" ? (
                        <AlertCircle className="h-4 w-4 text-red-500" />
                      ) : (
                        <Clock className="h-4 w-4 text-yellow-500" />
                      )}
                    </div>
                    <div className="flex-1">
                      <p className="text-sm text-foreground">{activity.message}</p>
                      <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Quick Actions */}
            <Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Integration
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <Zap className="mr-2 h-4 w-4" />
                  Create Automation
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <BarChart3 className="mr-2 h-4 w-4" />
                  View Insights
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  Sidebar as SidebarComponent,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { LayoutDashboard, LinkIcon, Sparkles, BarChart3, CreditCard, Settings, User, LogOut } from "lucide-react"

const navigation = [
  {
    name: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
  },
  {
    name: "Bio-Links",
    href: "/dashboard/builder",
    icon: LinkIcon,
  },
  {
    name: "AI Summaries",
    href: "/dashboard/ai-summaries",
    icon: Sparkles,
  },
  {
    name: "Analytics",
    href: "/dashboard/analytics",
    icon: BarChart3,
  },
  {
    name: "Billing",
    href: "/dashboard/billing",
    icon: CreditCard,
  },
]

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

return (
    <SidebarComponent>
      <SidebarHeader>
        <div className="flex items-center gap-2 px-2">
          <img src="/images/connectsync-logo.png" alt="ConnectSync" className="h-6 w-auto" />
          <span className="text-lg font-semibold">ConnectSync</span>
        </div>
      </SidebarHeader>

<SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {navigation.map((item) => {
                const isActive =
                  pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
                return (
                  <SidebarMenuItem key={item.name}>
                    <SidebarMenuButton asChild isActive={isActive}>
                      <Link href={item.href}>
                        <item.icon className="h-4 w-4" />
                        <span>{item.name}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                )
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

<SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <Link href="/dashboard/settings">
                <User className="h-4 w-4" />
                <span>Profile</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton asChild>
              <Link href="/dashboard/settings">
                <Settings className="h-4 w-4" />
                <span>Settings</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <LogOut className="h-4 w-4" />
              <span>Sign Out</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </SidebarComponent>
  )
}
[V0_FILE]typescriptreact:file="components/tech-stack.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

const techItems = [
  {
    name: "Next.js",
    description: "React framework for production-ready applications",
    category: "Frontend",
  },
  {
    name: "Vercel",
    description: "Deployment and hosting platform",
    category: "Infrastructure",
  },
  {
    name: "Tailwind CSS",
    description: "Utility-first CSS framework for rapid UI development",
    category: "Styling",
  },
  {
    name: "shadcn/ui",
    description: "Accessible and customizable component library",
    category: "Components",
  },
  {
    name: "Stripe",
    description: "Payment processing and subscription management",
    category: "Payments",
  },
  {
    name: "NextAuth",
    description: "Authentication library for Next.js applications",
    category: "Auth",
  },
  {
    name: "Prisma",
    description: "Type-safe database ORM and query builder",
    category: "Database",
  },
  {
    name: "TypeScript",
    description: "Type-safe JavaScript for better development experience",
    category: "Language",
  },
]

export function TechStack() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {techItems.map((item) => (
        <Card key={item.name} className="text-center hover:shadow-md transition-shadow">
          <CardHeader className="pb-2">
            <Badge variant="secondary" className="w-fit mx-auto mb-2">
              {item.category}
            </Badge>
            <CardTitle className="text-sm">{item.name}</CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <CardDescription className="text-xs">{item.description}</CardDescription>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whitepaper/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { ThemeToggle } from "@/components/theme-toggle"
import { ArchitectureDiagram } from "@/components/diagrams/architecture-diagram"
import { SyncSequenceDiagram } from "@/components/diagrams/sync-sequence-diagram"
import { SecurityPermissionsDiagram } from "@/components/diagrams/security-permissions-diagram"
import { RoadmapTimeline } from "@/components/diagrams/roadmap-timeline"
import { TechStack } from "@/components/tech-stack"
import { Menu, FileText, Printer } from "lucide-react"
import Link from "next/link"

const sections = [
  { id: "abstract", title: "Abstract" },
  { id: "problem", title: "Problem Statement" },
  { id: "solution", title: "Solution Overview" },
  { id: "architecture", title: "System Architecture" },
  { id: "flow", title: "User Interaction Flow" },
  { id: "tech-stack", title: "Technology Stack" },
  { id: "differentiators", title: "Differentiators" },
  { id: "roadmap", title: "Implementation Roadmap" },
  { id: "security", title: "Security & Permissions" },
  { id: "future", title: "Future Work" },
  { id: "conclusion", title: "Conclusion" },
]

const roadmapPhases = [
  {
    phase: "Phase 1",
    title: "Core Integration Layer",
    description: "Build foundational API connectors and authentication framework",
    timeline: "Q1 2025",
  },
  {
    phase: "Phase 2",
    title: "Synchronization Engine",
    description: "Implement real-time sync with conflict resolution",
    timeline: "Q2 2025",
  },
  {
    phase: "Phase 3",
    title: "Automation & Rules",
    description: "Add workflow automation and custom rule builder",
    timeline: "Q3 2025",
  },
  {
    phase: "Phase 4",
    title: "Advanced Analytics",
    description: "Deploy ML-powered insights and predictive analytics",
    timeline: "Q4 2025",
  },
]

export default function WhitepaperPage() {
  const [tocOpen, setTocOpen] = useState(false)

const handlePrint = () => {
    window.print()
  }

return (
    <div className="min-h-screen bg-background">
      {/* Sticky Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-primary" />
              <span className="font-semibold">ConnectSync Whitepaper</span>
            </Link>

{/* Mobile TOC */}
            <Sheet open={tocOpen} onOpenChange={setTocOpen}>
              <SheetTrigger asChild>
                <Button variant="outline" size="sm" className="md:hidden bg-transparent">
                  <Menu className="h-4 w-4" />
                  Contents
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-[300px]">
                <SheetHeader>
                  <SheetTitle>Table of Contents</SheetTitle>
                </SheetHeader>
                <nav className="mt-6">
                  <ul className="space-y-2">
                    {sections.map((section) => (
                      <li key={section.id}>
                        <a
                          href={`#${section.id}`}
                          className="block py-2 px-3 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
                          onClick={() => setTocOpen(false)}
                        >
                          {section.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </nav>
              </SheetContent>
            </Sheet>
          </div>

<div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={handlePrint} className="print:hidden bg-transparent">
              <Printer className="h-4 w-4 mr-2" />
              Print PDF
            </Button>
            <ThemeToggle />
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8 flex gap-8">
        {/* Desktop TOC */}
        <aside className="hidden md:block w-64 shrink-0">
          <div className="sticky top-24">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Table of Contents</CardTitle>
              </CardHeader>
              <CardContent>
                <nav>
                  <ul className="space-y-1">
                    {sections.map((section) => (
                      <li key={section.id}>
                        <a
                          href={`#${section.id}`}
                          className="block py-2 px-3 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
                        >
                          {section.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </nav>
              </CardContent>
            </Card>
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 max-w-4xl">
          <article className="prose prose-gray dark:prose-invert max-w-none">
            <header className="mb-12">
              <h1 className="text-4xl font-bold text-foreground mb-4">
                ConnectSync: A Unified Integration Platform for Modern Workflows
              </h1>
              <p className="text-lg text-muted-foreground">Technical Whitepaper - Version 1.0 | January 2025</p>
            </header>

<section id="abstract" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Abstract</h2>
              <p className="text-muted-foreground leading-relaxed">
                ConnectSync addresses the growing challenge of data fragmentation across modern business tools. As
                organizations adopt specialized software for different functions, data silos emerge, leading to
                inefficiencies and inconsistencies. Our platform provides a unified integration layer that enables
                real-time synchronization, automated workflows, and comprehensive analytics across disparate systems.
              </p>
            </section>

<section id="problem" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Problem Statement</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>
                  Modern businesses rely on an average of 87 different software tools, creating significant challenges:
                </p>
                <ul className="list-disc pl-6 space-y-2">
                  <li>Data inconsistency across platforms leads to conflicting information</li>
                  <li>Manual data entry increases error rates and reduces productivity</li>
                  <li>Lack of real-time synchronization causes delays in decision-making</li>
                  <li>Complex integration requirements demand significant technical resources</li>
                  <li>Security concerns arise from multiple authentication systems</li>
                </ul>
              </div>
            </section>

<section id="solution" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Solution Overview</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                ConnectSync provides a comprehensive integration platform that unifies data across business tools
                through three core components: an Integration Layer for secure connections, a Synchronization Engine for
                real-time data flow, and an Automation Framework for intelligent workflow management.
              </p>
            </section>

<section id="architecture" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">System Architecture</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                The ConnectSync architecture follows a modular design pattern, enabling scalable integration across
                diverse platforms while maintaining security and performance standards.
              </p>
              <div className="my-8">
                <ArchitectureDiagram />
              </div>
            </section>

<section id="flow" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">User Interaction Flow</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                The synchronization process follows a structured sequence that ensures data integrity and conflict
                resolution across all connected platforms.
              </p>
              <div className="my-8">
                <SyncSequenceDiagram />
              </div>
            </section>

<section id="tech-stack" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Technology Stack</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                ConnectSync leverages modern, battle-tested technologies to ensure reliability, scalability, and
                developer experience.
              </p>
              <div className="my-8">
                <TechStack />
              </div>
            </section>

<section id="differentiators" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Differentiators</h2>
              <div className="grid md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Real-time Synchronization</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      Unlike batch-based solutions, ConnectSync provides instant data updates across all connected
                      platforms.
                    </p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <CardTitle>Intelligent Conflict Resolution</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      Advanced algorithms automatically resolve data conflicts based on configurable business rules.
                    </p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <CardTitle>No-Code Automation</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      Visual rule builder enables non-technical users to create complex workflow automations.
                    </p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <CardTitle>Enterprise Security</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">
                      SOC 2 compliant with end-to-end encryption and granular permission controls.
                    </p>
                  </CardContent>
                </Card>
              </div>
            </section>

<section id="roadmap" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Implementation Roadmap</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                Our development roadmap focuses on delivering core functionality first, then expanding capabilities
                based on user feedback and market demands.
              </p>
              <div className="my-8">
                <RoadmapTimeline phases={roadmapPhases} />
              </div>
            </section>

<section id="security" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Security & Permissions</h2>
              <p className="text-muted-foreground leading-relaxed mb-6">
                Security is paramount in ConnectSync's design, implementing multiple layers of protection and granular
                access controls.
              </p>
              <div className="my-8">
                <SecurityPermissionsDiagram />
              </div>
            </section>

<section id="future" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Future Work</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>Future enhancements will focus on expanding platform capabilities and intelligence:</p>
                <ul className="list-disc pl-6 space-y-2">
                  <li>Machine learning-powered data mapping and transformation</li>
                  <li>Predictive analytics for workflow optimization</li>
                  <li>Advanced compliance frameworks (GDPR, HIPAA, SOX)</li>
                  <li>Mobile-first management interface</li>
                  <li>API marketplace for custom integrations</li>
                </ul>
              </div>
            </section>

<section id="conclusion" className="mb-12">
              <h2 className="text-2xl font-bold text-foreground mb-4">Conclusion</h2>
              <p className="text-muted-foreground leading-relaxed">
                ConnectSync represents a paradigm shift in how organizations manage their data ecosystem. By providing
                real-time synchronization, intelligent automation, and comprehensive security, we enable businesses to
                focus on their core objectives while maintaining data consistency and operational efficiency across all
                platforms.
              </p>
            </section>
          </article>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { useEffect, useState } from "react"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <Button variant="ghost" size="sm">
        <Sun className="h-4 w-4" />
      </Button>
    )
  }

return (
    <Button variant="ghost" size="sm" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      {theme === "light" ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
[V0_FILE]plaintext:file="prisma/schema.prisma" isEdit="true" isQuickEdit="true" isMerged="true"
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id                 String    @id @default(cuid())
  name               String?
  email              String    @unique
  emailVerified      DateTime?
  image              String?
  role               String    @default("user")
  stripeCustomerId   String?   @unique
  subscriptionStatus String    @default("free")
  createdAt          DateTime  @default(now())
  updatedAt          DateTime  @updatedAt

accounts            Account[]
  sessions            Session[]
  bioPages            BioPage[]
  integrationAccounts IntegrationAccount[]
  actions             Action[]
  triggers            Trigger[]
  eventLogs           EventLog[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

@@unique([identifier, token])
}

model BioPage {
  id          String    @id @default(cuid())
  userId      String
  slug        String    @unique
  title       String
  theme       String    @default("{}")
  publishedAt DateTime?
  ogImageUrl  String?
  domain      String?
  settings    String    @default("{}")
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

user         User           @relation(fields: [userId], references: [id], onDelete: Cascade)
  blocks       Block[]
  triggers     Trigger[]
  analyticsHits AnalyticsHit[]
}

model Block {
  id       String  @id @default(cuid())
  pageId   String
  type     String
  order    Int
  config   String  @default("{}")
  variant  String? // 'A' | 'B' | null
  enabled  Boolean @default(true)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

page         BioPage        @relation(fields: [pageId], references: [id], onDelete: Cascade)
  triggers     Trigger[]
  analyticsHits AnalyticsHit[]

@@index([pageId, order])
}

model IntegrationAccount {
  id       String @id @default(cuid())
  userId   String
  provider String
  authType String
  access   String @default("{}")
  status   String @default("connected")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@unique([userId, provider])
}

model Action {
  id        String    @id @default(cuid())
  userId    String
  provider  String
  actionKey String
  name      String
  config    String    @default("{}")
  lastRunAt DateTime?
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt

user User @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model Trigger {
  id           String    @id @default(cuid())
  userId       String
  pageId       String?
  blockId      String?
  type         String
  scheduleCron String?
  secret       String?
  targets      String    @default("[]")
  enabled      Boolean   @default(true)
  createdAt    DateTime  @default(now())
  updatedAt    DateTime  @updatedAt

user    User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  page    BioPage? @relation(fields: [pageId], references: [id], onDelete: Cascade)
  block   Block?   @relation(fields: [blockId], references: [id], onDelete: Cascade)
}

model EventLog {
  id        String   @id @default(cuid())
  userId    String
  type      String
  payload   String   @default("{}")
  createdAt DateTime @default(now())

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@index([userId, createdAt])
}

model AnalyticsHit {
  id         String   @id @default(cuid())
  pageId     String
  blockId    String?
  type       String   // 'view' | 'click'
  ts         DateTime @default(now())
  userAgent  String?
  ipHash     String?  // renamed from ip to ipHash for privacy
  referrer   String?
  utm        String   @default("{}")
  device     String?
  country    String?

page  BioPage @relation(fields: [pageId], references: [id], onDelete: Cascade)
  block Block?  @relation(fields: [blockId], references: [id], onDelete: Cascade)

@@index([pageId, ts])
  @@index([blockId, ts])
}

model ErrorLog {
  id        String   @id @default(cuid())
  ts        DateTime @default(now())
  requestId String?
  userId    String?
  route     String
  method    String
  status    Int
  code      String?
  message   String
  stack     String?
  context   String   @default("{}")
  ipHash    String?

@@index([ts])
  @@index([requestId])
  @@index([userId])
}

model AuditLog {
  id        String   @id @default(cuid())
  ts        DateTime @default(now())
  userId    String?
  actorType String   // user|system|webhook
  action    String   // CREATED_RULE, UPDATED_PAGE, SIGNIN, etc.
  target    String?  // entity id or path
  meta      String   @default("{}")
  ipHash    String?

@@index([ts])
  @@index([userId])
  @@index([action])
}
[V0_FILE]typescriptreact:file="lib/prisma.ts" isMerged="true"
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescript:file="prisma/seed.tsx" isMerged="true"
import { PrismaClient } from "@prisma/client"
import { subDays } from "date-fns"
import crypto from "crypto"

const prisma = new PrismaClient()

function hashIP(i: number) {
  return crypto.createHash("sha256").update(`127.0.0.${i}`).digest("hex").slice(0, 32)
}

function pick<T>(arr: T[]) {
  return arr[Math.floor(Math.random() * arr.length)]
}

async function main() {
  console.log("🌱 Starting seed...")

const owner = await prisma.user.upsert({
    where: { email: "demo-owner@connectsync.dev" },
    create: {
      email: "demo-owner@connectsync.dev",
      name: "Jason (Demo Owner)",
      role: "ADMIN",
      subscriptionStatus: "pro_active",
      stripeCustomerId: "cus_demo_owner",
    },
    update: {},
  })

const freeUser = await prisma.user.upsert({
    where: { email: "demo-free@connectsync.dev" },
    create: {
      email: "demo-free@connectsync.dev",
      name: "Ava Free",
      role: "USER",
      subscriptionStatus: "free",
    },
    update: {},
  })

const editor = await prisma.user.upsert({
    where: { email: "demo-editor@connectsync.dev" },
    create: {
      email: "demo-editor@connectsync.dev",
      name: "Sam Editor",
      role: "EDITOR",
      subscriptionStatus: "pro_active",
    },
    update: {},
  })

const jasonPage = await prisma.bioPage.create({
    data: {
      userId: owner.id,
      slug: "jason",
      title: "Jason — ConnectSync",
      publishedAt: new Date(),
      theme: {
        primary: "#4F46E5",
        bg: "#0B1020",
        text: "#E5E7EB",
        radius: 16,
        font: "Inter",
      } as any,
      settings: {
        showAvatar: true,
        showFooterBrand: true,
        abTesting: true,
        ogStyle: "dark",
      } as any,
    },
  })

const avaPage = await prisma.bioPage.create({
    data: {
      userId: freeUser.id,
      slug: "ava",
      title: "Ava — Links",
      publishedAt: new Date(),
      theme: {
        primary: "#16A34A",
        bg: "#0f172a",
        text: "#f8fafc",
        radius: 12,
        font: "Inter",
      } as any,
      settings: { abTesting: false } as any,
    },
  })

const studioPage = await prisma.bioPage.create({
    data: {
      userId: owner.id,
      slug: "studio",
      title: "ConnectSync Studio",
      domain: "studio.demo.connectsync.dev",
      publishedAt: new Date(),
      theme: {
        primary: "#F59E0B",
        bg: "#111827",
        text: "#F3F4F6",
        radius: 20,
        font: "DM Sans",
      } as any,
    },
  })

await prisma.block.createMany({
    data: [
      // Jason's page - Pro features with A/B testing
      {
        pageId: jasonPage.id,
        type: "PROFILE",
        order: 1,
        config: {
          A: {
            avatarUrl: "/demo/jason.jpg",
            title: "Jason",
            subtitle: "Integrations & Events",
            bio: "Building ConnectSync & IRL Events",
          },
          B: {
            avatarUrl: "/demo/jason-2.jpg",
            title: "Jason",
            subtitle: "Automation Architect",
            bio: "Syncing data, saving time.",
          },
          split: 50,
        } as any,
        variant: null,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "LINK",
        order: 2,
        config: {
          A: { label: "Book a Demo", url: "https://cal.com/demo" },
          B: { label: "See It Live", url: "https://cal.com/demo" },
          utm: { source: "bio", campaign: "seed" },
          track: true,
        } as any,
        variant: null,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "GROUP",
        order: 3,
        config: {
          title: "Featured",
          links: [
            { label: "Whitepaper", url: "/whitepaper" },
            { label: "Pricing", url: "/pricing" },
            { label: "Dashboard (Demo)", url: "/dashboard" },
          ],
        } as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "YOUTUBE",
        order: 4,
        config: {
          videoId: "dQw4w9WgXcQ",
          title: "ConnectSync Overview",
        } as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "SOCIAL",
        order: 5,
        config: {
          twitter: "https://x.com/connectsync",
          linkedin: "https://linkedin.com",
          github: "https://github.com",
        } as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "CONTACT",
        order: 6,
        config: {
          fields: ["name", "email", "message"],
          notifyChannel: "EMAIL",
          notifyTo: "demo-owner@connectsync.dev",
        } as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "ACTION",
        order: 7,
        config: { actionRef: "trelloCreateLead" } as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "DIVIDER",
        order: 8,
        config: {} as any,
        enabled: true,
      },
      {
        pageId: jasonPage.id,
        type: "RICHTEXT",
        order: 9,
        config: {
          html: "<small>Privacy · Terms · Contact</small>",
        } as any,
        enabled: true,
      },

// Ava's page - Free tier limitations
      {
        pageId: avaPage.id,
        type: "PROFILE",
        order: 1,
        config: {
          avatarUrl: "/demo/ava.jpg",
          title: "Ava",
          subtitle: "Creator",
          bio: "Finding cool things on the internet.",
        } as any,
        enabled: true,
      },
      {
        pageId: avaPage.id,
        type: "LINK",
        order: 2,
        config: {
          label: "My Store",
          url: "#",
          track: true,
        } as any,
        enabled: true,
      },
      {
        pageId: avaPage.id,
        type: "LINK",
        order: 3,
        config: {
          label: "Latest Video",
          url: "#",
          track: true,
        } as any,
        enabled: true,
      },
      {
        pageId: avaPage.id,
        type: "NEWSLETTER",
        order: 4,
        config: {
          provider: "webhook",
          url: "https://example.com/subscribe",
        } as any,
        enabled: true,
      },
      {
        pageId: avaPage.id,
        type: "SOCIAL",
        order: 5,
        config: {
          instagram: "#",
          tiktok: "#",
        } as any,
        enabled: true,
      },
    ],
  })

await prisma.integrationAccount.createMany({
    data: [
      {
        userId: owner.id,
        provider: "google",
        authType: "oauth",
        status: "connected",
        access: {
          access_token: "demo_google_token",
          refresh_token: "demo_google_refresh",
          scope: "sheets calendar",
          expiry_date: 1893456000000,
        } as any,
      },
      {
        userId: owner.id,
        provider: "notion",
        authType: "oauth",
        status: "connected",
        access: {
          access_token: "demo_notion_token",
          workspace_id: "ws_demo",
        } as any,
      },
      {
        userId: owner.id,
        provider: "trello",
        authType: "oauth",
        status: "connected",
        access: {
          access_token: "demo_trello_token",
          member_id: "me_demo",
          boards: [
            { id: "b1", name: "Marketing" },
            { id: "b2", name: "Product" },
          ],
        } as any,
      },
      {
        userId: owner.id,
        provider: "zapier",
        authType: "apikey",
        status: "connected",
        access: {
          webhook_url: "https://hooks.zapier.com/hooks/catch/123/demo",
          secret: "whsec_demo",
        } as any,
      },
      {
        userId: owner.id,
        provider: "openai",
        authType: "apikey",
        status: process.env.OPENAI_API_KEY ? "connected" : "disconnected",
        access: {
          api_key: process.env.OPENAI_API_KEY ? "***" : null,
        } as any,
      },
    ],
    skipDuplicates: true,
  })

const [googleAddRow, googleEvent, notionAppend, trelloCreate, zapierPost, openaiSum] = await Promise.all([
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "google",
        actionKey: "sheets.addRow",
        name: "Add lead to Google Sheet",
        config: {
          spreadsheetId: "sheet_demo",
          range: "Leads!A:F",
          mapping: {
            name: "{{contact.name}}",
            email: "{{contact.email}}",
            source: "{{utm.source}}",
            message: "{{contact.message}}",
            ts: "{{event.ts}}",
          },
        } as any,
      },
    }),
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "google",
        actionKey: "calendar.createEvent",
        name: "Create intro call",
        config: {
          calendarId: "primary",
          title: "Intro — {{contact.name}}",
          startOffsetMin: 60,
          durationMin: 30,
          attendees: ["{{contact.email}}"],
        } as any,
      },
    }),
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "notion",
        actionKey: "db.appendRow",
        name: "Save contact to Notion CRM",
        config: {
          databaseId: "db_demo_crm",
          mapping: {
            Name: "{{contact.name}}",
            Email: "{{contact.email}}",
            Source: "{{utm.campaign}}",
            Notes: "{{contact.message}}",
          },
        } as any,
      },
    }),
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "trello",
        actionKey: "card.create",
        name: "Create card in Marketing",
        config: {
          boardId: "b1",
          listId: "l1_demo",
          title: "Lead — {{contact.name}}",
          desc: "From bio page {{page.slug}}",
          labels: ["Lead"],
        } as any,
      },
    }),
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "zapier",
        actionKey: "webhook.post",
        name: "Send to Zapier",
        config: {
          url: "https://hooks.zapier.com/hooks/catch/123/demo",
          headers: { "X-Seed": "1" },
          body: {
            type: "contact",
            payload: "{{event.json}}",
          },
        } as any,
      },
    }),
    prisma.action.create({
      data: {
        userId: owner.id,
        provider: "openai",
        actionKey: "ai.summarizeContacts",
        name: "Summarize last 10 contacts",
        config: {
          maxItems: 10,
          tone: "concise",
        } as any,
      },
    }),
  ])

await prisma.block.updateMany({
    where: { pageId: jasonPage.id, type: "ACTION" },
    data: { config: { actionRef: trelloCreate.id } as any },
  })

await Promise.all([
    prisma.trigger.create({
      data: {
        userId: owner.id,
        pageId: jasonPage.id,
        type: "CONTACT_SUBMIT",
        enabled: true,
        targets: [googleAddRow.id, notionAppend.id, trelloCreate.id, zapierPost.id] as any,
      },
    }),
    prisma.trigger.create({
      data: {
        userId: owner.id,
        pageId: jasonPage.id,
        type: "LINK_CLICK",
        blockId: (await prisma.block.findFirst({
          where: { pageId: jasonPage.id, type: "LINK", order: 2 },
        }))!.id,
        enabled: true,
        targets: [googleEvent.id] as any,
      },
    }),
    prisma.trigger.create({
      data: {
        userId: owner.id,
        pageId: jasonPage.id,
        type: "INCOMING_WEBHOOK",
        enabled: true,
        secret: "whsec_demo",
        route: "zapier/contact",
        targets: [notionAppend.id] as any,
      },
    }),
    prisma.trigger.create({
      data: {
        userId: owner.id,
        pageId: jasonPage.id,
        type: "CRON",
        enabled: true,
        scheduleCron: "*/30 * * * *",
        targets: [openaiSum.id] as any,
      },
    }),
  ])

const countries = ["ZA", "US", "GB", "DE"]
  const devices = ["mobile", "desktop"]
  const refs = ["https://twitter.com", "https://instagram.com", ""]
  const pages = [jasonPage.id, avaPage.id]
  const now = new Date()

const hits = Array.from({ length: 400 }).map((_, i) => ({
    pageId: pick(pages),
    type: Math.random() < 0.7 ? "view" : "click",
    ts: subDays(now, Math.floor(Math.random() * 7)),
    userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
    ipHash: hashIP(i % 50),
    referrer: pick(refs),
    device: pick(devices),
    country: pick(countries),
    utm: { source: "bio", campaign: "seed" } as any,
  }))

await prisma.analyticsHit.createMany({ data: hits })

await prisma.eventLog.createMany({
    data: [
      {
        userId: owner.id,
        type: "ACTION_SUCCESS",
        payload: { action: "sheets.addRow", rowId: "r1" } as any,
      },
      {
        userId: owner.id,
        type: "ACTION_SUCCESS",
        payload: { action: "trello.card.create", cardId: "c1" } as any,
      },
      {
        userId: owner.id,
        type: "ACTION_FAILED",
        payload: { action: "notion.db.appendRow", error: "database not found" } as any,
      },
      {
        userId: owner.id,
        type: "WEBHOOK_INCOMING",
        payload: { provider: "zapier", route: "contact", status: 200 } as any,
      },
      {
        userId: owner.id,
        type: "WEBHOOK_INCOMING",
        payload: { provider: "zapier", route: "contact", status: 401 } as any,
      },
    ],
  })

console.log("✅ Seed complete.")
  console.log("📊 Created:")
  console.log(`  - 3 users (Jason: Pro Admin, Ava: Free User, Sam: Editor)`)
  console.log(`  - 3 bio pages (@jason, @ava, @studio)`)
  console.log(`  - 14 blocks with A/B testing`)
  console.log(`  - 5 integrations (Google, Notion, Trello, Zapier, OpenAI)`)
  console.log(`  - 6 automation actions`)
  console.log(`  - 4 triggers`)
  console.log(`  - 400 analytics hits`)
  console.log(`  - 5 event logs`)
  console.log("")
  console.log("🔗 Demo pages:")
  console.log("  - http://localhost:3000/jason")
  console.log("  - http://localhost:3000/ava")
  console.log("  - http://localhost:3000/studio")
  console.log("")
  console.log("👤 Demo accounts:")
  console.log("  - demo-owner@connectsync.dev (Admin/Pro)")
  console.log("  - demo-free@connectsync.dev (Free User)")
  console.log("  - demo-editor@connectsync.dev (Editor/Pro)")
}

main()
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })
[V0_FILE]typescript:file="lib/logger.ts" isMerged="true"
interface LogContext {
  requestId?: string
  userId?: string
  route?: string
  method?: string
  [key: string]: any
}

class Logger {
  private context: LogContext = {}

setContext(context: LogContext) {
    this.context = { ...this.context, ...context }
  }

private log(level: string, message: string, meta: any = {}) {
    const timestamp = new Date().toISOString()
    const logEntry = {
      timestamp,
      level,
      message,
      ...this.context,
      ...meta,
    }

if (process.env.NODE_ENV === "production") {
      console.log(JSON.stringify(logEntry))
    } else {
      console.log(`[${timestamp}] ${level.toUpperCase()}: ${message}`, meta)
    }
  }

info(message: string, meta?: any) {
    this.log("info", message, meta)
  }

warn(message: string, meta?: any) {
    this.log("warn", message, meta)
  }

error(message: string, meta?: any) {
    this.log("error", message, meta)
  }

debug(message: string, meta?: any) {
    if (process.env.NODE_ENV !== "production") {
      this.log("debug", message, meta)
    }
  }
}

export const logger = new Logger()
[V0_FILE]typescript:file="lib/withApiHandler.ts" isMerged="true"
import type { z, ZodSchema } from "zod"
import { type NextRequest, NextResponse } from "next/server"
import { prisma } from "@/lib/prisma"
import { getServerSession } from "next-auth"
import { logger } from "@/lib/logger"
import crypto from "crypto"

interface ApiContext<T = any> {
  req: NextRequest
  user?: any
  body: T
  requestId: string
  prisma: typeof prisma
}

interface ApiOptions<T extends ZodSchema> {
  schema?: T
  role?: "ADMIN" | "USER" | "ANY"
}

export function withApiHandler<T extends ZodSchema>(
  opts: ApiOptions<T> = {},
  handler: (ctx: ApiContext<z.infer<T>>) => Promise<any>,
) {
  return async (req: NextRequest) => {
    const requestId = req.headers.get("x-request-id") ?? crypto.randomUUID()
    const method = req.method ?? "GET"
    const route = new URL(req.url).pathname
    const startTime = Date.now()

let user: any = undefined
    let ipHash: string | undefined

try {
      // Hash IP for privacy
      const ip = req.headers.get("x-forwarded-for") ?? req.headers.get("x-real-ip") ?? "127.0.0.1"
      ipHash = crypto.createHash("sha256").update(ip).digest("hex").slice(0, 32)

// Set logger context
      logger.setContext({ requestId, route, method, ipHash })

// Get user session
      const session = await getServerSession()
      user = session?.user

// Role-based access control
      if (opts.role === "ADMIN" && user?.role !== "ADMIN") {
        logger.warn("Access denied: Admin role required", { userId: user?.id })
        return NextResponse.json(
          { ok: false, code: "FORBIDDEN", message: "Admin access required", requestId },
          { status: 403 },
        )
      }

if (opts.role === "USER" && !user) {
        logger.warn("Access denied: Authentication required")
        return NextResponse.json(
          { ok: false, code: "UNAUTHORIZED", message: "Authentication required", requestId },
          { status: 401 },
        )
      }

// Parse and validate request body
      let body: any = {}
      if (method !== "GET") {
        try {
          const rawBody = await req.text()
          body = rawBody ? JSON.parse(rawBody) : {}
        } catch (e) {
          throw { status: 400, code: "INVALID_JSON", publicMessage: "Invalid JSON in request body" }
        }
      }

if (opts.schema) {
        try {
          body = opts.schema.parse(body)
        } catch (e: any) {
          logger.warn("Validation failed", { errors: e.errors })
          throw {
            status: 400,
            code: "VALIDATION_ERROR",
            publicMessage: "Invalid request data",
            details: e.errors,
          }
        }
      }

// Execute handler
      logger.info("API request started", { userId: user?.id })
      const result = await handler({ req, user, body, requestId, prisma })

const duration = Date.now() - startTime
      logger.info("API request completed", { userId: user?.id, duration })

return NextResponse.json({ ok: true, data: result, requestId })
    } catch (err: any) {
      const duration = Date.now() - startTime
      const status = err?.status ?? 500
      const code = err?.code ?? (status === 429 ? "RATE_LIMIT" : "INTERNAL_ERROR")
      const message =
        process.env.NODE_ENV === "production"
          ? (err?.publicMessage ?? "Something went wrong")
          : (err?.message ?? "Internal server error")

logger.error("API request failed", {
        userId: user?.id,
        duration,
        status,
        code,
        error: err?.message,
        stack: err?.stack?.slice(0, 1000),
      })

// Log error to database
      try {
        await prisma.errorLog.create({
          data: {
            requestId,
            userId: user?.id,
            route,
            method,
            status,
            code,
            message: err?.message ?? message,
            stack: err?.stack?.slice(0, 4000) ?? null,
            context: JSON.stringify({
              url: req.url,
              userAgent: req.headers.get("user-agent"),
              duration,
            }),
            ipHash,
          },
        })
      } catch (dbErr) {
        logger.error("Failed to log error to database", { error: dbErr })
      }

return NextResponse.json({ ok: false, code, message, requestId }, { status })
    }
  }
}
[V0_FILE]typescript:file="lib/rateLimit.ts" isMerged="true"
interface Bucket {
  tokens: number
  lastRefill: number
}

const buckets = new Map<string, Bucket>()

export function rateLimit(key: string, capacity = 20, refillPerSecond = 10): boolean {
  const now = Date.now() / 1000
  const bucket = buckets.get(key) ?? { tokens: capacity, lastRefill: now }

// Calculate tokens to add based on time elapsed
  const tokensToAdd = (now - bucket.lastRefill) * refillPerSecond
  bucket.tokens = Math.min(capacity, bucket.tokens + tokensToAdd)
  bucket.lastRefill = now

// Check if we have tokens available
  if (bucket.tokens < 1) {
    buckets.set(key, bucket)
    return false
  }

// Consume a token
  bucket.tokens -= 1
  buckets.set(key, bucket)
  return true
}

export function getRateLimitInfo(
  key: string,
  capacity = 20,
): {
  remaining: number
  resetTime: number
} {
  const bucket = buckets.get(key)
  if (!bucket) {
    return { remaining: capacity, resetTime: Date.now() + 1000 }
  }

return {
    remaining: Math.floor(bucket.tokens),
    resetTime: Date.now() + (capacity - bucket.tokens) * 1000,
  }
}
[V0_FILE]typescript:file="lib/audit.ts" isMerged="true"
import { prisma } from "@/lib/prisma"
import { logger } from "@/lib/logger"
import crypto from "crypto"

export async function audit(
  userId: string | undefined,
  action: string,
  target?: string,
  meta?: any,
  request?: Request,
) {
  try {
    let ipHash: string | undefined

if (request) {
      const ip = request.headers.get("x-forwarded-for") ?? request.headers.get("x-real-ip") ?? "127.0.0.1"
      ipHash = crypto.createHash("sha256").update(ip).digest("hex").slice(0, 32)
    }

await prisma.auditLog.create({
      data: {
        userId,
        actorType: userId ? "user" : "system",
        action,
        target,
        meta: meta ? JSON.stringify(meta) : "{}",
        ipHash,
      },
    })

logger.info("Audit log created", { userId, action, target })
  } catch (error) {
    logger.error("Failed to create audit log", { error, userId, action })
  }
}

// Common audit actions
export const AuditActions = {
  // Authentication
  SIGNIN: "SIGNIN",
  SIGNOUT: "SIGNOUT",
  SIGNUP: "SIGNUP",

// Bio Pages
  CREATED_PAGE: "CREATED_PAGE",
  UPDATED_PAGE: "UPDATED_PAGE",
  DELETED_PAGE: "DELETED_PAGE",
  PUBLISHED_PAGE: "PUBLISHED_PAGE",

// Blocks
  CREATED_BLOCK: "CREATED_BLOCK",
  UPDATED_BLOCK: "UPDATED_BLOCK",
  DELETED_BLOCK: "DELETED_BLOCK",

// Integrations
  CONNECTED_INTEGRATION: "CONNECTED_INTEGRATION",
  DISCONNECTED_INTEGRATION: "DISCONNECTED_INTEGRATION",

// Actions & Triggers
  CREATED_ACTION: "CREATED_ACTION",
  UPDATED_ACTION: "UPDATED_ACTION",
  DELETED_ACTION: "DELETED_ACTION",
  CREATED_TRIGGER: "CREATED_TRIGGER",
  UPDATED_TRIGGER: "UPDATED_TRIGGER",
  DELETED_TRIGGER: "DELETED_TRIGGER",

// Subscription
  SUBSCRIPTION_CREATED: "SUBSCRIPTION_CREATED",
  SUBSCRIPTION_UPDATED: "SUBSCRIPTION_UPDATED",
  SUBSCRIPTION_CANCELLED: "SUBSCRIPTION_CANCELLED",
} as const
[V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from "lucide-react"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log error to monitoring service
    console.error("[v0] Global error boundary:", error)
  }, [error])

return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="max-w-md w-full text-center space-y-6">
        <div className="flex justify-center">
          <AlertTriangle className="h-16 w-16 text-destructive" />
        </div>

<div className="space-y-2">
          <h1 className="text-2xl font-bold">Something went wrong</h1>
          <p className="text-muted-foreground">We encountered an unexpected error. Our team has been notified.</p>
          {error.digest && <p className="text-xs text-muted-foreground font-mono">Error ID: {error.digest}</p>}
        </div>

<div className="flex gap-4 justify-center">
          <Button onClick={reset} variant="default">
            Try again
          </Button>
          <Button onClick={() => (window.location.href = "/")} variant="outline">
            Go home
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/core/ErrorBoundary.tsx" isMerged="true"
"use client"

import type React from "react"
import { Component, type ReactNode } from "react"
import { AlertTriangle } from "lucide-react"
import { Button } from "@/components/ui/button"

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error?: Error
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("[v0] Error boundary caught error:", error, errorInfo)

// Log to monitoring service
    if (typeof window !== "undefined") {
      // Send error to logging endpoint
      fetch("/api/errors/client", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          error: error.message,
          stack: error.stack,
          componentStack: errorInfo.componentStack,
          url: window.location.href,
          userAgent: navigator.userAgent,
        }),
      }).catch(() => {
        // Silently fail if logging fails
      })
    }
  }

render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback
      }

return (
        <div className="flex items-center justify-center p-8">
          <div className="text-center space-y-4 max-w-md">
            <AlertTriangle className="h-12 w-12 text-destructive mx-auto" />
            <div className="space-y-2">
              <h3 className="text-lg font-semibold">Something went wrong</h3>
              <p className="text-sm text-muted-foreground">
                This component encountered an error. Please try refreshing the page.
              </p>
            </div>
            <Button onClick={() => this.setState({ hasError: false, error: undefined })} size="sm">
              Try again
            </Button>
          </div>
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]typescriptreact:file="components/core/ToasterError.tsx" isMerged="true"
"use client"

import { toast } from "@/hooks/use-toast"
import { Copy } from "lucide-react"
import { Button } from "@/components/ui/button"

interface ErrorResponse {
  ok: false
  code: string
  message: string
  requestId?: string
}

export function showErrorToast(error: ErrorResponse | Error | string) {
  let title = "Something went wrong"
  let description = "Please try again later"
  let requestId: string | undefined

if (typeof error === "string") {
    description = error
  } else if (error instanceof Error) {
    description = error.message
  } else {
    title = error.code || "Error"
    description = error.message
    requestId = error.requestId
  }

toast({
    variant: "destructive",
    title,
    description,
    action: requestId ? (
      <Button
        variant="outline"
        size="sm"
        onClick={() => {
          navigator.clipboard.writeText(requestId!)
          toast({ title: "Copied!", description: "Request ID copied to clipboard" })
        }}
      >
        <Copy className="h-3 w-3 mr-1" />
        Copy ID
      </Button>
    ) : undefined,
  })
}

// Fetch wrapper that shows error toasts
export async function fetchWithErrorHandling(url: string, options?: RequestInit): Promise<any> {
  try {
    const response = await fetch(url, options)
    const data = await response.json()

if (!response.ok || !data.ok) {
      showErrorToast(data)
      throw new Error(data.message || "Request failed")
    }

return data.data
  } catch (error) {
    if (error instanceof Error) {
      showErrorToast(error)
    }
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/global-error.tsx" isMerged="true"
"use client"

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  console.error("GlobalError:", error)

return (
    <html>
      <body className="min-h-screen grid place-items-center p-8">
        <div className="max-w-md text-center">
          <h1 className="text-2xl font-semibold mb-2">Something went wrong</h1>
          <p className="text-sm text-muted-foreground mb-4">Request failed or a component crashed.</p>
          <button onClick={() => reset()} className="px-3 py-2 rounded bg-black text-white hover:bg-gray-800">
            Try again
          </button>
          {process.env.NODE_ENV !== "production" && (
            <pre className="mt-4 text-left text-xs whitespace-pre-wrap bg-gray-100 p-2 rounded">{error.message}</pre>
          )}
        </div>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/health/page.tsx" isMerged="true"
export const dynamic = "force-dynamic"

export default function HealthPage() {
  return <pre>OK {new Date().toISOString()}</pre>
}
[V0_FILE]typescriptreact:file="app/_debug/page.tsx" isMerged="true"
"use client"

export default function DebugPage() {
  return (
    <div className="p-6 space-y-3">
      <h1 className="text-xl font-semibold">Debug</h1>
      <button
        onClick={() =>
          fetch("/api/_diag")
            .then((r) => r.json())
            .then(console.log)
        }
        className="px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700"
      >
        Run /api/_diag
      </button>
      <p>Open the console to see results.</p>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/_diag/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { prisma } from "@/lib/prisma"

export async function GET() {
  try {
    const now = new Date().toISOString()
    await prisma.$queryRaw`SELECT 1`

return NextResponse.json({
      ok: true,
      now,
      env: Object.keys(process.env)
        .filter((k) => k.startsWith("NEXTAUTH") || k.startsWith("STRIPE") || k.startsWith("OPENAI"))
        .sort(),
    })
  } catch (e: any) {
    return NextResponse.json({ ok: false, error: e.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/auth-safe.ts" isMerged="true"
import { getServerSession } from "next-auth"

export async function tryGetSession() {
  try {
    return await getServerSession()
  } catch {
    return null
  }
}
[V0_FILE]typescriptreact:file="components/dev/BootTrace.tsx" isMerged="true"
"use client"

export default function BootTrace({ tag = "Boot" }: { tag?: string }) {
  console.log(`[${tag}] mounted`)
  return null
}
[V0_FILE]typescriptreact:file="components/cart-provider.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useCallback } from "react"

export interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
  image: string
  vendorId: string
  vendorName: string
  category: string
}

interface CartContextType {
  items: CartItem[]
  addItem: (item: Omit<CartItem, "quantity">) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  clearCart: () => void
  total: number
  itemCount: number
}

const CartContext = createContext<CartContextType | undefined>(undefined)

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([])

const addItem = useCallback((item: Omit<CartItem, "quantity">) => {
    setItems((prev) => {
      const existing = prev.find((i) => i.id === item.id)
      if (existing) {
        return prev.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i))
      }
      return [...prev, { ...item, quantity: 1 }]
    })
  }, [])

const removeItem = useCallback((id: string) => {
    setItems((prev) => prev.filter((i) => i.id !== id))
  }, [])

const updateQuantity = useCallback((id: string, quantity: number) => {
    if (quantity <= 0) {
      setItems((prev) => prev.filter((i) => i.id !== id))
    } else {
      setItems((prev) => prev.map((i) => (i.id === id ? { ...i, quantity } : i)))
    }
  }, [])

const clearCart = useCallback(() => {
    setItems([])
  }, [])

const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)

return (
    <CartContext.Provider value={{ items, addItem, removeItem, updateQuantity, clearCart, total, itemCount }}>
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const context = useContext(CartContext)
  if (!context) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}
[V0_FILE]jpg:file="public/cbd-oil-bottle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cbd-oil-bottle-p2okQw8zywxXXNrRxxmaPOaccNA7sM.jpg" isMerged="true"
[V0_FILE]png:file="public/fresh-red-apples.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fresh-red-apples-TYRlkaWsf16ugFueBjvVuLEP29ZINL.png" isMerged="true"
[V0_FILE]png:file="public/cleaning-spray-bottle.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cleaning-spray-bottle-JQ5fuXK1wz8yqHQFzCh3O8OMNzBYZ6.png" isMerged="true"
[V0_FILE]jpg:file="public/trail-mix-nuts-snacks.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trail-mix-nuts-snacks-FNF6wRtUvTpVRqGnoWTRriUmTeV9Hr.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/category/[slug]/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/cannabis-gummies.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cannabis-gummies-cT67vvJjE4WcncnzIys10CBlHLTuYh.png" isMerged="true"
[V0_FILE]jpg:file="public/hemp-flower.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hemp-flower-sK3ubHkUoqvFCYDCqLoId0OCRkFP6E.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cbd-cream.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cbd-cream-2gGzQJpoz3so9j3wTdFNSCLSUGw3zY.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pre-rolled-cones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pre-rolled-cones-kjuUg9pZmzhUTkhvq1ZxTA2dwEiPEo.jpg" isMerged="true"
[V0_FILE]png:file="public/glass-water-pipe.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/glass-water-pipe-8VeN0M1EUvst0ntgBslpmU2dVmDw0y.png" isMerged="true"
[V0_FILE]jpg:file="public/herb-grinder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/herb-grinder-Hl97lYXNj8cweDjTx5qQ8Nutgnf58d.jpg" isMerged="true"
[V0_FILE]jpg:file="public/vape-cartridge.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vape-cartridge-Vo3abdHmTppaq2swpRgb4DZyRCBRsq.jpg" isMerged="true"
[V0_FILE]jpg:file="public/organic-red-apples.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/organic-red-apples-ymEl3BsvepJih1OOedhPqmmZPiTXJj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/fresh-bananas.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fresh-bananas-b9J4ORIcHYHiswfTwkZD8yhwrWFRMg.jpg" isMerged="true"
[V0_FILE]png:file="public/mixed-berries.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mixed-berries-ufPbyeen7cMvnDO8VPOuDRpMrszy91.png" isMerged="true"
[V0_FILE]png:file="public/organic-spinach.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/organic-spinach-ILM09RQ8QGuKdCSWjl9YJUv0QlpyCm.png" isMerged="true"
[V0_FILE]png:file="public/ripe-avocados.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ripe-avocados-UbytaZGYaQO18PDoTJXwXkKJta3jXu.png" isMerged="true"
[V0_FILE]jpg:file="public/roma-tomatoes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/roma-tomatoes-Qux1LK8OO5tJ6wul8vLRw7hH7Fhhy7.jpg" isMerged="true"
[V0_FILE]png:file="public/fresh-carrots.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fresh-carrots-IJitiwfFduNDy2uXMzlzj037A7aauD.png" isMerged="true"
[V0_FILE]jpg:file="public/citrus-fruits-oranges-lemons.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/citrus-fruits-oranges-lemons-OF1HC8D9fgkLJ8BJs0UEaugz3mueu4.jpg" isMerged="true"
[V0_FILE]png:file="public/cleaning-spray.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cleaning-spray-yweMCkVrtSS6QcoCZBah920N3rF3nC.png" isMerged="true"
[V0_FILE]png:file="public/laundry-detergent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/laundry-detergent-EIf6ciS4XmyTDYkePIlso3cdXzuJj3.png" isMerged="true"
[V0_FILE]png:file="public/paper-towels.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/paper-towels-ek01OTfazeAadkHAbzHB8ot0LPwazr.png" isMerged="true"
[V0_FILE]jpg:file="public/dish-soap-bottles.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dish-soap-bottles-4dQje2Ea8ZXAOsNLoDy7Eivxjhspzg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/toilet-paper-package.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/toilet-paper-package-JDKb3YMZHYRBWb1DJQjTFUbw53fDbC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/trash-bags-box.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trash-bags-box-Gda3qY4lbohnL6hGIc4tqPGO5NOZIf.jpg" isMerged="true"
[V0_FILE]jpg:file="public/air-freshener-spray.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/air-freshener-spray-4HzIYksf2v8o50On2PXFPS0RqYonrz.jpg" isMerged="true"
[V0_FILE]jpg:file="public/kitchen-sponges.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kitchen-sponges-VdukY6z01tLZlq4ekwVqEz6TAUtKNK.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
"use client"

export default function RegisterPage() {
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsLoading(false)
    toast.success("Account created successfully! Please check your email to verify.")
  }

return (
    <div className="min-h-screen bg-background flex">
      {/* Left side - Benefits */}
      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary/20 via-background to-secondary/20 p-12 flex-col justify-center">
        <Link href="/" className="flex items-center gap-2 mb-12">
          <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center">
            <Globe className="h-7 w-7 text-primary-foreground" />
          </div>
          <div>
            <span className="text-2xl font-bold text-foreground">Buddies</span>
            <span className="text-2xl font-light text-primary"> World Wide</span>
          </div>
        </Link>

<h1 className="text-4xl font-bold text-foreground mb-6">Join Our Global Marketplace</h1>
        <p className="text-lg text-muted-foreground mb-8">
          Create your free account and start shopping from trusted vendors worldwide.
        </p>

<div className="space-y-6">
          <div className="flex items-start gap-4">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <Gift className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">Free to Join</h3>
              <p className="text-sm text-muted-foreground">No subscription fees for customers - ever!</p>
            </div>
          </div>
          <div className="flex items-start gap-4">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <Truck className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">Worldwide Shipping</h3>
              <p className="text-sm text-muted-foreground">Get products delivered anywhere in the world</p>
            </div>
          </div>
          <div className="flex items-start gap-4">
            <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
              <ShieldCheck className="h-5 w-5 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">Secure Payments</h3>
              <p className="text-sm text-muted-foreground">Pay with cards, PayPal, or cryptocurrency</p>
            </div>
          </div>
        </div>
      </div>

{/* Right side - Form */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-8">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <div className="lg:hidden flex items-center justify-center gap-2 mb-4">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <Globe className="h-6 w-6 text-primary-foreground" />
              </div>
            </div>
            <CardTitle className="text-2xl">Create Your Account</CardTitle>
            <CardDescription>Start shopping in minutes - it's completely free!</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First Name</Label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input id="firstName" placeholder="John" className="pl-10" required />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input id="lastName" placeholder="Doe" required />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input id="email" type="email" placeholder="you@example.com" className="pl-10" required />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="password"
                    type="password"
                    placeholder="Create a strong password"
                    className="pl-10"
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    id="confirmPassword"
                    type="password"
                    placeholder="Confirm your password"
                    className="pl-10"
                    required
                  />
                </div>
              </div>

<div className="flex items-start space-x-2">
                <Checkbox id="terms" required />
                <label htmlFor="terms" className="text-sm text-muted-foreground leading-tight">
                  I agree to the{" "}
                  <Link href="/terms" className="text-primary hover:underline">
                    Terms of Service
                  </Link>{" "}
                  and{" "}
                  <Link href="/privacy" className="text-primary hover:underline">
                    Privacy Policy
                  </Link>
                </label>
              </div>

<Button type="submit" className="w-full" size="lg" disabled={isLoading}>
                {isLoading ? (
                  "Creating Account..."
                ) : (
                  <>
                    Create Free Account
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </>
                )}
              </Button>
            </form>

<div className="mt-6 text-center text-sm text-muted-foreground">
              Already have an account?{" "}
              <Link href="/login" className="text-primary hover:underline font-medium">
                Sign In
              </Link>
            </div>

<div className="mt-4 text-center">
              <Link href="/vendor/register" className="text-sm text-secondary hover:underline">
                Want to sell? Register as a Vendor
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false)

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <Link href="/" className="flex items-center justify-center gap-2 mb-8">
          <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center">
            <Globe className="h-7 w-7 text-primary-foreground" />
          </div>
          <div>
            <span className="text-2xl font-bold text-foreground">Buddies</span>
            <span className="text-2xl font-light text-primary"> World Wide</span>
          </div>
        </Link>

<Card>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl">Welcome Back</CardTitle>
            <CardDescription>Sign in to your account to continue shopping</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input id="email" type="email" placeholder="you@example.com" className="pl-10" required />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input id="password" type="password" placeholder="Enter your password" className="pl-10" required />
                </div>
              </div>
              <div className="flex items-center justify-between">
                <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                  Forgot password?
                </Link>
              </div>
              <Button type="submit" className="w-full" size="lg" disabled={isLoading}>
                {isLoading ? (
                  "Signing in..."
                ) : (
                  <>
                    Sign In
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </>
                )}
              </Button>
            </form>

<div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-border" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <Button variant="outline" className="w-full bg-transparent">
                Google
              </Button>
              <Button variant="outline" className="w-full bg-transparent">
                Apple
              </Button>
            </div>

<div className="text-center text-sm">
              <span className="text-muted-foreground">{"Don't have an account?"} </span>
              <Link href="/register" className="text-primary hover:underline font-medium">
                Sign up free
              </Link>
            </div>

<div className="text-center">
              <Link href="/vendor/register" className="text-sm text-secondary hover:underline">
                Want to sell? Register as a Vendor
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/register/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/cart-button.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { ShoppingCart, Plus, Minus, Trash2 } from "lucide-react"
import { useCart } from "@/components/cart-provider"
import Link from "next/link"

export function CartButton() {
  const { items, itemCount, total, updateQuantity, removeItem } = useCart()

return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="relative">
          <ShoppingCart className="h-5 w-5" />
          {itemCount > 0 && (
            <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-primary text-primary-foreground text-xs flex items-center justify-center font-medium">
              {itemCount}
            </span>
          )}
          <span className="sr-only">Open cart</span>
        </Button>
      </SheetTrigger>
      <SheetContent className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle>Shopping Cart ({itemCount})</SheetTitle>
        </SheetHeader>

<div className="flex flex-col h-[calc(100vh-10rem)]">
          {items.length === 0 ? (
            <div className="flex-1 flex flex-col items-center justify-center text-center">
              <ShoppingCart className="h-12 w-12 text-muted-foreground mb-4" />
              <p className="text-muted-foreground mb-4">Your cart is empty</p>
              <Link href="/products">
                <Button>Start Shopping</Button>
              </Link>
            </div>
          ) : (
            <>
              <div className="flex-1 overflow-y-auto py-4 space-y-4">
                {items.map((item) => (
                  <div key={item.id} className="flex gap-4 p-3 bg-muted/30 rounded-lg">
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      className="w-16 h-16 rounded-md object-cover"
                    />
                    <div className="flex-1 min-w-0">
                      <h4 className="font-medium text-foreground text-sm line-clamp-1">{item.name}</h4>
                      <p className="text-xs text-muted-foreground">{item.vendorName}</p>
                      <p className="font-semibold text-primary mt-1">R{item.price}</p>
                    </div>
                    <div className="flex flex-col items-end gap-2">
                      <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeItem(item.id)}>
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                      <div className="flex items-center gap-1">
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-6 w-6 bg-transparent"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        >
                          <Minus className="h-3 w-3" />
                        </Button>
                        <span className="w-8 text-center text-sm">{item.quantity}</span>
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-6 w-6 bg-transparent"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        >
                          <Plus className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

<div className="border-t border-border pt-4 space-y-4">
                <div className="flex items-center justify-between text-lg font-semibold">
                  <span>Total</span>
                  <span className="text-primary">R{total.toFixed(2)}</span>
                </div>
                <Link href="/checkout" className="block">
                  <Button className="w-full" size="lg">
                    Proceed to Checkout
                  </Button>
                </Link>
              </div>
            </>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Globe, CreditCard, Bitcoin, Wallet, Lock, CheckCircle, ArrowLeft, Copy, Loader2, Banknote } from "lucide-react"
import { useCart } from "@/components/cart-provider"
import { toast } from "sonner"

const cryptoAddresses = {
  bitcoin: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
  ethereum: "0x71C7656EC7ab88b098defB751B7401B5f6d8976F",
  litecoin: "ltc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
  usdt: "0x71C7656EC7ab88b098defB751B7401B5f6d8976F",
}

export default function CheckoutPage() {
  const { items, total, clearCart } = useCart()
  const [paymentMethod, setPaymentMethod] = useState("card")
  const [cryptoCurrency, setCryptoCurrency] = useState("bitcoin")
  const [isProcessing, setIsProcessing] = useState(false)
  const [orderPlaced, setOrderPlaced] = useState(false)
  const [shippingMethod, setShippingMethod] = useState("standard")

const shippingCosts = {
    standard: 99,
    express: 249,
    overnight: 499,
  }

const subtotal = total
  const shipping = shippingCosts[shippingMethod as keyof typeof shippingCosts]
  const tax = Math.round(subtotal * 0.15 * 100) / 100 // 15% VAT for South Africa
  const grandTotal = subtotal + shipping + tax

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast.success("Address copied to clipboard!")
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsProcessing(true)
    await new Promise((resolve) => setTimeout(resolve, 2000))
    setIsProcessing(false)
    setOrderPlaced(true)
    clearCart()
    toast.success("Order placed successfully!")
  }

if (orderPlaced) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Card className="max-w-md w-full mx-4">
          <CardContent className="pt-6 text-center">
            <div className="h-16 w-16 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
              <CheckCircle className="h-8 w-8 text-primary" />
            </div>
            <h2 className="text-2xl font-bold text-foreground mb-2">Order Confirmed!</h2>
            <p className="text-muted-foreground mb-6">
              Thank you for your order. You will receive a confirmation email shortly.
            </p>
            <div className="space-y-3">
              <Link href="/delivery">
                <Button className="w-full">Track Your Order</Button>
              </Link>
              <Link href="/">
                <Button variant="outline" className="w-full bg-transparent">
                  Continue Shopping
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (items.length === 0) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Card className="max-w-md w-full mx-4">
          <CardContent className="pt-6 text-center">
            <h2 className="text-2xl font-bold text-foreground mb-2">Your cart is empty</h2>
            <p className="text-muted-foreground mb-6">Add some items to your cart before checking out.</p>
            <Link href="/">
              <Button>Start Shopping</Button>
            </Link>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <Globe className="h-6 w-6 text-primary-foreground" />
              </div>
              <div>
                <span className="text-xl font-bold text-foreground">Buddies</span>
                <span className="text-xl font-light text-primary"> World Wide</span>
              </div>
            </Link>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Lock className="h-4 w-4" />
              <span>Secure Checkout</span>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <Link href="/" className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-6">
          <ArrowLeft className="h-4 w-4" />
          Back to Shopping
        </Link>

<h1 className="text-3xl font-bold text-foreground mb-8">Checkout</h1>

<div className="grid lg:grid-cols-3 gap-8">
          {/* Main Form */}
          <div className="lg:col-span-2">
            <form onSubmit={handleSubmit}>
              {/* Contact Information */}
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid sm:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">First Name</Label>
                      <Input id="firstName" placeholder="John" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Last Name</Label>
                      <Input id="lastName" placeholder="Doe" required />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" placeholder="john@example.com" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="phone">Phone</Label>
                    <Input id="phone" type="tel" placeholder="+27 82 123 4567" required />
                  </div>
                </CardContent>
              </Card>

{/* Shipping Address */}
              <Card className="mb-6">
                <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="123 Main Street" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="apartment">Apartment, suite, etc. (optional)</Label>
                    <Input id="apartment" placeholder="Apt 4B" />
                  </div>
                  <div className="grid sm:grid-cols-3 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="city">City</Label>
                      <Input id="city" placeholder="Johannesburg" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="province">Province</Label>
                      <Input id="province" placeholder="Gauteng" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="postalCode">Postal Code</Label>
                      <Input id="postalCode" placeholder="2000" required />
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Shipping Method */}
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle>Shipping Method</CardTitle>
                </CardHeader>
                <CardContent>
                  <RadioGroup value={shippingMethod} onValueChange={setShippingMethod} className="space-y-3">
                    <div className="flex items-center justify-between p-4 border border-border rounded-lg cursor-pointer hover:bg-muted/50">
                      <div className="flex items-center gap-3">
                        <RadioGroupItem value="standard" id="standard" />
                        <Label htmlFor="standard" className="cursor-pointer">
                          <div className="font-medium">Standard Shipping</div>
                          <div className="text-sm text-muted-foreground">5-7 business days</div>
                        </Label>
                      </div>
                      <span className="font-semibold">R99</span>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-border rounded-lg cursor-pointer hover:bg-muted/50">
                      <div className="flex items-center gap-3">
                        <RadioGroupItem value="express" id="express" />
                        <Label htmlFor="express" className="cursor-pointer">
                          <div className="font-medium">Express Shipping</div>
                          <div className="text-sm text-muted-foreground">2-3 business days</div>
                        </Label>
                      </div>
                      <span className="font-semibold">R249</span>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-border rounded-lg cursor-pointer hover:bg-muted/50">
                      <div className="flex items-center gap-3">
                        <RadioGroupItem value="overnight" id="overnight" />
                        <Label htmlFor="overnight" className="cursor-pointer">
                          <div className="font-medium">Overnight Shipping</div>
                          <div className="text-sm text-muted-foreground">Next business day</div>
                        </Label>
                      </div>
                      <span className="font-semibold">R499</span>
                    </div>
                  </RadioGroup>
                </CardContent>
              </Card>

{/* Payment Method */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Wallet className="h-5 w-5" />
                    Payment Method
                  </CardTitle>
                  <CardDescription>Choose your preferred payment method</CardDescription>
                </CardHeader>
                <CardContent>
                  <Tabs value={paymentMethod} onValueChange={setPaymentMethod}>
                    <TabsList className="grid grid-cols-4 w-full mb-6">
                      <TabsTrigger value="card" className="flex items-center gap-2">
                        <CreditCard className="h-4 w-4" />
                        <span className="hidden sm:inline">Card</span>
                      </TabsTrigger>
                      <TabsTrigger value="crypto" className="flex items-center gap-2">
                        <Bitcoin className="h-4 w-4" />
                        <span className="hidden sm:inline">Crypto</span>
                      </TabsTrigger>
                      <TabsTrigger value="eft" className="flex items-center gap-2">
                        <Banknote className="h-4 w-4" />
                        <span className="hidden sm:inline">EFT</span>
                      </TabsTrigger>
                      <TabsTrigger value="paypal" className="flex items-center gap-2">
                        <Wallet className="h-4 w-4" />
                        <span className="hidden sm:inline">PayPal</span>
                      </TabsTrigger>
                    </TabsList>

<TabsContent value="card" className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="cardNumber">Card Number</Label>
                        <Input id="cardNumber" placeholder="1234 5678 9012 3456" />
                      </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="cardName">Name on Card</Label>
                        <Input id="cardName" placeholder="John Doe" />
                      </div>
                    </TabsContent>

<TabsContent value="crypto" className="space-y-4">
                      <div className="space-y-2">
                        <Label>Select Cryptocurrency</Label>
                        <RadioGroup
                          value={cryptoCurrency}
                          onValueChange={setCryptoCurrency}
                          className="grid grid-cols-2 gap-3"
                        >
                          <div className="flex items-center space-x-2 border border-border rounded-lg p-3">
                            <RadioGroupItem value="bitcoin" id="bitcoin" />
                            <Label htmlFor="bitcoin">Bitcoin (BTC)</Label>
                          </div>
                          <div className="flex items-center space-x-2 border border-border rounded-lg p-3">
                            <RadioGroupItem value="ethereum" id="ethereum" />
                            <Label htmlFor="ethereum">Ethereum (ETH)</Label>
                          </div>
                          <div className="flex items-center space-x-2 border border-border rounded-lg p-3">
                            <RadioGroupItem value="litecoin" id="litecoin" />
                            <Label htmlFor="litecoin">Litecoin (LTC)</Label>
                          </div>
                          <div className="flex items-center space-x-2 border border-border rounded-lg p-3">
                            <RadioGroupItem value="usdt" id="usdt" />
                            <Label htmlFor="usdt">USDT (TRC20)</Label>
                          </div>
                        </RadioGroup>
                      </div>
                      <div className="bg-muted/50 p-4 rounded-lg">
                        <p className="text-sm text-muted-foreground mb-2">
                          Send exactly R{grandTotal.toFixed(2)} worth of {cryptoCurrency.toUpperCase()} to:
                        </p>
                        <div className="flex items-center gap-2">
                          <code className="flex-1 bg-background p-2 rounded text-xs break-all">
                            {cryptoAddresses[cryptoCurrency as keyof typeof cryptoAddresses]}
                          </code>
                          <Button
                            type="button"
                            variant="outline"
                            size="icon"
                            className="bg-transparent"
                            onClick={() =>
                              copyToClipboard(cryptoAddresses[cryptoCurrency as keyof typeof cryptoAddresses])
                            }
                          >
                            <Copy className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </TabsContent>

<TabsContent value="eft" className="space-y-4">
                      <div className="bg-muted/50 p-4 rounded-lg space-y-3">
                        <h4 className="font-semibold">Bank Details</h4>
                        <div className="text-sm space-y-2">
                          <p>
                            <span className="text-muted-foreground">Bank:</span> First National Bank
                          </p>
                          <p>
                            <span className="text-muted-foreground">Account Name:</span> Buddies World Wide (Pty) Ltd
                          </p>
                          <p>
                            <span className="text-muted-foreground">Account Number:</span> 62845678901
                          </p>
                          <p>
                            <span className="text-muted-foreground">Branch Code:</span> 250655
                          </p>
                          <p>
                            <span className="text-muted-foreground">Reference:</span> Your email address
                          </p>
                        </div>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        Please use your email address as the payment reference. Orders will be processed once payment is
                        confirmed.
                      </p>
                    </TabsContent>

<TabsContent value="paypal" className="space-y-4">
                      <div className="text-center py-8">
                        <Wallet className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                        <p className="text-muted-foreground mb-4">
                          You will be redirected to PayPal to complete your payment.
                        </p>
                        <Button type="button" variant="outline" className="bg-transparent">
                          Continue with PayPal
                        </Button>
                      </div>
                    </TabsContent>
                  </Tabs>
                </CardContent>
              </Card>

<Button type="submit" size="lg" className="w-full mt-6" disabled={isProcessing}>
                {isProcessing ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Processing...
                  </>
                ) : (
                  <>Place Order - R{grandTotal.toFixed(2)}</>
                )}
              </Button>
            </form>
          </div>

{/* Order Summary */}
          <div>
            <Card className="sticky top-24">
              <CardHeader>
                <CardTitle>Order Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {items.map((item) => (
                  <div key={item.id} className="flex gap-3">
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      className="w-16 h-16 rounded-md object-cover"
                    />
                    <div className="flex-1 min-w-0">
                      <h4 className="font-medium text-foreground text-sm line-clamp-1">{item.name}</h4>
                      <p className="text-sm text-muted-foreground">
                        R{item.price} x {item.quantity}
                      </p>
                    </div>
                    <p className="font-semibold text-foreground">R{(item.price * item.quantity).toFixed(2)}</p>
                  </div>
                ))}

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

<div className="flex justify-between text-lg font-bold">
                  <span>Total</span>
                  <span className="text-primary">R{grandTotal.toFixed(2)}</span>
                </div>

<div className="flex items-center gap-2 text-sm text-muted-foreground pt-4">
                  <Lock className="h-4 w-4" />
                  <span>Your payment information is secure</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/register/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
  Globe,
  Store,
  Mail,
  Lock,
  User,
  ArrowRight,
  CheckCircle,
  Truck,
  BarChart3,
  CreditCard,
  Headphones,
  Building,
  Phone,
} from "lucide-react"
import { toast } from "sonner"

const plans = [
  {
    id: "starter",
    name: "Starter",
    price: 549,
    period: "month",
    description: "Perfect for new vendors",
    features: ["Up to 50 products", "Basic analytics", "Standard support", "2.9% transaction fee", "Weekly payouts"],
  },
  {
    id: "professional",
    name: "Professional",
    price: 1449,
    period: "month",
    description: "For growing businesses",
    features: [
      "Up to 500 products",
      "Advanced analytics",
      "Priority support",
      "2.5% transaction fee",
      "Daily payouts",
      "Featured listings",
    ],
    popular: true,
  },
  {
    id: "enterprise",
    name: "Enterprise",
    price: 3599,
    period: "month",
    description: "For large operations",
    features: [
      "Unlimited products",
      "Custom analytics",
      "Dedicated support",
      "2% transaction fee",
      "Instant payouts",
      "Premium placement",
      "API access",
    ],
  },
]

export default function VendorRegisterPage() {
  const [step, setStep] = useState(1)
  const [selectedPlan, setSelectedPlan] = useState("professional")
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (step < 3) {
      setStep(step + 1)
      return
    }

setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 2000))
    setIsLoading(false)
    toast.success("Vendor application submitted! We'll review it within 24-48 hours.")
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card py-4">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <Globe className="h-6 w-6 text-primary-foreground" />
              </div>
              <div>
                <span className="text-xl font-bold text-foreground">Buddies</span>
                <span className="text-xl font-light text-primary"> World Wide</span>
              </div>
            </Link>
            <div className="flex items-center gap-4">
              <span className="text-sm text-muted-foreground hidden sm:block">Already a vendor?</span>
              <Link href="/vendor/login">
                <Button variant="outline" size="sm" className="bg-transparent">
                  Vendor Login
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Hero */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 bg-secondary/20 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-4">
            <Store className="h-4 w-4" />
            Become a Vendor
          </div>
          <h1 className="text-4xl font-bold text-foreground mb-4">Start Selling to Customers Worldwide</h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Join thousands of successful vendors on Buddies World Wide. Reach millions of customers, manage your
            inventory easily, and grow your business globally.
          </p>
        </div>

{/* Benefits */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          <Card>
            <CardContent className="pt-6 text-center">
              <Truck className="h-10 w-10 text-primary mx-auto mb-4" />
              <h3 className="font-semibold text-foreground mb-2">Global Reach</h3>
              <p className="text-sm text-muted-foreground">Ship to customers in 100+ countries worldwide</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6 text-center">
              <BarChart3 className="h-10 w-10 text-primary mx-auto mb-4" />
              <h3 className="font-semibold text-foreground mb-2">Analytics</h3>
              <p className="text-sm text-muted-foreground">Track sales, views, and customer insights</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6 text-center">
              <CreditCard className="h-10 w-10 text-primary mx-auto mb-4" />
              <h3 className="font-semibold text-foreground mb-2">Easy Payments</h3>
              <p className="text-sm text-muted-foreground">Get paid quickly with multiple payout options</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6 text-center">
              <Headphones className="h-10 w-10 text-primary mx-auto mb-4" />
              <h3 className="font-semibold text-foreground mb-2">24/7 Support</h3>
              <p className="text-sm text-muted-foreground">Dedicated vendor support team ready to help</p>
            </CardContent>
          </Card>
        </div>

{/* Progress Steps */}
        <div className="flex items-center justify-center gap-4 mb-8">
          {[1, 2, 3].map((s) => (
            <div key={s} className="flex items-center">
              <div
                className={`h-10 w-10 rounded-full flex items-center justify-center font-semibold ${
                  step >= s ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                }`}
              >
                {step > s ? <CheckCircle className="h-5 w-5" /> : s}
              </div>
              {s < 3 && <div className={`w-16 h-1 mx-2 ${step > s ? "bg-primary" : "bg-muted"}`} />}
            </div>
          ))}
        </div>
        <div className="flex justify-center gap-8 mb-8 text-sm">
          <span className={step >= 1 ? "text-primary font-medium" : "text-muted-foreground"}>Choose Plan</span>
          <span className={step >= 2 ? "text-primary font-medium" : "text-muted-foreground"}>Business Info</span>
          <span className={step >= 3 ? "text-primary font-medium" : "text-muted-foreground"}>Account Setup</span>
        </div>

<form onSubmit={handleSubmit}>
          {/* Step 1: Choose Plan */}
          {step === 1 && (
            <div className="max-w-5xl mx-auto">
              <h2 className="text-2xl font-bold text-foreground text-center mb-8">Choose Your Vendor Plan</h2>
              <RadioGroup value={selectedPlan} onValueChange={setSelectedPlan} className="grid md:grid-cols-3 gap-6">
                {plans.map((plan) => (
                  <div key={plan.id} className="relative">
                    {plan.popular && (
                      <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-medium z-10">
                        Most Popular
                      </div>
                    )}
                    <Card
                      className={`cursor-pointer transition-all h-full ${selectedPlan === plan.id ? "ring-2 ring-primary" : "hover:shadow-lg"}`}
                      onClick={() => setSelectedPlan(plan.id)}
                    >
                      <CardHeader className="text-center pb-2">
                        <div className="flex items-center justify-center gap-2">
                          <RadioGroupItem value={plan.id} id={plan.id} />
                          <CardTitle>{plan.name}</CardTitle>
                        </div>
                        <CardDescription>{plan.description}</CardDescription>
                      </CardHeader>
                      <CardContent className="text-center">
                        <div className="mb-6">
                          <span className="text-4xl font-bold text-foreground">R{plan.price}</span>
                          <span className="text-muted-foreground">/{plan.period}</span>
                        </div>
                        <ul className="space-y-3 text-left">
                          {plan.features.map((feature) => (
                            <li key={feature} className="flex items-center gap-2 text-sm">
                              <CheckCircle className="h-4 w-4 text-primary flex-shrink-0" />
                              <span className="text-muted-foreground">{feature}</span>
                            </li>
                          ))}
                        </ul>
                      </CardContent>
                    </Card>
                  </div>
                ))}
              </RadioGroup>
              <div className="mt-8 text-center">
                <Button type="submit" size="lg">
                  Continue with {plans.find((p) => p.id === selectedPlan)?.name}
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </div>
            </div>
          )}

{/* Step 2: Business Info */}
          {step === 2 && (
            <Card className="max-w-2xl mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Building className="h-5 w-5" />
                  Business Information
                </CardTitle>
                <CardDescription>Tell us about your business</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="businessName">Business Name</Label>
                  <Input id="businessName" placeholder="Your Store Name" required />
                </div>

<div className="space-y-2">
                  <Label htmlFor="businessType">Business Type</Label>
                  <Select defaultValue="individual">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="individual">Individual / Sole Proprietor</SelectItem>
                      <SelectItem value="llc">LLC</SelectItem>
                      <SelectItem value="corporation">Corporation</SelectItem>
                      <SelectItem value="partnership">Partnership</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="category">Primary Product Category</Label>
                  <Select defaultValue="420">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="420">420 / Cannabis Products</SelectItem>
                      <SelectItem value="produce">Fruits & Vegetables</SelectItem>
                      <SelectItem value="household">Household Essentials</SelectItem>
                      <SelectItem value="snacks">Snacks & Treats</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="grid sm:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="country">Country</Label>
                    <Select defaultValue="us">
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="us">United States</SelectItem>
                        <SelectItem value="ca">Canada</SelectItem>
                        <SelectItem value="uk">United Kingdom</SelectItem>
                        <SelectItem value="au">Australia</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="phone">Phone Number</Label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                      <Input id="phone" type="tel" placeholder="+1 (555) 123-4567" className="pl-10" required />
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Business Description</Label>
                  <Textarea
                    id="description"
                    placeholder="Tell customers about your business and what you sell..."
                    rows={4}
                  />
                </div>

<div className="flex gap-4">
                  <Button type="button" variant="outline" className="bg-transparent" onClick={() => setStep(1)}>
                    Back
                  </Button>
                  <Button type="submit" className="flex-1">
                    Continue
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

{/* Step 3: Account Setup */}
          {step === 3 && (
            <Card className="max-w-2xl mx-auto">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="h-5 w-5" />
                  Create Your Account
                </CardTitle>
                <CardDescription>Set up your vendor login credentials</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid sm:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">First Name</Label>
                    <Input id="firstName" placeholder="John" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="lastName">Last Name</Label>
                    <Input id="lastName" placeholder="Doe" required />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input id="email" type="email" placeholder="you@business.com" className="pl-10" required />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="password"
                      type="password"
                      placeholder="Create a strong password"
                      className="pl-10"
                      required
                    />
                  </div>
                </div>

{/* Payment Summary */}
                <div className="bg-muted/50 p-4 rounded-lg">
                  <h3 className="font-semibold text-foreground mb-4">Order Summary</h3>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">
                        {plans.find((p) => p.id === selectedPlan)?.name} Plan
                      </span>
                      <span className="text-foreground">R{plans.find((p) => p.id === selectedPlan)?.price}/mo</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">First month</span>
                      <span className="text-primary font-medium">FREE</span>
                    </div>
                    <Separator className="my-2" />
                    <div className="flex justify-between font-semibold">
                      <span>Due today</span>
                      <span className="text-primary">R0.00</span>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground mt-4">
                    Your first month is free. You{"'"}ll be charged R{plans.find((p) => p.id === selectedPlan)?.price}{" "}
                    after your trial ends. Cancel anytime.
                  </p>
                </div>

<div className="flex items-start space-x-2">
                  <Checkbox id="terms" required />
                  <label htmlFor="terms" className="text-sm text-muted-foreground leading-tight">
                    I agree to the{" "}
                    <Link href="/vendor/terms" className="text-primary hover:underline">
                      Vendor Terms of Service
                    </Link>
                    ,{" "}
                    <Link href="/privacy" className="text-primary hover:underline">
                      Privacy Policy
                    </Link>
                    , and{" "}
                    <Link href="/vendor/guidelines" className="text-primary hover:underline">
                      Seller Guidelines
                    </Link>
                  </label>
                </div>

<div className="flex gap-4">
                  <Button type="button" variant="outline" className="bg-transparent" onClick={() => setStep(2)}>
                    Back
                  </Button>
                  <Button type="submit" className="flex-1" disabled={isLoading}>
                    {isLoading ? (
                      "Creating Account..."
                    ) : (
                      <>
                        <Store className="mr-2 h-4 w-4" />
                        Start Selling - Free Trial
                      </>
                    )}
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Globe,
  Store,
  Package,
  DollarSign,
  ShoppingCart,
  TrendingUp,
  Plus,
  Settings,
  BarChart3,
  Users,
  Bell,
  Menu,
} from "lucide-react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

const stats = [
  { label: "Total Sales", value: "R224,244", change: "+12.5%", icon: DollarSign },
  { label: "Orders", value: "156", change: "+8.2%", icon: ShoppingCart },
  { label: "Products", value: "48", change: "+3", icon: Package },
  { label: "Visitors", value: "2,847", change: "+15.3%", icon: Users },
]

const recentOrders = [
  { id: "BWW-001", customer: "John D.", product: "Organic CBD Oil", amount: "R899", status: "Processing" },
  { id: "BWW-002", customer: "Sarah M.", product: "Hemp Flower Oz", amount: "R1,619", status: "Shipped" },
  { id: "BWW-003", customer: "Mike R.", product: "Delta-8 Gummies", amount: "R629", status: "Delivered" },
  { id: "BWW-004", customer: "Lisa K.", product: "CBD Topical Cream", amount: "R539", status: "Processing" },
]

const statusColors: Record<string, string> = {
  Processing: "bg-yellow-500",
  Shipped: "bg-blue-500",
  Delivered: "bg-green-500",
}

export default function VendorDashboard() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-card">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/" className="flex items-center gap-2">
                <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                  <Globe className="h-6 w-6 text-primary-foreground" />
                </div>
                <div className="hidden sm:block">
                  <span className="text-xl font-bold text-foreground">Buddies</span>
                  <span className="text-xl font-light text-primary"> World Wide</span>
                </div>
              </Link>
              <Badge variant="secondary" className="hidden sm:flex">
                <Store className="h-3 w-3 mr-1" />
                Vendor Portal
              </Badge>
            </div>

<div className="flex items-center gap-2">
              <Button variant="ghost" size="icon">
                <Bell className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon">
                <Settings className="h-5 w-5" />
              </Button>
              <Sheet>
                <SheetTrigger asChild className="lg:hidden">
                  <Button variant="ghost" size="icon">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-[300px]">
                  <nav className="flex flex-col gap-4 mt-8">
                    <Link href="/vendor/dashboard" className="text-lg font-medium text-primary">
                      Dashboard
                    </Link>
                    <Link href="/vendor/products" className="text-lg font-medium hover:text-primary">
                      Products
                    </Link>
                    <Link href="/vendor/orders" className="text-lg font-medium hover:text-primary">
                      Orders
                    </Link>
                    <Link href="/vendor/analytics" className="text-lg font-medium hover:text-primary">
                      Analytics
                    </Link>
                    <Link href="/vendor/settings" className="text-lg font-medium hover:text-primary">
                      Settings
                    </Link>
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Welcome */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Welcome back, Green Leaf Co!</h1>
            <p className="text-muted-foreground">
              {"Here's"} what{"'"}s happening with your store today.
            </p>
          </div>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Product
          </Button>
        </div>

{/* Stats */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {stats.map((stat) => (
            <Card key={stat.label}>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between mb-4">
                  <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
                    <stat.icon className="h-5 w-5 text-primary" />
                  </div>
                  <Badge variant="secondary" className="text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />
                    {stat.change}
                  </Badge>
                </div>
                <p className="text-2xl font-bold text-foreground">{stat.value}</p>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="grid lg:grid-cols-2 gap-8">
          {/* Recent Orders */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Recent Orders</CardTitle>
                  <CardDescription>Your latest customer orders</CardDescription>
                </div>
                <Link href="/vendor/orders">
                  <Button variant="outline" size="sm" className="bg-transparent">
                    View All
                  </Button>
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {recentOrders.map((order) => (
                  <div key={order.id} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                    <div>
                      <p className="font-medium text-foreground">{order.product}</p>
                      <p className="text-sm text-muted-foreground">
                        {order.id} • {order.customer}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="font-semibold text-foreground">{order.amount}</p>
                      <Badge className={`${statusColors[order.status]} text-white border-0`}>{order.status}</Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Quick Actions */}
          <Card>
            <CardHeader>
              <CardTitle>Quick Actions</CardTitle>
              <CardDescription>Common tasks and shortcuts</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Link href="/vendor/products/new" className="block">
                <div className="flex items-center gap-4 p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors">
                  <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
                    <Plus className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="font-medium text-foreground">Add New Product</p>
                    <p className="text-sm text-muted-foreground">List a new item for sale</p>
                  </div>
                </div>
              </Link>
              <Link href="/vendor/analytics" className="block">
                <div className="flex items-center gap-4 p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors">
                  <div className="h-10 w-10 rounded-full bg-secondary/20 flex items-center justify-center">
                    <BarChart3 className="h-5 w-5 text-secondary" />
                  </div>
                  <div>
                    <p className="font-medium text-foreground">View Analytics</p>
                    <p className="text-sm text-muted-foreground">Track your store performance</p>
                  </div>
                </div>
              </Link>
              <Link href="/vendor/settings" className="block">
                <div className="flex items-center gap-4 p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors">
                  <div className="h-10 w-10 rounded-full bg-accent/20 flex items-center justify-center">
                    <Settings className="h-5 w-5 text-accent" />
                  </div>
                  <div>
                    <p className="font-medium text-foreground">Store Settings</p>
                    <p className="text-sm text-muted-foreground">Manage your store details</p>
                  </div>
                </div>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, LinkIcon, Sparkles, Zap, Crown } from "lucide-react"

const plans = [
  {
    name: "Free",
    price: "R0",
    period: "forever",
    description: "Perfect for getting started with bio-links",
    features: ["1 bio-link page", "5 links per page", "Basic analytics", "ConnectSync branding", "Community support"],
    limitations: ["Limited customization", "No AI summaries"],
    cta: "Get Started Free",
    popular: false,
    icon: LinkIcon,
  },
  {
    name: "Pro",
    price: "R169",
    period: "per month",
    description: "Everything you need to grow your audience",
    features: [
      "Unlimited bio-link pages",
      "Unlimited links",
      "Advanced analytics",
      "Custom branding",
      "10 AI summaries/month",
      "Priority support",
      "Custom themes",
      "Link scheduling",
    ],
    cta: "Start Pro Trial",
    popular: true,
    icon: Sparkles,
  },
  {
    name: "Business",
    price: "R529",
    period: "per month",
    description: "Advanced features for teams and businesses",
    features: [
      "Everything in Pro",
      "Unlimited AI summaries",
      "Team collaboration",
      "Advanced integrations",
      "White-label options",
      "Dedicated support",
      "Custom domains",
      "API access",
    ],
    cta: "Start Business Trial",
    popular: false,
    icon: Crown,
  },
]

export default function PricingPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <img src="/images/connectsync-logo.png" alt="ConnectSync" className="h-6 w-auto" />
            <span className="text-xl font-semibold text-foreground">ConnectSync</span>
          </Link>
          <div className="flex items-center gap-4">
            <Link href="/login">
              <Button variant="ghost">Sign In</Button>
            </Link>
            <Link href="/signup">
              <Button>Get Started</Button>
            </Link>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-16">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
            Choose the perfect plan for your <span className="text-primary">growth</span>
          </h1>
          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty">
            Start free and upgrade as you grow. All plans include our core bio-link features with AI-powered content
            summaries.
          </p>
          <div className="flex items-center justify-center gap-4 mb-8">
            <Badge variant="secondary" className="px-3 py-1">
              <Zap className="h-3 w-3 mr-1" />
              14-day free trial
            </Badge>
            <Badge variant="secondary" className="px-3 py-1">
              <CheckCircle className="h-3 w-3 mr-1" />
              No setup fees
            </Badge>
          </div>
        </div>

{/* Pricing Cards */}
        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {plans.map((plan) => {
            const IconComponent = plan.icon
            return (
              <Card key={plan.name} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-primary text-primary-foreground px-3 py-1">Most Popular</Badge>
                  </div>
                )}
                <CardHeader className="text-center pb-4">
                  <div className="flex items-center justify-center mb-4">
                    <div className="p-3 bg-primary/10 rounded-full">
                      <IconComponent className="h-6 w-6 text-primary" />
                    </div>
                  </div>
                  <CardTitle className="text-2xl">{plan.name}</CardTitle>
                  <div className="flex items-baseline justify-center gap-1 mb-2">
                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
                    <span className="text-muted-foreground">/{plan.period}</span>
                  </div>
                  <CardDescription className="text-center">{plan.description}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <ul className="space-y-3">
                    {plan.features.map((feature) => (
                      <li key={feature} className="flex items-center gap-3">
                        <CheckCircle className="h-4 w-4 text-secondary flex-shrink-0" />
                        <span className="text-sm text-foreground">{feature}</span>
                      </li>
                    ))}
                    {plan.limitations?.map((limitation) => (
                      <li key={limitation} className="flex items-center gap-3 opacity-60">
                        <div className="h-4 w-4 border border-muted-foreground/30 rounded-full flex-shrink-0" />
                        <span className="text-sm text-muted-foreground">{limitation}</span>
                      </li>
                    ))}
                  </ul>
                  <Link href={plan.name === "Free" ? "/signup" : `/checkout?plan=${plan.name.toLowerCase()}`}>
                    <Button className="w-full" variant={plan.popular ? "default" : "outline"} size="lg">
                      {plan.cta}
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            )
          })}
        </div>

{/* FAQ Section */}
        <div className="mt-24 max-w-3xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-foreground mb-12">Frequently Asked Questions</h2>
          <div className="grid gap-6">
            <Card>
              <CardContent className="p-6">
                <h3 className="font-semibold text-foreground mb-2">Can I change plans anytime?</h3>
                <p className="text-muted-foreground">
                  Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately and we'll
                  prorate any billing differences.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <h3 className="font-semibold text-foreground mb-2">What happens to my data if I cancel?</h3>
                <p className="text-muted-foreground">
                  Your bio-links remain active for 30 days after cancellation. You can export all your data anytime from
                  your dashboard.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <h3 className="font-semibold text-foreground mb-2">Do you offer refunds?</h3>
                <p className="text-muted-foreground">
                  We offer a 14-day money-back guarantee for all paid plans. No questions asked.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/billing/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { CreditCard, Download, Calendar, AlertCircle, CheckCircle, Crown, Sparkles, ExternalLink } from "lucide-react"

interface Subscription {
  id: string
  status: string
  current_period_end: number
  cancel_at_period_end: boolean
  plan: string
  amount: number
}

export default function BillingPage() {
  const [subscription, setSubscription] = useState<Subscription | null>(null)
  const [loading, setLoading] = useState(true)
  const [customerId] = useState("cus_example123") // This would come from user auth

const [usage] = useState({
    bioLinks: { used: 3, limit: "unlimited" },
    aiSummaries: { used: 7, limit: 10 },
    customDomains: { used: 1, limit: 3 },
  })

const [invoices] = useState([
    {
      id: "INV-001",
      date: "Feb 15, 2025",
      amount: "R169.00",
      status: "paid",
      downloadUrl: "#",
    },
    {
      id: "INV-002",
      date: "Jan 15, 2025",
      amount: "R169.00",
      status: "paid",
      downloadUrl: "#",
    },
    {
      id: "INV-003",
      date: "Dec 15, 2024",
      amount: "R169.00",
      status: "paid",
      downloadUrl: "#",
    },
  ])

useEffect(() => {
    const fetchSubscription = async () => {
      try {
        const response = await fetch(`/api/get-subscription?customerId=${customerId}`)
        const data = await response.json()
        setSubscription(data.subscription)
      } catch (error) {
        console.error("Error fetching subscription:", error)
      } finally {
        setLoading(false)
      }
    }

fetchSubscription()
  }, [customerId])

const handleCancelSubscription = async () => {
    if (!subscription) return

try {
      const response = await fetch("/api/cancel-subscription", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ subscriptionId: subscription.id }),
      })

if (response.ok) {
        // Refresh subscription data
        window.location.reload()
      }
    } catch (error) {
      console.error("Error cancelling subscription:", error)
    }
  }

const handleManageBilling = async () => {
    try {
      const response = await fetch("/api/create-portal-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ customerId }),
      })

const { url } = await response.json()
      window.location.href = url
    } catch (error) {
      console.error("Error creating portal session:", error)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Loading billing information...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-3 mb-2">
            <CreditCard className="h-6 w-6 text-primary" />
            <h1 className="text-2xl font-semibold text-foreground">Billing & Subscription</h1>
          </div>
          <p className="text-muted-foreground">Manage your subscription, usage, and billing information.</p>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Current Plan */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Sparkles className="h-5 w-5 text-secondary" />
                      Current Plan: {subscription?.plan || "Free"}
                    </CardTitle>
                    <CardDescription>
                      {subscription ? (
                        <>
                          R{(subscription.amount / 100).toFixed(2)}/month • Next billing:{" "}
                          {new Date(subscription.current_period_end * 1000).toLocaleDateString()}
                        </>
                      ) : (
                        "No active subscription"
                      )}
                    </CardDescription>
                  </div>
                  <Badge variant={subscription?.status === "active" ? "default" : "secondary"}>
                    {subscription?.status || "free"}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <Button variant="outline" onClick={handleManageBilling}>
                    <ExternalLink className="mr-2 h-4 w-4" />
                    Manage Billing
                  </Button>
                  {subscription && (
                    <Button
                      variant="outline"
                      className="text-destructive hover:text-destructive bg-transparent"
                      onClick={handleCancelSubscription}
                    >
                      {subscription.cancel_at_period_end ? "Reactivate" : "Cancel Subscription"}
                    </Button>
                  )}
                </div>

{subscription && (
                  <div className="space-y-2">
                    <h4 className="font-medium text-foreground">Plan Features</h4>
                    <ul className="space-y-1">
                      <li className="flex items-center gap-2 text-sm text-muted-foreground">
                        <CheckCircle className="h-3 w-3 text-secondary" />
                        Unlimited bio-link pages
                      </li>
                      <li className="flex items-center gap-2 text-sm text-muted-foreground">
                        <CheckCircle className="h-3 w-3 text-secondary" />
                        Advanced analytics
                      </li>
                      <li className="flex items-center gap-2 text-sm text-muted-foreground">
                        <CheckCircle className="h-3 w-3 text-secondary" />
                        {subscription.plan === "Business" ? "Unlimited" : "10"} AI summaries/month
                      </li>
                    </ul>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Usage */}
            <Card>
              <CardHeader>
                <CardTitle>Usage This Month</CardTitle>
                <CardDescription>Track your usage across different features</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-foreground">Bio-Links Created</span>
                    <span className="text-muted-foreground">
                      {usage.bioLinks.used} / {usage.bioLinks.limit}
                    </span>
                  </div>
                  <div className="h-2 bg-muted rounded-full">
                    <div className="h-2 bg-secondary rounded-full w-full" />
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-foreground">AI Summaries Generated</span>
                    <span className="text-muted-foreground">
                      {usage.aiSummaries.used} / {usage.aiSummaries.limit}
                    </span>
                  </div>
                  <Progress value={(usage.aiSummaries.used / usage.aiSummaries.limit) * 100} className="h-2" />
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-foreground">Custom Domains</span>
                    <span className="text-muted-foreground">
                      {usage.customDomains.used} / {usage.customDomains.limit}
                    </span>
                  </div>
                  <Progress value={(usage.customDomains.used / usage.customDomains.limit) * 100} className="h-2" />
                </div>

{usage.aiSummaries.used >= usage.aiSummaries.limit * 0.8 && (
                  <div className="flex items-center gap-2 p-3 bg-accent/10 border border-accent/20 rounded-lg">
                    <AlertCircle className="h-4 w-4 text-accent" />
                    <p className="text-sm text-foreground">
                      You're approaching your AI summary limit. Consider upgrading to Business for unlimited summaries.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Payment Method */}
            <Card>
              <CardHeader>
                <CardTitle>Payment Method</CardTitle>
                <CardDescription>Manage your payment information</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between p-4 border border-border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-6 bg-primary rounded flex items-center justify-center">
                      <span className="text-xs font-bold text-primary-foreground">VISA</span>
                    </div>
                    <div>
                      <p className="font-medium text-foreground">•••• •••• •••• 4242</p>
                      <p className="text-sm text-muted-foreground">Expires 12/27</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm" onClick={handleManageBilling}>
                    <ExternalLink className="mr-2 h-4 w-4" />
                    Update
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Billing History */}
            <Card>
              <CardHeader>
                <CardTitle>Billing History</CardTitle>
                <CardDescription>Download invoices and view payment history</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {invoices.map((invoice) => (
                    <div
                      key={invoice.id}
                      className="flex items-center justify-between p-3 border border-border rounded-lg"
                    >
                      <div className="flex items-center gap-3">
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                        <div>
                          <p className="font-medium text-foreground">{invoice.id}</p>
                          <p className="text-sm text-muted-foreground">{invoice.date}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="font-medium text-foreground">{invoice.amount}</span>
                        <Badge variant={invoice.status === "paid" ? "default" : "secondary"}>{invoice.status}</Badge>
                        <Button variant="ghost" size="sm">
                          <Download className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Upgrade to Business</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-2 mb-3">
                  <Crown className="h-5 w-5 text-accent" />
                  <span className="font-semibold text-foreground">R529/month</span>
                </div>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-3 w-3 text-secondary" />
                    <span className="text-muted-foreground">Unlimited AI summaries</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-3 w-3 text-secondary" />
                    <span className="text-muted-foreground">Team collaboration</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-3 w-3 text-secondary" />
                    <span className="text-muted-foreground">White-label options</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-3 w-3 text-secondary" />
                    <span className="text-muted-foreground">API access</span>
                  </li>
                </ul>
                <Button className="w-full">Upgrade Now</Button>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Need Help?</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  Contact Support
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  View Documentation
                </Button>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  Billing FAQ
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/001_ecommerce_schema.sql" isMerged="true"
-- Buddies World Wide - Complete Ecommerce Schema with Inventory Tracking
-- Run this script to create all required tables

-- Enable UUID extension
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- Categories table
CREATE TABLE IF NOT EXISTS categories (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  description TEXT,
  image_url TEXT,
  parent_id UUID REFERENCES categories(id),
  is_active BOOLEAN DEFAULT true,
  sort_order INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Vendors table (users who sell products)
CREATE TABLE IF NOT EXISTS vendors (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  business_name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  description TEXT,
  logo_url TEXT,
  banner_url TEXT,
  email TEXT NOT NULL,
  phone TEXT,
  address JSONB,
  subscription_tier TEXT DEFAULT 'starter' CHECK (subscription_tier IN ('starter', 'professional', 'enterprise')),
  subscription_status TEXT DEFAULT 'trial' CHECK (subscription_status IN ('trial', 'active', 'cancelled', 'expired')),
  stripe_customer_id TEXT,
  stripe_subscription_id TEXT,
  commission_rate DECIMAL(5,2) DEFAULT 10.00,
  is_verified BOOLEAN DEFAULT false,
  is_active BOOLEAN DEFAULT true,
  rating DECIMAL(3,2) DEFAULT 0,
  total_sales INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Products table with inventory tracking
CREATE TABLE IF NOT EXISTS products (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  vendor_id UUID REFERENCES vendors(id) ON DELETE CASCADE,
  category_id UUID REFERENCES categories(id),
  name TEXT NOT NULL,
  slug TEXT NOT NULL,
  description TEXT,
  short_description TEXT,
  price DECIMAL(10,2) NOT NULL,
  compare_at_price DECIMAL(10,2),
  cost_price DECIMAL(10,2),
  sku TEXT,
  barcode TEXT,
  -- Inventory tracking fields
  track_inventory BOOLEAN DEFAULT true,
  stock_quantity INTEGER DEFAULT 0,
  low_stock_threshold INTEGER DEFAULT 5,
  allow_backorder BOOLEAN DEFAULT false,
  -- Product details
  weight DECIMAL(10,2),
  weight_unit TEXT DEFAULT 'kg',
  dimensions JSONB,
  images JSONB DEFAULT '[]',
  tags TEXT[],
  -- Status
  status TEXT DEFAULT 'draft' CHECK (status IN ('draft', 'active', 'archived')),
  is_featured BOOLEAN DEFAULT false,
  requires_shipping BOOLEAN DEFAULT true,
  -- SEO
  meta_title TEXT,
  meta_description TEXT,
  -- Stats
  view_count INTEGER DEFAULT 0,
  sales_count INTEGER DEFAULT 0,
  rating DECIMAL(3,2) DEFAULT 0,
  review_count INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(vendor_id, slug)
);

-- Product variants (sizes, colors, etc.)
CREATE TABLE IF NOT EXISTS product_variants (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  product_id UUID REFERENCES products(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  sku TEXT,
  price DECIMAL(10,2),
  compare_at_price DECIMAL(10,2),
  stock_quantity INTEGER DEFAULT 0,
  low_stock_threshold INTEGER DEFAULT 5,
  options JSONB,
  image_url TEXT,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Inventory movements (for tracking stock changes)
CREATE TABLE IF NOT EXISTS inventory_movements (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  product_id UUID REFERENCES products(id) ON DELETE CASCADE,
  variant_id UUID REFERENCES product_variants(id) ON DELETE CASCADE,
  movement_type TEXT NOT NULL CHECK (movement_type IN ('purchase', 'sale', 'adjustment', 'return', 'transfer', 'damage', 'restock')),
  quantity INTEGER NOT NULL,
  previous_quantity INTEGER NOT NULL,
  new_quantity INTEGER NOT NULL,
  reference_type TEXT,
  reference_id UUID,
  notes TEXT,
  created_by UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Customers table
CREATE TABLE IF NOT EXISTS customers (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  email TEXT UNIQUE NOT NULL,
  first_name TEXT,
  last_name TEXT,
  phone TEXT,
  avatar_url TEXT,
  default_address_id UUID,
  total_orders INTEGER DEFAULT 0,
  total_spent DECIMAL(12,2) DEFAULT 0,
  loyalty_points INTEGER DEFAULT 0,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Customer addresses
CREATE TABLE IF NOT EXISTS customer_addresses (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  customer_id UUID REFERENCES customers(id) ON DELETE CASCADE,
  label TEXT DEFAULT 'Home',
  first_name TEXT NOT NULL,
  last_name TEXT NOT NULL,
  company TEXT,
  address_line1 TEXT NOT NULL,
  address_line2 TEXT,
  city TEXT NOT NULL,
  province TEXT NOT NULL,
  postal_code TEXT NOT NULL,
  country TEXT DEFAULT 'South Africa',
  phone TEXT,
  is_default BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Orders table
CREATE TABLE IF NOT EXISTS orders (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  order_number TEXT UNIQUE NOT NULL,
  customer_id UUID REFERENCES customers(id),
  vendor_id UUID REFERENCES vendors(id),
  -- Pricing
  subtotal DECIMAL(12,2) NOT NULL,
  discount_amount DECIMAL(12,2) DEFAULT 0,
  shipping_amount DECIMAL(12,2) DEFAULT 0,
  tax_amount DECIMAL(12,2) DEFAULT 0,
  total_amount DECIMAL(12,2) NOT NULL,
  currency TEXT DEFAULT 'ZAR',
  -- Status
  status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'processing', 'shipped', 'delivered', 'cancelled', 'refunded')),
  payment_status TEXT DEFAULT 'pending' CHECK (payment_status IN ('pending', 'paid', 'failed', 'refunded', 'partially_refunded')),
  fulfillment_status TEXT DEFAULT 'unfulfilled' CHECK (fulfillment_status IN ('unfulfilled', 'partially_fulfilled', 'fulfilled')),
  -- Payment
  payment_method TEXT,
  payment_reference TEXT,
  stripe_payment_intent_id TEXT,
  -- Addresses
  shipping_address JSONB,
  billing_address JSONB,
  -- Shipping
  shipping_method TEXT,
  tracking_number TEXT,
  tracking_url TEXT,
  estimated_delivery TIMESTAMPTZ,
  shipped_at TIMESTAMPTZ,
  delivered_at TIMESTAMPTZ,
  -- Notes
  customer_notes TEXT,
  internal_notes TEXT,
  -- Metadata
  metadata JSONB,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Order items
CREATE TABLE IF NOT EXISTS order_items (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  order_id UUID REFERENCES orders(id) ON DELETE CASCADE,
  product_id UUID REFERENCES products(id),
  variant_id UUID REFERENCES product_variants(id),
  vendor_id UUID REFERENCES vendors(id),
  -- Product snapshot
  product_name TEXT NOT NULL,
  product_sku TEXT,
  product_image TEXT,
  variant_name TEXT,
  -- Pricing
  unit_price DECIMAL(10,2) NOT NULL,
  quantity INTEGER NOT NULL,
  discount_amount DECIMAL(10,2) DEFAULT 0,
  tax_amount DECIMAL(10,2) DEFAULT 0,
  total_amount DECIMAL(10,2) NOT NULL,
  -- Status
  fulfillment_status TEXT DEFAULT 'unfulfilled',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Shopping carts
CREATE TABLE IF NOT EXISTS carts (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  customer_id UUID REFERENCES customers(id),
  session_id TEXT,
  items JSONB DEFAULT '[]',
  subtotal DECIMAL(12,2) DEFAULT 0,
  expires_at TIMESTAMPTZ DEFAULT NOW() + INTERVAL '7 days',
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Wishlists
CREATE TABLE IF NOT EXISTS wishlists (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  customer_id UUID REFERENCES customers(id) ON DELETE CASCADE,
  product_id UUID REFERENCES products(id) ON DELETE CASCADE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(customer_id, product_id)
);

-- Product reviews
CREATE TABLE IF NOT EXISTS product_reviews (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  product_id UUID REFERENCES products(id) ON DELETE CASCADE,
  customer_id UUID REFERENCES customers(id),
  order_id UUID REFERENCES orders(id),
  rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5),
  title TEXT,
  content TEXT,
  images JSONB DEFAULT '[]',
  is_verified_purchase BOOLEAN DEFAULT false,
  is_approved BOOLEAN DEFAULT false,
  helpful_count INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Discount codes / Coupons
CREATE TABLE IF NOT EXISTS discount_codes (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  vendor_id UUID REFERENCES vendors(id),
  code TEXT UNIQUE NOT NULL,
  description TEXT,
  discount_type TEXT NOT NULL CHECK (discount_type IN ('percentage', 'fixed_amount', 'free_shipping')),
  discount_value DECIMAL(10,2) NOT NULL,
  minimum_order_amount DECIMAL(10,2),
  maximum_discount_amount DECIMAL(10,2),
  usage_limit INTEGER,
  usage_count INTEGER DEFAULT 0,
  is_active BOOLEAN DEFAULT true,
  starts_at TIMESTAMPTZ,
  expires_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Delivery zones and rates
CREATE TABLE IF NOT EXISTS delivery_zones (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  provinces TEXT[],
  cities TEXT[],
  postal_codes TEXT[],
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE IF NOT EXISTS shipping_rates (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  zone_id UUID REFERENCES delivery_zones(id) ON DELETE CASCADE,
  vendor_id UUID REFERENCES vendors(id),
  name TEXT NOT NULL,
  description TEXT,
  price DECIMAL(10,2) NOT NULL,
  free_shipping_threshold DECIMAL(10,2),
  estimated_days_min INTEGER,
  estimated_days_max INTEGER,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Notifications
CREATE TABLE IF NOT EXISTS notifications (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  type TEXT NOT NULL,
  title TEXT NOT NULL,
  message TEXT,
  data JSONB,
  is_read BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create indexes for performance
CREATE INDEX IF NOT EXISTS idx_products_vendor ON products(vendor_id);
CREATE INDEX IF NOT EXISTS idx_products_category ON products(category_id);
CREATE INDEX IF NOT EXISTS idx_products_status ON products(status);
CREATE INDEX IF NOT EXISTS idx_products_stock ON products(stock_quantity);
CREATE INDEX IF NOT EXISTS idx_orders_customer ON orders(customer_id);
CREATE INDEX IF NOT EXISTS idx_orders_vendor ON orders(vendor_id);
CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status);
CREATE INDEX IF NOT EXISTS idx_order_items_order ON order_items(order_id);
CREATE INDEX IF NOT EXISTS idx_inventory_movements_product ON inventory_movements(product_id);

-- Function to generate order number
CREATE OR REPLACE FUNCTION generate_order_number()
RETURNS TEXT AS $$
BEGIN
  RETURN 'BWW-' || TO_CHAR(NOW(), 'YYYYMMDD') || '-' || UPPER(SUBSTRING(MD5(RANDOM()::TEXT) FROM 1 FOR 6));
END;
$$ LANGUAGE plpgsql;

-- Function to update inventory on order
CREATE OR REPLACE FUNCTION update_inventory_on_order()
RETURNS TRIGGER AS $$
BEGIN
  IF NEW.status = 'confirmed' AND OLD.status = 'pending' THEN
    -- Deduct inventory for each order item
    UPDATE products p
    SET stock_quantity = stock_quantity - oi.quantity,
        sales_count = sales_count + oi.quantity,
        updated_at = NOW()
    FROM order_items oi
    WHERE oi.order_id = NEW.id AND oi.product_id = p.id;
    
    -- Log inventory movement
    INSERT INTO inventory_movements (product_id, movement_type, quantity, previous_quantity, new_quantity, reference_type, reference_id, notes)
    SELECT 
      oi.product_id,
      'sale',
      -oi.quantity,
      p.stock_quantity + oi.quantity,
      p.stock_quantity,
      'order',
      NEW.id,
      'Order ' || NEW.order_number
    FROM order_items oi
    JOIN products p ON p.id = oi.product_id
    WHERE oi.order_id = NEW.id;
  END IF;
  
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger for inventory updates
DROP TRIGGER IF EXISTS trigger_update_inventory ON orders;
CREATE TRIGGER trigger_update_inventory
  AFTER UPDATE ON orders
  FOR EACH ROW
  EXECUTE FUNCTION update_inventory_on_order();

-- Function to update product rating
CREATE OR REPLACE FUNCTION update_product_rating()
RETURNS TRIGGER AS $$
BEGIN
  UPDATE products
  SET rating = (
    SELECT COALESCE(AVG(rating), 0)
    FROM product_reviews
    WHERE product_id = NEW.product_id AND is_approved = true
  ),
  review_count = (
    SELECT COUNT(*)
    FROM product_reviews
    WHERE product_id = NEW.product_id AND is_approved = true
  ),
  updated_at = NOW()
  WHERE id = NEW.product_id;
  
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

DROP TRIGGER IF EXISTS trigger_update_product_rating ON product_reviews;
CREATE TRIGGER trigger_update_product_rating
  AFTER INSERT OR UPDATE ON product_reviews
  FOR EACH ROW
  EXECUTE FUNCTION update_product_rating();
[V0_FILE]sql:file="scripts/002_ecommerce_rls.sql" isMerged="true"
-- Row Level Security Policies for Buddies World Wide

-- Enable RLS on all tables
ALTER TABLE categories ENABLE ROW LEVEL SECURITY;
ALTER TABLE vendors ENABLE ROW LEVEL SECURITY;
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
ALTER TABLE product_variants ENABLE ROW LEVEL SECURITY;
ALTER TABLE inventory_movements ENABLE ROW LEVEL SECURITY;
ALTER TABLE customers ENABLE ROW LEVEL SECURITY;
ALTER TABLE customer_addresses ENABLE ROW LEVEL SECURITY;
ALTER TABLE orders ENABLE ROW LEVEL SECURITY;
ALTER TABLE order_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE carts ENABLE ROW LEVEL SECURITY;
ALTER TABLE wishlists ENABLE ROW LEVEL SECURITY;
ALTER TABLE product_reviews ENABLE ROW LEVEL SECURITY;
ALTER TABLE discount_codes ENABLE ROW LEVEL SECURITY;
ALTER TABLE delivery_zones ENABLE ROW LEVEL SECURITY;
ALTER TABLE shipping_rates ENABLE ROW LEVEL SECURITY;
ALTER TABLE notifications ENABLE ROW LEVEL SECURITY;

-- Categories: Public read, admin write
CREATE POLICY "Categories are viewable by everyone" ON categories FOR SELECT USING (is_active = true);

-- Vendors: Public read for active, owners can manage
CREATE POLICY "Active vendors are viewable by everyone" ON vendors FOR SELECT USING (is_active = true);
CREATE POLICY "Vendors can update their own profile" ON vendors FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "Users can create vendor profile" ON vendors FOR INSERT WITH CHECK (auth.uid() = user_id);

-- Products: Public read for active, vendors can manage their own
CREATE POLICY "Active products are viewable by everyone" ON products FOR SELECT USING (status = 'active');
CREATE POLICY "Vendors can view all their products" ON products FOR SELECT USING (
  vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);
CREATE POLICY "Vendors can insert their own products" ON products FOR INSERT WITH CHECK (
  vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);
CREATE POLICY "Vendors can update their own products" ON products FOR UPDATE USING (
  vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);
CREATE POLICY "Vendors can delete their own products" ON products FOR DELETE USING (
  vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);

-- Product variants: Same as products
CREATE POLICY "Variants viewable with product" ON product_variants FOR SELECT USING (
  product_id IN (SELECT id FROM products WHERE status = 'active')
);
CREATE POLICY "Vendors can manage variants" ON product_variants FOR ALL USING (
  product_id IN (SELECT id FROM products WHERE vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid()))
);

-- Inventory movements: Vendors can view their own
CREATE POLICY "Vendors can view their inventory movements" ON inventory_movements FOR SELECT USING (
  product_id IN (SELECT id FROM products WHERE vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid()))
);
CREATE POLICY "Vendors can create inventory movements" ON inventory_movements FOR INSERT WITH CHECK (
  product_id IN (SELECT id FROM products WHERE vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid()))
);

-- Customers: Own data only
CREATE POLICY "Customers can view their own profile" ON customers FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Customers can update their own profile" ON customers FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "Users can create customer profile" ON customers FOR INSERT WITH CHECK (auth.uid() = user_id);

-- Customer addresses: Own data only
CREATE POLICY "Customers can manage their addresses" ON customer_addresses FOR ALL USING (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
);

-- Orders: Customers see their own, vendors see orders with their products
CREATE POLICY "Customers can view their orders" ON orders FOR SELECT USING (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
);
CREATE POLICY "Vendors can view orders containing their products" ON orders FOR SELECT USING (
  id IN (SELECT DISTINCT order_id FROM order_items WHERE vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid()))
);
CREATE POLICY "Anyone can create orders" ON orders FOR INSERT WITH CHECK (true);
CREATE POLICY "Vendors can update order status" ON orders FOR UPDATE USING (
  id IN (SELECT DISTINCT order_id FROM order_items WHERE vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid()))
);

-- Order items: Same as orders
CREATE POLICY "Order items viewable with order" ON order_items FOR SELECT USING (
  order_id IN (SELECT id FROM orders WHERE customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid()))
  OR vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);
CREATE POLICY "Anyone can create order items" ON order_items FOR INSERT WITH CHECK (true);

-- Carts: Own data only
CREATE POLICY "Users can manage their cart" ON carts FOR ALL USING (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
  OR session_id IS NOT NULL
);

-- Wishlists: Own data only
CREATE POLICY "Users can manage their wishlist" ON wishlists FOR ALL USING (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
);

-- Reviews: Public read, customers can create
CREATE POLICY "Approved reviews are viewable" ON product_reviews FOR SELECT USING (is_approved = true);
CREATE POLICY "Customers can create reviews" ON product_reviews FOR INSERT WITH CHECK (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
);
CREATE POLICY "Customers can update their reviews" ON product_reviews FOR UPDATE USING (
  customer_id IN (SELECT id FROM customers WHERE user_id = auth.uid())
);

-- Discount codes: Public read for active, vendors manage their own
CREATE POLICY "Active discount codes viewable" ON discount_codes FOR SELECT USING (is_active = true);
CREATE POLICY "Vendors can manage their discount codes" ON discount_codes FOR ALL USING (
  vendor_id IN (SELECT id FROM vendors WHERE user_id = auth.uid())
);

-- Delivery zones and shipping rates: Public read
CREATE POLICY "Delivery zones viewable" ON delivery_zones FOR SELECT USING (is_active = true);
CREATE POLICY "Shipping rates viewable" ON shipping_rates FOR SELECT USING (is_active = true);

-- Notifications: Own data only
CREATE POLICY "Users can view their notifications" ON notifications FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can update their notifications" ON notifications FOR UPDATE USING (auth.uid() = user_id);
[V0_FILE]sql:file="scripts/003_seed_categories.sql" isMerged="true"
-- Seed initial categories for Buddies World Wide

INSERT INTO categories (name, slug, description, image_url, sort_order) VALUES
  ('420 Zone', '420', 'Premium cannabis products, CBD oils, edibles, and accessories', '/category-420.jpg', 1),
  ('Fruits & Vegetables', 'fruits-vegetables', 'Fresh, locally-sourced fruits and vegetables delivered to your door', '/category-fruits.jpg', 2),
  ('Household Essentials', 'household', 'Everyday household items, cleaning supplies, and home basics', '/category-household.jpg', 3),
  ('Snacks & Beverages', 'snacks', 'Delicious snacks, drinks, and treats for any occasion', '/category-snacks.jpg', 4),
  ('Delivery Services', 'delivery', 'Express delivery, same-day shipping, and logistics services', '/category-delivery.jpg', 5)
ON CONFLICT (slug) DO NOTHING;

-- Sub-categories for 420 Zone
INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'CBD Products', '420-cbd', 'CBD oils, tinctures, and wellness products', id, 1 FROM categories WHERE slug = '420'
ON CONFLICT (slug) DO NOTHING;

INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Edibles', '420-edibles', 'Cannabis-infused gummies, chocolates, and treats', id, 2 FROM categories WHERE slug = '420'
ON CONFLICT (slug) DO NOTHING;

INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Accessories', '420-accessories', 'Vapes, grinders, pipes, and smoking accessories', id, 3 FROM categories WHERE slug = '420'
ON CONFLICT (slug) DO NOTHING;

-- Sub-categories for Fruits & Vegetables
INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Fresh Fruits', 'fresh-fruits', 'Seasonal and exotic fruits', id, 1 FROM categories WHERE slug = 'fruits-vegetables'
ON CONFLICT (slug) DO NOTHING;

INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Fresh Vegetables', 'fresh-vegetables', 'Organic and farm-fresh vegetables', id, 2 FROM categories WHERE slug = 'fruits-vegetables'
ON CONFLICT (slug) DO NOTHING;

-- Sub-categories for Household
INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Cleaning Supplies', 'cleaning-supplies', 'Detergents, cleaners, and sanitizers', id, 1 FROM categories WHERE slug = 'household'
ON CONFLICT (slug) DO NOTHING;

INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Kitchen Essentials', 'kitchen-essentials', 'Cookware, utensils, and kitchen gadgets', id, 2 FROM categories WHERE slug = 'household'
ON CONFLICT (slug) DO NOTHING;

-- Sub-categories for Snacks
INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Chips & Crisps', 'chips-crisps', 'Potato chips, corn chips, and crisps', id, 1 FROM categories WHERE slug = 'snacks'
ON CONFLICT (slug) DO NOTHING;

INSERT INTO categories (name, slug, description, parent_id, sort_order) 
SELECT 'Beverages', 'beverages', 'Soft drinks, juices, and energy drinks', id, 2 FROM categories WHERE slug = 'snacks'
ON CONFLICT (slug) DO NOTHING;

-- Create default delivery zones for South Africa
INSERT INTO delivery_zones (name, provinces, is_active) VALUES
  ('Gauteng Metro', ARRAY['Gauteng'], true),
  ('Cape Town Metro', ARRAY['Western Cape'], true),
  ('KZN Metro', ARRAY['KwaZulu-Natal'], true),
  ('National', ARRAY['Gauteng', 'Western Cape', 'KwaZulu-Natal', 'Eastern Cape', 'Free State', 'Limpopo', 'Mpumalanga', 'North West', 'Northern Cape'], true)
ON CONFLICT DO NOTHING;

-- Create default shipping rates
INSERT INTO shipping_rates (zone_id, name, description, price, free_shipping_threshold, estimated_days_min, estimated_days_max, is_active)
SELECT id, 'Standard Delivery', 'Delivery within 3-5 business days', 99.00, 500.00, 3, 5, true FROM delivery_zones WHERE name = 'Gauteng Metro'
ON CONFLICT DO NOTHING;

INSERT INTO shipping_rates (zone_id, name, description, price, free_shipping_threshold, estimated_days_min, estimated_days_max, is_active)
SELECT id, 'Express Delivery', 'Next-day delivery', 249.00, 1000.00, 1, 1, true FROM delivery_zones WHERE name = 'Gauteng Metro'
ON CONFLICT DO NOTHING;

INSERT INTO shipping_rates (zone_id, name, description, price, free_shipping_threshold, estimated_days_min, estimated_days_max, is_active)
SELECT id, 'National Standard', 'Delivery within 5-7 business days', 149.00, 750.00, 5, 7, true FROM delivery_zones WHERE name = 'National'
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="lib/db/types.ts" isMerged="true"
// Database types for Buddies World Wide

export interface Category {
  id: string
  name: string
  slug: string
  description: string | null
  image_url: string | null
  parent_id: string | null
  is_active: boolean
  sort_order: number
  created_at: string
  updated_at: string
}

export interface Vendor {
  id: string
  user_id: string
  business_name: string
  slug: string
  description: string | null
  logo_url: string | null
  banner_url: string | null
  email: string
  phone: string | null
  address: Record<string, unknown> | null
  subscription_tier: "starter" | "professional" | "enterprise"
  subscription_status: "trial" | "active" | "cancelled" | "expired"
  stripe_customer_id: string | null
  stripe_subscription_id: string | null
  commission_rate: number
  is_verified: boolean
  is_active: boolean
  rating: number
  total_sales: number
  created_at: string
  updated_at: string
}

export interface Product {
  id: string
  vendor_id: string
  category_id: string | null
  name: string
  slug: string
  description: string | null
  short_description: string | null
  price: number
  compare_at_price: number | null
  cost_price: number | null
  sku: string | null
  barcode: string | null
  track_inventory: boolean
  stock_quantity: number
  low_stock_threshold: number
  allow_backorder: boolean
  weight: number | null
  weight_unit: string
  dimensions: Record<string, unknown> | null
  images: string[]
  tags: string[] | null
  status: "draft" | "active" | "archived"
  is_featured: boolean
  requires_shipping: boolean
  meta_title: string | null
  meta_description: string | null
  view_count: number
  sales_count: number
  rating: number
  review_count: number
  created_at: string
  updated_at: string
  vendor?: Vendor
  category?: Category
}

export interface ProductVariant {
  id: string
  product_id: string
  name: string
  sku: string | null
  price: number | null
  compare_at_price: number | null
  stock_quantity: number
  low_stock_threshold: number
  options: Record<string, unknown> | null
  image_url: string | null
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface InventoryMovement {
  id: string
  product_id: string
  variant_id: string | null
  movement_type: "purchase" | "sale" | "adjustment" | "return" | "transfer" | "damage" | "restock"
  quantity: number
  previous_quantity: number
  new_quantity: number
  reference_type: string | null
  reference_id: string | null
  notes: string | null
  created_by: string | null
  created_at: string
}

export interface Customer {
  id: string
  user_id: string
  email: string
  first_name: string | null
  last_name: string | null
  phone: string | null
  avatar_url: string | null
  default_address_id: string | null
  total_orders: number
  total_spent: number
  loyalty_points: number
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface CustomerAddress {
  id: string
  customer_id: string
  label: string
  first_name: string
  last_name: string
  company: string | null
  address_line1: string
  address_line2: string | null
  city: string
  province: string
  postal_code: string
  country: string
  phone: string | null
  is_default: boolean
  created_at: string
  updated_at: string
}

export interface Order {
  id: string
  order_number: string
  customer_id: string | null
  vendor_id: string | null
  subtotal: number
  discount_amount: number
  shipping_amount: number
  tax_amount: number
  total_amount: number
  currency: string
  status: "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded"
  payment_status: "pending" | "paid" | "failed" | "refunded" | "partially_refunded"
  fulfillment_status: "unfulfilled" | "partially_fulfilled" | "fulfilled"
  payment_method: string | null
  payment_reference: string | null
  stripe_payment_intent_id: string | null
  shipping_address: Record<string, unknown> | null
  billing_address: Record<string, unknown> | null
  shipping_method: string | null
  tracking_number: string | null
  tracking_url: string | null
  estimated_delivery: string | null
  shipped_at: string | null
  delivered_at: string | null
  customer_notes: string | null
  internal_notes: string | null
  metadata: Record<string, unknown> | null
  created_at: string
  updated_at: string
  items?: OrderItem[]
  customer?: Customer
}

export interface OrderItem {
  id: string
  order_id: string
  product_id: string | null
  variant_id: string | null
  vendor_id: string | null
  product_name: string
  product_sku: string | null
  product_image: string | null
  variant_name: string | null
  unit_price: number
  quantity: number
  discount_amount: number
  tax_amount: number
  total_amount: number
  fulfillment_status: string
  created_at: string
}

export interface CartItem {
  product_id: string
  variant_id?: string
  quantity: number
  product: Product
  variant?: ProductVariant
}

export interface ShippingRate {
  id: string
  zone_id: string
  vendor_id: string | null
  name: string
  description: string | null
  price: number
  free_shipping_threshold: number | null
  estimated_days_min: number | null
  estimated_days_max: number | null
  is_active: boolean
  created_at: string
}

export interface DiscountCode {
  id: string
  vendor_id: string | null
  code: string
  description: string | null
  discount_type: "percentage" | "fixed_amount" | "free_shipping"
  discount_value: number
  minimum_order_amount: number | null
  maximum_discount_amount: number | null
  usage_limit: number | null
  usage_count: number
  is_active: boolean
  starts_at: string | null
  expires_at: string | null
  created_at: string
}
[V0_FILE]typescriptreact:file="app/api/products/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const supabase = await createClient()
  const { searchParams } = new URL(request.url)

const category = searchParams.get("category")
  const vendor = searchParams.get("vendor")
  const search = searchParams.get("search")
  const featured = searchParams.get("featured")
  const limit = Number.parseInt(searchParams.get("limit") || "20")
  const offset = Number.parseInt(searchParams.get("offset") || "0")

let query = supabase
    .from("products")
    .select(`
      *,
      vendor:vendors(id, business_name, slug, logo_url, rating),
      category:categories(id, name, slug)
    `)
    .eq("status", "active")
    .order("created_at", { ascending: false })
    .range(offset, offset + limit - 1)

if (category) {
    const { data: cat } = await supabase.from("categories").select("id").eq("slug", category).single()
    if (cat) {
      query = query.eq("category_id", cat.id)
    }
  }

if (vendor) {
    const { data: v } = await supabase.from("vendors").select("id").eq("slug", vendor).single()
    if (v) {
      query = query.eq("vendor_id", v.id)
    }
  }

if (search) {
    query = query.or(`name.ilike.%${search}%,description.ilike.%${search}%`)
  }

if (featured === "true") {
    query = query.eq("is_featured", true)
  }

const { data: products, error } = await query

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ products })
}

export async function POST(request: NextRequest) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

// Check if user is a vendor
  const { data: vendor } = await supabase.from("vendors").select("id").eq("user_id", user.id).single()

if (!vendor) {
    return NextResponse.json({ error: "Not a vendor" }, { status: 403 })
  }

const body = await request.json()

const { data: product, error } = await supabase
    .from("products")
    .insert({
      ...body,
      vendor_id: vendor.id,
      slug: body.name
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/[^a-z0-9-]/g, ""),
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ product })
}
[V0_FILE]typescriptreact:file="app/api/products/[id]/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: product, error } = await supabase
    .from("products")
    .select(`
      *,
      vendor:vendors(id, business_name, slug, logo_url, rating, is_verified),
      category:categories(id, name, slug)
    `)
    .eq("id", id)
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 404 })
  }

// Increment view count
  await supabase
    .from("products")
    .update({ view_count: (product.view_count || 0) + 1 })
    .eq("id", id)

return NextResponse.json({ product })
}

export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const body = await request.json()

const { data: product, error } = await supabase.from("products").update(body).eq("id", id).select().single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ product })
}

export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const { error } = await supabase.from("products").delete().eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescriptreact:file="app/api/inventory/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

// Get vendor
  const { data: vendor } = await supabase.from("vendors").select("id").eq("user_id", user.id).single()

if (!vendor) {
    return NextResponse.json({ error: "Not a vendor" }, { status: 403 })
  }

const { searchParams } = new URL(request.url)
  const lowStock = searchParams.get("low_stock") === "true"

let query = supabase
    .from("products")
    .select("id, name, sku, stock_quantity, low_stock_threshold, status, images")
    .eq("vendor_id", vendor.id)
    .eq("track_inventory", true)
    .order("stock_quantity", { ascending: true })

if (lowStock) {
    query = query.filter("stock_quantity", "lte", "low_stock_threshold")
  }

const { data: products, error } = await query

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ products })
}

export async function POST(request: NextRequest) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const body = await request.json()
  const { product_id, adjustment, movement_type, notes } = body

// Get current product
  const { data: product, error: productError } = await supabase
    .from("products")
    .select("stock_quantity, vendor_id")
    .eq("id", product_id)
    .single()

if (productError || !product) {
    return NextResponse.json({ error: "Product not found" }, { status: 404 })
  }

const newQuantity = product.stock_quantity + adjustment

// Update product stock
  const { error: updateError } = await supabase
    .from("products")
    .update({
      stock_quantity: newQuantity,
      updated_at: new Date().toISOString(),
    })
    .eq("id", product_id)

if (updateError) {
    return NextResponse.json({ error: updateError.message }, { status: 500 })
  }

// Log inventory movement
  const { error: movementError } = await supabase.from("inventory_movements").insert({
    product_id,
    movement_type: movement_type || "adjustment",
    quantity: adjustment,
    previous_quantity: product.stock_quantity,
    new_quantity: newQuantity,
    notes,
    created_by: user.id,
  })

if (movementError) {
    return NextResponse.json({ error: movementError.message }, { status: 500 })
  }

return NextResponse.json({
    success: true,
    new_quantity: newQuantity,
  })
}
[V0_FILE]typescriptreact:file="app/api/inventory/[productId]/history/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest, { params }: { params: Promise<{ productId: string }> }) {
  const { productId } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const { data: movements, error } = await supabase
    .from("inventory_movements")
    .select("*")
    .eq("product_id", productId)
    .order("created_at", { ascending: false })
    .limit(50)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ movements })
}
[V0_FILE]typescriptreact:file="app/api/orders/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

function generateOrderNumber(): string {
  const date = new Date().toISOString().slice(0, 10).replace(/-/g, "")
  const random = Math.random().toString(36).substring(2, 8).toUpperCase()
  return `BWW-${date}-${random}`
}

export async function GET(request: NextRequest) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const { searchParams } = new URL(request.url)
  const role = searchParams.get("role") || "customer"
  const status = searchParams.get("status")
  const limit = Number.parseInt(searchParams.get("limit") || "20")

if (role === "vendor") {
    // Get vendor orders
    const { data: vendor } = await supabase.from("vendors").select("id").eq("user_id", user.id).single()

if (!vendor) {
      return NextResponse.json({ error: "Not a vendor" }, { status: 403 })
    }

let query = supabase
      .from("orders")
      .select(`
        *,
        items:order_items(*)
      `)
      .eq("vendor_id", vendor.id)
      .order("created_at", { ascending: false })
      .limit(limit)

if (status) {
      query = query.eq("status", status)
    }

const { data: orders, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json({ orders })
  } else {
    // Get customer orders
    const { data: customer } = await supabase.from("customers").select("id").eq("user_id", user.id).single()

if (!customer) {
      return NextResponse.json({ orders: [] })
    }

let query = supabase
      .from("orders")
      .select(`
        *,
        items:order_items(*)
      `)
      .eq("customer_id", customer.id)
      .order("created_at", { ascending: false })
      .limit(limit)

if (status) {
      query = query.eq("status", status)
    }

const { data: orders, error } = await query

if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json({ orders })
  }
}

export async function POST(request: NextRequest) {
  const supabase = await createClient()

const body = await request.json()
  const { items, shipping_address, billing_address, payment_method, shipping_method, customer_notes, discount_code } =
    body

// Calculate totals
  let subtotal = 0
  let discount_amount = 0
  const orderItems: Array<{
    product_id: string
    vendor_id: string
    product_name: string
    product_sku: string | null
    product_image: string | null
    unit_price: number
    quantity: number
    total_amount: number
  }> = []

for (const item of items) {
    const { data: product } = await supabase
      .from("products")
      .select("id, vendor_id, name, sku, price, images, stock_quantity, track_inventory")
      .eq("id", item.product_id)
      .single()

if (!product) continue

// Check stock
    if (product.track_inventory && product.stock_quantity < item.quantity) {
      return NextResponse.json(
        {
          error: `Insufficient stock for ${product.name}`,
        },
        { status: 400 },
      )
    }

const itemTotal = product.price * item.quantity
    subtotal += itemTotal

orderItems.push({
      product_id: product.id,
      vendor_id: product.vendor_id,
      product_name: product.name,
      product_sku: product.sku,
      product_image: product.images?.[0] || null,
      unit_price: product.price,
      quantity: item.quantity,
      total_amount: itemTotal,
    })
  }

// Apply discount code
  if (discount_code) {
    const { data: discount } = await supabase
      .from("discount_codes")
      .select("*")
      .eq("code", discount_code.toUpperCase())
      .eq("is_active", true)
      .single()

if (discount) {
      if (discount.discount_type === "percentage") {
        discount_amount = subtotal * (discount.discount_value / 100)
        if (discount.maximum_discount_amount) {
          discount_amount = Math.min(discount_amount, discount.maximum_discount_amount)
        }
      } else if (discount.discount_type === "fixed_amount") {
        discount_amount = discount.discount_value
      }

// Update usage count
      await supabase
        .from("discount_codes")
        .update({ usage_count: discount.usage_count + 1 })
        .eq("id", discount.id)
    }
  }

// Calculate shipping
  const shipping_amount = shipping_method === "express" ? 249 : 99

// Calculate tax (15% VAT)
  const taxable_amount = subtotal - discount_amount
  const tax_amount = taxable_amount * 0.15

// Total
  const total_amount = subtotal - discount_amount + shipping_amount + tax_amount

// Get or create customer
  let customer_id = null
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (user) {
    const { data: customer } = await supabase.from("customers").select("id").eq("user_id", user.id).single()

if (customer) {
      customer_id = customer.id
    }
  }

// Create order
  const { data: order, error: orderError } = await supabase
    .from("orders")
    .insert({
      order_number: generateOrderNumber(),
      customer_id,
      subtotal,
      discount_amount,
      shipping_amount,
      tax_amount,
      total_amount,
      currency: "ZAR",
      status: "pending",
      payment_status: "pending",
      payment_method,
      shipping_address,
      billing_address,
      shipping_method,
      customer_notes,
    })
    .select()
    .single()

if (orderError) {
    return NextResponse.json({ error: orderError.message }, { status: 500 })
  }

// Create order items
  const orderItemsWithOrderId = orderItems.map((item) => ({
    ...item,
    order_id: order.id,
  }))

const { error: itemsError } = await supabase.from("order_items").insert(orderItemsWithOrderId)

if (itemsError) {
    return NextResponse.json({ error: itemsError.message }, { status: 500 })
  }

return NextResponse.json({ order })
}
[V0_FILE]typescriptreact:file="app/api/orders/[id]/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: order, error } = await supabase
    .from("orders")
    .select(`
      *,
      items:order_items(*)
    `)
    .eq("id", id)
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 404 })
  }

return NextResponse.json({ order })
}

export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const body = await request.json()

const { data: order, error } = await supabase
    .from("orders")
    .update({
      ...body,
      updated_at: new Date().toISOString(),
    })
    .eq("id", id)
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ order })
}
[V0_FILE]typescriptreact:file="app/api/categories/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  const supabase = await createClient()

const { data: categories, error } = await supabase
    .from("categories")
    .select("*")
    .eq("is_active", true)
    .order("sort_order", { ascending: true })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ categories })
}
[V0_FILE]typescriptreact:file="app/api/vendors/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const supabase = await createClient()

const { searchParams } = new URL(request.url)
  const featured = searchParams.get("featured")
  const limit = Number.parseInt(searchParams.get("limit") || "20")

let query = supabase
    .from("vendors")
    .select("*")
    .eq("is_active", true)
    .order("rating", { ascending: false })
    .limit(limit)

if (featured === "true") {
    query = query.eq("is_verified", true)
  }

const { data: vendors, error } = await query

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ vendors })
}

export async function POST(request: NextRequest) {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()
  if (!user) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const body = await request.json()

const { data: vendor, error } = await supabase
    .from("vendors")
    .insert({
      ...body,
      user_id: user.id,
      slug: body.business_name
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/[^a-z0-9-]/g, ""),
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ vendor })
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/inventory/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import {
  ArrowLeft,
  Package,
  AlertTriangle,
  TrendingUp,
  TrendingDown,
  Search,
  Plus,
  Minus,
  History,
  Download,
  RefreshCw,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "sonner"

interface InventoryProduct {
  id: string
  name: string
  sku: string | null
  stock_quantity: number
  low_stock_threshold: number
  status: string
  images: string[]
}

interface InventoryMovement {
  id: string
  movement_type: string
  quantity: number
  previous_quantity: number
  new_quantity: number
  notes: string | null
  created_at: string
}

export default function InventoryPage() {
  const [products, setProducts] = useState<InventoryProduct[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [showLowStock, setShowLowStock] = useState(false)
  const [selectedProduct, setSelectedProduct] = useState<InventoryProduct | null>(null)
  const [adjustmentDialogOpen, setAdjustmentDialogOpen] = useState(false)
  const [historyDialogOpen, setHistoryDialogOpen] = useState(false)
  const [movementHistory, setMovementHistory] = useState<InventoryMovement[]>([])
  const [adjustmentData, setAdjustmentData] = useState({
    type: "restock",
    quantity: 0,
    notes: "",
  })

useEffect(() => {
    fetchInventory()
  }, [showLowStock])

const fetchInventory = async () => {
    setLoading(true)
    try {
      const url = showLowStock ? "/api/inventory?low_stock=true" : "/api/inventory"
      const res = await fetch(url)
      const data = await res.json()
      setProducts(data.products || [])
    } catch {
      toast.error("Failed to load inventory")
    } finally {
      setLoading(false)
    }
  }

const fetchMovementHistory = async (productId: string) => {
    try {
      const res = await fetch(`/api/inventory/${productId}/history`)
      const data = await res.json()
      setMovementHistory(data.movements || [])
    } catch {
      toast.error("Failed to load history")
    }
  }

const handleAdjustment = async () => {
    if (!selectedProduct) return

const adjustment =
      adjustmentData.type === "restock" || adjustmentData.type === "return"
        ? Math.abs(adjustmentData.quantity)
        : -Math.abs(adjustmentData.quantity)

try {
      const res = await fetch("/api/inventory", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          product_id: selectedProduct.id,
          adjustment,
          movement_type: adjustmentData.type,
          notes: adjustmentData.notes,
        }),
      })

if (!res.ok) throw new Error()

toast.success("Inventory updated successfully")
      setAdjustmentDialogOpen(false)
      setAdjustmentData({ type: "restock", quantity: 0, notes: "" })
      fetchInventory()
    } catch {
      toast.error("Failed to update inventory")
    }
  }

const filteredProducts = products.filter(
    (product) =>
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.sku?.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const lowStockCount = products.filter((p) => p.stock_quantity <= p.low_stock_threshold).length
  const outOfStockCount = products.filter((p) => p.stock_quantity <= 0).length
  const totalStock = products.reduce((sum, p) => sum + p.stock_quantity, 0)

const getStockStatus = (product: InventoryProduct) => {
    if (product.stock_quantity <= 0) return { label: "Out of Stock", variant: "destructive" as const }
    if (product.stock_quantity <= product.low_stock_threshold)
      return { label: "Low Stock", variant: "outline" as const }
    return { label: "In Stock", variant: "secondary" as const }
  }

const getMovementTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      purchase: "Purchase",
      sale: "Sale",
      adjustment: "Adjustment",
      return: "Return",
      transfer: "Transfer",
      damage: "Damage",
      restock: "Restock",
    }
    return labels[type] || type
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href="/vendor/dashboard" className="text-muted-foreground hover:text-foreground">
                <ArrowLeft className="h-5 w-5" />
              </Link>
              <div>
                <h1 className="text-xl font-bold">Inventory Management</h1>
                <p className="text-sm text-muted-foreground">Track and manage your product stock</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" onClick={fetchInventory}>
                <RefreshCw className="h-4 w-4 mr-2" />
                Refresh
              </Button>
              <Button variant="outline">
                <Download className="h-4 w-4 mr-2" />
                Export
              </Button>
            </div>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-primary/10">
                  <Package className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Total Products</p>
                  <p className="text-2xl font-bold">{products.length}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-green-500/10">
                  <TrendingUp className="h-5 w-5 text-green-500" />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Total Stock</p>
                  <p className="text-2xl font-bold">{totalStock}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-orange-500/10">
                  <AlertTriangle className="h-5 w-5 text-orange-500" />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Low Stock</p>
                  <p className="text-2xl font-bold">{lowStockCount}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-destructive/10">
                  <TrendingDown className="h-5 w-5 text-destructive" />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Out of Stock</p>
                  <p className="text-2xl font-bold">{outOfStockCount}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Filters */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search by name or SKU..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
          <Button variant={showLowStock ? "default" : "outline"} onClick={() => setShowLowStock(!showLowStock)}>
            <AlertTriangle className="h-4 w-4 mr-2" />
            Low Stock Only
          </Button>
        </div>

{/* Inventory Table */}
        <Card>
          <CardHeader>
            <CardTitle>Product Inventory</CardTitle>
            <CardDescription>{filteredProducts.length} products found</CardDescription>
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="flex items-center justify-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
              </div>
            ) : filteredProducts.length === 0 ? (
              <div className="text-center py-12 text-muted-foreground">No products found</div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Product</TableHead>
                    <TableHead>SKU</TableHead>
                    <TableHead className="text-center">Stock</TableHead>
                    <TableHead className="text-center">Threshold</TableHead>
                    <TableHead className="text-center">Status</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredProducts.map((product) => {
                    const status = getStockStatus(product)
                    return (
                      <TableRow key={product.id}>
                        <TableCell>
                          <div className="flex items-center gap-3">
                            <div className="relative w-10 h-10 rounded overflow-hidden bg-muted">
                              <Image
                                src={product.images?.[0] || "/placeholder.svg?height=40&width=40&query=product"}
                                alt={product.name}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <span className="font-medium">{product.name}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-muted-foreground">{product.sku || "-"}</TableCell>
                        <TableCell className="text-center font-medium">{product.stock_quantity}</TableCell>
                        <TableCell className="text-center text-muted-foreground">
                          {product.low_stock_threshold}
                        </TableCell>
                        <TableCell className="text-center">
                          <Badge variant={status.variant}>{status.label}</Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-2">
                            <Dialog
                              open={historyDialogOpen && selectedProduct?.id === product.id}
                              onOpenChange={(open) => {
                                setHistoryDialogOpen(open)
                                if (open) {
                                  setSelectedProduct(product)
                                  fetchMovementHistory(product.id)
                                }
                              }}
                            >
                              <DialogTrigger asChild>
                                <Button variant="ghost" size="sm">
                                  <History className="h-4 w-4" />
                                </Button>
                              </DialogTrigger>
                              <DialogContent className="max-w-2xl">
                                <DialogHeader>
                                  <DialogTitle>Stock History - {product.name}</DialogTitle>
                                  <DialogDescription>Recent inventory movements for this product</DialogDescription>
                                </DialogHeader>
                                <div className="max-h-96 overflow-y-auto">
                                  <Table>
                                    <TableHeader>
                                      <TableRow>
                                        <TableHead>Date</TableHead>
                                        <TableHead>Type</TableHead>
                                        <TableHead className="text-right">Change</TableHead>
                                        <TableHead className="text-right">New Qty</TableHead>
                                        <TableHead>Notes</TableHead>
                                      </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                      {movementHistory.map((movement) => (
                                        <TableRow key={movement.id}>
                                          <TableCell className="text-sm">
                                            {new Date(movement.created_at).toLocaleDateString()}
                                          </TableCell>
                                          <TableCell>
                                            <Badge variant="outline">
                                              {getMovementTypeLabel(movement.movement_type)}
                                            </Badge>
                                          </TableCell>
                                          <TableCell
                                            className={`text-right font-medium ${
                                              movement.quantity > 0 ? "text-green-600" : "text-red-600"
                                            }`}
                                          >
                                            {movement.quantity > 0 ? "+" : ""}
                                            {movement.quantity}
                                          </TableCell>
                                          <TableCell className="text-right">{movement.new_quantity}</TableCell>
                                          <TableCell className="text-sm text-muted-foreground">
                                            {movement.notes || "-"}
                                          </TableCell>
                                        </TableRow>
                                      ))}
                                    </TableBody>
                                  </Table>
                                </div>
                              </DialogContent>
                            </Dialog>

<Dialog
                              open={adjustmentDialogOpen && selectedProduct?.id === product.id}
                              onOpenChange={(open) => {
                                setAdjustmentDialogOpen(open)
                                if (open) setSelectedProduct(product)
                              }}
                            >
                              <DialogTrigger asChild>
                                <Button variant="outline" size="sm">
                                  Adjust
                                </Button>
                              </DialogTrigger>
                              <DialogContent>
                                <DialogHeader>
                                  <DialogTitle>Adjust Stock - {product.name}</DialogTitle>
                                  <DialogDescription>Current stock: {product.stock_quantity} units</DialogDescription>
                                </DialogHeader>
                                <div className="space-y-4 py-4">
                                  <div className="space-y-2">
                                    <Label>Adjustment Type</Label>
                                    <Select
                                      value={adjustmentData.type}
                                      onValueChange={(value) => setAdjustmentData({ ...adjustmentData, type: value })}
                                    >
                                      <SelectTrigger>
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="restock">
                                          <div className="flex items-center gap-2">
                                            <Plus className="h-4 w-4 text-green-600" />
                                            Restock
                                          </div>
                                        </SelectItem>
                                        <SelectItem value="return">
                                          <div className="flex items-center gap-2">
                                            <Plus className="h-4 w-4 text-green-600" />
                                            Return
                                          </div>
                                        </SelectItem>
                                        <SelectItem value="damage">
                                          <div className="flex items-center gap-2">
                                            <Minus className="h-4 w-4 text-red-600" />
                                            Damage/Loss
                                          </div>
                                        </SelectItem>
                                        <SelectItem value="adjustment">
                                          <div className="flex items-center gap-2">
                                            <Minus className="h-4 w-4 text-red-600" />
                                            Manual Adjustment
                                          </div>
                                        </SelectItem>
                                      </SelectContent>
                                    </Select>
                                  </div>
                                  <div className="space-y-2">
                                    <Label>Quantity</Label>
                                    <Input
                                      type="number"
                                      min="1"
                                      value={adjustmentData.quantity}
                                      onChange={(e) =>
                                        setAdjustmentData({
                                          ...adjustmentData,
                                          quantity: Number.parseInt(e.target.value) || 0,
                                        })
                                      }
                                    />
                                  </div>
                                  <div className="space-y-2">
                                    <Label>Notes (optional)</Label>
                                    <Textarea
                                      value={adjustmentData.notes}
                                      onChange={(e) => setAdjustmentData({ ...adjustmentData, notes: e.target.value })}
                                      placeholder="Reason for adjustment..."
                                    />
                                  </div>
                                </div>
                                <DialogFooter>
                                  <Button variant="outline" onClick={() => setAdjustmentDialogOpen(false)}>
                                    Cancel
                                  </Button>
                                  <Button onClick={handleAdjustment} disabled={adjustmentData.quantity <= 0}>
                                    Update Stock
                                  </Button>
                                </DialogFooter>
                              </DialogContent>
                            </Dialog>
                          </div>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/inventory/loading.tsx" isEdit="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 border-b bg-background">
        <div className="container mx-auto px-4 py-4">
          <Skeleton className="h-8 w-64" />
        </div>
      </header>
      <main className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <Skeleton className="h-16 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
        <Card>
          <CardHeader>
            <Skeleton className="h-6 w-48" />
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <Skeleton key={i} className="h-16 w-full" />
              ))}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Package, Clock, CheckCircle, Truck, XCircle, Search, Filter } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { toast } from "sonner"

interface Order {
  id: string
  order_number: string
  status: string
  payment_status: string
  total_amount: number
  created_at: string
  items: Array<{
    id: string
    product_name: string
    product_image: string | null
    quantity: number
    unit_price: number
  }>
}

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [statusFilter, setStatusFilter] = useState("all")

useEffect(() => {
    fetchOrders()
  }, [statusFilter])

const fetchOrders = async () => {
    setLoading(true)
    try {
      let url = "/api/orders?role=customer"
      if (statusFilter !== "all") {
        url += `&status=${statusFilter}`
      }
      const res = await fetch(url)
      const data = await res.json()
      setOrders(data.orders || [])
    } catch {
      toast.error("Failed to load orders")
    } finally {
      setLoading(false)
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <Clock className="h-4 w-4" />
      case "confirmed":
        return <CheckCircle className="h-4 w-4" />
      case "processing":
        return <Package className="h-4 w-4" />
      case "shipped":
        return <Truck className="h-4 w-4" />
      case "delivered":
        return <CheckCircle className="h-4 w-4" />
      case "cancelled":
        return <XCircle className="h-4 w-4" />
      default:
        return <Clock className="h-4 w-4" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-500/10 text-yellow-600 border-yellow-500/20"
      case "confirmed":
        return "bg-blue-500/10 text-blue-600 border-blue-500/20"
      case "processing":
        return "bg-purple-500/10 text-purple-600 border-purple-500/20"
      case "shipped":
        return "bg-orange-500/10 text-orange-600 border-orange-500/20"
      case "delivered":
        return "bg-green-500/10 text-green-600 border-green-500/20"
      case "cancelled":
        return "bg-red-500/10 text-red-600 border-red-500/20"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

<main className="container mx-auto px-4 py-8">
        {/* Filters */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input placeholder="Search orders..." className="pl-10" />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[180px]">
              <Filter className="h-4 w-4 mr-2" />
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Orders</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="confirmed">Confirmed</SelectItem>
              <SelectItem value="processing">Processing</SelectItem>
              <SelectItem value="shipped">Shipped</SelectItem>
              <SelectItem value="delivered">Delivered</SelectItem>
              <SelectItem value="cancelled">Cancelled</SelectItem>
            </SelectContent>
          </Select>
        </div>

{/* Orders List */}
        {loading ? (
          <div className="space-y-4">
            {[...Array(3)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <CardContent className="p-6">
                  <div className="h-24 bg-muted rounded" />
                </CardContent>
              </Card>
            ))}
          </div>
        ) : orders.length === 0 ? (
          <Card>
            <CardContent className="flex flex-col items-center justify-center py-12">
              <Package className="h-12 w-12 text-muted-foreground mb-4" />
              <h3 className="text-lg font-semibold mb-2">No orders yet</h3>
              <p className="text-muted-foreground mb-4">Start shopping to see your orders here</p>
              <Link href="/products">
                <Button>Browse Products</Button>
              </Link>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-4">
            {orders.map((order) => (
              <Card key={order.id}>
                <CardHeader className="pb-4">
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                      <CardTitle className="text-lg">{order.order_number}</CardTitle>
                      <CardDescription>
                        Placed on{" "}
                        {new Date(order.created_at).toLocaleDateString("en-ZA", {
                          year: "numeric",
                          month: "long",
                          day: "numeric",
                        })}
                      </CardDescription>
                    </div>
                    <div className="flex items-center gap-3">
                      <Badge variant="outline" className={getStatusColor(order.status)}>
                        {getStatusIcon(order.status)}
                        <span className="ml-1 capitalize">{order.status}</span>
                      </Badge>
                      <Badge variant={order.payment_status === "paid" ? "default" : "secondary"}>
                        {order.payment_status === "paid" ? "Paid" : "Pending Payment"}
                      </Badge>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {order.items?.slice(0, 3).map((item) => (
                      <div key={item.id} className="flex items-center gap-4">
                        <div className="w-16 h-16 rounded bg-muted flex items-center justify-center">
                          <Package className="h-6 w-6 text-muted-foreground" />
                        </div>
                        <div className="flex-1">
                          <p className="font-medium">{item.product_name}</p>
                          <p className="text-sm text-muted-foreground">
                            Qty: {item.quantity} × R{item.unit_price.toFixed(2)}
                          </p>
                        </div>
                      </div>
                    ))}
                    {order.items && order.items.length > 3 && (
                      <p className="text-sm text-muted-foreground">+{order.items.length - 3} more item(s)</p>
                    )}
                  </div>
                  <Separator className="my-4" />
                  <div className="flex items-center justify-between">
                    <span className="font-semibold">Total: R{order.total_amount.toFixed(2)}</span>
                    <div className="flex gap-2">
                      <Link href={`/orders/${order.id}`}>
                        <Button variant="outline" size="sm">
                          View Details
                        </Button>
                      </Link>
                      {order.status === "shipped" && (
                        <Link href={`/delivery?order=${order.order_number}`}>
                          <Button size="sm">Track Order</Button>
                        </Link>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/loading.tsx" isEdit="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 border-b bg-background">
        <div className="container mx-auto px-4 py-4">
          <Skeleton className="h-8 w-48" />
        </div>
      </header>
      <main className="container mx-auto px-4 py-8">
        <div className="space-y-4">
          {[...Array(3)].map((_, i) => (
            <Card key={i}>
              <CardHeader>
                <Skeleton className="h-6 w-48" />
              </CardHeader>
              <CardContent>
                <Skeleton className="h-24 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

function generateRequestId(): string {
  return crypto.randomUUID()
}

export async function middleware(request: NextRequest) {
  // Generate request ID if not present
  const requestId = request.headers.get("x-request-id") ?? generateRequestId()

// Update Supabase session
  const response = await updateSession(request)

// Add request ID to response headers
  response.headers.set("x-request-id", requestId)

response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin")
  response.headers.set("X-Content-Type-Options", "nosniff")
  response.headers.set("X-Frame-Options", "DENY")
  response.headers.set("Permissions-Policy", "camera=(), microphone=(), geolocation=()")

const isDev = process.env.NODE_ENV !== "production"
  const csp = [
    "default-src 'self';",
    `script-src 'self' ${isDev ? "'unsafe-eval' 'unsafe-inline' blob:" : ""};`,
    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;",
    "img-src 'self' data: blob: https:;",
    `connect-src 'self' https: ${isDev ? "ws:" : ""};`,
    "font-src 'self' https://fonts.gstatic.com data:;",
    "frame-ancestors 'none';",
    "base-uri 'self';",
  ].join(" ")

response.headers.set("Content-Security-Policy", csp)

return response
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
}
[V0_FILE]typescriptreact:file="components/wishlist-provider.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

interface WishlistItem {
  id: string
  name: string
  price: number
  image: string
  category: string
}

interface WishlistContextType {
  items: WishlistItem[]
  addItem: (item: WishlistItem) => void
  removeItem: (id: string) => void
  isInWishlist: (id: string) => boolean
  clearWishlist: () => void
}

const WishlistContext = createContext<WishlistContextType | undefined>(undefined)

export function WishlistProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<WishlistItem[]>([])
  const [isLoaded, setIsLoaded] = useState(false)

useEffect(() => {
    const saved = localStorage.getItem("buddies-wishlist")
    if (saved) {
      setItems(JSON.parse(saved))
    }
    setIsLoaded(true)
  }, [])

useEffect(() => {
    if (isLoaded) {
      localStorage.setItem("buddies-wishlist", JSON.stringify(items))
    }
  }, [items, isLoaded])

const addItem = (item: WishlistItem) => {
    setItems((prev) => {
      if (prev.some((i) => i.id === item.id)) return prev
      return [...prev, item]
    })
  }

const removeItem = (id: string) => {
    setItems((prev) => prev.filter((item) => item.id !== id))
  }

const isInWishlist = (id: string) => items.some((item) => item.id === id)

const clearWishlist = () => setItems([])

return (
    <WishlistContext.Provider value={{ items, addItem, removeItem, isInWishlist, clearWishlist }}>
      {children}
    </WishlistContext.Provider>
  )
}

export function useWishlist() {
  const context = useContext(WishlistContext)
  if (!context) throw new Error("useWishlist must be used within WishlistProvider")
  return context
}
[V0_FILE]typescriptreact:file="components/wishlist-button.tsx" isMerged="true"
"use client"

import { Heart } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useWishlist } from "@/components/wishlist-provider"
import { useCart } from "@/components/cart-provider"
import Link from "next/link"
import { toast } from "sonner"

export function WishlistButton() {
  const { items, removeItem } = useWishlist()
  const { addItem: addToCart } = useCart()

const handleMoveToCart = (item: (typeof items)[0]) => {
    addToCart({
      id: item.id,
      name: item.name,
      price: item.price,
      quantity: 1,
      image: item.image,
    })
    removeItem(item.id)
    toast.success("Moved to cart")
  }

return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="relative">
          <Heart className="h-5 w-5" />
          {items.length > 0 && (
            <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-secondary text-secondary-foreground text-xs flex items-center justify-center font-medium">
              {items.length}
            </span>
          )}
          <span className="sr-only">Wishlist</span>
        </Button>
      </SheetTrigger>
      <SheetContent className="w-full sm:max-w-md">
        <SheetHeader>
          <SheetTitle>Wishlist ({items.length})</SheetTitle>
        </SheetHeader>
        <div className="mt-6 space-y-4">
          {items.length === 0 ? (
            <div className="text-center py-8">
              <Heart className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <p className="text-muted-foreground mb-4">Your wishlist is empty</p>
              <Link href="/products">
                <Button>Browse Products</Button>
              </Link>
            </div>
          ) : (
            items.map((item) => (
              <div key={item.id} className="flex gap-4 p-3 bg-muted/50 rounded-lg">
                <img
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  className="w-16 h-16 object-cover rounded-md"
                />
                <div className="flex-1 min-w-0">
                  <h4 className="font-medium text-foreground truncate">{item.name}</h4>
                  <p className="text-primary font-bold">R{item.price}</p>
                  <div className="flex gap-2 mt-2">
                    <Button size="sm" variant="default" onClick={() => handleMoveToCart(item)}>
                      Add to Cart
                    </Button>
                    <Button size="sm" variant="ghost" onClick={() => removeItem(item.id)}>
                      Remove
                    </Button>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Heart, ShoppingCart, Trash2, ArrowLeft, Globe } from "lucide-react"
import { useWishlist } from "@/components/wishlist-provider"
import { useCart } from "@/components/cart-provider"
import { toast } from "sonner"

export default function WishlistPage() {
  const { items, removeItem, clearWishlist } = useWishlist()
  const { addItem: addToCart } = useCart()

const handleAddToCart = (item: (typeof items)[0]) => {
    addToCart({
      id: item.id,
      name: item.name,
      price: item.price,
      quantity: 1,
      image: item.image,
    })
    toast.success("Added to cart")
  }

const handleMoveAllToCart = () => {
    items.forEach((item) => {
      addToCart({
        id: item.id,
        name: item.name,
        price: item.price,
        quantity: 1,
        image: item.image,
      })
    })
    clearWishlist()
    toast.success("All items moved to cart")
  }

<div className="container mx-auto px-4 py-8">
        <div className="flex items-center gap-4 mb-8">
          <Link href="/">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-5 w-5" />
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-foreground">My Wishlist</h1>
            <p className="text-muted-foreground">{items.length} items saved</p>
          </div>
        </div>

{items.length === 0 ? (
          <Card className="p-12 text-center">
            <Heart className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
            <h2 className="text-xl font-semibold text-foreground mb-2">Your wishlist is empty</h2>
            <p className="text-muted-foreground mb-6">Save items you love to buy them later</p>
            <Link href="/products">
              <Button size="lg">Start Shopping</Button>
            </Link>
          </Card>
        ) : (
          <>
            <div className="flex justify-end gap-4 mb-6">
              <Button variant="outline" onClick={clearWishlist}>
                <Trash2 className="h-4 w-4 mr-2" />
                Clear All
              </Button>
              <Button onClick={handleMoveAllToCart}>
                <ShoppingCart className="h-4 w-4 mr-2" />
                Add All to Cart
              </Button>
            </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {items.map((item) => (
                <Card key={item.id} className="overflow-hidden group">
                  <div className="aspect-square relative bg-muted">
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.name}
                      className="w-full h-full object-cover"
                    />
                    <Button
                      variant="ghost"
                      size="icon"
                      className="absolute top-2 right-2 bg-card/80 hover:bg-destructive hover:text-destructive-foreground"
                      onClick={() => removeItem(item.id)}
                    >
                      <Heart className="h-5 w-5 fill-current" />
                    </Button>
                  </div>
                  <CardContent className="p-4">
                    <h3 className="font-semibold text-foreground mb-1 line-clamp-1">{item.name}</h3>
                    <p className="text-sm text-muted-foreground mb-2">{item.category}</p>
                    <div className="flex items-center justify-between">
                      <span className="text-xl font-bold text-primary">R{item.price}</span>
                      <Button size="sm" onClick={() => handleAddToCart(item)}>
                        <ShoppingCart className="h-4 w-4" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Globe,
  Users,
  Store,
  Package,
  ShoppingCart,
  DollarSign,
  TrendingUp,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Search,
  MoreVertical,
  Eye,
  Ban,
  Mail,
} from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

// Mock admin data
const stats = {
  totalRevenue: 2456890,
  totalOrders: 12456,
  totalVendors: 5234,
  totalCustomers: 89432,
  pendingApprovals: 23,
  lowStockAlerts: 45,
}

const recentOrders = [
  { id: "ORD-001", customer: "John Doe", total: 1299, status: "pending", date: "2024-01-15" },
  { id: "ORD-002", customer: "Jane Smith", total: 2459, status: "processing", date: "2024-01-15" },
  { id: "ORD-003", customer: "Mike Johnson", total: 899, status: "shipped", date: "2024-01-14" },
  { id: "ORD-004", customer: "Sarah Williams", total: 3299, status: "delivered", date: "2024-01-14" },
  { id: "ORD-005", customer: "Chris Brown", total: 1599, status: "cancelled", date: "2024-01-13" },
]

const pendingVendors = [
  { id: "V-001", name: "Green Gardens SA", email: "info@greengardens.co.za", category: "Produce", date: "2024-01-15" },
  { id: "V-002", name: "420 Essentials", email: "hello@420ess.com", category: "420", date: "2024-01-14" },
  {
    id: "V-003",
    name: "Home Basics Store",
    email: "sales@homebasics.co.za",
    category: "Household",
    date: "2024-01-14",
  },
]

const lowStockProducts = [
  { id: "P-001", name: "Organic CBD Oil 500mg", vendor: "Green Wellness", stock: 5, threshold: 20 },
  { id: "P-002", name: "Fresh Organic Spinach", vendor: "Farm Fresh SA", stock: 12, threshold: 50 },
  { id: "P-003", name: "Multi-Surface Cleaner", vendor: "Clean Co", stock: 8, threshold: 30 },
]

export default function AdminDashboard() {
  const [searchQuery, setSearchQuery] = useState("")

const getStatusBadge = (status: string) => {
    const variants: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; label: string }> = {
      pending: { variant: "secondary", label: "Pending" },
      processing: { variant: "default", label: "Processing" },
      shipped: { variant: "outline", label: "Shipped" },
      delivered: { variant: "default", label: "Delivered" },
      cancelled: { variant: "destructive", label: "Cancelled" },
    }
    const { variant, label } = variants[status] || { variant: "secondary", label: status }
    return <Badge variant={variant}>{label}</Badge>
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <Globe className="h-6 w-6 text-primary-foreground" />
              </div>
              <div>
                <span className="text-xl font-bold text-foreground">Buddies</span>
                <span className="text-xl font-light text-primary"> Admin</span>
              </div>
            </Link>
            <div className="flex items-center gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search orders, vendors, products..."
                  className="pl-10 w-64"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Link href="/">
                <Button variant="outline">View Store</Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Admin Dashboard</h1>
          <p className="text-muted-foreground">Manage your marketplace</p>
        </div>

{/* Stats Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Total Revenue</p>
                  <p className="text-2xl font-bold text-foreground">R{stats.totalRevenue.toLocaleString()}</p>
                </div>
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <DollarSign className="h-6 w-6 text-primary" />
                </div>
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-green-600">
                <TrendingUp className="h-4 w-4" />
                <span>+12.5% from last month</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Total Orders</p>
                  <p className="text-2xl font-bold text-foreground">{stats.totalOrders.toLocaleString()}</p>
                </div>
                <div className="h-12 w-12 rounded-full bg-secondary/10 flex items-center justify-center">
                  <ShoppingCart className="h-6 w-6 text-secondary" />
                </div>
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-green-600">
                <TrendingUp className="h-4 w-4" />
                <span>+8.2% from last month</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Active Vendors</p>
                  <p className="text-2xl font-bold text-foreground">{stats.totalVendors.toLocaleString()}</p>
                </div>
                <div className="h-12 w-12 rounded-full bg-accent/10 flex items-center justify-center">
                  <Store className="h-6 w-6 text-accent-foreground" />
                </div>
              </div>
              <Badge variant="secondary" className="mt-2">
                {stats.pendingApprovals} pending approval
              </Badge>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">Customers</p>
                  <p className="text-2xl font-bold text-foreground">{stats.totalCustomers.toLocaleString()}</p>
                </div>
                <div className="h-12 w-12 rounded-full bg-chart-1/10 flex items-center justify-center">
                  <Users className="h-6 w-6 text-chart-1" />
                </div>
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-green-600">
                <TrendingUp className="h-4 w-4" />
                <span>+15.3% from last month</span>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Alerts */}
        <div className="grid lg:grid-cols-2 gap-6 mb-8">
          <Card className="border-orange-500/50">
            <CardHeader className="pb-3">
              <div className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-orange-500" />
                <CardTitle className="text-lg">Pending Vendor Approvals</CardTitle>
              </div>
              <CardDescription>{pendingVendors.length} vendors waiting for approval</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {pendingVendors.map((vendor) => (
                  <div key={vendor.id} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                    <div>
                      <p className="font-medium text-foreground">{vendor.name}</p>
                      <p className="text-sm text-muted-foreground">{vendor.email}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="outline">{vendor.category}</Badge>
                      <Button size="sm" variant="default">
                        <CheckCircle className="h-4 w-4 mr-1" />
                        Approve
                      </Button>
                      <Button size="sm" variant="destructive">
                        <XCircle className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card className="border-red-500/50">
            <CardHeader className="pb-3">
              <div className="flex items-center gap-2">
                <Package className="h-5 w-5 text-red-500" />
                <CardTitle className="text-lg">Low Stock Alerts</CardTitle>
              </div>
              <CardDescription>{lowStockProducts.length} products need restocking</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {lowStockProducts.map((product) => (
                  <div key={product.id} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                    <div>
                      <p className="font-medium text-foreground">{product.name}</p>
                      <p className="text-sm text-muted-foreground">by {product.vendor}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="destructive">
                        {product.stock} / {product.threshold}
                      </Badge>
                      <Button size="sm" variant="outline">
                        <Mail className="h-4 w-4 mr-1" />
                        Notify
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Tabs for detailed views */}
        <Tabs defaultValue="orders" className="space-y-6">
          <TabsList>
            <TabsTrigger value="orders">Recent Orders</TabsTrigger>
            <TabsTrigger value="vendors">Vendors</TabsTrigger>
            <TabsTrigger value="products">Products</TabsTrigger>
            <TabsTrigger value="customers">Customers</TabsTrigger>
          </TabsList>

<TabsContent value="orders">
            <Card>
              <CardHeader>
                <CardTitle>Recent Orders</CardTitle>
                <CardDescription>Latest orders across all vendors</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-border">
                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Order ID</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Customer</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Total</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Status</th>
                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Date</th>
                        <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {recentOrders.map((order) => (
                        <tr key={order.id} className="border-b border-border hover:bg-muted/50">
                          <td className="py-3 px-4 font-medium text-foreground">{order.id}</td>
                          <td className="py-3 px-4 text-foreground">{order.customer}</td>
                          <td className="py-3 px-4 text-foreground">R{order.total}</td>
                          <td className="py-3 px-4">{getStatusBadge(order.status)}</td>
                          <td className="py-3 px-4 text-muted-foreground">{order.date}</td>
                          <td className="py-3 px-4 text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon">
                                  <MoreVertical className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem>
                                  <Eye className="h-4 w-4 mr-2" />
                                  View Details
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <Mail className="h-4 w-4 mr-2" />
                                  Contact Customer
                                </DropdownMenuItem>
                                <DropdownMenuItem className="text-destructive">
                                  <Ban className="h-4 w-4 mr-2" />
                                  Cancel Order
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="vendors">
            <Card>
              <CardHeader>
                <CardTitle>Vendor Management</CardTitle>
                <CardDescription>Manage all marketplace vendors</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-center py-8">Vendor management interface coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="products">
            <Card>
              <CardHeader>
                <CardTitle>Product Catalog</CardTitle>
                <CardDescription>Browse and manage all products</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-center py-8">Product catalog interface coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="customers">
            <Card>
              <CardHeader>
                <CardTitle>Customer Management</CardTitle>
                <CardDescription>View and manage customers</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-center py-8">Customer management interface coming soon...</p>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/account/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { User, Package, MapPin, Heart, Settings, LogOut } from "lucide-react"

export default function AccountPage() {
  const [user] = useState({
    name: "John Doe",
    email: "john.doe@example.com",
    phone: "+27 82 123 4567",
    memberSince: "January 2024",
    totalOrders: 12,
    totalSpent: "R8,450",
  })

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/">Back to Shop</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid md:grid-cols-[250px_1fr] gap-8">
          {/* Sidebar */}
          <aside className="space-y-2">
            <Card>
              <CardContent className="p-4">
                <div className="flex flex-col items-center text-center space-y-3">
                  <Avatar className="h-20 w-20">
                    <AvatarImage src="/placeholder.svg?height=80&width=80" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="font-semibold">{user.name}</h3>
                    <p className="text-sm text-muted-foreground">{user.email}</p>
                  </div>
                  <Badge variant="secondary">Member since {user.memberSince}</Badge>
                </div>
              </CardContent>
            </Card>

<nav className="space-y-1">
              <Button variant="ghost" className="w-full justify-start" asChild>
                <Link href="/account">
                  <User className="mr-2 h-4 w-4" />
                  Profile
                </Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild>
                <Link href="/orders">
                  <Package className="mr-2 h-4 w-4" />
                  My Orders
                </Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild>
                <Link href="/account/addresses">
                  <MapPin className="mr-2 h-4 w-4" />
                  Addresses
                </Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild>
                <Link href="/wishlist">
                  <Heart className="mr-2 h-4 w-4" />
                  Wishlist
                </Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild>
                <Link href="/account/settings">
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start text-destructive">
                <LogOut className="mr-2 h-4 w-4" />
                Logout
              </Button>
            </nav>
          </aside>

{/* Main Content */}
          <div className="space-y-6">
            <div>
              <h1 className="text-3xl font-bold">My Account</h1>
              <p className="text-muted-foreground">Manage your account information and preferences</p>
            </div>

<Tabs defaultValue="profile" className="space-y-4">
              <TabsList>
                <TabsTrigger value="profile">Profile</TabsTrigger>
                <TabsTrigger value="security">Security</TabsTrigger>
                <TabsTrigger value="notifications">Notifications</TabsTrigger>
              </TabsList>

<TabsContent value="profile" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Personal Information</CardTitle>
                    <CardDescription>Update your personal details</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="firstName">First Name</Label>
                        <Input id="firstName" defaultValue="John" />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName">Last Name</Label>
                        <Input id="lastName" defaultValue="Doe" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input id="email" type="email" defaultValue="john.doe@example.com" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input id="phone" defaultValue="+27 82 123 4567" />
                    </div>
                    <Button>Save Changes</Button>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Account Statistics</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="text-center p-4 bg-muted rounded-lg">
                        <div className="text-3xl font-bold text-primary">{user.totalOrders}</div>
                        <div className="text-sm text-muted-foreground">Total Orders</div>
                      </div>
                      <div className="text-center p-4 bg-muted rounded-lg">
                        <div className="text-3xl font-bold text-primary">{user.totalSpent}</div>
                        <div className="text-sm text-muted-foreground">Total Spent</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="security" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Change Password</CardTitle>
                    <CardDescription>Update your password to keep your account secure</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="currentPassword">Current Password</Label>
                      <Input id="currentPassword" type="password" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="newPassword">New Password</Label>
                      <Input id="newPassword" type="password" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="confirmPassword">Confirm New Password</Label>
                      <Input id="confirmPassword" type="password" />
                    </div>
                    <Button>Update Password</Button>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Two-Factor Authentication</CardTitle>
                    <CardDescription>Add an extra layer of security to your account</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Button variant="outline">Enable 2FA</Button>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="notifications" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Email Notifications</CardTitle>
                    <CardDescription>Manage your email preferences</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Order Updates</p>
                        <p className="text-sm text-muted-foreground">Receive updates about your orders</p>
                      </div>
                      <input type="checkbox" defaultChecked className="toggle" />
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Promotional Emails</p>
                        <p className="text-sm text-muted-foreground">Receive special offers and promotions</p>
                      </div>
                      <input type="checkbox" defaultChecked className="toggle" />
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Product Recommendations</p>
                        <p className="text-sm text-muted-foreground">Get personalized product suggestions</p>
                      </div>
                      <input type="checkbox" className="toggle" />
                    </div>
                    <Button>Save Preferences</Button>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/addresses/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { MapPin, Plus, Edit, Trash2 } from "lucide-react"
import { Badge } from "@/components/ui/badge"

export default function AddressesPage() {
  const [addresses] = useState([
    {
      id: 1,
      label: "Home",
      name: "John Doe",
      street: "123 Main Street",
      city: "Johannesburg",
      province: "Gauteng",
      postalCode: "2000",
      phone: "+27 82 123 4567",
      isDefault: true,
    },
    {
      id: 2,
      label: "Work",
      name: "John Doe",
      street: "456 Office Park",
      city: "Sandton",
      province: "Gauteng",
      postalCode: "2196",
      phone: "+27 82 123 4567",
      isDefault: false,
    },
  ])

return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/account">Back to Account</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">My Addresses</h1>
              <p className="text-muted-foreground">Manage your delivery addresses</p>
            </div>
            <Dialog>
              <DialogTrigger asChild>
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Address
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add New Address</DialogTitle>
                  <DialogDescription>Enter your delivery address details</DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="label">Address Label</Label>
                    <Input id="label" placeholder="Home, Work, etc." />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="name">Full Name</Label>
                    <Input id="name" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="street">Street Address</Label>
                    <Input id="street" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="city">City</Label>
                      <Input id="city" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="province">Province</Label>
                      <Input id="province" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="postalCode">Postal Code</Label>
                      <Input id="postalCode" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input id="phone" />
                    </div>
                  </div>
                  <Button className="w-full">Save Address</Button>
                </div>
              </DialogContent>
            </Dialog>
          </div>

<div className="grid md:grid-cols-2 gap-4">
            {addresses.map((address) => (
              <Card key={address.id}>
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-2">
                      <MapPin className="h-5 w-5 text-primary" />
                      <CardTitle>{address.label}</CardTitle>
                    </div>
                    {address.isDefault && <Badge>Default</Badge>}
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-sm space-y-1">
                    <p className="font-medium">{address.name}</p>
                    <p className="text-muted-foreground">{address.street}</p>
                    <p className="text-muted-foreground">
                      {address.city}, {address.province} {address.postalCode}
                    </p>
                    <p className="text-muted-foreground">{address.phone}</p>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                      <Edit className="mr-2 h-4 w-4" />
                      Edit
                    </Button>
                    {!address.isDefault && (
                      <Button variant="outline" size="sm">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                  {!address.isDefault && (
                    <Button variant="ghost" size="sm" className="w-full">
                      Set as Default
                    </Button>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/account/settings/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"

export default function SettingsPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/account">Back to Account</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          <div>
            <h1 className="text-3xl font-bold">Settings</h1>
            <p className="text-muted-foreground">Manage your account preferences</p>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Preferences</CardTitle>
              <CardDescription>Customize your shopping experience</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="language">Language</Label>
                <Select defaultValue="en">
                  <SelectTrigger id="language">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="en">English</SelectItem>
                    <SelectItem value="af">Afrikaans</SelectItem>
                    <SelectItem value="zu">Zulu</SelectItem>
                    <SelectItem value="xh">Xhosa</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="currency">Currency</Label>
                <Select defaultValue="zar">
                  <SelectTrigger id="currency">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="zar">ZAR (R)</SelectItem>
                    <SelectItem value="usd">USD ($)</SelectItem>
                    <SelectItem value="eur">EUR (€)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Email Notifications</Label>
                  <p className="text-sm text-muted-foreground">Receive order updates via email</p>
                </div>
                <Switch defaultChecked />
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>SMS Notifications</Label>
                  <p className="text-sm text-muted-foreground">Receive delivery alerts via SMS</p>
                </div>
                <Switch defaultChecked />
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Marketing Communications</Label>
                  <p className="text-sm text-muted-foreground">Receive promotional offers and deals</p>
                </div>
                <Switch />
              </div>

<div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Dark Mode</Label>
                  <p className="text-sm text-muted-foreground">Toggle dark theme</p>
                </div>
                <Switch />
              </div>

<Button>Save Settings</Button>
            </CardContent>
          </Card>

<Card className="border-destructive">
            <CardHeader>
              <CardTitle className="text-destructive">Danger Zone</CardTitle>
              <CardDescription>Permanent account actions</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Delete Account</p>
                  <p className="text-sm text-muted-foreground">Permanently delete your account and all data</p>
                </div>
                <Button variant="destructive" size="sm">
                  Delete Account
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Search, SlidersHorizontal, Star } from "lucide-react"
import { CartButton } from "@/components/cart-button"
import { WishlistButton } from "@/components/wishlist-button"

export default function SearchPage() {
  const searchParams = useSearchParams()
  const query = searchParams.get("q") || ""
  const [searchQuery, setSearchQuery] = useState(query)

const products = [
    {
      id: 1,
      name: "CBD Oil 1000mg",
      price: 899,
      image: "/cbd-oil-bottle.jpg",
      rating: 4.8,
      reviews: 124,
      category: "420 Products",
      inStock: true,
    },
    {
      id: 2,
      name: "Organic Red Apples",
      price: 45,
      image: "/fresh-red-apples.png",
      rating: 4.6,
      reviews: 89,
      category: "Produce",
      inStock: true,
    },
    // Add more products...
  ]

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b sticky top-0 bg-background z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl hidden md:inline">Buddies World Wide</span>
            </Link>

<div className="flex-1 max-w-2xl">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search for products..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-[250px_1fr] gap-8">
          {/* Filters Sidebar */}
          <aside className="space-y-6">
            <Card>
              <CardContent className="p-4 space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold">Filters</h3>
                  <Button variant="ghost" size="sm">
                    Clear All
                  </Button>
                </div>

<div className="space-y-4">
                  <div>
                    <h4 className="font-medium mb-2">Category</h4>
                    <div className="space-y-2">
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span className="text-sm">420 Products</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span className="text-sm">Household</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span className="text-sm">Produce</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="checkbox" className="rounded" />
                        <span className="text-sm">Snacks</span>
                      </label>
                    </div>
                  </div>

<div>
                    <h4 className="font-medium mb-2">Price Range</h4>
                    <div className="space-y-2">
                      <label className="flex items-center gap-2">
                        <input type="radio" name="price" className="rounded-full" />
                        <span className="text-sm">Under R50</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="radio" name="price" className="rounded-full" />
                        <span className="text-sm">R50 - R200</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="radio" name="price" className="rounded-full" />
                        <span className="text-sm">R200 - R500</span>
                      </label>
                      <label className="flex items-center gap-2">
                        <input type="radio" name="price" className="rounded-full" />
                        <span className="text-sm">Over R500</span>
                      </label>
                    </div>
                  </div>

<div>
                    <h4 className="font-medium mb-2">Rating</h4>
                    <div className="space-y-2">
                      {[4, 3, 2, 1].map((rating) => (
                        <label key={rating} className="flex items-center gap-2">
                          <input type="checkbox" className="rounded" />
                          <div className="flex items-center gap-1">
                            {Array.from({ length: rating }).map((_, i) => (
                              <Star key={i} className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                            ))}
                            <span className="text-sm ml-1">& up</span>
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </aside>

{/* Results */}
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold">Search Results</h1>
                <p className="text-muted-foreground">{query ? `Showing results for "${query}"` : "All products"}</p>
              </div>
              <Button variant="outline">
                <SlidersHorizontal className="mr-2 h-4 w-4" />
                Sort By
              </Button>
            </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {products.map((product) => (
                <Card key={product.id} className="group cursor-pointer hover:shadow-lg transition-shadow">
                  <Link href={`/product/${product.id}`}>
                    <CardContent className="p-4 space-y-3">
                      <div className="aspect-square rounded-lg overflow-hidden bg-muted">
                        <img
                          src={product.image || "/placeholder.svg"}
                          alt={product.name}
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform"
                        />
                      </div>
                      <div className="space-y-2">
                        <Badge variant="secondary" className="text-xs">
                          {product.category}
                        </Badge>
                        <h3 className="font-semibold line-clamp-2">{product.name}</h3>
                        <div className="flex items-center gap-1">
                          <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                          <span className="text-sm font-medium">{product.rating}</span>
                          <span className="text-xs text-muted-foreground">({product.reviews})</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-xl font-bold text-primary">R{product.price}</span>
                          {product.inStock ? (
                            <Badge variant="outline" className="text-green-600">
                              In Stock
                            </Badge>
                          ) : (
                            <Badge variant="outline" className="text-red-600">
                              Out of Stock
                            </Badge>
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Link>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Globe, Users, Shield, Zap } from "lucide-react"

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/">Back to Shop</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-16">
        {/* Hero Section */}
        <div className="max-w-4xl mx-auto text-center space-y-6 mb-16">
          <h1 className="text-4xl md:text-5xl font-bold">About Buddies World Wide</h1>
          <p className="text-xl text-muted-foreground">
            Connecting vendors and customers worldwide through a trusted multi-vendor marketplace
          </p>
        </div>

{/* Mission Section */}
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 mb-16">
          <div className="space-y-4">
            <h2 className="text-3xl font-bold">Our Mission</h2>
            <p className="text-lg text-muted-foreground">
              At Buddies World Wide, we're building more than just a marketplace. We're creating a global community
              where vendors can showcase their products and customers can discover unique items from around the world.
            </p>
            <p className="text-lg text-muted-foreground">
              From specialty 420 products to everyday household essentials, fresh produce to gourmet snacks, we bring
              together diverse vendors offering quality products at competitive prices.
            </p>
          </div>
          <div className="space-y-4">
            <h2 className="text-3xl font-bold">Our Vision</h2>
            <p className="text-lg text-muted-foreground">
              We envision a world where geographical boundaries don't limit commerce. Our platform empowers small and
              medium-sized businesses to reach customers globally while providing shoppers with access to products they
              might never have discovered otherwise.
            </p>
            <p className="text-lg text-muted-foreground">
              With secure payments, reliable delivery, and exceptional customer service, we're making international
              commerce accessible to everyone.
            </p>
          </div>
        </div>

{/* Features Grid */}
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          <Card>
            <CardContent className="p-6 text-center space-y-3">
              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                <Globe className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold">Global Reach</h3>
              <p className="text-sm text-muted-foreground">Connect with vendors and customers from around the world</p>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6 text-center space-y-3">
              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                <Users className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold">Community Driven</h3>
              <p className="text-sm text-muted-foreground">Built by and for a community of passionate entrepreneurs</p>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6 text-center space-y-3">
              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                <Shield className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold">Secure & Safe</h3>
              <p className="text-sm text-muted-foreground">
                Your data and transactions are protected with industry-leading security
              </p>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6 text-center space-y-3">
              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                <Zap className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold">Fast Delivery</h3>
              <p className="text-sm text-muted-foreground">
                Quick and reliable shipping to get your products when you need them
              </p>
            </CardContent>
          </Card>
        </div>

{/* Stats Section */}
        <div className="max-w-4xl mx-auto bg-primary text-primary-foreground rounded-2xl p-12 mb-16">
          <div className="grid md:grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-4xl font-bold mb-2">10,000+</div>
              <div className="text-lg opacity-90">Active Vendors</div>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">500,000+</div>
              <div className="text-lg opacity-90">Happy Customers</div>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">2M+</div>
              <div className="text-lg opacity-90">Products Listed</div>
            </div>
          </div>
        </div>

{/* CTA Section */}
        <div className="max-w-4xl mx-auto text-center space-y-6">
          <h2 className="text-3xl font-bold">Join Our Community</h2>
          <p className="text-lg text-muted-foreground">
            Whether you're a vendor looking to expand your reach or a customer seeking unique products, Buddies World
            Wide is your destination.
          </p>
          <div className="flex gap-4 justify-center">
            <Button size="lg" asChild>
              <Link href="/vendor/register">Become a Vendor</Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link href="/register">Shop Now</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("[v0] Contact form submitted:", formData)
    alert("Thank you for contacting us! We'll get back to you soon.")
  }

return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/">Back to Shop</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-4 mb-12">
            <h1 className="text-4xl font-bold">Contact Us</h1>
            <p className="text-xl text-muted-foreground">Have a question? We're here to help!</p>
          </div>

<div className="grid lg:grid-cols-2 gap-8">
            {/* Contact Form */}
            <Card>
              <CardHeader>
                <CardTitle>Send us a message</CardTitle>
                <CardDescription>Fill out the form and we'll get back to you within 24 hours</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Name</Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="subject">Subject</Label>
                    <Input
                      id="subject"
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="message">Message</Label>
                    <Textarea
                      id="message"
                      rows={6}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full">
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>

{/* Contact Information */}
            <div className="space-y-6">
              <Card>
                <CardContent className="p-6 space-y-4">
                  <div className="flex gap-4">
                    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                      <Mail className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Email</h3>
                      <p className="text-sm text-muted-foreground">support@buddiesworldwide.com</p>
                      <p className="text-sm text-muted-foreground">sales@buddiesworldwide.com</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-6 space-y-4">
                  <div className="flex gap-4">
                    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                      <MapPin className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Address</h3>
                      <p className="text-sm text-muted-foreground">
                        123 Commerce Street
                        <br />
                        Sandton, Johannesburg
                        <br />
                        Gauteng, 2196
                        <br />
                        South Africa
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardContent className="p-6 space-y-4">
                  <div className="flex gap-4">
                    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
                      <Clock className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Business Hours</h3>
                      <p className="text-sm text-muted-foreground">
                        Monday - Friday: 8:00 AM - 6:00 PM
                        <br />
                        Saturday: 9:00 AM - 2:00 PM
                        <br />
                        Sunday: Closed
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"

export default function FAQPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <img src="/images/connectsync-logo.png" alt="Buddies World Wide" className="h-8" />
              <span className="font-bold text-xl">Buddies World Wide</span>
            </Link>
            <Button variant="ghost" asChild>
              <Link href="/">Back to Shop</Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-4 mb-12">
            <h1 className="text-4xl font-bold">Frequently Asked Questions</h1>
            <p className="text-xl text-muted-foreground">Find answers to common questions about Buddies World Wide</p>
          </div>

<div className="space-y-8">
            {/* General Questions */}
            <div>
              <h2 className="text-2xl font-bold mb-4">General Questions</h2>
              <Card>
                <CardContent className="p-6">
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-1">
                      <AccordionTrigger>What is Buddies World Wide?</AccordionTrigger>
                      <AccordionContent>
                        Buddies World Wide is a multi-vendor marketplace that connects customers with vendors from
                        around the world. We offer a wide range of products including 420 products, household
                        essentials, fresh produce, and snacks.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-2">
                      <AccordionTrigger>Is it free to shop on Buddies World Wide?</AccordionTrigger>
                      <AccordionContent>
                        Yes! Creating a customer account and shopping on our platform is completely free. You only pay
                        for the products you purchase and applicable shipping fees.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-3">
                      <AccordionTrigger>How do I become a vendor?</AccordionTrigger>
                      <AccordionContent>
                        Visit our vendor registration page and sign up for a subscription plan starting at R549/month.
                        Once approved, you can start listing your products and reaching customers worldwide.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>
            </div>

{/* Orders & Shipping */}
            <div>
              <h2 className="text-2xl font-bold mb-4">Orders & Shipping</h2>
              <Card>
                <CardContent className="p-6">
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-4">
                      <AccordionTrigger>What are the shipping costs?</AccordionTrigger>
                      <AccordionContent>
                        Shipping costs vary based on your location and the shipping method you choose:
                        <ul className="list-disc list-inside mt-2 space-y-1">
                          <li>Standard Delivery: R99</li>
                          <li>Express Delivery: R249</li>
                          <li>Same-Day Delivery: R499 (select areas only)</li>
                        </ul>
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-5">
                      <AccordionTrigger>How long does delivery take?</AccordionTrigger>
                      <AccordionContent>
                        Standard delivery typically takes 3-5 business days, express delivery 1-2 business days, and
                        same-day delivery is available for orders placed before 12 PM in select areas.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-6">
                      <AccordionTrigger>Can I track my order?</AccordionTrigger>
                      <AccordionContent>
                        Yes! Once your order is shipped, you'll receive a tracking number via email and SMS. You can
                        also track your order status in real-time from your account dashboard.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>
            </div>

{/* Payments */}
            <div>
              <h2 className="text-2xl font-bold mb-4">Payments</h2>
              <Card>
                <CardContent className="p-6">
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-7">
                      <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
                      <AccordionContent>
                        We accept a wide variety of payment methods including:
                        <ul className="list-disc list-inside mt-2 space-y-1">
                          <li>Credit/Debit Cards (Visa, Mastercard, American Express)</li>
                          <li>PayPal</li>
                          <li>Cryptocurrency (Bitcoin, Ethereum, USDT)</li>
                          <li>EFT/Bank Transfer</li>
                        </ul>
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-8">
                      <AccordionTrigger>Is my payment information secure?</AccordionTrigger>
                      <AccordionContent>
                        We use industry-standard encryption and security measures to protect your payment information.
                        We never store your full credit card details on our servers.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-9">
                      <AccordionTrigger>Do you charge VAT?</AccordionTrigger>
                      <AccordionContent>
                        Yes, a 15% VAT is applied to all orders as required by South African law. The VAT amount is
                        clearly displayed at checkout before you complete your purchase.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>
            </div>

{/* Returns & Refunds */}
            <div>
              <h2 className="text-2xl font-bold mb-4">Returns & Refunds</h2>
              <Card>
                <CardContent className="p-6">
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-10">
                      <AccordionTrigger>What is your return policy?</AccordionTrigger>
                      <AccordionContent>
                        We offer a 30-day return policy for most items. Products must be in their original condition and
                        packaging. Contact customer support to initiate a return.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-11">
                      <AccordionTrigger>How long do refunds take?</AccordionTrigger>
                      <AccordionContent>
                        Once we receive your returned item, refunds are typically processed within 5-7 business days.
                        The funds will be returned to your original payment method.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-12">
                      <AccordionTrigger>Can I exchange an item?</AccordionTrigger>
                      <AccordionContent>
                        Yes! If you'd like to exchange an item for a different size or color, please contact our
                        customer support team and we'll arrange the exchange for you.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>
            </div>
          </div>

<div className="mt-12 text-center">
            <p className="text-muted-foreground mb-4">Still have questions?</p>
            <Button asChild>
              <Link href="/contact">Contact Support</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/products/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, Edit, Trash2, Eye } from "lucide-react"

export default function VendorProductsPage() {
  const [products] = useState([
    {
      id: 1,
      name: "CBD Oil 1000mg",
      category: "420 Products",
      price: 899,
      stock: 45,
      status: "active",
      sales: 124,
    },
    {
      id: 2,
      name: "Organic Hemp Gummies",
      category: "420 Products",
      price: 299,
      stock: 89,
      status: "active",
      sales: 67,
    },
    {
      id: 3,
      name: "Glass Water Pipe",
      category: "420 Products",
      price: 549,
      stock: 12,
      status: "active",
      sales: 34,
    },
  ])

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">My Products</h1>
          <p className="text-muted-foreground">Manage your product listings</p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Product
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Add New Product</DialogTitle>
              <DialogDescription>Enter the details of your new product</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="productName">Product Name</Label>
                <Input id="productName" placeholder="Enter product name" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="category">Category</Label>
                  <Select>
                    <SelectTrigger id="category">
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="420">420 Products</SelectItem>
                      <SelectItem value="household">Household</SelectItem>
                      <SelectItem value="produce">Produce</SelectItem>
                      <SelectItem value="snacks">Snacks</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="price">Price (ZAR)</Label>
                  <Input id="price" type="number" placeholder="0.00" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="stock">Initial Stock</Label>
                <Input id="stock" type="number" placeholder="0" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea id="description" rows={4} placeholder="Enter product description" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="images">Product Images</Label>
                <Input id="images" type="file" multiple accept="image/*" />
              </div>
              <Button className="w-full">Create Product</Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search products..." className="pl-10" />
            </div>
            <Select defaultValue="all">
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Products</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="out-of-stock">Out of Stock</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {products.map((product) => (
              <div key={product.id} className="flex items-center gap-4 p-4 border rounded-lg">
                <div className="w-16 h-16 rounded bg-muted" />
                <div className="flex-1 space-y-1">
                  <div className="flex items-center gap-2">
                    <h3 className="font-semibold">{product.name}</h3>
                    <Badge variant="secondary">{product.category}</Badge>
                    {product.status === "active" && (
                      <Badge variant="outline" className="text-green-600">
                        Active
                      </Badge>
                    )}
                  </div>
                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span>Price: R{product.price}</span>
                    <span>Stock: {product.stock}</span>
                    <span>Sales: {product.sales}</span>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="ghost" size="sm">
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="sm">
                    <Eye className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="sm">
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/products/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/orders/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Package, Clock, Truck, CheckCircle } from "lucide-react"

export default function VendorOrdersPage() {
  const [orders] = useState([
    {
      id: "ORD-2024-001",
      customer: "John Doe",
      items: 3,
      total: 1547,
      status: "pending",
      date: "2024-01-15",
    },
    {
      id: "ORD-2024-002",
      customer: "Jane Smith",
      items: 1,
      total: 899,
      status: "processing",
      date: "2024-01-14",
    },
    {
      id: "ORD-2024-003",
      customer: "Mike Johnson",
      items: 2,
      total: 848,
      status: "shipped",
      date: "2024-01-13",
    },
    {
      id: "ORD-2024-004",
      customer: "Sarah Williams",
      items: 1,
      total: 299,
      status: "delivered",
      date: "2024-01-12",
    },
  ])

const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <Clock className="h-4 w-4" />
      case "processing":
        return <Package className="h-4 w-4" />
      case "shipped":
        return <Truck className="h-4 w-4" />
      case "delivered":
        return <CheckCircle className="h-4 w-4" />
      default:
        return null
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-500/10 text-yellow-600"
      case "processing":
        return "bg-blue-500/10 text-blue-600"
      case "shipped":
        return "bg-purple-500/10 text-purple-600"
      case "delivered":
        return "bg-green-500/10 text-green-600"
      default:
        return ""
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Orders</h1>
        <p className="text-muted-foreground">Manage your customer orders</p>
      </div>

<div className="grid md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Pending</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Processing</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Shipped</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Delivered</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">156</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle>Recent Orders</CardTitle>
            <Select defaultValue="all">
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Orders</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="processing">Processing</SelectItem>
                <SelectItem value="shipped">Shipped</SelectItem>
                <SelectItem value="delivered">Delivered</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {orders.map((order) => (
              <div key={order.id} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-4">
                  <div className={`p-2 rounded-full ${getStatusColor(order.status)}`}>
                    {getStatusIcon(order.status)}
                  </div>
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <p className="font-semibold">{order.id}</p>
                      <Badge variant="secondary" className="text-xs">
                        {order.status}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {order.customer} • {order.items} items • {order.date}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="text-right">
                    <p className="font-bold">R{order.total}</p>
                  </div>
                  <Button size="sm">View Details</Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/analytics/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, Users, Package, DollarSign } from "lucide-react"

export default function VendorAnalyticsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Analytics</h1>
        <p className="text-muted-foreground">Track your store performance</p>
      </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R45,231</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-600">+20.1%</span> from last month
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">+2,350</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-600">+180</span> from last month
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">New Customers</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">+573</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-600">+201</span> from last month
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12.5%</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-600">+2.5%</span> from last month
            </p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Top Selling Products</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[
              { name: "CBD Oil 1000mg", sales: 124, revenue: "R111,476" },
              { name: "Organic Hemp Gummies", sales: 89, revenue: "R26,611" },
              { name: "Glass Water Pipe", sales: 67, revenue: "R36,783" },
            ].map((product, i) => (
              <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded bg-muted" />
                  <div>
                    <p className="font-medium">{product.name}</p>
                    <p className="text-sm text-muted-foreground">{product.sales} sales</p>
                  </div>
                </div>
                <p className="font-bold">{product.revenue}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/delivery/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        <div className="h-8 w-32 bg-muted rounded mb-6 animate-pulse" />
        <div className="h-10 w-64 bg-muted rounded mb-2 animate-pulse" />
        <div className="h-6 w-96 bg-muted rounded mb-8 animate-pulse" />
        <div className="h-24 w-full bg-muted rounded mb-8 animate-pulse" />
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="space-y-4">
            <div className="h-32 w-full bg-muted rounded animate-pulse" />
            <div className="h-32 w-full bg-muted rounded animate-pulse" />
          </div>
          <div className="lg:col-span-2">
            <div className="h-96 w-full bg-muted rounded animate-pulse" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/site-header.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { ThemeToggle } from "@/components/theme-toggle"
import { WishlistButton } from "@/components/wishlist-button"
import { CartButton } from "@/components/cart-button"
import { Globe, Menu, Store, User, Search, Package } from "lucide-react"
import { Input } from "@/components/ui/input"

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between gap-4">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 flex-shrink-0">
            <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
              <Globe className="h-6 w-6 text-primary-foreground" />
            </div>
            <div className="hidden sm:block">
              <span className="text-xl font-bold text-foreground">Buddies</span>
              <span className="text-xl font-light text-primary"> World Wide</span>
            </div>
          </Link>

{/* Search Bar - Desktop */}
          <div className="hidden md:flex flex-1 max-w-2xl">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input type="search" placeholder="Search products, categories..." className="w-full pl-9 bg-background" />
            </div>
          </div>

{/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-4">
            <Link
              href="/category/420"
              className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium whitespace-nowrap"
            >
              420 Shop
            </Link>
            <Link
              href="/category/produce"
              className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium whitespace-nowrap"
            >
              Produce
            </Link>
            <Link
              href="/category/household"
              className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium whitespace-nowrap"
            >
              Household
            </Link>
            <Link
              href="/category/snacks"
              className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium whitespace-nowrap"
            >
              Snacks
            </Link>
            <Link
              href="/products"
              className="text-sm text-muted-foreground hover:text-primary transition-colors font-medium whitespace-nowrap"
            >
              All Products
            </Link>
          </nav>

{/* Actions */}
          <div className="flex items-center gap-2 flex-shrink-0">
            <Link href="/orders" className="hidden xl:block">
              <Button variant="ghost" size="sm">
                <Package className="h-4 w-4 mr-2" />
                Orders
              </Button>
            </Link>
            <ThemeToggle />
            <WishlistButton />
            <CartButton />
            <Link href="/account" className="hidden sm:block">
              <Button variant="ghost" size="icon">
                <User className="h-5 w-5" />
                <span className="sr-only">Account</span>
              </Button>
            </Link>
            <Link href="/vendor/register" className="hidden xl:block">
              <Button size="sm" className="bg-secondary text-secondary-foreground hover:bg-secondary/90">
                <Store className="h-4 w-4 mr-2" />
                Vendor
              </Button>
            </Link>

{/* Mobile Menu */}
            <Sheet>
              <SheetTrigger asChild className="lg:hidden">
                <Button variant="ghost" size="icon">
                  <Menu className="h-5 w-5" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] overflow-y-auto">
                <nav className="flex flex-col gap-4 mt-8">
                  {/* Search - Mobile */}
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                    <Input type="search" placeholder="Search..." className="w-full pl-9" />
                  </div>

{/* Categories */}
                  <div className="space-y-1">
                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
                      Categories
                    </p>
                    <Link
                      href="/category/420"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      420 Shop
                    </Link>
                    <Link
                      href="/category/produce"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Fresh Produce
                    </Link>
                    <Link
                      href="/category/household"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Household
                    </Link>
                    <Link
                      href="/category/snacks"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Snacks
                    </Link>
                    <Link
                      href="/category/health"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Health & Wellness
                    </Link>
                    <Link
                      href="/category/baby"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Baby & Kids
                    </Link>
                    <Link
                      href="/category/pets"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Pet Supplies
                    </Link>
                    <Link
                      href="/category/beauty"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Beauty & Personal
                    </Link>
                  </div>

{/* Quick Links */}
                  <div className="space-y-1">
                    <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
                      Quick Links
                    </p>
                    <Link
                      href="/products"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      All Products
                    </Link>
                    <Link
                      href="/orders"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      My Orders
                    </Link>
                    <Link
                      href="/delivery"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      Track Delivery
                    </Link>
                    <Link
                      href="/wishlist"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      My Wishlist
                    </Link>
                    <Link
                      href="/account"
                      className="block py-2 text-lg font-medium hover:text-primary transition-colors"
                    >
                      My Account
                    </Link>
                  </div>

{/* Auth Actions */}
                  <Link href="/login">
                    <Button variant="outline" className="w-full bg-transparent">
                      Sign In
                    </Button>
                  </Link>
                  <Link href="/register">
                    <Button variant="outline" className="w-full bg-transparent">
                      Register Free
                    </Button>
                  </Link>
                  <Link href="/vendor/register">
                    <Button className="w-full bg-secondary text-secondary-foreground">
                      <Store className="h-4 w-4 mr-2" />
                      Become a Vendor
                    </Button>
                  </Link>
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Inter, JetBrains_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { Suspense } from "react"
import { ThemeProvider } from "@/components/theme-provider"
import { CartProvider } from "@/components/cart-provider"
import { WishlistProvider } from "@/components/wishlist-provider"
import { SiteHeader } from "@/components/site-header"
import { Toaster } from "sonner"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains-mono",
})

export const metadata: Metadata = {
  title: "Buddies World Wide - Global Marketplace for Everyday Essentials",
  description:
    "Shop from trusted vendors worldwide. Find 420 products, fresh produce, household essentials, snacks and more. Vendors welcome - join our global marketplace today!",
  keywords: ["marketplace", "ecommerce", "dropshipping", "420", "groceries", "household", "global shipping"],
}

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#22c55e" },
    { media: "(prefers-color-scheme: dark)", color: "#16a34a" },
  ],
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans antialiased">
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <CartProvider>
            <WishlistProvider>
              <SiteHeader />
              <Suspense fallback={<div className="flex min-h-screen items-center justify-center">Loading...</div>}>
                {children}
              </Suspense>
              <Toaster richColors position="top-right" />
            </WishlistProvider>
          </CartProvider>
          <Analytics />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/delivery/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Globe,
  Truck,
  Package,
  CheckCircle,
  Clock,
  MapPin,
  Search,
  ArrowLeft,
  Menu,
  Box,
  Home,
  Plane,
} from "lucide-react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { CartButton } from "@/components/cart-button"
import { ThemeToggle } from "@/components/theme-toggle"

const mockOrders = [
  {
    id: "BWW-12345678",
    status: "in_transit",
    estimatedDelivery: "Dec 12, 2025",
    items: [
      { name: "Organic CBD Oil 1000mg", quantity: 2 },
      { name: "Hemp Flower Oz", quantity: 1 },
    ],
    tracking: [
      { status: "Order Placed", date: "Dec 8, 2025", time: "10:30 AM", completed: true },
      { status: "Processing", date: "Dec 8, 2025", time: "2:45 PM", completed: true },
      { status: "Shipped", date: "Dec 9, 2025", time: "9:15 AM", completed: true },
      { status: "In Transit", date: "Dec 10, 2025", time: "11:00 AM", completed: true, current: true },
      { status: "Out for Delivery", date: "Dec 12, 2025", time: "", completed: false },
      { status: "Delivered", date: "", time: "", completed: false },
    ],
    carrier: "FedEx",
    trackingNumber: "794644790138",
  },
  {
    id: "BWW-87654321",
    status: "delivered",
    estimatedDelivery: "Dec 5, 2025",
    items: [{ name: "Multi-Surface Cleaner", quantity: 3 }],
    tracking: [
      { status: "Order Placed", date: "Dec 1, 2025", time: "3:20 PM", completed: true },
      { status: "Processing", date: "Dec 1, 2025", time: "5:00 PM", completed: true },
      { status: "Shipped", date: "Dec 2, 2025", time: "8:30 AM", completed: true },
      { status: "In Transit", date: "Dec 3, 2025", time: "10:00 AM", completed: true },
      { status: "Out for Delivery", date: "Dec 5, 2025", time: "7:00 AM", completed: true },
      { status: "Delivered", date: "Dec 5, 2025", time: "2:30 PM", completed: true },
    ],
    carrier: "UPS",
    trackingNumber: "1Z999AA10123456784",
  },
]

const statusIcons: Record<string, React.ComponentType<{ className?: string }>> = {
  "Order Placed": Box,
  Processing: Clock,
  Shipped: Package,
  "In Transit": Plane,
  "Out for Delivery": Truck,
  Delivered: Home,
}

const statusColors: Record<string, string> = {
  pending: "bg-yellow-500",
  processing: "bg-blue-500",
  shipped: "bg-purple-500",
  in_transit: "bg-orange-500",
  out_for_delivery: "bg-cyan-500",
  delivered: "bg-green-500",
}

export default function DeliveryPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedOrder, setSelectedOrder] = useState(mockOrders[0])

useEffect(() => {
    console.log("[v0] Delivery page mounted successfully")
  }, [])

const filteredOrders = mockOrders.filter((order) => order.id.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <Globe className="h-6 w-6 text-primary-foreground" />
              </div>
              <div className="hidden sm:block">
                <span className="text-xl font-bold text-foreground">Buddies</span>
                <span className="text-xl font-light text-primary"> World Wide</span>
              </div>
            </Link>

<div className="flex items-center gap-2">
              <ThemeToggle />
              <CartButton />
              <Sheet>
                <SheetTrigger asChild className="lg:hidden">
                  <Button variant="ghost" size="icon">
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-[300px]">
                  <nav className="flex flex-col gap-4 mt-8">
                    <Link href="/category/420" className="text-lg font-medium hover:text-primary">
                      420 Shop
                    </Link>
                    <Link href="/category/produce" className="text-lg font-medium hover:text-primary">
                      Fresh Produce
                    </Link>
                    <Link href="/category/household" className="text-lg font-medium hover:text-primary">
                      Household
                    </Link>
                    <Link href="/category/snacks" className="text-lg font-medium hover:text-primary">
                      Snacks
                    </Link>
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </header>

<div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground mb-2">Track Your Delivery</h1>
          <p className="text-muted-foreground">Enter your order number to track your package</p>
        </div>

{/* Search */}
        <Card className="mb-8">
          <CardContent className="pt-6">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Enter order number (e.g., BWW-12345678)"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Button>Track Order</Button>
            </div>
          </CardContent>
        </Card>

<div className="grid lg:grid-cols-3 gap-8">
          {/* Orders List */}
          <div className="lg:col-span-1 space-y-4">
            <h2 className="font-semibold text-foreground mb-4">Your Orders</h2>
            {filteredOrders.map((order) => (
              <Card
                key={order.id}
                className={`cursor-pointer transition-all ${selectedOrder.id === order.id ? "ring-2 ring-primary" : "hover:shadow-md"}`}
                onClick={() => setSelectedOrder(order)}
              >
                <CardContent className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-mono text-sm font-medium">{order.id}</span>
                    <Badge
                      className={`${statusColors[order.status]} text-white border-0`}
                      variant={order.status === "delivered" ? "default" : "secondary"}
                    >
                      {order.status.replace("_", " ")}
                    </Badge>
                  </div>
                  <p className="text-sm text-muted-foreground mb-1">
                    {order.items.length} item{order.items.length > 1 ? "s" : ""}
                  </p>
                  <p className="text-xs text-muted-foreground">Est. delivery: {order.estimatedDelivery}</p>
                </CardContent>
              </Card>
            ))}
          </div>

{/* Order Details */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Package className="h-5 w-5" />
                      Order {selectedOrder.id}
                    </CardTitle>
                    <CardDescription>Shipped via {selectedOrder.carrier}</CardDescription>
                  </div>
                  <Badge
                    className={`${statusColors[selectedOrder.status]} text-white border-0`}
                    variant={selectedOrder.status === "delivered" ? "default" : "secondary"}
                  >
                    {selectedOrder.status.replace("_", " ")}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Tracking Timeline */}
                <div className="space-y-4">
                  <h3 className="font-semibold text-foreground">Tracking Progress</h3>
                  <div className="relative">
                    {selectedOrder.tracking.map((step, index) => {
                      const Icon = statusIcons[step.status] || Package
                      return (
                        <div key={step.status} className="flex gap-4 pb-6 last:pb-0">
                          <div className="relative flex flex-col items-center">
                            <div
                              className={`h-10 w-10 rounded-full flex items-center justify-center ${
                                step.completed
                                  ? step.current
                                    ? "bg-primary text-primary-foreground"
                                    : "bg-primary/20 text-primary"
                                  : "bg-muted text-muted-foreground"
                              }`}
                            >
                              {step.completed && !step.current ? (
                                <CheckCircle className="h-5 w-5" />
                              ) : (
                                <Icon className="h-5 w-5" />
                              )}
                            </div>
                            {index < selectedOrder.tracking.length - 1 && (
                              <div
                                className={`w-0.5 flex-1 mt-2 ${step.completed ? "bg-primary" : "bg-muted"}`}
                                style={{ minHeight: "2rem" }}
                              />
                            )}
                          </div>
                          <div className="flex-1 pt-1">
                            <p className={`font-medium ${step.current ? "text-primary" : "text-foreground"}`}>
                              {step.status}
                            </p>
                            {step.date && (
                              <p className="text-sm text-muted-foreground">
                                {step.date} {step.time && `at ${step.time}`}
                              </p>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>

{/* Order Items */}
                <div className="space-y-4">
                  <h3 className="font-semibold text-foreground">Items in this Order</h3>
                  <div className="space-y-2">
                    {selectedOrder.items.map((item, index) => (
                      <div key={index} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                        <span className="text-foreground">{item.name}</span>
                        <span className="text-muted-foreground">x{item.quantity}</span>
                      </div>
                    ))}
                  </div>
                </div>

{/* Tracking Number */}
                <div className="bg-muted/50 p-4 rounded-lg">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-muted-foreground">Tracking Number</p>
                      <p className="font-mono font-medium">{selectedOrder.trackingNumber}</p>
                    </div>
                    <Button variant="outline" size="sm" className="bg-transparent">
                      <MapPin className="h-4 w-4 mr-2" />
                      Track on {selectedOrder.carrier}
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/loading.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="min-h-screen bg-background">
      <main className="container mx-auto px-4 py-8">
        {/* Search Bar Skeleton */}
        <div className="max-w-xl mx-auto mb-8">
          <div className="h-10 bg-muted rounded-md animate-pulse" />
        </div>

{/* Filters Skeleton */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
          <div className="flex items-center gap-4">
            <div className="h-10 w-[200px] bg-muted rounded-md animate-pulse" />
            <div className="h-10 w-[120px] bg-muted rounded-md animate-pulse" />
          </div>
          <div className="flex items-center gap-2">
            <div className="h-10 w-[100px] bg-muted rounded-md animate-pulse" />
          </div>
        </div>

{/* Products Grid Skeleton */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {[...Array(12)].map((_, i) => (
            <Card key={i} className="overflow-hidden">
              <div className="aspect-square bg-muted animate-pulse" />
              <CardContent className="p-4 space-y-3">
                <div className="h-4 bg-muted rounded animate-pulse" />
                <div className="h-4 bg-muted rounded w-2/3 animate-pulse" />
                <div className="flex items-center justify-between pt-2">
                  <div className="h-6 w-20 bg-muted rounded animate-pulse" />
                  <div className="h-9 w-9 bg-muted rounded animate-pulse" />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Search, Filter, Grid, List, ShoppingCart, Star, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useCart } from "@/components/cart-provider"
import { toast } from "sonner"

interface Product {
  id: string
  name: string
  slug: string
  price: number
  compare_at_price: number | null
  images: string[]
  stock_quantity: number
  rating: number
  review_count: number
  vendor?: {
    business_name: string
    slug: string
  }
  category?: {
    name: string
    slug: string
  }
}

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [sortBy, setSortBy] = useState("newest")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const { addItem } = useCart()

useEffect(() => {
    fetchProducts()
  }, [selectedCategory, sortBy])

const fetchProducts = async () => {
    setLoading(true)
    try {
      let url = "/api/products?"
      if (selectedCategory !== "all") {
        url += `category=${selectedCategory}&`
      }
      const res = await fetch(url)
      const data = await res.json()
      setProducts(data.products || [])
    } catch {
      toast.error("Failed to load products")
    } finally {
      setLoading(false)
    }
  }

const handleAddToCart = (product: Product) => {
    if (product.stock_quantity <= 0) {
      toast.error("Product is out of stock")
      return
    }
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.images?.[0] || "/placeholder.svg",
      quantity: 1,
    })
    toast.success(`${product.name} added to cart`)
  }

const filteredProducts = products.filter((product) => product.name.toLowerCase().includes(searchQuery.toLowerCase()))

const categories = [
    { value: "all", label: "All Categories" },
    { value: "420", label: "420 Zone" },
    { value: "fruits-vegetables", label: "Fruits & Vegetables" },
    { value: "household", label: "Household Essentials" },
    { value: "snacks", label: "Snacks & Beverages" },
  ]

return (
    <div className="min-h-screen bg-background">
      <main className="container mx-auto px-4 py-8">
        {/* Search Bar */}
        <div className="max-w-xl mx-auto mb-8">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search products..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Filters */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
          <div className="flex items-center gap-4">
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger className="w-[200px]">
                <SelectValue placeholder="Category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((cat) => (
                  <SelectItem key={cat.value} value={cat.value}>
                    {cat.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Sort
                  <ChevronDown className="h-4 w-4 ml-2" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem onClick={() => setSortBy("newest")}>Newest</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setSortBy("price-low")}>Price: Low to High</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setSortBy("price-high")}>Price: High to Low</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setSortBy("rating")}>Top Rated</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

<div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">{filteredProducts.length} products</span>
            <Button variant={viewMode === "grid" ? "default" : "ghost"} size="icon" onClick={() => setViewMode("grid")}>
              <Grid className="h-4 w-4" />
            </Button>
            <Button variant={viewMode === "list" ? "default" : "ghost"} size="icon" onClick={() => setViewMode("list")}>
              <List className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Products Grid */}
        {loading ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {[...Array(8)].map((_, i) => (
              <Card key={i} className="animate-pulse">
                <div className="aspect-square bg-muted" />
                <CardContent className="p-4">
                  <div className="h-4 bg-muted rounded mb-2" />
                  <div className="h-4 bg-muted rounded w-2/3" />
                </CardContent>
              </Card>
            ))}
          </div>
        ) : filteredProducts.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-muted-foreground mb-4">No products found</p>
            <Button
              onClick={() => {
                setSearchQuery("")
                setSelectedCategory("all")
              }}
            >
              Clear Filters
            </Button>
          </div>
        ) : (
          <div
            className={
              viewMode === "grid" ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" : "flex flex-col gap-4"
            }
          >
            {filteredProducts.map((product) => (
              <Card key={product.id} className={viewMode === "list" ? "flex flex-row" : ""}>
                <Link href={`/products/${product.id}`} className={viewMode === "list" ? "w-48" : ""}>
                  <div
                    className={`relative ${viewMode === "list" ? "h-full" : "aspect-square"} overflow-hidden rounded-t-lg`}
                  >
                    <Image
                      src={product.images?.[0] || "/placeholder.svg?height=300&width=300&query=product"}
                      alt={product.name}
                      fill
                      className="object-cover hover:scale-105 transition-transform"
                    />
                    {product.compare_at_price && product.compare_at_price > product.price && (
                      <Badge className="absolute top-2 left-2 bg-destructive">Sale</Badge>
                    )}
                    {product.stock_quantity <= 0 && (
                      <Badge variant="secondary" className="absolute top-2 right-2">
                        Out of Stock
                      </Badge>
                    )}
                    {product.stock_quantity > 0 && product.stock_quantity <= 5 && (
                      <Badge variant="outline" className="absolute top-2 right-2 bg-background">
                        Low Stock
                      </Badge>
                    )}
                  </div>
                </Link>
                <CardContent className={`p-4 ${viewMode === "list" ? "flex-1 flex flex-col justify-between" : ""}`}>
                  <div>
                    {product.vendor && (
                      <Link
                        href={`/vendors/${product.vendor.slug}`}
                        className="text-xs text-muted-foreground hover:text-primary"
                      >
                        {product.vendor.business_name}
                      </Link>
                    )}
                    <Link href={`/products/${product.id}`}>
                      <h3 className="font-semibold hover:text-primary line-clamp-2">{product.name}</h3>
                    </Link>
                    <div className="flex items-center gap-1 mt-1">
                      <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                      <span className="text-xs text-muted-foreground">
                        {product.rating.toFixed(1)} ({product.review_count})
                      </span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between mt-4">
                    <div>
                      <span className="font-bold text-lg">R{product.price.toFixed(2)}</span>
                      {product.compare_at_price && product.compare_at_price > product.price && (
                        <span className="text-sm text-muted-foreground line-through ml-2">
                          R{product.compare_at_price.toFixed(2)}
                        </span>
                      )}
                    </div>
                    <Button size="sm" onClick={() => handleAddToCart(product)} disabled={product.stock_quantity <= 0}>
                      <ShoppingCart className="h-4 w-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Star, ShoppingCart, Heart, Share2, Truck, Shield, RefreshCw, Minus, Plus, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { useCart } from "@/components/cart-provider"
import { toast } from "sonner"
import { useParams } from "next/navigation"
import SiteHeader from "@/components/site-header" // Importing global SiteHeader

interface Product {
  id: string
  name: string
  slug: string
  description: string | null
  short_description: string | null
  price: number
  compare_at_price: number | null
  sku: string | null
  images: string[]
  stock_quantity: number
  low_stock_threshold: number
  rating: number
  review_count: number
  tags: string[] | null
  vendor?: {
    id: string
    business_name: string
    slug: string
    logo_url: string | null
    rating: number
    is_verified: boolean
  }
  category?: {
    id: string
    name: string
    slug: string
  }
}

export default function ProductPage() {
  const params = useParams()
  const id = params.id as string
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedImage, setSelectedImage] = useState(0)
  const [quantity, setQuantity] = useState(1)
  const { addItem } = useCart()

useEffect(() => {
    if (id) {
      fetchProduct()
    }
  }, [id])

const fetchProduct = async () => {
    try {
      const res = await fetch(`/api/products/${id}`)
      const data = await res.json()
      setProduct(data.product)
    } catch {
      toast.error("Failed to load product")
    } finally {
      setLoading(false)
    }
  }

const handleAddToCart = () => {
    if (!product || product.stock_quantity <= 0) {
      toast.error("Product is out of stock")
      return
    }
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.images?.[0] || "/placeholder.svg",
      quantity,
    })
    toast.success(`${quantity}x ${product.name} added to cart`)
  }

if (loading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" />
      </div>
    )
  }

if (!product) {
    return (
      <div className="min-h-screen bg-background flex flex-col items-center justify-center gap-4">
        <p className="text-muted-foreground">Product not found</p>
        <Link href="/products">
          <Button>Back to Products</Button>
        </Link>
      </div>
    )
  }

const discount = product.compare_at_price ? Math.round((1 - product.price / product.compare_at_price) * 100) : 0

return (
    <div className="min-h-screen bg-background">
      {/* Global SiteHeader */}
      <SiteHeader />

<main className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 mb-6">
          <Link href="/" className="text-muted-foreground hover:text-primary text-sm">
            Home
          </Link>
          <span className="text-muted-foreground">/</span>
          <Link href="/products" className="text-muted-foreground hover:text-primary text-sm">
            Products
          </Link>
          {product.category && (
            <>
              <span className="text-muted-foreground">/</span>
              <Link
                href={`/category/${product.category.slug}`}
                className="text-muted-foreground hover:text-primary text-sm"
              >
                {product.category.name}
              </Link>
            </>
          )}
          <span className="text-muted-foreground">/</span>
          <span className="text-foreground text-sm">{product.name}</span>
        </div>

<div className="grid lg:grid-cols-2 gap-8">
          {/* Product Images */}
          <div className="space-y-4">
            <div className="relative aspect-square rounded-lg overflow-hidden bg-muted">
              <Image
                src={product.images?.[selectedImage] || "/placeholder.svg?height=600&width=600&query=product"}
                alt={product.name}
                fill
                className="object-cover"
              />
              {discount > 0 && (
                <Badge className="absolute top-4 left-4 bg-destructive text-lg px-3 py-1">-{discount}%</Badge>
              )}
            </div>
            {product.images && product.images.length > 1 && (
              <div className="flex gap-2 overflow-x-auto pb-2">
                {product.images.map((image, index) => (
                  <button
                    key={index}
                    onClick={() => setSelectedImage(index)}
                    className={`relative w-20 h-20 rounded-lg overflow-hidden border-2 flex-shrink-0 ${
                      selectedImage === index ? "border-primary" : "border-transparent"
                    }`}
                  >
                    <Image
                      src={image || "/placeholder.svg"}
                      alt={`${product.name} ${index + 1}`}
                      fill
                      className="object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Product Info */}
          <div className="space-y-6">
            {product.vendor && (
              <Link
                href={`/vendors/${product.vendor.slug}`}
                className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
              >
                {product.vendor.logo_url && (
                  <Image
                    src={product.vendor.logo_url || "/placeholder.svg"}
                    alt={product.vendor.business_name}
                    width={24}
                    height={24}
                    className="rounded-full"
                  />
                )}
                {product.vendor.business_name}
                {product.vendor.is_verified && (
                  <Badge variant="secondary" className="text-xs">
                    <Check className="h-3 w-3 mr-1" />
                    Verified
                  </Badge>
                )}
              </Link>
            )}

<div>
              <h1 className="text-3xl font-bold">{product.name}</h1>
              {product.category && (
                <Link
                  href={`/category/${product.category.slug}`}
                  className="text-sm text-muted-foreground hover:text-primary"
                >
                  {product.category.name}
                </Link>
              )}
            </div>

<div className="flex items-center gap-4">
              <div className="flex items-center gap-1">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={`h-5 w-5 ${
                      i < Math.floor(product.rating) ? "fill-yellow-400 text-yellow-400" : "text-muted"
                    }`}
                  />
                ))}
              </div>
              <span className="text-sm text-muted-foreground">
                {product.rating.toFixed(1)} ({product.review_count} reviews)
              </span>
            </div>

<div className="flex items-baseline gap-3">
              <span className="text-4xl font-bold">R{product.price.toFixed(2)}</span>
              {product.compare_at_price && product.compare_at_price > product.price && (
                <span className="text-xl text-muted-foreground line-through">
                  R{product.compare_at_price.toFixed(2)}
                </span>
              )}
            </div>

{/* Stock Status */}
            <div className="flex items-center gap-2">
              {product.stock_quantity <= 0 ? (
                <Badge variant="destructive">Out of Stock</Badge>
              ) : product.stock_quantity <= product.low_stock_threshold ? (
                <Badge variant="outline" className="text-orange-600 border-orange-600">
                  Only {product.stock_quantity} left in stock
                </Badge>
              ) : (
                <Badge variant="outline" className="text-green-600 border-green-600">
                  <Check className="h-3 w-3 mr-1" />
                  In Stock
                </Badge>
              )}
              {product.sku && <span className="text-xs text-muted-foreground">SKU: {product.sku}</span>}
            </div>

{/* Quantity & Add to Cart */}
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <span className="text-sm font-medium">Quantity:</span>
                <div className="flex items-center border rounded-lg">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    disabled={quantity <= 1}
                  >
                    <Minus className="h-4 w-4" />
                  </Button>
                  <span className="w-12 text-center font-medium">{quantity}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setQuantity(Math.min(product.stock_quantity, quantity + 1))}
                    disabled={quantity >= product.stock_quantity}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              </div>

{/* Features */}
            <div className="grid grid-cols-3 gap-4">
              <Card className="text-center p-4">
                <Truck className="h-6 w-6 mx-auto mb-2 text-primary" />
                <p className="text-xs">Free shipping over R500</p>
              </Card>
              <Card className="text-center p-4">
                <Shield className="h-6 w-6 mx-auto mb-2 text-primary" />
                <p className="text-xs">Secure payment</p>
              </Card>
              <Card className="text-center p-4">
                <RefreshCw className="h-6 w-6 mx-auto mb-2 text-primary" />
                <p className="text-xs">30-day returns</p>
              </Card>
            </div>

{/* Tags */}
            {product.tags && product.tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {product.tags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            )}
          </div>
        </div>

{/* Tabs */}
        <Tabs defaultValue="description" className="mt-12">
          <TabsList>
            <TabsTrigger value="description">Description</TabsTrigger>
            <TabsTrigger value="reviews">Reviews ({product.review_count})</TabsTrigger>
            <TabsTrigger value="shipping">Shipping</TabsTrigger>
          </TabsList>
          <TabsContent value="description" className="mt-6">
            <Card>
              <CardContent className="p-6">
                {product.description ? (
                  <div className="prose prose-sm max-w-none">{product.description}</div>
                ) : (
                  <p className="text-muted-foreground">No description available.</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="reviews" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Customer Reviews</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">No reviews yet. Be the first to review this product!</p>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="shipping" className="mt-6">
            <Card>
              <CardContent className="p-6 space-y-4">
                <div className="flex items-start gap-4">
                  <Truck className="h-6 w-6 text-primary flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold">Standard Delivery</h4>
                    <p className="text-sm text-muted-foreground">3-5 business days - R99.00 (Free over R500)</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <Truck className="h-6 w-6 text-primary flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold">Express Delivery</h4>
                    <p className="text-sm text-muted-foreground">Next business day - R249.00 (Free over R1,000)</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/homepage/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Star, ShoppingCart } from "lucide-react" // Placeholder imports, please replace with actual imports
import { Button } from "@/components/ui/button"

const featuredProducts = [
  // Sample data, replace with actual product data
  { id: 1, name: "Product 1", price: 100, image: "/product1.jpg", rating: 4.5 },
  { id: 2, name: "Product 2", price: 200, image: "/product2.jpg", rating: 4.0 },
]

const addItem = (product) => {
  // Placeholder function, replace with actual implementation
  console.log("Adding product:", product)
}

const HomePage = () => {
  return (
    <div>
      {featuredProducts.map((product) => (
        <Card key={product.id} className="group overflow-hidden hover:shadow-lg transition-all">
          <Link href={`/products/${product.id}`}>
            <div className="aspect-square relative bg-muted">
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.name}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
          </Link>
          <CardContent className="p-4">
            <Link href={`/products/${product.id}`}>
              <h3 className="font-semibold text-foreground mb-2 line-clamp-2 hover:text-primary">{product.name}</h3>
            </Link>
            <div className="flex items-center gap-1 mb-3">
              <Star className="h-4 w-4 fill-secondary text-secondary" />
              <span className="text-sm text-muted-foreground">{product.rating}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-xl font-bold text-primary">R{product.price}</span>
              <Button
                size="sm"
                onClick={() =>
                  addItem({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    image: product.image,
                    quantity: 1,
                  })
                }
              >
                <ShoppingCart className="h-4 w-4 mr-1" />
                Add
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

export default HomePage
[V0_FILE]sql:file="scripts/004_seed_products.sql" isMerged="true"
-- Seed products for Buddies World Wide

-- Insert sample vendors
INSERT INTO vendors (id, business_name, slug, description, email, phone, subscription_tier, subscription_status, is_verified, is_active)
VALUES
  ('11111111-1111-1111-1111-111111111111', 'Green Leaf Dispensary', 'green-leaf', 'Premium cannabis products and accessories', 'contact@greenleaf.co.za', '+27 11 234 5678', 'professional', 'active', true, true),
  ('22222222-2222-2222-2222-222222222222', 'Fresh Farm Direct', 'fresh-farm', 'Farm-fresh produce delivered daily', 'hello@freshfarm.co.za', '+27 21 345 6789', 'enterprise', 'active', true, true),
  ('33333333-3333-3333-3333-333333333333', 'Home Essentials', 'home-essentials', 'Quality household products', 'info@homeessentials.co.za', '+27 31 456 7890', 'professional', 'active', true, true)
ON CONFLICT (id) DO NOTHING;

-- Insert 420 products
INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status, is_featured)
SELECT 
  '11111111-1111-1111-1111-111111111111',
  c.id,
  'Premium CBD Oil 1000mg',
  'premium-cbd-oil-1000mg',
  'High-quality full-spectrum CBD oil for relaxation and wellness',
  899.00,
  45,
  '["/cbd-oil-bottle.jpg"]'::jsonb,
  'active',
  true
FROM categories c WHERE c.slug = '420'
ON CONFLICT (vendor_id, slug) DO NOTHING;

INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status)
SELECT 
  '11111111-1111-1111-1111-111111111111',
  c.id,
  'Cannabis Gummies 300mg',
  'cannabis-gummies-300mg',
  'Delicious fruit-flavored edibles with precise dosing',
  349.00,
  78,
  '["/cannabis-gummies.png"]'::jsonb,
  'active'
FROM categories c WHERE c.slug = '420'
ON CONFLICT (vendor_id, slug) DO NOTHING;

INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status)
SELECT 
  '11111111-1111-1111-1111-111111111111',
  c.id,
  'Hemp Flower 5g',
  'hemp-flower-5g',
  'Premium quality hemp flower with high CBD content',
  199.00,
  32,
  '["/hemp-flower.jpg"]'::jsonb,
  'active'
FROM categories c WHERE c.slug = '420'
ON CONFLICT (vendor_id, slug) DO NOTHING;

-- Insert produce products
INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status, is_featured)
SELECT 
  '22222222-2222-2222-2222-222222222222',
  c.id,
  'Fresh Red Apples 1kg',
  'fresh-red-apples-1kg',
  'Crisp and sweet South African apples',
  49.90,
  150,
  '["/fresh-red-apples.png"]'::jsonb,
  'active',
  true
FROM categories c WHERE c.slug = 'produce'
ON CONFLICT (vendor_id, slug) DO NOTHING;

INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status)
SELECT 
  '22222222-2222-2222-2222-222222222222',
  c.id,
  'Organic Bananas 1kg',
  'organic-bananas-1kg',
  'Naturally ripened organic bananas',
  39.90,
  200,
  '["/placeholder.svg?height=400&width=400"]'::jsonb,
  'active'
FROM categories c WHERE c.slug = 'produce'
ON CONFLICT (vendor_id, slug) DO NOTHING;

-- Insert household products
INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status, is_featured)
SELECT 
  '33333333-3333-3333-3333-333333333333',
  c.id,
  'All-Purpose Cleaning Spray',
  'all-purpose-cleaning-spray',
  'Powerful multi-surface cleaner',
  54.90,
  89,
  '["/cleaning-spray-bottle.png"]'::jsonb,
  'active',
  true
FROM categories c WHERE c.slug = 'household'
ON CONFLICT (vendor_id, slug) DO NOTHING;

INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status)
SELECT 
  '33333333-3333-3333-3333-333333333333',
  c.id,
  'Laundry Detergent 2L',
  'laundry-detergent-2l',
  'Gentle yet effective laundry detergent',
  89.90,
  67,
  '["/placeholder.svg?height=400&width=400"]'::jsonb,
  'active'
FROM categories c WHERE c.slug = 'household'
ON CONFLICT (vendor_id, slug) DO NOTHING;

-- Insert snacks
INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status, is_featured)
SELECT 
  '22222222-2222-2222-2222-222222222222',
  c.id,
  'Trail Mix 500g',
  'trail-mix-500g',
  'Healthy mix of nuts, seeds, and dried fruit',
  79.90,
  120,
  '["/trail-mix-nuts-snacks.jpg"]'::jsonb,
  'active',
  true
FROM categories c WHERE c.slug = 'snacks'
ON CONFLICT (vendor_id, slug) DO NOTHING;

INSERT INTO products (vendor_id, category_id, name, slug, description, price, stock_quantity, images, status)
SELECT 
  '22222222-2222-2222-2222-222222222222',
  c.id,
  'Potato Chips Family Pack',
  'potato-chips-family-pack',
  'Crispy potato chips in various flavors',
  44.90,
  95,
  '["/placeholder.svg?height=400&width=400"]'::jsonb,
  'active'
FROM categories c WHERE c.slug = 'snacks'
ON CONFLICT (vendor_id, slug) DO NOTHING;
[V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Star, ShoppingCart, Search, Filter, ArrowLeft } from "lucide-react"
import { useCart } from "@/components/cart-provider"
import { toast } from "sonner"

interface Category {
  id: string
  name: string
  slug: string
  description: string | null
}

export default function CategoryPage() {
  const params = useParams()
  const slug = params.slug as string
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState("popular")
  const [products, setProducts] = useState<Product[]>([])
  const [category, setCategory] = useState<Category | null>(null)
  const [loading, setLoading] = useState(true)
  const { addItem } = useCart()

useEffect(() => {
    fetchCategoryData()
  }, [slug])

const fetchCategoryData = async () => {
    setLoading(true)
    try {
      // Fetch products for this category
      const res = await fetch(`/api/products?category=${slug}`)
      const data = await res.json()

if (data.products && data.products.length > 0) {
        setProducts(data.products)
        // Get category info from first product
        if (data.products[0].category) {
          setCategory(data.products[0].category)
        }
      }
    } catch (error) {
      console.error("[v0] Error fetching category data:", error)
      toast.error("Failed to load products")
    } finally {
      setLoading(false)
    }
  }

const filteredProducts = products.filter((product) => product.name.toLowerCase().includes(searchQuery.toLowerCase()))

const sortedProducts = [...filteredProducts].sort((a, b) => {
    if (sortBy === "price-low") return a.price - b.price
    if (sortBy === "price-high") return b.price - a.price
    if (sortBy === "rating") return b.rating - a.rating
    return 0
  })

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center">
                <ArrowLeft className="h-6 w-6 text-primary-foreground" />
              </div>
              <div className="hidden sm:block">
                <span className="text-xl font-bold text-foreground">Buddies</span>
                <span className="text-xl font-light text-primary"> World Wide</span>
              </div>
            </Link>

<div className="flex items-center gap-2">
              {/* ThemeToggle and CartButton components are removed as they are not part of the updates */}
              {/* Sheet component is removed as it is not part of the updates */}
            </div>
          </div>
        </div>
      </header>

{/* Category Hero */}
      <section className="bg-gradient-to-r from-primary/10 to-secondary/10 py-12">
        <div className="container mx-auto px-4">
          <Link href="/" className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-4">
            <ArrowLeft className="h-4 w-4" />
            Back to Home
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-foreground">{category?.name || "Products"}</h1>
            <p className="text-muted-foreground">{category?.description || "Browse our products"}</p>
          </div>
        </div>
      </section>

{/* Filters */}
      <section className="border-b border-border py-4">
        <div className="container mx-auto px-4">
          <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
            <div className="relative w-full sm:w-80">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search products..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="flex items-center gap-4 w-full sm:w-auto">
              <Filter className="h-4 w-4 text-muted-foreground" />
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-full sm:w-[180px]">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="popular">Most Popular</SelectItem>
                  <SelectItem value="rating">Highest Rated</SelectItem>
                  <SelectItem value="price-low">Price: Low to High</SelectItem>
                  <SelectItem value="price-high">Price: High to Low</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
      </section>

{/* Products Grid */}
      <section className="py-8">
        <div className="container mx-auto px-4">
          {loading ? (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {[...Array(8)].map((_, i) => (
                <Card key={i} className="animate-pulse">
                  <div className="aspect-square bg-muted" />
                  <CardContent className="p-4">
                    <div className="h-4 bg-muted rounded mb-2" />
                    <div className="h-4 bg-muted rounded w-2/3" />
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : sortedProducts.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-muted-foreground mb-4">No products found in this category</p>
              <Link href="/">
                <Button>Browse All Products</Button>
              </Link>
            </div>
          ) : (
            <>
              <p className="text-muted-foreground mb-6">{sortedProducts.length} products found</p>
              <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {sortedProducts.map((product) => (
                  <Card key={product.id} className="group overflow-hidden hover:shadow-lg transition-all">
                    <Link href={`/products/${product.id}`}>
                      <div className="aspect-square relative bg-muted">
                        <img
                          src={product.images?.[0] || "/placeholder.svg?height=300&width=300"}
                          alt={product.name}
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                        {product.stock_quantity <= 0 && (
                          <div className="absolute inset-0 bg-background/80 flex items-center justify-center">
                            <span className="text-sm font-semibold">Out of Stock</span>
                          </div>
                        )}
                      </div>
                    </Link>
                    <CardContent className="p-4">
                      {product.vendor && (
                        <p className="text-xs text-muted-foreground mb-1">{product.vendor.business_name}</p>
                      )}
                      <Link href={`/products/${product.id}`}>
                        <h3 className="font-semibold text-foreground mb-2 line-clamp-2 hover:text-primary">
                          {product.name}
                        </h3>
                      </Link>
                      <div className="flex items-center gap-1 mb-3">
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <span className="text-sm text-muted-foreground">
                          {product.rating.toFixed(1)} ({product.review_count})
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <div>
                          <span className="text-xl font-bold text-primary">R{product.price.toFixed(2)}</span>
                          {product.compare_at_price && product.compare_at_price > product.price && (
                            <span className="text-sm text-muted-foreground line-through ml-2">
                              R{product.compare_at_price.toFixed(2)}
                            </span>
                          )}
                        </div>
                        <Button
                          size="sm"
                          onClick={() => handleAddToCart(product)}
                          disabled={product.stock_quantity <= 0}
                        >
                          <ShoppingCart className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </>
          )}
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useState, useEffect } from "react"
import {
  Globe,
  Truck,
  ShieldCheck,
  Leaf,
  Apple,
  HomeIcon,
  Cookie,
  Bitcoin,
  CreditCard,
  Store,
  ArrowRight,
  Star,
  Clock,
  Pill,
  Baby,
  Dog,
  Sparkles,
} from "lucide-react"

interface Product {
  id: string
  name: string
  price: number
  rating: number
  images: string[]
  category?: {
    name: string
  }
}

const categories = [
  {
    name: "420 Shop",
    icon: Leaf,
    href: "/category/420",
    color: "bg-primary",
    description: "Premium cannabis products",
    count: "500+ products",
  },
  {
    name: "Fruits & Vegetables",
    icon: Apple,
    href: "/category/produce",
    color: "bg-chart-1",
    description: "Fresh farm produce",
    count: "300+ products",
  },
  {
    name: "Household Essentials",
    icon: HomeIcon,
    href: "/category/household",
    color: "bg-secondary",
    description: "Everyday home items",
    count: "800+ products",
  },
  {
    name: "Snacks & Treats",
    icon: Cookie,
    href: "/category/snacks",
    color: "bg-accent",
    description: "Delicious snacks",
    count: "450+ products",
  },
  {
    name: "Health & Wellness",
    icon: Pill,
    href: "/category/health",
    color: "bg-chart-2",
    description: "Vitamins & supplements",
    count: "350+ products",
  },
  {
    name: "Baby & Kids",
    icon: Baby,
    href: "/category/baby",
    color: "bg-pink-500",
    description: "Baby essentials & toys",
    count: "420+ products",
  },
  {
    name: "Pet Supplies",
    icon: Dog,
    href: "/category/pets",
    color: "bg-orange-500",
    description: "Food & accessories",
    count: "280+ products",
  },
  {
    name: "Beauty & Personal",
    icon: Sparkles,
    href: "/category/beauty",
    color: "bg-purple-500",
    description: "Skincare & cosmetics",
    count: "600+ products",
  },
]

const paymentMethods = [
  { name: "Visa/Mastercard", icon: CreditCard },
  { name: "Bitcoin", icon: Bitcoin },
  { name: "PayPal", icon: CreditCard },
  { name: "Ethereum", icon: Bitcoin },
]

export default function Home() {
  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchFeaturedProducts()
  }, [])

const fetchFeaturedProducts = async () => {
    try {
      const res = await fetch("/api/products?featured=true&limit=4")
      const data = await res.json()
      if (data.products) {
        setFeaturedProducts(data.products)
      }
    } catch (error) {
      console.error("[v0] Error fetching featured products:", error)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-secondary/10 py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl">
            <Badge className="mb-4 bg-primary/20 text-primary border-primary/30">Global Marketplace</Badge>
            <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-6 text-balance">
              Shop <span className="text-primary">Worldwide</span>,{" "}
              <span className="text-secondary">Delivered Local</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 text-pretty max-w-2xl">
              Connect with trusted vendors from around the globe. From fresh produce to household essentials, 420
              products to gourmet snacks - find everything you need, delivered to your door.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link href="/register">
                <Button size="lg" className="w-full sm:w-auto">
                  Start Shopping Free
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Link href="/vendor/register">
                <Button size="lg" variant="outline" className="w-full sm:w-auto bg-transparent">
                  <Store className="mr-2 h-4 w-4" />
                  Sell on Buddies
                </Button>
              </Link>
            </div>
          </div>
        </div>

{/* Floating elements */}
        <div className="absolute top-20 right-10 hidden lg:block opacity-20">
          <Globe className="h-64 w-64 text-primary" />
        </div>
      </section>

{/* Trust Badges */}
      <section className="border-y border-border bg-card py-6">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap justify-center gap-8 md:gap-16">
            <div className="flex items-center gap-2 text-muted-foreground">
              <Truck className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">Worldwide Shipping</span>
            </div>
            <div className="flex items-center gap-2 text-muted-foreground">
              <ShieldCheck className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">Secure Payments</span>
            </div>
            <div className="flex items-center gap-2 text-muted-foreground">
              <Bitcoin className="h-5 w-5 text-secondary" />
              <span className="text-sm font-medium">Crypto Accepted</span>
            </div>
            <div className="flex items-center gap-2 text-muted-foreground">
              <Clock className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">24/7 Support</span>
            </div>
          </div>
        </div>
      </section>

{/* Categories - Updated grid */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-foreground mb-4">Shop by Category</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Browse our curated categories featuring products from verified vendors worldwide
            </p>
          </div>

<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            {categories.map((category) => (
              <Link key={category.name} href={category.href}>
                <Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full">
                  <CardContent className="p-4 md:p-6 flex flex-col items-center text-center">
                    <div
                      className={`h-12 w-12 md:h-16 md:w-16 rounded-2xl ${category.color} flex items-center justify-center mb-3 md:mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <category.icon className="h-6 w-6 md:h-8 md:w-8 text-white" />
                    </div>
                    <h3 className="text-sm md:text-lg font-semibold text-foreground mb-1 md:mb-2">{category.name}</h3>
                    <p className="text-xs md:text-sm text-muted-foreground mb-2 hidden sm:block">
                      {category.description}
                    </p>
                    <Badge variant="secondary" className="text-xs">
                      {category.count}
                    </Badge>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Featured Products */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-12">
            <div>
              <h2 className="text-3xl font-bold text-foreground mb-2">Featured Products</h2>
              <p className="text-muted-foreground">Top picks from our trusted vendors</p>
            </div>
            <Link href="/products">
              <Button variant="outline" className="hidden sm:flex bg-transparent">
                View All
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>

{loading ? (
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {[...Array(4)].map((_, i) => (
                <Card key={i} className="animate-pulse">
                  <div className="aspect-square bg-muted" />
                  <CardContent className="p-4">
                    <div className="h-4 bg-muted rounded mb-2" />
                    <div className="h-4 bg-muted rounded w-2/3" />
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {featuredProducts.map((product) => (
                <Link key={product.id} href={`/products/${product.id}`}>
                  <Card className="group hover:shadow-lg transition-all duration-300 overflow-hidden">
                    <div className="aspect-square relative bg-muted">
                      <img
                        src={product.images?.[0] || "/placeholder.svg"}
                        alt={product.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      {product.category && (
                        <Badge className="absolute top-3 left-3 bg-card/90 text-foreground">
                          {product.category.name}
                        </Badge>
                      )}
                    </div>
                    <CardContent className="p-4">
                      <h3 className="font-semibold text-foreground mb-2 line-clamp-1">{product.name}</h3>
                      <div className="flex items-center justify-between">
                        <span className="text-xl font-bold text-primary">R{product.price.toFixed(2)}</span>
                        <div className="flex items-center gap-1">
                          <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                          <span className="text-sm text-muted-foreground">{product.rating.toFixed(1)}</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          )}

<div className="mt-8 text-center sm:hidden">
            <Link href="/products">
              <Button variant="outline" className="bg-transparent">
                View All Products
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Vendor CTA */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <Card className="overflow-hidden">
            <div className="grid md:grid-cols-2">
              <div className="p-8 md:p-12 flex flex-col justify-center">
                <Badge className="w-fit mb-4 bg-secondary/20 text-secondary border-secondary/30">For Vendors</Badge>
                <h2 className="text-3xl font-bold text-foreground mb-4">Start Selling Worldwide Today</h2>
                <p className="text-muted-foreground mb-6">
                  Join thousands of vendors reaching customers globally. Low fees, powerful tools, and access to
                  millions of potential buyers. Set up your store in minutes.
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-2 text-muted-foreground">
                    <ShieldCheck className="h-5 w-5 text-primary" />
                    <span>Secure payment processing</span>
                  </li>
                  <li className="flex items-center gap-2 text-muted-foreground">
                    <Truck className="h-5 w-5 text-primary" />
                    <span>Integrated shipping solutions</span>
                  </li>
                  <li className="flex items-center gap-2 text-muted-foreground">
                    <Globe className="h-5 w-5 text-primary" />
                    <span>Reach customers worldwide</span>
                  </li>
                </ul>
                <Link href="/vendor/register">
                  <Button size="lg" className="w-fit bg-secondary text-secondary-foreground hover:bg-secondary/90">
                    Register as Vendor - R549/month
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
              </div>
              <div className="bg-gradient-to-br from-primary/20 to-secondary/20 p-8 flex items-center justify-center">
                <div className="text-center">
                  <Store className="h-32 w-32 text-primary mx-auto mb-4 opacity-80" />
                  <p className="text-2xl font-bold text-foreground">5,000+ Vendors</p>
                  <p className="text-muted-foreground">Already selling on Buddies</p>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </section>

{/* Payment Methods */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-foreground mb-4">Pay Your Way</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              We accept a wide variety of payment methods including cryptocurrency
            </p>
          </div>

<div className="flex flex-wrap justify-center gap-4">
            {paymentMethods.map((method) => {
              const Icon = method.icon
              return (
                <div
                  key={method.name}
                  className="bg-card border border-border rounded-lg px-6 py-3 text-sm font-medium text-muted-foreground flex items-center"
                >
                  <Icon className="h-5 w-5 mr-2" />
                  {method.name}
                </div>
              )
            })}
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-border bg-card py-12">
        <div className="container mx-auto px-4">
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
                  <Globe className="h-5 w-5 text-primary-foreground" />
                </div>
                <span className="font-bold text-foreground">Buddies World Wide</span>
              </div>
              <p className="text-sm text-muted-foreground">
                Your global marketplace for everyday essentials and specialty products.
              </p>
            </div>

<div>
              <h4 className="font-semibold text-foreground mb-4">Shop</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <Link href="/category/420" className="hover:text-primary transition-colors">
                    420 Shop
                  </Link>
                </li>
                <li>
                  <Link href="/category/produce" className="hover:text-primary transition-colors">
                    Fresh Produce
                  </Link>
                </li>
                <li>
                  <Link href="/category/household" className="hover:text-primary transition-colors">
                    Household
                  </Link>
                </li>
                <li>
                  <Link href="/category/snacks" className="hover:text-primary transition-colors">
                    Snacks
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold text-foreground mb-4">Account</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <Link href="/login" className="hover:text-primary transition-colors">
                    Sign In
                  </Link>
                </li>
                <li>
                  <Link href="/register" className="hover:text-primary transition-colors">
                    Register Free
                  </Link>
                </li>
                <li>
                  <Link href="/orders" className="hover:text-primary transition-colors">
                    My Orders
                  </Link>
                </li>
                <li>
                  <Link href="/wishlist" className="hover:text-primary transition-colors">
                    Wishlist
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold text-foreground mb-4">Support</h4>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <Link href="/delivery" className="hover:text-primary transition-colors">
                    Track Delivery
                  </Link>
                </li>
                <li>
                  <Link href="/help" className="hover:text-primary transition-colors">
                    Help Center
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="hover:text-primary transition-colors">
                    Contact Us
                  </Link>
                </li>
                <li>
                  <Link href="/vendor/register" className="hover:text-primary transition-colors">
                    Become a Vendor
                  </Link>
                </li>
              </ul>
            </div>
          </div>

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

:root {
  /* Updated color palette for Buddies World Wide - warm, global, trustworthy */
  --background: oklch(0.995 0.002 90); /* warm white */
  --foreground: oklch(0.25 0.02 260); /* deep charcoal */
  --card: oklch(1 0 0); /* pure white */
  --card-foreground: oklch(0.25 0.02 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0.02 260);
  --primary: oklch(0.55 0.22 145); /* vibrant green - buddies/420 theme */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.65 0.18 45); /* warm orange - global/friendly */
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.96 0.01 90);
  --muted-foreground: oklch(0.45 0.02 260);
  --accent: oklch(0.58 0.2 280); /* purple accent */
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.92 0.01 90);
  --input: oklch(0.96 0.01 90);
  --ring: oklch(0.55 0.22 145 / 0.3);
  --chart-1: oklch(0.55 0.22 145);
  --chart-2: oklch(0.65 0.18 45);
  --chart-3: oklch(0.58 0.2 280);
  --chart-4: oklch(0.6 0.15 200);
  --chart-5: oklch(0.55 0.22 25);
  --radius: 0.625rem;
  --sidebar: oklch(0.98 0.005 90);
  --sidebar-foreground: oklch(0.25 0.02 260);
  --sidebar-primary: oklch(0.55 0.22 145);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.65 0.18 45);
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(0.92 0.01 90);
  --sidebar-ring: oklch(0.55 0.22 145 / 0.3);
}

.dark {
  /* Dark mode for Buddies World Wide */
  --background: oklch(0.15 0.01 260);
  --foreground: oklch(0.95 0.01 90);
  --card: oklch(0.2 0.01 260);
  --card-foreground: oklch(0.95 0.01 90);
  --popover: oklch(0.18 0.01 260);
  --popover-foreground: oklch(0.95 0.01 90);
  --primary: oklch(0.65 0.2 145);
  --primary-foreground: oklch(0.15 0.01 260);
  --secondary: oklch(0.7 0.18 45);
  --secondary-foreground: oklch(0.15 0.01 260);
  --muted: oklch(0.25 0.01 260);
  --muted-foreground: oklch(0.7 0.01 90);
  --accent: oklch(0.65 0.18 280);
  --accent-foreground: oklch(0.15 0.01 260);
  --destructive: oklch(0.6 0.2 25);
  --destructive-foreground: oklch(0.95 0.01 90);
  --border: oklch(0.28 0.01 260);
  --input: oklch(0.25 0.01 260);
  --ring: oklch(0.65 0.2 145 / 0.3);
  --chart-1: oklch(0.65 0.2 145);
  --chart-2: oklch(0.7 0.18 45);
  --chart-3: oklch(0.65 0.18 280);
  --chart-4: oklch(0.65 0.15 200);
  --chart-5: oklch(0.6 0.2 25);
  --sidebar: oklch(0.18 0.01 260);
  --sidebar-foreground: oklch(0.95 0.01 90);
  --sidebar-primary: oklch(0.65 0.2 145);
  --sidebar-primary-foreground: oklch(0.15 0.01 260);
  --sidebar-accent: oklch(0.7 0.18 45);
  --sidebar-accent-foreground: oklch(0.15 0.01 260);
  --sidebar-border: oklch(0.28 0.01 260);
  --sidebar-ring: oklch(0.65 0.2 145 / 0.3);
}

@theme inline {
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"

export default function SignupPage() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="flex items-center justify-center gap-2 mb-8">
          <img src="/images/connectsync-logo.png" alt="ConnectSync" className="h-8 w-auto" />
          <span className="text-xl font-semibold text-foreground">ConnectSync</span>
        </div>

<Card>
          <CardHeader className="text-center">
            <CardTitle className="text-2xl">Create your account</CardTitle>
            <CardDescription>
              Join thousands of creators building amazing bio-links with AI-powered insights.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <form className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First name</Label>
                  <Input id="firstName" placeholder="John" className="bg-input" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last name</Label>
                  <Input id="lastName" placeholder="Doe" className="bg-input" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" type="email" placeholder="john@example.com" className="bg-input" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input id="password" type="password" placeholder="Create a strong password" className="bg-input" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm password</Label>
                <Input id="confirmPassword" type="password" placeholder="Confirm your password" className="bg-input" />
              </div>

<div className="flex items-center space-x-2">
                <Checkbox id="terms" />
                <Label htmlFor="terms" className="text-sm">
                  I agree to the{" "}
                  <Link href="/terms" className="text-primary hover:underline">
                    Terms of Service
                  </Link>{" "}
                  and{" "}
                  <Link href="/privacy" className="text-primary hover:underline">
                    Privacy Policy
                  </Link>
                </Label>
              </div>

<Button type="submit" className="w-full">
                Create Account
              </Button>
            </form>

<div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-border" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
              </div>
            </div>

<Button variant="outline" className="w-full bg-transparent">
              Continue with Google
            </Button>

<div className="text-center text-sm">
              <span className="text-muted-foreground">Already have an account? </span>
              <Link href="/login" className="text-primary hover:underline">
                Sign in
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "@stripe/stripe-js": "7.9.0",
    "@stripe/react-stripe-js": "4.0.0",
    "stripe": "18.5.0",
    "@supabase/ssr": "0.7.0",
    "@prisma/client": "6.15.0",
    "crypto": "1.0.1",
    "next-auth": "4.24.11",
    "nanoid": "5.1.5"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/builder/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Eye,
  Save,
  ArrowLeft,
  LinkIcon,
  Instagram,
  Twitter,
  Youtube,
  Globe,
  Mail,
  Phone,
  GripVertical,
  Trash2,
} from "lucide-react"
import Link from "next/link"

interface BioLink {
  id: string
  type: "link" | "social" | "contact"
  title: string
  url: string
  icon: string
  isActive: boolean
}

export default function BuilderPage() {
  const [bioLinks, setBioLinks] = useState<BioLink[]>([
    {
      id: "1",
      type: "link",
      title: "My Website",
      url: "https://johndoe.com",
      icon: "globe",
      isActive: true,
    },
    {
      id: "2",
      type: "social",
      title: "Follow me on Instagram",
      url: "https://instagram.com/johndoe",
      icon: "instagram",
      isActive: true,
    },
  ])

const [profileData, setProfileData] = useState({
    name: "John Doe",
    bio: "Content creator & entrepreneur. Sharing insights about tech and business.",
    avatar: "",
    customUrl: "johndoe",
  })

const addNewLink = (type: "link" | "social" | "contact") => {
    const newLink: BioLink = {
      id: Date.now().toString(),
      type,
      title: "",
      url: "",
      icon: type === "link" ? "globe" : type === "social" ? "instagram" : "mail",
      isActive: true,
    }
    setBioLinks([...bioLinks, newLink])
  }

const updateLink = (id: string, updates: Partial<BioLink>) => {
    setBioLinks(bioLinks.map((link) => (link.id === id ? { ...link, ...updates } : link)))
  }

const removeLink = (id: string) => {
    setBioLinks(bioLinks.filter((link) => link.id !== id))
  }

const getIconComponent = (iconName: string) => {
    const icons = {
      globe: Globe,
      instagram: Instagram,
      twitter: Twitter,
      youtube: Youtube,
      mail: Mail,
      phone: Phone,
      link: LinkIcon,
    }
    const IconComponent = icons[iconName as keyof typeof icons] || Globe
    return <IconComponent className="h-4 w-4" />
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/dashboard">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Dashboard
              </Button>
            </Link>
            <div>
              <h1 className="text-xl font-semibold text-foreground">Bio-Link Builder</h1>
              <p className="text-sm text-muted-foreground">Create and customize your bio-link page</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Eye className="mr-2 h-4 w-4" />
              Preview
            </Button>
            <Button>
              <Save className="mr-2 h-4 w-4" />
              Save Changes
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8">
          {/* Builder Panel */}
          <div className="space-y-6">
            <Tabs defaultValue="profile" className="w-full">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="profile">Profile</TabsTrigger>
                <TabsTrigger value="links">Links</TabsTrigger>
                <TabsTrigger value="design">Design</TabsTrigger>
              </TabsList>

<TabsContent value="profile" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle>Profile Information</CardTitle>
                    <CardDescription>Set up your profile details and custom URL</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Display Name</Label>
                      <Input
                        id="name"
                        value={profileData.name}
                        onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
                        placeholder="Your name"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="bio">Bio</Label>
                      <Textarea
                        id="bio"
                        value={profileData.bio}
                        onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
                        placeholder="Tell people about yourself..."
                        rows={3}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="customUrl">Custom URL</Label>
                      <div className="flex">
                        <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
                          connectsync.app/
                        </span>
                        <Input
                          id="customUrl"
                          value={profileData.customUrl}
                          onChange={(e) => setProfileData({ ...profileData, customUrl: e.target.value })}
                          className="rounded-l-none"
                          placeholder="your-username"
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>