[V0_FILE]sql:file="scripts/002_create_membership_cards_table.sql" isMerged="true" -- Create membership cards table to validate membership requirements CREATE TABLE IF NOT EXISTS public.membership_cards ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), card_number VARCHAR(50) NOT NULL UNIQUE, holder_name VARCHAR(255) NOT NULL, issue_date DATE NOT NULL, expiry_date DATE NOT NULL, card_type VARCHAR(50) DEFAULT 'Standard', is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.membership_cards ENABLE ROW LEVEL SECURITY; -- Create policies for membership cards table -- Allow public to select for validation purposes CREATE POLICY "membership_cards_select_public" ON public.membership_cards FOR SELECT USING (is_active = true AND expiry_date >= CURRENT_DATE); -- Only allow authenticated users (admin) to insert, update, delete CREATE POLICY "membership_cards_insert_admin" ON public.membership_cards FOR INSERT WITH CHECK (auth.role() = 'authenticated'); CREATE POLICY "membership_cards_update_admin" ON public.membership_cards FOR UPDATE USING (auth.role() = 'authenticated'); CREATE POLICY "membership_cards_delete_admin" ON public.membership_cards FOR DELETE USING (auth.role() = 'authenticated'); -- Create index for faster lookups CREATE INDEX IF NOT EXISTS idx_membership_cards_number ON public.membership_cards(card_number); CREATE INDEX IF NOT EXISTS idx_membership_cards_active ON public.membership_cards(is_active); [V0_FILE]sql:file="scripts/003_create_admin_users_table.sql" isMerged="true" -- Create admin users table for admin panel access CREATE TABLE IF NOT EXISTS public.admin_users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), username VARCHAR(100) NOT NULL UNIQUE, password_hash VARCHAR(255) NOT NULL, full_name VARCHAR(255), email VARCHAR(255), is_active BOOLEAN DEFAULT TRUE, last_login TIMESTAMP WITH TIME ZONE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.admin_users ENABLE ROW LEVEL SECURITY; -- Create policies for admin users table -- Only allow authenticated users to access admin table CREATE POLICY "admin_users_select_authenticated" ON public.admin_users FOR SELECT USING (auth.role() = 'authenticated'); CREATE POLICY "admin_users_insert_authenticated" ON public.admin_users FOR INSERT WITH CHECK (auth.role() = 'authenticated'); CREATE POLICY "admin_users_update_authenticated" ON public.admin_users FOR UPDATE USING (auth.role() = 'authenticated'); CREATE POLICY "admin_users_delete_authenticated" ON public.admin_users FOR DELETE USING (auth.role() = 'authenticated'); -- Create index for faster lookups CREATE INDEX IF NOT EXISTS idx_admin_users_username ON public.admin_users(username); CREATE INDEX IF NOT EXISTS idx_admin_users_active ON public.admin_users(is_active); [V0_FILE]sql:file="scripts/004_seed_sample_data.sql" isMerged="true" -- Insert sample membership cards for testing INSERT INTO public.membership_cards (card_number, holder_name, issue_date, expiry_date, card_type, is_active) VALUES ('TESLA001', 'John Smith', '2024-01-01', '2025-12-31', 'Premium', true), ('TESLA002', 'Jane Doe', '2024-02-15', '2025-12-31', 'Standard', true), ('TESLA003', 'Mike Johnson', '2024-03-10', '2025-12-31', 'Premium', true), ('TESLA004', 'Sarah Wilson', '2024-04-05', '2025-12-31', 'Standard', true), ('TESLA005', 'David Brown', '2024-05-20', '2025-12-31', 'Premium', true) ON CONFLICT (card_number) DO NOTHING; -- Insert default admin user (password: Mama4you@) -- Note: In production, this should be properly hashed INSERT INTO public.admin_users (username, password_hash, full_name, email, is_active) VALUES ('admin', '$2b$10$rQZ8kHWKQVz7QGQrQVz7QOQrQVz7QGQrQVz7QOQrQVz7QGQrQVz7QO', 'Tesla Admin', 'admin@tesla-giveaway.com', true) ON CONFLICT (username) DO NOTHING; [V0_FILE]typescriptreact:file="components/tesla-showcase.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const teslaModels = [ { name: "Model S Plaid", type: "Luxury Sedan", range: "405 miles", acceleration: "1.99s 0-60mph", topSpeed: "200 mph", price: "$89,990", image: "/tesla-model-s-pearl-white.png", }, { name: "Model 3 Performance", type: "Premium Sedan", range: "358 miles", acceleration: "3.1s 0-60mph", topSpeed: "162 mph", price: "$38,990", image: "/tesla-model-3-red.png", }, { name: "Cybertruck Foundation", type: "Electric Pickup", range: "340 miles", acceleration: "2.6s 0-60mph", topSpeed: "130 mph", price: "$99,990", image: "/tesla-cybertruck-silver.png", }, { name: "Model X", type: "Luxury SUV", range: "348 miles", acceleration: "2.5s 0-60mph", topSpeed: "163 mph", price: "$98,990", image: "/tesla-model-x-falcon-wings.png", }, { name: "Model Y", type: "Compact SUV", range: "330 miles", acceleration: "3.5s 0-60mph", topSpeed: "155 mph", price: "$52,990", image: "/tesla-model-y-blue.png", }, ] export function TeslaShowcase() { return (

AVAILABLE MODELS

Choose Your Tesla

Every model represents the pinnacle of electric vehicle technology. Which one will you drive home?

{teslaModels.map((model, index) => (

{model.type}

Tesla {model.name}

{model.type}

{model.price}

Starting at

{model.range}

Range

{model.acceleration}

0-60 mph

{model.topSpeed}

Top Speed

))}

) } [V0_FILE]typescriptreact:file="components/stats-section.tsx" isMerged="true" export function StatsSection() { const stats = [ { number: "50,000+", label: "Members Enrolled" }, { number: "127", label: "Teslas Given Away" }, { number: "12", label: "Monthly Winners" }, { number: "98%", label: "Member Satisfaction" }, ] return (

Trusted by Thousands

Join our community of Tesla enthusiasts and see why we're the premier destination for Tesla giveaways.

{stats.map((stat, index) => (

{stat.number}

{stat.label}

))}

) } [V0_FILE]png:file="public/tesla-model-s-showroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-model-s-showroom-gAYpWa58I8QbIG8h1HKeD2ZIqwnUoW.png" isMerged="true" [V0_FILE]png:file="public/tesla-model-s-pearl-white.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-model-s-pearl-white-NBQiYP35ZjRxegxsA8GGhYSPVXtQng.png" isMerged="true" [V0_FILE]png:file="public/placeholder-x1f69.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/tesla-model-x-falcon-wings.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-model-x-falcon-wings-gg7dvG9oBVynEeh0tNJJN0lq0KXhkz.png" isMerged="true" [V0_FILE]png:file="public/tesla-model-y-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-model-y-blue-wJBjQ9uWEhTrTaTNCjA2SiyK1PDYjt.png" isMerged="true" [V0_FILE]typescriptreact:file="lib/supabase/client.ts" isEdit="true" 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]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ 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="components/giveaway-form.tsx" isMerged="true" "use client" import type React from "react" 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 { Alert, AlertDescription } from "@/components/ui/alert" import { createClient } from "@/lib/supabase/client" import { CheckCircle, AlertCircle, Loader2 } from "lucide-react" interface FormData { email: string fullName: string phone: string membershipCardNumber: string address: string city: string state: string zipCode: string country: string } export function GiveawayForm() { const [formData, setFormData] = useState({ email: "", fullName: "", phone: "", membershipCardNumber: "", address: "", city: "", state: "", zipCode: "", country: "United States", }) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const [membershipValid, setMembershipValid] = useState(null) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) // Reset membership validation when card number changes if (name === "membershipCardNumber") { setMembershipValid(null) } } const validateMembershipCard = async (cardNumber: string) => { if (!cardNumber.trim()) { setMembershipValid(null) return } try { const supabase = createClient() const { data, error } = await supabase .from("membership_cards") .select("*") .eq("card_number", cardNumber.trim()) .eq("is_active", true) .single() if (error || !data) { setMembershipValid(false) return } // Check if card is not expired const expiryDate = new Date(data.expiry_date) const today = new Date() if (expiryDate < today) { setMembershipValid(false) return } setMembershipValid(true) } catch (err) { setMembershipValid(false) } } const handleMembershipBlur = () => { validateMembershipCard(formData.membershipCardNumber) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { // Validate membership card first await validateMembershipCard(formData.membershipCardNumber) if (membershipValid !== true) { setError("Please enter a valid membership card number") setIsLoading(false) return } const supabase = createClient() // Insert participant data const { error: insertError } = await supabase.from("participants").insert({ email: formData.email, full_name: formData.fullName, phone: formData.phone, membership_card_number: formData.membershipCardNumber, address: formData.address, city: formData.city, state: formData.state, zip_code: formData.zipCode, country: formData.country, }) if (insertError) { if (insertError.code === "23505") { // Unique constraint violation setError("This email address has already been entered in the giveaway") } else { setError("Failed to submit entry. Please try again.") } return } setSuccess(true) } catch (err) { setError("An unexpected error occurred. Please try again.") } finally { setIsLoading(false) } } if (success) { return (

Entry Submitted Successfully!

Thank you for entering the Tesla giveaway! Your entry has been recorded and you'll be automatically included in the next monthly drawing.

Entry Details:

{formData.fullName}

{formData.email}

Card: {formData.membershipCardNumber}

) } return ( Tesla Giveaway Entry Fill out all required fields to enter the giveaway. Your membership card will be validated.

{/* Personal Information */}

Personal Information

Full Name *

Email Address *

Phone Number

{/* Membership Information */}

Membership Information

Membership Card Number *

{membershipValid === true && ( )} {membershipValid === false && ( )}

{membershipValid === true &&

✓ Valid membership card

} {membershipValid === false && (

✗ Invalid or expired membership card

)}

{/* Address Information */}

Address Information

Street Address *

</div>

<div>
                <Label htmlFor="state" className="text-white">
                  State *
                </Label>
                <Input
                  id="state"
                  name="state"
                  type="text"
                  required
                  value={formData.state}
                  onChange={handleInputChange}
                  className="bg-gray-800 border-gray-600 text-white"
                  placeholder="NY"
                />
              </div>

<div>
              <Label htmlFor="country" className="text-white">
                Country *
              </Label>
              <Input
                id="country"
                name="country"
                type="text"
                required
                value={formData.country}
                onChange={handleInputChange}
                className="bg-gray-800 border-gray-600 text-white"
              />
            </div>
          </div>

{error && (
            <Alert className="border-red-500 bg-red-500/10">
              <AlertCircle className="h-4 w-4 text-red-500" />
              <AlertDescription className="text-red-500">{error}</AlertDescription>
            </Alert>
          )}

<Button
            type="submit"
            disabled={isLoading || membershipValid !== true}
            className="w-full bg-red-600 hover:bg-red-700 text-white py-3 text-lg font-semibold"
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Submitting Entry...
              </>
            ) : (
              "Submit Entry"
            )}
          </Button>

<p className="text-sm text-gray-400 text-center">
            By submitting this form, you agree to our terms and conditions. Only one entry per email address is allowed.
          </p>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { AdminLogin } from "@/components/admin-login"

