[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Luxury travel palette - earthy greens and warm neutrals */ --background: oklch(0.97 0.005 90); --foreground: oklch(0.25 0.02 150); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 150); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 150); --primary: oklch(0.4 0.1 150); --primary-foreground: oklch(0.98 0.005 90); --secondary: oklch(0.95 0.01 90); --secondary-foreground: oklch(0.25 0.02 150); --muted: oklch(0.93 0.01 90); --muted-foreground: oklch(0.5 0.02 150); --accent: oklch(0.45 0.12 150); --accent-foreground: oklch(0.98 0.005 90); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.88 0.02 90); --input: oklch(0.92 0.01 90); --ring: oklch(0.4 0.1 150); --chart-1: oklch(0.4 0.1 150); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Inter", "Inter Fallback"; --font-serif: "Playfair Display", "Playfair Display Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } html { scroll-behavior: smooth; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter, Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) const _playfair = Playfair_Display({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Lovat Tours | Premium Handcrafted Travel Experiences", description: "Discover the hidden treasures of the world through handcrafted tours that celebrate tradition, culture, and unforgettable moments.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" export default function Footer() { return ( ) } [V0_FILE]jpg:file="public/scenic-italian-mountains-with-green-valleys-and-ch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scenic-italian-mountains-with-green-valleys-and-ch-trTKX2V9xsdtmrdEw2sWdey7wS4Biz.jpg" isMerged="true" [V0_FILE]jpg:file="public/rome-colosseum-at-sunset-luxury-travel-photography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/rome-colosseum-at-sunset-luxury-travel-photography-mYdHPwGOl9Jzs2cn62Aip8VYoA1Y7J.jpg" isMerged="true" [V0_FILE]jpg:file="public/amalfi-coast-colorful-houses-on-cliffside-luxury-t.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/amalfi-coast-colorful-houses-on-cliffside-luxury-t-jgFTh5X4q5IVkycLh5UCNEYLo2GOox.jpg" isMerged="true" [V0_FILE]jpg:file="public/skardu-pakistan-mountain-landscape-with-lake-luxur.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skardu-pakistan-mountain-landscape-with-lake-luxur-YvX0hjxB0E7qyeVppEQhz4ISQWvCdM.jpg" isMerged="true" [V0_FILE]jpg:file="public/trevi-fountain-rome-classical-architecture-luxury-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trevi-fountain-rome-classical-architecture-luxury--fmM6maKfFncfONeb3IQZqukfrKKteI.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "resend": "6.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="app/api/book-tour/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) export async function POST(request: Request) { try { const body = await request.json() const { fullName, location, postCode, numberOfPeople, email, phone, tourName } = body await resend.emails.send({ from: "Lovat Tours ", to: "admin@lovat.net", subject: `New Booking Request: ${tourName}`, html: `

New Tour Booking Request

Tour: ${tourName}

Customer Details:

Full Name: ${fullName}
Location: ${location}
Post Code: ${postCode}
Number of People: ${numberOfPeople}
Email: ${email}
Phone: ${phone}

Please follow up with this customer to confirm their booking.

`, }) return NextResponse.json({ success: true, message: "Booking submitted successfully" }) } catch (error) { console.error("Error processing booking:", error) return NextResponse.json({ success: false, message: "Failed to process booking" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/contact/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) export async function POST(request: Request) { try { const body = await request.json() const { name, email, message } = body await resend.emails.send({ from: "Lovat Tours ", to: "admin@lovat.net", replyTo: email, subject: `New Contact Form Message from ${name}`, html: `

New Contact Form Submission

From: ${name}

Email: ${email}

Message:

${message}

`, }) return NextResponse.json({ success: true, message: "Message sent successfully" }) } catch (error) { console.error("Error processing contact form:", error) return NextResponse.json({ success: false, message: "Failed to send message" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/tour-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Image from "next/image" import { MapPin } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" interface Tour { id: number title: string country: string route?: string // Added optional route field image: string itinerary: string[] } interface TourCardProps { tour: Tour onBookNow: (tour: Tour) => void } export default function TourCard({ tour, onBookNow }: TourCardProps) { return (

{tour.country}

{tour.route && (

{tour.route}

)}

{tour.title}

Full Itinerary

{destination}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Phone, Mail, Loader2 } from "lucide-react" import { Instagram, Facebook } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" function TikTokIcon({ size = 18 }: { size?: number }) { return ( ) } export default function ContactSection() { const [isSubmitting, setIsSubmitting] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) if (response.ok) { setIsSuccess(true) setFormData({ name: "", email: "", message: "" }) } } catch (error) { console.error("Error submitting contact form:", error) } finally { setIsSubmitting(false) } } return (

{/* Image Section */}

{"Let's plan your next trip"}

{/* Form Section */}

Get in Touch

{isSuccess ? (

Message Sent!

Thank you for reaching out. We will get back to you soon.

) : (

Name

Email Address

Message

</div>

<Button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-full py-5 font-medium"
                >
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Sending...
                    </>
                  ) : (
                    "Submit"
                  )}
                </Button>
              </form>
            )}

{/* Contact Details */}
            <div className="mt-10 pt-8 border-t border-border">
              <h4 className="font-medium text-card-foreground mb-4">Contact Details</h4>
              <div className="space-y-3">
                <a
                  href="https://wa.me/447901113518"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                >
                  <Phone size={18} />
                  <span>WhatsApp: +44 7901113518</span>
                </a>
                <a
                  href="mailto:Tours@lovat.net"
                  className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                >
                  <Mail size={18} />
                  <span>Tours@lovat.net</span>
                </a>
                <a
                  href="mailto:Info@lovat.net"
                  className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                >
                  <Mail size={18} />
                  <span>Info@lovat.net</span>
                </a>
                <a
                  href="mailto:enquiries@lovat.net"
                  className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
                >
                  <Mail size={18} />
                  <span>enquiries@lovat.net</span>
                </a>
              </div>

{/* Social Media section */}
              <h4 className="font-medium text-card-foreground mb-4 mt-8">Follow Us</h4>
              <div className="flex items-center gap-4">
                <a
                  href="https://www.instagram.com/lovat.tours/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  aria-label="Instagram"
                >
                  <Instagram size={20} />
                </a>
                <a
                  href="https://www.facebook.com/profile.php?id=61586053396082"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  aria-label="Facebook"
                >
                  <Facebook size={20} />
                </a>
                <a
                  href="https://www.tiktok.com/@lovat.tours?_r=1&_t=ZN-939Rjyxcfyg"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
                  aria-label="TikTok"
                >
                  <TikTokIcon size={20} />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/booking-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface Tour {
  id: number
  title: string
  country: string
  image: string
  itinerary: string[]
}

interface BookingModalProps {
  isOpen: boolean
  onClose: () => void
  tour: Tour | null
}

export default function BookingModal({ isOpen, onClose, tour }: BookingModalProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)
  const [formData, setFormData] = useState({
    fullName: "",
    location: "",
    postCode: "",
    numberOfPeople: "",
    email: "",
    phone: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }))
  }

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

try {
      const response = await fetch("/api/book-tour", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...formData,
          tourName: tour?.title,
        }),
      })

if (response.ok) {
        setIsSuccess(true)
        setFormData({
          fullName: "",
          location: "",
          postCode: "",
          numberOfPeople: "",
          email: "",
          phone: "",
        })
      }
    } catch (error) {
      console.error("Error submitting booking:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

const handleBookAnother = () => {
    setIsSuccess(false)
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-foreground/60 backdrop-blur-sm" onClick={onClose} />

<div className="p-8">
          {isSuccess ? (
            <div className="text-center py-8">
              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h3 className="font-serif text-2xl font-bold mb-2 text-card-foreground">Booking Submitted!</h3>
              <p className="text-muted-foreground mb-6">
                Thank you for your interest in {tour?.title}. We will contact you shortly.
              </p>
              <div className="flex flex-col gap-3">
                <Button
                  onClick={handleBookAnother}
                  className="bg-primary hover:bg-primary/90 text-primary-foreground rounded-full"
                >
                  Book Another Tour
                </Button>
                <Button onClick={onClose} variant="outline" className="rounded-full bg-transparent">
                  Close
                </Button>
              </div>
            </div>
          ) : (
            <>
              <h3 className="font-serif text-2xl font-bold mb-2 text-card-foreground">Book Your Tour</h3>
              <p className="text-muted-foreground mb-6">{tour?.title}</p>

<div>
                  <Label htmlFor="location" className="text-card-foreground">
                    Location
                  </Label>
                  <Input
                    id="location"
                    name="location"
                    type="text"
                    required
                    value={formData.location}
                    onChange={handleChange}
                    className="mt-1 rounded-lg bg-input text-foreground"
                    placeholder="City, Country"
                  />
                </div>

<div>
                  <Label htmlFor="numberOfPeople" className="text-card-foreground">
                    Number of People
                  </Label>
                  <Input
                    id="numberOfPeople"
                    name="numberOfPeople"
                    type="number"
                    min="1"
                    required
                    value={formData.numberOfPeople}
                    onChange={handleChange}
                    className="mt-1 rounded-lg bg-input text-foreground"
                    placeholder="2"
                  />
                </div>

<div>
                  <Label htmlFor="email" className="text-card-foreground">
                    Email Address
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    className="mt-1 rounded-lg bg-input text-foreground"
                    placeholder="john@example.com"
                  />
                </div>

<div>
                  <Label htmlFor="phone" className="text-card-foreground">
                    Phone Number
                  </Label>
                  <Input
                    id="phone"
                    name="phone"
                    type="tel"
                    required
                    value={formData.phone}
                    onChange={handleChange}
                    className="mt-1 rounded-lg bg-input text-foreground"
                    placeholder="+44 7123 456789"
                  />
                </div>

<Button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground rounded-full py-5 mt-6 font-medium"
                >
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Submitting...
                    </>
                  ) : (
                    "Submit Booking"
                  )}
                </Button>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function HeroSection() {
  return (
    <section id="home" className="relative min-h-screen flex items-center justify-center">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('/majestic-snow-capped-mountain-peaks-with-dramatic-.jpg')`,
        }}
      >
        <div className="absolute inset-0 bg-foreground/40" />
      </div>

{/* Content */}
      <div className="relative z-10 container mx-auto px-6 text-center text-primary-foreground">
        <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl font-bold mb-6 text-balance">
          Experience Authentic Adventure
        </h1>
        <p className="text-lg md:text-xl lg:text-2xl max-w-3xl mx-auto mb-10 text-primary-foreground/90 leading-relaxed text-pretty">
          Discover the hidden treasures of Italy through bespoke tours that celebrate tradition, culture, and
          unforgettable moments.
        </p>
        <Button
          asChild
          size="lg"
          className="bg-primary hover:bg-primary/90 text-primary-foreground px-8 py-6 text-lg rounded-full font-medium"
        >
          <Link href="#tours">Explore Our Tours</Link>
        </Button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import Header from "@/components/header"
import HeroSection from "@/components/hero-section"
import ToursSection from "@/components/tours-section"
import CustomTripBuilder from "@/components/custom-trip-builder"
import GallerySection from "@/components/gallery-section"
import ContactSection from "@/components/contact-section"
import Footer from "@/components/footer"

export default function Home() {
  return (
    <main className="min-h-screen">
      <Header />
      <HeroSection />
      <ToursSection />
      <CustomTripBuilder />
      <GallerySection />
      <ContactSection />
      <Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/majestic-snow-capped-mountain-peaks-with-dramatic-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/majestic-snow-capped-mountain-peaks-with-dramatic--aEiEWrR4a7lqrQlo1Q3T9598ibX1Cd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tourists-at-colosseum-rome-sunny-day.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tourists-at-colosseum-rome-sunny-day-FeOdGkpVzZ7x32gvRciuzpyY7L7WHh.jpg" isMerged="true"
[V0_FILE]jpg:file="public/amalfi-coast-scenic-view-colorful-buildings.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/amalfi-coast-scenic-view-colorful-buildings-l1ZkzItj1zjUk8mmk7QU7F4EIQHyh9.jpg" isMerged="true"
[V0_FILE]png:file="public/venice-gondola-canal-romantic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/venice-gondola-canal-romantic-1AixPBSQOKxSGG4z8kN7dPDMpECG5Q.png" isMerged="true"
[V0_FILE]jpg:file="public/tuscany-rolling-hills-vineyards-sunset.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tuscany-rolling-hills-vineyards-sunset-WOoJGFFSBULmZwmn16iNkocNZH2JSe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/swiss-alps-mountains-lake-scenic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/swiss-alps-mountains-lake-scenic-wTTnmQmsviZ7jhW2YacnZAjdeJXaxr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/lake-como-italy-luxury-villas.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lake-como-italy-luxury-villas-u7bX0RCHIupsqNBs5DeHwKXpAgTmNW.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/whatsapp-20image-202026-01-09-20at-209.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.44.46%20PM-X0JEN3959x7nkrXZ2v4uzPyDp5AKO6.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/tours-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import TourCard from "@/components/tour-card"
import BookingModal from "@/components/booking-modal"

const tours = [
  {
    id: 1,
    title: "Rome - Belgium",
    country: "From Rome",
    route: "UK-Italy-UK",
    image: "/rome-colosseum-at-sunset-luxury-travel-photography.jpg",
    itinerary: [
      "Manchester",
      "London",
      "Rome",
      "Vatican City",
      "Civita di Bagnoregio",
      "Florence, Tuscany",
      "Pisa",
      "Vernazza",
      "Lake Garda",
      "Venice",
      "Cortina d'Ampezzo",
      "Munich",
      "Luxembourg",
      "Calais",
      "Manchester",
    ],
  },
  {
    id: 2,
    title: "Amalfi - Champagne",
    country: "From Amalfi",
    route: "UK-Italy-UK",
    image: "/amalfi-coast-colorful-houses-on-cliffside-luxury-t.jpg",
    itinerary: [
      "Manchester",
      "London",
      "Amalfi",
      "Pompeii",
      "Vesuvius",
      "Rome",
      "Civita di Bagnoregio",
      "Florence, Tuscany",
      "Tuscany",
      "Lake Como",
      "Venice",
      "Cortina d'Ampezzo",
      "Munich",
      "Zurich",
      "Champagne",
      "Calais",
      "Manchester",
    ],
  },
  {
    id: 3,
    title: "Undiscovered Pakistan",
    country: "Pakistan",
    image: "/skardu-pakistan-mountain-landscape-with-lake-luxur.jpg",
    itinerary: [
      "Karachi",
      "Thatta",
      "Makli (Thatta district)",
      "Keenjhar Lake (Thatta district)",
      "Nagarparkar",
      "Umerkot",
      "Gadani",
      "Sonmiani",
      "Ranikot (Jamshoro district)",
      "Larkana",
      "Mohenjo-daro (near Larkana)",
      "Bahawalpur",
      "Multan",
      "Harappa",
      "Lahore",
      "Wagah",
      "Katas Raj (Chakwal district)",
      "Khewra (Jhelum district)",
      "Mangla / Mirpur",
      "Islamabad",
      "Skardu",
      "Shigar",
      "Khaplu",
      "Gilgit",
      "Naltar",
      "Hunza (Karimabad)",
      "Sost (Pakistan–China Border)",
    ],
  },
]

export default function ToursSection() {
  const [selectedTour, setSelectedTour] = useState<(typeof tours)[0] | null>(null)
  const [isBookingOpen, setIsBookingOpen] = useState(false)

const handleBookNow = (tour: (typeof tours)[0]) => {
    setSelectedTour(tour)
    setIsBookingOpen(true)
  }

return (
    <section id="tours" className="py-24 bg-secondary">
      <div className="container mx-auto px-6">
        <h2 className="font-serif text-5xl md:text-6xl font-bold text-center mb-16 text-foreground">Tours.</h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {tours.map((tour) => (
            <TourCard key={tour.id} tour={tour} onBookNow={handleBookNow} />
          ))}
        </div>
      </div>

<BookingModal isOpen={isBookingOpen} onClose={() => setIsBookingOpen(false)} tour={selectedTour} />
    </section>
  )
}
[V0_FILE]jpg:file="public/gallery/colosseum.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.55.01%20PM%20%281%29-jQNimljDCwYqfhUnLKU2WGUkOtLRQ6.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/gondola-ride.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.45.56%20PM-0m9nH1f51xxBuWkFg6p83eHffe6q9C.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/venice-canal-bridge.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.52.55%20PM-SDNWhNxnKXOPD9n4naYIyxjWDtUJKq.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/rialto-bridge.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.53.11%20PM-8dfAbA4iNGXXaKusZUlvrrz0CC8ucv.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/venice-skyline.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.50.46%20PM-TbudOIzbt51Vwhn6wX5cJNkXKtcLhr.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/zurich-bridge.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.50.37%20PM-r6nuXcoF1Rypx8ZlBANaNtTJUrJCTL.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/stmarks-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.43.51%20PM-KvjRV4L0uIov4mVEj5CE8Ywq73SBFL.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/torcello-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.46.50%20PM-y1tyQr7w7EAEbbZJqVmWLIYwhp7wnN.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/rome-monument.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.37.49%20PM-XIHxawV7DRu7ElD1tOQYn42JetznqW.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/pigeons-fun.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-09%20at%209.44.46%20PM-X0JEN3959x7nkrXZ2v4uzPyDp5AKO6.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/gallery-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { X, ChevronLeft, ChevronRight } from "lucide-react"

const galleryImages = [
  { src: "/gallery/colosseum.jpg", alt: "Colosseum in Rome" },
  { src: "/gallery/gondola-ride.jpg", alt: "Gondola ride in Venice" },
  { src: "/gallery/venice-canal-bridge.jpg", alt: "Venice canal with bridge" },
  { src: "/gallery/rialto-bridge.jpg", alt: "Venice Grand Canal and Rialto Bridge" },
  { src: "/gallery/venice-skyline.jpg", alt: "Venice skyline from the water" },
  { src: "/gallery/zurich-bridge.jpg", alt: "Zurich bridge at dusk" },
  { src: "/gallery/stmarks-group.jpg", alt: "Tour group at St. Mark's Square" },
  { src: "/gallery/torcello-group.jpg", alt: "Tour group at Torcello" },
  { src: "/gallery/rome-monument.jpg", alt: "Rome Vittorio Emanuele monument" },
  { src: "/gallery/pigeons-fun.jpg", alt: "Fun moment with pigeons in Venice" },
  { src: "/gallery/airport-group-selfie.jpg", alt: "Tour group at airport" },
  { src: "/gallery/frankfurt-justice-statue.jpg", alt: "Lady Justice statue in Frankfurt" },
  { src: "/gallery/gondola-group.jpg", alt: "Group enjoying a gondola ride" },
  { src: "/gallery/stmarks-basilica.jpg", alt: "St. Mark's Basilica facade" },
  { src: "/gallery/palace-interior.jpg", alt: "Ornate palace interior with chandelier" },
  { src: "/gallery/venice-night.jpg", alt: "Venice Grand Canal at night" },
  { src: "/gallery/cathedral-statue.jpg", alt: "Golden statue in cathedral" },
  { src: "/gallery/leaning-tower-pisa.jpg", alt: "Leaning Tower of Pisa" },
  { src: "/gallery/florence-duomo-group.jpg", alt: "Tour group at Florence Duomo" },
  { src: "/gallery/disneyland-group.jpg", alt: "Group at Disneyland Paris" },
]

export default function GallerySection() {
  const [selectedImage, setSelectedImage] = useState<number | null>(null)

const openLightbox = (index: number) => {
    setSelectedImage(index)
  }

const closeLightbox = () => {
    setSelectedImage(null)
  }

const goToPrevious = () => {
    if (selectedImage !== null) {
      setSelectedImage(selectedImage === 0 ? galleryImages.length - 1 : selectedImage - 1)
    }
  }

const goToNext = () => {
    if (selectedImage !== null) {
      setSelectedImage(selectedImage === galleryImages.length - 1 ? 0 : selectedImage + 1)
    }
  }

return (
    <section id="gallery" className="py-24 bg-background">
      <div className="container mx-auto px-6">
        <h2 className="font-serif text-5xl md:text-6xl font-bold text-center mb-6 text-foreground">Gallery.</h2>
        <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
          Memories from our tours - moments captured across Italy and Europe
        </p>

{/* Gallery Grid */}
        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2">
          {galleryImages.map((image, index) => (
            <div
              key={index}
              className="relative aspect-[4/3] overflow-hidden rounded-xl cursor-pointer group"
              onClick={() => openLightbox(index)}
            >
              <Image
                src={image.src || "/placeholder.svg"}
                alt={image.alt}
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20 transition-colors duration-300" />
            </div>
          ))}
        </div>
      </div>

{/* Lightbox */}
      {selectedImage !== null && (
        <div className="fixed inset-0 z-50 bg-foreground/90 flex items-center justify-center">
          <button
            onClick={closeLightbox}
            className="absolute top-4 right-4 text-primary-foreground hover:text-primary transition-colors"
            aria-label="Close lightbox"
          >
            <X size={32} />
          </button>

<button
            onClick={goToNext}
            className="absolute right-4 text-primary-foreground hover:text-primary transition-colors"
            aria-label="Next image"
          >
            <ChevronRight size={48} />
          </button>
        </div>
      )}
    </section>
  )
}
[V0_FILE]jpg:file="public/gallery/airport-group-selfie.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/thumb_IMG_9247_1024-16BJnmj1dRij64a6kwUSjg9S5O2n91.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/frankfurt-justice-statue.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20170113_145919011-ypLPtWsQuRUAN26VWuRTD4Ie28NwXG.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/gondola-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/thumb_IMG_9693_1024-gfbyYXPmEPZVxHFnUAyqRxgCidMdrl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/stmarks-basilica.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20170116_152709-pHbO4hBLPcSqSSH8dd1UE1uabXNUYp.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/palace-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20170120_211824-vr2hB9zTiveHMSNUWj5BUKzhyfy87m.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/venice-night.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20170116_192343666-GxSpHoa2ZtWYKM7ZWCW78prbcMuAgU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/cathedral-statue.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20170113_153913-CxgpIthvfT9rE3b8hpQ0YnKCvH2mjW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/leaning-tower-pisa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20170118_154947-ahSJRDyyqTLiM3Do3jQ2D5XQPZVqK3.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/florence-duomo-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/thumb_IMG_9911_1024-RVxwDyuwKgv5c5Tjsl8nR2q4SYmcd5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gallery/disneyland-group.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/thumb_IMG_0564_1024-g352pbaUzdt5XNQm3XJgCHIWqE1qKf.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/custom-trip-builder.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Plus, X, MapPin, Send, Calendar, User, Mail, Phone, Loader2, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface City {
  id: number
  name: string
}

export default function CustomTripBuilder() {
  const [cities, setCities] = useState<City[]>([{ id: 1, name: "" }])
  const [days, setDays] = useState("")
  const [fullName, setFullName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [error, setError] = useState("")

const addCity = () => {
    setCities([...cities, { id: Date.now(), name: "" }])
  }

const removeCity = (id: number) => {
    if (cities.length > 1) {
      setCities(cities.filter((city) => city.id !== id))
    }
  }

const updateCity = (id: number, name: string) => {
    setCities(cities.map((city) => (city.id === id ? { ...city, name } : city)))
  }

const handleSubmit = async () => {
    const filledCities = cities.filter((c) => c.name.trim() !== "")
    if (filledCities.length === 0 || !days || !fullName || !email) {
      setError("Please fill in at least one city, number of days, your name, and email.")
      return
    }

setIsSubmitting(true)
    setError("")

try {
      const res = await fetch("/api/custom-trip", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          cities: filledCities.map((c) => c.name),
          days,
          fullName,
          email,
          phone,
        }),
      })

if (res.ok) {
        setIsSubmitted(true)
      } else {
        setError("Something went wrong. Please try again.")
      }
    } catch {
      setError("Something went wrong. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

const handleReset = () => {
    setCities([{ id: 1, name: "" }])
    setDays("")
    setFullName("")
    setEmail("")
    setPhone("")
    setIsSubmitted(false)
    setError("")
  }

if (isSubmitted) {
    return (
      <section id="custom-trip" className="py-24 bg-secondary">
        <div className="container mx-auto px-6">
          <div className="max-w-2xl mx-auto text-center">
            <CheckCircle className="mx-auto mb-6 text-primary" size={64} />
            <h2 className="font-serif text-4xl md:text-5xl font-bold mb-4 text-foreground">Request Sent</h2>
            <p className="text-muted-foreground mb-8">
              We have received your custom trip request. Our team will review your itinerary and get back to you shortly.
            </p>
            <Button
              onClick={handleReset}
              className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-full px-8 py-3"
            >
              Build Another Trip
            </Button>
          </div>
        </div>
      </section>
    )
  }

return (
    <section id="custom-trip" className="py-24 bg-secondary">
      <div className="container mx-auto px-6">
        <h2 className="font-serif text-5xl md:text-6xl font-bold text-center mb-6 text-foreground">
          Build Your Own Trip.
        </h2>
        <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
          Design your perfect adventure. Add the cities you want to visit, choose how many days, and we will craft a
          bespoke itinerary just for you.
        </p>

<div className="max-w-3xl mx-auto">
          <div className="bg-background rounded-2xl p-8 shadow-lg border border-border">
            {/* Cities */}
            <div className="mb-8">
              <label className="flex items-center gap-2 text-foreground font-semibold mb-4">
                <MapPin size={20} className="text-primary" />
                Cities You Want to Visit
              </label>
              <div className="flex flex-col gap-3">
                {cities.map((city, index) => (
                  <div key={city.id} className="flex items-center gap-3">
                    <span className="text-sm text-muted-foreground font-mono w-6 shrink-0">{index + 1}.</span>
                    <Input
                      value={city.name}
                      onChange={(e) => updateCity(city.id, e.target.value)}
                      placeholder="Enter a city name"
                      className="flex-1 rounded-lg border-border focus:border-primary"
                    />
                    {cities.length > 1 && (
                      <button
                        onClick={() => removeCity(city.id)}
                        className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
                        aria-label="Remove city"
                      >
                        <X size={18} />
                      </button>
                    )}
                  </div>
                ))}
              </div>
              <button
                onClick={addCity}
                className="mt-3 flex items-center gap-2 text-primary hover:text-primary/80 transition-colors text-sm font-medium"
              >
                <Plus size={16} />
                Add Another City
              </button>
            </div>

{/* Number of Days */}
            <div className="mb-8">
              <label className="flex items-center gap-2 text-foreground font-semibold mb-4">
                <Calendar size={20} className="text-primary" />
                Number of Days
              </label>
              <Input
                type="number"
                min="1"
                value={days}
                onChange={(e) => setDays(e.target.value)}
                placeholder="How many days for your trip?"
                className="rounded-lg border-border focus:border-primary max-w-xs"
              />
            </div>

{/* Contact Details */}
            <div className="mb-8">
              <h3 className="text-foreground font-semibold mb-4">Your Details</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                    <User size={14} />
                    Full Name *
                  </label>
                  <Input
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    placeholder="Your full name"
                    className="rounded-lg border-border focus:border-primary"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                    <Mail size={14} />
                    Email *
                  </label>
                  <Input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Your email address"
                    className="rounded-lg border-border focus:border-primary"
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                    <Phone size={14} />
                    Phone (optional)
                  </label>
                  <Input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="Your phone number"
                    className="rounded-lg border-border focus:border-primary max-w-xs"
                  />
                </div>
              </div>
            </div>

{error && <p className="text-destructive text-sm mb-4">{error}</p>}

{/* Preview */}
            {cities.some((c) => c.name.trim() !== "") && (
              <div className="mb-8 p-4 bg-secondary rounded-xl">
                <p className="text-sm font-semibold text-foreground mb-2">Your Trip Preview:</p>
                <p className="text-sm text-muted-foreground">
                  {cities
                    .filter((c) => c.name.trim() !== "")
                    .map((c) => c.name)
                    .join(" → ")}
                  {days ? ` | ${days} days` : ""}
                </p>
              </div>
            )}

{/* Submit */}
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting}
              className="w-full bg-primary text-primary-foreground hover:bg-primary/90 rounded-full py-6 text-lg font-semibold"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 animate-spin" size={20} />
                  Sending Request...
                </>
              ) : (
                <>
                  <Send className="mr-2" size={20} />
                  Send Custom Trip Request
                </>
              )}
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="app/api/custom-trip/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { Resend } from "resend"

const resend = new Resend(process.env.RESEND_API_KEY)

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { cities, days, fullName, email, phone } = body

const cityList = cities.map((city: string, i: number) => `<li>${i + 1}. ${city}</li>`).join("")

await resend.emails.send({
      from: "Lovat Tours <noreply@lovat.net>",
      to: "admin@lovat.net",
      subject: `Custom Trip Request from ${fullName}`,
      html: `
        <h2>New Custom Trip Request</h2>
        <h3>Trip Details:</h3>
        <p><strong>Cities:</strong></p>
        <ol>${cityList}</ol>
        <p><strong>Route:</strong> ${cities.join(" → ")}</p>
        <p><strong>Number of Days:</strong> ${days}</p>
        <h3>Customer Details:</h3>
        <ul>
          <li><strong>Full Name:</strong> ${fullName}</li>
          <li><strong>Email:</strong> ${email}</li>
          <li><strong>Phone:</strong> ${phone || "Not provided"}</li>
        </ul>
        <p>Please follow up with this customer to discuss their custom trip.</p>
      `,
    })

return NextResponse.json({ success: true, message: "Custom trip request submitted successfully" })
  } catch (error) {
    console.error("Error processing custom trip request:", error)
    return NextResponse.json({ success: false, message: "Failed to process request" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/header.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"

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

const navLinks = [
    { name: "Home", href: "#home" },
    { name: "Tours", href: "#tours" },
    { name: "Custom Trip", href: "#custom-trip" },
    { name: "Gallery", href: "#gallery" },
    { name: "Contact Us", href: "#contact" },
  ]

return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/90 backdrop-blur-md border-b border-border">
      <div className="container mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="text-2xl font-serif font-bold text-primary">
            Lovat Tours
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                className="text-foreground/80 hover:text-primary transition-colors font-medium"
              >
                {link.name}
              </Link>
            ))}
          </nav>

{/* Mobile Menu Button */}
          <button
            className="md:hidden text-foreground"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            aria-label="Toggle menu"
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

{/* Mobile Navigation */}
        {isMenuOpen && (
          <nav className="md:hidden pt-4 pb-2 flex flex-col gap-4">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                className="text-foreground/80 hover:text-primary transition-colors font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                {link.name}
              </Link>
            ))}
          </nav>
        )}
      </div>
    </header>
  )
}</article></body></html>