98:I[903690,["/chat-static/_next/static/immutable/chunks/2yn416zt2ymb9.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/26zxim54jidf1.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/2xqmylhwzfxb_.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/1q_e5k32uqpss.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/1h6-gw2s2yy5z.js","/chat-static/_next/static/immutable/chunks/2e6woq6v13noj.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/1k7htvi9135fo.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/09qt2tf69cbel.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/3d5inm6-rzuqm.js","/chat-static/_next/static/immutable/chunks/31gr1mdr24jhg.js","/chat-static/_next/static/immutable/chunks/1ewedrvq3bnkt.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/0nnmvzh0x0i2w.js","/chat-static/_next/static/immutable/chunks/0u1g3xvhlwmem.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/15t4b5trqxj36.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2ty0n8drxrqfs.js","/chat-static/_next/static/immutable/chunks/1sp09rcaj9_la.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"ExplicitChatIdProvider"] 99:I[838238,["/chat-static/_next/static/immutable/chunks/2yn416zt2ymb9.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/26zxim54jidf1.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/2xqmylhwzfxb_.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/1q_e5k32uqpss.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/1h6-gw2s2yy5z.js","/chat-static/_next/static/immutable/chunks/2e6woq6v13noj.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/1k7htvi9135fo.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/09qt2tf69cbel.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/3d5inm6-rzuqm.js","/chat-static/_next/static/immutable/chunks/31gr1mdr24jhg.js","/chat-static/_next/static/immutable/chunks/1ewedrvq3bnkt.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/0nnmvzh0x0i2w.js","/chat-static/_next/static/immutable/chunks/0u1g3xvhlwmem.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/15t4b5trqxj36.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2ty0n8drxrqfs.js","/chat-static/_next/static/immutable/chunks/1sp09rcaj9_la.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js"],"SWRDataProvider"] 9b:[] 9c:[["b_qG5JMaMpg05",null],["b_0Xlug9H15ZC",null],["b_L7VhcPvU8hr",null]] 9d:[["b_qG5JMaMpg05",{"templateVersionId":null,"templateCanonId":null}],["b_0Xlug9H15ZC",{"templateVersionId":null,"templateCanonId":null}],["b_L7VhcPvU8hr",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["b_Yhr6n7zKVK5","$D2025-06-11T09:15:45.497Z"],["b_R6lk7AmMxAW","$D2025-06-11T09:26:14.508Z"],["b_iOcJ8aGZP3q","$D2025-06-11T09:28:52.888Z"],["b_Wvnvl5tgZew","$D2025-06-11T09:32:48.849Z"],["b_Fyv5EwvAsLw","$D2025-06-11T09:46:58.580Z"],["b_FJQOHsFmgsT","$D2025-06-11T10:14:16.724Z"],["b_dTRFQvv0ULT","$D2025-06-11T10:49:18.200Z"],["b_2ACHXSI3ZFm","$D2025-06-11T10:59:20.985Z"],["b_GqJHvTdLJW4","$D2025-06-11T11:58:07.745Z"],["b_AxCgzScUPqq","$D2025-06-11T12:06:03.389Z"],["b_Jp1KALP1rNc","$D2025-06-11T12:09:18.793Z"],["b_CkHEPufxYmN","$D2025-06-12T13:59:50.677Z"],["b_qo3dC8y46HE","$D2025-06-12T14:53:05.645Z"],["b_QWoGrw57H7S","$D2025-06-12T14:58:18.767Z"],["b_JrJ47HCqiks","$D2025-06-12T15:04:26.979Z"],["b_pthAkMxR9tY","$D2025-06-12T15:08:35.252Z"],["b_Oj7hovA5Rhu","$D2025-06-12T15:11:28.291Z"],["b_gwIOpfJh4q6","$D2025-06-12T15:17:56.734Z"],["b_A9QjToKQgNB","$D2025-06-12T16:07:32.067Z"],["b_qG5JMaMpg05","$D2025-06-12T16:20:23.234Z"],["b_0Xlug9H15ZC","$D2025-06-14T16:37:20.044Z"],["b_L7VhcPvU8hr","$D2025-06-14T16:44:23.076Z"]] 9f:[["b_qG5JMaMpg05",false],["b_0Xlug9H15ZC",false],["b_L7VhcPvU8hr",false]] a0:[["b_qG5JMaMpg05","$undefined"],["b_0Xlug9H15ZC","$undefined"],["b_L7VhcPvU8hr",{"deploymentId":"dpl_4XpXMW5AZzhhptw6biZ5A12CTF7t"}]] a1:[["b_qG5JMaMpg05",null],["b_0Xlug9H15ZC",null],["b_L7VhcPvU8hr",null]] a2:[["b_qG5JMaMpg05",true],["b_0Xlug9H15ZC",true],["b_L7VhcPvU8hr",true]] a3:[["b_qG5JMaMpg05",true],["b_0Xlug9H15ZC",true],["b_L7VhcPvU8hr",true]] a4:[] a5:T602,The user is saying that Grapie is only responding with introduction paragraphs and not actually answering questions they ask. Looking at the current implementation, I can see the issue: The current `generateBotResponse` function is designed to follow a strict flow of collecting travel information (destination, dates, budget, interests) in order. It's not designed to handle general questions or provide answers outside of this structured flow. The function currently: - Tries to extract travel info from user input - Updates the travel info state - Determines what question to ask next based on missing info - Only provides responses related to the structured travel planning flow What the user wants is for Grapie to be able to answer general travel questions while still maintaining the ability to create itineraries. I need to modify the logic to: - First check if the user is asking a general question - If it's a general question, provide a helpful answer - If it's travel planning related, continue with the structured flow - Allow Grapie to be more conversational and helpful beyond just the 4-step itinerary creation process I should add logic to detect and respond to various types of questions like: - "What's the best time to visit Paris?" - "How much does food cost in Tokyo?" - "What should I pack for London?" - "Is it safe to travel to..." - General travel advice questions The key is to make Grapie more flexible and conversational while still maintaining the structured itinerary creation flow when appropriate.a6:T252a8,[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Worldie - Connect Your Business to the World", description: "Worldie helps businesses expand globally with innovative solutions and strategic partnerships.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]png:file="public/worldie-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_2025-03-20_at_18.15.38-removebg-preview-MGcPFLrFElaNvtNVvn9tXkJkxZQfN5.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(262, 83%, 58%)",
          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]typescriptreact:file="lib/data-sources.ts" isMerged="true"
// Data source integrations for real-time travel information
export interface TravelDataSource {
  source: string
  data: any
  lastUpdated: Date
  reliability: number // 1-10 scale
}

export interface AttractionStatus {
  name: string
  status: "open" | "closed" | "limited" | "unknown"
  reason?: string
  lastUpdated: Date
  source: string
}

export interface TrendingDestination {
  name: string
  country: string
  trendScore: number
  mentions: number
  sentiment: "positive" | "negative" | "neutral"
  sources: string[]
  lastUpdated: Date
}

// Mock API functions - In production, these would connect to real APIs
export async function fetchGoogleTravelData(destination: string): Promise<TravelDataSource> {
  // Simulate API call to Google Travel/Maps
  await new Promise((resolve) => setTimeout(resolve, 1000))

return {
    source: "Google Travel",
    data: {
      attractions: [
        { name: "Eiffel Tower", status: "open", hours: "9:00-23:00", tickets: "available" },
        { name: "Louvre Museum", status: "open", hours: "9:00-18:00", tickets: "limited" },
      ],
      weather: { temp: 22, condition: "sunny", forecast: "clear week ahead" },
      transportation: { metro: "operational", strikes: "none scheduled" },
    },
    lastUpdated: new Date(),
    reliability: 9,
  }
}

export async function fetchTripAdvisorData(destination: string): Promise<TravelDataSource> {
  // Simulate TripAdvisor API call
  await new Promise((resolve) => setTimeout(resolve, 800))

return {
    source: "TripAdvisor",
    data: {
      topAttractions: [
        { name: "Eiffel Tower", rating: 4.5, reviews: 125000, status: "open" },
        { name: "Arc de Triomphe", rating: 4.3, reviews: 89000, status: "open" },
      ],
      restaurants: [{ name: "Le Comptoir du Relais", rating: 4.7, priceLevel: 3, availability: "booking required" }],
      alerts: ["Some metro lines under maintenance this week"],
    },
    lastUpdated: new Date(),
    reliability: 8,
  }
}

export async function fetchTikTokTrends(destination: string): Promise<TravelDataSource> {
  // Simulate TikTok trends API
  await new Promise((resolve) => setTimeout(resolve, 600))

return {
    source: "TikTok",
    data: {
      trendingSpots: [
        { name: "Hidden café in Montmartre", mentions: 15000, hashtag: "#hiddenparis" },
        { name: "Secret Seine viewpoint", mentions: 8500, hashtag: "#parisviews" },
      ],
      viralExperiences: ["Sunrise at Trocadéro", "Night photography at Sacré-Cœur"],
      warnings: ["Avoid tourist traps near Champs-Élysées - overpriced according to recent videos"],
    },
    lastUpdated: new Date(),
    reliability: 6,
  }
}

export async function fetchSafariBookmarks(destination: string): Promise<TravelDataSource> {
  // Simulate Safari/browser data integration
  await new Promise((resolve) => setTimeout(resolve, 400))

return {
    source: "Safari/Browser Data",
    data: {
      recentSearches: ["best time to visit Paris", "Paris museum pass worth it", "Paris weather October"],
      bookmarkedSites: ["Official Paris tourism site", "Paris Metro app", "Local food blog recommendations"],
      travelBlogs: [{ title: "Paris in 2024: What's Changed", url: "travelblog.com/paris-2024", date: "2024-12-01" }],
    },
    lastUpdated: new Date(),
    reliability: 7,
  }
}

export async function fetchAppRecentPosts(destination: string): Promise<TravelDataSource> {
  // Fetch recent posts from our own app
  await new Promise((resolve) => setTimeout(resolve, 300))

return {
    source: "Worldie App Posts",
    data: {
      recentReviews: [
        {
          location: "Hidden café, Paris",
          comment: "Found this amazing spot yesterday! Still open and not crowded",
          rating: 5,
          date: "2024-12-11",
          verified: true,
        },
        {
          location: "Eiffel Tower",
          comment: "Long queues today, book online in advance!",
          rating: 4,
          date: "2024-12-11",
          verified: true,
        },
      ],
      alerts: ["Notre-Dame still under renovation - limited access", "New bike-sharing stations added near Louvre"],
    },
    lastUpdated: new Date(),
    reliability: 9,
  }
}

export async function checkAttractionStatus(attraction: string, city: string): Promise<AttractionStatus> {
  // Real-time status checking
  await new Promise((resolve) => setTimeout(resolve, 500))

// Mock real-time status data
  const statusData: { [key: string]: AttractionStatus } = {
    "eiffel tower": {
      name: "Eiffel Tower",
      status: "open",
      lastUpdated: new Date(),
      source: "Official Website",
    },
    "notre dame": {
      name: "Notre-Dame Cathedral",
      status: "closed",
      reason: "Under restoration until 2024",
      lastUpdated: new Date(),
      source: "Official Website",
    },
    louvre: {
      name: "Louvre Museum",
      status: "limited",
      reason: "Reduced capacity due to maintenance in east wing",
      lastUpdated: new Date(),
      source: "Museum Website",
    },
  }

return (
    statusData[attraction.toLowerCase()] || {
      name: attraction,
      status: "unknown",
      lastUpdated: new Date(),
      source: "Unknown",
    }
  )
}

export async function getTrendingDestinations(): Promise<TrendingDestination[]> {
  // Aggregate trending data from multiple sources
  await new Promise((resolve) => setTimeout(resolve, 1200))

return [
    {
      name: "Lisbon",
      country: "Portugal",
      trendScore: 95,
      mentions: 45000,
      sentiment: "positive",
      sources: ["TikTok", "Instagram", "Travel Blogs"],
      lastUpdated: new Date(),
    },
    {
      name: "Tbilisi",
      country: "Georgia",
      trendScore: 88,
      mentions: 23000,
      sentiment: "positive",
      sources: ["TikTok", "YouTube", "Reddit"],
      lastUpdated: new Date(),
    },
    {
      name: "Bali",
      country: "Indonesia",
      trendScore: 82,
      mentions: 67000,
      sentiment: "neutral",
      sources: ["Instagram", "TikTok", "Travel Forums"],
      lastUpdated: new Date(),
    },
  ]
}
[V0_FILE]typescriptreact:file="lib/ai-travel-assistant.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import {
  fetchGoogleTravelData,
  fetchTripAdvisorData,
  fetchTikTokTrends,
  fetchSafariBookmarks,
  fetchAppRecentPosts,
  checkAttractionStatus,
  getTrendingDestinations,
  type TravelDataSource,
  type AttractionStatus,
} from "./data-sources"

export interface TravelQuery {
  destination: string
  dates?: string
  budget?: string
  interests?: string[]
  groupSize?: string
  duration?: string
}

export interface EnhancedTravelResponse {
  itinerary: string
  realTimeUpdates: string[]
  attractions: AttractionStatus[]
  trendingSpots: string[]
  localInsights: string[]
  warnings: string[]
  lastUpdated: Date
  sources: string[]
}