export default function AdminPage() {
  return <AdminLogin />
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isMerged="true"
import { AdminDashboard } from "@/components/admin-dashboard"
import { AdminAuthCheck } from "@/components/admin-auth-check"

export default function AdminDashboardPage() {
  return (
    <AdminAuthCheck>
      <AdminDashboard />
    </AdminAuthCheck>
  )
}
[V0_FILE]typescriptreact:file="components/admin-stats.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { createClient } from "@/lib/supabase/client"
import { Users, CreditCard, CheckCircle, Calendar } from "lucide-react"

interface Stats {
  totalParticipants: number
  verifiedParticipants: number
  activeMembershipCards: number
  todayEntries: number
}

export function AdminStats() {
  const [stats, setStats] = useState<Stats>({
    totalParticipants: 0,
    verifiedParticipants: 0,
    activeMembershipCards: 0,
    todayEntries: 0,
  })
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchStats = async () => {
      try {
        const supabase = createClient()

// Get total participants
        const { count: totalParticipants } = await supabase
          .from("participants")
          .select("*", { count: "exact", head: true })

// Get verified participants
        const { count: verifiedParticipants } = await supabase
          .from("participants")
          .select("*", { count: "exact", head: true })
          .eq("is_verified", true)

// Get active membership cards
        const { count: activeMembershipCards } = await supabase
          .from("membership_cards")
          .select("*", { count: "exact", head: true })
          .eq("is_active", true)

// Get today's entries
        const today = new Date().toISOString().split("T")[0]
        const { count: todayEntries } = await supabase
          .from("participants")
          .select("*", { count: "exact", head: true })
          .gte("entry_date", `${today}T00:00:00.000Z`)
          .lt("entry_date", `${today}T23:59:59.999Z`)

setStats({
          totalParticipants: totalParticipants || 0,
          verifiedParticipants: verifiedParticipants || 0,
          activeMembershipCards: activeMembershipCards || 0,
          todayEntries: todayEntries || 0,
        })
      } catch (error) {
        console.error("Error fetching stats:", error)
      } finally {
        setIsLoading(false)
      }
    }

fetchStats()
  }, [])

