ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$7a","$80","$81","$7b","$79","$82"],"SWRDataProvider"] 103:[] 104:[["b_L9QX7NZqoFH",null],["b_2OTD91BfpnT",null],["b_rZg1uBEJcLU",null],["b_5f0XnzxIFzK",null],["b_GiA0BXdfJJV",null],["b_QkmMF8w5x71",null],["b_m1Wje8akrkP",null],["b_FLjh1p3IfNR",null],["b_3pPMgqdwg0b",null],["b_UUEbbhSS97H",null],["b_BUHZBMDI5Rn",null],["b_4GjX7ybYnR4",null],["b_mJ62UtiF6TZ",null],["b_fsu5TZv96bp",null],["b_baeF4cC2lvj",null],["b_YmtFQWeMc4a",null],["b_BxIXmwe2s76",null],["b_u4MBJBZYYYc",null]] 105:[["b_L9QX7NZqoFH",{"templateVersionId":null,"templateCanonId":null}],["b_2OTD91BfpnT",{"templateVersionId":null,"templateCanonId":null}],["b_rZg1uBEJcLU",{"templateVersionId":null,"templateCanonId":null}],["b_5f0XnzxIFzK",{"templateVersionId":null,"templateCanonId":null}],["b_GiA0BXdfJJV",{"templateVersionId":null,"templateCanonId":null}],["b_QkmMF8w5x71",{"templateVersionId":null,"templateCanonId":null}],["b_m1Wje8akrkP",{"templateVersionId":null,"templateCanonId":null}],["b_FLjh1p3IfNR",{"templateVersionId":null,"templateCanonId":null}],["b_3pPMgqdwg0b",{"templateVersionId":null,"templateCanonId":null}],["b_UUEbbhSS97H",{"templateVersionId":null,"templateCanonId":null}],["b_BUHZBMDI5Rn",{"templateVersionId":null,"templateCanonId":null}],["b_4GjX7ybYnR4",{"templateVersionId":null,"templateCanonId":null}],["b_mJ62UtiF6TZ",{"templateVersionId":null,"templateCanonId":null}],["b_fsu5TZv96bp",{"templateVersionId":null,"templateCanonId":null}],["b_baeF4cC2lvj",{"templateVersionId":null,"templateCanonId":null}],["b_YmtFQWeMc4a",{"templateVersionId":null,"templateCanonId":null}],["b_BxIXmwe2s76",{"templateVersionId":null,"templateCanonId":null}],["b_u4MBJBZYYYc",{"templateVersionId":null,"templateCanonId":null}]] 106:[["b_EG2vUcEeziL","$D2025-06-19T05:21:18.895Z"],["b_LKICDtxOvL0","$D2025-06-19T05:25:04.123Z"],["b_mORdaGjCmOh","$D2025-06-19T22:58:51.560Z"],["b_AFTpU8aFh6J","$D2025-06-19T23:00:31.586Z"],["b_9jomp1Gg71W","$D2025-06-19T23:06:47.834Z"],["b_a9uMX7CV6qF","$D2025-06-19T23:12:05.991Z"],["b_GBhbqncT0vp","$D2025-06-19T23:15:11.206Z"],["b_z4CBkvyceDv","$D2025-06-19T23:16:25.381Z"],["b_qK75poEgrl4","$D2025-06-19T23:22:13.462Z"],["b_wpAO6lwm3kA","$D2025-06-20T04:01:47.443Z"],["b_SYFpcKI4esV","$D2025-06-20T04:11:17.534Z"],["b_erWbzRrRKaa","$D2025-06-20T04:15:18.971Z"],["b_kQIxwFyVfgn","$D2025-06-20T04:28:09.013Z"],["b_KNrNAnPEiI3","$D2025-06-20T04:37:11.347Z"],["b_3QCDciQ4pl1","$D2025-06-20T04:44:13.600Z"],["b_YthUiD5UmZM","$D2025-06-20T04:46:36.866Z"],["b_Jizgq9pTCNi","$D2025-06-20T04:54:45.445Z"],["b_V8BnDqSQ0ob","$D2025-06-23T04:34:04.564Z"],["b_jTRSCgfH6x6","$D2025-06-23T04:38:08.829Z"],["b_I3I8JJHiHoO","$D2025-06-23T04:40:05.719Z"],["b_KJ3AfzBXcmR","$D2025-06-23T04:40:20.982Z"],["b_dYMv4WElX3O","$D2025-06-23T04:42:23.143Z"],["b_j61DUklKs1Y","$D2025-06-23T04:42:55.405Z"],["b_erUIuYNkqhu","$D2025-06-23T04:56:13.636Z"],["b_wqAXv6Hpwx4","$D2025-06-23T05:00:43.650Z"],["b_q78ZpD6EZqJ","$D2025-06-23T13:30:38.552Z"],["b_jcWV2xAlbdC","$D2025-06-24T22:38:06.727Z"],["b_NZQeE2ZEg5G","$D2025-06-24T22:45:19.944Z"],["b_vyN3l627dWV","$D2025-06-24T23:20:38.078Z"],["b_mDafSVkh9zJ","$D2025-06-24T23:22:41.072Z"],["b_wstarHFyFpL","$D2025-06-24T23:26:20.285Z"],["b_UBvj5gDrUhA","$D2025-06-24T23:31:02.637Z"],["b_ktlw1snEL3J","$D2025-06-24T23:37:12.604Z"],["b_xcpDF8Q5a3C","$D2025-06-24T23:39:44.749Z"],["b_4UZVUW9q5i0","$D2025-06-24T23:42:13.836Z"],["b_yUukZkqGO7g","$D2025-12-20T17:27:48.236Z"],["b_SJ3Z1XAMbMG","$D2025-12-20T17:29:38.800Z"],["b_gx9gmITN36I","$D2025-12-20T17:33:22.863Z"],["b_xYSAVn3bPpE","$D2025-12-20T17:36:45.481Z"],["b_uYkhnP0WjRG","$D2025-12-20T17:37:12.940Z"],["b_9e4rIbojop7","$D2025-12-20T18:01:27.171Z"],["b_gqbA0wtGYCh","$D2025-12-20T19:00:55.431Z"],["b_KrkboFTZfIZ","$D2025-12-20T19:10:05.022Z"],["b_ASjAvPKA9mk","$D2025-12-20T19:10:37.088Z"],["b_XgXTlBGQh7w","$D2025-12-20T19:12:11.004Z"],["b_olZ9QdC2xdM","$D2025-12-20T19:12:41.280Z"],["b_6OZmNqSam0s","$D2025-12-20T19:16:10.854Z"],["b_FZamUhuzXb6","$D2025-12-20T19:16:27.199Z"],["b_j0lM7OOjkoj","$D2025-12-20T19:16:44.191Z"],["b_eFE1uG1GyJb","$D2025-12-20T20:13:25.018Z"],["b_L9QX7NZqoFH","$D2026-07-03T22:40:25.140Z"],["b_2OTD91BfpnT","$D2026-07-03T22:41:06.123Z"],["b_rZg1uBEJcLU","$D2026-07-03T22:41:36.479Z"],["b_5f0XnzxIFzK","$D2026-07-03T22:41:49.371Z"],["b_GiA0BXdfJJV","$D2026-07-03T22:42:03.374Z"],["b_QkmMF8w5x71","$D2026-07-03T22:42:13.697Z"],["b_m1Wje8akrkP","$D2026-07-03T22:42:21.195Z"],["b_FLjh1p3IfNR","$D2026-07-03T22:42:28.545Z"],["b_3pPMgqdwg0b","$D2026-07-03T22:42:46.201Z"],["b_UUEbbhSS97H","$D2026-07-03T22:44:01.707Z"],["b_BUHZBMDI5Rn","$D2026-07-03T22:44:12.234Z"],["b_4GjX7ybYnR4","$D2026-07-03T22:44:23.879Z"],["b_mJ62UtiF6TZ","$D2026-07-03T22:44:33.425Z"],["b_fsu5TZv96bp","$D2026-07-03T22:44:49.569Z"],["b_baeF4cC2lvj","$D2026-07-03T22:45:11.715Z"],["b_YmtFQWeMc4a","$D2026-07-03T22:45:20.713Z"],["b_BxIXmwe2s76","$D2026-07-03T22:45:31.191Z"],["b_u4MBJBZYYYc","$D2026-07-03T22:45:41.680Z"]] 107:[["b_L9QX7NZqoFH",false],["b_2OTD91BfpnT",false],["b_rZg1uBEJcLU",false],["b_5f0XnzxIFzK",false],["b_GiA0BXdfJJV",false],["b_QkmMF8w5x71",false],["b_m1Wje8akrkP",false],["b_FLjh1p3IfNR",false],["b_3pPMgqdwg0b",false],["b_UUEbbhSS97H",false],["b_BUHZBMDI5Rn",false],["b_4GjX7ybYnR4",false],["b_mJ62UtiF6TZ",false],["b_fsu5TZv96bp",false],["b_baeF4cC2lvj",false],["b_YmtFQWeMc4a",false],["b_BxIXmwe2s76",false],["b_u4MBJBZYYYc",false]] 108:[["b_L9QX7NZqoFH","$undefined"],["b_2OTD91BfpnT","$undefined"],["b_rZg1uBEJcLU","$undefined"],["b_5f0XnzxIFzK","$undefined"],["b_GiA0BXdfJJV","$undefined"],["b_QkmMF8w5x71","$undefined"],["b_m1Wje8akrkP","$undefined"],["b_FLjh1p3IfNR","$undefined"],["b_3pPMgqdwg0b","$undefined"],["b_UUEbbhSS97H","$undefined"],["b_BUHZBMDI5Rn","$undefined"],["b_4GjX7ybYnR4","$undefined"],["b_mJ62UtiF6TZ","$undefined"],["b_fsu5TZv96bp","$undefined"],["b_baeF4cC2lvj","$undefined"],["b_YmtFQWeMc4a","$undefined"],["b_BxIXmwe2s76","$undefined"],["b_u4MBJBZYYYc","$undefined"]] 109:[["b_L9QX7NZqoFH",null],["b_2OTD91BfpnT",null],["b_rZg1uBEJcLU",null],["b_5f0XnzxIFzK",null],["b_GiA0BXdfJJV",null],["b_QkmMF8w5x71",null],["b_m1Wje8akrkP",null],["b_FLjh1p3IfNR",null],["b_3pPMgqdwg0b",null],["b_UUEbbhSS97H",null],["b_BUHZBMDI5Rn",null],["b_4GjX7ybYnR4",null],["b_mJ62UtiF6TZ",null],["b_fsu5TZv96bp",null],["b_baeF4cC2lvj",null],["b_YmtFQWeMc4a",null],["b_BxIXmwe2s76",null],["b_u4MBJBZYYYc",null]] 10a:[["b_L9QX7NZqoFH",true],["b_2OTD91BfpnT",true],["b_rZg1uBEJcLU",true],["b_5f0XnzxIFzK",true],["b_GiA0BXdfJJV",true],["b_QkmMF8w5x71",true],["b_m1Wje8akrkP",true],["b_FLjh1p3IfNR",true],["b_3pPMgqdwg0b",true],["b_UUEbbhSS97H",true],["b_BUHZBMDI5Rn",true],["b_4GjX7ybYnR4",true],["b_mJ62UtiF6TZ",true],["b_fsu5TZv96bp",true],["b_baeF4cC2lvj",true],["b_YmtFQWeMc4a",true],["b_BxIXmwe2s76",true],["b_u4MBJBZYYYc",true]] 10b:[["b_L9QX7NZqoFH",true],["b_2OTD91BfpnT",true],["b_rZg1uBEJcLU",true],["b_5f0XnzxIFzK",true],["b_GiA0BXdfJJV",true],["b_QkmMF8w5x71",true],["b_m1Wje8akrkP",true],["b_FLjh1p3IfNR",true],["b_3pPMgqdwg0b",true],["b_UUEbbhSS97H",true],["b_BUHZBMDI5Rn",true],["b_4GjX7ybYnR4",true],["b_mJ62UtiF6TZ",true],["b_fsu5TZv96bp",true],["b_baeF4cC2lvj",true],["b_YmtFQWeMc4a",true],["b_BxIXmwe2s76",true],["b_u4MBJBZYYYc",true]] 10c:[] 10d:T490,I can see both pages are calling the same `/api/labs` endpoint but expecting different fields—the admin page needs `partnership_status` and `referral_program`, while the public page needs `clia_number` and other fields. I'm going to rewrite the labs route to query the actual database using Neon serverless with parameterized queries to handle the dynamic filtering safely. Writing the API route... Now I'm handling the detail route for fetching and updating individual labs. For the GET endpoint, I'll query the database by ID and return a 404 if not found. There's a consideration with Next 15 where route handler params became async and need to be awaited, though the existing code accesses them synchronously — I should handle this properly to avoid compatibility issues. For the PATCH endpoint, I'm building an update mechanism that accepts a request body and only modifies allowed partnership-related fields like status, referral program details, contact information, and timestamps. I'll construct a parameterized query dynamically based on which fields are provided, then execute the update and return the modified record. Writing the route handlers...10e:T5f5,I see the auth actions are already wired to the real database, so signup and login are mostly functional—the main issue is `getCurrentUser()` still returns mock data instead of querying the actual user. I need to update it to fetch from the database using `getUserById` and map the DB fields properly. There's also the chat route that lacks rate limiting and the client-side chat interface relying on mock user data, so I'll need to wire those together coherently. For the chat route, I should check the user's quota before streaming, then increment their usage count in the `onFinish` callback and log it. The tricky part is deciding whether to require authentication—the free plan is tied to accounts with a 5-question monthly limit, so ideally the chat should enforce login, but that would break the current anonymous demo experience. I'm leaning toward requiring authentication for the chat API and creating a separate usage endpoint so the frontend can display real quota information. My implementation plan: add `getCurrentUser()` to lib/auth.ts that fetches the user from the database and maps their fields to camelCase, create a `GET /api/user/usage` endpoint that returns the current user's plan and question limits, update the chat route to enforce those limits server-side, and have the chat interface fetch real usage via SWR instead of using the mock user. Starting with `getCurrentUser()` in lib/auth.ts—I'll import `getUserById` from lib/database and map the database user shape to the auth interface.10f:T48c,Stripe is set up and I need to clean up the payment method types configuration in the existing code — removing `payment_method_types: ["card"]` from both the subscription and checkout session functions since that's not a best practice. The API version is older but I'll keep it as-is to avoid TypeScript type mismatches. Now I'm building out the subscription checkout flow. I'll create a plan configuration file as the source of truth with pro and family tiers at monthly and yearly price points, then set up a server action to handle the checkout session creation — getting the current user, creating or reusing their Stripe customer, and returning the redirect URL. The webhook will listen for completed checkout sessions, extract the plan and user info from metadata, update the user's subscription status and question limits, and store the Stripe customer and subscription IDs. I'll need to construct the success and cancel URLs using the request headers to get the host and protocol, then update the subscribe page to call the server action instead of the fake card form. The users table already has all the fields I need for tracking subscription state.110:T6cbc0,[V0_FILE]typescriptreact:file="components/genetic-resources.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ExternalLink, BookOpen, Users, Shield } from "lucide-react" import Link from "next/link" export default function GeneticResources() { const resources = [ { title: "National Human Genome Research Institute", description: "Comprehensive genetic information and research updates", url: "https://www.genome.gov", icon: BookOpen, category: "Education", }, { title: "Genetic Alliance", description: "Support and advocacy for genetic conditions", url: "https://www.geneticalliance.org", icon: Users, category: "Support", }, { title: "National Society of Genetic Counselors", description: "Find certified genetic counselors in your area", url: "https://www.nsgc.org", icon: Shield, category: "Professional", }, ] return (

Genetic Resources

{resources.map((resource, index) => ( {resource.title} {resource.category}

{resource.description}

))}

) } [V0_FILE]typescriptreact:file="app/resources/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import GeneticResources from "@/components/genetic-resources" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle, Info, Heart, Brain } from "lucide-react" export default function ResourcesPage() { const conditions = [ { name: "Hereditary Breast and Ovarian Cancer", genes: "BRCA1, BRCA2", description: "Genetic mutations that increase risk of breast and ovarian cancers", icon: Heart, }, { name: "Huntington's Disease", genes: "HTT", description: "Progressive neurodegenerative disorder affecting movement and cognition", icon: Brain, }, { name: "Cystic Fibrosis", genes: "CFTR", description: "Genetic disorder affecting lungs and digestive system", icon: Heart, }, ] return (

Genetic Resources & Information

Access reliable information about genetic conditions, testing, and support resources.

Important Notice

The information provided here is for educational purposes only and should not replace professional medical advice. Always consult with a healthcare provider or certified genetic counselor for personalized guidance.

Common Genetic Conditions

{conditions.map((condition, index) => ( {condition.name}

Gene(s): {condition.genes}

{condition.description}

))}

Understanding Genetic Testing

Types of Genetic Tests:

Diagnostic Testing: Confirms or rules out a genetic condition
Predictive Testing: Determines risk of developing a condition
Carrier Testing: Identifies carriers of genetic conditions
Pharmacogenomic Testing: Guides medication selection and dosing

Before Getting Tested:

Consider the potential benefits and limitations
Understand how results might affect you and your family
Discuss with a genetic counselor or healthcare provider
Consider privacy and insurance implications

) } [V0_FILE]typescriptreact:file="app/subscribe/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/setup/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { CheckCircle, AlertTriangle, Key, Database, Zap } from "lucide-react" export default function SetupPage() { return (

Setup Guide

Follow these steps to get your Cover My Genetics application fully functional.

{/* OpenAI API Setup */} 1. OpenAI API Configuration Required Genie AI requires an OpenAI API key to function. Without this, the genetic counselor won't be able to respond to questions.

Steps to configure:

Go to{" "} OpenAI API Keys
Create a new API key (you'll need to add billing information)
Copy the API key
Add it to your environment variables as{" "} OPENAI_API_KEY

Environment Variable Setup:

For local development:


                      # Create a .env.local file in your project root
                      

                      OPENAI_API_KEY=your_api_key_here

For Vercel deployment:

Go to your Vercel project dashboard
Navigate to Settings → Environment Variables
Add OPENAI_API_KEY with your API key value
Redeploy your application

Cost Estimate: OpenAI GPT-4 costs approximately $0.03 per 1K tokens. A typical conversation costs $0.10-$0.50. {/* Optional Enhancements */} 2. Database Setup (Optional) Recommended

For production use, you'll want to add a database to store user accounts, subscription status, and usage tracking.

Supabase (Recommended)

• Built-in authentication
• Real-time subscriptions
• Easy integration

Neon PostgreSQL

• Serverless PostgreSQL
• Auto-scaling
• Generous free tier

{/* Payment Processing */} 3. Payment Processing (Optional) For Subscriptions

To enable paid subscriptions, integrate with Stripe for payment processing.

Required Environment Variables:


                    STRIPE_SECRET_KEY=sk_test_...
                    

                    STRIPE_PUBLISHABLE_KEY=pk_test_...
                    

                    STRIPE_WEBHOOK_SECRET=whsec_...

{/* Testing */} 4. Test Your Setup

Verify everything is working:

Navigate to the "Ask Genie" page
Try asking a sample question like "What is genetics?"
Verify Genie responds with helpful information
Check that usage tracking updates correctly

Pro Tip: Start with a small OpenAI usage limit to control costs while testing.

Need help with setup?{" "} Contact our support team

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Navbar from "@/components/navbar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Key, Shield, Eye, EyeOff, CheckCircle, AlertTriangle, ExternalLink } from "lucide-react" import Link from "next/link" export default function ProfilePage() { const [apiKey, setApiKey] = useState("") const [showApiKey, setShowApiKey] = useState(false) const [isValidating, setIsValidating] = useState(false) const [apiKeyStatus, setApiKeyStatus] = useState<"none" | "valid" | "invalid">("none") const handleApiKeySubmit = async (e: React.FormEvent) => { e.preventDefault() setIsValidating(true) // Simulate API key validation setTimeout(() => { if (apiKey.startsWith("sk-") && apiKey.length > 20) { setApiKeyStatus("valid") } else { setApiKeyStatus("invalid") } setIsValidating(false) }, 1500) } const handleRemoveApiKey = () => { setApiKey("") setApiKeyStatus("none") } return (

Profile Settings

Manage your account and API configuration

API Configuration Account Settings Billing OpenAI API Key Configuration {apiKeyStatus === "none" && ( No API key configured. Add your OpenAI API key for unlimited access to Genie at cost. You'll pay OpenAI directly (typically $5-15/month). )} {apiKeyStatus === "valid" && ( API key is active! You now have unlimited access to Genie. Your usage will be billed directly by OpenAI. )} {apiKeyStatus === "invalid" && ( Invalid API key. Please check your API key and try again. Make sure it starts with "sk-" and is from your OpenAI dashboard. )}

OpenAI API Key

setApiKey(e.target.value)} placeholder="sk-..." className="pr-10" />

Your API key is encrypted and stored securely. We never see your conversations.

{apiKeyStatus === "valid" && ( )}

Need an API Key?

1. Create OpenAI Account

2. Generate API Key

Create a new API key in your OpenAI dashboard

Security & Privacy

End-to-End Encryption

Your API key is encrypted using AES-256

Zero-Log Policy

We never store or see your conversations

Direct Connection

Your data goes directly to OpenAI

Revoke Anytime

Remove your API key instantly

Account Information

Full Name

Email Address

Current Plan

{apiKeyStatus === "valid" ? "Bring Your Own API" : "Free Plan"}

{apiKeyStatus === "valid" ? "Using your OpenAI API key for unlimited access" : "5 questions per month"}

{apiKeyStatus === "valid" ? "Active" : "Free"}

{apiKeyStatus !== "valid" && ( )}

) } [V0_FILE]png:file="public/hero-dna.png" url="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&h=600&q=80" isMerged="true" [V0_FILE]png:file="public/genetic-counselor.png" url="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true" [V0_FILE]png:file="public/family-genetics.png" url="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true" [V0_FILE]png:file="public/lab-research.png" url="https://images.unsplash.com/photo-1582719471384-894fbb16e074?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true" [V0_FILE]png:file="public/genie-avatar.png" url="https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" isMerged="true" [V0_FILE]typescriptreact:file="components/who-is-genie.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Brain, Heart, Shield, Sparkles } from "lucide-react" export default function WhoIsGenie() { const features = [ { icon: Brain, title: "Advanced AI", description: "Powered by cutting-edge machine learning algorithms", }, { icon: Heart, title: "Empathetic Care", description: "Designed to provide compassionate genetic guidance", }, { icon: Shield, title: "Privacy First", description: "Your genetic data remains completely confidential", }, ] return (

Genetic counselor consulting with patient

Meet Your AI Counselor

Who is Genie?

Genie is a state-of-the-art artificial intelligence system designed to provide personalized guidance and{" "} genetic counseling services {" "} as you navigate through your genetic journey. Built on the foundations of advanced machine learning algorithms, Genie taps into a comprehensive database of genetic research.

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 158.1 64.4% 51.6%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 158.1 64.4% 51.6%; --radius: 0.75rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 158.1 64.4% 51.6%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 158.1 64.4% 51.6%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } /* Custom gradient animations */ @keyframes gradient-x { 0%, 100% { transform: translateX(0%); } 50% { transform: translateX(-100%); } } .animate-gradient-x { animation: gradient-x 15s ease infinite; background-size: 200% 200%; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom focus styles */ .focus-visible:focus-visible { @apply ring-2 ring-emerald-500 ring-offset-2 outline-none; } [V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Brain, Shield, Zap, Users, Heart, FileText } from "lucide-react" import Image from "next/image" export default function FeaturesSection() { const features = [ { icon: Brain, title: "AI-Powered Analysis", description: "Advanced machine learning algorithms analyze your genetic data with precision", color: "bg-blue-100 text-blue-600", }, { icon: Shield, title: "Privacy Protected", description: "Your genetic information is encrypted and never shared with third parties", color: "bg-green-100 text-green-600", }, { icon: Zap, title: "Instant Insights", description: "Get immediate answers to your genetic questions 24/7", color: "bg-yellow-100 text-yellow-600", }, { icon: Users, title: "Family Planning", description: "Understand inheritance patterns and genetic risks for your family", color: "bg-purple-100 text-purple-600", }, { icon: Heart, title: "Health Guidance", description: "Personalized recommendations based on your genetic profile", color: "bg-red-100 text-red-600", }, { icon: FileText, title: "Detailed Reports", description: "Comprehensive genetic reports you can share with healthcare providers", color: "bg-indigo-100 text-indigo-600", }, ] return (

Why Choose Cover My Genetics

Comprehensive Genetic Insights

Our platform combines cutting-edge AI technology with genetic expertise to provide you with personalized insights and guidance for your genetic journey.

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

Trusted by Families Worldwide

Join thousands of families who have unlocked their genetic potential with Cover My Genetics. Our AI-powered platform makes complex genetic information accessible and actionable.

10K+

Families Served

50K+

Questions Answered

99.9%

Uptime

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], 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))", }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", }, }, 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" }, }, "gradient-x": { "0%, 100%": { "background-size": "200% 200%", "background-position": "left center", }, "50%": { "background-size": "200% 200%", "background-position": "right center", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "gradient-x": "gradient-x 15s ease infinite", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import Link from "next/link" import Image from "next/image" import { Sparkles, Shield, Zap } from "lucide-react" export default function HeroSection() { return (

{/* Background Pattern */}

World's First AI Genetic Counselor

Unlock Your Code: Meet Genie

Your Personal AI Genetic Counselor

At Cover My Genetics, we believe that understanding your genetic makeup is the key to unlocking valuable insights about your health, well-being, and even your ancestry. Genie makes complex genetic information accessible and personalized just for you.

HIPAA Compliant

Instant Responses

) } [V0_FILE]typescriptreact:file="components/background-pattern.tsx" isMerged="true" export default function BackgroundPattern() { return ( ) } [V0_FILE]typescriptreact:file="components/hero-section-alt.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import Link from "next/link" import Image from "next/image" import { Sparkles, Shield, Zap } from "lucide-react" import BackgroundPattern from "./background-pattern" export default function HeroSectionAlt() { return (

{/* Background Pattern */}

{"World's First AI Genetic Counselor"}

Unlock Your Code: Meet Genie

Your Personal AI Genetic Counselor

HIPAA Compliant

Instant Responses

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Navbar from "@/components/navbar" import HeroSection from "@/components/hero-section" import WhoIsGenie from "@/components/who-is-genie" import FeaturesSection from "@/components/features-section" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]xml:file="public/logo.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/logo.tsx" isMerged="true" import { Dna } from "lucide-react" import Link from "next/link" interface LogoProps { className?: string showText?: boolean variant?: "light" | "dark" } export default function Logo({ className = "", showText = true, variant = "light" }: LogoProps) { const textColor = variant === "light" ? "text-emerald-600" : "text-emerald-400" const subtextColor = variant === "light" ? "text-gray-600" : "text-gray-400" return (

{showText && (

CMG COVER MY GENETICS

)} ) } [V0_FILE]plaintext:file="public/favicon.ico" isMerged="true" [V0_FILE]png:file="public/apple-touch-icon.png" isMerged="true" [V0_FILE]typescriptreact:file="app/counselors/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import CounselorDirectory from "@/components/counselor-directory" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Shield, Star, Users } from "lucide-react" import Link from "next/link" export default function CounselorsPage() { return (

Find a Certified Genetic Counselor

Connect with board-certified genetic counselors for professional consultation and validation

Board Certified Only Verified Professionals 500+ Counselors

{/* When to See a Genetic Counselor */} When Should You See a Genetic Counselor?

Consider a consultation if you have:

• Family history of genetic conditions
• Abnormal genetic test results
• Planning pregnancy with genetic concerns
• Multiple family members with cancer
• Unexplained developmental delays

What they can help with:

• Interpret complex genetic test results
• Assess genetic risks for you and family
• Provide emotional support and guidance
• Coordinate with your healthcare team
• Discuss family planning options

{/* For Genetic Counselors */} Are You a Genetic Counselor?

Join Our Directory & Get Quality Leads

• Connect with patients who need your expertise
• Pre-qualified leads from our AI screening
• Flexible pricing - pay only for leads you want
• Professional profile with patient reviews
• Integration with telehealth platforms

Lead Quality Stats

Average lead value: $150-300

Conversion rate: 35-45%

Avg. consultation fee: $200-400

) } [V0_FILE]typescriptreact:file="app/counselors/join/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" 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 { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { CheckCircle, DollarSign, Users, TrendingUp, Star, Shield } from "lucide-react" export default function JoinCounselorsPage() { return (

Join Our Genetic Counselor Directory

Connect with qualified patients and grow your practice with our lead generation platform

10,000+ Monthly Visitors 35% Average Conversion $200+ Average Consultation

{/* Application Form */} Apply to Join Our Directory

First Name

Last Name

Professional Email

Credentials

License Number

Licensed State(s)

Specialties

Years of Experience

Consultation Fee Range

Professional Bio

</div>

<div className="space-y-4">
                    <div className="flex items-center space-x-2">
                      <Checkbox id="telehealth" />
                      <label htmlFor="telehealth" className="text-sm">
                        I offer telehealth consultations
                      </label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox id="terms" />
                      <label htmlFor="terms" className="text-sm">
                        I agree to the{" "}
                        <a href="/counselors/terms" className="text-emerald-600 hover:underline">
                          directory terms
                        </a>{" "}
                        and lead fee structure
                      </label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox id="verification" />
                      <label htmlFor="verification" className="text-sm">
                        I consent to credential verification and background check
                      </label>
                    </div>
                  </div>

<Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700">
                    Submit Application
                  </Button>
                </form>
              </CardContent>
            </Card>

{/* Benefits & Pricing */}
            <div className="space-y-6">
              <Card className="border-emerald-200 bg-emerald-50">
                <CardHeader>
                  <CardTitle className="text-emerald-800">Why Join Our Directory?</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4 text-emerald-700">
                  <div className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold">Pre-Qualified Leads</h4>
                      <p className="text-sm">
                        Patients are pre-screened by our AI to ensure they need professional genetic counseling
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold">High-Value Patients</h4>
                      <p className="text-sm">
                        Average consultation value of $200-400, with many becoming long-term patients
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold">Professional Profile</h4>
                      <p className="text-sm">Detailed profile with specialties, reviews, and booking integration</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
                    <div>
                      <h4 className="font-semibold">Flexible Pricing</h4>
                      <p className="text-sm">Pay only for leads you accept - no monthly fees or commitments</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <DollarSign className="h-5 w-5" />
                    Lead Pricing Structure
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3">
                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                      <span className="font-medium">Initial Consultation Lead</span>
                      <span className="text-lg font-bold text-emerald-600">$25</span>
                    </div>
                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                      <span className="font-medium">Follow-up Appointment</span>
                      <span className="text-lg font-bold text-emerald-600">$15</span>
                    </div>
                    <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                      <span className="font-medium">Family Member Referral</span>
                      <span className="text-lg font-bold text-emerald-600">$20</span>
                    </div>
                  </div>

<div className="text-sm text-gray-600 space-y-1">
                    <p>• Only pay when a patient books with you</p>
                    <p>• No setup fees or monthly charges</p>
                    <p>• 30-day money-back guarantee on leads</p>
                    <p>• Volume discounts available for high-volume practices</p>
                  </div>
                </CardContent>
              </Card>

<Card className="border-blue-200 bg-blue-50">
                <CardHeader>
                  <CardTitle className="text-blue-800">Success Stories</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4 text-blue-700">
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span className="font-semibold">Dr. Sarah Chen, Boston</span>
                    </div>
                    <p className="text-sm">
                      "I've received 15+ qualified leads in my first month. The patients are well-informed and genuinely
                      need genetic counseling."
                    </p>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span className="font-semibold">Dr. Michael Rodriguez, LA</span>
                    </div>
                    <p className="text-sm">
                      "The lead quality is excellent. 40% of my new patients now come through Cover My Genetics."
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card className="border-gray-200">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Verification Process
                  </CardTitle>
                </CardHeader>
                <CardContent className="text-sm text-gray-600 space-y-2">
                  <p>• Board certification verification</p>
                  <p>• State license validation</p>
                  <p>• Professional reference checks</p>
                  <p>• Malpractice insurance confirmation</p>
                  <p>• Typical approval time: 3-5 business days</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/counselors/pricing/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, TrendingUp, Users, Calculator, Star } from "lucide-react"
import Link from "next/link"

export default function CounselorPricingPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Genetic Counselor Directory Pricing</h1>
            <p className="text-xl text-gray-600 mb-6">
              Transparent, performance-based pricing. Pay only for qualified leads that book consultations.
            </p>
            <Badge variant="secondary" className="text-sm">
              <TrendingUp className="h-3 w-3 mr-1" />
              Average ROI: 400-600%
            </Badge>
          </div>

{/* Lead Pricing */}
          <div className="grid md:grid-cols-3 gap-6 mb-12">
            <Card className="border-emerald-200">
              <CardHeader className="text-center">
                <CardTitle className="text-emerald-800">Initial Consultation</CardTitle>
                <div className="text-3xl font-bold text-emerald-600">$25</div>
                <p className="text-sm text-gray-600">per qualified lead</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-emerald-500" />
                  <span>Pre-screened by AI</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-emerald-500" />
                  <span>Genuine genetic concerns</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-emerald-500" />
                  <span>Contact info provided</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-emerald-500" />
                  <span>Booking intent confirmed</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-blue-200 scale-105 shadow-lg">
              <CardHeader className="text-center">
                <Badge className="mb-2">Most Popular</Badge>
                <CardTitle className="text-blue-800">Follow-up Visit</CardTitle>
                <div className="text-3xl font-bold text-blue-600">$15</div>
                <p className="text-sm text-gray-600">per return patient</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Existing patient relationship</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Higher conversion rate</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Ongoing care coordination</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Family planning support</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-purple-200">
              <CardHeader className="text-center">
                <CardTitle className="text-purple-800">Family Referral</CardTitle>
                <div className="text-3xl font-bold text-purple-600">$20</div>
                <p className="text-sm text-gray-600">per family member</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Referred by existing patient</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Shared genetic concerns</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Family history context</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>High conversion potential</span>
                </div>
              </CardContent>
            </Card>
          </div>

{/* ROI Calculator */}
          <Card className="mb-12 border-green-200 bg-green-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-green-800">
                <Calculator className="h-5 w-5" />
                ROI Calculator Example
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <h4 className="font-semibold text-green-800">Monthly Scenario:</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Initial consultation leads:</span>
                      <span className="font-semibold">10 leads × $25 = $250</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Conversion rate (35%):</span>
                      <span className="font-semibold">3.5 new patients</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Avg consultation fee:</span>
                      <span className="font-semibold">$300 per patient</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="font-semibold">Monthly revenue:</span>
                      <span className="font-bold text-green-600">$1,050</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="font-semibold">Lead costs:</span>
                      <span className="font-bold text-red-600">-$250</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="font-bold">Net profit:</span>
                      <span className="font-bold text-green-700 text-lg">$800</span>
                    </div>
                  </div>
                </div>

<div className="space-y-4">
                  <h4 className="font-semibold text-green-800">Additional Benefits:</h4>
                  <div className="space-y-2 text-sm text-green-700">
                    <div className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      <span>Follow-up appointments (avg 2 per patient)</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      <span>Family member referrals (avg 1.5 per patient)</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      <span>Long-term patient relationships</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4" />
                      <span>Professional network growth</span>
                    </div>
                  </div>

<div className="bg-white p-4 rounded border border-green-200">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-green-600">320%</div>
                      <div className="text-sm text-green-700">Average ROI</div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Volume Discounts */}
          <Card className="mb-12">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="h-5 w-5" />
                Volume Discounts
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="text-center p-4 border rounded-lg">
                  <div className="text-lg font-bold">10+ leads/month</div>
                  <div className="text-emerald-600 font-semibold">10% discount</div>
                  <div className="text-sm text-gray-600">$22.50 per lead</div>
                </div>
                <div className="text-center p-4 border rounded-lg border-blue-200 bg-blue-50">
                  <div className="text-lg font-bold">25+ leads/month</div>
                  <div className="text-blue-600 font-semibold">20% discount</div>
                  <div className="text-sm text-gray-600">$20 per lead</div>
                </div>
                <div className="text-center p-4 border rounded-lg">
                  <div className="text-lg font-bold">50+ leads/month</div>
                  <div className="text-purple-600 font-semibold">30% discount</div>
                  <div className="text-sm text-gray-600">$17.50 per lead</div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Success Metrics */}
          <Card className="mb-12 border-blue-200 bg-blue-50">
            <CardHeader>
              <CardTitle className="text-blue-800">Platform Performance Metrics</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-4 gap-6 text-center">
                <div>
                  <div className="text-2xl font-bold text-blue-600">35%</div>
                  <div className="text-sm text-blue-700">Average Conversion Rate</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">$285</div>
                  <div className="text-sm text-blue-700">Average Consultation Fee</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">2.3</div>
                  <div className="text-sm text-blue-700">Avg Follow-ups per Patient</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-blue-600">4.8</div>
                  <div className="text-sm text-blue-700">Average Counselor Rating</div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Testimonials */}
          <Card className="mb-12">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Star className="h-5 w-5" />
                What Counselors Say
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <div className="flex text-yellow-400">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-current" />
                      ))}
                    </div>
                    <span className="font-semibold">Dr. Sarah Chen</span>
                  </div>
                  <p className="text-gray-700 text-sm">
                    "The lead quality is exceptional. Patients come pre-educated about genetics and genuinely need
                    counseling. My practice has grown 40% since joining."
                  </p>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <div className="flex text-yellow-400">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-current" />
                      ))}
                    </div>
                    <span className="font-semibold">Dr. Michael Rodriguez</span>
                  </div>
                  <p className="text-gray-700 text-sm">
                    "Best ROI of any marketing I've tried. The pay-per-lead model means I only invest in actual
                    opportunities. Highly recommend."
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="text-center">
            <div className="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-2xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to Grow Your Practice?</h2>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                Join hundreds of genetic counselors who are growing their practices with qualified leads from Cover My
                Genetics.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/counselors/join">
                  <Button className="bg-emerald-600 hover:bg-emerald-700">Apply to Join Directory</Button>
                </Link>
                <Link href="/contact-us">
                  <Button variant="outline" className="border-emerald-600 text-emerald-600 hover:bg-emerald-50">
                    Schedule a Demo
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/counselors/practice-in-a-box/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, AlertTriangle, DollarSign, Users, Calendar, FileText, Shield, Zap } from "lucide-react"
import Link from "next/link"

