9c:I[903690,["/chat-static/_next/static/immutable/chunks/31n61ghs8rmv5.js","/chat-static/_next/static/immutable/chunks/1y2bsbsbyxhrd.js","/chat-static/_next/static/immutable/chunks/2w32a37kj0mcq.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/3jcppue8tkzp-.js","/chat-static/_next/static/immutable/chunks/0iy9i8p65rpg9.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0sxli_t5tjx17.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/1u1u6d721je5b.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2pqzsqlo20uhj.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/3my68vmtl-_et.js","/chat-static/_next/static/immutable/chunks/0_0cjja_qg_5n.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gdd26lvq120i.js","/chat-static/_next/static/immutable/chunks/286-_7hvrlp96.js","/chat-static/_next/static/immutable/chunks/296p94gz62u7b.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/2n2cl3ur75prf.js","/chat-static/_next/static/immutable/chunks/1r05hdbmn7x54.js","/chat-static/_next/static/immutable/chunks/3onxldbrh6ob_.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/2_j51em_sdudl.js","/chat-static/_next/static/immutable/chunks/37c02pbgwkg5r.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/3_0orxn412o41.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3iwjjn69p6vc6.js","/chat-static/_next/static/immutable/chunks/2k0t6m9hg03ay.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"ExplicitChatIdProvider"] 9d:I[838238,["/chat-static/_next/static/immutable/chunks/31n61ghs8rmv5.js","/chat-static/_next/static/immutable/chunks/1y2bsbsbyxhrd.js","/chat-static/_next/static/immutable/chunks/2w32a37kj0mcq.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/3jcppue8tkzp-.js","/chat-static/_next/static/immutable/chunks/0iy9i8p65rpg9.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0sxli_t5tjx17.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/1u1u6d721je5b.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2pqzsqlo20uhj.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/3my68vmtl-_et.js","/chat-static/_next/static/immutable/chunks/0_0cjja_qg_5n.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gdd26lvq120i.js","/chat-static/_next/static/immutable/chunks/286-_7hvrlp96.js","/chat-static/_next/static/immutable/chunks/296p94gz62u7b.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/2n2cl3ur75prf.js","/chat-static/_next/static/immutable/chunks/1r05hdbmn7x54.js","/chat-static/_next/static/immutable/chunks/3onxldbrh6ob_.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/2_j51em_sdudl.js","/chat-static/_next/static/immutable/chunks/37c02pbgwkg5r.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/3_0orxn412o41.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3iwjjn69p6vc6.js","/chat-static/_next/static/immutable/chunks/2k0t6m9hg03ay.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"SWRDataProvider"] 9f:[] a0:[["b_RGwMK9XdOHC",null],["b_9HTmbIoBqKF",null],["b_slUYp6hGfrM",null]] a1:[["b_RGwMK9XdOHC",{"templateVersionId":null,"templateCanonId":null}],["b_9HTmbIoBqKF",{"templateVersionId":null,"templateCanonId":null}],["b_slUYp6hGfrM",{"templateVersionId":null,"templateCanonId":null}]] a2:[["b_8pN2KG12tc7","$D2025-08-02T16:17:16.382Z"],["b_X5NDfPpZJ8L","$D2025-08-02T16:18:54.294Z"],["b_bdLwQTQvQAh","$D2025-08-02T16:21:46.206Z"],["b_X8BYqSDe3Dv","$D2025-08-02T16:26:26.803Z"],["b_zRQJqf6u5Fm","$D2025-08-02T16:28:30.559Z"],["b_twPH05jetFW","$D2025-08-02T16:34:35.266Z"],["b_9uSenwStzfr","$D2025-08-02T16:36:59.648Z"],["b_Lbd1qr1hOYa","$D2025-08-02T16:39:52.178Z"],["b_kMMZKAeQOiF","$D2025-08-02T16:45:37.343Z"],["b_hYSpdOhPkPD","$D2025-08-02T18:13:44.121Z"],["b_GKymRqbrH47","$D2025-08-02T18:27:28.590Z"],["b_jXmdTQ70RpD","$D2025-08-02T18:33:57.642Z"],["b_TFtSc7TZl9h","$D2025-08-02T18:35:31.188Z"],["b_efQFtBBh3Yd","$D2025-08-02T18:38:30.063Z"],["b_GsujuLlCwY5","$D2025-08-02T19:23:48.467Z"],["b_aKC17fi56Q3","$D2025-08-16T19:38:06.648Z"],["b_FDY5TtjOorx","$D2025-08-16T19:51:14.577Z"],["b_ODxi01ovQKf","$D2025-08-16T20:00:13.773Z"],["b_LOkg0CDUmiH","$D2025-08-19T08:14:25.823Z"],["b_UjNghlG6dq3","$D2025-08-21T15:13:49.414Z"],["b_ujVUnPQ9VDN","$D2025-09-01T10:18:55.159Z"],["b_ehzuxmV8ubj","$D2025-09-01T10:22:00.129Z"],["b_vfSloFVWpN9","$D2025-09-01T10:25:57.628Z"],["b_8UBdg4q1rO1","$D2025-09-01T10:26:46.306Z"],["b_QLyH6D3Arhq","$D2025-09-01T10:27:21.911Z"],["b_aY5ssPpp5rK","$D2025-09-01T10:37:46.104Z"],["b_O3aTyFiJZCT","$D2025-09-01T10:38:41.079Z"],["b_GBFDlc77QBF","$D2025-09-01T10:40:47.402Z"],["b_xNOPCLOxhEF","$D2025-09-01T10:50:11.001Z"],["b_NIS6UqWHzSE","$D2025-09-01T10:51:42.525Z"],["b_hdmMLi8vbQd","$D2025-09-14T06:31:41.070Z"],["b_TLk4Aq9tHm3","$D2025-09-14T06:48:40.353Z"],["b_X7QsOMpy16s","$D2025-09-14T06:55:53.832Z"],["b_kWhXdUVmzMf","$D2025-09-15T11:25:18.877Z"],["b_FcYrQfUtaOT","$D2025-09-15T11:26:05.825Z"],["b_8vfi6gwhlXf","$D2025-09-15T11:26:27.565Z"],["b_nbzPrMAsy0L","$D2025-09-15T11:29:32.124Z"],["b_DV1DmTiSIXX","$D2025-09-15T11:31:08.265Z"],["b_9Vuufz3uwrt","$D2025-09-16T10:56:12.944Z"],["b_4VfaXI9tMT4","$D2025-09-16T10:56:36.634Z"],["b_1Hj5fQZsZ5c","$D2025-09-17T10:36:56.106Z"],["b_sKZPFz2f3Gs","$D2025-09-17T10:58:36.673Z"],["b_I6nc5ORfKfZ","$D2025-09-17T11:13:41.239Z"],["b_RGwMK9XdOHC","$D2025-09-17T11:17:57.413Z"],["b_9HTmbIoBqKF","$D2025-09-17T11:21:02.164Z"],["b_slUYp6hGfrM","$D2025-09-17T11:23:24.184Z"]] a3:[["b_RGwMK9XdOHC",false],["b_9HTmbIoBqKF",false],["b_slUYp6hGfrM",false]] a4:[["b_RGwMK9XdOHC","$undefined"],["b_9HTmbIoBqKF","$undefined"],["b_slUYp6hGfrM","$undefined"]] a5:[["b_RGwMK9XdOHC",null],["b_9HTmbIoBqKF",null],["b_slUYp6hGfrM",null]] a6:[["b_RGwMK9XdOHC",true],["b_9HTmbIoBqKF",true],["b_slUYp6hGfrM",true]] a7:[["b_RGwMK9XdOHC",true],["b_9HTmbIoBqKF",true],["b_slUYp6hGfrM",true]] a8:[] a9:T458b3,[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/admin/services/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createService } from "@/lib/database" import { requireAdmin } from "@/lib/auth" export async function POST(request: NextRequest) { try { await requireAdmin() const data = await request.json() const service = await createService(data) return NextResponse.json(service) } catch (error) { return NextResponse.json({ error: "Failed to create service" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/admin/logout/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { clearAdminSession } from "@/lib/auth" export async function POST(request: NextRequest) { await clearAdminSession() return NextResponse.redirect(new URL("/admin/login", request.url)) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sonny Fizzik", description: "A replica of the Sonny Fizzik store.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="lib/auth.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { cookies } from "next/headers" import { redirect } from "next/navigation" export interface AdminUser { id: string email: string name: string role: "admin" | "super_admin" } // Simple auth system - in production, use proper JWT/session management export async function getAdminUser(): Promise { const cookieStore = await cookies() const adminSession = cookieStore.get("admin_session") if (!adminSession) { return null } // In production, verify JWT token here try { const user = JSON.parse(adminSession.value) return user } catch { return null } } export async function requireAdmin() { const user = await getAdminUser() if (!user) { redirect("/admin/login") } return user } export async function setAdminSession(user: AdminUser) { const cookieStore = await cookies() cookieStore.set("admin_session", JSON.stringify(user), { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 60 * 24 * 7, // 7 days }) } export async function clearAdminSession() { const cookieStore = await cookies() cookieStore.delete("admin_session") } // Demo credentials - in production, verify against database with hashed passwords export async function authenticate(email: string, password: string): Promise { if (email === "admin@sonnyfizzik.com" && password === "admin123") { const user = { id: "1", email: "admin@sonnyfizzik.com", name: "Admin User", role: "admin" as const, } return user } return null } [V0_FILE]typescriptreact:file="app/api/admin/login/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { setAdminSession } from "@/lib/auth" export async function POST(request: NextRequest) { try { const { email, password } = await request.json() // Demo credentials - in production, verify against database with hashed passwords if (email === "admin@sonnyfizzik.com" && password === "admin123") { const user = { id: "1", email: "admin@sonnyfizzik.com", name: "Admin User", role: "admin" as const, } await setAdminSession(user) return NextResponse.json({ success: true }) } return NextResponse.json({ error: "Invalid credentials" }, { status: 401 }) } catch (error) { return NextResponse.json({ error: "Server error" }, { status: 500 }) } } [V0_FILE]typescript:file="tailwind.config.ts" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Custom yellow color scheme yellow: { 50: "#fefce8", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/collections/gym-membership/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Check, Star, Users, Clock, Dumbbell } from "lucide-react" export default function GymMembershipPage() { const membershipPlans = [ { id: 1, title: "Basic Membership", price: "Rs. 150", duration: "Per Month", originalPrice: "Rs. 200", features: [ "Access to gym equipment", "Locker room access", "Basic fitness assessment", "Group fitness classes", "Free Wi-Fi", ], popular: false, savings: "25%", }, { id: 2, title: "Premium Membership", price: "Rs. 250", duration: "Per Month", originalPrice: "Rs. 350", features: [ "All Basic features", "Personal trainer consultation", "Nutrition guidance", "Sauna and steam room", "Guest passes (2 per month)", "Priority booking", ], popular: true, savings: "29%", }, { id: 3, title: "VIP Membership", price: "Rs. 400", duration: "Per Month", originalPrice: "Rs. 550", features: [ "All Premium features", "Unlimited personal training", "Massage therapy sessions", "Private training area access", "Unlimited guest passes", "Meal planning service", "24/7 gym access", ], popular: false, savings: "27%", }, ] const facilities = [ { icon: Dumbbell, title: "State-of-the-Art Equipment", description: "Latest fitness machines and free weights from top brands", }, { icon: Users, title: "Group Classes", description: "Yoga, Pilates, HIIT, Zumba, and more led by certified instructors", }, { icon: Clock, title: "Flexible Hours", description: "Open 6 AM to 11 PM, 7 days a week for your convenience", }, ] return (

{/* Breadcrumb */}

Home — Gym Membership

{/* Page Header */}

Gym Membership Plans

Join Sonny Fizzik and get access to world-class fitness facilities, expert guidance, and a supportive community to help you achieve your fitness goals.

{/* Membership Plans */}

{membershipPlans.map((plan) => ( {plan.popular && ( Most Popular )}

Save {plan.savings}

{plan.title}

4.8

(150+ members)

{plan.price} {plan.originalPrice}

{plan.duration}

What's Included:

{feature}

))}

{/* Facilities Section */}

World-Class Facilities

{facilities.map((facility, index) => ( {facility.title}

{facility.description}

))}

{/* Why Choose Us */}

Why Choose Sonny Fizzik?

Expert Trainers

Our certified trainers are here to guide you every step of the way, ensuring you get the most out of your workouts safely and effectively.

Community Support

Join a community of like-minded individuals who will motivate and support you on your fitness journey.

Flexible Scheduling

With extended hours and flexible membership options, we make it easy to fit fitness into your busy lifestyle.

Results Guaranteed

Our proven methods and personalized approach ensure you see real results and achieve your fitness goals.

{/* CTA Section */}

Ready to Start Your Fitness Journey?

Join hundreds of satisfied members who have transformed their lives at Sonny Fizzik.

No joining fee • Cancel anytime • Money-back guarantee

) } [V0_FILE]typescriptreact:file="app/collections/combo-plan/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Check, Star } from "lucide-react" export default function ComboPlansPage() { const comboPlans = [ { id: 1, title: "Ultimate Transformation Combo", originalPrice: "Rs. 1,500", salePrice: "Rs. 1,200", duration: "3 Months", rating: 4.9, reviews: 89, includes: [ "Personal Training Sessions (12 sessions)", "Customized Meal Plan", "Fitness Assessment", "Progress Tracking", "Supplement Guidance", "24/7 Support", ], popular: true, savings: "20%", }, { id: 2, title: "Strength & Nutrition Combo", originalPrice: "Rs. 1,000", salePrice: "Rs. 800", duration: "2 Months", rating: 4.8, reviews: 67, includes: [ "Strength Training Program", "Nutrition Consultation", "Meal Planning Guide", "Weekly Check-ins", "Exercise Form Correction", ], savings: "20%", }, { id: 3, title: "Weight Loss Accelerator", originalPrice: "Rs. 800", salePrice: "Rs. 650", duration: "6 Weeks", rating: 4.7, reviews: 124, includes: [ "HIIT Training Sessions", "Weight Loss Meal Plan", "Cardio Program", "Body Composition Analysis", "Motivation Coaching", ], savings: "19%", }, ] return (

{/* Breadcrumb */}

Home — Combo Plans

{/* Page Header */}

Combo Plans

Save more with our comprehensive combo packages. Get the best value by combining multiple services for a complete fitness transformation experience.

{/* Combo Plans Grid */}

{comboPlans.map((plan) => ( {plan.popular && ( Most Popular )}

Save {plan.savings}

{plan.title}

{plan.rating}

({plan.reviews} reviews)

{plan.salePrice} {plan.originalPrice}

{plan.duration}

What's Included:

{item}

))}

{/* Benefits Section */}

Why Choose Combo Plans?

Maximum Savings

Save up to 20% compared to purchasing individual services. Our combo plans offer the best value for comprehensive fitness solutions.

Complete Solution

Get everything you need in one package - training, nutrition, support, and guidance. No need to piece together different services.

Proven Results

Our combo plans are designed based on proven methodologies that deliver faster and more sustainable results than individual approaches.

Ongoing Support

Benefit from continuous support throughout your journey with regular check-ins, adjustments, and motivation from our expert team.

) } [V0_FILE]typescriptreact:file="app/collections/3-month-complete-body-transformation/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Calendar, Target, TrendingUp, Users } from "lucide-react" export default function TransformationPage() { const transformationPhases = [ { phase: "Month 1", title: "Foundation Building", description: "Establish proper form, build basic strength, and create healthy habits", goals: [ "Learn proper exercise techniques", "Establish workout routine", "Begin nutritional changes", "Build cardiovascular base", ], }, { phase: "Month 2", title: "Strength & Conditioning", description: "Increase intensity, build muscle, and optimize nutrition for results", goals: [ "Increase training intensity", "Focus on muscle building", "Refine nutrition plan", "Improve body composition", ], }, { phase: "Month 3", title: "Peak Performance", description: "Maximize results, fine-tune physique, and prepare for maintenance", goals: [ "Achieve peak conditioning", "Fine-tune physique", "Master advanced techniques", "Plan long-term maintenance", ], }, ] return (

{/* Breadcrumb */}

Home — 3 Month Complete Body Transformation

{/* Hero Section */}

Complete Transformation Program

3 Month Complete Body Transformation

Transform your body and life in just 90 days with our comprehensive program. Get personalized training, nutrition, and support to achieve dramatic results.

Days

24/7

Support

100%

Guaranteed

{/* Transformation Timeline */}

Your 90-Day Journey

{transformationPhases.map((phase, index) => (

{phase.phase} {phase.title} {phase.description}

Key Goals:

{goal}

))}

{/* What's Included */}

Complete Program Includes

{[ { icon: Users, title: "Personal Training", description: "36 one-on-one sessions with certified trainers", }, { icon: Target, title: "Custom Nutrition Plan", description: "Personalized meal plans and nutrition guidance", }, { icon: Calendar, title: "Weekly Check-ins", description: "Regular progress assessments and plan adjustments", }, { icon: TrendingUp, title: "Body Composition Analysis", description: "Advanced body scanning and progress tracking", }, { icon: Users, title: "24/7 Support", description: "Round-the-clock access to your transformation team" }, { icon: Target, title: "Supplement Protocol", description: "Customized supplement recommendations" }, ].map((item, index) => ( {item.title}

{item.description}

))}

{/* Success Stories */}

Success Stories

{[ { name: "Ahmed K.", result: "Lost 25kg", time: "90 days" }, { name: "Sarah M.", result: "Gained 8kg muscle", time: "90 days" }, { name: "Omar R.", result: "Body fat: 25% → 12%", time: "90 days" }, ].map((story, index) => (

{story.name}

{story.result}

in {story.time}

))}

{/* CTA Section */}

Ready to Transform Your Life?

Join hundreds of successful transformations. Start your 90-day journey today.

Money-back guarantee if you don't see results

) } [V0_FILE]typescriptreact:file="app/collections/customized-plans/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { User, Target, Clock, Zap } from "lucide-react" export default function CustomizedPlansPage() { const planTypes = [ { id: 1, title: "Weight Loss Plan", description: "Customized program focused on sustainable weight loss and fat burning", price: "Rs. 800", duration: "8 weeks", features: ["Calorie deficit planning", "Cardio optimization", "Strength training", "Meal timing"], }, { id: 2, title: "Muscle Building Plan", description: "Designed to maximize muscle growth and strength gains", price: "Rs. 900", duration: "12 weeks", features: ["Progressive overload", "Hypertrophy focus", "Nutrition for gains", "Recovery protocols"], }, { id: 3, title: "Athletic Performance", description: "Sport-specific training to enhance athletic performance", price: "Rs. 1,000", duration: "10 weeks", features: ["Sport-specific drills", "Power development", "Agility training", "Injury prevention"], }, { id: 4, title: "Rehabilitation Plan", description: "Safe return to fitness after injury with medical clearance", price: "Rs. 750", duration: "6-12 weeks", features: ["Medical consultation", "Gradual progression", "Pain management", "Functional movement"], }, ] return (

{/* Breadcrumb */}

Home — Customized Plans

{/* Page Header */}

Customized Fitness Plans

Get a fitness plan designed specifically for you. Our experts create personalized programs based on your goals, fitness level, schedule, and preferences.

{/* Plan Types */}

Choose Your Plan Type

{planTypes.map((plan) => (

{plan.title} {plan.description}

{plan.price} {plan.duration}

{feature}

))}

{/* Customization Process */}

How It Works

{[ { icon: User, step: "1", title: "Assessment", description: "Complete detailed fitness and health assessment", }, { icon: Target, step: "2", title: "Goal Setting", description: "Define specific, measurable fitness objectives", }, { icon: Zap, step: "3", title: "Plan Creation", description: "Expert creates your personalized program" }, { icon: Clock, step: "4", title: "Implementation", description: "Start your journey with ongoing support", }, ].map((item, index) => (

{item.step}

{item.title}

{item.description}

))}

{/* Consultation Form */}

Get Your Custom Plan Fill out this form to get started with your personalized fitness plan

First Name

Last Name

Phone Number

Primary Fitness Goal

Fitness Experience

Weekly Availability

Additional Notes

</div>
            </CardContent>
            <CardFooter>
              <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Get My Custom Plan</Button>
            </CardFooter>
          </Card>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/fitness-guide-books/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, Download, BookOpen, Users } from "lucide-react"

export default function FitnessGuideBooksPage() {
  const books = [
    {
      id: 1,
      title: "Complete Beginner's Guide to Fitness",
      author: "Sonny Fizzik Team",
      price: "Rs. 99",
      originalPrice: "Rs. 149",
      rating: 4.8,
      reviews: 234,
      pages: 120,
      format: "Digital PDF",
      description: "Everything you need to start your fitness journey from absolute zero to confident gym-goer.",
      topics: ["Basic exercises", "Gym etiquette", "Nutrition basics", "Goal setting", "Progress tracking"],
      bestseller: true,
    },
    {
      id: 2,
      title: "Advanced Strength Training Manual",
      author: "Coach Ahmed",
      price: "Rs. 149",
      originalPrice: "Rs. 199",
      rating: 4.9,
      reviews: 156,
      pages: 180,
      format: "Digital PDF + Videos",
      description: "Master advanced techniques and programming for serious strength gains.",
      topics: ["Periodization", "Advanced techniques", "Program design", "Competition prep", "Injury prevention"],
    },
    {
      id: 3,
      title: "Nutrition for Fat Loss",
      author: "Dr. Sarah Nutrition",
      price: "Rs. 79",
      originalPrice: "Rs. 119",
      rating: 4.7,
      reviews: 189,
      pages: 95,
      format: "Digital PDF",
      description: "Science-based approach to sustainable fat loss through proper nutrition.",
      topics: ["Calorie cycling", "Macro tracking", "Meal timing", "Supplements", "Metabolic health"],
    },
    {
      id: 4,
      title: "Home Workout Bible",
      author: "Fitness Team",
      price: "Rs. 69",
      originalPrice: "Rs. 99",
      rating: 4.6,
      reviews: 298,
      pages: 85,
      format: "Digital PDF + Video Library",
      description: "Complete guide to effective workouts using minimal equipment at home.",
      topics: [
        "Bodyweight exercises",
        "Equipment alternatives",
        "Workout routines",
        "Space optimization",
        "Family fitness",
      ],
    },
    {
      id: 5,
      title: "Mental Toughness in Fitness",
      author: "Coach Omar",
      price: "Rs. 89",
      originalPrice: "Rs. 129",
      rating: 4.8,
      reviews: 167,
      pages: 110,
      format: "Digital PDF + Audio",
      description: "Develop the mindset needed to achieve your fitness goals and overcome obstacles.",
      topics: ["Goal psychology", "Motivation techniques", "Habit formation", "Overcoming plateaus", "Mindfulness"],
    },
    {
      id: 6,
      title: "Competition Preparation Guide",
      author: "Pro Team",
      price: "Rs. 199",
      originalPrice: "Rs. 299",
      rating: 4.9,
      reviews: 89,
      pages: 200,
      format: "Digital PDF + Meal Plans",
      description: "Complete guide for preparing for bodybuilding and fitness competitions.",
      topics: ["Peak week", "Posing practice", "Stage presence", "Cutting protocols", "Recovery strategies"],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Page Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold mb-4">Fitness Guide Books</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Expand your fitness knowledge with our comprehensive collection of digital guides. Written by certified
            trainers and nutrition experts to help you achieve your goals.
          </p>
        </div>

{/* Books Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {books.map((book) => (
            <Card key={book.id} className="bg-gray-800 border-gray-700 relative">
              {book.bestseller && (
                <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700">Bestseller</Badge>
              )}
              <CardHeader>
                <div className="w-full h-64 bg-gray-700 rounded-lg mb-4 flex items-center justify-center">
                  <BookOpen className="h-16 w-16 text-yellow-500" />
                </div>
                <CardTitle className="text-white text-lg">{book.title}</CardTitle>
                <CardDescription className="text-gray-400">
                  <div className="flex items-center justify-between mb-2">
                    <span>by {book.author}</span>
                    <div className="flex items-center">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="ml-1 text-sm">{book.rating}</span>
                      <span className="ml-1 text-sm">({book.reviews})</span>
                    </div>
                  </div>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <div className="flex items-center space-x-2 mb-2">
                    <span className="text-xl font-bold text-white">{book.price}</span>
                    {book.originalPrice && (
                      <span className="text-sm text-gray-400 line-through">{book.originalPrice}</span>
                    )}
                  </div>
                  <div className="flex items-center space-x-4 text-sm text-gray-400 mb-3">
                    <span>{book.pages} pages</span>
                    <span>{book.format}</span>
                  </div>
                </div>
                <p className="text-gray-300 text-sm mb-4">{book.description}</p>
                <div>
                  <h4 className="font-semibold text-white mb-2 text-sm">What You'll Learn:</h4>
                  <ul className="space-y-1">
                    {book.topics.slice(0, 3).map((topic, index) => (
                      <li key={index} className="text-xs text-gray-400">
                        • {topic}
                      </li>
                    ))}
                    {book.topics.length > 3 && (
                      <li className="text-xs text-gray-400">+ {book.topics.length - 3} more topics</li>
                    )}
                  </ul>
                </div>
              </CardContent>
              <CardFooter className="flex flex-col space-y-2">
                <Button className="w-full bg-yellow-600 hover:bg-yellow-700">
                  <Download className="h-4 w-4 mr-2" />
                  Buy & Download
                </Button>
                <Button
                  variant="outline"
                  className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  Preview
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>

{/* Why Choose Our Guides */}
        <section className="mt-16 bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-8 text-center">Why Choose Our Fitness Guides?</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <Users className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Expert Authors</h3>
              <p className="text-gray-400">
                Written by certified trainers, nutritionists, and fitness professionals with years of experience.
              </p>
            </div>
            <div className="text-center">
              <BookOpen className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Practical Content</h3>
              <p className="text-gray-400">
                No fluff - just actionable advice and proven strategies you can implement immediately.
              </p>
            </div>
            <div className="text-center">
              <Download className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Instant Access</h3>
              <p className="text-gray-400">
                Download immediately after purchase. Access your guides anytime, anywhere on any device.
              </p>
            </div>
          </div>
        </section>

{/* Bundle Offer */}
        <section className="mt-16">
          <Card className="bg-gradient-to-r from-yellow-600 to-yellow-700 border-yellow-500">
            <CardHeader className="text-center">
              <Badge className="mx-auto mb-4 bg-white text-yellow-600">Limited Time Offer</Badge>
              <CardTitle className="text-white text-2xl">Complete Fitness Library Bundle</CardTitle>
              <CardDescription className="text-yellow-100">Get all 6 fitness guides for one low price</CardDescription>
            </CardHeader>
            <CardContent className="text-center">
              <div className="mb-4">
                <span className="text-4xl font-bold text-white">Rs. 399</span>
                <span className="text-xl text-yellow-200 line-through ml-4">Rs. 799</span>
              </div>
              <p className="text-yellow-100 mb-6">Save 50% when you buy the complete collection</p>
              <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100">
                Get Complete Bundle
              </Button>
            </CardContent>
          </Card>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/weight-loss-meal-26-days/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
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 { Star, Clock, Users, CheckCircle, Utensils, Calendar } from "lucide-react"

export default function WeightLossMealPage() {
  const features = [
    "26 days of complete meal plans",
    "Grocery shopping lists included",
    "Macro-balanced recipes",
    "Prep time under 30 minutes",
    "Family-friendly options",
    "Vegetarian alternatives",
    "Nutritionist approved",
    "Mobile-friendly format",
  ]

const weeklyBreakdown = [
    {
      week: "Week 1-2",
      title: "Foundation Phase",
      description: "Establish healthy eating habits and reduce cravings",
      meals: ["Protein-rich breakfasts", "Balanced lunches", "Light dinners", "Healthy snacks"],
    },
    {
      week: "Week 3-4",
      title: "Acceleration Phase",
      description: "Boost metabolism and increase fat burning",
      meals: ["Metabolism boosters", "Fat-burning combos", "Energy-sustaining meals", "Recovery foods"],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

<main className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <div className="text-sm text-gray-400 mb-6">
          <a href="/" className="hover:text-white underline">
            Home
          </a>
          <span className="mx-2">—</span>
          <a href="/collections/fitness-guide-books" className="hover:text-white underline">
            Products
          </a>
          <span className="mx-2">—</span>
          <span>Weight Loss Meal Plan 26 Days</span>
        </div>

{/* Product Header */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12 sm:mb-16">
          <div>
            <div className="bg-gray-700 rounded-lg h-96 mb-4">
              <img
                src="/placeholder.svg?height=400&width=500&text=Weight+Loss+Meal+Plan"
                alt="Weight Loss Meal Plan"
                className="w-full h-full object-cover rounded-lg"
              />
            </div>
            <div className="grid grid-cols-3 gap-2">
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-gray-700 rounded h-24">
                  <img
                    src={`/placeholder-meal.png?height=100&width=150&text=Meal+${i}`}
                    alt={`Meal example ${i}`}
                    className="w-full h-full object-cover rounded"
                  />
                </div>
              ))}
            </div>
          </div>

<div>
            <Badge className="mb-4 bg-green-600 hover:bg-green-700">Nutritionist Approved</Badge>
            <h1 className="text-4xl font-bold mb-4">Weight Loss Meal Plan - 26 Days</h1>

<div className="flex items-center space-x-4 mb-4">
              <div className="flex items-center">
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <span className="ml-2 text-sm">4.9 (187 reviews)</span>
              </div>
            </div>

<p className="text-gray-300 mb-6 text-lg">
              Transform your body in just 26 days with our scientifically designed meal plan. Lose weight sustainably
              while enjoying delicious, easy-to-prepare meals that fit your lifestyle.
            </p>

<div className="grid grid-cols-3 gap-2 sm:gap-4 mb-6">
              <div className="text-center p-3 bg-gray-800 rounded">
                <Calendar className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">26 Days</div>
                <div className="text-xs text-gray-400">Complete Plan</div>
              </div>
              <div className="text-center p-3 bg-gray-800 rounded">
                <Utensils className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">78 Recipes</div>
                <div className="text-xs text-gray-400">Breakfast, Lunch, Dinner</div>
              </div>
              <div className="text-center p-3 bg-gray-800 rounded">
                <Clock className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">{"<30 min"}</div>
                <div className="text-xs text-gray-400">Prep Time</div>
              </div>
            </div>

<div className="space-y-4 mb-8">
              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
                <Button size="lg" className="w-full bg-yellow-600 hover:bg-yellow-700">
                  Get Your Meal Plan - Rs. 199
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  Preview Sample Meals
                </Button>
              </div>
            </div>

<div className="bg-gray-800 rounded-lg p-4">
              <h3 className="font-semibold mb-2 flex items-center">
                <CheckCircle className="h-5 w-5 text-green-500 mr-2" />
                30-Day Money Back Guarantee
              </h3>
              <p className="text-sm text-gray-400">
                Not satisfied? Get a full refund within 30 days, no questions asked.
              </p>
            </div>
          </div>
        </div>

{/* Product Details Tabs */}
        <Tabs defaultValue="overview" className="mb-16">
          <TabsList className="grid w-full grid-cols-2 sm:grid-cols-4 bg-gray-800">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="plan">Meal Plan</TabsTrigger>
            <TabsTrigger value="nutrition">Nutrition</TabsTrigger>
            <TabsTrigger value="reviews">Reviews</TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="mt-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div>
                <h3 className="text-2xl font-bold mb-4">What's Included</h3>
                <ul className="space-y-3">
                  {features.map((feature, index) => (
                    <li key={index} className="flex items-center">
                      <CheckCircle className="h-5 w-5 text-green-500 mr-3" />
                      <span className="text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-2xl font-bold mb-4">Perfect For</h3>
                <div className="space-y-4">
                  <div className="flex items-start">
                    <Users className="h-6 w-6 text-yellow-500 mr-3 mt-1" />
                    <div>
                      <h4 className="font-semibold">Busy Professionals</h4>
                      <p className="text-gray-400 text-sm">Quick, healthy meals that fit your schedule</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <Users className="h-6 w-6 text-yellow-500 mr-3 mt-1" />
                    <div>
                      <h4 className="font-semibold">Weight Loss Beginners</h4>
                      <p className="text-gray-400 text-sm">Simple, effective approach to healthy eating</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <Users className="h-6 w-6 text-yellow-500 mr-3 mt-1" />
                    <div>
                      <h4 className="font-semibold">Families</h4>
                      <p className="text-gray-400 text-sm">Kid-friendly options the whole family will love</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

<TabsContent value="plan" className="mt-8">
            <h3 className="text-2xl font-bold mb-6">26-Day Breakdown</h3>
            <div className="space-y-6">
              {weeklyBreakdown.map((week, index) => (
                <Card key={index} className="bg-gray-800 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-white">
                      {week.week}: {week.title}
                    </CardTitle>
                    <CardDescription className="text-gray-400">{week.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      {week.meals.map((meal, mealIndex) => (
                        <div key={mealIndex} className="bg-gray-700 p-3 rounded text-center">
                          <div className="text-sm font-medium">{meal}</div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="nutrition" className="mt-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <Card className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">Daily Nutrition Targets</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between">
                      <span>Calories</span>
                      <span className="font-semibold">1,200-1,500</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Protein</span>
                      <span className="font-semibold">30-35%</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Carbohydrates</span>
                      <span className="font-semibold">35-40%</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Healthy Fats</span>
                      <span className="font-semibold">25-30%</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
              <Card className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-white">Key Benefits</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      Sustainable weight loss
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      Improved energy levels
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      Better digestion
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      Reduced cravings
                    </li>
                    <li className="flex items-center">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      Balanced blood sugar
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="reviews" className="mt-8">
            <div className="space-y-6">
              {[
                {
                  name: "Fatima A.",
                  rating: 5,
                  review: "Lost 8kg in 26 days! The meals were delicious and easy to prepare. Highly recommend!",
                  date: "2 weeks ago",
                },
                {
                  name: "Mohammed K.",
                  rating: 5,
                  review: "Finally a meal plan that works for busy people. My whole family loved the recipes.",
                  date: "1 month ago",
                },
                {
                  name: "Aisha M.",
                  rating: 4,
                  review: "Great variety of meals. Some prep took longer than 30 minutes but results were worth it.",
                  date: "3 weeks ago",
                },
              ].map((review, index) => (
                <Card key={index} className="bg-gray-800 border-gray-700">
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <h4 className="font-semibold text-white">{review.name}</h4>
                        <div className="flex items-center">
                          {[...Array(review.rating)].map((_, i) => (
                            <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                          ))}
                        </div>
                      </div>
                      <span className="text-sm text-gray-400">{review.date}</span>
                    </div>
                    <p className="text-gray-300">{review.review}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>

{/* CTA Section */}
        <section className="text-center bg-yellow-600 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-4">Ready to Start Your Weight Loss Journey?</h2>
          <p className="text-lg mb-6 opacity-90">
            Join thousands who have transformed their bodies with our proven meal plan
          </p>
          <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100">
            Get Your Meal Plan Now - Rs. 199
          </Button>
          <p className="text-sm mt-4 opacity-80">Instant download • 30-day money-back guarantee</p>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/competition-preperation/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Star, Trophy, Target, Users, CheckCircle } from "lucide-react"

export default function CompetitionPreparationPage() {
  const phases = [
    {
      phase: "Phase 1",
      title: "Foundation (Weeks 1-4)",
      description: "Build muscle base and establish training routine",
      progress: 25,
      goals: ["Muscle building", "Strength foundation", "Habit formation", "Initial assessment"],
    },
    {
      phase: "Phase 2",
      title: "Development (Weeks 5-8)",
      description: "Increase intensity and refine technique",
      progress: 50,
      goals: ["Strength gains", "Technique refinement", "Conditioning", "Progress tracking"],
    },
    {
      phase: "Phase 3",
      title: "Peak (Weeks 9-12)",
      description: "Final preparation and competition readiness",
      progress: 75,
      goals: ["Peak conditioning", "Posing practice", "Mental preparation", "Final adjustments"],
    },
    {
      phase: "Competition",
      title: "Show Day",
      description: "Execute your preparation on stage",
      progress: 100,
      goals: ["Stage presence", "Confident posing", "Peak physique", "Enjoy the moment"],
    },
  ]

const packages = [
    {
      id: 1,
      title: "Basic Competition Prep",
      price: "Rs. 2,500",
      duration: "12 weeks",
      features: [
        "Custom training program",
        "Basic nutrition plan",
        "Weekly check-ins",
        "Posing basics guide",
        "Email support",
      ],
    },
    {
      id: 2,
      title: "Premium Competition Prep",
      price: "Rs. 4,000",
      duration: "16 weeks",
      features: [
        "Personalized training & nutrition",
        "Bi-weekly video calls",
        "Advanced posing coaching",
        "Supplement protocol",
        "Peak week strategy",
        "24/7 support",
      ],
      popular: true,
    },
    {
      id: 3,
      title: "Elite Competition Prep",
      price: "Rs. 6,500",
      duration: "20 weeks",
      features: [
        "Complete 1-on-1 coaching",
        "Weekly in-person sessions",
        "Professional posing coach",
        "Show day support",
        "Post-competition plan",
        "Unlimited support",
      ],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

<main className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <div className="text-sm text-gray-400 mb-6">
          <a href="/" className="hover:text-white underline">
            Home
          </a>
          <span className="mx-2">—</span>
          <a href="/collections" className="hover:text-white underline">
            Products
          </a>
          <span className="mx-2">—</span>
          <span>Competition Preparation</span>
        </div>

{/* Hero Section */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
          <div>
            <Badge className="mb-4 bg-yellow-600 hover:bg-yellow-700">
              <Trophy className="h-4 w-4 mr-2" />
              Competition Ready
            </Badge>
            <h1 className="text-4xl font-bold mb-4">Competition Preparation Program</h1>

<div className="flex items-center space-x-4 mb-4">
              <div className="flex items-center">
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <Star className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                <span className="ml-2 text-sm">5.0 (43 reviews)</span>
              </div>
            </div>

<p className="text-gray-300 mb-6 text-lg">
              Take your physique to the competition stage with our comprehensive preparation program. Get expert
              coaching, personalized plans, and the support you need to compete with confidence.
            </p>

<div className="grid grid-cols-3 gap-4 mb-8">
              <div className="text-center p-3 bg-gray-800 rounded">
                <Trophy className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">Pro Coaches</div>
                <div className="text-xs text-gray-400">Certified Experts</div>
              </div>
              <div className="text-center p-3 bg-gray-800 rounded">
                <Target className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">Custom Plans</div>
                <div className="text-xs text-gray-400">Tailored for You</div>
              </div>
              <div className="text-center p-3 bg-gray-800 rounded">
                <Users className="h-6 w-6 text-yellow-500 mx-auto mb-2" />
                <div className="text-sm font-semibold">24/7 Support</div>
                <div className="text-xs text-gray-400">Always Available</div>
              </div>
            </div>

<Button size="lg" className="bg-yellow-600 hover:bg-yellow-700 mr-4">
              Start Your Prep Journey
            </Button>
            <Button variant="outline" size="lg" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
              Free Consultation
            </Button>
          </div>

{/* Preparation Timeline */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">Your Competition Journey</h2>
          <div className="space-y-6">
            {phases.map((phase, index) => (
              <Card key={index} className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <Badge variant="secondary" className="mb-2">
                        {phase.phase}
                      </Badge>
                      <CardTitle className="text-white">{phase.title}</CardTitle>
                      <CardDescription className="text-gray-400">{phase.description}</CardDescription>
                    </div>
                    <div className="text-right">
                      <div className="text-2xl font-bold text-white mb-2">{phase.progress}%</div>
                      <Progress value={phase.progress} className="w-24" />
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {phase.goals.map((goal, goalIndex) => (
                      <div key={goalIndex} className="flex items-center text-sm text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        {goal}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

{/* Package Options */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">Choose Your Preparation Package</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {packages.map((pkg) => (
              <Card key={pkg.id} className="bg-gray-800 border-gray-700 relative">
                {pkg.popular && (
                  <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700">Most Popular</Badge>
                )}
                <CardHeader>
                  <CardTitle className="text-white">{pkg.title}</CardTitle>
                  <CardDescription className="text-gray-400">{pkg.duration} program</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-6">
                    <span className="text-3xl font-bold text-white">{pkg.price}</span>
                  </div>
                  <ul className="space-y-3">
                    {pkg.features.map((feature, index) => (
                      <li key={index} className="flex items-center text-sm text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-3" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Choose This Package</Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </section>

{/* Success Stories */}
        <section className="mb-16 bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-8 text-center">Competition Success Stories</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: "Alex M.", achievement: "1st Place Men's Physique", competition: "Dubai Championship 2024" },
              { name: "Layla K.", achievement: "2nd Place Bikini", competition: "UAE Fitness Expo 2024" },
              { name: "Omar R.", achievement: "Overall Winner", competition: "Regional Bodybuilding 2024" },
            ].map((story, index) => (
              <div key={index} className="text-center">
                <div className="bg-gray-700 rounded-lg h-48 mb-4">
                  <img
                    src={`/placeholder_svg.png?height=200&width=200&text=${story.name}+Competition`}
                    alt={`${story.name} competition`}
                    className="w-full h-full object-cover rounded-lg"
                  />
                </div>
                <h3 className="font-semibold text-white">{story.name}</h3>
                <p className="text-yellow-500 font-bold">{story.achievement}</p>
                <p className="text-gray-400 text-sm">{story.competition}</p>
              </div>
            ))}
          </div>
        </section>

{/* What's Included */}
        <Tabs defaultValue="training" className="mb-16">
          <TabsList className="grid w-full grid-cols-4 bg-gray-800">
            <TabsTrigger value="training">Training</TabsTrigger>
            <TabsTrigger value="nutrition">Nutrition</TabsTrigger>
            <TabsTrigger value="posing">Posing</TabsTrigger>
            <TabsTrigger value="support">Support</TabsTrigger>
          </TabsList>

<TabsContent value="training" className="mt-8">
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Competition Training Program</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold text-white mb-3">Training Focus</h4>
                    <ul className="space-y-2">
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Muscle symmetry and proportion
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Stage-ready conditioning
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Weak point improvement
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Peak week protocols
                      </li>
                    </ul>
                  </div>
                  <div className="bg-gray-700 rounded-lg h-48">
                    <img
                      src="/placeholder.svg?height=200&width=300&text=Training+Program"
                      alt="Training Program"
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="nutrition" className="mt-8">
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Competition Nutrition Plan</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold text-white mb-3">Nutrition Strategy</h4>
                    <ul className="space-y-2">
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Precise macro calculations
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Carb cycling protocols
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Water manipulation
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Supplement timing
                      </li>
                    </ul>
                  </div>
                  <div className="bg-gray-700 rounded-lg h-48">
                    <img
                      src="/placeholder.svg?height=200&width=300&text=Nutrition+Plan"
                      alt="Nutrition Plan"
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="posing" className="mt-8">
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Professional Posing Coaching</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold text-white mb-3">Posing Mastery</h4>
                    <ul className="space-y-2">
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Mandatory poses perfection
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Stage presence training
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Individual routine creation
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Competition day strategy
                      </li>
                    </ul>
                  </div>
                  <div className="bg-gray-700 rounded-lg h-48">
                    <img
                      src="/placeholder.svg?height=200&width=300&text=Posing+Practice"
                      alt="Posing Practice"
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="support" className="mt-8">
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Complete Support System</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold text-white mb-3">Support Included</h4>
                    <ul className="space-y-2">
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        24/7 coach availability
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Weekly progress reviews
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Mental preparation coaching
                      </li>
                      <li className="flex items-center text-gray-300">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                        Show day accompaniment
                      </li>
                    </ul>
                  </div>
                  <div className="bg-gray-700 rounded-lg h-48">
                    <img
                      src="/placeholder.svg?height=200&width=300&text=Support+System"
                      alt="Support System"
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

{/* CTA Section */}
        <section className="text-center bg-gradient-to-r from-yellow-600 to-yellow-700 rounded-lg p-8">
          <Trophy className="h-16 w-16 text-white mx-auto mb-4" />
          <h2 className="text-3xl font-bold mb-4">Ready to Compete?</h2>
          <p className="text-lg mb-6 opacity-90">
            Transform your physique and step on stage with confidence. Start your competition preparation today.
          </p>
          <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100 mr-4">
            Book Free Consultation
          </Button>
          <Button
            size="lg"
            variant="outline"
            className="border-white text-white hover:bg-white hover:text-yellow-600 bg-transparent"
          >
            View Success Stories
          </Button>
          <p className="text-sm mt-4 opacity-80">Join our champions • Proven track record • Expert coaching</p>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { requireAdmin } from "@/lib/auth"
import { getServices, getProducts } from "@/lib/database"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Users, Package, FileText, TrendingUp, Plus, Settings, LogOut, BarChart3 } from "lucide-react"
import Link from "next/link"

export default async function AdminDashboard() {
  const user = await requireAdmin()
  const services = await getServices()
  const products = await getProducts()

const stats = [
    {
      title: "Total Services",
      value: services.length,
      icon: Package,
      color: "text-yellow-500",
    },
    {
      title: "Total Products",
      value: products.length,
      icon: FileText,
      color: "text-green-500",
    },
    {
      title: "Active Users",
      value: "1,234",
      icon: Users,
      color: "text-purple-500",
    },
    {
      title: "Monthly Revenue",
      value: "AED 45,678",
      icon: TrendingUp,
      color: "text-yellow-500",
    },
  ]

const quickActions = [
    {
      title: "Add New Service",
      description: "Create a new fitness service",
      href: "/admin/services/new",
      icon: Plus,
      color: "bg-yellow-600 hover:bg-yellow-700",
    },
    {
      title: "Add New Product",
      description: "Create a new product",
      href: "/admin/products/new",
      icon: Plus,
      color: "bg-green-600 hover:bg-green-700",
    },
    {
      title: "Manage Content",
      description: "Edit pages and content",
      href: "/admin/pages",
      icon: FileText,
      color: "bg-purple-600 hover:bg-purple-700",
    },
    {
      title: "View Analytics",
      description: "Check website statistics",
      href: "/admin/analytics",
      icon: BarChart3,
      color: "bg-orange-600 hover:bg-orange-700",
    },
  ]

return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="bg-gray-800 border-b border-gray-700">
        <div className="px-4 sm:px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-white">Sonny Fizzik Admin</h1>
              <p className="text-gray-400">Welcome back, {user.name}</p>
            </div>
            <div className="flex items-center space-x-4">
              <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                <Settings className="h-4 w-4 mr-2" />
                Settings
              </Button>
              <form action="/api/admin/logout" method="POST">
                <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                  <LogOut className="h-4 w-4 mr-2" />
                  Logout
                </Button>
              </form>
            </div>
          </div>
        </div>
      </header>

<div className="p-6">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
          {stats.map((stat, index) => (
            <Card key={index} className="bg-gray-800 border-gray-700">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-400 text-sm">{stat.title}</p>
                    <p className="text-2xl font-bold text-white">{stat.value}</p>
                  </div>
                  <stat.icon className={`h-8 w-8 ${stat.color}`} />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Quick Actions */}
        <div className="mb-8">
          <h2 className="text-xl font-bold text-white mb-4">Quick Actions</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {quickActions.map((action, index) => (
              <Link key={index} href={action.href}>
                <Card className="bg-gray-800 border-gray-700 hover:border-gray-600 transition-colors cursor-pointer">
                  <CardContent className="p-4">
                    <div className="flex items-center space-x-3">
                      <div className={`p-2 rounded-lg ${action.color}`}>
                        <action.icon className="h-5 w-5 text-white" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-white">{action.title}</h3>
                        <p className="text-sm text-gray-400">{action.description}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>

{/* Recent Content */}
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 sm:gap-8">
          {/* Recent Services */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-white">Recent Services</CardTitle>
                <Link href="/admin/services">
                  <Button
                    variant="outline"
                    size="sm"
                    className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                  >
                    View All
                  </Button>
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {services.slice(0, 3).map((service) => (
                  <div key={service.id} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
                    <div>
                      <h4 className="font-medium text-white">{service.title}</h4>
                      <p className="text-sm text-gray-400">{service.price}</p>
                    </div>
                    <div className="flex items-center space-x-2">
                      {service.popular && <Badge className="bg-yellow-600">Popular</Badge>}
                      <Link href={`/admin/services/${service.id}`}>
                        <Button
                          size="sm"
                          variant="outline"
                          className="border-gray-600 text-white hover:bg-gray-600 bg-transparent"
                        >
                          Edit
                        </Button>
                      </Link>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Recent Products */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="text-white">Recent Products</CardTitle>
                <Link href="/admin/products">
                  <Button
                    variant="outline"
                    size="sm"
                    className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                  >
                    View All
                  </Button>
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {products.slice(0, 3).map((product) => (
                  <div key={product.id} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
                    <div>
                      <h4 className="font-medium text-white">{product.title}</h4>
                      <p className="text-sm text-gray-400">{product.price}</p>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Badge variant={product.inStock ? "default" : "destructive"}>
                        {product.inStock ? "In Stock" : "Out of Stock"}
                      </Badge>
                      <Link href={`/admin/products/${product.id}`}>
                        <Button
                          size="sm"
                          variant="outline"
                          className="border-gray-600 text-white hover:bg-gray-600 bg-transparent"
                        >
                          Edit
                        </Button>
                      </Link>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isEdit="true" isQuickEdit="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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Eye, EyeOff } from "lucide-react"

export default function AdminLogin() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)
  const router = useRouter()

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

try {
      const response = await fetch("/api/admin/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      })

if (response.ok) {
        router.push("/admin/dashboard")
      } else {
        const data = await response.json()
        setError(data.error || "Login failed")
      }
    } catch (err) {
      setError("Network error. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
      <Card className="w-full max-w-md bg-gray-800 border-gray-700">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl text-white">Sonny Fizzik Admin</CardTitle>
          <CardDescription className="text-gray-400">Sign in to manage your website content</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin} className="space-y-4">
            <div className="flex flex-col">
              <Label htmlFor="email" className="text-white">
                Email
              </Label>
              <Input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="bg-gray-700 border-gray-600 text-white"
                required
              />
            </div>
            <div className="flex flex-col">
              <Label htmlFor="password" className="text-white">
                Password
              </Label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="bg-gray-700 border-gray-600 text-white pr-10"
                  required
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
            </div>

{error && (
              <Alert className="bg-red-900 border-red-700">
                <AlertDescription className="text-red-200">{error}</AlertDescription>
              </Alert>
            )}

<Button type="submit" className="w-full bg-yellow-600 hover:bg-yellow-700" disabled={loading}>
              {loading ? "Signing in..." : "Sign In"}
            </Button>
          </form>

<div className="mt-6 p-4 bg-gray-700 rounded-lg">
            <p className="text-sm text-gray-300 mb-2">Demo Credentials:</p>
            <p className="text-xs text-gray-400">Email: admin@sonnyfizzik.com</p>
            <p className="text-xs text-gray-400">Password: admin123</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/services/new/page.tsx" isEdit="true" isQuickEdit="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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Upload, X } from "lucide-react"
import Link from "next/link"

export default function NewServicePage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    price: "",
    duration: "",
    category: "",
    popular: false,
    features: [""],
  })
  const [imageFile, setImageFile] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string>("")

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setImageFile(file)
      const reader = new FileReader()
      reader.onload = (e) => {
        setImagePreview(e.target?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const addFeature = () => {
    setFormData((prev) => ({
      ...prev,
      features: [...prev.features, ""],
    }))
  }

const removeFeature = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      features: prev.features.filter((_, i) => i !== index),
    }))
  }

const updateFeature = (index: number, value: string) => {
    setFormData((prev) => ({
      ...prev,
      features: prev.features.map((feature, i) => (i === index ? value : feature)),
    }))
  }

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

try {
      // In production, upload image first and get URL
      const imageUrl = "/placeholder.svg?height=200&width=300&text=Service+Image"

if (imageFile) {
        // Upload image logic here
        // imageUrl = await uploadImage(imageFile)
      }

const serviceData = {
        ...formData,
        image: imageUrl,
        features: formData.features.filter((f) => f.trim() !== ""),
      }

const response = await fetch("/api/admin/services", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(serviceData),
      })

if (response.ok) {
        router.push("/admin/services")
      } else {
        throw new Error("Failed to create service")
      }
    } catch (error) {
      console.error("Error creating service:", error)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="bg-gray-800 border-b border-gray-700">
        <div className="px-6 py-4">
          <div className="flex items-center space-x-4">
            <Link href="/admin/services">
              <Button
                variant="outline"
                size="sm"
                className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Services
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-white">Add New Service</h1>
          </div>
        </div>
      </header>

<div className="p-6">
        <div className="max-w-2xl mx-auto">
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white">Service Details</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Basic Info */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="title" className="text-white">
                      Service Title
                    </Label>
                    <Input
                      id="title"
                      value={formData.title}
                      onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
                      className="bg-gray-700 border-gray-600 text-white"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="category" className="text-white">
                      Category
                    </Label>
                    <Select
                      value={formData.category}
                      onValueChange={(value) => setFormData((prev) => ({ ...prev, category: value }))}
                    >
                      <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="personal-training">Personal Training</SelectItem>
                        <SelectItem value="combo-plan">Combo Plan</SelectItem>
                        <SelectItem value="transformation">Transformation</SelectItem>
                        <SelectItem value="customized">Customized</SelectItem>
                        <SelectItem value="competition">Competition</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div>
                  <Label htmlFor="description" className="text-white">
                    Description
                  </Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData((prev) => ({ ...prev, description: e.target.value }))}
                    className="bg-gray-700 border-gray-600 text-white"
                    rows={3}
                    required
                  />
                </div>

{/* Pricing */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="price" className="text-white">
                      Price
                    </Label>
                    <Input
                      id="price"
                      value={formData.price}
                      onChange={(e) => setFormData((prev) => ({ ...prev, price: e.target.value }))}
                      placeholder="AED 200"
                      className="bg-gray-700 border-gray-600 text-white"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="duration" className="text-white">
                      Duration
                    </Label>
                    <Input
                      id="duration"
                      value={formData.duration}
                      onChange={(e) => setFormData((prev) => ({ ...prev, duration: e.target.value }))}
                      placeholder="Per Session"
                      className="bg-gray-700 border-gray-600 text-white"
                      required
                    />
                  </div>
                </div>

{/* Image Upload */}
                <div>
                  <Label className="text-white">Service Image</Label>
                  <div className="mt-2">
                    {imagePreview ? (
                      <div className="relative">
                        <img
                          src={imagePreview || "/placeholder.svg"}
                          alt="Preview"
                          className="w-full h-48 object-cover rounded-lg"
                        />
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="absolute top-2 right-2 bg-gray-800 border-yellow-600"
                          onClick={() => {
                            setImageFile(null)
                            setImagePreview("")
                          }}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <div className="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center">
                        <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                        <p className="text-gray-400 mb-2">Click to upload image</p>
                        <input
                          type="file"
                          accept="image/*"
                          onChange={handleImageChange}
                          className="hidden"
                          id="image-upload"
                        />
                        <Label htmlFor="image-upload" className="cursor-pointer">
                          <Button
                            type="button"
                            variant="outline"
                            className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                          >
                            Choose File
                          </Button>
                        </Label>
                      </div>
                    )}
                  </div>
                </div>

{/* Features */}
                <div>
                  <Label className="text-white">Features</Label>
                  <div className="space-y-2 mt-2">
                    {formData.features.map((feature, index) => (
                      <div key={index} className="flex items-center space-x-2">
                        <Input
                          value={feature}
                          onChange={(e) => updateFeature(index, e.target.value)}
                          placeholder="Enter feature"
                          className="bg-gray-700 border-gray-600 text-white"
                        />
                        {formData.features.length > 1 && (
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => removeFeature(index)}
                            className="border-yellow-600 text-yellow-400 hover:bg-yellow-600"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                    ))}
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={addFeature}
                      className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                    >
                      Add Feature
                    </Button>
                  </div>
                </div>

{/* Popular Toggle */}
                <div className="flex items-center space-x-2">
                  <Switch
                    id="popular"
                    checked={formData.popular}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, popular: checked }))}
                  />
                  <Label htmlFor="popular" className="text-white">
                    Mark as Popular
                  </Label>
                </div>

{/* Submit */}
                <div className="flex space-x-4">
                  <Button type="submit" className="bg-yellow-600 hover:bg-yellow-700" disabled={loading}>
                    {loading ? "Creating..." : "Create Service"}
                  </Button>
                  <Link href="/admin/services">
                    <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                      Cancel
                    </Button>
                  </Link>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { requireAdmin } from "@/lib/auth"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, ArrowLeft, Eye, Globe } from "lucide-react"
import Link from "next/link"

// Mock pages data - in production, this would come from database
const mockPages = [
  {
    id: "1",
    title: "Home Page",
    slug: "/",
    status: "published",
    lastModified: "2024-01-15",
    views: 1250,
    type: "landing",
  },
  {
    id: "2",
    title: "About Us",
    slug: "/about",
    status: "draft",
    lastModified: "2024-01-10",
    views: 0,
    type: "content",
  },
  {
    id: "3",
    title: "Contact Us",
    slug: "/contact",
    status: "published",
    lastModified: "2024-01-14",
    views: 340,
    type: "contact",
  },
  {
    id: "4",
    title: "Personal Training",
    slug: "/collections/personal-training",
    status: "published",
    lastModified: "2024-01-12",
    views: 890,
    type: "collection",
  },
  {
    id: "5",
    title: "Gym Membership",
    slug: "/collections/gym-membership",
    status: "published",
    lastModified: "2024-01-13",
    views: 670,
    type: "collection",
  },
  {
    id: "6",
    title: "Competition Preparation",
    slug: "/products/competition-preperation",
    status: "published",
    lastModified: "2024-01-11",
    views: 450,
    type: "product",
  },
]

function getStatusColor(status: string) {
  switch (status) {
    case "published":
      return "bg-green-600"
    case "draft":
      return "bg-yellow-600"
    case "archived":
      return "bg-gray-600"
    default:
      return "bg-gray-600"
  }
}

function getTypeColor(type: string) {
  switch (type) {
    case "landing":
      return "bg-blue-600"
    case "collection":
      return "bg-purple-600"
    case "product":
      return "bg-orange-600"
    case "content":
      return "bg-teal-600"
    case "contact":
      return "bg-pink-600"
    default:
      return "bg-gray-600"
  }
}

export default async function PagesManagementPage() {
  await requireAdmin()

<div className="p-6">
        {/* Stats Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Card className="bg-gray-800 border-gray-700">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-400 text-sm">Total Pages</p>
                  <p className="text-2xl font-bold text-white">{mockPages.length}</p>
                </div>
                <Globe className="h-8 w-8 text-blue-500" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gray-800 border-gray-700">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-400 text-sm">Published</p>
                  <p className="text-2xl font-bold text-white">
                    {mockPages.filter((p) => p.status === "published").length}
                  </p>
                </div>
                <Eye className="h-8 w-8 text-green-500" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gray-800 border-gray-700">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-400 text-sm">Drafts</p>
                  <p className="text-2xl font-bold text-white">
                    {mockPages.filter((p) => p.status === "draft").length}
                  </p>
                </div>
                <Edit className="h-8 w-8 text-yellow-500" />
              </div>
            </CardContent>
          </Card>

<Card className="bg-gray-800 border-gray-700">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-400 text-sm">Total Views</p>
                  <p className="text-2xl font-bold text-white">
                    {mockPages.reduce((sum, page) => sum + page.views, 0).toLocaleString()}
                  </p>
                </div>
                <Eye className="h-8 w-8 text-purple-500" />
              </div>
            </CardContent>
          </Card>
        </div>

{/* Pages Table */}
        <Card className="bg-gray-800 border-gray-700">
          <CardHeader>
            <CardTitle className="text-white">All Pages</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-700">
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Page</th>
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Type</th>
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Status</th>
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Views</th>
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Last Modified</th>
                    <th className="text-left py-3 px-4 text-gray-300 font-medium">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {mockPages.map((page) => (
                    <tr key={page.id} className="border-b border-gray-700 hover:bg-gray-700/50">
                      <td className="py-4 px-4">
                        <div>
                          <h3 className="font-medium text-white">{page.title}</h3>
                          <p className="text-sm text-gray-400">{page.slug}</p>
                        </div>
                      </td>
                      <td className="py-4 px-4">
                        <Badge className={`${getTypeColor(page.type)} hover:${getTypeColor(page.type)}`}>
                          {page.type}
                        </Badge>
                      </td>
                      <td className="py-4 px-4">
                        <Badge className={`${getStatusColor(page.status)} hover:${getStatusColor(page.status)}`}>
                          {page.status}
                        </Badge>
                      </td>
                      <td className="py-4 px-4 text-gray-300">{page.views.toLocaleString()}</td>
                      <td className="py-4 px-4 text-gray-300">{page.lastModified}</td>
                      <td className="py-4 px-4">
                        <div className="flex space-x-2">
                          <Link href={page.slug} target="_blank">
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-gray-600 text-white hover:bg-gray-600 bg-transparent"
                            >
                              <Eye className="h-4 w-4" />
                            </Button>
                          </Link>
                          <Link href={`/admin/pages/${page.id}`}>
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-gray-600 text-white hover:bg-gray-600 bg-transparent"
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                          </Link>
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-yellow-600 text-yellow-400 hover:bg-yellow-600 hover:text-white bg-transparent"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

{/* Quick Actions */}
        <div className="mt-8">
          <h2 className="text-xl font-bold text-white mb-4">Quick Actions</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <Link href="/admin/pages/new">
              <Card className="bg-gray-800 border-gray-700 hover:border-gray-600 transition-colors cursor-pointer">
                <CardContent className="p-4">
                  <div className="flex items-center space-x-3">
                    <div className="p-2 rounded-lg bg-blue-600">
                      <Plus className="h-5 w-5 text-white" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-white">New Page</h3>
                      <p className="text-sm text-gray-400">Create a new page</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>

<Card className="bg-gray-800 border-gray-700 hover:border-gray-600 transition-colors cursor-pointer">
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <div className="p-2 rounded-lg bg-green-600">
                    <Globe className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white">SEO Settings</h3>
                    <p className="text-sm text-gray-400">Manage meta tags</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-800 border-gray-700 hover:border-gray-600 transition-colors cursor-pointer">
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <div className="p-2 rounded-lg bg-purple-600">
                    <Eye className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white">Analytics</h3>
                    <p className="text-sm text-gray-400">View page performance</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-800 border-gray-700 hover:border-gray-600 transition-colors cursor-pointer">
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <div className="p-2 rounded-lg bg-orange-600">
                    <Edit className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white">Bulk Edit</h3>
                    <p className="text-sm text-gray-400">Edit multiple pages</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/new/page.tsx" isEdit="true" isQuickEdit="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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft, Save, Eye } from "lucide-react"
import Link from "next/link"

export default function NewPagePage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    metaTitle: "",
    metaDescription: "",
    content: "",
    type: "",
    published: false,
  })

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

try {
      // In production, this would save to database
      console.log("Creating page:", formData)

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

router.push("/admin/pages")
    } catch (error) {
      console.error("Error creating page:", error)
    } finally {
      setLoading(false)
    }
  }

const generateSlug = (title: string) => {
    return title
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "")
  }

const handleTitleChange = (title: string) => {
    setFormData((prev) => ({
      ...prev,
      title,
      slug: generateSlug(title),
      metaTitle: title,
    }))
  }

return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="bg-gray-800 border-b border-gray-700">
        <div className="px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link href="/admin/pages">
                <Button
                  variant="outline"
                  size="sm"
                  className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Pages
                </Button>
              </Link>
              <h1 className="text-2xl font-bold text-white">Create New Page</h1>
            </div>
            <div className="flex space-x-2">
              <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                <Eye className="h-4 w-4 mr-2" />
                Preview
              </Button>
              <Button form="page-form" type="submit" className="bg-yellow-600 hover:bg-yellow-700" disabled={loading}>
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Saving..." : "Save Page"}
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="p-6">
        <div className="max-w-4xl mx-auto">
          <form id="page-form" onSubmit={handleSubmit} className="space-y-8">
            {/* Basic Information */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Basic Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <Label htmlFor="title" className="text-white">
                    Page Title *
                  </Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => handleTitleChange(e.target.value)}
                    className="bg-gray-700 border-gray-600 text-white"
                    placeholder="Enter page title"
                    required
                  />
                </div>

<div>
                  <Label htmlFor="slug" className="text-white">
                    URL Slug *
                  </Label>
                  <div className="flex items-center">
                    <span className="text-gray-400 text-sm mr-2">sonnyfizzik.com</span>
                    <Input
                      id="slug"
                      value={formData.slug}
                      onChange={(e) => setFormData((prev) => ({ ...prev, slug: e.target.value }))}
                      className="bg-gray-700 border-gray-600 text-white"
                      placeholder="page-url"
                      required
                    />
                  </div>
                </div>

<div>
                  <Label htmlFor="type" className="text-white">
                    Page Type *
                  </Label>
                  <Select
                    value={formData.type}
                    onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
                  >
                    <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                      <SelectValue placeholder="Select page type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="landing">Landing Page</SelectItem>
                      <SelectItem value="content">Content Page</SelectItem>
                      <SelectItem value="collection">Collection Page</SelectItem>
                      <SelectItem value="product">Product Page</SelectItem>
                      <SelectItem value="contact">Contact Page</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>

{/* SEO Settings */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">SEO Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <Label htmlFor="metaTitle" className="text-white">
                    Meta Title
                  </Label>
                  <Input
                    id="metaTitle"
                    value={formData.metaTitle}
                    onChange={(e) => setFormData((prev) => ({ ...prev, metaTitle: e.target.value }))}
                    className="bg-gray-700 border-gray-600 text-white"
                    placeholder="SEO title for search engines"
                  />
                  <p className="text-sm text-gray-400 mt-1">{formData.metaTitle.length}/60 characters</p>
                </div>

<div>
                  <Label htmlFor="metaDescription" className="text-white">
                    Meta Description
                  </Label>
                  <Textarea
                    id="metaDescription"
                    value={formData.metaDescription}
                    onChange={(e) => setFormData((prev) => ({ ...prev, metaDescription: e.target.value }))}
                    className="bg-gray-700 border-gray-600 text-white"
                    rows={3}
                    placeholder="Brief description for search engines"
                  />
                  <p className="text-sm text-gray-400 mt-1">{formData.metaDescription.length}/160 characters</p>
                </div>
              </CardContent>
            </Card>

{/* Content */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Page Content</CardTitle>
              </CardHeader>
              <CardContent>
                <div>
                  <Label htmlFor="content" className="text-white">
                    Content *
                  </Label>
                  <Textarea
                    id="content"
                    value={formData.content}
                    onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
                    className="bg-gray-700 border-gray-600 text-white"
                    rows={15}
                    placeholder="Enter your page content here..."
                    required
                  />
                  <p className="text-sm text-gray-400 mt-1">You can use HTML tags for formatting</p>
                </div>
              </CardContent>
            </Card>

{/* Publishing Options */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Publishing Options</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center space-x-2">
                  <Switch
                    id="published"
                    checked={formData.published}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, published: checked }))}
                  />
                  <Label htmlFor="published" className="text-white">
                    Publish immediately
                  </Label>
                </div>
                <p className="text-sm text-gray-400 mt-2">
                  {formData.published
                    ? "This page will be visible to visitors immediately after saving."
                    : "This page will be saved as a draft and won't be visible to visitors."}
                </p>
              </CardContent>
            </Card>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { requireAdmin } from "@/lib/auth"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Edit, Eye, Trash2 } from "lucide-react"
import Link from "next/link"

// This would normally fetch from database
async function getPage(id: string) {
  // Mock data
  return {
    id,
    title: "Personal Training",
    slug: "/collections/personal-training",
    metaTitle: "Personal Training - Sonny Fizzik",
    metaDescription: "Professional personal training services in Dubai",
    content: "Transform your fitness journey with expert personal trainers...",
    type: "collection",
    status: "published",
    createdAt: "2024-01-10",
    updatedAt: "2024-01-12",
    views: 890,
  }
}

export default async function EditPagePage({ params }: { params: { id: string } }) {
  await requireAdmin()
  const page = await getPage(params.id)

return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="bg-gray-800 border-b border-gray-700">
        <div className="px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link href="/admin/pages">
                <Button
                  variant="outline"
                  size="sm"
                  className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Pages
                </Button>
              </Link>
              <h1 className="text-2xl font-bold text-white">Edit Page: {page.title}</h1>
            </div>
            <div className="flex space-x-2">
              <Link href={page.slug} target="_blank">
                <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                  <Eye className="h-4 w-4 mr-2" />
                  View Live
                </Button>
              </Link>
              <Button className="bg-yellow-600 hover:bg-yellow-700">
                <Edit className="h-4 w-4 mr-2" />
                Edit Page
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="p-6">
        <div className="max-w-4xl mx-auto space-y-6">
          {/* Page Info */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white">Page Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h3 className="font-semibold text-white mb-1">Title</h3>
                  <p className="text-gray-300">{page.title}</p>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-1">URL</h3>
                  <p className="text-gray-300">{page.slug}</p>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-1">Type</h3>
                  <p className="text-gray-300 capitalize">{page.type}</p>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-1">Status</h3>
                  <p className="text-gray-300 capitalize">{page.status}</p>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-1">Views</h3>
                  <p className="text-gray-300">{page.views.toLocaleString()}</p>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-1">Last Updated</h3>
                  <p className="text-gray-300">{page.updatedAt}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* SEO Info */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white">SEO Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-semibold text-white mb-1">Meta Title</h3>
                <p className="text-gray-300">{page.metaTitle}</p>
              </div>
              <div>
                <h3 className="font-semibold text-white mb-1">Meta Description</h3>
                <p className="text-gray-300">{page.metaDescription}</p>
              </div>
            </CardContent>
          </Card>

{/* Actions */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white">Actions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex space-x-4">
                <Link href={`/admin/pages/${page.id}/edit`}>
                  <Button className="bg-blue-600 hover:bg-blue-700">
                    <Edit className="h-4 w-4 mr-2" />
                    Edit Content
                  </Button>
                </Link>
                <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                  <Eye className="h-4 w-4 mr-2" />
                  Preview Changes
                </Button>
                <Button
                  variant="outline"
                  className="border-yellow-600 text-yellow-400 hover:bg-yellow-600 hover:text-white bg-transparent"
                >
                  <Trash2 className="h-4 w-4 mr-2" />
                  Delete Page
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/[id]/edit/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Save, Eye, AlertCircle } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"
import Link from "next/link"

// Mock function to get page data - in production, this would be an API call
async function getPageData(id: string) {
  // Simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 500))

// Mock data based on ID
  const mockPages: Record<string, any> = {
    "1": {
      id: "1",
      title: "Home Page",
      slug: "/",
      metaTitle: "Sonny Fizzik - Transform Your Fitness Journey",
      metaDescription:
        "Join Sonny Fizzik for expert personal training, gym membership, and fitness programs in Dubai. Transform your body and life with our proven methods.",
      content: `<div class="hero-section">
  <h1>Achieve Your Fitness Goals with Expert Guidance</h1>
  <p>Join thousands who have transformed their bodies and lives with our personalized training programs, nutrition plans, and expert coaching.</p>
</div>

<div class="services-section">
  <h2>Our Services</h2>
  <ul>
    <li>Personal Training</li>
    <li>Gym Membership</li>
    <li>Nutrition Coaching</li>
    <li>Competition Preparation</li>
  </ul>
</div>`,
      type: "landing",
      status: "published",
    },
    "4": {
      id: "4",
      title: "Personal Training",
      slug: "/collections/personal-training",
      metaTitle: "Personal Training - Sonny Fizzik",
      metaDescription:
        "Professional personal training services in Dubai. Get customized workout plans, nutrition guidance, and one-on-one support.",
      content: `<div class="page-header">
  <h1>Sonny Fizzik Personal Training</h1>
  <p>Transform your fitness journey with Sonny Fizzik's expert personal trainers. Get customized workout plans, nutrition guidance, and one-on-one support to achieve your fitness goals faster.</p>
</div>

<div class="training-plans">
  <h2>Training Plans</h2>
  <div class="plan">
    <h3>1-on-1 Personal Training</h3>
    <p>Price: AED 200 per session</p>
    <ul>
      <li>Customized workout plan</li>
      <li>Nutrition guidance</li>
      <li>Progress tracking</li>
      <li>Flexible scheduling</li>
    </ul>
  </div>
</div>`,
      type: "collection",
      status: "published",
    },
  }

return (
    mockPages[id] || {
      id,
      title: "Page Not Found",
      slug: "/404",
      metaTitle: "",
      metaDescription: "",
      content: "",
      type: "content",
      status: "draft",
    }
  )
}

export default function EditPageContentPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    metaTitle: "",
    metaDescription: "",
    content: "",
    type: "",
    status: "draft",
  })

useEffect(() => {
    async function loadPageData() {
      try {
        const pageData = await getPageData(params.id)
        setFormData({
          title: pageData.title,
          slug: pageData.slug,
          metaTitle: pageData.metaTitle,
          metaDescription: pageData.metaDescription,
          content: pageData.content,
          type: pageData.type,
          status: pageData.status,
        })
      } catch (err) {
        setError("Failed to load page data")
      } finally {
        setLoading(false)
      }
    }

loadPageData()
  }, [params.id])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)
    setError("")
    setSuccess("")

try {
      // In production, this would be an API call to save the page
      console.log("Saving page:", formData)

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

setSuccess("Page saved successfully!")

// Redirect back to page view after a short delay
      setTimeout(() => {
        router.push(`/admin/pages/${params.id}`)
      }, 1500)
    } catch (err) {
      setError("Failed to save page. Please try again.")
    } finally {
      setSaving(false)
    }
  }

const generateSlug = (title: string) => {
    return title
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "")
  }

const handleTitleChange = (title: string) => {
    setFormData((prev) => ({
      ...prev,
      title,
      slug: prev.slug === generateSlug(prev.title) ? generateSlug(title) : prev.slug,
      metaTitle: prev.metaTitle === prev.title ? title : prev.metaTitle,
    }))
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
        <div className="text-white">Loading page data...</div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="bg-gray-800 border-b border-gray-700">
        <div className="px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Link href={`/admin/pages/${params.id}`}>
                <Button
                  variant="outline"
                  size="sm"
                  className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Page
                </Button>
              </Link>
              <h1 className="text-2xl font-bold text-white">Edit: {formData.title}</h1>
            </div>
            <div className="flex space-x-2">
              <Button
                variant="outline"
                className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                onClick={() => window.open(formData.slug, "_blank")}
              >
                <Eye className="h-4 w-4 mr-2" />
                Preview Live
              </Button>
              <Button
                form="edit-page-form"
                type="submit"
                className="bg-yellow-600 hover:bg-yellow-700"
                disabled={saving}
              >
                <Save className="h-4 w-4 mr-2" />
                {saving ? "Saving..." : "Save Changes"}
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="p-6">
        <div className="max-w-6xl mx-auto">
          {/* Alerts */}
          {error && (
            <Alert className="mb-6 bg-red-900 border-red-700">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription className="text-red-200">{error}</AlertDescription>
            </Alert>
          )}

{success && (
            <Alert className="mb-6 bg-green-900 border-green-700">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription className="text-green-200">{success}</AlertDescription>
            </Alert>
          )}

<form id="edit-page-form" onSubmit={handleSubmit} className="space-y-8">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Main Content */}
              <div className="lg:col-span-2 space-y-6">
                {/* Basic Information */}
                <Card className="bg-gray-800 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-white">Page Content</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div>
                      <Label htmlFor="title" className="text-white">
                        Page Title *
                      </Label>
                      <Input
                        id="title"
                        value={formData.title}
                        onChange={(e) => handleTitleChange(e.target.value)}
                        className="bg-gray-700 border-gray-600 text-white"
                        placeholder="Enter page title"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="content" className="text-white">
                        Page Content *
                      </Label>
                      <Textarea
                        id="content"
                        value={formData.content}
                        onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
                        className="bg-gray-700 border-gray-600 text-white font-mono text-sm"
                        rows={20}
                        placeholder="Enter your page content here... You can use HTML tags."
                        required
                      />
                      <p className="text-sm text-gray-400 mt-2">
                        You can use HTML tags for formatting. Preview your changes using the "Preview Live" button.
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Sidebar */}
              <div className="space-y-6">
                {/* Page Settings */}
                <Card className="bg-gray-800 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-white">Page Settings</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor="slug" className="text-white">
                        URL Slug *
                      </Label>
                      <Input
                        id="slug"
                        value={formData.slug}
                        onChange={(e) => setFormData((prev) => ({ ...prev, slug: e.target.value }))}
                        className="bg-gray-700 border-gray-600 text-white"
                        placeholder="page-url"
                        required
                      />
                    </div>

<div>
                      <Label htmlFor="type" className="text-white">
                        Page Type
                      </Label>
                      <Select
                        value={formData.type}
                        onValueChange={(value) => setFormData((prev) => ({ ...prev, type: value }))}
                      >
                        <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                          <SelectValue placeholder="Select page type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="landing">Landing Page</SelectItem>
                          <SelectItem value="content">Content Page</SelectItem>
                          <SelectItem value="collection">Collection Page</SelectItem>
                          <SelectItem value="product">Product Page</SelectItem>
                          <SelectItem value="contact">Contact Page</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <Label htmlFor="status" className="text-white">
                        Status
                      </Label>
                      <Select
                        value={formData.status}
                        onValueChange={(value) => setFormData((prev) => ({ ...prev, status: value }))}
                      >
                        <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="published">Published</SelectItem>
                          <SelectItem value="draft">Draft</SelectItem>
                          <SelectItem value="archived">Archived</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </CardContent>
                </Card>

{/* SEO Settings */}
                <Card className="bg-gray-800 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-white">SEO Settings</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <Label htmlFor="metaTitle" className="text-white">
                        Meta Title
                      </Label>
                      <Input
                        id="metaTitle"
                        value={formData.metaTitle}
                        onChange={(e) => setFormData((prev) => ({ ...prev, metaTitle: e.target.value }))}
                        className="bg-gray-700 border-gray-600 text-white"
                        placeholder="SEO title for search engines"
                      />
                      <p className="text-sm text-gray-400 mt-1">{formData.metaTitle.length}/60 characters</p>
                    </div>

<div>
                      <Label htmlFor="metaDescription" className="text-white">
                        Meta Description
                      </Label>
                      <Textarea
                        id="metaDescription"
                        value={formData.metaDescription}
                        onChange={(e) => setFormData((prev) => ({ ...prev, metaDescription: e.target.value }))}
                        className="bg-gray-700 border-gray-600 text-white"
                        rows={3}
                        placeholder="Brief description for search engines"
                      />
                      <p className="text-sm text-gray-400 mt-1">{formData.metaDescription.length}/160 characters</p>
                    </div>
                  </CardContent>
                </Card>

{/* Quick Actions */}
                <Card className="bg-gray-800 border-gray-700">
                  <CardHeader>
                    <CardTitle className="text-white">Quick Actions</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <Button
                      type="button"
                      variant="outline"
                      className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                      onClick={() => window.open(formData.slug, "_blank")}
                    >
                      <Eye className="h-4 w-4 mr-2" />
                      Preview Live Page
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                      onClick={() => {
                        setFormData((prev) => ({
                          ...prev,
                          slug: generateSlug(prev.title),
                        }))
                      }}
                    >
                      Regenerate URL Slug
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/database.ts" isEdit="true" isQuickEdit="true" isMerged="true"
// Database models and operations
// This is a simplified version - in production, use Prisma, Drizzle, or similar ORM

export interface Service {
  id: string
  title: string
  description: string
  price: string
  duration: string
  features: string[]
  image: string
  category: "personal-training" | "combo-plan" | "transformation" | "customized" | "competition"
  popular: boolean
  createdAt: Date
  updatedAt: Date
}

export interface Product {
  id: string
  title: string
  description: string
  price: string
  originalPrice?: string
  images: string[]
  category: string
  features: string[]
  rating: number
  reviews: number
  inStock: boolean
  createdAt: Date
  updatedAt: Date
}

export interface Page {
  id: string
  slug: string
  title: string
  content: any // JSON content
  metaTitle: string
  metaDescription: string
  published: boolean
  createdAt: Date
  updatedAt: Date
}

// Mock database - replace with real database operations
const mockServices: Service[] = [
  {
    id: "1",
    title: "1-on-1 Personal Training",
    description: "Customized workout plan with professional guidance",
    price: "Rs. 200",
    duration: "Per Session",
    features: ["Customized workout plan", "Nutrition guidance", "Progress tracking"],
    image: "/placeholder.svg?height=200&width=300&text=Personal+Training",
    category: "personal-training",
    popular: true,
    createdAt: new Date(),
    updatedAt: new Date(),
  },
]

const mockProducts: Product[] = [
  {
    id: "1",
    title: "Weight Loss Meal Plan - 26 Days",
    description: "Complete meal plan for sustainable weight loss",
    price: "Rs. 199",
    originalPrice: "Rs. 299",
    images: ["/placeholder.svg?height=400&width=500&text=Weight+Loss+Meal+Plan"],
    category: "nutrition",
    features: ["26 days of meals", "Shopping lists", "Macro-balanced"],
    rating: 4.9,
    reviews: 187,
    inStock: true,
    createdAt: new Date(),
    updatedAt: new Date(),
  },
]

// Database operations
export async function getServices(): Promise<Service[]> {
  return mockServices
}

export async function getService(id: string): Promise<Service | null> {
  return mockServices.find((s) => s.id === id) || null
}

export async function createService(data: Omit<Service, "id" | "createdAt" | "updatedAt">): Promise<Service> {
  const service: Service = {
    ...data,
    id: Date.now().toString(),
    createdAt: new Date(),
    updatedAt: new Date(),
  }
  mockServices.push(service)
  return service
}

export async function updateService(id: string, data: Partial<Service>): Promise<Service | null> {
  const index = mockServices.findIndex((s) => s.id === id)
  if (index === -1) return null

mockServices[index] = { ...mockServices[index], ...data, updatedAt: new Date() }
  return mockServices[index]
}

export async function deleteService(id: string): Promise<boolean> {
  const index = mockServices.findIndex((s) => s.id === id)
  if (index === -1) return false

mockServices.splice(index, 1)
  return true
}

// Similar operations for products
export async function getProducts(): Promise<Product[]> {
  return mockProducts
}

export async function getProduct(id: string): Promise<Product | null> {
  return mockProducts.find((p) => p.id === id) || null
}

export async function createProduct(data: Omit<Product, "id" | "createdAt" | "updatedAt">): Promise<Product> {
  const product: Product = {
    ...data,
    id: Date.now().toString(),
    createdAt: new Date(),
    updatedAt: new Date(),
  }
  mockProducts.push(product)
  return product
}

export async function updateProduct(id: string, data: Partial<Product>): Promise<Product | null> {
  const index = mockProducts.findIndex((p) => p.id === id)
  if (index === -1) return null

mockProducts[index] = { ...mockProducts[index], ...data, updatedAt: new Date() }
  return mockProducts[index]
}

export async function deleteProduct(id: string): Promise<boolean> {
  const index = mockProducts.findIndex((p) => p.id === id)
  if (index === -1) return false

mockProducts.splice(index, 1)
  return true
}
[V0_FILE]png:file="public/placeholder_svg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/placeholder_svg-fk6egpzYTwgJo78vHzVf46aQ1WORTS.png" isMerged="true"
[V0_FILE]png:file="public/placeholder_image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/placeholder_image-K0QZoWe8glYigIQz3IfQncXvCx9tSb.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-meal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/placeholder-meal-O22RcmbDGSohpySkBVGejIoc2CqqlB.png" isMerged="true"
[V0_FILE]jpg:file="public/hero-image.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-08-17%20at%2012.12.22-TpVSKTOoQmvrQGJMpjOULY9EDSZZtZ.jpeg" isMerged="true"
[V0_FILE]typescript:file="sanity/schemaTypes/index.ts" isMerged="true"
import type { SchemaTypeDefinition } from "sanity"

import blockContent from "./blockContent"
import category from "./category"
import post from "./post"
import author from "./author"
import service from "./service"
import product from "./product"
import page from "./page"

export const schema: { types: SchemaTypeDefinition[] } = {
  types: [post, author, category, blockContent, service, product, page],
}
[V0_FILE]typescript:file="sanity/schemaTypes/service.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "service",
  title: "Service",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "description",
      title: "Description",
      type: "text",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "price",
      title: "Price",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "duration",
      title: "Duration",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "features",
      title: "Features",
      type: "array",
      of: [{ type: "string" }],
    }),
    defineField({
      name: "image",
      title: "Image",
      type: "image",
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: "category",
      title: "Category",
      type: "string",
      options: {
        list: [
          { title: "Personal Training", value: "personal-training" },
          { title: "Combo Plan", value: "combo-plan" },
          { title: "Transformation", value: "transformation" },
          { title: "Customized", value: "customized" },
          { title: "Competition", value: "competition" },
        ],
      },
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "popular",
      title: "Popular",
      type: "boolean",
      initialValue: false,
    }),
  ],
  preview: {
    select: {
      title: "title",
      media: "image",
      subtitle: "category",
    },
  },
})
[V0_FILE]typescript:file="sanity/schemaTypes/product.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "product",
  title: "Product",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "description",
      title: "Description",
      type: "text",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "price",
      title: "Price",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "originalPrice",
      title: "Original Price",
      type: "string",
    }),
    defineField({
      name: "images",
      title: "Images",
      type: "array",
      of: [
        {
          type: "image",
          options: {
            hotspot: true,
          },
        },
      ],
    }),
    defineField({
      name: "category",
      title: "Category",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "features",
      title: "Features",
      type: "array",
      of: [{ type: "string" }],
    }),
    defineField({
      name: "rating",
      title: "Rating",
      type: "number",
      validation: (Rule) => Rule.min(0).max(5),
    }),
    defineField({
      name: "reviews",
      title: "Number of Reviews",
      type: "number",
      validation: (Rule) => Rule.min(0),
    }),
    defineField({
      name: "inStock",
      title: "In Stock",
      type: "boolean",
      initialValue: true,
    }),
  ],
  preview: {
    select: {
      title: "title",
      media: "images.0",
      subtitle: "category",
    },
  },
})
[V0_FILE]typescript:file="sanity/schemaTypes/page.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "page",
  title: "Page",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "content",
      title: "Content",
      type: "blockContent",
    }),
    defineField({
      name: "metaTitle",
      title: "Meta Title",
      type: "string",
    }),
    defineField({
      name: "metaDescription",
      title: "Meta Description",
      type: "text",
    }),
    defineField({
      name: "published",
      title: "Published",
      type: "boolean",
      initialValue: false,
    }),
  ],
  preview: {
    select: {
      title: "title",
      subtitle: "slug.current",
    },
  },
})
[V0_FILE]typescript:file="sanity/schemaTypes/post.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "post",
  title: "Post",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "author" },
    }),
    defineField({
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    }),
    defineField({
      name: "publishedAt",
      title: "Published at",
      type: "datetime",
    }),
    defineField({
      name: "excerpt",
      title: "Excerpt",
      type: "text",
    }),
    defineField({
      name: "body",
      title: "Body",
      type: "blockContent",
    }),
  ],
  preview: {
    select: {
      title: "title",
      author: "author.name",
      media: "mainImage",
    },
    prepare(selection) {
      const { author } = selection
      return { ...selection, subtitle: author && `by ${author}` }
    },
  },
})
[V0_FILE]typescript:file="sanity/schemaTypes/author.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "author",
  title: "Author",
  type: "document",
  fields: [
    defineField({
      name: "name",
      title: "Name",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "name",
        maxLength: 96,
      },
    }),
    defineField({
      name: "image",
      title: "Image",
      type: "image",
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: "bio",
      title: "Bio",
      type: "array",
      of: [
        {
          title: "Block",
          type: "block",
          styles: [{ title: "Normal", value: "normal" }],
          lists: [],
        },
      ],
    }),
  ],
  preview: {
    select: {
      title: "name",
      media: "image",
    },
  },
})
[V0_FILE]typescript:file="sanity/schemaTypes/category.ts" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "category",
  title: "Category",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: "description",
      title: "Description",
      type: "text",
    }),
  ],
})
[V0_FILE]typescript:file="sanity/schemaTypes/blockContent.ts" isMerged="true"
import { defineType, defineArrayMember } from "sanity"