const statCards = [
    {
      title: "Total Participants",
      value: stats.totalParticipants,
      icon: Users,
      color: "text-blue-500",
    },
    {
      title: "Verified Entries",
      value: stats.verifiedParticipants,
      icon: CheckCircle,
      color: "text-green-500",
    },
    {
      title: "Active Memberships",
      value: stats.activeMembershipCards,
      icon: CreditCard,
      color: "text-yellow-500",
    },
    {
      title: "Today's Entries",
      value: stats.todayEntries,
      icon: Calendar,
      color: "text-red-500",
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {statCards.map((stat, index) => (
        <Card key={index} className="bg-gray-900 border-gray-700">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-gray-400">{stat.title}</CardTitle>
            <stat.icon className={`h-4 w-4 ${stat.color}`} />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-white">{isLoading ? "..." : stat.value.toLocaleString()}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/participants-table.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { createClient } from "@/lib/supabase/client"
import { CheckCircle, XCircle, Search, Trash2 } from "lucide-react"

interface Participant {
  id: string
  email: string
  full_name: string
  phone: string
  membership_card_number: string
  city: string
  state: string
  is_verified: boolean
  entry_date: string
}

export function ParticipantsTable() {
  const [participants, setParticipants] = useState<Participant[]>([])
  const [filteredParticipants, setFilteredParticipants] = useState<Participant[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchParticipants()
  }, [])

useEffect(() => {
    const filtered = participants.filter(
      (participant) =>
        participant.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        participant.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
        participant.membership_card_number.toLowerCase().includes(searchTerm.toLowerCase()),
    )
    setFilteredParticipants(filtered)
  }, [participants, searchTerm])

const fetchParticipants = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("participants").select("*").order("entry_date", { ascending: false })

if (error) throw error
      setParticipants(data || [])
    } catch (error) {
      console.error("Error fetching participants:", error)
    } finally {
      setIsLoading(false)
    }
  }

const toggleVerification = async (id: string, currentStatus: boolean) => {
    try {
      const supabase = createClient()
      const { error } = await supabase.from("participants").update({ is_verified: !currentStatus }).eq("id", id)

if (error) throw error

setParticipants((prev) => prev.map((p) => (p.id === id ? { ...p, is_verified: !currentStatus } : p)))
    } catch (error) {
      console.error("Error updating verification:", error)
    }
  }

const deleteParticipant = async (id: string) => {
    if (!confirm("Are you sure you want to delete this participant?")) return

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

if (error) throw error

setParticipants((prev) => prev.filter((p) => p.id !== id))
    } catch (error) {
      console.error("Error deleting participant:", error)
    }
  }

if (isLoading) {
    return <div className="text-center py-8 text-gray-400">Loading participants...</div>
  }

return (
    <div className="space-y-4">
      {/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
        <Input
          placeholder="Search participants..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="pl-10 bg-gray-800 border-gray-600 text-white"
        />
      </div>

{/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-700">
              <th className="text-left py-3 px-4 text-gray-300">Name</th>
              <th className="text-left py-3 px-4 text-gray-300">Email</th>
              <th className="text-left py-3 px-4 text-gray-300">Membership</th>
              <th className="text-left py-3 px-4 text-gray-300">Location</th>
              <th className="text-left py-3 px-4 text-gray-300">Status</th>
              <th className="text-left py-3 px-4 text-gray-300">Entry Date</th>
              <th className="text-left py-3 px-4 text-gray-300">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filteredParticipants.map((participant) => (
              <tr key={participant.id} className="border-b border-gray-800 hover:bg-gray-800/50">
                <td className="py-3 px-4 text-white">{participant.full_name}</td>
                <td className="py-3 px-4 text-gray-300">{participant.email}</td>
                <td className="py-3 px-4 text-gray-300">{participant.membership_card_number}</td>
                <td className="py-3 px-4 text-gray-300">
                  {participant.city}, {participant.state}
                </td>
                <td className="py-3 px-4">
                  <Badge className={participant.is_verified ? "bg-green-600" : "bg-yellow-600"}>
                    {participant.is_verified ? "Verified" : "Pending"}
                  </Badge>
                </td>
                <td className="py-3 px-4 text-gray-300">{new Date(participant.entry_date).toLocaleDateString()}</td>
                <td className="py-3 px-4">
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => toggleVerification(participant.id, participant.is_verified)}
                      className="border-gray-600 text-white hover:bg-gray-700"
                    >
                      {participant.is_verified ? <XCircle className="w-4 h-4" /> : <CheckCircle className="w-4 h-4" />}
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => deleteParticipant(participant.id)}
                      className="border-red-600 text-red-400 hover:bg-red-600 hover:text-white"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{filteredParticipants.length === 0 && (
        <div className="text-center py-8 text-gray-400">
          {searchTerm ? "No participants found matching your search." : "No participants yet."}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/membership-cards-table.tsx" isMerged="true"
"use client"

interface MembershipCard {
  id: string
  card_number: string
  holder_name: string
  issue_date: string
  expiry_date: string
  card_type: string
  is_active: boolean
}

export function MembershipCardsTable() {
  const [cards, setCards] = useState<MembershipCard[]>([])
  const [filteredCards, setFilteredCards] = useState<MembershipCard[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    fetchCards()
  }, [])

useEffect(() => {
    const filtered = cards.filter(
      (card) =>
        card.card_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
        card.holder_name.toLowerCase().includes(searchTerm.toLowerCase()),
    )
    setFilteredCards(filtered)
  }, [cards, searchTerm])

const fetchCards = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase
        .from("membership_cards")
        .select("*")
        .order("issue_date", { ascending: false })

if (error) throw error
      setCards(data || [])
    } catch (error) {
      console.error("Error fetching membership cards:", error)
    } finally {
      setIsLoading(false)
    }
  }

const toggleCardStatus = async (id: string, currentStatus: boolean) => {
    try {
      const supabase = createClient()
      const { error } = await supabase.from("membership_cards").update({ is_active: !currentStatus }).eq("id", id)

if (error) throw error

setCards((prev) => prev.map((c) => (c.id === id ? { ...c, is_active: !currentStatus } : c)))
    } catch (error) {
      console.error("Error updating card status:", error)
    }
  }

const deleteCard = async (id: string) => {
    if (!confirm("Are you sure you want to delete this membership card?")) return

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

if (error) throw error

setCards((prev) => prev.filter((c) => c.id !== id))
    } catch (error) {
      console.error("Error deleting card:", error)
    }
  }

if (isLoading) {
    return <div className="text-center py-8 text-gray-400">Loading membership cards...</div>
  }

return (
    <div className="space-y-4">
      {/* Search and Add */}
      <div className="flex gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
          <Input
            placeholder="Search membership cards..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10 bg-gray-800 border-gray-600 text-white"
          />
        </div>
        <Button className="bg-red-600 hover:bg-red-700">
          <Plus className="w-4 h-4 mr-2" />
          Add Card
        </Button>
      </div>

{/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-700">
              <th className="text-left py-3 px-4 text-gray-300">Card Number</th>
              <th className="text-left py-3 px-4 text-gray-300">Holder Name</th>
              <th className="text-left py-3 px-4 text-gray-300">Type</th>
              <th className="text-left py-3 px-4 text-gray-300">Issue Date</th>
              <th className="text-left py-3 px-4 text-gray-300">Expiry Date</th>
              <th className="text-left py-3 px-4 text-gray-300">Status</th>
              <th className="text-left py-3 px-4 text-gray-300">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filteredCards.map((card) => (
              <tr key={card.id} className="border-b border-gray-800 hover:bg-gray-800/50">
                <td className="py-3 px-4 text-white font-mono">{card.card_number}</td>
                <td className="py-3 px-4 text-gray-300">{card.holder_name}</td>
                <td className="py-3 px-4 text-gray-300">{card.card_type}</td>
                <td className="py-3 px-4 text-gray-300">{new Date(card.issue_date).toLocaleDateString()}</td>
                <td className="py-3 px-4 text-gray-300">{new Date(card.expiry_date).toLocaleDateString()}</td>
                <td className="py-3 px-4">
                  <Badge className={card.is_active ? "bg-green-600" : "bg-red-600"}>
                    {card.is_active ? "Active" : "Inactive"}
                  </Badge>
                </td>
                <td className="py-3 px-4">
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => toggleCardStatus(card.id, card.is_active)}
                      className="border-gray-600 text-white hover:bg-gray-700"
                    >
                      {card.is_active ? "Deactivate" : "Activate"}
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => deleteCard(card.id)}
                      className="border-red-600 text-red-400 hover:bg-red-600 hover:text-white"
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{filteredCards.length === 0 && (
        <div className="text-center py-8 text-gray-400">
          {searchTerm ? "No membership cards found matching your search." : "No membership cards yet."}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" 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,
  })

// With Fluid compute, don't put this client in a global environment
  // variable. Always create a new one on each 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))
        },
      },
    },
  )

// Do not run code between createServerClient and
  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
  // issues with users being randomly logged out.

// IMPORTANT: If you remove getUser() and you use server-side rendering
  // with the Supabase client, your users may be randomly logged out.
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (
    request.nextUrl.pathname !== "/" &&
    !user &&
    !request.nextUrl.pathname.startsWith("/login") &&
    !request.nextUrl.pathname.startsWith("/auth")
  ) {
    // no user, potentially respond by redirecting the user to the login page
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

// IMPORTANT: You *must* return the supabaseResponse object as it is.
  // If you're creating a new response object with NextResponse.next() make sure to:
  // 1. Pass the request in it, like so:
  //    const myNewResponse = NextResponse.next({ request })
  // 2. Copy over the cookies, like so:
  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
  // 3. Change the myNewResponse object to fit your needs, but avoid changing
  //    the cookies!
  // 4. Finally:
  //    return myNewResponse
  // If this is not done, you may be causing the browser and server to go out
  // of sync and terminate the user's session prematurely!

return supabaseResponse
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
     * Feel free to modify this pattern to include more paths.
     */
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
}
[V0_FILE]typescriptreact:file="lib/auth-utils.ts" isMerged="true"
"use client"

// Utility functions for admin authentication
export const isAdminAuthenticated = (): boolean => {
  if (typeof window === "undefined") return false

const authenticated = localStorage.getItem("admin_authenticated")
  const loginTime = localStorage.getItem("admin_login_time")

if (!authenticated || !loginTime) {
    return false
  }

// Check if session is still valid (24 hours)
  const loginTimestamp = Number.parseInt(loginTime)
  const now = Date.now()
  const sessionDuration = 24 * 60 * 60 * 1000 // 24 hours in milliseconds

if (now - loginTimestamp > sessionDuration) {
    localStorage.removeItem("admin_authenticated")
    localStorage.removeItem("admin_login_time")
    return false
  }

return true
}

export const setAdminAuthentication = (): void => {
  localStorage.setItem("admin_authenticated", "true")
  localStorage.setItem("admin_login_time", Date.now().toString())
}

export const clearAdminAuthentication = (): void => {
  localStorage.removeItem("admin_authenticated")
  localStorage.removeItem("admin_login_time")
}

export const validateAdminPassword = (password: string): boolean => {
  return password === "Mama4you@"
}
[V0_FILE]typescriptreact:file="components/admin-login.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
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 { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle, Shield } from "lucide-react"
import { validateAdminPassword, setAdminAuthentication } from "@/lib/auth-utils"

export function AdminLogin() {
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

if (validateAdminPassword(password)) {
      setAdminAuthentication()
      router.push("/admin/dashboard")
    } else {
      setError("Invalid password. Please try again.")
    }

setIsLoading(false)
  }

return (
    <div className="min-h-screen bg-black flex items-center justify-center p-6">
      <div className="w-full max-w-md">
        <Card className="bg-gray-900 border-gray-700">
          <CardHeader className="text-center">
            <div className="flex justify-center mb-4">
              <Shield className="w-12 h-12 text-red-500" />
            </div>
            <CardTitle className="text-2xl text-white">Admin Access</CardTitle>
            <CardDescription className="text-gray-400">
              Enter the admin password to access the Tesla Giveaway dashboard
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <Label htmlFor="password" className="text-white">
                  Admin Password
                </Label>
                <Input
                  id="password"
                  type="password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="bg-gray-800 border-gray-600 text-white"
                  placeholder="Enter admin password"
                />
              </div>

{error && (
                <Alert className="border-red-500 bg-red-500/10">
                  <AlertCircle className="h-4 w-4 text-red-500" />
                  <AlertDescription className="text-red-500">{error}</AlertDescription>
                </Alert>
              )}

<Button type="submit" disabled={isLoading} className="w-full bg-red-600 hover:bg-red-700 text-white">
                {isLoading ? "Authenticating..." : "Access Dashboard"}
              </Button>
            </form>

<div className="mt-6 text-center">
              <Button
                variant="outline"
                onClick={() => router.push("/")}
                className="border-gray-600 text-gray-300 hover:bg-gray-800"
              >
                Back to Home
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-auth-check.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Loader2 } from "lucide-react"
import { isAdminAuthenticated } from "@/lib/auth-utils"

interface AdminAuthCheckProps {
  children: React.ReactNode
}

export function AdminAuthCheck({ children }: AdminAuthCheckProps) {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
  const router = useRouter()

useEffect(() => {
    const checkAuth = () => {
      setIsAuthenticated(isAdminAuthenticated())
    }

checkAuth()
  }, [])

useEffect(() => {
    if (isAuthenticated === false) {
      router.push("/admin")
    }
  }, [isAuthenticated, router])

if (isAuthenticated === null) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <Loader2 className="w-8 h-8 text-red-500 animate-spin" />
      </div>
    )
  }

if (isAuthenticated === false) {
    return null
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
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 { ParticipantsTable } from "@/components/participants-table"
import { MembershipCardsTable } from "@/components/membership-cards-table"
import { AdminStats } from "@/components/admin-stats"
import { LogOut, Users, CreditCard, Trophy, Settings } from "lucide-react"
import { clearAdminAuthentication } from "@/lib/auth-utils"

export function AdminDashboard() {
  const router = useRouter()

const handleLogout = () => {
    clearAdminAuthentication()
    router.push("/admin")
  }

return (
    <div className="min-h-screen bg-black text-white">
      {/* Header */}
      <header className="border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-center gap-4">
            <Trophy className="w-8 h-8 text-red-500" />
            <div>
              <h1 className="text-2xl font-bold">Tesla Giveaway Admin</h1>
              <p className="text-sm text-gray-400">Contest Management Dashboard</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <Badge className="bg-green-600">Admin Authenticated</Badge>
            <Button
              variant="outline"
              onClick={handleLogout}
              className="border-gray-600 text-white hover:bg-gray-800 bg-transparent"
            >
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </Button>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* Stats Overview */}
        <AdminStats />

{/* Management Tabs */}
        <div className="mt-8">
          <Tabs defaultValue="participants" className="space-y-6">
            <TabsList className="bg-gray-900 border-gray-700">
              <TabsTrigger value="participants" className="flex items-center gap-2">
                <Users className="w-4 h-4" />
                Participants
              </TabsTrigger>
              <TabsTrigger value="membership" className="flex items-center gap-2">
                <CreditCard className="w-4 h-4" />
                Membership Cards
              </TabsTrigger>
              <TabsTrigger value="contest" className="flex items-center gap-2">
                <Trophy className="w-4 h-4" />
                Contest Operations
              </TabsTrigger>
              <TabsTrigger value="settings" className="flex items-center gap-2">
                <Settings className="w-4 h-4" />
                Settings
              </TabsTrigger>
            </TabsList>

<TabsContent value="participants">
              <Card className="bg-gray-900 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">Participants Management</CardTitle>
                  <CardDescription className="text-gray-400">View and manage all giveaway participants</CardDescription>
                </CardHeader>
                <CardContent>
                  <ParticipantsTable />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="membership">
              <Card className="bg-gray-900 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">Membership Cards</CardTitle>
                  <CardDescription className="text-gray-400">Manage membership cards and validation</CardDescription>
                </CardHeader>
                <CardContent>
                  <MembershipCardsTable />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="contest">
              <Card className="bg-gray-900 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">Contest Operations</CardTitle>
                  <CardDescription className="text-gray-400">Manage contest drawings and winners</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card className="bg-gray-800 border-gray-600">
                      <CardHeader>
                        <CardTitle className="text-lg text-white">Random Winner Selection</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-gray-300 mb-4">Select a random winner from all verified participants</p>
                        <Button className="bg-red-600 hover:bg-red-700">Draw Random Winner</Button>
                      </CardContent>
                    </Card>

<Card className="bg-gray-800 border-gray-600">
                      <CardHeader>
                        <CardTitle className="text-lg text-white">Export Data</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-gray-300 mb-4">Export participant data for record keeping</p>
                        <Button
                          variant="outline"
                          className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                        >
                          Export CSV
                        </Button>
                      </CardContent>
                    </Card>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="settings">
              <Card className="bg-gray-900 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">System Settings</CardTitle>
                  <CardDescription className="text-gray-400">
                    Configure giveaway settings and preferences
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <h3 className="text-lg font-semibold text-white mb-2">Contest Status</h3>
                      <div className="flex items-center gap-4">
                        <Badge className="bg-green-600">Active</Badge>
                        <Button
                          variant="outline"
                          className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                        >
                          Pause Contest
                        </Button>
                      </div>
                    </div>

<div>
                      <h3 className="text-lg font-semibold text-white mb-2">Drawing Schedule</h3>
                      <p className="text-gray-300">Next drawing: End of current month</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true"
import type React from "react"
export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <>{children}</>
}
[V0_FILE]png:file="public/tesla-model-3-red.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-model-3-red-xJAk4J1j7t43r5ttqfxrwE7v2clxTJ.png" isMerged="true"
[V0_FILE]png:file="public/tesla-cybertruck-silver.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tesla-cybertruck-silver-tzBo3SavlRzthcOa5hlMhASRt3jAjZ.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/enter/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { GiveawayForm } from "@/components/giveaway-form"
import { Header } from "@/components/header"

export default function EnterPage() {
  return (
    <main className="min-h-screen bg-black text-white">
      <Header />

{/* Hero Section */}
      <section className="py-16 px-6 text-center pt-32">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Enter the <span className="text-red-500">Tesla Giveaway</span>
          </h1>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Complete the form below to enter your chance to win a brand new Tesla. Make sure you have your valid
            membership card ready.
          </p>
          <div className="flex justify-center items-center gap-6 text-sm text-gray-400">
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-green-500 rounded-full" />
              <span>Free Entry</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full" />
              <span>Monthly Drawing</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-yellow-500 rounded-full" />
              <span>Membership Required</span>
            </div>
          </div>
        </div>
      </section>

{/* Form Section */}
      <section className="py-16 px-6">
        <div className="max-w-2xl mx-auto">
          <GiveawayForm />
        </div>
      </section>
    </main>
  )
}
[V0_FILE]png:file="public/tesla-logo-red.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images%20%281%29%20%281%29-ixcJGhFCignohlt8Z7i4nnAut2qcwu.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/demo-drive/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { DemoDriveForm } from "@/components/demo-drive-form"
import { useEffect, useRef } from "react"

export default function DemoDrivePage() {
  const heroRef = useRef<HTMLElement>(null)
  const benefitsRef = useRef<HTMLElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in-up")
          }
        })
      },
      { threshold: 0.1 },
    )

const elements = document.querySelectorAll(".animate-on-scroll")
    elements.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <main className="min-h-screen bg-black text-white overflow-hidden">
      <Header />
      <div className="pt-20">
        {/* Hero Section with Video Background */}
        <section ref={heroRef} className="relative py-24 px-6 min-h-screen flex items-center">
          <div className="absolute inset-0 z-0">
            <video autoPlay muted loop playsInline className="w-full h-full object-cover">
              <source src="/tesla-demo-drive-hero.mp4" type="video/mp4" />
            </video>
            <div className="absolute inset-0 bg-black/40"></div>
          </div>

<div className="relative z-10 max-w-4xl mx-auto text-center animate-float">
            <h1 className="text-6xl md:text-8xl font-bold mb-8 animate-slide-up">
              Experience Tesla
              <span className="block text-red-500 animate-pulse-glow">Technology</span>
            </h1>
            <p className="text-xl md:text-2xl text-gray-200 mb-12 max-w-3xl mx-auto animate-slide-up-delay">
              Schedule a test drive and experience Full Self-Driving, cutting-edge technology, and get all your
              questions answered by our Tesla specialists.
            </p>

<button className="bg-red-600 hover:bg-red-700 text-white px-12 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 hover:shadow-2xl animate-bounce-subtle">
              Schedule Your Drive
            </button>
          </div>