export default function PracticeInABoxPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Genetic Counseling Practice-in-a-Box</h1>
            <p className="text-xl text-gray-600 mb-6">
              Launch your private genetic counseling practice with our complete platform and patient pipeline
            </p>
            <div className="flex items-center justify-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <Users className="h-3 w-3 mr-1" />
                Complete Practice Solution
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Zap className="h-3 w-3 mr-1" />
                Launch in 30 Days
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Shield className="h-3 w-3 mr-1" />
                HIPAA Compliant
              </Badge>
            </div>
          </div>

{/* What's Included */}
          <Card className="mb-12 border-emerald-200 bg-emerald-50">
            <CardHeader>
              <CardTitle className="text-emerald-800">Everything You Need to Start Your Practice</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <Users className="h-5 w-5 text-emerald-600" />
                    Patient Pipeline
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• Pre-qualified patient leads</li>
                    <li>• AI-screened referrals</li>
                    <li>• Geographic targeting</li>
                    <li>• Specialty matching</li>
                  </ul>
                </div>

<div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <Calendar className="h-5 w-5 text-emerald-600" />
                    Practice Management
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• Online scheduling system</li>
                    <li>• Telehealth platform</li>
                    <li>• Patient portal</li>
                    <li>• Automated reminders</li>
                  </ul>
                </div>

<div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <FileText className="h-5 w-5 text-emerald-600" />
                    Clinical Tools
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• Pedigree software</li>
                    <li>• Risk assessment tools</li>
                    <li>• Report templates</li>
                    <li>• Clinical decision support</li>
                  </ul>
                </div>

<div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <DollarSign className="h-5 w-5 text-emerald-600" />
                    Billing & Revenue
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• Insurance billing</li>
                    <li>• Payment processing</li>
                    <li>• Revenue tracking</li>
                    <li>• Financial reporting</li>
                  </ul>
                </div>

<div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <Shield className="h-5 w-5 text-emerald-600" />
                    Compliance & Legal
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• HIPAA compliance</li>
                    <li>• State licensing support</li>
                    <li>• Malpractice guidance</li>
                    <li>• Documentation templates</li>
                  </ul>
                </div>

<div className="space-y-3">
                  <h4 className="font-semibold flex items-center gap-2">
                    <Zap className="h-5 w-5 text-emerald-600" />
                    Marketing & Growth
                  </h4>
                  <ul className="space-y-1 text-sm text-emerald-700">
                    <li>• Professional website</li>
                    <li>• SEO optimization</li>
                    <li>• Physician referral network</li>
                    <li>• Patient education materials</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Pricing Tiers */}
          <div className="grid md:grid-cols-3 gap-6 mb-12">
            <Card className="border-gray-200">
              <CardHeader className="text-center">
                <CardTitle>Starter Practice</CardTitle>
                <div className="text-3xl font-bold">$2,500</div>
                <p className="text-sm text-gray-600">per month + 15% revenue share</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-green-500" />
                  <span>Up to 20 patients/month</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-green-500" />
                  <span>Basic telehealth platform</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-green-500" />
                  <span>Standard billing support</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-green-500" />
                  <span>Email support</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-blue-200 scale-105 shadow-lg">
              <CardHeader className="text-center">
                <Badge className="mb-2">Most Popular</Badge>
                <CardTitle className="text-blue-800">Growth Practice</CardTitle>
                <div className="text-3xl font-bold text-blue-600">$4,500</div>
                <p className="text-sm text-gray-600">per month + 12% revenue share</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Up to 50 patients/month</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Advanced telehealth + in-person</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Full billing & insurance</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Dedicated practice manager</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-blue-500" />
                  <span>Marketing support</span>
                </div>
              </CardContent>
            </Card>

<Card className="border-purple-200">
              <CardHeader className="text-center">
                <CardTitle className="text-purple-800">Enterprise Practice</CardTitle>
                <div className="text-3xl font-bold text-purple-600">$7,500</div>
                <p className="text-sm text-gray-600">per month + 10% revenue share</p>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Unlimited patients</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Multi-location support</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>Custom integrations</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>24/7 support</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <CheckCircle className="h-4 w-4 text-purple-500" />
                  <span>White-label options</span>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Major Challenges */}
          <Card className="mb-12 border-red-200 bg-red-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-red-800">
                <AlertTriangle className="h-5 w-5" />
                Critical Challenges to Consider
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-red-700">
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold mb-2">Financial Barriers</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• Hospital GCs earn $70-90K salary</li>
                    <li>• $2,500-7,500/month is 30-100% of take-home</li>
                    <li>• Need 6-12 months runway before profitability</li>
                    <li>• Most can't afford the risk</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Market Reality</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• Insurance reimbursement is complex</li>
                    <li>• Many patients can't afford $300+ consultations</li>
                    <li>• Hospital referrals may dry up</li>
                    <li>• Geographic limitations</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Operational Complexity</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• State licensing requirements vary</li>
                    <li>• Malpractice insurance costs</li>
                    <li>• Clinical supervision needs</li>
                    <li>• Continuing education requirements</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">Competition</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• Hospital systems expanding telehealth</li>
                    <li>• Large genetics companies (Invitae, etc.)</li>
                    <li>• Direct-to-consumer testing</li>
                    <li>• AI replacing some counseling needs</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Alternative Model */}
          <Card className="mb-12 border-blue-200 bg-blue-50">
            <CardHeader>
              <CardTitle className="text-blue-800">Alternative: Partnership Model</CardTitle>
            </CardHeader>
            <CardContent className="text-blue-700">
              <div className="space-y-4">
                <p>
                  <strong>Lower-risk approach:</strong> Partner with existing hospital systems to provide overflow
                  capacity and specialized services.
                </p>
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-2">How it works:</h4>
                    <ul className="space-y-1 text-sm">
                      <li>• GCs stay employed by hospitals</li>
                      <li>• Work part-time on our platform</li>
                      <li>• Handle overflow/specialized cases</li>
                      <li>• Revenue sharing model</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Benefits:</h4>
                    <ul className="space-y-1 text-sm">
                      <li>• No financial risk for GCs</li>
                      <li>• Supplemental income</li>
                      <li>• Flexible scheduling</li>
                      <li>• Larger addressable market</li>
                    </ul>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="text-center">
            <div className="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-2xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Interested in Learning More?</h2>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                We're still developing this program. Join our waitlist to be notified when we launch.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/counselors/waitlist">
                  <Button className="bg-emerald-600 hover:bg-emerald-700">Join Waitlist</Button>
                </Link>
                <Link href="/contact-us">
                  <Button variant="outline" className="border-emerald-600 text-emerald-600 hover:bg-emerald-50">
                    Schedule Discussion
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]plaintext:file="app/robots.txt" isMerged="true"
User-agent: *
Allow: /

# High-value pages for crawling
Allow: /ask-genie
Allow: /pricing
Allow: /blog
Allow: /resources
Allow: /counselors

# Block admin/private areas
Disallow: /dashboard
Disallow: /profile
Disallow: /api/

# Sitemap location
Sitemap: https://covermygenetics.com/sitemap.xml
[V0_FILE]typescriptreact:file="app/blog/layout.tsx" isMerged="true"
import type React from "react"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"

export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/analytics.tsx" isMerged="true"
"use client"

import Script from "next/script"

export default function GoogleAnalytics() {
  const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID

if (!GA_MEASUREMENT_ID) {
    return null
  }

return (
    <>
      <Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`} strategy="afterInteractive" />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_MEASUREMENT_ID}');
        `}
      </Script>
    </>
  )
}
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# OpenAI API Key (Required for Genie AI)
OPENAI_API_KEY=your_openai_api_key_here

# Google Analytics (Optional - for traffic tracking)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# Google Search Console (Optional - for SEO monitoring)
GOOGLE_SEARCH_CONSOLE_SITE_VERIFICATION=your_verification_code

# Facebook Pixel (Optional - for retargeting ads)
NEXT_PUBLIC_FACEBOOK_PIXEL_ID=your_pixel_id

# Hotjar (Optional - for user behavior tracking)
NEXT_PUBLIC_HOTJAR_ID=your_hotjar_id

# Email Marketing (Optional)
MAILCHIMP_API_KEY=your_mailchimp_api_key
MAILCHIMP_LIST_ID=your_list_id

# Database (Optional - for user tracking)
DATABASE_URL=your_database_url

# Stripe (Optional - for payments)
STRIPE_SECRET_KEY=sk_test_your_stripe_key
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_key
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next/types"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

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