export class AITravelAssistant {
  private dataSources: TravelDataSource[] = []

async gatherRealTimeData(destination: string): Promise<void> {
    console.log(`🔍 Gathering real-time data for ${destination}...`)

try {
      // Fetch data from all sources in parallel
      const [googleData, tripAdvisorData, tiktokData, safariData, appData] = await Promise.all([
        fetchGoogleTravelData(destination),
        fetchTripAdvisorData(destination),
        fetchTikTokTrends(destination),
        fetchSafariBookmarks(destination),
        fetchAppRecentPosts(destination),
      ])

this.dataSources = [googleData, tripAdvisorData, tiktokData, safariData, appData]
      console.log(`✅ Successfully gathered data from ${this.dataSources.length} sources`)
    } catch (error) {
      console.error("❌ Error gathering real-time data:", error)
    }
  }

async checkAttractionStatuses(attractions: string[], city: string): Promise<AttractionStatus[]> {
    const statusChecks = attractions.map((attraction) => checkAttractionStatus(attraction, city))

return Promise.all(statusChecks)
  }

async generateEnhancedItinerary(query: TravelQuery): Promise<EnhancedTravelResponse> {
    // Gather real-time data first
    await this.gatherRealTimeData(query.destination)

// Get trending destinations for context
    const trendingDestinations = await getTrendingDestinations()

// Extract key attractions to check their status
    const keyAttractions = this.extractKeyAttractions(query.destination)
    const attractionStatuses = await this.checkAttractionStatuses(keyAttractions, query.destination)

// Analyze all gathered data
    const analysis = this.analyzeGatheredData()

// Generate comprehensive response
    return {
      itinerary: this.generateDetailedItinerary(query, analysis, attractionStatuses),
      realTimeUpdates: this.extractRealTimeUpdates(),
      attractions: attractionStatuses,
      trendingSpots: this.extractTrendingSpots(),
      localInsights: this.extractLocalInsights(),
      warnings: this.extractWarnings(),
      lastUpdated: new Date(),
      sources: this.dataSources.map((ds) => ds.source),
    }
  }

async generateCityRecommendations(city: string): Promise<string> {
    // Gather real-time data for the city
    await this.gatherRealTimeData(city)

// Get attraction statuses for the city
    const keyAttractions = this.extractKeyAttractions(city)
    const attractionStatuses = await this.checkAttractionStatuses(keyAttractions, city)

// Analyze gathered data
    const analysis = this.analyzeGatheredData()

// Generate comprehensive city guide
    let response = `🌟 **What to do in ${city}** (Live Updates: ${new Date().toLocaleString()})\n\n`

// Current conditions
    if (analysis.weather) {
      response += `🌤️ **Right Now:**\n`
      response += `• Weather: ${analysis.weather.condition}, ${analysis.weather.temp}°C\n`
      response += `• Best time to visit outdoor attractions: ${this.getBestTimeAdvice(analysis.weather)}\n\n`
    }

// Must-see attractions with live status
    response += `🏛️ **Must-See Attractions:**\n`
    const openAttractions = attractionStatuses.filter((a) => a.status === "open")
    const closedAttractions = attractionStatuses.filter((a) => a.status === "closed")
    const limitedAttractions = attractionStatuses.filter((a) => a.status === "limited")

openAttractions.forEach((attraction) => {
      response += `• ✅ **${attraction.name}** - OPEN NOW\n`
      response += `  ${this.getAttractionAdvice(attraction.name, city)}\n`
    })

if (limitedAttractions.length > 0) {
      response += `\n🟡 **Limited Access (Book Ahead):**\n`
      limitedAttractions.forEach((attraction) => {
        response += `• ⚠️ **${attraction.name}** - ${attraction.reason}\n`
        response += `  ${this.getAttractionAdvice(attraction.name, city)}\n`
      })
    }

if (closedAttractions.length > 0) {
      response += `\n❌ **Currently Closed:**\n`
      closedAttractions.forEach((attraction) => {
        response += `• **${attraction.name}** - ${attraction.reason}\n`
        response += `  Alternative: ${this.getAlternativeRecommendation(attraction.name, city)}\n`
      })
    }

// Trending experiences from social media
    if (analysis.trendingActivities.length > 0) {
      response += `\n🔥 **Trending Right Now:**\n`
      analysis.trendingActivities.slice(0, 3).forEach((activity: any) => {
        response += `• **${activity.name}** - ${activity.mentions} mentions on social media\n`
        response += `  ${this.getTrendingActivityAdvice(activity.name)}\n`
      })
    }

// Food & dining recommendations
    response += `\n🍽️ **Where to Eat:**\n`
    const foodRecommendations = this.getFoodRecommendations(city, analysis)
    foodRecommendations.forEach((rec) => {
      response += `• **${rec.name}** - ${rec.description}\n`
      response += `  ${rec.advice}\n`
    })

// Transportation tips
    if (analysis.transportation) {
      response += `\n🚇 **Getting Around:**\n`
      response += `• Metro status: ${analysis.transportation.metro}\n`
      response += `• ${this.getTransportationAdvice(city, analysis.transportation)}\n`
    }

// Local insights from recent reviews
    const recentInsights = this.extractLocalInsights()
    if (recentInsights.length > 0) {
      response += `\n💡 **Fresh Local Tips:**\n`
      recentInsights.slice(0, 2).forEach((insight) => {
        response += `• ${insight}\n`
      })
    }

// Time-specific recommendations
    const timeAdvice = this.getTimeSpecificAdvice(city)
    response += `\n⏰ **Perfect Timing:**\n${timeAdvice}\n`

// Budget tips
    response += `\n💰 **Money-Saving Tips:**\n`
    response += `${this.getBudgetAdvice(city)}\n`

// Important warnings
    const warnings = this.extractWarnings()
    if (warnings.length > 0) {
      response += `\n⚠️ **Important Alerts:**\n`
      warnings.forEach((warning) => {
        response += `• ${warning}\n`
      })
    }

response += `\n📱 **Pro Tip:** Ask me for specific recommendations like "best photo spots in ${city}" or "romantic dinner places in ${city}"!`

return response
  }

private extractKeyAttractions(destination: string): string[] {
    const attractionMap: { [key: string]: string[] } = {
      paris: ["Eiffel Tower", "Louvre", "Notre Dame", "Arc de Triomphe", "Sacré-Cœur"],
      london: ["Big Ben", "Tower Bridge", "British Museum", "London Eye", "Buckingham Palace"],
      tokyo: ["Tokyo Tower", "Senso-ji Temple", "Meiji Shrine", "Shibuya Crossing", "Tsukiji Market"],
      rome: ["Colosseum", "Vatican", "Trevi Fountain", "Pantheon", "Roman Forum"],
      "new york": ["Statue of Liberty", "Empire State Building", "Central Park", "Times Square", "Brooklyn Bridge"],
    }

const city = destination.toLowerCase()
    return attractionMap[city] || ["Main attractions", "City center", "Museums", "Parks"]
  }

private analyzeGatheredData() {
    const analysis = {
      weather: null,
      transportation: null,
      crowdLevels: null,
      priceChanges: null,
      newOpenings: [],
      closures: [],
      trendingActivities: [],
      localRecommendations: [],
    }

// Analyze Google data
    const googleData = this.dataSources.find((ds) => ds.source === "Google Travel")
    if (googleData) {
      analysis.weather = googleData.data.weather
      analysis.transportation = googleData.data.transportation
    }

// Analyze TripAdvisor data
    const tripAdvisorData = this.dataSources.find((ds) => ds.source === "TripAdvisor")
    if (tripAdvisorData) {
      analysis.crowdLevels = "Moderate based on recent reviews"
      analysis.localRecommendations = tripAdvisorData.data.restaurants || []
    }

// Analyze TikTok trends
    const tiktokData = this.dataSources.find((ds) => ds.source === "TikTok")
    if (tiktokData) {
      analysis.trendingActivities = tiktokData.data.trendingSpots || []
    }

// Analyze app data
    const appData = this.dataSources.find((ds) => ds.source === "Worldie App Posts")
    if (appData) {
      analysis.closures = appData.data.alerts || []
    }

return analysis
  }

private generateDetailedItinerary(query: TravelQuery, analysis: any, attractions: AttractionStatus[]): string {
    const destination = query.destination
    const openAttractions = attractions.filter((a) => a.status === "open")
    const closedAttractions = attractions.filter((a) => a.status === "closed")
    const limitedAttractions = attractions.filter((a) => a.status === "limited")

let itinerary = `🌍 **Real-Time ${destination} Itinerary** (Updated: ${new Date().toLocaleString()})\n\n`

// Weather and current conditions
    if (analysis.weather) {
      itinerary += `🌤️ **Current Conditions:**\n`
      itinerary += `• Weather: ${analysis.weather.condition}, ${analysis.weather.temp}°C\n`
      itinerary += `• Forecast: ${analysis.weather.forecast}\n\n`
    }

// Transportation updates
    if (analysis.transportation) {
      itinerary += `🚇 **Transportation Status:**\n`
      itinerary += `• Metro: ${analysis.transportation.metro}\n`
      itinerary += `• Strikes: ${analysis.transportation.strikes}\n\n`
    }

// Day-by-day itinerary with real-time status
    itinerary += `📅 **3-Day Itinerary with Live Updates:**\n\n`

itinerary += `**Day 1: Must-See Attractions**\n`
    openAttractions.slice(0, 3).forEach((attraction) => {
      itinerary += `• ✅ ${attraction.name} - OPEN (Verified ${attraction.lastUpdated.toLocaleTimeString()})\n`
    })

if (closedAttractions.length > 0) {
      itinerary += `\n⚠️ **Currently Closed:**\n`
      closedAttractions.forEach((attraction) => {
        itinerary += `• ❌ ${attraction.name} - ${attraction.reason || "Temporarily closed"}\n`
      })
    }

if (limitedAttractions.length > 0) {
      itinerary += `\n🟡 **Limited Access:**\n`
      limitedAttractions.forEach((attraction) => {
        itinerary += `• ⚠️ ${attraction.name} - ${attraction.reason || "Limited capacity"}\n`
      })
    }

itinerary += `\n**Day 2: Trending & Hidden Gems**\n`
    if (analysis.trendingActivities.length > 0) {
      analysis.trendingActivities.slice(0, 3).forEach((spot: any) => {
        itinerary += `• 🔥 ${spot.name} - Trending on social media (${spot.mentions} mentions)\n`
      })
    }

itinerary += `\n**Day 3: Local Experiences**\n`
    if (analysis.localRecommendations.length > 0) {
      analysis.localRecommendations.slice(0, 2).forEach((rec: any) => {
        itinerary += `• 🍽️ ${rec.name} - Rated ${rec.rating}/5 (${rec.availability || "Check availability"})\n`
      })
    }

return itinerary
  }

private extractRealTimeUpdates(): string[] {
    const updates: string[] = []

this.dataSources.forEach((source) => {
      if (source.source === "TripAdvisor" && source.data.alerts) {
        updates.push(...source.data.alerts)
      }
      if (source.source === "Worldie App Posts" && source.data.alerts) {
        updates.push(...source.data.alerts)
      }
      if (source.source === "TikTok" && source.data.warnings) {
        updates.push(...source.data.warnings)
      }
    })

return updates
  }

private extractTrendingSpots(): string[] {
    const tiktokData = this.dataSources.find((ds) => ds.source === "TikTok")
    if (tiktokData && tiktokData.data.trendingSpots) {
      return tiktokData.data.trendingSpots.map((spot: any) => spot.name)
    }
    return []
  }

private extractLocalInsights(): string[] {
    const insights: string[] = []

const appData = this.dataSources.find((ds) => ds.source === "Worldie App Posts")
    if (appData && appData.data.recentReviews) {
      appData.data.recentReviews.forEach((review: any) => {
        if (review.verified) {
          insights.push(`${review.location}: "${review.comment}" - Posted ${review.date}`)
        }
      })
    }

return insights
  }

private extractWarnings(): string[] {
    const warnings: string[] = []

this.dataSources.forEach((source) => {
      if (source.data.warnings) {
        warnings.push(...source.data.warnings)
      }
      if (source.data.alerts) {
        warnings.push(...source.data.alerts)
      }
    })

return warnings
  }

private getBestTimeAdvice(weather: any): string {
    if (weather.condition === "sunny") return "Perfect for outdoor sightseeing!"
    if (weather.condition === "rainy") return "Great day for museums and indoor attractions"
    return "Good conditions for most activities"
  }

private getAttractionAdvice(attraction: string, city: string): string {
    const advice: { [key: string]: { [key: string]: string } } = {
      paris: {
        "Eiffel Tower":
          "Best photos from Trocadéro Gardens (Google Maps: 'Place du Trocadéro'). Visit at sunset (around 9pm in summer). Skip-the-line tickets at toureiffel.paris.",
        Louvre:
          "Enter via Porte des Lions entrance to avoid lines. Mona Lisa is in Denon Wing, Room 711. Open until 9:45pm on Wednesdays and Fridays.",
        "Notre Dame":
          "Currently under renovation. View from Square Jean XXIII behind the cathedral for best photos. Then visit Shakespeare & Co. bookstore nearby (37 Rue de la Bûcherie).",
        "Arc de Triomphe":
          "Access via underground passage at Avenue de la Grande Armée or Champs Élysées. Go at sunset (around 9pm in summer) for golden light on Champs-Élysées.",
        "Sacré-Cœur":
          "Take Funiculaire de Montmartre up the hill. Arrive early (before 8am) to avoid crowds. Visit Place du Tertre behind the basilica for local artists.",
      },
      london: {
        "Big Ben":
          "Currently under renovation until 2022. Best views from Westminster Bridge or St. James's Park. Big Ben sounds at the top of each hour.",
        "Tower Bridge":
          "Walk the glass floor walkway (£10.60). Check website for bridge lifting times. Best photos from Butler's Wharf pier.",
        "British Museum":
          "Free entry! Go early (opens 10am). Must-sees: Rosetta Stone (Room 4), Egyptian mummies (Room 62-63), Parthenon sculptures (Room 18).",
        "London Eye":
          "Book 'Fast Track' tickets online. Sunset rides offer best views. Combine with South Bank walk from Westminster to Tower Bridge.",
        "Buckingham Palace":
          "Changing of Guard at 11am (check schedule online). State Rooms open only in summer. Watch from Victoria Memorial for best views.",
      },
      tokyo: {
        "Tokyo Tower":
          "Go at night (open until 10:30pm). Main Deck (¥1200) has glass floor panels. Top Deck Tour (¥2800) for higher views. Nearby: Zojoji Temple.",
        "Senso-ji Temple":
          "Arrive before 8am to avoid crowds. Enter through Kaminarimon Gate, shop along Nakamise Street. Try ningyo-yaki cakes at Kimuraya.",
        "Meiji Shrine":
          "Enter through massive torii gates at Harajuku or Yoyogi entrances. Visit adjacent Yoyogi Park on Sundays for rockabilly dancers.",
        "Shibuya Crossing":
          "Best views: Starbucks 2F in Tsutaya building, MAGNET by SHIBUYA109 rooftop, or Excel Hotel Tokyu bridge. Busiest at 7pm weekdays.",
        "Tsukiji Outer Market":
          "Now at Toyosu Market. Tuna auctions viewable 5:30-6:30am (reserve online). Try fresh sushi breakfast at Sushi Dai or Daiwa Sushi.",
      },
    }

return advice[city.toLowerCase()]?.[attraction] || "A must-visit attraction with unique local character."
  }

private getAlternativeRecommendation(attraction: string, city: string): string {
    const alternatives: { [key: string]: { [key: string]: string } } = {
      paris: {
        "Notre Dame": "Visit Sainte-Chapelle for incredible stained glass, or Saint-Sulpice for Dan Brown fans",
      },
      london: {
        "Big Ben": "Visit Westminster Abbey or take Thames cruise for great Parliament views",
      },
    }

return alternatives[city.toLowerCase()]?.[attraction] || "Explore nearby attractions in the same area"
  }

private getTrendingActivityAdvice(activity: string): string {
    if (activity.includes("café") || activity.includes("coffee")) {
      return "Perfect for Instagram photos. Arrive early to avoid influencer crowds."
    }
    if (activity.includes("viewpoint") || activity.includes("view")) {
      return "Best during golden hour. Bring a good camera and arrive 30 mins before sunset."
    }
    if (activity.includes("market") || activity.includes("food")) {
      return "Try local specialties. Bring cash and reusable bags."
    }
    return "Popular on social media right now. Check opening hours before visiting."
  }

private getFoodRecommendations(
    city: string,
    analysis: any,
  ): Array<{ name: string; description: string; advice: string }> {
    const cityFood: { [key: string]: Array<{ name: string; description: string; advice: string }> } = {
      paris: [
        {
          name: "L'As du Fallafel",
          description: "Famous falafel in Le Marais (34 Rue des Rosiers)",
          advice:
            "Order the 'Special' (€8) with eggplant and cabbage. Open 11am-11pm except Saturdays. Cash only. Queue forms outside.",
        },
        {
          name: "Breizh Café",
          description: "Modern crêperie in Le Marais (109 Rue Vieille du Temple)",
          advice:
            "Try the Cancale oyster crêpe (€18) or classic butter-sugar (€6). Reservations essential. Open Wed-Sun.",
        },
        {
          name: "Du Pain et des Idées",
          description: "Artisan bakery (4 Rue Yves Toudic)",
          advice:
            "Best croissants in Paris (€1.20). Arrive before 10am for full selection. Closed weekends. Try the escargot pastry (€2.50).",
        },
      ],
      london: [
        {
          name: "Dishoom",
          description: "Bombay-style café (7 Boundary St, Shoreditch)",
          advice:
            "No dinner reservations (1+ hour wait). Go for breakfast/lunch. Must-order: bacon naan roll (£8.50), black daal (£6.90).",
        },
        {
          name: "Padella",
          description: "Fresh pasta (6 Southwark St, Borough Market)",
          advice: "No reservations. Queue 30-60 mins. Try pici cacio e pepe (£6.50). Open Mon-Sat 12-4pm. Cash only.",
        },
        {
          name: "Sketch",
          description: "Pink tearoom (9 Conduit St, Mayfair)",
          advice: "Afternoon tea £58-78. Book 2+ weeks ahead. Instagram-famous pink interior. Try the rose macarons.",
        },
      ],
      rome: [
        {
          name: "Da Enzo al 29",
          description: "Traditional trattoria (Via dei Vascellari, 29)",
          advice:
            "No reservations. Arrive at 7:30pm opening or wait 1+ hour. Try cacio e pepe (€12) and supplì (€3). Cash only.",
        },
        {
          name: "Ginger",
          description: "Modern Roman cuisine (Via Borgognona, 43)",
          advice: "Lunch menu €25, dinner €45-60. Book ahead. Try their famous carbonara with guanciale. Open daily.",
        },
        {
          name: "Trapizzino",
          description: "Street food triangle pizza (Via Giovanni Branca, 88)",
          advice: "Try chicken cacciatore trapizzino (€4.50). Multiple locations. Perfect quick lunch. Open 11am-2am.",
        },
      ],
      "new york": [
        {
          name: "Joe's Pizza",
          description: "Classic NY slice (7 Carmine St, Greenwich Village)",
          advice:
            "Plain slice $3, pepperoni $3.50. Fold it in half to eat properly. Multiple locations. Open until 4am weekends.",
        },
        {
          name: "Katz's Delicatessen",
          description: "Famous pastrami sandwiches (205 E Houston St)",
          advice: "Pastrami sandwich $25.95. Keep your ticket! Tip the slicer $1 for samples. Open 24/7 Fri-Sat.",
        },
        {
          name: "Xi'an Famous Foods",
          description: "Hand-pulled noodles (Multiple locations)",
          advice:
            "Try spicy cumin lamb noodles ($9.95). Cash only at some locations. Spice level 1-10, start with 3-4.",
        },
      ],
      barcelona: [
        {
          name: "Cal Pep",
          description: "Tapas bar (Plaça de les Olles, 8)",
          advice:
            "No reservations. Arrive at 7:30pm opening. Stand at bar only. Try gambas al ajillo (€12) and jamón ibérico (€18).",
        },
        {
          name: "La Boqueria Market",
          description: "Famous food market (La Rambla, 91)",
          advice: "Avoid tourist stalls near entrance. Try Pinotxo Bar for breakfast (€8-12). Open Mon-Sat 8am-8:30pm.",
        },
        {
          name: "Disfrutar",
          description: "Michelin 2-star (Carrer de Villarroel, 163)",
          advice: "Tasting menu €190. Book 2+ months ahead. Lunch cheaper than dinner. Creative Mediterranean cuisine.",
        },
      ],
      amsterdam: [
        {
          name: "Café de Reiger",
          description: "Brown café (Nieuwe Leliestraat, 34)",
          advice: "Try Dutch cheese platter (€12) and local beer. Cozy atmosphere. Open daily 4pm-1am. Cash preferred.",
        },
        {
          name: "Winkel 43",
          description: "Famous apple pie (Noordermarkt, 43)",
          advice: "Apple pie slice €4.50 with whipped cream. Huge portions. Near Anne Frank House. Open 8am-1am.",
        },
        {
          name: "Restaurant Greetje",
          description: "Modern Dutch cuisine (Peperstraat, 23)",
          advice: "3-course menu €49.50. Try modern stamppot. Reservations essential. Closed Sundays and Mondays.",
        },
      ],
    }

return (
      cityFood[city.toLowerCase()] || [
        {
          name: "Local Market",
          description: "Fresh local ingredients and street food",
          advice: "Best way to experience authentic local flavors. Bring cash and appetite!",
        },
      ]
    )
  }

private getTransportationAdvice(city: string, transport: any): string {
    const advice: { [key: string]: string } = {
      paris:
        "Buy a Navigo weekly pass for unlimited metro/bus. Avoid rush hours (8-9am, 6-7pm). Walking is often faster for short distances.",
      london: "Get an Oyster Card or use contactless payment. Mind the gap! Night Tube runs weekends on main lines.",
      tokyo:
        "JR Pass for tourists covers most trains. Download Google Translate with camera for station names. Rush hour is intense but efficient.",
      rome: "Walking is best in historic center. Buy Roma Pass for public transport + museum entries. Taxis are expensive.",
      "new york":
        "MetroCard or OMNY contactless. Express trains save time. Walking above ground often faster than subway for short trips.",
    }

return (
      advice[city.toLowerCase()] || "Research local transport passes for savings. Walking often reveals hidden gems!"
    )
  }

private getTimeSpecificAdvice(city: string): string {
    const advice: { [key: string]: string } = {
      paris: `**Morning (8-11am):** Visit Eiffel Tower or Louvre (enter via Porte des Lions at 9am) to beat crowds
**Afternoon (2-5pm):** Explore Montmartre starting at Abbesses metro, then walk to Sacré-Cœur
**Evening (6-9pm):** Aperitif at Le Comptoir Général (84 Quai de Jemmapes), dinner at Chez Janou (2 Rue Roger Verlomme)
**Night (9pm+):** Seine river cruise with Bateaux Mouches (€14) or drinks at Le Perchoir rooftop bar (33 Rue de la Verrerie)`,

london: `**Morning (9-12pm):** Borough Market breakfast (opens 10am), then Tower of London (arrive at opening)
**Afternoon (1-5pm):** British Museum or Tate Modern (both free), then walk along South Bank
**Evening (5-8pm):** Pre-theatre menu at Dishoom Covent Garden (£29.50 for 3 courses), then walk through Soho
**Night (8pm+):** Cocktails at Mr Fogg's (15 Bruton Lane) or comedy at Top Secret Comedy Club (170 Drury Lane)`,

tokyo: `**Early Morning (5-8am):** Tsukiji Market, then Hamarikyu Gardens (¥300 entry) when it opens at 9am
**Morning (9-12pm):** Senso-ji Temple in Asakusa, then boat cruise to Odaiba (¥1200)
**Afternoon (1-6pm):** Harajuku's Takeshita Street, then Meiji Shrine and Yoyogi Park
**Evening (6-10pm):** Dinner at Piss Alley/Memory Lane (Shinjuku), then Metropolitan Government Building free observatory
**Late Night (10pm+):** Karaoke in Shibuya (Big Echo, ¥1000/30min), or Golden Gai bars in Shinjuku (¥500-1000 cover)`,
    }

return (
      advice[city.toLowerCase()] ||
      `**Morning:** Major attractions (less crowded)
**Afternoon:** Local neighborhoods and markets
**Evening:** Dining and cultural experiences
**Night:** Local nightlife and entertainment`
    )
  }

private getBudgetAdvice(city: string): string {
    const advice: { [key: string]: string } = {
      paris:
        "• Many museums free first Sunday mornings\n• Picnic in parks with market food\n• Happy hour 5-7pm at wine bars\n• Free walking tours (tip-based)",
      london:
        "• Most museums completely free\n• Pub lunches cheaper than dinner\n• Free events in parks and markets\n• Walk instead of tube for short distances",
      tokyo:
        "• Convenience store meals are cheap and good\n• Lunch sets much cheaper than dinner\n• Free observation decks in government buildings\n• 100-yen shops for souvenirs",
    }

return (
      advice[city.toLowerCase()] ||
      "• Look for lunch specials and happy hours\n• Free walking tours and city parks\n• Local markets for affordable meals\n• Public transport day passes"
    )
  }
}
[V0_FILE]typescriptreact:file="components/floating-chat.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { MessageCircle, X, Send, Plane } from "lucide-react"
import { AITravelAssistant } from "@/lib/ai-travel-assistant"