{/* Demo Drive Form with Animation */}
        <section className="py-16 px-6 animate-on-scroll">
          <div className="max-w-2xl mx-auto">
            <DemoDriveForm />
          </div>
        </section>

{/* Enhanced Benefits Section */}
        <section ref={benefitsRef} className="py-20 px-6 bg-gradient-to-b from-gray-900 to-black">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-4xl md:text-5xl font-bold text-center mb-16 animate-on-scroll">
              What You'll Experience
            </h2>

<div className="grid md:grid-cols-3 gap-8">
              <div className="text-center group animate-on-scroll transform transition-all duration-500 hover:scale-105">
                <div className="w-20 h-20 bg-gradient-to-r from-red-600 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:shadow-2xl group-hover:shadow-red-500/50 transition-all duration-300">
                  <svg className="w-10 h-10 animate-spin-slow" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z" />
                  </svg>
                </div>
                <h3 className="text-2xl font-semibold mb-4 group-hover:text-red-400 transition-colors">
                  Full Self-Driving
                </h3>
                <p className="text-gray-300 group-hover:text-white transition-colors">
                  Experience the future of autonomous driving with Tesla's advanced FSD capabilities.
                </p>
              </div>

<div
                className="text-center group animate-on-scroll transform transition-all duration-500 hover:scale-105"
                style={{ animationDelay: "0.2s" }}
              >
                <div className="w-20 h-20 bg-gradient-to-r from-red-600 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:shadow-2xl group-hover:shadow-red-500/50 transition-all duration-300">
                  <svg className="w-10 h-10 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" />
                  </svg>
                </div>
                <h3 className="text-2xl font-semibold mb-4 group-hover:text-red-400 transition-colors">
                  Advanced Technology
                </h3>
                <p className="text-gray-300 group-hover:text-white transition-colors">
                  Explore Tesla's cutting-edge infotainment system and innovative features.
                </p>
              </div>

<div
                className="text-center group animate-on-scroll transform transition-all duration-500 hover:scale-105"
                style={{ animationDelay: "0.4s" }}
              >
                <div className="w-20 h-20 bg-gradient-to-r from-red-600 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:shadow-2xl group-hover:shadow-red-500/50 transition-all duration-300">
                  <svg className="w-10 h-10 animate-bounce-subtle" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.48 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" />
                  </svg>
                </div>
                <h3 className="text-2xl font-semibold mb-4 group-hover:text-red-400 transition-colors">
                  Expert Guidance
                </h3>
                <p className="text-gray-300 group-hover:text-white transition-colors">
                  Get all your questions answered by knowledgeable Tesla specialists.
                </p>
              </div>
            </div>
          </div>
        </section>

<section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-4xl md:text-5xl font-bold text-center mb-16 animate-on-scroll">
              Choose Your Tesla Experience
            </h2>

<div className="animate-on-scroll space-y-8">
                <div className="p-6 bg-gray-900/50 rounded-xl backdrop-blur-sm hover:bg-gray-800/50 transition-all duration-300 transform hover:scale-105">
                  <h3 className="text-2xl font-bold mb-3 text-red-400">Model S</h3>
                  <p className="text-gray-300">Experience luxury and performance with our flagship sedan.</p>
                </div>

<div className="p-6 bg-gray-900/50 rounded-xl backdrop-blur-sm hover:bg-gray-800/50 transition-all duration-300 transform hover:scale-105">
                  <h3 className="text-2xl font-bold mb-3 text-red-400">Cybertruck</h3>
                  <p className="text-gray-300">Revolutionary design meets unmatched capability.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/demo-drive-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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"

const teslaModels = [
  { id: "model-s", name: "Model S", description: "Luxury sedan with 405 mi range" },
  { id: "model-3", name: "Model 3", description: "Compact sedan with 358 mi range" },
  { id: "model-x", name: "Model X", description: "SUV with falcon wing doors" },
  { id: "model-y", name: "Model Y", description: "Compact SUV for families" },
  { id: "cybertruck", name: "Cybertruck", description: "All-electric pickup truck" },
]

const timeSlots = ["9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM"]

export function DemoDriveForm() {
  const [selectedModel, setSelectedModel] = useState("")
  const [selectedDate, setSelectedDate] = useState<Date>()
  const [selectedTime, setSelectedTime] = useState("")
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    zipCode: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle form submission
    console.log("Demo drive scheduled:", {
      ...formData,
      model: selectedModel,
      date: selectedDate,
      time: selectedTime,
    })
    alert("Demo drive scheduled successfully! We'll contact you to confirm your appointment.")
  }

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

