aa:I[903690,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/0t6ytllohkn0t.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/3y9uy30_vf_ol.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"ExplicitChatIdProvider"] ab:I[838238,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/0t6ytllohkn0t.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/3y9uy30_vf_ol.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"SWRDataProvider"] ad:[] ae:[["b_8BQfiTWiN21",null],["b_yx5IMnJf8BZ",null]] af:[["b_8BQfiTWiN21",{"templateVersionId":null,"templateCanonId":null}],["b_yx5IMnJf8BZ",{"templateVersionId":null,"templateCanonId":null}]] b0:[["faCSaqe8ff1","$D2025-07-24T00:07:01.191Z"],["b_g3SSbGwsAR6","$D2025-07-24T00:48:21.101Z"],["b_Xa3MNo0tS1w","$D2025-07-24T00:55:28.289Z"],["b_O8YpsNPhe0W","$D2025-07-24T00:55:59.614Z"],["b_qwJchHNe01I","$D2025-07-24T00:56:18.670Z"],["b_yBh0T93It52","$D2025-07-24T01:00:49.563Z"],["b_sCdiQ3cAo3n","$D2025-07-24T01:12:57.581Z"],["b_tuE7SndnRQU","$D2025-07-24T01:18:23.154Z"],["b_OOt9AJ3eaVU","$D2025-07-24T01:18:26.372Z"],["b_lsnAPNQIFOH","$D2025-07-24T01:20:33.934Z"],["b_2p1AQRVCwao","$D2025-07-24T01:22:33.433Z"],["b_hkRirExVkm7","$D2025-07-24T01:28:46.123Z"],["b_r2mdw006ggc","$D2025-07-25T18:29:06.619Z"],["b_lLkDKuXJAka","$D2025-07-25T18:39:27.481Z"],["b_nIVetM84O63","$D2025-07-25T18:48:50.651Z"],["b_phLoF8DIBud","$D2025-07-25T18:49:49.302Z"],["b_msGczYZkQKG","$D2025-07-25T19:03:14.622Z"],["b_kp90AVLdW0X","$D2025-07-26T03:10:02.564Z"],["b_IUG5PvomtcF","$D2025-07-26T03:20:22.934Z"],["b_1QaYor100Gb","$D2025-07-26T10:27:33.404Z"],["b_K7xk5FEYJPO","$D2025-07-26T10:31:09.712Z"],["b_diQTXg6ziCG","$D2025-07-26T10:41:07.892Z"],["b_XF9BiKZn0wk","$D2025-07-26T10:44:55.710Z"],["b_miuZri7Tcwm","$D2025-07-26T10:49:32.386Z"],["b_vebEy0PsudA","$D2025-07-26T10:50:04.322Z"],["b_9ofz8B8YzYq","$D2025-07-26T11:28:59.879Z"],["b_3sdkdLRVAGy","$D2025-07-26T12:24:50.031Z"],["b_lErv015pHw1","$D2025-07-26T12:27:56.498Z"],["b_YF5slRwN9EW","$D2025-07-26T12:37:54.193Z"],["b_rqS3vZADuyz","$D2025-07-26T12:45:54.096Z"],["b_WvhY7VPCVDT","$D2025-07-26T13:18:18.407Z"],["b_jDVHu4pOFc8","$D2025-07-26T13:29:15.189Z"],["b_zYwuBugbNIh","$D2025-07-26T13:34:16.210Z"],["b_IIYCLnATdb8","$D2025-07-26T13:45:27.554Z"],["b_FvQja2ZUo6n","$D2025-07-26T13:50:15.112Z"],["b_bfNtv4ZG6E3","$D2025-07-26T13:55:46.501Z"],["b_qHOLPvBnmBx","$D2025-07-26T13:58:22.100Z"],["b_Pr5Peevj7tV","$D2025-07-26T15:13:56.496Z"],["b_fq0VWM2ibBd","$D2025-08-06T15:50:41.581Z"],["b_LDUtFH4ZzUp","$D2025-08-14T03:28:19.298Z"],["b_8BQfiTWiN21","$D2025-08-26T01:41:49.587Z"],["b_yx5IMnJf8BZ","$D2025-08-26T01:44:35.512Z"]] b1:[["b_8BQfiTWiN21",false],["b_yx5IMnJf8BZ",false]] b2:[["b_8BQfiTWiN21","$undefined"],["b_yx5IMnJf8BZ","$undefined"]] b3:[["b_8BQfiTWiN21",null],["b_yx5IMnJf8BZ",null]] b4:[["b_8BQfiTWiN21",true],["b_yx5IMnJf8BZ",true]] b5:[["b_8BQfiTWiN21",true],["b_yx5IMnJf8BZ",true]] b6:[] b7:T862af,[V0_FILE]markdown:file="README.md" isMerged="true" # Lokate.ai *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/yPccgocgNxs) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai](https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/yPccgocgNxs](https://v0.dev/chat/projects/yPccgocgNxs)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/forgot-password/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" interface ResetToken { email: string token: string expiresAt: number createdAt: number used: boolean } export async function POST(request: NextRequest) { try { const { email } = await request.json() if (!email) { return NextResponse.json({ error: "Email is required" }, { status: 400 }) } // Basic email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json({ error: "Please enter a valid email address" }, { status: 400 }) } // Check if email exists in our user database const emailExists = checkEmailExists(email) // Always return the same message for security (prevent email enumeration) const message = "If the email has been used, a reset link will be sent" // Only generate and send token if email exists if (emailExists) { // Generate a unique 16-character hex token const token = generateResetToken() // Store token with 15-minute expiration const resetToken: ResetToken = { email, token, expiresAt: Date.now() + 15 * 60 * 1000, // 15 minutes createdAt: Date.now(), used: false, } // Save token to storage saveResetToken(resetToken) // Generate reset URL const resetUrl = `https://lokate.ai/reset-password?token=${token}` // Send email with reset link await sendResetEmail(email, resetUrl, token) console.log(`Password reset requested for: ${email}`) console.log(`Reset token generated: ${token}`) console.log(`Reset URL: ${resetUrl}`) } else { console.log(`Password reset requested for non-existent email: ${email}`) } return NextResponse.json({ message }, { status: 200 }) } catch (error) { console.error("Forgot password error:", error) return NextResponse.json({ error: "Failed to process request" }, { status: 500 }) } } // Generate a 16-character hex token function generateResetToken(): string { const chars = "0123456789abcdef" let token = "" for (let i = 0; i < 16; i++) { token += chars[Math.floor(Math.random() * chars.length)] } return token } // Check if email exists in user database function checkEmailExists(email: string): boolean { try { // In a real application, this would query your database if (typeof window !== "undefined") { const existingUsersJson = localStorage.getItem("lokateUsers") || "[]" const existingUsers = JSON.parse(existingUsersJson) return existingUsers.some((user: any) => user.username === email) } return false } catch (error) { console.error("Error checking email existence:", error) return false } } // Save reset token to storage function saveResetToken(resetToken: ResetToken): void { try { // In a real application, this would save to your database if (typeof window !== "undefined") { const existingTokens = JSON.parse(localStorage.getItem("resetTokens") || "[]") // Remove any existing tokens for this email const filteredTokens = existingTokens.filter((token: ResetToken) => token.email !== resetToken.email) // Add new token filteredTokens.push(resetToken) localStorage.setItem("resetTokens", JSON.stringify(filteredTokens)) } } catch (error) { console.error("Error saving reset token:", error) } } // Send reset email async function sendResetEmail(email: string, resetUrl: string, token: string): Promise { try { // In a real application, you would use your email service here // For demo purposes, we'll log the email content const emailContent = ` Subject: Reset Your Lokate.ai Password Dear User, You have requested to reset your password for your Lokate.ai account. Click the link below to reset your password: ${resetUrl} This link will expire in 15 minutes for security reasons. If you did not request this password reset, please ignore this email. Best regards, The Lokate.ai Team --- This email was sent from admin@lokate.ai Reset Token: ${token} ` console.log("=== EMAIL SENT ===") console.log(`From: admin@lokate.ai`) console.log(`To: ${email}`) console.log(`Content:`) console.log(emailContent) console.log("=== END EMAIL ===") // Here you would integrate with your email service: // await emailService.send({ // from: 'admin@lokate.ai', // to: email, // subject: 'Reset Your Lokate.ai Password', // html: emailTemplate // }) } catch (error) { console.error("Error sending reset email:", error) throw error } } [V0_FILE]typescript:file="app/api/reset-password/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { passwordUtils } from "@/lib/password-utils" interface ResetToken { email: string token: string expiresAt: number createdAt: number used: boolean } interface UserCredentials { username: string hashedPassword: string } export async function POST(request: NextRequest) { try { const { token, password } = await request.json() if (!token || !password) { return NextResponse.json({ error: "Token and password are required" }, { status: 400 }) } if (password.length < 8) { return NextResponse.json({ error: "Password must be at least 8 characters long" }, { status: 400 }) } // Get stored reset tokens const storedTokens = getStoredResetTokens() // Find the token and get the user's email const resetTokenIndex = storedTokens.findIndex((t: ResetToken) => t.token === token) const resetToken = storedTokens[resetTokenIndex] if (!resetToken) { return NextResponse.json({ error: "Invalid reset token" }, { status: 400 }) } // Check if token has expired (15 minutes) if (Date.now() > resetToken.expiresAt) { return NextResponse.json({ error: "Reset token has expired" }, { status: 400 }) } // Check if token has already been used if (resetToken.used) { return NextResponse.json({ error: "Reset token has already been used" }, { status: 400 }) } console.log(`Processing password reset for user: ${resetToken.email}`) console.log(`Using token: ${token}`) // Hash the new password using the same algorithm const newHashedPassword = await passwordUtils.hashPassword(password) // Update user's password in database - the token tells us which user const updateSuccess = await updateUserPassword(resetToken.email, newHashedPassword) if (!updateSuccess) { return NextResponse.json({ error: "Failed to update password. User not found." }, { status: 500 }) } // Mark token as used (can't be used again for any purpose) storedTokens[resetTokenIndex].used = true saveResetTokens(storedTokens) console.log(`Password successfully reset for user: ${resetToken.email}`) console.log(`Token ${token} marked as used and can no longer be used`) // Optionally, you could delete the token instead of marking as used: // deleteResetToken(token) return NextResponse.json( { message: "Password reset successfully", email: resetToken.email, }, { status: 200 }, ) } catch (error) { console.error("Password reset error:", error) return NextResponse.json({ error: "Failed to reset password" }, { status: 500 }) } } // Helper function to get stored reset tokens function getStoredResetTokens(): ResetToken[] { try { // In a real application, this would query your database if (typeof global !== "undefined") { return (global as any).resetTokens || [] } return [] } catch { return [] } } // Helper function to save reset tokens function saveResetTokens(tokens: ResetToken[]): void { try { // In a real application, this would update your database if (typeof global !== "undefined") { ;(global as any).resetTokens = tokens } } catch (error) { console.error("Failed to save reset tokens:", error) } } // Helper function to update user password in database async function updateUserPassword(email: string, newHashedPassword: string): Promise { try { // In a real application, this would update your database // The token identifies which user needs their password updated console.log(`Updating password for user: ${email}`) console.log(`New hashed password: ${newHashedPassword.substring(0, 20)}...`) // For demo purposes, we'll simulate database update if (typeof global !== "undefined") { // Get existing users const existingUsers = (global as any).lokateUsers || [] // Find and update the user const userIndex = existingUsers.findIndex((user: UserCredentials) => user.username === email) if (userIndex === -1) { console.error(`User not found in database: ${email}`) return false } // Replace old hash with new hash in database const oldHash = existingUsers[userIndex].hashedPassword existingUsers[userIndex].hashedPassword = newHashedPassword( // Save updated users back to database global as any, ).lokateUsers = existingUsers console.log(`Password hash updated in database for user: ${email}`) console.log(`Old hash: ${oldHash.substring(0, 20)}...`) console.log(`New hash: ${newHashedPassword.substring(0, 20)}...`) return true } return false } catch (error) { console.error("Error updating user password:", error) return false } } // Alternative: Delete token instead of marking as used function deleteResetToken(token: string): void { try { if (typeof global !== "undefined") { const tokens = (global as any).resetTokens || [] const filteredTokens = (tokens.filter((t: ResetToken) => t.token !== token)(global as any).resetTokens = filteredTokens) console.log(`Reset token ${token} deleted from database`) } } catch (error) { console.error("Error deleting reset token:", error) } } [V0_FILE]typescript:file="app/api/validate-reset-token/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" interface ResetToken { email: string token: string expiresAt: number createdAt: number used: boolean } export async function POST(request: NextRequest) { try { const { token } = await request.json() if (!token) { return NextResponse.json({ valid: false, error: "Token is required" }, { status: 400 }) } // Get stored reset tokens from server-side storage const storedTokens = getStoredResetTokens() // Find the token const resetToken = storedTokens.find((t: ResetToken) => t.token === token) if (!resetToken) { return NextResponse.json({ valid: false, error: "Invalid reset token" }, { status: 400 }) } // Check if token has expired (15 minutes) if (Date.now() > resetToken.expiresAt) { return NextResponse.json({ valid: false, error: "Reset token has expired" }, { status: 400 }) } // Check if token has already been used if (resetToken.used) { return NextResponse.json({ valid: false, error: "Reset token has already been used" }, { status: 400 }) } console.log(`Valid reset token found for user: ${resetToken.email}`) return NextResponse.json( { valid: true, email: resetToken.email, expiresAt: resetToken.expiresAt, }, { status: 200 }, ) } catch (error) { console.error("Token validation error:", error) return NextResponse.json({ valid: false, error: "Failed to validate token" }, { status: 500 }) } } // Helper function to get stored reset tokens function getStoredResetTokens(): ResetToken[] { try { // In a real application, this would query your database // For demo purposes, we'll simulate server-side storage if (typeof global !== "undefined") { // Use global object to simulate server-side storage return (global as any).resetTokens || [] } return [] } catch { return [] } } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/debug/page.tsx" isMerged="true" import { FirebaseDebug } from "@/components/firebase-debug" export default function DebugPage() { return (

Firebase Integration Debug

Use this page to verify your Firebase integration is working correctly.

Visit /debug to access this panel anytime.

) } [V0_FILE]typescriptreact:file="app/demo/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, ArrowLeft, Calendar, Users, Clock, CheckCircle } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" export default function DemoPage() { const [isCalendlyLoaded, setIsCalendlyLoaded] = useState(false) const loadCalendly = () => { setIsCalendlyLoaded(true) // In a real implementation, you would load the Calendly widget here // For this demo, we'll show a placeholder } return (

{/* Header/Navigation */}

Lokate.ai

{/* Hero Section */}

{/* Back to home link */} Back to home

Schedule Your Personal Demo

See how Lokate.ai can transform your real estate business with a personalized demonstration

{/* Demo Benefits */}

What You'll Learn

Our team will show you exactly how Lokate.ai can help your specific use case

Custom Setup

Learn how to configure alerts for your specific markets and investment criteria

Best Practices

Discover how top agents and investors are using Lokate.ai to close more deals

ROI Analysis

See real examples of how Lokate.ai has helped professionals find profitable deals

{/* Calendly Section */}

{!isCalendlyLoaded ? ( Book Your Demo Choose a time that works best for you. Our demos typically last 30 minutes.

30 Minutes

Comprehensive demo

1-on-1 Session

Personalized for you

Flexible Times

Available 7 days a week

What to expect:

Live walkthrough of the Lokate.ai platform
Custom setup based on your target markets
Q&A session with our real estate experts
Exclusive demo pricing and setup assistance

) : ( Select Your Demo Time Choose from available time slots below {/* Calendly Widget Placeholder */}

Calendly Integration

In a real implementation, the Calendly widget would be embedded here.

You would integrate with Calendly's embed code or API to show available time slots.

)}

{/* Contact Alternative */}

Prefer to Talk First?

Have questions before scheduling? Our team is here to help.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, ArrowLeft, Mail, CheckCircle, AlertCircle } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { useAuth } from "@/contexts/auth-context" import { FirebaseError } from "firebase/app" export default function ForgotPasswordPage() { const { resetPassword } = useAuth() const [email, setEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const [error, setError] = useState(null) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { await resetPassword(email) setIsSubmitted(true) } catch (error) { console.error("Password reset error:", error) // Don't reveal if email exists or not for security reasons // Just show a generic message setIsSubmitted(true) // For development purposes, log the actual error if (error instanceof FirebaseError) { console.error(`Firebase error code: ${error.code}`) } } finally { setIsLoading(false) } } return (

{/* Header/Navigation */}

Lokate.ai

{/* Back to login link */} Back to login {/* Forgot Password Card */} Forgot Password Enter your email address and we'll send you a link to reset your password {error && (

{error}

)} {isSubmitted ? (

Check your email

If an account exists for {email}, we've sent a password reset link to that email address.

The link will expire in 15 minutes. If you don't see the email, check your spam folder.

) : ( )} {/* Help text */}

Remember your password?{" "} Sign in

{/* Footer */}

) } [V0_FILE]css:file="app/globals.css" 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: 221.2 83.2% 53.3%; --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: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --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: 224.3 76.5% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/guides/market-data/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Target, CheckCircle, AlertCircle, Info, BarChart, TrendingUp, LineChart, Map } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" export default function MarketDataGuidePage() { return (

{/* Header/Navigation */}

Lokate.ai

{/* Guide Header */}

Using Market Data Guide

How to interpret and leverage the market data included with your property alerts

{/* Guide Content */}

{/* Introduction */}

Understanding Lokate.ai's Market Data

One of Lokate.ai's most powerful features is the comprehensive market data included with every property alert. This guide will help you understand how to interpret and use this data to make more informed property decisions.

Our market data is updated daily and draws from multiple sources including MLS data, public records, economic indicators, and proprietary algorithms to provide you with the most accurate and timely information.

{/* Property Valuation Metrics */}

Property Valuation Metrics

Each property alert includes several key valuation metrics to help you assess whether a property is fairly priced and represents a good value.

{/* Comparative Market Analysis */}

Comparative Market Analysis (CMA)

Our AI-generated CMA compares each property to recently sold similar properties in the same area, adjusting for differences in features, condition, and location.

How to use it: Look for the "Estimated Fair Value" figure and compare it to the listing price. A listing price significantly above the estimated fair value may indicate an overpriced property, while a price below may represent a potential deal.

{/* Price Per Square Foot Analysis */}

Price Per Square Foot Analysis

We provide the property's price per square foot and compare it to the neighborhood average, recent sales, and similar active listings.

Price per square foot can vary significantly based on property size, quality of finishes, and special features. Use this metric as one data point among many, not as the sole valuation method.

{/* Value Score */}

Value Score (1-100)

Our proprietary Value Score combines multiple factors to indicate how good a value the property represents relative to the market.

1-40: Below Average Value

Property may be overpriced or have issues affecting value

41-70: Fair Value

Property is reasonably priced for its features and location

71-100: Excellent Value

Property may represent a particularly good deal

{/* Investment Metrics */}

Investment Metrics

For investors, we provide additional metrics to help assess a property's potential return on investment.

Estimated Rental Income

Based on comparable rental properties in the area
Cap Rate

Net operating income divided by property value
Cash-on-Cash Return

Estimated annual cash flow divided by total cash invested
1% Rule Analysis

Whether monthly rent meets or exceeds 1% of purchase price

{/* Market Trends */}

Market Trends

Understanding the direction of the market is crucial for making informed property decisions. Each property alert includes relevant market trend data.

{/* Price Trends */}

Price Trends

We provide historical price data for both the specific property (if previously sold) and the surrounding neighborhood.

What to look for: Steady appreciation indicates a stable market, while rapid price increases might suggest a potential bubble. Declining prices could indicate market weakness but might also present buying opportunities.

{/* Days on Market */}

Days on Market (DOM)

We track how long properties typically stay on the market in the area and compare it to the specific property's DOM.

A property with significantly higher DOM than the neighborhood average might have issues or be overpriced. However, this can also represent a negotiation opportunity, as the seller may be more motivated.

{/* Inventory Levels */}

Inventory Levels

We provide data on the current inventory of similar properties and how it compares to historical averages.

How to interpret: Low inventory typically indicates a seller's market with potentially higher prices and faster sales. High inventory suggests a buyer's market with more negotiating power and potentially better deals.

{/* Market Momentum */}

Market Momentum

Our proprietary Market Momentum indicator combines multiple factors to predict the likely direction of the market in the short term.

Cooling

Market slowing, potentially favoring buyers

Stable

Balanced market conditions

Heating Up

Market accelerating, potentially favoring sellers

{/* Neighborhood Analysis */}

Neighborhood Analysis

The neighborhood often has as much impact on a property's value and desirability as the property itself. Our neighborhood analysis helps you understand the area around each property.

{/* School Ratings */}

School Ratings

We provide ratings for nearby schools, including elementary, middle, and high schools serving the property's address.

Even if you don't have school-age children, school quality significantly impacts property values and resale potential. Properties in highly-rated school districts typically maintain value better during market downturns.

{/* Crime Statistics */}

Crime Statistics

We provide crime data for the neighborhood, including overall safety score and comparison to city averages.

How to use: Review both the overall crime rate and the types of crimes reported. Some areas may have higher property crime but low violent crime, or vice versa. Consider how this aligns with your personal safety priorities.

{/* Walkability & Amenities */}

Walkability & Amenities

We analyze the proximity to amenities like grocery stores, restaurants, parks, and public transportation.

Properties with high walkability scores and proximity to desirable amenities typically command premium prices and experience stronger appreciation over time.

{/* Demographic Trends */}

Demographic Trends

We provide data on population growth, income levels, age distribution, and other demographic factors that can impact property values.

What to look for: Growing population, rising income levels, and an influx of younger residents often indicate neighborhoods on the upswing. Declining population or stagnant income growth might suggest caution.

{/* Future Value Projections */}

Future Value Projections

While no one can predict the future with certainty, our AI models use historical data and current trends to provide educated projections about a property's potential future value.

{/* Appreciation Forecast */}

Appreciation Forecast

Our models project potential appreciation rates for the next 1, 3, and 5 years based on historical trends, economic indicators, and neighborhood development plans.

Important note: These are projections based on current data and should not be considered guarantees. Real estate markets can be influenced by many unpredictable factors including economic changes, natural disasters, and policy shifts.

{/* Risk Assessment */}

Risk Assessment

We analyze various risk factors that could impact the property's future value, including market volatility, economic sensitivity, and local development risks.

Higher risk doesn't necessarily mean you should avoid a property, but it does mean you should factor potential volatility into your decision-making process and ensure you're comfortable with the level of uncertainty.

{/* Conclusion */}

Making the Most of Market Data

The market data provided with each Lokate.ai property alert is designed to give you a comprehensive understanding of both the property and its context within the broader market. Remember that no single metric should drive your decision - instead, consider all the data points together to form a complete picture.

Pro tip: Use the market data to identify properties that warrant further investigation, but always conduct your own due diligence including physical inspections, title searches, and consultation with local real estate professionals before making any purchase decisions.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/registration/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, Eye, EyeOff, User, Mail, Phone, Lock, CheckCircle, AlertCircle, Loader2 } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { PasswordStrengthIndicator } from "@/components/password-strength-indicator" import { useAuth } from "@/contexts/auth-context" import { useUsernameValidation } from "@/hooks/use-username-validation" import { validateEmail, validatePhone, validateUsername, validatePassword, formatPhoneNumber, } from "@/lib/form-validation" interface FormData { fullName: string email: string phone: string username: string password: string confirmPassword: string } interface FormErrors { fullName?: string email?: string phone?: string username?: string password?: string confirmPassword?: string general?: string } export default function RegistrationPage() { const router = useRouter() const { signup, firebaseReady } = useAuth() const [formData, setFormData] = useState({ fullName: "", email: "", phone: "", username: "", password: "", confirmPassword: "", }) const [errors, setErrors] = useState({}) const [isLoading, setIsLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [passwordStrength, setPasswordStrength] = useState(0) const [isSuccess, setIsSuccess] = useState(false) // Username validation hook const { isChecking: isCheckingUsername, isAvailable: isUsernameAvailable, error: usernameError, } = useUsernameValidation(formData.username) // Check if user came from payment completion useEffect(() => { const paymentCompleted = localStorage.getItem("paymentCompleted") if (!paymentCompleted) { router.push("/trial") } }, [router]) // Validate form fields in real-time useEffect(() => { const newErrors: FormErrors = {} // Full name validation if (formData.fullName && formData.fullName.length < 2) { newErrors.fullName = "Full name must be at least 2 characters" } // Email validation const emailError = validateEmail(formData.email) if (emailError) newErrors.email = emailError // Phone validation const phoneError = validatePhone(formData.phone) if (phoneError && formData.phone) newErrors.phone = phoneError // Username validation const usernameValidationError = validateUsername(formData.username) if (usernameValidationError) { newErrors.username = usernameValidationError } else if (usernameError) { newErrors.username = usernameError } // Password validation const passwordValidation = validatePassword(formData.password) if (passwordValidation.error) newErrors.password = passwordValidation.error setPasswordStrength(passwordValidation.strength) // Confirm password validation if (formData.confirmPassword && formData.password !== formData.confirmPassword) { newErrors.confirmPassword = "Passwords do not match" } setErrors(newErrors) }, [formData, usernameError]) const handleInputChange = (field: keyof FormData, value: string) => { if (field === "phone") { value = formatPhoneNumber(value) } setFormData((prev) => ({ ...prev, [field]: value })) } const validateForm = (): boolean => { const newErrors: FormErrors = {} if (!formData.fullName) newErrors.fullName = "Full name is required" if (!formData.email) newErrors.email = "Email is required" if (!formData.phone) newErrors.phone = "Phone number is required" if (!formData.username) newErrors.username = "Username is required" if (!formData.password) newErrors.password = "Password is required" if (!formData.confirmPassword) newErrors.confirmPassword = "Please confirm your password" // Check existing validation errors Object.keys(errors).forEach((key) => { if (errors[key as keyof FormErrors]) { newErrors[key as keyof FormErrors] = errors[key as keyof FormErrors] } }) if (!isUsernameAvailable && formData.username) { newErrors.username = "Username is not available" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return if (!firebaseReady) { setErrors({ general: "Authentication service is not ready. Please try again." }) return } setIsLoading(true) setErrors({}) try { // Create user account with Firebase Auth and store profile data await signup(formData.email, formData.password, { fullName: formData.fullName, phone: formData.phone, username: formData.username, registrationDate: new Date().toISOString(), accountType: "trial", paymentCompleted: true, }) // Clear payment completion flag localStorage.removeItem("paymentCompleted") setIsSuccess(true) // Redirect to dashboard after success setTimeout(() => { router.push("/dashboard") }, 2000) } catch (error: any) { console.error("Registration error:", error) let errorMessage = "Registration failed. Please try again." if (error.code === "auth/email-already-in-use") { errorMessage = "An account with this email already exists." } else if (error.code === "auth/weak-password") { errorMessage = "Password is too weak." } else if (error.code === "auth/invalid-email") { errorMessage = "Invalid email address." } setErrors({ general: errorMessage }) } finally { setIsLoading(false) } } if (isSuccess) { return (

Lokate.ai

Welcome to Lokate.ai! Your account has been created successfully. Redirecting to your dashboard...

) } return (

{/* Header */}

Lokate.ai

{/* Progress indicator */}

✓

{/* Registration Card */} Create Your Account Complete your registration to start using Lokate.ai {errors.general && (

{errors.general}

)}

{/* Full Name */}

Full Name * handleInputChange("fullName", e.target.value)} className={errors.fullName ? "border-red-500" : ""} required /> {errors.fullName &&

{errors.fullName}

}

{/* Email */}

Email Address * handleInputChange("email", e.target.value)} className={errors.email ? "border-red-500" : ""} required /> {errors.email &&

{errors.email}

}

{/* Phone Number */}

Phone Number * handleInputChange("phone", e.target.value)} className={errors.phone ? "border-red-500" : ""} maxLength={14} required /> {errors.phone &&

{errors.phone}

}

{/* Username */}

Username *

handleInputChange("username", e.target.value)} className={ errors.username ? "border-red-500" : isUsernameAvailable === true ? "border-green-500" : "" } required /> {isCheckingUsername && ( )} {!isCheckingUsername && isUsernameAvailable === true && ( )}

{errors.username &&

{errors.username}

} {!errors.username && isUsernameAvailable === true && (

Username is available!

)}

{/* Password */}

Password *

handleInputChange("password", e.target.value)} className={errors.password ? "border-red-500" : ""} required />

{errors.password &&

{errors.password}

}

{/* Confirm Password */}

Confirm Password *

handleInputChange("confirmPassword", e.target.value)} className={errors.confirmPassword ? "border-red-500" : ""} required />

{errors.confirmPassword &&

{errors.confirmPassword}

}

{/* Submit Button */}

By creating an account, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/reset-password/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/reset-password/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, Eye, EyeOff, Lock, CheckCircle, AlertCircle, Clock } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" export default function ResetPasswordPage() { const router = useRouter() const searchParams = useSearchParams() const [token, setToken] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [isValidToken, setIsValidToken] = useState(null) const [isSuccess, setIsSuccess] = useState(false) const [userEmail, setUserEmail] = useState("") useEffect(() => { const tokenParam = searchParams.get("token") if (tokenParam) { setToken(tokenParam) validateToken(tokenParam) } else { setError("No reset token provided") setIsValidToken(false) } }, [searchParams]) const validateToken = async (tokenToValidate: string) => { try { const response = await fetch("/api/validate-reset-token", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token: tokenToValidate }), }) const data = await response.json() if (response.ok && data.valid) { setIsValidToken(true) setUserEmail(data.email) // Store the user's email from the token console.log(`Valid reset token for user: ${data.email}`) } else { setIsValidToken(false) setError(data.error || "Invalid or expired reset token") } } catch (error) { console.error("Token validation error:", error) setIsValidToken(false) setError("Failed to validate reset token") } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (password.length < 8) { setError("Password must be at least 8 characters long") return } if (password !== confirmPassword) { setError("Passwords do not match") return } setIsLoading(true) setError("") try { console.log(`Resetting password for user: ${userEmail}`) console.log(`Using token: ${token}`) const response = await fetch("/api/reset-password", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ token, // This tells the server which user is requesting the reset password, }), }) const data = await response.json() if (response.ok) { console.log(`Password successfully reset for: ${data.email}`) setIsSuccess(true) } else { setError(data.error || "Failed to reset password") } } catch (error) { console.error("Password reset error:", error) setError("An error occurred while resetting your password") } finally { setIsLoading(false) } } // Success state if (isSuccess) { return (

{/* Header/Navigation */}

Lokate.ai

Password Reset Successful Your password has been successfully updated.

You can now log in with your new password.

) } // Invalid token state if (isValidToken === false) { return (

{/* Header/Navigation */}

Lokate.ai

Invalid Reset Link This password reset link is invalid or has expired.

{error}

Reset links expire after 15 minutes for security reasons.

) } // Loading state if (isValidToken === null) { return (

Validating reset token...

) } // Valid token - show reset form return (

{/* Header/Navigation */}

Lokate.ai

{/* Reset Password Card */} Reset Your Password Enter your new password below. {userEmail && (

Resetting password for: {userEmail}

)} {error && (

{error}

)}

New Password

setPassword(e.target.value)} required className="w-full pr-10" />

Password must be at least 8 characters long

Confirm New Password

setConfirmPassword(e.target.value)} required className="w-full pr-10" />

Security Note: This reset link expires in 15 minutes and can only be used once.

Remember your password?{" "} Back to login

) } [V0_FILE]typescriptreact:file="app/trial/confirmation/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, CheckCircle, ArrowRight } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { useRouter } from "next/navigation" export default function ConfirmationPage() { const router = useRouter() const [username, setUsername] = useState("") const [email, setEmail] = useState("") const [subscriptionId, setSubscriptionId] = useState("") const [trialEndDate, setTrialEndDate] = useState("") useEffect(() => { // Get the stored information const storedUsername = localStorage.getItem("trialUsername") const storedEmail = localStorage.getItem("trialEmail") const storedSubscriptionId = localStorage.getItem("subscriptionId") const storedTrialEnd = localStorage.getItem("trialEnd") if (storedUsername) { setUsername(storedUsername) } if (storedEmail) { setEmail(storedEmail) } if (storedSubscriptionId) { setSubscriptionId(storedSubscriptionId) } if (storedTrialEnd) { // Format the trial end date const date = new Date(Number.parseInt(storedTrialEnd) * 1000) setTrialEndDate(date.toLocaleDateString()) } }, []) const handleProceedToDashboard = () => { router.push("/dashboard") } return (

{/* Header/Navigation */}

Lokate.ai

{/* Success Card */}

Trial Successfully Activated! Your 7-day free trial has been successfully activated.

Username: {username}

Email: {email}

{subscriptionId && (

Subscription ID: {subscriptionId}

)} {trialEndDate && (

Trial End Date: {trialEndDate}

)}

What's Next?

Set up your property search criteria
Customize your daily alert preferences
Explore the dashboard and available features

Need help getting started?{" "} Visit our support center

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/trial/create-account/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, ArrowLeft, Eye, EyeOff, User, Lock, AlertCircle } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { authUtils } from "@/lib/auth-utils" export default function CreateAccountPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [email, setEmail] = useState("") const [passwordError, setPasswordError] = useState("") useEffect(() => { // Get the email from localStorage const storedEmail = localStorage.getItem("trialEmail") const paymentMethodId = localStorage.getItem("paymentMethodId") if (storedEmail && paymentMethodId) { setEmail(storedEmail) } else { // If no email or payment method is found, redirect back to the trial page router.push("/trial") } }, [router]) const validatePassword = () => { if (password.length < 8) { setPasswordError("Password must be at least 8 characters long") return false } if (password !== confirmPassword) { setPasswordError("Passwords do not match") return false } setPasswordError("") return true } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validatePassword()) { return } setIsLoading(true) setError("") try { const paymentMethodId = localStorage.getItem("paymentMethodId") // Register the user with hashed password const registrationSuccess = await authUtils.registerUser(username, password) if (!registrationSuccess) { throw new Error("Username already exists") } // Create the subscription with Stripe const response = await fetch("/api/create-subscription", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, username, password: "HASHED_PASSWORD_NOT_SENT", // We don't send the actual password to the server paymentMethodId, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Account creation failed") } // Set user as logged in authUtils.setLoggedIn(username) // Store the username and subscription info for the confirmation page localStorage.setItem("trialUsername", username) localStorage.setItem("subscriptionId", data.subscriptionId) // Navigate to the confirmation page router.push("/trial/confirmation") } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setIsLoading(false) } } return (

{/* Header/Navigation */}

Lokate.ai

{/* Back to previous step link */} Back to payment information {/* Progress indicator */}

✓

{/* Create Account Card */} Create Your Account Set up your login credentials for Lokate.ai {error && (

{error}

)}

Email address from previous step

Username setUsername(e.target.value)} required className="w-full" />

Password

setPassword(e.target.value)} required className="w-full pr-10" />

Password must be at least 8 characters long

Confirm Password

setConfirmPassword(e.target.value)} required className="w-full pr-10" />

{passwordError &&

{passwordError}

}

Security Note: Your password will be securely hashed before storage. We never store your actual password, only a secure, irreversible mathematical representation of it.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/ai-chat-support.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { MessageCircle, X, Send, Bot, User } from "lucide-react" type Message = { role: "user" | "assistant" content: string } export function AiChatSupport() { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { role: "assistant", content: "👋 Hi there! I'm your Lokate.ai assistant. How can I help you today?", }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) // Auto-scroll to bottom of messages useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleSendMessage = () => { if (!input.trim()) return // Add user message const userMessage: Message = { role: "user", content: input, } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) // Simulate AI response after a delay setTimeout(() => { const responses = [ "I'd be happy to help you with that! Could you provide more details?", "That's a great question about Lokate.ai. Our platform helps real estate professionals find properties that match their exact criteria.", "You can customize your alerts by going to your account settings and selecting 'Alert Preferences'.", "Our free trial lasts for 7 days and includes all features of our Professional plan.", "If you need more specific help, you can contact our support team using the form at the bottom of this page.", ] const aiMessage: Message = { role: "assistant", content: responses[Math.floor(Math.random() * responses.length)], } setMessages((prev) => [...prev, aiMessage]) setIsLoading(false) }, 1000) } return ( <> {/* Chat button */} {/* Chat window */} {isOpen && (

{/* Chat header */}

Lokate.ai Support

{/* Chat messages */}

{messages.map((message, index) => (

{message.role === "assistant" ? : } {message.role === "assistant" ? "Lokate Assistant" : "You"}

{message.content}

))} {isLoading && (

)}

{/* Chat input */}

)} ) } [V0_FILE]typescriptreact:file="components/firebase-debug.tsx" isMerged="true" "use client" import { useAuth } from "@/contexts/auth-context" import { validateFirebaseConfig } from "@/lib/firebase-config" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { useState } from "react" export function FirebaseDebug() { const { firebaseReady, currentUser, testFirebase } = useAuth() const [testResult, setTestResult] = useState(null) const [testing, setTesting] = useState(false) const handleTestConnection = async () => { setTesting(true) try { const result = await testFirebase() setTestResult(result) } catch (error) { setTestResult({ success: false, error: error.message }) } setTesting(false) } const configValid = validateFirebaseConfig() return ( 🔥 Firebase Debug Panel

Configuration Status

{configValid ? "✅ Valid" : "❌ Invalid"}

Firebase Ready

{firebaseReady ? "✅ Ready" : "❌ Not Ready"}

Current User

{currentUser ? `✅ ${currentUser.email}` : "❌ Not logged in"}

User ID

{currentUser ? currentUser.uid : "N/A"}

{testResult && (

{testResult.success ? "✅ Test Passed" : "❌ Test Failed"}

{testResult.message || testResult.error}

)}

Environment Variables Needed:

NEXT_PUBLIC_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID

) } [V0_FILE]typescriptreact:file="components/navigation-link.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import { useRouter, usePathname } from "next/navigation" import type { ReactNode } from "react" interface NavigationLinkProps { href: string children: ReactNode className?: string onClick?: () => void } export function NavigationLink({ href, children, className, onClick }: NavigationLinkProps) { const router = useRouter() const pathname = usePathname() // Function to handle smooth scrolling to an element const scrollToElement = (elementId: string) => { // Wait a bit to ensure the DOM is fully loaded setTimeout(() => { const element = document.getElementById(elementId) if (element) { // Get the header height (h-16 = 64px) const headerOffset = 64 const elementPosition = element.getBoundingClientRect().top const offsetPosition = elementPosition + window.pageYOffset - headerOffset window.scrollTo({ top: offsetPosition, behavior: "smooth", }) } }, 100) } const handleClick = (e: React.MouseEvent) => { e.preventDefault() if (onClick) onClick() // Check if it's a hash link (section on the same page) if (href.startsWith("#")) { // It's a section on the current page const sectionId = href.substring(1) scrollToElement(sectionId) return } // Check if it's a link to a section on the homepage if (href === "/") { // Navigate to homepage and scroll to top if (pathname !== "/") { router.push("/") } else { window.scrollTo({ top: 0, behavior: "smooth" }) } return } // Check if it's a link to a specific section on the homepage if (href.startsWith("/#")) { const sectionId = href.substring(2) if (pathname !== "/") { // We're on a different page, navigate to homepage first router.push("/") // After navigation, scroll to the section setTimeout(() => { scrollToElement(sectionId) }, 300) // Give it time to load the page } else { // Already on homepage, just scroll scrollToElement(sectionId) } return } // Regular navigation to another page router.push(href) } return ( {children} ) } [V0_FILE]typescriptreact:file="components/password-strength-indicator.tsx" isMerged="true" import { cn } from "@/lib/utils" interface PasswordStrengthIndicatorProps { strength: number password: string } export function PasswordStrengthIndicator({ strength, password }: PasswordStrengthIndicatorProps) { const getStrengthText = () => { if (!password) return "" switch (strength) { case 1: return "Very Weak" case 2: return "Weak" case 3: return "Fair" case 4: return "Good" case 5: return "Strong" default: return "" } } const getStrengthColor = () => { switch (strength) { case 1: return "bg-red-500" case 2: return "bg-orange-500" case 3: return "bg-yellow-500" case 4: return "bg-blue-500" case 5: return "bg-green-500" default: return "bg-gray-200" } } if (!password) return null return (

{[1, 2, 3, 4, 5].map((level) => (

))}

Password strength: {getStrengthText()}

) } [V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true" "use client" import { useEffect } from "react" import { usePathname } from "next/navigation" export function ScrollToTop() { const pathname = usePathname() useEffect(() => { // Only scroll to top on page changes if there's no hash in the URL // This prevents interference with smooth scrolling to sections if (!window.location.hash) { window.scrollTo(0, 0) } }, [pathname]) return null } [V0_FILE]markdown:file="docs/email-integration-setup.md" isMerged="true" # Email Integration Setup Guide This guide explains how to set up a real email service for the contact form. ## Option 1: Using Resend (Recommended) Resend is a modern email API that's easy to integrate and reliable. ### Setup Steps: 1. **Install Resend** \`\`\`bash npm install resend \`\`\` 2. **Sign up for Resend** - Go to https://resend.com - Create an account and verify your domain - Get your API key from the dashboard 3. **Add Environment Variables** \`\`\`env RESEND_API_KEY=your_resend_api_key_here \`\`\` 4. **Update the API Route** Replace the mock implementation in `app/api/send-contact-email/route.ts` with: \`\`\`typescript import { Resend } from 'resend' import { NextRequest, NextResponse } from 'next/server' const resend = new Resend(process.env.RESEND_API_KEY) export async function POST(request: NextRequest) { try { const { name, email, subject, message } = await request.json() // Validation (same as before) if (!name?.trim() || !email?.trim() || !subject?.trim() || !message?.trim()) { return NextResponse.json({ error: 'All fields are required' }, { status: 400 }) } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json({ error: 'Invalid email format' }, { status: 400 }) } // Send email using Resend const { data, error } = await resend.emails.send({ from: 'noreply@yourdomain.com', // Must be your verified domain to: ['admin@lokate.ai'], subject: `${name} - ${subject}`, replyTo: email, html: `

New Contact Form Submission

From: ${name}

Email: ${email}

Subject: ${subject}

Message:

${message}

`, text: ` New Contact Form Submission From: ${name} Email: ${email} Subject: ${subject} Message: ${message} ` }) if (error) { console.error('Resend error:', error) return NextResponse.json({ error: 'Failed to send email' }, { status: 500 }) } return NextResponse.json({ message: 'Email sent successfully' }, { status: 200 }) } catch (error) { console.error('Contact form error:', error) return NextResponse.json({ error: 'Internal server error' }, { status: 500 }) } } \`\`\` ## Option 2: Using SendGrid 1. **Install SendGrid** \`\`\`bash npm install @sendgrid/mail \`\`\` 2. **Setup** \`\`\`typescript import sgMail from '@sendgrid/mail' sgMail.setApiKey(process.env.SENDGRID_API_KEY!) const msg = { to: 'admin@lokate.ai', from: 'noreply@yourdomain.com', subject: `${name} - ${subject}`, text: message, html: `

${message}

`, replyTo: email } await sgMail.send(msg) \`\`\` ## Option 3: Using Nodemailer with SMTP 1. **Install Nodemailer** \`\`\`bash npm install nodemailer npm install @types/nodemailer --save-dev \`\`\` 2. **Setup** \`\`\`typescript import nodemailer from 'nodemailer' const transporter = nodemailer.createTransporter({ host: process.env.SMTP_HOST, port: 587, secure: false, auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS, }, }) await transporter.sendMail({ from: process.env.SMTP_FROM, to: 'admin@lokate.ai', subject: `${name} - ${subject}`, text: message, replyTo: email }) \`\`\` ## Environment Variables Add these to your `.env.local` file: \`\`\`env # For Resend RESEND_API_KEY=your_resend_api_key # For SendGrid SENDGRID_API_KEY=your_sendgrid_api_key # For SMTP SMTP_HOST=your_smtp_host SMTP_USER=your_smtp_username SMTP_PASS=your_smtp_password SMTP_FROM=noreply@yourdomain.com \`\`\` ## Testing Test the integration by: 1. Filling out the contact form 2. Checking the browser network tab for successful API calls 3. Verifying emails are received at admin@lokate.ai 4. Testing validation by submitting incomplete forms ## Security Considerations - Always validate input on the server side - Use environment variables for API keys - Implement rate limiting to prevent spam - Consider adding CAPTCHA for additional protection - Sanitize user input before including in emails [V0_FILE]typescript:file="hooks/use-auth.ts" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { authUtils } from "@/lib/auth-utils" export function useAuth() { const [isLoggedIn, setIsLoggedIn] = useState(false) const [isLoading, setIsLoading] = useState(true) const [userEmail, setUserEmail] = useState(null) const router = useRouter() useEffect(() => { const checkAuthStatus = () => { const loggedIn = authUtils.isLoggedIn() const email = localStorage.getItem("userEmail") setIsLoggedIn(loggedIn) setUserEmail(email) setIsLoading(false) } checkAuthStatus() // Listen for storage changes (in case user logs out in another tab) const handleStorageChange = (e: StorageEvent) => { if (e.key === "isLoggedIn" || e.key === "userEmail") { checkAuthStatus() } } window.addEventListener("storage", handleStorageChange) return () => window.removeEventListener("storage", handleStorageChange) }, []) const login = (username: string, password: string, rememberMe = false) => { authUtils.setLoggedIn(username) if (rememberMe) { authUtils.saveRememberedCredentials(username, password) } else { authUtils.clearRememberedCredentials() } setIsLoggedIn(true) setUserEmail(username) } const logout = () => { authUtils.logout() setIsLoggedIn(false) setUserEmail(null) router.push("/login") } const checkRememberedLogin = async (): Promise => { const rememberedCredentials = authUtils.getRememberedCredentials() if (rememberedCredentials) { authUtils.setLoggedIn(rememberedCredentials.username) setIsLoggedIn(true) setUserEmail(rememberedCredentials.username) return true } return false } return { isLoggedIn, isLoading, userEmail, login, logout, checkRememberedLogin, } } [V0_FILE]typescript:file="hooks/use-firebase-auth.ts" isMerged="true" "use client" import { useEffect, useState } from "react" import { useAuth } from "@/contexts/auth-context" import { useRouter } from "next/navigation" export function useFirebaseAuth(redirectTo = "/login") { const { currentUser, loading } = useAuth() const [isLoading, setIsLoading] = useState(true) const router = useRouter() useEffect(() => { if (!loading) { if (!currentUser) { router.push(redirectTo) } else { setIsLoading(false) } } }, [currentUser, loading, redirectTo, router]) return { user: currentUser, isLoading: loading || isLoading } } [V0_FILE]typescript:file="hooks/use-username-validation.ts" isMerged="true" "use client" import { useState, useEffect } from "react" import { firebaseUtils } from "@/lib/firebase-utils" export function useUsernameValidation(username: string, debounceMs = 500) { const [isChecking, setIsChecking] = useState(false) const [isAvailable, setIsAvailable] = useState(null) const [error, setError] = useState(null) useEffect(() => { if (!username || username.length < 3) { setIsAvailable(null) setError(null) return } const timeoutId = setTimeout(async () => { setIsChecking(true) setError(null) try { // Check if username exists in Firestore const exists = await firebaseUtils.usernameExists(username) setIsAvailable(!exists) if (exists) { setError("Username is already taken") } } catch (err) { setError("Unable to check username availability") setIsAvailable(null) } finally { setIsChecking(false) } }, debounceMs) return () => clearTimeout(timeoutId) }, [username, debounceMs]) return { isChecking, isAvailable, error } } [V0_FILE]typescript:file="lib/auth-utils.ts" isMerged="true" // This is a mock implementation for demo purposes // In a real application, you would use a database and proper authentication interface UserData { username: string hashedPassword: string email?: string phone?: string stripeCustomerId?: string stripeSubscriptionId?: string metadata?: Record } // Mock database let users: Record = {} let loggedInUser: string | null = null let resetTokens: Record = {} // Check if we're in a browser environment const isBrowser = typeof window !== "undefined" // Initialize from localStorage if in browser if (isBrowser) { const storedUsers = localStorage.getItem("users") if (storedUsers) { users = JSON.parse(storedUsers) } const storedLoggedInUser = localStorage.getItem("loggedInUser") if (storedLoggedInUser) { loggedInUser = storedLoggedInUser } const storedResetTokens = localStorage.getItem("resetTokens") if (storedResetTokens) { resetTokens = JSON.parse(storedResetTokens) } } // Save to localStorage const saveToStorage = () => { if (isBrowser) { localStorage.setItem("users", JSON.stringify(users)) if (loggedInUser) { localStorage.setItem("loggedInUser", loggedInUser) } else { localStorage.removeItem("loggedInUser") } localStorage.setItem("resetTokens", JSON.stringify(resetTokens)) } } export const authUtils = { // Register a new user registerUser: async ( username: string, password: string, additionalData?: { email?: string phone?: string stripeCustomerId?: string stripeSubscriptionId?: string metadata?: Record }, ): Promise => { // Check if user already exists if (users[username]) { return false } // In a real app, you would hash the password here // For this demo, we'll use the password-utils.ts const { passwordUtils } = await import("@/lib/password-utils") const hashedPassword = await passwordUtils.hashPassword(password) // Create the user users[username] = { username, hashedPassword, ...additionalData, } // Save to storage saveToStorage() return true }, // Login a user loginUser: async (username: string, password: string, rememberMe = false): Promise => { const user = users[username] if (!user) { return false } // In a real app, you would verify the password hash here // For this demo, we'll use the password-utils.ts const { passwordUtils } = await import("@/lib/password-utils") const passwordMatch = await passwordUtils.verifyPassword(password, user.hashedPassword) if (!passwordMatch) { return false } // Set the logged in user loggedInUser = username // Save to storage saveToStorage() // If remember me is checked, store credentials securely if (rememberMe && isBrowser) { // In a real app, you would use a more secure method // For this demo, we'll just use localStorage localStorage.setItem("rememberedUser", username) // Store hashed password, not the plain text localStorage.setItem("rememberedPassword", user.hashedPassword) } return true }, // Logout the current user logoutUser: (): void => { loggedInUser = null saveToStorage() // Clear remembered user if (isBrowser) { localStorage.removeItem("rememberedUser") localStorage.removeItem("rememberedPassword") } }, // Check if a user is logged in isLoggedIn: (): boolean => { if (isBrowser) { const localStorageLogin = localStorage.getItem("isLoggedIn") === "true" return loggedInUser !== null || localStorageLogin } return loggedInUser !== null }, // Get the current logged in user getCurrentUser: (): string | null => { return loggedInUser }, // Set a user as logged in (for demo purposes) setLoggedIn: (username: string): void => { loggedInUser = username if (isBrowser) { const userId = `user_${username.toLowerCase().replace(/[^a-z0-9]/g, "")}_${Date.now()}` localStorage.setItem("userId", userId) localStorage.setItem("userEmail", username) localStorage.setItem("isLoggedIn", "true") } saveToStorage() }, // Get user data getUser: (username: string): UserData | null => { return users[username] || null }, // Get all users (for demo purposes) getAllUsers: (): Record => { return users }, // Check if an email exists emailExists: (email: string): boolean => { return Object.values(users).some((user) => user.email === email) }, // Generate a password reset token generateResetToken: (email: string): string | null => { // Find user with this email const user = Object.values(users).find((user) => user.email === email) if (!user) { return null } // Generate a token const token = Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10) // Set expiration to 15 minutes from now const expires = new Date() expires.setMinutes(expires.getMinutes() + 15) // Store the token resetTokens[token] = { email, token, expires, used: false, } saveToStorage() return token }, // Validate a reset token validateResetToken: (token: string): { valid: boolean; email?: string } => { const resetToken = resetTokens[token] if (!resetToken) { return { valid: false } } // Check if token is expired if (new Date() > new Date(resetToken.expires)) { return { valid: false } } // Check if token has been used if (resetToken.used) { return { valid: false } } return { valid: true, email: resetToken.email } }, // Reset password using token resetPassword: async (token: string, newPassword: string): Promise => { const validation = authUtils.validateResetToken(token) if (!validation.valid || !validation.email) { return false } // Find user with this email const user = Object.values(users).find((user) => user.email === validation.email) if (!user) { return false } // Hash the new password const { passwordUtils } = await import("@/lib/password-utils") const hashedPassword = await passwordUtils.hashPassword(newPassword) // Update the password user.hashedPassword = hashedPassword // Mark token as used resetTokens[token].used = true saveToStorage() return true }, // Add these functions to the authUtils object: // Save credentials for remember me (stores hashed password) saveRememberedCredentials: async (username: string, password: string): Promise => { try { // Hash the password before storing const { passwordUtils } = await import("@/lib/password-utils") const hashedPassword = await passwordUtils.hashPassword(password) const credentials = { username, hashedPassword, timestamp: Date.now(), } if (isBrowser) { localStorage.setItem("rememberedLogin", JSON.stringify(credentials)) } } catch (error) { console.error("Error saving remembered credentials:", error) } }, // Get remembered credentials if they exist and are not expired getRememberedCredentials: (): { username: string; hashedPassword: string } | null => { try { if (!isBrowser) return null const stored = localStorage.getItem("rememberedLogin") if (!stored) return null const credentials = JSON.parse(stored) const REMEMBER_ME_DURATION = 30 * 24 * 60 * 60 * 1000 // 30 days const isExpired = Date.now() - credentials.timestamp > REMEMBER_ME_DURATION if (isExpired) { localStorage.removeItem("rememberedLogin") return null } return credentials } catch (error) { console.error("Error getting remembered credentials:", error) if (isBrowser) { localStorage.removeItem("rememberedLogin") } return null } }, // Clear remembered credentials clearRememberedCredentials: (): void => { if (isBrowser) { localStorage.removeItem("rememberedLogin") } }, // Verify credentials with hashed password verifyCredentials: async (username: string, passwordOrHash: string): Promise => { const user = users[username] if (!user) { console.log("User not found:", username) return false } // For remembered credentials, the passwordOrHash is already a hash // Check if it matches the stored hash directly if (passwordOrHash === user.hashedPassword) { console.log("Hash match for remembered credentials") return true } // For regular login, verify the plain password against the stored hash try { const { passwordUtils } = await import("@/lib/password-utils") const isValid = await passwordUtils.verifyPassword(passwordOrHash, user.hashedPassword) console.log("Password verification result:", isValid) return isValid } catch (error) { console.error("Error verifying password:", error) return false } }, // Logout function logout: (): void => { loggedInUser = null saveToStorage() if (isBrowser) { localStorage.removeItem("isLoggedIn") localStorage.removeItem("userEmail") localStorage.removeItem("userId") } }, } [V0_FILE]typescript:file="lib/form-validation.ts" isMerged="true" // Form validation utilities export const validateEmail = (email: string): string | null => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!email) return "Email is required" if (!emailRegex.test(email)) return "Please enter a valid email address" return null } export const validatePhone = (phone: string): string | null => { const phoneRegex = /^$$\d{3}$$ \d{3}-\d{4}$/ if (!phone) return "Phone number is required" if (!phoneRegex.test(phone)) return "Please enter a valid phone number" return null } export const validateUsername = (username: string): string | null => { if (!username) return "Username is required" if (username.length < 3) return "Username must be at least 3 characters" if (username.length > 20) return "Username must be less than 20 characters" if (!/^[a-zA-Z0-9_]+$/.test(username)) return "Username can only contain letters, numbers, and underscores" return null } export const validatePassword = (password: string): { error: string | null; strength: number } => { if (!password) return { error: "Password is required", strength: 0 } if (password.length < 8) return { error: "Password must be at least 8 characters", strength: 1 } let strength = 0 if (password.length >= 8) strength++ if (/[a-z]/.test(password)) strength++ if (/[A-Z]/.test(password)) strength++ if (/\d/.test(password)) strength++ if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++ if (strength < 3) return { error: "Password is too weak", strength } return { error: null, strength } } export const formatPhoneNumber = (value: string): string => { // Remove all non-digits const digits = value.replace(/\D/g, "") // Format as (XXX) XXX-XXXX if (digits.length >= 6) { return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}` } else if (digits.length >= 3) { return `(${digits.slice(0, 3)}) ${digits.slice(3)}` } else { return digits } } [V0_FILE]typescript:file="lib/password-utils.ts" isMerged="true" import * as bcrypt from "bcryptjs" // Cost factor for bcrypt - higher is more secure but slower const SALT_ROUNDS = 10 /** * Hash a password using bcrypt * @param password The plain text password to hash * @returns A promise that resolves to the hashed password */ export const hashPassword = async (password: string): Promise => { try { // Generate a salt and hash the password const salt = await bcrypt.genSalt(SALT_ROUNDS) const hashedPassword = await bcrypt.hash(password, salt) return hashedPassword } catch (error) { console.error("Error hashing password:", error) throw new Error("Password hashing failed") } } /** * Compare a plain text password with a hashed password * @param password The plain text password to check * @param hashedPassword The hashed password to compare against * @returns A promise that resolves to true if the passwords match, false otherwise */ export const verifyPassword = async (password: string, hashedPassword: string): Promise => { try { return await bcrypt.compare(password, hashedPassword) } catch (error) { console.error("Error verifying password:", error) return false } } // Export the functions as an object for backward compatibility export const passwordUtils = { hashPassword, verifyPassword, } [V0_FILE]typescript:file="lib/test-firebase.ts" isMerged="true" import { auth, db } from "./firebase-config" import { createUserWithEmailAndPassword } from "firebase/auth" import { doc, setDoc, getDoc } from "firebase/firestore" export async function testFirebaseConnection() { console.log("Testing Firebase connection...") try { // Test 1: Check if Firebase is initialized if (!auth || !db) { throw new Error("Firebase not initialized") } console.log("✅ Firebase initialized") // Test 2: Try to create a test user (optional) const testEmail = `test-${Date.now()}@example.com` const testPassword = "TestPassword123!" const userCredential = await createUserWithEmailAndPassword(auth, testEmail, testPassword) console.log("✅ User created:", userCredential.user.uid) // Test 3: Store data in Firestore await setDoc(doc(db, "users", userCredential.user.uid), { email: testEmail, username: "testuser", createdAt: new Date().toISOString(), isTest: true, }) console.log("✅ Data stored in Firestore") // Test 4: Read data back const userDoc = await getDoc(doc(db, "users", userCredential.user.uid)) if (userDoc.exists()) { console.log("✅ Data retrieved:", userDoc.data()) } return { success: true, uid: userCredential.user.uid } } catch (error) { console.error("❌ Firebase test failed:", error) return { success: false, error: error.message } } } [V0_FILE]typescript:file="tailwind.config.ts" 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))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]png:file="public/images/client-intake-form.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/zdtahTFbqbkDVZACY_28xY/public/images/client-intake-form.png" isMerged="true" [V0_FILE]png:file="public/images/dashboard-preview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/BpKzn6DCs7JBfQwZxXf5SQ/public/images/dashboard-preview.png" isMerged="true" [V0_FILE]png:file="public/images/instant-alerts-benefits.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/3PzXihurkLluIj7KTa1NV-/public/images/instant-alerts-benefits.png" isMerged="true" [V0_FILE]png:file="public/images/key-benefits-features.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/rYGFEkkifMJ_cfXqCV4_vw/public/images/key-benefits-features.png" isMerged="true" [V0_FILE]png:file="public/images/quick-stats-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/S6BDUDEN_V2IpDIE4Besty/public/images/quick-stats-dashboard.png" isMerged="true" [V0_FILE]typescriptreact:file="app/api/create-payment-method/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import Stripe from "stripe" export async function POST(request: NextRequest) { try { const body = await request.json() const { email, phone, cardNumber, cardName, cardExpiry, cardCvc } = body // Validate required fields if (!email || !phone || !cardNumber || !cardName || !cardExpiry || !cardCvc) { return NextResponse.json({ error: "All fields are required" }, { status: 400 }) } // Basic card number validation (remove spaces and check length) const cleanCardNumber = cardNumber.replace(/\s/g, "") if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) { return NextResponse.json({ error: "Invalid card number" }, { status: 400 }) } // Basic expiry validation const [month, year] = cardExpiry.split("/") if (!month || !year || month.length !== 2 || year.length !== 2) { return NextResponse.json({ error: "Invalid expiry date" }, { status: 400 }) } // Basic CVC validation if (cardCvc.length < 3 || cardCvc.length > 4) { return NextResponse.json({ error: "Invalid CVC" }, { status: 400 }) } // Check if we have a Stripe secret key const stripeSecretKey = process.env.STRIPE_SECRET_KEY if (!stripeSecretKey) { console.warn("Stripe secret key is missing. Falling back to demo mode.") // Return mock response for demo purposes return NextResponse.json({ paymentMethodId: `pm_mock_${Date.now()}`, customerId: `cus_mock_${Date.now()}`, demoMode: true, }) } // Initialize Stripe with your secret key const stripe = new Stripe(stripeSecretKey, { apiVersion: "2023-10-16", }) // Create a payment method const paymentMethod = await stripe.paymentMethods.create({ type: "card", card: { number: cleanCardNumber, exp_month: Number.parseInt(month), exp_year: Number.parseInt(`20${year}`), cvc: cardCvc, }, billing_details: { name: cardName, email: email, phone: phone, }, }) // Create a customer const customer = await stripe.customers.create({ email: email, phone: phone, name: cardName, payment_method: paymentMethod.id, }) // Attach payment method to customer await stripe.paymentMethods.attach(paymentMethod.id, { customer: customer.id, }) return NextResponse.json({ paymentMethodId: paymentMethod.id, customerId: customer.id, demoMode: false, }) } catch (error: any) { console.error("Payment method creation error:", error) // Handle specific Stripe errors if (error.type === "StripeCardError") { return NextResponse.json({ error: error.message || "Your card was declined." }, { status: 400 }) } return NextResponse.json({ error: "Payment processing failed. Please try again." }, { status: 500 }) } } [V0_FILE]png:file="public/images/property-criteria-step1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-tRNZO74oNxiAgYdQCZadTvSOp8gugU.png" isMerged="true" [V0_FILE]png:file="public/images/property-criteria-step2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-fd0uIOP7KBLCxmhVeJ1CYBnV4BMMeu.png" isMerged="true" [V0_FILE]png:file="public/images/property-criteria-step2-continued.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-08%20at%201.16.38%20AM-flyFyTfOf2WJNUjmxhwblrcjl4ulYg.png" isMerged="true" [V0_FILE]typescriptreact:file="app/dashboard/add-criteria/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="lib/alert-utils.ts" isMerged="true" /** * Updates the alert history for a specific criteria * @param criteriaId The ID of the criteria to update * @param addresses Array of property addresses that were sent in the alert * @returns Promise with the update result */ export async function updateAlertHistory(criteriaId: string, addresses: string[]) { try { const response = await fetch(`/api/criteria`, { method: "PATCH", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: criteriaId, lastAlertSent: new Date().toISOString(), sentAddresses: addresses, }), }) if (!response.ok) { throw new Error("Failed to update alert history") } return await response.json() } catch (error) { console.error("Error updating alert history:", error) throw error } } /** * Filters out properties that have already been sent to the user * @param properties Array of property objects with addresses * @param sentAddresses Array of addresses that have already been sent * @returns Array of new properties that haven't been sent yet */ export function filterNewProperties(properties: any[], sentAddresses: string[]) { if (!sentAddresses || sentAddresses.length === 0) { return properties } // Convert sentAddresses to lowercase for case-insensitive comparison const sentAddressesLower = sentAddresses.map((addr) => addr.toLowerCase()) return properties.filter((property) => { const address = property.address?.toLowerCase() || "" return !sentAddressesLower.includes(address) }) } [V0_FILE]typescriptreact:file="app/api/create-subscription/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import Stripe from "stripe" export async function POST(request: NextRequest) { try { const body = await request.json() const { email, username, password, paymentMethodId } = body // Validate required fields if (!email || !username || !password || !paymentMethodId) { return NextResponse.json({ error: "All fields are required" }, { status: 400 }) } // Validate password strength if (password.length < 8) { return NextResponse.json({ error: "Password must be at least 8 characters long" }, { status: 400 }) } // Initialize Stripe const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2023-10-16", }) // Create or retrieve customer let customer const existingCustomers = await stripe.customers.list({ email }) if (existingCustomers.data.length > 0) { customer = existingCustomers.data[0] } else { customer = await stripe.customers.create({ email, name: username, payment_method: paymentMethodId, invoice_settings: { default_payment_method: paymentMethodId, }, }) } // Attach payment method to customer if not already attached try { await stripe.paymentMethods.attach(paymentMethodId, { customer: customer.id, }) } catch (error) { // Payment method might already be attached console.log("Payment method attachment error (may be already attached):", error) } // Set as default payment method await stripe.customers.update(customer.id, { invoice_settings: { default_payment_method: paymentMethodId, }, }) // Create subscription with 7-day trial const subscription = await stripe.subscriptions.create({ customer: customer.id, items: [ { price: process.env.STRIPE_PRICE_ID, }, ], trial_period_days: 7, payment_behavior: "default_incomplete", payment_settings: { save_default_payment_method: "on_subscription", }, expand: ["latest_invoice.payment_intent"], }) // Store user data in your database // await createUser({ // email, // username, // password: await hashPassword(password), // stripeCustomerId: customer.id, // stripeSubscriptionId: subscription.id, // }) // Get the client secret from the subscription const invoice = subscription.latest_invoice as Stripe.Invoice const paymentIntent = invoice.payment_intent as Stripe.PaymentIntent const clientSecret = paymentIntent ? paymentIntent.client_secret : null return NextResponse.json({ subscriptionId: subscription.id, customerId: customer.id, trialEnd: subscription.trial_end, clientSecret: clientSecret, status: subscription.status, }) } catch (error) { console.error("Subscription creation error:", error) return NextResponse.json({ error: "Account creation failed. Please try again." }, { status: 500 }) } } [V0_FILE]typescriptreact:file="lib/firebase-config.ts" isQuickEdit="true" isMerged="true" // Import the functions you need from the SDKs you need import { initializeApp, getApps } from "firebase/app" import { getAuth } from "firebase/auth" import { getFirestore } from "firebase/firestore" // Your web app's Firebase configuration const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY || "", authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN || "", projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID || "", storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET || "", messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID || "", appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID || "", } // Validate Firebase configuration function validateFirebaseConfig() { const requiredFields = ["apiKey", "authDomain", "projectId", "storageBucket", "messagingSenderId", "appId"] const missingFields = requiredFields.filter((field) => { const value = firebaseConfig[field as keyof typeof firebaseConfig] return !value || value.startsWith("your_") || value === "" }) if (missingFields.length > 0) { console.error("❌ Missing or invalid Firebase configuration fields:", missingFields) console.error("Current config:", { apiKey: firebaseConfig.apiKey && !firebaseConfig.apiKey.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", authDomain: firebaseConfig.authDomain && !firebaseConfig.authDomain.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", projectId: firebaseConfig.projectId && !firebaseConfig.projectId.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", storageBucket: firebaseConfig.storageBucket && !firebaseConfig.storageBucket.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", messagingSenderId: firebaseConfig.messagingSenderId && !firebaseConfig.messagingSenderId.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", appId: firebaseConfig.appId && !firebaseConfig.appId.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid", }) return false } return true } // Initialize Firebase only if configuration is valid let app: any = null let auth: any = null let db: any = null if (typeof window !== "undefined") { // Only initialize on client side if (validateFirebaseConfig()) { try { app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0] auth = getAuth(app) db = getFirestore(app) console.log("🔥 Firebase initialized successfully") console.log("📊 Project ID:", firebaseConfig.projectId) console.log("🔐 Auth Domain:", firebaseConfig.authDomain) } catch (error) { console.error("❌ Firebase initialization error:", error) console.error("Config used:", firebaseConfig) } } else { console.warn("⚠️ Firebase not initialized due to missing configuration") console.log("💡 Add your Firebase config to .env.local file") } } // Export Firebase instances export { app, auth, db, firebaseConfig } // Export validation function for debugging export { validateFirebaseConfig } // Export configuration status export const isFirebaseConfigured = validateFirebaseConfig() [V0_FILE]typescript:file="app/api/send-contact-email/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import nodemailer from "nodemailer" export async function POST(request: NextRequest) { try { const { name, email, subject, message } = await request.json() // Validate required fields if (!name?.trim() || !email?.trim() || !subject?.trim() || !message?.trim()) { return NextResponse.json({ error: "All fields are required" }, { status: 400 }) } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json({ error: "Invalid email format" }, { status: 400 }) } // Create nodemailer transporter for Gmail SMTP const transporter = nodemailer.createTransporter({ host: process.env.SMTP_HOST, port: 587, secure: false, // true for 465, false for other ports auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS, }, }) // Email content const emailContent = { from: process.env.SMTP_FROM, to: process.env.SMTP_USER, // Send to yourself replyTo: email, // User's email for easy replies subject: `Lokate.ai Contact: ${name} - ${subject}`, html: `

New Contact Form Submission

From: ${name}

Email: ${email}

Subject: ${subject}

Message:

${message.replace(/\n/g, "
")}

This email was sent from the Lokate.ai contact form.

You can reply directly to this email to respond to ${name}.

`, text: ` New Contact Form Submission from Lokate.ai From: ${name} (${email}) Subject: ${subject} Message: ${message} --- You can reply directly to this email to respond to ${name}. `, } // Send email await transporter.sendMail(emailContent) console.log("Email sent successfully via Gmail SMTP:", { to: process.env.SMTP_USER, from: email, subject: `${name} - ${subject}`, }) return NextResponse.json({ message: "Email sent successfully" }, { status: 200 }) } catch (error) { console.error("Gmail SMTP error:", error) return NextResponse.json( { error: "Failed to send email. Please try again or contact us directly.", }, { status: 500 }, ) } } [V0_FILE]plaintext:file=".env.local" isMerged="true" # Stripe Configuration - Use Restricted Key for better security STRIPE_RESTRICTED_KEY=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 STRIPE_PUBLISHABLE_KEY=pk_live_51Nv1hnF1T0ekUEoFjNtsxf4Jv6zFMVFjPyHq8rxz4gegIumvoi52aShl2UARE9CHhVXN6KMr7i6KmABy9vgcW2Ti00BinXsK9N NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51Nv1hnF1T0ekUEoFjNtsxf4Jv6zFMVFjPyHq8rxz4gegIumvoi52aShl2UARE9CHhVXN6KMr7i6KmABy9vgcW2Ti00BinXsK9N STRIPE_PRICE_ID=price_1RYUILF1T0ekUEoFgTHRscTr # Fallback to secret key if restricted key not available STRIPE_SECRET_KEY=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 # Make.com Webhook (already configured) MAKE_WEBHOOK_URL=https://hook.us2.make.com/823xjm0xbtjd9la9ms29prhkyzepl2av # Firebase Configuration (already set up) NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyAE58jXUhdu8--CfarE2a_3z-Frre3bjJU NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=lokate-domain.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=lokate-domain NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=lokate-domain.firebasestorage.app NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=470770173591 NEXT_PUBLIC_FIREBASE_APP_ID=1:470770173591:web:d6d1cdf579bd6454dacbd2 # Auth0 Configuration (if using) NEXT_PUBLIC_AUTH0_DOMAIN=your_auth0_domain AUTH0_SECRET=your_auth0_secret AUTH0_BASE_URL=http://localhost:3000 AUTH0_ISSUER_BASE_URL=https://your_auth0_domain AUTH0_CLIENT_ID=your_auth0_client_id AUTH0_CLIENT_SECRET=your_auth0_client_secret AUTH0_AUDIENCE=your_auth0_audience # Email Configuration - Gmail SMTP SMTP_HOST=smtp.gmail.com SMTP_USER=your-gmail-address@gmail.com SMTP_PASS=your-16-character-app-password SMTP_FROM=your-gmail-address@gmail.com [V0_FILE]typescriptreact:file="app/about/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" "use client" import React from "react" import { AlertCircle, RefreshCw, Home } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" interface ErrorBoundaryState { hasError: boolean error?: Error errorInfo?: React.ErrorInfo } interface ErrorBoundaryProps { children: React.ReactNode fallback?: React.ComponentType<{ error: Error; resetError: () => void }> } export class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error, } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error("Error Boundary caught an error:", error, errorInfo) // Log error to monitoring service in production if (process.env.NODE_ENV === "production") { // You can integrate with services like Sentry, LogRocket, etc. console.error("Production error:", { error: error.message, stack: error.stack, componentStack: errorInfo.componentStack, timestamp: new Date().toISOString(), }) } this.setState({ error, errorInfo, }) } resetError = () => { this.setState({ hasError: false, error: undefined, errorInfo: undefined }) } render() { if (this.state.hasError) { if (this.props.fallback) { const FallbackComponent = this.props.fallback return } return } return this.props.children } } interface DefaultErrorFallbackProps { error: Error resetError: () => void } function DefaultErrorFallback({ error, resetError }: DefaultErrorFallbackProps) { const isNetworkError = error.message.includes("fetch") || error.message.includes("network") const isAuthError = error.message.includes("auth") || error.message.includes("Firebase") const isPaymentError = error.message.includes("stripe") || error.message.includes("payment") const getErrorTitle = () => { if (isNetworkError) return "Connection Error" if (isAuthError) return "Authentication Error" if (isPaymentError) return "Payment Error" return "Something went wrong" } const getErrorDescription = () => { if (isNetworkError) { return "We're having trouble connecting to our servers. Please check your internet connection and try again." } if (isAuthError) { return "There was an issue with authentication. Please try logging in again or contact support if the problem persists." } if (isPaymentError) { return "There was an issue processing your payment. Please check your payment details or try a different payment method." } return "An unexpected error occurred. Our team has been notified and is working to fix this issue." } const getHelpText = () => { if (isNetworkError) { return "Try refreshing the page or checking your internet connection." } if (isAuthError) { return "Try logging out and logging back in, or clear your browser cache." } if (isPaymentError) { return "Verify your payment information is correct and your card isn't expired." } return "If this problem continues, please contact our support team." } return (

{getErrorTitle()} {getErrorDescription()}

What you can try:

{getHelpText()}

{process.env.NODE_ENV === "development" && (

Error Details (Development)

Error: {error.message}

{error.stack && (

Stack:

{error.stack}

)}

Need help?{" "} Contact Support

) } // Hook for functional components export function useErrorHandler() { const handleError = (error: Error, errorInfo?: string) => { console.error("Error handled by useErrorHandler:", error) // You can integrate with error reporting services here if (process.env.NODE_ENV === "production") { console.error("Production error:", { error: error.message, stack: error.stack, info: errorInfo, timestamp: new Date().toISOString(), userAgent: navigator.userAgent, url: window.location.href, }) } } return { handleError } } [V0_FILE]typescriptreact:file="components/payment-error-handler.tsx" isMerged="true" "use client" import { AlertCircle, CreditCard, RefreshCw, HelpCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" interface PaymentErrorProps { error: string onRetry?: () => void onContactSupport?: () => void } export function PaymentErrorHandler({ error, onRetry, onContactSupport }: PaymentErrorProps) { const getErrorType = (errorMessage: string) => { const message = errorMessage.toLowerCase() if (message.includes("declined") || message.includes("card_declined")) { return "declined" } else if (message.includes("expired") || message.includes("expired_card")) { return "expired" } else if (message.includes("insufficient") || message.includes("insufficient_funds")) { return "insufficient_funds" } else if (message.includes("cvc") || message.includes("incorrect_cvc")) { return "incorrect_cvc" } else if (message.includes("number") || message.includes("incorrect_number")) { return "incorrect_number" } else if (message.includes("processing") || message.includes("processing_error")) { return "processing_error" } else if (message.includes("network") || message.includes("connection")) { return "network_error" } return "generic" } const errorType = getErrorType(error) const getErrorDetails = () => { switch (errorType) { case "declined": return { title: "Card Declined", description: "Your bank declined this transaction.", suggestions: [ "Contact your bank to authorize the transaction", "Check if your card has international transaction restrictions", "Verify your billing address matches your bank records", "Try a different payment method", ], icon: , } case "expired": return { title: "Card Expired", description: "The card you're trying to use has expired.", suggestions: [ "Use a different card that hasn't expired", "Contact your bank for a replacement card", "Update your payment method with current card details", ], icon: , } case "insufficient_funds": return { title: "Insufficient Funds", description: "Your card doesn't have enough available credit or funds.", suggestions: [ "Check your account balance", "Use a different payment method", "Contact your bank to increase your credit limit", "Try again after making a payment to your account", ], icon: , } case "incorrect_cvc": return { title: "Incorrect Security Code", description: "The CVC/CVV code you entered doesn't match your card.", suggestions: [ "Check the 3-digit code on the back of your card (4 digits for Amex)", "Make sure you're entering the security code, not your PIN", "Try typing the code again carefully", ], icon: , } case "incorrect_number": return { title: "Incorrect Card Number", description: "The card number you entered is invalid.", suggestions: [ "Double-check your card number for typos", "Make sure you're entering the full 16-digit number", "Verify you're using a supported card type (Visa, Mastercard, etc.)", ], icon: , } case "processing_error": return { title: "Processing Error", description: "There was a temporary issue processing your payment.", suggestions: [ "Wait a few minutes and try again", "Check if the charge appeared on your account", "Try a different payment method", "Contact support if the issue persists", ], icon: , } case "network_error": return { title: "Connection Error", description: "We couldn't connect to the payment processor.", suggestions: [ "Check your internet connection", "Try refreshing the page", "Wait a moment and try again", "Contact support if the problem continues", ], icon: , } default: return { title: "Payment Error", description: "There was an issue processing your payment.", suggestions: [ "Verify all your payment details are correct", "Try a different payment method", "Contact your bank to ensure the transaction isn't blocked", "Reach out to our support team for assistance", ], icon: , } } } const errorDetails = getErrorDetails() return (

{errorDetails.icon}

{errorDetails.title} {errorDetails.description}

Error Details:

{error}

What you can try:

• {suggestion}

{onRetry && ( )}

Need immediate help?

📧 Email:{" "} support@lokate.ai

📞 Phone:{" "} (555) 123-4567

💬 Live Chat: Available 9 AM - 6 PM EST

) } [V0_FILE]typescript:file="lib/error-utils.ts" isMerged="true" // Utility functions for error handling and validation export interface ErrorDetails { type: "auth" | "payment" | "network" | "validation" | "service" title: string message: string suggestions: string[] canRetry: boolean needsSupport: boolean } export function parseFirebaseError(error: any): ErrorDetails { if (!error?.code) { return { type: "service", title: "Unknown Error", message: "An unexpected error occurred.", suggestions: ["Please try again or contact support."], canRetry: true, needsSupport: true, } } switch (error.code) { case "auth/user-not-found": return { type: "auth", title: "Account Not Found", message: "No account exists with this email address.", suggestions: [ "Check your email address for typos", "Create a new account by starting a free trial", "Contact support if you believe this is an error", ], canRetry: true, needsSupport: false, } case "auth/wrong-password": case "auth/invalid-credential": return { type: "auth", title: "Incorrect Password", message: "The password you entered is incorrect.", suggestions: [ "Double-check your password", 'Use the "Forgot password?" link to reset it', "Make sure Caps Lock is off", ], canRetry: true, needsSupport: false, } case "auth/too-many-requests": return { type: "auth", title: "Too Many Attempts", message: "Too many failed login attempts from this device.", suggestions: [ "Wait 15 minutes before trying again", "Reset your password using the link below", "Clear your browser cache and cookies", ], canRetry: false, needsSupport: false, } case "auth/network-request-failed": return { type: "network", title: "Connection Error", message: "Unable to connect to our servers.", suggestions: ["Check your internet connection", "Try refreshing the page", "Disable VPN if you're using one"], canRetry: true, needsSupport: false, } default: return { type: "service", title: "Service Error", message: `Authentication error: ${error.message}`, suggestions: [ "Try again in a few minutes", "Clear your browser cache", "Contact support with error code: " + error.code, ], canRetry: true, needsSupport: true, } } } export function parseStripeError(error: string): ErrorDetails { const errorLower = error.toLowerCase() if (errorLower.includes("card_declined") || errorLower.includes("generic_decline")) { return { type: "payment", title: "Card Declined", message: "Your bank declined this transaction.", suggestions: [ "Contact your bank to authorize the transaction", "Check for international transaction restrictions", "Verify your billing address matches bank records", "Try a different payment method", ], canRetry: true, needsSupport: false, } } if (errorLower.includes("expired_card")) { return { type: "payment", title: "Card Expired", message: "The card you're trying to use has expired.", suggestions: [ "Use a different card that hasn't expired", "Contact your bank for a replacement card", "Update your payment method", ], canRetry: true, needsSupport: false, } } if (errorLower.includes("insufficient_funds")) { return { type: "payment", title: "Insufficient Funds", message: "Your card doesn't have enough available funds.", suggestions: [ "Check your account balance", "Use a different payment method", "Contact your bank about credit limits", ], canRetry: true, needsSupport: false, } } if (errorLower.includes("incorrect_cvc")) { return { type: "payment", title: "Incorrect Security Code", message: "The CVC/CVV code doesn't match your card.", suggestions: [ "Check the 3-digit code on the back of your card", "For Amex, use the 4-digit code on the front", "Make sure you're not entering your PIN", ], canRetry: true, needsSupport: false, } } // Default payment error return { type: "payment", title: "Payment Error", message: error, suggestions: [ "Verify all payment details are correct", "Try a different payment method", "Contact your bank if the issue persists", ], canRetry: true, needsSupport: true, } } export function validateFormData(data: Record): { isValid: boolean; errors: string[] } { const errors: string[] = [] // Email validation if (!data.email || !data.email.includes("@") || !data.email.includes(".")) { errors.push("Please enter a valid email address") } // Password validation if (!data.password || data.password.length < 8) { errors.push("Password must be at least 8 characters long") } // Card number validation (if present) if (data.cardNumber) { const cleanCard = data.cardNumber.replace(/\s/g, "") if (cleanCard.length < 13 || cleanCard.length > 19) { errors.push("Please enter a valid card number") } } // Expiry validation (if present) if (data.cardExpiry) { const [month, year] = data.cardExpiry.split("/") if (!month || !year || month.length !== 2 || year.length !== 2) { errors.push("Please enter expiry date in MM/YY format") } } return { isValid: errors.length === 0, errors, } } [V0_FILE]typescript:file="hooks/use-error-handling.ts" isMerged="true" "use client" import { useState, useCallback } from "react" import { parseFirebaseError, parseStripeError, type ErrorDetails } from "@/lib/error-utils" export function useErrorHandling() { const [error, setError] = useState(null) const [errorDetails, setErrorDetails] = useState(null) const [isLoading, setIsLoading] = useState(false) const handleError = useCallback((err: any, context?: string) => { console.error(`Error in ${context || "unknown context"}:`, err) let details: ErrorDetails if (err?.code && err.code.startsWith("auth/")) { details = parseFirebaseError(err) } else if (typeof err === "string" && (err.includes("card") || err.includes("payment"))) { details = parseStripeError(err) } else if (err instanceof Error) { details = { type: "service", title: "Error", message: err.message, suggestions: ["Please try again or contact support if the issue persists."], canRetry: true, needsSupport: true, } } else { details = { type: "service", title: "Unknown Error", message: "An unexpected error occurred.", suggestions: ["Please refresh the page and try again."], canRetry: true, needsSupport: true, } } setError(details.message) setErrorDetails(details) }, []) const clearError = useCallback(() => { setError(null) setErrorDetails(null) }, []) const withErrorHandling = useCallback( async (asyncFn: () => Promise, context?: string) => { setIsLoading(true) clearError() try { const result = await asyncFn() return result } catch (err) { handleError(err, context) throw err // Re-throw so calling code can handle it if needed } finally { setIsLoading(false) } }, [handleError, clearError], ) return { error, errorDetails, isLoading, handleError, clearError, withErrorHandling, setIsLoading, } } [V0_FILE]typescript:file="app/api/create-trial-account/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import Stripe from "stripe" export async function POST(request: NextRequest) { try { const body = await request.json() const { name, email, phone, username, cardNumber, cardName, cardExpiry, cardCvc } = body // Validate required fields if (!name || !email || !phone || !username || !cardNumber || !cardName || !cardExpiry || !cardCvc) { return NextResponse.json( { error: "All fields are required", details: "Please fill in all required fields to continue.", }, { status: 400 }, ) } // Validate email format if (!email.includes("@") || !email.includes(".")) { return NextResponse.json( { error: "Invalid email format", details: "Please enter a valid email address (e.g., you@example.com).", }, { status: 400 }, ) } // Validate card expiry format if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) { return NextResponse.json( { error: "Invalid expiry date format", details: "Please enter expiry date in MM/YY format (e.g., 12/25).", }, { status: 400 }, ) } // Parse expiry date const [expMonth, expYear] = cardExpiry.split("/") const expMonthNum = Number.parseInt(expMonth, 10) const expYearNum = Number.parseInt(expYear, 10) // Validate expiry date values if (expMonthNum < 1 || expMonthNum > 12) { return NextResponse.json( { error: "Invalid expiry month", details: "Please enter a valid expiry month (01-12).", }, { status: 400 }, ) } // Check if card is expired const currentDate = new Date() const currentYear = currentDate.getFullYear() % 100 const currentMonth = currentDate.getMonth() + 1 if (expYearNum < currentYear || (expYearNum === currentYear && expMonthNum < currentMonth)) { return NextResponse.json( { error: "Card has expired", details: "Your card has expired. Please use a different card.", }, { status: 400 }, ) } // Initialize Stripe if (!process.env.STRIPE_SECRET_KEY) { console.error("Stripe secret key not configured") return NextResponse.json( { error: "Payment service unavailable", details: "Our payment service is temporarily unavailable. Please try again later or contact support.", }, { status: 500 }, ) } const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: "2023-10-16", }) try { // Create payment method first const paymentMethod = await stripe.paymentMethods.create({ type: "card", card: { number: cardNumber.replace(/\s/g, ""), exp_month: expMonthNum, exp_year: expYearNum + 2000, // Convert YY to YYYY cvc: cardCvc, }, billing_details: { name: cardName, email: email, }, }) console.log("Payment method created:", paymentMethod.id) // Create or retrieve customer let customer const existingCustomers = await stripe.customers.list({ email: email, limit: 1, }) if (existingCustomers.data.length > 0) { customer = existingCustomers.data[0] console.log("Using existing customer:", customer.id) } else { customer = await stripe.customers.create({ email: email, name: name, phone: phone, metadata: { username: username, }, }) console.log("Created new customer:", customer.id) } // Attach payment method to customer await stripe.paymentMethods.attach(paymentMethod.id, { customer: customer.id, }) // Set as default payment method await stripe.customers.update(customer.id, { invoice_settings: { default_payment_method: paymentMethod.id, }, }) // Create subscription with 7-day trial if (!process.env.STRIPE_PRICE_ID) { console.error("Stripe price ID not configured") return NextResponse.json( { error: "Subscription service unavailable", details: "Our subscription service is temporarily unavailable. Please try again later or contact support.", }, { status: 500 }, ) } const subscription = await stripe.subscriptions.create({ customer: customer.id, items: [ { price: process.env.STRIPE_PRICE_ID, }, ], trial_period_days: 7, payment_behavior: "default_incomplete", payment_settings: { save_default_payment_method: "on_subscription", }, expand: ["latest_invoice.payment_intent"], metadata: { username: username, phone: phone, }, }) console.log("Subscription created:", subscription.id) // Calculate trial end date const trialEndDate = new Date() trialEndDate.setDate(trialEndDate.getDate() + 7) // Get the client secret from the subscription if needed const invoice = subscription.latest_invoice as Stripe.Invoice const paymentIntent = invoice?.payment_intent as Stripe.PaymentIntent const clientSecret = paymentIntent?.client_secret || null return NextResponse.json({ success: true, subscriptionId: subscription.id, customerId: customer.id, paymentMethodId: paymentMethod.id, trialEnd: subscription.trial_end, trialEndDate: trialEndDate.toISOString(), nextBillingDate: trialEndDate.toLocaleDateString(), clientSecret: clientSecret, status: subscription.status, message: "Trial account created successfully! Your 7-day free trial has started.", }) } catch (stripeError: any) { console.error("Stripe API Error:", stripeError) // Handle specific Stripe errors with user-friendly messages if (stripeError.type === "StripeCardError") { switch (stripeError.code) { case "card_declined": return NextResponse.json( { error: "card_declined", details: "Your card was declined by your bank. Please contact your bank or try a different payment method.", }, { status: 400 }, ) case "expired_card": return NextResponse.json( { error: "expired_card", details: "Your card has expired. Please use a different card.", }, { status: 400 }, ) case "insufficient_funds": return NextResponse.json( { error: "insufficient_funds", details: "Your card has insufficient funds. Please use a different payment method.", }, { status: 400 }, ) case "incorrect_cvc": return NextResponse.json( { error: "incorrect_cvc", details: "The security code (CVC) you entered is incorrect. Please check and try again.", }, { status: 400 }, ) case "incorrect_number": return NextResponse.json( { error: "incorrect_number", details: "The card number you entered is incorrect. Please check and try again.", }, { status: 400 }, ) case "invalid_expiry_month": case "invalid_expiry_year": return NextResponse.json( { error: "invalid_expiry", details: "The expiry date you entered is invalid. Please check and try again.", }, { status: 400 }, ) case "processing_error": return NextResponse.json( { error: "processing_error", details: "There was an error processing your payment. Please try again or use a different card.", }, { status: 400 }, ) default: return NextResponse.json( { error: "card_error", details: `Card error: ${stripeError.message}. Please check your card details and try again.`, }, { status: 400 }, ) } } else if (stripeError.type === "StripeRateLimitError") { return NextResponse.json( { error: "rate_limit", details: "Too many payment attempts. Please wait a few minutes before trying again.", }, { status: 429 }, ) } else if (stripeError.type === "StripeConnectionError") { return NextResponse.json( { error: "connection_error", details: "Unable to connect to payment processor. Please check your internet connection and try again.", }, { status: 503 }, ) } else { return NextResponse.json( { error: "payment_processing_failed", details: `Payment processing failed: ${stripeError.message}. Please try again or contact support.`, }, { status: 500 }, ) } } } catch (error: any) { console.error("Account creation error:", error) return NextResponse.json( { error: "account_creation_failed", details: "Account creation failed due to an unexpected error. Please try again or contact support if the problem persists.", }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/login/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, Eye, EyeOff, ArrowLeft, AlertCircle } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { useRouter } from "next/navigation" import { useAuth } from "@/contexts/auth-context" import { FirebaseError } from "firebase/app" // Google Icon Component const GoogleIcon = () => ( ) export default function LoginPage() { const router = useRouter() const authContext = useAuth() const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [rememberMe, setRememberMe] = useState(false) const [error, setError] = useState(null) // Debug: Log the auth context useEffect(() => { console.log("🔍 Auth context:", { currentUser: authContext?.currentUser?.uid || "none", firebaseReady: authContext?.firebaseReady, loginFunction: typeof authContext?.login, }) }, [authContext]) // Redirect if already logged in useEffect(() => { if (authContext?.currentUser) { console.log("🔄 User already logged in, redirecting to dashboard") router.push("/dashboard") } }, [authContext?.currentUser, router]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { // Check if auth context is available if (!authContext) { setError("Authentication service is not available. Please refresh the page and try again.") return } // Check if login function exists if (typeof authContext.login !== "function") { setError("Authentication service is not properly initialized. Please refresh the page and try again.") return } // Check Firebase readiness if (!authContext.firebaseReady) { setError("Authentication service is not ready. Please wait a moment and try again.") return } // Enhanced validation with specific error messages if (!email.trim()) { setError("Please enter your email address to continue.") return } if (!password.trim()) { setError("Please enter your password to continue.") return } if (!email.includes("@") || !email.includes(".")) { setError("Please enter a valid email address (e.g., you@example.com).") return } if (password.length < 6) { setError("Password must be at least 6 characters long.") return } console.log("🔐 Attempting login for:", email) await authContext.login(email, password) console.log("✅ Login successful, redirecting...") // Redirect is handled by the useEffect above } catch (error) { console.error("❌ Login error:", error) // Enhanced Firebase error handling with user-friendly messages if (error instanceof FirebaseError) { switch (error.code) { case "auth/api-key-not-valid": case "auth/invalid-api-key": case "auth/configuration-not-found": case "auth/project-not-found": setError( "Authentication service is experiencing technical difficulties. Please try again in a few minutes.", ) break case "auth/user-not-found": setError( "No account found with this email address. Please check your email or start a free trial to create an account.", ) break case "auth/wrong-password": case "auth/invalid-credential": setError( "The password you entered is incorrect. Please try again or use the 'Forgot password?' link below.", ) break case "auth/invalid-email": setError("The email address format is invalid. Please enter a valid email address.") break case "auth/user-disabled": setError("Your account has been temporarily disabled. Please contact our support team for assistance.") break case "auth/too-many-requests": setError( "Too many failed login attempts. Please wait 15 minutes before trying again, or reset your password.", ) break case "auth/network-request-failed": setError("Unable to connect to our servers. Please check your internet connection and try again.") break case "auth/internal-error": setError("An internal error occurred. Please try again in a few minutes.") break default: console.error("Unhandled Firebase Auth Error:", error.code, error.message) setError(`Login failed: ${error.message}. Please try again or contact support if the issue persists.`) } } else if (error instanceof Error) { if (error.message.includes("Firebase Auth not initialized")) { setError("Authentication service is not available. Please refresh the page and try again.") } else if (error.message.includes("network") || error.message.includes("fetch")) { setError("Connection error. Please check your internet connection and try again.") } else { setError(`Login failed: ${error.message}. Please try again or contact support if the issue persists.`) } } else { setError("An unexpected error occurred during login. Please refresh the page and try again.") } } finally { setIsLoading(false) } } // Show loading state while auth context is initializing if (!authContext) { return (

Initializing authentication...

) } return (

{/* Header/Navigation */}

Lokate.ai

{/* Back to home link */} Back to home {/* Login Card */} Welcome back Sign in to your Lokate.ai account to access your personalized property alerts {error && (

Login Failed

{error}

)}

Email setEmail(e.target.value)} required className="w-full" />

Password

setPassword(e.target.value)} required className="w-full pr-10" />

setRememberMe(e.target.checked)} className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" /> Remember me for 30 days

Forgot password?

{rememberMe && (

Security Note: Only use "Remember me" on your personal devices. Your login will be saved securely for 30 days.

)}

Don't have an account?{" "} Start your free trial

{/* Divider */}

Or continue with

{/* Social Login Options */}

{process.env.NODE_ENV === "development" && (

Debug Info:

Firebase Ready: {authContext.firebaseReady ? "✅ Yes" : "❌ No"}

Current User: {authContext.currentUser?.uid || "None"}

Environment: {process.env.NODE_ENV}

)} {/* Help text */}

Need help? Contact our{" "} support team {" "} or check out our{" "} FAQ

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/guides/getting-started/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Target, ArrowLeft, CheckCircle, AlertCircle, Info } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { ScrollToTop } from "@/components/scroll-to-top" export default function GettingStartedGuidePage() { return (

{/* Header/Navigation */}

Lokate.ai

{/* Guide Header */}

Getting Started Guide

Everything you need to know to start finding your perfect properties with Lokate.ai

{/* Guide Content */}

{/* Introduction */}

Welcome to Lokate.ai

Lokate.ai is designed to revolutionize your property search experience by leveraging advanced AI technology to find properties that perfectly match your specific criteria. This guide will walk you through the essential steps to get started and make the most of our platform.

Our platform processes thousands of property listings daily, using over 200 different criteria to match you with properties that meet your exact specifications.

{/* Step 1 */}

Creating Your Account

Getting started with Lokate.ai is simple. Begin by creating your account, which gives you access to our 7-day free trial with full platform functionality.

To create your account:

Click the "Start my free trial" button on the homepage
Enter your email address and create a secure password
Verify your email address through the confirmation link we send you
Complete your profile with basic information to help personalize your experience

No credit card is required to start your free trial. You'll get full access to all features for 7 days.

{/* Step 2 */}

Setting Up Your Search Criteria

The power of Lokate.ai comes from its ability to understand and process your specific property requirements. Taking time to set up detailed search criteria will yield the best results.

Key criteria to consider:

Location preferences - Target specific zip codes, neighborhoods, or radius from points of interest
Property specifications - Type, size, bedrooms, bathrooms, lot size, year built
Price range - Set your minimum and maximum budget
Special features - Pool, garage, basement, waterfront, view, etc.
Investment criteria - Cap rate, cash flow potential, appreciation forecasts

Be specific but not too restrictive. Setting too many "must-have" criteria might significantly limit your results. Consider which features are absolute requirements versus preferences.

{/* Step 3 */}

Understanding Your Daily Alerts

Once your criteria are set, Lokate.ai will send you daily alerts with properties that match your specifications. These alerts are designed to provide you with comprehensive information at a glance.

Each property alert includes:

Basic property details - Address, price, size, bedrooms, bathrooms
Match score - How closely the property matches your criteria (0-100%)
Market analysis - Comparative market data and investment potential
Property history - Previous sales, price changes, days on market
Direct links - Quick access to listing details and contact information

You can customize when you receive alerts in your account settings. The default is 7:00 AM local time, but you can adjust this to your preference.

{/* Step 4 */}

Refining Your Search Over Time

The true power of Lokate.ai comes from its ability to learn from your interactions and refine your search results over time.

Ways to improve your results:

Provide feedback - Rate properties in your alerts to help our AI understand your preferences better
Adjust criteria - Modify your search parameters as you learn more about the market
Save favorites - Bookmark properties you like to reference later and help train the AI
Set priority levels - Indicate which criteria are most important to you

Our AI typically needs about 7-10 days of feedback to significantly improve your match quality. The more you interact with your alerts, the better they become.

{/* Next Steps */}

Next Steps

Now that you understand the basics of using Lokate.ai, you're ready to start finding your perfect properties. For more detailed information, check out our other guides:

Need more help? Our support team is available via chat or email to answer any questions you might have about getting started with Lokate.ai.

{/* Back to Support */}

{/* Footer */} {/* Scroll to top button */}

) } [V0_FILE]typescriptreact:file="app/guides/advanced-filters/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Target, ArrowLeft, CheckCircle, AlertCircle, Info, Map, Home, DollarSign, Percent } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { ScrollToTop } from "@/components/scroll-to-top" export default function AdvancedFiltersGuidePage() { return (

{/* Header/Navigation */}

Lokate.ai

{/* Guide Header */}

Advanced Filtering Guide

Master Lokate.ai's powerful filtering system to find exactly the properties you're looking for

{/* Guide Content */}

{/* Introduction */}

Unlocking the Power of Advanced Filtering

Lokate.ai offers over 500 different filtering options to help you find properties that match your exact specifications. This guide will help you understand and leverage these powerful filtering capabilities to narrow down your search and find your ideal properties faster.

Our advanced filtering system is built on a combination of MLS data, public records, and proprietary data sources to give you the most comprehensive property search experience available.

{/* Filter Categories */}

Filter Categories

Lokate.ai organizes its 500+ filters into intuitive categories to help you quickly find and apply the filters that matter most to you.

{/* Location Filters */}

Location Filters

Narrow down properties by specific geographic criteria.

Basic Location

City, State, ZIP code
County, Neighborhood
School district
Radius search (miles from point)

Advanced Location

Proximity to amenities
Flood zone designation
Elevation and topography

Pro Tip: Use radius search to define custom search areas around specific points of interest like schools, workplaces, or amenities.

{/* Property Characteristics */}

Property Characteristics

Filter by specific property features and attributes.

Basic Characteristics

Property type (single-family, condo, etc.)
Bedrooms and bathrooms
Square footage (living area)
Lot size
Year built
Stories/levels

Special Features

Spa, waterfront view
Garage size and type
Views (mountain, water, city)
Architectural style
Energy efficiency features

Important: Some special features may not be consistently reported across all listings. Setting these as "must-haves" might cause you to miss properties where the feature exists but wasn't properly documented.

{/* Financial Filters */}

Financial Filters

Find properties that meet your financial criteria and investment goals.

Price & Value

Price range
Price per square foot
Price reduction amount/percentage
Tax assessed value
HOA fees

Investment Metrics

Cap rate range
Cash flow potential
Rental yield
Appreciation forecast
Rehab potential (ARV)

Insight: Our AI can estimate investment metrics even for properties not explicitly marketed as investments by analyzing comparable rentals, market trends, and property characteristics.

{/* Special Opportunity Filters */}

Special Opportunity Filters

Identify properties with unique investment or purchasing opportunities.

Distressed Properties

Foreclosures
Short sales
Bank-owned (REO)
Auction properties

Value-Add Opportunities

Fixer-upper potential
Under-market value indicators
Development potential
Zoning opportunity

Important: Special opportunity properties often move quickly and may require additional due diligence. Our system flags potential issues to be aware of before pursuing these properties.

{/* Advanced Filter Techniques */}

Advanced Filter Techniques

Beyond applying individual filters, Lokate.ai offers sophisticated techniques to refine your search even further.

{/* Filter Combinations */}

Filter Combinations & Logic

Create complex search queries using AND/OR logic between different filter groups. For example, find properties that are either (waterfront OR have a pool) AND (built after 2000) AND (priced under $500,000).

Example: To find a vacation rental investment, you might combine filters for properties in tourist areas, with 3+ bedrooms, within walking distance to attractions, and with a cap rate above 6%.

{/* Saved Searches */}

Saved Searches & Variations

Save multiple search configurations to quickly switch between different property hunting strategies. Create variations of your main search to test different parameters without starting from scratch.

Pro users can create up to 25 saved searches with different alert frequencies for each (daily, instant, weekly).

{/* Exclusion Filters */}

Exclusion Filters

Sometimes defining what you don't want is as important as defining what you do want. Use exclusion filters to remove properties with specific characteristics from your results.

Example: Exclude properties on busy streets, in flood zones, with HOA restrictions against rentals, or with specific known issues like foundation problems.

{/* AI-Assisted Filtering */}

AI-Assisted Filtering

Let our AI help you discover filter combinations you might not have considered. Based on your interactions and feedback, our system can suggest additional filters that might improve your results.

The more you interact with your search results (saving favorites, viewing details, providing feedback), the better our AI becomes at suggesting relevant filters.

{/* Filter Priority System */}

Filter Priority System

Lokate.ai's unique filter priority system allows you to indicate how important each filter is to your search, rather than treating all filters as absolute requirements.

Must-Have

Properties must meet these criteria to appear in your results. Use sparingly for absolute requirements.

Strong Preference

Properties meeting these criteria are prioritized but won't be excluded if they don't match.

Nice-to-Have

These criteria influence the match score but have minimal impact on which properties appear.

Example: You might set "3+ bedrooms" as Must-Have, "garage" as Strong Preference, and "pool" as Nice-to-Have. This ensures you see all 3+ bedroom homes, with those having garages appearing higher in your results, and pool homes getting a slight boost in match score.

{/* Best Practices */}

Filter Best Practices

Follow these guidelines to get the most out of Lokate.ai's advanced filtering system.

Start broad, then narrow. Begin with your most essential criteria, review results, then gradually add more specific filters.
Use price range strategically. Consider setting your maximum price slightly above your actual budget to catch undervalued properties or those likely to accept lower offers.
Leverage the priority system. Reserve "Must-Have" for your absolute requirements and use "Strong Preference" for most other important criteria.
Create multiple search profiles. Set up different searches for different strategies or property types rather than trying to capture everything in one search.
Review and refine regularly. Market conditions change, and so might your preferences. Review your filters every few weeks to ensure they still align with your goals.

The most common mistake users make is setting too many "Must-Have" filters, which can severely limit results. Be selective about which criteria are truly non-negotiable.

{/* Next Steps */}

Next Steps

Now that you understand Lokate.ai's advanced filtering capabilities, you're ready to create highly targeted property searches. For more information on related topics, check out our other guides:

Need help with specific filters? Our support team can provide guidance on setting up filters for particular investment strategies or property types.

{/* Back to Support */}

{/* Footer */} {/* Scroll to top button */}

) } [V0_FILE]json:file="public/site.webmanifest" isMerged="true" { "name": "Lokate.ai", "short_name": "Lokate", "description": "AI-Powered Real Estate Search for New Agents", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3b82f6", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ] } [V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Figma-favicon-16x16-removebg-preview-DJGxMzqsFeLdN75GPw2X9DaVzo1KU3.png" isMerged="true" [V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Figma-Favicon-32x32-removebg-preview-r1Uhqo2fOQAZPrUNAK7pzVSVzxYGRR.png" isMerged="true" [V0_FILE]png:file="public/android-chrome-192x192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/android-chrome-192x192-removebg-preview-vGUSZ1rApYNzIBl0fEPrHo9Qpthpwx.png" isMerged="true" [V0_FILE]png:file="public/android-chrome-512x512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/android-chrome-512x512-MmehqsvDFKAmvMxjZ1yWdsFAlAaEgH.png" isMerged="true" [V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apple-touch-icon-removebg-preview-splxWc3JhG7hFmjCRc3GDLK4VvHFnR.png" isMerged="true" [V0_FILE]png:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-pLNiDIrg7LuxeAi00ePzXewEjIonEF.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { CheckCircle, Mail, ArrowRight, Building, TrendingUp, Clock, Target, BarChart3, Zap, Shield, Crown, Brain, DollarSign, Users, MessageSquare, Sparkles, X, } from "lucide-react" import { useState } from "react" import { NavigationLink } from "@/components/navigation-link" export default function LandingPage() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

{/* Header/Navigation */}

{/* Logo */} Lokate.ai {/* Desktop Navigation */} {/* Desktop CTA Button */}

{/* Mobile Layout */}

{/* Mobile CTA Button */} {/* Mobile Menu Button */}

{/* Mobile Menu */} {mobileMenuOpen && (

)}

{/* Hero Section */}

Better Than MLS. Smarter Than Your Competition.

AI-powered real estate intelligence that finds deals MLS can't. Type any search criteria in plain English and get instant results. At $9.99/month, it's stupid not to try.

Lokate.ai AI-powered property search dashboard showing natural language search and predictive analytics

{/* Problem Statement */}

MLS is Basic, Limited, and Holding You Back

New agents struggle with outdated systems that cost too much and deliver too little

You Can Do Better

Why settle with what the MLS offers when Lokate is a no-brainer
Limited Search Options

Rigid filters that can't understand what you're really looking for
Struggling to Close Deals

Missing opportunities because you can't find the right properties fast enough

Complex traditional MLS interface showing overwhelming filter options and outdated design

{/* Solution Overview */}

The AI-Powered Real Estate Intelligence Platform

Professional-grade tools that outperform MLS at a fraction of the cost

AI-Powered Search

Type searches like "3br homes under $400k near good schools" and get instant results

Unlimited Customization

Create any search criteria you can imagine - no limitations on filters or property characteristics

Beyond MLS Data

Create any search criteria you can imagine - no rigid filters or limitations

Instant Client Matching

AI matches properties to your clients automatically - close deals faster

{/* How It Works */}

How It Works

Four simple steps to build your first reliable deal-closing system

Describe Your Clients Dream Home

Use natural language to describe any home criteria - our AI understands exactly what you mean

AI Analyzes Everything

Advanced algorithms scan multiple data sources and predict market trends in real-time

Get Smart Alerts

Receive curated home matches with AI insights about timing and client fit

Close More Deals

Present amazing homes to clients and close deals easier than ever before

{/* Key Benefits */}

Why New Agents Love Lokate.ai

Build your reputation and close deals easier than agents using traditional methods

Close Your First 3 Deals Faster

AI-powered matching helps you present amazing homes and close your first 3 deals exactly how you imagined
Build Your Brand

Consistently deliver properties that exceed expectations and become the go-to agent in your area
Gain A Competitive Advantage

Access insights and properties that other agents miss, giving you the edge in every situation
Work Smarter, Not Harder

Automate property research and focus your time on building relationships and closing deals

Lokate.ai success dashboard showing deals closed, commission earned, and client satisfaction metrics for new agents

{/* Target Audience Section */}

Perfect for New Agents

Create Raving Fans
Become The Go-To Agent
Dominate Your Market
Exceed Client Expectations

{/* Features Deep Dive */}

Enterprise-Grade Tools at Startup Prices

Professional features that rival $10,000+ enterprise solutions

AI-Powered Search

Natural language processing understands complex search queries better than any traditional MLS system

Unlimited Customization

Create any search criteria you can imagine - no limitations on filters or property characteristics

Smart Client Matching

Automatically match properties to client preferences and budget

Amazing Value

At Only $9.99/month, it's less than a Starbucks run!

Real-Time Alerts

Get instant notifications when properties matching your criteria hit the market or change status

Work Smarter, Not Harder

Automate property research and focus your time on building relationships and closing deals

{/* Data Reliability */}

Superior Data, Smarter Insights

Reach beyond your competitors with AI-powered analysis and predictions

Beyond Your Grandpa's MLS

Access multiple data sources to be a better agent

AI-Enhanced Insights

Every listing enhanced with AI predictions on pricing, market time, and buyer interest

Lightning Fast Updates

Data refreshed every 5 minutes - be first to know about new opportunities

Verified Accuracy

AI cross-references multiple sources to ensure data accuracy and completeness

{/* Pricing Section */}

It's Stupid NOT to Try This

Better than MLS at 1/5th of the cost. Seriously, what are you waiting for?

AI Real Estate Intelligence

Everything you need to close your first 10 deals

$9.99

per month

vs. $50/month for basic MLS access

Natural Language Property Search
AI Predictive Market Analytics
Off-Market Deal Access
Smart Client Matching
Instant Mobile Alerts
Unlimited AI-Powered Searches

) } [V0_FILE]typescriptreact:file="app/trial/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, ArrowLeft, CreditCard, Mail, Phone, Lock, User, Eye, EyeOff, CheckCircle, AlertCircle, AtSign, } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" import { useAuth } from "@/contexts/auth-context" import { FirebaseError } from "firebase/app" import { doc, setDoc, getDoc } from "firebase/firestore" import { db } from "@/lib/firebase-config" import { firebaseUtils } from "@/lib/firebase-utils" export default function TrialSignupPage() { const router = useRouter() const { signup, firebaseReady } = useAuth() const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [usernameChecking, setUsernameChecking] = useState(false) const [usernameAvailable, setUsernameAvailable] = useState(null) const [stripeData, setStripeData] = useState({}) // Personal Information const [name, setName] = useState("") const [email, setEmail] = useState("") const [phone, setPhone] = useState("") const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) // Credit Card Information const [cardNumber, setCardNumber] = useState("") const [cardName, setCardName] = useState("") const [cardExpiry, setCardExpiry] = useState("") const [cardCvc, setCardCvc] = useState("") // Check username availability const checkUsernameAvailability = async (usernameToCheck: string) => { if (!usernameToCheck || usernameToCheck.length < 3) { setUsernameAvailable(null) return } setUsernameChecking(true) try { if (firebaseReady && db) { // Check in Firestore const usernameDoc = await getDoc(doc(db, "usernames", usernameToCheck.toLowerCase())) setUsernameAvailable(!usernameDoc.exists()) } else { // Fallback: check localStorage const existingUsers = JSON.parse(localStorage.getItem("users") || "{}") setUsernameAvailable(!existingUsers[usernameToCheck.toLowerCase()]) } } catch (error) { console.error("Error checking username:", error) setUsernameAvailable(null) } finally { setUsernameChecking(false) } } // Check if email exists in Firebase const checkEmailExists = async (emailToCheck: string): Promise => { if (!firebaseReady || !db) return false try { return await firebaseUtils.emailExists(emailToCheck) } catch (error) { console.error("Error checking email:", error) // Don't block signup if email check fails due to permissions console.warn("⚠️ Email existence check failed, continuing with signup") return false } } // Handle username change with debounced availability check const handleUsernameChange = (value: string) => { // Only allow alphanumeric characters and underscores const sanitizedValue = value.replace(/[^a-zA-Z0-9_]/g, "").toLowerCase() setUsername(sanitizedValue) setUsernameAvailable(null) // Debounce the username check if (sanitizedValue.length >= 3) { const timeoutId = setTimeout(() => { checkUsernameAvailability(sanitizedValue) }, 500) return () => clearTimeout(timeoutId) } } // Add this validation function before the handleSubmit function const validateCardData = () => { const errors = [] // Validate card number (basic length check) const cleanCardNumber = cardNumber.replace(/\s/g, "") if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) { errors.push("Card number must be between 13-19 digits") } // Validate expiry date format and future date if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) { errors.push("Expiry date must be in MM/YY format") } else { const [month, year] = cardExpiry.split("/") const currentDate = new Date() const currentYear = currentDate.getFullYear() % 100 const currentMonth = currentDate.getMonth() + 1 const expMonth = Number.parseInt(month) const expYear = Number.parseInt(year) if (expMonth < 1 || expMonth > 12) { errors.push("Invalid expiry month") } if (expYear < currentYear || (expYear === currentYear && expMonth < currentMonth)) { errors.push("Card has expired") } } // Validate CVC if (cardCvc.length < 3 || cardCvc.length > 4) { errors.push("CVC must be 3 or 4 digits") } return errors } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { // Enhanced validation with specific error messages if (!name.trim()) { throw new Error("Please enter your full name to continue.") } if (!email.trim()) { throw new Error("Please enter your email address to continue.") } if (!email.includes("@") || !email.includes(".")) { throw new Error("Please enter a valid email address (e.g., you@example.com).") } if (!phone.trim()) { throw new Error("Please enter your phone number for account verification.") } if (!username.trim()) { throw new Error("Please choose a username for your account.") } if (username.length < 3) { throw new Error("Username must be at least 3 characters long.") } if (usernameAvailable === false) { throw new Error("This username is already taken. Please choose a different one.") } if (!password.trim()) { throw new Error("Please create a password for your account.") } if (password.length < 8) { throw new Error("Password must be at least 8 characters long for security.") } // Enhanced card validation const cleanCardNumber = cardNumber.replace(/\s/g, "") if (!cleanCardNumber) { throw new Error("Please enter your credit card number.") } if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) { throw new Error("Please enter a valid credit card number (13-19 digits).") } if (!cardName.trim()) { throw new Error("Please enter the name as it appears on your credit card.") } if (!cardExpiry.trim()) { throw new Error("Please enter your card's expiration date.") } if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) { throw new Error("Please enter expiry date in MM/YY format (e.g., 12/25).") } if (!cardCvc.trim()) { throw new Error("Please enter your card's security code (CVC).") } if (cardCvc.length < 3 || cardCvc.length > 4) { throw new Error("Please enter a valid 3 or 4-digit security code (CVC).") } // Validate expiry date const [expMonth, expYear] = cardExpiry.split("/") const currentDate = new Date() const currentYear = currentDate.getFullYear() % 100 const currentMonth = currentDate.getMonth() + 1 const expMonthNum = Number.parseInt(expMonth) const expYearNum = Number.parseInt(expYear) if (expMonthNum < 1 || expMonthNum > 12) { throw new Error("Please enter a valid expiry month (01-12).") } if (expYearNum < currentYear || (expYearNum === currentYear && expMonthNum < currentMonth)) { throw new Error("Your card has expired. Please use a different card.") } // Rest of the existing logic... const formData = { name: name.trim(), email: email.trim(), phone: phone.trim(), username: username.trim(), cardNumber: cleanCardNumber, cardName: cardName.trim(), cardExpiry: cardExpiry.trim(), cardCvc: cardCvc.trim(), } // Check if email already exists if (firebaseReady) { try { const emailExists = await checkEmailExists(email) if (emailExists) { throw new Error( "An account with this email already exists. Please log in instead or use a different email address.", ) } } catch (emailCheckError) { // Only throw the error if it's about email already existing if (emailCheckError instanceof Error && emailCheckError.message.includes("already exists")) { throw emailCheckError } // For permission errors or other issues, log and continue console.warn("⚠️ Email check failed, continuing with account creation:", emailCheckError) } } // Create Stripe subscription console.log("Creating Stripe customer and subscription...") const stripeResponse = await fetch("/api/create-trial-account", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) const stripeDataResponse = await stripeResponse.json() if (!stripeResponse.ok) { const errorMessage = stripeDataResponse.error || stripeDataResponse.message || "Payment processing failed" // Enhanced Stripe error handling with more specific checks if (errorMessage.includes("card_declined") || errorMessage.includes("generic_decline")) { throw new Error( "Your card was declined by your bank. Please contact your bank or try a different payment method.", ) } else if (errorMessage.includes("expired_card")) { throw new Error("Your card has expired. Please use a different card.") } else if (errorMessage.includes("insufficient_funds")) { throw new Error("Your card has insufficient funds. Please use a different payment method.") } else if (errorMessage.includes("incorrect_cvc")) { throw new Error("The security code (CVC) you entered is incorrect. Please check and try again.") } else if (errorMessage.includes("incorrect_number")) { throw new Error("The card number you entered is incorrect. Please check and try again.") } else if (errorMessage.includes("invalid_expiry_month") || errorMessage.includes("invalid_expiry_year")) { throw new Error("The expiry date you entered is invalid. Please check and try again.") } else if (errorMessage.includes("processing_error")) { throw new Error("There was an error processing your payment. Please try again or use a different card.") } else if (errorMessage.includes("rate_limit")) { throw new Error("Too many payment attempts. Please wait a few minutes before trying again.") } else { // Log the actual error for debugging console.error("Stripe API Error:", stripeDataResponse) throw new Error(`Payment failed: ${errorMessage}. Please check your card details and try again.`) } } // Rest of existing Firebase and localStorage logic... // [Keep the existing Firebase user creation and data storage logic] console.log("Stripe trial subscription created successfully:", stripeDataResponse) setStripeData(stripeDataResponse) // Step 2: Create Firebase user if (firebaseReady) { try { console.log("Creating new Firebase user...") const user = await signup(email, password, { name, phone, username, stripeCustomerId: stripeDataResponse.customerId, stripeSubscriptionId: stripeDataResponse.subscriptionId, trialEnd: stripeDataResponse.trialEnd, subscriptionStatus: "trialing", planType: "pro", }) console.log("Firebase user created successfully:", user.uid) // Store user data in Firestore await setDoc( doc(db, "users", user.uid), { name, email, phone, username, stripeCustomerId: stripeDataResponse.customerId, stripeSubscriptionId: stripeDataResponse.subscriptionId, trialEnd: stripeDataResponse.trialEnd, subscriptionStatus: "trialing", planType: "pro", monthlyPrice: 10.59, createdAt: new Date().toISOString(), }, { merge: true }, ) // Reserve the username in Firestore await setDoc( doc(db, "usernames", username.toLowerCase()), { uid: user.uid, username: username, createdAt: new Date().toISOString(), }, { merge: true }, ) console.log("Username reserved in Firestore:", username) } catch (firebaseError) { console.error("Firebase error:", firebaseError) // Handle specific Firebase errors if (firebaseError instanceof FirebaseError) { switch (firebaseError.code) { case "auth/email-already-in-use": setError("This email is already registered. Please log in instead.") setIsLoading(false) return case "auth/invalid-email": setError("Invalid email address.") setIsLoading(false) return case "auth/weak-password": setError("Password is too weak. Please use at least 8 characters.") setIsLoading(false) return case "auth/invalid-credential": setError("Invalid credentials. Please check your email and password.") setIsLoading(false) return default: console.error("Unhandled Firebase error:", firebaseError.code, firebaseError.message) } } // Continue with localStorage fallback if Firebase fails console.log("Continuing with localStorage fallback due to Firebase error") } } else { console.log("Firebase not ready, storing user data in localStorage") } // Store user info in localStorage as fallback const existingUsers = JSON.parse(localStorage.getItem("users") || "{}") existingUsers[username.toLowerCase()] = { name, email, phone, username, stripeCustomerId: stripeDataResponse.customerId, stripeSubscriptionId: stripeDataResponse.subscriptionId, trialEnd: stripeDataResponse.trialEnd, subscriptionStatus: "trialing", planType: "pro", monthlyPrice: 10.59, createdAt: new Date().toISOString(), } localStorage.setItem("users", JSON.stringify(existingUsers)) localStorage.setItem("currentUser", username.toLowerCase()) localStorage.setItem("trialEmail", email) localStorage.setItem("trialName", name) localStorage.setItem("subscriptionId", stripeDataResponse.subscriptionId) localStorage.setItem("customerId", stripeDataResponse.customerId) localStorage.setItem("subscriptionStatus", "trialing") localStorage.setItem("planType", "pro") localStorage.setItem("monthlyPrice", "10.59") localStorage.setItem("monthlyAmount", "10.59") localStorage.setItem("nextBillingDate", stripeDataResponse.nextBillingDate || "") localStorage.setItem("trialEndDate", stripeDataResponse.trialEndDate || "") if (stripeDataResponse.trialEnd) { localStorage.setItem("trialEnd", stripeDataResponse.trialEnd.toString()) } // Navigate to the confirmation page router.push("/trial/confirmation") } catch (err) { console.error("Signup error details:", { error: err, message: err instanceof Error ? err.message : "Unknown error", stack: err instanceof Error ? err.stack : undefined, timestamp: new Date().toISOString(), }) if (err instanceof Error) { const errorMessage = err.message // Handle specific error patterns if (errorMessage.includes("Firebase") || errorMessage.includes("auth/")) { if (err instanceof FirebaseError) { switch (err.code) { case "auth/email-already-in-use": setError( "An account with this email already exists. Please log in instead or use a different email address.", ) break case "auth/invalid-email": setError("The email address format is invalid. Please enter a valid email address.") break case "auth/weak-password": setError( "Your password is too weak. Please use at least 8 characters with a mix of letters and numbers.", ) break case "auth/network-request-failed": setError("Unable to connect to our servers. Please check your internet connection and try again.") break default: setError(`Account creation failed: ${err.message}. Please try again or contact support.`) } } else { setError("There was an issue creating your account. Please try again or contact our support team.") } } else { // Use the specific error message from our validation or Stripe setError(errorMessage) } } else { setError("An unexpected error occurred. Please refresh the page and try again, or contact our support team.") } } finally { setIsLoading(false) } } // Format card number with spaces const formatCardNumber = (value: string) => { const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "") const matches = v.match(/\d{4,16}/g) const match = (matches && matches[0]) || "" const parts = [] for (let i = 0; i < match.length; i += 4) { parts.push(match.substring(i, i + 4)) } if (parts.length) { return parts.join(" ") } else { return value } } // Format expiry date const formatExpiryDate = (value: string) => { const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "") if (v.length >= 2) { return `${v.substring(0, 2)}/${v.substring(2, 4)}` } return v } return (

{/* Header/Navigation */}

Lokate.ai

{/* Back to home link */} Back to home {/* Signup Card */} Start Your 7-Day Free Trial Start your 7-day free trial today. After the trial, you'll be automatically charged $10.59/month. Cancel anytime during the trial to avoid charges. {error && (

{error.includes("card") || error.includes("payment") || error.includes("declined") ? "Payment Error" : error.includes("email") && error.includes("exists") ? "Account Already Exists" : "Sign Up Error"}

{error}

{/* Specific help based on error type */} {error.includes("card") || error.includes("payment") ? (

Payment Help: Make sure your card details are correct, your card isn't expired, and you have sufficient funds. Contact your bank if the issue persists.

) : error.includes("email") && error.includes("exists") ? (

→ Go to login page instead

) : error.includes("support") || error.includes("contact") ? (

Need immediate help? Email{" "} support@lokate.ai {" "} or call (555) 123-4567

) : null}

)}

{/* Personal Information Section */}

Personal Information

Full Name { console.log("Name changed:", e.target.value) setName(e.target.value) }} required className="w-full" />

Email { console.log("Email changed:", e.target.value) setEmail(e.target.value) }} required className="w-full" />

Phone Number { console.log("Phone changed:", e.target.value) setPhone(e.target.value) }} required className="w-full" />

Username

{ console.log("Username changed:", e.target.value) handleUsernameChange(e.target.value) }} required className={`w-full pr-10 ${ usernameAvailable === true ? "border-green-500" : usernameAvailable === false ? "border-red-500" : "" }`} />

{usernameChecking ? (

) : usernameAvailable === true ? ( ) : usernameAvailable === false ? ( ) : null}

{username.length > 0 && username.length < 3 && (

Username must be at least 3 characters

)} {usernameAvailable === true &&

Username is available!

} {usernameAvailable === false && (

Username is already taken

)}

Password

{ console.log("Password changed:", e.target.value.length, "characters") setPassword(e.target.value) }} required className="w-full pr-10" />

{/* Payment Information Section */}

Payment Information

Card Number { const formatted = formatCardNumber(e.target.value) console.log("Card number changed:", formatted) setCardNumber(formatted) }} maxLength={19} required className="w-full" />

Name on Card { console.log("Card name changed:", e.target.value) setCardName(e.target.value) }} required className="w-full" />

Expiry Date { const formatted = formatExpiryDate(e.target.value) console.log("Card expiry changed:", formatted) setCardExpiry(formatted) }} maxLength={5} required className="w-full" />

CVC { const value = e.target.value.replace(/[^0-9]/g, "") console.log("Card CVC changed:", value) setCardCvc(value) }} maxLength={4} required className="w-full" />

7-day free trial - No charges for 7 days. After trial ends on{" "} {stripeData.nextBillingDate || "trial completion"}, you'll be automatically charged $10.59/month. Cancel anytime during trial to avoid charges.

Already have an account?{" "} Log in

{/* Stripe Badge */}

Payments secured by Stripe

{/* Security note */}

Your information is secure and encrypted

{/* Footer */}

) } [V0_FILE]typescriptreact:file="lib/fallback-auth.ts" isQuickEdit="true" isMerged="true" import { hashPassword, verifyPassword } from "./password-utils" interface User { uid: string email: string username?: string phone?: string stripeCustomerId?: string } interface StoredUser extends User { hashedPassword: string createdAt: string } // Fallback authentication using localStorage export const fallbackAuth = { // Create user account async createUser(email: string, password: string, userData?: any): Promise { try { const users = this.getUsers() // Check if user already exists if (users.find((u) => u.email === email)) { throw new Error("User already exists") } const hashedPassword = await hashPassword(password) const uid = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}` const newUser: StoredUser = { uid, email, hashedPassword, createdAt: new Date().toISOString(), ...userData, } users.push(newUser) localStorage.setItem("lokate_users", JSON.stringify(users)) // Set current user const userForReturn = { ...newUser } delete (userForReturn as any).hashedPassword this.setCurrentUser(userForReturn) return userForReturn } catch (error) { console.error("Error creating user:", error) throw error } }, // Sign in user async signIn(email: string, password: string): Promise { try { const users = this.getUsers() const user = users.find((u) => u.email === email) if (!user) { throw new Error("User not found") } const isValid = await verifyPassword(password, user.hashedPassword) if (!isValid) { throw new Error("Invalid password") } const userForReturn = { ...user } delete (userForReturn as any).hashedPassword this.setCurrentUser(userForReturn) return userForReturn } catch (error) { console.error("Error signing in:", error) throw error } }, // Sign out user signOut(): void { localStorage.removeItem("lokate_current_user") }, // Get current user getCurrentUser(): User | null { try { const userStr = localStorage.getItem("lokate_current_user") return userStr ? JSON.parse(userStr) : null } catch { return null } }, // Set current user setCurrentUser(user: User): void { localStorage.setItem("lokate_current_user", JSON.stringify(user)) }, // Get all users getUsers(): StoredUser[] { try { const usersStr = localStorage.getItem("lokate_users") const users = usersStr ? JSON.parse(usersStr) : [] // Add default admin user if no users exist if (users.length === 0) { const defaultAdmin: StoredUser = { uid: "admin_default_001", email: "admin@lokate.ai", hashedPassword: "$2a$10$rOvHPz8fGNcJ8H7wX9qLaOYvY8QzJ5K6L7M8N9P0Q1R2S3T4U5V6W7", // "AdminPass123!" username: "admin", role: "admin", firstName: "Admin", lastName: "User", createdAt: new Date().toISOString(), } users.push(defaultAdmin) localStorage.setItem("lokate_users", JSON.stringify(users)) } return users } catch { return [] } }, // Send password reset (mock) async sendPasswordReset(email: string): Promise { const users = this.getUsers() const user = users.find((u) => u.email === email) if (user) { console.log(`Password reset email would be sent to: ${email}`) // In a real implementation, this would send an email } }, } [V0_FILE]typescriptreact:file="lib/firebase-auth-integration.ts" isQuickEdit="true" isMerged="true" import { auth, db } from "./firebase-config" import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, sendPasswordResetEmail, } from "firebase/auth" import { doc, setDoc, getDoc, serverTimestamp } from "firebase/firestore" // Enhanced Firebase Authentication Integration with better error handling export const authIntegration = { // Register new user (password automatically secured by Firebase) async registerUser(email: string, password: string, additionalData: any = {}) { if (!auth || !db) { throw new Error("Firebase services are not properly configured. Please contact support.") } try { // Firebase Auth handles password hashing automatically const userCredential = await createUserWithEmailAndPassword(auth, email, password) const user = userCredential.user // Store additional user data in Firestore (NO PASSWORD!) const userData = { uid: user.uid, email: user.email, emailVerified: user.emailVerified, createdAt: serverTimestamp(), updatedAt: serverTimestamp(), // Add your custom fields here username: additionalData.username || "", firstName: additionalData.firstName || "", lastName: additionalData.lastName || "", name: additionalData.name || "", phone: additionalData.phone || "", role: additionalData.role || "user", // Add role field subscriptionStatus: additionalData.subscriptionStatus || "trial", planType: additionalData.planType || "pro", stripeCustomerId: additionalData.stripeCustomerId || "", stripeSubscriptionId: additionalData.stripeSubscriptionId || "", trialEnd: additionalData.trialEnd || null, // NEVER store password here! } await setDoc(doc(db, "users", user.uid), userData) console.log("✅ User registered successfully:", user.uid) return user } catch (error: any) { console.error("❌ Registration error:", error) // Enhanced Firebase error handling if (error.code) { switch (error.code) { case "auth/email-already-in-use": throw new Error( "An account with this email already exists. Please log in instead or use a different email address.", ) case "auth/invalid-email": throw new Error("The email address format is invalid. Please enter a valid email address.") case "auth/weak-password": throw new Error( "Your password is too weak. Please use at least 8 characters with a mix of letters and numbers.", ) case "auth/network-request-failed": throw new Error("Unable to connect to our servers. Please check your internet connection and try again.") case "auth/too-many-requests": throw new Error("Too many account creation attempts. Please wait a few minutes before trying again.") case "auth/operation-not-allowed": throw new Error("Account creation is temporarily disabled. Please contact support for assistance.") default: throw new Error(`Account creation failed: ${error.message}. Please try again or contact support.`) } } throw error } }, // Sign in user (Firebase handles password verification) async signInUser(email: string, password: string) { if (!auth) { throw new Error("Authentication service is not properly configured. Please contact support.") } try { const userCredential = await signInWithEmailAndPassword(auth, email, password) console.log("✅ User signed in:", userCredential.user.uid) return userCredential.user } catch (error: any) { console.error("❌ Sign in error:", error) // Enhanced Firebase error handling for login if (error.code) { switch (error.code) { case "auth/user-not-found": throw new Error( "No account found with this email address. Please check your email or create a new account.", ) case "auth/wrong-password": case "auth/invalid-credential": throw new Error( "The password you entered is incorrect. Please try again or use the 'Forgot password?' link.", ) case "auth/invalid-email": throw new Error("The email address format is invalid. Please enter a valid email address.") case "auth/user-disabled": throw new Error("Your account has been temporarily disabled. Please contact support for assistance.") case "auth/too-many-requests": throw new Error( "Too many failed login attempts. Please wait 15 minutes before trying again or reset your password.", ) case "auth/network-request-failed": throw new Error("Unable to connect to our servers. Please check your internet connection and try again.") case "auth/internal-error": throw new Error("An internal error occurred. Please try again in a few minutes or contact support.") case "auth/quota-exceeded": throw new Error("Our service is temporarily experiencing high traffic. Please try again in a few minutes.") default: throw new Error(`Login failed: ${error.message}. Please try again or contact support.`) } } throw error } }, // Get user profile data (from Firestore, not Auth) async getUserProfile(uid: string) { if (!db) { throw new Error("Database service is not properly configured. Please contact support.") } try { const userDoc = await getDoc(doc(db, "users", uid)) if (userDoc.exists()) { return userDoc.data() } return null } catch (error: any) { console.error("❌ Error getting user profile:", error) throw new Error("Unable to retrieve user profile. Please try again or contact support.") } }, // Sign out user async signOutUser() { if (!auth) { throw new Error("Authentication service is not properly configured. Please contact support.") } try { await signOut(auth) console.log("✅ User signed out") } catch (error: any) { console.error("❌ Sign out error:", error) throw new Error("Unable to sign out. Please try refreshing the page or contact support.") } }, // Reset password (Firebase handles this securely) async resetPassword(email: string) { if (!auth) { throw new Error("Authentication service is not properly configured. Please contact support.") } try { await sendPasswordResetEmail(auth, email) console.log("✅ Password reset email sent") return "Password reset email sent successfully. Please check your inbox and spam folder." } catch (error: any) { console.error("❌ Password reset error:", error) if (error.code) { switch (error.code) { case "auth/user-not-found": throw new Error( "No account found with this email address. Please check your email or create a new account.", ) case "auth/invalid-email": throw new Error("The email address format is invalid. Please enter a valid email address.") case "auth/too-many-requests": throw new Error("Too many password reset requests. Please wait a few minutes before trying again.") default: throw new Error(`Password reset failed: ${error.message}. Please try again or contact support.`) } } throw error } }, // Check if user is admin async isAdmin(uid: string): Promise { try { const userData = await this.getUserProfile(uid) return userData?.role === "admin" } catch (error) { console.error("❌ Error checking admin status:", error) return false } }, } [V0_FILE]typescriptreact:file="app/admin-access/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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Target, Shield, AlertCircle } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" export default function AdminAccessPage() { const router = useRouter() const [passcode, setPasscode] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) // Simple admin passcode for testing const ADMIN_PASSCODE = "LOKATE2025" const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { if (passcode === ADMIN_PASSCODE) { // Set admin session in localStorage const adminUser = { uid: "admin_test_user", email: "admin@lokate.ai", role: "admin", name: "Test Admin", isTestAdmin: true, loginTime: new Date().toISOString(), } localStorage.setItem("lokate_current_user", JSON.stringify(adminUser)) localStorage.setItem("lokate_admin_session", "true") console.log("✅ Admin access granted") router.push("/dashboard") } else { setError("Invalid admin passcode. Please try again.") } } catch (error) { console.error("❌ Admin access error:", error) setError("An error occurred. Please try again.") } finally { setIsLoading(false) } } return (

{/* Header */}

Lokate.ai

Regular Login

{/* Admin Access Card */}

Admin Access

Enter the admin passcode to access the dashboard for testing purposes {error && (

{error}

)}

🧪 Testing Mode

This is a temporary admin access for testing purposes only.

Passcode: LOKATE2025

{/* Help text */}

For regular access, use the{" "} standard login {" "} or{" "} start a free trial

) } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { type User, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, sendPasswordResetEmail, } from "firebase/auth" import { auth } from "@/lib/firebase-config" interface AuthContextType { currentUser: User | null loading: boolean firebaseReady: boolean isAdmin: boolean isTestAdmin: boolean signup: (email: string, password: string, userData?: any) => Promise login: (email: string, password: string) => Promise logout: () => Promise resetPassword: (email: string) => Promise getUserData: (uid: string) => Promise updateUserData: (uid: string, data: any) => Promise testFirebase: () => Promise } const AuthContext = createContext(undefined) export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } export function AuthProvider({ children }: { children: React.ReactNode }) { const [currentUser, setCurrentUser] = useState(null) const [loading, setLoading] = useState(true) const [firebaseReady, setFirebaseReady] = useState(false) const [isAdmin, setIsAdmin] = useState(false) const [isTestAdmin, setIsTestAdmin] = useState(false) useEffect(() => { // Check for test admin session const checkTestAdmin = () => { try { const adminSession = localStorage.getItem("lokate_admin_session") const currentUserData = localStorage.getItem("lokate_current_user") if (adminSession === "true" && currentUserData) { const userData = JSON.parse(currentUserData) if (userData.isTestAdmin) { setIsTestAdmin(true) setIsAdmin(true) console.log("🧪 Test admin session detected") // Create a mock user object for the test admin const mockUser = { uid: userData.uid, email: userData.email, displayName: userData.name, emailVerified: true, } as User setCurrentUser(mockUser) setLoading(false) return true } } } catch (error) { console.error("Error checking test admin session:", error) } return false } // Check test admin first if (checkTestAdmin()) { return } // Check if Firebase is properly initialized if (!auth) { console.error("❌ Firebase Auth not initialized") console.log("💡 Make sure to add Firebase environment variables to .env.local") setFirebaseReady(false) setLoading(false) return } console.log("🔥 Firebase Auth is ready") setFirebaseReady(true) // Listen for authentication state changes const unsubscribe = onAuthStateChanged(auth, (user) => { console.log("🔐 Auth state changed:", user ? `User: ${user.email}` : "No user") setCurrentUser(user) setLoading(false) // Check if user is admin (you can implement this based on your needs) if (user) { // For now, just check if email contains "admin" setIsAdmin(user.email?.includes("admin") || false) } else { setIsAdmin(false) } }) return unsubscribe }, []) // Sign up with email and password async function signup(email: string, password: string, userData?: any): Promise { try { if (!auth) { throw new Error("Firebase Auth not initialized") } console.log("🔐 Creating user account for:", email) const userCredential = await createUserWithEmailAndPassword(auth, email, password) const user = userCredential.user console.log("✅ User account created successfully:", user.uid) return user } catch (error) { console.error("❌ Signup error:", error) throw error } } // Sign in with email and password async function login(email: string, password: string): Promise { try { if (!auth) { throw new Error("Firebase Auth not initialized") } console.log("🔐 Signing in user:", email) const userCredential = await signInWithEmailAndPassword(auth, email, password) const user = userCredential.user console.log("✅ User signed in successfully:", user.uid) return user } catch (error) { console.error("❌ Login error:", error) throw error } } // Sign out async function logout(): Promise { try { // Clear test admin session localStorage.removeItem("lokate_admin_session") localStorage.removeItem("lokate_current_user") if (isTestAdmin) { console.log("🧪 Test admin session cleared") setCurrentUser(null) setIsAdmin(false) setIsTestAdmin(false) return } if (!auth) { throw new Error("Firebase Auth not initialized") } console.log("🔐 Signing out user") await signOut(auth) console.log("✅ User signed out successfully") } catch (error) { console.error("❌ Logout error:", error) throw error } } // Reset password async function resetPassword(email: string): Promise { try { if (!auth) { throw new Error("Firebase Auth not initialized") } console.log("🔐 Sending password reset email to:", email) await sendPasswordResetEmail(auth, email) console.log("✅ Password reset email sent successfully") } catch (error) { console.error("❌ Password reset error:", error) throw error } } // Placeholder functions for compatibility async function getUserData(uid: string): Promise { console.log("📄 Getting user data for:", uid) if (isTestAdmin) { return { uid, email: "admin@lokate.ai", role: "admin", name: "Test Admin", isTestAdmin: true, } } // This would typically fetch from Firestore return { uid, email: currentUser?.email } } async function updateUserData(uid: string, data: any): Promise { console.log("📝 Updating user data for:", uid, data) // This would typically update Firestore } async function testFirebase(): Promise { console.log("🧪 Testing Firebase connection") return { auth: !!auth, configured: firebaseReady, currentUser: currentUser?.uid || null, isTestAdmin, isAdmin, } } const value = { currentUser, loading, firebaseReady, isAdmin, isTestAdmin, signup, login, logout, resetPassword, getUserData, updateUserData, testFirebase, } return {!loading && children} } [V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, Target, BarChart3, Mail, Shield, Zap, Search, TrendingUp } from "lucide-react" import { NavigationLink } from "@/components/navigation-link" export default function AboutPage() { return (

{/* Header/Navigation */}

Lokate.ai

{/* Hero Section */}

About Lokate.ai

Revolutionizing how real estate professionals find their next deal

{/* Our Mission */}

Our Mission

At Lokate.ai, we're on a mission to transform how real estate professionals discover opportunities. We believe that everyone deserves access to timely, accurate property data without spending hours manually searching through listings.

Our AI-powered platform delivers personalized property alerts directly to your inbox, helping you stay ahead of the competition and never miss another deal again.

Get Instant Alerts for Perfect Matches

Automated Daily Alerts

Receive personalized property matches delivered to your inbox every morning

500+ Precise Criteria

Match properties by neighborhood, price, amenities, and hundreds of other factors

40% Revenue Increase

Close more deals faster with properties that perfectly match client needs

{/* Why Choose Us */}

Why Choose Lokate.ai

We're not just another property search tool. Here's what sets us apart:

Personalized Alerts

Custom email alerts based on your specific investment criteria

500+ Filters

Fine-tune your search with over 500 property and market filters

Market Data

Real-time market intelligence integrated with your alerts

Competitive Edge

Get notified of opportunities before your competition

10x

Faster than manual searching, saving you hours every day and helping you close more deals

{/* CTA Section */}

Ready to Transform Your Property Search?

Join thousands of real estate professionals who are saving time and finding better deals with Lokate.ai

No credit card required. 7-day free trial.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/support/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Target, Mail, Phone, MapPin, ArrowRight, CheckCircle, AlertCircle } from "lucide-react" import { AiChatSupport } from "@/components/ai-chat-support" import { NavigationLink } from "@/components/navigation-link" export default function SupportPage() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [errors, setErrors] = useState({ name: false, email: false, subject: false, message: false, }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle") const validateEmail = (email: string) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field as keyof typeof errors]) { setErrors((prev) => ({ ...prev, [field]: false })) } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // Reset previous status setSubmitStatus("idle") // Validate all fields const newErrors = { name: !formData.name.trim(), email: !formData.email.trim() || !validateEmail(formData.email), subject: !formData.subject.trim(), message: !formData.message.trim(), } setErrors(newErrors) // If there are errors, don't submit if (Object.values(newErrors).some((error) => error)) { return } setIsSubmitting(true) try { const response = await fetch("/api/send-contact-email", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) if (response.ok) { setSubmitStatus("success") setFormData({ name: "", email: "", subject: "", message: "" }) } else { setSubmitStatus("error") } } catch (error) { console.error("Error sending email:", error) setSubmitStatus("error") } finally { setIsSubmitting(false) } } return (

{/* Header/Navigation */}

Lokate.ai

{/* Hero Section */}

We're Here to Help

Get the support you need to make the most of Lokate.ai

{/* FAQ Section */}

Frequently Asked Questions

Find quick answers to common questions about Lokate.ai

How does the free trial work?

Our 7-day free trial gives you full access to all features with no credit card required. You'll receive daily property alerts based on your criteria, and can cancel anytime.

How do I set up my search criteria?

After signing up, you'll be guided through our simple setup process where you can select your target zip codes, price ranges, property types, and over 500 other criteria.

Can I change my search criteria later?

Yes! You can update your search criteria anytime from your dashboard. Changes will be reflected in your next daily alert email.

What time are daily alerts sent?

Alerts are typically sent at 7:00 AM local time, but you can customize this in your account settings to receive them at your preferred time.

{/* Resources Section */}

Helpful Resources

Guides and tutorials to help you get the most out of Lokate.ai

Getting Started Guide

A step-by-step walkthrough of setting up your account and first search criteria.

Read guide

Advanced Filtering

Learn how to use our 500+ filters to find exactly the properties you're looking for.

Read guide

{/* Contact Form Section */}

Contact the Team

Can't find what you're looking for? Our team is ready to help.

Email Us

admin@lokate.ai

We typically respond within 24 hours on business days.

Call Us

(202) 770-7949

Available Monday-Friday, 9am-5pm EST

Visit Us

1920 Plymouth St NW, 20012

{submitStatus === "success" && (

Message Sent Successfully!

We'll get back to you as soon as possible.

)} {submitStatus === "error" && (

Error Sending Message

Please try again or contact us directly at admin@lokate.ai

)}

Name * handleInputChange("name", e.target.value)} className={errors.name ? "border-red-500 focus:border-red-500" : ""} /> {errors.name &&

Name is required

}

Email * handleInputChange("email", e.target.value)} className={errors.email ? "border-red-500 focus:border-red-500" : ""} /> {errors.email && (

{!formData.email.trim() ? "Email is required" : "Please enter a valid email address"}

)}

Subject * handleInputChange("subject", e.target.value)} className={errors.subject ? "border-red-500 focus:border-red-500" : ""} /> {errors.subject &&

Subject is required

}

Message *

handleInputChange("message", e.target.value)}
                    />
                    {errors.message && <p className="text-sm text-red-500">Message is required</p>}
                  </div>
                  <Button type="submit" className="w-full" disabled={isSubmitting}>
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                  <p className="text-xs text-muted-foreground text-center mt-2">* Required fields</p>
                </form>
              </div>
            </div>
          </div>
        </section>
      </main>

{/* AI Chat Support */}
      <AiChatSupport />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin-setup/page.tsx" isMerged="true"
"use client"

export default function AdminSetupPage() {
  const router = useRouter()
  const [email, setEmail] = useState("admin@lokate.ai")
  const [password, setPassword] = useState("admin123")
  const [confirmPassword, setConfirmPassword] = useState("admin123")
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

try {
      // Validate passwords match
      if (password !== confirmPassword) {
        setError("Passwords do not match")
        return
      }

// Validate password length
      if (password.length < 6) {
        setError("Password must be at least 6 characters")
        return
      }

console.log("🔧 Creating Firebase admin account...")

// Create the admin user with Firebase
      const adminUserData = {
        username: "admin",
        firstName: "Admin",
        lastName: "User",
        name: "Admin User",
        phone: "(202) 770-7949",
        role: "admin", // This is the key field that makes them admin
        subscriptionStatus: "active",
        planType: "enterprise",
        isAdmin: true,
        permissions: {
          canViewAllUsers: true,
          canManageUsers: true,
          canAccessAnalytics: true,
          canManageSettings: true,
          canViewFinancials: true,
        },
        createdBy: "admin-setup",
        setupDate: new Date().toISOString(),
      }

const user = await firebaseUtils.createUser(email, password, adminUserData)

setSuccess(`✅ Admin account created successfully! 
        
Email: ${email}
Password: ${password}
UID: ${user.uid}

You can now log in with these credentials and have full admin access including Firebase storage.`)

console.log("✅ Admin account created:", {
        uid: user.uid,
        email: user.email,
        role: "admin",
      })

// Auto-redirect after 3 seconds
      setTimeout(() => {
        router.push("/login")
      }, 3000)
    } catch (error: any) {
      console.error("❌ Admin setup error:", error)
      setError(`Failed to create admin account: ${error.message}`)
    } finally {
      setIsLoading(false)
    }
  }

const handleTestFirebase = async () => {
    setIsLoading(true)
    setError("")
    setSuccess("")

try {
      const result = await firebaseUtils.testConnection()
      if (result.success) {
        setSuccess("🔥 Firebase connection successful! Ready to create admin account.")
      } else {
        setError(`Firebase test failed: ${result.error}`)
      }
    } catch (error: any) {
      setError(`Firebase test error: ${error.message}`)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <div className="flex items-center gap-4">
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
            <NavigationLink href="/admin-access" className="text-sm font-medium hover:text-primary">
              Test Admin
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Admin Setup Card */}
            <Card className="w-full max-w-md border-blue-200 bg-blue-50/50">
              <CardHeader className="space-y-1 text-center">
                <div className="flex items-center justify-center gap-2 mb-2">
                  <Shield className="h-6 w-6 text-blue-600" />
                  <CardTitle className="text-2xl font-bold text-blue-800">Firebase Admin Setup</CardTitle>
                </div>
                <CardDescription className="text-blue-700">
                  Create a real Firebase admin account with full storage access
                </CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200">
                    <div className="flex items-center gap-2">
                      <AlertCircle className="h-4 w-4 text-red-600" />
                      <p className="text-sm text-red-700">{error}</p>
                    </div>
                  </div>
                )}

{success && (
                  <div className="mb-4 p-3 rounded-lg bg-green-50 border border-green-200">
                    <div className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-green-600" />
                      <div className="text-sm text-green-700 whitespace-pre-line">{success}</div>
                    </div>
                  </div>
                )}

<form onSubmit={handleCreateAdmin} className="space-y-4">
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium text-blue-800">
                      Admin Email
                    </label>
                    <Input
                      id="email"
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      className="w-full border-blue-200 focus:border-blue-400 focus:ring-blue-400"
                    />
                  </div>

<div className="space-y-2">
                    <label htmlFor="password" className="text-sm font-medium text-blue-800">
                      Password
                    </label>
                    <Input
                      id="password"
                      type="password"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                      className="w-full border-blue-200 focus:border-blue-400 focus:ring-blue-400"
                    />
                  </div>

<div className="space-y-2">
                    <label htmlFor="confirmPassword" className="text-sm font-medium text-blue-800">
                      Confirm Password
                    </label>
                    <Input
                      id="confirmPassword"
                      type="password"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      required
                      className="w-full border-blue-200 focus:border-blue-400 focus:ring-blue-400"
                    />
                  </div>

<div className="flex gap-2">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={handleTestFirebase}
                      disabled={isLoading}
                      className="flex-1 bg-transparent"
                    >
                      Test Firebase
                    </Button>
                    <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700" disabled={isLoading}>
                      {isLoading ? "Creating..." : "Create Admin"}
                    </Button>
                  </div>
                </form>

<div className="mt-6 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                  <div className="text-xs text-blue-800">
                    <p className="font-medium mb-1">🔥 Real Firebase Account</p>
                    <p>This creates an actual Firebase account with:</p>
                    <ul className="mt-1 ml-4 list-disc space-y-1">
                      <li>Full Firebase Auth integration</li>
                      <li>Firestore database access</li>
                      <li>Firebase Storage access</li>
                      <li>Admin role permissions</li>
                      <li>Persistent login sessions</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Help text */}
            <div className="text-center text-sm text-muted-foreground max-w-md">
              <p>
                This will create a real Firebase admin account. After creation, you can log in normally at{" "}
                <NavigationLink href="/login" className="text-primary hover:underline">
                  /login
                </NavigationLink>
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/firebase-utils.ts" isQuickEdit="true" isMerged="true"
import { auth, db, isFirebaseConfigured } from "./firebase-config"
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  sendPasswordResetEmail,
} from "firebase/auth"
import {
  doc,
  setDoc,
  getDoc,
  collection,
  query,
  where,
  getDocs,
  updateDoc,
  deleteDoc,
  serverTimestamp,
} from "firebase/firestore"

// User management functions
export const firebaseUtils = {
  // Create new user account
  async createUser(email: string, password: string, userData: any = {}) {
    if (!auth || !db) {
      throw new Error("Firebase not initialized")
    }

try {
      // Create Firebase Auth user
      const userCredential = await createUserWithEmailAndPassword(auth, email, password)
      const user = userCredential.user

// Store additional user data in Firestore
      const userDocData = {
        uid: user.uid,
        email: user.email,
        emailVerified: user.emailVerified,
        createdAt: serverTimestamp(),
        updatedAt: serverTimestamp(),
        ...userData,
        // Ensure admin fields are properly set
        isAdmin: userData.role === "admin" || userData.isAdmin || false,
        adminLevel: userData.role === "admin" ? "full" : "none",
      }

await setDoc(doc(db, "users", user.uid), userDocData)

console.log("✅ User created successfully:", user.uid)
      return user
    } catch (error) {
      console.error("❌ Error creating user:", error)
      throw error
    }
  },

// Sign in user
  async signInUser(email: string, password: string) {
    // Check if Firebase is properly configured
    if (!isFirebaseConfigured) {
      throw new Error("Firebase is not properly configured. Please check your environment variables.")
    }

if (!auth) {
      throw new Error("Firebase Auth not initialized")
    }

try {
      console.log("🔐 Attempting to sign in user:", email)

// Validate inputs
      if (!email || !password) {
        throw new Error("Email and password are required")
      }

if (!email.includes("@")) {
        throw new Error("Invalid email format")
      }

const userCredential = await signInWithEmailAndPassword(auth, email, password)
      console.log("✅ User signed in successfully:", userCredential.user.uid)
      return userCredential.user
    } catch (error) {
      console.error("❌ Error signing in:", error)

// Log additional debug info
      if (error instanceof Error) {
        console.error("Error code:", error.code || "No code")
        console.error("Error message:", error.message)
      }

throw error
    }
  },

// Sign out user
  async signOutUser() {
    if (!auth) {
      throw new Error("Firebase Auth not initialized")
    }

try {
      await signOut(auth)
      console.log("✅ User signed out successfully")
    } catch (error) {
      console.error("❌ Error signing out:", error)
      throw error
    }
  },

// Send password reset email
  async resetPassword(email: string) {
    if (!auth) {
      throw new Error("Firebase Auth not initialized")
    }

try {
      await sendPasswordResetEmail(auth, email)
      console.log("✅ Password reset email sent to:", email)
    } catch (error) {
      console.error("❌ Error sending password reset:", error)
      throw error
    }
  },

// Get user data from Firestore
  async getUserData(uid: string) {
    if (!db) {
      throw new Error("Firestore not initialized")
    }

try {
      const userDoc = await getDoc(doc(db, "users", uid))
      if (userDoc.exists()) {
        return userDoc.data()
      }
      return null
    } catch (error) {
      console.error("❌ Error getting user data:", error)
      throw error
    }
  },

// Update user data in Firestore
  async updateUserData(uid: string, data: any) {
    if (!db) {
      throw new Error("Firestore not initialized")
    }

try {
      await updateDoc(doc(db, "users", uid), {
        ...data,
        updatedAt: serverTimestamp(),
      })
      console.log("✅ User data updated:", uid)
    } catch (error) {
      console.error("❌ Error updating user data:", error)
      throw error
    }
  },

// Check if email exists
  async emailExists(email: string) {
    if (!db) {
      throw new Error("Firestore not initialized")
    }

try {
      const q = query(collection(db, "users"), where("email", "==", email))
      const querySnapshot = await getDocs(q)
      return !querySnapshot.empty
    } catch (error) {
      console.error("❌ Error checking email:", error)

// Handle specific Firebase permission errors
      if (
        error.code === "permission-denied" ||
        error.message?.includes("permission") ||
        error.message?.includes("insufficient")
      ) {
        console.warn("⚠️ Firestore permissions insufficient for email check, continuing with signup")
        // Return false to allow signup to continue - we'll catch duplicate emails during account creation
        return false
      }

// For other errors, also return false to not block signup
      console.warn("⚠️ Email check failed, continuing with signup process")
      return false
    }
  },

// Check if username exists
  async usernameExists(username: string) {
    if (!db) {
      throw new Error("Firestore not initialized")
    }

try {
      const q = query(collection(db, "users"), where("username", "==", username))
      const querySnapshot = await getDocs(q)
      return !querySnapshot.empty
    } catch (error) {
      console.error("❌ Error checking username:", error)
      return false
    }
  },

// Test Firebase connection
  async testConnection() {
    try {
      if (!auth || !db) {
        throw new Error("Firebase not initialized")
      }

// Test Firestore write
      const testDoc = doc(db, "test", "connection")
      await setDoc(testDoc, {
        timestamp: serverTimestamp(),
        message: "Firebase connection test successful",
      })

// Test Firestore read
      const docSnap = await getDoc(testDoc)
      if (docSnap.exists()) {
        console.log("🔥 Firebase connection test successful!")

// Clean up test document
        await deleteDoc(testDoc)

return { success: true, message: "Firebase is working correctly" }
      } else {
        throw new Error("Could not read test document")
      }
    } catch (error) {
      console.error("❌ Firebase connection test failed:", error)
      return { success: false, error: error.message }
    }
  },

// Check Firebase configuration
  async checkFirebaseConfig() {
    try {
      if (!auth) {
        return { success: false, error: "Firebase Auth not initialized" }
      }

if (!db) {
        return { success: false, error: "Firestore not initialized" }
      }

// Try to get current auth state
      const currentUser = auth.currentUser
      console.log("🔥 Firebase Auth state:", currentUser ? "User logged in" : "No user")

return { success: true, message: "Firebase is properly configured" }
    } catch (error) {
      console.error("❌ Firebase config check failed:", error)
      return { success: false, error: error.message }
    }
  },

// Check if user is admin
  async checkAdminStatus(uid: string) {
    if (!db) {
      throw new Error("Firestore not initialized")
    }

try {
      const userDoc = await getDoc(doc(db, "users", uid))
      if (userDoc.exists()) {
        const userData = userDoc.data()
        return {
          isAdmin: userData.role === "admin" || userData.isAdmin === true,
          role: userData.role || "user",
          permissions: userData.permissions || {},
          adminLevel: userData.adminLevel || "none",
        }
      }
      return { isAdmin: false, role: "user", permissions: {}, adminLevel: "none" }
    } catch (error) {
      console.error("❌ Error checking admin status:", error)
      return { isAdmin: false, role: "user", permissions: {}, adminLevel: "none" }
    }
  },
}
[V0_FILE]typescriptreact:file="contexts/saved-searches-context.tsx" isEdit="true" isMerged="true"
'use client'

import React, { createContext, useContext, useState, useEffect } from 'react'

export interface SavedSearchCriteria {
  // Step 1: Personal Information
  criteriaTitle: string
  firstName: string
  lastName: string
  email: string
  preferredAlertTime: string
  alertTime_zone: string

// Basic Search Criteria
  location: string
  selectedState?: string
  manualLocation?: string
  locationCoordinates?: { lat: number; lng: number }
  status: string
  sortSelection: string
  listing_type: string

// Property Types
  isSingleFamily: boolean
  isMultiFamily: boolean
  isApartment: boolean
  isCondo: boolean
  isManufactured: boolean
  isTownhouse: boolean
  isLotLand: boolean

// Price & Size
  price_min: string
  price_max: string
  sqft_min: string
  sqft_max: string
  monthlyPayment_min: string
  monthlyPayment_max: string
  beds_min: string
  beds_max: string
  baths_min: string
  baths_max: string

// Advanced filters
  doz: string
  hoa_min: string
  hoa_max: string
  lotSize_min: string
  lotSize_max: string
  built_min: string
  built_max: string
  parkingSpots_min: string

// Features
  hasPool: boolean
  hasGarage: boolean
  hasAirConditioning: boolean
  is3dHome: boolean
  isNewConstruction: boolean
  singleStory: boolean
  onlyPriceReduction: boolean
  onlyWithPhotos: boolean

// Sale Source
  isForSaleByOwner: boolean
  isForSaleByAgent: boolean

// Views
  isCityView: boolean
  isWaterfront: boolean
  isMountainView: boolean
  isWaterView: boolean
  isParkView: boolean

// Schools
  enableSchools: boolean
  isPublicSchool: boolean
  isPrivateSchool: boolean
  isElementarySchool: boolean
  isMiddleSchool: boolean
  greatSchoolsRating_min: string

// Market Conditions
  onlyRentalAcceptsApplications: boolean
  onlyRentalIncomeRestricted: boolean
  isZillowOwnedOnly: boolean
  isComingSoon: boolean
  isForSaleForeclosure: boolean
  isAuction: boolean

// Pet/Rental Specific
  onlyRentalCatsAllowed: boolean
  onlyRentalPetsAllowed: boolean
  onlyRentalSmallDogsAllowed: boolean
  onlyRentalLargeDogsAllowed: boolean

// Keywords & Notes
  keywords: string
  additionalNotes: string

// Metadata
  id?: string
  createdAt?: string
  updatedAt?: string
}

interface SavedSearchesContextType {
  searches: SavedSearchCriteria[]
  saveSearch: (criteria: SavedSearchCriteria) => Promise<string>
  updateSearch: (id: string, criteria: SavedSearchCriteria) => Promise<void>
  deleteSearch: (id: string) => void
  getSearch: (id: string) => SavedSearchCriteria | undefined
}

const SavedSearchesContext = createContext<SavedSearchesContextType | undefined>(undefined)

export function SavedSearchesProvider({ children }: { children: React.ReactNode }) {
  const [searches, setSearches] = useState<SavedSearchCriteria[]>([])

// Load searches from localStorage on mount
  useEffect(() => {
    const saved = localStorage.getItem('lokate-saved-searches')
    if (saved) {
      try {
        setSearches(JSON.parse(saved))
      } catch (error) {
        console.error('Error loading saved searches:', error)
      }
    }
  }, [])

// Save to localStorage whenever searches change
  useEffect(() => {
    localStorage.setItem('lokate-saved-searches', JSON.stringify(searches))
  }, [searches])

const saveSearch = async (criteria: SavedSearchCriteria): Promise<string> => {
    const id = `search_${Date.now()}`
    const searchWithId = {
      ...criteria,
      id,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

setSearches(prev => [...prev, searchWithId])
    return id
  }

const updateSearch = async (id: string, criteria: SavedSearchCriteria): Promise<void> => {
    setSearches(prev => prev.map(search => 
      search.id === id 
        ? { ...criteria, id, updatedAt: new Date().toISOString() }
        : search
    ))
  }

const deleteSearch = (id: string) => {
    setSearches(prev => prev.filter(search => search.id !== id))
  }

const getSearch = (id: string): SavedSearchCriteria | undefined => {
    return searches.find(search => search.id === id)
  }

return (
    <SavedSearchesContext.Provider value={{
      searches,
      saveSearch,
      updateSearch,
      deleteSearch,
      getSearch,
    }}>
      {children}
    </SavedSearchesContext.Provider>
  )
}

export function useSavedSearches() {
  const context = useContext(SavedSearchesContext)
  if (context === undefined) {
    throw new Error('useSavedSearches must be used within a SavedSearchesProvider')
  }
  return context
}
[V0_FILE]typescript:file="lib/form-completion-utils.ts" isEdit="true" isMerged="true"
export interface MissingField {
  name: string
  label: string
  step: number
  severity: "required" | "recommended"
}

export interface StepCompletionStatus {
  step: number
  isComplete: boolean
  missingFields: MissingField[]
}

export interface FormValidationResult {
  isValid: boolean
  completionPercentage: number
  completedRequiredFields: number
  requiredFieldsCount: number
  missingFields: MissingField[]
  stepCompletionStatus: StepCompletionStatus[]
}

export function validateFormCompletion(formData: any): FormValidationResult {
  const requiredFields: Array<{ name: string; label: string; step: number }> = [
    { name: "criteriaTitle", label: "Criteria Title", step: 1 },
    { name: "firstName", label: "First Name", step: 1 },
    { name: "lastName", label: "Last Name", step: 1 },
    { name: "email", label: "Email Address", step: 1 },
    { name: "preferredAlertTime", label: "Preferred Alert Time", step: 1 },
    { name: "location", label: "Location", step: 1 },
  ]

const recommendedFields: Array<{ name: string; label: string; step: number }> = [
    { name: "price_min", label: "Minimum Price", step: 3 },
    { name: "price_max", label: "Maximum Price", step: 3 },
    { name: "beds_min", label: "Minimum Bedrooms", step: 3 },
    { name: "baths_min", label: "Minimum Bathrooms", step: 3 },
  ]

const missingFields: MissingField[] = []
  let completedRequiredFields = 0

// Check required fields
  requiredFields.forEach((field) => {
    const value = formData[field.name]
    const isEmpty = !value || (typeof value === "string" && value.trim() === "")

if (isEmpty) {
      missingFields.push({
        name: field.name,
        label: field.label,
        step: field.step,
        severity: "required",
      })
    } else {
      completedRequiredFields++
    }
  })

// Check recommended fields
  recommendedFields.forEach((field) => {
    const value = formData[field.name]
    const isEmpty = !value || (typeof value === "string" && value.trim() === "") || value === "any"

if (isEmpty) {
      missingFields.push({
        name: field.name,
        label: field.label,
        step: field.step,
        severity: "recommended",
      })
    }
  })

// Calculate step completion status
  const stepCompletionStatus: StepCompletionStatus[] = [1, 2, 3, 4, 5].map((stepNumber) => {
    const stepFields = missingFields.filter((field) => field.step === stepNumber)
    const requiredMissing = stepFields.filter((field) => field.severity === "required")

return {
      step: stepNumber,
      isComplete: requiredMissing.length === 0,
      missingFields: stepFields,
    }
  })

const isValid = missingFields.filter((f) => f.severity === "required").length === 0
  const completionPercentage = Math.round((completedRequiredFields / requiredFields.length) * 100)

return {
    isValid,
    completionPercentage,
    completedRequiredFields,
    requiredFieldsCount: requiredFields.length,
    missingFields,
    stepCompletionStatus,
  }
}
[V0_FILE]typescriptreact:file="components/form-completion-alerts.tsx" isEdit="true" isMerged="true"
"use client"

import { Alert, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { AlertTriangle, CheckCircle, Info } from "lucide-react"

interface CompletionData {
  isComplete: boolean
  completionPercentage: number
  completedFields: number
  totalFields: number
  missingFields: string[]
  stepCompletionStatus: Array<{
    step: number
    isComplete: boolean
    missingFields: Array<{ name: string; label: string; severity: string }>
  }>
}

interface FormCompletionAlertsProps {
  completionData: CompletionData
  currentStep: number
  onNavigateToStep: (step: number) => void
  showDetailedView?: boolean
}

export function FormCompletionAlerts({
  completionData,
  currentStep,
  onNavigateToStep,
  showDetailedView = false,
}: FormCompletionAlertsProps) {
  const requiredMissing = completionData.stepCompletionStatus
    .flatMap((step) => step.missingFields)
    .filter((field) => field.severity === "required")

if (completionData.isComplete) {
    return (
      <Alert className="border-green-200 bg-green-50">
        <CheckCircle className="h-4 w-4 text-green-600" />
        <AlertDescription className="text-green-800">
          All required fields completed! You can now save your search criteria.
        </AlertDescription>
      </Alert>
    )
  }

if (requiredMissing.length > 0) {
    return (
      <Alert className="border-amber-200 bg-amber-50">
        <AlertTriangle className="h-4 w-4 text-amber-600" />
        <AlertDescription className="text-amber-800">
          <div className="space-y-2">
            <p className="font-medium">
              {requiredMissing.length} required field{requiredMissing.length !== 1 ? "s" : ""} missing
            </p>
            {showDetailedView && (
              <div className="space-y-1">
                {requiredMissing.slice(0, 3).map((field, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <span className="text-sm">{field.label}</span>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const step = completionData.stepCompletionStatus.find((s) =>
                          s.missingFields.some((f) => f.name === field.name),
                        )?.step
                        if (step) onNavigateToStep(step)
                      }}
                      className="h-6 text-xs"
                    >
                      Go to Step
                    </Button>
                  </div>
                ))}
                {requiredMissing.length > 3 && (
                  <p className="text-xs text-amber-600">+{requiredMissing.length - 3} more fields</p>
                )}
              </div>
            )}
          </div>
        </AlertDescription>
      </Alert>
    )
  }

return (
    <Alert className="border-blue-200 bg-blue-50">
      <Info className="h-4 w-4 text-blue-600" />
      <AlertDescription className="text-blue-800">
        Form is {completionData.completionPercentage}% complete. Consider adding more details for better search results.
      </AlertDescription>
    </Alert>
  )
}
[V0_FILE]typescriptreact:file="components/completion-assistant.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { CheckCircle, AlertTriangle, Target } from "lucide-react"

interface CompletionAssistantProps {
  completionData: CompletionData
  onFieldFocus: (fieldName: string) => void
}

export function CompletionAssistant({ completionData, onFieldFocus }: CompletionAssistantProps) {
  const requiredMissing = completionData.stepCompletionStatus
    .flatMap((step) => step.missingFields)
    .filter((field) => field.severity === "required")

return (
    <Card className="w-80 shadow-lg border-0">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-sm">
          <Target className="h-4 w-4" />
          Completion Assistant
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex justify-between text-xs text-gray-600">
            <span>Progress</span>
            <span>{completionData.completionPercentage}%</span>
          </div>
          <Progress value={completionData.completionPercentage} className="h-2" />
        </div>

{completionData.isComplete ? (
          <div className="flex items-center gap-2 text-green-700 text-sm">
            <CheckCircle className="h-4 w-4" />
            Ready to save!
          </div>
        ) : (
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-amber-700 text-sm">
              <AlertTriangle className="h-4 w-4" />
              {requiredMissing.length} required field{requiredMissing.length !== 1 ? "s" : ""} missing
            </div>

<div className="space-y-2">
              {requiredMissing.slice(0, 3).map((field, index) => (
                <Button
                  key={index}
                  variant="outline"
                  size="sm"
                  onClick={() => onFieldFocus(field.name)}
                  className="w-full justify-start text-xs h-8"
                >
                  {field.label}
                </Button>
              ))}
              {requiredMissing.length > 3 && (
                <p className="text-xs text-gray-500 text-center">+{requiredMissing.length - 3} more</p>
              )}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/proactive-form-alerts.tsx" isEdit="true" isMerged="true"
"use client"

import { Alert, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { AlertTriangle, Info, CheckCircle, ArrowRight } from "lucide-react"
import type { FormValidationResult } from "@/lib/form-completion-utils"

interface ProactiveFormAlertsProps {
  validation: FormValidationResult
  currentStep: number
  onNavigateToStep: (step: number) => void
}

export function ProactiveFormAlerts({ validation, currentStep, onNavigateToStep }: ProactiveFormAlertsProps) {
  const requiredMissing = validation.missingFields.filter((f) => f.severity === "required")
  const currentStepMissing = requiredMissing.filter((f) => f.step === currentStep)
  const nextStepWithMissing = validation.stepCompletionStatus.find(
    (step) => step.step > currentStep && step.missingFields.some((f) => f.severity === "required"),
  )

if (validation.isValid) {
    return (
      <Alert className="border-green-200 bg-green-50">
        <CheckCircle className="h-4 w-4 text-green-600" />
        <AlertDescription className="text-green-800">
          All required fields completed! Ready to save your search criteria.
        </AlertDescription>
      </Alert>
    )
  }

if (currentStepMissing.length > 0) {
    return (
      <Alert className="border-amber-200 bg-amber-50">
        <AlertTriangle className="h-4 w-4 text-amber-600" />
        <AlertDescription className="text-amber-800">
          <div className="flex items-center justify-between">
            <span>
              Complete {currentStepMissing.length} required field{currentStepMissing.length !== 1 ? "s" : ""} on this
              step
            </span>
            <div className="text-xs bg-amber-100 px-2 py-1 rounded">{validation.completionPercentage}% complete</div>
          </div>
        </AlertDescription>
      </Alert>
    )
  }

if (nextStepWithMissing) {
    return (
      <Alert className="border-blue-200 bg-blue-50">
        <Info className="h-4 w-4 text-blue-600" />
        <AlertDescription className="text-blue-800">
          <div className="flex items-center justify-between">
            <span>Step {nextStepWithMissing.step} has required fields to complete</span>
            <Button
              variant="outline"
              size="sm"
              onClick={() => onNavigateToStep(nextStepWithMissing.step)}
              className="h-6 text-xs gap-1"
            >
              Go to Step {nextStepWithMissing.step}
              <ArrowRight className="h-3 w-3" />
            </Button>
          </div>
        </AlertDescription>
      </Alert>
    )
  }

return null
}

interface FloatingProgressIndicatorProps {
  validation: FormValidationResult
  currentStep: number
  onNavigateToStep: (step: number) => void
}

export function FloatingProgressIndicator({
  validation,
  currentStep,
  onNavigateToStep,
}: FloatingProgressIndicatorProps) {
  return (
    <div className="fixed bottom-20 left-4 z-40 bg-white rounded-lg shadow-lg border p-3 max-w-xs">
      <div className="space-y-2">
        <div className="flex justify-between text-xs text-gray-600">
          <span>Form Progress</span>
          <span>{validation.completionPercentage}%</span>
        </div>
        <Progress value={validation.completionPercentage} className="h-1" />
        <div className="text-xs text-gray-500">Step {currentStep} of 5</div>
      </div>
    </div>
  )
}

interface SmartFieldGuidanceProps {
  validation: FormValidationResult
  currentStep: number
  fieldName: string
}

export function SmartFieldGuidance({ validation, currentStep, fieldName }: SmartFieldGuidanceProps) {
  const fieldMissing = validation.missingFields.find((f) => f.name === fieldName)

if (!fieldMissing) return null

return (
    <div className="mt-1 text-xs text-amber-600">
      {fieldMissing.severity === "required" ? "⚠️ Required field" : "💡 Recommended for better results"}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/save-search-dialog.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import { Bookmark, Save } from "lucide-react"
import type { SavedSearchCriteria } from "@/contexts/saved-searches-context"

interface SaveSearchDialogProps {
  searchCriteria: SavedSearchCriteria
  onSaved: (searchId: string) => void
  children?: React.ReactNode
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

export function SaveSearchDialog({ searchCriteria, onSaved, children, open, onOpenChange }: SaveSearchDialogProps) {
  const [searchName, setSearchName] = useState(searchCriteria.criteriaTitle || "")
  const [isLoading, setIsLoading] = useState(false)

const handleSave = async () => {
    setIsLoading(true)
    try {
      const searchId = `search_${Date.now()}`
      await onSaved(searchId)
      if (onOpenChange) onOpenChange(false)
    } catch (error) {
      console.error("Error saving search:", error)
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Bookmark className="h-5 w-5" />
            Save Search Criteria
          </DialogTitle>
          <DialogDescription>Give your search a memorable name to easily find it later.</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <Label htmlFor="searchName">Search Name</Label>
            <Input
              id="searchName"
              value={searchName}
              onChange={(e) => setSearchName(e.target.value)}
              placeholder="e.g., Family Home in Austin"
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => onOpenChange?.(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave} disabled={isLoading || !searchName.trim()}>
              <Save className="h-4 w-4 mr-2" />
              {isLoading ? "Saving..." : "Save Search"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/draggable-location-selector.tsx" isEdit="true" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useState } from "react"
import { MapPin, Search, X } from "lucide-react"

interface DraggableLocationSelectorProps {
  isVisible: boolean
  onLocationSelect: (coordinates: { lat: number; lng: number }, address: string) => void
  onClose: () => void
}

export function DraggableLocationSelector({ isVisible, onLocationSelect, onClose }: DraggableLocationSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [suggestions] = useState(["Austin, TX", "Dallas, TX", "Houston, TX", "San Antonio, TX", "Fort Worth, TX"])

const handleLocationSelect = (address: string) => {
    // Mock coordinates - in real app, you'd geocode the address
    const mockCoordinates = { lat: 30.2672, lng: -97.7431 }
    onLocationSelect(mockCoordinates, address)
    onClose()
  }

return (
    <Dialog open={isVisible} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            Select Location
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="relative">
            <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search for a location..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>

<div className="space-y-2">
            <p className="text-sm text-gray-600">Popular locations:</p>
            {suggestions
              .filter((location) => location.toLowerCase().includes(searchQuery.toLowerCase()))
              .map((location, index) => (
                <Button
                  key={index}
                  variant="outline"
                  className="w-full justify-start bg-transparent"
                  onClick={() => handleLocationSelect(location)}
                >
                  <MapPin className="h-4 w-4 mr-2" />
                  {location}
                </Button>
              ))}
          </div>

<div className="flex justify-end">
            <Button variant="outline" onClick={onClose}>
              <X className="h-4 w-4 mr-2" />
              Cancel
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/active-searches/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useSavedSearches } from "@/contexts/saved-searches-context"
import { Search, MapPin, Calendar, Edit, Trash2, Bell } from "lucide-react"
import { useRouter } from "next/navigation"

export default function ActiveSearchesPage() {
  const { searches, deleteSearch } = useSavedSearches()
  const router = useRouter()

const formatPrice = (price: string) => {
    if (!price) return "Any"
    const num = Number.parseInt(price)
    return `$${num.toLocaleString()}`
  }

const getPropertyTypes = (search: any) => {
    const types = []
    if (search.isSingleFamily) types.push("Single Family")
    if (search.isMultiFamily) types.push("Multi Family")
    if (search.isCondo) types.push("Condo")
    if (search.isApartment) types.push("Apartment")
    if (search.isTownhouse) types.push("Townhouse")
    if (search.isManufactured) types.push("Manufactured")
    if (search.isLotLand) types.push("Lot/Land")
    return types.length > 0 ? types.join(", ") : "Any"
  }

return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Active Property Searches</h1>
          <p className="text-gray-600">
            Monitor and manage your saved property search criteria. You'll receive alerts when new properties match your
            criteria.
          </p>
        </div>

{searches.length === 0 ? (
          <Card className="text-center py-12">
            <CardContent>
              <Search className="mx-auto h-12 w-12 text-gray-400 mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No Active Searches</h3>
              <p className="text-gray-600 mb-6">
                You haven't created any property search criteria yet. Create your first search to start receiving
                property alerts.
              </p>
              <Button onClick={() => router.push("/dashboard/add-criteria")}>Create Your First Search</Button>
            </CardContent>
          </Card>
        ) : (
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {searches.map((search) => (
              <Card key={search.id} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div>
                      <CardTitle className="text-lg font-semibold text-gray-900 mb-1">{search.criteriaTitle}</CardTitle>
                      <CardDescription className="flex items-center gap-1">
                        <MapPin className="h-4 w-4" />
                        {search.location}
                      </CardDescription>
                    </div>
                    <Badge variant="secondary" className="bg-green-100 text-green-800">
                      <Bell className="h-3 w-3 mr-1" />
                      Active
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">Price Range:</span>
                      <span className="font-medium">
                        {formatPrice(search.price_min)} - {formatPrice(search.price_max)}
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">Property Types:</span>
                      <span className="font-medium text-right max-w-[150px] truncate">{getPropertyTypes(search)}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">Bedrooms:</span>
                      <span className="font-medium">{search.beds_min === "any" ? "Any" : `${search.beds_min}+`}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">Alert Time:</span>
                      <span className="font-medium">
                        {search.preferredAlertTime
                          ? new Date(`2000-01-01T${search.preferredAlertTime}:00`).toLocaleTimeString([], {
                              hour: "numeric",
                              minute: "2-digit",
                              hour12: true,
                            })
                          : "Not set"}
                      </span>
                    </div>
                  </div>

{search.keywords && (
                    <div className="pt-2 border-t">
                      <p className="text-xs text-gray-600 mb-1">Keywords:</p>
                      <p className="text-sm text-gray-800 truncate">{search.keywords}</p>
                    </div>
                  )}

<div className="flex items-center justify-between pt-4 border-t">
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-gray-400" />
                      <span className="text-xs text-gray-500">
                        Created {search.createdAt ? new Date(search.createdAt).toLocaleDateString() : "Recently"}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => router.push(`/dashboard/edit-criteria/${search.id}`)}
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          if (confirm("Are you sure you want to delete this search?")) {
                            deleteSearch(search.id!)
                          }
                        }}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}

<div className="mt-8 text-center">
          <Button onClick={() => router.push("/dashboard/add-criteria")} size="lg">
            <Search className="h-5 w-5 mr-2" />
            Create New Search
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/active-searches/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { ScrollToTop } from "@/components/scroll-to-top"
import { AuthProvider } from "@/contexts/auth-context"
import { SavedSearchesProvider } from "@/contexts/saved-searches-context"

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

export const metadata: Metadata = {
  title: "Lokate.ai - AI-Powered Real Estate Search for New Agents",
  description:
    "Professional-grade real estate tools that outperform MLS at a fraction of the cost. Find properties with natural language search and close deals faster.",
  keywords: "real estate, AI search, MLS alternative, property search, real estate agents, property listings",
  authors: [{ name: "Lokate.ai" }],
  creator: "Lokate.ai",
  publisher: "Lokate.ai",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  icons: {
    icon: [
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon.ico", sizes: "any" },
    ],
    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
    other: [
      { url: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
      { url: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
    ],
  },
  manifest: "/site.webmanifest",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://lokate.ai",
    title: "Lokate.ai - AI-Powered Real Estate Search",
    description: "Professional-grade real estate tools that outperform MLS at a fraction of the cost.",
    siteName: "Lokate.ai",
  },
  twitter: {
    card: "summary_large_image",
    title: "Lokate.ai - AI-Powered Real Estate Search",
    description: "Professional-grade real estate tools that outperform MLS at a fraction of the cost.",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png" />
        <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </head>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <AuthProvider>
            <SavedSearchesProvider>
              <ScrollToTop />
              {children}
            </SavedSearchesProvider>
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/property-criteria-form.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useState, useEffect } from "react"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"
import {
  ChevronLeft,
  ChevronRight,
  User,
  Home,
  DollarSign,
  Settings,
  Building,
  Trees,
  GraduationCap,
  Eye,
  Filter,
  Search,
  CheckCircle,
  Save,
  Bookmark,
  Target,
  Minimize2,
  MapPin,
  AlertTriangle,
} from "lucide-react"
import { validateFormCompletion, type FormValidationResult } from "@/lib/form-completion-utils"
import { FormCompletionAlerts } from "@/components/form-completion-alerts"
import { CompletionAssistant } from "@/components/completion-assistant"
import type { SavedSearchCriteria } from "@/contexts/saved-searches-context"
import { useSavedSearches } from "@/contexts/saved-searches-context"
import { SaveSearchDialog } from "@/components/save-search-dialog"
import { ProactiveFormAlerts, FloatingProgressIndicator, SmartFieldGuidance } from "@/components/proactive-form-alerts"
import { DraggableLocationSelector } from "@/components/draggable-location-selector"

interface PropertyCriteriaFormProps {
  initialData?: Partial<SavedSearchCriteria>
  onSave?: (criteria: SavedSearchCriteria) => void
  onUpdate?: (criteria: SavedSearchCriteria) => void
  isEditMode?: boolean
  className?: string
}

export function PropertyCriteriaForm({
  initialData,
  onSave,
  onUpdate,
  isEditMode = false,
  className = "",
}: PropertyCriteriaFormProps) {
  const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showDetailedAlerts, setShowDetailedAlerts] = useState(false)
  const [formValidation, setFormValidation] = useState<FormValidationResult | null>(null)
  const [showSaveDialog, setShowSaveDialog] = useState(false)
  const [showCompletionAssistant, setShowCompletionAssistant] = useState(true)
  const [showLocationSelector, setShowLocationSelector] = useState(false)
  const { toast } = useToast()
  const router = useRouter()
  const { saveSearch } = useSavedSearches()

const [formData, setFormData] = useState<SavedSearchCriteria>({
    // Step 1: Personal Information
    criteriaTitle: "",
    firstName: "",
    lastName: "",
    email: "",
    preferredAlertTime: "",
    alertTime_zone: "America/New_York",

// Basic Search Criteria
    location: "",
    selectedState: "",
    manualLocation: "",
    locationCoordinates: { lat: 0, lng: 0 },
    status: "forSale",
    sortSelection: "newest",
    listing_type: "by_agent",

// Property Types
    isSingleFamily: false,
    isMultiFamily: false,
    isApartment: false,
    isCondo: false,
    isManufactured: false,
    isTownhouse: false,
    isLotLand: false,

// Price & Size
    price_min: "",
    price_max: "",
    sqft_min: "",
    sqft_max: "",
    monthlyPayment_min: "",
    monthlyPayment_max: "",
    beds_min: "any",
    beds_max: "any",
    baths_min: "any",
    baths_max: "any",
    doz: "any",
    hoa_min: "",
    hoa_max: "",
    lotSize_min: "",
    lotSize_max: "",
    built_min: "",
    built_max: "",
    parkingSpots_min: "any",

// Features
    hasPool: false,
    hasGarage: false,
    hasAirConditioning: false,
    is3dHome: false,
    isNewConstruction: false,
    singleStory: false,
    onlyPriceReduction: false,
    onlyWithPhotos: false,

// Sale Source
    isForSaleByOwner: false,
    isForSaleByAgent: false,

// Views
    isCityView: false,
    isWaterfront: false,
    isMountainView: false,
    isWaterView: false,
    isParkView: false,

// Schools
    enableSchools: false,
    isPublicSchool: false,
    isPrivateSchool: false,
    isElementarySchool: false,
    isMiddleSchool: false,
    greatSchoolsRating_min: "any",

// Market Conditions
    onlyRentalAcceptsApplications: false,
    onlyRentalIncomeRestricted: false,
    isZillowOwnedOnly: false,
    isComingSoon: false,
    isForSaleForeclosure: false,
    isAuction: false,

// Pet/Rental Specific
    onlyRentalCatsAllowed: false,
    onlyRentalPetsAllowed: false,
    onlyRentalSmallDogsAllowed: false,
    onlyRentalLargeDogsAllowed: false,

// Keywords & Notes
    keywords: "",
    additionalNotes: "",

// Apply initial data if provided
    ...initialData,
  })

// Update form data when initialData changes (for edit mode)
  useEffect(() => {
    if (initialData) {
      setFormData((prev) => ({
        ...prev,
        ...initialData,
      }))
    }
  }, [initialData])

// Update form validation whenever form data changes
  useEffect(() => {
    const validation = validateFormCompletion(formData)
    setFormValidation(validation)
  }, [formData])

// Add keyboard navigation
  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.altKey) {
        // Only proceed if not in a textarea or if we're on the last step
        const target = event.target as HTMLElement
        if (target.tagName !== "TEXTAREA" || currentStep === 5) {
          event.preventDefault()
          if (currentStep < 5) {
            nextStep()
          } else {
            handleSaveOrUpdate()
          }
        }
      }
    }

document.addEventListener("keydown", handleKeyPress)
    return () => document.removeEventListener("keydown", handleKeyPress)
  }, [currentStep])

const alertTimeOptions = [
    { value: "6:00", label: "6:00 AM" },
    { value: "7:00", label: "7:00 AM" },
    { value: "8:00", label: "8:00 AM" },
    { value: "9:00", label: "9:00 AM" },
    { value: "10:00", label: "10:00 AM" },
    { value: "11:00", label: "11:00 AM" },
    { value: "12:00", label: "12:00 PM" },
    { value: "13:00", label: "1:00 PM" },
    { value: "14:00", label: "2:00 PM" },
    { value: "15:00", label: "3:00 PM" },
    { value: "16:00", label: "4:00 PM" },
    { value: "17:00", label: "5:00 PM" },
    { value: "18:00", label: "6:00 PM" },
    { value: "19:00", label: "7:00 PM" },
    { value: "20:00", label: "8:00 PM" },
  ]

const timezoneOptions = [
    { value: "America/New_York", label: "Eastern Time (ET)" },
    { value: "America/Chicago", label: "Central Time (CT)" },
    { value: "America/Denver", label: "Mountain Time (MT)" },
    { value: "America/Los_Angeles", label: "Pacific Time (PT)" },
    { value: "America/Anchorage", label: "Alaska Time (AKT)" },
    { value: "Pacific/Honolulu", label: "Hawaii Time (HST)" },
    { value: "America/Phoenix", label: "Arizona Time (MST)" },
  ]

const formatCurrency = (value: string): string => {
    const digits = value.replace(/\D/g, "")
    if (!digits) return ""
    const number = Number.parseInt(digits)
    return `$${number.toLocaleString()}`
  }

const parseCurrencyValue = (value: string): string => {
    return value.replace(/\D/g, "")
  }

const handleInputChange = (field: string, value: any) => {
    if (
      field === "price_min" ||
      field === "price_max" ||
      field === "monthlyPayment_min" ||
      field === "monthlyPayment_max" ||
      field === "hoa_min" ||
      field === "hoa_max"
    ) {
      const numericValue = parseCurrencyValue(value)
      setFormData((prev) => ({
        ...prev,
        [field]: numericValue,
      }))
    } else {
      setFormData((prev) => ({
        ...prev,
        [field]: value,
      }))
    }
  }

const nextStep = () => {
    if (currentStep < 5) {
      setCurrentStep(currentStep + 1)
    }
  }

const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1)
    }
  }

const navigateToStep = (step: number) => {
    if (step >= 1 && step <= 5) {
      setCurrentStep(step)
    }
  }

const handleSaveOrUpdate = async () => {
    if (!formValidation?.isValid) {
      const requiredMissing = formValidation?.missingFields.filter((f) => f.severity === "required") || []
      toast({
        variant: "destructive",
        title: "Required Fields Missing",
        description: `Please complete ${requiredMissing.length} required field${requiredMissing.length !== 1 ? "s" : ""} before saving.`,
      })
      setShowDetailedAlerts(true)
      return
    }

setIsSubmitting(true)

try {
      if (isEditMode && onUpdate) {
        await onUpdate(formData)

// Also send to API for webhook
        const response = await fetch("/api/criteria", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
        })

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

toast({
          title: "Search Updated",
          description: "Your search criteria has been updated successfully.",
        })

// Redirect to dashboard after update
        setTimeout(() => {
          router.push("/dashboard?success=true")
        }, 1500)
      } else {
        // Direct save to API and local storage
        await handleSearchSaved("direct-save")
      }
    } catch (error) {
      console.error("Error saving/updating search:", error)
      toast({
        variant: "destructive",
        title: isEditMode ? "Update Failed" : "Save Failed",
        description: `Failed to ${isEditMode ? "update" : "save"} search criteria. Please try again.`,
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleSearchSaved = async (searchId: string) => {
    try {
      console.log("Saving search criteria:", formData)

// Save to API
      const response = await fetch("/api/criteria", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

const responseData = await response.json()
      console.log("API Response:", responseData)

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

// Save to context (primary storage)
      const savedId = await saveSearch(formData)

// Also save to legacy localStorage for backward compatibility
      const userId = localStorage.getItem("userId") || `user_${Date.now()}`
      if (!localStorage.getItem("userId")) {
        localStorage.setItem("userId", userId)
      }

const existingCriteria = JSON.parse(localStorage.getItem(`searchCriteria_${userId}`) || "[]")
      const criteriaWithId = { ...formData, id: savedId }
      existingCriteria.push(criteriaWithId)
      localStorage.setItem(`searchCriteria_${userId}`, JSON.stringify(existingCriteria))

if (onSave) {
        onSave(formData)
      }

toast({
        title: "Search Saved Successfully!",
        description: "Your search criteria has been saved and is now active. Redirecting to dashboard...",
      })

// Close any open dialogs
      setShowSaveDialog(false)

// Redirect to dashboard after a short delay
      setTimeout(() => {
        router.push("/dashboard?success=true")
      }, 2000)
    } catch (error) {
      console.error("Error saving search:", error)
      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred"

toast({
        variant: "destructive",
        title: "Save Failed",
        description: `Failed to save search criteria: ${errorMessage}`,
      })

throw error // Re-throw to be caught by handleSaveOrUpdate
    }
  }

const getStepInfo = (step: number) => {
    const steps = [
      { icon: User, title: "Personal Info & Preferences", description: "Basic information and search preferences" },
      { icon: Building, title: "Property Types & Features", description: "Select property types and key features" },
      { icon: DollarSign, title: "Price, Size & Specs", description: "Set budget and size requirements" },
      { icon: Filter, title: "Advanced Filters", description: "Detailed search preferences" },
      {
        icon: Settings,
        title: "Views, Schools & Special Conditions",
        description: "Views, schools, and special conditions",
      },
    ]
    return steps[step - 1]
  }

const getStepStatus = (step: number) => {
    if (!formValidation) return { isComplete: false, hasIssues: false, requiredMissing: 0 }
    const stepStatus = formValidation.stepCompletionStatus.find((s) => s.step === step)
    const requiredMissing = stepStatus?.missingFields.filter((f) => f.severity === "required").length || 0
    return {
      isComplete: stepStatus?.isComplete || false,
      hasIssues: (stepStatus?.missingFields.length || 0) > 0,
      requiredMissing,
    }
  }

// Emoji feature options based on JSON prompt
  const emojiFeatures = [
    { emoji: "🏠", label: "Has Garage", value: "hasGarage" },
    { emoji: "🏖️", label: "Has Pool", value: "hasPool" },
    { emoji: "❄️", label: "Air Conditioning", value: "hasAirConditioning" },
    { emoji: "🏢", label: "New Construction", value: "isNewConstruction" },
    { emoji: "🖼️", label: "3D Home Tour", value: "is3dHome" },
    { emoji: "🌲", label: "Single Story", value: "singleStory" },
    { emoji: "📷", label: "Only With Photos", value: "onlyWithPhotos" },
    { emoji: "⬆️⬇️", label: "Price Reduced", value: "onlyPriceReduction" },
  ]

const viewPreferences = [
    { emoji: "🌆", label: "City View", value: "isCityView" },
    { emoji: "🌊", label: "Waterfront", value: "isWaterfront" },
    { emoji: "⛰️", label: "Mountain View", value: "isMountainView" },
    { emoji: "🌳", label: "Park View", value: "isParkView" },
    { emoji: "🌊", label: "Water View", value: "isWaterView" },
  ]

const marketConditions = [
    { emoji: "📅", label: "Coming Soon", value: "isComingSoon" },
    { emoji: "🎯", label: "Auction", value: "isAuction" },
    { emoji: "🚩", label: "Foreclosure", value: "isForSaleForeclosure" },
    { emoji: "🏦", label: "Zillow Owned", value: "isZillowOwnedOnly" },
  ]

const rentalSpecific = [
    { emoji: "✅", label: "Accepts Applications", value: "onlyRentalAcceptsApplications" },
    { emoji: "🐈", label: "Cats Allowed", value: "onlyRentalCatsAllowed" },
    { emoji: "🐾", label: "Pets Allowed", value: "onlyRentalPetsAllowed" },
    { emoji: "🐶", label: "Small Dogs", value: "onlyRentalSmallDogsAllowed" },
    { emoji: "🐩", label: "Large Dogs", value: "onlyRentalLargeDogsAllowed" },
    { emoji: "💸", label: "Income Restricted", value: "onlyRentalIncomeRestricted" },
  ]

const renderEmojiSelector = (options: any[], title: string) => (
    <div className="space-y-3">
      <Label className="text-sm font-semibold text-gray-700">{title}</Label>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {options.map(({ emoji, label, value }) => (
          <div
            key={value}
            className={`border-2 rounded-lg p-3 cursor-pointer transition-all hover:shadow-md ${
              formData[value as keyof SavedSearchCriteria]
                ? "border-blue-500 bg-blue-50"
                : "border-gray-200 hover:border-gray-300"
            }`}
            onClick={() => handleInputChange(value, !formData[value as keyof SavedSearchCriteria])}
          >
            <div className="flex flex-col items-center text-center space-y-2">
              <span className="text-2xl">{emoji}</span>
              <span className="text-xs font-medium text-gray-700">{label}</span>
              <Checkbox
                checked={formData[value as keyof SavedSearchCriteria] as boolean}
                onChange={() => {}}
                className="pointer-events-none"
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  )

const renderNumberRange = (label: string, minParam: string, maxParam: string, isCurrency = false) => (
    <div className="space-y-3">
      <Label className="text-sm font-semibold text-gray-700">{label}</Label>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <Label className="text-xs text-gray-500">Minimum</Label>
          <Input
            placeholder={isCurrency ? "$0" : "Any"}
            value={
              isCurrency && formData[minParam as keyof SavedSearchCriteria]
                ? formatCurrency(formData[minParam as keyof SavedSearchCriteria] as string)
                : (formData[minParam as keyof SavedSearchCriteria] as string)
            }
            onChange={(e) => handleInputChange(minParam, e.target.value)}
            className="h-10"
          />
        </div>
        <div>
          <Label className="text-xs text-gray-500">Maximum</Label>
          <Input
            placeholder={isCurrency ? "No limit" : "Any"}
            value={
              isCurrency && formData[maxParam as keyof SavedSearchCriteria]
                ? formatCurrency(formData[maxParam as keyof SavedSearchCriteria] as string)
                : (formData[maxParam as keyof SavedSearchCriteria] as string)
            }
            onChange={(e) => handleInputChange(maxParam, e.target.value)}
            className="h-10"
          />
        </div>
      </div>
    </div>
  )

const renderDropdownRange = (label: string, minParam: string, maxParam: string, options: (string | number)[]) => (
    <div className="space-y-3">
      <Label className="text-sm font-semibold text-gray-700">{label}</Label>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <Label className="text-xs text-gray-500">Minimum</Label>
          <Select
            value={formData[minParam as keyof SavedSearchCriteria] as string}
            onValueChange={(value) => handleInputChange(minParam, value)}
          >
            <SelectTrigger className="h-10">
              <SelectValue placeholder="Any" />
            </SelectTrigger>
            <SelectContent>
              {options.map((option) => (
                <SelectItem key={option} value={option.toString()}>
                  {option === "any" ? "Any" : `${option}+`}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="text-xs text-gray-500">Maximum</Label>
          <Select
            value={formData[maxParam as keyof SavedSearchCriteria] as string}
            onValueChange={(value) => handleInputChange(maxParam, value)}
          >
            <SelectTrigger className="h-10">
              <SelectValue placeholder="Any" />
            </SelectTrigger>
            <SelectContent>
              {options.map((option) => (
                <SelectItem key={option} value={option.toString()}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  )

const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <div className="space-y-8">
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                <User className="w-8 h-8 text-blue-600" />
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Personal Info & Preferences</h2>
              <p className="text-gray-600 max-w-md mx-auto">
                Let's start with your basic information and search preferences
              </p>
            </div>

{/* Criteria Title Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Bookmark className="w-5 h-5" />
                  Search Title
                </CardTitle>
                <CardDescription>Give your property search a memorable name</CardDescription>
              </CardHeader>
              <CardContent className="p-6">
                <div>
                  <Label htmlFor="criteriaTitle" className="text-sm font-semibold text-gray-700 mb-2 block">
                    Criteria Title *
                  </Label>
                  <Input
                    id="criteriaTitle"
                    placeholder="e.g., Family Home in Austin, Downtown Condo Search, etc."
                    value={formData.criteriaTitle}
                    onChange={(e) => handleInputChange("criteriaTitle", e.target.value)}
                    className={`h-10 border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${
                      !formData.criteriaTitle.trim() ? "border-amber-300 bg-amber-50" : ""
                    }`}
                    required
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    This helps you identify and organize your different property searches
                  </p>
                  {formValidation && (
                    <SmartFieldGuidance
                      validation={formValidation}
                      currentStep={currentStep}
                      fieldName="criteriaTitle"
                    />
                  )}
                </div>
              </CardContent>
            </Card>

{/* Personal Info Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <User className="w-5 h-5" />
                  Personal Details
                </CardTitle>
              </CardHeader>
              <CardContent className="p-6 space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="firstName" className="text-sm font-semibold text-gray-700 mb-2 block">
                      First Name *
                    </Label>
                    <Input
                      id="firstName"
                      placeholder="John"
                      value={formData.firstName}
                      onChange={(e) => handleInputChange("firstName", e.target.value)}
                      className={`h-8 border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${
                        !formData.firstName.trim() ? "border-amber-300 bg-amber-50" : ""
                      }`}
                      required
                    />
                    {formValidation && (
                      <SmartFieldGuidance validation={formValidation} currentStep={currentStep} fieldName="firstName" />
                    )}
                  </div>
                  <div>
                    <Label htmlFor="lastName" className="text-sm font-semibold text-gray-700 mb-2 block">
                      Last Name *
                    </Label>
                    <Input
                      id="lastName"
                      placeholder="Smith"
                      value={formData.lastName}
                      onChange={(e) => handleInputChange("lastName", e.target.value)}
                      className={`h-8 border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${
                        !formData.lastName.trim() ? "border-amber-300 bg-amber-50" : ""
                      }`}
                      required
                    />
                    {formValidation && (
                      <SmartFieldGuidance validation={formValidation} currentStep={currentStep} fieldName="lastName" />
                    )}
                  </div>
                </div>

<div>
                  <Label htmlFor="email" className="text-sm font-semibold text-gray-700 mb-2 block">
                    Email Address *
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="john.smith@example.com"
                    value={formData.email}
                    onChange={(e) => handleInputChange("email", e.target.value)}
                    className={`h-8 border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${
                      !formData.email.trim() ? "border-amber-300 bg-amber-50" : ""
                    }`}
                    required
                  />
                  <p className="text-xs text-gray-500 mt-1">We'll send property alerts to this email</p>
                  {formValidation && (
                    <SmartFieldGuidance validation={formValidation} currentStep={currentStep} fieldName="email" />
                  )}
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="preferredAlertTime" className="text-sm font-semibold text-gray-700 mb-2 block">
                      Preferred Alert Time *
                    </Label>
                    <Select
                      value={formData.preferredAlertTime}
                      onValueChange={(value) => handleInputChange("preferredAlertTime", value)}
                    >
                      <SelectTrigger
                        className={`h-8 border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${
                          !formData.preferredAlertTime ? "border-amber-300 bg-amber-50" : ""
                        }`}
                      >
                        <SelectValue placeholder="Select time" />
                      </SelectTrigger>
                      <SelectContent>
                        {alertTimeOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {formValidation && (
                      <SmartFieldGuidance
                        validation={formValidation}
                        currentStep={currentStep}
                        fieldName="preferredAlertTime"
                      />
                    )}
                  </div>
                  <div>
                    <Label htmlFor="alertTime_zone" className="text-sm font-semibold text-gray-700 mb-2 block">
                      Timezone
                    </Label>
                    <Select
                      value={formData.alertTime_zone}
                      onValueChange={(value) => handleInputChange("alertTime_zone", value)}
                    >
                      <SelectTrigger className="h-8 border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                        <SelectValue placeholder="Select timezone" />
                      </SelectTrigger>
                      <SelectContent>
                        {timezoneOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div>
                  <Label htmlFor="location" className="text-sm font-semibold text-gray-700 mb-2 block">
                    Primary Search Location *
                  </Label>
                  <div className="space-y-3">
                    {/* State Dropdown */}
                    <div>
                      <Label className="text-xs text-gray-500 mb-1 block">Select State</Label>
                      <Select
                        value={formData.selectedState || ""}
                        onValueChange={(value) => {
                          handleInputChange("selectedState", value)
                          if (value) {
                            handleInputChange("location", value)
                          }
                        }}
                      >
                        <SelectTrigger className="h-10 border-gray-300 focus:border-blue-500 focus:ring-blue-500">
                          <SelectValue placeholder="Choose a state..." />
                        </SelectTrigger>
                        <SelectContent className="max-h-60">
                          <SelectItem value="Alabama">Alabama</SelectItem>
                          <SelectItem value="Alaska">Alaska</SelectItem>
                          <SelectItem value="Arizona">Arizona</SelectItem>
                          <SelectItem value="Arkansas">Arkansas</SelectItem>
                          <SelectItem value="California">California</SelectItem>
                          <SelectItem value="Colorado">Colorado</SelectItem>
                          <SelectItem value="Connecticut">Connecticut</SelectItem>
                          <SelectItem value="Delaware">Delaware</SelectItem>
                          <SelectItem value="Florida">Florida</SelectItem>
                          <SelectItem value="Georgia">Georgia</SelectItem>
                          <SelectItem value="Hawaii">Hawaii</SelectItem>
                          <SelectItem value="Idaho">Idaho</SelectItem>
                          <SelectItem value="Illinois">Illinois</SelectItem>
                          <SelectItem value="Indiana">Indiana</SelectItem>
                          <SelectItem value="Iowa">Iowa</SelectItem>
                          <SelectItem value="Kansas">Kansas</SelectItem>
                          <SelectItem value="Kentucky">Kentucky</SelectItem>
                          <SelectItem value="Louisiana">Louisiana</SelectItem>
                          <SelectItem value="Maine">Maine</SelectItem>
                          <SelectItem value="Maryland">Maryland</SelectItem>
                          <SelectItem value="Massachusetts">Massachusetts</SelectItem>
                          <SelectItem value="Michigan">Michigan</SelectItem>
                          <SelectItem value="Minnesota">Minnesota</SelectItem>
                          <SelectItem value="Mississippi">Mississippi</SelectItem>
                          <SelectItem value="Missouri">Missouri</SelectItem>
                          <SelectItem value="Montana">Montana</SelectItem>
                          <SelectItem value="Nebraska">Nebraska</SelectItem>
                          <SelectItem value="Nevada">Nevada</SelectItem>
                          <SelectItem value="New Hampshire">New Hampshire</SelectItem>
                          <SelectItem value="New Jersey">New Jersey</SelectItem>
                          <SelectItem value="New Mexico">New Mexico</SelectItem>
                          <SelectItem value="New York">New York</SelectItem>
                          <SelectItem value="North Carolina">North Carolina</SelectItem>
                          <SelectItem value="North Dakota">North Dakota</SelectItem>
                          <SelectItem value="Ohio">Ohio</SelectItem>
                          <SelectItem value="Oklahoma">Oklahoma</SelectItem>
                          <SelectItem value="Oregon">Oregon</SelectItem>
                          <SelectItem value="Pennsylvania">Pennsylvania</SelectItem>
                          <SelectItem value="Rhode Island">Rhode Island</SelectItem>
                          <SelectItem value="South Carolina">South Carolina</SelectItem>
                          <SelectItem value="South Dakota">South Dakota</SelectItem>
                          <SelectItem value="Tennessee">Tennessee</SelectItem>
                          <SelectItem value="Texas">Texas</SelectItem>
                          <SelectItem value="Utah">Utah</SelectItem>
                          <SelectItem value="Vermont">Vermont</SelectItem>
                          <SelectItem value="Virginia">Virginia</SelectItem>
                          <SelectItem value="Washington">Washington</SelectItem>
                          <SelectItem value="West Virginia">West Virginia</SelectItem>
                          <SelectItem value="Wisconsin">Wisconsin</SelectItem>
                          <SelectItem value="Wyoming">Wyoming</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    {/* OR Divider */}
                    <div className="flex items-center">
                      <div className="flex-1 border-t border-gray-200"></div>
                      <span className="px-3 text-xs text-gray-500 bg-white">OR</span>
                      <div className="flex-1 border-t border-gray-200"></div>
                    </div>
                    {/* Manual Entry */}
                    <div>
                      <Label className="text-xs text-gray-500 mb-1 block">Enter Specific Location</Label>
                      <div className="flex gap-2">
                        <Input
                          id="location"
                          placeholder="Enter city, neighborhood, or address"
                          value={formData.manualLocation || ""}
                          onChange={(e) => {
                            const value = e.target.value
                            handleInputChange("manualLocation", value)
                            if (value) {
                              handleInputChange("location", value)
                              handleInputChange("selectedState", "") // Clear state selection when typing manually
                            }
                          }}
                          className={`h-10 border-gray-300 focus:border-blue-500 focus:ring-blue-500 flex-1 ${
                            !formData.location.trim() ? "border-amber-300 bg-amber-50" : ""
                          }`}
                        />
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="h-10 px-3 bg-transparent"
                          onClick={() => setShowLocationSelector(true)}
                        >
                          <MapPin className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">
                    Select a state for broad searches or enter a specific city, neighborhood, or address for targeted
                    results
                  </p>
                  {formValidation && (
                    <SmartFieldGuidance validation={formValidation} currentStep={currentStep} fieldName="location" />
                  )}
                </div>

{/* Keywords moved to Step 1 */}
                <div>
                  <Label htmlFor="keywords" className="text-sm font-semibold text-gray-700 mb-2 block">
                    Keywords
                  </Label>
                  <Input
                    id="keywords"
                    placeholder="granite countertops, hardwood floors, etc."
                    value={formData.keywords}
                    onChange={(e) => handleInputChange("keywords", e.target.value)}
                    className="h-10"
                  />
                  <p className="text-xs text-gray-500 mt-1">Enter specific features or amenities you're looking for</p>
                  <div className="mt-2 text-xs text-gray-400 italic">
                    Popular examples: hardwood floors, garage, fenced yard, vaulted ceilings, walk-in closet, granite
                    countertops
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 2:
        return (
          <div className="space-y-8">
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-purple-100 rounded-full mb-4">
                <Building className="w-8 h-8 text-purple-600" />
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Property Types & Features</h2>
              <p className="text-gray-600 max-w-md mx-auto">
                Select the types of properties and features you're interested in
              </p>
            </div>

{/* Property Types Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Building className="w-5 h-5" />
                  Property Types
                </CardTitle>
                <CardDescription>Select all property types you're interested in</CardDescription>
              </CardHeader>
              <CardContent className="p-6">
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                  {[
                    { key: "isSingleFamily", label: "Single Family", icon: Home },
                    { key: "isMultiFamily", label: "Multi Family", icon: Building },
                    { key: "isCondo", label: "Condo", icon: Building },
                    { key: "isApartment", label: "Apartment", icon: Building },
                    { key: "isTownhouse", label: "Townhouse", icon: Home },
                    { key: "isManufactured", label: "Manufactured", icon: Home },
                    { key: "isLotLand", label: "Lot/Land", icon: Trees },
                  ].map(({ key, label, icon: Icon }) => (
                    <div
                      key={key}
                      className={`border-2 rounded-lg p-4 cursor-pointer transition-all hover:shadow-md ${
                        formData[key as keyof SavedSearchCriteria]
                          ? "border-purple-500 bg-purple-50"
                          : "border-gray-200 hover:border-gray-300"
                      }`}
                      onClick={() => handleInputChange(key, !formData[key as keyof SavedSearchCriteria])}
                    >
                      <div className="flex flex-col items-center text-center space-y-2">
                        <Icon
                          className={`w-8 h-8 ${
                            formData[key as keyof SavedSearchCriteria] ? "text-purple-600" : "text-gray-400"
                          }`}
                        />
                        <span
                          className={`text-sm font-medium ${
                            formData[key as keyof SavedSearchCriteria] ? "text-purple-900" : "text-gray-700"
                          }`}
                        >
                          {label}
                        </span>
                        <Checkbox
                          checked={formData[key as keyof SavedSearchCriteria] as boolean}
                          onChange={() => {}}
                          className="pointer-events-none"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Key Features Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Search className="w-5 h-5" />
                  Key Features
                </CardTitle>
                <CardDescription>Select desired property features</CardDescription>
              </CardHeader>
              <CardContent className="p-6">{renderEmojiSelector(emojiFeatures, "")}</CardContent>
            </Card>

{/* Listing Type Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Home className="w-5 h-5" />
                  Listing Type
                </CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                <div>
                  <Label className="text-sm font-semibold text-gray-700 mb-2 block">Listing Type</Label>
                  <Select
                    value={formData.listing_type}
                    onValueChange={(value) => handleInputChange("listing_type", value)}
                  >
                    <SelectTrigger className="h-12 border-gray-300 focus:border-green-500 focus:ring-green-500">
                      <SelectValue placeholder="Select listing type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="by_agent">By Agent</SelectItem>
                      <SelectItem value="by_owner_other">By Owner & Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 3:
        return (
          <div className="space-y-8">
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                <DollarSign className="w-8 h-8 text-green-600" />
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Price, Size & Specs</h2>
              <p className="text-gray-600 max-w-md mx-auto">Set your budget and size preferences</p>
            </div>

{/* Price & Size Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <DollarSign className="w-5 h-5" />
                  Price, Size & Specs
                </CardTitle>
                <CardDescription>Set your budget and size requirements</CardDescription>
              </CardHeader>
              <CardContent className="p-6 space-y-8">
                {renderNumberRange("Price Range", "price_min", "price_max", true)}
                {renderNumberRange("Monthly Payment", "monthlyPayment_min", "monthlyPayment_max", true)}
                {renderNumberRange("Square Footage", "sqft_min", "sqft_max")}
                {renderDropdownRange("Bedrooms", "beds_min", "beds_max", ["any", 1, 2, 3, 4, 5])}
                {renderDropdownRange("Bathrooms", "baths_min", "baths_max", ["any", 1, 2, 3, 4, 5])}
              </CardContent>
            </Card>
          </div>
        )

case 4:
        return (
          <div className="space-y-8">
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-orange-100 rounded-full mb-4">
                <Filter className="w-8 h-8 text-orange-600" />
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Advanced Filters</h2>
              <p className="text-gray-600 max-w-md mx-auto">Fine-tune your search with detailed preferences</p>
            </div>

{/* Advanced Filters Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Filter className="w-5 h-5" />
                  Advanced Filters
                </CardTitle>
                <CardDescription>More specific search criteria</CardDescription>
              </CardHeader>
              <CardContent className="p-6 space-y-8">
                <div>
                  <Label className="text-sm font-semibold text-gray-700 mb-2 block">Days on Market</Label>
                  <Select value={formData.doz} onValueChange={(value) => handleInputChange("doz", value)}>
                    <SelectTrigger className="h-10">
                      <SelectValue placeholder="Any" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="any">Any</SelectItem>
                      <SelectItem value="1">1 day</SelectItem>
                      <SelectItem value="7">7 days</SelectItem>
                      <SelectItem value="14">14 days</SelectItem>
                      <SelectItem value="30">30 days</SelectItem>
                      <SelectItem value="90">90 days</SelectItem>
                      <SelectItem value="6m">6 months</SelectItem>
                      <SelectItem value="12m">12 months</SelectItem>
                      <SelectItem value="24m">24 months</SelectItem>
                      <SelectItem value="36m">36 months</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{renderNumberRange("Year Built", "built_min", "built_max")}
                {renderNumberRange("HOA Fee ($)", "hoa_min", "hoa_max", true)}
                {renderNumberRange("Lot Size (sq ft)", "lotSize_min", "lotSize_max")}

<div>
                  <Label className="text-sm font-semibold text-gray-700 mb-2 block">Minimum Parking Spots</Label>
                  <Select
                    value={formData.parkingSpots_min}
                    onValueChange={(value) => handleInputChange("parkingSpots_min", value)}
                  >
                    <SelectTrigger className="h-10">
                      <SelectValue placeholder="Any" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="any">Any</SelectItem>
                      <SelectItem value="1">1+</SelectItem>
                      <SelectItem value="2">2+</SelectItem>
                      <SelectItem value="3">3+</SelectItem>
                      <SelectItem value="4">4+</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{/* Additional Notes moved to Step 4 */}
                <div>
                  <Label htmlFor="additionalNotes" className="text-sm font-semibold text-gray-700 mb-2 block">
                    Additional Notes
                  </Label>
                  <Textarea
                    id="additionalNotes"
                    placeholder="E.g. I'm only interested in modern homes or quiet neighborhoods."
                    value={formData.additionalNotes}
                    onChange={(e) => handleInputChange("additionalNotes", e.target.value)}
                    rows={4}
                    className="border-gray-300 focus:border-blue-500 focus:ring-blue-500"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Adding notes helps us personalize your search to fit your exact needs.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        )

case 5:
        return (
          <div className="space-y-8">
            {/* Header */}
            <div className="text-center space-y-2">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full mb-4">
                <Settings className="w-8 h-8 text-indigo-600" />
              </div>
              <h2 className="text-3xl font-bold text-gray-900">Views, Schools & Special Conditions</h2>
              <p className="text-gray-600 max-w-md mx-auto">Add views, schools, and special conditions</p>
            </div>

{/* Views Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Eye className="w-5 h-5" />
                  View Preferences
                </CardTitle>
                <CardDescription>Select desired property views</CardDescription>
              </CardHeader>
              <CardContent className="p-6">{renderEmojiSelector(viewPreferences, "")}</CardContent>
            </Card>

{/* Schools Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-green-50 to-teal-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <GraduationCap className="w-5 h-5" />
                  School Preferences
                </CardTitle>
                <CardDescription>Filter by school information</CardDescription>
              </CardHeader>
              <CardContent className="p-6 space-y-6">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="enableSchools"
                    checked={formData.enableSchools}
                    onCheckedChange={(checked) => handleInputChange("enableSchools", checked)}
                  />
                  <Label htmlFor="enableSchools" className="text-sm font-medium text-gray-700">
                    Enable School Filtering
                  </Label>
                </div>
              </CardContent>
            </Card>

{/* Market Conditions Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Target className="w-5 h-5" />
                  Market Conditions
                </CardTitle>
                <CardDescription>Special market conditions</CardDescription>
              </CardHeader>
              <CardContent className="p-6">{renderEmojiSelector(marketConditions, "")}</CardContent>
            </Card>

{/* Rental Specific Card */}
            <Card className="border-0 shadow-lg">
              <CardHeader className="bg-gradient-to-r from-pink-50 to-rose-50 rounded-t-lg">
                <CardTitle className="flex items-center gap-2 text-gray-900">
                  <Home className="w-5 h-5" />
                  Rental Specific
                </CardTitle>
                <CardDescription>Rental-specific preferences</CardDescription>
              </CardHeader>
              <CardContent className="p-6">{renderEmojiSelector(rentalSpecific, "")}</CardContent>
            </Card>
          </div>
        )

default:
        return null
    }
  }

return (
    <div className={`space-y-8 ${className}`}>
      {/* Minimal Progress Tracker */}
      {formValidation && (
        <div className="flex justify-end mb-2">
          <div className="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded-full border">
            {formValidation.completionPercentage}% complete
          </div>
        </div>
      )}

{/* Progress Steps - Always Visible */}
      <div className="mb-8">
        <div className="flex items-center justify-center space-x-4 mb-6">
          {[1, 2, 3, 4, 5].map((step) => {
            const stepInfo = getStepInfo(step)
            const stepStatus = getStepStatus(step)
            const Icon = stepInfo.icon
            return (
              <div key={step} className="flex items-center">
                <button
                  onClick={() => navigateToStep(step)}
                  className={`flex flex-col items-center p-3 rounded-lg transition-all hover:shadow-md ${
                    currentStep === step
                      ? "bg-blue-600 text-white shadow-lg"
                      : stepStatus.isComplete
                        ? "bg-green-100 text-green-700 hover:bg-green-200"
                        : stepStatus.requiredMissing > 0
                          ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
                          : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                  }`}
                >
                  <div className="relative">
                    <Icon className="w-6 h-6 mb-1" />
                    {stepStatus.requiredMissing > 0 && (
                      <div className="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 text-white text-xs rounded-full flex items-center justify-center">
                        <AlertTriangle className="w-3 h-3" />
                      </div>
                    )}
                    {stepStatus.isComplete && stepStatus.requiredMissing === 0 && (
                      <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 text-white rounded-full flex items-center justify-center">
                        <CheckCircle className="w-3 h-3" />
                      </div>
                    )}
                  </div>
                  <span className="text-xs font-medium text-center leading-tight">{stepInfo.title}</span>
                </button>
                {step < 5 && <ChevronRight className="w-4 h-4 text-gray-400 mx-2" />}
              </div>
            )
          })}
        </div>
        {/* Current Step Info */}
        <div className="text-center">
          <h3 className="text-xl font-semibold text-gray-900 mb-1">{getStepInfo(currentStep).title}</h3>
          <p className="text-gray-600">{getStepInfo(currentStep).description}</p>
        </div>
      </div>

{/* Minimized Progress Alert System */}
      {formValidation && (
        <div className="mb-4 max-h-[15vh] overflow-hidden">
          <ProactiveFormAlerts
            validation={formValidation}
            currentStep={currentStep}
            onNavigateToStep={navigateToStep}
          />
        </div>
      )}

{/* Detailed Alerts */}
      {showDetailedAlerts && formValidation && (
        <div className="mb-8">
          <FormCompletionAlerts
            completionData={{
              isComplete: formValidation.isValid,
              completionPercentage: formValidation.completionPercentage,
              completedFields: formValidation.completedRequiredFields,
              totalFields: formValidation.requiredFieldsCount,
              missingFields: formValidation.missingFields.map((f) => f.name),
              stepCompletionStatus: formValidation.stepCompletionStatus,
            }}
            currentStep={currentStep}
            onNavigateToStep={navigateToStep}
            showDetailedView={true}
          />
        </div>
      )}

{/* Form Content */}
      <div>{renderStep()}</div>

{/* Navigation Buttons */}
      <div className="flex items-center justify-between mt-12 pt-8 border-t">
        <Button
          variant="outline"
          onClick={prevStep}
          disabled={currentStep === 1}
          className="flex items-center gap-2 bg-transparent"
        >
          <ChevronLeft className="w-4 h-4" />
          Previous
        </Button>

<div className="flex items-center gap-4">
          {currentStep === 5 ? (
            <div className="flex items-center gap-3">
              {!isEditMode && (
                <SaveSearchDialog searchCriteria={formData} onSaved={handleSearchSaved}>
                  <Button variant="outline" disabled={!formValidation?.isValid} className="gap-2 bg-transparent">
                    <Bookmark className="h-4 w-4" />
                    Save Search
                  </Button>
                </SaveSearchDialog>
              )}
              <Button
                onClick={handleSaveOrUpdate}
                disabled={isSubmitting || !formValidation?.isValid}
                className="gap-2 min-w-[140px]"
              >
                <Save className="h-4 w-4" />
                {isSubmitting ? "Saving..." : isEditMode ? "Update Search" : "Save Criteria"}
              </Button>
            </div>
          ) : (
            <Button onClick={nextStep} className="flex items-center gap-2">
              Next
              <ChevronRight className="w-4 h-4" />
            </Button>
          )}
        </div>
      </div>

{/* Enter key tip */}
      <div className="flex justify-end mt-2">
        <span className="text-xs text-gray-400 italic">Press Enter to {currentStep === 5 ? "save" : "continue"}</span>
      </div>

{/* Floating Progress Indicator for Mobile */}
      {formValidation && (
        <FloatingProgressIndicator
          validation={formValidation}
          currentStep={currentStep}
          onNavigateToStep={navigateToStep}
        />
      )}

{/* Minimized/Toggleable Completion Assistant */}
      {formValidation && (
        <div className="fixed bottom-6 right-6 z-50">
          {showCompletionAssistant ? (
            <div className="relative">
              <Button
                variant="ghost"
                size="sm"
                className="absolute -top-2 -right-2 h-6 w-6 p-0 bg-white border shadow-sm hover:bg-gray-50 z-10"
                onClick={() => setShowCompletionAssistant(false)}
              >
                <Minimize2 className="h-3 w-3" />
              </Button>
              <CompletionAssistant
                completionData={{
                  isComplete: formValidation.isValid,
                  completionPercentage: formValidation.completionPercentage,
                  completedFields: formValidation.completedRequiredFields,
                  totalFields: formValidation.requiredFieldsCount,
                  missingFields: formValidation.missingFields.map((f) => f.name),
                  stepCompletionStatus: formValidation.stepCompletionStatus,
                }}
                onFieldFocus={(fieldName) => {
                  // Find which step contains this field and navigate to it
                  const fieldStep = formValidation.missingFields.find((f) => f.name === fieldName)?.step
                  if (fieldStep) {
                    navigateToStep(fieldStep)
                  }
                }}
              />
            </div>
          ) : (
            <div className="relative">
              <Button
                variant="default"
                size="sm"
                className="h-12 w-12 rounded-full shadow-lg"
                onClick={() => setShowCompletionAssistant(true)}
              >
                <Target className="h-5 w-5" />
              </Button>
              {/* Warning indicator for missing required fields */}
              {!formValidation.isValid && (
                <div className="absolute -top-1 -right-1 w-5 h-5 bg-amber-500 text-white rounded-full flex items-center justify-center">
                  <AlertTriangle className="h-3 w-3" />
                </div>
              )}
            </div>
          )}
        </div>
      )}

{/* Save Search Dialog */}
      {showSaveDialog && (
        <SaveSearchDialog
          searchCriteria={formData}
          onSaved={handleSearchSaved}
          open={showSaveDialog}
          onOpenChange={setShowSaveDialog}
        />
      )}

{/* Draggable Location Selector */}
      <DraggableLocationSelector
        isVisible={showLocationSelector && !showCompletionAssistant}
        onLocationSelect={(coordinates, address) => {
          handleInputChange("location", address)
          handleInputChange("locationCoordinates", coordinates)
        }}
        onClose={() => setShowLocationSelector(false)}
      />
    </div>
  )
}

export default PropertyCriteriaForm
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Target,
  Plus,
  Search,
  Bell,
  User,
  CheckCircle,
  Home,
  Clock,
  CreditCard,
  RotateCcw,
  LogOut,
  ChevronDown,
} from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { NavigationLink } from "@/components/navigation-link"
import { useToast } from "@/hooks/use-toast"
import { useAuth } from "@/contexts/auth-context"
import { useSavedSearches } from "@/contexts/saved-searches-context"
import { doc, getDoc } from "firebase/firestore"
import { db } from "@/lib/firebase-config"
import { signOut } from "firebase/auth"
import { auth } from "@/lib/firebase-config"

export default function DashboardPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { currentUser, loading } = useAuth()
  const { searches: userSearchCriteria, deleteSearch } = useSavedSearches()
  const { toast } = useToast()
  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
  const [userData, setUserData] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const processedSuccess = useRef(false)
  const [showLogoutDialog, setShowLogoutDialog] = useState(false)
  const [isLoggingOut, setIsLoggingOut] = useState(false)

// Sort searches by creation date (newest first) and take top 3
  const sortedRecentSearches = userSearchCriteria
    .sort((a, b) => {
      const dateA = new Date(a.createdAt || 0).getTime()
      const dateB = new Date(b.createdAt || 0).getTime()
      return dateB - dateA // Descending order (newest first)
    })
    .slice(0, 3)

useEffect(() => {
    const checkAuth = async () => {
      if (loading) return

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

try {
        // Fetch user data from Firestore
        const userDoc = await getDoc(doc(db, "users", currentUser.uid))

if (userDoc.exists()) {
          setUserData(userDoc.data())
        }
      } catch (error) {
        console.error("Error fetching user data:", error)
      } finally {
        setIsLoading(false)
      }
    }

checkAuth()
  }, [currentUser, loading, router])

useEffect(() => {
    // Handle success message only once
    const successParam = searchParams.get("success")
    if (successParam === "true" && !processedSuccess.current) {
      processedSuccess.current = true
      setShowSuccessMessage(true)

// Show toast notification
      toast({
        title: "Success!",
        description: "Your property search criteria has been saved and synced successfully.",
      })

// Clean up the URL without causing re-render
      const url = new URL(window.location.href)
      url.searchParams.delete("success")
      window.history.replaceState({}, "", url.toString())
    }
  }, [searchParams, toast])

const handleAddCriteria = () => {
    router.push("/dashboard/add-criteria")
  }

const handleEditCriteria = (criteriaId: string) => {
    router.push(`/dashboard/add-criteria?edit=${criteriaId}`)
  }

const handleDeleteCriteria = (criteriaId: string) => {
    deleteSearch(criteriaId)
    toast({
      title: "Criteria deleted",
      description: "Your search criteria has been removed.",
    })
  }

const handleRegenerateCriteria = (criteriaId: string) => {
    toast({
      title: "Regenerating search",
      description: "Your search criteria is being refreshed with new properties.",
    })
  }

const handleLogout = async () => {
    try {
      setIsLoggingOut(true)
      await signOut(auth)
      // Firebase will automatically clear the session
      // Auth state listener in useAuth context will detect change and redirect
      console.log("✅ User signed out successfully")
    } catch (error) {
      console.error("❌ Error signing out:", error)
      // Show error toast to user
      toast({
        title: "Logout Error",
        description: "There was a problem signing you out. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoggingOut(false)
    }
  }

const handleLogoutClick = () => {
    setShowLogoutDialog(true)
  }

const handleLogoutConfirm = async () => {
    await handleLogout()
    setShowLogoutDialog(false)
  }

const handleLogoutCancel = () => {
    setShowLogoutDialog(false)
  }

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

return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/dashboard" className="text-sm font-medium text-primary">
              Dashboard
            </NavigationLink>
            <NavigationLink href="/dashboard/active-searches" className="text-sm font-medium hover:text-primary">
              Active Searches
            </NavigationLink>
            <NavigationLink href="/dashboard/alerts" className="text-sm font-medium hover:text-primary">
              Alerts
            </NavigationLink>
            <NavigationLink href="/dashboard/settings" className="text-sm font-medium hover:text-primary">
              Settings
            </NavigationLink>
          </nav>
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="sm">
              <Bell className="h-4 w-4" />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="flex items-center gap-1">
                  <User className="h-4 w-4" />
                  <ChevronDown className="h-3 w-3" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem onClick={handleLogoutClick} className="text-red-600 focus:text-red-600">
                  <LogOut className="h-4 w-4 mr-2" />
                  Log out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

<main className="flex-1 bg-gradient-to-b from-background to-muted">
        <div className="container px-4 md:px-6 py-8">
          {/* Success Message */}
          {showSuccessMessage && (
            <div className="mb-6 p-4 rounded-lg bg-green-50 border border-green-200 flex items-center gap-3">
              <CheckCircle className="h-5 w-5 text-green-600" />
              <div>
                <h4 className="font-medium text-green-800">Criteria Saved Successfully!</h4>
                <p className="text-sm text-green-600">
                  Your property search criteria has been saved and sent to our matching system.
                </p>
              </div>
            </div>
          )}

{/* Welcome Section */}
          <div className="mb-8">
            <h1 className="text-3xl font-bold tracking-tight">Welcome to your Dashboard</h1>
            <p className="text-muted-foreground mt-2">
              Manage your property search criteria and view personalized alerts
            </p>
            {userData && (
              <p className="text-xs text-muted-foreground mt-1">Welcome, {userData.name || currentUser.email}</p>
            )}
          </div>

{/* Quick Actions */}
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
            <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={handleAddCriteria}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Add New Criteria</CardTitle>
                <Plus className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">Create</div>
                <p className="text-xs text-muted-foreground">Set up new property search criteria</p>
              </CardContent>
            </Card>

<Card
              className="cursor-pointer hover:shadow-md transition-shadow"
              onClick={() => router.push("/dashboard/active-searches")}
            >
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Active Searches</CardTitle>
                <Search className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{userSearchCriteria.length}</div>
                <p className="text-xs text-muted-foreground">Currently monitoring</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">New Alerts</CardTitle>
                <Bell className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{userSearchCriteria.length * 4}</div>
                <p className="text-xs text-muted-foreground">Properties found today</p>
              </CardContent>
            </Card>
          </div>

{/* Recent Activity */}
          <div className="grid gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Your Search Criteria</CardTitle>
                <CardDescription>Your most recent property search setups</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {userSearchCriteria.length === 0 ? (
                  <div className="text-center py-8">
                    <p className="text-muted-foreground mb-4">No search criteria yet</p>
                    <Button onClick={handleAddCriteria} variant="outline">
                      <Plus className="h-4 w-4 mr-2" />
                      Create your first search
                    </Button>
                  </div>
                ) : (
                  sortedRecentSearches.map((criteria) => (
                    <div key={criteria.id} className="flex items-center justify-between p-3 border rounded-lg">
                      <div>
                        <h4 className="font-medium">{criteria.criteriaTitle || "Untitled Search"}</h4>
                        <p className="text-sm text-muted-foreground">
                          {criteria.beds_min && criteria.beds_min !== "any" ? `${criteria.beds_min}+ bed` : "Any bed"},
                          {criteria.price_min || criteria.price_max
                            ? ` $${Number(criteria.price_min || 0).toLocaleString()}-$${criteria.price_max ? Number(criteria.price_max).toLocaleString() : "∞"}`
                            : " Any price"}
                        </p>
                        <p className="text-xs text-muted-foreground">{criteria.location || "Any location"}</p>
                        <p className="text-xs text-gray-400">
                          Created {criteria.createdAt ? new Date(criteria.createdAt).toLocaleDateString() : "Recently"}
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm" onClick={() => handleRegenerateCriteria(criteria.id!)}>
                          <RotateCcw className="h-4 w-4 mr-1" />
                          Regenerate
                        </Button>
                        <Button variant="outline" size="sm" onClick={() => handleEditCriteria(criteria.id!)}>
                          Edit
                        </Button>
                        <Button variant="outline" size="sm" onClick={() => handleDeleteCriteria(criteria.id!)}>
                          Delete
                        </Button>
                      </div>
                    </div>
                  ))
                )}
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Quick Stats</CardTitle>
                <CardDescription>Key metrics and engagement summary</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  {/* Active Alerts */}
                  <div
                    className="flex flex-col p-3 border rounded-lg bg-background/50 hover:bg-background/80 transition-colors"
                    title="Number of active property search criteria"
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <Bell className="h-4 w-4 text-primary" />
                      <span className="text-sm font-medium">Active Alerts</span>
                    </div>
                    <span className="text-2xl font-bold">{userSearchCriteria.length}</span>
                  </div>

{/* Properties This Week */}
                  <div
                    className="flex flex-col p-3 border rounded-lg bg-background/50 hover:bg-background/80 transition-colors"
                    title="Total properties matching your criteria in the past 7 days"
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <Home className="h-4 w-4 text-primary" />
                      <span className="text-sm font-medium">Properties This Week</span>
                    </div>
                    <span className="text-2xl font-bold">47</span>
                  </div>

{/* Time Saved */}
                  <div
                    className="flex flex-col p-3 border rounded-lg bg-background/50 hover:bg-background/80 transition-colors"
                    title="Estimated time saved from manual searching (5 min per property)"
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <Clock className="h-4 w-4 text-primary" />
                      <span className="text-sm font-medium">Time Saved This Week</span>
                    </div>
                    <span className="text-2xl font-bold">
                      {47 * 5} <span className="text-sm font-normal text-muted-foreground">min</span>
                    </span>
                  </div>

{/* Account Status */}
                  <div
                    className="flex flex-col p-3 border rounded-lg bg-background/50 hover:bg-background/80 transition-colors"
                    title="Your current subscription plan"
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <CreditCard className="h-4 w-4 text-primary" />
                      <span className="text-sm font-medium">Account Status</span>
                    </div>
                    <span className="text-2xl font-bold text-primary">Pro</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Call to Action */}
          <div className="mt-8 text-center">
            <Card className="max-w-md mx-auto">
              <CardHeader>
                <CardTitle>Ready to find your perfect property?</CardTitle>
                <CardDescription>Set up your search criteria and start receiving personalized alerts</CardDescription>
              </CardHeader>
              <CardContent>
                <Button onClick={handleAddCriteria} className="w-full">
                  <Plus className="h-4 w-4 mr-2" />
                  Add New Search Criteria
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

{/* Footer */}
      <footer className="w-full py-6 bg-background border-t">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center gap-4 md:flex-row md:justify-between">
            <div className="flex items-center gap-2">
              <Target className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">© 2025 Lokate. All Rights Reserved.</span>
            </div>
            <div className="flex items-center gap-4">
              <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
                Support
              </NavigationLink>
              <NavigationLink href="/privacy" className="text-sm font-medium hover:text-primary">
                Privacy
              </NavigationLink>
              <NavigationLink href="/terms" className="text-sm font-medium hover:text-primary">
                Terms
              </NavigationLink>
            </div>
          </div>
        </div>
      </footer>
      {/* Logout Confirmation Dialog */}
      <AlertDialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure you want to log out?</AlertDialogTitle>
            <AlertDialogDescription>
              You will be redirected to the login page and will need to sign in again to access your dashboard.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className="flex-col gap-2 sm:flex-col">
            <AlertDialogAction
              onClick={handleLogoutConfirm}
              disabled={isLoggingOut}
              className="w-full bg-red-600 hover:bg-red-700 text-white disabled:opacity-50"
            >
              <LogOut className="h-4 w-4 mr-2" />
              {isLoggingOut ? "Signing out..." : "Log out"}
            </AlertDialogAction>
            <AlertDialogCancel onClick={handleLogoutCancel} className="w-full mt-0">
              Cancel
            </AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/add-criteria/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Suspense } from "react"
import { PropertyCriteriaForm } from "@/components/property-criteria-form"

function AddCriteriaContent() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <PropertyCriteriaForm />
      </div>
    </div>
  )
}

export default function AddCriteriaPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-gray-50 py-8 flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
            <p className="text-muted-foreground">Loading form...</p>
          </div>
        </div>
      }
    >
      <AddCriteriaContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/api/criteria/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"

// Make.com webhook URL - Updated to the correct endpoint
const MAKE_WEBHOOK_URL = "https://hook.us2.make.com/823xjm0xbtjd9la9ms29prhkyzepl2av"

async function sendToMakeWebhook(formData: any) {
  try {
    console.log("🚀 Sending data to Make.com webhook:", MAKE_WEBHOOK_URL)

const webhookPayload = {
      // Personal Information
      criteriaTitle: formData.criteriaTitle,
      spreadsheetName: formData.criteriaTitle, // This will be used as the name of the Excel/CSV file sent via email
      firstName: formData.firstName,
      lastName: formData.lastName,
      email: formData.email,
      preferredAlertTime: formData.preferredAlertTime,
      alertTime_zone: formData.alertTime_zone || "America/New_York",

// Email customization
      emailSubject: `Property Alert: ${formData.criteriaTitle}`, // Optional: customize email subject line

// Basic Search Criteria (Required) - matching your Make.com parameters
      location: formData.location,
      page: formData.page || 0,
      output: formData.output || "json",
      status: formData.status || "forSale",
      sortSelection: formData.sortSelection || "newest",
      listing_type: formData.listing_type || "by_agent",

// Property Types - exact match to your Make.com parameters
      isSingleFamily: formData.isSingleFamily || false,
      isMultiFamily: formData.isMultiFamily || false,
      isApartment: formData.isApartment || false,
      isCondo: formData.isCondo || false,
      isManufactured: formData.isManufactured || false,
      isTownhouse: formData.isTownhouse || false,
      isLotLand: formData.isLotLand || false,

// Time & Market Filters
      doz: formData.doz || "any",

// Price & Size - exact match to your Make.com parameters
      price_min: formData.price_min || "",
      price_max: formData.price_max || "",
      sqft_min: formData.sqft_min || "",
      sqft_max: formData.sqft_max || "",
      monthlyPayment_min: formData.monthlyPayment_min || "",
      monthlyPayment_max: formData.monthlyPayment_max || "",

// Rooms - Send empty string when "any" is selected
      beds_min: formData.beds_min === "any" ? "" : formData.beds_min || "",
      beds_max: formData.beds_max === "any" ? "" : formData.beds_max || "",
      baths_min: formData.baths_min === "any" ? "" : formData.baths_min || "",
      baths_max: formData.baths_max === "any" ? "" : formData.baths_max || "",

// HOA & Lot - exact match to your Make.com parameters
      hoa_min: formData.hoa_min || "",
      hoa_max: formData.hoa_max || "",
      lotSize_min: formData.lotSize_min || "",
      lotSize_max: formData.lotSize_max || "",

// Features & Amenities - exact match to your Make.com parameters
      hasPool: formData.hasPool || false,
      hasGarage: formData.hasGarage || false,
      hasAirConditioning: formData.hasAirConditioning || false,
      is3dHome: formData.is3dHome || false,
      isNewConstruction: formData.isNewConstruction || false,
      singleStory: formData.singleStory || false,
      onlyPriceReduction: formData.onlyPriceReduction || false,
      onlyWithPhotos: formData.onlyWithPhotos || false,

// Year Built - exact match to your Make.com parameters
      built_min: formData.built_min || "",
      built_max: formData.built_max || "",

// Sale Source - exact match to your Make.com parameters
      isForSaleByOwner: formData.isForSaleByOwner || false,
      isForSaleByAgent: formData.isForSaleByAgent || false,

// Views - exact match to your Make.com parameters
      isCityView: formData.isCityView || false,
      isWaterfront: formData.isWaterfront || false,
      isMountainView: formData.isMountainView || false,
      isWaterView: formData.isWaterView || false,
      isParkView: formData.isParkView || false,

// Schools - exact match to your Make.com parameters
      enableSchools: formData.enableSchools || false,
      isPublicSchool: formData.isPublicSchool || false,
      isPrivateSchool: formData.isPrivateSchool || false,
      isElementarySchool: formData.isElementarySchool || false,
      isMiddleSchool: formData.isMiddleSchool || false,
      greatSchoolsRating_min: formData.greatSchoolsRating_min || "any",

// Market Conditions - exact match to your Make.com parameters
      onlyRentalAcceptsApplications: formData.onlyRentalAcceptsApplications || false,
      onlyRentalIncomeRestricted: formData.onlyRentalIncomeRestricted || false,
      isZillowOwnedOnly: formData.isZillowOwnedOnly || false,
      isComingSoon: formData.isComingSoon || false,
      isForSaleForeclosure: formData.isForSaleForeclosure || false,
      isAuction: formData.isAuction || false,

// Pet/Rental Specific - exact match to your Make.com parameters
      onlyRentalCatsAllowed: formData.onlyRentalCatsAllowed || false,
      onlyRentalPetsAllowed: formData.onlyRentalPetsAllowed || false,
      onlyRentalSmallDogsAllowed: formData.onlyRentalSmallDogsAllowed || false,
      onlyRentalLargeDogsAllowed: formData.onlyRentalLargeDogsAllowed || false,

// Parking - exact match to your Make.com parameters
      parkingSpots_min: formData.parkingSpots_min || "any",

// Keywords - exact match to your Make.com parameters
      keywords: formData.keywords || "",

// Additional fields for location handling
      selectedState: formData.selectedState || "",
      manualLocation: formData.manualLocation || "",
      locationCoordinates: formData.locationCoordinates || { lat: 0, lng: 0 },

// Legacy fields for backward compatibility
      propertyTypes: formData.propertyTypes || [],
      minBedrooms: formData.minBedrooms,
      minBathrooms: formData.minBathrooms,
      minSquareFootage: formData.minSquareFootage,
      maxSquareFootage: formData.maxSquareFootage,
      listingStatus: formData.listingStatus,
      listingType: formData.listingType,
      sortBy: formData.sortBy,
      targetStates: formData.targetStates || [],
      targetCities: formData.targetCities,
      avoidAreas: formData.avoidAreas,
      minPrice: formData.minPrice,
      maxPrice: formData.maxPrice,
      budgetRange: formData.budgetRange,
      financingType: formData.financingType,
      investmentGoals: formData.investmentGoals || [],
      timeframe: formData.timeframe,
      experienceLevel: formData.experienceLevel,
      amenities: formData.amenities || [],
      dealBreakers: formData.dealBreakers,
      additionalNotes: formData.additionalNotes,
      communicationPreference: formData.communicationPreference,

// Alert tracking data
      lastAlertSent: formData.lastAlertSent || null,
      sentAddresses: formData.sentAddresses || [],

// Metadata
      submittedAt: new Date().toISOString(),
      source: "lokate-ai-criteria-form",

// API URL construction data for Make.com
      apiUrl: "https://zillow56.p.rapidapi.com/search",
      rapidApiKey: "YOUR_RAPIDAPI_KEY", // You'll need to add this to your environment variables
    }

console.log("📤 Webhook payload being sent:", JSON.stringify(webhookPayload, null, 2))

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

if (response.ok) {
      console.log("✅ Successfully sent data to Make.com webhook")
      const responseText = await response.text()
      console.log("📥 Make.com response:", responseText)
      return { success: true, status: response.status, response: responseText }
    } else {
      const errorText = await response.text()
      console.error("❌ Make.com webhook failed:", response.status, response.statusText, errorText)
      return { success: false, status: response.status, error: response.statusText, details: errorText }
    }
  } catch (error) {
    console.error("❌ Error sending to Make.com webhook:", error)
    return { success: false, error: error instanceof Error ? error.message : "Unknown error" }
  }
}

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

console.log("=== CRITERIA SUBMISSION ===")
    console.log("Received criteria data:", body)

// Validate required fields
    const missingFields = []
    if (!body.criteriaTitle || body.criteriaTitle.trim() === "") missingFields.push("criteriaTitle")
    if (!body.firstName || body.firstName.trim() === "") missingFields.push("firstName")
    if (!body.lastName || body.lastName.trim() === "") missingFields.push("lastName")
    if (!body.email || body.email.trim() === "") missingFields.push("email")
    if (!body.location || body.location.trim() === "") missingFields.push("location")

if (missingFields.length > 0) {
      return NextResponse.json({ error: `Missing required fields: ${missingFields.join(", ")}` }, { status: 400 })
    }

// Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(body.email)) {
      return NextResponse.json({ error: "Please enter a valid email address" }, { status: 400 })
    }

// Create criteria object with all the form data
    const criteriaData = {
      id: `criteria_${Date.now()}`,
      title: body.criteriaTitle,
      firstName: body.firstName,
      lastName: body.lastName,
      email: body.email,
      preferredAlertTime: body.preferredAlertTime,
      alertTime_zone: body.alertTime_zone || "America/New_York",

// All new search criteria - exact match to Make.com parameters
      location: body.location,
      selectedState: body.selectedState,
      manualLocation: body.manualLocation,
      locationCoordinates: body.locationCoordinates || { lat: 0, lng: 0 },
      page: body.page || 0,
      output: body.output || "json",
      status: body.status || "forSale",
      sortSelection: body.sortSelection || "newest",
      listing_type: body.listing_type || "by_agent",

// Property types
      isSingleFamily: body.isSingleFamily || false,
      isMultiFamily: body.isMultiFamily || false,
      isApartment: body.isApartment || false,
      isCondo: body.isCondo || false,
      isManufactured: body.isManufactured || false,
      isTownhouse: body.isTownhouse || false,
      isLotLand: body.isLotLand || false,

// All other criteria fields - exact match to Make.com parameters
      doz: body.doz || "any",
      price_min: body.price_min || "",
      price_max: body.price_max || "",
      sqft_min: body.sqft_min || "",
      sqft_max: body.sqft_max || "",
      monthlyPayment_min: body.monthlyPayment_min || "",
      monthlyPayment_max: body.monthlyPayment_max || "",
      beds_min: body.beds_min || "any",
      beds_max: body.beds_max || "any",
      baths_min: body.baths_min || "any",
      baths_max: body.baths_max || "any",
      hoa_min: body.hoa_min || "",
      hoa_max: body.hoa_max || "",
      lotSize_min: body.lotSize_min || "",
      lotSize_max: body.lotSize_max || "",
      hasPool: body.hasPool || false,
      hasGarage: body.hasGarage || false,
      hasAirConditioning: body.hasAirConditioning || false,
      is3dHome: body.is3dHome || false,
      isNewConstruction: body.isNewConstruction || false,
      singleStory: body.singleStory || false,
      onlyPriceReduction: body.onlyPriceReduction || false,
      onlyWithPhotos: body.onlyWithPhotos || false,
      built_min: body.built_min || "",
      built_max: body.built_max || "",
      isForSaleByOwner: body.isForSaleByOwner || false,
      isForSaleByAgent: body.isForSaleByAgent || false,
      isCityView: body.isCityView || false,
      isWaterfront: body.isWaterfront || false,
      isMountainView: body.isMountainView || false,
      isWaterView: body.isWaterView || false,
      isParkView: body.isParkView || false,
      enableSchools: body.enableSchools || false,
      isPublicSchool: body.isPublicSchool || false,
      isPrivateSchool: body.isPrivateSchool || false,
      isElementarySchool: body.isElementarySchool || false,
      isMiddleSchool: body.isMiddleSchool || false,
      greatSchoolsRating_min: body.greatSchoolsRating_min || "any",
      onlyRentalAcceptsApplications: body.onlyRentalAcceptsApplications || false,
      onlyRentalIncomeRestricted: body.onlyRentalIncomeRestricted || false,
      isZillowOwnedOnly: body.isZillowOwnedOnly || false,
      isComingSoon: body.isComingSoon || false,
      isForSaleForeclosure: body.isForSaleForeclosure || false,
      isAuction: body.isAuction || false,
      onlyRentalCatsAllowed: body.onlyRentalCatsAllowed || false,
      onlyRentalPetsAllowed: body.onlyRentalPetsAllowed || false,
      onlyRentalSmallDogsAllowed: body.onlyRentalSmallDogsAllowed || false,
      onlyRentalLargeDogsAllowed: body.onlyRentalLargeDogsAllowed || false,
      parkingSpots_min: body.parkingSpots_min || "any",
      keywords: body.keywords || "",

// Legacy fields for backward compatibility
      propertyTypes: body.propertyTypes || [],
      minBedrooms: body.minBedrooms,
      minBathrooms: body.minBathrooms,
      minSquareFootage: body.minSquareFootage,
      maxSquareFootage: body.maxSquareFootage,
      listingStatus: body.listingStatus,
      listingType: body.listingType,
      sortBy: body.sortBy,
      targetStates: body.targetStates || [],
      targetCities: body.targetCities,
      avoidAreas: body.avoidAreas,
      minPrice: body.minPrice,
      maxPrice: body.maxPrice,
      budgetRange: body.budgetRange,
      financingType: body.financingType,
      investmentGoals: body.investmentGoals || [],
      timeframe: body.timeframe,
      experienceLevel: body.experienceLevel,
      amenities: body.amenities || [],
      dealBreakers: body.dealBreakers,
      additionalNotes: body.additionalNotes,
      communicationPreference: body.communicationPreference,

createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      lastAlertSent: null,
      sentAddresses: [],
    }

// Send to Make.com webhook - ENABLED for production
    console.log("🎯 Attempting to send data to Make.com webhook...")
    let webhookResult = { success: false, error: "Webhook not attempted" }

try {
      webhookResult = await sendToMakeWebhook(body)
      console.log("🔄 Webhook result:", webhookResult)
    } catch (webhookError) {
      console.error("⚠️ Webhook failed but continuing with local save:", webhookError)
      webhookResult = {
        success: false,
        error: webhookError instanceof Error ? webhookError.message : "Webhook failed",
      }
    }

console.log("✅ Criteria processed successfully:", criteriaData.id)

if (webhookResult.success) {
      console.log("🎉 Data successfully sent to Make.com for automation processing")
    } else {
      console.warn("⚠️ Make.com webhook failed, but local save succeeded:", webhookResult.error)
    }

// Return success response with the criteria data
    return NextResponse.json({
      success: true,
      message: "Property search criteria saved successfully!",
      criteria: criteriaData,
      webhook: webhookResult,
    })
  } catch (error) {
    console.error("❌ Criteria submission error:", error)
    return NextResponse.json({ error: "Failed to save criteria. Please try again." }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    // This endpoint could be used to retrieve saved criteria
    // For now, return empty array since we're using localStorage
    return NextResponse.json({
      success: true,
      criteria: [],
    })
  } catch (error) {
    console.error("❌ Error fetching criteria:", error)
    return NextResponse.json({ error: "Failed to fetch criteria." }, { status: 500 })
  }
}

export async function PUT(request: NextRequest) {
  try {
    const body = await request.json()

console.log("=== CRITERIA UPDATE ===")
    console.log("Updating criteria data:", body)

if (missingFields.length > 0) {
      return NextResponse.json({ error: `Missing required fields: ${missingFields.join(", ")}` }, { status: 400 })
    }

// Send to Make.com webhook for updates - ENABLED for production
    console.log("🎯 Attempting to send updated data to Make.com webhook...")
    let webhookResult = { success: false, error: "Webhook not attempted" }

try {
      webhookResult = await sendToMakeWebhook({
        ...body,
        // Preserve existing alert tracking data if available
        lastAlertSent: body.lastAlertSent || null,
        sentAddresses: body.sentAddresses || [],
      })
      console.log("🔄 Update webhook result:", webhookResult)
    } catch (webhookError) {
      console.error("⚠️ Webhook failed but continuing with local update:", webhookError)
      webhookResult = {
        success: false,
        error: webhookError instanceof Error ? webhookError.message : "Webhook failed",
      }
    }

// Update criteria object with all the form data
    const criteriaData = {
      id: body.id,
      title: body.criteriaTitle,
      firstName: body.firstName,
      lastName: body.lastName,
      email: body.email,
      preferredAlertTime: body.preferredAlertTime, // Include alert time preference
      propertyTypes: body.propertyTypes || [],
      minBedrooms: body.minBedrooms,
      minBathrooms: body.minBathrooms,
      minSquareFootage: body.minSquareFootage,
      maxSquareFootage: body.maxSquareFootage,
      listingStatus: body.listingStatus,
      listingType: body.listingType,
      sortBy: body.sortBy,
      targetStates: body.targetStates || [],
      targetCities: body.targetCities,
      avoidAreas: body.avoidAreas,
      minPrice: body.minPrice,
      maxPrice: body.maxPrice,
      budgetRange: body.budgetRange,
      financingType: body.financingType,
      investmentGoals: body.investmentGoals || [],
      timeframe: body.timeframe,
      experienceLevel: body.experienceLevel,
      amenities: body.amenities || [],
      dealBreakers: body.dealBreakers,
      additionalNotes: body.additionalNotes,
      communicationPreference: body.communicationPreference,
      updatedAt: new Date().toISOString(),
      // Preserve existing alert tracking data
      lastAlertSent: body.lastAlertSent || null,
      sentAddresses: body.sentAddresses || [],
    }

console.log("✅ Criteria updated successfully:", criteriaData.id)

if (webhookResult.success) {
      console.log("🎉 Updated data successfully sent to Make.com")
    } else {
      console.warn("⚠️ Make.com webhook failed, but local update succeeded")
    }

// Return success response with the updated criteria data
    return NextResponse.json({
      success: true,
      message: "Property search criteria updated successfully!",
      criteria: criteriaData,
      webhook: webhookResult,
    })
  } catch (error) {
    console.error("❌ Criteria update error:", error)
    return NextResponse.json({ error: "Failed to update criteria. Please try again." }, { status: 500 })
  }
}

// New endpoint to update alert history
export async function PATCH(request: NextRequest) {
  try {
    const body = await request.json()

if (!body.id) {
      return NextResponse.json({ error: "Missing criteria ID" }, { status: 400 })
    }

console.log("=== ALERT HISTORY UPDATE ===")
    console.log("Updating alert history for criteria:", body.id)

*Automatically synced with your [v0.dev](https://v0.dev) deployments*

[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/yPccgocgNxs)

## Overview

This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev).
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev).

## Deployment

Your project is live at:

**[https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai](https://vercel.com/zanebenoh-5016s-projects/v0-lokate-ai)**

## Build your app

Continue building your app on:

**[https://v0.dev/chat/projects/yPccgocgNxs](https://v0.dev/chat/projects/yPccgocgNxs)**

## How It Works

1. Create and modify your project using [v0.dev](https://v0.dev)
2. Deploy your chats from the v0 interface
3. Changes are automatically pushed to this repository
4. Vercel deploys the latest version from this repository
[V0_FILE]typescript:file="app/api/forgot-password/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

interface ResetToken {
  email: string
  token: string
  expiresAt: number
  createdAt: number
  used: boolean
}

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

if (!email) {
      return NextResponse.json({ error: "Email is required" }, { status: 400 })
    }

// Basic email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json({ error: "Please enter a valid email address" }, { status: 400 })
    }

// Check if email exists in our user database
    const emailExists = checkEmailExists(email)

// Always return the same message for security (prevent email enumeration)
    const message = "If the email has been used, a reset link will be sent"

// Only generate and send token if email exists
    if (emailExists) {
      // Generate a unique 16-character hex token
      const token = generateResetToken()

// Store token with 15-minute expiration
      const resetToken: ResetToken = {
        email,
        token,
        expiresAt: Date.now() + 15 * 60 * 1000, // 15 minutes
        createdAt: Date.now(),
        used: false,
      }

// Save token to storage
      saveResetToken(resetToken)

// Generate reset URL
      const resetUrl = `https://lokate.ai/reset-password?token=${token}`

// Send email with reset link
      await sendResetEmail(email, resetUrl, token)

console.log(`Password reset requested for: ${email}`)
      console.log(`Reset token generated: ${token}`)
      console.log(`Reset URL: ${resetUrl}`)
    } else {
      console.log(`Password reset requested for non-existent email: ${email}`)
    }

return NextResponse.json({ message }, { status: 200 })
  } catch (error) {
    console.error("Forgot password error:", error)
    return NextResponse.json({ error: "Failed to process request" }, { status: 500 })
  }
}

// Generate a 16-character hex token
function generateResetToken(): string {
  const chars = "0123456789abcdef"
  let token = ""
  for (let i = 0; i < 16; i++) {
    token += chars[Math.floor(Math.random() * chars.length)]
  }
  return token
}

// Check if email exists in user database
function checkEmailExists(email: string): boolean {
  try {
    // In a real application, this would query your database
    if (typeof window !== "undefined") {
      const existingUsersJson = localStorage.getItem("lokateUsers") || "[]"
      const existingUsers = JSON.parse(existingUsersJson)
      return existingUsers.some((user: any) => user.username === email)
    }
    return false
  } catch (error) {
    console.error("Error checking email existence:", error)
    return false
  }
}

// Save reset token to storage
function saveResetToken(resetToken: ResetToken): void {
  try {
    // In a real application, this would save to your database
    if (typeof window !== "undefined") {
      const existingTokens = JSON.parse(localStorage.getItem("resetTokens") || "[]")

// Remove any existing tokens for this email
      const filteredTokens = existingTokens.filter((token: ResetToken) => token.email !== resetToken.email)

// Add new token
      filteredTokens.push(resetToken)

localStorage.setItem("resetTokens", JSON.stringify(filteredTokens))
    }
  } catch (error) {
    console.error("Error saving reset token:", error)
  }
}

// Send reset email
async function sendResetEmail(email: string, resetUrl: string, token: string): Promise<void> {
  try {
    // In a real application, you would use your email service here
    // For demo purposes, we'll log the email content

const emailContent = `
Subject: Reset Your Lokate.ai Password

Dear User,

You have requested to reset your password for your Lokate.ai account.

Click the link below to reset your password:
${resetUrl}

This link will expire in 15 minutes for security reasons.

If you did not request this password reset, please ignore this email.

Best regards,
The Lokate.ai Team

---
This email was sent from admin@lokate.ai
Reset Token: ${token}
    `

console.log("=== EMAIL SENT ===")
    console.log(`From: admin@lokate.ai`)
    console.log(`To: ${email}`)
    console.log(`Content:`)
    console.log(emailContent)
    console.log("=== END EMAIL ===")

// Here you would integrate with your email service:
    // await emailService.send({
    //   from: 'admin@lokate.ai',
    //   to: email,
    //   subject: 'Reset Your Lokate.ai Password',
    //   html: emailTemplate
    // })
  } catch (error) {
    console.error("Error sending reset email:", error)
    throw error
  }
}
[V0_FILE]typescript:file="app/api/reset-password/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { passwordUtils } from "@/lib/password-utils"

interface ResetToken {
  email: string
  token: string
  expiresAt: number
  createdAt: number
  used: boolean
}

interface UserCredentials {
  username: string
  hashedPassword: string
}

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

if (!token || !password) {
      return NextResponse.json({ error: "Token and password are required" }, { status: 400 })
    }

if (password.length < 8) {
      return NextResponse.json({ error: "Password must be at least 8 characters long" }, { status: 400 })
    }

// Get stored reset tokens
    const storedTokens = getStoredResetTokens()

// Find the token and get the user's email
    const resetTokenIndex = storedTokens.findIndex((t: ResetToken) => t.token === token)
    const resetToken = storedTokens[resetTokenIndex]

if (!resetToken) {
      return NextResponse.json({ error: "Invalid reset token" }, { status: 400 })
    }

// Check if token has expired (15 minutes)
    if (Date.now() > resetToken.expiresAt) {
      return NextResponse.json({ error: "Reset token has expired" }, { status: 400 })
    }

// Check if token has already been used
    if (resetToken.used) {
      return NextResponse.json({ error: "Reset token has already been used" }, { status: 400 })
    }

console.log(`Processing password reset for user: ${resetToken.email}`)
    console.log(`Using token: ${token}`)

// Hash the new password using the same algorithm
    const newHashedPassword = await passwordUtils.hashPassword(password)

// Update user's password in database - the token tells us which user
    const updateSuccess = await updateUserPassword(resetToken.email, newHashedPassword)

if (!updateSuccess) {
      return NextResponse.json({ error: "Failed to update password. User not found." }, { status: 500 })
    }

// Mark token as used (can't be used again for any purpose)
    storedTokens[resetTokenIndex].used = true
    saveResetTokens(storedTokens)

console.log(`Password successfully reset for user: ${resetToken.email}`)
    console.log(`Token ${token} marked as used and can no longer be used`)

// Optionally, you could delete the token instead of marking as used:
    // deleteResetToken(token)

return NextResponse.json(
      {
        message: "Password reset successfully",
        email: resetToken.email,
      },
      { status: 200 },
    )
  } catch (error) {
    console.error("Password reset error:", error)
    return NextResponse.json({ error: "Failed to reset password" }, { status: 500 })
  }
}

// Helper function to get stored reset tokens
function getStoredResetTokens(): ResetToken[] {
  try {
    // In a real application, this would query your database
    if (typeof global !== "undefined") {
      return (global as any).resetTokens || []
    }
    return []
  } catch {
    return []
  }
}

// Helper function to save reset tokens
function saveResetTokens(tokens: ResetToken[]): void {
  try {
    // In a real application, this would update your database
    if (typeof global !== "undefined") {
      ;(global as any).resetTokens = tokens
    }
  } catch (error) {
    console.error("Failed to save reset tokens:", error)
  }
}

// Helper function to update user password in database
async function updateUserPassword(email: string, newHashedPassword: string): Promise<boolean> {
  try {
    // In a real application, this would update your database
    // The token identifies which user needs their password updated

console.log(`Updating password for user: ${email}`)
    console.log(`New hashed password: ${newHashedPassword.substring(0, 20)}...`)

// For demo purposes, we'll simulate database update
    if (typeof global !== "undefined") {
      // Get existing users
      const existingUsers = (global as any).lokateUsers || []

// Find and update the user
      const userIndex = existingUsers.findIndex((user: UserCredentials) => user.username === email)

if (userIndex === -1) {
        console.error(`User not found in database: ${email}`)
        return false
      }

// Replace old hash with new hash in database
      const oldHash = existingUsers[userIndex].hashedPassword
      existingUsers[userIndex].hashedPassword = newHashedPassword(
        // Save updated users back to database
        global as any,
      ).lokateUsers = existingUsers

console.log(`Password hash updated in database for user: ${email}`)
      console.log(`Old hash: ${oldHash.substring(0, 20)}...`)
      console.log(`New hash: ${newHashedPassword.substring(0, 20)}...`)

return true
    }
    return false
  } catch (error) {
    console.error("Error updating user password:", error)
    return false
  }
}

// Alternative: Delete token instead of marking as used
function deleteResetToken(token: string): void {
  try {
    if (typeof global !== "undefined") {
      const tokens = (global as any).resetTokens || []
      const filteredTokens = (tokens.filter((t: ResetToken) => t.token !== token)(global as any).resetTokens =
        filteredTokens)
      console.log(`Reset token ${token} deleted from database`)
    }
  } catch (error) {
    console.error("Error deleting reset token:", error)
  }
}
[V0_FILE]typescript:file="app/api/validate-reset-token/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

interface ResetToken {
  email: string
  token: string
  expiresAt: number
  createdAt: number
  used: boolean
}

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

if (!token) {
      return NextResponse.json({ valid: false, error: "Token is required" }, { status: 400 })
    }

// Get stored reset tokens from server-side storage
    const storedTokens = getStoredResetTokens()

// Find the token
    const resetToken = storedTokens.find((t: ResetToken) => t.token === token)

if (!resetToken) {
      return NextResponse.json({ valid: false, error: "Invalid reset token" }, { status: 400 })
    }

// Check if token has expired (15 minutes)
    if (Date.now() > resetToken.expiresAt) {
      return NextResponse.json({ valid: false, error: "Reset token has expired" }, { status: 400 })
    }

// Check if token has already been used
    if (resetToken.used) {
      return NextResponse.json({ valid: false, error: "Reset token has already been used" }, { status: 400 })
    }

console.log(`Valid reset token found for user: ${resetToken.email}`)

return NextResponse.json(
      {
        valid: true,
        email: resetToken.email,
        expiresAt: resetToken.expiresAt,
      },
      { status: 200 },
    )
  } catch (error) {
    console.error("Token validation error:", error)
    return NextResponse.json({ valid: false, error: "Failed to validate token" }, { status: 500 })
  }
}

// Helper function to get stored reset tokens
function getStoredResetTokens(): ResetToken[] {
  try {
    // In a real application, this would query your database
    // For demo purposes, we'll simulate server-side storage
    if (typeof global !== "undefined") {
      // Use global object to simulate server-side storage
      return (global as any).resetTokens || []
    }
    return []
  } catch {
    return []
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/debug/page.tsx" isMerged="true"
import { FirebaseDebug } from "@/components/firebase-debug"

export default function DebugPage() {
  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-8">Firebase Integration Debug</h1>
        <FirebaseDebug />

<div className="mt-8 text-center">
          <p className="text-gray-600">Use this page to verify your Firebase integration is working correctly.</p>
          <p className="text-sm text-gray-500 mt-2">
            Visit <code>/debug</code> to access this panel anytime.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/demo/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, ArrowLeft, Calendar, Users, Clock, CheckCircle } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"

export default function DemoPage() {
  const [isCalendlyLoaded, setIsCalendlyLoaded] = useState(false)

const loadCalendly = () => {
    setIsCalendlyLoaded(true)
    // In a real implementation, you would load the Calendly widget here
    // For this demo, we'll show a placeholder
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-6">
              {/* Back to home link */}
              <NavigationLink
                href="/"
                className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
              >
                <ArrowLeft className="h-4 w-4" />
                Back to home
              </NavigationLink>

<div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
                <div className="space-y-2">
                  <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                    Schedule Your Personal Demo
                  </h1>
                  <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                    See how Lokate.ai can transform your real estate business with a personalized demonstration
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Demo Benefits */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center mb-12">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">What You'll Learn</h2>
                <p className="max-w-[800px] text-muted-foreground md:text-lg mx-auto">
                  Our team will show you exactly how Lokate.ai can help your specific use case
                </p>
              </div>
            </div>

<div className="mx-auto grid max-w-5xl gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <Target className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Custom Setup</h3>
                <p className="text-center text-muted-foreground">
                  Learn how to configure alerts for your specific markets and investment criteria
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <Users className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Best Practices</h3>
                <p className="text-center text-muted-foreground">
                  Discover how top agents and investors are using Lokate.ai to close more deals
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <CheckCircle className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">ROI Analysis</h3>
                <p className="text-center text-muted-foreground">
                  See real examples of how Lokate.ai has helped professionals find profitable deals
                </p>
              </div>
            </div>
          </div>
        </section>

{/* Calendly Section */}
        <section className="w-full py-12 md:py-24 bg-muted">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-4xl">
              {!isCalendlyLoaded ? (
                <Card className="w-full">
                  <CardHeader className="text-center">
                    <CardTitle className="text-2xl font-bold">Book Your Demo</CardTitle>
                    <CardDescription>
                      Choose a time that works best for you. Our demos typically last 30 minutes.
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="grid gap-4 md:grid-cols-3">
                      <div className="flex items-center gap-3 p-4 rounded-lg bg-background border">
                        <Calendar className="h-8 w-8 text-primary" />
                        <div>
                          <h4 className="font-medium">30 Minutes</h4>
                          <p className="text-sm text-muted-foreground">Comprehensive demo</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 p-4 rounded-lg bg-background border">
                        <Users className="h-8 w-8 text-primary" />
                        <div>
                          <h4 className="font-medium">1-on-1 Session</h4>
                          <p className="text-sm text-muted-foreground">Personalized for you</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 p-4 rounded-lg bg-background border">
                        <Clock className="h-8 w-8 text-primary" />
                        <div>
                          <h4 className="font-medium">Flexible Times</h4>
                          <p className="text-sm text-muted-foreground">Available 7 days a week</p>
                        </div>
                      </div>
                    </div>

<div className="text-center">
                      <Button onClick={loadCalendly} size="lg" className="px-8">
                        <Calendar className="mr-2 h-5 w-5" />
                        Schedule Demo Now
                      </Button>
                    </div>

<div className="bg-background p-4 rounded-lg border">
                      <h4 className="font-medium mb-2">What to expect:</h4>
                      <ul className="space-y-2 text-sm text-muted-foreground">
                        <li className="flex items-start gap-2">
                          <CheckCircle className="h-4 w-4 mt-0.5 text-primary" />
                          <span>Live walkthrough of the Lokate.ai platform</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle className="h-4 w-4 mt-0.5 text-primary" />
                          <span>Custom setup based on your target markets</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle className="h-4 w-4 mt-0.5 text-primary" />
                          <span>Q&A session with our real estate experts</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle className="h-4 w-4 mt-0.5 text-primary" />
                          <span>Exclusive demo pricing and setup assistance</span>
                        </li>
                      </ul>
                    </div>
                  </CardContent>
                </Card>
              ) : (
                <Card className="w-full">
                  <CardHeader className="text-center">
                    <CardTitle className="text-2xl font-bold">Select Your Demo Time</CardTitle>
                    <CardDescription>Choose from available time slots below</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {/* Calendly Widget Placeholder */}
                    <div className="w-full h-[600px] bg-background border rounded-lg flex items-center justify-center">
                      <div className="text-center space-y-4">
                        <Calendar className="h-16 w-16 text-primary mx-auto" />
                        <div>
                          <h3 className="text-lg font-medium">Calendly Integration</h3>
                          <p className="text-muted-foreground">
                            In a real implementation, the Calendly widget would be embedded here.
                          </p>
                          <p className="text-sm text-muted-foreground mt-2">
                            You would integrate with Calendly's embed code or API to show available time slots.
                          </p>
                        </div>
                        <div className="space-y-2">
                          <Button variant="outline" className="w-full">
                            Monday, Jan 15 - 2:00 PM EST
                          </Button>
                          <Button variant="outline" className="w-full">
                            Tuesday, Jan 16 - 10:00 AM EST
                          </Button>
                          <Button variant="outline" className="w-full">
                            Wednesday, Jan 17 - 3:30 PM EST
                          </Button>
                          <Button className="w-full">Book Selected Time</Button>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </section>

{/* Contact Alternative */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">Prefer to Talk First?</h2>
                <p className="max-w-[600px] text-muted-foreground md:text-lg mx-auto">
                  Have questions before scheduling? Our team is here to help.
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-4">
                <NavigationLink href="/support">
                  <Button variant="outline" size="lg">
                    Contact Support
                  </Button>
                </NavigationLink>
                <NavigationLink href="/trial">
                  <Button size="lg">Start Free Trial Instead</Button>
                </NavigationLink>
              </div>
            </div>
          </div>
        </section>
      </main>

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, ArrowLeft, Mail, CheckCircle, AlertCircle } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"
import { useAuth } from "@/contexts/auth-context"
import { FirebaseError } from "firebase/app"

export default function ForgotPasswordPage() {
  const { resetPassword } = useAuth()
  const [email, setEmail] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [error, setError] = useState<string | null>(null)

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

try {
      await resetPassword(email)
      setIsSubmitted(true)
    } catch (error) {
      console.error("Password reset error:", error)

// Don't reveal if email exists or not for security reasons
      // Just show a generic message
      setIsSubmitted(true)

// For development purposes, log the actual error
      if (error instanceof FirebaseError) {
        console.error(`Firebase error code: ${error.code}`)
      }
    } finally {
      setIsLoading(false)
    }
  }

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Back to login link */}
            <NavigationLink
              href="/login"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
            >
              <ArrowLeft className="h-4 w-4" />
              Back to login
            </NavigationLink>

{/* Forgot Password Card */}
            <Card className="w-full max-w-md">
              <CardHeader className="space-y-1 text-center">
                <CardTitle className="text-2xl font-bold">Forgot Password</CardTitle>
                <CardDescription>
                  Enter your email address and we'll send you a link to reset your password
                </CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-center gap-2">
                    <AlertCircle className="h-4 w-4 text-red-600" />
                    <span className="text-sm text-red-600">{error}</span>
                  </div>
                )}

{isSubmitted ? (
                  <div className="text-center space-y-4">
                    <div className="flex justify-center">
                      <CheckCircle className="h-12 w-12 text-green-500" />
                    </div>
                    <h3 className="text-lg font-medium">Check your email</h3>
                    <p className="text-muted-foreground">
                      If an account exists for {email}, we've sent a password reset link to that email address.
                    </p>
                    <p className="text-sm text-muted-foreground">
                      The link will expire in 15 minutes. If you don't see the email, check your spam folder.
                    </p>
                    <div className="pt-4">
                      <NavigationLink href="/login">
                        <Button className="w-full">Return to Login</Button>
                      </NavigationLink>
                    </div>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                      <label htmlFor="email" className="text-sm font-medium flex items-center gap-2">
                        <Mail className="h-4 w-4" />
                        Email Address
                      </label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="Enter your email address"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                        className="w-full"
                      />
                    </div>

<Button type="submit" className="w-full" disabled={isLoading}>
                      {isLoading ? "Sending..." : "Send Reset Link"}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>

{/* Help text */}
            <div className="text-center text-sm text-muted-foreground max-w-md">
              <p>
                Remember your password?{" "}
                <NavigationLink href="/login" className="text-primary hover:underline">
                  Sign in
                </NavigationLink>
              </p>
            </div>
          </div>
        </div>
      </main>

@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: 221.2 83.2% 53.3%;
    --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: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --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: 224.3 76.5% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/guides/market-data/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Target, CheckCircle, AlertCircle, Info, BarChart, TrendingUp, LineChart, Map } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"

export default function MarketDataGuidePage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Guide Header */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                  Using Market Data Guide
                </h1>
                <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                  How to interpret and leverage the market data included with your property alerts
                </p>
              </div>
              <div className="w-full max-w-sm border-b pb-6" />
            </div>
          </div>
        </section>

{/* Guide Content */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-3xl space-y-12">
              {/* Introduction */}
              <div className="space-y-4">
                <h2 className="text-2xl font-bold tracking-tight">Understanding Lokate.ai's Market Data</h2>
                <p className="text-muted-foreground">
                  One of Lokate.ai's most powerful features is the comprehensive market data included with every
                  property alert. This guide will help you understand how to interpret and use this data to make more
                  informed property decisions.
                </p>
                <div className="rounded-lg border bg-muted/50 p-4 flex items-start gap-3">
                  <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                  <p className="text-sm">
                    Our market data is updated daily and draws from multiple sources including MLS data, public records,
                    economic indicators, and proprietary algorithms to provide you with the most accurate and timely
                    information.
                  </p>
                </div>
              </div>

{/* Property Valuation Metrics */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <BarChart className="h-6 w-6 text-primary" />
                  <h2 className="text-2xl font-bold tracking-tight">Property Valuation Metrics</h2>
                </div>
                <p className="text-muted-foreground">
                  Each property alert includes several key valuation metrics to help you assess whether a property is
                  fairly priced and represents a good value.
                </p>

<div className="space-y-6 mt-4">
                  {/* Comparative Market Analysis */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Comparative Market Analysis (CMA)</h3>
                    <p className="text-muted-foreground">
                      Our AI-generated CMA compares each property to recently sold similar properties in the same area,
                      adjusting for differences in features, condition, and location.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>How to use it:</strong> Look for the "Estimated Fair Value" figure and compare it to the
                        listing price. A listing price significantly above the estimated fair value may indicate an
                        overpriced property, while a price below may represent a potential deal.
                      </p>
                    </div>
                  </div>

{/* Price Per Square Foot Analysis */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Price Per Square Foot Analysis</h3>
                    <p className="text-muted-foreground">
                      We provide the property's price per square foot and compare it to the neighborhood average, recent
                      sales, and similar active listings.
                    </p>
                    <div className="rounded-lg border bg-blue-50 p-4 mt-2 flex items-start gap-3">
                      <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                      <p className="text-sm text-blue-800">
                        Price per square foot can vary significantly based on property size, quality of finishes, and
                        special features. Use this metric as one data point among many, not as the sole valuation
                        method.
                      </p>
                    </div>
                  </div>

{/* Value Score */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Value Score (1-100)</h3>
                    <p className="text-muted-foreground">
                      Our proprietary Value Score combines multiple factors to indicate how good a value the property
                      represents relative to the market.
                    </p>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
                      <div className="rounded-lg border p-3 bg-red-50">
                        <h4 className="font-bold text-red-800 text-center">1-40: Below Average Value</h4>
                        <p className="text-xs text-red-700 mt-1 text-center">
                          Property may be overpriced or have issues affecting value
                        </p>
                      </div>
                      <div className="rounded-lg border p-3 bg-amber-50">
                        <h4 className="font-bold text-amber-800 text-center">41-70: Fair Value</h4>
                        <p className="text-xs text-amber-700 mt-1 text-center">
                          Property is reasonably priced for its features and location
                        </p>
                      </div>
                      <div className="rounded-lg border p-3 bg-green-50">
                        <h4 className="font-bold text-green-800 text-center">71-100: Excellent Value</h4>
                        <p className="text-xs text-green-700 mt-1 text-center">
                          Property may represent a particularly good deal
                        </p>
                      </div>
                    </div>
                  </div>

{/* Investment Metrics */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Investment Metrics</h3>
                    <p className="text-muted-foreground">
                      For investors, we provide additional metrics to help assess a property's potential return on
                      investment.
                    </p>
                    <ul className="space-y-3 mt-3">
                      <li className="flex items-start gap-3">
                        <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="font-medium">Estimated Rental Income</p>
                          <p className="text-sm text-muted-foreground">
                            Based on comparable rental properties in the area
                          </p>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="font-medium">Cap Rate</p>
                          <p className="text-sm text-muted-foreground">
                            Net operating income divided by property value
                          </p>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="font-medium">Cash-on-Cash Return</p>
                          <p className="text-sm text-muted-foreground">
                            Estimated annual cash flow divided by total cash invested
                          </p>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="font-medium">1% Rule Analysis</p>
                          <p className="text-sm text-muted-foreground">
                            Whether monthly rent meets or exceeds 1% of purchase price
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

{/* Market Trends */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <TrendingUp className="h-6 w-6 text-primary" />
                  <h2 className="text-2xl font-bold tracking-tight">Market Trends</h2>
                </div>
                <p className="text-muted-foreground">
                  Understanding the direction of the market is crucial for making informed property decisions. Each
                  property alert includes relevant market trend data.
                </p>

<div className="space-y-6 mt-4">
                  {/* Price Trends */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Price Trends</h3>
                    <p className="text-muted-foreground">
                      We provide historical price data for both the specific property (if previously sold) and the
                      surrounding neighborhood.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>What to look for:</strong> Steady appreciation indicates a stable market, while rapid
                        price increases might suggest a potential bubble. Declining prices could indicate market
                        weakness but might also present buying opportunities.
                      </p>
                    </div>
                  </div>

{/* Days on Market */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Days on Market (DOM)</h3>
                    <p className="text-muted-foreground">
                      We track how long properties typically stay on the market in the area and compare it to the
                      specific property's DOM.
                    </p>
                    <div className="rounded-lg border bg-amber-50 p-4 mt-2 flex items-start gap-3">
                      <AlertCircle className="h-5 w-5 text-amber-500 mt-0.5" />
                      <p className="text-sm text-amber-800">
                        A property with significantly higher DOM than the neighborhood average might have issues or be
                        overpriced. However, this can also represent a negotiation opportunity, as the seller may be
                        more motivated.
                      </p>
                    </div>
                  </div>

{/* Inventory Levels */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Inventory Levels</h3>
                    <p className="text-muted-foreground">
                      We provide data on the current inventory of similar properties and how it compares to historical
                      averages.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>How to interpret:</strong> Low inventory typically indicates a seller's market with
                        potentially higher prices and faster sales. High inventory suggests a buyer's market with more
                        negotiating power and potentially better deals.
                      </p>
                    </div>
                  </div>

{/* Market Momentum */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Market Momentum</h3>
                    <p className="text-muted-foreground">
                      Our proprietary Market Momentum indicator combines multiple factors to predict the likely
                      direction of the market in the short term.
                    </p>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
                      <div className="rounded-lg border p-3 bg-blue-50">
                        <h4 className="font-bold text-blue-800 text-center">Cooling</h4>
                        <p className="text-xs text-blue-700 mt-1 text-center">
                          Market slowing, potentially favoring buyers
                        </p>
                      </div>
                      <div className="rounded-lg border p-3 bg-gray-50">
                        <h4 className="font-bold text-gray-800 text-center">Stable</h4>
                        <p className="text-xs text-gray-700 mt-1 text-center">Balanced market conditions</p>
                      </div>
                      <div className="rounded-lg border p-3 bg-red-50">
                        <h4 className="font-bold text-red-800 text-center">Heating Up</h4>
                        <p className="text-xs text-red-700 mt-1 text-center">
                          Market accelerating, potentially favoring sellers
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Neighborhood Analysis */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <Map className="h-6 w-6 text-primary" />
                  <h2 className="text-2xl font-bold tracking-tight">Neighborhood Analysis</h2>
                </div>
                <p className="text-muted-foreground">
                  The neighborhood often has as much impact on a property's value and desirability as the property
                  itself. Our neighborhood analysis helps you understand the area around each property.
                </p>

<div className="space-y-6 mt-4">
                  {/* School Ratings */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">School Ratings</h3>
                    <p className="text-muted-foreground">
                      We provide ratings for nearby schools, including elementary, middle, and high schools serving the
                      property's address.
                    </p>
                    <div className="rounded-lg border bg-blue-50 p-4 mt-2 flex items-start gap-3">
                      <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                      <p className="text-sm text-blue-800">
                        Even if you don't have school-age children, school quality significantly impacts property values
                        and resale potential. Properties in highly-rated school districts typically maintain value
                        better during market downturns.
                      </p>
                    </div>
                  </div>

{/* Crime Statistics */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Crime Statistics</h3>
                    <p className="text-muted-foreground">
                      We provide crime data for the neighborhood, including overall safety score and comparison to city
                      averages.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>How to use:</strong> Review both the overall crime rate and the types of crimes
                        reported. Some areas may have higher property crime but low violent crime, or vice versa.
                        Consider how this aligns with your personal safety priorities.
                      </p>
                    </div>
                  </div>

{/* Walkability & Amenities */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Walkability & Amenities</h3>
                    <p className="text-muted-foreground">
                      We analyze the proximity to amenities like grocery stores, restaurants, parks, and public
                      transportation.
                    </p>
                    <div className="rounded-lg border bg-green-50 p-4 mt-2 flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                      <p className="text-sm text-green-800">
                        Properties with high walkability scores and proximity to desirable amenities typically command
                        premium prices and experience stronger appreciation over time.
                      </p>
                    </div>
                  </div>

{/* Demographic Trends */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Demographic Trends</h3>
                    <p className="text-muted-foreground">
                      We provide data on population growth, income levels, age distribution, and other demographic
                      factors that can impact property values.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>What to look for:</strong> Growing population, rising income levels, and an influx of
                        younger residents often indicate neighborhoods on the upswing. Declining population or stagnant
                        income growth might suggest caution.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

{/* Future Value Projections */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <LineChart className="h-6 w-6 text-primary" />
                  <h2 className="text-2xl font-bold tracking-tight">Future Value Projections</h2>
                </div>
                <p className="text-muted-foreground">
                  While no one can predict the future with certainty, our AI models use historical data and current
                  trends to provide educated projections about a property's potential future value.
                </p>

<div className="space-y-6 mt-4">
                  {/* Appreciation Forecast */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Appreciation Forecast</h3>
                    <p className="text-muted-foreground">
                      Our models project potential appreciation rates for the next 1, 3, and 5 years based on historical
                      trends, economic indicators, and neighborhood development plans.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>Important note:</strong> These are projections based on current data and should not be
                        considered guarantees. Real estate markets can be influenced by many unpredictable factors
                        including economic changes, natural disasters, and policy shifts.
                      </p>
                    </div>
                  </div>

{/* Risk Assessment */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Risk Assessment</h3>
                    <p className="text-muted-foreground">
                      We analyze various risk factors that could impact the property's future value, including market
                      volatility, economic sensitivity, and local development risks.
                    </p>
                    <div className="rounded-lg border bg-amber-50 p-4 mt-2 flex items-start gap-3">
                      <AlertCircle className="h-5 w-5 text-amber-500 mt-0.5" />
                      <p className="text-sm text-amber-800">
                        Higher risk doesn't necessarily mean you should avoid a property, but it does mean you should
                        factor potential volatility into your decision-making process and ensure you're comfortable with
                        the level of uncertainty.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

{/* Conclusion */}
              <div className="space-y-4">
                <h2 className="text-2xl font-bold tracking-tight">Making the Most of Market Data</h2>
                <p className="text-muted-foreground">
                  The market data provided with each Lokate.ai property alert is designed to give you a comprehensive
                  understanding of both the property and its context within the broader market. Remember that no single
                  metric should drive your decision - instead, consider all the data points together to form a complete
                  picture.
                </p>
                <div className="rounded-lg border bg-green-50 p-4 flex items-start gap-3">
                  <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                  <p className="text-sm text-green-800">
                    <strong>Pro tip:</strong> Use the market data to identify properties that warrant further
                    investigation, but always conduct your own due diligence including physical inspections, title
                    searches, and consultation with local real estate professionals before making any purchase
                    decisions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

{/* Footer */}
      <footer className="w-full py-6 bg-muted">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-center gap-4 md:flex-row md:justify-between">
            <div className="flex items-center gap-2">
              <Target className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">© 2025 Lokate. All Rights Reserved.</span>
            </div>
            <div className="flex items-center gap-4">
              <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
                Support
              </NavigationLink>
              <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
                About
              </NavigationLink>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/registration/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, Eye, EyeOff, User, Mail, Phone, Lock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"
import { PasswordStrengthIndicator } from "@/components/password-strength-indicator"
import { useAuth } from "@/contexts/auth-context"
import { useUsernameValidation } from "@/hooks/use-username-validation"
import {
  validateEmail,
  validatePhone,
  validateUsername,
  validatePassword,
  formatPhoneNumber,
} from "@/lib/form-validation"

interface FormData {
  fullName: string
  email: string
  phone: string
  username: string
  password: string
  confirmPassword: string
}

interface FormErrors {
  fullName?: string
  email?: string
  phone?: string
  username?: string
  password?: string
  confirmPassword?: string
  general?: string
}

export default function RegistrationPage() {
  const router = useRouter()
  const { signup, firebaseReady } = useAuth()

const [formData, setFormData] = useState<FormData>({
    fullName: "",
    email: "",
    phone: "",
    username: "",
    password: "",
    confirmPassword: "",
  })

const [errors, setErrors] = useState<FormErrors>({})
  const [isLoading, setIsLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [passwordStrength, setPasswordStrength] = useState(0)
  const [isSuccess, setIsSuccess] = useState(false)

// Username validation hook
  const {
    isChecking: isCheckingUsername,
    isAvailable: isUsernameAvailable,
    error: usernameError,
  } = useUsernameValidation(formData.username)

// Check if user came from payment completion
  useEffect(() => {
    const paymentCompleted = localStorage.getItem("paymentCompleted")
    if (!paymentCompleted) {
      router.push("/trial")
    }
  }, [router])

// Validate form fields in real-time
  useEffect(() => {
    const newErrors: FormErrors = {}

// Full name validation
    if (formData.fullName && formData.fullName.length < 2) {
      newErrors.fullName = "Full name must be at least 2 characters"
    }

// Email validation
    const emailError = validateEmail(formData.email)
    if (emailError) newErrors.email = emailError

// Phone validation
    const phoneError = validatePhone(formData.phone)
    if (phoneError && formData.phone) newErrors.phone = phoneError

// Username validation
    const usernameValidationError = validateUsername(formData.username)
    if (usernameValidationError) {
      newErrors.username = usernameValidationError
    } else if (usernameError) {
      newErrors.username = usernameError
    }

// Password validation
    const passwordValidation = validatePassword(formData.password)
    if (passwordValidation.error) newErrors.password = passwordValidation.error
    setPasswordStrength(passwordValidation.strength)

// Confirm password validation
    if (formData.confirmPassword && formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match"
    }

setErrors(newErrors)
  }, [formData, usernameError])

const handleInputChange = (field: keyof FormData, value: string) => {
    if (field === "phone") {
      value = formatPhoneNumber(value)
    }

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

const validateForm = (): boolean => {
    const newErrors: FormErrors = {}

if (!formData.fullName) newErrors.fullName = "Full name is required"
    if (!formData.email) newErrors.email = "Email is required"
    if (!formData.phone) newErrors.phone = "Phone number is required"
    if (!formData.username) newErrors.username = "Username is required"
    if (!formData.password) newErrors.password = "Password is required"
    if (!formData.confirmPassword) newErrors.confirmPassword = "Please confirm your password"

// Check existing validation errors
    Object.keys(errors).forEach((key) => {
      if (errors[key as keyof FormErrors]) {
        newErrors[key as keyof FormErrors] = errors[key as keyof FormErrors]
      }
    })

if (!isUsernameAvailable && formData.username) {
      newErrors.username = "Username is not available"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

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

if (!validateForm()) return
    if (!firebaseReady) {
      setErrors({ general: "Authentication service is not ready. Please try again." })
      return
    }

setIsLoading(true)
    setErrors({})

try {
      // Create user account with Firebase Auth and store profile data
      await signup(formData.email, formData.password, {
        fullName: formData.fullName,
        phone: formData.phone,
        username: formData.username,
        registrationDate: new Date().toISOString(),
        accountType: "trial",
        paymentCompleted: true,
      })

// Clear payment completion flag
      localStorage.removeItem("paymentCompleted")

setIsSuccess(true)

// Redirect to dashboard after success
      setTimeout(() => {
        router.push("/dashboard")
      }, 2000)
    } catch (error: any) {
      console.error("Registration error:", error)

let errorMessage = "Registration failed. Please try again."

if (error.code === "auth/email-already-in-use") {
        errorMessage = "An account with this email already exists."
      } else if (error.code === "auth/weak-password") {
        errorMessage = "Password is too weak."
      } else if (error.code === "auth/invalid-email") {
        errorMessage = "Invalid email address."
      }

setErrors({ general: errorMessage })
    } finally {
      setIsLoading(false)
    }
  }

if (isSuccess) {
    return (
      <div className="flex min-h-screen flex-col">
        <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="container flex h-16 items-center justify-between">
            <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
              <Target className="h-6 w-6 text-primary" />
              <span className="text-xl font-bold">Lokate.ai</span>
            </NavigationLink>
          </div>
        </header>

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
          <Card className="w-full max-w-md">
            <CardHeader className="text-center">
              <div className="flex justify-center mb-4">
                <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center">
                  <CheckCircle className="h-8 w-8 text-green-600" />
                </div>
              </div>
              <CardTitle className="text-2xl font-bold">Welcome to Lokate.ai!</CardTitle>
              <CardDescription>
                Your account has been created successfully. Redirecting to your dashboard...
              </CardDescription>
            </CardHeader>
          </Card>
        </main>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
          </nav>
        </div>
      </header>

{/* Registration Card */}
            <Card className="w-full max-w-lg">
              <CardHeader className="space-y-1 text-center">
                <CardTitle className="text-2xl font-bold">Create Your Account</CardTitle>
                <CardDescription>Complete your registration to start using Lokate.ai</CardDescription>
              </CardHeader>
              <CardContent>
                {errors.general && (
                  <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-center gap-2">
                    <AlertCircle className="h-4 w-4 text-red-600" />
                    <span className="text-sm text-red-600">{errors.general}</span>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-4">
                  {/* Full Name */}
                  <div className="space-y-2">
                    <label htmlFor="fullName" className="text-sm font-medium flex items-center gap-2">
                      <User className="h-4 w-4" />
                      Full Name *
                    </label>
                    <Input
                      id="fullName"
                      type="text"
                      placeholder="Enter your full name"
                      value={formData.fullName}
                      onChange={(e) => handleInputChange("fullName", e.target.value)}
                      className={errors.fullName ? "border-red-500" : ""}
                      required
                    />
                    {errors.fullName && <p className="text-sm text-red-600">{errors.fullName}</p>}
                  </div>

{/* Email */}
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium flex items-center gap-2">
                      <Mail className="h-4 w-4" />
                      Email Address *
                    </label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="Enter your email address"
                      value={formData.email}
                      onChange={(e) => handleInputChange("email", e.target.value)}
                      className={errors.email ? "border-red-500" : ""}
                      required
                    />
                    {errors.email && <p className="text-sm text-red-600">{errors.email}</p>}
                  </div>

{/* Phone Number */}
                  <div className="space-y-2">
                    <label htmlFor="phone" className="text-sm font-medium flex items-center gap-2">
                      <Phone className="h-4 w-4" />
                      Phone Number *
                    </label>
                    <Input
                      id="phone"
                      type="tel"
                      placeholder="(555) 123-4567"
                      value={formData.phone}
                      onChange={(e) => handleInputChange("phone", e.target.value)}
                      className={errors.phone ? "border-red-500" : ""}
                      maxLength={14}
                      required
                    />
                    {errors.phone && <p className="text-sm text-red-600">{errors.phone}</p>}
                  </div>

{/* Username */}
                  <div className="space-y-2">
                    <label htmlFor="username" className="text-sm font-medium flex items-center gap-2">
                      <User className="h-4 w-4" />
                      Username *
                    </label>
                    <div className="relative">
                      <Input
                        id="username"
                        type="text"
                        placeholder="Choose a unique username"
                        value={formData.username}
                        onChange={(e) => handleInputChange("username", e.target.value)}
                        className={
                          errors.username ? "border-red-500" : isUsernameAvailable === true ? "border-green-500" : ""
                        }
                        required
                      />
                      {isCheckingUsername && (
                        <Loader2 className="absolute right-3 top-3 h-4 w-4 animate-spin text-muted-foreground" />
                      )}
                      {!isCheckingUsername && isUsernameAvailable === true && (
                        <CheckCircle className="absolute right-3 top-3 h-4 w-4 text-green-600" />
                      )}
                    </div>
                    {errors.username && <p className="text-sm text-red-600">{errors.username}</p>}
                    {!errors.username && isUsernameAvailable === true && (
                      <p className="text-sm text-green-600">Username is available!</p>
                    )}
                  </div>

{/* Password */}
                  <div className="space-y-2">
                    <label htmlFor="password" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      Password *
                    </label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="Create a strong password"
                        value={formData.password}
                        onChange={(e) => handleInputChange("password", e.target.value)}
                        className={errors.password ? "border-red-500" : ""}
                        required
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                        <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                      </Button>
                    </div>
                    <PasswordStrengthIndicator strength={passwordStrength} password={formData.password} />
                    {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
                  </div>

{/* Confirm Password */}
                  <div className="space-y-2">
                    <label htmlFor="confirmPassword" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      Confirm Password *
                    </label>
                    <div className="relative">
                      <Input
                        id="confirmPassword"
                        type={showConfirmPassword ? "text" : "password"}
                        placeholder="Confirm your password"
                        value={formData.confirmPassword}
                        onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                        className={errors.confirmPassword ? "border-red-500" : ""}
                        required
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                      >
                        {showConfirmPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                        <span className="sr-only">{showConfirmPassword ? "Hide password" : "Show password"}</span>
                      </Button>
                    </div>
                    {errors.confirmPassword && <p className="text-sm text-red-600">{errors.confirmPassword}</p>}
                  </div>

{/* Submit Button */}
                  <Button
                    type="submit"
                    className="w-full h-12 text-lg"
                    disabled={isLoading || !firebaseReady || Object.keys(errors).length > 0}
                  >
                    {isLoading ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Creating Account...
                      </>
                    ) : (
                      "Create Account"
                    )}
                  </Button>

<div className="text-xs text-muted-foreground text-center">
                    By creating an account, you agree to our{" "}
                    <NavigationLink href="/terms" className="text-primary hover:underline">
                      Terms of Service
                    </NavigationLink>{" "}
                    and{" "}
                    <NavigationLink href="/privacy" className="text-primary hover:underline">
                      Privacy Policy
                    </NavigationLink>
                  </div>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, Eye, EyeOff, Lock, CheckCircle, AlertCircle, Clock } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"

export default function ResetPasswordPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [token, setToken] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [isValidToken, setIsValidToken] = useState<boolean | null>(null)
  const [isSuccess, setIsSuccess] = useState(false)
  const [userEmail, setUserEmail] = useState("")

useEffect(() => {
    const tokenParam = searchParams.get("token")
    if (tokenParam) {
      setToken(tokenParam)
      validateToken(tokenParam)
    } else {
      setError("No reset token provided")
      setIsValidToken(false)
    }
  }, [searchParams])

const validateToken = async (tokenToValidate: string) => {
    try {
      const response = await fetch("/api/validate-reset-token", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ token: tokenToValidate }),
      })

const data = await response.json()

if (response.ok && data.valid) {
        setIsValidToken(true)
        setUserEmail(data.email) // Store the user's email from the token
        console.log(`Valid reset token for user: ${data.email}`)
      } else {
        setIsValidToken(false)
        setError(data.error || "Invalid or expired reset token")
      }
    } catch (error) {
      console.error("Token validation error:", error)
      setIsValidToken(false)
      setError("Failed to validate reset token")
    }
  }

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

if (password.length < 8) {
      setError("Password must be at least 8 characters long")
      return
    }

if (password !== confirmPassword) {
      setError("Passwords do not match")
      return
    }

setIsLoading(true)
    setError("")

try {
      console.log(`Resetting password for user: ${userEmail}`)
      console.log(`Using token: ${token}`)

const response = await fetch("/api/reset-password", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          token, // This tells the server which user is requesting the reset
          password,
        }),
      })

const data = await response.json()

if (response.ok) {
        console.log(`Password successfully reset for: ${data.email}`)
        setIsSuccess(true)
      } else {
        setError(data.error || "Failed to reset password")
      }
    } catch (error) {
      console.error("Password reset error:", error)
      setError("An error occurred while resetting your password")
    } finally {
      setIsLoading(false)
    }
  }

// Success state
  if (isSuccess) {
    return (
      <div className="flex min-h-screen flex-col">
        {/* Header/Navigation */}
        <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="container flex h-16 items-center justify-between">
            <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
              <Target className="h-6 w-6 text-primary" />
              <span className="text-xl font-bold">Lokate.ai</span>
            </NavigationLink>
          </div>
        </header>

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-6">
              <Card className="w-full max-w-md">
                <CardHeader className="space-y-1 text-center">
                  <div className="flex justify-center mb-4">
                    <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center">
                      <CheckCircle className="h-8 w-8 text-green-600" />
                    </div>
                  </div>
                  <CardTitle className="text-2xl font-bold">Password Reset Successful</CardTitle>
                  <CardDescription>Your password has been successfully updated.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-center text-muted-foreground">You can now log in with your new password.</p>
                  <NavigationLink href="/login">
                    <Button className="w-full">Continue to Login</Button>
                  </NavigationLink>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>
    )
  }

// Invalid token state
  if (isValidToken === false) {
    return (
      <div className="flex min-h-screen flex-col">
        {/* Header/Navigation */}
        <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="container flex h-16 items-center justify-between">
            <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
              <Target className="h-6 w-6 text-primary" />
              <span className="text-xl font-bold">Lokate.ai</span>
            </NavigationLink>
          </div>
        </header>

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-6">
              <Card className="w-full max-w-md">
                <CardHeader className="space-y-1 text-center">
                  <div className="flex justify-center mb-4">
                    <div className="h-16 w-16 rounded-full bg-red-100 flex items-center justify-center">
                      <Clock className="h-8 w-8 text-red-600" />
                    </div>
                  </div>
                  <CardTitle className="text-2xl font-bold">Invalid Reset Link</CardTitle>
                  <CardDescription>This password reset link is invalid or has expired.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="text-center space-y-2">
                    <p className="text-sm text-muted-foreground">{error}</p>
                    <p className="text-sm text-muted-foreground">
                      Reset links expire after 15 minutes for security reasons.
                    </p>
                  </div>
                  <div className="flex flex-col gap-2">
                    <NavigationLink href="/forgot-password">
                      <Button className="w-full">Request New Reset Link</Button>
                    </NavigationLink>
                    <NavigationLink href="/login">
                      <Button variant="outline" className="w-full">
                        Back to Login
                      </Button>
                    </NavigationLink>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>
    )
  }

// Loading state
  if (isValidToken === null) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Validating reset token...</p>
        </div>
      </div>
    )
  }

// Valid token - show reset form
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
        </div>
      </header>

<form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <label htmlFor="password" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      New Password
                    </label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="Enter your new password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                        className="w-full pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                      </Button>
                    </div>
                    <p className="text-xs text-muted-foreground">Password must be at least 8 characters long</p>
                  </div>

<div className="space-y-2">
                    <label htmlFor="confirmPassword" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      Confirm New Password
                    </label>
                    <div className="relative">
                      <Input
                        id="confirmPassword"
                        type={showConfirmPassword ? "text" : "password"}
                        placeholder="Confirm your new password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        required
                        className="w-full pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                      >
                        {showConfirmPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                      </Button>
                    </div>
                  </div>

<div className="text-xs text-muted-foreground bg-amber-50 p-3 rounded border">
                    <strong>Security Note:</strong> This reset link expires in 15 minutes and can only be used once.
                  </div>

<Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Resetting Password..." : "Reset Password"}
                  </Button>
                </form>

<div className="mt-6 text-center">
                  <p className="text-sm text-muted-foreground">
                    Remember your password?{" "}
                    <NavigationLink href="/login" className="text-primary hover:underline font-medium">
                      Back to login
                    </NavigationLink>
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/trial/confirmation/page.tsx" isMerged="true"
"use client"

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

export default function ConfirmationPage() {
  const router = useRouter()
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [subscriptionId, setSubscriptionId] = useState("")
  const [trialEndDate, setTrialEndDate] = useState("")

useEffect(() => {
    // Get the stored information
    const storedUsername = localStorage.getItem("trialUsername")
    const storedEmail = localStorage.getItem("trialEmail")
    const storedSubscriptionId = localStorage.getItem("subscriptionId")
    const storedTrialEnd = localStorage.getItem("trialEnd")

if (storedUsername) {
      setUsername(storedUsername)
    }

if (storedEmail) {
      setEmail(storedEmail)
    }

if (storedSubscriptionId) {
      setSubscriptionId(storedSubscriptionId)
    }

if (storedTrialEnd) {
      // Format the trial end date
      const date = new Date(Number.parseInt(storedTrialEnd) * 1000)
      setTrialEndDate(date.toLocaleDateString())
    }
  }, [])

const handleProceedToDashboard = () => {
    router.push("/dashboard")
  }

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Success Card */}
            <Card className="w-full max-w-md">
              <CardHeader className="space-y-1 text-center">
                <div className="flex justify-center mb-4">
                  <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center">
                    <CheckCircle className="h-8 w-8 text-green-600" />
                  </div>
                </div>
                <CardTitle className="text-2xl font-bold">Trial Successfully Activated!</CardTitle>
                <CardDescription>Your 7-day free trial has been successfully activated.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="bg-muted p-4 rounded-lg">
                    <p className="text-sm">
                      <strong>Username:</strong> {username}
                    </p>
                    <p className="text-sm">
                      <strong>Email:</strong> {email}
                    </p>
                    {subscriptionId && (
                      <p className="text-sm">
                        <strong>Subscription ID:</strong> {subscriptionId}
                      </p>
                    )}
                    {trialEndDate && (
                      <p className="text-sm">
                        <strong>Trial End Date:</strong> {trialEndDate}
                      </p>
                    )}
                  </div>

<h3 className="text-sm font-medium mt-4">What's Next?</h3>
                  <ul className="space-y-2">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="h-4 w-4 mt-0.5 text-green-600" />
                      <span className="text-sm">Set up your property search criteria</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="h-4 w-4 mt-0.5 text-green-600" />
                      <span className="text-sm">Customize your daily alert preferences</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="h-4 w-4 mt-0.5 text-green-600" />
                      <span className="text-sm">Explore the dashboard and available features</span>
                    </li>
                  </ul>
                </div>

<Button onClick={handleProceedToDashboard} className="w-full h-14 text-lg">
                  Proceed to Dashboard
                  <ArrowRight className="ml-3 h-5 w-5" />
                </Button>

<div className="text-center text-sm text-muted-foreground">
                  <p>
                    Need help getting started?{" "}
                    <NavigationLink href="/support" className="text-primary hover:underline">
                      Visit our support center
                    </NavigationLink>
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

import type React from "react"

export default function CreateAccountPage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [passwordError, setPasswordError] = useState("")

useEffect(() => {
    // Get the email from localStorage
    const storedEmail = localStorage.getItem("trialEmail")
    const paymentMethodId = localStorage.getItem("paymentMethodId")

if (storedEmail && paymentMethodId) {
      setEmail(storedEmail)
    } else {
      // If no email or payment method is found, redirect back to the trial page
      router.push("/trial")
    }
  }, [router])

const validatePassword = () => {
    if (password.length < 8) {
      setPasswordError("Password must be at least 8 characters long")
      return false
    }

if (password !== confirmPassword) {
      setPasswordError("Passwords do not match")
      return false
    }

setPasswordError("")
    return true
  }

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

if (!validatePassword()) {
      return
    }

setIsLoading(true)
    setError("")

try {
      const paymentMethodId = localStorage.getItem("paymentMethodId")

// Register the user with hashed password
      const registrationSuccess = await authUtils.registerUser(username, password)

if (!registrationSuccess) {
        throw new Error("Username already exists")
      }

// Create the subscription with Stripe
      const response = await fetch("/api/create-subscription", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          username,
          password: "HASHED_PASSWORD_NOT_SENT", // We don't send the actual password to the server
          paymentMethodId,
        }),
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Account creation failed")
      }

// Set user as logged in
      authUtils.setLoggedIn(username)

// Store the username and subscription info for the confirmation page
      localStorage.setItem("trialUsername", username)
      localStorage.setItem("subscriptionId", data.subscriptionId)

// Navigate to the confirmation page
      router.push("/trial/confirmation")
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Back to previous step link */}
            <NavigationLink
              href="/trial"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
            >
              <ArrowLeft className="h-4 w-4" />
              Back to payment information
            </NavigationLink>

{/* Progress indicator */}
            <div className="flex items-center gap-2 mb-4">
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-medium">
                ✓
              </div>
              <div className="h-1 w-12 bg-primary"></div>
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-foreground text-sm font-medium">
                2
              </div>
              <div className="h-1 w-12 bg-muted"></div>
              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-muted text-muted-foreground text-sm font-medium">
                3
              </div>
            </div>

{/* Create Account Card */}
            <Card className="w-full max-w-md">
              <CardHeader className="space-y-1 text-center">
                <CardTitle className="text-2xl font-bold">Create Your Account</CardTitle>
                <CardDescription>Set up your login credentials for Lokate.ai</CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-center gap-2">
                    <AlertCircle className="h-4 w-4 text-red-600" />
                    <span className="text-sm text-red-600">{error}</span>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium">
                      Email
                    </label>
                    <Input id="email" type="email" value={email} disabled className="w-full bg-muted" />
                    <p className="text-xs text-muted-foreground">Email address from previous step</p>
                  </div>

<div className="space-y-2">
                    <label htmlFor="username" className="text-sm font-medium flex items-center gap-2">
                      <User className="h-4 w-4" />
                      Username
                    </label>
                    <Input
                      id="username"
                      type="text"
                      placeholder="Choose a username"
                      value={username}
                      onChange={(e) => setUsername(e.target.value)}
                      required
                      className="w-full"
                    />
                  </div>

<div className="space-y-2">
                    <label htmlFor="password" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      Password
                    </label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="Create a password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                        className="w-full pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                        <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                      </Button>
                    </div>
                    <p className="text-xs text-muted-foreground">Password must be at least 8 characters long</p>
                  </div>

<div className="space-y-2">
                    <label htmlFor="confirmPassword" className="text-sm font-medium flex items-center gap-2">
                      <Lock className="h-4 w-4" />
                      Confirm Password
                    </label>
                    <div className="relative">
                      <Input
                        id="confirmPassword"
                        type={showConfirmPassword ? "text" : "password"}
                        placeholder="Confirm your password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        required
                        className="w-full pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                      >
                        {showConfirmPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                        <span className="sr-only">{showConfirmPassword ? "Hide password" : "Show password"}</span>
                      </Button>
                    </div>
                  </div>

{passwordError && <div className="text-sm text-red-500">{passwordError}</div>}

<div className="text-xs text-muted-foreground bg-blue-50 p-3 rounded border">
                    <strong>Security Note:</strong> Your password will be securely hashed before storage. We never store
                    your actual password, only a secure, irreversible mathematical representation of it.
                  </div>

<Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Creating Account..." : "Create Account & Start Trial"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { MessageCircle, X, Send, Bot, User } from "lucide-react"

type Message = {
  role: "user" | "assistant"
  content: string
}

export function AiChatSupport() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      role: "assistant",
      content: "👋 Hi there! I'm your Lokate.ai assistant. How can I help you today?",
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Auto-scroll to bottom of messages
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleSendMessage = () => {
    if (!input.trim()) return

// Add user message
    const userMessage: Message = {
      role: "user",
      content: input,
    }
    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

// Simulate AI response after a delay
    setTimeout(() => {
      const responses = [
        "I'd be happy to help you with that! Could you provide more details?",
        "That's a great question about Lokate.ai. Our platform helps real estate professionals find properties that match their exact criteria.",
        "You can customize your alerts by going to your account settings and selecting 'Alert Preferences'.",
        "Our free trial lasts for 7 days and includes all features of our Professional plan.",
        "If you need more specific help, you can contact our support team using the form at the bottom of this page.",
      ]

const aiMessage: Message = {
        role: "assistant",
        content: responses[Math.floor(Math.random() * responses.length)],
      }

setMessages((prev) => [...prev, aiMessage])
      setIsLoading(false)
    }, 1000)
  }

return (
    <>
      {/* Chat button */}
      <Button onClick={() => setIsOpen(true)} className="fixed bottom-4 right-4 rounded-full h-14 w-14 p-0 shadow-lg">
        <MessageCircle className="h-6 w-6" />
      </Button>

{/* Chat window */}
      {isOpen && (
        <div className="fixed bottom-4 right-4 w-80 sm:w-96 h-[500px] bg-background border rounded-lg shadow-xl flex flex-col z-50">
          {/* Chat header */}
          <div className="flex items-center justify-between p-4 border-b bg-primary text-primary-foreground rounded-t-lg">
            <div className="flex items-center gap-2">
              <Bot className="h-5 w-5" />
              <h3 className="font-medium">Lokate.ai Support</h3>
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setIsOpen(false)}
              className="h-8 w-8 rounded-full hover:bg-primary-foreground/20"
            >
              <X className="h-4 w-4" />
            </Button>
          </div>

{/* Chat messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.map((message, index) => (
              <div key={index} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
                <div
                  className={`max-w-[80%] rounded-lg p-3 ${
                    message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
                  }`}
                >
                  <div className="flex items-center gap-2 mb-1">
                    {message.role === "assistant" ? <Bot className="h-4 w-4" /> : <User className="h-4 w-4" />}
                    <span className="text-xs font-medium">
                      {message.role === "assistant" ? "Lokate Assistant" : "You"}
                    </span>
                  </div>
                  <p className="text-sm">{message.content}</p>
                </div>
              </div>
            ))}
            {isLoading && (
              <div className="flex justify-start">
                <div className="max-w-[80%] rounded-lg p-3 bg-muted">
                  <div className="flex items-center gap-2">
                    <Bot className="h-4 w-4" />
                    <div className="flex gap-1">
                      <span
                        className="h-2 w-2 bg-primary/60 rounded-full animate-bounce"
                        style={{ animationDelay: "0ms" }}
                      ></span>
                      <span
                        className="h-2 w-2 bg-primary/60 rounded-full animate-bounce"
                        style={{ animationDelay: "150ms" }}
                      ></span>
                      <span
                        className="h-2 w-2 bg-primary/60 rounded-full animate-bounce"
                        style={{ animationDelay: "300ms" }}
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

{/* Chat input */}
          <div className="p-4 border-t">
            <form
              onSubmit={(e) => {
                e.preventDefault()
                handleSendMessage()
              }}
              className="flex gap-2"
            >
              <Input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Type your message..."
                className="flex-1"
              />
              <Button type="submit" size="icon" disabled={!input.trim() || isLoading}>
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/firebase-debug.tsx" isMerged="true"
"use client"

import { useAuth } from "@/contexts/auth-context"
import { validateFirebaseConfig } from "@/lib/firebase-config"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useState } from "react"

export function FirebaseDebug() {
  const { firebaseReady, currentUser, testFirebase } = useAuth()
  const [testResult, setTestResult] = useState<any>(null)
  const [testing, setTesting] = useState(false)

const handleTestConnection = async () => {
    setTesting(true)
    try {
      const result = await testFirebase()
      setTestResult(result)
    } catch (error) {
      setTestResult({ success: false, error: error.message })
    }
    setTesting(false)
  }

const configValid = validateFirebaseConfig()

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>🔥 Firebase Debug Panel</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <h3 className="font-semibold">Configuration Status</h3>
            <p className={configValid ? "text-green-600" : "text-red-600"}>{configValid ? "✅ Valid" : "❌ Invalid"}</p>
          </div>

<div>
            <h3 className="font-semibold">Firebase Ready</h3>
            <p className={firebaseReady ? "text-green-600" : "text-red-600"}>
              {firebaseReady ? "✅ Ready" : "❌ Not Ready"}
            </p>
          </div>

<div>
            <h3 className="font-semibold">Current User</h3>
            <p className={currentUser ? "text-green-600" : "text-gray-600"}>
              {currentUser ? `✅ ${currentUser.email}` : "❌ Not logged in"}
            </p>
          </div>

<div>
            <h3 className="font-semibold">User ID</h3>
            <p className="text-sm text-gray-600">{currentUser ? currentUser.uid : "N/A"}</p>
          </div>
        </div>

<div className="space-y-2">
          <Button onClick={handleTestConnection} disabled={!firebaseReady || testing} className="w-full">
            {testing ? "Testing..." : "Test Firebase Connection"}
          </Button>

{testResult && (
            <div
              className={`p-3 rounded ${testResult.success ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
            >
              <p className="font-semibold">{testResult.success ? "✅ Test Passed" : "❌ Test Failed"}</p>
              <p className="text-sm">{testResult.message || testResult.error}</p>
            </div>
          )}
        </div>

<div className="text-xs text-gray-500 space-y-1">
          <p>
            <strong>Environment Variables Needed:</strong>
          </p>
          <ul className="list-disc list-inside space-y-1">
            <li>NEXT_PUBLIC_FIREBASE_API_KEY</li>
            <li>NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN</li>
            <li>NEXT_PUBLIC_FIREBASE_PROJECT_ID</li>
            <li>NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET</li>
            <li>NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID</li>
            <li>NEXT_PUBLIC_FIREBASE_APP_ID</li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/navigation-link.tsx" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import { useRouter, usePathname } from "next/navigation"
import type { ReactNode } from "react"

interface NavigationLinkProps {
  href: string
  children: ReactNode
  className?: string
  onClick?: () => void
}

export function NavigationLink({ href, children, className, onClick }: NavigationLinkProps) {
  const router = useRouter()
  const pathname = usePathname()

// Function to handle smooth scrolling to an element
  const scrollToElement = (elementId: string) => {
    // Wait a bit to ensure the DOM is fully loaded
    setTimeout(() => {
      const element = document.getElementById(elementId)
      if (element) {
        // Get the header height (h-16 = 64px)
        const headerOffset = 64
        const elementPosition = element.getBoundingClientRect().top
        const offsetPosition = elementPosition + window.pageYOffset - headerOffset

window.scrollTo({
          top: offsetPosition,
          behavior: "smooth",
        })
      }
    }, 100)
  }

const handleClick = (e: React.MouseEvent) => {
    e.preventDefault()
    if (onClick) onClick()

// Check if it's a hash link (section on the same page)
    if (href.startsWith("#")) {
      // It's a section on the current page
      const sectionId = href.substring(1)
      scrollToElement(sectionId)
      return
    }

// Check if it's a link to a section on the homepage
    if (href === "/") {
      // Navigate to homepage and scroll to top
      if (pathname !== "/") {
        router.push("/")
      } else {
        window.scrollTo({ top: 0, behavior: "smooth" })
      }
      return
    }

// Check if it's a link to a specific section on the homepage
    if (href.startsWith("/#")) {
      const sectionId = href.substring(2)

if (pathname !== "/") {
        // We're on a different page, navigate to homepage first
        router.push("/")
        // After navigation, scroll to the section
        setTimeout(() => {
          scrollToElement(sectionId)
        }, 300) // Give it time to load the page
      } else {
        // Already on homepage, just scroll
        scrollToElement(sectionId)
      }
      return
    }

// Regular navigation to another page
    router.push(href)
  }

return (
    <Link href={href} className={className} onClick={handleClick}>
      {children}
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/password-strength-indicator.tsx" isMerged="true"
import { cn } from "@/lib/utils"

interface PasswordStrengthIndicatorProps {
  strength: number
  password: string
}

export function PasswordStrengthIndicator({ strength, password }: PasswordStrengthIndicatorProps) {
  const getStrengthText = () => {
    if (!password) return ""
    switch (strength) {
      case 1:
        return "Very Weak"
      case 2:
        return "Weak"
      case 3:
        return "Fair"
      case 4:
        return "Good"
      case 5:
        return "Strong"
      default:
        return ""
    }
  }

const getStrengthColor = () => {
    switch (strength) {
      case 1:
        return "bg-red-500"
      case 2:
        return "bg-orange-500"
      case 3:
        return "bg-yellow-500"
      case 4:
        return "bg-blue-500"
      case 5:
        return "bg-green-500"
      default:
        return "bg-gray-200"
    }
  }

if (!password) return null

return (
    <div className="mt-2">
      <div className="flex gap-1 mb-1">
        {[1, 2, 3, 4, 5].map((level) => (
          <div
            key={level}
            className={cn(
              "h-1 flex-1 rounded-full transition-colors",
              level <= strength ? getStrengthColor() : "bg-gray-200",
            )}
          />
        ))}
      </div>
      <p
        className={cn("text-xs", strength <= 2 ? "text-red-600" : strength <= 3 ? "text-yellow-600" : "text-green-600")}
      >
        Password strength: {getStrengthText()}
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { usePathname } from "next/navigation"

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

useEffect(() => {
    // Only scroll to top on page changes if there's no hash in the URL
    // This prevents interference with smooth scrolling to sections
    if (!window.location.hash) {
      window.scrollTo(0, 0)
    }
  }, [pathname])

return null
}
[V0_FILE]markdown:file="docs/email-integration-setup.md" isMerged="true"
# Email Integration Setup Guide

This guide explains how to set up a real email service for the contact form.

## Option 1: Using Resend (Recommended)

Resend is a modern email API that's easy to integrate and reliable.

### Setup Steps:

1. **Install Resend**
   \`\`\`bash
   npm install resend
   \`\`\`

2. **Sign up for Resend**
   - Go to https://resend.com
   - Create an account and verify your domain
   - Get your API key from the dashboard

3. **Add Environment Variables**
   \`\`\`env
   RESEND_API_KEY=your_resend_api_key_here
   \`\`\`

4. **Update the API Route**
   Replace the mock implementation in `app/api/send-contact-email/route.ts` with:

\`\`\`typescript
   import { Resend } from 'resend'
   import { NextRequest, NextResponse } from 'next/server'

const resend = new Resend(process.env.RESEND_API_KEY)

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

// Validation (same as before)
       if (!name?.trim() || !email?.trim() || !subject?.trim() || !message?.trim()) {
         return NextResponse.json({ error: 'All fields are required' }, { status: 400 })
       }

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
       if (!emailRegex.test(email)) {
         return NextResponse.json({ error: 'Invalid email format' }, { status: 400 })
       }

// Send email using Resend
       const { data, error } = await resend.emails.send({
         from: 'noreply@yourdomain.com', // Must be your verified domain
         to: ['admin@lokate.ai'],
         subject: `${name} - ${subject}`,
         replyTo: email,
         html: `
           <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
             <h2 style="color: #333;">New Contact Form Submission</h2>
             <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
               <p><strong>From:</strong> ${name}</p>
               <p><strong>Email:</strong> ${email}</p>
               <p><strong>Subject:</strong> ${subject}</p>
             </div>
             <div style="background: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
               <h3>Message:</h3>
               <p style="white-space: pre-wrap;">${message}</p>
             </div>
           </div>
         `,
         text: `
           New Contact Form Submission
           
           From: ${name}
           Email: ${email}
           Subject: ${subject}
           
           Message:
           ${message}
         `
       })

if (error) {
         console.error('Resend error:', error)
         return NextResponse.json({ error: 'Failed to send email' }, { status: 500 })
       }

return NextResponse.json({ message: 'Email sent successfully' }, { status: 200 })

} catch (error) {
       console.error('Contact form error:', error)
       return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
     }
   }
   \`\`\`

## Option 2: Using SendGrid

1. **Install SendGrid**
   \`\`\`bash
   npm install @sendgrid/mail
   \`\`\`

2. **Setup**
   \`\`\`typescript
   import sgMail from '@sendgrid/mail'
   
   sgMail.setApiKey(process.env.SENDGRID_API_KEY!)
   
   const msg = {
     to: 'admin@lokate.ai',
     from: 'noreply@yourdomain.com',
     subject: `${name} - ${subject}`,
     text: message,
     html: `<p>${message}</p>`,
     replyTo: email
   }
   
   await sgMail.send(msg)
   \`\`\`

## Option 3: Using Nodemailer with SMTP

1. **Install Nodemailer**
   \`\`\`bash
   npm install nodemailer
   npm install @types/nodemailer --save-dev
   \`\`\`

2. **Setup**
   \`\`\`typescript
   import nodemailer from 'nodemailer'
   
   const transporter = nodemailer.createTransporter({
     host: process.env.SMTP_HOST,
     port: 587,
     secure: false,
     auth: {
       user: process.env.SMTP_USER,
       pass: process.env.SMTP_PASS,
     },
   })
   
   await transporter.sendMail({
     from: process.env.SMTP_FROM,
     to: 'admin@lokate.ai',
     subject: `${name} - ${subject}`,
     text: message,
     replyTo: email
   })
   \`\`\`

## Environment Variables

Add these to your `.env.local` file:

\`\`\`env
# For Resend
RESEND_API_KEY=your_resend_api_key

# For SendGrid
SENDGRID_API_KEY=your_sendgrid_api_key

# For SMTP
SMTP_HOST=your_smtp_host
SMTP_USER=your_smtp_username
SMTP_PASS=your_smtp_password
SMTP_FROM=noreply@yourdomain.com
\`\`\`

## Testing

Test the integration by:
1. Filling out the contact form
2. Checking the browser network tab for successful API calls
3. Verifying emails are received at admin@lokate.ai
4. Testing validation by submitting incomplete forms

## Security Considerations

- Always validate input on the server side
- Use environment variables for API keys
- Implement rate limiting to prevent spam
- Consider adding CAPTCHA for additional protection
- Sanitize user input before including in emails
[V0_FILE]typescript:file="hooks/use-auth.ts" isMerged="true"
"use client"

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

export function useAuth() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [userEmail, setUserEmail] = useState<string | null>(null)
  const router = useRouter()

useEffect(() => {
    const checkAuthStatus = () => {
      const loggedIn = authUtils.isLoggedIn()
      const email = localStorage.getItem("userEmail")

setIsLoggedIn(loggedIn)
      setUserEmail(email)
      setIsLoading(false)
    }

checkAuthStatus()

// Listen for storage changes (in case user logs out in another tab)
    const handleStorageChange = (e: StorageEvent) => {
      if (e.key === "isLoggedIn" || e.key === "userEmail") {
        checkAuthStatus()
      }
    }

window.addEventListener("storage", handleStorageChange)
    return () => window.removeEventListener("storage", handleStorageChange)
  }, [])

const login = (username: string, password: string, rememberMe = false) => {
    authUtils.setLoggedIn(username)

if (rememberMe) {
      authUtils.saveRememberedCredentials(username, password)
    } else {
      authUtils.clearRememberedCredentials()
    }

setIsLoggedIn(true)
    setUserEmail(username)
  }

const logout = () => {
    authUtils.logout()
    setIsLoggedIn(false)
    setUserEmail(null)
    router.push("/login")
  }

const checkRememberedLogin = async (): Promise<boolean> => {
    const rememberedCredentials = authUtils.getRememberedCredentials()
    if (rememberedCredentials) {
      authUtils.setLoggedIn(rememberedCredentials.username)
      setIsLoggedIn(true)
      setUserEmail(rememberedCredentials.username)
      return true
    }
    return false
  }

return {
    isLoggedIn,
    isLoading,
    userEmail,
    login,
    logout,
    checkRememberedLogin,
  }
}
[V0_FILE]typescript:file="hooks/use-firebase-auth.ts" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { useRouter } from "next/navigation"

export function useFirebaseAuth(redirectTo = "/login") {
  const { currentUser, loading } = useAuth()
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    if (!loading) {
      if (!currentUser) {
        router.push(redirectTo)
      } else {
        setIsLoading(false)
      }
    }
  }, [currentUser, loading, redirectTo, router])

return { user: currentUser, isLoading: loading || isLoading }
}
[V0_FILE]typescript:file="hooks/use-username-validation.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { firebaseUtils } from "@/lib/firebase-utils"

export function useUsernameValidation(username: string, debounceMs = 500) {
  const [isChecking, setIsChecking] = useState(false)
  const [isAvailable, setIsAvailable] = useState<boolean | null>(null)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    if (!username || username.length < 3) {
      setIsAvailable(null)
      setError(null)
      return
    }

const timeoutId = setTimeout(async () => {
      setIsChecking(true)
      setError(null)

try {
        // Check if username exists in Firestore
        const exists = await firebaseUtils.usernameExists(username)
        setIsAvailable(!exists)
        if (exists) {
          setError("Username is already taken")
        }
      } catch (err) {
        setError("Unable to check username availability")
        setIsAvailable(null)
      } finally {
        setIsChecking(false)
      }
    }, debounceMs)

return () => clearTimeout(timeoutId)
  }, [username, debounceMs])

return { isChecking, isAvailable, error }
}
[V0_FILE]typescript:file="lib/auth-utils.ts" isMerged="true"
// This is a mock implementation for demo purposes
// In a real application, you would use a database and proper authentication

interface UserData {
  username: string
  hashedPassword: string
  email?: string
  phone?: string
  stripeCustomerId?: string
  stripeSubscriptionId?: string
  metadata?: Record<string, any>
}

// Mock database
let users: Record<string, UserData> = {}
let loggedInUser: string | null = null
let resetTokens: Record<string, { email: string; token: string; expires: Date; used: boolean }> = {}

// Check if we're in a browser environment
const isBrowser = typeof window !== "undefined"

// Initialize from localStorage if in browser
if (isBrowser) {
  const storedUsers = localStorage.getItem("users")
  if (storedUsers) {
    users = JSON.parse(storedUsers)
  }

const storedLoggedInUser = localStorage.getItem("loggedInUser")
  if (storedLoggedInUser) {
    loggedInUser = storedLoggedInUser
  }

const storedResetTokens = localStorage.getItem("resetTokens")
  if (storedResetTokens) {
    resetTokens = JSON.parse(storedResetTokens)
  }
}

// Save to localStorage
const saveToStorage = () => {
  if (isBrowser) {
    localStorage.setItem("users", JSON.stringify(users))
    if (loggedInUser) {
      localStorage.setItem("loggedInUser", loggedInUser)
    } else {
      localStorage.removeItem("loggedInUser")
    }
    localStorage.setItem("resetTokens", JSON.stringify(resetTokens))
  }
}

export const authUtils = {
  // Register a new user
  registerUser: async (
    username: string,
    password: string,
    additionalData?: {
      email?: string
      phone?: string
      stripeCustomerId?: string
      stripeSubscriptionId?: string
      metadata?: Record<string, any>
    },
  ): Promise<boolean> => {
    // Check if user already exists
    if (users[username]) {
      return false
    }

// In a real app, you would hash the password here
    // For this demo, we'll use the password-utils.ts
    const { passwordUtils } = await import("@/lib/password-utils")
    const hashedPassword = await passwordUtils.hashPassword(password)

// Create the user
    users[username] = {
      username,
      hashedPassword,
      ...additionalData,
    }

// Save to storage
    saveToStorage()

return true
  },

// Login a user
  loginUser: async (username: string, password: string, rememberMe = false): Promise<boolean> => {
    const user = users[username]

if (!user) {
      return false
    }

// In a real app, you would verify the password hash here
    // For this demo, we'll use the password-utils.ts
    const { passwordUtils } = await import("@/lib/password-utils")
    const passwordMatch = await passwordUtils.verifyPassword(password, user.hashedPassword)

if (!passwordMatch) {
      return false
    }

// Set the logged in user
    loggedInUser = username

// Save to storage
    saveToStorage()

// If remember me is checked, store credentials securely
    if (rememberMe && isBrowser) {
      // In a real app, you would use a more secure method
      // For this demo, we'll just use localStorage
      localStorage.setItem("rememberedUser", username)
      // Store hashed password, not the plain text
      localStorage.setItem("rememberedPassword", user.hashedPassword)
    }

return true
  },

// Logout the current user
  logoutUser: (): void => {
    loggedInUser = null
    saveToStorage()

// Clear remembered user
    if (isBrowser) {
      localStorage.removeItem("rememberedUser")
      localStorage.removeItem("rememberedPassword")
    }
  },

// Check if a user is logged in
  isLoggedIn: (): boolean => {
    if (isBrowser) {
      const localStorageLogin = localStorage.getItem("isLoggedIn") === "true"
      return loggedInUser !== null || localStorageLogin
    }
    return loggedInUser !== null
  },

// Get the current logged in user
  getCurrentUser: (): string | null => {
    return loggedInUser
  },

// Set a user as logged in (for demo purposes)
  setLoggedIn: (username: string): void => {
    loggedInUser = username

if (isBrowser) {
      const userId = `user_${username.toLowerCase().replace(/[^a-z0-9]/g, "")}_${Date.now()}`
      localStorage.setItem("userId", userId)
      localStorage.setItem("userEmail", username)
      localStorage.setItem("isLoggedIn", "true")
    }

saveToStorage()
  },

// Get user data
  getUser: (username: string): UserData | null => {
    return users[username] || null
  },

// Get all users (for demo purposes)
  getAllUsers: (): Record<string, UserData> => {
    return users
  },

// Check if an email exists
  emailExists: (email: string): boolean => {
    return Object.values(users).some((user) => user.email === email)
  },

// Generate a password reset token
  generateResetToken: (email: string): string | null => {
    // Find user with this email
    const user = Object.values(users).find((user) => user.email === email)

if (!user) {
      return null
    }

// Generate a token
    const token = Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10)

// Set expiration to 15 minutes from now
    const expires = new Date()
    expires.setMinutes(expires.getMinutes() + 15)

// Store the token
    resetTokens[token] = {
      email,
      token,
      expires,
      used: false,
    }

saveToStorage()

return token
  },

// Validate a reset token
  validateResetToken: (token: string): { valid: boolean; email?: string } => {
    const resetToken = resetTokens[token]

if (!resetToken) {
      return { valid: false }
    }

// Check if token is expired
    if (new Date() > new Date(resetToken.expires)) {
      return { valid: false }
    }

// Check if token has been used
    if (resetToken.used) {
      return { valid: false }
    }

return { valid: true, email: resetToken.email }
  },

// Reset password using token
  resetPassword: async (token: string, newPassword: string): Promise<boolean> => {
    const validation = authUtils.validateResetToken(token)

if (!validation.valid || !validation.email) {
      return false
    }

// Find user with this email
    const user = Object.values(users).find((user) => user.email === validation.email)

if (!user) {
      return false
    }

// Hash the new password
    const { passwordUtils } = await import("@/lib/password-utils")
    const hashedPassword = await passwordUtils.hashPassword(newPassword)

// Update the password
    user.hashedPassword = hashedPassword

// Mark token as used
    resetTokens[token].used = true

saveToStorage()

return true
  },

// Add these functions to the authUtils object:

// Save credentials for remember me (stores hashed password)
  saveRememberedCredentials: async (username: string, password: string): Promise<void> => {
    try {
      // Hash the password before storing
      const { passwordUtils } = await import("@/lib/password-utils")
      const hashedPassword = await passwordUtils.hashPassword(password)

const credentials = {
        username,
        hashedPassword,
        timestamp: Date.now(),
      }

if (isBrowser) {
        localStorage.setItem("rememberedLogin", JSON.stringify(credentials))
      }
    } catch (error) {
      console.error("Error saving remembered credentials:", error)
    }
  },

// Get remembered credentials if they exist and are not expired
  getRememberedCredentials: (): { username: string; hashedPassword: string } | null => {
    try {
      if (!isBrowser) return null

const stored = localStorage.getItem("rememberedLogin")
      if (!stored) return null

const credentials = JSON.parse(stored)
      const REMEMBER_ME_DURATION = 30 * 24 * 60 * 60 * 1000 // 30 days
      const isExpired = Date.now() - credentials.timestamp > REMEMBER_ME_DURATION

if (isExpired) {
        localStorage.removeItem("rememberedLogin")
        return null
      }

return credentials
    } catch (error) {
      console.error("Error getting remembered credentials:", error)
      if (isBrowser) {
        localStorage.removeItem("rememberedLogin")
      }
      return null
    }
  },

// Clear remembered credentials
  clearRememberedCredentials: (): void => {
    if (isBrowser) {
      localStorage.removeItem("rememberedLogin")
    }
  },

// Verify credentials with hashed password
  verifyCredentials: async (username: string, passwordOrHash: string): Promise<boolean> => {
    const user = users[username]

if (!user) {
      console.log("User not found:", username)
      return false
    }

// For remembered credentials, the passwordOrHash is already a hash
    // Check if it matches the stored hash directly
    if (passwordOrHash === user.hashedPassword) {
      console.log("Hash match for remembered credentials")
      return true
    }

// For regular login, verify the plain password against the stored hash
    try {
      const { passwordUtils } = await import("@/lib/password-utils")
      const isValid = await passwordUtils.verifyPassword(passwordOrHash, user.hashedPassword)
      console.log("Password verification result:", isValid)
      return isValid
    } catch (error) {
      console.error("Error verifying password:", error)
      return false
    }
  },

// Logout function
  logout: (): void => {
    loggedInUser = null
    saveToStorage()

if (isBrowser) {
      localStorage.removeItem("isLoggedIn")
      localStorage.removeItem("userEmail")
      localStorage.removeItem("userId")
    }
  },
}
[V0_FILE]typescript:file="lib/form-validation.ts" isMerged="true"
// Form validation utilities
export const validateEmail = (email: string): string | null => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!email) return "Email is required"
  if (!emailRegex.test(email)) return "Please enter a valid email address"
  return null
}

export const validatePhone = (phone: string): string | null => {
  const phoneRegex = /^$$\d{3}$$ \d{3}-\d{4}$/
  if (!phone) return "Phone number is required"
  if (!phoneRegex.test(phone)) return "Please enter a valid phone number"
  return null
}

export const validateUsername = (username: string): string | null => {
  if (!username) return "Username is required"
  if (username.length < 3) return "Username must be at least 3 characters"
  if (username.length > 20) return "Username must be less than 20 characters"
  if (!/^[a-zA-Z0-9_]+$/.test(username)) return "Username can only contain letters, numbers, and underscores"
  return null
}

export const validatePassword = (password: string): { error: string | null; strength: number } => {
  if (!password) return { error: "Password is required", strength: 0 }
  if (password.length < 8) return { error: "Password must be at least 8 characters", strength: 1 }

let strength = 0
  if (password.length >= 8) strength++
  if (/[a-z]/.test(password)) strength++
  if (/[A-Z]/.test(password)) strength++
  if (/\d/.test(password)) strength++
  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++

if (strength < 3) return { error: "Password is too weak", strength }
  return { error: null, strength }
}

export const formatPhoneNumber = (value: string): string => {
  // Remove all non-digits
  const digits = value.replace(/\D/g, "")

// Format as (XXX) XXX-XXXX
  if (digits.length >= 6) {
    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`
  } else if (digits.length >= 3) {
    return `(${digits.slice(0, 3)}) ${digits.slice(3)}`
  } else {
    return digits
  }
}
[V0_FILE]typescript:file="lib/password-utils.ts" isMerged="true"
import * as bcrypt from "bcryptjs"

// Cost factor for bcrypt - higher is more secure but slower
const SALT_ROUNDS = 10

/**
 * Hash a password using bcrypt
 * @param password The plain text password to hash
 * @returns A promise that resolves to the hashed password
 */
export const hashPassword = async (password: string): Promise<string> => {
  try {
    // Generate a salt and hash the password
    const salt = await bcrypt.genSalt(SALT_ROUNDS)
    const hashedPassword = await bcrypt.hash(password, salt)
    return hashedPassword
  } catch (error) {
    console.error("Error hashing password:", error)
    throw new Error("Password hashing failed")
  }
}

/**
 * Compare a plain text password with a hashed password
 * @param password The plain text password to check
 * @param hashedPassword The hashed password to compare against
 * @returns A promise that resolves to true if the passwords match, false otherwise
 */
export const verifyPassword = async (password: string, hashedPassword: string): Promise<boolean> => {
  try {
    return await bcrypt.compare(password, hashedPassword)
  } catch (error) {
    console.error("Error verifying password:", error)
    return false
  }
}

// Export the functions as an object for backward compatibility
export const passwordUtils = {
  hashPassword,
  verifyPassword,
}
[V0_FILE]typescript:file="lib/test-firebase.ts" isMerged="true"
import { auth, db } from "./firebase-config"
import { createUserWithEmailAndPassword } from "firebase/auth"
import { doc, setDoc, getDoc } from "firebase/firestore"

export async function testFirebaseConnection() {
  console.log("Testing Firebase connection...")

try {
    // Test 1: Check if Firebase is initialized
    if (!auth || !db) {
      throw new Error("Firebase not initialized")
    }
    console.log("✅ Firebase initialized")

// Test 2: Try to create a test user (optional)
    const testEmail = `test-${Date.now()}@example.com`
    const testPassword = "TestPassword123!"

const userCredential = await createUserWithEmailAndPassword(auth, testEmail, testPassword)
    console.log("✅ User created:", userCredential.user.uid)

// Test 3: Store data in Firestore
    await setDoc(doc(db, "users", userCredential.user.uid), {
      email: testEmail,
      username: "testuser",
      createdAt: new Date().toISOString(),
      isTest: true,
    })
    console.log("✅ Data stored in Firestore")

// Test 4: Read data back
    const userDoc = await getDoc(doc(db, "users", userCredential.user.uid))
    if (userDoc.exists()) {
      console.log("✅ Data retrieved:", userDoc.data())
    }

return { success: true, uid: userCredential.user.uid }
  } catch (error) {
    console.error("❌ Firebase test failed:", error)
    return { success: false, error: error.message }
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" 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))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]png:file="public/images/client-intake-form.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/zdtahTFbqbkDVZACY_28xY/public/images/client-intake-form.png" isMerged="true"
[V0_FILE]png:file="public/images/dashboard-preview.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/BpKzn6DCs7JBfQwZxXf5SQ/public/images/dashboard-preview.png" isMerged="true"
[V0_FILE]png:file="public/images/instant-alerts-benefits.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/3PzXihurkLluIj7KTa1NV-/public/images/instant-alerts-benefits.png" isMerged="true"
[V0_FILE]png:file="public/images/key-benefits-features.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/rYGFEkkifMJ_cfXqCV4_vw/public/images/key-benefits-features.png" isMerged="true"
[V0_FILE]png:file="public/images/quick-stats-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_koTzegjagWhg3o5KHTyo6vFA13uJ/S6BDUDEN_V2IpDIE4Besty/public/images/quick-stats-dashboard.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/api/create-payment-method/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { email, phone, cardNumber, cardName, cardExpiry, cardCvc } = body

// Validate required fields
    if (!email || !phone || !cardNumber || !cardName || !cardExpiry || !cardCvc) {
      return NextResponse.json({ error: "All fields are required" }, { status: 400 })
    }

// Basic card number validation (remove spaces and check length)
    const cleanCardNumber = cardNumber.replace(/\s/g, "")
    if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) {
      return NextResponse.json({ error: "Invalid card number" }, { status: 400 })
    }

// Basic expiry validation
    const [month, year] = cardExpiry.split("/")
    if (!month || !year || month.length !== 2 || year.length !== 2) {
      return NextResponse.json({ error: "Invalid expiry date" }, { status: 400 })
    }

// Basic CVC validation
    if (cardCvc.length < 3 || cardCvc.length > 4) {
      return NextResponse.json({ error: "Invalid CVC" }, { status: 400 })
    }

// Check if we have a Stripe secret key
    const stripeSecretKey = process.env.STRIPE_SECRET_KEY
    if (!stripeSecretKey) {
      console.warn("Stripe secret key is missing. Falling back to demo mode.")
      // Return mock response for demo purposes
      return NextResponse.json({
        paymentMethodId: `pm_mock_${Date.now()}`,
        customerId: `cus_mock_${Date.now()}`,
        demoMode: true,
      })
    }

// Initialize Stripe with your secret key
    const stripe = new Stripe(stripeSecretKey, {
      apiVersion: "2023-10-16",
    })

// Create a payment method
    const paymentMethod = await stripe.paymentMethods.create({
      type: "card",
      card: {
        number: cleanCardNumber,
        exp_month: Number.parseInt(month),
        exp_year: Number.parseInt(`20${year}`),
        cvc: cardCvc,
      },
      billing_details: {
        name: cardName,
        email: email,
        phone: phone,
      },
    })

// Create a customer
    const customer = await stripe.customers.create({
      email: email,
      phone: phone,
      name: cardName,
      payment_method: paymentMethod.id,
    })

// Attach payment method to customer
    await stripe.paymentMethods.attach(paymentMethod.id, {
      customer: customer.id,
    })

return NextResponse.json({
      paymentMethodId: paymentMethod.id,
      customerId: customer.id,
      demoMode: false,
    })
  } catch (error: any) {
    console.error("Payment method creation error:", error)

// Handle specific Stripe errors
    if (error.type === "StripeCardError") {
      return NextResponse.json({ error: error.message || "Your card was declined." }, { status: 400 })
    }

return NextResponse.json({ error: "Payment processing failed. Please try again." }, { status: 500 })
  }
}
[V0_FILE]png:file="public/images/property-criteria-step1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-tRNZO74oNxiAgYdQCZadTvSOp8gugU.png" isMerged="true"
[V0_FILE]png:file="public/images/property-criteria-step2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-fd0uIOP7KBLCxmhVeJ1CYBnV4BMMeu.png" isMerged="true"
[V0_FILE]png:file="public/images/property-criteria-step2-continued.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-08%20at%201.16.38%20AM-flyFyTfOf2WJNUjmxhwblrcjl4ulYg.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/dashboard/add-criteria/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/alert-utils.ts" isMerged="true"
/**
 * Updates the alert history for a specific criteria
 * @param criteriaId The ID of the criteria to update
 * @param addresses Array of property addresses that were sent in the alert
 * @returns Promise with the update result
 */
export async function updateAlertHistory(criteriaId: string, addresses: string[]) {
  try {
    const response = await fetch(`/api/criteria`, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: criteriaId,
        lastAlertSent: new Date().toISOString(),
        sentAddresses: addresses,
      }),
    })

if (!response.ok) {
      throw new Error("Failed to update alert history")
    }

return await response.json()
  } catch (error) {
    console.error("Error updating alert history:", error)
    throw error
  }
}

/**
 * Filters out properties that have already been sent to the user
 * @param properties Array of property objects with addresses
 * @param sentAddresses Array of addresses that have already been sent
 * @returns Array of new properties that haven't been sent yet
 */
export function filterNewProperties(properties: any[], sentAddresses: string[]) {
  if (!sentAddresses || sentAddresses.length === 0) {
    return properties
  }

// Convert sentAddresses to lowercase for case-insensitive comparison
  const sentAddressesLower = sentAddresses.map((addr) => addr.toLowerCase())

return properties.filter((property) => {
    const address = property.address?.toLowerCase() || ""
    return !sentAddressesLower.includes(address)
  })
}
[V0_FILE]typescriptreact:file="app/api/create-subscription/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

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

// Validate required fields
    if (!email || !username || !password || !paymentMethodId) {
      return NextResponse.json({ error: "All fields are required" }, { status: 400 })
    }

// Validate password strength
    if (password.length < 8) {
      return NextResponse.json({ error: "Password must be at least 8 characters long" }, { status: 400 })
    }

// Initialize Stripe
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
      apiVersion: "2023-10-16",
    })

// Create or retrieve customer
    let customer
    const existingCustomers = await stripe.customers.list({ email })

if (existingCustomers.data.length > 0) {
      customer = existingCustomers.data[0]
    } else {
      customer = await stripe.customers.create({
        email,
        name: username,
        payment_method: paymentMethodId,
        invoice_settings: {
          default_payment_method: paymentMethodId,
        },
      })
    }

// Attach payment method to customer if not already attached
    try {
      await stripe.paymentMethods.attach(paymentMethodId, {
        customer: customer.id,
      })
    } catch (error) {
      // Payment method might already be attached
      console.log("Payment method attachment error (may be already attached):", error)
    }

// Set as default payment method
    await stripe.customers.update(customer.id, {
      invoice_settings: {
        default_payment_method: paymentMethodId,
      },
    })

// Create subscription with 7-day trial
    const subscription = await stripe.subscriptions.create({
      customer: customer.id,
      items: [
        {
          price: process.env.STRIPE_PRICE_ID,
        },
      ],
      trial_period_days: 7,
      payment_behavior: "default_incomplete",
      payment_settings: {
        save_default_payment_method: "on_subscription",
      },
      expand: ["latest_invoice.payment_intent"],
    })

// Store user data in your database
    // await createUser({
    //   email,
    //   username,
    //   password: await hashPassword(password),
    //   stripeCustomerId: customer.id,
    //   stripeSubscriptionId: subscription.id,
    // })

// Get the client secret from the subscription
    const invoice = subscription.latest_invoice as Stripe.Invoice
    const paymentIntent = invoice.payment_intent as Stripe.PaymentIntent
    const clientSecret = paymentIntent ? paymentIntent.client_secret : null

return NextResponse.json({
      subscriptionId: subscription.id,
      customerId: customer.id,
      trialEnd: subscription.trial_end,
      clientSecret: clientSecret,
      status: subscription.status,
    })
  } catch (error) {
    console.error("Subscription creation error:", error)
    return NextResponse.json({ error: "Account creation failed. Please try again." }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/firebase-config.ts" isQuickEdit="true" isMerged="true"
// Import the functions you need from the SDKs you need
import { initializeApp, getApps } from "firebase/app"
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY || "",
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN || "",
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID || "",
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET || "",
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID || "",
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID || "",
}

// Validate Firebase configuration
function validateFirebaseConfig() {
  const requiredFields = ["apiKey", "authDomain", "projectId", "storageBucket", "messagingSenderId", "appId"]
  const missingFields = requiredFields.filter((field) => {
    const value = firebaseConfig[field as keyof typeof firebaseConfig]
    return !value || value.startsWith("your_") || value === ""
  })

if (missingFields.length > 0) {
    console.error("❌ Missing or invalid Firebase configuration fields:", missingFields)
    console.error("Current config:", {
      apiKey: firebaseConfig.apiKey && !firebaseConfig.apiKey.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid",
      authDomain:
        firebaseConfig.authDomain && !firebaseConfig.authDomain.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid",
      projectId:
        firebaseConfig.projectId && !firebaseConfig.projectId.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid",
      storageBucket:
        firebaseConfig.storageBucket && !firebaseConfig.storageBucket.startsWith("your_")
          ? "✅ Set"
          : "❌ Missing/Invalid",
      messagingSenderId:
        firebaseConfig.messagingSenderId && !firebaseConfig.messagingSenderId.startsWith("your_")
          ? "✅ Set"
          : "❌ Missing/Invalid",
      appId: firebaseConfig.appId && !firebaseConfig.appId.startsWith("your_") ? "✅ Set" : "❌ Missing/Invalid",
    })
    return false
  }

return true
}

// Initialize Firebase only if configuration is valid
let app: any = null
let auth: any = null
let db: any = null

if (typeof window !== "undefined") {
  // Only initialize on client side
  if (validateFirebaseConfig()) {
    try {
      app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]
      auth = getAuth(app)
      db = getFirestore(app)
      console.log("🔥 Firebase initialized successfully")
      console.log("📊 Project ID:", firebaseConfig.projectId)
      console.log("🔐 Auth Domain:", firebaseConfig.authDomain)
    } catch (error) {
      console.error("❌ Firebase initialization error:", error)
      console.error("Config used:", firebaseConfig)
    }
  } else {
    console.warn("⚠️ Firebase not initialized due to missing configuration")
    console.log("💡 Add your Firebase config to .env.local file")
  }
}

// Export Firebase instances
export { app, auth, db, firebaseConfig }

// Export validation function for debugging
export { validateFirebaseConfig }

// Export configuration status
export const isFirebaseConfigured = validateFirebaseConfig()
[V0_FILE]typescript:file="app/api/send-contact-email/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import nodemailer from "nodemailer"

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

// Validate required fields
    if (!name?.trim() || !email?.trim() || !subject?.trim() || !message?.trim()) {
      return NextResponse.json({ error: "All fields are required" }, { status: 400 })
    }

// Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json({ error: "Invalid email format" }, { status: 400 })
    }

// Create nodemailer transporter for Gmail SMTP
    const transporter = nodemailer.createTransporter({
      host: process.env.SMTP_HOST,
      port: 587,
      secure: false, // true for 465, false for other ports
      auth: {
        user: process.env.SMTP_USER,
        pass: process.env.SMTP_PASS,
      },
    })

// Email content
    const emailContent = {
      from: process.env.SMTP_FROM,
      to: process.env.SMTP_USER, // Send to yourself
      replyTo: email, // User's email for easy replies
      subject: `Lokate.ai Contact: ${name} - ${subject}`,
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
          <h2 style="color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px;">
            New Contact Form Submission
          </h2>
          
          <div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px; margin: 20px 0;">
            <p><strong>From:</strong> ${name}</p>
            <p><strong>Email:</strong> ${email}</p>
            <p><strong>Subject:</strong> ${subject}</p>
          </div>
          
          <div style="margin: 20px 0;">
            <h3 style="color: #333;">Message:</h3>
            <div style="background-color: #ffffff; padding: 15px; border-left: 4px solid #007bff; border-radius: 3px;">
              ${message.replace(/\n/g, "<br>")}
            </div>
          </div>
          
          <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #dee2e6; color: #6c757d; font-size: 12px;">
            <p>This email was sent from the Lokate.ai contact form.</p>
            <p>You can reply directly to this email to respond to ${name}.</p>
          </div>
        </div>
      `,
      text: `
New Contact Form Submission from Lokate.ai

From: ${name} (${email})
Subject: ${subject}

Message:
${message}

---
You can reply directly to this email to respond to ${name}.
      `,
    }

// Send email
    await transporter.sendMail(emailContent)

console.log("Email sent successfully via Gmail SMTP:", {
      to: process.env.SMTP_USER,
      from: email,
      subject: `${name} - ${subject}`,
    })

return NextResponse.json({ message: "Email sent successfully" }, { status: 200 })
  } catch (error) {
    console.error("Gmail SMTP error:", error)
    return NextResponse.json(
      {
        error: "Failed to send email. Please try again or contact us directly.",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]plaintext:file=".env.local" isMerged="true"
# Stripe Configuration - Use Restricted Key for better security
STRIPE_RESTRICTED_KEY=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
STRIPE_PUBLISHABLE_KEY=pk_live_51Nv1hnF1T0ekUEoFjNtsxf4Jv6zFMVFjPyHq8rxz4gegIumvoi52aShl2UARE9CHhVXN6KMr7i6KmABy9vgcW2Ti00BinXsK9N
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51Nv1hnF1T0ekUEoFjNtsxf4Jv6zFMVFjPyHq8rxz4gegIumvoi52aShl2UARE9CHhVXN6KMr7i6KmABy9vgcW2Ti00BinXsK9N
STRIPE_PRICE_ID=price_1RYUILF1T0ekUEoFgTHRscTr

# Fallback to secret key if restricted key not available
STRIPE_SECRET_KEY=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

# Make.com Webhook (already configured)
MAKE_WEBHOOK_URL=https://hook.us2.make.com/823xjm0xbtjd9la9ms29prhkyzepl2av

# Firebase Configuration (already set up)
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyAE58jXUhdu8--CfarE2a_3z-Frre3bjJU
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=lokate-domain.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=lokate-domain
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=lokate-domain.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=470770173591
NEXT_PUBLIC_FIREBASE_APP_ID=1:470770173591:web:d6d1cdf579bd6454dacbd2

# Auth0 Configuration (if using)
NEXT_PUBLIC_AUTH0_DOMAIN=your_auth0_domain
AUTH0_SECRET=your_auth0_secret
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your_auth0_domain
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret
AUTH0_AUDIENCE=your_auth0_audience

# Email Configuration - Gmail SMTP
SMTP_HOST=smtp.gmail.com
SMTP_USER=your-gmail-address@gmail.com
SMTP_PASS=your-16-character-app-password
SMTP_FROM=your-gmail-address@gmail.com
[V0_FILE]typescriptreact:file="app/about/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true"
"use client"

import React from "react"
import { AlertCircle, RefreshCw, Home } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface ErrorBoundaryState {
  hasError: boolean
  error?: Error
  errorInfo?: React.ErrorInfo
}

interface ErrorBoundaryProps {
  children: React.ReactNode
  fallback?: React.ComponentType<{ error: Error; resetError: () => void }>
}

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

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

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("Error Boundary caught an error:", error, errorInfo)

// Log error to monitoring service in production
    if (process.env.NODE_ENV === "production") {
      // You can integrate with services like Sentry, LogRocket, etc.
      console.error("Production error:", {
        error: error.message,
        stack: error.stack,
        componentStack: errorInfo.componentStack,
        timestamp: new Date().toISOString(),
      })
    }

this.setState({
      error,
      errorInfo,
    })
  }

resetError = () => {
    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
  }

render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        const FallbackComponent = this.props.fallback
        return <FallbackComponent error={this.state.error!} resetError={this.resetError} />
      }

return <DefaultErrorFallback error={this.state.error!} resetError={this.resetError} />
    }

return this.props.children
  }
}

interface DefaultErrorFallbackProps {
  error: Error
  resetError: () => void
}

function DefaultErrorFallback({ error, resetError }: DefaultErrorFallbackProps) {
  const isNetworkError = error.message.includes("fetch") || error.message.includes("network")
  const isAuthError = error.message.includes("auth") || error.message.includes("Firebase")
  const isPaymentError = error.message.includes("stripe") || error.message.includes("payment")

const getErrorTitle = () => {
    if (isNetworkError) return "Connection Error"
    if (isAuthError) return "Authentication Error"
    if (isPaymentError) return "Payment Error"
    return "Something went wrong"
  }

const getErrorDescription = () => {
    if (isNetworkError) {
      return "We're having trouble connecting to our servers. Please check your internet connection and try again."
    }
    if (isAuthError) {
      return "There was an issue with authentication. Please try logging in again or contact support if the problem persists."
    }
    if (isPaymentError) {
      return "There was an issue processing your payment. Please check your payment details or try a different payment method."
    }
    return "An unexpected error occurred. Our team has been notified and is working to fix this issue."
  }

const getHelpText = () => {
    if (isNetworkError) {
      return "Try refreshing the page or checking your internet connection."
    }
    if (isAuthError) {
      return "Try logging out and logging back in, or clear your browser cache."
    }
    if (isPaymentError) {
      return "Verify your payment information is correct and your card isn't expired."
    }
    return "If this problem continues, please contact our support team."
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-muted p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
            <AlertCircle className="h-6 w-6 text-red-600" />
          </div>
          <CardTitle className="text-xl font-semibold">{getErrorTitle()}</CardTitle>
          <CardDescription className="text-center">{getErrorDescription()}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="p-3 bg-gray-50 rounded-lg">
            <p className="text-sm text-gray-600 mb-2">
              <strong>What you can try:</strong>
            </p>
            <p className="text-sm text-gray-600">{getHelpText()}</p>
          </div>

<div className="flex flex-col gap-2">
            <Button onClick={resetError} className="w-full">
              <RefreshCw className="mr-2 h-4 w-4" />
              Try Again
            </Button>
            <Button variant="outline" onClick={() => (window.location.href = "/")} className="w-full">
              <Home className="mr-2 h-4 w-4" />
              Go to Homepage
            </Button>
          </div>

{process.env.NODE_ENV === "development" && (
            <details className="mt-4">
              <summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700">
                Error Details (Development)
              </summary>
              <div className="mt-2 p-3 bg-gray-100 rounded text-xs font-mono text-gray-700 overflow-auto max-h-32">
                <div className="mb-2">
                  <strong>Error:</strong> {error.message}
                </div>
                {error.stack && (
                  <div>
                    <strong>Stack:</strong>
                    <pre className="whitespace-pre-wrap">{error.stack}</pre>
                  </div>
                )}
              </div>
            </details>
          )}

<div className="text-center pt-2">
            <p className="text-xs text-gray-500">
              Need help?{" "}
              <a href="mailto:support@lokate.ai" className="text-primary hover:underline font-medium">
                Contact Support
              </a>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// Hook for functional components
export function useErrorHandler() {
  const handleError = (error: Error, errorInfo?: string) => {
    console.error("Error handled by useErrorHandler:", error)

// You can integrate with error reporting services here
    if (process.env.NODE_ENV === "production") {
      console.error("Production error:", {
        error: error.message,
        stack: error.stack,
        info: errorInfo,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        url: window.location.href,
      })
    }
  }

return { handleError }
}
[V0_FILE]typescriptreact:file="components/payment-error-handler.tsx" isMerged="true"
"use client"

import { AlertCircle, CreditCard, RefreshCw, HelpCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface PaymentErrorProps {
  error: string
  onRetry?: () => void
  onContactSupport?: () => void
}

export function PaymentErrorHandler({ error, onRetry, onContactSupport }: PaymentErrorProps) {
  const getErrorType = (errorMessage: string) => {
    const message = errorMessage.toLowerCase()

if (message.includes("declined") || message.includes("card_declined")) {
      return "declined"
    } else if (message.includes("expired") || message.includes("expired_card")) {
      return "expired"
    } else if (message.includes("insufficient") || message.includes("insufficient_funds")) {
      return "insufficient_funds"
    } else if (message.includes("cvc") || message.includes("incorrect_cvc")) {
      return "incorrect_cvc"
    } else if (message.includes("number") || message.includes("incorrect_number")) {
      return "incorrect_number"
    } else if (message.includes("processing") || message.includes("processing_error")) {
      return "processing_error"
    } else if (message.includes("network") || message.includes("connection")) {
      return "network_error"
    }
    return "generic"
  }

const errorType = getErrorType(error)

const getErrorDetails = () => {
    switch (errorType) {
      case "declined":
        return {
          title: "Card Declined",
          description: "Your bank declined this transaction.",
          suggestions: [
            "Contact your bank to authorize the transaction",
            "Check if your card has international transaction restrictions",
            "Verify your billing address matches your bank records",
            "Try a different payment method",
          ],
          icon: <CreditCard className="h-6 w-6 text-red-600" />,
        }

case "expired":
        return {
          title: "Card Expired",
          description: "The card you're trying to use has expired.",
          suggestions: [
            "Use a different card that hasn't expired",
            "Contact your bank for a replacement card",
            "Update your payment method with current card details",
          ],
          icon: <AlertCircle className="h-6 w-6 text-red-600" />,
        }

case "insufficient_funds":
        return {
          title: "Insufficient Funds",
          description: "Your card doesn't have enough available credit or funds.",
          suggestions: [
            "Check your account balance",
            "Use a different payment method",
            "Contact your bank to increase your credit limit",
            "Try again after making a payment to your account",
          ],
          icon: <CreditCard className="h-6 w-6 text-red-600" />,
        }

case "incorrect_cvc":
        return {
          title: "Incorrect Security Code",
          description: "The CVC/CVV code you entered doesn't match your card.",
          suggestions: [
            "Check the 3-digit code on the back of your card (4 digits for Amex)",
            "Make sure you're entering the security code, not your PIN",
            "Try typing the code again carefully",
          ],
          icon: <AlertCircle className="h-6 w-6 text-red-600" />,
        }

case "incorrect_number":
        return {
          title: "Incorrect Card Number",
          description: "The card number you entered is invalid.",
          suggestions: [
            "Double-check your card number for typos",
            "Make sure you're entering the full 16-digit number",
            "Verify you're using a supported card type (Visa, Mastercard, etc.)",
          ],
          icon: <CreditCard className="h-6 w-6 text-red-600" />,
        }

case "processing_error":
        return {
          title: "Processing Error",
          description: "There was a temporary issue processing your payment.",
          suggestions: [
            "Wait a few minutes and try again",
            "Check if the charge appeared on your account",
            "Try a different payment method",
            "Contact support if the issue persists",
          ],
          icon: <RefreshCw className="h-6 w-6 text-red-600" />,
        }

case "network_error":
        return {
          title: "Connection Error",
          description: "We couldn't connect to the payment processor.",
          suggestions: [
            "Check your internet connection",
            "Try refreshing the page",
            "Wait a moment and try again",
            "Contact support if the problem continues",
          ],
          icon: <AlertCircle className="h-6 w-6 text-red-600" />,
        }

default:
        return {
          title: "Payment Error",
          description: "There was an issue processing your payment.",
          suggestions: [
            "Verify all your payment details are correct",
            "Try a different payment method",
            "Contact your bank to ensure the transaction isn't blocked",
            "Reach out to our support team for assistance",
          ],
          icon: <HelpCircle className="h-6 w-6 text-red-600" />,
        }
    }
  }

const errorDetails = getErrorDetails()

return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="text-center">
        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
          {errorDetails.icon}
        </div>
        <CardTitle className="text-xl font-semibold">{errorDetails.title}</CardTitle>
        <CardDescription>{errorDetails.description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="p-4 bg-red-50 rounded-lg border border-red-200">
          <p className="text-sm text-red-800 font-medium mb-2">Error Details:</p>
          <p className="text-sm text-red-700">{error}</p>
        </div>

<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
          <p className="text-sm text-blue-800 font-medium mb-2">What you can try:</p>
          <ul className="text-sm text-blue-700 space-y-1">
            {errorDetails.suggestions.map((suggestion, index) => (
              <li key={index} className="flex items-start gap-2">
                <span className="text-blue-500 mt-1">•</span>
                <span>{suggestion}</span>
              </li>
            ))}
          </ul>
        </div>

<div className="flex flex-col gap-2">
          {onRetry && (
            <Button onClick={onRetry} className="w-full">
              <RefreshCw className="mr-2 h-4 w-4" />
              Try Again
            </Button>
          )}

<Button
            variant="outline"
            onClick={() =>
              window.open(
                "mailto:support@lokate.ai?subject=Payment Issue&body=" +
                  encodeURIComponent(`I'm experiencing a payment issue: ${error}`),
              )
            }
            className="w-full"
          >
            <HelpCircle className="mr-2 h-4 w-4" />
            Contact Support
          </Button>
        </div>

<div className="text-center pt-2 border-t">
          <p className="text-xs text-gray-500 mb-2">
            <strong>Need immediate help?</strong>
          </p>
          <div className="space-y-1">
            <p className="text-xs text-gray-600">
              📧 Email:{" "}
              <a href="mailto:support@lokate.ai" className="text-primary hover:underline">
                support@lokate.ai
              </a>
            </p>
            <p className="text-xs text-gray-600">
              📞 Phone:{" "}
              <a href="tel:+15551234567" className="text-primary hover:underline">
                (555) 123-4567
              </a>
            </p>
            <p className="text-xs text-gray-600">💬 Live Chat: Available 9 AM - 6 PM EST</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/error-utils.ts" isMerged="true"
// Utility functions for error handling and validation

export interface ErrorDetails {
  type: "auth" | "payment" | "network" | "validation" | "service"
  title: string
  message: string
  suggestions: string[]
  canRetry: boolean
  needsSupport: boolean
}

export function parseFirebaseError(error: any): ErrorDetails {
  if (!error?.code) {
    return {
      type: "service",
      title: "Unknown Error",
      message: "An unexpected error occurred.",
      suggestions: ["Please try again or contact support."],
      canRetry: true,
      needsSupport: true,
    }
  }

switch (error.code) {
    case "auth/user-not-found":
      return {
        type: "auth",
        title: "Account Not Found",
        message: "No account exists with this email address.",
        suggestions: [
          "Check your email address for typos",
          "Create a new account by starting a free trial",
          "Contact support if you believe this is an error",
        ],
        canRetry: true,
        needsSupport: false,
      }

case "auth/wrong-password":
    case "auth/invalid-credential":
      return {
        type: "auth",
        title: "Incorrect Password",
        message: "The password you entered is incorrect.",
        suggestions: [
          "Double-check your password",
          'Use the "Forgot password?" link to reset it',
          "Make sure Caps Lock is off",
        ],
        canRetry: true,
        needsSupport: false,
      }

case "auth/too-many-requests":
      return {
        type: "auth",
        title: "Too Many Attempts",
        message: "Too many failed login attempts from this device.",
        suggestions: [
          "Wait 15 minutes before trying again",
          "Reset your password using the link below",
          "Clear your browser cache and cookies",
        ],
        canRetry: false,
        needsSupport: false,
      }

case "auth/network-request-failed":
      return {
        type: "network",
        title: "Connection Error",
        message: "Unable to connect to our servers.",
        suggestions: ["Check your internet connection", "Try refreshing the page", "Disable VPN if you're using one"],
        canRetry: true,
        needsSupport: false,
      }

default:
      return {
        type: "service",
        title: "Service Error",
        message: `Authentication error: ${error.message}`,
        suggestions: [
          "Try again in a few minutes",
          "Clear your browser cache",
          "Contact support with error code: " + error.code,
        ],
        canRetry: true,
        needsSupport: true,
      }
  }
}

export function parseStripeError(error: string): ErrorDetails {
  const errorLower = error.toLowerCase()

if (errorLower.includes("card_declined") || errorLower.includes("generic_decline")) {
    return {
      type: "payment",
      title: "Card Declined",
      message: "Your bank declined this transaction.",
      suggestions: [
        "Contact your bank to authorize the transaction",
        "Check for international transaction restrictions",
        "Verify your billing address matches bank records",
        "Try a different payment method",
      ],
      canRetry: true,
      needsSupport: false,
    }
  }

if (errorLower.includes("expired_card")) {
    return {
      type: "payment",
      title: "Card Expired",
      message: "The card you're trying to use has expired.",
      suggestions: [
        "Use a different card that hasn't expired",
        "Contact your bank for a replacement card",
        "Update your payment method",
      ],
      canRetry: true,
      needsSupport: false,
    }
  }

if (errorLower.includes("insufficient_funds")) {
    return {
      type: "payment",
      title: "Insufficient Funds",
      message: "Your card doesn't have enough available funds.",
      suggestions: [
        "Check your account balance",
        "Use a different payment method",
        "Contact your bank about credit limits",
      ],
      canRetry: true,
      needsSupport: false,
    }
  }

if (errorLower.includes("incorrect_cvc")) {
    return {
      type: "payment",
      title: "Incorrect Security Code",
      message: "The CVC/CVV code doesn't match your card.",
      suggestions: [
        "Check the 3-digit code on the back of your card",
        "For Amex, use the 4-digit code on the front",
        "Make sure you're not entering your PIN",
      ],
      canRetry: true,
      needsSupport: false,
    }
  }

// Default payment error
  return {
    type: "payment",
    title: "Payment Error",
    message: error,
    suggestions: [
      "Verify all payment details are correct",
      "Try a different payment method",
      "Contact your bank if the issue persists",
    ],
    canRetry: true,
    needsSupport: true,
  }
}

export function validateFormData(data: Record<string, any>): { isValid: boolean; errors: string[] } {
  const errors: string[] = []

// Email validation
  if (!data.email || !data.email.includes("@") || !data.email.includes(".")) {
    errors.push("Please enter a valid email address")
  }

// Password validation
  if (!data.password || data.password.length < 8) {
    errors.push("Password must be at least 8 characters long")
  }

// Card number validation (if present)
  if (data.cardNumber) {
    const cleanCard = data.cardNumber.replace(/\s/g, "")
    if (cleanCard.length < 13 || cleanCard.length > 19) {
      errors.push("Please enter a valid card number")
    }
  }

// Expiry validation (if present)
  if (data.cardExpiry) {
    const [month, year] = data.cardExpiry.split("/")
    if (!month || !year || month.length !== 2 || year.length !== 2) {
      errors.push("Please enter expiry date in MM/YY format")
    }
  }

return {
    isValid: errors.length === 0,
    errors,
  }
}
[V0_FILE]typescript:file="hooks/use-error-handling.ts" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { parseFirebaseError, parseStripeError, type ErrorDetails } from "@/lib/error-utils"

export function useErrorHandling() {
  const [error, setError] = useState<string | null>(null)
  const [errorDetails, setErrorDetails] = useState<ErrorDetails | null>(null)
  const [isLoading, setIsLoading] = useState(false)

const handleError = useCallback((err: any, context?: string) => {
    console.error(`Error in ${context || "unknown context"}:`, err)

let details: ErrorDetails

if (err?.code && err.code.startsWith("auth/")) {
      details = parseFirebaseError(err)
    } else if (typeof err === "string" && (err.includes("card") || err.includes("payment"))) {
      details = parseStripeError(err)
    } else if (err instanceof Error) {
      details = {
        type: "service",
        title: "Error",
        message: err.message,
        suggestions: ["Please try again or contact support if the issue persists."],
        canRetry: true,
        needsSupport: true,
      }
    } else {
      details = {
        type: "service",
        title: "Unknown Error",
        message: "An unexpected error occurred.",
        suggestions: ["Please refresh the page and try again."],
        canRetry: true,
        needsSupport: true,
      }
    }

setError(details.message)
    setErrorDetails(details)
  }, [])

const clearError = useCallback(() => {
    setError(null)
    setErrorDetails(null)
  }, [])

const withErrorHandling = useCallback(
    async (asyncFn: () => Promise<any>, context?: string) => {
      setIsLoading(true)
      clearError()

try {
        const result = await asyncFn()
        return result
      } catch (err) {
        handleError(err, context)
        throw err // Re-throw so calling code can handle it if needed
      } finally {
        setIsLoading(false)
      }
    },
    [handleError, clearError],
  )

return {
    error,
    errorDetails,
    isLoading,
    handleError,
    clearError,
    withErrorHandling,
    setIsLoading,
  }
}
[V0_FILE]typescript:file="app/api/create-trial-account/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import Stripe from "stripe"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { name, email, phone, username, cardNumber, cardName, cardExpiry, cardCvc } = body

// Validate required fields
    if (!name || !email || !phone || !username || !cardNumber || !cardName || !cardExpiry || !cardCvc) {
      return NextResponse.json(
        {
          error: "All fields are required",
          details: "Please fill in all required fields to continue.",
        },
        { status: 400 },
      )
    }

// Validate email format
    if (!email.includes("@") || !email.includes(".")) {
      return NextResponse.json(
        {
          error: "Invalid email format",
          details: "Please enter a valid email address (e.g., you@example.com).",
        },
        { status: 400 },
      )
    }

// Validate card expiry format
    if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) {
      return NextResponse.json(
        {
          error: "Invalid expiry date format",
          details: "Please enter expiry date in MM/YY format (e.g., 12/25).",
        },
        { status: 400 },
      )
    }

// Parse expiry date
    const [expMonth, expYear] = cardExpiry.split("/")
    const expMonthNum = Number.parseInt(expMonth, 10)
    const expYearNum = Number.parseInt(expYear, 10)

// Validate expiry date values
    if (expMonthNum < 1 || expMonthNum > 12) {
      return NextResponse.json(
        {
          error: "Invalid expiry month",
          details: "Please enter a valid expiry month (01-12).",
        },
        { status: 400 },
      )
    }

// Check if card is expired
    const currentDate = new Date()
    const currentYear = currentDate.getFullYear() % 100
    const currentMonth = currentDate.getMonth() + 1

if (expYearNum < currentYear || (expYearNum === currentYear && expMonthNum < currentMonth)) {
      return NextResponse.json(
        {
          error: "Card has expired",
          details: "Your card has expired. Please use a different card.",
        },
        { status: 400 },
      )
    }

// Initialize Stripe
    if (!process.env.STRIPE_SECRET_KEY) {
      console.error("Stripe secret key not configured")
      return NextResponse.json(
        {
          error: "Payment service unavailable",
          details: "Our payment service is temporarily unavailable. Please try again later or contact support.",
        },
        { status: 500 },
      )
    }

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
      apiVersion: "2023-10-16",
    })

try {
      // Create payment method first
      const paymentMethod = await stripe.paymentMethods.create({
        type: "card",
        card: {
          number: cardNumber.replace(/\s/g, ""),
          exp_month: expMonthNum,
          exp_year: expYearNum + 2000, // Convert YY to YYYY
          cvc: cardCvc,
        },
        billing_details: {
          name: cardName,
          email: email,
        },
      })

console.log("Payment method created:", paymentMethod.id)

// Create or retrieve customer
      let customer
      const existingCustomers = await stripe.customers.list({
        email: email,
        limit: 1,
      })

if (existingCustomers.data.length > 0) {
        customer = existingCustomers.data[0]
        console.log("Using existing customer:", customer.id)
      } else {
        customer = await stripe.customers.create({
          email: email,
          name: name,
          phone: phone,
          metadata: {
            username: username,
          },
        })
        console.log("Created new customer:", customer.id)
      }

// Attach payment method to customer
      await stripe.paymentMethods.attach(paymentMethod.id, {
        customer: customer.id,
      })

// Set as default payment method
      await stripe.customers.update(customer.id, {
        invoice_settings: {
          default_payment_method: paymentMethod.id,
        },
      })

// Create subscription with 7-day trial
      if (!process.env.STRIPE_PRICE_ID) {
        console.error("Stripe price ID not configured")
        return NextResponse.json(
          {
            error: "Subscription service unavailable",
            details: "Our subscription service is temporarily unavailable. Please try again later or contact support.",
          },
          { status: 500 },
        )
      }

const subscription = await stripe.subscriptions.create({
        customer: customer.id,
        items: [
          {
            price: process.env.STRIPE_PRICE_ID,
          },
        ],
        trial_period_days: 7,
        payment_behavior: "default_incomplete",
        payment_settings: {
          save_default_payment_method: "on_subscription",
        },
        expand: ["latest_invoice.payment_intent"],
        metadata: {
          username: username,
          phone: phone,
        },
      })

console.log("Subscription created:", subscription.id)

// Calculate trial end date
      const trialEndDate = new Date()
      trialEndDate.setDate(trialEndDate.getDate() + 7)

// Get the client secret from the subscription if needed
      const invoice = subscription.latest_invoice as Stripe.Invoice
      const paymentIntent = invoice?.payment_intent as Stripe.PaymentIntent
      const clientSecret = paymentIntent?.client_secret || null

return NextResponse.json({
        success: true,
        subscriptionId: subscription.id,
        customerId: customer.id,
        paymentMethodId: paymentMethod.id,
        trialEnd: subscription.trial_end,
        trialEndDate: trialEndDate.toISOString(),
        nextBillingDate: trialEndDate.toLocaleDateString(),
        clientSecret: clientSecret,
        status: subscription.status,
        message: "Trial account created successfully! Your 7-day free trial has started.",
      })
    } catch (stripeError: any) {
      console.error("Stripe API Error:", stripeError)

// Handle specific Stripe errors with user-friendly messages
      if (stripeError.type === "StripeCardError") {
        switch (stripeError.code) {
          case "card_declined":
            return NextResponse.json(
              {
                error: "card_declined",
                details:
                  "Your card was declined by your bank. Please contact your bank or try a different payment method.",
              },
              { status: 400 },
            )

case "expired_card":
            return NextResponse.json(
              {
                error: "expired_card",
                details: "Your card has expired. Please use a different card.",
              },
              { status: 400 },
            )

case "insufficient_funds":
            return NextResponse.json(
              {
                error: "insufficient_funds",
                details: "Your card has insufficient funds. Please use a different payment method.",
              },
              { status: 400 },
            )

case "incorrect_cvc":
            return NextResponse.json(
              {
                error: "incorrect_cvc",
                details: "The security code (CVC) you entered is incorrect. Please check and try again.",
              },
              { status: 400 },
            )

case "incorrect_number":
            return NextResponse.json(
              {
                error: "incorrect_number",
                details: "The card number you entered is incorrect. Please check and try again.",
              },
              { status: 400 },
            )

case "invalid_expiry_month":
          case "invalid_expiry_year":
            return NextResponse.json(
              {
                error: "invalid_expiry",
                details: "The expiry date you entered is invalid. Please check and try again.",
              },
              { status: 400 },
            )

case "processing_error":
            return NextResponse.json(
              {
                error: "processing_error",
                details: "There was an error processing your payment. Please try again or use a different card.",
              },
              { status: 400 },
            )

default:
            return NextResponse.json(
              {
                error: "card_error",
                details: `Card error: ${stripeError.message}. Please check your card details and try again.`,
              },
              { status: 400 },
            )
        }
      } else if (stripeError.type === "StripeRateLimitError") {
        return NextResponse.json(
          {
            error: "rate_limit",
            details: "Too many payment attempts. Please wait a few minutes before trying again.",
          },
          { status: 429 },
        )
      } else if (stripeError.type === "StripeConnectionError") {
        return NextResponse.json(
          {
            error: "connection_error",
            details: "Unable to connect to payment processor. Please check your internet connection and try again.",
          },
          { status: 503 },
        )
      } else {
        return NextResponse.json(
          {
            error: "payment_processing_failed",
            details: `Payment processing failed: ${stripeError.message}. Please try again or contact support.`,
          },
          { status: 500 },
        )
      }
    }
  } catch (error: any) {
    console.error("Account creation error:", error)

return NextResponse.json(
      {
        error: "account_creation_failed",
        details:
          "Account creation failed due to an unexpected error. Please try again or contact support if the problem persists.",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, Eye, EyeOff, ArrowLeft, AlertCircle } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { FirebaseError } from "firebase/app"

// Google Icon Component
const GoogleIcon = () => (
  <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
    <path
      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
      fill="#4285F4"
    />
    <path
      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      fill="#34A853"
    />
    <path
      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
      fill="#FBBC05"
    />
    <path
      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      fill="#EA4335"
    />
  </svg>
)

export default function LoginPage() {
  const router = useRouter()
  const authContext = useAuth()
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [rememberMe, setRememberMe] = useState(false)
  const [error, setError] = useState<string | null>(null)

// Debug: Log the auth context
  useEffect(() => {
    console.log("🔍 Auth context:", {
      currentUser: authContext?.currentUser?.uid || "none",
      firebaseReady: authContext?.firebaseReady,
      loginFunction: typeof authContext?.login,
    })
  }, [authContext])

// Redirect if already logged in
  useEffect(() => {
    if (authContext?.currentUser) {
      console.log("🔄 User already logged in, redirecting to dashboard")
      router.push("/dashboard")
    }
  }, [authContext?.currentUser, router])

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

try {
      // Check if auth context is available
      if (!authContext) {
        setError("Authentication service is not available. Please refresh the page and try again.")
        return
      }

// Check if login function exists
      if (typeof authContext.login !== "function") {
        setError("Authentication service is not properly initialized. Please refresh the page and try again.")
        return
      }

// Check Firebase readiness
      if (!authContext.firebaseReady) {
        setError("Authentication service is not ready. Please wait a moment and try again.")
        return
      }

// Enhanced validation with specific error messages
      if (!email.trim()) {
        setError("Please enter your email address to continue.")
        return
      }

if (!password.trim()) {
        setError("Please enter your password to continue.")
        return
      }

if (!email.includes("@") || !email.includes(".")) {
        setError("Please enter a valid email address (e.g., you@example.com).")
        return
      }

if (password.length < 6) {
        setError("Password must be at least 6 characters long.")
        return
      }

console.log("🔐 Attempting login for:", email)
      await authContext.login(email, password)

console.log("✅ Login successful, redirecting...")
      // Redirect is handled by the useEffect above
    } catch (error) {
      console.error("❌ Login error:", error)

// Enhanced Firebase error handling with user-friendly messages
      if (error instanceof FirebaseError) {
        switch (error.code) {
          case "auth/api-key-not-valid":
          case "auth/invalid-api-key":
          case "auth/configuration-not-found":
          case "auth/project-not-found":
            setError(
              "Authentication service is experiencing technical difficulties. Please try again in a few minutes.",
            )
            break

case "auth/user-not-found":
            setError(
              "No account found with this email address. Please check your email or start a free trial to create an account.",
            )
            break

case "auth/wrong-password":
          case "auth/invalid-credential":
            setError(
              "The password you entered is incorrect. Please try again or use the 'Forgot password?' link below.",
            )
            break

case "auth/invalid-email":
            setError("The email address format is invalid. Please enter a valid email address.")
            break

case "auth/user-disabled":
            setError("Your account has been temporarily disabled. Please contact our support team for assistance.")
            break

case "auth/too-many-requests":
            setError(
              "Too many failed login attempts. Please wait 15 minutes before trying again, or reset your password.",
            )
            break

case "auth/network-request-failed":
            setError("Unable to connect to our servers. Please check your internet connection and try again.")
            break

case "auth/internal-error":
            setError("An internal error occurred. Please try again in a few minutes.")
            break

default:
            console.error("Unhandled Firebase Auth Error:", error.code, error.message)
            setError(`Login failed: ${error.message}. Please try again or contact support if the issue persists.`)
        }
      } else if (error instanceof Error) {
        if (error.message.includes("Firebase Auth not initialized")) {
          setError("Authentication service is not available. Please refresh the page and try again.")
        } else if (error.message.includes("network") || error.message.includes("fetch")) {
          setError("Connection error. Please check your internet connection and try again.")
        } else {
          setError(`Login failed: ${error.message}. Please try again or contact support if the issue persists.`)
        }
      } else {
        setError("An unexpected error occurred during login. Please refresh the page and try again.")
      }
    } finally {
      setIsLoading(false)
    }
  }

// Show loading state while auth context is initializing
  if (!authContext) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">Initializing authentication...</p>
        </div>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

{/* Login Card */}
            <Card className="w-full max-w-md">
              <CardHeader className="space-y-1 text-center">
                <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
                <CardDescription>
                  Sign in to your Lokate.ai account to access your personalized property alerts
                </CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
                    <div className="flex items-start gap-3">
                      <AlertCircle className="h-5 w-5 text-red-600 mt-0.5 flex-shrink-0" />
                      <div className="flex-1">
                        <h4 className="text-sm font-medium text-red-800 mb-1">Login Failed</h4>
                        <p className="text-sm text-red-700">{error}</p>
                      </div>
                    </div>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium">
                      Email
                    </label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="Enter your email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      className="w-full"
                    />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="password" className="text-sm font-medium">
                      Password
                    </label>
                    <div className="relative">
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="Enter your password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                        className="w-full pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <Eye className="h-4 w-4 text-muted-foreground" />
                        )}
                        <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                      </Button>
                    </div>
                  </div>

<div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <input
                        id="remember"
                        type="checkbox"
                        checked={rememberMe}
                        onChange={(e) => setRememberMe(e.target.checked)}
                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                      />
                      <label htmlFor="remember" className="text-sm text-muted-foreground">
                        Remember me for 30 days
                      </label>
                    </div>
                    <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                      Forgot password?
                    </Link>
                  </div>

{rememberMe && (
                    <div className="text-xs text-muted-foreground bg-amber-50 p-2 rounded border">
                      <strong>Security Note:</strong> Only use "Remember me" on your personal devices. Your login will
                      be saved securely for 30 days.
                    </div>
                  )}

<Button type="submit" className="w-full" disabled={isLoading}>
                    {isLoading ? "Signing in..." : "Sign in"}
                  </Button>
                </form>

<div className="mt-6 text-center">
                  <p className="text-sm text-muted-foreground">
                    Don't have an account?{" "}
                    <NavigationLink href="/trial" className="text-primary hover:underline font-medium">
                      Start your free trial
                    </NavigationLink>
                  </p>
                </div>

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

{/* Social Login Options */}
                <div className="mt-6 flex justify-center">
                  <Button variant="outline" className="w-full max-w-xs" disabled>
                    <GoogleIcon />
                    Google (Coming Soon)
                  </Button>
                </div>

{process.env.NODE_ENV === "development" && (
                  <div className="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
                    <p className="text-sm text-gray-800 mb-2">
                      <strong>Debug Info:</strong>
                    </p>
                    <div className="text-xs text-gray-600 space-y-1">
                      <p>Firebase Ready: {authContext.firebaseReady ? "✅ Yes" : "❌ No"}</p>
                      <p>Login Function: {typeof authContext.login}</p>
                      <p>Current User: {authContext.currentUser?.uid || "None"}</p>
                      <p>Environment: {process.env.NODE_ENV}</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Help text */}
            <div className="text-center text-sm text-muted-foreground max-w-md">
              <p>
                Need help? Contact our{" "}
                <NavigationLink href="/support" className="text-primary hover:underline">
                  support team
                </NavigationLink>{" "}
                or check out our{" "}
                <NavigationLink href="/support#faq" className="text-primary hover:underline">
                  FAQ
                </NavigationLink>
              </p>
            </div>
          </div>
        </div>
      </main>

export default function GettingStartedGuidePage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Guide Header */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                  Getting Started Guide
                </h1>
                <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                  Everything you need to know to start finding your perfect properties with Lokate.ai
                </p>
              </div>
              <div className="w-full max-w-sm border-b pb-6" />
            </div>
          </div>
        </section>

{/* Guide Content */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-3xl space-y-12">
              {/* Introduction */}
              <div className="space-y-4">
                <h2 className="text-2xl font-bold tracking-tight">Welcome to Lokate.ai</h2>
                <p className="text-muted-foreground">
                  Lokate.ai is designed to revolutionize your property search experience by leveraging advanced AI
                  technology to find properties that perfectly match your specific criteria. This guide will walk you
                  through the essential steps to get started and make the most of our platform.
                </p>
                <div className="rounded-lg border bg-muted/50 p-4 flex items-start gap-3">
                  <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                  <p className="text-sm">
                    Our platform processes thousands of property listings daily, using over 200 different criteria to
                    match you with properties that meet your exact specifications.
                  </p>
                </div>
              </div>

{/* Step 1 */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
                    1
                  </div>
                  <h3 className="text-xl font-bold">Creating Your Account</h3>
                </div>
                <p className="text-muted-foreground pl-11">
                  Getting started with Lokate.ai is simple. Begin by creating your account, which gives you access to
                  our 7-day free trial with full platform functionality.
                </p>
                <div className="pl-11 space-y-3">
                  <p>To create your account:</p>
                  <ol className="list-decimal pl-5 space-y-2">
                    <li>Click the "Start my free trial" button on the homepage</li>
                    <li>Enter your email address and create a secure password</li>
                    <li>Verify your email address through the confirmation link we send you</li>
                    <li>Complete your profile with basic information to help personalize your experience</li>
                  </ol>
                  <div className="rounded-lg border bg-green-50 p-4 flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                    <p className="text-sm text-green-800">
                      No credit card is required to start your free trial. You'll get full access to all features for 7
                      days.
                    </p>
                  </div>
                </div>
              </div>

{/* Step 2 */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
                    2
                  </div>
                  <h3 className="text-xl font-bold">Setting Up Your Search Criteria</h3>
                </div>
                <p className="text-muted-foreground pl-11">
                  The power of Lokate.ai comes from its ability to understand and process your specific property
                  requirements. Taking time to set up detailed search criteria will yield the best results.
                </p>
                <div className="pl-11 space-y-3">
                  <p>Key criteria to consider:</p>
                  <ul className="list-disc pl-5 space-y-2">
                    <li>
                      <strong>Location preferences</strong> - Target specific zip codes, neighborhoods, or radius from
                      points of interest
                    </li>
                    <li>
                      <strong>Property specifications</strong> - Type, size, bedrooms, bathrooms, lot size, year built
                    </li>
                    <li>
                      <strong>Price range</strong> - Set your minimum and maximum budget
                    </li>
                    <li>
                      <strong>Special features</strong> - Pool, garage, basement, waterfront, view, etc.
                    </li>
                    <li>
                      <strong>Investment criteria</strong> - Cap rate, cash flow potential, appreciation forecasts
                    </li>
                  </ul>
                  <div className="rounded-lg border bg-amber-50 p-4 flex items-start gap-3">
                    <AlertCircle className="h-5 w-5 text-amber-500 mt-0.5" />
                    <p className="text-sm text-amber-800">
                      Be specific but not too restrictive. Setting too many "must-have" criteria might significantly
                      limit your results. Consider which features are absolute requirements versus preferences.
                    </p>
                  </div>
                </div>
              </div>

{/* Step 3 */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
                    3
                  </div>
                  <h3 className="text-xl font-bold">Understanding Your Daily Alerts</h3>
                </div>
                <p className="text-muted-foreground pl-11">
                  Once your criteria are set, Lokate.ai will send you daily alerts with properties that match your
                  specifications. These alerts are designed to provide you with comprehensive information at a glance.
                </p>
                <div className="pl-11 space-y-3">
                  <p>Each property alert includes:</p>
                  <ul className="list-disc pl-5 space-y-2">
                    <li>
                      <strong>Basic property details</strong> - Address, price, size, bedrooms, bathrooms
                    </li>
                    <li>
                      <strong>Match score</strong> - How closely the property matches your criteria (0-100%)
                    </li>
                    <li>
                      <strong>Market analysis</strong> - Comparative market data and investment potential
                    </li>
                    <li>
                      <strong>Property history</strong> - Previous sales, price changes, days on market
                    </li>
                    <li>
                      <strong>Direct links</strong> - Quick access to listing details and contact information
                    </li>
                  </ul>
                  <div className="rounded-lg border bg-blue-50 p-4 flex items-start gap-3">
                    <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                    <p className="text-sm text-blue-800">
                      You can customize when you receive alerts in your account settings. The default is 7:00 AM local
                      time, but you can adjust this to your preference.
                    </p>
                  </div>
                </div>
              </div>

{/* Step 4 */}
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
                    4
                  </div>
                  <h3 className="text-xl font-bold">Refining Your Search Over Time</h3>
                </div>
                <p className="text-muted-foreground pl-11">
                  The true power of Lokate.ai comes from its ability to learn from your interactions and refine your
                  search results over time.
                </p>
                <div className="pl-11 space-y-3">
                  <p>Ways to improve your results:</p>
                  <ul className="list-disc pl-5 space-y-2">
                    <li>
                      <strong>Provide feedback</strong> - Rate properties in your alerts to help our AI understand your
                      preferences better
                    </li>
                    <li>
                      <strong>Adjust criteria</strong> - Modify your search parameters as you learn more about the
                      market
                    </li>
                    <li>
                      <strong>Save favorites</strong> - Bookmark properties you like to reference later and help train
                      the AI
                    </li>
                    <li>
                      <strong>Set priority levels</strong> - Indicate which criteria are most important to you
                    </li>
                  </ul>
                  <div className="rounded-lg border bg-green-50 p-4 flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                    <p className="text-sm text-green-800">
                      Our AI typically needs about 7-10 days of feedback to significantly improve your match quality.
                      The more you interact with your alerts, the better they become.
                    </p>
                  </div>
                </div>
              </div>

{/* Next Steps */}
              <div className="space-y-4 pt-6">
                <h2 className="text-2xl font-bold tracking-tight">Next Steps</h2>
                <p className="text-muted-foreground">
                  Now that you understand the basics of using Lokate.ai, you're ready to start finding your perfect
                  properties. For more detailed information, check out our other guides:
                </p>
                <div className="flex flex-col gap-4 pt-2">
                  <Link href="/guides/advanced-filters" className="">
                    <Button variant="outline" className="w-full justify-center">
                      <span>Advanced Filtering Guide</span>
                    </Button>
                  </Link>
                </div>
                <div className="rounded-lg border bg-muted/50 p-4 flex items-start gap-3 mt-6">
                  <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                  <p className="text-sm">
                    Need more help? Our support team is available via chat or email to answer any questions you might
                    have about getting started with Lokate.ai.
                  </p>
                </div>
              </div>

{/* Back to Support */}
              <div className="pt-8">
                <Link href="/support">
                  <Button variant="outline" className="gap-2">
                    <ArrowLeft className="h-4 w-4" />
                    Back to Support
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </section>
      </main>

{/* Scroll to top button */}
      <ScrollToTop />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/guides/advanced-filters/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Target, ArrowLeft, CheckCircle, AlertCircle, Info, Map, Home, DollarSign, Percent } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"
import { ScrollToTop } from "@/components/scroll-to-top"

export default function AdvancedFiltersGuidePage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Guide Header */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                  Advanced Filtering Guide
                </h1>
                <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                  Master Lokate.ai's powerful filtering system to find exactly the properties you're looking for
                </p>
              </div>
              <div className="w-full max-w-sm border-b pb-6" />
            </div>
          </div>
        </section>

{/* Guide Content */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-3xl space-y-12">
              {/* Introduction */}
              <div className="space-y-4">
                <h2 className="text-2xl font-bold tracking-tight">Unlocking the Power of Advanced Filtering</h2>
                <p className="text-muted-foreground">
                  Lokate.ai offers over 500 different filtering options to help you find properties that match your
                  exact specifications. This guide will help you understand and leverage these powerful filtering
                  capabilities to narrow down your search and find your ideal properties faster.
                </p>
                <div className="rounded-lg border bg-muted/50 p-4 flex items-start gap-3">
                  <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                  <p className="text-sm">
                    Our advanced filtering system is built on a combination of MLS data, public records, and proprietary
                    data sources to give you the most comprehensive property search experience available.
                  </p>
                </div>
              </div>

{/* Filter Categories */}
              <div className="space-y-4">
                <h2 className="text-2xl font-bold tracking-tight">Filter Categories</h2>
                <p className="text-muted-foreground">
                  Lokate.ai organizes its 500+ filters into intuitive categories to help you quickly find and apply the
                  filters that matter most to you.
                </p>

{/* Location Filters */}
                <div className="rounded-lg border p-6 space-y-4 mt-6">
                  <div className="flex items-center gap-3">
                    <Map className="h-6 w-6 text-primary" />
                    <h3 className="text-xl font-bold">Location Filters</h3>
                  </div>
                  <p className="text-muted-foreground">Narrow down properties by specific geographic criteria.</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                    <div className="space-y-1">
                      <h4 className="font-medium">Basic Location</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>City, State, ZIP code</li>
                        <li>County, Neighborhood</li>
                        <li>School district</li>
                        <li>Radius search (miles from point)</li>
                      </ul>
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-medium">Advanced Location</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Proximity to amenities</li>
                        <li>Flood zone designation</li>
                        <li>Elevation and topography</li>
                      </ul>
                    </div>
                  </div>
                  <div className="rounded-lg bg-green-50 p-3 mt-2">
                    <p className="text-sm text-green-800">
                      <strong>Pro Tip:</strong> Use radius search to define custom search areas around specific points
                      of interest like schools, workplaces, or amenities.
                    </p>
                  </div>
                </div>

{/* Property Characteristics */}
                <div className="rounded-lg border p-6 space-y-4">
                  <div className="flex items-center gap-3">
                    <Home className="h-6 w-6 text-primary" />
                    <h3 className="text-xl font-bold">Property Characteristics</h3>
                  </div>
                  <p className="text-muted-foreground">Filter by specific property features and attributes.</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                    <div className="space-y-1">
                      <h4 className="font-medium">Basic Characteristics</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Property type (single-family, condo, etc.)</li>
                        <li>Bedrooms and bathrooms</li>
                        <li>Square footage (living area)</li>
                        <li>Lot size</li>
                        <li>Year built</li>
                        <li>Stories/levels</li>
                      </ul>
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-medium">Special Features</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Spa, waterfront view</li>
                        <li>Garage size and type</li>
                        <li>Views (mountain, water, city)</li>
                        <li>Architectural style</li>
                        <li>Energy efficiency features</li>
                      </ul>
                    </div>
                  </div>
                  <div className="rounded-lg bg-amber-50 p-3 mt-2">
                    <p className="text-sm text-amber-800">
                      <strong>Important:</strong> Some special features may not be consistently reported across all
                      listings. Setting these as "must-haves" might cause you to miss properties where the feature
                      exists but wasn't properly documented.
                    </p>
                  </div>
                </div>

{/* Financial Filters */}
                <div className="rounded-lg border p-6 space-y-4">
                  <div className="flex items-center gap-3">
                    <DollarSign className="h-6 w-6 text-primary" />
                    <h3 className="text-xl font-bold">Financial Filters</h3>
                  </div>
                  <p className="text-muted-foreground">
                    Find properties that meet your financial criteria and investment goals.
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                    <div className="space-y-1">
                      <h4 className="font-medium">Price & Value</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Price range</li>
                        <li>Price per square foot</li>
                        <li>Price reduction amount/percentage</li>
                        <li>Tax assessed value</li>
                        <li>HOA fees</li>
                      </ul>
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-medium">Investment Metrics</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Cap rate range</li>
                        <li>Cash flow potential</li>
                        <li>Rental yield</li>
                        <li>Appreciation forecast</li>
                        <li>Rehab potential (ARV)</li>
                      </ul>
                    </div>
                  </div>
                  <div className="rounded-lg bg-blue-50 p-3 mt-2">
                    <p className="text-sm text-blue-800">
                      <strong>Insight:</strong> Our AI can estimate investment metrics even for properties not
                      explicitly marketed as investments by analyzing comparable rentals, market trends, and property
                      characteristics.
                    </p>
                  </div>
                </div>

{/* Special Opportunity Filters */}
                <div className="rounded-lg border p-6 space-y-4">
                  <div className="flex items-center gap-3">
                    <Percent className="h-6 w-6 text-primary" />
                    <h3 className="text-xl font-bold">Special Opportunity Filters</h3>
                  </div>
                  <p className="text-muted-foreground">
                    Identify properties with unique investment or purchasing opportunities.
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                    <div className="space-y-1">
                      <h4 className="font-medium">Distressed Properties</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Foreclosures</li>
                        <li>Short sales</li>
                        <li>Bank-owned (REO)</li>
                        <li>Auction properties</li>
                      </ul>
                    </div>
                    <div className="space-y-1">
                      <h4 className="font-medium">Value-Add Opportunities</h4>
                      <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                        <li>Fixer-upper potential</li>
                        <li>Under-market value indicators</li>
                        <li>Development potential</li>
                        <li>Zoning opportunity</li>
                      </ul>
                    </div>
                  </div>
                  <div className="rounded-lg bg-amber-50 p-3 mt-2">
                    <p className="text-sm text-amber-800">
                      <strong>Important:</strong> Special opportunity properties often move quickly and may require
                      additional due diligence. Our system flags potential issues to be aware of before pursuing these
                      properties.
                    </p>
                  </div>
                </div>
              </div>

{/* Advanced Filter Techniques */}
              <div className="space-y-4 pt-6">
                <h2 className="text-2xl font-bold tracking-tight">Advanced Filter Techniques</h2>
                <p className="text-muted-foreground">
                  Beyond applying individual filters, Lokate.ai offers sophisticated techniques to refine your search
                  even further.
                </p>

<div className="space-y-6 mt-4">
                  {/* Filter Combinations */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Filter Combinations & Logic</h3>
                    <p className="text-muted-foreground">
                      Create complex search queries using AND/OR logic between different filter groups. For example,
                      find properties that are either (waterfront OR have a pool) AND (built after 2000) AND (priced
                      under $500,000).
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>Example:</strong> To find a vacation rental investment, you might combine filters for
                        properties in tourist areas, with 3+ bedrooms, within walking distance to attractions, and with
                        a cap rate above 6%.
                      </p>
                    </div>
                  </div>

{/* Saved Searches */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Saved Searches & Variations</h3>
                    <p className="text-muted-foreground">
                      Save multiple search configurations to quickly switch between different property hunting
                      strategies. Create variations of your main search to test different parameters without starting
                      from scratch.
                    </p>
                    <div className="rounded-lg border bg-green-50 p-4 mt-2 flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
                      <p className="text-sm text-green-800">
                        Pro users can create up to 25 saved searches with different alert frequencies for each (daily,
                        instant, weekly).
                      </p>
                    </div>
                  </div>

{/* Exclusion Filters */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">Exclusion Filters</h3>
                    <p className="text-muted-foreground">
                      Sometimes defining what you don't want is as important as defining what you do want. Use exclusion
                      filters to remove properties with specific characteristics from your results.
                    </p>
                    <div className="rounded-lg border bg-muted/50 p-4 mt-2">
                      <p className="text-sm">
                        <strong>Example:</strong> Exclude properties on busy streets, in flood zones, with HOA
                        restrictions against rentals, or with specific known issues like foundation problems.
                      </p>
                    </div>
                  </div>

{/* AI-Assisted Filtering */}
                  <div className="space-y-2">
                    <h3 className="text-xl font-bold">AI-Assisted Filtering</h3>
                    <p className="text-muted-foreground">
                      Let our AI help you discover filter combinations you might not have considered. Based on your
                      interactions and feedback, our system can suggest additional filters that might improve your
                      results.
                    </p>
                    <div className="rounded-lg border bg-blue-50 p-4 mt-2 flex items-start gap-3">
                      <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                      <p className="text-sm text-blue-800">
                        The more you interact with your search results (saving favorites, viewing details, providing
                        feedback), the better our AI becomes at suggesting relevant filters.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

{/* Filter Priority System */}
              <div className="space-y-4 pt-6">
                <h2 className="text-2xl font-bold tracking-tight">Filter Priority System</h2>
                <p className="text-muted-foreground">
                  Lokate.ai's unique filter priority system allows you to indicate how important each filter is to your
                  search, rather than treating all filters as absolute requirements.
                </p>

<div className="space-y-4 mt-4">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="rounded-lg border p-4 bg-red-50">
                      <h4 className="font-bold text-red-800">Must-Have</h4>
                      <p className="text-sm text-red-700 mt-1">
                        Properties must meet these criteria to appear in your results. Use sparingly for absolute
                        requirements.
                      </p>
                    </div>
                    <div className="rounded-lg border p-4 bg-amber-50">
                      <h4 className="font-bold text-amber-800">Strong Preference</h4>
                      <p className="text-sm text-amber-700 mt-1">
                        Properties meeting these criteria are prioritized but won't be excluded if they don't match.
                      </p>
                    </div>
                    <div className="rounded-lg border p-4 bg-green-50">
                      <h4 className="font-bold text-green-800">Nice-to-Have</h4>
                      <p className="text-sm text-green-700 mt-1">
                        These criteria influence the match score but have minimal impact on which properties appear.
                      </p>
                    </div>
                  </div>

<div className="rounded-lg border bg-muted/50 p-4 mt-2">
                    <p className="text-sm">
                      <strong>Example:</strong> You might set "3+ bedrooms" as Must-Have, "garage" as Strong Preference,
                      and "pool" as Nice-to-Have. This ensures you see all 3+ bedroom homes, with those having garages
                      appearing higher in your results, and pool homes getting a slight boost in match score.
                    </p>
                  </div>
                </div>
              </div>

{/* Best Practices */}
              <div className="space-y-4 pt-6">
                <h2 className="text-2xl font-bold tracking-tight">Filter Best Practices</h2>
                <p className="text-muted-foreground">
                  Follow these guidelines to get the most out of Lokate.ai's advanced filtering system.
                </p>

<div className="space-y-4 mt-4">
                  <ul className="space-y-3">
                    <li className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <p>
                        <strong>Start broad, then narrow.</strong> Begin with your most essential criteria, review
                        results, then gradually add more specific filters.
                      </p>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <p>
                        <strong>Use price range strategically.</strong> Consider setting your maximum price slightly
                        above your actual budget to catch undervalued properties or those likely to accept lower offers.
                      </p>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <p>
                        <strong>Leverage the priority system.</strong> Reserve "Must-Have" for your absolute
                        requirements and use "Strong Preference" for most other important criteria.
                      </p>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <p>
                        <strong>Create multiple search profiles.</strong> Set up different searches for different
                        strategies or property types rather than trying to capture everything in one search.
                      </p>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" />
                      <p>
                        <strong>Review and refine regularly.</strong> Market conditions change, and so might your
                        preferences. Review your filters every few weeks to ensure they still align with your goals.
                      </p>
                    </li>
                  </ul>

<div className="rounded-lg border bg-amber-50 p-4 mt-4 flex items-start gap-3">
                    <AlertCircle className="h-5 w-5 text-amber-500 mt-0.5" />
                    <p className="text-sm text-amber-800">
                      The most common mistake users make is setting too many "Must-Have" filters, which can severely
                      limit results. Be selective about which criteria are truly non-negotiable.
                    </p>
                  </div>
                </div>
              </div>

{/* Next Steps */}
              <div className="space-y-4 pt-6">
                <h2 className="text-2xl font-bold tracking-tight">Next Steps</h2>
                <p className="text-muted-foreground">
                  Now that you understand Lokate.ai's advanced filtering capabilities, you're ready to create highly
                  targeted property searches. For more information on related topics, check out our other guides:
                </p>
                <div className="flex flex-col gap-4 pt-2">
                  <Link href="/guides/getting-started" className="">
                    <Button variant="outline" className="w-full justify-center">
                      <span>Getting Started Guide</span>
                    </Button>
                  </Link>
                </div>
                <div className="rounded-lg border bg-muted/50 p-4 flex items-start gap-3 mt-6">
                  <Info className="h-5 w-5 text-blue-500 mt-0.5" />
                  <p className="text-sm">
                    Need help with specific filters? Our support team can provide guidance on setting up filters for
                    particular investment strategies or property types.
                  </p>
                </div>
              </div>

{/* Scroll to top button */}
      <ScrollToTop />
    </div>
  )
}
[V0_FILE]json:file="public/site.webmanifest" isMerged="true"
{
  "name": "Lokate.ai",
  "short_name": "Lokate",
  "description": "AI-Powered Real Estate Search for New Agents",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
[V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Figma-favicon-16x16-removebg-preview-DJGxMzqsFeLdN75GPw2X9DaVzo1KU3.png" isMerged="true"
[V0_FILE]png:file="public/favicon-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Figma-Favicon-32x32-removebg-preview-r1Uhqo2fOQAZPrUNAK7pzVSVzxYGRR.png" isMerged="true"
[V0_FILE]png:file="public/android-chrome-192x192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/android-chrome-192x192-removebg-preview-vGUSZ1rApYNzIBl0fEPrHo9Qpthpwx.png" isMerged="true"
[V0_FILE]png:file="public/android-chrome-512x512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/android-chrome-512x512-MmehqsvDFKAmvMxjZ1yWdsFAlAaEgH.png" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apple-touch-icon-removebg-preview-splxWc3JhG7hFmjCRc3GDLK4VvHFnR.png" isMerged="true"
[V0_FILE]png:file="public/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/favicon-pLNiDIrg7LuxeAi00ePzXewEjIonEF.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import {
  CheckCircle,
  Mail,
  ArrowRight,
  Building,
  TrendingUp,
  Clock,
  Target,
  BarChart3,
  Zap,
  Shield,
  Crown,
  Brain,
  DollarSign,
  Users,
  MessageSquare,
  Sparkles,
  X,
} from "lucide-react"
import { useState } from "react"
import { NavigationLink } from "@/components/navigation-link"

export default function LandingPage() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

{/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>

{/* Desktop CTA Button */}
          <div className="hidden lg:flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>

{/* Mobile Layout */}
          <div className="flex lg:hidden items-center gap-4">
            {/* Mobile CTA Button */}
            <NavigationLink href="/trial">
              <Button size="sm" className="px-4">
                Start my free trial
              </Button>
            </NavigationLink>

{/* Mobile Menu Button */}
            <Button
              variant="ghost"
              size="sm"
              className="h-8 w-8 p-0"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? (
                <X className="h-4 w-4" />
              ) : (
                <svg
                  className="h-4 w-4"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                </svg>
              )}
              <span className="sr-only">Toggle menu</span>
            </Button>
          </div>
        </div>

{/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="lg:hidden border-t bg-background">
            <nav className="container py-4 space-y-4">
              <NavigationLink
                href="/#features"
                className="block text-sm font-medium hover:text-primary py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                Features
              </NavigationLink>
              <NavigationLink
                href="/#pricing"
                className="block text-sm font-medium hover:text-primary py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                Pricing
              </NavigationLink>
              <NavigationLink
                href="/about"
                className="block text-sm font-medium hover:text-primary py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                About
              </NavigationLink>
              <NavigationLink
                href="/support"
                className="block text-sm font-medium hover:text-primary py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                Support
              </NavigationLink>
              <NavigationLink
                href="/login"
                className="block text-sm font-medium hover:text-primary py-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                Login
              </NavigationLink>
            </nav>
          </div>
        )}
      </header>

<main className="flex-1">
        {/* Hero Section */}
        <section
          className="w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-gradient-to-b from-background to-muted"
          id="hero"
        >
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 xl:grid-cols-2">
              <div className="flex flex-col justify-center space-y-4">
                <div className="space-y-2">
                  <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                    Better Than MLS. Smarter Than Your Competition.
                  </h1>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl">
                    AI-powered real estate intelligence that finds deals MLS can't. Type any search criteria in plain
                    English and get instant results. At $9.99/month, it's stupid not to try.
                  </p>
                </div>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <NavigationLink href="/trial">
                    <Button size="lg" className="gap-2">
                      Start free 7-day trial
                      <ArrowRight className="h-4 w-4" />
                    </Button>
                  </NavigationLink>
                  <Link href="#how-it-works">
                    <Button size="lg" variant="outline">
                      See How It Works
                    </Button>
                  </Link>
                </div>
              </div>
              <div className="flex items-center justify-center">
                <div className="relative w-full max-w-[500px] aspect-video overflow-hidden rounded-xl border bg-background shadow-xl">
                  <Image
                    src="/images/dashboard-preview.png"
                    width={800}
                    height={500}
                    alt="Lokate.ai AI-powered property search dashboard showing natural language search and predictive analytics"
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Problem Statement */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-background" id="problem">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  MLS is Basic, Limited, and Holding You Back
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  New agents struggle with outdated systems that cost too much and deliver too little
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
              <div className="flex flex-col justify-center space-y-4">
                <ul className="grid gap-6">
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <DollarSign className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">You Can Do Better</h3>
                      <p className="text-muted-foreground">
                        Why settle with what the MLS offers when Lokate is a no-brainer
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <Clock className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Limited Search Options</h3>
                      <p className="text-muted-foreground">
                        Rigid filters that can't understand what you're really looking for
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <Target className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Struggling to Close Deals</h3>
                      <p className="text-muted-foreground">
                        Missing opportunities because you can't find the right properties fast enough
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="flex items-center justify-center">
                <div className="relative w-full max-w-[500px] aspect-video overflow-hidden rounded-xl border bg-background shadow-xl">
                  <Image
                    src="/images/client-intake-form.png"
                    width={800}
                    height={500}
                    alt="Complex traditional MLS interface showing overwhelming filter options and outdated design"
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
            <div className="flex justify-center pt-8">
              <NavigationLink href="/trial">
                <Button size="lg" className="px-12 py-4 text-lg">
                  Try the better solution for free
                </Button>
              </NavigationLink>
            </div>
          </div>
        </section>

{/* Solution Overview */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted" id="solution">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  The AI-Powered Real Estate Intelligence Platform
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Professional-grade tools that outperform MLS at a fraction of the cost
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-4">
              <div className="flex flex-col items-center space-y-2 rounded-lg border bg-background p-6 shadow-sm">
                <Brain className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">AI-Powered Search</h3>
                <p className="text-center text-sm text-muted-foreground">
                  Type searches like "3br homes under $400k near good schools" and get instant results
                </p>
              </div>
              <div className="flex flex-col items-center space-y-2 rounded-lg border bg-background p-6 shadow-sm">
                <Sparkles className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Unlimited Customization</h3>
                <p className="text-center text-sm text-muted-foreground">
                  Create any search criteria you can imagine - no limitations on filters or property characteristics
                </p>
              </div>
              <div className="flex flex-col items-center space-y-2 rounded-lg border bg-background p-6 shadow-sm">
                <BarChart3 className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Beyond MLS Data</h3>
                <p className="text-center text-sm text-muted-foreground">
                  Create any search criteria you can imagine - no rigid filters or limitations
                </p>
              </div>
              <div className="flex flex-col items-center space-y-2 rounded-lg border bg-background p-6 shadow-sm">
                <MessageSquare className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Instant Client Matching</h3>
                <p className="text-center text-sm text-muted-foreground">
                  AI matches properties to your clients automatically - close deals faster
                </p>
              </div>
            </div>
          </div>
        </section>

{/* How It Works */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-background" id="how-it-works">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">How It Works</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Four simple steps to build your first reliable deal-closing system
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl items-start gap-12 py-12 md:grid-cols-2 lg:grid-cols-4">
              <div className="group flex flex-col items-center space-y-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
                  1
                </div>
                <h3 className="text-xl font-bold">Describe Your Clients Dream Home</h3>
                <p className="text-center text-muted-foreground">
                  Use natural language to describe any home criteria - our AI understands exactly what you mean
                </p>
              </div>
              <div className="group flex flex-col items-center space-y-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
                  2
                </div>
                <h3 className="text-xl font-bold">AI Analyzes Everything</h3>
                <p className="text-center text-muted-foreground">
                  Advanced algorithms scan multiple data sources and predict market trends in real-time
                </p>
              </div>
              <div className="group flex flex-col items-center space-y-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
                  3
                </div>
                <h3 className="text-xl font-bold">Get Smart Alerts</h3>
                <p className="text-center text-muted-foreground">
                  Receive curated home matches with AI insights about timing and client fit
                </p>
              </div>
              <div className="group flex flex-col items-center space-y-4">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-xl font-bold text-primary-foreground">
                  4
                </div>
                <h3 className="text-xl font-bold">Close More Deals</h3>
                <p className="text-center text-muted-foreground">
                  Present amazing homes to clients and close deals easier than ever before
                </p>
              </div>
            </div>
            <div className="flex justify-center pt-8">
              <NavigationLink href="/trial">
                <Button size="lg" className="px-12 py-4 text-lg">
                  Start Closing Today
                </Button>
              </NavigationLink>
            </div>
          </div>
        </section>

{/* Key Benefits */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted" id="benefits">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Why New Agents Love Lokate.ai</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Build your reputation and close deals easier than agents using traditional methods
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
              <div className="flex flex-col justify-center space-y-4">
                <ul className="grid gap-6">
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <TrendingUp className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Close Your First 3 Deals Faster</h3>
                      <p className="text-muted-foreground">
                        AI-powered matching helps you present amazing homes and close your first 3 deals exactly how you
                        imagined
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <Crown className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Build Your Brand</h3>
                      <p className="text-muted-foreground">
                        Consistently deliver properties that exceed expectations and become the go-to agent in your area
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <DollarSign className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Gain A Competitive Advantage</h3>
                      <p className="text-muted-foreground">
                        Access insights and properties that other agents miss, giving you the edge in every situation
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                      <Brain className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold">Work Smarter, Not Harder</h3>
                      <p className="text-muted-foreground">
                        Automate property research and focus your time on building relationships and closing deals
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="flex items-center justify-center">
                <div className="relative w-full max-w-[500px] aspect-video overflow-hidden rounded-xl border bg-background shadow-xl">
                  <Image
                    src="/images/quick-stats-dashboard.png"
                    width={800}
                    height={500}
                    alt="Lokate.ai success dashboard showing deals closed, commission earned, and client satisfaction metrics for new agents"
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Target Audience Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-background" id="audience">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-md py-12">
              <div className="flex flex-col items-center space-y-6 rounded-xl border bg-background p-8 shadow-sm">
                <Building className="h-16 w-16 text-primary" />
                <h3 className="text-3xl font-bold text-center">Perfect for New Agents</h3>
                <ul className="grid gap-4 text-center">
                  <li className="flex flex-col items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="font-medium">Create Raving Fans</span>
                  </li>
                  <li className="flex flex-col items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="font-medium">Become The Go-To Agent</span>
                  </li>
                  <li className="flex flex-col items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="font-medium">Dominate Your Market</span>
                  </li>
                  <li className="flex flex-col items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="font-medium">Exceed Client Expectations</span>
                    <span className="text-sm text-muted-foreground"></span>
                  </li>
                </ul>
                <NavigationLink href="/demo">
                  <Button size="lg" className="px-8">
                    Start Your Success Story
                  </Button>
                </NavigationLink>
              </div>
            </div>
          </div>
        </section>

{/* Features Deep Dive */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted" id="features">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  Enterprise-Grade Tools at Startup Prices
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Professional features that rival $10,000+ enterprise solutions
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl items-start gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Brain className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">AI-Powered Search</h3>
                <p className="text-muted-foreground">
                  Natural language processing understands complex search queries better than any traditional MLS system
                </p>
              </div>
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Sparkles className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Unlimited Customization</h3>
                <p className="text-muted-foreground">
                  Create any search criteria you can imagine - no limitations on filters or property characteristics
                </p>
              </div>
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Users className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Smart Client Matching</h3>
                <p className="text-muted-foreground">Automatically match properties to client preferences and budget</p>
              </div>
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Target className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Amazing Value</h3>
                <p className="text-muted-foreground">At Only $9.99/month, it's less than a Starbucks run!</p>
              </div>
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Mail className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Real-Time Alerts</h3>
                <p className="text-muted-foreground">
                  Get instant notifications when properties matching your criteria hit the market or change status
                </p>
              </div>
              <div className="flex flex-col items-start space-y-2">
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <BarChart3 className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Work Smarter, Not Harder</h3>
                <p className="text-muted-foreground">
                  Automate property research and focus your time on building relationships and closing deals
                </p>
              </div>
            </div>
            <div className="flex justify-center pt-8">
              <NavigationLink href="/trial">
                <Button size="lg" className="px-12 py-4 text-lg">
                  Get Enterprise Tools for $9.99
                </Button>
              </NavigationLink>
            </div>
          </div>
        </section>

{/* Data Reliability */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-background" id="data-sources">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Superior Data, Smarter Insights</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Reach beyond your competitors with AI-powered analysis and predictions
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-4xl gap-8 py-12 md:grid-cols-2">
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-8 shadow-sm">
                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
                  <BarChart3 className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold text-center">Beyond Your Grandpa's MLS</h3>
                <p className="text-center text-muted-foreground">Access multiple data sources to be a better agent</p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-8 shadow-sm">
                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
                  <Brain className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold text-center">AI-Enhanced Insights</h3>
                <p className="text-center text-muted-foreground">
                  Every listing enhanced with AI predictions on pricing, market time, and buyer interest
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-8 shadow-sm">
                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
                  <Zap className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold text-center">Lightning Fast Updates</h3>
                <p className="text-center text-muted-foreground">
                  Data refreshed every 5 minutes - be first to know about new opportunities
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-8 shadow-sm">
                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10">
                  <Shield className="h-8 w-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold text-center">Verified Accuracy</h3>
                <p className="text-center text-muted-foreground">
                  AI cross-references multiple sources to ensure data accuracy and completeness
                </p>
              </div>
            </div>
          </div>
        </section>

{/* Pricing Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted" id="pricing">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">It's Stupid NOT to Try This</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Better than MLS at 1/5th of the cost. Seriously, what are you waiting for?
                </p>
              </div>
            </div>
            <div className="mx-auto max-w-2xl py-12">
              <div className="flex flex-col rounded-lg border bg-primary p-8 shadow-sm relative overflow-hidden">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold text-primary-foreground">AI Real Estate Intelligence</h3>
                  <p className="text-primary-foreground/90">Everything you need to close your first 10 deals</p>
                </div>
                <div className="mt-4 space-y-2">
                  <div className="flex items-baseline gap-2">
                    <div className="text-4xl font-bold text-primary-foreground">$9.99</div>
                  </div>
                  <p className="text-primary-foreground/90">per month</p>
                  <p className="text-xs text-primary-foreground/70">vs. $50/month for basic MLS access</p>
                </div>
                <ul className="mt-6 space-y-2">
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>Natural Language Property Search</span>
                  </li>
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>AI Predictive Market Analytics</span>
                  </li>
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>Off-Market Deal Access</span>
                  </li>
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>Smart Client Matching</span>
                  </li>
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>Instant Mobile Alerts</span>
                  </li>
                  <li className="flex items-center gap-2 text-primary-foreground">
                    <CheckCircle className="h-4 w-4" />
                    <span>Unlimited AI-Powered Searches</span>
                  </li>
                </ul>
                <div className="mt-6">
                  <NavigationLink href="/trial">
                    <Button variant="secondary" className="w-full text-lg py-3">
                      Start My Free Trial
                    </Button>
                  </NavigationLink>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/trial/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Target,
  ArrowLeft,
  CreditCard,
  Mail,
  Phone,
  Lock,
  User,
  Eye,
  EyeOff,
  CheckCircle,
  AlertCircle,
  AtSign,
} from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"
import { useAuth } from "@/contexts/auth-context"
import { FirebaseError } from "firebase/app"
import { doc, setDoc, getDoc } from "firebase/firestore"
import { db } from "@/lib/firebase-config"
import { firebaseUtils } from "@/lib/firebase-utils"

export default function TrialSignupPage() {
  const router = useRouter()
  const { signup, firebaseReady } = useAuth()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [usernameChecking, setUsernameChecking] = useState(false)
  const [usernameAvailable, setUsernameAvailable] = useState<boolean | null>(null)
  const [stripeData, setStripeData] = useState<any>({})

// Personal Information
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)

// Credit Card Information
  const [cardNumber, setCardNumber] = useState("")
  const [cardName, setCardName] = useState("")
  const [cardExpiry, setCardExpiry] = useState("")
  const [cardCvc, setCardCvc] = useState("")

// Check username availability
  const checkUsernameAvailability = async (usernameToCheck: string) => {
    if (!usernameToCheck || usernameToCheck.length < 3) {
      setUsernameAvailable(null)
      return
    }

setUsernameChecking(true)
    try {
      if (firebaseReady && db) {
        // Check in Firestore
        const usernameDoc = await getDoc(doc(db, "usernames", usernameToCheck.toLowerCase()))
        setUsernameAvailable(!usernameDoc.exists())
      } else {
        // Fallback: check localStorage
        const existingUsers = JSON.parse(localStorage.getItem("users") || "{}")
        setUsernameAvailable(!existingUsers[usernameToCheck.toLowerCase()])
      }
    } catch (error) {
      console.error("Error checking username:", error)
      setUsernameAvailable(null)
    } finally {
      setUsernameChecking(false)
    }
  }

// Check if email exists in Firebase
  const checkEmailExists = async (emailToCheck: string): Promise<boolean> => {
    if (!firebaseReady || !db) return false

try {
      return await firebaseUtils.emailExists(emailToCheck)
    } catch (error) {
      console.error("Error checking email:", error)
      // Don't block signup if email check fails due to permissions
      console.warn("⚠️ Email existence check failed, continuing with signup")
      return false
    }
  }

// Handle username change with debounced availability check
  const handleUsernameChange = (value: string) => {
    // Only allow alphanumeric characters and underscores
    const sanitizedValue = value.replace(/[^a-zA-Z0-9_]/g, "").toLowerCase()
    setUsername(sanitizedValue)
    setUsernameAvailable(null)

// Debounce the username check
    if (sanitizedValue.length >= 3) {
      const timeoutId = setTimeout(() => {
        checkUsernameAvailability(sanitizedValue)
      }, 500)

return () => clearTimeout(timeoutId)
    }
  }

// Add this validation function before the handleSubmit function
  const validateCardData = () => {
    const errors = []

// Validate card number (basic length check)
    const cleanCardNumber = cardNumber.replace(/\s/g, "")
    if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) {
      errors.push("Card number must be between 13-19 digits")
    }

// Validate expiry date format and future date
    if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) {
      errors.push("Expiry date must be in MM/YY format")
    } else {
      const [month, year] = cardExpiry.split("/")
      const currentDate = new Date()
      const currentYear = currentDate.getFullYear() % 100
      const currentMonth = currentDate.getMonth() + 1

const expMonth = Number.parseInt(month)
      const expYear = Number.parseInt(year)

if (expMonth < 1 || expMonth > 12) {
        errors.push("Invalid expiry month")
      }

if (expYear < currentYear || (expYear === currentYear && expMonth < currentMonth)) {
        errors.push("Card has expired")
      }
    }

// Validate CVC
    if (cardCvc.length < 3 || cardCvc.length > 4) {
      errors.push("CVC must be 3 or 4 digits")
    }

return errors
  }

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

try {
      // Enhanced validation with specific error messages
      if (!name.trim()) {
        throw new Error("Please enter your full name to continue.")
      }

if (!email.trim()) {
        throw new Error("Please enter your email address to continue.")
      }

if (!email.includes("@") || !email.includes(".")) {
        throw new Error("Please enter a valid email address (e.g., you@example.com).")
      }

if (!phone.trim()) {
        throw new Error("Please enter your phone number for account verification.")
      }

if (!username.trim()) {
        throw new Error("Please choose a username for your account.")
      }

if (username.length < 3) {
        throw new Error("Username must be at least 3 characters long.")
      }

if (usernameAvailable === false) {
        throw new Error("This username is already taken. Please choose a different one.")
      }

if (!password.trim()) {
        throw new Error("Please create a password for your account.")
      }

if (password.length < 8) {
        throw new Error("Password must be at least 8 characters long for security.")
      }

// Enhanced card validation
      const cleanCardNumber = cardNumber.replace(/\s/g, "")
      if (!cleanCardNumber) {
        throw new Error("Please enter your credit card number.")
      }

if (cleanCardNumber.length < 13 || cleanCardNumber.length > 19) {
        throw new Error("Please enter a valid credit card number (13-19 digits).")
      }

if (!cardName.trim()) {
        throw new Error("Please enter the name as it appears on your credit card.")
      }

if (!cardExpiry.trim()) {
        throw new Error("Please enter your card's expiration date.")
      }

if (cardExpiry.length !== 5 || !cardExpiry.includes("/")) {
        throw new Error("Please enter expiry date in MM/YY format (e.g., 12/25).")
      }

if (!cardCvc.trim()) {
        throw new Error("Please enter your card's security code (CVC).")
      }

if (cardCvc.length < 3 || cardCvc.length > 4) {
        throw new Error("Please enter a valid 3 or 4-digit security code (CVC).")
      }

// Validate expiry date
      const [expMonth, expYear] = cardExpiry.split("/")
      const currentDate = new Date()
      const currentYear = currentDate.getFullYear() % 100
      const currentMonth = currentDate.getMonth() + 1

const expMonthNum = Number.parseInt(expMonth)
      const expYearNum = Number.parseInt(expYear)

if (expMonthNum < 1 || expMonthNum > 12) {
        throw new Error("Please enter a valid expiry month (01-12).")
      }

if (expYearNum < currentYear || (expYearNum === currentYear && expMonthNum < currentMonth)) {
        throw new Error("Your card has expired. Please use a different card.")
      }

// Rest of the existing logic...
      const formData = {
        name: name.trim(),
        email: email.trim(),
        phone: phone.trim(),
        username: username.trim(),
        cardNumber: cleanCardNumber,
        cardName: cardName.trim(),
        cardExpiry: cardExpiry.trim(),
        cardCvc: cardCvc.trim(),
      }

// Check if email already exists
      if (firebaseReady) {
        try {
          const emailExists = await checkEmailExists(email)
          if (emailExists) {
            throw new Error(
              "An account with this email already exists. Please log in instead or use a different email address.",
            )
          }
        } catch (emailCheckError) {
          // Only throw the error if it's about email already existing
          if (emailCheckError instanceof Error && emailCheckError.message.includes("already exists")) {
            throw emailCheckError
          }
          // For permission errors or other issues, log and continue
          console.warn("⚠️ Email check failed, continuing with account creation:", emailCheckError)
        }
      }

// Create Stripe subscription
      console.log("Creating Stripe customer and subscription...")
      const stripeResponse = await fetch("/api/create-trial-account", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

const stripeDataResponse = await stripeResponse.json()

if (!stripeResponse.ok) {
        const errorMessage = stripeDataResponse.error || stripeDataResponse.message || "Payment processing failed"

// Enhanced Stripe error handling with more specific checks
        if (errorMessage.includes("card_declined") || errorMessage.includes("generic_decline")) {
          throw new Error(
            "Your card was declined by your bank. Please contact your bank or try a different payment method.",
          )
        } else if (errorMessage.includes("expired_card")) {
          throw new Error("Your card has expired. Please use a different card.")
        } else if (errorMessage.includes("insufficient_funds")) {
          throw new Error("Your card has insufficient funds. Please use a different payment method.")
        } else if (errorMessage.includes("incorrect_cvc")) {
          throw new Error("The security code (CVC) you entered is incorrect. Please check and try again.")
        } else if (errorMessage.includes("incorrect_number")) {
          throw new Error("The card number you entered is incorrect. Please check and try again.")
        } else if (errorMessage.includes("invalid_expiry_month") || errorMessage.includes("invalid_expiry_year")) {
          throw new Error("The expiry date you entered is invalid. Please check and try again.")
        } else if (errorMessage.includes("processing_error")) {
          throw new Error("There was an error processing your payment. Please try again or use a different card.")
        } else if (errorMessage.includes("rate_limit")) {
          throw new Error("Too many payment attempts. Please wait a few minutes before trying again.")
        } else {
          // Log the actual error for debugging
          console.error("Stripe API Error:", stripeDataResponse)
          throw new Error(`Payment failed: ${errorMessage}. Please check your card details and try again.`)
        }
      }

// Rest of existing Firebase and localStorage logic...
      // [Keep the existing Firebase user creation and data storage logic]
      console.log("Stripe trial subscription created successfully:", stripeDataResponse)
      setStripeData(stripeDataResponse)

// Step 2: Create Firebase user
      if (firebaseReady) {
        try {
          console.log("Creating new Firebase user...")
          const user = await signup(email, password, {
            name,
            phone,
            username,
            stripeCustomerId: stripeDataResponse.customerId,
            stripeSubscriptionId: stripeDataResponse.subscriptionId,
            trialEnd: stripeDataResponse.trialEnd,
            subscriptionStatus: "trialing",
            planType: "pro",
          })

console.log("Firebase user created successfully:", user.uid)

// Store user data in Firestore
          await setDoc(
            doc(db, "users", user.uid),
            {
              name,
              email,
              phone,
              username,
              stripeCustomerId: stripeDataResponse.customerId,
              stripeSubscriptionId: stripeDataResponse.subscriptionId,
              trialEnd: stripeDataResponse.trialEnd,
              subscriptionStatus: "trialing",
              planType: "pro",
              monthlyPrice: 10.59,
              createdAt: new Date().toISOString(),
            },
            { merge: true },
          )

// Reserve the username in Firestore
          await setDoc(
            doc(db, "usernames", username.toLowerCase()),
            {
              uid: user.uid,
              username: username,
              createdAt: new Date().toISOString(),
            },
            { merge: true },
          )

console.log("Username reserved in Firestore:", username)
        } catch (firebaseError) {
          console.error("Firebase error:", firebaseError)

// Handle specific Firebase errors
          if (firebaseError instanceof FirebaseError) {
            switch (firebaseError.code) {
              case "auth/email-already-in-use":
                setError("This email is already registered. Please log in instead.")
                setIsLoading(false)
                return
              case "auth/invalid-email":
                setError("Invalid email address.")
                setIsLoading(false)
                return
              case "auth/weak-password":
                setError("Password is too weak. Please use at least 8 characters.")
                setIsLoading(false)
                return
              case "auth/invalid-credential":
                setError("Invalid credentials. Please check your email and password.")
                setIsLoading(false)
                return
              default:
                console.error("Unhandled Firebase error:", firebaseError.code, firebaseError.message)
            }
          }

// Continue with localStorage fallback if Firebase fails
          console.log("Continuing with localStorage fallback due to Firebase error")
        }
      } else {
        console.log("Firebase not ready, storing user data in localStorage")
      }

// Store user info in localStorage as fallback
      const existingUsers = JSON.parse(localStorage.getItem("users") || "{}")
      existingUsers[username.toLowerCase()] = {
        name,
        email,
        phone,
        username,
        stripeCustomerId: stripeDataResponse.customerId,
        stripeSubscriptionId: stripeDataResponse.subscriptionId,
        trialEnd: stripeDataResponse.trialEnd,
        subscriptionStatus: "trialing",
        planType: "pro",
        monthlyPrice: 10.59,
        createdAt: new Date().toISOString(),
      }
      localStorage.setItem("users", JSON.stringify(existingUsers))
      localStorage.setItem("currentUser", username.toLowerCase())
      localStorage.setItem("trialEmail", email)
      localStorage.setItem("trialName", name)
      localStorage.setItem("subscriptionId", stripeDataResponse.subscriptionId)
      localStorage.setItem("customerId", stripeDataResponse.customerId)
      localStorage.setItem("subscriptionStatus", "trialing")
      localStorage.setItem("planType", "pro")
      localStorage.setItem("monthlyPrice", "10.59")
      localStorage.setItem("monthlyAmount", "10.59")
      localStorage.setItem("nextBillingDate", stripeDataResponse.nextBillingDate || "")
      localStorage.setItem("trialEndDate", stripeDataResponse.trialEndDate || "")

if (stripeDataResponse.trialEnd) {
        localStorage.setItem("trialEnd", stripeDataResponse.trialEnd.toString())
      }

// Navigate to the confirmation page
      router.push("/trial/confirmation")
    } catch (err) {
      console.error("Signup error details:", {
        error: err,
        message: err instanceof Error ? err.message : "Unknown error",
        stack: err instanceof Error ? err.stack : undefined,
        timestamp: new Date().toISOString(),
      })

if (err instanceof Error) {
        const errorMessage = err.message

// Handle specific error patterns
        if (errorMessage.includes("Firebase") || errorMessage.includes("auth/")) {
          if (err instanceof FirebaseError) {
            switch (err.code) {
              case "auth/email-already-in-use":
                setError(
                  "An account with this email already exists. Please log in instead or use a different email address.",
                )
                break
              case "auth/invalid-email":
                setError("The email address format is invalid. Please enter a valid email address.")
                break
              case "auth/weak-password":
                setError(
                  "Your password is too weak. Please use at least 8 characters with a mix of letters and numbers.",
                )
                break
              case "auth/network-request-failed":
                setError("Unable to connect to our servers. Please check your internet connection and try again.")
                break
              default:
                setError(`Account creation failed: ${err.message}. Please try again or contact support.`)
            }
          } else {
            setError("There was an issue creating your account. Please try again or contact our support team.")
          }
        } else {
          // Use the specific error message from our validation or Stripe
          setError(errorMessage)
        }
      } else {
        setError("An unexpected error occurred. Please refresh the page and try again, or contact our support team.")
      }
    } finally {
      setIsLoading(false)
    }
  }

// Format card number with spaces
  const formatCardNumber = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "")
    const matches = v.match(/\d{4,16}/g)
    const match = (matches && matches[0]) || ""
    const parts = []

for (let i = 0; i < match.length; i += 4) {
      parts.push(match.substring(i, i + 4))
    }

if (parts.length) {
      return parts.join(" ")
    } else {
      return value
    }
  }

// Format expiry date
  const formatExpiryDate = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "")

if (v.length >= 2) {
      return `${v.substring(0, 2)}/${v.substring(2, 4)}`
    }

return v
  }

{/* Signup Card */}
            <Card className="w-full max-w-2xl">
              <CardHeader className="space-y-1 text-center">
                <CardTitle className="text-2xl font-bold">Start Your 7-Day Free Trial</CardTitle>
                <CardDescription>
                  Start your 7-day free trial today. After the trial, you'll be automatically charged $10.59/month.
                  Cancel anytime during the trial to avoid charges.
                </CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
                    <div className="flex items-start gap-3">
                      <AlertCircle className="h-5 w-5 text-red-600 mt-0.5 flex-shrink-0" />
                      <div className="flex-1">
                        <h4 className="text-sm font-medium text-red-800 mb-1">
                          {error.includes("card") || error.includes("payment") || error.includes("declined")
                            ? "Payment Error"
                            : error.includes("email") && error.includes("exists")
                              ? "Account Already Exists"
                              : "Sign Up Error"}
                        </h4>
                        <p className="text-sm text-red-700">{error}</p>

{/* Specific help based on error type */}
                        {error.includes("card") || error.includes("payment") ? (
                          <div className="mt-2 pt-2 border-t border-red-200">
                            <p className="text-xs text-red-600">
                              <strong>Payment Help:</strong> Make sure your card details are correct, your card isn't
                              expired, and you have sufficient funds. Contact your bank if the issue persists.
                            </p>
                          </div>
                        ) : error.includes("email") && error.includes("exists") ? (
                          <div className="mt-2 pt-2 border-t border-red-200">
                            <NavigationLink href="/login" className="text-xs font-medium text-primary hover:underline">
                              → Go to login page instead
                            </NavigationLink>
                          </div>
                        ) : error.includes("support") || error.includes("contact") ? (
                          <div className="mt-2 pt-2 border-t border-red-200">
                            <p className="text-xs text-red-600">
                              Need immediate help? Email{" "}
                              <a href="mailto:support@lokate.ai" className="font-medium underline">
                                support@lokate.ai
                              </a>{" "}
                              or call (555) 123-4567
                            </p>
                          </div>
                        ) : null}
                      </div>
                    </div>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-6">
                  {/* Personal Information Section */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold border-b pb-2">Personal Information</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label htmlFor="name" className="text-sm font-medium flex items-center gap-2">
                          <User className="h-4 w-4" />
                          Full Name
                        </label>
                        <Input
                          id="name"
                          type="text"
                          placeholder="John Doe"
                          value={name}
                          onChange={(e) => {
                            console.log("Name changed:", e.target.value)
                            setName(e.target.value)
                          }}
                          required
                          className="w-full"
                        />
                      </div>

<div className="space-y-2">
                        <label htmlFor="email" className="text-sm font-medium flex items-center gap-2">
                          <Mail className="h-4 w-4" />
                          Email
                        </label>
                        <Input
                          id="email"
                          type="email"
                          placeholder="you@example.com"
                          value={email}
                          onChange={(e) => {
                            console.log("Email changed:", e.target.value)
                            setEmail(e.target.value)
                          }}
                          required
                          className="w-full"
                        />
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label htmlFor="phone" className="text-sm font-medium flex items-center gap-2">
                          <Phone className="h-4 w-4" />
                          Phone Number
                        </label>
                        <Input
                          id="phone"
                          type="tel"
                          placeholder="(555) 123-4567"
                          value={phone}
                          onChange={(e) => {
                            console.log("Phone changed:", e.target.value)
                            setPhone(e.target.value)
                          }}
                          required
                          className="w-full"
                        />
                      </div>

<div className="space-y-2">
                        <label htmlFor="username" className="text-sm font-medium flex items-center gap-2">
                          <AtSign className="h-4 w-4" />
                          Username
                        </label>
                        <div className="relative">
                          <Input
                            id="username"
                            type="text"
                            placeholder="johndoe123"
                            value={username}
                            onChange={(e) => {
                              console.log("Username changed:", e.target.value)
                              handleUsernameChange(e.target.value)
                            }}
                            required
                            className={`w-full pr-10 ${
                              usernameAvailable === true
                                ? "border-green-500"
                                : usernameAvailable === false
                                  ? "border-red-500"
                                  : ""
                            }`}
                          />
                          <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                            {usernameChecking ? (
                              <div className="animate-spin h-4 w-4 border-2 border-gray-300 border-t-primary rounded-full"></div>
                            ) : usernameAvailable === true ? (
                              <CheckCircle className="h-4 w-4 text-green-500" />
                            ) : usernameAvailable === false ? (
                              <AlertCircle className="h-4 w-4 text-red-500" />
                            ) : null}
                          </div>
                        </div>
                        {username.length > 0 && username.length < 3 && (
                          <p className="text-xs text-muted-foreground">Username must be at least 3 characters</p>
                        )}
                        {usernameAvailable === true && <p className="text-xs text-green-600">Username is available!</p>}
                        {usernameAvailable === false && (
                          <p className="text-xs text-red-600">Username is already taken</p>
                        )}
                      </div>
                    </div>

<div className="space-y-2">
                      <label htmlFor="password" className="text-sm font-medium flex items-center gap-2">
                        <Lock className="h-4 w-4" />
                        Password
                      </label>
                      <div className="relative">
                        <Input
                          id="password"
                          type={showPassword ? "text" : "password"}
                          placeholder="Create a password (min 8 characters)"
                          value={password}
                          onChange={(e) => {
                            console.log("Password changed:", e.target.value.length, "characters")
                            setPassword(e.target.value)
                          }}
                          required
                          className="w-full pr-10"
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                          onClick={() => setShowPassword(!showPassword)}
                        >
                          {showPassword ? (
                            <EyeOff className="h-4 w-4 text-muted-foreground" />
                          ) : (
                            <Eye className="h-4 w-4 text-muted-foreground" />
                          )}
                          <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                        </Button>
                      </div>
                    </div>
                  </div>

{/* Payment Information Section */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold border-b pb-2 flex items-center gap-2">
                      <CreditCard className="h-5 w-5" />
                      Payment Information
                    </h3>

<div className="space-y-4">
                      <div className="space-y-2">
                        <label htmlFor="cardNumber" className="text-sm font-medium">
                          Card Number
                        </label>
                        <Input
                          id="cardNumber"
                          placeholder="1234 5678 9012 3456"
                          value={cardNumber}
                          onChange={(e) => {
                            const formatted = formatCardNumber(e.target.value)
                            console.log("Card number changed:", formatted)
                            setCardNumber(formatted)
                          }}
                          maxLength={19}
                          required
                          className="w-full"
                        />
                      </div>

<div className="space-y-2">
                        <label htmlFor="cardName" className="text-sm font-medium">
                          Name on Card
                        </label>
                        <Input
                          id="cardName"
                          placeholder="John Doe"
                          value={cardName}
                          onChange={(e) => {
                            console.log("Card name changed:", e.target.value)
                            setCardName(e.target.value)
                          }}
                          required
                          className="w-full"
                        />
                      </div>

<div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <label htmlFor="cardExpiry" className="text-sm font-medium">
                            Expiry Date
                          </label>
                          <Input
                            id="cardExpiry"
                            placeholder="MM/YY"
                            value={cardExpiry}
                            onChange={(e) => {
                              const formatted = formatExpiryDate(e.target.value)
                              console.log("Card expiry changed:", formatted)
                              setCardExpiry(formatted)
                            }}
                            maxLength={5}
                            required
                            className="w-full"
                          />
                        </div>
                        <div className="space-y-2">
                          <label htmlFor="cardCvc" className="text-sm font-medium">
                            CVC
                          </label>
                          <Input
                            id="cardCvc"
                            placeholder="123"
                            value={cardCvc}
                            onChange={(e) => {
                              const value = e.target.value.replace(/[^0-9]/g, "")
                              console.log("Card CVC changed:", value)
                              setCardCvc(value)
                            }}
                            maxLength={4}
                            required
                            className="w-full"
                          />
                        </div>
                      </div>
                    </div>
                  </div>

<div className="pt-2">
                    <div className="flex items-start gap-2 text-sm text-muted-foreground">
                      <CheckCircle className="h-4 w-4 mt-0.5 text-primary" />
                      <p>
                        <strong>7-day free trial</strong> - No charges for 7 days. After trial ends on{" "}
                        {stripeData.nextBillingDate || "trial completion"}, you'll be automatically charged
                        $10.59/month. Cancel anytime during trial to avoid charges.
                      </p>
                    </div>
                  </div>

<Button
                    type="submit"
                    className="w-full h-14 text-lg"
                    disabled={isLoading || usernameAvailable === false || usernameChecking}
                  >
                    {isLoading ? "Creating Account..." : "Start My 7-Day Free Trial"}
                  </Button>
                </form>

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

{/* Stripe Badge */}
                <div className="mt-4 text-center">
                  <p className="text-xs text-muted-foreground">Payments secured by Stripe</p>
                </div>
              </CardContent>
            </Card>

{/* Security note */}
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Lock className="h-4 w-4" />
              <span>Your information is secure and encrypted</span>
            </div>
          </div>
        </div>
      </main>

interface User {
  uid: string
  email: string
  username?: string
  phone?: string
  stripeCustomerId?: string
}

interface StoredUser extends User {
  hashedPassword: string
  createdAt: string
}

// Fallback authentication using localStorage
export const fallbackAuth = {
  // Create user account
  async createUser(email: string, password: string, userData?: any): Promise<User> {
    try {
      const users = this.getUsers()

// Check if user already exists
      if (users.find((u) => u.email === email)) {
        throw new Error("User already exists")
      }

const hashedPassword = await hashPassword(password)
      const uid = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`

const newUser: StoredUser = {
        uid,
        email,
        hashedPassword,
        createdAt: new Date().toISOString(),
        ...userData,
      }

users.push(newUser)
      localStorage.setItem("lokate_users", JSON.stringify(users))

// Set current user
      const userForReturn = { ...newUser }
      delete (userForReturn as any).hashedPassword
      this.setCurrentUser(userForReturn)

return userForReturn
    } catch (error) {
      console.error("Error creating user:", error)
      throw error
    }
  },

// Sign in user
  async signIn(email: string, password: string): Promise<User> {
    try {
      const users = this.getUsers()
      const user = users.find((u) => u.email === email)

if (!user) {
        throw new Error("User not found")
      }

const isValid = await verifyPassword(password, user.hashedPassword)
      if (!isValid) {
        throw new Error("Invalid password")
      }

const userForReturn = { ...user }
      delete (userForReturn as any).hashedPassword
      this.setCurrentUser(userForReturn)

return userForReturn
    } catch (error) {
      console.error("Error signing in:", error)
      throw error
    }
  },

// Sign out user
  signOut(): void {
    localStorage.removeItem("lokate_current_user")
  },

// Get current user
  getCurrentUser(): User | null {
    try {
      const userStr = localStorage.getItem("lokate_current_user")
      return userStr ? JSON.parse(userStr) : null
    } catch {
      return null
    }
  },

// Set current user
  setCurrentUser(user: User): void {
    localStorage.setItem("lokate_current_user", JSON.stringify(user))
  },

// Get all users
  getUsers(): StoredUser[] {
    try {
      const usersStr = localStorage.getItem("lokate_users")
      const users = usersStr ? JSON.parse(usersStr) : []

// Add default admin user if no users exist
      if (users.length === 0) {
        const defaultAdmin: StoredUser = {
          uid: "admin_default_001",
          email: "admin@lokate.ai",
          hashedPassword: "$2a$10$rOvHPz8fGNcJ8H7wX9qLaOYvY8QzJ5K6L7M8N9P0Q1R2S3T4U5V6W7", // "AdminPass123!"
          username: "admin",
          role: "admin",
          firstName: "Admin",
          lastName: "User",
          createdAt: new Date().toISOString(),
        }
        users.push(defaultAdmin)
        localStorage.setItem("lokate_users", JSON.stringify(users))
      }

return users
    } catch {
      return []
    }
  },

// Send password reset (mock)
  async sendPasswordReset(email: string): Promise<void> {
    const users = this.getUsers()
    const user = users.find((u) => u.email === email)

if (user) {
      console.log(`Password reset email would be sent to: ${email}`)
      // In a real implementation, this would send an email
    }
  },
}
[V0_FILE]typescriptreact:file="lib/firebase-auth-integration.ts" isQuickEdit="true" isMerged="true"
import { auth, db } from "./firebase-config"
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  sendPasswordResetEmail,
} from "firebase/auth"
import { doc, setDoc, getDoc, serverTimestamp } from "firebase/firestore"

// Enhanced Firebase Authentication Integration with better error handling
export const authIntegration = {
  // Register new user (password automatically secured by Firebase)
  async registerUser(email: string, password: string, additionalData: any = {}) {
    if (!auth || !db) {
      throw new Error("Firebase services are not properly configured. Please contact support.")
    }

try {
      // Firebase Auth handles password hashing automatically
      const userCredential = await createUserWithEmailAndPassword(auth, email, password)
      const user = userCredential.user

// Store additional user data in Firestore (NO PASSWORD!)
      const userData = {
        uid: user.uid,
        email: user.email,
        emailVerified: user.emailVerified,
        createdAt: serverTimestamp(),
        updatedAt: serverTimestamp(),
        // Add your custom fields here
        username: additionalData.username || "",
        firstName: additionalData.firstName || "",
        lastName: additionalData.lastName || "",
        name: additionalData.name || "",
        phone: additionalData.phone || "",
        role: additionalData.role || "user", // Add role field
        subscriptionStatus: additionalData.subscriptionStatus || "trial",
        planType: additionalData.planType || "pro",
        stripeCustomerId: additionalData.stripeCustomerId || "",
        stripeSubscriptionId: additionalData.stripeSubscriptionId || "",
        trialEnd: additionalData.trialEnd || null,
        // NEVER store password here!
      }

await setDoc(doc(db, "users", user.uid), userData)

console.log("✅ User registered successfully:", user.uid)
      return user
    } catch (error: any) {
      console.error("❌ Registration error:", error)

// Enhanced Firebase error handling
      if (error.code) {
        switch (error.code) {
          case "auth/email-already-in-use":
            throw new Error(
              "An account with this email already exists. Please log in instead or use a different email address.",
            )
          case "auth/invalid-email":
            throw new Error("The email address format is invalid. Please enter a valid email address.")
          case "auth/weak-password":
            throw new Error(
              "Your password is too weak. Please use at least 8 characters with a mix of letters and numbers.",
            )
          case "auth/network-request-failed":
            throw new Error("Unable to connect to our servers. Please check your internet connection and try again.")
          case "auth/too-many-requests":
            throw new Error("Too many account creation attempts. Please wait a few minutes before trying again.")
          case "auth/operation-not-allowed":
            throw new Error("Account creation is temporarily disabled. Please contact support for assistance.")
          default:
            throw new Error(`Account creation failed: ${error.message}. Please try again or contact support.`)
        }
      }

throw error
    }
  },

// Sign in user (Firebase handles password verification)
  async signInUser(email: string, password: string) {
    if (!auth) {
      throw new Error("Authentication service is not properly configured. Please contact support.")
    }

try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password)
      console.log("✅ User signed in:", userCredential.user.uid)
      return userCredential.user
    } catch (error: any) {
      console.error("❌ Sign in error:", error)

// Enhanced Firebase error handling for login
      if (error.code) {
        switch (error.code) {
          case "auth/user-not-found":
            throw new Error(
              "No account found with this email address. Please check your email or create a new account.",
            )
          case "auth/wrong-password":
          case "auth/invalid-credential":
            throw new Error(
              "The password you entered is incorrect. Please try again or use the 'Forgot password?' link.",
            )
          case "auth/invalid-email":
            throw new Error("The email address format is invalid. Please enter a valid email address.")
          case "auth/user-disabled":
            throw new Error("Your account has been temporarily disabled. Please contact support for assistance.")
          case "auth/too-many-requests":
            throw new Error(
              "Too many failed login attempts. Please wait 15 minutes before trying again or reset your password.",
            )
          case "auth/network-request-failed":
            throw new Error("Unable to connect to our servers. Please check your internet connection and try again.")
          case "auth/internal-error":
            throw new Error("An internal error occurred. Please try again in a few minutes or contact support.")
          case "auth/quota-exceeded":
            throw new Error("Our service is temporarily experiencing high traffic. Please try again in a few minutes.")
          default:
            throw new Error(`Login failed: ${error.message}. Please try again or contact support.`)
        }
      }

throw error
    }
  },

// Get user profile data (from Firestore, not Auth)
  async getUserProfile(uid: string) {
    if (!db) {
      throw new Error("Database service is not properly configured. Please contact support.")
    }

try {
      const userDoc = await getDoc(doc(db, "users", uid))
      if (userDoc.exists()) {
        return userDoc.data()
      }
      return null
    } catch (error: any) {
      console.error("❌ Error getting user profile:", error)
      throw new Error("Unable to retrieve user profile. Please try again or contact support.")
    }
  },

// Sign out user
  async signOutUser() {
    if (!auth) {
      throw new Error("Authentication service is not properly configured. Please contact support.")
    }

try {
      await signOut(auth)
      console.log("✅ User signed out")
    } catch (error: any) {
      console.error("❌ Sign out error:", error)
      throw new Error("Unable to sign out. Please try refreshing the page or contact support.")
    }
  },

// Reset password (Firebase handles this securely)
  async resetPassword(email: string) {
    if (!auth) {
      throw new Error("Authentication service is not properly configured. Please contact support.")
    }

try {
      await sendPasswordResetEmail(auth, email)
      console.log("✅ Password reset email sent")
      return "Password reset email sent successfully. Please check your inbox and spam folder."
    } catch (error: any) {
      console.error("❌ Password reset error:", error)

if (error.code) {
        switch (error.code) {
          case "auth/user-not-found":
            throw new Error(
              "No account found with this email address. Please check your email or create a new account.",
            )
          case "auth/invalid-email":
            throw new Error("The email address format is invalid. Please enter a valid email address.")
          case "auth/too-many-requests":
            throw new Error("Too many password reset requests. Please wait a few minutes before trying again.")
          default:
            throw new Error(`Password reset failed: ${error.message}. Please try again or contact support.`)
        }
      }

throw error
    }
  },

// Check if user is admin
  async isAdmin(uid: string): Promise<boolean> {
    try {
      const userData = await this.getUserProfile(uid)
      return userData?.role === "admin"
    } catch (error) {
      console.error("❌ Error checking admin status:", error)
      return false
    }
  },
}
[V0_FILE]typescriptreact:file="app/admin-access/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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Target, Shield, AlertCircle } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"

export default function AdminAccessPage() {
  const router = useRouter()
  const [passcode, setPasscode] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

// Simple admin passcode for testing
  const ADMIN_PASSCODE = "LOKATE2025"

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

try {
      if (passcode === ADMIN_PASSCODE) {
        // Set admin session in localStorage
        const adminUser = {
          uid: "admin_test_user",
          email: "admin@lokate.ai",
          role: "admin",
          name: "Test Admin",
          isTestAdmin: true,
          loginTime: new Date().toISOString(),
        }

localStorage.setItem("lokate_current_user", JSON.stringify(adminUser))
        localStorage.setItem("lokate_admin_session", "true")

console.log("✅ Admin access granted")
        router.push("/dashboard")
      } else {
        setError("Invalid admin passcode. Please try again.")
      }
    } catch (error) {
      console.error("❌ Admin access error:", error)
      setError("An error occurred. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <div className="flex items-center gap-4">
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Regular Login
            </NavigationLink>
            <NavigationLink href="/trial">
              <Button size="sm">Start Trial</Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1 flex items-center justify-center bg-gradient-to-b from-background to-muted py-12">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Admin Access Card */}
            <Card className="w-full max-w-md border-orange-200 bg-orange-50/50">
              <CardHeader className="space-y-1 text-center">
                <div className="flex items-center justify-center gap-2 mb-2">
                  <Shield className="h-6 w-6 text-orange-600" />
                  <CardTitle className="text-2xl font-bold text-orange-800">Admin Access</CardTitle>
                </div>
                <CardDescription className="text-orange-700">
                  Enter the admin passcode to access the dashboard for testing purposes
                </CardDescription>
              </CardHeader>
              <CardContent>
                {error && (
                  <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200">
                    <div className="flex items-center gap-2">
                      <AlertCircle className="h-4 w-4 text-red-600" />
                      <p className="text-sm text-red-700">{error}</p>
                    </div>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <label htmlFor="passcode" className="text-sm font-medium text-orange-800">
                      Admin Passcode
                    </label>
                    <Input
                      id="passcode"
                      type="password"
                      placeholder="Enter admin passcode"
                      value={passcode}
                      onChange={(e) => setPasscode(e.target.value.toUpperCase())}
                      required
                      className="w-full border-orange-200 focus:border-orange-400 focus:ring-orange-400"
                    />
                  </div>

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

<div className="mt-6 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                  <div className="text-xs text-amber-800">
                    <p className="font-medium mb-1">🧪 Testing Mode</p>
                    <p>This is a temporary admin access for testing purposes only.</p>
                    <p className="mt-1">
                      Passcode: <code className="bg-amber-100 px-1 rounded">LOKATE2025</code>
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Help text */}
            <div className="text-center text-sm text-muted-foreground max-w-md">
              <p>
                For regular access, use the{" "}
                <NavigationLink href="/login" className="text-primary hover:underline">
                  standard login
                </NavigationLink>{" "}
                or{" "}
                <NavigationLink href="/trial" className="text-primary hover:underline">
                  start a free trial
                </NavigationLink>
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import {
  type User,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut,
  sendPasswordResetEmail,
} from "firebase/auth"
import { auth } from "@/lib/firebase-config"

interface AuthContextType {
  currentUser: User | null
  loading: boolean
  firebaseReady: boolean
  isAdmin: boolean
  isTestAdmin: boolean
  signup: (email: string, password: string, userData?: any) => Promise<User>
  login: (email: string, password: string) => Promise<User>
  logout: () => Promise<void>
  resetPassword: (email: string) => Promise<void>
  getUserData: (uid: string) => Promise<any>
  updateUserData: (uid: string, data: any) => Promise<void>
  testFirebase: () => Promise<any>
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [currentUser, setCurrentUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [firebaseReady, setFirebaseReady] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)
  const [isTestAdmin, setIsTestAdmin] = useState(false)

useEffect(() => {
    // Check for test admin session
    const checkTestAdmin = () => {
      try {
        const adminSession = localStorage.getItem("lokate_admin_session")
        const currentUserData = localStorage.getItem("lokate_current_user")

if (adminSession === "true" && currentUserData) {
          const userData = JSON.parse(currentUserData)
          if (userData.isTestAdmin) {
            setIsTestAdmin(true)
            setIsAdmin(true)
            console.log("🧪 Test admin session detected")

// Create a mock user object for the test admin
            const mockUser = {
              uid: userData.uid,
              email: userData.email,
              displayName: userData.name,
              emailVerified: true,
            } as User

setCurrentUser(mockUser)
            setLoading(false)
            return true
          }
        }
      } catch (error) {
        console.error("Error checking test admin session:", error)
      }
      return false
    }

// Check test admin first
    if (checkTestAdmin()) {
      return
    }

// Check if Firebase is properly initialized
    if (!auth) {
      console.error("❌ Firebase Auth not initialized")
      console.log("💡 Make sure to add Firebase environment variables to .env.local")
      setFirebaseReady(false)
      setLoading(false)
      return
    }

console.log("🔥 Firebase Auth is ready")
    setFirebaseReady(true)

// Listen for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      console.log("🔐 Auth state changed:", user ? `User: ${user.email}` : "No user")
      setCurrentUser(user)
      setLoading(false)

// Check if user is admin (you can implement this based on your needs)
      if (user) {
        // For now, just check if email contains "admin"
        setIsAdmin(user.email?.includes("admin") || false)
      } else {
        setIsAdmin(false)
      }
    })

return unsubscribe
  }, [])

// Sign up with email and password
  async function signup(email: string, password: string, userData?: any): Promise<User> {
    try {
      if (!auth) {
        throw new Error("Firebase Auth not initialized")
      }

console.log("🔐 Creating user account for:", email)
      const userCredential = await createUserWithEmailAndPassword(auth, email, password)
      const user = userCredential.user

console.log("✅ User account created successfully:", user.uid)
      return user
    } catch (error) {
      console.error("❌ Signup error:", error)
      throw error
    }
  }

// Sign in with email and password
  async function login(email: string, password: string): Promise<User> {
    try {
      if (!auth) {
        throw new Error("Firebase Auth not initialized")
      }

console.log("🔐 Signing in user:", email)
      const userCredential = await signInWithEmailAndPassword(auth, email, password)
      const user = userCredential.user

console.log("✅ User signed in successfully:", user.uid)
      return user
    } catch (error) {
      console.error("❌ Login error:", error)
      throw error
    }
  }

// Sign out
  async function logout(): Promise<void> {
    try {
      // Clear test admin session
      localStorage.removeItem("lokate_admin_session")
      localStorage.removeItem("lokate_current_user")

if (isTestAdmin) {
        console.log("🧪 Test admin session cleared")
        setCurrentUser(null)
        setIsAdmin(false)
        setIsTestAdmin(false)
        return
      }

if (!auth) {
        throw new Error("Firebase Auth not initialized")
      }

console.log("🔐 Signing out user")
      await signOut(auth)
      console.log("✅ User signed out successfully")
    } catch (error) {
      console.error("❌ Logout error:", error)
      throw error
    }
  }

// Reset password
  async function resetPassword(email: string): Promise<void> {
    try {
      if (!auth) {
        throw new Error("Firebase Auth not initialized")
      }

console.log("🔐 Sending password reset email to:", email)
      await sendPasswordResetEmail(auth, email)
      console.log("✅ Password reset email sent successfully")
    } catch (error) {
      console.error("❌ Password reset error:", error)
      throw error
    }
  }

// Placeholder functions for compatibility
  async function getUserData(uid: string): Promise<any> {
    console.log("📄 Getting user data for:", uid)

if (isTestAdmin) {
      return {
        uid,
        email: "admin@lokate.ai",
        role: "admin",
        name: "Test Admin",
        isTestAdmin: true,
      }
    }

// This would typically fetch from Firestore
    return { uid, email: currentUser?.email }
  }

async function updateUserData(uid: string, data: any): Promise<void> {
    console.log("📝 Updating user data for:", uid, data)
    // This would typically update Firestore
  }

async function testFirebase(): Promise<any> {
    console.log("🧪 Testing Firebase connection")
    return {
      auth: !!auth,
      configured: firebaseReady,
      currentUser: currentUser?.uid || null,
      isTestAdmin,
      isAdmin,
    }
  }

const value = {
    currentUser,
    loading,
    firebaseReady,
    isAdmin,
    isTestAdmin,
    signup,
    login,
    logout,
    resetPassword,
    getUserData,
    updateUserData,
    testFirebase,
  }

return <AuthContext.Provider value={value}>{!loading && children}</AuthContext.Provider>
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ArrowRight, Target, BarChart3, Mail, Shield, Zap, Search, TrendingUp } from "lucide-react"
import { NavigationLink } from "@/components/navigation-link"

export default function AboutPage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <Link href="#about-hero" className="text-sm font-medium text-primary">
              About
            </Link>
            <NavigationLink href="/support" className="text-sm font-medium hover:text-primary">
              Support
            </NavigationLink>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted" id="about-hero">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">About Lokate.ai</h1>
                <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                  Revolutionizing how real estate professionals find their next deal
                </p>
              </div>
              <div className="w-full max-w-sm border-b pb-6" />
            </div>
          </div>
        </section>

{/* Our Mission */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
              <div className="space-y-4">
                <h2 className="text-3xl font-bold tracking-tighter">Our Mission</h2>
                <p className="text-muted-foreground md:text-lg">
                  At Lokate.ai, we're on a mission to transform how real estate professionals discover opportunities. We
                  believe that everyone deserves access to timely, accurate property data without spending hours
                  manually searching through listings.
                </p>
                <p className="text-muted-foreground md:text-lg">
                  Our AI-powered platform delivers personalized property alerts directly to your inbox, helping you stay
                  ahead of the competition and never miss another deal again.
                </p>
              </div>
              <div className="bg-white rounded-xl p-8 shadow-lg border">
                <h3 className="text-2xl font-bold text-gray-900 mb-8">Get Instant Alerts for Perfect Matches</h3>

<div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="flex-shrink-0">
                      <Zap className="h-6 w-6 text-green-600" />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-gray-900 mb-1">Automated Daily Alerts</h4>
                      <p className="text-gray-600">
                        Receive personalized property matches delivered to your inbox every morning
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="flex-shrink-0">
                      <Search className="h-6 w-6 text-green-600" />
                    </div>
                    <div>
                      <h4 className="text-lg font-bold text-gray-900 mb-1">500+ Precise Criteria</h4>
                      <p className="text-gray-600">
                        Match properties by neighborhood, price, amenities, and hundreds of other factors
                      </p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="flex-shrink-0">
                      <TrendingUp className="h-6 w-6 text-green-600" />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-gray-900 mb-1">40% Revenue Increase</h4>
                      <p className="text-gray-600">
                        Close more deals faster with properties that perfectly match client needs
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Why Choose Us */}
        <section className="w-full py-12 md:py-24 bg-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">Why Choose Lokate.ai</h2>
                <p className="max-w-[800px] text-muted-foreground md:text-lg mx-auto">
                  We're not just another property search tool. Here's what sets us apart:
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <Mail className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Personalized Alerts</h3>
                <p className="text-center text-muted-foreground">
                  Custom email alerts based on your specific investment criteria
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <Target className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">500+ Filters</h3>
                <p className="text-center text-muted-foreground">
                  Fine-tune your search with over 500 property and market filters
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <BarChart3 className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Market Data</h3>
                <p className="text-center text-muted-foreground">
                  Real-time market intelligence integrated with your alerts
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm">
                <Shield className="h-12 w-12 text-primary" />
                <h3 className="text-xl font-bold">Competitive Edge</h3>
                <p className="text-center text-muted-foreground">
                  Get notified of opportunities before your competition
                </p>
              </div>
              <div className="flex flex-col items-center space-y-4 rounded-lg border bg-background p-6 shadow-sm md:col-span-2 lg:col-span-2">
                <div className="flex items-center justify-center w-full space-x-4">
                  <div className="text-4xl font-bold text-primary">10x</div>
                  <p className="text-lg text-muted-foreground text-left">
                    Faster than manual searching, saving you hours every day and helping you close more deals
                  </p>
                </div>
              </div>
            </div>
            <div className="flex justify-center mt-12">
              <NavigationLink href="/trial">
                <Button size="lg" className="px-12 py-4 text-lg h-14">
                  Start my free trial
                  <ArrowRight className="ml-3 h-5 w-5" />
                </Button>
              </NavigationLink>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="w-full py-12 md:py-24 bg-primary">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter text-primary-foreground">
                  Ready to Transform Your Property Search?
                </h2>
                <p className="max-w-[600px] text-primary-foreground/90 md:text-xl mx-auto">
                  Join thousands of real estate professionals who are saving time and finding better deals with
                  Lokate.ai
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-4">
                <NavigationLink href="/trial">
                  <Button size="lg" variant="secondary" className="px-8">
                    Start my free trial
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </NavigationLink>
                <NavigationLink href="/#pricing">
                  <Button
                    size="lg"
                    variant="outline"
                    className="bg-transparent border-primary-foreground text-primary-foreground hover:bg-primary-foreground/10"
                  >
                    View pricing
                  </Button>
                </NavigationLink>
              </div>
              <p className="text-sm text-primary-foreground/80">No credit card required. 7-day free trial.</p>
            </div>
          </div>
        </section>
      </main>

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Target, Mail, Phone, MapPin, ArrowRight, CheckCircle, AlertCircle } from "lucide-react"
import { AiChatSupport } from "@/components/ai-chat-support"
import { NavigationLink } from "@/components/navigation-link"

export default function SupportPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })
  const [errors, setErrors] = useState({
    name: false,
    email: false,
    subject: false,
    message: false,
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle")

const validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }

const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    // Clear error when user starts typing
    if (errors[field as keyof typeof errors]) {
      setErrors((prev) => ({ ...prev, [field]: false }))
    }
  }

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

// Reset previous status
    setSubmitStatus("idle")

// Validate all fields
    const newErrors = {
      name: !formData.name.trim(),
      email: !formData.email.trim() || !validateEmail(formData.email),
      subject: !formData.subject.trim(),
      message: !formData.message.trim(),
    }

setErrors(newErrors)

// If there are errors, don't submit
    if (Object.values(newErrors).some((error) => error)) {
      return
    }

setIsSubmitting(true)

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

if (response.ok) {
        setSubmitStatus("success")
        setFormData({ name: "", email: "", subject: "", message: "" })
      } else {
        setSubmitStatus("error")
      }
    } catch (error) {
      console.error("Error sending email:", error)
      setSubmitStatus("error")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      {/* Header/Navigation */}
      <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <NavigationLink href="/" className="flex items-center gap-2 hover:opacity-90 transition-opacity">
            <Target className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">Lokate.ai</span>
          </NavigationLink>
          <nav className="hidden md:flex items-center gap-6">
            <NavigationLink href="/#features" className="text-sm font-medium hover:text-primary">
              Features
            </NavigationLink>
            <NavigationLink href="/#pricing" className="text-sm font-medium hover:text-primary">
              Pricing
            </NavigationLink>
            <NavigationLink href="/about" className="text-sm font-medium hover:text-primary">
              About
            </NavigationLink>
            <Link href="#support-hero" className="text-sm font-medium text-primary">
              Support
            </Link>
            <NavigationLink href="/login" className="text-sm font-medium hover:text-primary">
              Login
            </NavigationLink>
          </nav>
          <div className="flex items-center">
            <NavigationLink href="/trial">
              <Button size="lg" className="px-8">
                Start my free trial
              </Button>
            </NavigationLink>
          </div>
        </div>
      </header>

<main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-muted" id="support-hero">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center text-center space-y-4 md:space-y-8">
              <div className="space-y-2">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">We're Here to Help</h1>
                <p className="max-w-[800px] text-muted-foreground md:text-xl mx-auto">
                  Get the support you need to make the most of Lokate.ai
                </p>
              </div>
              <div className="w-full max-w-sm border-b pb-6" />
            </div>
          </div>
        </section>

{/* FAQ Section */}
        <section className="w-full py-12 md:py-24 bg-background">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">Frequently Asked Questions</h2>
                <p className="max-w-[800px] text-muted-foreground md:text-lg mx-auto">
                  Find quick answers to common questions about Lokate.ai
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl gap-6 py-12 md:grid-cols-2">
              <div className="rounded-lg border bg-background p-6 shadow-sm">
                <h3 className="text-xl font-bold mb-2">How does the free trial work?</h3>
                <p className="text-muted-foreground">
                  Our 7-day free trial gives you full access to all features with no credit card required. You'll
                  receive daily property alerts based on your criteria, and can cancel anytime.
                </p>
              </div>
              <div className="rounded-lg border bg-background p-6 shadow-sm">
                <h3 className="text-xl font-bold mb-2">How do I set up my search criteria?</h3>
                <p className="text-muted-foreground">
                  After signing up, you'll be guided through our simple setup process where you can select your target
                  zip codes, price ranges, property types, and over 500 other criteria.
                </p>
              </div>
              <div className="rounded-lg border bg-background p-6 shadow-sm">
                <h3 className="text-xl font-bold mb-2">Can I change my search criteria later?</h3>
                <p className="text-muted-foreground">
                  Yes! You can update your search criteria anytime from your dashboard. Changes will be reflected in
                  your next daily alert email.
                </p>
              </div>
              <div className="rounded-lg border bg-background p-6 shadow-sm">
                <h3 className="text-xl font-bold mb-2">What time are daily alerts sent?</h3>
                <p className="text-muted-foreground">
                  Alerts are typically sent at 7:00 AM local time, but you can customize this in your account settings
                  to receive them at your preferred time.
                </p>
              </div>
            </div>
            <div className="flex justify-center mt-12">
              <NavigationLink href="/trial">
                <Button size="lg" className="px-12 py-4 text-lg h-14">
                  Start my free trial
                  <ArrowRight className="ml-3 h-5 w-5" />
                </Button>
              </NavigationLink>
            </div>
          </div>
        </section>

{/* Resources Section */}
        <section className="w-full py-12 md:py-24 bg-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">Helpful Resources</h2>
                <p className="max-w-[800px] text-muted-foreground md:text-lg mx-auto">
                  Guides and tutorials to help you get the most out of Lokate.ai
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl gap-6 py-12 md:grid-cols-2">
              <Link href="/guides/getting-started" className="group">
                <div className="rounded-lg border bg-background p-6 shadow-sm h-full flex flex-col transition-all group-hover:border-primary">
                  <h3 className="text-xl font-bold mb-2 group-hover:text-primary">Getting Started Guide</h3>
                  <p className="text-muted-foreground flex-grow">
                    A step-by-step walkthrough of setting up your account and first search criteria.
                  </p>
                  <div className="flex items-center gap-2 mt-4 text-primary">
                    <span className="text-sm font-medium">Read guide</span>
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </div>
                </div>
              </Link>
              <Link href="/guides/advanced-filters" className="group">
                <div className="rounded-lg border bg-background p-6 shadow-sm h-full flex flex-col transition-all group-hover:border-primary">
                  <h3 className="text-xl font-bold mb-2 group-hover:text-primary">Advanced Filtering</h3>
                  <p className="text-muted-foreground flex-grow">
                    Learn how to use our 500+ filters to find exactly the properties you're looking for.
                  </p>
                  <div className="flex items-center gap-2 mt-4 text-primary">
                    <span className="text-sm font-medium">Read guide</span>
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </section>

{/* Contact Form Section */}
        <section className="w-full py-12 md:py-24 bg-background" id="contact">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter">Contact the Team</h2>
                <p className="max-w-[800px] text-muted-foreground md:text-lg mx-auto">
                  Can't find what you're looking for? Our team is ready to help.
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl gap-12 py-12 md:grid-cols-2">
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <Mail className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="text-lg font-bold">Email Us</h3>
                    <p className="text-muted-foreground">admin@lokate.ai</p>
                    <p className="text-sm text-muted-foreground mt-1">
                      We typically respond within 24 hours on business days.
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <Phone className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="text-lg font-bold">Call Us</h3>
                    <p className="text-muted-foreground">(202) 770-7949</p>
                    <p className="text-sm text-muted-foreground mt-1">Available Monday-Friday, 9am-5pm EST</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <MapPin className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="text-lg font-bold">Visit Us</h3>
                    <p className="text-muted-foreground">1920 Plymouth St NW, 20012</p>
                  </div>
                </div>
              </div>
              <div>
                {submitStatus === "success" && (
                  <div className="mb-4 p-4 rounded-lg bg-green-50 border border-green-200 flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-green-600" />
                    <div>
                      <h4 className="font-medium text-green-800">Message Sent Successfully!</h4>
                      <p className="text-sm text-green-600">We'll get back to you as soon as possible.</p>
                    </div>
                  </div>
                )}

{submitStatus === "error" && (
                  <div className="mb-4 p-4 rounded-lg bg-red-50 border border-red-200 flex items-center gap-3">
                    <AlertCircle className="h-5 w-5 text-red-600" />
                    <div>
                      <h4 className="font-medium text-red-800">Error Sending Message</h4>
                      <p className="text-sm text-red-600">Please try again or contact us directly at admin@lokate.ai</p>
                    </div>
                  </div>
                )}

<form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label htmlFor="name" className="text-sm font-medium">
                        Name *
                      </label>
                      <Input
                        id="name"
                        placeholder="Your name"
                        value={formData.name}
                        onChange={(e) => handleInputChange("name", e.target.value)}
                        className={errors.name ? "border-red-500 focus:border-red-500" : ""}
                      />
                      {errors.name && <p className="text-sm text-red-500">Name is required</p>}
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="email" className="text-sm font-medium">
                        Email *
                      </label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="Your email"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                        className={errors.email ? "border-red-500 focus:border-red-500" : ""}
                      />
                      {errors.email && (
                        <p className="text-sm text-red-500">
                          {!formData.email.trim() ? "Email is required" : "Please enter a valid email address"}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="subject" className="text-sm font-medium">
                      Subject *
                    </label>
                    <Input
                      id="subject"
                      placeholder="How can we help?"
                      value={formData.subject}
                      onChange={(e) => handleInputChange("subject", e.target.value)}
                      className={errors.subject ? "border-red-500 focus:border-red-500" : ""}
                    />
                    {errors.subject && <p className="text-sm text-red-500">Subject is required</p>}
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="message" className="text-sm font-medium">
                      Message *
                    </label>
                    <Textarea
                      id="message"
                      placeholder="Please describe your question or issue in detail"
                      className={`min-h-[150px] ${errors.message ? "border-red-500 focus:border-red-500" : ""}`}
                      value={formData.message}
                      onChange={(e) => handleInputChange("message", e.target.value)}
                    />
                    {errors.message && <p className="text-sm text-red-500">Message is required</p>}
                  </div>
                  <Button type="submit" className="w-full" disabled={isSubmitting}>
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                  <p className="text-xs text-muted-foreground text-center mt-2">* Required fields</p>
                </form>
              </div>
            </div>
          </div>
        </section>
      </main>