interface Message {
  id: number
  type: "user" | "bot"
  content: string
  timestamp: Date
}

interface TravelInfo {
  destination: string | null
  dates: string | null
  budget: string | null
  interests: string[] | null
}

export function FloatingChat() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: 1,
      type: "bot",
      content:
        "Hi! I'm Grapie, your AI travel assistant! 🌍 I can help you create a personalized travel itinerary. Where would you like to travel?",
      timestamp: new Date(),
    },
  ])
  const [inputMessage, setInputMessage] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isGeneratingItinerary, setIsGeneratingItinerary] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [aiAssistant] = useState(() => new AITravelAssistant())

// Track travel information
  const [travelInfo, setTravelInfo] = useState<TravelInfo>({
    destination: null,
    dates: null,
    budget: null,
    interests: null,
  })

// Track which question we're currently asking
  const [currentQuestion, setCurrentQuestion] = useState<"destination" | "dates" | "budget" | "interests" | "complete">(
    "destination",
  )

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const extractDestination = (input: string): string | null => {
    const input_lower = input.toLowerCase()

// Common cities
    const cities = [
      "paris",
      "tokyo",
      "london",
      "rome",
      "new york",
      "barcelona",
      "amsterdam",
      "berlin",
      "madrid",
      "kyoto",
      "venice",
      "prague",
      "vienna",
      "bangkok",
      "seoul",
      "sydney",
      "dubai",
      "istanbul",
      "marrakech",
      "cairo",
      "rio",
      "mexico city",
      "hong kong",
      "singapore",
      "bali",
      "athens",
    ]

for (const city of cities) {
      if (input_lower.includes(city)) {
        return city.charAt(0).toUpperCase() + city.slice(1)
      }
    }

// Check for phrases like "I want to go to X" or "I'm traveling to X"
    const travelPhrases = [
      "go to ",
      "going to ",
      "visit ",
      "visiting ",
      "travel to ",
      "traveling to ",
      "trip to ",
      "vacation in ",
      "holiday in ",
      "heading to ",
      "flying to ",
    ]

for (const phrase of travelPhrases) {
      if (input_lower.includes(phrase)) {
        const startIndex = input_lower.indexOf(phrase) + phrase.length
        const endIndex = input_lower.indexOf(" ", startIndex)
        if (endIndex === -1) {
          return input.substring(startIndex).trim()
        }
        return input.substring(startIndex, endIndex).trim()
      }
    }

return null
  }

const extractDates = (input: string): string | null => {
    const input_lower = input.toLowerCase()

// Check for specific date formats or phrases
    if (input_lower.includes("from") && input_lower.includes("to")) {
      const fromIndex = input_lower.indexOf("from") + 5
      const toIndex = input_lower.indexOf("to", fromIndex)
      if (fromIndex > 5 && toIndex > fromIndex) {
        return input.substring(fromIndex, toIndex).trim() + " to " + input.substring(toIndex + 3).trim()
      }
    }

// Check for month mentions
    const months = [
      "january",
      "february",
      "march",
      "april",
      "may",
      "june",
      "july",
      "august",
      "september",
      "october",
      "november",
      "december",
    ]

for (const month of months) {
      if (input_lower.includes(month)) {
        // Extract a phrase containing the month
        const monthIndex = input_lower.indexOf(month)
        const startIndex = Math.max(0, monthIndex - 10)
        const endIndex = Math.min(input.length, monthIndex + month.length + 15)
        return input.substring(startIndex, endIndex).trim()
      }
    }

// Check for duration mentions
    if (
      input_lower.includes("week") ||
      input_lower.includes("day") ||
      input_lower.includes("month") ||
      input_lower.includes("night")
    ) {
      return input.trim()
    }

return null
  }

const extractBudget = (input: string): string | null => {
    const input_lower = input.toLowerCase()

// Check for budget keywords
    const budgetKeywords = [
      "budget",
      "cheap",
      "expensive",
      "luxury",
      "affordable",
      "mid-range",
      "high-end",
      "cost",
      "spend",
      "price",
      "$",
      "€",
      "£",
    ]

for (const keyword of budgetKeywords) {
      if (input_lower.includes(keyword)) {
        // If budget keyword found, extract a relevant phrase
        const keywordIndex = input_lower.indexOf(keyword)
        const startIndex = Math.max(0, keywordIndex - 15)
        const endIndex = Math.min(input.length, keywordIndex + keyword.length + 15)
        return input.substring(startIndex, endIndex).trim()
      }
    }

// Check for specific budget ranges
    if (input_lower.match(/\d+\s*(dollars|euros|pounds|usd|eur|gbp)/)) {
      return input.trim()
    }

return null
  }

const extractInterests = (input: string): string[] | null => {
    const input_lower = input.toLowerCase()

const interestKeywords = [
      "food",
      "cuisine",
      "eating",
      "restaurant",
      "dining",
      "culture",
      "history",
      "museum",
      "art",
      "gallery",
      "nature",
      "hiking",
      "outdoors",
      "landscape",
      "park",
      "garden",
      "shopping",
      "market",
      "store",
      "mall",
      "boutique",
      "nightlife",
      "bar",
      "club",
      "party",
      "entertainment",
      "beach",
      "ocean",
      "sea",
      "swimming",
      "sunbathing",
      "adventure",
      "sport",
      "activity",
      "adrenaline",
      "relaxation",
      "spa",
      "wellness",
      "retreat",
      "architecture",
      "building",
      "design",
      "photography",
      "local",
      "authentic",
      "hidden gem",
      "off the beaten path",
    ]

const foundInterests: string[] = []

for (const keyword of interestKeywords) {
      if (input_lower.includes(keyword)) {
        // Group similar interests
        if (
          keyword === "food" ||
          keyword === "cuisine" ||
          keyword === "eating" ||
          keyword === "restaurant" ||
          keyword === "dining"
        ) {
          if (!foundInterests.includes("food")) foundInterests.push("food")
        } else if (keyword === "culture" || keyword === "history") {
          if (!foundInterests.includes("culture")) foundInterests.push("culture")
        } else if (keyword === "museum" || keyword === "art" || keyword === "gallery") {
          if (!foundInterests.includes("museums & art")) foundInterests.push("museums & art")
        } else if (
          keyword === "nature" ||
          keyword === "hiking" ||
          keyword === "outdoors" ||
          keyword === "landscape" ||
          keyword === "park" ||
          keyword === "garden"
        ) {
          if (!foundInterests.includes("nature")) foundInterests.push("nature")
        } else if (
          keyword === "shopping" ||
          keyword === "market" ||
          keyword === "store" ||
          keyword === "mall" ||
          keyword === "boutique"
        ) {
          if (!foundInterests.includes("shopping")) foundInterests.push("shopping")
        } else if (
          keyword === "nightlife" ||
          keyword === "bar" ||
          keyword === "club" ||
          keyword === "party" ||
          keyword === "entertainment"
        ) {
          if (!foundInterests.includes("nightlife")) foundInterests.push("nightlife")
        } else if (
          keyword === "beach" ||
          keyword === "ocean" ||
          keyword === "sea" ||
          keyword === "swimming" ||
          keyword === "sunbathing"
        ) {
          if (!foundInterests.includes("beaches")) foundInterests.push("beaches")
        } else if (
          keyword === "adventure" ||
          keyword === "sport" ||
          keyword === "activity" ||
          keyword === "adrenaline"
        ) {
          if (!foundInterests.includes("adventure")) foundInterests.push("adventure")
        } else if (keyword === "relaxation" || keyword === "spa" || keyword === "wellness" || keyword === "retreat") {
          if (!foundInterests.includes("relaxation")) foundInterests.push("relaxation")
        } else if (keyword === "architecture" || keyword === "building" || keyword === "design") {
          if (!foundInterests.includes("architecture")) foundInterests.push("architecture")
        } else if (
          keyword === "local" ||
          keyword === "authentic" ||
          keyword === "hidden gem" ||
          keyword === "off the beaten path"
        ) {
          if (!foundInterests.includes("local experiences")) foundInterests.push("local experiences")
        }
      }
    }

return foundInterests.length > 0 ? foundInterests : null
  }

const generateBotResponse = async (userInput: string): Promise<string> => {
    const input = userInput.toLowerCase()

// Check if user is asking a general travel question first
    if (isGeneralQuestion(input)) {
      return handleGeneralQuestion(input, userInput)
    }

// Check if user wants to start over or reset
    if (input.includes("start over") || input.includes("reset") || input.includes("new trip")) {
      setTravelInfo({ destination: null, dates: null, budget: null, interests: null })
      setCurrentQuestion("destination")
      return "Let's start fresh! Where would you like to travel?"
    }

// If we have a complete itinerary and user asks for changes
    if (
      currentQuestion === "complete" &&
      (input.includes("change") || input.includes("modify") || input.includes("different"))
    ) {
      return "What would you like to change about your itinerary? You can ask me to:\n• Modify specific days\n• Change the budget level\n• Add or remove activities\n• Focus on different interests\n\nOr say 'start over' to plan a completely new trip!"
    }

// Continue with structured travel planning flow
    const extractedDestination = extractDestination(userInput)
    const extractedDates = extractDates(userInput)
    const extractedBudget = extractBudget(userInput)
    const extractedInterests = extractInterests(userInput)

// Update travel info with any extracted information
    const updatedTravelInfo = { ...travelInfo }

if (extractedDestination && (currentQuestion === "destination" || !updatedTravelInfo.destination)) {
      updatedTravelInfo.destination = extractedDestination
    }

if (extractedDates && (currentQuestion === "dates" || !updatedTravelInfo.dates)) {
      updatedTravelInfo.dates = extractedDates
    }

if (extractedBudget && (currentQuestion === "budget" || !updatedTravelInfo.budget)) {
      updatedTravelInfo.budget = extractedBudget
    }

if (extractedInterests && (currentQuestion === "interests" || !updatedTravelInfo.interests)) {
      updatedTravelInfo.interests = extractedInterests
    }

// Update the state with new information
    setTravelInfo(updatedTravelInfo)

// Determine which question to ask next
    let nextQuestion = currentQuestion

if (!updatedTravelInfo.destination) {
      nextQuestion = "destination"
    } else if (!updatedTravelInfo.dates) {
      nextQuestion = "dates"
    } else if (!updatedTravelInfo.budget) {
      nextQuestion = "budget"
    } else if (!updatedTravelInfo.interests) {
      nextQuestion = "interests"
    } else {
      nextQuestion = "complete"
    }

setCurrentQuestion(nextQuestion)

// Generate response based on the next question
    switch (nextQuestion) {
      case "destination":
        return "Where would you like to travel? (e.g., Paris, Tokyo, New York)\n\nOr feel free to ask me any travel questions!"

case "dates":
        return `Great choice! When are you planning to visit ${updatedTravelInfo.destination}? (e.g., next week, December 10-15, summer vacation)`

case "budget":
        return `Perfect! What's your budget for this trip to ${updatedTravelInfo.destination}? (e.g., budget-friendly, mid-range, luxury)`

case "interests":
        return `Excellent! What are your interests for this trip to ${updatedTravelInfo.destination}? (e.g., food, museums, nature, shopping, nightlife)`

case "complete":
        setIsGeneratingItinerary(true)

// Simulate generating itinerary
        await new Promise((resolve) => setTimeout(resolve, 2000))

setIsGeneratingItinerary(false)

return generateCustomItinerary(
          updatedTravelInfo.destination!,
          updatedTravelInfo.dates!,
          updatedTravelInfo.budget!,
          updatedTravelInfo.interests!,
        )
    }
  }