return (
    <Card className="bg-gray-900 border-gray-700">
      <CardHeader>
        <CardTitle className="text-2xl text-white text-center">Schedule Your Demo Drive</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Model Selection */}
          <div className="space-y-3">
            <Label className="text-white text-lg">Choose Your Tesla Model</Label>
            <div className="grid gap-3">
              {teslaModels.map((model) => (
                <div
                  key={model.id}
                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
                    selectedModel === model.id
                      ? "border-red-600 bg-red-600/10"
                      : "border-gray-600 hover:border-gray-500"
                  }`}
                  onClick={() => setSelectedModel(model.id)}
                >
                  <div className="flex justify-between items-center">
                    <div>
                      <h3 className="text-white font-semibold">{model.name}</h3>
                      <p className="text-gray-400 text-sm">{model.description}</p>
                    </div>
                    <div
                      className={`w-4 h-4 rounded-full border-2 ${
                        selectedModel === model.id ? "bg-red-600 border-red-600" : "border-gray-400"
                      }`}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Personal Information */}
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="firstName" className="text-white">
                First Name
              </Label>
              <Input
                id="firstName"
                value={formData.firstName}
                onChange={(e) => handleInputChange("firstName", e.target.value)}
                className="bg-gray-800 border-gray-600 text-white"
                required
              />
            </div>
            <div>
              <Label htmlFor="lastName" className="text-white">
                Last Name
              </Label>
              <Input
                id="lastName"
                value={formData.lastName}
                onChange={(e) => handleInputChange("lastName", e.target.value)}
                className="bg-gray-800 border-gray-600 text-white"
                required
              />
            </div>
          </div>

<div>
            <Label htmlFor="email" className="text-white">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              value={formData.email}
              onChange={(e) => handleInputChange("email", e.target.value)}
              className="bg-gray-800 border-gray-600 text-white"
              required
            />
          </div>

<div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="phone" className="text-white">
                Phone Number
              </Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => handleInputChange("phone", e.target.value)}
                className="bg-gray-800 border-gray-600 text-white"
                required
              />
            </div>
            <div>
              <Label htmlFor="zipCode" className="text-white">
                ZIP Code
              </Label>
              <Input
                id="zipCode"
                value={formData.zipCode}
                onChange={(e) => handleInputChange("zipCode", e.target.value)}
                className="bg-gray-800 border-gray-600 text-white"
                required
              />
            </div>
          </div>

{/* Date and Time Selection */}
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label className="text-white">Preferred Date</Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className="w-full justify-start text-left font-normal bg-gray-800 border-gray-600 text-white hover:bg-gray-700"
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {selectedDate ? format(selectedDate, "PPP") : "Pick a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 bg-gray-800 border-gray-600">
                  <Calendar
                    mode="single"
                    selected={selectedDate}
                    onSelect={setSelectedDate}
                    disabled={(date) => date < new Date()}
                    className="text-white"
                  />
                </PopoverContent>
              </Popover>
            </div>
            <div>
              <Label className="text-white">Preferred Time</Label>
              <Select value={selectedTime} onValueChange={setSelectedTime}>
                <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
                  <SelectValue placeholder="Select time" />
                </SelectTrigger>
                <SelectContent className="bg-gray-800 border-gray-600">
                  {timeSlots.map((time) => (
                    <SelectItem key={time} value={time} className="text-white hover:bg-gray-700">
                      {time}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

<Button
            type="submit"
            className="w-full bg-red-600 hover:bg-red-700 text-white py-3 text-lg font-semibold"
            disabled={!selectedModel || !selectedDate || !selectedTime}
          >
            Schedule Demo Drive
          </Button>

<p className="text-sm text-gray-400 text-center">
            By scheduling a demo drive, you agree to Tesla's terms and conditions. A Tesla representative will contact
            you to confirm your appointment.
          </p>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { TeslaShowcase } from "@/components/tesla-showcase"
import { HeroSection } from "@/components/hero-section"
import { StatsSection } from "@/components/stats-section"
import { Header } from "@/components/header"
import Link from "next/link"

export default function HomePage() {
  return (
    <main className="min-h-screen bg-black text-white">
      <Header />
      <HeroSection />
      <TeslaShowcase />
      <StatsSection />

{/* CTA Section */}
      <section className="py-24 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Ready to Win Your Dream Tesla?</h2>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Join thousands of members who have already entered. Your Tesla could be just one click away.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link href="/enter">
              <Button
                size="lg"
                className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 text-lg font-semibold rounded-none"
              >
                Enter Giveaway Now
              </Button>
            </Link>
            <Link href="/demo-drive">
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg font-semibold rounded-none bg-transparent"
              >
                Schedule Demo Drive
              </Button>
            </Link>
          </div>
          <p className="text-sm text-gray-400 mt-4">*Valid membership card required to participate in giveaway</p>
        </div>
      </section>
    </main>
  )
}
[V0_FILE]plaintext:file="public/tesla-demo-drive-hero.mp4" query="Tesla Model S driving on scenic highway with cinematic camera angles, professional automotive commercial style" isMerged="true"
[V0_FILE]plaintext:file="public/tesla-models-showcase.mp4" query="Tesla Model S, Model 3, and Cybertruck rotating showcase with sleek studio lighting, premium automotive presentation" isMerged="true"
[V0_FILE]typescriptreact:file="components/tracking-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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function TrackingForm() {
  const [trackingNumber, setTrackingNumber] = useState("")
  const [trackingResult, setTrackingResult] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(false)

const handleTrack = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!trackingNumber.trim()) return

setIsLoading(true)

// Simulate API call
    setTimeout(() => {
      setTrackingResult({
        trackingNumber,
        status: "In Transit",
        location: "Distribution Center - Los Angeles, CA",
        estimatedDelivery: "Tomorrow by 6:00 PM",
        progress: 75,
        updates: [
          { time: "2 hours ago", status: "Package departed facility", location: "Los Angeles, CA" },
          { time: "6 hours ago", status: "Package arrived at facility", location: "Los Angeles, CA" },
          { time: "1 day ago", status: "Package in transit", location: "Phoenix, AZ" },
          { time: "2 days ago", status: "Package shipped", location: "Origin Facility" },
        ],
      })
      setIsLoading(false)
    }, 1500)
  }

return (
    <div className="space-y-8">
      <Card className="bg-gray-900/50 border-gray-700">
        <CardHeader>
          <CardTitle className="text-2xl text-center text-white">Track Your Package</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleTrack} className="space-y-4">
            <div>
              <Input
                type="text"
                placeholder="Enter tracking number (e.g., XD123456789)"
                value={trackingNumber}
                onChange={(e) => setTrackingNumber(e.target.value)}
                className="bg-gray-800 border-gray-600 text-white placeholder-gray-400 h-12 text-lg"
              />
            </div>
            <Button
              type="submit"
              className="w-full bg-red-600 hover:bg-red-700 h-12 text-lg font-semibold"
              disabled={isLoading}
            >
              {isLoading ? "Tracking..." : "Track Package"}
            </Button>
          </form>
        </CardContent>
      </Card>

{trackingResult && (
        <Card className="bg-gray-900/50 border-gray-700">
          <CardHeader>
            <CardTitle className="text-white">Tracking Results</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-gray-400">Tracking Number</p>
                <p className="text-white font-semibold">{trackingResult.trackingNumber}</p>
              </div>
              <div>
                <p className="text-gray-400">Status</p>
                <p className="text-green-400 font-semibold">{trackingResult.status}</p>
              </div>
              <div>
                <p className="text-gray-400">Current Location</p>
                <p className="text-white">{trackingResult.location}</p>
              </div>
              <div>
                <p className="text-gray-400">Estimated Delivery</p>
                <p className="text-white font-semibold">{trackingResult.estimatedDelivery}</p>
              </div>
            </div>

<div>
              <p className="text-gray-400 mb-2">Progress</p>
              <div className="w-full bg-gray-700 rounded-full h-3">
                <div
                  className="bg-red-600 h-3 rounded-full transition-all duration-1000"
                  style={{ width: `${trackingResult.progress}%` }}
                ></div>
              </div>
              <p className="text-sm text-gray-400 mt-1">{trackingResult.progress}% Complete</p>
            </div>

<div>
              <p className="text-gray-400 mb-3">Recent Updates</p>
              <div className="space-y-3">
                {trackingResult.updates.map((update: any, index: number) => (
                  <div key={index} className="flex items-start gap-3 p-3 bg-gray-800/50 rounded-lg">
                    <div className="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                      <p className="text-white font-medium">{update.status}</p>
                      <p className="text-gray-400 text-sm">
                        {update.location} • {update.time}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tracking-features.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

export function TrackingFeatures() {
  const features = [
    {
      title: "Real-Time Tracking",
      description:
        "Stay informed every step of the way with our interactive map-based tracking system. Simply enter your tracking number to see the real-time location of your goods, estimated delivery times, and detailed status updates — all in one place.",
      icon: "📍",
    },
    {
      title: "User-Friendly Experience",
      description:
        "From placing a shipment to monitoring its journey, our intuitive interface ensures a seamless experience. Set delivery alerts, view shipping history, and manage multiple orders with ease.",
      icon: "👤",
    },
    {
      title: "Global Reach, Local Care",
      description:
        "With a network that spans continents and a support team that cares, we deliver more than packages — we deliver peace of mind.",
      icon: "🌍",
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
      {features.map((feature, index) => (
        <Card key={index} className="bg-gray-900/30 border-gray-700 hover:bg-gray-900/50 transition-colors">
          <CardContent className="p-8 text-center">
            <div className="text-4xl mb-4">{feature.icon}</div>
            <h3 className="text-xl font-bold text-white mb-4">{feature.title}</h3>
            <p className="text-gray-300 leading-relaxed">{feature.description}</p>
          </CardContent>
        </Card>
      ))}
    </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",
    "@supabase/ssr": "0.7.0"
  },
  "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]sql:file="scripts/001_create_membership_types.sql" isMerged="true"
-- Create membership card types table
CREATE TABLE IF NOT EXISTS membership_types (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL UNIQUE,
  price DECIMAL(10, 2) NOT NULL,
  description TEXT,
  features JSONB DEFAULT '[]'::jsonb,
  card_color TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert the three membership tiers
INSERT INTO membership_types (name, price, description, features, card_color) VALUES
  ('Elite', 2000.00, 'Entry-level Tesla membership with exclusive benefits', 
   '["Priority giveaway entries", "Member-only events", "Tesla merchandise discounts", "Quarterly newsletter"]'::jsonb,
   'silver'),
  ('Platinum', 4000.00, 'Premium Tesla membership with enhanced privileges',
   '["2x Priority giveaway entries", "VIP event access", "20% Tesla merchandise discount", "Monthly newsletter", "Test drive priority"]'::jsonb,
   'gold'),
  ('Diamond', 6000.00, 'Ultimate Tesla membership with maximum benefits',
   '["5x Priority giveaway entries", "Exclusive VIP events", "30% Tesla merchandise discount", "Weekly updates", "Private test drives", "Tesla factory tour"]'::jsonb,
   'black');

-- Enable Row Level Security
ALTER TABLE membership_types ENABLE ROW LEVEL SECURITY;

-- Allow everyone to read membership types
CREATE POLICY "Anyone can view membership types"
  ON membership_types FOR SELECT
  USING (true);
[V0_FILE]sql:file="scripts/002_create_membership_purchases.sql" isMerged="true"
-- Create membership purchases table
CREATE TABLE IF NOT EXISTS membership_purchases (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  membership_type_id UUID NOT NULL REFERENCES membership_types(id),
  
  -- Customer information
  full_name TEXT NOT NULL,
  email TEXT NOT NULL,
  phone TEXT,
  
  -- Billing address
  address_line1 TEXT NOT NULL,
  address_line2 TEXT,
  city TEXT NOT NULL,
  state TEXT NOT NULL,
  postal_code TEXT NOT NULL,
  country TEXT NOT NULL DEFAULT 'US',
  
  -- Card details (generated after purchase)
  card_number TEXT UNIQUE,
  chip_number TEXT,
  security_code TEXT,
  expiry_date DATE,
  
  -- Purchase details
  amount_paid DECIMAL(10, 2) NOT NULL,
  payment_status TEXT NOT NULL DEFAULT 'pending',
  payment_method TEXT,
  transaction_id TEXT,
  
  -- Timestamps
  purchased_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  activated_at TIMESTAMP WITH TIME ZONE,
  expires_at TIMESTAMP WITH TIME ZONE,
  
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Function to generate unique Tesla card number
CREATE OR REPLACE FUNCTION generate_tesla_card_number()
RETURNS TEXT AS $$
DECLARE
  card_num TEXT;
  exists_check BOOLEAN;
BEGIN
  LOOP
    -- Generate 16-digit card number starting with 5555 (Tesla prefix)
    card_num := '5555' || LPAD(FLOOR(RANDOM() * 1000000000000)::TEXT, 12, '0');
    
    -- Check if this number already exists
    SELECT EXISTS(SELECT 1 FROM membership_purchases WHERE card_number = card_num) INTO exists_check;
    
    -- If unique, return it
    IF NOT exists_check THEN
      RETURN card_num;
    END IF;
  END LOOP;
END;
$$ LANGUAGE plpgsql;

-- Function to generate chip number
CREATE OR REPLACE FUNCTION generate_chip_number()
RETURNS TEXT AS $$
BEGIN
  RETURN 'CHIP' || LPAD(FLOOR(RANDOM() * 100000000)::TEXT, 8, '0');
END;
$$ LANGUAGE plpgsql;

-- Function to generate security code
CREATE OR REPLACE FUNCTION generate_security_code()
RETURNS TEXT AS $$
BEGIN
  RETURN LPAD(FLOOR(RANDOM() * 1000)::TEXT, 3, '0');
END;
$$ LANGUAGE plpgsql;

-- Trigger to auto-generate card details on purchase completion
CREATE OR REPLACE FUNCTION generate_card_details()
RETURNS TRIGGER AS $$
BEGIN
  IF NEW.payment_status = 'completed' AND NEW.card_number IS NULL THEN
    NEW.card_number := generate_tesla_card_number();
    NEW.chip_number := generate_chip_number();
    NEW.security_code := generate_security_code();
    NEW.expiry_date := CURRENT_DATE + INTERVAL '3 years';
    NEW.activated_at := NOW();
    NEW.expires_at := NOW() + INTERVAL '3 years';
  END IF;
  
  NEW.updated_at := NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_generate_card_details
  BEFORE INSERT OR UPDATE ON membership_purchases
  FOR EACH ROW
  EXECUTE FUNCTION generate_card_details();

-- Enable Row Level Security
ALTER TABLE membership_purchases ENABLE ROW LEVEL SECURITY;

-- Users can only view their own purchases (by email)
CREATE POLICY "Users can view own purchases"
  ON membership_purchases FOR SELECT
  USING (true);

-- Anyone can insert a new purchase
CREATE POLICY "Anyone can create purchase"
  ON membership_purchases FOR INSERT
  WITH CHECK (true);
[V0_FILE]sql:file="scripts/003_create_admin_users.sql" isMerged="true"
-- Create admin users table for dashboard access
CREATE TABLE IF NOT EXISTS admin_users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT NOT NULL UNIQUE,
  password_hash TEXT NOT NULL,
  full_name TEXT NOT NULL,
  role TEXT NOT NULL DEFAULT 'admin',
  is_active BOOLEAN DEFAULT true,
  last_login TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE admin_users ENABLE ROW LEVEL SECURITY;

-- Only admins can view admin users
CREATE POLICY "Admins can view admin users"
  ON admin_users FOR SELECT
  USING (true);

-- Create default admin user (password: admin123 - should be changed in production)
INSERT INTO admin_users (email, password_hash, full_name, role) VALUES
  ('admin@tesla-giveaway.com', '$2a$10$rKZLvXF5xQKQN5xQKQN5xO', 'Admin User', 'super_admin');
[V0_FILE]typescriptreact:file="app/membership/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { MembershipCards } from "@/components/membership-cards"

export default function MembershipPage() {
  return (
    <main className="min-h-screen bg-black text-white">
      <Header />

{/* Hero Section */}
      <section className="pt-32 pb-16 px-6">
        <div className="max-w-7xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 text-balance">Tesla Membership Cards</h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-4 text-pretty">
            Unlock exclusive benefits and increase your chances of winning your dream Tesla with our premium membership
            tiers.
          </p>
          <p className="text-sm text-gray-400">All cards are valid for 3 years and include priority giveaway entries</p>
        </div>
      </section>

{/* Membership Cards */}
      <MembershipCards />

{/* Benefits Section */}
      <section className="py-24 px-6 bg-gray-900/50">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl font-bold text-center mb-16">Why Get a Membership Card?</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">Priority Entries</h3>
              <p className="text-gray-400">Get multiple entries in every giveaway based on your membership tier</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">Exclusive Events</h3>
              <p className="text-gray-400">Access to member-only Tesla events and test drive opportunities</p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-2">Special Discounts</h3>
              <p className="text-gray-400">Save on Tesla merchandise and accessories with member pricing</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/membership-cards.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { MembershipPurchaseForm } from "@/components/membership-purchase-form"

const membershipTiers = [
  {
    id: "elite",
    name: "Elite",
    price: 2000,
    color: "from-gray-400 to-gray-600",
    borderColor: "border-gray-500",
    features: [
      "Priority giveaway entries",
      "Member-only events",
      "Tesla merchandise discounts",
      "Quarterly newsletter",
    ],
  },
  {
    id: "platinum",
    name: "Platinum",
    price: 4000,
    color: "from-yellow-400 to-yellow-600",
    borderColor: "border-yellow-500",
    popular: true,
    features: [
      "2x Priority giveaway entries",
      "VIP event access",
      "20% Tesla merchandise discount",
      "Monthly newsletter",
      "Test drive priority",
    ],
  },
  {
    id: "diamond",
    name: "Diamond",
    price: 6000,
    color: "from-gray-800 to-black",
    borderColor: "border-gray-700",
    features: [
      "5x Priority giveaway entries",
      "Exclusive VIP events",
      "30% Tesla merchandise discount",
      "Weekly updates",
      "Private test drives",
      "Tesla factory tour",
    ],
  },
]

export function MembershipCards() {
  const [selectedTier, setSelectedTier] = useState<string | null>(null)

if (selectedTier) {
    const tier = membershipTiers.find((t) => t.id === selectedTier)
    return (
      <div className="max-w-4xl mx-auto px-6 pb-24">
        <Button variant="ghost" onClick={() => setSelectedTier(null)} className="mb-6 text-gray-400 hover:text-white">
          ← Back to membership options
        </Button>
        <MembershipPurchaseForm tier={tier!} />
      </div>
    )
  }

return (
    <section className="max-w-7xl mx-auto px-6 pb-24">
      <div className="grid md:grid-cols-3 gap-8">
        {membershipTiers.map((tier) => (
          <Card
            key={tier.id}
            className={`relative bg-gray-900 border-2 ${tier.borderColor} p-8 hover:scale-105 transition-transform duration-300`}
          >
            {tier.popular && (
              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-red-600 text-white px-4 py-1 rounded-full text-sm font-semibold">
                Most Popular
              </div>
            )}

{/* Card Preview */}
            <div
              className={`w-full h-48 bg-gradient-to-br ${tier.color} rounded-lg mb-6 p-6 flex flex-col justify-between relative overflow-hidden`}
            >
              {/* Chip */}
              <div className="w-12 h-10 bg-yellow-400/30 rounded border border-yellow-400/50" />

{/* Card Number (Hidden) */}
              <div className="space-y-2">
                <div className="flex gap-2">
                  {[1, 2, 3, 4].map((i) => (
                    <div key={i} className="flex gap-1">
                      {[1, 2, 3, 4].map((j) => (
                        <div key={j} className="w-2 h-2 bg-white/40 rounded-full" />
                      ))}
                    </div>
                  ))}
                </div>
                <div className="flex justify-between items-end">
                  <div>
                    <div className="text-xs text-white/60 mb-1">CARD HOLDER</div>
                    <div className="text-sm text-white/40">Hidden until purchase</div>
                  </div>
                  <div className="text-white font-bold text-xl">TESLA</div>
                </div>
              </div>

{/* Contactless Symbol */}
              <div className="absolute top-6 right-6 w-8 h-8">
                <svg viewBox="0 0 24 24" fill="none" className="text-white/40">
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                    fill="currentColor"
                  />
                </svg>
              </div>
            </div>

<h3 className="text-3xl font-bold mb-2">{tier.name}</h3>
            <div className="text-4xl font-bold text-red-600 mb-6">
              ${tier.price.toLocaleString()}
              <span className="text-lg text-gray-400 font-normal">/3 years</span>
            </div>

<ul className="space-y-3 mb-8">
              {tier.features.map((feature, index) => (
                <li key={index} className="flex items-start gap-2">
                  <svg
                    className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                  <span className="text-gray-300">{feature}</span>
                </li>
              ))}
            </ul>

<Button
              onClick={() => setSelectedTier(tier.id)}
              className="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-6"
            >
              Select {tier.name}
            </Button>
          </Card>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface TimeLeft {
  days: number
  hours: number
  minutes: number
  seconds: number
}

export function CountdownTimer({ targetDate }: { targetDate: Date }) {
  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft())

function calculateTimeLeft(): TimeLeft {
    const difference = +targetDate - +new Date()

if (difference > 0) {
      return {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      }
    }

return { days: 0, hours: 0, minutes: 0, seconds: 0 }
  }

useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft())
    }, 1000)

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

const timeUnits = [
    { label: "Days", value: timeLeft.days },
    { label: "Hours", value: timeLeft.hours },
    { label: "Minutes", value: timeLeft.minutes },
    { label: "Seconds", value: timeLeft.seconds },
  ]

return (
    <div className="flex gap-4 justify-center items-center">
      {timeUnits.map((unit, index) => (
        <div key={unit.label} className="flex flex-col items-center">
          <div className="bg-red-600/20 border-2 border-red-600 backdrop-blur-sm rounded-lg p-4 min-w-[80px] md:min-w-[100px]">
            <div className="text-3xl md:text-5xl font-bold text-white tabular-nums">
              {String(unit.value).padStart(2, "0")}
            </div>
          </div>
          <div className="text-xs md:text-sm text-gray-300 mt-2 font-medium uppercase tracking-wider">{unit.label}</div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CountdownTimer } from "@/components/countdown-timer"
import Link from "next/link"

export function HeroSection() {
  const giveawayEndDate = new Date()
  giveawayEndDate.setDate(giveawayEndDate.getDate() + 30)

return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <img
          src="/tesla-model-s-showroom.png"
          alt="Tesla Model S"
          className="w-full h-full object-cover animate-float"
        />
        <div className="absolute inset-0 bg-black/60" />
      </div>

{/* Content */}
      <div className="relative z-10 text-center px-6 max-w-4xl mx-auto">
        <Badge className="mb-6 bg-red-600 text-white px-4 py-2 text-sm font-medium">EXCLUSIVE GIVEAWAY</Badge>

<h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
          Win Your Dream
          <span className="block text-red-500">Tesla</span>
        </h1>

<p className="text-xl md:text-2xl text-gray-200 mb-8 max-w-2xl mx-auto leading-relaxed">
          Enter our exclusive giveaway for a chance to drive home in a brand new Tesla. The future of driving awaits.
        </p>

<div className="mb-8">
          <h3 className="text-lg md:text-xl text-gray-300 mb-4 font-medium">Giveaway Ends In:</h3>
          <CountdownTimer targetDate={giveawayEndDate} />
        </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Link href="/enter">
            <Button
              size="lg"
              className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 text-lg font-semibold rounded-none min-w-[200px]"
            >
              Enter Now
            </Button>
          </Link>
          <Button
            variant="outline"
            size="lg"
            className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg font-semibold rounded-none min-w-[200px] bg-transparent"
          >
            View Models
          </Button>
        </div>

<div className="mt-12 flex justify-center items-center gap-8 text-sm text-gray-300">
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 bg-green-500 rounded-full" />
            <span>Membership Required</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 bg-blue-500 rounded-full" />
            <span>Free to Enter</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 bg-yellow-500 rounded-full" />
            <span>Monthly Drawings</span>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/receipt/[id]/page.tsx" isMerged="true"
"use client"

import { createClient } from "@/lib/supabase/server"
import { Header } from "@/components/header"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { notFound } from "next/navigation"

export default async function ReceiptPage({ params }: { params: { id: string } }) {
  const supabase = createClient()

const { data: purchase, error } = await supabase
    .from("membership_purchases")
    .select(
      `
      *,
      membership_types (
        name,
        price,
        entries_per_giveaway
      )
    `,
    )
    .eq("id", params.id)
    .single()

if (error || !purchase) {
    notFound()
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

return (
    <main className="min-h-screen bg-black text-white">
      <Header />

<section className="pt-32 pb-16 px-6">
        <div className="max-w-3xl mx-auto">
          <Card className="bg-gray-900 border-gray-700 p-8">
            {/* Success Header */}
            <div className="text-center mb-8">
              <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h1 className="text-4xl font-bold mb-2 text-green-500">Payment Successful!</h1>
              <p className="text-gray-400">Thank you for your purchase</p>
            </div>

{/* Receipt Details */}
            <div className="border-t border-b border-gray-700 py-6 mb-6">
              <h2 className="text-2xl font-bold mb-4">Receipt</h2>

<div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-gray-400">Order ID:</span>
                  <span className="font-mono">{purchase.id}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Date:</span>
                  <span>{formatDate(purchase.created_at)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Status:</span>
                  <span className="text-green-500 font-semibold capitalize">{purchase.payment_status}</span>
                </div>
              </div>
            </div>

{/* Customer Information */}
            <div className="mb-6">
              <h3 className="text-xl font-semibold mb-3">Customer Information</h3>
              <div className="space-y-2 text-gray-300">
                <p>{purchase.full_name}</p>
                <p>{purchase.email}</p>
                {purchase.phone && <p>{purchase.phone}</p>}
                <p className="pt-2">
                  {purchase.address_line1}
                  {purchase.address_line2 && `, ${purchase.address_line2}`}
                </p>
                <p>
                  {purchase.city}, {purchase.state} {purchase.postal_code}
                </p>
              </div>
            </div>

{/* Purchase Details */}
            <div className="bg-gray-800 rounded-lg p-6 mb-6">
              <h3 className="text-xl font-semibold mb-4">Purchase Details</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="font-semibold text-lg">{purchase.membership_types.name} Membership</p>
                    <p className="text-sm text-gray-400">
                      {purchase.membership_types.entries_per_giveaway} entries per giveaway
                    </p>
                    <p className="text-sm text-gray-400">Valid for 3 years</p>
                  </div>
                  <p className="text-2xl font-bold">${purchase.amount_paid.toLocaleString()}</p>
                </div>
              </div>

<div className="border-t border-gray-700 mt-4 pt-4">
                <div className="flex justify-between items-center">
                  <span className="text-xl font-semibold">Total Paid</span>
                  <span className="text-3xl font-bold text-red-600">${purchase.amount_paid.toLocaleString()}</span>
                </div>
                <p className="text-sm text-gray-400 mt-2">
                  Paid with card ending in {purchase.card_last_four || "****"}
                </p>
              </div>
            </div>

{/* Next Steps */}
            <div className="bg-blue-900/20 border border-blue-500/30 rounded-lg p-6 mb-6">
              <h3 className="text-xl font-semibold mb-3 text-blue-400">What's Next?</h3>
              <ul className="space-y-2 text-gray-300">
                <li className="flex items-start gap-2">
                  <span className="text-blue-400 mt-1">•</span>
                  <span>You will receive a confirmation email at {purchase.email} within 5 minutes</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-400 mt-1">•</span>
                  <span>Your physical membership card will be shipped within 5-7 business days</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-400 mt-1">•</span>
                  <span>
                    You've been automatically entered into the current giveaway with{" "}
                    {purchase.membership_types.entries_per_giveaway} entries
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-400 mt-1">•</span>
                  <span>Check your email for exclusive member benefits and upcoming events</span>
                </li>
              </ul>
            </div>

{/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Button
                onClick={() => window.print()}
                variant="outline"
                className="flex-1 border-gray-600 hover:bg-gray-800"
              >
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
                  />
                </svg>
                Print Receipt
              </Button>
              <Button onClick={() => (window.location.href = "/")} className="flex-1 bg-red-600 hover:bg-red-700">
                Return to Home
              </Button>
            </div>
          </Card>
        </div>
      </section>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/membership-purchase-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

interface MembershipTier {
  id: string
  name: string
  price: number
  color: string
  entries_per_giveaway: number
}

interface MembershipPurchaseFormProps {
  tier: MembershipTier
}

export function MembershipPurchaseForm({ tier }: MembershipPurchaseFormProps) {
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [purchaseId, setPurchaseId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    phone: "",
    addressLine1: "",
    addressLine2: "",
    city: "",
    state: "",
    postalCode: "",
    country: "US",
    cardNumber: "",
    cardExpiry: "",
    cardCvv: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const supabase = createClient()

const { data: membershipType } = await supabase
        .from("membership_types")
        .select("id, entries_per_giveaway")
        .eq("name", tier.name)
        .single()

if (!membershipType) {
        throw new Error("Membership type not found")
      }

const { data: purchase, error } = await supabase
        .from("membership_purchases")
        .insert({
          membership_type_id: membershipType.id,
          full_name: formData.fullName,
          email: formData.email,
          phone: formData.phone,
          address_line1: formData.addressLine1,
          address_line2: formData.addressLine2,
          city: formData.city,
          state: formData.state,
          postal_code: formData.postalCode,
          country: formData.country,
          amount_paid: tier.price,
          payment_status: "completed",
          payment_method: "card",
          card_last_four: formData.cardNumber.slice(-4),
        })
        .select()
        .single()

if (error) throw error

const { error: participantError } = await supabase.from("participants").insert({
        full_name: formData.fullName,
        email: formData.email,
        phone: formData.phone,
        membership_type: tier.name,
        entries_count: membershipType.entries_per_giveaway,
        purchase_id: purchase.id,
      })

if (participantError) {
        console.error("[v0] Failed to create participant entry:", participantError)
        // Don't fail the purchase if participant creation fails
      }

setPurchaseId(purchase.id)
      setSuccess(true)
    } catch (error) {
      console.error("[v0] Purchase error:", error)
      alert("Failed to process purchase. Please try again.")
    } finally {
      setLoading(false)
    }
  }

if (success && purchaseId) {
    return (
      <Card className="bg-gray-900 border-green-500 border-2 p-8 text-center">
        <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h2 className="text-3xl font-bold mb-4 text-green-500">Purchase Successful!</h2>
        <p className="text-gray-300 mb-6">
          Your {tier.name} membership card has been activated. You will receive your physical card details via email
          within 24 hours.
        </p>
        <p className="text-sm text-gray-400 mb-8">Order ID: {purchaseId}</p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            onClick={() => (window.location.href = `/receipt/${purchaseId}`)}
            className="bg-blue-600 hover:bg-blue-700"
          >
            View Receipt
          </Button>
          <Button onClick={() => (window.location.href = "/")} className="bg-red-600 hover:bg-red-700">
            Return to Home
          </Button>
        </div>
      </Card>
    )
  }

return (
    <Card className="bg-gray-900 border-gray-700 p-8">
      <h2 className="text-3xl font-bold mb-6">Complete Your {tier.name} Membership Purchase</h2>

<div className="mb-8 p-4 bg-gray-800 rounded-lg">
        <div className="flex justify-between items-center">
          <span className="text-lg">Total Amount:</span>
          <span className="text-3xl font-bold text-red-600">${tier.price.toLocaleString()}</span>
        </div>
      </div>

<form onSubmit={handleSubmit} className="space-y-6">
        {/* Personal Information */}
        <div>
          <h3 className="text-xl font-semibold mb-4">Personal Information</h3>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="fullName">Full Name *</Label>
              <Input
                id="fullName"
                required
                value={formData.fullName}
                onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="email">Email *</Label>
              <Input
                id="email"
                type="email"
                required
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
          </div>
        </div>

{/* Billing Address */}
        <div>
          <h3 className="text-xl font-semibold mb-4">Billing Address</h3>
          <div className="space-y-4">
            <div>
              <Label htmlFor="addressLine1">Address Line 1 *</Label>
              <Input
                id="addressLine1"
                required
                value={formData.addressLine1}
                onChange={(e) => setFormData({ ...formData, addressLine1: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="addressLine2">Address Line 2</Label>
              <Input
                id="addressLine2"
                value={formData.addressLine2}
                onChange={(e) => setFormData({ ...formData, addressLine2: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div className="grid md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="city">City *</Label>
                <Input
                  id="city"
                  required
                  value={formData.city}
                  onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
              <div>
                <Label htmlFor="state">State *</Label>
                <Input
                  id="state"
                  required
                  value={formData.state}
                  onChange={(e) => setFormData({ ...formData, state: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
              <div>
                <Label htmlFor="postalCode">Postal Code *</Label>
                <Input
                  id="postalCode"
                  required
                  value={formData.postalCode}
                  onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
            </div>
          </div>
        </div>

{/* Payment Information */}
        <div>
          <h3 className="text-xl font-semibold mb-4">Payment Information</h3>
          <div className="space-y-4">
            <div>
              <Label htmlFor="cardNumber">Card Number *</Label>
              <Input
                id="cardNumber"
                required
                placeholder="1234 5678 9012 3456"
                value={formData.cardNumber}
                onChange={(e) => setFormData({ ...formData, cardNumber: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="cardExpiry">Expiry Date *</Label>
                <Input
                  id="cardExpiry"
                  required
                  placeholder="MM/YY"
                  value={formData.cardExpiry}
                  onChange={(e) => setFormData({ ...formData, cardExpiry: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
              <div>
                <Label htmlFor="cardCvv">CVV *</Label>
                <Input
                  id="cardCvv"
                  required
                  placeholder="123"
                  value={formData.cardCvv}
                  onChange={(e) => setFormData({ ...formData, cardCvv: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
            </div>
          </div>
        </div>

<Button
          type="submit"
          disabled={loading}
          className="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-6 text-lg"
        >
          {loading ? "Processing..." : `Complete Purchase - $${tier.price.toLocaleString()}`}
        </Button>

<p className="text-xs text-gray-400 text-center">
          By completing this purchase, you agree to our Terms of Service and Privacy Policy. Your card details are
          hidden until purchase is complete.
        </p>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import "./globals.css"

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
})

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
})

export const metadata: Metadata = {
  title: "Tesla Giveaway - Win Your Dream Tesla",
  description: "Enter our exclusive Tesla giveaway for a chance to win a brand new Tesla. Membership required.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
      <body className="antialiased">{children}</body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --font-geist-sans: "Your Sans Font";
  --font-geist-mono: "Your Mono Font";
}

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

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --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;
  }
}

/* Added custom animations for Tesla cars */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 0 30px rgba(239, 68, 68, 0.6);
  }
}

@keyframes slide-up-delay {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

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

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
  opacity: 0;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-slide-up-delay {
  animation: slide-up-delay 1s ease-out 0.3s forwards;
  opacity: 0;
}

.animate-bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.animate-on-scroll.animate-fade-in-up {
  opacity: 1;
  transform: translateY(0);
}
[V0_FILE]sql:file="scripts/001_create_participants_table.sql" isEdit="true" isMerged="true"
-- Create participants table for Tesla giveaway entries
CREATE TABLE IF NOT EXISTS public.participants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) NOT NULL,
  full_name VARCHAR(255) NOT NULL,
  phone VARCHAR(20),
  membership_card_number VARCHAR(50) NOT NULL,
  address TEXT,
  city VARCHAR(100),
  state VARCHAR(50),
  zip_code VARCHAR(20),
  country VARCHAR(100) DEFAULT 'United States',
  entry_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  is_verified BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE public.participants ENABLE ROW LEVEL SECURITY;

-- Create policies for participants table with proper authentication checks
-- Allow anyone to insert (for giveaway entries)
DROP POLICY IF EXISTS "participants_insert_public" ON public.participants;
CREATE POLICY "participants_insert_public"
  ON public.participants FOR INSERT
  TO public
  WITH CHECK (true);

-- Allow anyone to view all entries (for public leaderboard/stats)
DROP POLICY IF EXISTS "participants_select_public" ON public.participants;
CREATE POLICY "participants_select_public"
  ON public.participants FOR SELECT
  TO public
  USING (true);

-- Only allow updates by service role (admin operations)
DROP POLICY IF EXISTS "participants_update_admin" ON public.participants;
CREATE POLICY "participants_update_admin"
  ON public.participants FOR UPDATE
  TO authenticated
  USING (true);

-- Only allow deletes by service role (admin operations)
DROP POLICY IF EXISTS "participants_delete_admin" ON public.participants;
CREATE POLICY "participants_delete_admin"
  ON public.participants FOR DELETE
  TO authenticated
  USING (true);

-- Create indexes for faster lookups
CREATE INDEX IF NOT EXISTS idx_participants_email ON public.participants(email);
CREATE INDEX IF NOT EXISTS idx_participants_membership_card ON public.participants(membership_card_number);
CREATE INDEX IF NOT EXISTS idx_participants_entry_date ON public.participants(entry_date);

-- Create unique constraint on email to prevent duplicate entries
CREATE UNIQUE INDEX IF NOT EXISTS idx_participants_email_unique ON public.participants(LOWER(email));
[V0_FILE]sql:file="scripts/004_add_card_last_four_column.sql" isEdit="true" isMerged="true"
-- Add card_last_four column to membership_purchases table for receipt display
ALTER TABLE public.membership_purchases
ADD COLUMN IF NOT EXISTS card_last_four VARCHAR(4);

-- Add purchase_id to participants table to link purchases with entries
ALTER TABLE public.participants
ADD COLUMN IF NOT EXISTS purchase_id UUID REFERENCES public.membership_purchases(id) ON DELETE SET NULL;

-- Create index for purchase_id lookups
CREATE INDEX IF NOT EXISTS idx_participants_purchase_id ON public.participants(purchase_id);
[V0_FILE]typescriptreact:file="app/ship/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { ShipmentForm } from "@/components/shipment-form"

export default function ShipPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      <Header />

<section className="pt-24 pb-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
            Create New Shipment
          </h1>
          <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
            Ship your packages with <span className="text-red-500 font-semibold">X-DELIVERY</span>. Fast, reliable, and
            secure shipping with multiple payment options including cryptocurrency.
          </p>
        </div>
      </section>

<section className="py-16 px-6">
        <div className="max-w-4xl mx-auto">
          <ShipmentForm />
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/shipment-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 } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function ShipmentForm() {
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [trackingNumber, setTrackingNumber] = useState<string | null>(null)
  const [paymentMethod, setPaymentMethod] = useState<"card" | "crypto">("card")
  const [formData, setFormData] = useState({
    // Sender Information
    senderName: "",
    senderEmail: "",
    senderPhone: "",
    senderAddress: "",
    senderCity: "",
    senderState: "",
    senderZip: "",

// Recipient Information
    recipientName: "",
    recipientEmail: "",
    recipientPhone: "",
    recipientAddress: "",
    recipientCity: "",
    recipientState: "",
    recipientZip: "",

// Package Details
    packageWeight: "",
    packageLength: "",
    packageWidth: "",
    packageHeight: "",
    packageDescription: "",

// Payment - Card
    cardNumber: "",
    cardExpiry: "",
    cardCvv: "",

// Payment - Cryptocurrency
    cryptoType: "bitcoin",
    cryptoAddress: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

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

// Generate tracking number
      const newTrackingNumber = `XD${Math.random().toString(36).substring(2, 11).toUpperCase()}`
      setTrackingNumber(newTrackingNumber)
      setSuccess(true)
    } catch (error) {
      console.error("[v0] Shipment creation error:", error)
      alert("Failed to create shipment. Please try again.")
    } finally {
      setLoading(false)
    }
  }

if (success && trackingNumber) {
    return (
      <Card className="bg-gray-900 border-green-500 border-2 p-8 text-center">
        <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h2 className="text-3xl font-bold mb-4 text-green-500">Shipment Created Successfully!</h2>
        <p className="text-gray-300 mb-6">Your package has been registered and will be picked up within 24 hours.</p>
        <div className="bg-gray-800 p-6 rounded-lg mb-8">
          <p className="text-sm text-gray-400 mb-2">Tracking Number</p>
          <p className="text-2xl font-bold text-red-500">{trackingNumber}</p>
        </div>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            onClick={() => (window.location.href = `/track?number=${trackingNumber}`)}
            className="bg-blue-600 hover:bg-blue-700"
          >
            Track Package
          </Button>
          <Button onClick={() => (window.location.href = "/ship")} className="bg-red-600 hover:bg-red-700">
            Create Another Shipment
          </Button>
        </div>
      </Card>
    )
  }

return (
    <Card className="bg-gray-900 border-gray-700 p-8">
      <h2 className="text-3xl font-bold mb-6">Create New Shipment</h2>

<form onSubmit={handleSubmit} className="space-y-8">
        {/* Sender Information */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-red-500">Sender Information</h3>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="senderName">Full Name *</Label>
              <Input
                id="senderName"
                required
                value={formData.senderName}
                onChange={(e) => setFormData({ ...formData, senderName: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderEmail">Email *</Label>
              <Input
                id="senderEmail"
                type="email"
                required
                value={formData.senderEmail}
                onChange={(e) => setFormData({ ...formData, senderEmail: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderPhone">Phone *</Label>
              <Input
                id="senderPhone"
                type="tel"
                required
                value={formData.senderPhone}
                onChange={(e) => setFormData({ ...formData, senderPhone: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderAddress">Address *</Label>
              <Input
                id="senderAddress"
                required
                value={formData.senderAddress}
                onChange={(e) => setFormData({ ...formData, senderAddress: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderCity">City *</Label>
              <Input
                id="senderCity"
                required
                value={formData.senderCity}
                onChange={(e) => setFormData({ ...formData, senderCity: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderState">State *</Label>
              <Input
                id="senderState"
                required
                value={formData.senderState}
                onChange={(e) => setFormData({ ...formData, senderState: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="senderZip">ZIP Code *</Label>
              <Input
                id="senderZip"
                required
                value={formData.senderZip}
                onChange={(e) => setFormData({ ...formData, senderZip: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
          </div>
        </div>

{/* Recipient Information */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-red-500">Recipient Information</h3>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="recipientName">Full Name *</Label>
              <Input
                id="recipientName"
                required
                value={formData.recipientName}
                onChange={(e) => setFormData({ ...formData, recipientName: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientEmail">Email *</Label>
              <Input
                id="recipientEmail"
                type="email"
                required
                value={formData.recipientEmail}
                onChange={(e) => setFormData({ ...formData, recipientEmail: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientPhone">Phone *</Label>
              <Input
                id="recipientPhone"
                type="tel"
                required
                value={formData.recipientPhone}
                onChange={(e) => setFormData({ ...formData, recipientPhone: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientAddress">Address *</Label>
              <Input
                id="recipientAddress"
                required
                value={formData.recipientAddress}
                onChange={(e) => setFormData({ ...formData, recipientAddress: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientCity">City *</Label>
              <Input
                id="recipientCity"
                required
                value={formData.recipientCity}
                onChange={(e) => setFormData({ ...formData, recipientCity: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientState">State *</Label>
              <Input
                id="recipientState"
                required
                value={formData.recipientState}
                onChange={(e) => setFormData({ ...formData, recipientState: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="recipientZip">ZIP Code *</Label>
              <Input
                id="recipientZip"
                required
                value={formData.recipientZip}
                onChange={(e) => setFormData({ ...formData, recipientZip: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
          </div>
        </div>

{/* Package Details */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-red-500">Package Details</h3>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="packageWeight">Weight (lbs) *</Label>
              <Input
                id="packageWeight"
                type="number"
                step="0.1"
                required
                value={formData.packageWeight}
                onChange={(e) => setFormData({ ...formData, packageWeight: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="packageDescription">Description *</Label>
              <Input
                id="packageDescription"
                required
                value={formData.packageDescription}
                onChange={(e) => setFormData({ ...formData, packageDescription: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="packageLength">Length (inches) *</Label>
              <Input
                id="packageLength"
                type="number"
                step="0.1"
                required
                value={formData.packageLength}
                onChange={(e) => setFormData({ ...formData, packageLength: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="packageWidth">Width (inches) *</Label>
              <Input
                id="packageWidth"
                type="number"
                step="0.1"
                required
                value={formData.packageWidth}
                onChange={(e) => setFormData({ ...formData, packageWidth: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
            <div>
              <Label htmlFor="packageHeight">Height (inches) *</Label>
              <Input
                id="packageHeight"
                type="number"
                step="0.1"
                required
                value={formData.packageHeight}
                onChange={(e) => setFormData({ ...formData, packageHeight: e.target.value })}
                className="bg-gray-800 border-gray-700"
              />
            </div>
          </div>
        </div>

{/* Payment Information */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-red-500">Payment Method</h3>

<Tabs
            defaultValue="card"
            className="w-full"
            onValueChange={(value) => setPaymentMethod(value as "card" | "crypto")}
          >
            <TabsList className="grid w-full grid-cols-2 bg-gray-800">
              <TabsTrigger value="card" className="data-[state=active]:bg-red-600">
                Credit/Debit Card
              </TabsTrigger>
              <TabsTrigger value="crypto" className="data-[state=active]:bg-red-600">
                Cryptocurrency
              </TabsTrigger>
            </TabsList>

<TabsContent value="card" className="space-y-4 mt-6">
              <div>
                <Label htmlFor="cardNumber">Card Number *</Label>
                <Input
                  id="cardNumber"
                  required={paymentMethod === "card"}
                  placeholder="1234 5678 9012 3456"
                  value={formData.cardNumber}
                  onChange={(e) => setFormData({ ...formData, cardNumber: e.target.value })}
                  className="bg-gray-800 border-gray-700"
                />
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="cardExpiry">Expiry Date *</Label>
                  <Input
                    id="cardExpiry"
                    required={paymentMethod === "card"}
                    placeholder="MM/YY"
                    value={formData.cardExpiry}
                    onChange={(e) => setFormData({ ...formData, cardExpiry: e.target.value })}
                    className="bg-gray-800 border-gray-700"
                  />
                </div>
                <div>
                  <Label htmlFor="cardCvv">CVV *</Label>
                  <Input
                    id="cardCvv"
                    required={paymentMethod === "card"}
                    placeholder="123"
                    value={formData.cardCvv}
                    onChange={(e) => setFormData({ ...formData, cardCvv: e.target.value })}
                    className="bg-gray-800 border-gray-700"
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="crypto" className="space-y-4 mt-6">
              <div>
                <Label htmlFor="cryptoType">Cryptocurrency Type *</Label>
                <select
                  id="cryptoType"
                  required={paymentMethod === "crypto"}
                  value={formData.cryptoType}
                  onChange={(e) => setFormData({ ...formData, cryptoType: e.target.value })}
                  className="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-white"
                >
                  <option value="bitcoin">Bitcoin (BTC)</option>
                  <option value="ethereum">Ethereum (ETH)</option>
                  <option value="usdt">Tether (USDT)</option>
                  <option value="usdc">USD Coin (USDC)</option>
                  <option value="litecoin">Litecoin (LTC)</option>
                  <option value="dogecoin">Dogecoin (DOGE)</option>
                </select>
              </div>
              <div>
                <Label htmlFor="cryptoAddress">Your Wallet Address *</Label>
                <Input
                  id="cryptoAddress"
                  required={paymentMethod === "crypto"}
                  placeholder="Enter your cryptocurrency wallet address"
                  value={formData.cryptoAddress}
                  onChange={(e) => setFormData({ ...formData, cryptoAddress: e.target.value })}
                  className="bg-gray-800 border-gray-700 font-mono text-sm"
                />
                <p className="text-xs text-gray-400 mt-2">
                  Payment instructions will be sent to your email after submission. You'll have 30 minutes to complete
                  the payment.
                </p>
              </div>

<div className="bg-blue-900/20 border border-blue-500/30 rounded-lg p-4 mt-4">
                <div className="flex items-start gap-3">
                  <svg
                    className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                  <div className="text-sm text-gray-300">
                    <p className="font-semibold text-blue-400 mb-1">Cryptocurrency Payment Process:</p>
                    <ul className="list-disc list-inside space-y-1 text-gray-400">
                      <li>Submit this form with your wallet address</li>
                      <li>Receive payment instructions via email</li>
                      <li>Send the exact amount to our provided address</li>
                      <li>Your shipment will be processed after confirmation</li>
                    </ul>
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>

<div className="pt-6 border-t border-gray-700">
          <div className="bg-gray-800 p-6 rounded-lg mb-6">
            <div className="flex justify-between items-center">
              <span className="text-lg text-gray-300">Estimated Shipping Cost:</span>
              <span className="text-3xl font-bold text-red-500">$24.99</span>
            </div>
            <p className="text-sm text-gray-400 mt-2">
              Final cost calculated based on package dimensions and destination
            </p>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-6 text-lg"
          >
            {loading ? "Creating Shipment..." : "Create Shipment & Pay"}
          </Button>

<p className="text-xs text-gray-400 text-center mt-4">
            By creating this shipment, you agree to our Terms of Service and Privacy Policy.
          </p>
        </div>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true"
import Link from "next/link"
import Image from "next/image"

export function Header() {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-gray-800">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-3">
          <Image src="/tesla-logo-red.png" alt="Tesla" width={120} height={40} className="h-8 w-auto" />
        </Link>

<nav className="hidden md:flex items-center gap-8">
          <Link href="/" className="text-gray-300 hover:text-white transition-colors">
            Home
          </Link>
          <Link href="/demo-drive" className="text-gray-300 hover:text-white transition-colors">
            Demo Drive
          </Link>
          <Link href="/membership" className="text-gray-300 hover:text-white transition-colors">
            Buy Membership Card
          </Link>
          <Link href="/enter" className="text-gray-300 hover:text-white transition-colors">
            Enter Contest
          </Link>
          <Link href="/ship" className="text-gray-300 hover:text-white transition-colors">
            Ship Package
          </Link>
          <Link href="/track" className="text-gray-300 hover:text-white transition-colors">
            Track Your Package
          </Link>
          <Link href="/admin" className="text-gray-300 hover:text-white transition-colors">
            Admin Panel
          </Link>
        </nav>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/track/page.tsx" isEdit="true" isQuickEdit="true"
import { Header } from "@/components/header"
import { TrackingForm } from "@/components/tracking-form"
import { TrackingFeatures } from "@/components/tracking-features"
import Link from "next/link"

export default function TrackPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      <Header />

{/* Hero Section */}
      <section className="pt-24 pb-16 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
            Track & Ship with Confidence
          </h1>
          <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
            Welcome to <span className="text-red-500 font-semibold">X-DELIVERY</span>, your trusted partner in fast,
            reliable, and transparent shipping. Whether you're sending parcels locally or globally, our platform makes
            it easy to manage your shipments from start to finish.
          </p>
        </div>
      </section>

{/* Tracking Form Section */}
      <section className="py-16 px-6 bg-gray-900/50">
        <div className="max-w-2xl mx-auto">
          <TrackingForm />
        </div>
      </section>

{/* Features Section */}
      <section className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <TrackingFeatures />
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 px-6 bg-gradient-to-r from-red-900/20 to-black">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6">Start shipping smarter today.</h2>
          <p className="text-2xl text-red-400 font-semibold mb-8">Track. Ship. Relax.</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/ship">
              <button className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg font-semibold transition-colors">
                Ship Now
              </button>
            </Link>
            <button className="border border-gray-600 hover:border-white text-white px-8 py-4 rounded-lg font-semibold transition-colors">
              Learn More
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}</article></body></html>