export default defineType({
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    defineArrayMember({
      title: "Block",
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [
        { title: "Bullet", value: "bullet" },
        { title: "Numbered", value: "number" },
      ],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    }),
    defineArrayMember({
      type: "image",
      options: { hotspot: true },
    }),
  ],
})
[V0_FILE]plaintext:file=".env.local" isMerged="true"
# Sanity Configuration
NEXT_PUBLIC_SANITY_PROJECT_ID=pv1s5vb3
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_API_VERSION=2024-01-01

# Sanity Studio Token (for write operations)
SANITY_API_TOKEN=skRtqv71HoXV0DhVSdcZhsLfThb7Tm4tiVwfRQQacbjKNfig7jWx50V3j0sOryL89K5UVLwGKONzbGHQzcZNoKfj2O8j62h46SN7OGmcJU2Vlvy3I79NutRhdruT3ZGu4yD1n5qd56bY7s8pM2ZBP3o1z1XPNnTk7Tcu6wMtweUBBfJ13P8L
[V0_FILE]typescriptreact:file="app/tools/bmi-calculator/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Calculator, Scale, Ruler, TrendingUp, AlertCircle, CheckCircle, Target } from "lucide-react"

export default function BMICalculatorPage() {
  const [unit, setUnit] = useState("metric")
  const [weight, setWeight] = useState("")
  const [height, setHeight] = useState("")
  const [feet, setFeet] = useState("")
  const [inches, setInches] = useState("")
  const [bmi, setBmi] = useState<number | null>(null)
  const [category, setCategory] = useState("")

const calculateBMI = () => {
    let weightKg: number
    let heightM: number

if (unit === "metric") {
      weightKg = Number.parseFloat(weight)
      heightM = Number.parseFloat(height) / 100
    } else {
      weightKg = Number.parseFloat(weight) * 0.453592
      const totalInches = Number.parseFloat(feet) * 12 + Number.parseFloat(inches)
      heightM = totalInches * 0.0254
    }

if (weightKg > 0 && heightM > 0) {
      const bmiValue = weightKg / (heightM * heightM)
      setBmi(Number.parseFloat(bmiValue.toFixed(1)))

if (bmiValue < 18.5) {
        setCategory("underweight")
      } else if (bmiValue < 25) {
        setCategory("normal")
      } else if (bmiValue < 30) {
        setCategory("overweight")
      } else {
        setCategory("obese")
      }
    }
  }

const getBMIColor = (category: string) => {
    switch (category) {
      case "underweight":
        return "text-blue-500"
      case "normal":
        return "text-green-500"
      case "overweight":
        return "text-yellow-500"
      case "obese":
        return "text-red-500"
      default:
        return "text-gray-500"
    }
  }

const getBMIBadgeColor = (category: string) => {
    switch (category) {
      case "underweight":
        return "bg-blue-600"
      case "normal":
        return "bg-green-600"
      case "overweight":
        return "bg-yellow-600"
      case "obese":
        return "bg-red-600"
      default:
        return "bg-gray-600"
    }
  }

const getCategoryText = (category: string) => {
    switch (category) {
      case "underweight":
        return "Underweight"
      case "normal":
        return "Normal Weight"
      case "overweight":
        return "Overweight"
      case "obese":
        return "Obese"
      default:
        return ""
    }
  }

const getRecommendations = (category: string) => {
    switch (category) {
      case "underweight":
        return {
          title: "Underweight Recommendations",
          advice: "Consider consulting with a healthcare provider about healthy weight gain strategies.",
          tips: [
            "Focus on nutrient-dense, calorie-rich foods",
            "Include strength training to build muscle mass",
            "Eat frequent, smaller meals throughout the day",
            "Consider working with a nutritionist",
          ],
        }
      case "normal":
        return {
          title: "Maintain Your Healthy Weight",
          advice: "Great job! Continue your current healthy lifestyle to maintain your optimal weight.",
          tips: [
            "Keep up with regular physical activity",
            "Maintain a balanced, nutritious diet",
            "Stay hydrated and get adequate sleep",
            "Monitor your weight regularly",
          ],
        }
      case "overweight":
        return {
          title: "Weight Management Recommendations",
          advice: "Consider making lifestyle changes to reach a healthier weight range.",
          tips: [
            "Create a moderate calorie deficit through diet and exercise",
            "Focus on whole foods and portion control",
            "Incorporate both cardio and strength training",
            "Consider our personal training programs",
          ],
        }
      case "obese":
        return {
          title: "Health-Focused Weight Loss",
          advice: "Consult with healthcare providers for a comprehensive weight management plan.",
          tips: [
            "Start with gradual, sustainable changes",
            "Focus on improving overall health, not just weight",
            "Consider professional guidance and support",
            "Explore our transformation programs",
          ],
        }
      default:
        return null
    }
  }

const resetCalculator = () => {
    setWeight("")
    setHeight("")
    setFeet("")
    setInches("")
    setBmi(null)
    setCategory("")
  }

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Page Header */}
        <div className="text-center mb-12">
          <div className="flex justify-center mb-4">
            <div className="bg-yellow-600 rounded-full p-4">
              <Calculator className="h-8 w-8 text-white" />
            </div>
          </div>
          <h1 className="text-4xl font-bold mb-4">BMI Calculator</h1>
          <p className="text-gray-300 text-lg max-w-2xl mx-auto">
            Calculate your Body Mass Index (BMI) to understand your weight status and get personalized health
            recommendations.
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Calculator Card */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white flex items-center">
                <Scale className="h-5 w-5 mr-2 text-yellow-500" />
                Calculate Your BMI
              </CardTitle>
              <CardDescription className="text-gray-400">
                Enter your measurements to calculate your Body Mass Index
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Unit Selection */}
              <div>
                <Label className="text-white mb-2 block">Measurement System</Label>
                <Select value={unit} onValueChange={setUnit}>
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="metric">Metric (kg, cm)</SelectItem>
                    <SelectItem value="imperial">Imperial (lbs, ft/in)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* Weight Input */}
              <div>
                <Label className="text-white mb-2 block">Weight {unit === "metric" ? "(kg)" : "(lbs)"}</Label>
                <Input
                  type="number"
                  value={weight}
                  onChange={(e) => setWeight(e.target.value)}
                  placeholder={unit === "metric" ? "Enter weight in kg" : "Enter weight in lbs"}
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>