const isGeneralQuestion = (input: string): boolean => {
    const questionKeywords = [
      "what",
      "how",
      "when",
      "where",
      "why",
      "which",
      "should i",
      "is it",
      "can i",
      "do i need",
      "best time",
      "weather",
      "temperature",
      "cost",
      "price",
      "expensive",
      "cheap",
      "safe",
      "safety",
      "visa",
      "passport",
      "currency",
      "language",
      "tip",
      "tipping",
      "pack",
      "bring",
      "wear",
      "flight",
      "hotel",
      "restaurant",
      "food",
      "drink",
      "transportation",
      "metro",
      "taxi",
      "attraction",
      "museum",
      "beach",
      "mountain",
      "park",
      "shopping",
      "nightlife",
      "culture",
      "history",
      "local",
      "tradition",
      "festival",
      "event",
    ]

return (
      questionKeywords.some((keyword) => input.includes(keyword)) &&
      !input.includes("i want") &&
      !input.includes("i'm going") &&
      !input.includes("planning to")
    )
  }

const handleGeneralQuestion = (input: string, originalInput: string): string => {
    // Weather and best time questions
    if (input.includes("weather") || input.includes("temperature") || input.includes("best time")) {
      if (input.includes("paris")) {
        return "🌤️ **Paris Weather Guide:**\n\n**Best Time:** April-June & September-October\n• Spring (Apr-Jun): 15-20°C, perfect for walking\n• Summer (Jul-Aug): 20-25°C, busy but great weather\n• Fall (Sep-Oct): 15-20°C, beautiful colors\n• Winter (Nov-Mar): 5-10°C, fewer crowds, cozy cafés\n\n**Pack:** Layers, comfortable shoes, light rain jacket\n\nWant me to create a custom Paris itinerary for your dates?"
      } else if (input.includes("tokyo")) {
        return "🌸 **Tokyo Weather Guide:**\n\n**Best Time:** March-May & September-November\n• Spring (Mar-May): 10-20°C, cherry blossoms!\n• Summer (Jun-Aug): 25-30°C, hot & humid, festivals\n• Fall (Sep-Nov): 15-25°C, beautiful autumn colors\n• Winter (Dec-Feb): 5-10°C, clear skies, fewer crowds\n\n**Avoid:** Rainy season (June-July)\n\nReady to plan your Tokyo adventure?"
      } else {
        return "I'd love to help with weather info! Which destination are you asking about? Popular choices:\n\n🌍 Paris, Tokyo, London, Rome, New York, Barcelona\n\nJust ask: 'What's the weather like in [city]?' and I'll give you detailed seasonal information!"
      }
    }

// Cost and budget questions
    if (
      input.includes("cost") ||
      input.includes("expensive") ||
      input.includes("cheap") ||
      input.includes("budget") ||
      input.includes("price")
    ) {
      if (input.includes("paris")) {
        return "💰 **Paris Budget Guide:**\n\n**Budget (€50-80/day):**\n• Hostel: €25-40/night\n• Meals: €25-35/day\n• Metro pass: €7.50/day\n\n**Mid-range (€100-150/day):**\n• Hotel: €80-120/night\n• Meals: €50-70/day\n• Activities: €15-25 each\n\n**Luxury (€200+/day):**\n• 4-5 star hotel: €200+/night\n• Fine dining: €100+/meal\n• Private tours: €300+\n\nWant a custom itinerary for your budget?"
      } else {
        return "💰 **General Travel Costs:**\n\n**Budget destinations:** Vietnam, Thailand, Mexico, Eastern Europe\n**Mid-range:** Spain, Portugal, Japan, South Korea\n**Expensive:** Switzerland, Norway, Australia, Singapore\n\n**Daily budget ranges:**\n• Backpacker: $30-50/day\n• Mid-range: $80-150/day\n• Luxury: $200+/day\n\nWhich destination are you curious about? I can give specific cost breakdowns!"
      }
    }

// Safety questions
    if (input.includes("safe") || input.includes("safety") || input.includes("dangerous")) {
      return "🛡️ **Travel Safety Tips:**\n\n**Generally very safe destinations:**\n• Japan, Singapore, Switzerland, Denmark, Canada\n\n**Safe with normal precautions:**\n• Most of Europe, Australia, New Zealand, South Korea\n\n**Basic safety tips everywhere:**\n• Keep copies of important documents\n• Don't flash expensive items\n• Stay aware of your surroundings\n• Use official transportation\n• Trust your instincts\n\n**Check current conditions:** US State Dept travel advisories\n\nWhich specific destination are you concerned about?"
    }

// Visa and passport questions
    if (input.includes("visa") || input.includes("passport")) {
      return "📋 **Visa & Passport Info:**\n\n**US Citizens - No visa needed (tourism):**\n• Europe (90 days), Japan (90 days), South Korea (90 days)\n• UK (6 months), Australia (90 days), Canada (6 months)\n\n**Visa required:**\n• China, Russia, India, Brazil, Vietnam\n\n**Passport requirements:**\n• Must be valid 6+ months from travel date\n• Need 2+ blank pages\n\n**Always check:** Official embassy websites for current requirements\n\nWhich country are you planning to visit?"
    }

// Packing questions
    if (input.includes("pack") || input.includes("bring") || input.includes("wear")) {
      return "🎒 **Smart Packing Tips:**\n\n**Essentials for any trip:**\n• Comfortable walking shoes\n• Layers (weather changes!)\n• Portable charger & adapters\n• Copy of passport/ID\n• Basic first aid items\n\n**Climate-specific:**\n• **Hot climates:** Sunscreen, hat, light fabrics\n• **Cold climates:** Warm layers, waterproof jacket\n• **Rainy season:** Compact umbrella, quick-dry clothes\n\n**Pro tip:** Pack light, buy local!\n\nWhere are you traveling? I can give destination-specific packing advice!"
    }

// Food questions
    if (input.includes("food") || input.includes("eat") || input.includes("restaurant")) {
      return "🍜 **Foodie Travel Tips:**\n\n**Find great local food:**\n• Follow locals to busy spots\n• Avoid tourist-heavy areas\n• Try street food (where safe)\n• Ask hotel staff for recommendations\n\n**Food safety:**\n• Drink bottled water in developing countries\n• Eat hot, freshly cooked food\n• Avoid raw vegetables/fruits you can't peel\n\n**Must-try experiences:**\n• Local markets and food halls\n• Cooking classes\n• Food tours with locals\n\nWhich destination's cuisine interests you most?"
    }

// Transportation questions
    if (
      input.includes("transportation") ||
      input.includes("metro") ||
      input.includes("taxi") ||
      input.includes("getting around")
    ) {
      return "🚇 **Getting Around Like a Local:**\n\n**Public transport tips:**\n• Download city transport apps\n• Buy day/week passes for savings\n• Avoid rush hours when possible\n• Keep small bills for tickets\n\n**Ride-sharing:**\n• Uber/Lyft in most major cities\n• Local apps: Grab (Asia), Didi (China), Ola (India)\n\n**Walking:**\n• Often fastest for short distances\n• Great way to discover hidden gems\n• Wear comfortable shoes!\n\nWhich city are you asking about? I can give specific transport advice!"
    }

// General travel advice
    if (input.includes("tip") || input.includes("advice") || input.includes("should i")) {
      return "✨ **Essential Travel Tips:**\n\n**Before you go:**\n• Check visa requirements\n• Notify banks of travel\n• Get travel insurance\n• Download offline maps\n\n**While traveling:**\n• Keep important docs in multiple places\n• Learn basic local phrases\n• Be flexible with plans\n• Try something new every day!\n\n**Money matters:**\n• Use ATMs for best exchange rates\n• Carry some cash always\n• Notify credit card companies\n\n**Want specific advice?** Ask about any destination, activity, or concern!\n\nOr ready to plan your trip? Just tell me where you want to go!"
    }

// Default response for unrecognized questions
    return `Great question! I'd love to help you with that. 🌍\n\nI can provide detailed information about:\n• Weather & best times to visit\n• Costs & budgets for different destinations\n• Safety tips & travel requirements\n• Packing advice & what to bring\n• Food recommendations & local cuisine\n• Transportation & getting around\n• Cultural tips & local customs\n\nCould you be more specific about what you'd like to know? For example:\n• "What's the weather like in Paris?"\n• "How much does food cost in Tokyo?"\n• "Is it safe to travel to Thailand?"\n\nOr if you're ready to plan a trip, just tell me where you want to go!`
  }

const generateCustomItinerary = (destination: string, dates: string, budget: string, interests: string[]): string => {
    // Estimate number of days from dates
    let days = 3 // default

if (dates.toLowerCase().includes("weekend")) {
      days = 2
    } else if (dates.toLowerCase().includes("week")) {
      days = 7
    } else if (dates.toLowerCase().match(/\d+\s*day/)) {
      const match = dates.toLowerCase().match(/(\d+)\s*day/)
      if (match && match[1]) {
        days = Number.parseInt(match[1])
      }
    }

// Format budget level
    let budgetLevel = "mid-range"
    if (
      budget.toLowerCase().includes("budget") ||
      budget.toLowerCase().includes("cheap") ||
      budget.toLowerCase().includes("affordable") ||
      budget.toLowerCase().includes("low")
    ) {
      budgetLevel = "budget-friendly"
    } else if (
      budget.toLowerCase().includes("luxury") ||
      budget.toLowerCase().includes("high") ||
      budget.toLowerCase().includes("expensive")
    ) {
      budgetLevel = "luxury"
    }

const currentDate = new Date().toLocaleDateString()

let itinerary = `🌟 **Custom ${days}-Day ${destination} Itinerary** 
*Updated ${currentDate} - ${budgetLevel.toUpperCase()} - Tailored for: ${interests.join(", ")}*

// Generate day-by-day itinerary
    for (let day = 1; day <= days; day++) {
      itinerary += generateDayItinerary(destination, day, days, interests, budgetLevel)
    }

// Add practical tips based on budget
    itinerary += `
💡 **${budgetLevel.toUpperCase()} Tips:**
`

if (budgetLevel === "budget-friendly") {
      itinerary += `
• Use public transportation instead of taxis (save ~$30/day)
• Look for "free entry" days at museums (usually first Sunday)
• Stay at hostels or budget hotels outside city center
• Eat at local markets and street food vendors
• Download free walking tour apps instead of paid tours
`
    } else if (budgetLevel === "mid-range") {
      itinerary += `
• Book skip-the-line tickets online for major attractions
• Consider city passes for multiple attractions
• Mix dining between casual local spots and nicer restaurants
• Stay at mid-range hotels or Airbnbs in good locations
• Use rideshare apps for convenience when needed
`
    } else {
      // luxury
      itinerary += `
• Book private guides for personalized experiences
• Reserve tables at top restaurants 2-4 weeks in advance
• Consider hotel concierge services for exclusive access
• Book luxury transfers between locations
• Look into VIP access options at major attractions
`
    }

itinerary += `
🔄 **This itinerary is updated with current information and hidden gems!**

Would you like to change anything?`

return itinerary
  }

const generateDayItinerary = (
    destination: string,
    day: number,
    totalDays: number,
    interests: string[],
    budgetLevel: string,
  ): string => {
    // City-specific recommendations based on interests and budget
    const cityData: { [key: string]: any } = {
      Paris: {
        budget: {
          food: ["Marché des Enfants Rouges food market", "L'As du Fallafel (€8 sandwich)", "Café Oberkampf (€10-15)"],
          activities: ["Free Père Lachaise Cemetery", "Free Sacré-Cœur views", "Free Luxembourg Gardens"],
          accommodation: ["St. Christopher's Inn Hostel", "Generator Paris", "Ibis Budget hotels"],
          hidden: ["Canal Saint-Martin picnic", "Belleville street art", "Parc des Buttes-Chaumont"],
        },
        "mid-range": {
          food: ["Breizh Café crêperie (€15-25)", "Bouillon Chartier (€20-30)", "Le Comptoir du Relais"],
          activities: ["Louvre Museum (€17)", "Seine River cruise (€15)", "Montmartre walking tour (€25)"],
          accommodation: ["Hotel Emile", "Hôtel Fabric", "CitizenM Paris"],
          hidden: ["Passage des Panoramas", "Musée de la Vie Romantique", "Rue Crémieux"],
        },
        luxury: {
          food: ["Le Jules Verne at Eiffel Tower (€200+)", "L'Ambroisie (€300+)", "Epicure at Le Bristol (€350+)"],
          activities: [
            "Private Louvre tour (€300+)",
            "Champagne tasting day trip (€500+)",
            "Private Seine yacht (€1000+)",
          ],
          accommodation: ["Four Seasons Hotel George V", "Ritz Paris", "Le Meurice"],
          hidden: ["Private Catacombs after-hours tour", "Helicopter tour over Versailles", "Private chef experience"],
        },
      },
      Tokyo: {
        budget: {
          food: ["Ichiran Ramen (¥1000)", "Conveyor belt sushi (¥100-200/plate)", "7-Eleven onigiri (¥150)"],
          activities: ["Free Meiji Shrine", "Free Shibuya Crossing", "Free Senso-ji Temple"],
          accommodation: ["Sakura Hotel Ikebukuro", "Wise Owl Hostels", "Nine Hours capsule hotel"],
          hidden: ["Yanaka old town walk", "Shimokitazawa vintage shops", "Inokashira Park"],
        },
        "mid-range": {
          food: [
            "Tsukiji Outer Market sushi (¥2000-3000)",
            "Izakaya dining (¥3000-5000)",
            "Department store food halls",
          ],
          activities: ["TeamLab Borderless (¥3200)", "Tokyo Skytree (¥2100)", "Sumo tournament (¥3800+)"],
          accommodation: ["Hotel Gracery Shinjuku", "MIMARU Tokyo", "The Knot Tokyo Shinjuku"],
          hidden: ["Kagurazaka district", "Nakameguro canal", "Nezu Museum garden"],
        },
        luxury: {
          food: ["Sukiyabashi Jiro (¥40,000+)", "RyuGin (¥30,000+)", "Narisawa (¥30,000+)"],
          activities: ["Private tea ceremony (¥20,000+)", "Helicopter city tour (¥50,000+)", "Mt. Fuji private tour"],
          accommodation: ["Aman Tokyo", "Park Hyatt Tokyo", "The Peninsula Tokyo"],
          hidden: ["Private geisha dinner", "After-hours museum tours", "Bespoke sake tasting"],
        },
      },
      London: {
        budget: {
          food: ["Borough Market food stalls (£5-10)", "Dishoom breakfast (£5-8)", "Brick Lane bagels (£2-4)"],
          activities: ["Free British Museum", "Free Tate Modern", "Free Hyde Park"],
          accommodation: ["Wombat's City Hostel", "Point A Hotels", "Premier Inn"],
          hidden: ["Kyoto Garden in Holland Park", "Postman's Park", "God's Own Junkyard"],
        },
        "mid-range": {
          food: ["Flat Iron steak (£12)", "Padella pasta (£10-15)", "Dishoom dinner (£25-35)"],
          activities: ["London Eye (£27)", "Tower of London (£25)", "West End show (£40-80)"],
          accommodation: ["CitizenM Tower of London", "The Hoxton", "Z Hotels"],
          hidden: ["Little Venice canals", "Maltby Street Market", "Dennis Severs' House"],
        },
        luxury: {
          food: ["Restaurant Gordon Ramsay (£150+)", "The Ledbury (£175+)", "Alain Ducasse at The Dorchester (£200+)"],
          activities: [
            "Private Thames cruise (£500+)",
            "Luxury shopping with stylist (£1000+)",
            "Private Tower of London tour",
          ],
          accommodation: ["The Savoy", "Claridge's", "The Connaught"],
          hidden: ["Private Parliament tour", "Helicopter tour over London", "Exclusive members' clubs access"],
        },
      },
    }

// Default city data if specific city not found
    const defaultCityData = {
      budget: {
        food: ["Local street food", "Market vendors", "Budget cafés"],
        activities: ["Free walking tours", "Public parks", "Free museums"],
        accommodation: ["Hostels", "Budget hotels", "Guesthouses"],
        hidden: ["Local neighborhoods", "University areas", "Public gardens"],
      },
      "mid-range": {
        food: ["Local restaurants", "Casual dining", "Food halls"],
        activities: ["Main attractions", "Guided tours", "Cultural experiences"],
        accommodation: ["3-star hotels", "Boutique hotels", "Airbnbs"],
        hidden: ["Less touristy neighborhoods", "Local markets", "Specialty museums"],
      },
      luxury: {
        food: ["Fine dining restaurants", "Michelin-starred venues", "Exclusive dining experiences"],
        activities: ["Private tours", "VIP experiences", "Exclusive access"],
        accommodation: ["5-star hotels", "Luxury resorts", "High-end apartments"],
        hidden: ["Private access venues", "Exclusive clubs", "Helicopter tours"],
      },
    }

const city = cityData[destination] || defaultCityData
    const budget = city[budgetLevel]

let dayPlan = `**DAY ${day}: ${day === 1 ? "ARRIVAL & ORIENTATION" : day === totalDays ? "FINAL EXPLORATION" : `DISCOVERING ${destination.toUpperCase()}`}**\n\n`

// Morning activities
    dayPlan += `🌅 **Morning:**\n`

if (day === 1) {
      dayPlan += `• Arrive and check in to your ${budget.accommodation[0]}\n`

if (interests.includes("food")) {
        dayPlan += `• Breakfast at ${budget.food[0]}\n`
      }

dayPlan += `• Orientation walk around your neighborhood\n`
    } else {
      if (interests.includes("food")) {
        dayPlan += `• Breakfast at ${budget.food[day % budget.food.length]}\n`
      }

if (interests.includes("museums & art") || interests.includes("culture")) {
        dayPlan += `• Visit ${budget.activities[day % budget.activities.length]}\n`
      } else if (interests.includes("nature")) {
        dayPlan += `• Morning walk in ${budget.hidden[day % budget.hidden.length]}\n`
      } else {
        dayPlan += `• Explore ${budget.hidden[day % budget.hidden.length]}\n`
      }
    }

// Afternoon activities
    dayPlan += `\n🌆 **Afternoon:**\n`

if (interests.includes("shopping")) {
      dayPlan += `• Shopping at local markets and boutiques\n`
    } else if (interests.includes("museums & art")) {
      dayPlan += `• Visit a museum or gallery\n`
    } else if (interests.includes("nature")) {
      dayPlan += `• Explore parks and gardens\n`
    } else if (interests.includes("beaches")) {
      dayPlan += `• Relax at the beach\n`
    } else {
      dayPlan += `• Explore ${budget.activities[(day + 1) % budget.activities.length]}\n`
    }

dayPlan += `• Lunch at ${budget.food[(day + 1) % budget.food.length]}\n`

// Evening activities
    dayPlan += `\n🌃 **Evening:**\n`

if (day === totalDays) {
      dayPlan += `• Farewell dinner at ${budget.food[(day + 2) % budget.food.length]}\n`
      dayPlan += `• Evening stroll to see ${destination} at night\n`
    } else {
      dayPlan += `• Dinner at ${budget.food[(day + 2) % budget.food.length]}\n`

if (interests.includes("nightlife")) {
        dayPlan += `• Experience local nightlife\n`
      } else if (interests.includes("culture")) {
        dayPlan += `• Attend a cultural performance\n`
      } else {
        dayPlan += `• Relax at your ${budget.accommodation[day % budget.accommodation.length]}\n`
      }
    }

dayPlan += `\n`
    return dayPlan
  }

const handleSendMessage = async () => {
    if (!inputMessage.trim()) return

const userMessage: Message = {
      id: messages.length + 1,
      type: "user",
      content: inputMessage,
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputMessage("")
    setIsTyping(true)

// Simulate bot response delay
    setTimeout(async () => {
      const botResponse = await generateBotResponse(inputMessage)
      const botMessage: Message = {
        id: messages.length + 2,
        type: "bot",
        content: botResponse,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, botMessage])
      setIsTyping(false)
    }, 1500)
  }

const quickReplies = ["Paris", "Tokyo", "London", "Rome", "New York", "Barcelona"]

return (
    <>
      {/* Floating Chat Button */}
      <div className="fixed bottom-6 right-6 z-50">
        {!isOpen && (
          <Button
            onClick={() => setIsOpen(true)}
            className="bg-purple-600 hover:bg-purple-700 rounded-full w-14 h-14 shadow-lg hover:shadow-xl transition-all duration-300"
          >
            <MessageCircle className="h-6 w-6" />
          </Button>
        )}
      </div>

{/* Chat Window */}
      {isOpen && (
        <div className="fixed bottom-6 right-6 z-50 w-96 h-[500px] shadow-2xl">
          <Card className="h-full flex flex-col">
            {/* Chat Header */}
            <div className="bg-gradient-to-r from-purple-600 to-purple-800 text-white p-4 rounded-t-lg">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="bg-white/20 rounded-full p-1">
                    <Plane className="h-4 w-4" />
                  </div>
                  <div>
                    <h3 className="font-bold text-sm">Grapie - AI Travel Assistant</h3>
                    <p className="text-xs text-purple-100">Online • Ready to help</p>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsOpen(false)}
                  className="text-white hover:bg-white/20 h-8 w-8 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </div>

{/* Messages */}
            <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
              {messages.map((message) => (
                <div key={message.id} className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] px-3 py-2 rounded-lg text-sm ${
                      message.type === "user" ? "bg-purple-600 text-white" : "bg-white text-gray-800 shadow-sm border"
                    }`}
                  >
                    <p className="whitespace-pre-line">{message.content}</p>
                    <p className={`text-xs mt-1 ${message.type === "user" ? "text-purple-200" : "text-gray-500"}`}>
                      {message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                    </p>
                  </div>
                </div>
              ))}