export const metadata: Metadata = {
  title: "Cover My Genetics | Your Personal AI Genetic Counselor",
  description:
    "Unlock your genetic code with Genie, your personal AI genetic counselor. Get personalized genetic insights, risk assessments, and expert guidance.",
  keywords: "genetics, genetic counseling, AI, DNA, health, personalized medicine, genetic testing",
  authors: [{ name: "Cover My Genetics", url: "https://covermygenetics.com" }],
  creator: "Cover My Genetics",
  publisher: "Cover My Genetics",
  robots: "index, follow",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://covermygenetics.com",
    siteName: "Cover My Genetics",
    title: "Cover My Genetics | Your Personal AI Genetic Counselor",
    description: "Unlock your genetic code with Genie, your personal AI genetic counselor.",
    images: [
      {
        url: "/hero-dna.png",
        width: 1200,
        height: 630,
        alt: "Cover My Genetics - AI Genetic Counselor",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Cover My Genetics | Your Personal AI Genetic Counselor",
    description: "Unlock your genetic code with Genie, your personal AI genetic counselor.",
    images: ["/hero-dna.png"],
  },
  alternates: {
    canonical: "https://covermygenetics.com",
  },
  other: {
    "contact:email": "info@covermygenetics.com",
    "contact:phone": "+1-555-123-4567",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <meta name="theme-color" content="#059669" />
        <meta name="contact" content="info@covermygenetics.com" />
      </head>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/sitemap.ts" isEdit="true" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://covermygenetics.com"

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/ask-genie`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.9,
    },
    {
      url: `${baseUrl}/pricing`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/counselors`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/blog`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.7,
    },
    {
      url: `${baseUrl}/resources`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.7,
    },
  ]
}
[V0_FILE]typescriptreact:file="app/robots.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/dashboard/", "/profile/", "/api/"],
    },
    sitemap: "https://covermygenetics.com/sitemap.xml",
  }
}
[V0_FILE]typescriptreact:file="app/counselors/partner/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, Clock, DollarSign, Users, Calendar, Shield, Star, TrendingUp } from "lucide-react"
import Link from "next/link"

export default function PartnerPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Partner with Cover My Genetics</h1>
            <p className="text-xl text-gray-600 mb-6">
              Keep your hospital job, earn extra income helping patients on your schedule
            </p>
            <div className="flex items-center justify-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <Clock className="h-3 w-3 mr-1" />
                Flexible Hours
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <DollarSign className="h-3 w-3 mr-1" />
                70% Revenue Share
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Shield className="h-3 w-3 mr-1" />
                Zero Risk
              </Badge>
            </div>
          </div>

{/* Value Proposition */}
          <Card className="mb-12 border-emerald-200 bg-emerald-50">
            <CardHeader>
              <CardTitle className="text-emerald-800">Why Partner with Cover My Genetics?</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <DollarSign className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Earn $1,500-4,000/month</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    Work 10-20 hours per week on your schedule. Average $210 per consultation with 70% revenue share.
                  </p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Clock className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Complete Flexibility</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    Set your own hours. Work evenings, weekends, or whenever fits your schedule. No minimum commitments.
                  </p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Users className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Pre-Qualified Patients</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    Our AI screens patients to ensure they genuinely need genetic counseling. No time wasted on
                    inappropriate referrals.
                  </p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Shield className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Zero Overhead</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    We handle billing, scheduling, platform costs, and compliance. You focus purely on patient care.
                  </p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Calendar className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Telehealth Platform</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    HIPAA-compliant video platform with integrated scheduling, notes, and patient portal.
                  </p>
                </div>

<div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Star className="h-5 w-5 text-emerald-600" />
                    <h4 className="font-semibold">Build Your Reputation</h4>
                  </div>
                  <p className="text-sm text-emerald-700">
                    Develop your personal brand with patient reviews and specialized expertise recognition.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* How It Works */}
          <Card className="mb-12">
            <CardHeader>
              <CardTitle>How Our Partnership Works</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-4 gap-6">
                <div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">1</span>
                  </div>
                  <h4 className="font-semibold">Apply & Get Verified</h4>
                  <p className="text-sm text-gray-600">
                    Quick application with credential verification. Most approvals within 48 hours.
                  </p>
                </div>

<div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">3</span>
                  </div>
                  <h4 className="font-semibold">Receive Patient Matches</h4>
                  <p className="text-sm text-gray-600">
                    Get notified of patients who match your expertise and schedule. Accept or decline each case.
                  </p>
                </div>

<div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">4</span>
                  </div>
                  <h4 className="font-semibold">Provide Care & Get Paid</h4>
                  <p className="text-sm text-gray-600">
                    Conduct consultations via our platform. Automatic payment within 24 hours of session completion.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Revenue Calculator */}
          <Card className="mb-12 border-green-200 bg-green-50">
            <CardHeader>
              <CardTitle className="text-green-800">Partnership Income Calculator</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-3 gap-6">
                <div className="bg-white p-6 rounded-lg border border-green-200">
                  <h4 className="font-semibold mb-4 text-center">Light Schedule</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Hours per week:</span>
                      <span className="font-semibold">5-8 hours</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Consultations/month:</span>
                      <span className="font-semibold">8-12</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Revenue per consultation:</span>
                      <span className="font-semibold">$210</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="font-bold">Monthly income:</span>
                      <span className="font-bold text-green-600">$1,680-2,520</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="font-bold">Annual income:</span>
                      <span className="font-bold text-green-600">$20K-30K</span>
                    </div>
                  </div>
                </div>

<div className="bg-white p-6 rounded-lg border-2 border-green-400 relative">
                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-500">
                    Most Popular
                  </Badge>
                  <h4 className="font-semibold mb-4 text-center">Moderate Schedule</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Hours per week:</span>
                      <span className="font-semibold">10-15 hours</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Consultations/month:</span>
                      <span className="font-semibold">15-20</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Revenue per consultation:</span>
                      <span className="font-semibold">$210</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="font-bold">Monthly income:</span>
                      <span className="font-bold text-green-600">$3,150-4,200</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="font-bold">Annual income:</span>
                      <span className="font-bold text-green-600">$38K-50K</span>
                    </div>
                  </div>
                </div>

<div className="bg-white p-6 rounded-lg border border-green-200">
                  <h4 className="font-semibold mb-4 text-center">Heavy Schedule</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Hours per week:</span>
                      <span className="font-semibold">20+ hours</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Consultations/month:</span>
                      <span className="font-semibold">25-30</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Revenue per consultation:</span>
                      <span className="font-semibold">$210</span>
                    </div>
                    <div className="flex justify-between border-t pt-2">
                      <span className="font-bold">Monthly income:</span>
                      <span className="font-bold text-green-600">$5,250-6,300</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="font-bold">Annual income:</span>
                      <span className="font-bold text-green-600">$63K-76K</span>
                    </div>
                  </div>
                </div>
              </div>

<div className="mt-6 text-center">
                <p className="text-sm text-green-700">
                  <strong>Note:</strong> These are estimates based on current platform performance. Actual income
                  depends on availability, specialties, and patient demand in your area.
                </p>
              </div>
            </CardContent>
          </Card>

{/* Specialties in Demand */}
          <Card className="mb-12">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5" />
                High-Demand Specialties
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Cancer Genetics</h4>
                  <p className="text-sm text-gray-600 mt-1">BRCA, Lynch syndrome, hereditary cancer panels</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">High demand • $250-350/session</div>
                </div>
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Prenatal Genetics</h4>
                  <p className="text-sm text-gray-600 mt-1">NIPT, carrier screening, pregnancy planning</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">Very high demand • $200-300/session</div>
                </div>
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Cardiovascular Genetics</h4>
                  <p className="text-sm text-gray-600 mt-1">Cardiomyopathy, arrhythmia, sudden death</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">Growing demand • $275-375/session</div>
                </div>
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Pharmacogenomics</h4>
                  <p className="text-sm text-gray-600 mt-1">Drug response, medication optimization</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">Emerging field • $300-400/session</div>
                </div>
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Neurogenetics</h4>
                  <p className="text-sm text-gray-600 mt-1">Huntington's, Alzheimer's risk, epilepsy</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">Specialized • $350-450/session</div>
                </div>
                <div className="p-4 border rounded-lg">
                  <h4 className="font-semibold text-emerald-600">Pediatric Genetics</h4>
                  <p className="text-sm text-gray-600 mt-1">Rare diseases, developmental delays</p>
                  <div className="mt-2 text-xs text-emerald-600 font-medium">Steady demand • $225-325/session</div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Success Stories */}
          <Card className="mb-12 border-blue-200 bg-blue-50">
            <CardHeader>
              <CardTitle className="text-blue-800">Partner Success Stories</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="bg-white p-6 rounded-lg border border-blue-200">
                  <div className="flex items-center gap-2 mb-3">
                    <div className="flex text-yellow-400">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-current" />
                      ))}
                    </div>
                    <span className="font-semibold">Dr. Sarah Chen, Boston Children's</span>
                  </div>
                  <p className="text-sm text-gray-700 mb-3">
                    "I partner with CMG 12 hours/week and earn an extra $3,200/month. The patients are well-prepared and
                    the platform makes everything seamless. It's helped me pay off my student loans 3 years early."
                  </p>
                  <div className="text-xs text-blue-600 font-medium">Cancer Genetics • 18 months as partner</div>
                </div>

<div className="bg-white p-6 rounded-lg border border-blue-200">
                  <div className="flex items-center gap-2 mb-3">
                    <div className="flex text-yellow-400">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-current" />
                      ))}
                    </div>
                    <span className="font-semibold">Dr. Michael Rodriguez, UCLA Health</span>
                  </div>
                  <p className="text-sm text-gray-700 mb-3">
                    "Working evenings and weekends, I see 8-10 patients/month for an extra $2,000. The flexibility is
                    perfect - I can work around my hospital schedule and family time."
                  </p>
                  <div className="text-xs text-blue-600 font-medium">
                    Cardiovascular Genetics • 14 months as partner
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Requirements */}
          <Card className="mb-12">
            <CardHeader>
              <CardTitle>Partnership Requirements</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-semibold mb-3">Minimum Qualifications</h4>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Board certification (ABGC or ABMGG)</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Active state license for telehealth</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Minimum 2 years clinical experience</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Current malpractice insurance</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-500" />
                      <span>Reliable internet and quiet workspace</span>
                    </li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-3">Preferred Qualifications</h4>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>Specialty certification or expertise</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>Telehealth experience</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>Bilingual capabilities</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>Research or publication experience</span>
                    </li>
                    <li className="flex items-center gap-2">
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>Teaching or mentoring experience</span>
                    </li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="text-center">
            <div className="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-2xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to Partner with Us?</h2>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                Join hundreds of genetic counselors earning extra income on their schedule. Application takes 10
                minutes, approval typically within 48 hours.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/counselors/partner/apply">
                  <Button className="bg-emerald-600 hover:bg-emerald-700">Apply to Partner</Button>
                </Link>
                <Link href="/contact-us">
                  <Button variant="outline" className="border-emerald-600 text-emerald-600 hover:bg-emerald-50">
                    Ask Questions
                  </Button>
                </Link>
              </div>
              <p className="text-sm text-gray-500 mt-4">
                No commitment required • Start earning within a week • Cancel anytime
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/counselors/partner/apply/page.tsx" isMerged="true"
import Link from "next/link"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Clock, DollarSign, Shield } from "lucide-react"

export default function ApplyPartnerPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold mb-4">Apply to Partner</h1>
            <p className="text-xl text-gray-600 mb-6">
              Start earning extra income as a genetic counselor on your schedule
            </p>
            <div className="flex items-center justify-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <Clock className="h-3 w-3 mr-1" />
                10 minute application
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Shield className="h-3 w-3 mr-1" />
                48 hour approval
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <DollarSign className="h-3 w-3 mr-1" />
                Start earning this week
              </Badge>
            </div>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            {/* Application Form */}
            <div className="lg:col-span-2">
              <Card>
                <CardHeader>
                  <CardTitle>Partnership Application</CardTitle>
                </CardHeader>
                <CardContent>
                  <form className="space-y-6">
                    {/* Personal Information */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Personal Information</h3>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="firstName">First Name</Label>
                          <Input id="firstName" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="lastName">Last Name</Label>
                          <Input id="lastName" required />
                        </div>
                      </div>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="email">Professional Email</Label>
                          <Input id="email" type="email" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="phone">Phone Number</Label>
                          <Input id="phone" type="tel" required />
                        </div>
                      </div>
                    </div>

{/* Professional Information */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Professional Information</h3>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="credentials">Credentials</Label>
                          <Input id="credentials" placeholder="e.g., MS, CGC" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="certification">Board Certification</Label>
                          <Select required>
                            <SelectTrigger>
                              <SelectValue placeholder="Select certification" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="abgc">ABGC (American Board of Genetic Counseling)</SelectItem>
                              <SelectItem value="abmgg">ABMGG (American Board of Medical Genetics)</SelectItem>
                              <SelectItem value="other">Other (please specify)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="license">License Number</Label>
                          <Input id="license" required />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="licenseState">Licensed State(s)</Label>
                          <Input id="licenseState" placeholder="e.g., CA, NY, TX" required />
                        </div>
                      </div>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="experience">Years of Experience</Label>
                          <Select required>
                            <SelectTrigger>
                              <SelectValue placeholder="Select experience" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="2-3">2-3 years</SelectItem>
                              <SelectItem value="4-6">4-6 years</SelectItem>
                              <SelectItem value="7-10">7-10 years</SelectItem>
                              <SelectItem value="10+">10+ years</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="currentEmployer">Current Employer</Label>
                          <Input id="currentEmployer" placeholder="Hospital/Institution name" required />
                        </div>
                      </div>
                    </div>

{/* Specialties */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Specialties & Expertise</h3>
                      <div className="space-y-2">
                        <Label>Select your areas of expertise (check all that apply):</Label>
                        <div className="grid md:grid-cols-2 gap-3">
                          {[
                            "Cancer Genetics",
                            "Prenatal Genetics",
                            "Cardiovascular Genetics",
                            "Neurogenetics",
                            "Pediatric Genetics",
                            "Pharmacogenomics",
                            "Reproductive Genetics",
                            "Rare Diseases",
                            "Adult Onset Conditions",
                            "Psychiatric Genetics",
                          ].map((specialty) => (
                            <div key={specialty} className="flex items-center space-x-2">
                              <Checkbox id={specialty.toLowerCase().replace(/\s+/g, "-")} />
                              <label htmlFor={specialty.toLowerCase().replace(/\s+/g, "-")} className="text-sm">
                                {specialty}
                              </label>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

{/* Availability */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Availability & Preferences</h3>
                      <div className="grid md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="hoursPerWeek">Desired Hours per Week</Label>
                          <Select required>
                            <SelectTrigger>
                              <SelectValue placeholder="Select hours" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="5-10">5-10 hours</SelectItem>
                              <SelectItem value="10-15">10-15 hours</SelectItem>
                              <SelectItem value="15-20">15-20 hours</SelectItem>
                              <SelectItem value="20+">20+ hours</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="preferredTimes">Preferred Times</Label>
                          <Select required>
                            <SelectTrigger>
                              <SelectValue placeholder="Select preference" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="evenings">Evenings (5-9 PM)</SelectItem>
                              <SelectItem value="weekends">Weekends</SelectItem>
                              <SelectItem value="early-mornings">Early mornings (6-9 AM)</SelectItem>
                              <SelectItem value="flexible">Flexible</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label>Languages spoken (check all that apply):</Label>
                        <div className="grid md:grid-cols-3 gap-3">
                          {["English", "Spanish", "Mandarin", "French", "German", "Other"].map((language) => (
                            <div key={language} className="flex items-center space-x-2">
                              <Checkbox id={language.toLowerCase()} />
                              <label htmlFor={language.toLowerCase()} className="text-sm">
                                {language}
                              </label>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

{/* Additional Information */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Additional Information</h3>
                      <div className="space-y-2">
                        <Label htmlFor="telehealth">Telehealth Experience</Label>
                        <Textarea
                          id="telehealth"
                          placeholder="Describe your experience with telehealth platforms and remote patient care..."
                          className="min-h-[80px]"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="motivation">Why do you want to partner with us?</Label>
                        <Textarea
                          id="motivation"
                          placeholder="Tell us about your goals and what you hope to achieve..."
                          className="min-h-[80px]"
                        />
                      </div>
                    </div>

{/* Agreements */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold border-b pb-2">Partnership Agreements</h3>
                      <div className="space-y-3">
                        <div className="flex items-start space-x-2">
                          <Checkbox id="employment" />
                          <label htmlFor="employment" className="text-sm">
                            I confirm that this partnership is permitted by my current employer and does not violate any
                            employment agreements
                          </label>
                        </div>
                        <div className="flex items-start space-x-2">
                          <Checkbox id="malpractice" />
                          <label htmlFor="malpractice" className="text-sm">
                            I have current malpractice insurance that covers telehealth consultations
                          </label>
                        </div>
                        <div className="flex items-start space-x-2">
                          <Checkbox id="licensing" />
                          <label htmlFor="licensing" className="text-sm">
                            I am licensed to practice genetic counseling via telehealth in the states I've indicated
                          </label>
                        </div>
                        <div className="flex items-start space-x-2">
                          <Checkbox id="terms" />
                          <label htmlFor="terms" className="text-sm">
                            I agree to the{" "}
                            <a href="/counselors/terms" className="text-emerald-600 hover:underline">
                              partnership terms and conditions
                            </a>{" "}
                            and 70/30 revenue sharing agreement
                          </label>
                        </div>
                        <div className="flex items-start space-x-2">
                          <Checkbox id="background" />
                          <label htmlFor="background" className="text-sm">
                            I consent to credential verification and background check
                          </label>
                        </div>
                      </div>
                    </div>

<Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700">
                      Submit Partnership Application
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

{/* Sidebar */}
            <div className="space-y-6">
              <Card className="border-emerald-200 bg-emerald-50">
                <CardHeader>
                  <CardTitle className="text-emerald-800">What Happens Next?</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 text-emerald-700 text-sm">
                  <div className="flex items-start gap-2">
                    <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs font-bold">1</span>
                    </div>
                    <div>
                      <strong>Application Review</strong>
                      <p>We'll review your application within 24 hours</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs font-bold">2</span>
                    </div>
                    <div>
                      <strong>Credential Verification</strong>
                      <p>We verify your licenses and certifications</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs font-bold">3</span>
                    </div>
                    <div>
                      <strong>Platform Onboarding</strong>
                      <p>Quick training on our platform and tools</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs font-bold">4</span>
                    </div>
                    <div>
                      <strong>Start Earning</strong>
                      <p>Begin receiving patient matches within days</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Questions?</CardTitle>
                </CardHeader>
                <CardContent className="text-sm space-y-3">
                  <p>
                    <strong>How long does approval take?</strong>
                    <br />
                    Most applications are approved within 48 hours.
                  </p>
                  <p>
                    <strong>What if my employer doesn't allow partnerships?</strong>
                    <br />
                    You must have permission from your employer. We can provide documentation if needed.
                  </p>
                  <p>
                    <strong>Can I work in multiple states?</strong>
                    <br />
                    Yes, as long as you're licensed for telehealth in those states.
                  </p>
                  <div className="pt-3 border-t">
                    <Link href="/contact-us">
                      <Button variant="outline" size="sm" className="w-full">
                        Contact Support
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Heart, Brain, Activity, FileText, Calendar, CheckCircle, Clock, TrendingUp, Key } from "lucide-react"
import Link from "next/link"

// Mock user data
const mockUser = {
  plan: "api" as const, // Changed from "free" to "api"
  hasApiKey: true,
  name: "Sarah Johnson",
  email: "sarah@example.com",
}

export default function DashboardPage() {
  const [activeTab, setActiveTab] = useState("overview")
  const [user] = useState(mockUser)

const riskFactors = [
    {
      condition: "Type 2 Diabetes",
      risk: "Moderate",
      percentage: 65,
      icon: Activity,
      color: "text-yellow-600",
      bgColor: "bg-yellow-100",
      locked: false, // API plan users get full access
    },
    {
      condition: "Heart Disease",
      risk: "Low",
      percentage: 25,
      icon: Heart,
      color: "text-green-600",
      bgColor: "bg-green-100",
      locked: false,
    },
    {
      condition: "Alzheimer's Disease",
      risk: "Low-Moderate",
      percentage: 35,
      icon: Brain,
      color: "text-blue-600",
      bgColor: "bg-blue-100",
      locked: false,
    },
  ]

const recentTests = [
    {
      name: "Comprehensive Health Panel",
      date: "2025-06-15",
      status: "Completed",
      results: "Available",
      locked: false,
    },
    {
      name: "BRCA1/BRCA2 Analysis",
      date: "2025-06-10",
      status: "Completed",
      results: "Available",
      locked: false,
    },
    {
      name: "Pharmacogenomic Panel",
      date: "2025-06-05",
      status: "In Progress",
      results: "Pending",
      locked: false,
    },
  ]

const recommendations = [
    {
      title: "Lifestyle Modifications",
      description:
        "Based on your genetic profile, consider increasing physical activity and monitoring blood sugar levels.",
      priority: "High",
      icon: TrendingUp,
      locked: false,
    },
    {
      title: "Regular Screening",
      description: "Schedule annual cardiovascular screening due to family history.",
      priority: "Medium",
      icon: Calendar,
      locked: false,
    },
    {
      title: "Genetic Counseling",
      description: "Consider meeting with a genetic counselor to discuss family planning options.",
      priority: "Low",
      icon: FileText,
      locked: false,
    },
  ]

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-7xl mx-auto">
          <div className="mb-8">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-3xl font-bold mb-2">Welcome back, {user.name}</h1>
                <p className="text-gray-600">
                  Track your genetic insights, test results, and personalized recommendations.
                </p>
              </div>
              <div className="flex items-center gap-4">
                <Badge className="flex items-center gap-1 bg-blue-100 text-blue-800">
                  <Key className="h-3 w-3" />
                  API Plan
                </Badge>
                {!user.hasApiKey && (
                  <Link href="/profile">
                    <Button>Add API Key</Button>
                  </Link>
                )}
              </div>
            </div>
          </div>

{/* API Key Status Banner */}
          {!user.hasApiKey && (
            <Card className="mb-6 border-amber-200 bg-amber-50">
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-amber-100 rounded-full">
                      <Key className="h-5 w-5 text-amber-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-amber-800">API Key Required</h3>
                      <p className="text-amber-700 text-sm">
                        Add your OpenAI API key to unlock unlimited access to Genie and all features.
                      </p>
                    </div>
                  </div>
                  <Link href="/profile">
                    <Button>Add API Key</Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          )}

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="results">Test Results</TabsTrigger>
              <TabsTrigger value="recommendations">Recommendations</TabsTrigger>
              <TabsTrigger value="family">Family History</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-6">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Plan Status</CardTitle>
                    <Key className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">API Plan</div>
                    <p className="text-xs text-muted-foreground">
                      {user.hasApiKey ? "Unlimited access" : "API key required"}
                    </p>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Risk Assessments</CardTitle>
                    <Activity className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">8</div>
                    <p className="text-xs text-muted-foreground">2 high priority</p>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Last Updated</CardTitle>
                    <Calendar className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">Today</div>
                    <p className="text-xs text-muted-foreground">New results available</p>
                  </CardContent>
                </Card>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Genetic Risk Overview</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  {riskFactors.map((factor, index) => (
                    <div key={index} className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <div className={`p-2 rounded-full ${factor.bgColor}`}>
                            <factor.icon className={`h-4 w-4 ${factor.color}`} />
                          </div>
                          <div>
                            <p className="font-medium">{factor.condition}</p>
                            <p className="text-sm text-gray-600">{factor.risk} Risk</p>
                          </div>
                        </div>
                        <Badge variant="outline">{factor.percentage}%</Badge>
                      </div>
                      <Progress value={factor.percentage} className="h-2" />
                    </div>
                  ))}
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="results" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Test Results</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentTests.map((test, index) => (
                      <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                        <div className="space-y-1">
                          <p className="font-medium">{test.name}</p>
                          <p className="text-sm text-gray-600">Completed: {test.date}</p>
                        </div>
                        <div className="flex items-center gap-3">
                          <Badge
                            variant={test.status === "Completed" ? "default" : "secondary"}
                            className="flex items-center gap-1"
                          >
                            {test.status === "Completed" ? (
                              <CheckCircle className="h-3 w-3" />
                            ) : (
                              <Clock className="h-3 w-3" />
                            )}
                            {test.status}
                          </Badge>
                          <Button variant="outline" size="sm" disabled={test.results === "Pending"}>
                            {test.results === "Available" ? "View Results" : "Pending"}
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="recommendations" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Personalized Recommendations</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recommendations.map((rec, index) => (
                      <div key={index} className="flex gap-4 p-4 border rounded-lg">
                        <div className="p-2 rounded-full bg-blue-100">
                          <rec.icon className="h-4 w-4 text-blue-600" />
                        </div>
                        <div className="flex-1 space-y-2">
                          <div className="flex items-center justify-between">
                            <h3 className="font-medium">{rec.title}</h3>
                            <Badge
                              variant={
                                rec.priority === "High"
                                  ? "destructive"
                                  : rec.priority === "Medium"
                                    ? "default"
                                    : "secondary"
                              }
                            >
                              {rec.priority} Priority
                            </Badge>
                          </div>
                          <p className="text-sm text-gray-600">{rec.description}</p>
                          <Button variant="outline" size="sm">
                            Learn More
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="family" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Family History</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="p-4 border rounded-lg">
                      <h3 className="font-medium mb-2">Maternal Side</h3>
                      <ul className="space-y-1 text-sm text-gray-600">
                        <li>• Mother: Type 2 Diabetes (age 55)</li>
                        <li>• Maternal Grandmother: Heart Disease (age 72)</li>
                        <li>• Maternal Aunt: Breast Cancer (age 48)</li>
                      </ul>
                    </div>
                    <div className="p-4 border rounded-lg">
                      <h3 className="font-medium mb-2">Paternal Side</h3>
                      <ul className="space-y-1 text-sm text-gray-600">
                        <li>• Father: Hypertension (age 60)</li>
                        <li>• Paternal Grandfather: Alzheimer's Disease (age 78)</li>
                      </ul>
                    </div>
                    <Button variant="outline">Update Family History</Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/api-setup/page.tsx" isEdit="true" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, DollarSign, Key, Shield, Zap, ExternalLink, Info, Mail } from "lucide-react"
import Link from "next/link"

export default function ApiSetupPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8 text-center">
            <h1 className="text-4xl font-bold mb-4">Connect Your OpenAI API</h1>
            <p className="text-xl text-gray-600 mb-6">
              Get unlimited access to Genie for just $5/month + your OpenAI costs
            </p>
            <div className="flex items-center justify-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <DollarSign className="h-3 w-3 mr-1" />
                $5/month platform fee
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Zap className="h-3 w-3 mr-1" />
                Unlimited questions
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Shield className="h-3 w-3 mr-1" />
                Your data stays private
              </Badge>
            </div>
          </div>

<div className="grid lg:grid-cols-2 gap-8 mb-8">
            {/* Why Use Your Own API Key */}
            <Card className="border-green-200 bg-green-50">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-green-800">
                  <CheckCircle className="h-5 w-5" />
                  Why This Plan is Perfect
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-green-700">
                <div className="flex items-start gap-2">
                  <CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                  <span className="text-sm">
                    <strong>Unlimited Usage:</strong> Ask Genie as many questions as you want
                  </span>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                  <span className="text-sm">
                    <strong>Transparent Costs:</strong> $5/month + OpenAI costs (typically $5-15/month)
                  </span>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                  <span className="text-sm">
                    <strong>Maximum Privacy:</strong> Your conversations go directly to OpenAI
                  </span>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                  <span className="text-sm">
                    <strong>Best Value:</strong> Total cost ~$10-20/month vs $29 Pro plan
                  </span>
                </div>
              </CardContent>
            </Card>

{/* Cost Comparison */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <DollarSign className="h-5 w-5" />
                  Cost Breakdown
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                    <span className="font-medium">Our Pro Plan</span>
                    <span className="text-lg font-bold">$29/month</span>
                  </div>
                  <div className="text-center text-gray-500 text-sm">vs</div>
                  <div className="space-y-2">
                    <div className="flex justify-between items-center p-3 bg-green-50 rounded border border-green-200">
                      <span className="font-medium text-green-800">Platform Fee</span>
                      <span className="text-lg font-bold text-green-800">$5/month</span>
                    </div>
                    <div className="flex justify-between items-center p-3 bg-green-50 rounded border border-green-200">
                      <span className="font-medium text-green-800">OpenAI Costs</span>
                      <span className="text-lg font-bold text-green-800">~$5-15/month</span>
                    </div>
                    <div className="flex justify-between items-center p-3 bg-green-100 rounded border-2 border-green-300">
                      <span className="font-bold text-green-800">Total</span>
                      <span className="text-xl font-bold text-green-800">~$10-20/month</span>
                    </div>
                  </div>
                </div>
                <p className="text-xs text-gray-600">
                  *OpenAI costs depend on usage. Heavy users might spend more, but you have full control.
                </p>
              </CardContent>
            </Card>
          </div>

{/* Setup Instructions */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Key className="h-5 w-5" />
                How to Set Up Your OpenAI API Key
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-3 gap-6">
                <div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">1</span>
                  </div>
                  <h3 className="font-semibold">Create OpenAI Account</h3>
                  <p className="text-sm text-gray-600">Sign up at OpenAI and add billing information to your account</p>
                  <Button variant="outline" size="sm" asChild>
                    <Link href="https://platform.openai.com/signup" target="_blank" rel="noopener noreferrer">
                      Sign Up <ExternalLink className="h-3 w-3 ml-1" />
                    </Link>
                  </Button>
                </div>

<div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">2</span>
                  </div>
                  <h3 className="font-semibold">Generate API Key</h3>
                  <p className="text-sm text-gray-600">Create a new API key in your OpenAI dashboard</p>
                  <Button variant="outline" size="sm" asChild>
                    <Link href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
                      Get API Key <ExternalLink className="h-3 w-3 ml-1" />
                    </Link>
                  </Button>
                </div>

<div className="text-center space-y-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-xl font-bold text-blue-600">3</span>
                  </div>
                  <h3 className="font-semibold">Add to Profile</h3>
                  <p className="text-sm text-gray-600">Enter your API key in your Cover My Genetics profile</p>
                  <Button size="sm" asChild>
                    <Link href="/profile">Add API Key</Link>
                  </Button>
                </div>
              </div>

<Alert className="border-blue-200 bg-blue-50">
                <Info className="h-4 w-4" />
                <AlertDescription className="text-blue-800">
                  <strong>Security Note:</strong> Your API key is stored securely and encrypted. We never see or log
                  your conversations with Genie.
                </AlertDescription>
              </Alert>
            </CardContent>
          </Card>

{/* FAQ */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle>Frequently Asked Questions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div>
                  <h3 className="font-semibold mb-2">Why do you charge $5/month if I'm using my own API key?</h3>
                  <p className="text-gray-600 text-sm">
                    The $5 covers our platform infrastructure, security, ongoing development, and support. You still
                    save significantly compared to our Pro plan while getting unlimited access.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">How much will this cost me total?</h3>
                  <p className="text-gray-600 text-sm">
                    Most users spend $10-20/month total ($5 platform fee + $5-15 OpenAI costs). Heavy users might spend
                    more, but you have full control and transparency.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">Is my API key secure?</h3>
                  <p className="text-gray-600 text-sm">
                    Yes! Your API key is encrypted and stored securely. We use it only to make requests to OpenAI on
                    your behalf. You can revoke it anytime from your OpenAI dashboard.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">What if I don't want to manage an API key?</h3>
                  <p className="text-gray-600 text-sm">
                    No problem! Our Pro plan ($29/month) includes unlimited questions without needing your own API key.
                    Choose the option that works best for you.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="text-center">
            <div className="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-2xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Ready to Get Started?</h2>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                Join thousands of users who are getting unlimited access to Genie for a fraction of the cost of our Pro
                plan.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/profile">
                  <Button className="bg-emerald-600 hover:bg-emerald-700">Add My API Key</Button>
                </Link>
                <a
                  href="mailto:info@covermygenetics.com"
                  className="inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-emerald-600 rounded-lg hover:bg-emerald-50 transition-colors"
                >
                  <Mail className="h-4 w-4 mr-2" />
                  Get Support
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"

const blogPosts = [
  {
    id: 1,
    title: "Understanding Genetic Testing: A Comprehensive Guide",
    excerpt: "Learn about the different types of genetic tests available and what they can tell you about your health.",
    date: "June 10, 2025",
    category: "Education",
    image: "/blog/genetic-testing-guide.png",
  },
  {
    id: 2,
    title: "The Future of Personalized Medicine",
    excerpt: "How genetic information is revolutionizing healthcare and enabling tailored treatments.",
    date: "June 5, 2025",
    category: "Research",
    image: "/blog/personalized-medicine.png",
  },
  {
    id: 3,
    title: "Genetic Privacy: What You Need to Know",
    excerpt: "Important considerations about your genetic data privacy and how to protect your information.",
    date: "May 28, 2025",
    category: "Privacy",
    image: "/blog/genetic-privacy.png",
  },
  {
    id: 4,
    title: "Common Myths About Genetics Debunked",
    excerpt: "Separating fact from fiction when it comes to genetics and inherited traits.",
    date: "May 20, 2025",
    category: "Education",
    image: "/blog/genetics-myths.png",
  },
]

export default function BlogPage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-3xl font-bold mb-6">Blog</h1>
        <p className="text-gray-700 mb-8">
          Stay up to date with the latest news, research, and insights in genetics and personalized healthcare.
        </p>

<div className="grid md:grid-cols-2 gap-8">
          {blogPosts.map((post) => (
            <div key={post.id} className="bg-white rounded-lg overflow-hidden shadow-md">
              <Image
                src={post.image || "/placeholder.svg"}
                alt={post.title}
                width={400}
                height={200}
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xs font-medium px-2.5 py-0.5 rounded bg-pink-100 text-pink-800">
                    {post.category}
                  </span>
                  <span className="text-sm text-gray-500">{post.date}</span>
                </div>
                <h2 className="text-xl font-bold mb-2">{post.title}</h2>
                <p className="text-gray-700 mb-4">{post.excerpt}</p>
                <Link href={`/blog/${post.id}`}>
                  <Button variant="outline">Read More</Button>
                </Link>
              </div>
            </div>
          ))}
        </div>

<div className="mt-12 flex justify-center">
          <Button variant="outline" className="mr-2">
            Previous
          </Button>
          <Button variant="outline">Next</Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type * as React from "react"

type Theme = "dark" | "light" | "system"

interface ThemeProviderProps {
  children: React.ReactNode
  attribute?: string
  defaultTheme?: Theme
  enableSystem?: boolean
  disableTransitionOnChange?: boolean
}

export function ThemeProvider({
  children,
  attribute = "class",
  defaultTheme = "system",
  enableSystem = true,
  disableTransitionOnChange = false,
  ...props
}: ThemeProviderProps) {
  return <>{children}</>
}

export function useTheme() {
  return {
    theme: "light",
    setTheme: () => {},
    themes: ["light", "dark", "system"],
  }
}
[V0_FILE]typescriptreact:file="app/actions/contact.ts" isEdit="true" isMerged="true"
"use server"

export async function submitContactForm(prevState: any, formData: FormData) {
  const firstName = formData.get("firstName") as string
  const lastName = formData.get("lastName") as string
  const email = formData.get("email") as string
  const subject = formData.get("subject") as string
  const message = formData.get("message") as string

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

// Here you would integrate with your email service
    console.log("Contact form submission:", {
      name: `${firstName} ${lastName}`,
      email,
      subject,
      message,
    })

return {
      success: true,
      message: "Thank you for your message! We'll get back to you within 24 hours.",
    }
  } catch (error) {
    console.error("Contact form error:", error)
    return {
      success: false,
      message:
        "Sorry, there was an error sending your message. Please try again or email us directly at info@covermygenetics.com.",
    }
  }
}
[V0_FILE]typescriptreact:file="app/contact-us/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useActionState } from "react"
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, CardHeader, CardTitle } from "@/components/ui/card"
import { Mail, Phone, MapPin, Clock, CheckCircle, AlertCircle } from "lucide-react"
import Navbar from "@/components/navbar"
import { submitContactForm } from "@/app/actions/contact"

export default function ContactUsPage() {
  const [state, action, isPending] = useActionState(submitContactForm, { success: false, message: "" })

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent">
              Contact Us
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Have questions about genetic testing, our services, or need support? Our team is here to help you on your
              genetic journey.
            </p>
          </div>

<div className="grid lg:grid-cols-2 gap-12">
            <div>
              <Card className="border-emerald-100">
                <CardHeader>
                  <CardTitle className="text-2xl text-emerald-800">Send us a message</CardTitle>
                </CardHeader>
                <CardContent>
                  {state && state.message && (
                    <div
                      className={`mb-6 p-4 rounded-lg flex items-center gap-3 ${
                        state.success
                          ? "bg-green-50 text-green-800 border border-green-200"
                          : "bg-red-50 text-red-800 border border-red-200"
                      }`}
                    >
                      {state.success ? (
                        <CheckCircle className="h-5 w-5 flex-shrink-0" />
                      ) : (
                        <AlertCircle className="h-5 w-5 flex-shrink-0" />
                      )}
                      <p className="text-sm">{state.message}</p>
                    </div>
                  )}

<form action={action} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="firstName">First Name</Label>
                        <Input
                          id="firstName"
                          name="firstName"
                          required
                          className="border-emerald-200 focus:border-emerald-400"
                          disabled={isPending}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName">Last Name</Label>
                        <Input
                          id="lastName"
                          name="lastName"
                          required
                          className="border-emerald-200 focus:border-emerald-400"
                          disabled={isPending}
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        required
                        className="border-emerald-200 focus:border-emerald-400"
                        disabled={isPending}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="subject">Subject</Label>
                      <Input
                        id="subject"
                        name="subject"
                        required
                        className="border-emerald-200 focus:border-emerald-400"
                        disabled={isPending}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="message">Message</Label>
                      <Textarea
                        id="message"
                        name="message"
                        className="min-h-[150px] border-emerald-200 focus:border-emerald-400"
                        required
                        disabled={isPending}
                      />
                    </div>
                    <Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700" disabled={isPending}>
                      {isPending ? "Sending..." : "Send Message"}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

<div className="space-y-8">
              <Card className="border-emerald-100 bg-gradient-to-br from-emerald-50 to-blue-50">
                <CardHeader>
                  <CardTitle className="text-2xl text-emerald-800">Get in Touch</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="p-3 bg-emerald-100 rounded-lg">
                      <Mail className="h-5 w-5 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">Email</h3>
                      <p className="text-gray-600">info@covermygenetics.com</p>
                      <p className="text-sm text-gray-500 mt-1">We typically respond within 24 hours</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="p-3 bg-blue-100 rounded-lg">
                      <Phone className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">Phone</h3>
                      <p className="text-gray-600">(555) 123-4567</p>
                      <p className="text-sm text-gray-500 mt-1">Monday - Friday, 9am - 5pm EST</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="p-3 bg-purple-100 rounded-lg">
                      <Clock className="h-5 w-5 text-purple-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">Support Hours</h3>
                      <p className="text-gray-600">Monday - Friday: 9am - 5pm EST</p>
                      <p className="text-gray-600">Saturday: 10am - 2pm EST</p>
                      <p className="text-sm text-gray-500 mt-1">Emergency support available 24/7</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="p-3 bg-green-100 rounded-lg">
                      <MapPin className="h-5 w-5 text-green-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">Address</h3>
                      <p className="text-gray-600">
                        123 Genetics Way
                        <br />
                        Suite 456
                        <br />
                        Boston, MA 02110
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="border-blue-100 bg-blue-50">
                <CardHeader>
                  <CardTitle className="text-xl text-blue-800">Frequently Asked Questions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">How quickly will I get a response?</h4>
                    <p className="text-sm text-gray-600">
                      We respond to all inquiries within 24 hours during business days. For urgent matters, please call
                      our support line.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">Can I schedule a consultation?</h4>
                    <p className="text-sm text-gray-600">
                      Yes! Pro and Family plan members can schedule consultations with certified genetic counselors.
                      Contact us to book your session.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">Do you offer technical support?</h4>
                    <p className="text-sm text-gray-600">
                      Absolutely. Our technical support team can help with API setup, account issues, and platform
                      navigation.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

<div className="mt-16 text-center">
            <div className="bg-gradient-to-r from-emerald-50 to-blue-50 rounded-2xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">Need Immediate Help?</h2>
              <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                For urgent genetic counseling questions or technical issues, don't hesitate to reach out directly.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <a
                  href="mailto:info@covermygenetics.com"
                  className="inline-flex items-center justify-center px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
                >
                  <Mail className="h-4 w-4 mr-2" />
                  Email Us Now
                </a>
                <a
                  href="tel:+15551234567"
                  className="inline-flex items-center justify-center px-6 py-3 border border-emerald-600 text-emerald-600 rounded-lg hover:bg-emerald-50 transition-colors"
                >
                  <Phone className="h-4 w-4 mr-2" />
                  Call Support
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useActionState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { CheckCircle, AlertCircle } from "lucide-react"
import Navbar from "@/components/navbar"
import { signupUser } from "@/app/actions/auth"

export default function SignupPage() {
  const [state, action, isPending] = useActionState(signupUser, { success: false, message: "" })

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="flex-1 flex items-center justify-center p-4">
        <div className="w-full max-w-md space-y-8 bg-white p-8 rounded-lg shadow">
          <div className="text-center">
            <h1 className="text-2xl font-bold">Create an Account</h1>
            <p className="text-gray-600 mt-2">Start your genetic journey today</p>
          </div>

{state && state.message && (
            <div
              className={`p-4 rounded-lg flex items-center gap-3 ${
                state.success
                  ? "bg-green-50 text-green-800 border border-green-200"
                  : "bg-red-50 text-red-800 border border-red-200"
              }`}
            >
              {state.success ? (
                <CheckCircle className="h-5 w-5 flex-shrink-0" />
              ) : (
                <AlertCircle className="h-5 w-5 flex-shrink-0" />
              )}
              <p className="text-sm">{state.message}</p>
            </div>
          )}

<form action={action} className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="firstName">First Name</Label>
                <Input id="firstName" name="firstName" required disabled={isPending} />
              </div>
              <div className="space-y-2">
                <Label htmlFor="lastName">Last Name</Label>
                <Input id="lastName" name="lastName" required disabled={isPending} />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" name="email" type="email" placeholder="you@example.com" required disabled={isPending} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" name="password" type="password" required disabled={isPending} />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="terms" required disabled={isPending} />
              <label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                I agree to the{" "}
                <Link href="/terms" className="text-pink-600 hover:underline">
                  terms of service
                </Link>{" "}
                and{" "}
                <Link href="/privacy" className="text-pink-600 hover:underline">
                  privacy policy
                </Link>
              </label>
            </div>
            <Button type="submit" className="w-full" disabled={isPending}>
              {isPending ? "Creating Account..." : "Sign Up"}
            </Button>
          </form>
          <div className="text-center text-sm">
            <p>
              Already have an account?{" "}
              <Link href="/login" className="text-pink-600 hover:underline">
                Login
              </Link>
            </p>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useActionState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { CheckCircle, AlertCircle } from "lucide-react"
import Navbar from "@/components/navbar"
import { loginUser } from "@/app/actions/auth"

export default function LoginPage() {
  const [state, action, isPending] = useActionState(loginUser, { success: false, message: "" })

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="flex-1 flex items-center justify-center p-4">
        <div className="w-full max-w-md space-y-8 bg-white p-8 rounded-lg shadow">
          <div className="text-center">
            <h1 className="text-2xl font-bold">Login to Cover My Genetics</h1>
            <p className="text-gray-600 mt-2">Access your genetic insights</p>
          </div>

<form action={action} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" name="email" type="email" placeholder="you@example.com" required disabled={isPending} />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link href="/forgot-password" className="text-sm text-pink-600 hover:underline">
                  Forgot password?
                </Link>
              </div>
              <Input id="password" name="password" type="password" required disabled={isPending} />
            </div>
            <Button type="submit" className="w-full" disabled={isPending}>
              {isPending ? "Logging in..." : "Login"}
            </Button>
          </form>
          <div className="text-center text-sm">
            <p>
              Don't have an account?{" "}
              <Link href="/signup" className="text-pink-600 hover:underline">
                Sign up
              </Link>
            </p>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/usage-tracker.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Zap, Crown, AlertTriangle, Key } from "lucide-react"
import Link from "next/link"

interface UsageTrackerProps {
  userPlan: "free" | "api" | "pro" | "family"
  questionsUsed: number
  questionsLimit: number
  onUpgrade?: () => void
}

export default function UsageTracker({ userPlan, questionsUsed, questionsLimit, onUpgrade }: UsageTrackerProps) {
  const [usagePercentage, setUsagePercentage] = useState(0)
  const isNearLimit = usagePercentage >= 80
  const isAtLimit = questionsUsed >= questionsLimit

useEffect(() => {
    if (questionsLimit > 0) {
      setUsagePercentage((questionsUsed / questionsLimit) * 100)
    }
  }, [questionsUsed, questionsLimit])

if (userPlan === "pro" || userPlan === "family") {
    return (
      <Card className="border-green-200 bg-green-50">
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Crown className="h-5 w-5 text-green-600" />
              <span className="font-medium text-green-800">
                {userPlan === "pro" ? "Pro Plan" : "Family Plan"} - Unlimited Questions
              </span>
            </div>
            <Badge variant="secondary" className="bg-green-100 text-green-800">
              Premium
            </Badge>
          </div>
        </CardContent>
      </Card>
    )
  }

if (userPlan === "api") {
    return (
      <Card className="border-blue-200 bg-blue-50">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center justify-between text-lg">
            <span className="flex items-center gap-2">
              <Key className="h-5 w-5" />
              API Plan - Unlimited Access
            </span>
            <Badge variant="outline" className="bg-blue-100 text-blue-800">
              $5/month + API costs
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-white p-4 rounded-lg border border-blue-200">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium">Your Plan Benefits:</span>
            </div>
            <ul className="text-sm space-y-1 text-blue-700">
              <li>• Unlimited questions with Genie</li>
              <li>• Complete chat history</li>
              <li>• File uploads for reports & test results</li>
              <li>• All genetic resources</li>
              <li>• Direct OpenAI connection</li>
              <li>• Maximum privacy control</li>
            </ul>
          </div>

<div className="flex gap-2">
            <Link href="/profile" className="flex-1">
              <Button variant="outline" className="w-full border-blue-600 text-blue-600 hover:bg-blue-50">
                Manage API Key
              </Button>
            </Link>
            <Link href="/pricing">
              <Button variant="outline" size="sm">
                Compare Plans
              </Button>
            </Link>
          </div>

<div className="text-xs text-gray-600 space-y-1">
            <p>• $5/month platform fee</p>
            <p>• OpenAI costs typically $5-15/month</p>
            <p>• Total: ~$10-20/month vs $29 Pro plan</p>
          </div>
        </CardContent>
      </Card>
    )
  }

// Free plan
  return (
    <Card className={`${isNearLimit ? "border-amber-200 bg-amber-50" : "border-blue-200 bg-blue-50"}`}>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center justify-between text-lg">
          <span className="flex items-center gap-2">
            <Zap className="h-5 w-5" />
            Free Plan
          </span>
          <Badge variant="outline">
            {questionsUsed}/{questionsLimit} questions
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Questions this month</span>
            <span className={isNearLimit ? "text-amber-600 font-medium" : "text-gray-600"}>
              {questionsUsed} of {questionsLimit}
            </span>
          </div>
          <Progress
            value={usagePercentage}
            className={`h-2 ${isNearLimit ? "[&>div]:bg-amber-500" : "[&>div]:bg-blue-500"}`}
          />
        </div>

{isAtLimit && (
          <div className="flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
            <AlertTriangle className="h-4 w-4 text-red-500 mt-0.5 flex-shrink-0" />
            <div className="text-sm">
              <p className="font-medium text-red-800">Monthly limit reached</p>
              <p className="text-red-600">Upgrade to continue asking questions with Genie</p>
            </div>
          </div>
        )}

{isNearLimit && !isAtLimit && (
          <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
            <AlertTriangle className="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" />
            <div className="text-sm">
              <p className="font-medium text-amber-800">Almost at your limit</p>
              <p className="text-amber-600">You have {questionsLimit - questionsUsed} questions remaining</p>
            </div>
          </div>
        )}

<div className="flex gap-2">
          <Link href="/pricing" className="flex-1">
            <Button variant="default" className="w-full">
              Upgrade Plan
            </Button>
          </Link>
          <Button variant="outline" size="sm" asChild>
            <Link href="/pricing">Compare Plans</Link>
          </Button>
        </div>

<div className="text-xs text-gray-600 space-y-1">
          <p>• Free plan resets monthly</p>
          <p>• Upgrade for unlimited questions</p>
          <p>• Upload files with paid plans</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="true" isMerged="true"
import Navbar from "@/components/navbar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check, X, Star, Key } from "lucide-react"
import Link from "next/link"

export default function PricingPage() {
  const plans = [
    {
      name: "Free",
      price: "$0",
      period: "forever",
      description: "Get started with basic genetic insights",
      features: [
        "5 questions per month with Genie",
        "Basic genetic information",
        "Educational resources",
        "Community support",
      ],
      limitations: [
        "No file uploads",
        "No chat history saving",
        "No detailed reports",
        "No family history tools",
        "No priority support",
      ],
      buttonText: "Get Started Free",
      buttonVariant: "outline" as const,
      popular: false,
    },
    {
      name: "Bring Your Own API",
      price: "$5",
      period: "per month",
      description: "Unlimited access with your OpenAI API key",
      features: [
        "Unlimited questions with Genie",
        "Use your own OpenAI API key",
        "Pay only OpenAI costs (~$5-15/month)",
        "Full chat history",
        "File uploads for reports & test results",
        "All genetic resources",
        "Email support",
        "Complete privacy control",
      ],
      limitations: [],
      buttonText: "Start Free Trial",
      buttonVariant: "default" as const,
      popular: false,
      highlight: "Most Cost-Effective",
    },
    {
      name: "Pro",
      price: "$29",
      period: "per month",
      description: "Comprehensive genetic counseling without API setup",
      features: [
        "Unlimited questions with Genie",
        "No API key required",
        "File uploads for reports & test results",
        "Advanced genetic analysis",
        "Detailed personalized reports",
        "Family history builder",
        "Risk assessment tools",
        "Priority email support",
        "Early access to new features",
      ],
      limitations: [],
      buttonText: "Start Pro Trial",
      buttonVariant: "default" as const,
      popular: false,
    },
    {
      name: "Family",
      price: "$79",
      period: "per month",
      description: "Complete genetic insights for your entire family",
      features: [
        "Everything in Pro",
        "Up to 6 family member profiles",
        "Shared family genetic reports",
        "File uploads for all family members",
        "Inheritance pattern analysis",
        "Family risk assessments",
        "Genetic counselor consultations (2/month)",
        "Phone & video support",
        "Custom genetic reports",
      ],
      limitations: [],
      buttonText: "Start Family Plan",
      buttonVariant: "default" as const,
      popular: true,
      highlight: "Most Popular",
    },
  ]

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Choose Your Genetic Journey</h1>
            <p className="text-xl text-gray-600 mb-8">
              Unlock the power of your genetic information with plans designed for every need
            </p>
            <div className="flex items-center justify-center gap-4 mb-8">
              <Badge variant="secondary" className="text-sm">
                <Star className="h-3 w-3 mr-1" />5 free questions to get started
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Key className="h-3 w-3 mr-1" />
                Upload reports with paid plans
              </Badge>
            </div>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {plans.map((plan, index) => (
              <Card
                key={index}
                className={`relative ${plan.popular ? "border-blue-500 shadow-lg scale-105" : ""} ${plan.highlight === "Most Cost-Effective" ? "border-green-500" : ""}`}
              >
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-blue-500 text-white">Most Popular</Badge>
                  </div>
                )}
                {plan.highlight && plan.highlight !== "Most Popular" && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <Badge className="bg-green-500 text-white">{plan.highlight}</Badge>
                  </div>
                )}
                <CardHeader className="text-center pb-4">
                  <CardTitle className="text-xl">{plan.name}</CardTitle>
                  <div className="mt-4">
                    <span className="text-3xl font-bold">{plan.price}</span>
                    <span className="text-gray-600 ml-1">/{plan.period}</span>
                    {plan.name === "Bring Your Own API" && (
                      <div className="text-sm text-green-600 font-medium mt-1">+ Your OpenAI API costs</div>
                    )}
                  </div>
                  <p className="text-gray-600 mt-2 text-sm">{plan.description}</p>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-3">
                    <h4 className="font-semibold text-green-700 text-sm">What's included:</h4>
                    {plan.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-start gap-2">
                        <Check className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
                        <span className="text-sm">{feature}</span>
                      </div>
                    ))}
                  </div>

{plan.limitations.length > 0 && (
                    <div className="space-y-3">
                      <h4 className="font-semibold text-gray-500 text-sm">Limitations:</h4>
                      {plan.limitations.map((limitation, limitIndex) => (
                        <div key={limitIndex} className="flex items-start gap-2">
                          <X className="h-4 w-4 text-gray-400 mt-0.5 flex-shrink-0" />
                          <span className="text-sm text-gray-600">{limitation}</span>
                        </div>
                      ))}
                    </div>
                  )}

<Link
                    href={
                      plan.name === "Free"
                        ? "/signup"
                        : plan.name === "Bring Your Own API"
                          ? "/api-setup"
                          : `/subscribe?plan=${plan.name.toLowerCase()}`
                    }
                  >
                    <Button variant={plan.buttonVariant} className="w-full mt-6">
                      {plan.buttonText}
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="bg-gray-50 rounded-lg p-8 mb-12">
            <h2 className="text-2xl font-bold text-center mb-6">Frequently Asked Questions</h2>
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-2">Can I upload my genetic test results?</h3>
                <p className="text-gray-600 text-sm">
                  Yes! With any paid plan, you can upload genetic test results, lab reports, and other documents for
                  Genie to analyze and provide personalized insights.
                </p>
              </div>
              <div>
                <h3 className="font-semibold mb-2">What happens after my 5 free questions?</h3>
                <p className="text-gray-600 text-sm">
                  You'll need to upgrade to a paid plan to continue. The API plan is most cost-effective at
                  ~$10-20/month total, while Pro offers convenience without API setup.
                </p>
              </div>
              <div>
                <h3 className="font-semibold mb-2">Is my uploaded data secure?</h3>
                <p className="text-gray-600 text-sm">
                  Absolutely. All uploads are encrypted and processed securely. With the API plan, your data goes
                  directly to OpenAI without us storing it.
                </p>
              </div>
              <div>
                <h3 className="font-semibold mb-2">Can I switch between plans?</h3>
                <p className="text-gray-600 text-sm">
                  Yes, you can upgrade or downgrade anytime. Your chat history and uploaded files are preserved when
                  switching between paid plans.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]plaintext:file="public/samples/sample-genetic-report.txt" isMerged="true"
GENETIC TEST REPORT
Patient: John Doe
Date of Birth: 01/15/1985
Test Date: 12/15/2024
Lab: GeneTech Laboratories

SUMMARY OF FINDINGS:
This comprehensive genetic analysis examined 150 clinically relevant genes associated with hereditary cancer, cardiovascular disease, and pharmacogenomics.

KEY FINDINGS:

1. BRCA1 Gene Analysis:
   - Variant: c.5266dupC (p.Gln1756Profs*74)
   - Classification: Pathogenic
   - Clinical Significance: Increased risk for breast and ovarian cancer
   - Population Frequency: <0.01%

2. APOE Gene Analysis:
   - Genotype: ε3/ε4
   - Classification: Risk variant
   - Clinical Significance: Moderately increased risk for Alzheimer's disease
   - Population Frequency: ~25%

3. CYP2D6 Pharmacogenomics:
   - Genotype: *1/*4
   - Phenotype: Intermediate metabolizer
   - Clinical Significance: May require dose adjustments for certain medications
   - Affected drugs: Codeine, tramadol, some antidepressants

4. LDLR Gene Analysis:
   - Variant: c.2389+1G>A
   - Classification: Likely pathogenic
   - Clinical Significance: Associated with familial hypercholesterolemia
   - Population Frequency: <0.1%

RECOMMENDATIONS:
1. Genetic counseling recommended for BRCA1 findings
2. Enhanced breast and ovarian cancer screening
3. Cardiovascular risk assessment and management
4. Pharmacogenomic considerations for medication prescribing
5. Family cascade testing recommended

LIMITATIONS:
- This test does not detect all possible genetic variants
- Negative results do not eliminate disease risk
- Clinical correlation is recommended
- Results should be interpreted by qualified healthcare professionals

Report generated by: Dr. Sarah Johnson, MD, PhD
Medical Director, GeneTech Laboratories
Certified by: College of American Pathologists (CAP)
[V0_FILE]plaintext:file="public/samples/sample-snp-data.csv" isMerged="true"
rsID,Chromosome,Position,Genotype,Risk_Allele,Clinical_Significance
rs429358,19,45411941,TC,C,APOE e4 allele - Alzheimer's risk
rs7412,19,45412079,CC,T,APOE e2 allele - protective
rs1801282,3,12393125,CC,G,PPARG - diabetes risk
rs1801133,1,11856378,CT,T,MTHFR - folate metabolism
rs4988235,2,136608646,GG,A,LCT - lactose intolerance
rs1815739,11,66560624,CT,T,ACTN3 - athletic performance
rs53576,3,8762685,GG,A,OXTR - social behavior
rs4680,22,19963748,AG,A,COMT - dopamine metabolism
rs1042713,5,148206440,AG,G,ADRB2 - asthma response
rs1800497,11,113270828,AG,A,DRD2 - addiction susceptibility
[V0_FILE]typescriptreact:file="app/test-upload/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Download, FileText, Database } from "lucide-react"
import GenieChatInterface from "@/components/genie-chat-interface"

export default function TestUploadPage() {
  const [showChat, setShowChat] = useState(false)

const downloadSampleReport = () => {
    const link = document.createElement("a")
    link.href = "/samples/sample-genetic-report.txt"
    link.download = "sample-genetic-report.txt"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const downloadSampleData = () => {
    const link = document.createElement("a")
    link.href = "/samples/sample-snp-data.csv"
    link.download = "sample-snp-data.csv"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

if (showChat) {
    return <GenieChatInterface />
  }

return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold mb-4">Test File Upload Functionality</h1>
        <p className="text-gray-600 mb-6">
          Download sample genetic reports and test the file upload feature with Genie
        </p>
      </div>

<div className="grid md:grid-cols-2 gap-6 mb-8">
        <Card className="border-blue-200 bg-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-blue-600" />
              Sample Genetic Report
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700 mb-4">
              A comprehensive genetic test report including BRCA1, APOE, and other clinically relevant variants. Perfect
              for testing Genie's analysis capabilities.
            </p>
            <div className="space-y-2 text-xs text-gray-600 mb-4">
              <p>• BRCA1 pathogenic variant</p>
              <p>• APOE Alzheimer's risk assessment</p>
              <p>• Pharmacogenomic findings</p>
              <p>• Clinical recommendations</p>
            </div>
            <Button onClick={downloadSampleReport} className="w-full">
              <Download className="h-4 w-4 mr-2" />
              Download Sample Report
            </Button>
          </CardContent>
        </Card>

<Card className="border-green-200 bg-green-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5 text-green-600" />
              Sample SNP Data
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700 mb-4">
              Raw genetic data in CSV format with common SNPs and their clinical significance. Great for testing data
              interpretation features.
            </p>
            <div className="space-y-2 text-xs text-gray-600 mb-4">
              <p>• 10 clinically relevant SNPs</p>
              <p>• Risk allele information</p>
              <p>• Clinical significance notes</p>
              <p>• Standard CSV format</p>
            </div>
            <Button
              onClick={downloadSampleData}
              variant="outline"
              className="w-full border-green-600 text-green-600 hover:bg-green-50"
            >
              <Download className="h-4 w-4 mr-2" />
              Download Sample Data
            </Button>
          </CardContent>
        </Card>
      </div>

<Card className="border-emerald-200 bg-emerald-50">
        <CardHeader>
          <CardTitle className="text-center">Test Upload with Genie</CardTitle>
        </CardHeader>
        <CardContent className="text-center">
          <p className="text-gray-700 mb-6">
            Download one or both sample files above, then click below to test the upload functionality with Genie. Try
            asking questions like:
          </p>
          <div className="text-left bg-white p-4 rounded-lg border border-emerald-200 mb-6">
            <ul className="space-y-2 text-sm">
              <li>• "Can you analyze my genetic report and explain the key findings?"</li>
              <li>• "What do my BRCA1 results mean for my cancer risk?"</li>
              <li>• "How should I interpret my APOE genotype?"</li>
              <li>• "What medications might be affected by my CYP2D6 results?"</li>
              <li>• "Should my family members get tested based on these results?"</li>
            </ul>
          </div>
          <Button onClick={() => setShowChat(true)} size="lg" className="bg-emerald-600 hover:bg-emerald-700">
            Start Testing with Genie
          </Button>
        </CardContent>
      </Card>

<div className="mt-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <h3 className="font-semibold text-amber-800 mb-2">Testing Instructions:</h3>
        <ol className="text-sm text-amber-700 space-y-1">
          <li>1. Download one or both sample files using the buttons above</li>
          <li>2. Click "Start Testing with Genie" to open the chat interface</li>
          <li>3. Upload the downloaded file(s) using drag & drop or the upload button</li>
          <li>4. Ask Genie to analyze your uploaded genetic data</li>
          <li>5. Try different questions to test the AI's analysis capabilities</li>
        </ol>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ask-genie/page.tsx" isEdit="true" isMerged="true"
import GenieChatInterface from "@/components/genie-chat-interface"
import Navbar from "@/components/navbar"

export default function AskGeniePage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="flex-1">
        <GenieChatInterface />
      </div>
    </main>
  )
}
[V0_FILE]sql:file="scripts/001-create-database.sql" isMerged="true"
-- Users table
CREATE TABLE IF NOT EXISTS users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash VARCHAR(255) NOT NULL,
  first_name VARCHAR(100),
  last_name VARCHAR(100),
  plan VARCHAR(20) DEFAULT 'free' CHECK (plan IN ('free', 'api', 'pro', 'family')),
  questions_used INTEGER DEFAULT 0,
  questions_limit INTEGER DEFAULT 5,
  api_key_encrypted TEXT,
  stripe_customer_id VARCHAR(255),
  subscription_id VARCHAR(255),
  subscription_status VARCHAR(20),
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Usage tracking table
CREATE TABLE IF NOT EXISTS usage_logs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  question_text TEXT,
  response_tokens INTEGER,
  cost_cents INTEGER,
  created_at TIMESTAMP DEFAULT NOW()
);

-- File uploads table
CREATE TABLE IF NOT EXISTS user_files (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  filename VARCHAR(255) NOT NULL,
  original_name VARCHAR(255) NOT NULL,
  file_size INTEGER NOT NULL,
  mime_type VARCHAR(100) NOT NULL,
  file_path TEXT NOT NULL,
  uploaded_at TIMESTAMP DEFAULT NOW()
);

-- Chat sessions table
CREATE TABLE IF NOT EXISTS chat_sessions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  title VARCHAR(255),
  messages JSONB NOT NULL DEFAULT '[]',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Indexes for performance
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_usage_logs_user_id ON usage_logs(user_id);
CREATE INDEX IF NOT EXISTS idx_user_files_user_id ON user_files(user_id);
CREATE INDEX IF NOT EXISTS idx_chat_sessions_user_id ON chat_sessions(user_id);
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
"use server"

import { cookies } from "next/headers"
import { getUserById } from "@/lib/database"

export interface User {
  id: string
  email: string
  firstName: string
  lastName: string
  plan: "free" | "api" | "pro" | "family"
  questionsUsed: number
  questionsLimit: number
  stripeCustomerId?: string
  subscriptionStatus?: string
}

export async function hashPassword(password: string): Promise<string> {
  const encoder = new TextEncoder()
  const data = encoder.encode(password)
  const hash = await crypto.subtle.digest("SHA-256", data)
  return Array.from(new Uint8Array(hash))
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("")
}

export async function verifyPassword(password: string, hashedPassword: string): Promise<boolean> {
  const hash = await hashPassword(password)
  return hash === hashedPassword
}

export function generateToken(userId: string): string {
  const payload = {
    userId,
    exp: Date.now() + 7 * 24 * 60 * 60 * 1000, // 7 days
  }
  return Buffer.from(JSON.stringify(payload)).toString("base64")
}

export function verifyToken(token: string): { userId: string } | null {
  try {
    const payload = JSON.parse(Buffer.from(token, "base64").toString())
    if (payload.exp < Date.now()) {
      return null
    }
    return { userId: payload.userId }
  } catch {
    return null
  }
}

export async function getCurrentUser(): Promise<User | null> {
  try {
    const cookieStore = await cookies()
    const token = cookieStore.get("auth-token")?.value

if (!token) return null

const payload = verifyToken(token)
    if (!payload) return null

const dbUser = await getUserById(payload.userId)
    if (!dbUser) return null

return {
      id: dbUser.id,
      email: dbUser.email,
      firstName: dbUser.first_name,
      lastName: dbUser.last_name,
      plan: dbUser.plan,
      questionsUsed: dbUser.questions_used,
      questionsLimit: dbUser.questions_limit,
      stripeCustomerId: dbUser.stripe_customer_id,
      subscriptionStatus: dbUser.subscription_status,
    }
  } catch {
    return null
  }
}

export async function setAuthCookie(token: string) {
  const cookieStore = await cookies()
  cookieStore.set("auth-token", token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24 * 7, // 7 days
  })
}

export async function clearAuthCookie() {
  const cookieStore = await cookies()
  cookieStore.delete("auth-token")
}
[V0_FILE]typescriptreact:file="app/actions/auth.ts" isEdit="true" isMerged="true"
"use server"

import { redirect } from "next/navigation"
import { createUser, getUserByEmail } from "@/lib/database"
import { hashPassword, verifyPassword, generateToken, setAuthCookie, clearAuthCookie } from "@/lib/auth"

export async function signupUser(prevState: any, formData: FormData) {
  const firstName = formData.get("firstName") as string
  const lastName = formData.get("lastName") as string
  const email = formData.get("email") as string
  const password = formData.get("password") as string

try {
    // Validate input
    if (!firstName || !lastName || !email || !password) {
      return {
        success: false,
        message: "All fields are required.",
      }
    }

if (password.length < 8) {
      return {
        success: false,
        message: "Password must be at least 8 characters long.",
      }
    }

// Check if user already exists
    const existingUser = await getUserByEmail(email)
    if (existingUser) {
      return {
        success: false,
        message: "An account with this email already exists.",
      }
    }

// Create user
    const passwordHash = await hashPassword(password)
    const user = await createUser({
      email,
      passwordHash,
      firstName,
      lastName,
    })

// Generate token and set cookie
    const token = generateToken(user.id)
    await setAuthCookie(token)

return {
      success: true,
      message: "Account created successfully! Redirecting to dashboard...",
      redirect: "/dashboard",
    }
  } catch (error) {
    console.error("Signup error:", error)
    return {
      success: false,
      message: "Sorry, there was an error creating your account. Please try again.",
    }
  }
}

export async function loginUser(prevState: any, formData: FormData) {
  const email = formData.get("email") as string
  const password = formData.get("password") as string

try {
    // Validate input
    if (!email || !password) {
      return {
        success: false,
        message: "Email and password are required.",
      }
    }

// Find user
    const user = await getUserByEmail(email)
    if (!user) {
      return {
        success: false,
        message: "Invalid email or password.",
      }
    }

// Verify password
    const isValidPassword = await verifyPassword(password, user.password_hash)
    if (!isValidPassword) {
      return {
        success: false,
        message: "Invalid email or password.",
      }
    }

// Generate token and set cookie
    const token = generateToken(user.id)
    await setAuthCookie(token)

return {
      success: true,
      message: "Login successful! Redirecting to dashboard...",
      redirect: "/dashboard",
    }
  } catch (error) {
    console.error("Login error:", error)
    return {
      success: false,
      message: "Sorry, there was an error logging you in. Please try again.",
    }
  }
}

export async function logoutUser() {
  await clearAuthCookie()
  redirect("/login")
}
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
import Stripe from "stripe"

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

export async function createStripeCustomer(email: string, name: string) {
  return await stripe.customers.create({
    email,
    name,
  })
}

export async function createSubscription(customerId: string, priceId: string) {
  return await stripe.subscriptions.create({
    customer: customerId,
    items: [{ price: priceId }],
    payment_behavior: "default_incomplete",
    payment_settings: { save_default_payment_method: "on_subscription" },
    expand: ["latest_invoice.payment_intent"],
  })
}

export async function getOrCreateCustomer(email: string, name: string, existingCustomerId?: string | null) {
  if (existingCustomerId) {
    try {
      const customer = await stripe.customers.retrieve(existingCustomerId)
      if (customer && !("deleted" in customer && customer.deleted)) {
        return existingCustomerId
      }
    } catch {
      // fall through and create a new customer
    }
  }
  const customer = await stripe.customers.create({ email, name })
  return customer.id
}

export { stripe }
[V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true"
import { openai } from "@ai-sdk/openai"
import { streamText } from "ai"
import { getCurrentUser } from "@/lib/auth"
import { updateUserUsage, logUsage } from "@/lib/database"

export async function POST(req: Request) {
  const { messages, data } = await req.json()

// Check if OpenAI API key is configured
  if (!process.env.OPENAI_API_KEY) {
    return new Response(
      JSON.stringify({
        error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables.",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      },
    )
  }

try {
    // Require an authenticated account to use Genie
    const user = await getCurrentUser()
    if (!user) {
      return new Response(
        JSON.stringify({ error: "Please sign in to ask Genie a question." }),
        { status: 401, headers: { "Content-Type": "application/json" } },
      )
    }

// Enforce monthly usage limits for the free plan
    if (user.plan === "free" && user.questionsUsed >= user.questionsLimit) {
      return new Response(
        JSON.stringify({
          error: "You've reached your monthly question limit. Please upgrade your plan to continue.",
        }),
        { status: 429, headers: { "Content-Type": "application/json" } },
      )
    }

const lastUserMessage = [...messages].reverse().find((m: { role: string }) => m.role === "user")

// Enhanced system prompt to handle file uploads
    const systemPrompt = `You are Genie, an AI genetic counselor created by Cover My Genetics. You are knowledgeable, empathetic, and professional. Your role is to:

1. Provide accurate, evidence-based information about genetics, heredity, and genetic testing
2. Help users understand genetic concepts, test results, and inheritance patterns
3. Explain complex genetic information in accessible language
4. Discuss genetic risks, probabilities, and their implications
5. Provide guidance on genetic testing options and their limitations
6. Address concerns about genetic conditions and family history
7. Analyze uploaded genetic reports, test results, and lab documents when provided

When users upload files (genetic reports, test results, lab documents):
- Carefully analyze the content and provide personalized insights
- Explain any genetic variants, risk factors, or findings in simple terms
- Highlight important information that may need follow-up with healthcare providers
- Provide context about what the results mean for the individual and their family
- Suggest relevant lifestyle modifications or preventive measures when appropriate

Important guidelines:
- Always emphasize that you provide educational information, not medical diagnosis or treatment
- Recommend consulting with healthcare providers or certified genetic counselors for medical decisions
- Be sensitive when discussing genetic risks and potential health implications
- Explain uncertainty and limitations in genetic testing and interpretation
- Use clear, non-technical language while maintaining scientific accuracy
- Show empathy and understanding for users' concerns and emotions
- Provide balanced information about both benefits and limitations of genetic testing
- When analyzing uploaded files, be thorough but acknowledge when professional interpretation is needed

You should NOT:
- Provide specific medical diagnoses
- Recommend specific medical treatments
- Make definitive predictions about health outcomes
- Replace professional genetic counseling services

Always maintain a supportive, professional tone while being informative and helpful.

When files are uploaded, acknowledge them and provide analysis based on their content.`

const result = await streamText({
      model: openai("gpt-4o"),
      system: systemPrompt,
      messages,
      maxTokens: 1500,
      temperature: 0.7,
      onFinish: async ({ usage }) => {
        try {
          const responseTokens = usage?.completionTokens ?? 0
          // Rough cost estimate for gpt-4o output tokens (~$10 / 1M tokens)
          const costCents = Math.ceil((responseTokens / 1_000_000) * 1000)
          await updateUserUsage(user.id, 1)
          await logUsage(user.id, lastUserMessage?.content ?? "", responseTokens, costCents)
        } catch (err) {
          console.error("[v0] Failed to record chat usage:", err)
        }
      },
    })

return result.toDataStreamResponse()
  } catch (error) {
    console.error("Chat API Error:", error)
    return new Response(
      JSON.stringify({
        error: "I'm having trouble processing your request right now. Please try again in a moment.",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      },
    )
  }
}
[V0_FILE]typescriptreact:file="components/genie-chat-interface.tsx" isMerged="true"
"use client"
import { useChat } from "ai/react"
import type React from "react"

import { useState, useEffect, useRef } from "react"
import useSWR from "swr"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Send, Bot, User, Loader2, Lock, AlertCircle, Sparkles, Upload, FileText, X, Paperclip } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import UsageTracker from "./usage-tracker"
import Link from "next/link"

interface UploadedFile {
  id: string
  name: string
  size: number
  type: string
  content?: string
}

interface UsageData {
  authenticated: boolean
  plan: "free" | "api" | "pro" | "family"
  questionsUsed: number
  questionsLimit: number
}

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function GenieChatInterface() {
  const { data: usage, mutate: mutateUsage } = useSWR<UsageData>("/api/user/usage", fetcher)

const isAuthenticated = usage?.authenticated ?? false
  const userUsage = {
    plan: usage?.plan ?? ("free" as const),
    questionsUsed: usage?.questionsUsed ?? 0,
    questionsLimit: usage?.questionsLimit ?? 5,
  }

const [isBlocked, setIsBlocked] = useState(false)
  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    api: "/api/chat",
    onFinish: () => {
      // Re-sync real usage from the server after each answer
      mutateUsage()
    },
    onError: (error) => {
      console.error("Chat error:", error)
    },
  })

useEffect(() => {
    setIsBlocked(
      !isAuthenticated || (userUsage.plan === "free" && userUsage.questionsUsed >= userUsage.questionsLimit),
    )
  }, [isAuthenticated, userUsage.plan, userUsage.questionsUsed, userUsage.questionsLimit])

const canUploadFiles = userUsage.plan !== "free"

const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (isBlocked) return

// Include file context in the message if files are uploaded
    let messageWithContext = input
    if (uploadedFiles.length > 0) {
      const fileContext = uploadedFiles
        .map((file) => `[File: ${file.name}]\n${file.content || "File uploaded but content not processed yet."}`)
        .join("\n\n")
      messageWithContext = `${input}\n\nUploaded files:\n${fileContext}`
    }

// For now, just submit the regular message
    // In the future, we'll include file data
    handleSubmit(e)
  }

const handleFileUpload = async (files: FileList) => {
    if (!canUploadFiles) {
      alert("File uploads are available with paid plans. Please upgrade to upload reports and test results.")
      return
    }

const newFiles: UploadedFile[] = []

for (let i = 0; i < files.length; i++) {
      const file = files[i]

// Check file size (limit to 10MB)
      if (file.size > 10 * 1024 * 1024) {
        alert(`File ${file.name} is too large. Maximum size is 10MB.`)
        continue
      }

// Check file type
      const allowedTypes = [
        "application/pdf",
        "text/plain",
        "text/csv",
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "image/jpeg",
        "image/png",
        "image/gif",
      ]

if (!allowedTypes.includes(file.type)) {
        alert(`File type ${file.type} is not supported. Please upload PDF, text, CSV, Excel, or image files.`)
        continue
      }

const fileId = Math.random().toString(36).substr(2, 9)

// Read file content for text files
      let content = ""
      if (file.type.startsWith("text/") || file.type === "text/csv") {
        try {
          content = await readFileContent(file)
        } catch (error) {
          console.error("Error reading file:", error)
          content = "Error reading file content"
        }
      }

newFiles.push({
        id: fileId,
        name: file.name,
        size: file.size,
        type: file.type,
        content,
      })
    }

setUploadedFiles((prev) => [...prev, ...newFiles])
  }

const readFileContent = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (e) => resolve(e.target?.result as string)
      reader.onerror = reject
      reader.readAsText(file)
    })
  }

const removeFile = (fileId: string) => {
    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId))
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)

if (e.dataTransfer.files) {
      handleFileUpload(e.dataTransfer.files)
    }
  }

const exampleQuestions = [
    "What genetic markers are associated with heart disease?",
    "How can I understand my BRCA1 test results?",
    "What lifestyle changes are recommended for my genetic profile?",
    "Can you explain what a VUS (Variant of Uncertain Significance) means?",
    "How heritable is diabetes in my family history?",
  ]

const handleExampleClick = (question: string) => {
    if (isBlocked) return
    handleInputChange({ target: { value: question } } as any)
  }

return (
    <div
      className="container mx-auto px-4 py-6 max-w-4xl h-full flex flex-col"
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      {isDragging && canUploadFiles && (
        <div className="fixed inset-0 bg-blue-500 bg-opacity-20 border-2 border-dashed border-blue-500 flex items-center justify-center z-50">
          <div className="bg-white p-8 rounded-lg shadow-lg text-center">
            <Upload className="h-12 w-12 text-blue-500 mx-auto mb-4" />
            <p className="text-lg font-semibold">Drop your files here</p>
            <p className="text-gray-600">Upload genetic reports, test results, or lab documents</p>
          </div>
        </div>
      )}

<div className="mb-6 text-center">
        <div className="flex items-center justify-center gap-3 mb-4">
          <Avatar className="h-12 w-12 border-2 border-emerald-200">
            <AvatarImage src="/genie-avatar.png" alt="Genie AI" />
            <AvatarFallback className="bg-emerald-100">
              <Bot className="h-6 w-6 text-emerald-600" />
            </AvatarFallback>
          </Avatar>
          <div>
            <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent">
              Ask Genie
            </h1>
            <Badge variant="secondary" className="bg-emerald-100 text-emerald-800">
              <Sparkles className="h-3 w-3 mr-1" />
              AI Genetic Counselor
            </Badge>
          </div>
        </div>
        <p className="text-gray-600">
          Your personal AI genetic counselor. Ask questions about genetics, health risks, or interpreting genetic data.
          {canUploadFiles && " Upload your reports and test results for personalized analysis."}
        </p>
      </div>

{/* Error Alert */}
      {error && (
        <Alert className="mb-6 border-red-200 bg-red-50">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription className="text-red-800">
            {error.message?.includes("API key") || error.message?.includes("configured")
              ? "The AI service is not configured. Please contact support."
              : "I'm having trouble responding right now. Please try again in a moment."}
          </AlertDescription>
        </Alert>
      )}

{/* Usage Tracker */}
      <div className="mb-6">
        <UsageTracker
          userPlan={userUsage.plan}
          questionsUsed={userUsage.questionsUsed}
          questionsLimit={userUsage.questionsLimit}
        />
      </div>

{/* File Upload Area - Only show for paid plans */}
      {canUploadFiles && (
        <Card className="mb-6 border-blue-100 bg-blue-50">
          <CardContent className="pt-6">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <FileText className="h-5 w-5 text-blue-600" />
                <span className="font-medium text-blue-800">Upload Reports & Test Results</span>
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => fileInputRef.current?.click()}
                className="border-blue-600 text-blue-600 hover:bg-blue-50"
              >
                <Upload className="h-4 w-4 mr-2" />
                Choose Files
              </Button>
            </div>

<input
              ref={fileInputRef}
              type="file"
              multiple
              accept=".pdf,.txt,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif"
              onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
              className="hidden"
            />

{uploadedFiles.length > 0 && (
              <div className="space-y-2">
                <p className="text-sm font-medium text-blue-800">Uploaded Files:</p>
                {uploadedFiles.map((file) => (
                  <div
                    key={file.id}
                    className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-200"
                  >
                    <div className="flex items-center gap-2">
                      <FileText className="h-4 w-4 text-blue-600" />
                      <span className="text-sm font-medium">{file.name}</span>
                      <span className="text-xs text-gray-500">({(file.size / 1024).toFixed(1)} KB)</span>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeFile(file.id)}
                      className="text-red-600 hover:text-red-800 hover:bg-red-50"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}

<p className="text-xs text-blue-600 mt-2">
              Drag & drop files here or click "Choose Files". Supports PDF, text, CSV, Excel, and image files (max 10MB
              each).
            </p>
          </CardContent>
        </Card>
      )}

{messages.length === 0 && (
        <Card className="mb-6 border-emerald-100 bg-gradient-to-br from-emerald-50 to-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Avatar className="h-8 w-8">
                <AvatarImage src="/genie-avatar.png" alt="Genie AI" />
                <AvatarFallback className="bg-emerald-100">
                  <Bot className="h-4 w-4 text-emerald-600" />
                </AvatarFallback>
              </Avatar>
              Welcome! I'm Genie, your AI genetic counselor
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-700 mb-4">
              I'm here to help you understand genetic information, interpret test results, and provide guidance on
              genetic health topics. You can ask me anything about genetics, heredity, or genetic testing.
              {canUploadFiles && " Feel free to upload your genetic reports or test results for personalized analysis!"}
            </p>
            <div className="space-y-2">
              <p className="font-medium text-sm text-emerald-800">Try asking me:</p>
              <div className="grid gap-2">
                {exampleQuestions.map((question, index) => (
                  <Button
                    key={index}
                    variant="outline"
                    size="sm"
                    className="justify-start text-left h-auto p-3 whitespace-normal border-emerald-200 hover:bg-emerald-50"
                    onClick={() => handleExampleClick(question)}
                    disabled={isBlocked}
                  >
                    {isBlocked && <Lock className="h-3 w-3 mr-2 flex-shrink-0" />}
                    {question}
                  </Button>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Sign-in Prompt for signed-out users */}
      {!isAuthenticated && (
        <Card className="mb-6 border-emerald-200 bg-gradient-to-br from-emerald-50 to-blue-50">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <div className="flex justify-center">
                <div className="p-3 bg-emerald-100 rounded-full">
                  <Lock className="h-6 w-6 text-emerald-600" />
                </div>
              </div>
              <div>
                <h3 className="font-semibold text-emerald-800 mb-2">Sign in to ask Genie</h3>
                <p className="text-emerald-700 text-sm mb-4">
                  Create a free account to start asking Genie your genetics questions. Free accounts include 5 questions
                  per month.
                </p>
                <div className="flex gap-2 justify-center">
                  <Link href="/login">
                    <Button className="bg-emerald-600 hover:bg-emerald-700">Sign In</Button>
                  </Link>
                  <Link href="/signup">
                    <Button variant="outline" className="border-emerald-200 hover:bg-emerald-50 bg-transparent">
                      Create Account
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Upgrade Prompt for Blocked Users */}
      {isAuthenticated && isBlocked && (
        <Card className="mb-6 border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <div className="flex justify-center">
                <div className="p-3 bg-amber-100 rounded-full">
                  <Lock className="h-6 w-6 text-amber-600" />
                </div>
              </div>
              <div>
                <h3 className="font-semibold text-amber-800 mb-2">Monthly Question Limit Reached</h3>
                <p className="text-amber-700 text-sm mb-4">
                  You've used all {userUsage.questionsLimit} free questions this month. Upgrade to continue asking
                  questions and unlock file uploads for your genetic reports.
                </p>
                <div className="flex gap-2 justify-center">
                  <Link href="/pricing">
                    <Button className="bg-emerald-600 hover:bg-emerald-700">View Plans</Button>
                  </Link>
                  <Link href="/api-setup">
                    <Button variant="outline" className="border-emerald-200 hover:bg-emerald-50">
                      Use Your API Key
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

<div className="flex-1 flex flex-col min-h-0">
        <ScrollArea className="flex-1 pr-4">
          <div className="space-y-4">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`flex gap-3 ${message.role === "user" ? "justify-end" : "justify-start"}`}
              >
                {message.role === "assistant" && (
                  <Avatar className="h-8 w-8 border border-emerald-200">
                    <AvatarImage src="/genie-avatar.png" alt="Genie AI" />
                    <AvatarFallback className="bg-emerald-100">
                      <Bot className="h-4 w-4 text-emerald-600" />
                    </AvatarFallback>
                  </Avatar>
                )}
                <div
                  className={`max-w-[80%] rounded-lg px-4 py-2 ${
                    message.role === "user"
                      ? "bg-emerald-600 text-white"
                      : "bg-gray-100 text-gray-900 border border-gray-200"
                  }`}
                >
                  <div className="whitespace-pre-wrap">{message.content}</div>
                </div>
                {message.role === "user" && (
                  <Avatar className="h-8 w-8 bg-gray-100 border border-gray-200">
                    <AvatarFallback>
                      <User className="h-4 w-4 text-gray-600" />
                    </AvatarFallback>
                  </Avatar>
                )}
              </div>
            ))}
            {isLoading && (
              <div className="flex gap-3 justify-start">
                <Avatar className="h-8 w-8 border border-emerald-200">
                  <AvatarImage src="/genie-avatar.png" alt="Genie AI" />
                  <AvatarFallback className="bg-emerald-100">
                    <Bot className="h-4 w-4 text-emerald-600" />
                  </AvatarFallback>
                </Avatar>
                <div className="bg-gray-100 rounded-lg px-4 py-2 border border-gray-200">
                  <div className="flex items-center gap-2">
                    <Loader2 className="h-4 w-4 animate-spin text-emerald-600" />
                    <span className="text-sm text-gray-600">Genie is analyzing your information...</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </ScrollArea>

<form onSubmit={handleFormSubmit} className="flex gap-2 mt-4">
          <div className="flex-1 relative">
            <Input
              value={input}
              onChange={handleInputChange}
              placeholder={isBlocked ? "Upgrade to continue asking questions..." : "Ask Genie about genetics..."}
              className="flex-1 border-emerald-200 focus:border-emerald-400 pr-10"
              disabled={isLoading || isBlocked}
            />
            {canUploadFiles && (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-emerald-600"
                onClick={() => fileInputRef.current?.click()}
                disabled={isLoading || isBlocked}
              >
                <Paperclip className="h-4 w-4" />
              </Button>
            )}
          </div>
          <Button
            type="submit"
            disabled={isLoading || !input.trim() || isBlocked}
            className="bg-emerald-600 hover:bg-emerald-700"
          >
            {isBlocked ? <Lock className="h-4 w-4" /> : <Send className="h-4 w-4" />}
          </Button>
        </form>
      </div>

<div className="mt-4 text-xs text-gray-500 text-center">
        <p>
          <strong>Disclaimer:</strong> Genie provides educational information and should not replace professional
          medical advice. Always consult with a healthcare provider or certified genetic counselor for medical
          decisions.
        </p>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/002-counselors-schema.sql" isMerged="true"
-- Create counselors table
CREATE TABLE counselors (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  first_name VARCHAR(100) NOT NULL,
  last_name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  phone VARCHAR(20),
  credentials VARCHAR(100) NOT NULL,
  license_number VARCHAR(100) NOT NULL,
  licensed_states TEXT[] NOT NULL,
  specialties TEXT[] NOT NULL,
  bio TEXT,
  years_experience INTEGER NOT NULL,
  consultation_fee_min INTEGER,
  consultation_fee_max INTEGER,
  languages TEXT[] DEFAULT ARRAY['English'],
  telehealth_available BOOLEAN DEFAULT true,
  location_city VARCHAR(100),
  location_state VARCHAR(2),
  rating DECIMAL(3,2) DEFAULT 0,
  review_count INTEGER DEFAULT 0,
  profile_image_url TEXT,
  availability_schedule JSONB,
  is_verified BOOLEAN DEFAULT false,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create counselor reviews table
CREATE TABLE counselor_reviews (
  id SERIAL PRIMARY KEY,
  counselor_id INTEGER REFERENCES counselors(id),
  patient_id INTEGER REFERENCES users(id),
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  review_text TEXT,
  consultation_date DATE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create consultation bookings table
CREATE TABLE consultation_bookings (
  id SERIAL PRIMARY KEY,
  counselor_id INTEGER REFERENCES counselors(id),
  patient_id INTEGER REFERENCES users(id),
  consultation_date TIMESTAMP NOT NULL,
  duration_minutes INTEGER DEFAULT 60,
  consultation_type VARCHAR(50) DEFAULT 'telehealth',
  status VARCHAR(50) DEFAULT 'scheduled',
  fee_amount INTEGER,
  lead_fee_charged BOOLEAN DEFAULT false,
  notes TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for better performance
CREATE INDEX idx_counselors_specialties ON counselors USING GIN(specialties);
CREATE INDEX idx_counselors_states ON counselors USING GIN(licensed_states);
CREATE INDEX idx_counselors_location ON counselors(location_state, location_city);
CREATE INDEX idx_counselors_active ON counselors(is_active, is_verified);
[V0_FILE]typescriptreact:file="app/api/counselors/apply/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { query } from "@/lib/database"

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

// Insert counselor application
    const result = await query(
      `
      INSERT INTO counselors (
        first_name, last_name, email, phone, credentials, license_number,
        licensed_states, specialties, bio, years_experience,
        consultation_fee_min, consultation_fee_max, languages,
        telehealth_available, location_city, location_state,
        is_verified, is_active
      ) VALUES (
        $1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, false, false
      ) RETURNING id
    `,
      [
        formData.firstName,
        formData.lastName,
        formData.email,
        formData.phone,
        formData.credentials,
        formData.licenseNumber,
        formData.licensedStates.split(",").map((s: string) => s.trim()),
        formData.specialties.split(",").map((s: string) => s.trim()),
        formData.bio,
        Number.parseInt(formData.experience),
        Number.parseInt(formData.consultationFeeMin),
        Number.parseInt(formData.consultationFeeMax),
        formData.languages || ["English"],
        formData.telehealth === "true",
        formData.city,
        formData.state,
      ],
    )

// TODO: Send verification email
    // TODO: Notify admin for manual review
    // TODO: Start background check process

return NextResponse.json({
      success: true,
      message: "Application submitted successfully. We will review and contact you within 3-5 business days.",
      counselorId: result.rows[0].id,
    })
  } catch (error) {
    console.error("Error submitting counselor application:", error)
    return NextResponse.json({ error: "Failed to submit application" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/counselors/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Mock data for counselors (until database is set up)
const mockCounselors = [
  {
    id: 1,
    first_name: "Sarah",
    last_name: "Chen",
    credentials: "MS, CGC",
    specialties: ["Cancer Genetics", "BRCA Testing", "Hereditary Cancer"],
    location_city: "Boston",
    location_state: "MA",
    rating: 4.9,
    review_count: 127,
    years_experience: 12,
    consultation_fee_min: 250,
    consultation_fee_max: 350,
    telehealth_available: true,
    languages: ["English", "Mandarin"],
    bio: "Specializing in hereditary cancer syndromes with over 12 years of experience helping families understand their genetic risks.",
    profile_image_url: null,
  },
  {
    id: 2,
    first_name: "Michael",
    last_name: "Rodriguez",
    credentials: "PhD, CGC",
    specialties: ["Cardiovascular Genetics", "Cardiomyopathy", "Arrhythmia"],
    location_city: "Los Angeles",
    location_state: "CA",
    rating: 4.8,
    review_count: 89,
    years_experience: 8,
    consultation_fee_min: 200,
    consultation_fee_max: 300,
    telehealth_available: true,
    languages: ["English", "Spanish"],
    bio: "Expert in cardiovascular genetics, helping patients understand inherited heart conditions and family screening.",
    profile_image_url: null,
  },
  {
    id: 3,
    first_name: "Emily",
    last_name: "Johnson",
    credentials: "MS, CGC, FACMG",
    specialties: ["Prenatal Genetics", "Reproductive Planning", "Carrier Screening"],
    location_city: "New York",
    location_state: "NY",
    rating: 4.9,
    review_count: 156,
    years_experience: 15,
    consultation_fee_min: 300,
    consultation_fee_max: 400,
    telehealth_available: true,
    languages: ["English"],
    bio: "Board-certified genetic counselor specializing in prenatal genetics and reproductive planning for families.",
    profile_image_url: null,
  },
  {
    id: 4,
    first_name: "David",
    last_name: "Kim",
    credentials: "MS, CGC",
    specialties: ["Neurogenetics", "Huntington's Disease", "Alzheimer's Risk"],
    location_city: "Seattle",
    location_state: "WA",
    rating: 4.7,
    review_count: 73,
    years_experience: 10,
    consultation_fee_min: 275,
    consultation_fee_max: 375,
    telehealth_available: true,
    languages: ["English", "Korean"],
    bio: "Specialized in neurogenetic conditions, providing compassionate counseling for neurodegenerative diseases.",
    profile_image_url: null,
  },
  {
    id: 5,
    first_name: "Lisa",
    last_name: "Thompson",
    credentials: "MS, CGC",
    specialties: ["Pediatric Genetics", "Rare Diseases", "Developmental Delays"],
    location_city: "Chicago",
    location_state: "IL",
    rating: 4.8,
    review_count: 94,
    years_experience: 9,
    consultation_fee_min: 225,
    consultation_fee_max: 325,
    telehealth_available: true,
    languages: ["English"],
    bio: "Pediatric genetic counselor helping families navigate rare genetic conditions and developmental concerns.",
    profile_image_url: null,
  },
  {
    id: 6,
    first_name: "James",
    last_name: "Wilson",
    credentials: "PhD, CGC, FACMG",
    specialties: ["Pharmacogenomics", "Drug Response", "Personalized Medicine"],
    location_city: "Houston",
    location_state: "TX",
    rating: 4.9,
    review_count: 112,
    years_experience: 14,
    consultation_fee_min: 350,
    consultation_fee_max: 450,
    telehealth_available: true,
    languages: ["English"],
    bio: "Expert in pharmacogenomics, helping patients optimize medication selection based on genetic profiles.",
    profile_image_url: null,
  },
]

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const search = searchParams.get("search") || ""
    const state = searchParams.get("state") || ""
    const specialty = searchParams.get("specialty") || ""
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "10")

let filteredCounselors = mockCounselors

// Apply search filter
    if (search) {
      const searchLower = search.toLowerCase()
      filteredCounselors = filteredCounselors.filter(
        (counselor) =>
          counselor.first_name.toLowerCase().includes(searchLower) ||
          counselor.last_name.toLowerCase().includes(searchLower) ||
          counselor.specialties.some((s) => s.toLowerCase().includes(searchLower)),
      )
    }

// Apply state filter
    if (state && state !== "All states") {
      filteredCounselors = filteredCounselors.filter((counselor) => counselor.location_state === state)
    }

// Apply specialty filter
    if (specialty && specialty !== "All specialties") {
      filteredCounselors = filteredCounselors.filter((counselor) => counselor.specialties.includes(specialty))
    }

// Apply pagination
    const startIndex = (page - 1) * limit
    const endIndex = startIndex + limit
    const paginatedCounselors = filteredCounselors.slice(startIndex, endIndex)

return NextResponse.json({
      counselors: paginatedCounselors,
      pagination: {
        page,
        limit,
        total: filteredCounselors.length,
        totalPages: Math.ceil(filteredCounselors.length / limit),
      },
    })
  } catch (error) {
    console.error("Error fetching counselors:", error)
    return NextResponse.json({ error: "Failed to fetch counselors" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/counselors/[id]/book/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const counselorId = params.id
    const body = await request.json()
    const { consultationDate, consultationType } = body

// Mock booking logic (replace with real implementation)
    console.log("Booking consultation:", {
      counselorId,
      consultationDate,
      consultationType,
    })

// In a real implementation, you would:
    // 1. Validate the counselor exists
    // 2. Check availability
    // 3. Process payment (lead fee to counselor)
    // 4. Send confirmation emails
    // 5. Create calendar events
    // 6. Store booking in database

// Simulate processing time
    await new Promise((resolve) => setTimeout(resolve, 1000))

return NextResponse.json({
      success: true,
      bookingId: `booking_${Date.now()}`,
      message: "Consultation booked successfully! You'll receive a confirmation email shortly.",
    })
  } catch (error) {
    console.error("Error booking consultation:", error)
    return NextResponse.json({ error: "Failed to book consultation" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/counselor-directory.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { MapPin, Star, Clock, Video, Phone, Calendar, Filter, Loader2, AlertCircle } from "lucide-react"

interface Counselor {
  id: number
  first_name: string
  last_name: string
  credentials: string
  specialties: string[]
  location_city: string
  location_state: string
  rating: number
  review_count: number
  years_experience: number
  consultation_fee_min: number
  consultation_fee_max: number
  telehealth_available: boolean
  languages: string[]
  bio: string
  profile_image_url?: string
}

export default function CounselorDirectory() {
  const [counselors, setCounselors] = useState<Counselor[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedState, setSelectedState] = useState("All states")
  const [selectedSpecialty, setSelectedSpecialty] = useState("All specialties")
  const [showFilters, setShowFilters] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)

const specialties = [
    "Cancer Genetics",
    "Prenatal Genetics",
    "Cardiovascular Genetics",
    "Neurogenetics",
    "Pediatric Genetics",
    "Pharmacogenomics",
    "Reproductive Planning",
    "Rare Diseases",
  ]

const states = [
    "AL",
    "AK",
    "AZ",
    "AR",
    "CA",
    "CO",
    "CT",
    "DE",
    "FL",
    "GA",
    "HI",
    "ID",
    "IL",
    "IN",
    "IA",
    "KS",
    "KY",
    "LA",
    "ME",
    "MD",
    "MA",
    "MI",
    "MN",
    "MS",
    "MO",
    "MT",
    "NE",
    "NV",
    "NH",
    "NJ",
    "NM",
    "NY",
    "NC",
    "ND",
    "OH",
    "OK",
    "OR",
    "PA",
    "RI",
    "SC",
    "SD",
    "TN",
    "TX",
    "UT",
    "VT",
    "VA",
    "WA",
    "WV",
    "WI",
    "WY",
  ]

const fetchCounselors = async () => {
    setLoading(true)
    setError(null)

try {
      const params = new URLSearchParams({
        page: currentPage.toString(),
        limit: "10",
      })

if (searchTerm) params.append("search", searchTerm)
      if (selectedState !== "All states") params.append("state", selectedState)
      if (selectedSpecialty !== "All specialties") params.append("specialty", selectedSpecialty)

const response = await fetch(`/api/counselors?${params}`)

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

const contentType = response.headers.get("content-type")
      if (!contentType || !contentType.includes("application/json")) {
        throw new Error("Response is not JSON")
      }

const data = await response.json()
      setCounselors(data.counselors || [])
    } catch (error) {
      console.error("Error fetching counselors:", error)
      setError("Failed to load counselors. Please try again later.")
      setCounselors([])
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchCounselors()
  }, [searchTerm, selectedState, selectedSpecialty, currentPage])

const handleBookConsultation = async (counselor: Counselor) => {
    try {
      const response = await fetch(`/api/counselors/${counselor.id}/book`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          consultationDate: new Date(Date.now() + 24 * 60 * 60 * 1000), // Tomorrow
          consultationType: "telehealth",
        }),
      })

const result = await response.json()

if (response.ok) {
        alert(
          `Consultation booked with ${counselor.first_name} ${counselor.last_name}! You'll receive a confirmation email shortly.`,
        )
      } else {
        alert(`Error: ${result.error}`)
      }
    } catch (error) {
      alert("Failed to book consultation. Please try again.")
    }
  }