{/* Height Input */}
              <div>
                <Label className="text-white mb-2 block">Height {unit === "metric" ? "(cm)" : "(ft/in)"}</Label>
                {unit === "metric" ? (
                  <Input
                    type="number"
                    value={height}
                    onChange={(e) => setHeight(e.target.value)}
                    placeholder="Enter height in cm"
                    className="bg-gray-700 border-gray-600 text-white"
                  />
                ) : (
                  <div className="grid grid-cols-2 gap-2">
                    <Input
                      type="number"
                      value={feet}
                      onChange={(e) => setFeet(e.target.value)}
                      placeholder="Feet"
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                    <Input
                      type="number"
                      value={inches}
                      onChange={(e) => setInches(e.target.value)}
                      placeholder="Inches"
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>
                )}
              </div>

{/* Calculate Button */}
              <div className="flex space-x-4">
                <Button onClick={calculateBMI} className="flex-1 bg-yellow-600 hover:bg-yellow-700">
                  <Calculator className="h-4 w-4 mr-2" />
                  Calculate BMI
                </Button>
                <Button
                  onClick={resetCalculator}
                  variant="outline"
                  className="border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                >
                  Reset
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Results Card */}
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white flex items-center">
                <TrendingUp className="h-5 w-5 mr-2 text-yellow-500" />
                Your Results
              </CardTitle>
            </CardHeader>
            <CardContent>
              {bmi ? (
                <div className="space-y-6">
                  {/* BMI Score */}
                  <div className="text-center">
                    <div className={`text-6xl font-bold mb-2 ${getBMIColor(category)}`}>{bmi}</div>
                    <Badge className={`${getBMIBadgeColor(category)} text-white`}>{getCategoryText(category)}</Badge>
                  </div>

{/* BMI Scale */}
                  <div className="space-y-2">
                    <h4 className="font-semibold text-white">BMI Categories:</h4>
                    <div className="space-y-1 text-sm">
                      <div
                        className={`flex justify-between ${category === "underweight" ? "font-bold text-blue-400" : "text-gray-400"}`}
                      >
                        <span>Underweight</span>
                        <span>Below 18.5</span>
                      </div>
                      <div
                        className={`flex justify-between ${category === "normal" ? "font-bold text-green-400" : "text-gray-400"}`}
                      >
                        <span>Normal weight</span>
                        <span>18.5 - 24.9</span>
                      </div>
                      <div
                        className={`flex justify-between ${category === "overweight" ? "font-bold text-yellow-400" : "text-gray-400"}`}
                      >
                        <span>Overweight</span>
                        <span>25 - 29.9</span>
                      </div>
                      <div
                        className={`flex justify-between ${category === "obese" ? "font-bold text-red-400" : "text-gray-400"}`}
                      >
                        <span>Obese</span>
                        <span>30 and above</span>
                      </div>
                    </div>
                  </div>

{/* Recommendations */}
                  {getRecommendations(category) && (
                    <div className="bg-gray-700 rounded-lg p-4">
                      <h4 className="font-semibold text-white mb-2 flex items-center">
                        <Target className="h-4 w-4 mr-2 text-yellow-500" />
                        {getRecommendations(category)?.title}
                      </h4>
                      <p className="text-gray-300 text-sm mb-3">{getRecommendations(category)?.advice}</p>
                      <ul className="space-y-1">
                        {getRecommendations(category)?.tips.map((tip, index) => (
                          <li key={index} className="flex items-start text-sm text-gray-300">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                            {tip}
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

{/* CTA Buttons */}
                  <div className="space-y-3">
                    <Button asChild className="w-full bg-yellow-600 hover:bg-yellow-700">
                      <a href="/collections/personal-training">Get Personal Training</a>
                    </Button>
                    <Button
                      asChild
                      variant="outline"
                      className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                    >
                      <a href="/contact">Free Consultation</a>
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="text-center py-8">
                  <Ruler className="h-16 w-16 text-gray-500 mx-auto mb-4" />
                  <p className="text-gray-400">
                    Enter your measurements to see your BMI results and personalized recommendations.
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

{/* Information Section */}
        <div className="mt-16 max-w-4xl mx-auto">
          <Card className="bg-gray-800 border-gray-700">
            <CardHeader>
              <CardTitle className="text-white">Understanding BMI</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h4 className="font-semibold text-white mb-2">What is BMI?</h4>
                <p className="text-gray-300 text-sm">
                  Body Mass Index (BMI) is a simple calculation using a person's height and weight. The formula is BMI =
                  kg/m² where kg is a person's weight in kilograms and m² is their height in metres squared.
                </p>
              </div>
              <div>
                <h4 className="font-semibold text-white mb-2">Important Notes</h4>
                <div className="bg-yellow-900/20 border border-yellow-600/30 rounded-lg p-3">
                  <div className="flex items-start">
                    <AlertCircle className="h-4 w-4 text-yellow-500 mr-2 mt-0.5 flex-shrink-0" />
                    <div className="text-sm text-yellow-200">
                      <p className="mb-2">BMI is a screening tool and not a diagnostic tool. It has limitations:</p>
                      <ul className="list-disc list-inside space-y-1 text-xs">
                        <li>It doesn't distinguish between muscle and fat mass</li>
                        <li>It may not be accurate for athletes with high muscle mass</li>
                        <li>Age, sex, and ethnicity can affect the relationship between BMI and health risks</li>
                        <li>Always consult healthcare professionals for comprehensive health assessment</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescript:file="scripts/check-sanity-env.ts" isEdit="true" isMerged="true"
// To run locally: node scripts/check-sanity-env.ts
function maskToken(token?: string) {
  if (!token) return "NOT SET"
  return token.length <= 8 ? "********" : `${token.slice(0, 4)}...${token.slice(-4)}`
}

console.log("Sanity Environment Check")
console.log("------------------------")
console.log("NEXT_PUBLIC_SANITY_PROJECT_ID:", process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || "NOT SET")
console.log("NEXT_PUBLIC_SANITY_DATASET:", process.env.NEXT_PUBLIC_SANITY_DATASET || "NOT SET")
console.log("NEXT_PUBLIC_SANITY_API_VERSION:", process.env.NEXT_PUBLIC_SANITY_API_VERSION || "NOT SET")
console.log("SANITY_API_TOKEN:", maskToken(process.env.SANITY_API_TOKEN))
console.log("Note: SANITY_API_TOKEN must only be used on the server (Server Actions/Route Handlers).")
[V0_FILE]typescriptreact:file="sanity/lib/client.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "next-sanity"
import { apiVersion, dataset, projectId, token, useCdn } from "../env"

// Public read client — safe for published content reads.
export const readClient = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn,
  perspective: "published",
})

// Server-only client with token — for writes/drafts/preview.
export const writeClient = createClient({
  projectId,
  dataset,
  apiVersion,
  token,
  useCdn: false,
})

// Compatibility alias for existing imports
export const client = readClient
[V0_FILE]typescriptreact:file="sanity/lib/queries.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { groq } from "next-sanity"

// Services
export const allServicesQuery = groq`*[_type == "service"] | order(order asc, _createdAt desc){
  _id,
  title,
  "slug": slug.current,
  shortDescription,
  price,
  duration,
  mainImage
}`

export const serviceBySlugQuery = groq`*[_type == "service" && slug.current == $slug][0]{
  _id,
  title,
  "slug": slug.current,
  shortDescription,
  price,
  duration,
  mainImage
}`

// Services (compat exports)
export const servicesQuery = groq`
  *[_type == "service"] | order(_createdAt desc) {
    _id,
    title,
    "slug": slug.current,
    shortDescription,
    price,
    duration,
    mainImage
  }
`

export const serviceQuery = groq`
  *[_type == "service" && _id == $id][0] {
    _id,
    title,
    "slug": slug.current,
    shortDescription,
    price,
    duration,
    mainImage
  }
`

// Pages
export const pageBySlugQuery = groq`*[_type == "page" && slug.current == $slug][0]{
  _id,
  title,
  "slug": slug.current,
  content,
  seo
}`

export const allPagesQuery = groq`*[_type == "page"] | order(_createdAt desc){
  _id,
  title,
  "slug": slug.current
}`

// Pages (compat exports)
export const pagesQuery = groq`
  *[_type == "page"] | order(_createdAt desc) {
    _id,
    title,
    "slug": slug.current,
    content,
    seo
  }
`

export const pageQuery = groq`
  *[_type == "page" && slug.current == $slug][0] {
    _id,
    title,
    "slug": slug.current,
    content,
    seo
  }
`

// Posts (optional blog)
export const allPostsQuery = groq`*[_type == "post"] | order(_createdAt desc){
  _id,
  title,
  "slug": slug.current,
  excerpt,
  mainImage,
  "author": author->name,
  "categories": categories[]->title,
  _createdAt
}`

export const postBySlugQuery = groq`*[_type == "post" && slug.current == $slug][0]{
  _id,
  title,
  "slug": slug.current,
  excerpt,
  mainImage,
  body,
  author->{name, image},
  categories[]->{title, slug},
  _createdAt
}`

// Blog (compat exports)
export const postsQuery = groq`
  *[_type == "post"] | order(_createdAt desc) {
    _id,
    title,
    "slug": slug.current,
    excerpt,
    mainImage,
    author->{
      name,
      image
    },
    categories[]->{
      title
    },
    _createdAt
  }
`

export const postQuery = groq`
  *[_type == "post" && slug.current == $slug][0] {
    _id,
    title,
    "slug": slug.current,
    excerpt,
    mainImage,
    body,
    author->{
      name,
      image
    },
    categories[]->{
      title
    },
    _createdAt,
    _updatedAt
  }
`

// Products
export const productsQuery = groq`
  *[_type == "product"] | order(_createdAt desc) {
    _id,
    title,
    "slug": slug.current,
    description,
    price,
    originalPrice,
    images,
    inStock,
    sku
  }
`

export const productQuery = groq`
  *[_type == "product" && _id == $id][0] {
    _id,
    title,
    "slug": slug.current,
    description,
    price,
    originalPrice,
    images,
    inStock,
    sku
  }
`
[V0_FILE]typescriptreact:file="sanity/lib/image.ts" isEdit="true" isMerged="true"
import imageUrlBuilder from "@sanity/image-url"
import type { Image } from "sanity"
import { dataset, projectId } from "../env"

// Build a Sanity image URL builder
const builder = imageUrlBuilder({ projectId, dataset })

// Core helper — chainable image URL config
export function urlFor(source: Image | string) {
  return builder.image(source as any)
}

// Compatibility alias for existing imports that expect `urlForImage`
export function urlForImage(source: Image | string) {
  return urlFor(source)
}
[V0_FILE]typescriptreact:file="sanity/lib/preview-client.ts" isMerged="true"
import { createClient } from "next-sanity"
import { apiVersion, dataset, projectId, token } from "../env"

// Returns a client configured for published or preview draft content
export function getSanityClient(preview: boolean) {
  return createClient({
    projectId,
    dataset,
    apiVersion,
    useCdn: !preview,
    token: preview ? token : undefined,
    perspective: preview ? "previewDrafts" : "published",
    // If you use Sanity Content Source Maps, set stega to true in preview:
    // stega: preview,
  })
}
[V0_FILE]typescriptreact:file="app/api/draft/route.ts" isMerged="true"
import { draftMode } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(req: Request) {
  const url = new URL(req.url)
  const nextPath = url.searchParams.get("next") || "/"
  const secret = url.searchParams.get("secret")

// Optional: protect draft mode with a secret
  const expected = process.env.SANITY_PREVIEW_SECRET
  if (expected && secret !== expected) {
    return new NextResponse("Invalid preview secret", { status: 401 })
  }

draftMode().enable()
  return NextResponse.redirect(new URL(nextPath, req.url))
}
[V0_FILE]typescriptreact:file="app/api/disable-draft/route.ts" isMerged="true"
import { draftMode } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(req: Request) {
  const url = new URL(req.url)
  const nextPath = url.searchParams.get("next") || "/"

draftMode().disable()
  return NextResponse.redirect(new URL(nextPath, req.url))
}
[V0_FILE]typescriptreact:file="components/draft-indicator.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"

export default function DraftIndicator() {
  const [enabled, setEnabled] = useState(false)

useEffect(() => {
    // We infer draft mode by a server-set cookie. This is a lightweight check.
    // Next sets __prerender_bypass / __next_preview_data for draft mode.
    // We simply check for the presence of __next_preview_data cookie.
    const hasPreviewCookie = document.cookie.includes("__next_preview_data=")
    setEnabled(hasPreviewCookie)
  }, [])

if (!enabled) return null

return (
    <div className="fixed bottom-4 right-4 z-50 rounded-md bg-amber-500 px-3 py-2 text-sm font-medium text-black shadow-lg">
      Draft Mode On
      <Button variant="secondary" size="sm" className="ml-3" asChild>
        <a href={`/api/disable-draft?next=${encodeURIComponent(window.location.pathname)}`}>Disable</a>
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/plans/unlock/page.tsx" isMerged="true"
"use client"

export default function UnlockPlansPage() {
  const [loading, setLoading] = useState(false)

const handlePayment = async () => {
    setLoading(true)

try {
      const response = await fetch("/api/create-payment", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          amount: 99900, // Rs. 999 in paise
          currency: "INR",
          description: "Premium Plans Access - Sony Fizzik",
        }),
      })

const { url } = await response.json()

if (url) {
        window.location.href = url
      }
    } catch (error) {
      console.error("Payment error:", error)
      alert("Payment failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

<main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <div className="flex justify-center mb-4">
              <div className="bg-yellow-600 rounded-full p-4">
                <Lock className="h-8 w-8 text-white" />
              </div>
            </div>
            <h1 className="text-4xl font-bold mb-4">Unlock Premium Plans</h1>
            <p className="text-gray-300 text-lg">
              Get exclusive access to our premium fitness programs designed for serious transformation
            </p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* What You Get */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <Star className="h-5 w-5 mr-2 text-yellow-500" />
                  What You'll Unlock
                </CardTitle>
                <CardDescription className="text-gray-400">
                  Premium access includes exclusive programs and benefits
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-start space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <div>
                    <h4 className="font-semibold text-white">Elite Transformation Program</h4>
                    <p className="text-gray-400 text-sm">16-week comprehensive program with daily coaching</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <div>
                    <h4 className="font-semibold text-white">Competition Mastery Program</h4>
                    <p className="text-gray-400 text-sm">Professional competition prep with former champions</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <div>
                    <h4 className="font-semibold text-white">Executive Wellness Program</h4>
                    <p className="text-gray-400 text-sm">Premium wellness for busy professionals</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <div>
                    <h4 className="font-semibold text-white">VIP Community Access</h4>
                    <p className="text-gray-400 text-sm">Exclusive member community and events</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <div>
                    <h4 className="font-semibold text-white">24/7 Priority Support</h4>
                    <p className="text-gray-400 text-sm">Direct access to our top coaches anytime</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Payment Card */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white flex items-center">
                  <CreditCard className="h-5 w-5 mr-2 text-yellow-500" />
                  Unlock Premium Access
                </CardTitle>
                <CardDescription className="text-gray-400">
                  One-time payment for lifetime access to premium plans
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="text-center">
                  <div className="text-4xl font-bold text-white mb-2">₹999</div>
                  <Badge className="bg-green-600">One-time payment</Badge>
                  <p className="text-gray-400 text-sm mt-2">Lifetime access • No recurring fees</p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center text-sm text-gray-300">
                    <Shield className="h-4 w-4 text-green-500 mr-2" />
                    Secure payment processing
                  </div>
                  <div className="flex items-center text-sm text-gray-300">
                    <Shield className="h-4 w-4 text-green-500 mr-2" />
                    30-day money-back guarantee
                  </div>
                  <div className="flex items-center text-sm text-gray-300">
                    <Shield className="h-4 w-4 text-green-500 mr-2" />
                    Instant access after payment
                  </div>
                </div>

<Button
                  onClick={handlePayment}
                  disabled={loading}
                  className="w-full bg-yellow-600 hover:bg-yellow-700 text-lg py-6"
                >
                  {loading ? (
                    "Processing..."
                  ) : (
                    <>
                      <CreditCard className="h-5 w-5 mr-2" />
                      Unlock Premium Plans - ₹999
                    </>
                  )}
                </Button>

<p className="text-xs text-gray-400 text-center">
                  By proceeding, you agree to our Terms of Service and Privacy Policy
                </p>
              </CardContent>
            </Card>
          </div>

{/* Testimonials */}
          <section className="mt-16">
            <h2 className="text-2xl font-bold text-center mb-8">What Premium Members Say</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  name: "Rajesh K.",
                  text: "The Elite Transformation Program changed my life completely. Worth every rupee!",
                  result: "Lost 25kg in 16 weeks",
                },
                {
                  name: "Priya M.",
                  text: "Competition Mastery helped me win my first bodybuilding competition.",
                  result: "1st Place Winner",
                },
                {
                  name: "Amit S.",
                  text: "Executive Wellness fits perfectly with my busy schedule. Amazing results!",
                  result: "Improved energy & focus",
                },
              ].map((testimonial, index) => (
                <Card key={index} className="bg-gray-800 border-gray-700">
                  <CardContent className="pt-6">
                    <div className="flex items-center mb-4">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      ))}
                    </div>
                    <p className="text-gray-300 text-sm mb-4">"{testimonial.text}"</p>
                    <div>
                      <p className="font-semibold text-white">{testimonial.name}</p>
                      <p className="text-yellow-500 text-sm">{testimonial.result}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/create-payment/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

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

export async function POST(request: NextRequest) {
  try {
    const { amount, currency = "INR", description } = await request.json()

const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: currency.toLowerCase(),
            product_data: {
              name: "Premium Plans Access",
              description: description || "Unlock exclusive premium fitness plans",
            },
            unit_amount: amount, // Amount in smallest currency unit (paise for INR)
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${request.nextUrl.origin}/plans/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${request.nextUrl.origin}/plans/unlock`,
      metadata: {
        type: "premium_access",
      },
    })

return NextResponse.json({ url: session.url })
  } catch (error) {
    console.error("Payment creation error:", error)
    return NextResponse.json({ error: "Failed to create payment session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/webhook/stripe/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"
import { headers } from "next/headers"
import { grantPlanAccess } from "@/lib/plan-access"

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

const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET!

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

let event: Stripe.Event

try {
      event = stripe.webhooks.constructEvent(body, signature, webhookSecret)
    } catch (err) {
      console.error("Webhook signature verification failed:", err)
      return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
    }

// Handle successful payment
    if (event.type === "checkout.session.completed") {
      const session = event.data.object as Stripe.Checkout.Session

if (session.metadata?.type === "premium_access") {
        // Grant access to premium plans
        await grantPlanAccess(session.customer_email || session.id)

console.log(`Premium access granted for session: ${session.id}`)
      }
    }

return NextResponse.json({ received: true })
  } catch (error) {
    console.error("Webhook error:", error)
    return NextResponse.json({ error: "Webhook handler failed" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/plans/success/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle, Trophy, ArrowRight } from "lucide-react"

function SuccessContent() {
  return (
    <div className="max-w-2xl mx-auto text-center">
      <Card className="bg-gray-800 border-gray-700">
        <CardHeader>
          <div className="flex justify-center mb-4">
            <div className="bg-green-600 rounded-full p-4">
              <CheckCircle className="h-12 w-12 text-white" />
            </div>
          </div>
          <CardTitle className="text-white text-2xl">Payment Successful!</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="bg-green-900/20 border border-green-600/30 rounded-lg p-4">
            <div className="flex items-center justify-center mb-2">
              <Trophy className="h-6 w-6 text-yellow-500 mr-2" />
              <span className="text-green-400 font-semibold">Premium Access Unlocked!</span>
            </div>
            <p className="text-gray-300 text-sm">
              You now have lifetime access to all our premium fitness plans and exclusive benefits.
            </p>
          </div>

<div className="space-y-3">
            <h3 className="font-semibold text-white">What happens next?</h3>
            <ul className="text-left space-y-2 text-gray-300">
              <li className="flex items-start">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5" />
                <span className="text-sm">Access to premium plans is now active</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5" />
                <span className="text-sm">You'll receive a confirmation email shortly</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5" />
                <span className="text-sm">Our team will contact you within 24 hours</span>
              </li>
            </ul>
          </div>

<div className="flex flex-col sm:flex-row gap-4">
            <Button asChild className="bg-yellow-600 hover:bg-yellow-700">
              <a href="/plans">
                <Trophy className="h-4 w-4 mr-2" />
                View Premium Plans
              </a>
            </Button>
            <Button asChild variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
              <a href="/contact">
                Contact Support
                <ArrowRight className="h-4 w-4 ml-2" />
              </a>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

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

<main className="container mx-auto px-4 py-16">
        <Suspense fallback={<div className="text-center">Loading...</div>}>
          <SuccessContent />
        </Suspense>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "sony-fizzik-fitness",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "^14.0.0",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@sanity/client": "^6.10.0",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.20.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.294.0",
    "next": "14.0.4",
    "next-sanity": "^7.1.4",
    "react": "^18",
    "react-dom": "^18",
    "sanity": "^3.20.0",
    "stripe": "^14.21.0",
    "styled-components": "^6.1.6",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, Dumbbell } from "lucide-react"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

return (
    <header className="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2">
            <Dumbbell className="h-8 w-8 text-yellow-500" />
            <span className="text-xl font-bold text-white">Sony Fizzik</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link href="/" className="text-gray-300 hover:text-yellow-500 transition-colors">
              Home
            </Link>
            <div className="relative group">
              <button className="text-gray-300 hover:text-yellow-500 transition-colors">Services</button>
              <div className="absolute top-full left-0 mt-2 w-48 bg-gray-800 border border-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                <Link
                  href="/collections/personal-training"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Personal Training
                </Link>
                <Link
                  href="/collections/gym-membership"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Gym Membership
                </Link>
                <Link
                  href="/collections/combo-plan"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Combo Plans
                </Link>
                <Link
                  href="/collections/customized-plans"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Customized Plans
                </Link>
              </div>
            </div>
            <div className="relative group">
              <button className="text-gray-300 hover:text-yellow-500 transition-colors">Products</button>
              <div className="absolute top-full left-0 mt-2 w-48 bg-gray-800 border border-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                <Link
                  href="/collections/fitness-guide-books"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Fitness Guide Books
                </Link>
                <Link
                  href="/products/weight-loss-meal-26-days"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Weight Loss Meals
                </Link>
                <Link
                  href="/products/competition-preperation"
                  className="block px-4 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700"
                >
                  Competition Prep
                </Link>
              </div>
            </div>
            <Link href="/plans" className="text-gray-300 hover:text-yellow-500 transition-colors flex items-center">
              <span>Premium Plans</span>
              <span className="ml-1 text-xs bg-yellow-600 text-white px-1.5 py-0.5 rounded">NEW</span>
            </Link>
            <Link href="/tools/bmi-calculator" className="text-gray-300 hover:text-yellow-500 transition-colors">
              BMI Calculator
            </Link>
            <Link href="/contact" className="text-gray-300 hover:text-yellow-500 transition-colors">
              Contact
            </Link>
          </nav>

{/* CTA Button */}
          <div className="hidden md:block">
            <Button className="bg-yellow-600 hover:bg-yellow-700">Get Started</Button>
          </div>

{/* Mobile Menu Button */}
          <button className="md:hidden text-white" onClick={toggleMenu}>
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

{/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-gray-800 border-t border-gray-700">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <Link
                href="/"
                className="block px-3 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700 rounded-md"
                onClick={() => setIsMenuOpen(false)}
              >
                Home
              </Link>
              <div className="px-3 py-2">
                <div className="text-gray-400 text-sm font-medium mb-2">Services</div>
                <div className="pl-4 space-y-1">
                  <Link
                    href="/collections/personal-training"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Personal Training
                  </Link>
                  <Link
                    href="/collections/gym-membership"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Gym Membership
                  </Link>
                  <Link
                    href="/collections/combo-plan"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Combo Plans
                  </Link>
                  <Link
                    href="/collections/customized-plans"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Customized Plans
                  </Link>
                </div>
              </div>
              <div className="px-3 py-2">
                <div className="text-gray-400 text-sm font-medium mb-2">Products</div>
                <div className="pl-4 space-y-1">
                  <Link
                    href="/collections/fitness-guide-books"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Fitness Guide Books
                  </Link>
                  <Link
                    href="/products/weight-loss-meal-26-days"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Weight Loss Meals
                  </Link>
                  <Link
                    href="/products/competition-preperation"
                    className="block py-1 text-gray-300 hover:text-yellow-500"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    Competition Prep
                  </Link>
                </div>
              </div>
              <Link
                href="/plans"
                className="block px-3 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700 rounded-md flex items-center"
                onClick={() => setIsMenuOpen(false)}
              >
                <span>Premium Plans</span>
                <span className="ml-2 text-xs bg-yellow-600 text-white px-1.5 py-0.5 rounded">NEW</span>
              </Link>
              <Link
                href="/tools/bmi-calculator"
                className="block px-3 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700 rounded-md"
                onClick={() => setIsMenuOpen(false)}
              >
                BMI Calculator
              </Link>
              <Link
                href="/contact"
                className="block px-3 py-2 text-gray-300 hover:text-yellow-500 hover:bg-gray-700 rounded-md"
                onClick={() => setIsMenuOpen(false)}
              >
                Contact
              </Link>
              <div className="px-3 py-2">
                <Button className="w-full bg-yellow-600 hover:bg-yellow-700" onClick={() => setIsMenuOpen(false)}>
                  Get Started
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="lib/plan-access.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { cookies } from "next/headers"
import { redirect } from "next/navigation"

// Simple access control - in production, use a database
const PREMIUM_ACCESS_COOKIE = "premium_access"
const ACCESS_STORAGE_KEY = "premium_users"

// Check if user has premium access
export async function hasPlanAccess(): Promise<boolean> {
  const cookieStore = await cookies()
  const accessCookie = cookieStore.get(PREMIUM_ACCESS_COOKIE)

if (!accessCookie) {
    return false
  }

try {
    const accessData = JSON.parse(accessCookie.value)
    return accessData.hasAccess === true
  } catch {
    return false
  }
}

// Require premium access or redirect
export async function requirePlanAccess() {
  const hasAccess = await hasPlanAccess()

if (!hasAccess) {
    redirect("/plans/unlock")
  }

return true
}

// Grant premium access (called after successful payment)
export async function grantPlanAccess(identifier: string) {
  const cookieStore = await cookies()

const accessData = {
    hasAccess: true,
    grantedAt: new Date().toISOString(),
    identifier,
  }

// Set cookie for 1 year
  cookieStore.set(PREMIUM_ACCESS_COOKIE, JSON.stringify(accessData), {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24 * 365, // 1 year
  })

// In production, also store in database
  console.log(`Premium access granted to: ${identifier}`)
}

// Revoke premium access
export async function revokePlanAccess() {
  const cookieStore = await cookies()
  cookieStore.delete(PREMIUM_ACCESS_COOKIE)
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Dumbbell, Facebook, Instagram, Twitter, Youtube, Phone, Mail, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-gray-900 border-t border-gray-800">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Brand Section */}
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <Dumbbell className="h-8 w-8 text-yellow-500" />
              <span className="text-xl font-bold text-white">Sony Fizzik</span>
            </div>
            <p className="text-gray-400 text-sm">
              Built by science, powered by passion. Transform your body and life with our expert fitness programs and
              personalized coaching.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-400 hover:text-yellow-500 transition-colors">
                <Facebook className="h-5 w-5" />
              </a>
              <a href="https://www.instagram.com/sonyfizzik/" className="text-gray-400 hover:text-yellow-500 transition-colors">
                <Instagram className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-400 hover:text-yellow-500 transition-colors">
                <Twitter className="h-5 w-5" /> 
              </a>
              <a href="#" className="text-gray-400 hover:text-yellow-500 transition-colors">
                <Youtube className="h-5 w-5" />
              </a>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-white font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/" className="text-gray-400 hover:text-yellow-500 transition-colors text-sm">
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/collections/personal-training"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Personal Training
                </Link>
              </li>
              <li>
                <Link
                  href="/collections/gym-membership"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Gym Membership
                </Link>
              </li>
              <li>
                <Link
                  href="/tools/bmi-calculator"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  BMI Calculator
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-gray-400 hover:text-yellow-500 transition-colors text-sm">
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>

{/* Services */}
          <div>
            <h3 className="text-white font-semibold mb-4">Services</h3>
            <ul className="space-y-2">
              <li>
                <Link
                  href="/collections/combo-plan"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Combo Plans
                </Link>
              </li>
              <li>
                <Link
                  href="/collections/customized-plans"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Customized Plans
                </Link>
              </li>
              <li>
                <Link
                  href="/collections/3-month-complete-body-transformation"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Body Transformation
                </Link>
              </li>
              <li>
                <Link
                  href="/products/competition-preperation"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Competition Prep
                </Link>
              </li>
              <li>
                <Link
                  href="/collections/fitness-guide-books"
                  className="text-gray-400 hover:text-yellow-500 transition-colors text-sm"
                >
                  Fitness Guides
                </Link>
              </li>
            </ul>
          </div>

{/* Contact Info */}
          <div>
            <h3 className="text-white font-semibold mb-4">Contact Info</h3>
            <ul className="space-y-3">
              <li className="flex items-center space-x-3">
                <Phone className="h-4 w-4 text-yellow-500" />
                <a
                  href="https://wa.me/919707406529"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-400 text-sm hover:text-yellow-500 transition-colors"
                >
                  +91 97074 06529
                </a>
              </li>
              <li className="flex items-center space-x-3">
                <Mail className="h-4 w-4 text-yellow-500" />
                <span className="text-gray-400 text-sm">info@sonyfizzik.com</span>
              </li>
              <li className="flex items-start space-x-3">
                <MapPin className="h-4 w-4 text-yellow-500 mt-0.5" />
                <span className="text-gray-400 text-sm">Jayanagar, Bengaluru, India</span>
              </li>
            </ul>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-400 text-sm">© 2025 Sony Fizzik Fitness Class. All rights reserved.</p>
          <div className="flex space-x-6 mt-4 md:mt-0">
            <Link href="/privacy" className="text-gray-400 hover:text-yellow-500 transition-colors text-sm">
              Privacy Policy
            </Link>
            <Link href="/terms" className="text-gray-400 hover:text-yellow-500 transition-colors text-sm">
              Terms of Service
            </Link>
            <Link href="/admin/login" className="text-gray-400 hover:text-yellow-500 transition-colors text-sm">
              Admin Login
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/plans/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { hasPlanAccess } from "@/lib/plan-access"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, Star, Target, Trophy, Users } from "lucide-react"

export default async function PlansPage() {
  // Check if user has paid for plan access
  const hasAccess = await hasPlanAccess()

if (!hasAccess) {
    redirect("/plans/unlock")
  }

const exclusivePlans = [
    {
      id: "elite-transformation",
      title: "Elite Transformation Program",
      description: "Our most comprehensive 16-week transformation program with 1-on-1 coaching",
      price: "Rs. 15,000",
      duration: "16 weeks",
      features: [
        "Daily 1-on-1 coaching sessions",
        "Custom meal prep delivered weekly",
        "24/7 WhatsApp support",
        "Body composition scans weekly",
        "Supplement protocol included",
        "Post-program maintenance plan",
        "Exclusive member community access",
        "Monthly progress photoshoots",
      ],
      popular: true,
    },
    {
      id: "competition-mastery",
      title: "Competition Mastery Program",
      description: "Professional competition preparation with former champions",
      price: "Rs. 25,000",
      duration: "20 weeks",
      features: [
        "Former champion coach assignment",
        "Professional posing choreography",
        "Stage presence training",
        "Competition day support team",
        "Professional photography package",
        "Networking with industry professionals",
        "Sponsorship opportunity guidance",
        "Post-competition career planning",
      ],
    },
    {
      id: "executive-wellness",
      title: "Executive Wellness Program",
      description: "Premium wellness program designed for busy executives",
      price: "Rs. 20,000",
      duration: "12 weeks",
      features: [
        "Flexible scheduling around your calendar",
        "In-office or home training options",
        "Stress management and meditation",
        "Executive health assessments",
        "Nutrition for peak performance",
        "Travel workout plans",
        "Corporate wellness seminars",
        "Executive health concierge service",
      ],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

<main className="container mx-auto px-4 py-8">
        {/* Premium Badge */}
        <div className="text-center mb-8">
          <Badge className="bg-gradient-to-r from-yellow-600 to-yellow-500 text-white px-6 py-2 text-lg">
            <Trophy className="h-5 w-5 mr-2" />
            Premium Plans - Exclusive Access
          </Badge>
        </div>

{/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Exclusive Premium Plans</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Welcome to our premium tier! These exclusive programs are designed for serious fitness enthusiasts who want
            the ultimate transformation experience with our top-tier coaches and resources.
          </p>
        </div>

{/* Premium Plans Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
          {exclusivePlans.map((plan) => (
            <Card key={plan.id} className="bg-gray-800 border-gray-700 relative">
              {plan.popular && (
                <Badge className="absolute -top-2 left-4 bg-gradient-to-r from-yellow-600 to-yellow-500">
                  Most Popular
                </Badge>
              )}
              <CardHeader>
                <div className="w-full h-48 bg-gradient-to-br from-yellow-600/20 to-yellow-500/10 rounded-lg mb-4 flex items-center justify-center">
                  <Trophy className="h-16 w-16 text-yellow-500" />
                </div>
                <CardTitle className="text-white">{plan.title}</CardTitle>
                <CardDescription className="text-gray-400">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="ml-1 text-sm">5.0</span>
                    </div>
                    <span className="text-sm">(Exclusive)</span>
                  </div>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <span className="text-2xl font-bold text-white">{plan.price}</span>
                  <span className="text-gray-400 ml-2">{plan.duration}</span>
                </div>
                <p className="text-gray-300 text-sm mb-4">{plan.description}</p>
                <div className="mb-6">
                  <h4 className="font-semibold text-white mb-2">What's Included:</h4>
                  <ul className="space-y-2">
                    {plan.features.map((feature, index) => (
                      <li key={index} className="flex items-start text-sm text-gray-300">
                        <CheckCircle className="h-4 w-4 text-yellow-500 mr-2 mt-0.5 flex-shrink-0" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Exclusive Benefits */}
        <section className="mb-16 bg-gradient-to-r from-yellow-600/10 to-yellow-500/5 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-8 text-center">Premium Member Benefits</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <Users className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">VIP Community</h3>
              <p className="text-gray-400">
                Access to our exclusive premium member community with networking events and masterclasses.
              </p>
            </div>
            <div className="text-center">
              <Target className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Priority Support</h3>
              <p className="text-gray-400">
                24/7 priority support with our top coaches and immediate response to all your queries.
              </p>
            </div>
            <div className="text-center">
              <Trophy className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Guaranteed Results</h3>
              <p className="text-gray-400">100% satisfaction guarantee with measurable results or your money back.</p>
            </div>
          </div>
        </section>

{/* Contact for Custom Plans */}
        <section className="text-center bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-4">Need Something Even More Exclusive?</h2>
          <p className="text-lg mb-6 text-gray-300">
            Looking for a completely custom program? Our elite coaches can create a bespoke plan just for you.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a
              href="/contact"
              className="bg-yellow-600 hover:bg-yellow-700 text-white px-8 py-3 rounded-md font-medium transition-colors"
            >
              Contact Elite Coach
            </a>
            <a
              href="https://wa.me/919707406529"
              target="_blank"
              rel="noopener noreferrer"
              className="border border-yellow-600 text-yellow-600 hover:bg-yellow-600 hover:text-white px-8 py-3 rounded-md font-medium transition-colors"
            >
              WhatsApp: +91 97074 06529
            </a>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react"

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

{/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Contact Us</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Ready to start your fitness journey? Get in touch with us today. Book a free consultation or send us a
            message.
          </p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact Information & Form */}
          <div className="space-y-8">
            {/* Contact Information */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Get In Touch</CardTitle>
                <CardDescription className="text-gray-400">Contact us through any of these channels</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-start space-x-4">
                  <MapPin className="h-6 w-6 text-yellow-500 mt-1" />
                  <div>
                    <h3 className="font-semibold text-white mb-1">Address</h3>
                    <p className="text-gray-300">
                      Jayanagar
                      <br />
                      Bengaluru
                      <br />
                      Karnataka, India
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Phone className="h-6 w-6 text-yellow-500 mt-1" />
                  <div>
                    <h3 className="font-semibold text-white mb-1">Phone / WhatsApp</h3>
                    <a
                      href="https://wa.me/919707406529"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-300 hover:text-yellow-500 transition-colors"
                    >
                      +91 97074 06529
                    </a>
                    <p className="text-sm text-gray-400">Available 24/7 for emergencies</p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Mail className="h-6 w-6 text-yellow-500 mt-1" />
                  <div>
                    <h3 className="font-semibold text-white mb-1">Email</h3>
                    <p className="text-gray-300">info@sonnyfizzik.com</p>
                    <p className="text-sm text-gray-400">We'll respond within 24 hours</p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Clock className="h-6 w-6 text-yellow-500 mt-1" />
                  <div>
                    <h3 className="font-semibold text-white mb-1">Business Hours</h3>
                    <div className="text-gray-300 space-y-1">
                      <p>Monday - Friday: 6:00 AM - 10:00 PM</p>
                      <p>Saturday: 7:00 AM - 9:00 PM</p>
                      <p>Sunday: 8:00 AM - 8:00 PM</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Contact Form */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Send Us a Message</CardTitle>
                <CardDescription className="text-gray-400">
                  Have a question? Fill out the form below and we'll get back to you soon.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="firstName" className="text-white">
                        First Name *
                      </Label>
                      <Input id="firstName" required className="bg-gray-700 border-gray-600 text-white" />
                    </div>
                    <div>
                      <Label htmlFor="lastName" className="text-white">
                        Last Name *
                      </Label>
                      <Input id="lastName" required className="bg-gray-700 border-gray-600 text-white" />
                    </div>
                  </div>

<div>
                    <Label htmlFor="email" className="text-white">
                      Email Address *
                    </Label>
                    <Input id="email" type="email" required className="bg-gray-700 border-gray-600 text-white" />
                  </div>

<div>
                    <Label htmlFor="phone" className="text-white">
                      Phone Number
                    </Label>
                    <Input id="phone" type="tel" className="bg-gray-700 border-gray-600 text-white" />
                  </div>

<div>
                    <Label htmlFor="subject" className="text-white">
                      Subject *
                    </Label>
                    <Input
                      id="subject"
                      required
                      placeholder="What's this about?"
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>

<div>
                    <Label htmlFor="message" className="text-white">
                      Message *
                    </Label>
                    <Textarea
                      id="message"
                      required
                      rows={5}
                      placeholder="Tell us more about your fitness goals or questions..."
                      className="bg-gray-700 border-gray-600 text-white"
                    />
                  </div>

<Button type="submit" className="w-full bg-yellow-600 hover:bg-yellow-700">
                    <Send className="h-4 w-4 mr-2" />
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>

{/* Calendly Booking */}
          <div className="space-y-8">
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Book a Free Consultation</CardTitle>
                <CardDescription className="text-gray-400">
                  Schedule a 30-minute consultation to discuss your goals and how we can help you achieve them.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="bg-gray-700 rounded-lg p-4 mb-6">
                  <h3 className="font-semibold text-white mb-2">What to Expect:</h3>
                  <ul className="text-gray-300 space-y-1 text-sm">
                    <li>• Fitness goal assessment</li>
                    <li>• Personalized program recommendations</li>
                    <li>• Pricing and package options</li>
                    <li>• Q&A about our services</li>
                    <li>• No obligation or pressure</li>
                  </ul>
                </div>

{/* Calendly Inline Widget */}
                <div className="bg-white rounded-lg overflow-hidden">
                  {/* 
                    REPLACE THE URL BELOW WITH YOUR ACTUAL CALENDLY LINK
                    Example: https://calendly.com/your-username/consultation
                  */}
                  <div
                    className="calendly-inline-widget"
                    data-url="https://calendly.com/sonyfizzikfitnessclass"
                    style={{ minWidth: "320px", height: "700px" }}
                  ></div>
                </div>
              </CardContent>
            </Card>

{/* FAQ Section */}
            <Card className="bg-gray-800 border-gray-700">
              <CardHeader>
                <CardTitle className="text-white">Frequently Asked Questions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <h4 className="font-semibold text-white mb-2">Do you offer free consultations?</h4>
                  <p className="text-gray-300 text-sm">
                    Yes! We offer a complimentary 30-minute consultation to discuss your goals and how we can help.
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold text-white mb-2">What should I bring to my first session?</h4>
                  <p className="text-gray-300 text-sm">
                    Just bring comfortable workout clothes, a water bottle, and a positive attitude. We'll provide
                    everything else.
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold text-white mb-2">Do you offer online training?</h4>
                  <p className="text-gray-300 text-sm">
                    Yes, we offer both in-person and online personal training sessions to fit your schedule and
                    preferences.
                  </p>
                </div>
                <div>
                  <h4 className="font-semibold text-white mb-2">What are your cancellation policies?</h4>
                  <p className="text-gray-300 text-sm">
                    We require 24-hour notice for cancellations. Same-day cancellations may be subject to a fee.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Map Section */}
        <section className="mt-16">
          <Card className="bg-gray-800 border-gray-700">
            
            
          </Card>
        </section>
      </main>

{/* Calendly Script - Add this at the bottom */}
      <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
    </div>
  )
}
[V0_FILE]typescript:file="sanity/env.ts" isEdit="true" isMerged="true"
export const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || "2023-05-03"

export const dataset = assertValue(
  process.env.NEXT_PUBLIC_SANITY_DATASET,
  "Missing environment variable: NEXT_PUBLIC_SANITY_DATASET",
)

export const projectId = assertValue(
  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  "Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID",
)

export const useCdn = false

function assertValue<T>(v: T | undefined, errorMessage: string): T {
  if (v === undefined) {
    throw new Error(errorMessage)
  }

return v
}
[V0_FILE]typescript:file="sanity/schema-types/index.ts" isEdit="true" isMerged="true"
import type { SchemaTypeDefinition } from "sanity"

import blockContent from "./block-content"
import category from "./category"
import post from "./post"
import author from "./author"
import service from "./service"
import product from "./product"
import page from "./page"

export const schema: { types: SchemaTypeDefinition[] } = {
  types: [post, author, category, blockContent, service, product, page],
}
[V0_FILE]typescript:file="sanity/schema-types/service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export const service = defineType({
  name: "service",
  title: "Service",
  type: "document",
  fields: [
    defineField({ name: "title", type: "string", title: "Title", validation: (r) => r.required() }),
    defineField({
      name: "slug",
      type: "slug",
      title: "Slug",
      options: { source: "title", maxLength: 96 },
      validation: (r) => r.required(),
    }),
    defineField({ name: "shortDescription", type: "text", title: "Short Description" }),
    defineField({ name: "description", type: "text", title: "Description" }),
    defineField({ name: "price", type: "number", title: "Price (Rs.)" }),
    defineField({ name: "duration", type: "string", title: "Duration (e.g., 8 weeks)" }),
    defineField({ name: "order", type: "number", title: "Order (sort index)" }),
    defineField({
      name: "mainImage",
      type: "image",
      title: "Main Image",
      options: { hotspot: true },
      fields: [{ name: "alt", type: "string", title: "Alt text" }],
    }),
    defineField({
      name: "image",
      title: "Image",
      type: "image",
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: "features",
      title: "Features",
      type: "array",
      of: [{ type: "string" }],
    }),
    defineField({
      name: "category",
      title: "Category",
      type: "string",
      options: {
        list: [
          { title: "Personal Training", value: "personal-training" },
          { title: "Group Classes", value: "group-classes" },
          { title: "Nutrition", value: "nutrition" },
          { title: "Wellness", value: "wellness" },
        ],
      },
    }),
  ],
  preview: {
    select: { title: "title", media: "mainImage", subtitle: "slug.current" },
  },
})
[V0_FILE]typescript:file="sanity/schema-types/product.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export const product = defineType({
  name: "product",
  title: "Product",
  type: "document",
  fields: [
    defineField({ name: "title", type: "string", title: "Title", validation: (r) => r.required() }),
    defineField({
      name: "slug",
      type: "slug",
      title: "Slug",
      options: { source: "title", maxLength: 96 },
      validation: (r) => r.required(),
    }),
    defineField({ name: "description", type: "text", title: "Description" }),
    defineField({ name: "price", type: "number", title: "Price", validation: (r) => r.min(0) }),
    defineField({
      name: "image",
      type: "image",
      title: "Image",
      options: { hotspot: true },
    }),
    defineField({
      name: "category",
      type: "string",
      title: "Category",
      options: {
        list: [
          { title: "Meal Plans", value: "meal-plans" },
          { title: "Supplements", value: "supplements" },
          { title: "Equipment", value: "equipment" },
          { title: "Programs", value: "programs" },
        ],
      },
    }),
    defineField({
      name: "images",
      type: "array",
      title: "Images",
      of: [
        {
          type: "image",
          options: { hotspot: true },
          fields: [{ name: "alt", type: "string", title: "Alt text" }],
        },
      ],
    }),
    defineField({ name: "inStock", type: "boolean", title: "In Stock", initialValue: true }),
    defineField({ name: "sku", type: "string", title: "SKU" }),
  ],
  preview: { select: { title: "title", media: "images.0" } },
})
[V0_FILE]typescript:file="sanity/schema-types/page.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export const page = defineType({
  name: "page",
  title: "Page",
  type: "document",
  fields: [
    defineField({ name: "title", type: "string", title: "Title", validation: (r) => r.required() }),
    defineField({
      name: "slug",
      type: "slug",
      title: "Slug",
      options: { source: "title", maxLength: 96 },
      validation: (r) => r.required(),
    }),
    defineField({
      name: "body",
      title: "Body",
      type: "blockContent",
    }),
    defineField({
      name: "seo",
      title: "SEO",
      type: "object",
      fields: [
        defineField({ name: "metaTitle", type: "string", title: "Meta Title" }),
        defineField({ name: "metaDescription", type: "text", title: "Meta Description" }),
      ],
    }),
  ],
  preview: {
    select: { title: "title", subtitle: "slug.current" },
  },
})
[V0_FILE]typescript:file="sanity/schema-types/block-content.ts" isEdit="true" isMerged="true"
import { defineType, defineArrayMember } from "sanity"

export default defineType({
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    defineArrayMember({
      title: "Block",
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [{ title: "Bullet", value: "bullet" }],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    }),
    defineArrayMember({
      type: "image",
      options: { hotspot: true },
    }),
  ],
})
[V0_FILE]typescript:file="sanity/schema-types/author.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export const author = defineType({
  name: "author",
  title: "Author",
  type: "document",
  fields: [
    defineField({ name: "name", type: "string", title: "Name" }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "name",
        maxLength: 96,
      },
    }),
    defineField({
      name: "image",
      type: "image",
      title: "Image",
      options: { hotspot: true },
      fields: [{ name: "alt", type: "string", title: "Alt text" }],
    }),
    defineField({
      name: "bio",
      type: "array",
      title: "Bio",
      of: [
        {
          title: "Block",
          type: "block",
          styles: [{ title: "Normal", value: "normal" }],
          lists: [],
        },
      ],
    }),
  ],
  preview: { select: { title: "name", media: "image" } },
})
[V0_FILE]typescript:file="sanity/schema-types/category.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export const category = defineType({
  name: "category",
  title: "Category",
  type: "document",
  fields: [
    defineField({ name: "title", type: "string", title: "Title", validation: (r) => r.required() }),
    defineField({
      name: "slug",
      type: "slug",
      title: "Slug",
      options: { source: "title", maxLength: 96 },
      validation: (r) => r.required(),
    }),
    defineField({
      name: "description",
      title: "Description",
      type: "text",
    }),
  ],
  preview: { select: { title: "title" } },
})
[V0_FILE]typescript:file="sanity/schema-types/post.ts" isEdit="true" isMerged="true"
import { defineField, defineType } from "sanity"

export default defineType({
  name: "post",
  title: "Post",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    }),
    defineField({
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "author" },
    }),
    defineField({
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    }),
    defineField({
      name: "publishedAt",
      title: "Published at",
      type: "datetime",
    }),
    defineField({
      name: "body",
      title: "Body",
      type: "blockContent",
    }),
  ],

preview: {
    select: {
      title: "title",
      author: "author.name",
      media: "mainImage",
    },
    prepare(selection) {
      const { author } = selection
      return { ...selection, subtitle: author && `by ${author}` }
    },
  },
})
[V0_FILE]typescript:file="lib/sanity.ts" isEdit="true"
// Placeholder data to replace Sanity CMS integration
export interface Service {
  _id: string
  title: string
  description: string
  price: string
  duration: string
  category: string
  popular?: boolean
  image?: {
    asset: {
      url: string
    }
  }
  features?: string[]
}

// Static placeholder services data
const placeholderServices: Service[] = [
  {
    _id: "service-1",
    title: "Personal Training",
    description: "One-on-one personalized fitness training sessions with certified trainers",
    price: "Rs. 2,500",
    duration: "8 weeks",
    category: "personal-training",
    popular: true,
    image: {
      asset: {
        url: "/placeholder_image.png",
      },
    },
    features: ["Customized workout plans", "Nutrition guidance", "Progress tracking", "Form correction"],
  },
  {
    _id: "service-2",
    title: "Gym Membership",
    description: "Full access to our state-of-the-art gym facilities",
    price: "Rs. 1,500",
    duration: "1 month",
    category: "gym-membership",
    popular: true,
    image: {
      asset: {
        url: "/placeholder_image.png",
      },
    },
  },
  {
    _id: "service-3",
    title: "3 Month Body Transformation",
    description: "Complete body transformation program with diet and workout plan",
    price: "Rs. 5,000",
    duration: "3 months",
    category: "3-month-complete-body-transformation",
    popular: true,
    image: {
      asset: {
        url: "/placeholder_image.png",
      },
    },
  },
]

// Placeholder functions to replace Sanity queries
export async function getServices(): Promise<Service[]> {
  return placeholderServices
}

export async function getService(id: string): Promise<Service | null> {
  return placeholderServices.find((service) => service._id === id || service.category === id) || null
}

export async function getProducts() {
  return []
}

export async function getProduct(id: string) {
  return null
}

export async function getPages() {
  return []
}

export async function getPage(slug: string) {
  return null
}

export async function getPosts() {
  return []
}

export async function getPost(slug: string) {
  return null
}

// Placeholder CRUD operations
export async function createService(data: any) {
  console.log("Creating service:", data)
  return { _id: `service-${Date.now()}`, ...data }
}

export async function createProduct(data: any) {
  console.log("Creating product:", data)
  return { _id: `product-${Date.now()}`, ...data }
}

export async function createPage(data: any) {
  console.log("Creating page:", data)
  return { _id: `page-${Date.now()}`, ...data }
}

export async function updateService(id: string, data: any) {
  console.log("Updating service:", id, data)
  return { _id: id, ...data }
}

export async function updateProduct(id: string, data: any) {
  console.log("Updating product:", id, data)
  return { _id: id, ...data }
}

export async function updatePage(id: string, data: any) {
  console.log("Updating page:", id, data)
  return { _id: id, ...data }
}

export async function deleteService(id: string) {
  console.log("Deleting service:", id)
  return { deleted: true }
}

export async function deleteProduct(id: string) {
  console.log("Deleting product:", id)
  return { deleted: true }
}

export async function deletePage(id: string) {
  console.log("Deleting page:", id)
  return { deleted: true }
}

// Placeholder image URL function
export function urlForImage(image: any) {
  return {
    url: () => image?.asset?.url || "/placeholder_image.png",
  }
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, Users, Target, Trophy, ArrowRight } from "lucide-react"
import { getServices, urlForImage } from "@/lib/sanity"

export default async function HomePage() {
  // Fetch featured services from placeholder data
  const allServices = await getServices()
  const featuredServices = allServices.filter((service: any) => service.popular).slice(0, 3)

const quickLinks = [
    { title: "Combo Plans", link: "/collections/combo-plan", description: "Save with package deals" },
    { title: "Customized Plans", link: "/collections/customized-plans", description: "Personalized fitness programs" },
    { title: "Fitness Guide Books", link: "/collections/fitness-guide-books", description: "Digital fitness guides" },
    { title: "Weight Loss Meals", link: "/products/weight-loss-meal-26-days", description: "26-day meal plan" },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Hero Section */}
      <section className="relative h-screen bg-gray-900 overflow-hidden">
        <div className="absolute inset-0">
          <img src="/hero-image.jpg" alt="Sony Fizzik Fitness Class" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        </div>

<div className="relative z-10 container mx-auto px-4 h-full flex items-center">
          <div className="max-w-4xl">
            <Badge className="mb-6 bg-yellow-600 hover:bg-yellow-700 text-lg px-4 py-2">Transform Your Life</Badge>
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
              Sony <span className="text-yellow-500">Fizzik</span>
            </h1>
            <p className="text-xl sm:text-2xl text-gray-200 mb-4 font-medium">Fitness Class</p>
            <p className="text-lg sm:text-xl text-gray-300 mb-8 max-w-2xl">
              Built by science, powered by passion. Join thousands who have transformed their bodies and lives with our
              personalized training programs, nutrition plans, and expert coaching.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" className="bg-yellow-600 hover:bg-yellow-700 text-lg px-8 py-4">
                Start Your Journey
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white hover:text-gray-900 bg-transparent text-lg px-8 py-4"
              >
                Free Consultation
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Featured Services */}
      <section className="py-12 sm:py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Featured Services</h2>
            <p className="text-gray-300 text-lg">Choose from our most popular fitness programs</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {featuredServices.map((service: any, index: number) => (
              <Card
                key={service._id}
                className="bg-gray-800 border-gray-700 relative group hover:border-yellow-500 transition-colors"
              >
                <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700 z-10">
                  {service.popular ? "Most Popular" : "Featured"}
                </Badge>
                <CardHeader>
                  <div className="w-full h-40 sm:h-48 bg-gray-700 rounded-lg mb-4 overflow-hidden">
                    <img
                      src={service.image ? urlForImage(service.image)?.url() : "/placeholder.svg"}
                      alt={service.title}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform"
                    />
                  </div>
                  <CardTitle className="text-white">{service.title}</CardTitle>
                  <CardDescription className="text-gray-400">{service.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex justify-between items-center mb-4">
                    <span className="text-lg sm:text-xl font-bold text-white">{service.price}</span>
                    <div className="flex items-center text-yellow-400">
                      <Star className="h-4 w-4 fill-current" />
                      <span className="ml-1 text-sm">4.9</span>
                    </div>
                  </div>
                  <Button asChild className="w-full bg-yellow-600 hover:bg-yellow-700">
                    <a href={`/collections/${service.category}`}>
                      Learn More <ArrowRight className="ml-2 h-4 w-4" />
                    </a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Quick Links */}
      <section className="py-12 sm:py-16 bg-gray-800">
        <div className="container mx-auto px-4">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl font-bold mb-4">Explore All Services</h2>
            <p className="text-gray-300">Find the perfect program for your fitness journey</p>
          </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            {quickLinks.map((link, index) => (
              <Card key={index} className="bg-gray-900 border-gray-700 hover:border-yellow-500 transition-colors group">
                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-white group-hover:text-yellow-500 transition-colors text-lg">
                    {link.title}
                  </CardTitle>
                  <CardDescription className="text-gray-400 text-sm">{link.description}</CardDescription>
                </CardHeader>
                <CardContent className="text-center pt-0">
                  <Button
                    asChild
                    variant="outline"
                    className="border-gray-600 text-white hover:bg-yellow-600 hover:border-yellow-600 bg-transparent w-full"
                  >
                    <a href={link.link}>View Details</a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="py-12 sm:py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 text-center">
            <div>
              <Users className="h-8 sm:h-12 w-8 sm:w-12 text-yellow-500 mx-auto mb-2 sm:mb-4" />
              <div className="text-2xl sm:text-3xl font-bold text-white mb-2">1000+</div>
              <div className="text-gray-400 text-sm sm:text-base">Happy Clients</div>
            </div>
            <div>
              <Target className="h-8 sm:h-12 w-8 sm:w-12 text-yellow-500 mx-auto mb-2 sm:mb-4" />
              <div className="text-2xl sm:text-3xl font-bold text-white mb-2">95%</div>
              <div className="text-gray-400 text-sm sm:text-base">Success Rate</div>
            </div>
            <div>
              <Trophy className="h-8 sm:h-12 w-8 sm:w-12 text-yellow-500 mx-auto mb-2 sm:mb-4" />
              <div className="text-2xl sm:text-3xl font-bold text-white mb-2">50+</div>
              <div className="text-gray-400 text-sm sm:text-base">Competition Winners</div>
            </div>
            <div>
              <Star className="h-8 sm:h-12 w-8 sm:w-12 text-yellow-500 mx-auto mb-2 sm:mb-4" />
              <div className="text-2xl sm:text-3xl font-bold text-white mb-2">4.9</div>
              <div className="text-gray-400 text-sm sm:text-base">Average Rating</div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-12 sm:py-16 bg-yellow-600">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to Transform Your Life?</h2>
          <p className="text-lg sm:text-xl mb-6 sm:mb-8 opacity-90">
            Join our community of fitness enthusiasts and start your transformation today
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100">
              Get Started Now
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-yellow-600 bg-transparent"
              asChild
            >
              <a href="https://wa.me/919707406529" target="_blank" rel="noopener noreferrer">
                <span className="hidden sm:inline">Contact Us: </span>+91 97074 06529
              </a>
            </Button>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/personal-training/page.tsx" isEdit="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, Clock, Users, Target } from "lucide-react"
import { getServices, urlForImage } from "@/lib/sanity"

export default async function PersonalTrainingPage() {
  // Fetch personal training services from placeholder data
  const allServices = await getServices()
  const personalTrainingServices = allServices.filter((service: any) => service.category === "personal-training")

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8">
        {/* Breadcrumb */}
        <div className="text-sm text-gray-400 mb-6">
          <a href="/" className="hover:text-white underline">
            Home
          </a>
          <span className="mx-2">—</span>
          <span>Sony Fizzik Personal Training</span>
        </div>

{/* Page Header */}
        <div className="mb-12">
          <h1 className="text-3xl sm:text-4xl font-bold mb-4">Sony Fizzik Personal Training</h1>
          <p className="text-gray-300 text-lg max-w-3xl">
            Transform your fitness journey with Sony Fizzik's expert personal trainers. Get customized workout plans,
            nutrition guidance, and one-on-one support to achieve your fitness goals faster.
          </p>
        </div>

{/* Training Plans Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {personalTrainingServices.map((service: any) => (
            <Card key={service._id} className="bg-gray-800 border-gray-700 relative">
              {service.popular && (
                <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700">Most Popular</Badge>
              )}
              <CardHeader>
                <div className="w-full h-48 sm:h-64 md:h-56 lg:h-48 bg-gray-700 rounded-lg mb-4">
                  <img
                    src={urlForImage(service.image)?.url() || "/placeholder_image.png"}
                    alt={service.title}
                    className="w-full h-full object-cover rounded-lg"
                  />
                </div>
                <CardTitle className="text-white">{service.title}</CardTitle>
                <CardDescription className="text-gray-400">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="ml-1 text-sm">4.9</span>
                    </div>
                    <span className="text-sm">(156 reviews)</span>
                  </div>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <span className="text-2xl font-bold text-white">{service.price}</span>
                  <span className="text-gray-400 ml-2">{service.duration}</span>
                </div>
                <p className="text-gray-300 text-sm mb-4">{service.description}</p>
                {service.features && (
                  <ul className="space-y-2">
                    {service.features.slice(0, 4).map((feature: string, index: number) => (
                      <li key={index} className="flex items-center text-sm text-gray-300">
                        <Target className="h-4 w-4 text-yellow-500 mr-2" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                )}
              </CardContent>
              <CardFooter>
                <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Book Now</Button>
              </CardFooter>
            </Card>
          ))}
        </div>

{/* Fallback if no services */}
        {personalTrainingServices.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-400 mb-4">No personal training services available at the moment.</p>
            <Button className="bg-yellow-600 hover:bg-yellow-700">Contact Us for Custom Training</Button>
          </div>
        )}

{/* Why Choose Personal Training */}
        <section className="mt-16">
          <h2 className="text-3xl sm:text-4xl font-bold mb-8 text-center">Why Choose Sony Fizzik Personal Training?</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            <div className="text-center">
              <Users className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Expert Guidance</h3>
              <p className="text-gray-400">Work with certified trainers who understand your unique needs and goals.</p>
            </div>
            <div className="text-center">
              <Target className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Customized Plans</h3>
              <p className="text-gray-400">
                Get workout plans tailored specifically to your fitness level and objectives.
              </p>
            </div>
            <div className="text-center">
              <Clock className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2">Faster Results</h3>
              <p className="text-gray-400">Achieve your fitness goals more efficiently with professional support.</p>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/services/page.tsx" isEdit="true"
import { requireAdmin } from "@/lib/auth"
import { getServices } from "@/lib/sanity"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function ServicesPage() {
  await requireAdmin()
  const services = await getServices()

<div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service: any) => (
            <Card key={service._id} className="bg-gray-800 border-gray-700">
              <CardHeader>
                <div className="w-full h-48 bg-gray-700 rounded-lg mb-4 overflow-hidden">
                  <img src="/placeholder_image.png" alt={service.title} className="w-full h-full object-cover" />
                </div>
                <div className="flex items-start justify-between">
                  <CardTitle className="text-white text-lg">{service.title}</CardTitle>
                  {service.popular && <Badge className="bg-yellow-600">Popular</Badge>}
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-gray-400 text-sm mb-4 line-clamp-2">{service.description}</p>
                <div className="flex items-center justify-between mb-4">
                  <span className="text-xl font-bold text-white">{service.price}</span>
                  <Badge variant="secondary">{service.duration}</Badge>
                </div>
                <div className="flex space-x-2">
                  <Link href={`/admin/services/${service._id}`} className="flex-1">
                    <Button
                      variant="outline"
                      className="w-full border-gray-600 text-white hover:bg-gray-700 bg-transparent"
                    >
                      <Edit className="h-4 w-4 mr-2" />
                      Edit
                    </Button>
                  </Link>
                  <Button
                    variant="outline"
                    className="border-yellow-600 text-yellow-400 hover:bg-yellow-600 hover:text-white bg-transparent"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

export async function POST(request: NextRequest) {
  try {
    await requireAdmin()

const data = await request.json()
    const service = await createService(data)

return NextResponse.json(service)
  } catch (error) {
    return NextResponse.json({ error: "Failed to create service" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/admin/logout/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { clearAdminSession } from "@/lib/auth"

export async function POST(request: NextRequest) {
  await clearAdminSession()
  return NextResponse.redirect(new URL("/admin/login", request.url))
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Sonny Fizzik",
  description: "A replica of the Sonny Fizzik store.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="dark">
      <body className={inter.className}>
        <div className="min-h-screen bg-gray-900 text-white">{children}</div>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="lib/auth.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { cookies } from "next/headers"
import { redirect } from "next/navigation"

export interface AdminUser {
  id: string
  email: string
  name: string
  role: "admin" | "super_admin"
}

// Simple auth system - in production, use proper JWT/session management
export async function getAdminUser(): Promise<AdminUser | null> {
  const cookieStore = await cookies()
  const adminSession = cookieStore.get("admin_session")

if (!adminSession) {
    return null
  }

// In production, verify JWT token here
  try {
    const user = JSON.parse(adminSession.value)
    return user
  } catch {
    return null
  }
}

export async function requireAdmin() {
  const user = await getAdminUser()
  if (!user) {
    redirect("/admin/login")
  }
  return user
}

export async function setAdminSession(user: AdminUser) {
  const cookieStore = await cookies()
  cookieStore.set("admin_session", JSON.stringify(user), {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24 * 7, // 7 days
  })
}

export async function clearAdminSession() {
  const cookieStore = await cookies()
  cookieStore.delete("admin_session")
}

// Demo credentials - in production, verify against database with hashed passwords
export async function authenticate(email: string, password: string): Promise<AdminUser | null> {
  if (email === "admin@sonnyfizzik.com" && password === "admin123") {
    const user = {
      id: "1",
      email: "admin@sonnyfizzik.com",
      name: "Admin User",
      role: "admin" as const,
    }
    return user
  }
  return null
}
[V0_FILE]typescriptreact:file="app/api/admin/login/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { setAdminSession } from "@/lib/auth"

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

// Demo credentials - in production, verify against database with hashed passwords
    if (email === "admin@sonnyfizzik.com" && password === "admin123") {
      const user = {
        id: "1",
        email: "admin@sonnyfizzik.com",
        name: "Admin User",
        role: "admin" as const,
      }

await setAdminSession(user)

return NextResponse.json({ success: true })
    }

return NextResponse.json({ error: "Invalid credentials" }, { status: 401 })
  } catch (error) {
    return NextResponse.json({ error: "Server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Custom yellow color scheme
        yellow: {
          50: "#fefce8",
          100: "#fef3c7",
          200: "#fde68a",
          300: "#fcd34d",
          400: "#fbbf24",
          500: "#f59e0b",
          600: "#d97706",
          700: "#b45309",
          800: "#92400e",
          900: "#78350f",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="app/collections/gym-membership/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check, Star, Users, Clock, Dumbbell } from "lucide-react"

export default function GymMembershipPage() {
  const membershipPlans = [
    {
      id: 1,
      title: "Basic Membership",
      price: "Rs. 150",
      duration: "Per Month",
      originalPrice: "Rs. 200",
      features: [
        "Access to gym equipment",
        "Locker room access",
        "Basic fitness assessment",
        "Group fitness classes",
        "Free Wi-Fi",
      ],
      popular: false,
      savings: "25%",
    },
    {
      id: 2,
      title: "Premium Membership",
      price: "Rs. 250",
      duration: "Per Month",
      originalPrice: "Rs. 350",
      features: [
        "All Basic features",
        "Personal trainer consultation",
        "Nutrition guidance",
        "Sauna and steam room",
        "Guest passes (2 per month)",
        "Priority booking",
      ],
      popular: true,
      savings: "29%",
    },
    {
      id: 3,
      title: "VIP Membership",
      price: "Rs. 400",
      duration: "Per Month",
      originalPrice: "Rs. 550",
      features: [
        "All Premium features",
        "Unlimited personal training",
        "Massage therapy sessions",
        "Private training area access",
        "Unlimited guest passes",
        "Meal planning service",
        "24/7 gym access",
      ],
      popular: false,
      savings: "27%",
    },
  ]

const facilities = [
    {
      icon: Dumbbell,
      title: "State-of-the-Art Equipment",
      description: "Latest fitness machines and free weights from top brands",
    },
    {
      icon: Users,
      title: "Group Classes",
      description: "Yoga, Pilates, HIIT, Zumba, and more led by certified instructors",
    },
    {
      icon: Clock,
      title: "Flexible Hours",
      description: "Open 6 AM to 11 PM, 7 days a week for your convenience",
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Page Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold mb-4">Gym Membership Plans</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Join Sonny Fizzik and get access to world-class fitness facilities, expert guidance, and a supportive
            community to help you achieve your fitness goals.
          </p>
        </div>

{/* Membership Plans */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
          {membershipPlans.map((plan) => (
            <Card key={plan.id} className="bg-gray-800 border-gray-700 relative">
              {plan.popular && (
                <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700">Most Popular</Badge>
              )}
              <div className="absolute -top-2 right-4">
                <Badge variant="secondary" className="bg-green-600 hover:bg-green-700">
                  Save {plan.savings}
                </Badge>
              </div>
              <CardHeader>
                <div className="w-full h-48 bg-gray-700 rounded-lg mb-4">
                  <img
                    src="/placeholder.svg?height=200&width=300&text=Gym+Membership"
                    alt={plan.title}
                    className="w-full h-full object-cover rounded-lg"
                  />
                </div>
                <CardTitle className="text-white">{plan.title}</CardTitle>
                <CardDescription className="text-gray-400">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="ml-1 text-sm">4.8</span>
                    </div>
                    <span className="text-sm">(150+ members)</span>
                  </div>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <div className="flex items-center space-x-2">
                    <span className="text-2xl font-bold text-white">{plan.price}</span>
                    <span className="text-lg text-gray-400 line-through">{plan.originalPrice}</span>
                  </div>
                  <span className="text-gray-400">{plan.duration}</span>
                </div>
                <div className="mb-4">
                  <h4 className="font-semibold text-white mb-2">What's Included:</h4>
                  <ul className="space-y-2">
                    {plan.features.map((feature, index) => (
                      <li key={index} className="flex items-start text-sm text-gray-300">
                        <Check className="h-4 w-4 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Join Now</Button>
              </CardFooter>
            </Card>
          ))}
        </div>

{/* Facilities Section */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">World-Class Facilities</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {facilities.map((facility, index) => (
              <Card key={index} className="bg-gray-800 border-gray-700 text-center">
                <CardHeader>
                  <facility.icon className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
                  <CardTitle className="text-white">{facility.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400">{facility.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

{/* Why Choose Us */}
        <section className="mb-16 bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-8 text-center">Why Choose Sonny Fizzik?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Expert Trainers</h3>
              <p className="text-gray-300">
                Our certified trainers are here to guide you every step of the way, ensuring you get the most out of
                your workouts safely and effectively.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Community Support</h3>
              <p className="text-gray-300">
                Join a community of like-minded individuals who will motivate and support you on your fitness journey.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Flexible Scheduling</h3>
              <p className="text-gray-300">
                With extended hours and flexible membership options, we make it easy to fit fitness into your busy
                lifestyle.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Results Guaranteed</h3>
              <p className="text-gray-300">
                Our proven methods and personalized approach ensure you see real results and achieve your fitness goals.
              </p>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="text-center bg-yellow-600 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-4">Ready to Start Your Fitness Journey?</h2>
          <p className="text-lg mb-6 opacity-90">
            Join hundreds of satisfied members who have transformed their lives at Sonny Fizzik.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100">
              Join Now - Start Today
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-yellow-600 bg-transparent"
            >
              Free Trial - 3 Days
            </Button>
          </div>
          <p className="text-sm mt-4 opacity-80">No joining fee • Cancel anytime • Money-back guarantee</p>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/combo-plan/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check, Star } from "lucide-react"

export default function ComboPlansPage() {
  const comboPlans = [
    {
      id: 1,
      title: "Ultimate Transformation Combo",
      originalPrice: "Rs. 1,500",
      salePrice: "Rs. 1,200",
      duration: "3 Months",
      rating: 4.9,
      reviews: 89,
      includes: [
        "Personal Training Sessions (12 sessions)",
        "Customized Meal Plan",
        "Fitness Assessment",
        "Progress Tracking",
        "Supplement Guidance",
        "24/7 Support",
      ],
      popular: true,
      savings: "20%",
    },
    {
      id: 2,
      title: "Strength & Nutrition Combo",
      originalPrice: "Rs. 1,000",
      salePrice: "Rs. 800",
      duration: "2 Months",
      rating: 4.8,
      reviews: 67,
      includes: [
        "Strength Training Program",
        "Nutrition Consultation",
        "Meal Planning Guide",
        "Weekly Check-ins",
        "Exercise Form Correction",
      ],
      savings: "20%",
    },
    {
      id: 3,
      title: "Weight Loss Accelerator",
      originalPrice: "Rs. 800",
      salePrice: "Rs. 650",
      duration: "6 Weeks",
      rating: 4.7,
      reviews: 124,
      includes: [
        "HIIT Training Sessions",
        "Weight Loss Meal Plan",
        "Cardio Program",
        "Body Composition Analysis",
        "Motivation Coaching",
      ],
      savings: "19%",
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Page Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold mb-4">Combo Plans</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Save more with our comprehensive combo packages. Get the best value by combining multiple services for a
            complete fitness transformation experience.
          </p>
        </div>

{/* Combo Plans Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {comboPlans.map((plan) => (
            <Card key={plan.id} className="bg-gray-800 border-gray-700 relative">
              {plan.popular && (
                <Badge className="absolute -top-2 left-4 bg-yellow-600 hover:bg-yellow-700">Most Popular</Badge>
              )}
              <div className="absolute -top-2 right-4">
                <Badge variant="secondary" className="bg-green-600 hover:bg-green-700">
                  Save {plan.savings}
                </Badge>
              </div>
              <CardHeader>
                <div className="w-full h-48 bg-gray-700 rounded-lg mb-4">
                  <img
                    src="/placeholder.svg?height=200&width=300&text=Combo+Plan"
                    alt={plan.title}
                    className="w-full h-full object-cover rounded-lg"
                  />
                </div>
                <CardTitle className="text-white">{plan.title}</CardTitle>
                <CardDescription className="text-gray-400">
                  <div className="flex items-center space-x-2 mb-2">
                    <div className="flex items-center">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      <span className="ml-1 text-sm">{plan.rating}</span>
                    </div>
                    <span className="text-sm">({plan.reviews} reviews)</span>
                  </div>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="mb-4">
                  <div className="flex items-center space-x-2">
                    <span className="text-2xl font-bold text-white">{plan.salePrice}</span>
                    <span className="text-lg text-gray-400 line-through">{plan.originalPrice}</span>
                  </div>
                  <span className="text-gray-400">{plan.duration}</span>
                </div>
                <div className="mb-4">
                  <h4 className="font-semibold text-white mb-2">What's Included:</h4>
                  <ul className="space-y-2">
                    {plan.includes.map((item, index) => (
                      <li key={index} className="flex items-start text-sm text-gray-300">
                        <Check className="h-4 w-4 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </CardContent>
              <CardFooter>
                <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Get This Combo</Button>
              </CardFooter>
            </Card>
          ))}
        </div>

{/* Benefits Section */}
        <section className="mt-16 bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-6 text-center">Why Choose Combo Plans?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Maximum Savings</h3>
              <p className="text-gray-300">
                Save up to 20% compared to purchasing individual services. Our combo plans offer the best value for
                comprehensive fitness solutions.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Complete Solution</h3>
              <p className="text-gray-300">
                Get everything you need in one package - training, nutrition, support, and guidance. No need to piece
                together different services.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Proven Results</h3>
              <p className="text-gray-300">
                Our combo plans are designed based on proven methodologies that deliver faster and more sustainable
                results than individual approaches.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4 text-yellow-500">Ongoing Support</h3>
              <p className="text-gray-300">
                Benefit from continuous support throughout your journey with regular check-ins, adjustments, and
                motivation from our expert team.
              </p>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/3-month-complete-body-transformation/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Calendar, Target, TrendingUp, Users } from "lucide-react"

export default function TransformationPage() {
  const transformationPhases = [
    {
      phase: "Month 1",
      title: "Foundation Building",
      description: "Establish proper form, build basic strength, and create healthy habits",
      goals: [
        "Learn proper exercise techniques",
        "Establish workout routine",
        "Begin nutritional changes",
        "Build cardiovascular base",
      ],
    },
    {
      phase: "Month 2",
      title: "Strength & Conditioning",
      description: "Increase intensity, build muscle, and optimize nutrition for results",
      goals: [
        "Increase training intensity",
        "Focus on muscle building",
        "Refine nutrition plan",
        "Improve body composition",
      ],
    },
    {
      phase: "Month 3",
      title: "Peak Performance",
      description: "Maximize results, fine-tune physique, and prepare for maintenance",
      goals: [
        "Achieve peak conditioning",
        "Fine-tune physique",
        "Master advanced techniques",
        "Plan long-term maintenance",
      ],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Hero Section */}
        <div className="mb-12">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
            <div>
              <Badge className="mb-4 bg-yellow-600 hover:bg-yellow-700">Complete Transformation Program</Badge>
              <h1 className="text-4xl font-bold mb-4">3 Month Complete Body Transformation</h1>
              <p className="text-gray-300 text-lg mb-6">
                Transform your body and life in just 90 days with our comprehensive program. Get personalized training,
                nutrition, and support to achieve dramatic results.
              </p>
              <div className="flex items-center space-x-6 mb-6">
                <div className="text-center">
                  <div className="text-2xl font-bold text-yellow-500">90</div>
                  <div className="text-sm text-gray-400">Days</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-yellow-500">24/7</div>
                  <div className="text-sm text-gray-400">Support</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-yellow-500">100%</div>
                  <div className="text-sm text-gray-400">Guaranteed</div>
                </div>
              </div>
              <div className="flex space-x-4">
                <Button className="bg-yellow-600 hover:bg-yellow-700">Start Transformation - Rs. 2,500</Button>
                <Button variant="outline" className="border-gray-600 text-white hover:bg-gray-700 bg-transparent">
                  Learn More
                </Button>
              </div>
            </div>
            <div className="bg-gray-700 rounded-lg h-96">
              <img
                src="/placeholder.svg?height=400&width=500&text=Body+Transformation"
                alt="Body Transformation"
                className="w-full h-full object-cover rounded-lg"
              />
            </div>
          </div>
        </div>

{/* Transformation Timeline */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">Your 90-Day Journey</h2>
          <div className="space-y-8">
            {transformationPhases.map((phase, index) => (
              <Card key={index} className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <Badge variant="secondary" className="mb-2">
                        {phase.phase}
                      </Badge>
                      <CardTitle className="text-white">{phase.title}</CardTitle>
                      <CardDescription className="text-gray-400">{phase.description}</CardDescription>
                    </div>
                    <Progress value={(index + 1) * 33.33} className="w-24" />
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <h4 className="font-semibold text-white mb-2">Key Goals:</h4>
                      <ul className="space-y-1">
                        {phase.goals.map((goal, goalIndex) => (
                          <li key={goalIndex} className="flex items-center text-sm text-gray-300">
                            <Target className="h-4 w-4 text-yellow-500 mr-2" />
                            {goal}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div className="bg-gray-700 rounded-lg h-32">
                      <img
                        src={`/placeholder_image.png?height=120&width=200&text=${phase.phase}+Progress`}
                        alt={`${phase.phase} Progress`}
                        className="w-full h-full object-cover rounded-lg"
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

{/* What's Included */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">Complete Program Includes</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: Users,
                title: "Personal Training",
                description: "36 one-on-one sessions with certified trainers",
              },
              {
                icon: Target,
                title: "Custom Nutrition Plan",
                description: "Personalized meal plans and nutrition guidance",
              },
              {
                icon: Calendar,
                title: "Weekly Check-ins",
                description: "Regular progress assessments and plan adjustments",
              },
              {
                icon: TrendingUp,
                title: "Body Composition Analysis",
                description: "Advanced body scanning and progress tracking",
              },
              { icon: Users, title: "24/7 Support", description: "Round-the-clock access to your transformation team" },
              { icon: Target, title: "Supplement Protocol", description: "Customized supplement recommendations" },
            ].map((item, index) => (
              <Card key={index} className="bg-gray-800 border-gray-700 text-center">
                <CardHeader>
                  <item.icon className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
                  <CardTitle className="text-white">{item.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-400">{item.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

{/* Success Stories */}
        <section className="mb-16 bg-gray-800 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-8 text-center">Success Stories</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: "Ahmed K.", result: "Lost 25kg", time: "90 days" },
              { name: "Sarah M.", result: "Gained 8kg muscle", time: "90 days" },
              { name: "Omar R.", result: "Body fat: 25% → 12%", time: "90 days" },
            ].map((story, index) => (
              <div key={index} className="text-center">
                <div className="bg-gray-700 rounded-lg h-48 mb-4">
                  <img
                    src={`/placeholder_svg.png?height=200&width=200&text=${story.name}+Transformation`}
                    alt={`${story.name} transformation`}
                    className="w-full h-full object-cover rounded-lg"
                  />
                </div>
                <h3 className="font-semibold text-white">{story.name}</h3>
                <p className="text-yellow-500 font-bold">{story.result}</p>
                <p className="text-gray-400 text-sm">in {story.time}</p>
              </div>
            ))}
          </div>
        </section>

{/* CTA Section */}
        <section className="text-center bg-yellow-600 rounded-lg p-8">
          <h2 className="text-3xl font-bold mb-4">Ready to Transform Your Life?</h2>
          <p className="text-lg mb-6 opacity-90">
            Join hundreds of successful transformations. Start your 90-day journey today.
          </p>
          <Button size="lg" className="bg-white text-yellow-600 hover:bg-gray-100">
            Start Your Transformation - Rs. 2,500
          </Button>
          <p className="text-sm mt-4 opacity-80">Money-back guarantee if you don't see results</p>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/collections/customized-plans/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { User, Target, Clock, Zap } from "lucide-react"

export default function CustomizedPlansPage() {
  const planTypes = [
    {
      id: 1,
      title: "Weight Loss Plan",
      description: "Customized program focused on sustainable weight loss and fat burning",
      price: "Rs. 800",
      duration: "8 weeks",
      features: ["Calorie deficit planning", "Cardio optimization", "Strength training", "Meal timing"],
    },
    {
      id: 2,
      title: "Muscle Building Plan",
      description: "Designed to maximize muscle growth and strength gains",
      price: "Rs. 900",
      duration: "12 weeks",
      features: ["Progressive overload", "Hypertrophy focus", "Nutrition for gains", "Recovery protocols"],
    },
    {
      id: 3,
      title: "Athletic Performance",
      description: "Sport-specific training to enhance athletic performance",
      price: "Rs. 1,000",
      duration: "10 weeks",
      features: ["Sport-specific drills", "Power development", "Agility training", "Injury prevention"],
    },
    {
      id: 4,
      title: "Rehabilitation Plan",
      description: "Safe return to fitness after injury with medical clearance",
      price: "Rs. 750",
      duration: "6-12 weeks",
      features: ["Medical consultation", "Gradual progression", "Pain management", "Functional movement"],
    },
  ]

return (
    <div className="min-h-screen bg-gray-900 text-white">
      <Header />

{/* Page Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold mb-4">Customized Fitness Plans</h1>
          <p className="text-gray-300 text-lg max-w-3xl mx-auto">
            Get a fitness plan designed specifically for you. Our experts create personalized programs based on your
            goals, fitness level, schedule, and preferences.
          </p>
        </div>

{/* Plan Types */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">Choose Your Plan Type</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {planTypes.map((plan) => (
              <Card key={plan.id} className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <div className="w-full h-48 bg-gray-700 rounded-lg mb-4">
                    <img
                      src={`/placeholder_image.png?height=200&width=300&text=${plan.title.replace(" ", "+")}`}
                      alt={plan.title}
                      className="w-full h-full object-cover rounded-lg"
                    />
                  </div>
                  <CardTitle className="text-white">{plan.title}</CardTitle>
                  <CardDescription className="text-gray-400">{plan.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex justify-between items-center mb-4">
                    <span className="text-2xl font-bold text-white">{plan.price}</span>
                    <Badge variant="secondary">{plan.duration}</Badge>
                  </div>
                  <ul className="space-y-2">
                    {plan.features.map((feature, index) => (
                      <li key={index} className="flex items-center text-sm text-gray-300">
                        <Target className="h-4 w-4 text-yellow-500 mr-2" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Customize This Plan</Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </section>

{/* Customization Process */}
        <section className="mb-16">
          <h2 className="text-3xl font-bold mb-8 text-center">How It Works</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            {[
              {
                icon: User,
                step: "1",
                title: "Assessment",
                description: "Complete detailed fitness and health assessment",
              },
              {
                icon: Target,
                step: "2",
                title: "Goal Setting",
                description: "Define specific, measurable fitness objectives",
              },
              { icon: Zap, step: "3", title: "Plan Creation", description: "Expert creates your personalized program" },
              {
                icon: Clock,
                step: "4",
                title: "Implementation",
                description: "Start your journey with ongoing support",
              },
            ].map((item, index) => (
              <div key={index} className="text-center">
                <div className="bg-yellow-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                  <item.icon className="h-8 w-8 text-white" />
                </div>
                <div className="bg-gray-800 rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm font-bold">
                  {item.step}
                </div>
                <h3 className="font-semibold text-white mb-2">{item.title}</h3>
                <p className="text-gray-400 text-sm">{item.description}</p>
              </div>
            ))}
          </div>
        </section>

{/* Consultation Form */}
        <section className="mb-16">
          <Card className="bg-gray-800 border-gray-700 max-w-2xl mx-auto">
            <CardHeader>
              <CardTitle className="text-white text-center">Get Your Custom Plan</CardTitle>
              <CardDescription className="text-gray-400 text-center">
                Fill out this form to get started with your personalized fitness plan
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="firstName" className="text-white">
                    First Name
                  </Label>
                  <Input id="firstName" className="bg-gray-700 border-gray-600 text-white" />
                </div>
                <div>
                  <Label htmlFor="lastName" className="text-white">
                    Last Name
                  </Label>
                  <Input id="lastName" className="bg-gray-700 border-gray-600 text-white" />
                </div>
              </div>
              <div>
                <Label htmlFor="email" className="text-white">
                  Email
                </Label>
                <Input id="email" type="email" className="bg-gray-700 border-gray-600 text-white" />
              </div>
              <div>
                <Label htmlFor="phone" className="text-white">
                  Phone Number
                </Label>
                <Input id="phone" className="bg-gray-700 border-gray-600 text-white" />
              </div>
              <div>
                <Label htmlFor="goal" className="text-white">
                  Primary Fitness Goal
                </Label>
                <Select>
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue placeholder="Select your main goal" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="weight-loss">Weight Loss</SelectItem>
                    <SelectItem value="muscle-gain">Muscle Gain</SelectItem>
                    <SelectItem value="strength">Strength Building</SelectItem>
                    <SelectItem value="endurance">Endurance</SelectItem>
                    <SelectItem value="general">General Fitness</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="experience" className="text-white">
                  Fitness Experience
                </Label>
                <Select>
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue placeholder="Select your experience level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="beginner">Beginner (0-6 months)</SelectItem>
                    <SelectItem value="intermediate">Intermediate (6 months - 2 years)</SelectItem>
                    <SelectItem value="advanced">Advanced (2+ years)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="availability" className="text-white">
                  Weekly Availability
                </Label>
                <Select>
                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
                    <SelectValue placeholder="How many days per week?" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2-3">2-3 days per week</SelectItem>
                    <SelectItem value="4-5">4-5 days per week</SelectItem>
                    <SelectItem value="6-7">6-7 days per week</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="notes" className="text-white">
                  Additional Notes
                </Label>
                <Textarea
                  id="notes"
                  placeholder="Tell us about any injuries, preferences, or special requirements..."
                  className="bg-gray-700 border-gray-600 text-white"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button className="w-full bg-yellow-600 hover:bg-yellow-700">Get My Custom Plan</Button>
            </CardFooter>
          </Card>
        </section>
      </main>