{(isTyping || isGeneratingItinerary) && (
                <div className="flex justify-start">
                  <div className="bg-white text-gray-800 px-3 py-2 rounded-lg shadow-sm border">
                    {isGeneratingItinerary ? (
                      <div className="flex items-center space-x-2">
                        <div className="flex space-x-1">
                          <div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
                          <div
                            className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"
                            style={{ animationDelay: "0.1s" }}
                          ></div>
                          <div
                            className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"
                            style={{ animationDelay: "0.2s" }}
                          ></div>
                        </div>
                        <span className="text-xs text-gray-600">Generating your custom itinerary...</span>
                      </div>
                    ) : (
                      <div className="flex space-x-1">
                        <div className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
                        <div
                          className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"
                          style={{ animationDelay: "0.1s" }}
                        ></div>
                        <div
                          className="w-2 h-2 bg-purple-400 rounded-full animate-bounce"
                          style={{ animationDelay: "0.2s" }}
                        ></div>
                      </div>
                    )}
                  </div>
                </div>
              )}
              <div ref={messagesEndRef} />
            </div>

{/* Quick Replies */}
            {messages.length <= 1 && (
              <div className="px-4 py-2 border-t bg-white">
                <p className="text-xs text-gray-500 mb-2">Popular destinations:</p>
                <div className="flex flex-wrap gap-1">
                  {quickReplies.slice(0, 3).map((reply, index) => (
                    <Button
                      key={index}
                      variant="outline"
                      size="sm"
                      onClick={() => setInputMessage(reply)}
                      className="text-xs h-6 px-2"
                    >
                      {reply}
                    </Button>
                  ))}
                </div>
              </div>
            )}

{/* Input */}
            <div className="p-4 border-t bg-white rounded-b-lg">
              <div className="flex space-x-2">
                <Input
                  value={inputMessage}
                  onChange={(e) => setInputMessage(e.target.value)}
                  placeholder={
                    currentQuestion === "destination"
                      ? "Where to?"
                      : currentQuestion === "dates"
                        ? "When are you going?"
                        : currentQuestion === "budget"
                          ? "What's your budget?"
                          : currentQuestion === "interests"
                            ? "What are your interests?"
                            : "Type your message..."
                  }
                  onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                  className="text-sm"
                />
                <Button
                  onClick={handleSendMessage}
                  className="bg-purple-600 hover:bg-purple-700 px-3"
                  disabled={!inputMessage.trim()}
                >
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </Card>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import {
  MapPin,
  Star,
  Heart,
  Share2,
  ChevronLeft,
  ChevronRight,
  User,
  Camera,
  Send,
  TrendingUp,
  Users,
  Globe,
  MessageCircle,
  X,
  DollarSign,
  PiggyBank,
} from "lucide-react"

import { AITravelAssistant, type TravelQuery } from "@/lib/ai-travel-assistant"

// Mock data for trending destinations
const allDestinations = [
  // Beach destinations
  {
    id: 1,
    name: "Santorini, Greece",
    image: "https://images.stockcake.com/public/b/7/8/b7830926-fc04-48b7-b3f3-03e05b0d273e/santorini-coastal-view-stockcake.jpg",
    description:
      "Stunning white-washed buildings overlooking the Aegean Sea. Perfect for romantic getaways and breathtaking sunsets.",
    category: "beach",
    trending: true,
    likes: 1247,
    priceLevel: 4, // 1-5, 5 being most expensive
  },
  {
    id: 6,
    name: "Maldives",
    image: "https://www.journee-mondiale.com/en/wp-content/uploads/2025/06/2025-06-12-23-38-12_.webp",
    description: "Crystal clear waters and overwater bungalows. Paradise on earth with pristine coral reefs.",
    category: "beach",
    trending: true,
    likes: 1856,
    priceLevel: 5,
  },
  {
    id: 7,
    name: "Bora Bora, French Polynesia",
    image: "https://media.cntraveler.com/photos/5c742ca622089944616575a8/16:9/w_2580,c_limit/Laucala-Island_2019_Laucala_restaurant_seagrass1.jpg",
    description: "Turquoise lagoons and volcanic peaks. The ultimate tropical escape with luxury resorts.",
    category: "beach",
    trending: true,
    likes: 1432,
    priceLevel: 5,
  },
  // Tourist-free destinations
  {
    id: 2,
    name: "Faroe Islands",
    image: "https://i.natgeofe.com/n/9b84995f-962d-4ac7-84f8-897e065860fc/vagar-island-faroe-islands-denmark.jpg",
    description: "Dramatic cliffs, grass-roof houses, and untouched Nordic landscapes. A photographer's paradise.",
    category: "tourist-free",
    trending: true,
    likes: 634,
    priceLevel: 3,
  },
  {
    id: 8,
    name: "Socotra Island, Yemen",
    image: "https://www.welcometosocotra.com/wp-content/uploads/2023/05/header-temp.jpg",
    description: "Alien-like landscapes with unique flora. One of the most isolated and pristine places on Earth.",
    category: "tourist-free",
    trending: true,
    likes: 423,
    priceLevel: 2,
  },
  {
    id: 9,
    name: "Svaneti, Georgia",
    image: "https://www.catalonia-trekking.com/s/cc_images/teaserbox_26985687.jpg?t=1730751713",
    description: "Medieval stone towers and untouched mountain villages. Ancient culture preserved in time.",
    category: "tourist-free",
    trending: true,
    likes: 567,
    priceLevel: 2,
  },
  // Cultural destinations
  {
    id: 3,
    name: "Kyoto, Japan",
    image: "https://photos.smugmug.com/Kyoto/Honeymoon-in-Kyoto/i-LdmsJPZ/0/26b66d84/L/shutterstock_626644001-L.jpg",
    description:
      "Ancient temples, traditional gardens, and cherry blossoms. Experience authentic Japanese culture and cuisine.",
    category: "cultural",
    trending: true,
    likes: 892,
    priceLevel: 4,
  },
  {
    id: 10,
    name: "Bhutan",
    image: "https://good-nature-blog-uploads.s3.amazonaws.com/uploads/2022/04/Bhutan-mountain-1-2.jpg",
    description: "The last Shangri-La with ancient monasteries and pristine Himalayan landscapes.",
    category: "cultural",
    trending: true,
    likes: 756,
    priceLevel: 3,
  },
  // Adventure destinations
  {
    id: 4,
    name: "Banff, Canada",
    image: "https://cdn.sanity.io/images/lr9tta69/production/198eac2f1415070f1147b39a5528029399d97e9c-9504x6336.jpg?w=1920&q=77&fit=max&auto=format",
    description: "Pristine mountain lakes and snow-capped peaks. Adventure awaits in this natural wonderland.",
    category: "adventure",
    trending: true,
    likes: 1156,
    priceLevel: 4,
  },
  {
    id: 11,
    name: "Patagonia, Chile",
    image: "https://pictures.altai-travel.com/1920x0/lakes-in-patagonian-national-park-shutterstock-2344.jpg",
    description: "Dramatic granite peaks and pristine wilderness. Ultimate destination for adventure seekers.",
    category: "adventure",
    trending: true,
    likes: 934,
    priceLevel: 3,
  },
  // Urban destinations
  {
    id: 5,
    name: "Marrakech, Morocco",
    image: "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/2b/9f/11/0a/caption.jpg?w=1200&h=-1&s=1&cx=1920&cy=1080&chk=v1_8e5215ef0ffaccc19ef9",
    description: "Vibrant souks, stunning architecture, and rich cultural heritage. A feast for all your senses.",
    category: "urban",
    trending: true,
    likes: 743,
    priceLevel: 2,
  },
  // Budget destinations
  {
    id: 12,
    name: "Hanoi, Vietnam",
    image: "https://media.tacdn.com/media/attractions-splice-spp-674x446/12/32/fe/ab.jpg",
    description: "Vibrant street life, amazing food, and rich cultural experiences at incredibly affordable prices.",
    category: "budget",
    trending: true,
    likes: 876,
    priceLevel: 1,
  },
  {
    id: 13,
    name: "Budapest, Hungary",
    image: "https://hips.hearstapps.com/hmg-prod/images/budapest-danubio-parlamento-1552491234.jpg",
    description:
      "Stunning architecture, thermal baths, and vibrant nightlife at a fraction of Western European prices.",
    category: "budget",
    trending: true,
    likes: 912,
    priceLevel: 2,
  },
  {
    id: 14,
    name: "Bali, Indonesia",
    image: "https://images.escapesim.com.au/blog/9c0e1f3f-2bf4-445d-9681-25c45f70ed65.jpg",
    description: "Beautiful beaches, lush landscapes, and spiritual experiences with very affordable accommodations.",
    category: "budget",
    trending: true,
    likes: 1543,
    priceLevel: 2,
  },
]