if (error) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center gap-2 text-red-600">
            <AlertCircle className="h-5 w-5" />
            <p>{error}</p>
          </div>
          <Button onClick={fetchCounselors} className="mt-4" variant="outline">
            Try Again
          </Button>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-6">
      {/* Search and Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="space-y-4">
            <div className="flex gap-4">
              <Input
                placeholder="Search by name or specialty..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="flex-1"
              />
              <Button
                variant="outline"
                onClick={() => setShowFilters(!showFilters)}
                className="flex items-center gap-2"
              >
                <Filter className="h-4 w-4" />
                Filters
              </Button>
            </div>

{showFilters && (
              <div className="grid md:grid-cols-2 gap-4 pt-4 border-t">
                <Select value={selectedState} onValueChange={setSelectedState}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select state" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="All states">All states</SelectItem>
                    {states.map((state) => (
                      <SelectItem key={state} value={state}>
                        {state}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

<Select value={selectedSpecialty} onValueChange={setSelectedSpecialty}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select specialty" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="All specialties">All specialties</SelectItem>
                    {specialties.map((specialty) => (
                      <SelectItem key={specialty} value={specialty}>
                        {specialty}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

{/* Loading State */}
      {loading && (
        <div className="flex items-center justify-center py-8">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="ml-2">Loading counselors...</span>
        </div>
      )}