// Mock data for user reviews with enhanced photos
const userReviews = [
  {
    id: 1,
    user: {
      name: "Sarah Johnson",
      avatar: "https://i0.wp.com/hideoutbali.com/wp-content/uploads/2024/08/Suluban-Beach.jpg?resize=800%2C450&ssl=1",
      verified: true,
    },
    location: "Hidden Beach, Bali",
    image: "https://i0.wp.com/hideoutbali.com/wp-content/uploads/2024/08/Suluban-Beach.jpg?resize=800%2C450&ssl=1",
    comment:
      "Found this incredible hidden gem during my morning walk. The water is crystal clear and there were hardly any tourists!",
    ratings: {
      beautiful: 5,
      accessibility: 4,
      touristFriendly: 3,
    },
    priceLevel: 2,
    likes: 234,
    timeAgo: "2 hours ago",
  },
  {
    id: 2,
    user: {
      name: "Mike Chen",
      avatar: "https://www.journee-mondiale.com/en/wp-content/uploads/2025/03/2025-03-09-22-43-16_-scaled.webp",
      verified: true,
    },
    location: "Secret Waterfall, Costa Rica",
    image: "https://www.journee-mondiale.com/en/wp-content/uploads/2025/03/2025-03-09-22-43-16_-scaled.webp",
    comment:
      "This waterfall is absolutely breathtaking! A bit of a hike to get there but totally worth it. Bring good hiking shoes!",
    ratings: {
      beautiful: 5,
      accessibility: 2,
      touristFriendly: 4,
    },
    priceLevel: 3,
    likes: 189,
    timeAgo: "5 hours ago",
  },
  {
    id: 3,
    user: {
      name: "Emma Rodriguez",
      avatar: "https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2400/ifgxraafz1nvnmr07bwd.jpg",
      verified: false,
    },
    location: "Local Café, Prague",
    image: "https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2400/ifgxraafz1nvnmr07bwd.jpg",
    comment:
      "Best coffee I've ever had! This little café is tucked away from the main tourist areas. The locals are so friendly here.",
    ratings: {
      beautiful: 4,
      accessibility: 5,
      touristFriendly: 5,
    },
    priceLevel: 1,
    likes: 156,
    timeAgo: "1 day ago",
  },
  {
    id: 4,
    user: {
      name: "Alex Thompson",
      avatar: "https://www.japannakama.co.uk/wp-content/uploads/2025/05/roof-top-gardens-japan.webp",
      verified: true,
    },
    location: "Rooftop Garden, Tokyo",
    image: "https://www.japannakama.co.uk/wp-content/uploads/2025/05/roof-top-gardens-japan.webp",
    comment:
      "Stumbled upon this amazing rooftop garden in Shibuya. Perfect view of the city skyline and so peaceful despite being in the heart of Tokyo!",
    ratings: {
      beautiful: 5,
      accessibility: 3,
      touristFriendly: 4,
    },
    priceLevel: 3,
    likes: 312,
    timeAgo: "3 hours ago",
  },
  {
    id: 5,
    user: {
      name: "Luna Martinez",
      avatar: "https://www.welovebudapest.com/i/69/wp-img-4265.jpg",
      verified: true,
    },
    location: "Underground Cave Bar, Budapest",
    image: "https://www.welovebudapest.com/i/69/wp-img-4265.jpg",
    comment:
      "This underground bar is like stepping into another world! Built in natural caves with incredible acoustics. The cocktails are amazing too!",
    ratings: {
      beautiful: 5,
      accessibility: 3,
      touristFriendly: 4,
    },
    priceLevel: 2,
    likes: 278,
    timeAgo: "6 hours ago",
  },
  {
    id: 6,
    user: {
      name: "David Kim",
      avatar: "https://e498rczdjg6.exactdn.com/wp-content/uploads/2020/04/Optimized-Laugavallalaug.jpeg?strip=all&lossy=1&ssl=1",
      verified: false,
    },
    location: "Secret Hot Springs, Iceland",
    image: "https://e498rczdjg6.exactdn.com/wp-content/uploads/2020/04/Optimized-Laugavallalaug.jpeg?strip=all&lossy=1&ssl=1",
    comment:
      "Found these natural hot springs off the beaten path. No crowds, just pure relaxation surrounded by volcanic landscapes. Magical experience!",
    ratings: {
      beautiful: 5,
      accessibility: 2,
      touristFriendly: 3,
    },
    priceLevel: 4,
    likes: 445,
    timeAgo: "12 hours ago",
  },
  {
    id: 7,
    user: {
      name: "Sophie Laurent",
      avatar: "https://blog.trip-my-france.com/wp-content/uploads/2021/09/interieur_galignani.jpeg",
      verified: true,
    },
    location: "Hidden Bookstore, Paris",
    image: "https://blog.trip-my-france.com/wp-content/uploads/2021/09/interieur_galignani.jpeg",
    comment:
      "This tiny bookstore is hidden behind a vintage door in Montmartre. The owner serves tea and tells amazing stories about old Paris!",
    ratings: {
      beautiful: 4,
      accessibility: 4,
      touristFriendly: 5,
    },
    priceLevel: 2,
    likes: 167,
    timeAgo: "1 day ago",
  },
  {
    id: 8,
    user: {
      name: "Carlos Mendoza",
      avatar: "https://www.muchbetteradventures.com/magazine/content/images/2022/03/cenote-in-mexico-3.jpg",
      verified: true,
    },
    location: "Secret Cenote, Mexico",
    image: "https://www.muchbetteradventures.com/magazine/content/images/2022/03/cenote-in-mexico-3.jpg",
    comment:
      "This cenote is completely untouched by tourism. Crystal clear water, stalactites, and the most peaceful swimming experience ever!",
    ratings: {
      beautiful: 5,
      accessibility: 2,
      touristFriendly: 2,
    },
    priceLevel: 2,
    likes: 389,
    timeAgo: "8 hours ago",
  },
  {
    id: 9,
    user: {
      name: "Aria Patel",
      avatar: "https://spectralcodex.com/img/_x/taiwan-keelung-postcards-1-26_hvBt7.jpg",
      verified: false,
    },
    location: "Local Night Market, Taiwan",
    image: "https://spectralcodex.com/img/_x/taiwan-keelung-postcards-1-26_hvBt7.jpg",
    comment:
      "This night market is where the locals actually eat! Amazing street food, friendly vendors, and prices that won't break the bank. A foodie's paradise!",
    ratings: {
      beautiful: 4,
      accessibility: 5,
      touristFriendly: 5,
    },
    priceLevel: 1,
    likes: 223,
    timeAgo: "4 hours ago",
  },
  {
    id: 10,
    user: {
      name: "Oliver Walsh",
      avatar: "https://media-cdn.tripadvisor.com/media/photo-s/17/3b/c9/4b/photo1jpg.jpg",
      verified: true,
    },
    location: "Hidden Valley, New Zealand",
    image: "https://media-cdn.tripadvisor.com/media/photo-s/17/3b/c9/4b/photo1jpg.jpg",
    comment:
      "Discovered this valley during a wrong turn on a hiking trail. Absolutely stunning views, wildflowers everywhere, and complete solitude!",
    ratings: {
      beautiful: 5,
      accessibility: 2,
      touristFriendly: 3,
    },
    priceLevel: 3,
    likes: 356,
    timeAgo: "2 days ago",
  },
  {
    id: 11,
    user: {
      name: "Zara Hassan",
      avatar: "https://saigonriders.com/wp-content/uploads/2018/10/08.-Floating-markets_What-to-do-in-Mekong-Delta-in-a-day_SaigonRiders.jpg",
      verified: true,
    },
    location: "Floating Market, Vietnam",
    image: "https://saigonriders.com/wp-content/uploads/2018/10/08.-Floating-markets_What-to-do-in-Mekong-Delta-in-a-day_SaigonRiders.jpg",
    comment:
      "This floating market happens at dawn and it's magical! Fresh fruits, local vendors on boats, and the most authentic Vietnamese experience you can get!",
    ratings: {
      beautiful: 5,
      accessibility: 3,
      touristFriendly: 4,
    },
    priceLevel: 1,
    likes: 298,
    timeAgo: "10 hours ago",
  },
  {
    id: 12,
    user: {
      name: "Marco Rossi",
      avatar: "https://static.toiimg.com/img/104219769/Master.jpg",
      verified: false,
    },
    location: "Secret Beach Cave, Portugal",
    image: "https://static.toiimg.com/img/104219769/Master.jpg",
    comment:
      "You have to crawl through a small cave opening to reach this beach, but it's like finding your own private paradise! Golden sand and turquoise water.",
    ratings: {
      beautiful: 5,
      accessibility: 1,
      touristFriendly: 2,
    },
    priceLevel: 2,
    likes: 412,
    timeAgo: "1 day ago",
  },
  {
    id: 13,
    user: {
      name: "Yuki Tanaka",
      avatar: "https://www.travelcaffeine.com/wp-content/uploads/2018/04/fushimin-inari-bamboo-forest-562-533x321.jpg",
      verified: true,
    },
    location: "Hidden Shrine, Kyoto",
    image: "https://www.travelcaffeine.com/wp-content/uploads/2018/04/fushimin-inari-bamboo-forest-562-533x321.jpg",
    comment:
      "Found this tiny shrine tucked away in the bamboo forest. So peaceful and spiritual, with beautiful moss-covered stones and ancient trees.",
    ratings: {
      beautiful: 5,
      accessibility: 3,
      touristFriendly: 3,
    },
    priceLevel: 2,
    likes: 187,
    timeAgo: "15 hours ago",
  },
  {
    id: 14,
    user: {
      name: "Isabella Santos",
      avatar: "https://gttp.images.tshiftcdn.com/478360/x/0/secret-lagoon-in-el-nido-palawan.jpg",
      verified: true,
    },
    location: "Secret Lagoon, Philippines",
    image: "https://gttp.images.tshiftcdn.com/478360/x/0/secret-lagoon-in-el-nido-palawan.jpg",
    comment:
      "This lagoon is only accessible by kayak through a narrow passage. The water glows blue at night due to bioluminescence - absolutely magical!",
    ratings: {
      beautiful: 5,
      accessibility: 2,
      touristFriendly: 3,
    },
    priceLevel: 3,
    likes: 567,
    timeAgo: "6 hours ago",
  },
  {
    id: 15,
    user: {
      name: "Ahmed Al-Rashid",
      avatar: "https://cdn.kimkim.com/files/a/content_articles/featured_photos/5b03964ec908a924e3cd555fb90380530220e8ef/medium-981fcdb99905af4fae0b17ac29d682e0.jpg",
      verified: false,
    },
    location: "Desert Oasis, Morocco",
    image: "https://cdn.kimkim.com/files/a/content_articles/featured_photos/5b03964ec908a924e3cd555fb90380530220e8ef/medium-981fcdb99905af4fae0b17ac29d682e0.jpg",
    comment:
      "Stumbled upon this oasis during a camel trek. Palm trees, fresh water, and the most incredible silence. Felt like stepping back in time!",
    ratings: {
      beautiful: 5,
      accessibility: 1,
      touristFriendly: 2,
    },
    priceLevel: 2,
    likes: 334,
    timeAgo: "2 days ago",
  },
]

export default function Home() {
  const [analytics, setAnalytics] = useState({
    totalVisitors: 1247,
    startExploringClicks: 892,
    chatbotInteractions: 634,
    reviewsShared: 156,
  })

// Track visitor on component mount
  useEffect(() => {
    // Simulate tracking a new visitor
    setAnalytics((prev) => ({
      ...prev,
      totalVisitors: prev.totalVisitors + 1,
    }))
  }, [])

const trackStartExploring = () => {
    setAnalytics((prev) => ({
      ...prev,
      startExploringClicks: prev.startExploringClicks + 1,
    }))
    setIsExploreModalOpen(true)
  }

const trackChatbotInteraction = () => {
    setAnalytics((prev) => ({
      ...prev,
      chatbotInteractions: prev.chatbotInteractions + 1,
    }))
  }

const [currentSlide, setCurrentSlide] = useState(0)
  const [isSignInOpen, setIsSignInOpen] = useState(false)
  const [newComment, setNewComment] = useState("")
  const [isExploreModalOpen, setIsExploreModalOpen] = useState(false)
  const [isSaveUpModalOpen, setIsSaveUpModalOpen] = useState(false)
  const [selectedCategory, setSelectedCategory] = useState("")
  const [filteredDestinations, setFilteredDestinations] = useState(allDestinations)
  const [isChatOpen, setIsChatOpen] = useState(false)
  const [messages, setMessages] = useState([
    {
      id: 1,
      type: "bot",
      content:
        "Hi! I'm Grapie, your personal travel assistant. I can help you plan the perfect itinerary based on your preferences. What kind of adventure are you looking for?",
      timestamp: new Date(),
    },
  ])
  const [inputMessage, setInputMessage] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [uploadedPhoto, setUploadedPhoto] = useState<string | null>(null)
  const [newReviewData, setNewReviewData] = useState({
    location: "",
    comment: "",
    ratings: {
      beautiful: 0,
      accessibility: 0,
      touristFriendly: 0,
    },
    priceLevel: 3, // Default to mid-range
  })
  const [allUserReviews, setAllUserReviews] = useState(userReviews)
  const [userPreferences, setUserPreferences] = useState({
    maxPriceLevel: 3, // Default max price level (1-5)
    preferredCategories: ["beach", "adventure", "cultural"], // Default preferred categories
  })

const [userTravelPreferences, setUserTravelPreferences] = useState({
    budget: "mid-range",
    travelStyle: "adventure",
    duration: "7-days",
    interests: ["culture", "food", "nature"],
    groupSize: "couple",
  })

const [aiAssistant] = useState(() => new AITravelAssistant())
  const [isGatheringData, setIsGatheringData] = useState(false)

// Get budget-friendly destinations based on user preferences
  const budgetFriendlyDestinations = allDestinations
    .filter((dest) => dest.priceLevel <= userPreferences.maxPriceLevel)
    .sort((a, b) => a.priceLevel - b.priceLevel)

const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % filteredDestinations.length)
  }

const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + filteredDestinations.length) % filteredDestinations.length)
  }

const handleStartExploring = () => {
    setIsExploreModalOpen(true)
  }

const handleSaveUp = () => {
    setIsSaveUpModalOpen(true)
  }

const handleCategorySelect = (category: string) => {
    setSelectedCategory(category)
    let filtered = allDestinations

if (category === "budget") {
      filtered = allDestinations.filter((dest) => dest.priceLevel <= 2)
    } else if (category !== "all") {
      filtered = allDestinations.filter((dest) => dest.category === category)
    }

setFilteredDestinations(filtered)
    setCurrentSlide(0)
    setIsExploreModalOpen(false)
    // Scroll to trending section
    document.getElementById("trending")?.scrollIntoView({ behavior: "smooth" })
  }

const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star key={i} className={`h-4 w-4 ${i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} />
    ))
  }

const renderPriceLevel = (priceLevel: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <DollarSign key={i} className={`h-4 w-4 ${i < priceLevel ? "fill-green-600 text-green-600" : "text-gray-300"}`} />
    ))
  }

const handleSendMessage = async () => {
    if (!inputMessage.trim()) return

const userMessage = {
      id: messages.length + 1,
      type: "user",
      content: inputMessage,
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputMessage("")
    setIsTyping(true)

// Simulate bot response
    setTimeout(() => {
      generateBotResponse(inputMessage).then((botResponse) => {
        const botMessage = {
          id: messages.length + 2,
          type: "bot",
          content: botResponse,
          timestamp: new Date(),
        }
        setMessages((prev) => [...prev, botMessage])
        setIsTyping(false)
      })
    }, 1500)
  }

// Add these new helper functions before the generateBotResponse function:

return (
      questionKeywords.some((keyword) => input.includes(keyword)) &&
      !input.includes("i want") &&
      !input.includes("i'm going") &&
      !input.includes("planning to")
    )
  }

const handleGeneralQuestion = (input: string, originalInput: string): string => {
    // Handle hiking + nightlife combination
    if (
      (input.includes("hike") || input.includes("hiking")) &&
      (input.includes("club") || input.includes("nightlife") || input.includes("party"))
    ) {
      return `🏔️🌃 **Perfect combo! Here are destinations with amazing hiking AND nightlife:**

**🇪🇸 Barcelona, Spain**
• **Day:** Montjuïc Hill hikes, Park Güell trails, Collserola Natural Park
• **Night:** Gothic Quarter bars, Beach clubs, Razzmatazz nightclub
• **Budget:** €60-120/day

**🇨🇱 Santiago, Chile** 
• **Day:** Cerro San Cristóbal, Andes day trips, Cajón del Maijo
• **Night:** Bellavista district, rooftop bars, Providencia clubs
• **Budget:** $40-80/day

**🇿🇦 Cape Town, South Africa**
• **Day:** Table Mountain, Lion's Head, Kirstenbosch trails
• **Night:** Long Street clubs, V&A Waterfront, wine bars
• **Budget:** $35-70/day

**🇹🇭 Chiang Mai, Thailand**
• **Day:** Doi Suthep trails, jungle treks, waterfall hikes
• **Night:** Nimman Road bars, night bazaars, rooftop lounges
• **Budget:** $25-50/day

**🇨🇷 San José, Costa Rica**
• **Day:** Irazú Volcano, cloud forest hikes, coffee plantation trails
• **Night:** Barrio Escalante bars, casino nightlife, salsa clubs
• **Budget:** $50-90/day

Which of these sounds most appealing? I can create a detailed itinerary for any of them! 🎯`
    }

// Add other general question handlers here if needed
    return "I'd love to help with that! Could you be more specific about what you're looking for?"
  }

const generateBotResponse = async (userInput: string) => {
    const input = userInput.toLowerCase()

// Check if user is asking a general travel question first
    if (isGeneralQuestion(input)) {
      return handleGeneralQuestion(input, userInput)
    }

// Handle specific requests like hiking + nightlife
    if (input.includes("hike") || input.includes("hiking")) {
      if (input.includes("club") || input.includes("nightlife") || input.includes("party")) {
        return `🏔️🌃 **Perfect combo! Here are destinations with amazing hiking AND nightlife:**

**🇨🇱 Santiago, Chile** 
• **Day:** Cerro San Cristóbal, Andes day trips, Cajón del Maijo
• **Night:** Bellavista district, rooftop bars, Providencia clubs
• **Budget:** $40-80/day

**🇿🇦 Cape Town, South Africa**
• **Day:** Table Mountain, Lion's Head, Kirstenbosch trails
• **Night:** Long Street clubs, V&A Waterfront, wine bars
• **Budget:** $35-70/day

**🇹🇭 Chiang Mai, Thailand**
• **Day:** Doi Suthep trails, jungle treks, waterfall hikes
• **Night:** Nimman Road bars, night bazaars, rooftop lounges
• **Budget:** $25-50/day

Which of these sounds most appealing? I can create a detailed itinerary for any of them! 🎯`
      }

return `🥾 **Amazing hiking destinations:**

**Budget-friendly:**
• **Nepal** - Annapurna Circuit, Everest Base Camp ($20-40/day)
• **Peru** - Inca Trail, Huacachina Oasis ($30-60/day)
• **Guatemala** - Acatenango Volcano, Lake Atitlán ($25-45/day)

**Mid-range:**
• **New Zealand** - Milford Track, Tongariro Crossing ($80-150/day)
• **Chile** - Torres del Paine, Atacama Desert ($60-120/day)
• **Portugal** - Madeira levadas, Azores trails ($50-100/day)

**Luxury:**
• **Switzerland** - Matterhorn, Jungfrau region ($150-300/day)
• **Norway** - Lofoten Islands, Preikestolen ($120-250/day)
• **Patagonia** - Private guided treks ($200-400/day)

What's your budget range and preferred difficulty level?`
    }

// Handle nightlife/clubbing questions
    if (input.includes("club") || input.includes("nightlife") || input.includes("party")) {
      return `🌃 **Best nightlife destinations:**

**Party Capitals:**
• **Berlin, Germany** - Berghain, techno scene, 48-hour parties
• **Ibiza, Spain** - World-class DJs, beach clubs, sunset parties
• **Bangkok, Thailand** - Rooftop bars, Khao San Road, RCA district

**Affordable Party Cities:**
• **Prague, Czech Republic** - Cheap drinks, underground clubs
• **Budapest, Hungary** - Ruin bars, thermal bath parties
• **Krakow, Poland** - Historic pubs, vibrant club scene

**Upscale Nightlife:**
• **Dubai, UAE** - Sky bars, luxury clubs, beach lounges
• **Miami, USA** - South Beach clubs, art deco bars
• **Tokyo, Japan** - Golden Gai, Shibuya clubs, karaoke

What type of nightlife vibe are you looking for?`
    }

// Continue with existing logic for other cases...
    if (input.includes("itinerary") || input.includes("plan") || input.includes("trip")) {
      const itinerary = generatePersonalizedItinerary(userTravelPreferences)
      return `I'd love to help you create a personalized itinerary! Here's a sample 3-day adventure based on popular preferences:

🗓️ **Day 1: Cultural Exploration**
• 9:00 AM - Visit local museums and historical sites
• 1:00 PM - Lunch at authentic local restaurant
• 3:00 PM - Walking tour of old town
• 7:00 PM - Traditional dinner with live music

🗓️ **Day 2: Nature & Adventure**
• 8:00 AM - Hiking in nearby national park
• 12:00 PM - Picnic lunch with scenic views
• 2:00 PM - Water activities (kayaking/swimming)
• 6:00 PM - Sunset viewing point

🗓️ **Day 3: Hidden Gems**
• 10:00 AM - Visit secret local market
• 1:00 PM - Lunch at hidden gem restaurant
• 3:00 PM - Explore off-the-beaten-path attractions
• 5:00 PM - Relaxation time at local spa

Would you like me to customize this based on your specific interests, budget, or travel dates?`
    }

if (input.includes("budget") || input.includes("cheap") || input.includes("expensive")) {
      return "Great question about budget! I can help you plan trips for any budget range:\n\n💰 **Budget Travel** ($50-100/day)\n• Hostels and guesthouses\n• Street food and local markets\n• Public transportation\n• Free walking tours\n\n💎 **Luxury Travel** ($300+/day)\n• 5-star hotels and resorts\n• Fine dining experiences\n• Private tours and transfers\n• Exclusive experiences\n\nWhat's your preferred budget range?"
    }

if (input.includes("beach") || input.includes("ocean") || input.includes("sea")) {
      return "🏖️ Beach destinations are amazing! Based on our community recommendations, here are some fantastic options:\n\n🌴 **Tropical Paradises:**\n• Bali, Indonesia - Hidden beaches and cultural experiences\n• Philippines - Secret lagoons and island hopping\n• Thailand - Crystal clear waters and vibrant nightlife\n\n🏛️ **Mediterranean Gems:**\n• Santorini, Greece - Stunning sunsets and white architecture\n• Portugal - Secret beach caves and coastal towns\n• Croatia - Pristine coastline and historic cities\n\nWhich type of beach experience interests you most?"
    }

if (input.includes("mountain") || input.includes("hiking") || input.includes("nature")) {
      return "🏔️ Mountain adventures are incredible! Here are some breathtaking options:\n\n⛰️ **Epic Mountain Destinations:**\n• Banff, Canada - Pristine lakes and snow-capped peaks\n• New Zealand - Hidden valleys and dramatic landscapes\n• Iceland - Hot springs and volcanic terrain\n• Nepal - Himalayan treks and cultural experiences\n\n🥾 **Adventure Activities:**\n• Multi-day hiking trails\n• Rock climbing and mountaineering\n• Wildlife photography\n• Camping under the stars\n\nWhat level of adventure are you looking for?"
    }

if (input.includes("food") || input.includes("cuisine") || input.includes("restaurant")) {
      return "🍜 Food adventures are the best! Our travelers have discovered amazing culinary experiences:\n\n🥢 **Street Food Paradises:**\n• Taiwan - Night markets with incredible variety\n• Vietnam - Floating markets and pho tours\n• Thailand - Authentic pad thai and mango sticky rice\n\n🍷 **Fine Dining Destinations:**\n• Paris - Hidden bistros and Michelin stars\n• Tokyo - Omakase experiences and sake tastings\n• Italy - Farm-to-table and wine regions\n\nAre you more interested in street food adventures or fine dining experiences?"
    }

if (input.includes("hello") || input.includes("hi") || input.includes("hey")) {
      return "Hello! I'm Grapie, your AI travel companion! 🌍 I'm here to help you discover amazing destinations and create personalized travel itineraries. \n\nI can help you with:\n• Custom trip planning\n• Budget recommendations\n• Hidden gem discoveries\n• Activity suggestions\n• Local insights\n\nWhat kind of adventure are you dreaming about?"
    }

if (
      input.includes("recommend") ||
      input.includes("suggest") ||
      input.includes("destination") ||
      input.includes("place")
    ) {
      const travelQuery: TravelQuery = {
        query: userInput,
        budget: userTravelPreferences.budget,
        travelStyle: userTravelPreferences.travelStyle,
        duration: userTravelPreferences.duration,
        interests: userTravelPreferences.interests,
        groupSize: userTravelPreferences.groupSize,
      }

setIsTyping(true)
      setIsGatheringData(true)

aiAssistant
        .generateDestinations(travelQuery)
        .then((destinations) => {
          setIsTyping(false)
          setIsGatheringData(false)

if (destinations && destinations.length > 0) {
            const top3 = destinations
              .slice(0, 3)
              .map((dest, index) => `\n${index + 1}. ${dest}`)
              .join("")
            return `Based on your preferences, here are some destinations you might enjoy:${top3}`
          } else {
            return "I couldn't find any destinations matching your criteria. Please try again!"
          }
        })
        .catch((error) => {
          console.error("Error generating destinations:", error)
          setIsTyping(false)
          setIsGatheringData(false)
          return "I encountered an error while searching for destinations. Please try again later."
        })

return "Let me check real-time data from Google, TripAdvisor, TikTok, and our community to find the perfect destination for you... ✈️"
    }

return "That sounds interesting! I'd love to help you explore that further. Could you tell me more about:\n\n• Your preferred travel dates\n• Budget range\n• Type of activities you enjoy\n• Any specific destinations you're considering\n\nThe more details you share, the better I can personalize your perfect itinerary! ✈️"
  }

const generatePersonalizedItinerary = (preferences: any) => {
    // Placeholder for AI-powered itinerary generation
    return `AI-powered itinerary based on your preferences:
    Budget: ${preferences.budget}
    Travel Style: ${preferences.travelStyle}
    Duration: ${preferences.duration}
    Interests: ${preferences.interests.join(", ")}
    Group Size: ${preferences.groupSize}`
  }

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

const handleRatingChange = (category: string, rating: number) => {
    setNewReviewData((prev) => ({
      ...prev,
      ratings: {
        ...prev.ratings,
        [category]: rating,
      },
    }))
  }

const handlePriceLevelChange = (level: number) => {
    setNewReviewData((prev) => ({
      ...prev,
      priceLevel: level,
    }))
  }

const handleShareReview = () => {
    if (!newReviewData.location.trim() || !newReviewData.comment.trim()) {
      alert("Please fill in location and comment fields")
      return
    }

const newReview = {
      id: allUserReviews.length + 1,
      user: {
        name: "You", // In a real app, this would be the logged-in user
        avatar: "/placeholder.svg?height=40&width=40&text=YU",
        verified: false,
      },
      location: newReviewData.location,
      image:
        uploadedPhoto || `/placeholder.svg?height=300&width=400&text=${encodeURIComponent(newReviewData.location)}`,
      comment: newReviewData.comment,
      ratings: newReviewData.ratings,
      priceLevel: newReviewData.priceLevel,
      likes: 0,
      timeAgo: "Just now",
    }

// Add new review to the beginning of the list (most recent first)
    setAllUserReviews((prev) => [newReview, ...prev])

// Reset form
    setNewReviewData({
      location: "",
      comment: "",
      ratings: { beautiful: 0, accessibility: 0, touristFriendly: 0 },
      priceLevel: 3,
    })
    setUploadedPhoto(null)
    setNewComment("")

// Show success message
    alert("Review shared successfully! 🎉")
    setAnalytics((prev) => ({
      ...prev,
      reviewsShared: prev.reviewsShared + 1,
    }))
  }

const handleLikeReview = (reviewId: number) => {
    setAllUserReviews((prev) =>
      prev.map((review) => (review.id === reviewId ? { ...review, likes: review.likes + 1 } : review)),
    )
  }

const handleMaxPriceLevelChange = (level: number) => {
    setUserPreferences((prev) => ({
      ...prev,
      maxPriceLevel: level,
    }))
  }

// Sort reviews by likes (popularity) and recency
  const sortedReviews = [...allUserReviews].sort((a, b) => {
    // Weight: likes count more heavily, but recent posts get a boost
    const aScore = a.likes * 2 + (a.timeAgo === "Just now" ? 100 : 0)
    const bScore = b.likes * 2 + (b.timeAgo === "Just now" ? 100 : 0)
    return bScore - aScore
  })

const renderStarRating = (rating: number, onRate?: (rating: number) => void) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        className={`h-4 w-4 cursor-pointer transition-colors ${
          i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300 hover:text-yellow-300"
        }`}
        onClick={() => onRate && onRate(i + 1)}
      />
    ))
  }