{/* Results */}
      {!loading && (
        <div className="grid gap-6">
          {counselors.map((counselor) => (
            <Card key={counselor.id} className="hover:shadow-lg transition-shadow">
              <CardContent className="pt-6">
                <div className="grid md:grid-cols-3 gap-6">
                  {/* Counselor Info */}
                  <div className="md:col-span-2 space-y-4">
                    <div className="flex items-start gap-4">
                      <Avatar className="h-16 w-16">
                        <AvatarImage
                          src={counselor.profile_image_url || "/placeholder.svg"}
                          alt={`${counselor.first_name} ${counselor.last_name}`}
                        />
                        <AvatarFallback className="bg-emerald-100 text-emerald-600 text-lg">
                          {counselor.first_name[0]}
                          {counselor.last_name[0]}
                        </AvatarFallback>
                      </Avatar>

<div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="text-xl font-semibold">
                            {counselor.first_name} {counselor.last_name}
                          </h3>
                          <Badge variant="outline">{counselor.credentials}</Badge>
                        </div>

<div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
                          <div className="flex items-center gap-1">
                            <MapPin className="h-4 w-4" />
                            {counselor.location_city}, {counselor.location_state}
                          </div>
                          <div className="flex items-center gap-1">
                            <Star className="h-4 w-4 text-yellow-500" />
                            {counselor.rating} ({counselor.review_count} reviews)
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-4 w-4" />
                            {counselor.years_experience} years experience
                          </div>
                        </div>

<p className="text-gray-700 text-sm mb-3">{counselor.bio}</p>

<div className="flex flex-wrap gap-2">
                          {counselor.specialties.map((specialty, index) => (
                            <Badge key={index} variant="secondary" className="text-xs">
                              {specialty}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>

{/* Booking Info */}
                  <div className="space-y-4">
                    <div className="bg-gray-50 p-4 rounded-lg space-y-3">
                      <div>
                        <div className="text-sm text-gray-600">Consultation Fee</div>
                        <div className="font-semibold">
                          ${counselor.consultation_fee_min}-{counselor.consultation_fee_max}
                        </div>
                      </div>

<div className="flex items-center gap-2 text-sm">
                        {counselor.telehealth_available && (
                          <Badge variant="outline" className="flex items-center gap-1">
                            <Video className="h-3 w-3" />
                            Telehealth
                          </Badge>
                        )}
                        <Badge variant="outline" className="flex items-center gap-1">
                          <Phone className="h-3 w-3" />
                          Phone
                        </Badge>
                      </div>

{counselor.languages.length > 1 && (
                        <div>
                          <div className="text-sm text-gray-600">Languages</div>
                          <div className="text-sm">{counselor.languages.join(", ")}</div>
                        </div>
                      )}
                    </div>

<Button
                      className="w-full bg-emerald-600 hover:bg-emerald-700"
                      onClick={() => handleBookConsultation(counselor)}
                    >
                      <Calendar className="h-4 w-4 mr-2" />
                      Book Consultation
                    </Button>

<Button variant="outline" className="w-full">
                      View Profile
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

{counselors.length === 0 && !loading && !error && (
        <Card>
          <CardContent className="pt-6 text-center">
            <p className="text-gray-600">No counselors found matching your criteria. Try adjusting your filters.</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/testing/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import TestingOptionsHero from "@/components/testing-options-hero"
import TestCategories from "@/components/test-categories"
import PartnerDisclosure from "@/components/partner-disclosure"
import TrustFooter from "@/components/trust-footer"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function TestingOptionsPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <TestingOptionsHero />
      <TestCategories />
      <PartnerDisclosure />

{/* Soft Conversion CTA */}
      <section className="py-16 bg-emerald-50">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">Not sure where to start?</h2>
          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
            Our guided intake process will help you find the right test for your situation.
          </p>
          <Link href="/testing/intake">
            <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white">
              Get Personalized Guidance
            </Button>
          </Link>
        </div>
      </section>

<TrustFooter />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/testing-options-hero.tsx" isMerged="true"
import { Microscope } from "lucide-react"

export default function TestingOptionsHero() {
  return (
    <section className="relative w-full py-16 md:py-24 bg-gradient-to-br from-emerald-50 via-white to-blue-50">
      <div className="container px-4 md:px-6">
        <div className="max-w-4xl mx-auto text-center space-y-6">
          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center">
              <Microscope className="h-8 w-8 text-white" />
            </div>
          </div>

<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-gray-900">
            Genetic Testing, Explained — With Trusted Options
          </h1>

<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            We don't run labs. We help you choose the right test from certified providers.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/test-categories.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Heart, Pill, Baby, Activity, Shield } from "lucide-react"
import Link from "next/link"

const testCategories = [
  {
    id: "cancer-risk",
    title: "Cancer Risk & Hereditary Screening",
    icon: Shield,
    whoFor: "Individuals with family history of cancer or seeking preventive insights",
    questions: [
      "Do I carry hereditary cancer risk genes like BRCA1/BRCA2?",
      "What's my risk for breast, ovarian, or colon cancer?",
      "Should my family members get tested too?",
    ],
  },
  {
    id: "pharmacogenomics",
    title: "Pharmacogenomics (Medication Response)",
    icon: Pill,
    whoFor: "Anyone taking medications or planning treatment",
    questions: [
      "Will this medication work effectively for me?",
      "Am I at risk for adverse drug reactions?",
      "What's the right dosage based on my genetics?",
    ],
  },
  {
    id: "fertility",
    title: "Fertility & Family Planning",
    icon: Baby,
    whoFor: "Couples planning pregnancy or exploring fertility options",
    questions: [
      "Are we carriers for genetic conditions?",
      "What's our risk of passing on inherited disorders?",
      "Should we consider preconception counseling?",
    ],
  },
  {
    id: "cardiovascular",
    title: "Cardiovascular & Metabolic Risk",
    icon: Heart,
    whoFor: "People concerned about heart disease, diabetes, or metabolic conditions",
    questions: [
      "Am I genetically predisposed to heart disease?",
      "What's my risk for high cholesterol or diabetes?",
      "How can I optimize my diet and lifestyle?",
    ],
  },
  {
    id: "wellness",
    title: "Preventative & Wellness Genetics",
    icon: Activity,
    whoFor: "Health-conscious individuals seeking personalized wellness insights",
    questions: [
      "How do my genes affect nutrition and fitness?",
      "What lifestyle changes could benefit me most?",
      "Am I at risk for common health conditions?",
    ],
  },
]

export default function TestCategories() {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">Choose Your Testing Category</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Select the category that best matches your health questions and goals.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
          {testCategories.map((category) => {
            const Icon = category.icon
            return (
              <Card key={category.id} className="border-gray-200 hover:border-emerald-300 transition-colors">
                <CardHeader>
                  <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4">
                    <Icon className="h-6 w-6 text-emerald-600" />
                  </div>
                  <CardTitle className="text-xl mb-2">{category.title}</CardTitle>
                  <CardDescription className="text-sm">
                    <span className="font-semibold text-gray-700">Who this is for:</span> {category.whoFor}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <p className="text-sm font-semibold text-gray-700 mb-2">Questions this helps answer:</p>
                    <ul className="space-y-2">
                      {category.questions.map((question, idx) => (
                        <li key={idx} className="text-sm text-gray-600 flex items-start">
                          <span className="text-emerald-600 mr-2">•</span>
                          <span>{question}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Link href={`/testing/${category.id}`}>
                    <Button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white">
                      Explore Testing Options
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/partner-disclosure.tsx" isMerged="true"
import { AlertCircle } from "lucide-react"

export default function PartnerDisclosure() {
  return (
    <section className="py-12 bg-blue-50">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-start gap-4 p-6 bg-white rounded-lg border border-blue-200">
            <AlertCircle className="h-6 w-6 text-blue-600 mt-1 flex-shrink-0" />
            <div className="space-y-2">
              <h3 className="font-semibold text-gray-900 text-lg">Partner Disclosure</h3>
              <p className="text-gray-600 leading-relaxed">
                Cover My Genetics partners with CLIA-certified laboratories and may receive a referral fee when you
                choose to pursue testing through our recommended providers. Our partnerships allow us to offer you
                educational resources and streamlined access to quality genetic testing.
              </p>
              <p className="text-gray-600 leading-relaxed">
                We maintain our independence and education-first approach. Our recommendations are based on quality,
                certification standards, and your specific needs — not commission rates.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/trust-footer.tsx" isMerged="true"
import { Shield, Award, Lock } from "lucide-react"

export default function TrustFooter() {
  return (
    <section className="py-12 bg-gray-50 border-t border-gray-200">
      <div className="container mx-auto px-4">
        <div className="max-w-5xl mx-auto space-y-8">
          <div className="grid md:grid-cols-3 gap-6">
            <div className="flex items-start gap-3">
              <Shield className="h-5 w-5 text-emerald-600 mt-1 flex-shrink-0" />
              <div>
                <h4 className="font-semibold text-gray-900 mb-1">No Medical Advice</h4>
                <p className="text-sm text-gray-600">
                  Cover My Genetics does not provide medical advice, diagnosis, or treatment recommendations.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Award className="h-5 w-5 text-emerald-600 mt-1 flex-shrink-0" />
              <div>
                <h4 className="font-semibold text-gray-900 mb-1">CLIA-Certified Partners</h4>
                <p className="text-sm text-gray-600">
                  All testing is performed by CLIA-certified partner laboratories that meet federal quality standards.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Lock className="h-5 w-5 text-emerald-600 mt-1 flex-shrink-0" />
              <div>
                <h4 className="font-semibold text-gray-900 mb-1">Education-Focused</h4>
                <p className="text-sm text-gray-600">
                  We focus on education, access, and informed decision-making to empower your health journey.
                </p>
              </div>
            </div>
          </div>

<div className="text-center pt-6 border-t border-gray-200">
            <p className="text-sm text-gray-600 max-w-3xl mx-auto leading-relaxed">
              This platform serves as an educational and routing resource. We do not collect medical records, interpret
              test results, or provide clinical services. Always consult with qualified healthcare professionals for
              medical decisions.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/testing/intake/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import TrustFooter from "@/components/trust-footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { ChevronRight, ChevronLeft } from "lucide-react"

export default function IntakePage() {
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    reason: "",
    recipient: "",
    preference: "",
  })

const handleNext = () => {
    if (step < 3) setStep(step + 1)
  }

const handleBack = () => {
    if (step > 1) setStep(step - 1)
  }

const handleSubmit = () => {
    // Route based on selections
    if (formData.preference === "view-options") {
      window.location.href = "/testing"
    } else if (formData.preference === "guidance") {
      window.location.href = "/ask-genie"
    } else if (formData.preference === "specialist") {
      window.location.href = "/counselors"
    }
  }

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />

<section className="flex-1 py-16 bg-gradient-to-br from-emerald-50 via-white to-blue-50">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto">
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold text-gray-900 mb-2">Find Your Path</h1>
              <p className="text-gray-600">We'll help you discover the right genetic testing option.</p>
            </div>

{/* Progress Indicator */}
            <div className="flex items-center justify-center mb-8">
              <div className="flex items-center gap-2">
                {[1, 2, 3].map((num) => (
                  <div key={num} className="flex items-center">
                    <div
                      className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
                        step >= num ? "bg-emerald-600 text-white" : "bg-gray-200 text-gray-600"
                      }`}
                    >
                      {num}
                    </div>
                    {num < 3 && <div className={`w-12 h-1 ${step > num ? "bg-emerald-600" : "bg-gray-200"}`} />}
                  </div>
                ))}
              </div>
            </div>

<Card>
              <CardHeader>
                <CardTitle>
                  {step === 1 && "What brings you here?"}
                  {step === 2 && "Who is this for?"}
                  {step === 3 && "How would you like to proceed?"}
                </CardTitle>
                <CardDescription>
                  {step === 1 && "Select the option that best describes your situation"}
                  {step === 2 && "Help us understand who will benefit from this information"}
                  {step === 3 && "Choose the path that works best for you"}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {step === 1 && (
                  <RadioGroup
                    value={formData.reason}
                    onValueChange={(val) => setFormData({ ...formData, reason: val })}
                  >
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="personal-health" id="personal-health" />
                      <Label htmlFor="personal-health" className="cursor-pointer flex-1">
                        Personal health curiosity
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="family-history" id="family-history" />
                      <Label htmlFor="family-history" className="cursor-pointer flex-1">
                        Family history concerns
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="pregnancy-planning" id="pregnancy-planning" />
                      <Label htmlFor="pregnancy-planning" className="cursor-pointer flex-1">
                        Planning pregnancy
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="medication" id="medication" />
                      <Label htmlFor="medication" className="cursor-pointer flex-1">
                        Medication questions
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="employer" id="employer" />
                      <Label htmlFor="employer" className="cursor-pointer flex-1">
                        Employer or provider inquiry
                      </Label>
                    </div>
                  </RadioGroup>
                )}

{step === 2 && (
                  <RadioGroup
                    value={formData.recipient}
                    onValueChange={(val) => setFormData({ ...formData, recipient: val })}
                  >
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="myself" id="myself" />
                      <Label htmlFor="myself" className="cursor-pointer flex-1">
                        Myself
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="family-member" id="family-member" />
                      <Label htmlFor="family-member" className="cursor-pointer flex-1">
                        A family member
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="patients-employees" id="patients-employees" />
                      <Label htmlFor="patients-employees" className="cursor-pointer flex-1">
                        Patients / employees
                      </Label>
                    </div>
                  </RadioGroup>
                )}

{step === 3 && (
                  <RadioGroup
                    value={formData.preference}
                    onValueChange={(val) => setFormData({ ...formData, preference: val })}
                  >
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="view-options" id="view-options" />
                      <Label htmlFor="view-options" className="cursor-pointer flex-1">
                        View testing options
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="guidance" id="guidance" />
                      <Label htmlFor="guidance" className="cursor-pointer flex-1">
                        Get personalized guidance from Genie
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2 p-4 border rounded-lg hover:border-emerald-300 cursor-pointer">
                      <RadioGroupItem value="specialist" id="specialist" />
                      <Label htmlFor="specialist" className="cursor-pointer flex-1">
                        Talk to a specialist partner
                      </Label>
                    </div>
                  </RadioGroup>
                )}

<div className="flex justify-between pt-4">
                  <Button
                    variant="outline"
                    onClick={handleBack}
                    disabled={step === 1}
                    className="border-gray-300 bg-transparent"
                  >
                    <ChevronLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                  {step < 3 ? (
                    <Button
                      onClick={handleNext}
                      disabled={(step === 1 && !formData.reason) || (step === 2 && !formData.recipient)}
                      className="bg-emerald-600 hover:bg-emerald-700 text-white"
                    >
                      Next
                      <ChevronRight className="h-4 w-4 ml-2" />
                    </Button>
                  ) : (
                    <Button
                      onClick={handleSubmit}
                      disabled={!formData.preference}
                      className="bg-emerald-600 hover:bg-emerald-700 text-white"
                    >
                      Get Started
                      <ChevronRight className="h-4 w-4 ml-2" />
                    </Button>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<TrustFooter />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/employers/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import TrustFooter from "@/components/trust-footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Building2, Users, HeartPulse, TrendingUp, CheckCircle2 } from "lucide-react"
import Link from "next/link"

export default function EmployersPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />

{/* Hero Section */}
      <section className="relative w-full py-16 md:py-24 bg-gradient-to-br from-blue-50 via-white to-emerald-50">
        <div className="container px-4 md:px-6">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <div className="flex justify-center mb-6">
              <div className="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center">
                <Building2 className="h-8 w-8 text-white" />
              </div>
            </div>

<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-gray-900">
              Genetic Insights as a Modern Health Benefit
            </h1>

<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Empower your workforce with personalized genetic insights — not as a medical service, but as a
              forward-thinking wellness benefit.
            </p>
          </div>
        </div>
      </section>

{/* Use Cases Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">How Organizations Use Genetic Benefits</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              From preventative care to medication optimization, genetics is becoming a cornerstone of modern wellness
              programs.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
            <Card className="border-gray-200">
              <CardHeader>
                <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4">
                  <HeartPulse className="h-6 w-6 text-emerald-600" />
                </div>
                <CardTitle>Preventative Care Programs</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Help employees understand hereditary health risks before they become issues. Early awareness leads to
                  proactive screening and healthier outcomes.
                </p>
              </CardContent>
            </Card>

<Card className="border-gray-200">
              <CardHeader>
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <Users className="h-6 w-6 text-blue-600" />
                </div>
                <CardTitle>Medication Optimization</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Pharmacogenomic insights reduce trial-and-error prescribing, improve treatment outcomes, and lower
                  healthcare costs through personalized medication plans.
                </p>
              </CardContent>
            </Card>

<Card className="border-gray-200">
              <CardHeader>
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <HeartPulse className="h-6 w-6 text-purple-600" />
                </div>
                <CardTitle>Family Planning Support</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Offer carrier screening and fertility insights as part of comprehensive family benefits. Support
                  employees through major life decisions with expert guidance.
                </p>
              </CardContent>
            </Card>

<Card className="border-gray-200">
              <CardHeader>
                <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4">
                  <TrendingUp className="h-6 w-6 text-emerald-600" />
                </div>
                <CardTitle>Mental Health & Wellness Alignment</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Integrate genetic insights with mental health programs to personalize stress management, nutrition,
                  and lifestyle recommendations based on individual biology.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* What We Provide Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">What Cover My Genetics Provides</h2>
              <p className="text-gray-600">We handle the complexity so you can focus on employee wellness.</p>
            </div>

<div className="space-y-4">
              <div className="flex items-start gap-4 p-6 bg-white rounded-lg border border-gray-200">
                <CheckCircle2 className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-2">Education & Onboarding</h3>
                  <p className="text-gray-600">
                    Clear, accessible educational materials and onboarding support to help employees understand genetic
                    testing benefits without overwhelming technical details.
                  </p>
                </div>
              </div>

<div className="flex items-start gap-4 p-6 bg-white rounded-lg border border-gray-200">
                <CheckCircle2 className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-2">Testing Partner Coordination</h3>
                  <p className="text-gray-600">
                    We connect your employees with CLIA-certified lab partners, streamline the testing process, and
                    ensure quality standards are met.
                  </p>
                </div>
              </div>

<div className="flex items-start gap-4 p-6 bg-white rounded-lg border border-gray-200">
                <CheckCircle2 className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-2">Optional White-Label Experience</h3>
                  <p className="text-gray-600">
                    Seamlessly integrate genetic benefits into your existing wellness platform with custom branding and
                    a unified employee experience.
                  </p>
                </div>
              </div>

<div className="flex items-start gap-4 p-6 bg-white rounded-lg border border-gray-200">
                <CheckCircle2 className="h-6 w-6 text-emerald-600 mt-1 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 mb-2">Ongoing Support Resources</h3>
                  <p className="text-gray-600">
                    Access to Genie (our AI genetic counselor), educational content library, and connections to
                    certified genetic counselors for complex questions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 bg-gradient-to-br from-emerald-50 to-blue-50">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-3xl mx-auto space-y-6">
            <h2 className="text-3xl font-bold text-gray-900">Ready to Explore a Genetics Program?</h2>
            <p className="text-gray-600 text-lg">
              Join forward-thinking organizations offering genetic insights as a modern health benefit.
            </p>
            <Link href="/contact-us?inquiry=employer">
              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white">
                Schedule a Consultation
              </Button>
            </Link>
          </div>
        </div>
      </section>

<TrustFooter />
      <Footer />
    </main>
  )
}
[V0_FILE]typescript:file="lib/database.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function query(text: string, params: any[] = []) {
  // Parameterized query wrapper around the neon serverless driver.
  const rows = await sql.query(text, params)
  return { rows, rowCount: rows.length }
}

export async function getUserByIdWithUsage(id: string): Promise<User | null> {
  const [user] = await sql`
    SELECT * FROM users WHERE id = ${id}
  `
  return (user as User) || null
}

export interface User {
  id: string
  email: string
  password_hash: string
  first_name: string
  last_name: string
  plan: "free" | "api" | "pro" | "family"
  questions_used: number
  questions_limit: number
  api_key_encrypted?: string
  stripe_customer_id?: string
  subscription_id?: string
  subscription_status?: string
  created_at: Date
  updated_at: Date
}

export async function createUser(userData: {
  email: string
  passwordHash: string
  firstName: string
  lastName: string
}): Promise<User> {
  const [user] = await sql`
    INSERT INTO users (email, password_hash, first_name, last_name)
    VALUES (${userData.email}, ${userData.passwordHash}, ${userData.firstName}, ${userData.lastName})
    RETURNING *
  `
  return user as User
}

export async function getUserByEmail(email: string): Promise<User | null> {
  const [user] = await sql`
    SELECT * FROM users WHERE email = ${email}
  `
  return (user as User) || null
}

export async function getUserById(id: string): Promise<User | null> {
  const [user] = await sql`
    SELECT * FROM users WHERE id = ${id}
  `
  return (user as User) || null
}

export async function updateUserUsage(userId: string, increment = 1): Promise<void> {
  await sql`
    UPDATE users 
    SET questions_used = questions_used + ${increment}, updated_at = NOW()
    WHERE id = ${userId}
  `
}

export async function updateUserPlan(userId: string, plan: string, questionsLimit: number): Promise<void> {
  await sql`
    UPDATE users 
    SET plan = ${plan}, questions_limit = ${questionsLimit}, questions_used = 0, updated_at = NOW()
    WHERE id = ${userId}
  `
}

export async function logUsage(
  userId: string,
  questionText: string,
  responseTokens: number,
  costCents: number,
): Promise<void> {
  await sql`
    INSERT INTO usage_logs (user_id, question_text, response_tokens, cost_cents)
    VALUES (${userId}, ${questionText}, ${responseTokens}, ${costCents})
  `
}

export async function setUserSubscription(
  userId: string,
  data: {
    stripeCustomerId?: string
    subscriptionId?: string
    subscriptionStatus?: string
  },
): Promise<void> {
  await sql`
    UPDATE users
    SET stripe_customer_id = COALESCE(${data.stripeCustomerId ?? null}, stripe_customer_id),
        subscription_id = COALESCE(${data.subscriptionId ?? null}, subscription_id),
        subscription_status = COALESCE(${data.subscriptionStatus ?? null}, subscription_status),
        updated_at = NOW()
    WHERE id = ${userId}
  `
}

export async function getUserByStripeCustomerId(customerId: string): Promise<User | null> {
  const [user] = await sql`
    SELECT * FROM users WHERE stripe_customer_id = ${customerId}
  `
  return (user as User) || null
}

export async function resetMonthlyUsage(): Promise<void> {
  await sql`
    UPDATE users 
    SET questions_used = 0, updated_at = NOW()
    WHERE plan = 'free'
  `
}
[V0_FILE]typescript:file="app/api/labs/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const search = searchParams.get("search")
    const specialty = searchParams.get("specialty")
    const state = searchParams.get("state")
    const status = searchParams.get("status")

const conditions: string[] = []
    const params: unknown[] = []

if (search) {
      params.push(`%${search}%`)
      const idx = params.length
      conditions.push(`(name ILIKE $${idx} OR parent_company ILIKE $${idx})`)
    }

if (specialty) {
      params.push(specialty)
      conditions.push(`$${params.length} = ANY(specialties)`)
    }

if (state) {
      params.push(state)
      conditions.push(`state = $${params.length}`)
    }

if (status) {
      params.push(status)
      conditions.push(`partnership_status = $${params.length}`)
    }

const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : ""
    const queryText = `SELECT * FROM labs ${whereClause} ORDER BY name ASC`

const labs = await sql.query(queryText, params)

return NextResponse.json({ labs, total: labs.length })
  } catch (error) {
    console.error("[v0] Error fetching labs:", error)
    return NextResponse.json({ error: "Failed to fetch labs" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/labs/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    const rows = await sql`SELECT * FROM labs WHERE id = ${Number(id)}`

if (rows.length === 0) {
      return NextResponse.json({ error: "Lab not found" }, { status: 404 })
    }

return NextResponse.json({ success: true, lab: rows[0] })
  } catch (error) {
    console.error("[v0] Error fetching lab details:", error)
    return NextResponse.json({ error: "Failed to fetch lab details" }, { status: 500 })
  }
}

export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    const body = await request.json()

// Only allow updating known business/partnership fields
    const allowedFields = [
      "partnership_status",
      "referral_program",
      "referral_fee_percentage",
      "referral_notes",
      "contact_person",
      "last_contact_date",
      "phone_main",
      "phone_client_services",
      "phone_billing",
      "email_main",
      "email_client_services",
      "email_billing",
      "website",
    ]

const sets: string[] = []
    const values: unknown[] = []

for (const key of allowedFields) {
      if (key in body) {
        values.push(body[key])
        sets.push(`${key} = $${values.length}`)
      }
    }

if (sets.length === 0) {
      return NextResponse.json({ error: "No valid fields to update" }, { status: 400 })
    }

values.push(Number(id))
    const queryText = `UPDATE labs SET ${sets.join(", ")}, updated_at = NOW() WHERE id = $${values.length} RETURNING *`

const rows = await sql.query(queryText, values)

if (rows.length === 0) {
      return NextResponse.json({ error: "Lab not found" }, { status: 404 })
    }

return NextResponse.json({ success: true, message: "Lab updated successfully", lab: rows[0] })
  } catch (error) {
    console.error("[v0] Error updating lab:", error)
    return NextResponse.json({ error: "Failed to update lab" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/admin/labs/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, Phone, Mail, Globe, Building2, MapPin, Edit, Plus } from "lucide-react"

interface Lab {
  id: number
  name: string
  parent_company: string
  city: string
  state: string
  phone_main: string
  email_main: string
  website: string
  specialties: string[]
  partnership_status: string
  referral_program: boolean
}

export default function AdminLabsPage() {
  const [labs, setLabs] = useState<Lab[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")

useEffect(() => {
    fetchLabs()
  }, [search, statusFilter])

const fetchLabs = async () => {
    try {
      const params = new URLSearchParams()
      if (search) params.append("search", search)
      if (statusFilter !== "all") params.append("status", statusFilter)

const response = await fetch(`/api/labs?${params}`)
      const data = await response.json()
      setLabs(data.labs || [])
    } catch (error) {
      console.error("Error fetching labs:", error)
    } finally {
      setLoading(false)
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "negotiating":
        return "bg-blue-100 text-blue-800"
      case "prospective":
        return "bg-gray-100 text-gray-800"
      case "inactive":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Lab Directory Management</h1>
            <p className="text-gray-600 mt-2">Manage genetic testing laboratories and partnerships</p>
          </div>
          <Button className="bg-emerald-600 hover:bg-emerald-700">
            <Plus className="w-4 h-4 mr-2" />
            Add New Lab
          </Button>
        </div>

{/* Filters */}
        <Card className="mb-6">
          <CardContent className="pt-6">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search labs by name or company..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="pl-10"
                />
              </div>
              <div className="flex gap-2">
                {["all", "prospective", "negotiating", "active", "inactive"].map((status) => (
                  <Button
                    key={status}
                    variant={statusFilter === status ? "default" : "outline"}
                    onClick={() => setStatusFilter(status)}
                    className="capitalize"
                  >
                    {status}
                  </Button>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

{/* Stats */}
        <div className="grid md:grid-cols-4 gap-6 mb-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">{labs.length}</CardTitle>
              <CardDescription>Total Labs</CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">{labs.filter((l) => l.partnership_status === "active").length}</CardTitle>
              <CardDescription>Active Partners</CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">
                {labs.filter((l) => l.partnership_status === "negotiating").length}
              </CardTitle>
              <CardDescription>In Negotiation</CardDescription>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">
                {labs.filter((l) => l.partnership_status === "prospective").length}
              </CardTitle>
              <CardDescription>Prospective</CardDescription>
            </CardHeader>
          </Card>
        </div>

{/* Labs List */}
        {loading ? (
          <div className="text-center py-12">Loading labs...</div>
        ) : (
          <div className="grid gap-6">
            {labs.map((lab) => (
              <Card key={lab.id} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <CardTitle className="text-xl">{lab.name}</CardTitle>
                        <Badge className={getStatusColor(lab.partnership_status)}>{lab.partnership_status}</Badge>
                        {lab.referral_program && (
                          <Badge className="bg-purple-100 text-purple-800">Referral Program</Badge>
                        )}
                      </div>
                      {lab.parent_company && (
                        <div className="flex items-center gap-2 text-gray-600 mb-3">
                          <Building2 className="w-4 h-4" />
                          <span className="text-sm">{lab.parent_company}</span>
                        </div>
                      )}
                    </div>
                    <Button variant="outline" size="sm">
                      <Edit className="w-4 h-4 mr-2" />
                      Edit
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 gap-4 mb-4">
                    <div className="space-y-2">
                      <div className="flex items-center gap-2 text-sm">
                        <MapPin className="w-4 h-4 text-gray-400" />
                        <span>
                          {lab.city}, {lab.state}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Phone className="w-4 h-4 text-gray-400" />
                        <a href={`tel:${lab.phone_main}`} className="text-emerald-600 hover:underline">
                          {lab.phone_main}
                        </a>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Mail className="w-4 h-4 text-gray-400" />
                        <a href={`mailto:${lab.email_main}`} className="text-emerald-600 hover:underline">
                          {lab.email_main}
                        </a>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Globe className="w-4 h-4 text-gray-400" />
                        <a
                          href={lab.website}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-emerald-600 hover:underline"
                        >
                          Visit Website
                        </a>
                      </div>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-gray-700 mb-2">Specialties:</p>
                      <div className="flex flex-wrap gap-2">
                        {lab.specialties.slice(0, 4).map((specialty, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {specialty}
                          </Badge>
                        ))}
                        {lab.specialties.length > 4 && (
                          <Badge variant="outline" className="text-xs">
                            +{lab.specialties.length - 4} more
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2 pt-4 border-t">
                    <Button variant="outline" size="sm">
                      View Details
                    </Button>
                    <Button variant="outline" size="sm">
                      Contact Log
                    </Button>
                    <Button variant="outline" size="sm">
                      Update Status
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/labs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/labs/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, Phone, Mail, Globe, MapPin, CheckCircle } from "lucide-react"

interface Lab {
  id: number
  name: string
  parent_company: string
  city: string
  state: string
  phone_main: string
  phone_client_services: string
  email_main: string
  website: string
  specialties: string[]
  test_types: string[]
  clia_number: string | null
}

export default function LabsPage() {
  const [labs, setLabs] = useState<Lab[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState("")
  const [selectedSpecialty, setSelectedSpecialty] = useState("")

useEffect(() => {
    fetchLabs()
  }, [search, selectedSpecialty])

const fetchLabs = async () => {
    try {
      const params = new URLSearchParams()
      if (search) params.append("search", search)
      if (selectedSpecialty) params.append("specialty", selectedSpecialty)

const allSpecialties = Array.from(new Set(labs.flatMap((lab) => lab.specialties))).sort()

return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />

<main className="flex-1">
        {/* Hero Section */}
        <section className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white py-16">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Find a CLIA-Certified Genetic Testing Laboratory</h1>
            <p className="text-xl text-emerald-50 max-w-3xl">
              Connect with trusted, accredited genetic testing labs across the United States. All labs are
              CLIA-certified and specialize in various genetic testing services.
            </p>
          </div>
        </section>

{/* Search and Filter */}
        <section className="container mx-auto px-4 py-8">
          <Card className="mb-8">
            <CardContent className="pt-6">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
                  <Input
                    placeholder="Search by lab name or location..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    className="pl-10 h-12"
                  />
                </div>
                <select
                  value={selectedSpecialty}
                  onChange={(e) => setSelectedSpecialty(e.target.value)}
                  className="h-12 px-4 rounded-md border border-gray-300 bg-white"
                >
                  <option value="">All Specialties</option>
                  {allSpecialties.map((specialty) => (
                    <option key={specialty} value={specialty}>
                      {specialty}
                    </option>
                  ))}
                </select>
              </div>
            </CardContent>
          </Card>

{/* Results Count */}
          <div className="mb-6">
            <p className="text-gray-600">
              Found <span className="font-semibold text-gray-900">{labs.length}</span> laboratories
              {selectedSpecialty && <span> specializing in {selectedSpecialty}</span>}
            </p>
          </div>

{/* Labs Grid */}
          {loading ? (
            <div className="text-center py-12">
              <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600"></div>
              <p className="mt-4 text-gray-600">Loading laboratories...</p>
            </div>
          ) : labs.length === 0 ? (
            <Card>
              <CardContent className="py-12 text-center">
                <p className="text-gray-600">No laboratories found matching your criteria.</p>
                <Button
                  variant="outline"
                  onClick={() => {
                    setSearch("")
                    setSelectedSpecialty("")
                  }}
                  className="mt-4"
                >
                  Clear Filters
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="grid md:grid-cols-2 gap-6">
              {labs.map((lab) => (
                <Card key={lab.id} className="hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex-1">
                        <CardTitle className="text-xl mb-1">{lab.name}</CardTitle>
                        {lab.parent_company && (
                          <CardDescription className="text-sm">{lab.parent_company}</CardDescription>
                        )}
                      </div>
                      {lab.clia_number && (
                        <Badge className="bg-green-100 text-green-800">
                          <CheckCircle className="w-3 h-3 mr-1" />
                          CLIA Certified
                        </Badge>
                      )}
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3 mb-4">
                      <div className="flex items-center gap-2 text-sm">
                        <MapPin className="w-4 h-4 text-gray-400 flex-shrink-0" />
                        <span className="text-gray-700">
                          {lab.city}, {lab.state}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Phone className="w-4 h-4 text-gray-400 flex-shrink-0" />
                        <a href={`tel:${lab.phone_client_services}`} className="text-emerald-600 hover:underline">
                          {lab.phone_client_services}
                        </a>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        <Mail className="w-4 h-4 text-gray-400 flex-shrink-0" />
                        <a href={`mailto:${lab.email_main}`} className="text-emerald-600 hover:underline break-all">
                          {lab.email_main}
                        </a>
                      </div>
                      <div className="flex items-start gap-2 text-sm">
                        <Globe className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
                        <a
                          href={lab.website}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-emerald-600 hover:underline break-all"
                        >
                          Visit Website
                        </a>
                      </div>
                    </div>

<div className="mb-4">
                      <p className="text-sm font-medium text-gray-700 mb-2">Specialties:</p>
                      <div className="flex flex-wrap gap-2">
                        {lab.specialties.slice(0, 3).map((specialty, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {specialty}
                          </Badge>
                        ))}
                        {lab.specialties.length > 3 && (
                          <Badge variant="outline" className="text-xs">
                            +{lab.specialties.length - 3} more
                          </Badge>
                        )}
                      </div>
                    </div>

<Button className="w-full bg-emerald-600 hover:bg-emerald-700">Contact Laboratory</Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </section>

{/* Info Section */}
        <section className="bg-white py-12">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl font-bold mb-4">Why Choose CLIA-Certified Labs?</h2>
              <p className="text-gray-600 mb-6">
                CLIA (Clinical Laboratory Improvement Amendments) certification ensures that laboratories meet federal
                standards for quality, accuracy, and reliability in genetic testing. All labs listed here are accredited
                and trusted by healthcare providers nationwide.
              </p>
              <div className="grid md:grid-cols-3 gap-6">
                <div>
                  <CheckCircle className="w-8 h-8 text-emerald-600 mx-auto mb-2" />
                  <h3 className="font-semibold mb-1">Quality Assured</h3>
                  <p className="text-sm text-gray-600">Rigorous quality control standards</p>
                </div>
                <div>
                  <CheckCircle className="w-8 h-8 text-emerald-600 mx-auto mb-2" />
                  <h3 className="font-semibold mb-1">Accredited</h3>
                  <p className="text-sm text-gray-600">Federal certification and oversight</p>
                </div>
                <div>
                  <CheckCircle className="w-8 h-8 text-emerald-600 mx-auto mb-2" />
                  <h3 className="font-semibold mb-1">Trusted</h3>
                  <p className="text-sm text-gray-600">Used by healthcare providers</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/labs/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]sql:file="scripts/003-labs-database.sql" isEdit="true" isQuickEdit="true" isMerged="true"
CREATE TABLE IF NOT EXISTS labs (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  parent_company VARCHAR(255),
  address TEXT,
  city VARCHAR(100),
  state VARCHAR(50),
  zip VARCHAR(20),
  country VARCHAR(100) DEFAULT 'United States',
  
  -- Contact Information
  phone_main VARCHAR(50),
  phone_client_services VARCHAR(50),
  phone_billing VARCHAR(50),
  email_main VARCHAR(255),
  email_client_services VARCHAR(255),
  email_billing VARCHAR(255),
  website VARCHAR(255),
  
  -- Certification & Credentials
  clia_number VARCHAR(50),
  clia_expiration DATE,
  cap_accredited BOOLEAN DEFAULT false,
  
  -- Specialties & Services
  specialties TEXT[], -- Array of specialties
  test_types TEXT[], -- Array of test types offered
  turnaround_time VARCHAR(100), -- e.g., "10-14 business days"
  
  -- Business Information
  referral_program BOOLEAN DEFAULT false,
  referral_fee_percentage DECIMAL(5,2),
  referral_notes TEXT,
  partnership_status VARCHAR(50) DEFAULT 'prospective', -- prospective, negotiating, active, inactive
  contact_person VARCHAR(255),
  last_contact_date DATE,
  
  -- Metadata
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert major genetic testing laboratories
INSERT INTO labs (
  name, parent_company, address, city, state, zip, 
  phone_main, phone_client_services, email_main, email_client_services, website,
  clia_number, specialties, test_types, partnership_status
) VALUES 
(
  'Quest Diagnostics',
  'Quest Diagnostics Incorporated',
  '500 Plaza Drive',
  'Secaucus',
  'NJ',
  '07094',
  '1-866-436-3463',
  '1-866-436-3463',
  'genetics@questdiagnostics.com',
  'genetics@questdiagnostics.com',
  'https://www.questdiagnostics.com/healthcare-professionals/about-our-tests/genetics',
  NULL,
  ARRAY['Cancer Genetics', 'Cardiovascular Genetics', 'Reproductive Genetics', 'Pharmacogenomics', 'Carrier Screening'],
  ARRAY['Hereditary Cancer Testing', 'NIPT', 'Carrier Screening', 'Whole Exome Sequencing', 'Pharmacogenomic Testing'],
  'prospective'
),
(
  'Invitae',
  'Labcorp (acquired 2024)',
  '1400 16th Street',
  'San Francisco',
  'CA',
  '94103',
  '800-436-3037',
  '800-436-3037',
  'clientservices@invitae.com',
  'clientservices@invitae.com',
  'https://www.invitae.com/',
  NULL,
  ARRAY['Cancer Genetics', 'Cardiology', 'Neurology', 'Pediatrics', 'Rare Disease', 'Reproductive Health'],
  ARRAY['Multi-gene panels', 'Single-gene tests', 'Exome sequencing', 'Genome sequencing', 'Carrier screening'],
  'prospective'
),
(
  'GeneDx',
  'Sema4 (acquired 2022)',
  '207 Perry Parkway',
  'Gaithersburg',
  'MD',
  '20877',
  '888-729-1206',
  '888-729-1206',
  'Support@GeneDx.com',
  'Support@GeneDx.com',
  'https://www.genedx.com/',
  NULL,
  ARRAY['Rare & Undiagnosed Diseases', 'Pediatric Genetics', 'Neurology', 'Cardiology', 'Metabolic Disorders'],
  ARRAY['Exome sequencing', 'Genome sequencing', 'Gene panels', 'Single gene testing', 'Carrier screening'],
  'prospective'
),
(
  'Myriad Genetics',
  'Myriad Genetics, Inc.',
  '322 North 2200 West',
  'Salt Lake City',
  'UT',
  '84116',
  '800-469-7423',
  '800-469-7423',
  'cscomments@myriad.com',
  'cscomments@myriad.com',
  'https://myriad.com/',
  NULL,
  ARRAY['Hereditary Cancer', 'Oncology', 'Womens Health', 'Mental Health', 'Pharmacogenomics'],
  ARRAY['myRisk Hereditary Cancer', 'BRACAnalysis', 'Prolaris', 'Prequel Prenatal Screen', 'GeneSight'],
  'prospective'
),
(
  'Ambry Genetics',
  'PACT Pharma (acquired 2021)',
  '7 Argonaut',
  'Aliso Viejo',
  'CA',
  '92656',
  '949-900-5500',
  '949-900-5500',
  'info@ambrygen.com',
  'info@ambrygen.com',
  'https://www.ambrygen.com/',
  'CLIA Certified',
  ARRAY['Hereditary Cancer', 'Cardiovascular Health', 'Neurology', 'Rare Diseases', 'Exome/Genome'],
  ARRAY['Multi-gene panels', 'Exome sequencing', 'Genome sequencing', 'Del/Dup analysis', 'Variant classification'],
  'prospective'
),
(
  'PreventionGenetics',
  'PreventionGenetics LLC',
  '3800 S. Business Park Avenue',
  'Marshfield',
  'WI',
  '54449',
  '715-387-0484',
  '715-387-0484',
  'info@preventiongenetics.com',
  'info@preventiongenetics.com',
  'https://www.preventiongenetics.com/',
  '52D2065132',
  ARRAY['Comprehensive Panels', 'Single Gene Testing', 'Deletion/Duplication', 'Carrier Screening', 'Prenatal'],
  ARRAY['Gene panels', 'Single gene sequencing', 'Del/Dup testing', 'Carrier screening', 'Prenatal testing'],
  'prospective'
),
(
  'Natera',
  'Natera, Inc.',
  '13011 McCallen Pass',
  'Austin',
  'TX',
  '78753',
  '650-489-9050',
  '650-489-9050',
  'info@natera.com',
  'info@natera.com',
  'https://www.natera.com/',
  NULL,
  ARRAY['Womens Health', 'Oncology', 'Organ Health', 'NIPT', 'Carrier Screening'],
  ARRAY['Panorama NIPT', 'Horizon Carrier Screening', 'Signatera MRD', 'Prospera Organ Transplant', 'Anora POC'],
  'prospective'
),
(
  'Labcorp',
  'Laboratory Corporation of America Holdings',
  '531 South Spring Street',
  'Burlington',
  'NC',
  '27215',
  '800-222-7566',
  '800-222-7566',
  'laboratory@labcorp.com',
  'laboratory@labcorp.com',
  'https://www.labcorp.com/tests',
  NULL,
  ARRAY['Cancer Genetics', 'Cardiovascular', 'Reproductive', 'Carrier Screening', 'Pharmacogenomics', 'Infectious Disease'],
  ARRAY['Hereditary cancer panels', 'NIPT', 'Carrier screening', 'Pharmacogenomic testing', 'Molecular diagnostics'],
  'prospective'
),
(
  'Color Health',
  'Color Health, Inc.',
  '863 Mitten Road',
  'Burlingame',
  'CA',
  '94010',
  '844-352-6567',
  '844-352-6567',
  'support@color.com',
  'support@color.com',
  'https://www.color.com/',
  NULL,
  ARRAY['Cancer Genetics', 'Heart Health', 'Medication Response', 'COVID-19 Testing'],
  ARRAY['Hereditary Cancer Test', 'Hereditary Heart Health Test', 'Pharmacogenomics', 'Population health programs'],
  'prospective'
),
(
  'Fulgent Genetics',
  'Fulgent Genetics, Inc.',
  '4978 Santa Anita Ave',
  'Temple City',
  'CA',
  '91780',
  '888-486-8436',
  '888-486-8436',
  'info@fulgentgenetics.com',
  'info@fulgentgenetics.com',
  'https://www.fulgentgenetics.com/',
  NULL,
  ARRAY['Comprehensive Panels', 'Single Gene Testing', 'Exome/Genome', 'Reproductive Health'],
  ARRAY['Multi-gene panels', 'Whole exome sequencing', 'Whole genome sequencing', 'Carrier screening', 'Custom panels'],
  'prospective'
),
(
  '23andMe',
  '23andMe, Inc.',
  '223 N Mathilda Ave',
  'Sunnyvale',
  'CA',
  '94086',
  '800-239-5230',
  '800-239-5230',
  'privacy@23andme.com',
  'customercare@23andme.com',
  'https://www.23andme.com/',
  NULL,
  ARRAY['Ancestry', 'Health Predispositions', 'Carrier Status', 'Wellness', 'Traits'],
  ARRAY['Ancestry composition', 'Health + Ancestry Service', 'Carrier screening', 'Pharmacogenetics', 'Trait reports'],
  'prospective'
),
(
  'AncestryDNA',
  'Ancestry.com LLC',
  '153 Townsend Street, Suite 800',
  'San Francisco',
  'CA',
  '94107',
  '800-262-3787',
  '800-262-3787',
  'support@ancestry.com',
  'support@ancestry.com',
  'https://www.ancestry.com/dna/',
  NULL,
  ARRAY['Ancestry', 'Ethnicity Estimate', 'DNA Matches', 'Family History'],
  ARRAY['AncestryDNA test', 'Ethnicity estimates', 'DNA matching', 'Family tree building', 'Trait insights'],
  'prospective'
),
(
  'MyHeritage DNA',
  'MyHeritage Ltd.',
  '10 Lincoln Street',
  'Tel Aviv',
  NULL,
  NULL,
  '844-994-1888',
  '844-994-1888',
  'support@myheritage.com',
  'support@myheritage.com',
  'https://www.myheritage.com/dna',
  NULL,
  ARRAY['Ancestry', 'Ethnicity', 'DNA Matching', 'Family Tree'],
  ARRAY['MyHeritage DNA test', 'Ethnicity estimates', 'DNA matching', 'Family tree sync', 'Health reports'],
  'prospective'
),
(
  'Dante Labs',
  'Dante Labs Inc.',
  '234 5th Ave Ste 413',
  'New York',
  'NY',
  '10001',
  '917-338-6413',
  '917-338-6413',
  'info@dantelabs.com',
  'support@dantelabs.com',
  'https://www.dantelabs.com/',
  NULL,
  ARRAY['Whole Genome Sequencing', 'Ancestry', 'Health', 'Fitness', 'Nutrition'],
  ARRAY['30x Whole Genome Sequencing', 'Ancestry reports', 'Disease predisposition', 'Pharmacogenomics', 'Carrier screening'],
  'prospective'
),
(
  'Nebula Genomics',
  'Nebula Genomics, Inc.',
  'San Francisco Office',
  'San Francisco',
  'CA',
  NULL,
  '857-445-7124',
  '857-445-7124',
  'info@nebula.org',
  'support@nebula.org',
  'https://nebula.org/',
  NULL,
  ARRAY['Whole Genome Sequencing', 'Ancestry', 'Health Reports', 'Privacy-Focused'],
  ARRAY['30x Whole Genome Sequencing', 'Ancestry analysis', 'Health reports', 'Weekly report updates', 'Anonymous sequencing'],
  'prospective'
);

-- Create indexes for common queries
CREATE INDEX idx_labs_name ON labs(name);
CREATE INDEX idx_labs_state ON labs(state);
CREATE INDEX idx_labs_partnership_status ON labs(partnership_status);
CREATE INDEX idx_labs_specialties ON labs USING GIN(specialties);

-- Create a view for public lab directory (excluding sensitive business info)
CREATE VIEW public_labs AS
SELECT 
  id, name, parent_company, city, state, country,
  phone_main, phone_client_services, email_main, 
  website, specialties, test_types, turnaround_time
FROM labs
WHERE partnership_status = 'active';
[V0_FILE]sql:file="scripts/004-business-development.sql" isMerged="true"
-- Partnership Contact Log
CREATE TABLE IF NOT EXISTS partnership_contacts (
  id SERIAL PRIMARY KEY,
  lab_id INTEGER REFERENCES labs(id),
  counselor_id INTEGER,
  entity_type VARCHAR(50) CHECK (entity_type IN ('lab', 'counselor', 'insurance', 'provider')),
  contact_type VARCHAR(100) NOT NULL, -- email, phone, meeting, demo, proposal
  contact_person VARCHAR(255),
  contact_date TIMESTAMP NOT NULL,
  contacted_by VARCHAR(255), -- Your team member name
  summary TEXT NOT NULL,
  next_action TEXT,
  next_action_date DATE,
  status VARCHAR(50) DEFAULT 'open', -- open, pending, completed, cancelled
  outcome VARCHAR(50), -- interested, not_interested, follow_up_needed, deal_closed
  
  -- Attachments and references
  attachments JSONB, -- URLs to proposal docs, contracts, etc
  tags TEXT[], -- For categorization
  
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insurance Partnership Tracking
CREATE TABLE IF NOT EXISTS insurance_partnerships (
  id SERIAL PRIMARY KEY,
  insurance_company VARCHAR(255) NOT NULL,
  plan_type VARCHAR(100), -- PPO, HMO, Medicare, Medicaid
  network_size INTEGER,
  
  -- Contact details
  contact_person VARCHAR(255),
  contact_title VARCHAR(100),
  phone VARCHAR(50),
  email VARCHAR(255),
  
  -- Partnership details
  partnership_status VARCHAR(50) DEFAULT 'prospective', -- prospective, negotiating, active, inactive
  referral_fee_percentage DECIMAL(5,2),
  in_network_counselors INTEGER DEFAULT 0,
  coverage_states TEXT[],
  
  -- Terms and dates
  contract_start_date DATE,
  contract_end_date DATE,
  last_contact_date DATE,
  next_review_date DATE,
  
  -- Notes
  negotiation_notes TEXT,
  contract_terms TEXT,
  
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Lead Source Tracking
CREATE TABLE IF NOT EXISTS lead_sources (
  id SERIAL PRIMARY KEY,
  source_name VARCHAR(255) NOT NULL UNIQUE,
  source_type VARCHAR(50), -- organic_search, paid_search, social, referral, direct, email
  campaign_name VARCHAR(255),
  utm_source VARCHAR(255),
  utm_medium VARCHAR(255),
  utm_campaign VARCHAR(255),
  monthly_budget_cents INTEGER,
  
  -- Performance metrics
  total_visits INTEGER DEFAULT 0,
  total_signups INTEGER DEFAULT 0,
  total_conversions INTEGER DEFAULT 0,
  total_revenue_cents INTEGER DEFAULT 0,
  
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- User Lead Tracking (extends users table)
CREATE TABLE IF NOT EXISTS user_leads (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  lead_source_id INTEGER REFERENCES lead_sources(id),
  
  -- Attribution
  first_touch_date TIMESTAMP,
  last_touch_date TIMESTAMP,
  referring_url TEXT,
  landing_page TEXT,
  
  -- Conversion funnel
  viewed_pricing BOOLEAN DEFAULT false,
  started_signup BOOLEAN DEFAULT false,
  completed_signup BOOLEAN DEFAULT false,
  made_first_payment BOOLEAN DEFAULT false,
  conversion_date TIMESTAMP,
  
  -- Value tracking
  lifetime_value_cents INTEGER DEFAULT 0,
  acquisition_cost_cents INTEGER DEFAULT 0,
  
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Provider Outreach Tracking (for United, Optum, etc.)
CREATE TABLE IF NOT EXISTS provider_outreach (
  id SERIAL PRIMARY KEY,
  provider_network VARCHAR(255) NOT NULL, -- "UnitedHealthcare", "Optum Provider Express", etc.
  provider_name VARCHAR(255),
  npi_number VARCHAR(20),
  
  -- Contact info
  email VARCHAR(255),
  phone VARCHAR(50),
  office_address TEXT,
  city VARCHAR(100),
  state VARCHAR(2),
  zip VARCHAR(20),
  
  -- Specialty
  specialty VARCHAR(255),
  accepts_united BOOLEAN DEFAULT false,
  
  -- Outreach status
  outreach_status VARCHAR(50) DEFAULT 'not_contacted', -- not_contacted, reached_out, responded, meeting_scheduled, onboarded, not_interested
  first_contact_date DATE,
  last_contact_date DATE,
  response_date DATE,
  onboard_date DATE,
  
  -- Communication log
  contact_attempts INTEGER DEFAULT 0,
  communication_notes TEXT,
  
  -- Recruitment source
  found_via VARCHAR(100), -- provider_express, psychology_today, google, referral
  
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Analytics Events (for tracking user behavior)
CREATE TABLE IF NOT EXISTS analytics_events (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  session_id VARCHAR(255),
  event_name VARCHAR(100) NOT NULL,
  event_category VARCHAR(100),
  event_properties JSONB,
  page_url TEXT,
  referrer TEXT,
  user_agent TEXT,
  ip_address INET,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for performance
CREATE INDEX idx_partnership_contacts_lab ON partnership_contacts(lab_id);
CREATE INDEX idx_partnership_contacts_date ON partnership_contacts(contact_date);
CREATE INDEX idx_partnership_contacts_status ON partnership_contacts(status);
CREATE INDEX idx_insurance_partnerships_status ON insurance_partnerships(partnership_status);
CREATE INDEX idx_lead_sources_type ON lead_sources(source_type);
CREATE INDEX idx_user_leads_source ON user_leads(lead_source_id);
CREATE INDEX idx_user_leads_user ON user_leads(user_id);
CREATE INDEX idx_provider_outreach_status ON provider_outreach(outreach_status);
CREATE INDEX idx_provider_outreach_state ON provider_outreach(state);
CREATE INDEX idx_analytics_events_user ON analytics_events(user_id);
CREATE INDEX idx_analytics_events_name ON analytics_events(event_name);
CREATE INDEX idx_analytics_events_date ON analytics_events(created_at);

-- Insert some common lead sources
INSERT INTO lead_sources (source_name, source_type, utm_source, utm_medium) VALUES
  ('Google Organic Search', 'organic_search', 'google', 'organic'),
  ('Google Ads - Genetic Counselor', 'paid_search', 'google', 'cpc'),
  ('Facebook Ads', 'social', 'facebook', 'paid_social'),
  ('Direct Traffic', 'direct', 'direct', 'none'),
  ('Email Newsletter', 'email', 'newsletter', 'email'),
  ('Provider Referral', 'referral', 'provider', 'referral'),
  ('Blog Content', 'organic_search', 'blog', 'content');
[V0_FILE]typescriptreact:file="app/admin/bd/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LayoutDashboard, Users, Building2, TrendingUp, Phone } from "lucide-react"
import PartnershipCRM from "@/components/admin/partnership-crm"
import ProviderOutreach from "@/components/admin/provider-outreach"
import AnalyticsDashboard from "@/components/admin/analytics-dashboard"
import InsurancePartnerships from "@/components/admin/insurance-partnerships"

export default function BusinessDevelopmentPage() {
  const [activeTab, setActiveTab] = useState("dashboard")

return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Business Development Hub</h1>
          <p className="text-gray-600 mt-2">Manage partnerships, track outreach, and monitor acquisition performance</p>
        </div>

{/* Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-5 lg:w-auto">
            <TabsTrigger value="dashboard" className="flex items-center gap-2">
              <LayoutDashboard className="w-4 h-4" />
              Dashboard
            </TabsTrigger>
            <TabsTrigger value="crm" className="flex items-center gap-2">
              <Building2 className="w-4 h-4" />
              Lab CRM
            </TabsTrigger>
            <TabsTrigger value="providers" className="flex items-center gap-2">
              <Users className="w-4 h-4" />
              Provider Outreach
            </TabsTrigger>
            <TabsTrigger value="insurance" className="flex items-center gap-2">
              <Phone className="w-4 h-4" />
              Insurance
            </TabsTrigger>
            <TabsTrigger value="analytics" className="flex items-center gap-2">
              <TrendingUp className="w-4 h-4" />
              Analytics
            </TabsTrigger>
          </TabsList>

{/* Dashboard Overview */}
          <TabsContent value="dashboard" className="space-y-6">
            <div className="grid md:grid-cols-4 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-sm font-medium text-gray-600">Active Lab Partners</CardTitle>
                  <div className="text-3xl font-bold text-emerald-600">8</div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-500">2 in negotiation</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="text-sm font-medium text-gray-600">Provider Network</CardTitle>
                  <div className="text-3xl font-bold text-blue-600">127</div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-500">45 United in-network</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="text-sm font-medium text-gray-600">Monthly Signups</CardTitle>
                  <div className="text-3xl font-bold text-purple-600">234</div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-green-600">↑ 18% vs last month</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="text-sm font-medium text-gray-600">Conversion Rate</CardTitle>
                  <div className="text-3xl font-bold text-orange-600">12.4%</div>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-green-600">↑ 2.1% improvement</p>
                </CardContent>
              </Card>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Recent Partnership Activity</CardTitle>
                  <CardDescription>Last 7 days of outreach and negotiations</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-green-500 rounded-full mt-2" />
                      <div className="flex-1">
                        <p className="font-medium">Quest Diagnostics - Follow-up call scheduled</p>
                        <p className="text-sm text-gray-500">Tomorrow at 2:00 PM with Sarah Chen</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full mt-2" />
                      <div className="flex-1">
                        <p className="font-medium">Invitae - Proposal sent</p>
                        <p className="text-sm text-gray-500">Awaiting response on referral terms</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2" />
                      <div className="flex-1">
                        <p className="font-medium">GeneDx - Initial contact made</p>
                        <p className="text-sm text-gray-500">Sent intro email via contact form</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Top Performing Channels</CardTitle>
                  <CardDescription>Lead acquisition by source</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-2">
                        <span className="text-sm font-medium">Google Organic Search</span>
                        <span className="text-sm text-gray-600">42%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div className="bg-emerald-600 h-2 rounded-full" style={{ width: "42%" }} />
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-2">
                        <span className="text-sm font-medium">Provider Referrals</span>
                        <span className="text-sm text-gray-600">28%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div className="bg-blue-600 h-2 rounded-full" style={{ width: "28%" }} />
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-2">
                        <span className="text-sm font-medium">Google Ads</span>
                        <span className="text-sm text-gray-600">18%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div className="bg-purple-600 h-2 rounded-full" style={{ width: "18%" }} />
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-2">
                        <span className="text-sm font-medium">Direct Traffic</span>
                        <span className="text-sm text-gray-600">12%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div className="bg-orange-600 h-2 rounded-full" style={{ width: "12%" }} />
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

{/* Lab Partnership CRM */}
          <TabsContent value="crm">
            <PartnershipCRM />
          </TabsContent>

{/* Provider Outreach */}
          <TabsContent value="providers">
            <ProviderOutreach />
          </TabsContent>

{/* Insurance Partnerships */}
          <TabsContent value="insurance">
            <InsurancePartnerships />
          </TabsContent>

{/* Analytics Dashboard */}
          <TabsContent value="analytics">
            <AnalyticsDashboard />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/partnership-crm.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Plus, Phone, Mail, Calendar, FileText, ExternalLink } from "lucide-react"

interface ContactLog {
  id: number
  lab_name: string
  contact_type: string
  contact_person: string
  contact_date: string
  contacted_by: string
  summary: string
  next_action: string
  next_action_date: string
  status: string
  outcome: string
}

export default function PartnershipCRM() {
  const [contacts, setContacts] = useState<ContactLog[]>([])
  const [labs, setLabs] = useState<any[]>([])
  const [selectedLab, setSelectedLab] = useState("")
  const [filterStatus, setFilterStatus] = useState("all")
  const [isAddingContact, setIsAddingContact] = useState(false)

useEffect(() => {
    fetchLabs()
    fetchContacts()
  }, [filterStatus])

const fetchLabs = async () => {
    try {
      const response = await fetch("/api/labs")
      const data = await response.json()
      setLabs(data.labs || [])
    } catch (error) {
      console.error("Error fetching labs:", error)
    }
  }

const fetchContacts = async () => {
    try {
      const params = new URLSearchParams()
      if (filterStatus !== "all") params.append("status", filterStatus)

const response = await fetch(`/api/bd/contacts?${params}`)
      const data = await response.json()
      setContacts(data.contacts || [])
    } catch (error) {
      console.error("Error fetching contacts:", error)
    }
  }

const handleAddContact = async (formData: FormData) => {
    try {
      const response = await fetch("/api/bd/contacts", {
        method: "POST",
        body: JSON.stringify(Object.fromEntries(formData)),
        headers: { "Content-Type": "application/json" },
      })

if (response.ok) {
        setIsAddingContact(false)
        fetchContacts()
      }
    } catch (error) {
      console.error("Error adding contact:", error)
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "open":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getOutcomeColor = (outcome: string) => {
    switch (outcome) {
      case "deal_closed":
        return "bg-green-100 text-green-800"
      case "interested":
        return "bg-blue-100 text-blue-800"
      case "follow_up_needed":
        return "bg-yellow-100 text-yellow-800"
      case "not_interested":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Header with filters */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Select value={filterStatus} onValueChange={setFilterStatus}>
            <SelectTrigger className="w-48">
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Contacts</SelectItem>
              <SelectItem value="open">Open</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="completed">Completed</SelectItem>
            </SelectContent>
          </Select>
        </div>

<Dialog open={isAddingContact} onOpenChange={setIsAddingContact}>
          <DialogTrigger asChild>
            <Button className="bg-emerald-600 hover:bg-emerald-700">
              <Plus className="w-4 h-4 mr-2" />
              Log New Contact
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Log Partnership Contact</DialogTitle>
            </DialogHeader>
            <form
              onSubmit={(e) => {
                e.preventDefault()
                handleAddContact(new FormData(e.currentTarget))
              }}
              className="space-y-4"
            >
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Lab/Organization</Label>
                  <Select name="lab_id" required>
                    <SelectTrigger>
                      <SelectValue placeholder="Select lab" />
                    </SelectTrigger>
                    <SelectContent>
                      {labs.map((lab) => (
                        <SelectItem key={lab.id} value={lab.id.toString()}>
                          {lab.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Contact Type</Label>
                  <Select name="contact_type" required>
                    <SelectTrigger>
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="email">Email</SelectItem>
                      <SelectItem value="phone">Phone Call</SelectItem>
                      <SelectItem value="meeting">Meeting</SelectItem>
                      <SelectItem value="demo">Demo</SelectItem>
                      <SelectItem value="proposal">Proposal Sent</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Contact Person</Label>
                  <Input name="contact_person" placeholder="Name and title" required />
                </div>
                <div>
                  <Label>Contacted By</Label>
                  <Input name="contacted_by" placeholder="Your name" required />
                </div>
              </div>

<div>
                <Label>Summary</Label>
                <Textarea name="summary" placeholder="What was discussed..." rows={3} required />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Next Action</Label>
                  <Input name="next_action" placeholder="e.g., Send proposal" />
                </div>
                <div>
                  <Label>Next Action Date</Label>
                  <Input name="next_action_date" type="date" />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label>Status</Label>
                  <Select name="status" defaultValue="open">
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="open">Open</SelectItem>
                      <SelectItem value="pending">Pending</SelectItem>
                      <SelectItem value="completed">Completed</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Outcome</Label>
                  <Select name="outcome">
                    <SelectTrigger>
                      <SelectValue placeholder="Select outcome" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="interested">Interested</SelectItem>
                      <SelectItem value="not_interested">Not Interested</SelectItem>
                      <SelectItem value="follow_up_needed">Follow-up Needed</SelectItem>
                      <SelectItem value="deal_closed">Deal Closed</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsAddingContact(false)}>
                  Cancel
                </Button>
                <Button type="submit" className="bg-emerald-600 hover:bg-emerald-700">
                  Log Contact
                </Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </div>

{/* Contact Timeline */}
      <div className="space-y-4">
        {contacts.length === 0 ? (
          <Card>
            <CardContent className="py-12 text-center text-gray-500">
              No contact logs found. Start by logging your first partnership interaction.
            </CardContent>
          </Card>
        ) : (
          contacts.map((contact) => (
            <Card key={contact.id} className="hover:shadow-md transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <CardTitle className="text-lg">{contact.lab_name}</CardTitle>
                      <Badge className={getStatusColor(contact.status)}>{contact.status}</Badge>
                      {contact.outcome && (
                        <Badge className={getOutcomeColor(contact.outcome)}>{contact.outcome.replace("_", " ")}</Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-4 text-sm text-gray-600">
                      <div className="flex items-center gap-1">
                        {contact.contact_type === "email" && <Mail className="w-4 h-4" />}
                        {contact.contact_type === "phone" && <Phone className="w-4 h-4" />}
                        {contact.contact_type === "meeting" && <Calendar className="w-4 h-4" />}
                        {contact.contact_type === "proposal" && <FileText className="w-4 h-4" />}
                        <span className="capitalize">{contact.contact_type}</span>
                      </div>
                      <span>•</span>
                      <span>{new Date(contact.contact_date).toLocaleDateString()}</span>
                      <span>•</span>
                      <span>By {contact.contacted_by}</span>
                    </div>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  <div>
                    <p className="text-sm font-medium text-gray-700 mb-1">Contact: {contact.contact_person}</p>
                    <p className="text-gray-600">{contact.summary}</p>
                  </div>

{contact.next_action && (
                    <div className="bg-blue-50 p-3 rounded-lg">
                      <p className="text-sm font-medium text-blue-900 mb-1">Next Action:</p>
                      <div className="flex items-center justify-between">
                        <p className="text-blue-800">{contact.next_action}</p>
                        {contact.next_action_date && (
                          <Badge variant="outline" className="bg-white">
                            Due: {new Date(contact.next_action_date).toLocaleDateString()}
                          </Badge>
                        )}
                      </div>
                    </div>
                  )}
                </div>

<div className="flex gap-2 mt-4 pt-4 border-t">
                  <Button variant="outline" size="sm">
                    Add Follow-up
                  </Button>
                  <Button variant="outline" size="sm">
                    View Lab Details
                  </Button>
                  <Button variant="outline" size="sm">
                    <ExternalLink className="w-4 h-4 mr-1" />
                    View Contract
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/provider-outreach.tsx" isMerged="true"
"use client"

interface Provider {
  id: number
  provider_name: string
  npi_number: string
  email: string
  phone: string
  specialty: string
  city: string
  state: string
  accepts_united: boolean
  outreach_status: string
  contact_attempts: number
  first_contact_date: string
  last_contact_date: string
}

export default function ProviderOutreach() {
  const [providers, setProviders] = useState<Provider[]>([])
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [stateFilter, setStateFilter] = useState("all")

useEffect(() => {
    fetchProviders()
  }, [search, statusFilter, stateFilter])

const fetchProviders = async () => {
    try {
      const params = new URLSearchParams()
      if (search) params.append("search", search)
      if (statusFilter !== "all") params.append("status", statusFilter)
      if (stateFilter !== "all") params.append("state", stateFilter)

const response = await fetch(`/api/bd/providers?${params}`)
      const data = await response.json()
      setProviders(data.providers || [])
    } catch (error) {
      console.error("Error fetching providers:", error)
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "onboarded":
        return "bg-green-100 text-green-800"
      case "meeting_scheduled":
        return "bg-blue-100 text-blue-800"
      case "responded":
        return "bg-purple-100 text-purple-800"
      case "reached_out":
        return "bg-yellow-100 text-yellow-800"
      case "not_contacted":
        return "bg-gray-100 text-gray-800"
      case "not_interested":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="space-y-6">
      {/* Stats */}
      <div className="grid md:grid-cols-5 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Total Providers</CardTitle>
            <div className="text-2xl font-bold">1,247</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Onboarded</CardTitle>
            <div className="text-2xl font-bold text-green-600">127</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">In Progress</CardTitle>
            <div className="text-2xl font-bold text-blue-600">89</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Not Contacted</CardTitle>
            <div className="text-2xl font-bold text-gray-600">876</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Response Rate</CardTitle>
            <div className="text-2xl font-bold text-purple-600">34%</div>
          </CardHeader>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by name, NPI, or specialty..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-48">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="not_contacted">Not Contacted</SelectItem>
                <SelectItem value="reached_out">Reached Out</SelectItem>
                <SelectItem value="responded">Responded</SelectItem>
                <SelectItem value="meeting_scheduled">Meeting Scheduled</SelectItem>
                <SelectItem value="onboarded">Onboarded</SelectItem>
                <SelectItem value="not_interested">Not Interested</SelectItem>
              </SelectContent>
            </Select>
            <Select value={stateFilter} onValueChange={setStateFilter}>
              <SelectTrigger className="w-full md:w-32">
                <SelectValue placeholder="State" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All States</SelectItem>
                <SelectItem value="CA">California</SelectItem>
                <SelectItem value="TX">Texas</SelectItem>
                <SelectItem value="NY">New York</SelectItem>
                <SelectItem value="FL">Florida</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Provider List */}
      <div className="grid gap-4">
        {providers.length === 0 ? (
          <Card>
            <CardContent className="py-12 text-center text-gray-500">
              No providers found. Try adjusting your filters.
            </CardContent>
          </Card>
        ) : (
          providers.map((provider) => (
            <Card key={provider.id} className="hover:shadow-md transition-shadow">
              <CardContent className="pt-6">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="font-semibold text-lg">{provider.provider_name}</h3>
                      <Badge className={getStatusColor(provider.outreach_status)}>
                        {provider.outreach_status.replace("_", " ")}
                      </Badge>
                      {provider.accepts_united && (
                        <Badge variant="outline" className="bg-blue-50 text-blue-700">
                          United Network
                        </Badge>
                      )}
                    </div>

<div className="grid md:grid-cols-2 gap-3 mt-3 text-sm">
                      <div className="flex items-center gap-2 text-gray-600">
                        <UserCheck className="w-4 h-4" />
                        <span>{provider.specialty}</span>
                      </div>
                      <div className="flex items-center gap-2 text-gray-600">
                        <MapPin className="w-4 h-4" />
                        <span>
                          {provider.city}, {provider.state}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-gray-600">
                        <Phone className="w-4 h-4" />
                        <a href={`tel:${provider.phone}`} className="text-emerald-600 hover:underline">
                          {provider.phone}
                        </a>
                      </div>
                      <div className="flex items-center gap-2 text-gray-600">
                        <Mail className="w-4 h-4" />
                        <a href={`mailto:${provider.email}`} className="text-emerald-600 hover:underline">
                          {provider.email}
                        </a>
                      </div>
                    </div>

{provider.contact_attempts > 0 && (
                      <div className="mt-3 flex items-center gap-4 text-sm text-gray-600">
                        <div className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          <span>{provider.contact_attempts} attempts</span>
                        </div>
                        {provider.last_contact_date && (
                          <>
                            <span>•</span>
                            <span>Last contact: {new Date(provider.last_contact_date).toLocaleDateString()}</span>
                          </>
                        )}
                      </div>
                    )}
                  </div>

<div className="flex flex-col gap-2">
                    <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">
                      Contact
                    </Button>
                    <Button size="sm" variant="outline">
                      View Details
                    </Button>
                    <Button size="sm" variant="outline">
                      Add Note
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/insurance-partnerships.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Building2, Phone, Mail, FileText, Calendar, DollarSign } from "lucide-react"

export default function InsurancePartnerships() {
  const insurancePartners = [
    {
      id: 1,
      name: "UnitedHealthcare",
      plan_type: "PPO, HMO, Medicare Advantage",
      network_size: 1400000,
      contact_person: "Sarah Johnson",
      contact_title: "Provider Relations Manager",
      phone: "1-800-454-3333",
      email: "provider.relations@uhc.com",
      partnership_status: "negotiating",
      referral_fee: null,
      in_network_counselors: 45,
      coverage_states: ["All 50 states"],
      last_contact_date: "2024-01-15",
      next_review_date: "2024-02-01",
      negotiation_notes:
        "Discussing referral fee structure and credentialing requirements. They're interested in genetic counseling as part of preventive care.",
    },
    {
      id: 2,
      name: "Anthem Blue Cross Blue Shield",
      plan_type: "PPO, HMO",
      network_size: 120000,
      contact_person: "Michael Chen",
      contact_title: "Network Development",
      phone: "1-888-475-3134",
      email: "network@anthem.com",
      partnership_status: "prospective",
      referral_fee: null,
      in_network_counselors: 0,
      coverage_states: ["CA", "CO", "CT", "GA", "IN", "KY", "ME", "MO", "NV", "NH", "NY", "OH", "VA", "WI"],
      last_contact_date: null,
      next_review_date: null,
      negotiation_notes: "Initial research phase. Need to identify right contact person.",
    },
  ]

return (
    <div className="space-y-6">
      {/* Stats */}
      <div className="grid md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Total Insurance Partners</CardTitle>
            <div className="text-2xl font-bold">2</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Active Partnerships</CardTitle>
            <div className="text-2xl font-bold text-green-600">0</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">In Negotiation</CardTitle>
            <div className="text-2xl font-bold text-blue-600">1</div>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Network Coverage</CardTitle>
            <div className="text-2xl font-bold text-purple-600">1.5M+</div>
          </CardHeader>
        </Card>
      </div>

{/* Insurance Partners */}
      <div className="space-y-4">
        {insurancePartners.map((partner) => (
          <Card key={partner.id} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <Building2 className="w-6 h-6 text-blue-600" />
                    <CardTitle className="text-xl">{partner.name}</CardTitle>
                    <Badge className={getStatusColor(partner.partnership_status)}>{partner.partnership_status}</Badge>
                  </div>
                  <p className="text-sm text-gray-600">{partner.plan_type}</p>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-6 mb-6">
                {/* Contact Information */}
                <div className="space-y-3">
                  <h4 className="font-semibold text-sm text-gray-700">Primary Contact</h4>
                  <div className="space-y-2 text-sm">
                    <p className="font-medium">{partner.contact_person}</p>
                    <p className="text-gray-600">{partner.contact_title}</p>
                    <div className="flex items-center gap-2 text-gray-600">
                      <Phone className="w-4 h-4" />
                      <a href={`tel:${partner.phone}`} className="text-emerald-600 hover:underline">
                        {partner.phone}
                      </a>
                    </div>
                    <div className="flex items-center gap-2 text-gray-600">
                      <Mail className="w-4 h-4" />
                      <a href={`mailto:${partner.email}`} className="text-emerald-600 hover:underline">
                        {partner.email}
                      </a>
                    </div>
                  </div>
                </div>

{/* Partnership Details */}
                <div className="space-y-3">
                  <h4 className="font-semibold text-sm text-gray-700">Partnership Details</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center justify-between">
                      <span className="text-gray-600">Network Size:</span>
                      <span className="font-medium">{partner.network_size.toLocaleString()} members</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-600">In-Network Counselors:</span>
                      <span className="font-medium">{partner.in_network_counselors}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-600">Coverage States:</span>
                      <span className="font-medium">{partner.coverage_states.join(", ")}</span>
                    </div>
                    {partner.referral_fee && (
                      <div className="flex items-center justify-between">
                        <span className="text-gray-600">Referral Fee:</span>
                        <span className="font-medium text-green-600">{partner.referral_fee}%</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>

{/* Negotiation Notes */}
              {partner.negotiation_notes && (
                <div className="bg-blue-50 p-4 rounded-lg mb-4">
                  <h4 className="font-semibold text-sm text-blue-900 mb-2 flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    Negotiation Notes
                  </h4>
                  <p className="text-sm text-blue-800">{partner.negotiation_notes}</p>
                </div>
              )}

{/* Timeline */}
              <div className="flex items-center gap-6 text-sm text-gray-600 mb-4">
                {partner.last_contact_date && (
                  <div className="flex items-center gap-2">
                    <Calendar className="w-4 h-4" />
                    <span>Last Contact: {new Date(partner.last_contact_date).toLocaleDateString()}</span>
                  </div>
                )}
                {partner.next_review_date && (
                  <div className="flex items-center gap-2">
                    <Calendar className="w-4 h-4" />
                    <span>Next Review: {new Date(partner.next_review_date).toLocaleDateString()}</span>
                  </div>
                )}
              </div>

{/* Actions */}
              <div className="flex gap-2 pt-4 border-t">
                <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">
                  Log Contact
                </Button>
                <Button size="sm" variant="outline">
                  Update Status
                </Button>
                <Button size="sm" variant="outline">
                  View Contract
                </Button>
                <Button size="sm" variant="outline">
                  <DollarSign className="w-4 h-4 mr-1" />
                  Set Referral Terms
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

<Button className="w-full bg-emerald-600 hover:bg-emerald-700">Add New Insurance Partner</Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/analytics-dashboard.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, DollarSign, Users, Target } from "lucide-react"

export default function AnalyticsDashboard() {
  return (
    <div className="space-y-6">
      {/* Key Metrics */}
      <div className="grid md:grid-cols-3 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-600 flex items-center gap-2">
              <DollarSign className="w-4 h-4" />
              Monthly Revenue
            </CardTitle>
            <div className="text-3xl font-bold">$18,450</div>
            <div className="flex items-center gap-1 text-sm text-green-600">
              <TrendingUp className="w-4 h-4" />
              <span>+22% vs last month</span>
            </div>
          </CardHeader>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-600 flex items-center gap-2">
              <Users className="w-4 h-4" />
              New Users
            </CardTitle>
            <div className="text-3xl font-bold">234</div>
            <div className="flex items-center gap-1 text-sm text-green-600">
              <TrendingUp className="w-4 h-4" />
              <span>+18% vs last month</span>
            </div>
          </CardHeader>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-600 flex items-center gap-2">
              <Target className="w-4 h-4" />
              Conversion Rate
            </CardTitle>
            <div className="text-3xl font-bold">12.4%</div>
            <div className="flex items-center gap-1 text-sm text-green-600">
              <TrendingUp className="w-4 h-4" />
              <span>+2.1% improvement</span>
            </div>
          </CardHeader>
        </Card>
      </div>

{/* Lead Sources Performance */}
      <Card>
        <CardHeader>
          <CardTitle>Lead Source Performance</CardTitle>
          <CardDescription>Traffic, conversions, and ROI by acquisition channel</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[
              {
                source: "Google Organic Search",
                visits: 1847,
                signups: 234,
                conversions: 29,
                revenue: "$7,830",
                cost: "$0",
                roi: "∞",
                color: "emerald",
              },
              {
                source: "Google Ads - Genetic Counselor",
                visits: 892,
                signups: 127,
                conversions: 18,
                revenue: "$4,860",
                cost: "$1,200",
                roi: "305%",
                color: "blue",
              },
              {
                source: "Provider Referrals",
                visits: 456,
                signups: 89,
                conversions: 23,
                revenue: "$6,210",
                cost: "$0",
                roi: "∞",
                color: "purple",
              },
              {
                source: "Facebook Ads",
                visits: 1234,
                signups: 67,
                conversions: 8,
                revenue: "$2,160",
                cost: "$800",
                roi: "170%",
                color: "orange",
              },
            ].map((source, index) => (
              <div key={index} className="border-b last:border-0 pb-4 last:pb-0">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-3">
                    <div className={`w-3 h-3 rounded-full bg-${source.color}-500`} />
                    <span className="font-medium">{source.source}</span>
                  </div>
                  <div className="flex items-center gap-6 text-sm">
                    <div className="text-right">
                      <p className="text-gray-500">Visits</p>
                      <p className="font-semibold">{source.visits.toLocaleString()}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-gray-500">Signups</p>
                      <p className="font-semibold">{source.signups}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-gray-500">Paid</p>
                      <p className="font-semibold text-green-600">{source.conversions}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-gray-500">Revenue</p>
                      <p className="font-semibold">{source.revenue}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-gray-500">Cost</p>
                      <p className="font-semibold">{source.cost}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-gray-500">ROI</p>
                      <p className="font-semibold text-emerald-600">{source.roi}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Conversion Funnel */}
      <Card>
        <CardHeader>
          <CardTitle>Conversion Funnel</CardTitle>
          <CardDescription>User journey from visit to paid subscription</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {[
              { stage: "Website Visitors", count: 4429, percentage: 100, color: "bg-gray-400" },
              { stage: "Viewed Pricing", count: 1547, percentage: 35, color: "bg-blue-400" },
              { stage: "Started Signup", count: 892, percentage: 20, color: "bg-purple-400" },
              { stage: "Completed Signup", count: 517, percentage: 12, color: "bg-orange-400" },
              { stage: "Made First Payment", count: 78, percentage: 1.8, color: "bg-emerald-500" },
            ].map((stage, index) => (
              <div key={index}>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium">{stage.stage}</span>
                  <div className="flex items-center gap-3">
                    <span className="text-sm text-gray-600">{stage.count.toLocaleString()} users</span>
                    <span className="text-sm font-semibold">{stage.percentage}%</span>
                  </div>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-3">
                  <div
                    className={`${stage.color} h-3 rounded-full transition-all`}
                    style={{ width: `${stage.percentage}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* User Acquisition Costs */}
      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Customer Acquisition Cost (CAC)</CardTitle>
            <CardDescription>Average cost to acquire a paying customer</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold text-emerald-600 mb-2">$25.64</div>
            <p className="text-sm text-gray-600">Total marketing spend: $2,000 / 78 customers</p>
            <div className="mt-4 pt-4 border-t">
              <div className="flex items-center justify-between text-sm">
                <span className="text-gray-600">Customer Lifetime Value:</span>
                <span className="font-semibold">$236</span>
              </div>
              <div className="flex items-center justify-between text-sm mt-2">
                <span className="text-gray-600">LTV:CAC Ratio:</span>
                <span className="font-semibold text-green-600">9.2x</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Monthly Recurring Revenue (MRR)</CardTitle>
            <CardDescription>Predictable monthly revenue from subscriptions</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold text-blue-600 mb-2">$6,180</div>
            <div className="space-y-2 text-sm mt-4">
              <div className="flex items-center justify-between">
                <span className="text-gray-600">Free Plan (5 questions):</span>
                <span className="font-medium">142 users • $0</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">API Plan ($5/mo):</span>
                <span className="font-medium">89 users • $445</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">Pro Plan ($29/mo):</span>
                <span className="font-medium">156 users • $4,524</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">Family Plan ($79/mo):</span>
                <span className="font-medium">14 families • $1,106</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/bd/contacts/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Mock data - will be replaced with real database queries
const mockContacts = [
  {
    id: 1,
    lab_name: "Quest Diagnostics",
    contact_type: "phone",
    contact_person: "Sarah Chen, Partnership Director",
    contact_date: "2024-01-15T14:00:00Z",
    contacted_by: "John Doe",
    summary:
      "Initial call to discuss potential partnership. Sarah expressed strong interest in genetic counseling referrals. Discussed our platform capabilities and user demographics. She wants to see a formal proposal.",
    next_action: "Send formal partnership proposal with referral fee structure",
    next_action_date: "2024-01-20",
    status: "open",
    outcome: "interested",
  },
  {
    id: 2,
    lab_name: "Invitae",
    contact_type: "email",
    contact_person: "Michael Rodriguez, Business Development",
    contact_date: "2024-01-12T09:30:00Z",
    contacted_by: "Jane Smith",
    summary:
      "Sent detailed email outlining our platform, monthly traffic (10k+ visitors), and patient demographics. Highlighted that we're HIPAA compliant and have genetic counselors on staff.",
    next_action: "Follow up if no response by Friday",
    next_action_date: "2024-01-19",
    status: "pending",
    outcome: "follow_up_needed",
  },
  {
    id: 3,
    lab_name: "Myriad Genetics",
    contact_type: "meeting",
    contact_person: "Emily Thompson, VP Partnerships",
    contact_date: "2024-01-10T11:00:00Z",
    contacted_by: "John Doe",
    summary:
      "Great 45-minute Zoom meeting. Emily loves our educational approach and sees alignment with their mission. Discussed 10% referral fee on all test orders. They want to start with a 3-month pilot program.",
    next_action: "Legal to draft pilot agreement",
    next_action_date: "2024-01-25",
    status: "open",
    outcome: "deal_closed",
  },
]

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const status = searchParams.get("status")

let filtered = [...mockContacts]
    if (status && status !== "all") {
      filtered = filtered.filter((c) => c.status === status)
    }

// Sort by date descending
    filtered.sort((a, b) => new Date(b.contact_date).getTime() - new Date(a.contact_date).getTime())

return NextResponse.json({ contacts: filtered, total: filtered.length })
  } catch (error) {
    console.error("Error fetching contacts:", error)
    return NextResponse.json({ error: "Failed to fetch contacts" }, { status: 500 })
  }
}

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

// In production, insert into database
    console.log("New contact logged:", data)

return NextResponse.json({
      success: true,
      message: "Contact logged successfully",
      id: Math.floor(Math.random() * 10000),
    })
  } catch (error) {
    console.error("Error logging contact:", error)
    return NextResponse.json({ error: "Failed to log contact" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/bd/providers/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Mock provider data
const mockProviders = [
  {
    id: 1,
    provider_name: "Dr. Sarah Martinez",
    npi_number: "1234567890",
    email: "smartinez@healthclinic.com",
    phone: "555-0123",
    specialty: "Licensed Clinical Psychologist",
    city: "Boston",
    state: "MA",
    accepts_united: true,
    outreach_status: "onboarded",
    contact_attempts: 2,
    first_contact_date: "2024-01-05",
    last_contact_date: "2024-01-10",
  },
  {
    id: 2,
    provider_name: "Dr. James Wilson",
    npi_number: "2345678901",
    email: "jwilson@counselingcenter.com",
    phone: "555-0124",
    specialty: "Marriage and Family Therapist",
    city: "Los Angeles",
    state: "CA",
    accepts_united: true,
    outreach_status: "responded",
    contact_attempts: 1,
    first_contact_date: "2024-01-12",
    last_contact_date: "2024-01-12",
  },
  {
    id: 3,
    provider_name: "Dr. Emily Chen",
    npi_number: "3456789012",
    email: "echen@mindwellness.com",
    phone: "555-0125",
    specialty: "Clinical Social Worker",
    city: "Chicago",
    state: "IL",
    accepts_united: true,
    outreach_status: "reached_out",
    contact_attempts: 1,
    first_contact_date: "2024-01-14",
    last_contact_date: "2024-01-14",
  },
]

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const search = searchParams.get("search")
    const status = searchParams.get("status")
    const state = searchParams.get("state")

let filtered = [...mockProviders]

if (search) {
      const searchLower = search.toLowerCase()
      filtered = filtered.filter(
        (p) =>
          p.provider_name.toLowerCase().includes(searchLower) ||
          p.specialty.toLowerCase().includes(searchLower) ||
          p.npi_number.includes(searchLower),
      )
    }

if (status && status !== "all") {
      filtered = filtered.filter((p) => p.outreach_status === status)
    }

if (state && state !== "all") {
      filtered = filtered.filter((p) => p.state === state)
    }

return NextResponse.json({ providers: filtered, total: filtered.length })
  } catch (error) {
    console.error("Error fetching providers:", error)
    return NextResponse.json({ error: "Failed to fetch providers" }, { status: 500 })
  }
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "cover-my-genetics",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ai-sdk/openai": "^0.0.66",
    "@neondatabase/serverless": "^0.10.1",
    "@radix-ui/react-accordion": "^1.2.1",
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "ai": "^3.4.32",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.460.0",
    "next": "15.1.11",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "stripe": "^17.3.1",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "swr": "2.4.2"
  },
  "devDependencies": {
    "@types/node": "^22.10.1",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "eslint": "^9.17.0",
    "eslint-config-next": "15.1.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.2"
  }
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import type { ReactNode } from "react"
import Navbar from "@/components/navbar"

export default function AdminLayout({ children }: { children: ReactNode }) {
  const router = useRouter()
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const checkAuth = () => {
      const adminToken = localStorage.getItem("adminToken")

if (!adminToken) {
        router.push("/admin/login")
        return
      }

// Verify token is valid
      try {
        const tokenData = JSON.parse(atob(adminToken))
        const now = Date.now()

// Check if token is expired (24 hour expiry)
        if (tokenData.expires < now) {
          localStorage.removeItem("adminToken")
          router.push("/admin/login")
          return
        }

setIsAuthenticated(true)
      } catch (error) {
        localStorage.removeItem("adminToken")
        router.push("/admin/login")
      } finally {
        setIsLoading(false)
      }
    }

checkAuth()
  }, [router])

if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Verifying access...</p>
        </div>
      </div>
    )
  }

if (!isAuthenticated) {
    return null
  }

return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1">{children}</main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LayoutDashboard, Building2, Users, FlaskConical, TrendingUp, Settings } from "lucide-react"

export default function AdminDashboard() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
          <p className="text-gray-600 mt-2">Manage your business operations and partnerships</p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Business Development Tools */}
          <Link href="/admin/bd">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                    <TrendingUp className="w-6 h-6 text-emerald-600" />
                  </div>
                  <div>
                    <CardTitle>Business Development</CardTitle>
                    <CardDescription>CRM & Analytics</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600 mb-4">
                  Manage partnerships, track outreach campaigns, and monitor acquisition performance
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• Lab Partnership CRM</li>
                  <li>• Provider Outreach</li>
                  <li>• Insurance Negotiations</li>
                  <li>• Analytics Dashboard</li>
                </ul>
              </CardContent>
            </Card>
          </Link>

{/* Lab Management */}
          <Link href="/admin/labs">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <FlaskConical className="w-6 h-6 text-blue-600" />
                  </div>
                  <div>
                    <CardTitle>Lab Directory</CardTitle>
                    <CardDescription>Testing Partners</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600 mb-4">Manage CLIA-certified labs and consumer genetics companies</p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• Clinical Labs (Quest, Invitae, etc.)</li>
                  <li>• Consumer Genetics (23andMe, etc.)</li>
                  <li>• Contact Information</li>
                  <li>• Partnership Status</li>
                </ul>
              </CardContent>
            </Card>
          </Link>

{/* Counselor Network */}
          <Link href="/counselors">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <Users className="w-6 h-6 text-purple-600" />
                  </div>
                  <div>
                    <CardTitle>Counselor Network</CardTitle>
                    <CardDescription>Provider Directory</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600 mb-4">
                  Browse and manage genetic counselor directory and applications
                </p>
                <ul className="text-sm text-gray-500 space-y-1">
                  <li>• View Active Counselors</li>
                  <li>• Review Applications</li>
                  <li>• Booking Management</li>
                  <li>• Lead Fee Tracking</li>
                </ul>
              </CardContent>
            </Card>
          </Link>

{/* Coming Soon Cards */}
          <Card className="opacity-60">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                  <Building2 className="w-6 h-6 text-orange-600" />
                </div>
                <div>
                  <CardTitle>Employer Programs</CardTitle>
                  <CardDescription>Coming Soon</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-600">Manage B2B employer and clinic partnerships</p>
            </CardContent>
          </Card>

<Card className="opacity-60">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center">
                  <LayoutDashboard className="w-6 h-6 text-pink-600" />
                </div>
                <div>
                  <CardTitle>User Management</CardTitle>
                  <CardDescription>Coming Soon</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-600">View and manage user accounts and subscriptions</p>
            </CardContent>
          </Card>

<Card className="opacity-60">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                  <Settings className="w-6 h-6 text-gray-600" />
                </div>
                <div>
                  <CardTitle>Platform Settings</CardTitle>
                  <CardDescription>Coming Soon</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-600">Configure platform settings and integrations</p>
            </CardContent>
          </Card>
        </div>

{/* Quick Stats */}
        <div className="mt-8">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Stats</h2>
          <div className="grid md:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-gray-600">Total Labs</CardTitle>
                <div className="text-2xl font-bold text-emerald-600">15</div>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-gray-600">Active Counselors</CardTitle>
                <div className="text-2xl font-bold text-blue-600">127</div>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-gray-600">Monthly Users</CardTitle>
                <div className="text-2xl font-bold text-purple-600">1,234</div>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-gray-600">Revenue (MTD)</CardTitle>
                <div className="text-2xl font-bold text-orange-600">$12.4K</div>
              </CardHeader>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" 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 { Dna, AlertCircle } from "lucide-react"
import Link from "next/link"

export default function AdminLoginPage() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

const ADMIN_EMAIL = "admin@covermygenetics.com"
    const ADMIN_PASSWORD = "CMG2024Admin!"

if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
      // Create admin token
      const token = btoa(
        JSON.stringify({
          email,
          role: "admin",
          expires: Date.now() + 24 * 60 * 60 * 1000, // 24 hours
        }),
      )

localStorage.setItem("adminToken", token)
      router.push("/admin")
    } else {
      setError("Invalid credentials. Access denied.")
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-50 to-white p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center">
              <Dna className="h-7 w-7 text-white" />
            </div>
          </div>
          <CardTitle className="text-2xl font-bold">Admin Access</CardTitle>
          <CardDescription>Sign in to access the admin dashboard</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin} className="space-y-4">
            {error && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
                <AlertCircle className="h-5 w-5 flex-shrink-0" />
                <span className="text-sm">{error}</span>
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="admin@covermygenetics.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                disabled={isLoading}
              />
            </div>

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

<div className="text-center pt-4">
              <Link href="/" className="text-sm text-gray-600 hover:text-emerald-600">
                ← Back to home
              </Link>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Dna } from "lucide-react"
import { useEffect, useState } from "react"

export default function Navbar() {
  const [isAdmin, setIsAdmin] = useState(false)

useEffect(() => {
    const checkAdminStatus = () => {
      const adminToken = localStorage.getItem("adminToken")
      if (adminToken) {
        try {
          const tokenData = JSON.parse(atob(adminToken))
          const now = Date.now()
          if (tokenData.expires > now && tokenData.role === "admin") {
            setIsAdmin(true)
          }
        } catch (error) {
          setIsAdmin(false)
        }
      }
    }

checkAdminStatus()
    // Listen for storage changes (in case user logs in/out in another tab)
    window.addEventListener("storage", checkAdminStatus)
    return () => window.removeEventListener("storage", checkAdminStatus)
  }, [])

return (
    <header className="w-full border-b bg-white/95 backdrop-blur-sm sticky top-0 z-50">
      <div className="container flex h-16 items-center justify-between px-4 md:px-6">
        <Link href="/" className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-emerald-600 rounded-full flex items-center justify-center">
              <Dna className="h-5 w-5 text-white" />
            </div>
            <div className="flex flex-col">
              <span className="text-lg font-bold text-emerald-600">CMG</span>
              <span className="text-xs text-gray-600 leading-none">COVER MY GENETICS</span>
            </div>
          </div>
        </Link>
        <nav className="hidden md:flex gap-6 items-center">
          <Link href="/ask-genie" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Ask Genie
          </Link>
          <Link href="/testing" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Testing Options
          </Link>
          <Link href="/counselors" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Find Counselors
          </Link>
          <Link href="/employers" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            For Employers
          </Link>
          <Link href="/pricing" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Pricing
          </Link>
          <Link href="/blog" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Blog
          </Link>
          <Link href="/contact-us" className="text-sm font-medium hover:text-emerald-600 transition-colors">
            Contact
          </Link>
          {isAdmin && (
            <Link
              href="/admin"
              className="text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors"
            >
              Admin
            </Link>
          )}
        </nav>
        <div className="flex items-center gap-4">
          <Link
            href="/login"
            className="text-sm font-medium hover:text-emerald-600 transition-colors hidden md:inline-flex"
          >
            Login
          </Link>
          <Link
            href="/signup"
            className="text-sm font-medium hover:text-emerald-600 transition-colors hidden md:inline-flex"
          >
            Sign up
          </Link>
          <Link href="/pricing">
            <Button className="bg-emerald-600 text-white hover:bg-emerald-700 transition-colors">Get Started</Button>
          </Link>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Mail, Phone, MapPin, Twitter, Linkedin, Facebook, Dna } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-12">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="space-y-4">
            <Link href="/" className="flex items-center gap-3">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-emerald-600 rounded-full flex items-center justify-center">
                  <Dna className="h-5 w-5 text-white" />
                </div>
                <div className="flex flex-col">
                  <span className="text-lg font-bold text-emerald-400">CMG</span>
                  <span className="text-xs text-gray-400 leading-none">COVER MY GENETICS</span>
                </div>
              </div>
            </Link>
            <p className="text-gray-300 text-sm leading-relaxed">
              Empowering individuals and families with AI-powered genetic insights and personalized counseling to make
              informed health decisions.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-400 hover:text-emerald-400 transition-colors">
                <Twitter className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-400 hover:text-emerald-400 transition-colors">
                <Linkedin className="h-5 w-5" />
              </a>
              <a href="#" className="text-gray-400 hover:text-emerald-400 transition-colors">
                <Facebook className="h-5 w-5" />
              </a>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="font-semibold text-lg mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/ask-genie" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Ask Genie
                </Link>
              </li>
              <li>
                <Link href="/testing" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Testing Options
                </Link>
              </li>
              <li>
                <Link href="/employers" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  For Employers
                </Link>
              </li>
              <li>
                <Link href="/pricing" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Pricing
                </Link>
              </li>
              <li>
                <Link href="/resources" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Resources
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Blog
                </Link>
              </li>
            </ul>
          </div>

{/* Support */}
          <div>
            <h3 className="font-semibold text-lg mb-4">Support</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/contact-us" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Contact Us
                </Link>
              </li>
              <li>
                <Link href="/help" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Help Center
                </Link>
              </li>
              <li>
                <Link href="/privacy" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link href="/terms" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Terms of Service
                </Link>
              </li>
              <li>
                <Link href="/security" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  Security
                </Link>
              </li>
            </ul>
          </div>

{/* Contact Info */}
          <div>
            <h3 className="font-semibold text-lg mb-4">Contact Info</h3>
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-emerald-400" />
                <a
                  href="mailto:info@covermygenetics.com"
                  className="text-gray-300 hover:text-emerald-400 transition-colors text-sm"
                >
                  info@covermygenetics.com
                </a>
              </div>
              <div className="flex items-center gap-3">
                <Phone className="h-4 w-4 text-emerald-400" />
                <a href="tel:+15551234567" className="text-gray-300 hover:text-emerald-400 transition-colors text-sm">
                  (555) 123-4567
                </a>
              </div>
              <div className="flex items-start gap-3">
                <MapPin className="h-4 w-4 text-emerald-400 mt-0.5" />
                <div className="text-gray-300 text-sm">
                  123 Genetics Way
                  <br />
                  Suite 456
                  <br />
                  Boston, MA 02110
                </div>
              </div>
            </div>
          </div>
        </div>

<div className="border-t border-gray-800 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm">
              © 2025 Cover My Genetics. All rights reserved. | HIPAA Compliant | FDA Registered
            </p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <Link href="/privacy" className="text-gray-400 hover:text-emerald-400 transition-colors text-sm">
                Privacy
              </Link>
              <Link href="/terms" className="text-gray-400 hover:text-emerald-400 transition-colors text-sm">
                Terms
              </Link>
              <Link href="/cookies" className="text-gray-400 hover:text-emerald-400 transition-colors text-sm">
                Cookies
              </Link>
              <Link href="/admin/login" className="text-gray-400 hover:text-emerald-400 transition-colors text-sm">
                Admin
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescript:file="app/api/user/usage/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getCurrentUser } from "@/lib/auth"

export async function GET() {
  const user = await getCurrentUser()

if (!user) {
    return NextResponse.json({ authenticated: false }, { status: 401 })
  }

return NextResponse.json({
    authenticated: true,
    plan: user.plan,
    questionsUsed: user.questionsUsed,
    questionsLimit: user.questionsLimit,
  })
}
[V0_FILE]typescript:file="lib/plans.ts" isMerged="true"
// Server-side source of truth for paid subscription plans.
// Prices are defined here (in cents) so they can never be tampered with client-side.

export type PaidPlanId = "pro" | "family"
export type BillingCycle = "monthly" | "yearly"

export interface PaidPlan {
  id: PaidPlanId
  name: string
  monthlyPriceCents: number
  yearlyPriceCents: number
  questionsLimit: number
}

// Paid plans include effectively unlimited questions.
const UNLIMITED = 1_000_000

export const PAID_PLANS: Record<PaidPlanId, PaidPlan> = {
  pro: {
    id: "pro",
    name: "Pro",
    monthlyPriceCents: 2900,
    yearlyPriceCents: 29000,
    questionsLimit: UNLIMITED,
  },
  family: {
    id: "family",
    name: "Family",
    monthlyPriceCents: 79000 / 10, // 7900
    yearlyPriceCents: 79000,
    questionsLimit: UNLIMITED,
  },
}

export function getPlan(planId: string): PaidPlan | null {
  return PAID_PLANS[planId as PaidPlanId] ?? null
}
[V0_FILE]typescript:file="app/actions/subscription.ts" isMerged="true"
"use server"

import { headers } from "next/headers"
import { stripe, getOrCreateCustomer } from "@/lib/stripe"
import { setUserSubscription } from "@/lib/database"
import { getCurrentUser } from "@/lib/auth"
import { getPlan, type BillingCycle } from "@/lib/plans"

export async function startSubscriptionCheckout(planId: string, billingCycle: BillingCycle) {
  const user = await getCurrentUser()
  if (!user) {
    return { success: false, message: "Please sign in before subscribing.", url: null }
  }

const plan = getPlan(planId)
  if (!plan) {
    return { success: false, message: "Invalid plan selected.", url: null }
  }

try {
    const customerId = await getOrCreateCustomer(
      user.email,
      `${user.firstName} ${user.lastName}`.trim(),
      user.stripeCustomerId,
    )

// Persist the customer id immediately so the webhook can match it back to the user
    await setUserSubscription(user.id, { stripeCustomerId: customerId })

const headersList = await headers()
    const host = headersList.get("host")
    const protocol = host?.includes("localhost") ? "http" : "https"
    const origin = `${protocol}://${host}`

const unitAmount = billingCycle === "monthly" ? plan.monthlyPriceCents : plan.yearlyPriceCents
    const interval = billingCycle === "monthly" ? "month" : "year"

const session = await stripe.checkout.sessions.create({
      mode: "subscription",
      customer: customerId,
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: `Cover My Genetics ${plan.name} Plan`,
            },
            unit_amount: unitAmount,
            recurring: { interval },
          },
          quantity: 1,
        },
      ],
      metadata: {
        userId: user.id,
        planId: plan.id,
        questionsLimit: String(plan.questionsLimit),
      },
      subscription_data: {
        metadata: {
          userId: user.id,
          planId: plan.id,
        },
      },
      success_url: `${origin}/dashboard?subscription=success`,
      cancel_url: `${origin}/subscribe?plan=${plan.id}&canceled=1`,
    })

if (!session.url) {
      return { success: false, message: "Could not start checkout. Please try again.", url: null }
    }

return { success: true, message: "Redirecting to secure checkout...", url: session.url }
  } catch (error) {
    console.error("[v0] Stripe checkout error:", error)
    return { success: false, message: "Something went wrong starting checkout. Please try again.", url: null }
  }
}
[V0_FILE]typescript:file="app/api/webhooks/stripe/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import type Stripe from "stripe"
import { stripe } from "@/lib/stripe"
import { updateUserPlan, setUserSubscription, getUserByStripeCustomerId } from "@/lib/database"
import { getPlan } from "@/lib/plans"

export async function POST(request: NextRequest) {
  const body = await request.text()
  const signature = request.headers.get("stripe-signature")
  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET

let event: Stripe.Event

try {
    if (webhookSecret && signature) {
      event = stripe.webhooks.constructEvent(body, signature, webhookSecret)
    } else {
      // No signing secret configured yet — parse without verification.
      event = JSON.parse(body) as Stripe.Event
    }
  } catch (error) {
    console.error("[v0] Webhook signature verification failed:", error)
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
  }

try {
    switch (event.type) {
      case "checkout.session.completed": {
        const session = event.data.object as Stripe.Checkout.Session
        const userId = session.metadata?.userId
        const planId = session.metadata?.planId
        const questionsLimit = Number(session.metadata?.questionsLimit ?? "1000000")

if (userId && planId) {
          const plan = getPlan(planId)
          await updateUserPlan(userId, planId, plan?.questionsLimit ?? questionsLimit)
          await setUserSubscription(userId, {
            stripeCustomerId: typeof session.customer === "string" ? session.customer : undefined,
            subscriptionId: typeof session.subscription === "string" ? session.subscription : undefined,
            subscriptionStatus: "active",
          })
        }
        break
      }

case "customer.subscription.updated":
      case "customer.subscription.deleted": {
        const subscription = event.data.object as Stripe.Subscription
        const customerId = typeof subscription.customer === "string" ? subscription.customer : null

if (customerId) {
          const user = await getUserByStripeCustomerId(customerId)
          if (user) {
            const isActive = subscription.status === "active" || subscription.status === "trialing"
            await setUserSubscription(user.id, {
              subscriptionId: subscription.id,
              subscriptionStatus: subscription.status,
            })
            // Downgrade to free plan when the subscription is no longer active
            if (!isActive) {
              await updateUserPlan(user.id, "free", 5)
            }
          }
        }
        break
      }

default:
        break
    }

return NextResponse.json({ received: true })
  } catch (error) {
    console.error("[v0] Error handling Stripe webhook:", error)
    return NextResponse.json({ error: "Webhook handler failed" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/subscribe/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import Navbar from "@/components/navbar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Check, Shield, Star } from "lucide-react"
import Link from "next/link"
import { startSubscriptionCheckout } from "@/app/actions/subscription"

export default function SubscribePage() {
  const searchParams = useSearchParams()
  const [selectedPlan, setSelectedPlan] = useState("pro")
  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly")
  const [isProcessing, setIsProcessing] = useState(false)
  const [errorMessage, setErrorMessage] = useState("")

useEffect(() => {
    const plan = searchParams.get("plan")
    if (plan && ["pro", "family"].includes(plan)) {
      setSelectedPlan(plan)
    }
  }, [searchParams])

const plans = {
    pro: {
      name: "Pro",
      monthlyPrice: 29,
      yearlyPrice: 290,
      features: [
        "Unlimited questions with Genie",
        "Advanced genetic analysis",
        "Detailed personalized reports",
        "Family history builder",
        "Risk assessment tools",
        "Chat history & export",
        "Priority email support",
        "Early access to new features",
      ],
    },
    family: {
      name: "Family",
      monthlyPrice: 79,
      yearlyPrice: 790,
      features: [
        "Everything in Pro",
        "Up to 6 family member profiles",
        "Shared family genetic reports",
        "Inheritance pattern analysis",
        "Family risk assessments",
        "Genetic counselor consultations (2/month)",
        "Phone & video support",
        "Custom genetic reports",
      ],
    },
  }

const currentPlan = plans[selectedPlan as keyof typeof plans]
  const price = billingCycle === "monthly" ? currentPlan.monthlyPrice : currentPlan.yearlyPrice
  const yearlyDiscount = Math.round(
    ((currentPlan.monthlyPrice * 12 - currentPlan.yearlyPrice) / (currentPlan.monthlyPrice * 12)) * 100,
  )

const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsProcessing(true)
    setErrorMessage("")

const result = await startSubscriptionCheckout(selectedPlan, billingCycle)

if (result.success && result.url) {
      window.location.href = result.url
      return
    }

setIsProcessing(false)
    setErrorMessage(result.message || "Something went wrong. Please try again.")
  }

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold mb-4">Complete Your Subscription</h1>
            <p className="text-gray-600">
              Start your genetic journey with advanced AI counseling and personalized insights
            </p>
          </div>

<div className="grid lg:grid-cols-2 gap-8">
            {/* Plan Selection */}
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Select Your Plan</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {Object.entries(plans).map(([key, plan]) => (
                    <div
                      key={key}
                      className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                        selectedPlan === key ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
                      }`}
                      onClick={() => setSelectedPlan(key)}
                    >
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold">{plan.name} Plan</h3>
                        <div className="text-right">
                          <div className="font-bold">
                            ${billingCycle === "monthly" ? plan.monthlyPrice : plan.yearlyPrice}
                          </div>
                          <div className="text-sm text-gray-600">/{billingCycle === "monthly" ? "month" : "year"}</div>
                        </div>
                      </div>
                      <div className="text-sm text-gray-600">{plan.features.slice(0, 3).join(" • ")}</div>
                    </div>
                  ))}
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Billing Cycle</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      billingCycle === "monthly"
                        ? "border-blue-500 bg-blue-50"
                        : "border-gray-200 hover:border-gray-300"
                    }`}
                    onClick={() => setBillingCycle("monthly")}
                  >
                    <div className="flex items-center justify-between">
                      <span className="font-medium">Monthly</span>
                      <span>${currentPlan.monthlyPrice}/month</span>
                    </div>
                  </div>
                  <div
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      billingCycle === "yearly" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
                    }`}
                    onClick={() => setBillingCycle("yearly")}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <span className="font-medium">Yearly</span>
                        <Badge variant="secondary" className="bg-green-100 text-green-800">
                          Save {yearlyDiscount}%
                        </Badge>
                      </div>
                      <div className="text-right">
                        <div>${currentPlan.yearlyPrice}/year</div>
                        <div className="text-sm text-gray-600">${Math.round(currentPlan.yearlyPrice / 12)}/month</div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Payment Form */}
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Order Summary
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <form onSubmit={handleSubscribe} className="space-y-4">
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span>
                          {currentPlan.name} Plan ({billingCycle})
                        </span>
                        <span>${price}</span>
                      </div>
                      <Separator />
                      <div className="flex justify-between font-bold">
                        <span>Total due today</span>
                        <span>
                          ${price}/{billingCycle === "monthly" ? "mo" : "yr"}
                        </span>
                      </div>
                    </div>

{errorMessage && (
                      <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md p-3">
                        {errorMessage}
                      </p>
                    )}

<Button type="submit" className="w-full" disabled={isProcessing}>
                      {isProcessing ? "Redirecting to checkout..." : `Continue to Secure Checkout`}
                    </Button>

<div className="text-center text-sm text-gray-600">
                      <div className="flex items-center justify-center gap-2 mb-2">
                        <Shield className="h-4 w-4" />
                        <span>Secure payment powered by Stripe</span>
                      </div>
                      <p>Cancel anytime. You'll enter your card details on Stripe's secure page.</p>
                    </div>
                  </form>
                </CardContent>
              </Card>

<Card className="border-green-200 bg-green-50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-green-800">
                    <Star className="h-5 w-5" />
                    What's Included
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {currentPlan.features.map((feature, index) => (
                      <div key={index} className="flex items-start gap-2">
                        <Check className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                        <span className="text-sm text-green-700">{feature}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

export default function GeneticResources() {
  const resources = [
    {
      title: "National Human Genome Research Institute",
      description: "Comprehensive genetic information and research updates",
      url: "https://www.genome.gov",
      icon: BookOpen,
      category: "Education",
    },
    {
      title: "Genetic Alliance",
      description: "Support and advocacy for genetic conditions",
      url: "https://www.geneticalliance.org",
      icon: Users,
      category: "Support",
    },
    {
      title: "National Society of Genetic Counselors",
      description: "Find certified genetic counselors in your area",
      url: "https://www.nsgc.org",
      icon: Shield,
      category: "Professional",
    },
  ]

return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Genetic Resources</h2>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {resources.map((resource, index) => (
          <Card key={index} className="h-full">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-lg">
                <resource.icon className="h-5 w-5" />
                {resource.title}
              </CardTitle>
              <span className="text-xs font-medium px-2.5 py-0.5 rounded bg-blue-100 text-blue-800 w-fit">
                {resource.category}
              </span>
            </CardHeader>
            <CardContent className="flex flex-col justify-between flex-1">
              <p className="text-gray-600 mb-4">{resource.description}</p>
              <Button variant="outline" size="sm" asChild>
                <Link href={resource.url} target="_blank" rel="noopener noreferrer">
                  Visit Resource <ExternalLink className="h-3 w-3 ml-1" />
                </Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import GeneticResources from "@/components/genetic-resources"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, Info, Heart, Brain } from "lucide-react"

export default function ResourcesPage() {
  const conditions = [
    {
      name: "Hereditary Breast and Ovarian Cancer",
      genes: "BRCA1, BRCA2",
      description: "Genetic mutations that increase risk of breast and ovarian cancers",
      icon: Heart,
    },
    {
      name: "Huntington's Disease",
      genes: "HTT",
      description: "Progressive neurodegenerative disorder affecting movement and cognition",
      icon: Brain,
    },
    {
      name: "Cystic Fibrosis",
      genes: "CFTR",
      description: "Genetic disorder affecting lungs and digestive system",
      icon: Heart,
    },
  ]

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto space-y-12">
          <div>
            <h1 className="text-3xl font-bold mb-4">Genetic Resources & Information</h1>
            <p className="text-gray-600 text-lg">
              Access reliable information about genetic conditions, testing, and support resources.
            </p>
          </div>

<Card className="border-amber-200 bg-amber-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-amber-800">
                <AlertTriangle className="h-5 w-5" />
                Important Notice
              </CardTitle>
            </CardHeader>
            <CardContent className="text-amber-700">
              <p>
                The information provided here is for educational purposes only and should not replace professional
                medical advice. Always consult with a healthcare provider or certified genetic counselor for
                personalized guidance.
              </p>
            </CardContent>
          </Card>

<div className="space-y-6">
            <h2 className="text-2xl font-bold">Common Genetic Conditions</h2>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {conditions.map((condition, index) => (
                <Card key={index}>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <condition.icon className="h-5 w-5" />
                      {condition.name}
                    </CardTitle>
                    <p className="text-sm text-blue-600 font-medium">Gene(s): {condition.genes}</p>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600">{condition.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

<Card className="border-blue-200 bg-blue-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-blue-800">
                <Info className="h-5 w-5" />
                Understanding Genetic Testing
              </CardTitle>
            </CardHeader>
            <CardContent className="text-blue-700 space-y-4">
              <div>
                <h3 className="font-semibold mb-2">Types of Genetic Tests:</h3>
                <ul className="list-disc pl-5 space-y-1">
                  <li>
                    <strong>Diagnostic Testing:</strong> Confirms or rules out a genetic condition
                  </li>
                  <li>
                    <strong>Predictive Testing:</strong> Determines risk of developing a condition
                  </li>
                  <li>
                    <strong>Carrier Testing:</strong> Identifies carriers of genetic conditions
                  </li>
                  <li>
                    <strong>Pharmacogenomic Testing:</strong> Guides medication selection and dosing
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold mb-2">Before Getting Tested:</h3>
                <ul className="list-disc pl-5 space-y-1">
                  <li>Consider the potential benefits and limitations</li>
                  <li>Understand how results might affect you and your family</li>
                  <li>Discuss with a genetic counselor or healthcare provider</li>
                  <li>Consider privacy and insurance implications</li>
                </ul>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/subscribe/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/setup/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, AlertTriangle, Key, Database, Zap } from "lucide-react"

export default function SetupPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <h1 className="text-3xl font-bold mb-4">Setup Guide</h1>
            <p className="text-gray-600">
              Follow these steps to get your Cover My Genetics application fully functional.
            </p>
          </div>

<div className="space-y-6">
            {/* OpenAI API Setup */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Key className="h-5 w-5" />
                  1. OpenAI API Configuration
                  <Badge variant="destructive">Required</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <Alert className="border-amber-200 bg-amber-50">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertDescription className="text-amber-800">
                    Genie AI requires an OpenAI API key to function. Without this, the genetic counselor won't be able
                    to respond to questions.
                  </AlertDescription>
                </Alert>

<div className="space-y-3">
                  <h3 className="font-semibold">Steps to configure:</h3>
                  <ol className="list-decimal list-inside space-y-2 text-sm">
                    <li>
                      Go to{" "}
                      <a
                        href="https://platform.openai.com/api-keys"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-600 hover:underline"
                      >
                        OpenAI API Keys
                      </a>
                    </li>
                    <li>Create a new API key (you'll need to add billing information)</li>
                    <li>Copy the API key</li>
                    <li>
                      Add it to your environment variables as{" "}
                      <code className="bg-gray-100 px-1 rounded">OPENAI_API_KEY</code>
                    </li>
                  </ol>
                </div>

<div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-medium mb-2">Environment Variable Setup:</h4>
                  <div className="space-y-2">
                    <p className="text-sm">
                      <strong>For local development:</strong>
                    </p>
                    <code className="block bg-gray-800 text-green-400 p-2 rounded text-sm">
                      # Create a .env.local file in your project root
                      <br />
                      OPENAI_API_KEY=your_api_key_here
                    </code>

<p className="text-sm mt-4">
                      <strong>For Vercel deployment:</strong>
                    </p>
                    <ol className="list-decimal list-inside text-sm space-y-1">
                      <li>Go to your Vercel project dashboard</li>
                      <li>Navigate to Settings → Environment Variables</li>
                      <li>
                        Add <code>OPENAI_API_KEY</code> with your API key value
                      </li>
                      <li>Redeploy your application</li>
                    </ol>
                  </div>
                </div>

<Alert className="border-green-200 bg-green-50">
                  <CheckCircle className="h-4 w-4" />
                  <AlertDescription className="text-green-800">
                    <strong>Cost Estimate:</strong> OpenAI GPT-4 costs approximately $0.03 per 1K tokens. A typical
                    conversation costs $0.10-$0.50.
                  </AlertDescription>
                </Alert>
              </CardContent>
            </Card>

{/* Optional Enhancements */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Database className="h-5 w-5" />
                  2. Database Setup (Optional)
                  <Badge variant="secondary">Recommended</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-gray-600">
                  For production use, you'll want to add a database to store user accounts, subscription status, and
                  usage tracking.
                </p>

<div className="grid md:grid-cols-2 gap-4">
                  <div className="p-4 border rounded-lg">
                    <h4 className="font-medium mb-2">Supabase (Recommended)</h4>
                    <ul className="text-sm space-y-1 text-gray-600">
                      <li>• Built-in authentication</li>
                      <li>• Real-time subscriptions</li>
                      <li>• Easy integration</li>
                    </ul>
                  </div>
                  <div className="p-4 border rounded-lg">
                    <h4 className="font-medium mb-2">Neon PostgreSQL</h4>
                    <ul className="text-sm space-y-1 text-gray-600">
                      <li>• Serverless PostgreSQL</li>
                      <li>• Auto-scaling</li>
                      <li>• Generous free tier</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Payment Processing */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Zap className="h-5 w-5" />
                  3. Payment Processing (Optional)
                  <Badge variant="secondary">For Subscriptions</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-gray-600">
                  To enable paid subscriptions, integrate with Stripe for payment processing.
                </p>

<div className="space-y-3">
                  <h4 className="font-medium">Required Environment Variables:</h4>
                  <code className="block bg-gray-800 text-green-400 p-2 rounded text-sm">
                    STRIPE_SECRET_KEY=sk_test_...
                    <br />
                    STRIPE_PUBLISHABLE_KEY=pk_test_...
                    <br />
                    STRIPE_WEBHOOK_SECRET=whsec_...
                  </code>
                </div>
              </CardContent>
            </Card>

{/* Testing */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="h-5 w-5" />
                  4. Test Your Setup
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-3">
                  <h4 className="font-medium">Verify everything is working:</h4>
                  <ol className="list-decimal list-inside space-y-2 text-sm">
                    <li>Navigate to the "Ask Genie" page</li>
                    <li>Try asking a sample question like "What is genetics?"</li>
                    <li>Verify Genie responds with helpful information</li>
                    <li>Check that usage tracking updates correctly</li>
                  </ol>
                </div>

<Alert className="border-blue-200 bg-blue-50">
                  <CheckCircle className="h-4 w-4" />
                  <AlertDescription className="text-blue-800">
                    <strong>Pro Tip:</strong> Start with a small OpenAI usage limit to control costs while testing.
                  </AlertDescription>
                </Alert>
              </CardContent>
            </Card>
          </div>

<div className="mt-8 text-center">
            <p className="text-gray-600">
              Need help with setup?{" "}
              <a href="/contact-us" className="text-blue-600 hover:underline">
                Contact our support team
              </a>
            </p>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Key, Shield, Eye, EyeOff, CheckCircle, AlertTriangle, ExternalLink } from "lucide-react"
import Link from "next/link"

export default function ProfilePage() {
  const [apiKey, setApiKey] = useState("")
  const [showApiKey, setShowApiKey] = useState(false)
  const [isValidating, setIsValidating] = useState(false)
  const [apiKeyStatus, setApiKeyStatus] = useState<"none" | "valid" | "invalid">("none")

const handleApiKeySubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsValidating(true)

// Simulate API key validation
    setTimeout(() => {
      if (apiKey.startsWith("sk-") && apiKey.length > 20) {
        setApiKeyStatus("valid")
      } else {
        setApiKeyStatus("invalid")
      }
      setIsValidating(false)
    }, 1500)
  }

const handleRemoveApiKey = () => {
    setApiKey("")
    setApiKeyStatus("none")
  }

return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="mb-8">
            <h1 className="text-3xl font-bold mb-2">Profile Settings</h1>
            <p className="text-gray-600">Manage your account and API configuration</p>
          </div>

<Tabs defaultValue="api-key" className="space-y-6">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="api-key">API Configuration</TabsTrigger>
              <TabsTrigger value="account">Account Settings</TabsTrigger>
              <TabsTrigger value="billing">Billing</TabsTrigger>
            </TabsList>

<TabsContent value="api-key" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Key className="h-5 w-5" />
                    OpenAI API Key Configuration
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  {apiKeyStatus === "none" && (
                    <Alert className="border-blue-200 bg-blue-50">
                      <Key className="h-4 w-4" />
                      <AlertDescription className="text-blue-800">
                        <strong>No API key configured.</strong> Add your OpenAI API key for unlimited access to Genie at
                        cost. You'll pay OpenAI directly (typically $5-15/month).
                      </AlertDescription>
                    </Alert>
                  )}

{apiKeyStatus === "valid" && (
                    <Alert className="border-green-200 bg-green-50">
                      <CheckCircle className="h-4 w-4" />
                      <AlertDescription className="text-green-800">
                        <strong>API key is active!</strong> You now have unlimited access to Genie. Your usage will be
                        billed directly by OpenAI.
                      </AlertDescription>
                    </Alert>
                  )}

{apiKeyStatus === "invalid" && (
                    <Alert className="border-red-200 bg-red-50">
                      <AlertTriangle className="h-4 w-4" />
                      <AlertDescription className="text-red-800">
                        <strong>Invalid API key.</strong> Please check your API key and try again. Make sure it starts
                        with "sk-" and is from your OpenAI dashboard.
                      </AlertDescription>
                    </Alert>
                  )}

<form onSubmit={handleApiKeySubmit} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="apiKey">OpenAI API Key</Label>
                      <div className="relative">
                        <Input
                          id="apiKey"
                          type={showApiKey ? "text" : "password"}
                          value={apiKey}
                          onChange={(e) => setApiKey(e.target.value)}
                          placeholder="sk-..."
                          className="pr-10"
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3"
                          onClick={() => setShowApiKey(!showApiKey)}
                        >
                          {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </Button>
                      </div>
                      <p className="text-sm text-gray-600">
                        Your API key is encrypted and stored securely. We never see your conversations.
                      </p>
                    </div>

<div className="flex gap-2">
                      <Button type="submit" disabled={!apiKey || isValidating}>
                        {isValidating ? "Validating..." : apiKeyStatus === "valid" ? "Update API Key" : "Save API Key"}
                      </Button>
                      {apiKeyStatus === "valid" && (
                        <Button type="button" variant="outline" onClick={handleRemoveApiKey}>
                          Remove API Key
                        </Button>
                      )}
                    </div>
                  </form>

<div className="border-t pt-6">
                    <h3 className="font-semibold mb-3">Need an API Key?</h3>
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="p-4 border rounded-lg">
                        <h4 className="font-medium mb-2">1. Create OpenAI Account</h4>
                        <p className="text-sm text-gray-600 mb-3">
                          Sign up and add billing information to your OpenAI account
                        </p>
                        <Button variant="outline" size="sm" asChild>
                          <Link href="https://platform.openai.com/signup" target="_blank" rel="noopener noreferrer">
                            Sign Up <ExternalLink className="h-3 w-3 ml-1" />
                          </Link>
                        </Button>
                      </div>
                      <div className="p-4 border rounded-lg">
                        <h4 className="font-medium mb-2">2. Generate API Key</h4>
                        <p className="text-sm text-gray-600 mb-3">Create a new API key in your OpenAI dashboard</p>
                        <Button variant="outline" size="sm" asChild>
                          <Link href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
                            Get API Key <ExternalLink className="h-3 w-3 ml-1" />
                          </Link>
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="h-5 w-5" />
                    Security & Privacy
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <div>
                        <h4 className="font-medium">End-to-End Encryption</h4>
                        <p className="text-sm text-gray-600">Your API key is encrypted using AES-256</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <div>
                        <h4 className="font-medium">Zero-Log Policy</h4>
                        <p className="text-sm text-gray-600">We never store or see your conversations</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <div>
                        <h4 className="font-medium">Direct Connection</h4>
                        <p className="text-sm text-gray-600">Your data goes directly to OpenAI</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <div>
                        <h4 className="font-medium">Revoke Anytime</h4>
                        <p className="text-sm text-gray-600">Remove your API key instantly</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="account" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Account Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">Full Name</Label>
                      <Input id="name" defaultValue="Sarah Johnson" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email Address</Label>
                      <Input id="email" type="email" defaultValue="sarah@example.com" />
                    </div>
                  </div>
                  <Button>Update Account</Button>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="billing" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Current Plan</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="font-semibold">{apiKeyStatus === "valid" ? "Bring Your Own API" : "Free Plan"}</h3>
                      <p className="text-sm text-gray-600">
                        {apiKeyStatus === "valid"
                          ? "Using your OpenAI API key for unlimited access"
                          : "5 questions per month"}
                      </p>
                    </div>
                    <Badge variant={apiKeyStatus === "valid" ? "default" : "secondary"}>
                      {apiKeyStatus === "valid" ? "Active" : "Free"}
                    </Badge>
                  </div>
                  <div className="flex gap-2">
                    <Link href="/pricing">
                      <Button variant="outline">View All Plans</Button>
                    </Link>
                    {apiKeyStatus !== "valid" && (
                      <Link href="/api-setup">
                        <Button>Set Up API Key</Button>
                      </Link>
                    )}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]png:file="public/hero-dna.png" url="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&h=600&q=80" isMerged="true"
[V0_FILE]png:file="public/genetic-counselor.png" url="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true"
[V0_FILE]png:file="public/family-genetics.png" url="https://images.unsplash.com/photo-1559757175-0eb30cd8c063?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true"
[V0_FILE]png:file="public/lab-research.png" url="https://images.unsplash.com/photo-1582719471384-894fbb16e074?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&h=600&q=80" isMerged="true"
[V0_FILE]png:file="public/genie-avatar.png" url="https://images.unsplash.com/photo-1677442136019-21780ecad995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80" isMerged="true"
[V0_FILE]typescriptreact:file="components/who-is-genie.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Brain, Heart, Shield, Sparkles } from "lucide-react"

export default function WhoIsGenie() {
  const features = [
    {
      icon: Brain,
      title: "Advanced AI",
      description: "Powered by cutting-edge machine learning algorithms",
    },
    {
      icon: Heart,
      title: "Empathetic Care",
      description: "Designed to provide compassionate genetic guidance",
    },
    {
      icon: Shield,
      title: "Privacy First",
      description: "Your genetic data remains completely confidential",
    },
  ]

return (
    <section className="w-full py-16 md:py-24 bg-white">
      <div className="container px-4 md:px-6">
        <div className="grid gap-12 lg:grid-cols-2 items-center">
          <div className="relative order-2 lg:order-1">
            <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-2xl blur-2xl opacity-20 scale-110"></div>
            <Image
              src="/genetic-counselor.png"
              alt="Genetic counselor consulting with patient"
              width={600}
              height={400}
              className="relative rounded-2xl shadow-xl"
            />
          </div>

<div className="flex flex-col justify-center space-y-6 order-1 lg:order-2">
            <div className="space-y-4">
              <Badge variant="secondary" className="w-fit bg-blue-100 text-blue-800 border-blue-200">
                <Sparkles className="h-3 w-3 mr-1" />
                Meet Your AI Counselor
              </Badge>

<h2 className="text-3xl font-bold tracking-tight sm:text-4xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                Who is Genie?
              </h2>

<p className="text-gray-600 md:text-lg leading-relaxed">
                Genie is a state-of-the-art artificial intelligence system designed to provide personalized guidance and{" "}
                <Link href="/services" className="text-emerald-600 hover:underline font-medium">
                  genetic counseling services
                </Link>{" "}
                as you navigate through your genetic journey. Built on the foundations of advanced machine learning
                algorithms, Genie taps into a comprehensive database of genetic research.
              </p>
            </div>

<div className="grid gap-4 sm:grid-cols-1">
              {features.map((feature, index) => (
                <Card key={index} className="border-gray-100 hover:border-emerald-200 transition-colors">
                  <CardContent className="flex items-center gap-4 p-4">
                    <div className="p-2 bg-emerald-100 rounded-lg">
                      <feature.icon className="h-5 w-5 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">{feature.title}</h3>
                      <p className="text-sm text-gray-600">{feature.description}</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

<div className="flex gap-4">
              <Link href="/ask-genie">
                <Button className="bg-emerald-600 hover:bg-emerald-700">Start Conversation</Button>
              </Link>
              <Link href="/resources">
                <Button variant="outline" className="border-emerald-200 hover:bg-emerald-50">
                  Learn More
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Custom gradient animations */
@keyframes gradient-x {
  0%,
  100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-100%);
  }
}

.animate-gradient-x {
  animation: gradient-x 15s ease infinite;
  background-size: 200% 200%;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom focus styles */
.focus-visible:focus-visible {
  @apply ring-2 ring-emerald-500 ring-offset-2 outline-none;
}
[V0_FILE]typescriptreact:file="components/features-section.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Brain, Shield, Zap, Users, Heart, FileText } from "lucide-react"
import Image from "next/image"

export default function FeaturesSection() {
  const features = [
    {
      icon: Brain,
      title: "AI-Powered Analysis",
      description: "Advanced machine learning algorithms analyze your genetic data with precision",
      color: "bg-blue-100 text-blue-600",
    },
    {
      icon: Shield,
      title: "Privacy Protected",
      description: "Your genetic information is encrypted and never shared with third parties",
      color: "bg-green-100 text-green-600",
    },
    {
      icon: Zap,
      title: "Instant Insights",
      description: "Get immediate answers to your genetic questions 24/7",
      color: "bg-yellow-100 text-yellow-600",
    },
    {
      icon: Users,
      title: "Family Planning",
      description: "Understand inheritance patterns and genetic risks for your family",
      color: "bg-purple-100 text-purple-600",
    },
    {
      icon: Heart,
      title: "Health Guidance",
      description: "Personalized recommendations based on your genetic profile",
      color: "bg-red-100 text-red-600",
    },
    {
      icon: FileText,
      title: "Detailed Reports",
      description: "Comprehensive genetic reports you can share with healthcare providers",
      color: "bg-indigo-100 text-indigo-600",
    },
  ]

return (
    <section className="w-full py-16 md:py-24 bg-gray-50">
      <div className="container px-4 md:px-6">
        <div className="text-center mb-12">
          <Badge variant="secondary" className="mb-4 bg-emerald-100 text-emerald-800">
            Why Choose Cover My Genetics
          </Badge>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">Comprehensive Genetic Insights</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Our platform combines cutting-edge AI technology with genetic expertise to provide you with personalized
            insights and guidance for your genetic journey.
          </p>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-12">
          {features.map((feature, index) => (
            <Card key={index} className="border-gray-200 hover:border-emerald-200 transition-colors hover:shadow-lg">
              <CardHeader>
                <div className={`w-12 h-12 rounded-lg ${feature.color} flex items-center justify-center mb-4`}>
                  <feature.icon className="h-6 w-6" />
                </div>
                <CardTitle className="text-xl">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <h3 className="text-2xl font-bold mb-4">Trusted by Families Worldwide</h3>
            <p className="text-gray-600 mb-6">
              Join thousands of families who have unlocked their genetic potential with Cover My Genetics. Our
              AI-powered platform makes complex genetic information accessible and actionable.
            </p>
            <div className="grid grid-cols-3 gap-4 text-center">
              <div>
                <div className="text-2xl font-bold text-emerald-600">10K+</div>
                <div className="text-sm text-gray-600">Families Served</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-emerald-600">50K+</div>
                <div className="text-sm text-gray-600">Questions Answered</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-emerald-600">99.9%</div>
                <div className="text-sm text-gray-600">Uptime</div>
              </div>
            </div>
          </div>
          <div className="relative">
            <Image
              src="/family-genetics.png"
              alt="Family discussing genetic health"
              width={600}
              height={400}
              className="rounded-2xl shadow-xl"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  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))",
        },
        emerald: {
          50: "#ecfdf5",
          100: "#d1fae5",
          200: "#a7f3d0",
          300: "#6ee7b7",
          400: "#34d399",
          500: "#10b981",
          600: "#059669",
          700: "#047857",
          800: "#065f46",
          900: "#064e3b",
        },
      },
      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" },
        },
        "gradient-x": {
          "0%, 100%": {
            "background-size": "200% 200%",
            "background-position": "left center",
          },
          "50%": {
            "background-size": "200% 200%",
            "background-position": "right center",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "gradient-x": "gradient-x 15s ease infinite",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import Image from "next/image"
import { Sparkles, Shield, Zap } from "lucide-react"

export default function HeroSection() {
  return (
    <section className="relative w-full py-12 md:py-24 bg-gradient-to-br from-emerald-50 via-blue-50 to-purple-50 overflow-hidden">
      {/* Background Pattern */}
      <div
        className="absolute inset-0 opacity-40"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23059669' fillOpacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }}
      ></div>

<div className="container px-4 md:px-6 relative">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
          <div className="flex flex-col justify-center space-y-6">
            <div className="space-y-4">
              <Badge variant="secondary" className="w-fit bg-emerald-100 text-emerald-800 border-emerald-200">
                <Sparkles className="h-3 w-3 mr-1" />
                World's First AI Genetic Counselor
              </Badge>

<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 bg-clip-text text-transparent">
                Unlock Your Code: Meet Genie
              </h1>

<h2 className="text-xl text-gray-600 sm:text-2xl">Your Personal AI Genetic Counselor</h2>

<p className="text-gray-600 md:text-lg leading-relaxed">
                At Cover My Genetics, we believe that understanding your genetic makeup is the key to unlocking valuable
                insights about your health, well-being, and even your ancestry. Genie makes complex genetic information
                accessible and personalized just for you.
              </p>
            </div>

<div className="flex flex-col sm:flex-row gap-4">
              <Link href="/ask-genie">
                <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white">
                  <Sparkles className="h-4 w-4 mr-2" />
                  Ask Genie Now
                </Button>
              </Link>
              <Link href="/api-setup">
                <Button size="lg" variant="outline" className="border-emerald-200 hover:bg-emerald-50">
                  <Zap className="h-4 w-4 mr-2" />
                  Unlimited Access
                </Button>
              </Link>
            </div>

<div className="flex items-center gap-6 text-sm text-gray-600">
              <div className="flex items-center gap-2">
                <Shield className="h-4 w-4 text-emerald-600" />
                <span>HIPAA Compliant</span>
              </div>
              <div className="flex items-center gap-2">
                <Zap className="h-4 w-4 text-emerald-600" />
                <span>Instant Responses</span>
              </div>
            </div>
          </div>

<div className="flex justify-center lg:justify-end">
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 to-blue-500 rounded-2xl blur-2xl opacity-20 scale-110"></div>
              <Image
                src="/hero-dna.png"
                alt="DNA Helix and Genetic Analysis"
                width={600}
                height={400}
                className="relative rounded-2xl shadow-2xl"
                priority
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/background-pattern.tsx" isMerged="true"
export default function BackgroundPattern() {
  return (
    <svg
      className="absolute inset-0 w-full h-full opacity-40"
      width="60"
      height="60"
      viewBox="0 0 60 60"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <pattern id="genetic-pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
          <circle cx="30" cy="30" r="2" fill="#059669" fillOpacity="0.05" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#genetic-pattern)" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section-alt.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import Image from "next/image"
import { Sparkles, Shield, Zap } from "lucide-react"
import BackgroundPattern from "./background-pattern"

export default function HeroSectionAlt() {
  return (
    <section className="relative w-full py-12 md:py-24 bg-gradient-to-br from-emerald-50 via-blue-50 to-purple-50 overflow-hidden">
      {/* Background Pattern */}
      <BackgroundPattern />

<div className="container px-4 md:px-6 relative">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
          <div className="flex flex-col justify-center space-y-6">
            <div className="space-y-4">
              <Badge variant="secondary" className="w-fit bg-emerald-100 text-emerald-800 border-emerald-200">
                <Sparkles className="h-3 w-3 mr-1" />
                {"World's First AI Genetic Counselor"}
              </Badge>

<h2 className="text-xl text-gray-600 sm:text-2xl">Your Personal AI Genetic Counselor</h2>

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <HeroSection />
      <WhoIsGenie />
      <FeaturesSection />
      <Footer />
    </main>
  )
}
[V0_FILE]xml:file="public/logo.svg" isMerged="true"
[V0_FILE]typescriptreact:file="components/logo.tsx" isMerged="true"
import { Dna } from "lucide-react"
import Link from "next/link"

interface LogoProps {
  className?: string
  showText?: boolean
  variant?: "light" | "dark"
}

export default function Logo({ className = "", showText = true, variant = "light" }: LogoProps) {
  const textColor = variant === "light" ? "text-emerald-600" : "text-emerald-400"
  const subtextColor = variant === "light" ? "text-gray-600" : "text-gray-400"

return (
    <Link href="/" className={`flex items-center gap-2 ${className}`}>
      <div className="w-8 h-8 bg-emerald-600 rounded-full flex items-center justify-center">
        <Dna className="h-5 w-5 text-white" />
      </div>
      {showText && (
        <div className="flex flex-col">
          <span className={`text-lg font-bold ${textColor}`}>CMG</span>
          <span className={`text-xs ${subtextColor} leading-none`}>COVER MY GENETICS</span>
        </div>
      )}
    </Link>
  )
}
[V0_FILE]plaintext:file="public/favicon.ico" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/counselors/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import CounselorDirectory from "@/components/counselor-directory"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, Star, Users } from "lucide-react"
import Link from "next/link"

export default function CounselorsPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Find a Certified Genetic Counselor</h1>
            <p className="text-xl text-gray-600 mb-6">
              Connect with board-certified genetic counselors for professional consultation and validation
            </p>
            <div className="flex items-center justify-center gap-4 mb-8">
              <Badge variant="secondary" className="text-sm">
                <Shield className="h-3 w-3 mr-1" />
                Board Certified Only
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Star className="h-3 w-3 mr-1" />
                Verified Professionals
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <Users className="h-3 w-3 mr-1" />
                500+ Counselors
              </Badge>
            </div>
          </div>

{/* When to See a Genetic Counselor */}
          <Card className="mb-8 border-blue-200 bg-blue-50">
            <CardHeader>
              <CardTitle className="text-blue-800">When Should You See a Genetic Counselor?</CardTitle>
            </CardHeader>
            <CardContent className="text-blue-700">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <h4 className="font-semibold mb-2">Consider a consultation if you have:</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• Family history of genetic conditions</li>
                    <li>• Abnormal genetic test results</li>
                    <li>• Planning pregnancy with genetic concerns</li>
                    <li>• Multiple family members with cancer</li>
                    <li>• Unexplained developmental delays</li>
                  </ul>
                </div>
                <div>
                  <h4 className="font-semibold mb-2">What they can help with:</h4>
                  <ul className="space-y-1 text-sm">
                    <li>• Interpret complex genetic test results</li>
                    <li>• Assess genetic risks for you and family</li>
                    <li>• Provide emotional support and guidance</li>
                    <li>• Coordinate with your healthcare team</li>
                    <li>• Discuss family planning options</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>

{/* For Genetic Counselors */}
          <Card className="mt-12 border-emerald-200 bg-emerald-50">
            <CardHeader>
              <CardTitle className="text-emerald-800">Are You a Genetic Counselor?</CardTitle>
            </CardHeader>
            <CardContent className="text-emerald-700">
              <div className="grid md:grid-cols-2 gap-6 items-center">
                <div>
                  <h4 className="font-semibold mb-3">Join Our Directory & Get Quality Leads</h4>
                  <ul className="space-y-2 text-sm mb-4">
                    <li>• Connect with patients who need your expertise</li>
                    <li>• Pre-qualified leads from our AI screening</li>
                    <li>• Flexible pricing - pay only for leads you want</li>
                    <li>• Professional profile with patient reviews</li>
                    <li>• Integration with telehealth platforms</li>
                  </ul>
                  <div className="flex gap-3">
                    <Link href="/counselors/join">
                      <Button className="bg-emerald-600 hover:bg-emerald-700">Join Directory</Button>
                    </Link>
                    <Link href="/counselors/pricing">
                      <Button variant="outline" className="border-emerald-600 text-emerald-600 hover:bg-emerald-50">
                        View Pricing
                      </Button>
                    </Link>
                  </div>
                </div>
                <div className="bg-white p-6 rounded-lg border border-emerald-200">
                  <h5 className="font-semibold mb-3">Lead Quality Stats</h5>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span>Average lead value:</span>
                      <span className="font-semibold">$150-300</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Conversion rate:</span>
                      <span className="font-semibold">35-45%</span>
                    </div>
                    <div className="flex justify-between">
                      <span>Avg. consultation fee:</span>
                      <span className="font-semibold">$200-400</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/counselors/join/page.tsx" isMerged="true"
import Navbar from "@/components/navbar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, DollarSign, Users, TrendingUp, Star, Shield } from "lucide-react"

export default function JoinCounselorsPage() {
  return (
    <main className="min-h-screen flex flex-col">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">Join Our Genetic Counselor Directory</h1>
            <p className="text-xl text-gray-600 mb-6">
              Connect with qualified patients and grow your practice with our lead generation platform
            </p>
            <div className="flex items-center justify-center gap-4">
              <Badge variant="secondary" className="text-sm">
                <Users className="h-3 w-3 mr-1" />
                10,000+ Monthly Visitors
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <TrendingUp className="h-3 w-3 mr-1" />
                35% Average Conversion
              </Badge>
              <Badge variant="secondary" className="text-sm">
                <DollarSign className="h-3 w-3 mr-1" />
                $200+ Average Consultation
              </Badge>
            </div>
          </div>

<div className="grid lg:grid-cols-2 gap-12">
            {/* Application Form */}
            <Card>
              <CardHeader>
                <CardTitle>Apply to Join Our Directory</CardTitle>
              </CardHeader>
              <CardContent>
                <form className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="firstName">First Name</Label>
                      <Input id="firstName" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="lastName">Last Name</Label>
                      <Input id="lastName" required />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Professional Email</Label>
                    <Input id="email" type="email" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="credentials">Credentials</Label>
                    <Input id="credentials" placeholder="e.g., MS, CGC, PhD" required />
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="license">License Number</Label>
                      <Input id="license" required />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="state">Licensed State(s)</Label>
                      <Input id="state" placeholder="e.g., CA, NY, TX" required />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="specialties">Specialties</Label>
                    <Input id="specialties" placeholder="e.g., Cancer Genetics, Prenatal, Cardiovascular" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="experience">Years of Experience</Label>
                    <Input id="experience" type="number" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="consultationFee">Consultation Fee Range</Label>
                    <Input id="consultationFee" placeholder="e.g., $200-300" required />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="bio">Professional Bio</Label>
                    <Textarea
                      id="bio"
                      className="min-h-[100px]"
                      placeholder="Brief description of your expertise and approach..."
                      required
                    />
                  </div>