const renderPriceLevelRating = (priceLevel: number, onRate?: (level: number) => void) => {
    return Array.from({ length: 5 }, (_, i) => (
      <DollarSign
        key={i}
        className={`h-4 w-4 cursor-pointer transition-colors ${
          i < priceLevel ? "fill-green-600 text-green-600" : "text-gray-300 hover:text-green-300"
        }`}
        onClick={() => onRate && onRate(i + 1)}
      />
    ))
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-white">
      {/* Navigation */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image src="/worldie-logo.png" alt="Worldie Logo" width={40} height={40} className="rounded-lg" />
              <span className="text-2xl font-bold text-purple-800">WORLDIE</span>
            </div>
            <nav className="hidden md:flex items-center space-x-8">
              <Link
                href="#trending"
                className="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-colors group"
              >
                <div className="bg-purple-100 group-hover:bg-purple-200 rounded-full p-2 transition-colors">
                  <TrendingUp className="h-4 w-4 text-purple-600" />
                </div>
                <span className="font-medium">Trending</span>
              </Link>
              <Link
                href="#reviews"
                className="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-colors group"
              >
                <div className="bg-purple-100 group-hover:bg-purple-200 rounded-full p-2 transition-colors">
                  <Star className="h-4 w-4 text-purple-600" />
                </div>
                <span className="font-medium">Reviews</span>
              </Link>
              <Link
                href="#explore"
                className="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-colors group"
              >
                <div className="bg-purple-100 group-hover:bg-purple-200 rounded-full p-2 transition-colors">
                  <Globe className="h-4 w-4 text-purple-600" />
                </div>
                <span className="font-medium">Explore</span>
              </Link>
              <button
                onClick={handleSaveUp}
                className="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-colors group"
              >
                <div className="bg-purple-100 group-hover:bg-purple-200 rounded-full p-2 transition-colors">
                  <PiggyBank className="h-4 w-4 text-purple-600" />
                </div>
                <span className="font-medium">Save Up</span>
              </button>
            </nav>
            <Button onClick={() => setIsSignInOpen(true)} className="bg-purple-600 hover:bg-purple-700">
              <User className="h-4 w-4 mr-2" />
              Sign In
            </Button>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-20 text-center">
        <div className="container mx-auto px-4">
          <h1 className="text-5xl md:text-6xl font-bold text-purple-800 mb-6">Discover Your Next Adventure</h1>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Your gateway to authentic travel experiences. Connect with fellow adventurers, uncover secret destinations,
            and create memories that last a lifetime.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-purple-600 hover:bg-purple-700" onClick={trackStartExploring}>
              <Globe className="h-5 w-5 mr-2" />
              Start Exploring
            </Button>
            <Button size="lg" variant="outline" className="border-purple-600 text-purple-600 hover:bg-purple-50">
              <Camera className="h-5 w-5 mr-2" />
              Share Your Journey
            </Button>
          </div>
        </div>
      </section>
      {/* Currency Test / Lead Magnet */}
<section className="py-8 flex justify-center">
  <div className="max-w-md w-full bg-white rounded-xl shadow-lg p-8 border border-purple-100 text-center">
    <h3 className="text-2xl font-bold text-purple-800 mb-2">🎁 Get Your Free Travel Budget Checklist!</h3>
    <p className="mb-4 text-gray-600">
      Enter your email and we’ll send you our exclusive PDF with pro travel savings tips.
    </p>
    <form
      onSubmit={e => { e.preventDefault(); alert("Thank you! Check your inbox soon for your checklist."); }}
      className="flex flex-col sm:flex-row gap-3"
    >
      <input
        type="email"
        required
        placeholder="Your email"
        className="border border-gray-300 rounded-lg px-4 py-2 flex-1"
      />
      <button
        type="submit"
        className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-semibold"
      >
        Get It
      </button>
    </form>
    <p className="mt-2 text-xs text-gray-400">
      *We respect your privacy. No spam ever.
    </p>
  </div>
</section>

{/* Explore Modal */}
      {isExploreModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-2xl">
            <CardContent className="p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-bold text-gray-800">What are you looking for?</h2>
                <Button variant="ghost" size="sm" onClick={() => setIsExploreModalOpen(false)}>
                  <X className="h-5 w-5" />
                </Button>
              </div>
              <p className="text-gray-600 mb-8 text-lg">Choose your travel style and discover amazing destinations</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-blue-50 hover:border-blue-300"
                  onClick={() => handleCategorySelect("beach")}
                >
                  <div>
                    <div className="font-semibold text-lg">🏖️ Beach Paradise</div>
                    <div className="text-sm text-gray-500">Crystal waters & sandy shores</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-green-50 hover:border-green-300"
                  onClick={() => handleCategorySelect("tourist-free")}
                >
                  <div>
                    <div className="font-semibold text-lg">🌿 Tourist-Free</div>
                    <div className="text-sm text-gray-500">Hidden & untouched places</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-purple-50 hover:border-purple-300"
                  onClick={() => handleCategorySelect("cultural")}
                >
                  <div>
                    <div className="font-semibold text-lg">🏛️ Cultural Heritage</div>
                    <div className="text-sm text-gray-500">History & traditions</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-orange-50 hover:border-orange-300"
                  onClick={() => handleCategorySelect("adventure")}
                >
                  <div>
                    <div className="font-semibold text-lg">⛰️ Adventure</div>
                    <div className="text-sm text-gray-500">Thrills & outdoor activities</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-red-50 hover:border-red-300"
                  onClick={() => handleCategorySelect("urban")}
                >
                  <div>
                    <div className="font-semibold text-lg">🏙️ Urban Exploration</div>
                    <div className="text-sm text-gray-500">Cities & metropolitan areas</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-green-50 hover:border-green-300"
                  onClick={() => handleCategorySelect("budget")}
                >
                  <div>
                    <div className="font-semibold text-lg">💰 Budget-Friendly</div>
                    <div className="text-sm text-gray-500">Affordable travel options</div>
                  </div>
                </Button>
                <Button
                  variant="outline"
                  className="h-20 text-left justify-start hover:bg-gray-50 hover:border-gray-300 md:col-span-2"
                  onClick={() => {
                    setFilteredDestinations(allDestinations)
                    setSelectedCategory("all")
                    setCurrentSlide(0)
                    setIsExploreModalOpen(false)
                    document.getElementById("trending")?.scrollIntoView({ behavior: "smooth" })
                  }}
                >
                  <div>
                    <div className="font-semibold text-lg">🌍 Show All</div>
                    <div className="text-sm text-gray-500">All trending destinations</div>
                  </div>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Save Up Modal */}
      {isSaveUpModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <Card className="w-full max-w-3xl max-h-[80vh] overflow-hidden">
            <CardContent className="p-0">
              <div className="bg-gradient-to-r from-green-600 to-green-800 text-white p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="bg-white/20 rounded-full p-2">
                      <PiggyBank className="h-6 w-6" />
                    </div>
                    <h2 className="text-2xl font-bold">Budget-Friendly Destinations</h2>
                  </div>
                  <Button variant="ghost" size="sm" onClick={() => setIsSaveUpModalOpen(false)} className="text-white">
                    <X className="h-5 w-5" />
                  </Button>
                </div>
              </div>

<div className="p-6">
                <div className="mb-6">
                  <h3 className="text-lg font-medium mb-2">Set your maximum budget level:</h3>
                  <div className="flex items-center space-x-2">
                    <div className="flex">
                      {renderPriceLevelRating(userPreferences.maxPriceLevel, handleMaxPriceLevelChange)}
                    </div>
                    <span className="text-sm text-gray-500">
                      (
                      {userPreferences.maxPriceLevel === 1
                        ? "Super Budget"
                        : userPreferences.maxPriceLevel === 2
                          ? "Budget"
                          : userPreferences.maxPriceLevel === 3
                            ? "Mid-range"
                            : userPreferences.maxPriceLevel === 4
                              ? "Premium"
                              : "Luxury"}
                      )
                    </span>
                  </div>
                </div>

<div className="overflow-y-auto max-h-[50vh]">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {budgetFriendlyDestinations.map((destination) => (
                      <Card key={destination.id} className="overflow-hidden">
                        <div className="relative h-40">
                          <img
                            src={destination.image || "/placeholder.svg"}
                            alt={destination.name}
                            className="w-full h-full object-cover"
                          />
                          <div className="absolute bottom-2 left-2">
                            <Badge className="bg-green-600">
                              {destination.priceLevel === 1
                                ? "Super Budget"
                                : destination.priceLevel === 2
                                  ? "Budget"
                                  : destination.priceLevel === 3
                                    ? "Mid-range"
                                    : destination.priceLevel === 4
                                      ? "Premium"
                                      : "Luxury"}
                            </Badge>
                          </div>
                        </div>
                        <CardContent className="p-4">
                          <div className="flex items-center justify-between mb-2">
                            <h3 className="font-bold">{destination.name}</h3>
                            <div className="flex">{renderPriceLevel(destination.priceLevel)}</div>
                          </div>
                          <p className="text-sm text-gray-600 line-clamp-2">{destination.description}</p>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Trending Destinations */}
      <section id="trending" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-3xl font-bold text-gray-800 mb-2">
                {selectedCategory === "beach"
                  ? "Beach Destinations"
                  : selectedCategory === "tourist-free"
                    ? "Tourist-Free Destinations"
                    : selectedCategory === "cultural"
                      ? "Cultural Destinations"
                      : selectedCategory === "adventure"
                        ? "Adventure Destinations"
                        : selectedCategory === "urban"
                          ? "Urban Destinations"
                          : selectedCategory === "budget"
                            ? "Budget-Friendly Destinations"
                            : "Trending Destinations"}
              </h2>
              <p className="text-gray-600">
                {selectedCategory === "beach"
                  ? "Paradise beaches and crystal clear waters"
                  : selectedCategory === "tourist-free"
                    ? "Hidden gems away from the crowds"
                    : selectedCategory === "cultural"
                      ? "Rich heritage and cultural experiences"
                      : selectedCategory === "adventure"
                        ? "Thrilling adventures and outdoor activities"
                        : selectedCategory === "urban"
                          ? "Vibrant cities and metropolitan experiences"
                          : selectedCategory === "budget"
                            ? "Amazing experiences that won't break the bank"
                            : "Discover the hottest travel spots right now"}
              </p>
            </div>
            <Badge variant="secondary" className="bg-purple-100 text-purple-700">
              <TrendingUp className="h-4 w-4 mr-1" />
              Hot Now
            </Badge>
          </div>

{filteredDestinations.length > 0 && (
            <div className="relative">
              <div className="overflow-hidden rounded-2xl">
                <div
                  className="flex transition-transform duration-500 ease-in-out"
                  style={{ transform: `translateX(-${currentSlide * 100}%)` }}
                >
                  {filteredDestinations.map((destination) => (
                    <div key={destination.id} className="w-full flex-shrink-0">
                      <Card className="border-0 shadow-lg">
                        <div className="relative">
                          <img
                            src={destination.image || "/placeholder.svg"}
                            alt={destination.name}
                            className="w-full h-96 object-cover"
                          />
                          <div className="absolute top-4 right-4">
                            <Badge className="bg-white/90 text-gray-800 backdrop-blur-sm">
                              <div className="flex items-center">{renderPriceLevel(destination.priceLevel)}</div>
                            </Badge>
                          </div>
                        </div>
                        <CardContent className="p-6">
                          <div className="flex items-center justify-between mb-3">
                            <h3 className="text-2xl font-bold text-gray-800">{destination.name}</h3>
                            <Badge className="bg-purple-600">Trending</Badge>
                          </div>
                          <p className="text-gray-600 text-lg leading-relaxed">{destination.description}</p>
                        </CardContent>
                      </Card>
                    </div>
                  ))}
                </div>
              </div>

{filteredDestinations.length > 1 && (
                <>
                  <Button
                    variant="outline"
                    size="icon"
                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/90 backdrop-blur-sm"
                    onClick={prevSlide}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/90 backdrop-blur-sm"
                    onClick={nextSlide}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </>
              )}

{filteredDestinations.length > 1 && (
                <div className="flex justify-center mt-6 space-x-2">
                  {filteredDestinations.map((_, index) => (
                    <button
                      key={index}
                      className={`w-3 h-3 rounded-full transition-colors ${
                        index === currentSlide ? "bg-purple-600" : "bg-gray-300"
                      }`}
                      onClick={() => setCurrentSlide(index)}
                    />
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </section>

{/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-purple-600 to-purple-800 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold mb-4">Ready to Start Your Journey?</h2>
          <p className="text-xl mb-8 opacity-90">Join thousands of travelers sharing their adventures</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="bg-white text-purple-600 hover:bg-gray-100">
              <Users className="h-5 w-5 mr-2" />
              Join Community
            </Button>
            <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
              <Camera className="h-5 w-5 mr-2" />
              Share Your Story
            </Button>
          </div>
        </div>
      </section>

{/* User Reviews & Recommendations */}
      <section id="reviews" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">Traveler Recommendations</h2>
            <p className="text-gray-600 text-lg">Discover hidden gems shared by our community</p>
          </div>

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {sortedReviews.map((review) => (
              <Card key={review.id} className="overflow-hidden hover:shadow-lg transition-shadow">
                <div className="relative">
                  <img
                    src={review.image || "/placeholder.svg"}
                    alt={review.location}
                    className="w-full h-48 object-cover"
                  />
                  <div className="absolute top-3 left-3">
                    <Badge className="bg-black/70 text-white">
                      <MapPin className="h-3 w-3 mr-1" />
                      {review.location}
                    </Badge>
                  </div>
                  {review.timeAgo === "Just now" && (
                    <div className="absolute top-3 right-3">
                      <Badge className="bg-green-500 text-white animate-pulse">New!</Badge>
                    </div>
                  )}
                </div>

<CardContent className="p-4">
                  <div className="flex items-center space-x-3 mb-4">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src={review.user.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{review.user.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                        <h4 className="font-semibold text-gray-800">{review.user.name}</h4>
                        {review.user.verified && (
                          <Badge variant="secondary" className="text-xs bg-green-100 text-green-700">
                            Verified
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-gray-500">{review.timeAgo}</p>
                    </div>
                  </div>

<p className="text-gray-700 mb-4 leading-relaxed">{review.comment}</p>

<div className="space-y-2 mb-4">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Beautiful</span>
                      <div className="flex">{renderStars(review.ratings.beautiful)}</div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Accessibility</span>
                      <div className="flex">{renderStars(review.ratings.accessibility)}</div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Tourist Friendly</span>
                      <div className="flex">{renderStars(review.ratings.touristFriendly)}</div>
                    </div>
                    <div className="flex items-center justify-between border-t pt-2 mt-2">
                      <span className="text-sm font-medium text-gray-600">Price Level</span>
                      <div className="flex">{renderPriceLevel(review.priceLevel)}</div>
                    </div>
                  </div>

<div className="flex items-center justify-between pt-3 border-t">
                    <div className="flex items-center space-x-4">
                      <button
                        className="flex items-center space-x-1 text-gray-500 hover:text-red-500 transition-colors"
                        onClick={() => handleLikeReview(review.id)}
                      >
                        <Heart className="h-4 w-4" />
                        <span className="text-sm">{review.likes}</span>
                      </button>
                      <button className="flex items-center space-x-1 text-gray-500 hover:text-blue-500 transition-colors">
                        <Share2 className="h-4 w-4" />
                        <span className="text-sm">Share</span>
                      </button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

{/* Add Review Section */}
          <Card className="mt-12 max-w-2xl mx-auto">
            <CardContent className="p-6">
              <h3 className="text-xl font-bold text-gray-800 mb-4">Share Your Hidden Gem</h3>
              <div className="space-y-4">
                <Input
                  placeholder="Location name..."
                  value={newReviewData.location}
                  onChange={(e) => setNewReviewData((prev) => ({ ...prev, location: e.target.value }))}
                />
                <Textarea
                  placeholder="Tell us about this amazing place..."
                  value={newReviewData.comment}
                  onChange={(e) => setNewReviewData((prev) => ({ ...prev, comment: e.target.value }))}
                  className="min-h-[100px]"
                />

{/* Rating Section */}
                <div className="space-y-3 p-4 bg-gray-50 rounded-lg">
                  <h4 className="font-medium text-gray-700">Rate this place:</h4>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Beautiful</span>
                      <div className="flex">
                        {renderStarRating(newReviewData.ratings.beautiful, (rating) =>
                          handleRatingChange("beautiful", rating),
                        )}
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Accessibility</span>
                      <div className="flex">
                        {renderStarRating(newReviewData.ratings.accessibility, (rating) =>
                          handleRatingChange("accessibility", rating),
                        )}
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-600">Tourist Friendly</span>
                      <div className="flex">
                        {renderStarRating(newReviewData.ratings.touristFriendly, (rating) =>
                          handleRatingChange("touristFriendly", rating),
                        )}
                      </div>
                    </div>
                    <div className="flex items-center justify-between border-t pt-2 mt-2">
                      <span className="text-sm font-medium text-gray-600">Price Level</span>
                      <div className="flex">
                        {renderPriceLevelRating(newReviewData.priceLevel, handlePriceLevelChange)}
                      </div>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      <span className="block">Price Level Guide:</span>
                      <span className="block">
                        $ = Super Budget, $$ = Budget, $$$ = Mid-range, $$$$ = Premium, $$$$$ = Luxury
                      </span>
                    </div>
                  </div>
                </div>

{/* Photo Upload Section */}
                {uploadedPhoto && (
                  <div className="relative">
                    <img
                      src={uploadedPhoto || "/placeholder.svg"}
                      alt="Uploaded preview"
                      className="w-full h-48 object-cover rounded-lg"
                    />
                    <Button
                      variant="outline"
                      size="sm"
                      className="absolute top-2 right-2 bg-white/90"
                      onClick={() => setUploadedPhoto(null)}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                )}

<div className="flex items-center justify-between">
                  <div className="relative">
                    <input
                      type="file"
                      accept="image/*"
                      onChange={handlePhotoUpload}
                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                      id="photo-upload"
                    />
                    <Button variant="outline" size="sm" asChild>
                      <label htmlFor="photo-upload" className="cursor-pointer">
                        <Camera className="h-4 w-4 mr-2" />
                        {uploadedPhoto ? "Change Photo" : "Add Photo"}
                      </label>
                    </Button>
                  </div>
                  <Button className="bg-purple-600 hover:bg-purple-700" onClick={handleShareReview}>
                    <Send className="h-4 w-4 mr-2" />
                    Share Review
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Chatbot Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">Meet Grapie - Your AI Travel Companion</h2>
            <p className="text-gray-600 text-lg">
              Get personalized itineraries with real-time updates from Google, TripAdvisor, TikTok, and our community
            </p>
          </div>

<div className="max-w-4xl mx-auto">
            <Card className="overflow-hidden">
              <div className="bg-gradient-to-r from-purple-600 to-purple-800 text-white p-6">
                <div className="flex items-center space-x-3">
                  <div className="bg-white/20 rounded-full p-2">
                    <MessageCircle className="h-6 w-6" />
                  </div>
                  <div>
                    <h3 className="text-xl font-bold">Grapie - AI Travel Assistant</h3>
                    <p className="text-purple-100">Powered by AI • Always ready to help</p>
                  </div>
                </div>
              </div>

<div className="p-6">
                <div className="space-y-4">
                  <div className="h-[400px] overflow-y-auto p-4">
                    {messages.map((message) => (
                      <div
                        key={message.id}
                        className={`mb-2 flex ${message.type === "user" ? "justify-end" : "justify-start"}`}
                      >
                        <div
                          className={`rounded-xl px-4 py-2 ${
                            message.type === "user" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-800"
                          }`}
                        >
                          {message.content}
                          <div className="text-xs mt-1 opacity-70">
                            {message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                          </div>
                        </div>
                      </div>
                    ))}
                    {isTyping && (
                      <div className="flex justify-start">
                        <div className="rounded-xl px-4 py-2 bg-gray-100 text-gray-800">Typing...</div>
                      </div>
                    )}
                  </div>

<div className="flex items-center">
                    <Input
                      type="text"
                      placeholder="Ask me anything..."
                      value={inputMessage}
                      onChange={(e) => setInputMessage(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          handleSendMessage()
                        }
                      }}
                      className="rounded-r-none"
                    />
                    <Button onClick={handleSendMessage} className="rounded-l-none bg-purple-600 hover:bg-purple-700">
                      <Send className="h-4 w-4 mr-2" />
                      Send
                    </Button>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </section>

{/* Analytics Dashboard */}
      <section className="py-16 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Worldie Analytics</h2>
            <p className="text-gray-300">Real-time insights into our travel community</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <Card className="bg-white/10 backdrop-blur-sm border-white/20">
              <CardContent className="p-6 text-center">
                <div className="text-3xl font-bold text-blue-400 mb-2">{analytics.totalVisitors.toLocaleString()}</div>
                <div className="text-sm text-gray-300">Total Visitors</div>
                <div className="text-xs text-green-400 mt-1">
                  ↗ +{Math.floor(analytics.totalVisitors * 0.12)} this week
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/10 backdrop-blur-sm border-white/20">
              <CardContent className="p-6 text-center">
                <div className="text-3xl font-bold text-purple-400 mb-2">
                  {analytics.startExploringClicks.toLocaleString()}
                </div>
                <div className="text-sm text-gray-300">Start Exploring Clicks</div>
                <div className="text-xs text-green-400 mt-1">
                  ↗ {Math.round((analytics.startExploringClicks / analytics.totalVisitors) * 100)}% conversion rate
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/10 backdrop-blur-sm border-white/20">
              <CardContent className="p-6 text-center">
                <div className="text-3xl font-bold text-green-400 mb-2">
                  {analytics.chatbotInteractions.toLocaleString()}
                </div>
                <div className="text-sm text-gray-300">AI Assistant Chats</div>
                <div className="text-xs text-green-400 mt-1">
                  ↗ {Math.round((analytics.chatbotInteractions / analytics.totalVisitors) * 100)}% engagement
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/10 backdrop-blur-sm border-white/20">
              <CardContent className="p-6 text-center">
                <div className="text-3xl font-bold text-yellow-400 mb-2">
                  {analytics.reviewsShared.toLocaleString()}
                </div>
                <div className="text-sm text-gray-300">Reviews Shared</div>
                <div className="text-xs text-green-400 mt-1">
                  ↗ +{Math.floor(analytics.reviewsShared * 0.08)} this month
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="py-8 bg-gray-900 text-gray-400 border-t">
        <div className="container mx-auto px-4 text-center">
          <p className="text-sm">© {new Date().getFullYear()} Worldie. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}a7:T252a8,[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import "@/app/globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"

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

export const metadata = {
  title: "Worldie - Connect Your Business to the World",
  description: "Worldie helps businesses expand globally with innovative solutions and strategic partnerships.",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]png:file="public/worldie-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_2025-03-20_at_18.15.38-removebg-preview-MGcPFLrFElaNvtNVvn9tXkJkxZQfN5.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"