[V0_FILE]jpg:file="public/images/hero-himachal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/hero-himachal-QEnsPUbUQ9bJnzX7TjN3T9pKKb7VVa.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/dhauladhar-range.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/dhauladhar-range-egtC5ZPWqhPoZF1nRqC3H4tRDqOFA4.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/shimla-ridge.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/shimla-ridge-QI7hiuIlNQqGYvnDO7zBAE6tbVeAjy.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/spiti-valley.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/spiti-valley-hsV0tNJq1K8yYzZV27ebdgFsav18xq.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", "framer-motion": "12.30.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]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Green Peak Expedition - Himachal Pradesh Tours & Adventure Packages', description: 'Green Peak Expedition offers premium adventure tours, trekking, and cultural experiences in Himachal Pradesh. Explore Manali, Shimla, and Spiti Valley with expert guides.', keywords: 'Green Peak Expedition, Himachal Pradesh tours, adventure travel, trekking, Manali, Shimla, Spiti Valley', 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/hero.tsx" isMerged="true" 'use client'; import Image from 'next/image'; interface HeroProps { onExplore: () => void; onBook: () => void; } export default function Hero({ onExplore, onBook }: HeroProps) { return (

Snow-capped mountains in Manali Himachal Pradesh

Discover Himachal's Himalayan Magic

Experience breathtaking landscapes, rich culture, and unforgettable adventures in India's mountain paradise

); } [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" export default function About() { const highlights = [ { icon: '🏔️', title: 'Mountain Adventures', description: 'Trek through pristine Himalayan trails and witness snow-capped peaks that touch the sky', }, { icon: '🏛️', title: 'Rich Culture', description: 'Explore ancient temples, monasteries, and immerse yourself in vibrant local traditions', }, { icon: '🌿', title: 'Natural Serenity', description: 'Find peace in lush valleys, crystalline rivers, and untouched wilderness at every turn', }, ]; return (

Why Himachal Pradesh?

15+ top destinations offering diverse experiences for every traveler

{highlights.map((highlight, index) => (

{highlight.icon}

{highlight.title}

{highlight.description}

))}

15+

Top Destinations

5000+

Happy Travelers

365

Days of Adventure

); } [V0_FILE]typescriptreact:file="components/gallery.tsx" isMerged="true" 'use client'; import { useState } from 'react'; import Image from 'next/image'; export default function Gallery() { const [selectedImage, setSelectedImage] = useState(null); const images = [ { src: '/images/hero-himachal.jpg', alt: 'Snow-capped mountains in Manali Himachal Pradesh', title: 'Manali Snow Peaks', }, { src: '/images/dhauladhar-range.jpg', alt: 'Dhauladhar range peaks with Parvati Valley forests', title: 'Dhauladhar Range', }, { src: '/images/shimla-ridge.jpg', alt: 'Shimla colonial architecture ridge with pine trees', title: 'Shimla Ridge', }, { src: '/images/spiti-valley.jpg', alt: 'Spiti Valley barren moonscape with ancient monastery', title: 'Spiti Valley', }, ]; return (

Gallery

Experience the beauty of Himachal Pradesh

{images.map((image, index) => (

setSelectedImage(image.src)} > {image.alt}

{image.title}

))}

{/* Lightbox Modal */} {selectedImage && (

setSelectedImage(null)} >

)}

); } [V0_FILE]typescriptreact:file="components/itinerary.tsx" isMerged="true" interface ItineraryProps { id: string; } export default function Itinerary({ id }: ItineraryProps) { const itinerary = [ { day: 1, location: 'Shimla', activities: 'Arrive in Shimla, explore Ridge, visit Lakkar Bazaar', meals: 'Breakfast, Lunch, Dinner', }, { day: 2, location: 'Shimla - Kufri', activities: 'Kufri adventure park, horse riding, toy train experience', meals: 'Breakfast, Lunch, Dinner', }, { day: 3, location: 'Manali', activities: 'Drive to Manali, explore Mall Road, sunset at Old Manali', meals: 'Breakfast, Lunch, Dinner', }, { day: 4, location: 'Manali Adventures', activities: 'Rohtang Pass, Solang Valley, paragliding, adventure sports', meals: 'Breakfast, Lunch, Dinner', }, { day: 5, location: 'Manali Departure', activities: 'Local market shopping, last-minute sightseeing, departure', meals: 'Breakfast, Lunch', }, ]; return (

5-Day Sample Itinerary

Best places to visit in Himachal Pradesh 2026

{itinerary.map((item, index) => ( ))}

Day	Location	Activities	Meals
Day {item.day}	{item.location}	{item.activities}	{item.meals}

What's Included

✓ Accommodation in 4-5 star hotels
✓ All meals (breakfast, lunch, dinner)
✓ Professional tour guide and vehicle
✓ All adventure activities and entry fees
✓ Travel insurance and emergency support
✓ Airport transfers and sightseeing

); } [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" 'use client'; import React from "react" import { useState } from 'react'; interface ContactProps { id: string; showForm: boolean; } export default function Contact({ id, showForm }: ContactProps) { const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '', dates: '', message: '', }); const [submitted, setSubmitted] = useState(false); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); setSubmitted(true); setFormData({ firstName: '', lastName: '', email: '', dates: '', message: '', }); setTimeout(() => setSubmitted(false), 4000); }; return (

Ready to Explore?

Get in touch and let's plan your perfect Himachal adventure

{/* Contact Info */}

Contact Information

Address

Rampur Bushahr, near BSNL office
Teh. Rampur Bushahr
District Shimla, Himachal Pradesh

Phone

+91 9459180333
+91 9805230180

Email

greenpeakexpedition986@gmail.com

📱 👍 💬

{/* Contact Form */}

Send us a Message

{submitted ? (

Thank you!

Your inquiry has been received. We'll get back to you soon.

) : (

<button
                  type="submit"
                  className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105"
                >
                  Send Message
                </button>
              </form>
            )}
          </div>
        </div>

{/* Map Section */}
        <div className="mt-16">
          <h3 className="text-2xl font-semibold mb-6">Find Us on Map</h3>
          <div className="w-full h-96 bg-border rounded-lg overflow-hidden">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3436.389!2d77.4386!3d31.4158!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390a1b1b1b1b1b1b%3A0x5f5f5f5f5f5f5f5f!2sRampur%20Bushahr%2C%20Shimla!5e0!3m2!1sen!2sin!4v1234567890"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/social-proof.tsx" isMerged="true"
'use client';

import { useEffect, useState } from 'react';
import { Globe, Users, Award, Star } from 'lucide-react';

export default function SocialProof() {
  const [counts, setCounts] = useState({
    travelers: 0,
    destinations: 0,
    years: 0,
    rating: 0,
  });

const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.5 }
    );

const element = document.getElementById('social-proof');
    if (element) {
      observer.observe(element);
    }

return () => observer.disconnect();
  }, []);

// Counter animation
  useEffect(() => {
    if (!isVisible) return;

const targets = { travelers: 5840, destinations: 12, years: 8, rating: 4.9 };
    const duration = 2000;
    const startTime = Date.now();

const animate = () => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);

setCounts({
        travelers: Math.floor(targets.travelers * progress),
        destinations: Math.floor(targets.destinations * progress),
        years: Math.floor(targets.years * progress),
        rating: (targets.rating * progress).toFixed(1),
      });

if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };

animate();
  }, [isVisible]);

const stats = [
    {
      icon: Users,
      value: `${counts.travelers}+`,
      label: 'Happy Travelers',
      color: 'text-primary',
    },
    {
      icon: Globe,
      value: `${counts.destinations}`,
      label: 'Destinations Covered',
      color: 'text-accent',
    },
    {
      icon: Award,
      value: `${counts.years}+`,
      label: 'Years of Experience',
      color: 'text-primary',
    },
    {
      icon: Star,
      value: `${counts.rating}`,
      label: 'Rating on TripAdvisor',
      color: 'text-accent',
    },
  ];

return (
    <section id="social-proof" className="py-20 bg-primary">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Stats Grid */}
        <div className="grid md:grid-cols-4 gap-8 mb-16">
          {stats.map((stat, index) => {
            const Icon = stat.icon;
            return (
              <div
                key={index}
                className="text-center text-primary-foreground"
              >
                <div className="flex justify-center mb-4">
                  <Icon className={`w-12 h-12 ${stat.color} filter brightness-[2]`} />
                </div>
                <div className="text-4xl font-serif font-bold mb-2">
                  {stat.value}
                </div>
                <div className="text-lg opacity-90">{stat.label}</div>
              </div>
            );
          })}
        </div>

{/* Trust Section */}
        <div className="bg-primary-foreground/10 rounded-lg p-8 md:p-12 border border-primary-foreground/20">
          <h3 className="text-3xl font-serif font-bold text-primary-foreground mb-6 text-center">
            Trusted by Travelers Worldwide
          </h3>

<div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: 'Certified Tour Operator',
                description: 'Government-approved and registered tourism provider with full compliance to safety standards.',
              },
              {
                title: 'Award-Winning Service',
                description: 'Recognized by India Tourism Awards for excellence in service delivery and unique experiences.',
              },
              {
                title: '24/7 Customer Support',
                description: 'Dedicated support team available round the clock to assist with all your travel needs.',
              },
            ].map((trust, index) => (
              <div key={index} className="text-center text-primary-foreground">
                <div className="mb-3">
                  <Award className="w-8 h-8 mx-auto" />
                </div>
                <h4 className="font-bold text-lg mb-2">{trust.title}</h4>
                <p className="text-sm opacity-90">{trust.description}</p>
              </div>
            ))}
          </div>
        </div>

{/* Social Media Preview */}
        <div className="mt-12">
          <h3 className="text-2xl font-serif font-bold text-primary-foreground text-center mb-8">
            Follow Our Adventures
          </h3>
          <div className="grid md:grid-cols-2 gap-6">
            {[
              { platform: 'Instagram', handle: '@himachal_adventures', followers: '45K followers' },
              { platform: 'YouTube', handle: '@HimachalTravelDiary', followers: '120K subscribers' },
            ].map((social, index) => (
              <a
                key={index}
                href="#"
                className="bg-primary-foreground/10 hover:bg-primary-foreground/20 border border-primary-foreground/20 rounded-lg p-6 text-center transition-colors text-primary-foreground"
              >
                <h4 className="font-bold text-lg mb-2">{social.platform}</h4>
                <p className="text-sm opacity-90">{social.handle}</p>
                <p className="text-xs opacity-75 mt-2">{social.followers}</p>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/photo-slideshow.tsx" isMerged="true"
'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';

export default function PhotoSlideshow() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [autoPlay, setAutoPlay] = useState(true);

const stories = [
    {
      image: '/images/hero-himachal.jpg',
      title: 'Sunrise at Manali Peak',
      description: 'Watch the golden sunrise paint the snow-capped peaks in shades of amber and rose. A moment of pure serenity.',
      tag: 'Adventure',
    },
    {
      image: '/images/dhauladhar-range.jpg',
      title: 'Trekking Through Parvati Valley',
      description: 'Navigate through misty pine forests and crystal rivers. Every step reveals new wonders of nature.',
      tag: 'Trekking',
    },
    {
      image: '/images/shimla-ridge.jpg',
      title: 'Colonial Charm of Shimla',
      description: 'Stroll through historic streets lined with heritage buildings. History meets modernity in this enchanting hill station.',
      tag: 'Culture',
    },
    {
      image: '/images/spiti-valley.jpg',
      title: 'Spiti\'s Mystical Landscape',
      description: 'Discover ancient monasteries perched on barren moonscapes. A spiritual journey through time.',
      tag: 'Spiritual',
    },
  ];

useEffect(() => {
    if (!autoPlay) return;
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % stories.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [autoPlay, stories.length]);

const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 1) % stories.length);
    setAutoPlay(false);
  };

const prevSlide = () => {
    setCurrentIndex((prev) => (prev - 1 + stories.length) % stories.length);
    setAutoPlay(false);
  };

return (
    <section id="stories" className="py-20 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-serif font-bold mb-4">Featured Stories</h2>
          <p className="text-xl text-muted-foreground">Discover real moments from our travelers</p>
        </div>

<div className="relative h-96 md:h-[500px] rounded-xl overflow-hidden shadow-2xl">
          {/* Images */}
          {stories.map((story, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-opacity duration-1000 ${
                index === currentIndex ? 'opacity-100' : 'opacity-0'
              }`}
            >
              <Image
                src={story.image || "/placeholder.svg"}
                alt={story.title}
                fill
                className="object-cover"
                priority={index === currentIndex}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
            </div>
          ))}

{/* Content Overlay */}
          <div className="absolute inset-0 flex items-end p-6 md:p-10">
            <div className="text-white w-full">
              <div className="inline-block bg-accent text-white px-4 py-1 rounded-full text-sm font-semibold mb-3">
                {stories[currentIndex].tag}
              </div>
              <h3 className="text-3xl md:text-4xl font-serif font-bold mb-2">
                {stories[currentIndex].title}
              </h3>
              <p className="text-lg md:text-xl text-gray-100 max-w-2xl">
                {stories[currentIndex].description}
              </p>
            </div>
          </div>

{/* Navigation Buttons */}
          <button
            onClick={prevSlide}
            className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white rounded-full w-12 h-12 flex items-center justify-center transition-colors z-10"
            aria-label="Previous story"
          >
            ‹
          </button>
          <button
            onClick={nextSlide}
            className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 text-white rounded-full w-12 h-12 flex items-center justify-center transition-colors z-10"
            aria-label="Next story"
          >
            ›
          </button>

{/* Dots Indicator */}
          <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-10">
            {stories.map((_, index) => (
              <button
                key={index}
                onClick={() => {
                  setCurrentIndex(index);
                  setAutoPlay(false);
                }}
                className={`w-3 h-3 rounded-full transition-all ${
                  index === currentIndex
                    ? 'bg-white w-8'
                    : 'bg-white/50 hover:bg-white/75'
                }`}
                aria-label={`Go to story ${index + 1}`}
              />
            ))}
          </div>
        </div>

{/* Auto-play toggle */}
        <div className="flex justify-center mt-8">
          <button
            onClick={() => setAutoPlay(!autoPlay)}
            className="px-6 py-2 bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors"
          >
            {autoPlay ? '⏸ Pause' : '▶ Play'}
          </button>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/destination-cards.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import { ChevronDown } from 'lucide-react';

export default function DestinationCards() {
  const [expandedCard, setExpandedCard] = useState<number | null>(null);

const destinations = [
    {
      name: 'Manali',
      subtitle: 'Adventure Capital',
      weather: '5-25°C',
      season: 'April - October',
      activities: ['Paragliding', 'Trekking', 'River Rafting', 'Mountain Biking'],
      bestFor: 'Adventure enthusiasts, photographers',
      altitude: '2050 m',
      highlight: 'Stunning Himalayan views and adventure sports',
    },
    {
      name: 'Shimla',
      subtitle: 'Colonial Charm',
      weather: '2-20°C',
      season: 'May - October',
      activities: ['Heritage Walks', 'Shopping', 'Dining', 'Nature Trails'],
      bestFor: 'History lovers, couples, families',
      altitude: '2205 m',
      highlight: 'Historical colonial architecture and vibrant culture',
    },
    {
      name: 'Spiti Valley',
      subtitle: 'Mystical Landscape',
      weather: '-15-10°C',
      season: 'June - September',
      activities: ['Monastery Tours', 'High-altitude Trekking', 'Photography', 'Camping'],
      bestFor: 'Spiritual seekers, trekkers, photographers',
      altitude: '3600 m',
      highlight: 'Ancient monasteries and moonscape terrain',
    },
    {
      name: 'Palampur',
      subtitle: 'Tea Gardens Paradise',
      weather: '8-28°C',
      season: 'March - November',
      activities: ['Tea Estate Tours', 'Hiking', 'Fishing', 'Paragliding'],
      bestFor: 'Relaxation lovers, adventure seekers',
      altitude: '1457 m',
      highlight: 'Lush green tea gardens and scenic beauty',
    },
  ];

return (
    <section id="destinations" className="py-20 bg-secondary">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-serif font-bold mb-4">Top Destinations</h2>
          <p className="text-xl text-muted-foreground">Click to expand and discover more about each location</p>
        </div>

<div className="grid md:grid-cols-2 gap-6">
          {destinations.map((dest, index) => (
            <div
              key={index}
              className="bg-card rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"
            >
              <button
                onClick={() =>
                  setExpandedCard(expandedCard === index ? null : index)
                }
                className="w-full text-left p-6 hover:bg-muted/50 transition-colors"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h3 className="text-2xl font-serif font-bold text-foreground">
                      {dest.name}
                    </h3>
                    <p className="text-accent font-semibold">{dest.subtitle}</p>
                  </div>
                  <ChevronDown
                    className={`w-6 h-6 text-primary transition-transform duration-300 ${
                      expandedCard === index ? 'rotate-180' : ''
                    }`}
                  />
                </div>

<div className="mt-4 grid grid-cols-3 gap-4">
                  <div className="text-sm">
                    <p className="text-muted-foreground font-semibold">Temperature</p>
                    <p className="font-bold">{dest.weather}</p>
                  </div>
                  <div className="text-sm">
                    <p className="text-muted-foreground font-semibold">Best Season</p>
                    <p className="font-bold">{dest.season}</p>
                  </div>
                  <div className="text-sm">
                    <p className="text-muted-foreground font-semibold">Altitude</p>
                    <p className="font-bold">{dest.altitude}</p>
                  </div>
                </div>
              </button>

{/* Expanded Content */}
              {expandedCard === index && (
                <div className="border-t border-border px-6 py-4 bg-muted/20 animate-in fade-in slide-in-from-top-2">
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold text-primary mb-2">Activities</h4>
                      <div className="flex flex-wrap gap-2">
                        {dest.activities.map((activity, i) => (
                          <span
                            key={i}
                            className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
                          >
                            {activity}
                          </span>
                        ))}
                      </div>
                    </div>

<div>
                      <h4 className="font-semibold text-primary mb-1">Best For</h4>
                      <p className="text-foreground">{dest.bestFor}</p>
                    </div>

<div>
                      <h4 className="font-semibold text-primary mb-1">Why Visit</h4>
                      <p className="text-foreground">{dest.highlight}</p>
                    </div>

<button className="w-full mt-4 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-semibold">
                      Learn More
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: #E8E2DB;
  --foreground: #1A3263;
  --card: #ffffff;
  --card-foreground: #1A3263;
  --popover: #ffffff;
  --popover-foreground: #1A3263;
  --primary: #1A3263;
  --primary-foreground: #E8E2DB;
  --secondary: #547792;
  --secondary-foreground: #ffffff;
  --muted: #B0A5A0;
  --muted-foreground: #547792;
  --accent: #FAB95B;
  --accent-foreground: #1A3263;
  --destructive: #ff5555;
  --destructive-foreground: #ffffff;
  --border: #D4CCC1;
  --input: #ffffff;
  --ring: #1A3263;
  --chart-1: oklch(0.646 0.222 41.116);
  --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.625rem;
  --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: #1A3263;
  --foreground: #E8E2DB;
  --card: #2A4A7A;
  --card-foreground: #E8E2DB;
  --popover: #2A4A7A;
  --popover-foreground: #E8E2DB;
  --primary: #E8E2DB;
  --primary-foreground: #1A3263;
  --secondary: #547792;
  --secondary-foreground: #E8E2DB;
  --muted: #3A5A8A;
  --muted-foreground: #C4BAB0;
  --accent: #FAB95B;
  --accent-foreground: #1A3263;
  --destructive: #ff5555;
  --destructive-foreground: #ffffff;
  --border: #3A5A8A;
  --input: #2A4A7A;
  --ring: #FAB95B;
  --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: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono 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;
  }
}
[V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import { Star, ChevronLeft, ChevronRight } from 'lucide-react';

export default function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0);

const reviews = [
    {
      name: 'Sarah Johnson',
      location: 'New York, USA',
      rating: 5,
      quote: 'An absolutely magical experience! The pristine mountains, warm hospitality, and perfectly planned itinerary made this the best trip of my life.',
      image: '👩‍🦰',
      tripType: 'Manali Adventure Tour',
    },
    {
      name: 'Rajesh Kumar',
      location: 'Delhi, India',
      rating: 5,
      quote: 'The cultural richness of Himachal Pradesh is unmatched. Our guide was knowledgeable, friendly, and truly passionate about sharing local stories.',
      image: '👨‍💼',
      tripType: 'Cultural Heritage Tour',
    },
    {
      name: 'Emma Davis',
      location: 'London, UK',
      rating: 5,
      quote: 'From trekking to Spiti Valley to exploring Shimla\'s colonial architecture, every moment was unforgettable. Highly recommended!',
      image: '👩',
      tripType: 'Spiti Valley Trek',
    },
    {
      name: 'Priya Sharma',
      location: 'Mumbai, India',
      rating: 5,
      quote: 'Best family vacation ever! The team took excellent care of us, accommodations were great, and the scenery was breathtaking.',
      image: '👩‍🦱',
      tripType: 'Family Wellness Retreat',
    },
  ];

const nextReview = () => {
    setCurrentIndex((prev) => (prev + 1) % reviews.length);
  };

const prevReview = () => {
    setCurrentIndex((prev) => (prev - 1 + reviews.length) % reviews.length);
  };

return (
    <section id="testimonials" className="py-12 bg-background">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-8">
          <h2 className="text-3xl md:text-4xl font-serif font-bold mb-2">Traveler Reviews</h2>
          <p className="text-sm md:text-base text-muted-foreground">Real stories from our amazing adventurers</p>
        </div>

<div className="relative">
          {/* Carousel */}
          <div className="overflow-hidden">
            <div className="flex transition-transform duration-500" style={{
              transform: `translateX(-${currentIndex * 100}%)`
            }}>
              {reviews.map((review, index) => (
                <div
                  key={index}
                  className="w-full flex-shrink-0 px-4 md:px-8"
                >
                  <div className="bg-card rounded-lg p-5 md:p-7 shadow-lg text-center max-w-xl mx-auto">
                    {/* Avatar */}
                    <div className="text-5xl mb-3">{review.image}</div>

{/* Stars */}
                    <div className="flex justify-center gap-1 mb-3">
                      {Array.from({ length: review.rating }).map((_, i) => (
                        <Star
                          key={i}
                          className="w-4 h-4 fill-accent text-accent"
                        />
                      ))}
                    </div>

{/* Quote */}
                    <blockquote className="text-sm md:text-base text-foreground mb-4 italic">
                      "{review.quote}"
                    </blockquote>

{/* Author Info */}
                    <div className="border-t border-border pt-3">
                      <h3 className="text-base font-serif font-bold text-foreground">
                        {review.name}
                      </h3>
                      <p className="text-muted-foreground text-xs">{review.location}</p>
                      <p className="text-primary font-semibold text-xs mt-1">
                        {review.tripType}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Navigation Buttons */}
          <button
            onClick={prevReview}
            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-primary hover:bg-primary/90 text-primary-foreground rounded-full w-10 h-10 flex items-center justify-center transition-colors shadow-lg"
            aria-label="Previous review"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button
            onClick={nextReview}
            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-primary hover:bg-primary/90 text-primary-foreground rounded-full w-10 h-10 flex items-center justify-center transition-colors shadow-lg"
            aria-label="Next review"
          >
            <ChevronRight className="w-5 h-5" />
          </button>

{/* Dots */}
          <div className="flex justify-center gap-2 mt-6">
            {reviews.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentIndex(index)}
                className={`w-3 h-3 rounded-full transition-all ${
                  index === currentIndex
                    ? 'bg-primary w-8'
                    : 'bg-muted-foreground hover:bg-accent'
                }`}
                aria-label={`Go to review ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/hero-search.tsx" isMerged="true"
'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';

export default function HeroSEO() {
  return (
    <section
      className="relative min-h-screen flex items-center justify-center overflow-hidden"
      aria-label="Travel destinations hero section"
    >
      {/* Background Image */}
      <Image
        src="/images/hero-himachal.jpg"
        alt="Scenic Himalayan mountain travel destination"
        fill
        priority
        className="object-cover"
      />

{/* Overlay */}
      <div className="absolute inset-0 bg-black/50" />

{/* Content */}
      <div className="relative z-10 max-w-4xl px-6 text-center">
        {/* Animated Heading */}
        <motion.h1
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: 'easeOut' }}
          className="text-white font-extrabold text-4xl sm:text-5xl md:text-6xl leading-tight text-balance"
        >
          Discover Unforgettable Travel Experiences
        </motion.h1>

{/* Animated Subtitle */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.8 }}
          className="mt-6 text-lg sm:text-xl text-gray-200 text-balance"
        >
          Explore hand-picked destinations, expert guides, and journeys designed
          for adventure lovers worldwide.
        </motion.p>

{/* Animated CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.8 }}
          className="mt-10 flex justify-center"
        >
          <a
            href="/destinations"
            className="inline-flex items-center justify-center rounded-xl bg-primary px-8 py-4 text-base font-semibold text-primary-foreground hover:bg-primary/90 transition-colors"
            aria-label="Explore travel destinations"
          >
            Explore Destinations
          </a>
        </motion.div>
      </div>
    </section>
  );
}
[V0_FILE]typescript:file="data/packages.ts" isMerged="true"
export interface TourPackage {
  id: number;
  title: string;
  location: string;
  image: string;
  duration: string;
  price: number;
  oldPrice?: number;
  category: 'kashmir' | 'ladakh' | 'spiti' | 'himachal';
  badge?: string;
  highlights: string;
  trending?: boolean;
}

export const packages: TourPackage[] = [
  {
    id: 1,
    title: "World's Highest Krishna Temple Trek",
    location: "Kinnaur, Himachal Pradesh",
    image: "/images/hero-himachal.jpg",
    duration: "2 Nights / 3 Days",
    price: 4500,
    oldPrice: 5500,
    category: "himachal",
    badge: "New",
    highlights: "High-altitude temple, alpine lake, spiritual trek",
    trending: true,
  },
  {
    id: 2,
    title: "All Himachal Adventure Tour",
    location: "Himachal Pradesh",
    image: "/images/shimla-ridge.jpg",
    duration: "7 Nights / 8 Days",
    price: 28999,
    oldPrice: 34999,
    category: "himachal",
    badge: "Best Seller",
    highlights: "Shimla, Manali, valleys & mountain treks",
    trending: true,
  },
  {
    id: 3,
    title: "Dharamshala Dalhousie Escape",
    location: "Himachal Pradesh",
    image: "/images/spiti-valley.jpg",
    duration: "5 Nights / 6 Days",
    price: 18999,
    oldPrice: 21999,
    category: "himachal",
    badge: "Trending",
    highlights: "Monasteries, tea gardens, colonial hills",
  },
  {
    id: 4,
    title: "Kullu Manali Kasol Tour",
    location: "Himachal Pradesh",
    image: "/images/dhauladhar-range.jpg",
    duration: "6 Nights / 7 Days",
    price: 20499,
    oldPrice: 22999,
    category: "himachal",
    badge: "Hot Deal",
    highlights: "Snow valleys, rivers, café culture",
  },
  {
    id: 5,
    title: "Gulmarg Snow Escape",
    location: "Gulmarg, Kashmir",
    image: "/images/hero-himachal.jpg",
    duration: "4 Nights / 5 Days",
    price: 28499,
    oldPrice: 31999,
    category: "kashmir",
    badge: "Winter Special",
    highlights: "Snow activities, ski slopes, adventure",
    trending: true,
  },
  {
    id: 6,
    title: "Kashmir Valley Paradise",
    location: "Srinagar & Pahalgam",
    image: "/images/shimla-ridge.jpg",
    duration: "5 Nights / 6 Days",
    price: 24999,
    oldPrice: 28999,
    category: "kashmir",
    highlights: "Houseboats, gardens, romantic valleys",
  },
  {
    id: 7,
    title: "Winter Spiti 4x4 Expedition",
    location: "Spiti Valley",
    image: "/images/spiti-valley.jpg",
    duration: "8 Nights / 9 Days",
    price: 22999,
    oldPrice: 25999,
    category: "spiti",
    badge: "Adventure",
    highlights: "Frozen lakes, monasteries, extreme terrain",
  },
  {
    id: 8,
    title: "Ladakh Leh Thrill",
    location: "Leh & Ladakh",
    image: "/images/dhauladhar-range.jpg",
    duration: "7 Nights / 8 Days",
    price: 32999,
    oldPrice: 37999,
    category: "ladakh",
    badge: "Popular",
    highlights: "High passes, monasteries, culture",
  },
];
[V0_FILE]typescriptreact:file="app/tours/page.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Image from 'next/image';
import Navigation from '@/components/navigation';
import PackageCardComp from '@/components/package-card-comp';
import Footer from '@/components/footer';
import { packages } from '@/data/packages';
import { Filter, ChevronDown } from 'lucide-react';

const categories = [
  { id: 'all', label: 'All Tours', count: 8 },
  { id: 'himachal', label: 'Himachal', count: 4 },
  { id: 'kashmir', label: 'Kashmir', count: 2 },
  { id: 'spiti', label: 'Spiti Valley', count: 1 },
  { id: 'ladakh', label: 'Ladakh', count: 1 },
];

export default function ToursPage() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [sortBy, setSortBy] = useState('trending');

const filteredPackages =
    activeCategory === 'all'
      ? packages
      : packages.filter((pkg) => pkg.category === activeCategory);

const sortedPackages = [...filteredPackages].sort((a, b) => {
    if (sortBy === 'trending') {
      return (b.trending ? 1 : 0) - (a.trending ? 1 : 0);
    }
    if (sortBy === 'price-low') return a.price - b.price;
    if (sortBy === 'price-high') return b.price - a.price;
    return 0;
  });

// Trending packages
  const trendingPackages = packages.filter((pkg) => pkg.trending);

return (
    <>
      <Navigation onNavigate={() => {}} />
      <main className="min-h-screen bg-background">
      {/* Hero Section */}
      <section className="relative py-12 md:py-16 bg-background border-b border-border">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
            Tours & Packages
          </h1>
          <p className="text-lg text-muted-foreground">
            Discover curated Himalayan adventures tailored for you
          </p>
        </div>
      </section>

{/* Trending Section */}
        <section className="max-w-7xl mx-auto px-4 py-12">
          <div className="mb-8">
            <h2 className="text-3xl font-bold text-foreground mb-2">
              🔥 Trending This Season
            </h2>
            <p className="text-gray-600">Most popular tours right now</p>
          </div>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {trendingPackages.map((pkg) => (
              <PackageCardComp key={pkg.id} pkg={pkg} />
            ))}
          </div>
        </section>

{/* Divider */}
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
        </div>

{/* Category Tabs */}
        <section className="max-w-7xl mx-auto px-4 py-8">
          <div className="flex overflow-x-auto gap-3 pb-4 -mx-4 px-4">
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setActiveCategory(cat.id)}
            className={`px-6 py-3 rounded-full whitespace-nowrap font-semibold transition-all ${
                activeCategory === cat.id
                  ? 'bg-primary text-primary-foreground shadow-lg'
                  : 'bg-white text-foreground border-2 border-border hover:border-primary'
              }`}
              >
                {cat.label}
                <span className="ml-2 text-sm opacity-75">({cat.count})</span>
              </button>
            ))}
          </div>
        </section>

{/* Filters & Sorting */}
        <section className="max-w-7xl mx-auto px-4 py-6 flex flex-col md:flex-row gap-4 items-center justify-between">
          <div className="flex items-center gap-2 text-gray-600">
            <Filter size={20} />
            <span className="font-semibold">
              Showing {sortedPackages.length} tours
            </span>
          </div>

<div className="flex items-center gap-2">
            <label className="font-semibold text-foreground">Sort by:</label>
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
            className="px-4 py-2 rounded-lg border-2 border-border outline-none cursor-pointer hover:border-primary"
          >
              <option value="trending">Trending</option>
              <option value="price-low">Price: Low to High</option>
              <option value="price-high">Price: High to Low</option>
            </select>
          </div>
        </section>

{/* Packages Grid */}
        <section className="max-w-7xl mx-auto px-4 pb-16">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {sortedPackages.map((pkg) => (
              <PackageCardComp key={pkg.id} pkg={pkg} />
            ))}
          </div>
        </section>

{/* CTA Section */}
      <section className="bg-gradient-to-r from-primary to-accent py-16 text-primary-foreground">
        <div className="max-w-4xl mx-auto text-center px-4">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Can't Find Your Perfect Tour?
          </h2>
          <p className="text-lg opacity-90 mb-8">
            Our expert team can customize a tour just for you
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="tel:9459180333"
              className="bg-card text-primary px-8 py-4 rounded-xl font-bold hover:shadow-lg transition-all inline-flex items-center justify-center gap-2 shadow-md"
            >
              Call Now
            </a>
            <a
              href="https://wa.me/919459180333"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-accent text-accent-foreground px-8 py-4 rounded-xl font-bold hover:shadow-lg transition-all inline-flex items-center justify-center gap-2 shadow-md"
            >
              WhatsApp
            </a>
          </div>
        </div>
      </section>

{/* FAQ Section */}
        <section className="max-w-4xl mx-auto px-4 py-16">
          <h2 className="text-3xl font-bold text-center mb-12">
            Frequently Asked Questions
          </h2>
          <div className="space-y-4">
            {[
              {
                q: 'What is included in the tour packages?',
                a: 'All packages include accommodation, meals, guided tours, transportation, and activities. Some packages may have optional add-ons.',
              },
              {
                q: 'Can I customize a tour?',
                a: 'Yes! All tours can be customized based on your preferences, budget, and timeline. Contact our team for details.',
              },
              {
                q: 'What is the best time to visit Himachal?',
                a: 'March to October is ideal for most tours. Winter (December-February) is perfect for snow activities.',
              },
              {
                q: 'Do you provide transportation from Delhi?',
                a: 'Yes, we offer pickup and drop-off services from Delhi airport for an additional fee.',
              },
            ].map((item, idx) => (
            <details
              key={idx}
              className="bg-white rounded-lg border-2 border-border p-6 cursor-pointer hover:border-primary transition-colors"
            >
                <summary className="font-bold text-lg flex items-center justify-between cursor-pointer">
                  {item.q}
                  <ChevronDown size={20} className="ml-2" />
                </summary>
                <p className="text-gray-600 mt-4">{item.a}</p>
              </details>
            ))}
          </div>
        </section>

{/* Stats Section */}
      <section className="bg-primary text-primary-foreground py-12">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <div className="text-4xl font-bold mb-2">5000+</div>
              <p className="opacity-90">Happy Travelers</p>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">25+</div>
              <p className="opacity-90">Destinations</p>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">10+</div>
              <p className="opacity-90">Years Experience</p>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">4.9★</div>
              <p className="opacity-90">Avg Rating</p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <Footer />
    </>
  );
}
[V0_FILE]typescriptreact:file="app/tours/loading.tsx" isMerged="true"
export default function Loading() {
  return null;
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return null;
}
[V0_FILE]typescriptreact:file="components/popular-destinations.tsx" isMerged="true"
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';

const destinations = [
  {
    name: 'Shimla',
    location: 'Himachal Pradesh',
    description: 'Colonial charm meets mountain beauty',
    price: 'From ₹9,999',
    image: '/images/shimla-ridge.jpg',
    days: '3 Days',
  },
  {
    name: 'Manali',
    location: 'Himachal Pradesh',
    description: 'Adventure and nature at its finest',
    price: 'From ₹14,999',
    image: '/images/dhauladhar-range.jpg',
    days: '4 Days',
  },
  {
    name: 'Spiti Valley',
    location: 'Himachal Pradesh',
    description: 'Otherworldly landscapes and culture',
    price: 'From ₹22,999',
    image: '/images/spiti-valley.jpg',
    days: '8 Days',
  },
];

export default function PopularDestinations() {
  return (
    <section className="py-12 sm:py-16 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-8 sm:mb-12">
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4">
            Popular Destinations
          </h2>
          <div className="w-16 h-1 bg-primary mx-auto rounded-full" />
        </div>

{/* Destinations Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mb-8 sm:mb-12">
          {destinations.map((dest, idx) => (
            <div
              key={idx}
              className="group rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all"
            >
              {/* Image */}
              <div className="relative h-48 sm:h-56 md:h-64 overflow-hidden">
                <Image
                  src={dest.image || "/placeholder.svg"}
                  alt={dest.name}
                  fill
                  className="object-cover group-hover:scale-110 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />

{/* Days Badge */}
                <span className="absolute top-3 right-3 sm:top-4 sm:right-4 bg-primary text-primary-foreground px-3 sm:px-4 py-1.5 sm:py-2 rounded-full font-semibold text-xs sm:text-sm">
                  {dest.days}
                </span>
              </div>

{/* Content */}
              <div className="bg-card p-4 sm:p-6">
                <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-1">
                  {dest.name}
                </h3>
                <p className="text-xs sm:text-sm text-muted-foreground mb-3">{dest.location}</p>
                <p className="text-sm sm:text-base text-foreground/80 mb-4">{dest.description}</p>

<div className="flex items-center justify-between">
                  <span className="text-lg font-bold text-primary">
                    {dest.price}
                  </span>
                  <Link
                    href="/tours"
                    className="inline-flex items-center gap-2 text-primary font-semibold hover:text-accent transition-colors group/link"
                  >
                    View Details
                    <ArrowRight
                      size={18}
                      className="group-hover/link:translate-x-1 transition-transform"
                    />
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* CTA */}
        <div className="text-center">
          <p className="text-foreground/70 mb-6 text-sm sm:text-base">
            Ready for your next trip? Explore all our amazing packages
          </p>
          <Link
            href="/tours"
            className="inline-block bg-primary text-primary-foreground px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-bold hover:bg-primary/90 transition-colors text-sm sm:text-base"
          >
            Explore All Tours & Packages
          </Link>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="components/quick-contact.tsx" isMerged="true"
'use client';

import Link from 'next/link';
import { Phone, Mail, MapPin, MessageCircle } from 'lucide-react';

export default function QuickContact() {
  return (
    <section className="py-8 sm:py-12 bg-background border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
          {/* Phone */}
          <a
            href="tel:+919459180333"
            className="bg-card rounded-xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all flex sm:flex-col items-center gap-3 sm:gap-4 hover:translate-y-[-2px]"
          >
            <div className="bg-primary/10 rounded-full p-3 flex-shrink-0">
              <Phone className="w-5 sm:w-6 h-5 sm:h-6 text-primary" />
            </div>
            <div className="text-left sm:text-center">
              <p className="text-xs sm:text-sm text-muted-foreground">Call Us</p>
              <p className="font-semibold text-foreground text-sm sm:text-base">+91 9459180333</p>
            </div>
          </a>

{/* WhatsApp */}
          <a
            href="https://wa.me/919459180333"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-card rounded-xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all flex sm:flex-col items-center gap-3 sm:gap-4 hover:translate-y-[-2px]"
          >
            <div className="bg-primary/10 rounded-full p-3 flex-shrink-0">
              <MessageCircle className="w-5 sm:w-6 h-5 sm:h-6 text-primary" />
            </div>
            <div className="text-left sm:text-center">
              <p className="text-xs sm:text-sm text-muted-foreground">WhatsApp</p>
              <p className="font-semibold text-foreground text-sm sm:text-base">Chat with us</p>
            </div>
          </a>

{/* Email */}
          <a
            href="mailto:greenpeakexpedition986@gmail.com"
            className="bg-card rounded-xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all flex sm:flex-col items-center gap-3 sm:gap-4 hover:translate-y-[-2px]"
          >
            <div className="bg-accent/10 rounded-full p-3 flex-shrink-0">
              <Mail className="w-5 sm:w-6 h-5 sm:h-6 text-accent" />
            </div>
            <div className="text-left sm:text-center">
              <p className="text-xs sm:text-sm text-muted-foreground">Email</p>
              <p className="font-semibold text-foreground text-sm sm:text-base truncate">greenpeakexpedition986@gmail.com</p>
            </div>
          </a>

{/* Address */}
          <a
            href="https://maps.google.com/?q=Rampur+Bushahr+Shimla"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-card rounded-xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all flex sm:flex-col items-center gap-3 sm:gap-4 hover:translate-y-[-2px]"
          >
            <div className="bg-primary/10 rounded-full p-3 flex-shrink-0">
              <MapPin className="w-5 sm:w-6 h-5 sm:h-6 text-primary" />
            </div>
            <div className="text-left sm:text-center">
              <p className="text-xs sm:text-sm text-muted-foreground">Visit Us</p>
              <p className="font-semibold text-foreground text-sm sm:text-base">Rampur Bushahr</p>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Navigation from '@/components/navigation';
import HeroSearch from '@/components/hero-search';
import QuickContact from '@/components/quick-contact';
import PopularDestinations from '@/components/popular-destinations';
import DestinationCards from '@/components/destination-cards';
import Testimonials from '@/components/testimonials';
import SocialProof from '@/components/social-proof';
import Contact from '@/components/contact';
import Footer from '@/components/footer';

export default function Home() {
  const [showBookingForm, setShowBookingForm] = useState(false);

const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    element?.scrollIntoView({ behavior: 'smooth' });
  };

const handleExplore = () => {
    scrollToSection('itinerary');
  };

const handleBook = () => {
    setShowBookingForm(true);
    setTimeout(() => {
      document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
    }, 100);
  };

return (
    <main className="min-h-screen bg-background text-foreground">
      <Navigation onNavigate={scrollToSection} />
      <HeroSearch />
      <QuickContact />
      <PopularDestinations />
      <div id="destinations">
        <DestinationCards />
      </div>
      {/* <Testimonials /> */}
      {/* <SocialProof />
      <div id="contact">
        <Contact showForm={showBookingForm} />
      </div> */}
      <Footer />
    </main>
  );
}
[V0_FILE]png:file="public/images/green-peak-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-28%20at%207.26.13%20PM-7cuJepO5AeC0V7BoJ4gpavyO3b9liI.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/tours/layout.tsx" isMerged="true"
import React from "react"
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Tours & Packages - Green Peak Expedition',
  description: 'Browse premium adventure tour packages in Himachal Pradesh, Kashmir, Ladakh, and Spiti Valley. Book your perfect mountain adventure with Green Peak Expedition.',
  keywords: 'adventure tours, trekking packages, Himachal Pradesh tours, Kashmir tours, Ladakh tours, Spiti Valley',
};

export default function ToursLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return children;
}
[V0_FILE]typescriptreact:file="components/package-card-comp.tsx" isMerged="true"
import Image from 'next/image';
import { Phone, MessageCircle, Clock, Sparkles } from 'lucide-react';
import { TourPackage } from '@/data/packages';

export default function PackageCardComp({ pkg }: { pkg: TourPackage }) {
  const discount =
    pkg.oldPrice && Math.round(((pkg.oldPrice - pkg.price) / pkg.oldPrice) * 100);

return (
    <div className="group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all overflow-hidden">
      {/* Image Container */}
      <div className="relative h-56">
        <Image
          src={pkg.image || "/placeholder.svg"}
          alt={pkg.title}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-500"
        />

{/* Badge */}
        {pkg.badge && (
          <span className="absolute top-4 left-4 bg-primary text-primary-foreground text-xs px-3 py-1.5 rounded-full font-semibold">
            {pkg.badge}
          </span>
        )}

{/* Customize Ribbon */}
        <span className="absolute top-4 right-4 bg-accent text-accent-foreground text-xs px-3 py-1.5 rounded-full flex items-center gap-1 font-semibold">
          <Sparkles size={12} /> Customize
        </span>

{/* Discount Badge */}
        {discount && (
          <span className="absolute bottom-4 right-4 bg-destructive text-destructive-foreground text-xs px-3 py-1.5 rounded-lg font-bold">
            Save ₹{Math.round(pkg.oldPrice! - pkg.price)}
          </span>
        )}

{/* Duration */}
        <div className="absolute bottom-4 left-4 bg-white/95 backdrop-blur px-3 py-1.5 rounded-lg flex items-center gap-1.5 text-sm font-semibold text-foreground">
          <Clock size={14} />
          {pkg.duration}
        </div>
      </div>

{/* Content */}
      <div className="p-5">
        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
          {pkg.location}
        </p>
        <h3 className="font-bold text-base leading-snug mt-2 line-clamp-2">
          {pkg.title}
        </h3>

<p className="text-sm text-gray-600 mt-2 line-clamp-2">
          {pkg.highlights}
        </p>

{/* Price */}
        <div className="flex items-end gap-2 mt-4">
          <span className="text-2xl font-bold text-primary">
            ₹{pkg.price.toLocaleString()}
          </span>
          {pkg.oldPrice && (
            <span className="text-xs line-through text-gray-400">
              ₹{pkg.oldPrice.toLocaleString()}
            </span>
          )}
        </div>

{/* CTAs */}
        <div className="flex gap-3 mt-5">
          <a
            href="tel:9459180333"
            className="flex-1 flex items-center justify-center gap-2 bg-primary text-primary-foreground py-2.5 rounded-xl text-sm font-semibold hover:bg-primary/90 transition-colors"
          >
            <Phone size={16} /> Call
          </a>
          <a
            href="https://wa.me/919459180333"
            target="_blank"
            rel="noopener noreferrer"
            className="flex-1 flex items-center justify-center gap-2 bg-accent text-accent-foreground py-2.5 rounded-xl text-sm font-semibold hover:bg-accent/90 transition-colors"
          >
            <MessageCircle size={16} /> WhatsApp
          </a>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]markdown:file="WEBSITE_STRUCTURE.md" isMerged="true"
# Green Peak Expedition Website Structure

## Overview
This is a premium travel and tourism website for Green Peak Expedition, built with Next.js 16, React, and Tailwind CSS. The site features a modern green theme with responsive design and conversion-focused CTAs.

---

## Project Architecture

### Directory Structure
```
/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout with metadata & theme
│   ├── page.tsx                 # Home page
│   ├── globals.css              # Global styles & color tokens
│   ├── loading.tsx              # Home loading state
│   └── tours/                   # Tours & packages section
│       ├── page.tsx             # Tours listing page
│       ├── layout.tsx           # Tours metadata
│       └── loading.tsx          # Tours loading state
│
├── components/                   # Reusable components
│   ├── navigation.tsx           # Header with logo, nav links, CTAs
│   ├── footer.tsx               # Footer with company info & links
│   ├── hero-search.tsx          # Hero with search bar & feature cards
│   ├── quick-contact.tsx        # Quick contact info bar
│   ├── popular-destinations.tsx # Destination cards grid
│   ├── destination-cards.tsx    # Expandable destination cards
│   ├── photo-slideshow.tsx      # Auto-rotating photo slideshow
│   ├── testimonials.tsx         # Traveler reviews carousel
│   ├── social-proof.tsx         # Stats & trust badges
│   ├── contact.tsx              # Contact form & embedded map
│   ├── package-card-comp.tsx    # Package card component
│   └── ui/                      # shadcn/ui components (pre-installed)
│
├── data/                         # Static data & configurations
│   └── packages.ts              # Tour packages data
│
├── public/                       # Static assets
│   ├── images/
│   │   ├── green-peak-logo.png  # Brand logo
│   │   ├── hero-himachal.jpg    # Hero background
│   │   ├── dhauladhar-range.jpg # Destination image
│   │   ├── shimla-ridge.jpg     # Destination image
│   │   └── spiti-valley.jpg     # Destination image
│   └── icon.svg                 # Favicon
│
└── WEBSITE_STRUCTURE.md         # This file
```

---

## Page Structure & Components

### Home Page (`/`)
**Purpose:** Landing page showcasing premium Himalayan adventures

**Sections (Top to Bottom):**
1. **Navigation** - Sticky header with logo, menu, Call/WhatsApp CTAs
2. **Hero Search** - Full-width hero with search bar, feature cards
3. **Quick Contact** - 4-card contact bar (Phone, Email, WhatsApp, Location)
4. **Popular Destinations** - 3 featured destination cards with pricing
5. **Destination Cards** - 4 expandable cards with activity details
6. **Testimonials** - Traveler reviews carousel (5-star ratings)
7. **Social Proof** - Stats section with animated counters & badges
8. **Contact Form** - Booking form + embedded Google Map
9. **Footer** - Company info, links, social media

### Tours & Packages Page (`/tours`)
**Purpose:** Complete tour listing and filtering interface

**Sections (Top to Bottom):**
1. **Navigation** - Same sticky header as home
2. **Hero Section** - Page title + tagline
3. **Trending Section** - 4 featured trending packages
4. **Category Tabs** - Filter by tour type (All, Himachal, Kashmir, Spiti, Ladakh)
5. **Sort Dropdown** - Sort by trending, price low-to-high, price high-to-low
6. **Packages Grid** - 4-column responsive grid of package cards
7. **CTA Section** - "Can't find your tour?" with Call/WhatsApp buttons
8. **FAQ Section** - Expandable Q&A about tours
9. **Stats Section** - Company stats (travelers, destinations, experience, rating)
10. **Footer** - Same footer as home

---

## Components Detail

### Navigation (`/components/navigation.tsx`)
- **Props:** `onNavigate(id: string)` - Smooth scroll to page sections
- **Features:**
  - Sticky positioning with backdrop blur
  - Logo + company name
  - Desktop & mobile menus
  - Call Now (blue-500) & WhatsApp (green-500) CTA buttons
  - Focus states & hover effects with transitions
  - Mobile compact height (h-14) with hamburger menu

### Package Card (`/components/package-card-comp.tsx`)
- **Props:** `pkg: Package` - Tour package object
- **Features:**
  - Image with badge overlay (e.g., "Trending")
  - "Customize" ribbon
  - Discount badge showing savings
  - Price display
  - Duration, ratings, included features
  - Call & WhatsApp CTAs with green/blue colors
  - Border-radius: rounded-xl (xl)
  - Shadow: shadow-md with hover:shadow-lg

### Footer (`/components/footer.tsx`)
- **Features:**
  - Gradient background (primary/95 to primary)
  - 4-column layout: Company Info, Popular Tours, Destinations, Connect
  - Direct action links (Call, WhatsApp, Email)
  - Social media icons with hover states
  - Copyright section with privacy/terms links

### Hero Search (`/components/hero-search.tsx`)
- **Features:**
  - Full-width hero with background image
  - Search form (Where to?, Select Type, Select Dates, Search button)
  - 3 feature cards: Top Destinations, Special Offers, Travel Guides
  - Green/emerald/teal gradients

---

## Color Scheme (Green Theme)

### Light Mode
- **Background:** `#f0fdf4` (very light green)
- **Foreground:** `#0f2818` (dark green/black)
- **Primary:** `#15803d` (forest green)
- **Accent:** `#059669` (emerald)
- **Secondary:** `#dcfce7` (light green)
- **Muted:** `#d1fae5` (pale mint)
- **Border:** `#d1fae5` (light border)

### Dark Mode
- **Background:** `#0a2414` (very dark green)
- **Foreground:** `#f0fdf4` (light green)
- **Primary:** `#4ade80` (bright green)
- **Accent:** `#34d399` (bright cyan-green)

### CTA Colors (Overrides)
- **Call Button:** `#3b82f6` (blue-500)
- **WhatsApp Button:** `#22c55e` (green-500)

---

## Styling & Design System

### Typography
- **Headings:** Serif font for premium feel
- **Body:** Sans-serif (system fonts)
- **Sizes:** Scale from text-xs to text-5xl
- **Line Height:** Leading-relaxed (1.625) for body text

### Border Radius
- **Buttons & CTAs:** rounded-xl (12px)
- **Cards:** rounded-lg to rounded-xl
- **Inputs:** rounded-lg to rounded-xl
- **Icons:** rounded-lg

### Shadows
- **Cards:** shadow-md
- **Hover:** shadow-lg
- **Navigation:** shadow-md
- **Footer:** shadow-md

### Spacing
- **Padding:** Consistent use of Tailwind spacing scale (p-4, p-6, p-8, etc.)
- **Gap:** Uniform gaps in grid/flex layouts (gap-4, gap-6, gap-8)
- **Margins:** Balanced margins for visual hierarchy

### Responsive Breakpoints
- **Mobile:** Default styles
- **Tablet:** `sm:` (640px), `md:` (768px)
- **Desktop:** `lg:` (1024px), `xl:` (1280px)
- **Max Width:** max-w-7xl for content (80rem)

---

## Data Models

### Tour Package
```typescript
interface Package {
  id: string;
  title: string;
  description: string;
  image: string;
  duration: string;
  days: string;
  price: number;
  oldPrice?: number;
  difficulty: 'Easy' | 'Moderate' | 'Hard';
  activities: string[];
  highlights: string[];
  rating: number;
  trending: boolean;
  category: 'himachal' | 'kashmir' | 'spiti' | 'ladakh';
  badge?: string;
  included: string[];
  bestFor: string[];
  weather: {
    temp: string;
    season: string;
  };
}
```

---

## Key Features

### 1. Conversion Optimization
- Prominent Call Now & WhatsApp buttons on every page
- Multiple CTAs with direct phone links (tel:) and WhatsApp links (wa.me/)
- Contact form with embedded map
- Quick contact bar below hero

### 2. Visual Consistency
- Unified green color theme across all pages
- Matching border radius (rounded-xl for CTAs)
- Consistent shadows and hover effects
- Responsive design at all breakpoints

### 3. User Experience
- Smooth scrolling navigation
- Mobile-optimized hamburger menu
- Expandable destination cards for detailed info
- Testimonials carousel with smooth transitions
- FAQ expandable sections

### 4. Performance
- Image optimization with Next.js Image component
- Lazy loading components
- CSS-in-JS with Tailwind for efficient styling
- No external fonts (system fonts fallback)

---

## Business Information

**Company:** Green Peak Expedition
**Location:** Rampur Bushahr, near BSNL office, Teh. Rampur Bushahr, District Shimla, HP
**Phone:** +91 9459180333, +91 9805230180
**Email:** greenpeakexpedition986@gmail.com
**Instagram:** @greenpeakexpedition
**Facebook:** /greenpeakexpedition
**WhatsApp:** +91 9459180333

---

## SEO & Metadata

- **Home Page Title:** "Green Peak Expedition - Himachal Pradesh Tours & Adventure Packages"
- **Home Description:** "Green Peak Expedition offers premium adventure tours, trekking, and cultural experiences in Himachal Pradesh."
- **Tours Page Title:** "Explore Tours & Packages - Green Peak Expedition"
- **Tours Description:** "Discover curated Himalayan adventures with pricing and customization options."
- **Keywords:** "Himachal Pradesh tourism, mountain trekking, adventure tours, Manali, Shimla, Spiti Valley"

---

## Development Guidelines

### Adding New Pages
1. Create folder in `/app/pages-name/`
2. Add `page.tsx` with Navigation & Footer wrappers
3. Add `layout.tsx` for metadata
4. Add `loading.tsx` for loading state
5. Import components and use them consistently

### Adding New Components
1. Create `.tsx` file in `/components/`
2. Use theme tokens (--primary, --accent, etc.) from globals.css
3. Follow naming: kebab-case for files, PascalCase for exports
4. Add TypeScript props interface
5. Use consistent padding/margin from Tailwind scale

### Color Usage
- **Always use CSS tokens:** `text-primary`, `bg-accent`, `border-border`
- **Never use hardcoded colors:** ❌ `text-blue-600` ✅ `text-primary`
- **Exception:** CTA buttons explicitly use blue-500 & green-500

---

## Future Enhancements

- Blog section for travel tips and guides
- User authentication & account management
- Booking system with payment integration
- Advanced search filters
- User-generated reviews & photos
- Newsletter subscription
- Multi-language support
[V0_FILE]typescript:file="data/destinations.ts" isMerged="true"
export interface Destination {
  id: number;
  name: string;
  region: string;
  image: string;
  tagline: string;
  description: string;
  bestTime: string;
  altitude: string;
}

export const destinations: Destination[] = [
  {
    id: 1,
    name: 'Manali',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1623060761138-8f6f6c1b6f6f?q=80&w=1200',
    tagline: 'Snow, adventure & valleys',
    description: 'Gateway to the Himalayas with stunning valleys, adventure sports, and cultural experiences.',
    bestTime: 'May to September',
    altitude: '2,050 m',
  },
  {
    id: 2,
    name: 'Kasol',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1600334129128-685c5582fd35?q=80&w=1200',
    tagline: 'Parvati Valley vibes',
    description: 'Bohemian riverside village perfect for backpackers and nature lovers.',
    bestTime: 'March to June',
    altitude: '1,640 m',
  },
  {
    id: 3,
    name: 'Tosh',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1589405858862-2ac9cbb41321?q=80&w=1200',
    tagline: 'Offbeat mountain village',
    description: 'Quaint mountain village offering authentic Himalayan experience away from crowds.',
    bestTime: 'May to September',
    altitude: '2,150 m',
  },
  {
    id: 4,
    name: 'Jibhi',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1629194891935-6d6c3b2b4f6a?q=80&w=1200',
    tagline: 'Hidden forest retreat',
    description: 'Serene forest village surrounded by pine trees and pristine nature.',
    bestTime: 'April to June',
    altitude: '1,700 m',
  },
  {
    id: 5,
    name: 'Tirthan Valley',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1623308860101-1d9d9d8b0bb7?q=80&w=1200',
    tagline: 'Rivers & pine forests',
    description: 'Pristine valley with trout streams, trekking trails, and peaceful atmosphere.',
    bestTime: 'March to November',
    altitude: '1,650 m',
  },
  {
    id: 6,
    name: 'Shimla',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1592635196078-9c8c4d8b0c8f?q=80&w=1200',
    tagline: 'Colonial hill town',
    description: 'Historic hill station with colonial architecture, toy train rides, and mall walks.',
    bestTime: 'October to June',
    altitude: '2,160 m',
  },
  {
    id: 7,
    name: 'Kufri',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1616776005756-4dca3611c5b6?q=80&w=1200',
    tagline: 'Snow & viewpoints',
    description: 'Adventure destination near Shimla with skiing, trekking, and panoramic views.',
    bestTime: 'December to March',
    altitude: '2,510 m',
  },
  {
    id: 8,
    name: 'Chitkul',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1630845305075-6f6c9e1b1f1f?q=80&w=1200',
    tagline: 'Last village of India',
    description: 'Remote Himalayan village at the India-Tibet border with untouched beauty.',
    bestTime: 'May to October',
    altitude: '3,680 m',
  },
  {
    id: 9,
    name: 'Kalpa',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1622819584099-3f9a8c3a4fcb?q=80&w=1200',
    tagline: 'Kinnaur Kailash views',
    description: 'Picturesque village with stunning views of snow-capped Kinnaur Kailash.',
    bestTime: 'June to September',
    altitude: '2,960 m',
  },
  {
    id: 10,
    name: 'Spiti Valley',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1622451913486-93c0a3f8f80f?q=80&w=1200',
    tagline: 'Cold desert Himalayas',
    description: 'High-altitude cold desert valley with monasteries, stark landscapes, and adventure.',
    bestTime: 'June to September',
    altitude: '4,270 m',
  },
  {
    id: 11,
    name: 'Mussoorie',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?q=80&w=1200',
    tagline: 'Queen of the Hills',
    description: 'Popular hill station with cable car rides, trekking, and adventure activities.',
    bestTime: 'March to June',
    altitude: '2,005 m',
  },
  {
    id: 12,
    name: 'Nainital',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1593693411515-c20261bcad6e?q=80&w=1200',
    tagline: 'Lakes & hills',
    description: 'Lake district with boat rides, trekking, and scenic natural beauty.',
    bestTime: 'September to November',
    altitude: '1,938 m',
  },
  {
    id: 13,
    name: 'Ranikhet',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1603316002042-5d9b2c9f1f1d?q=80&w=1200',
    tagline: 'Peaceful cantonment',
    description: 'Peaceful hill station away from crowds, perfect for relaxation and walking.',
    bestTime: 'April to June',
    altitude: '1,829 m',
  },
  {
    id: 14,
    name: 'Auli',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1600359731958-4e52a5d1f2b6?q=80&w=1200',
    tagline: 'Skiing paradise',
    description: 'India\'s premier skiing destination with slopes, snow sports, and alpine meadows.',
    bestTime: 'December to March',
    altitude: '3,050 m',
  },
  {
    id: 15,
    name: 'Chopta',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1617375524564-35b45b4fcd36?q=80&w=1200',
    tagline: 'Mini Switzerland of India',
    description: 'Scenic meadows with rhododendron forests and panoramic mountain views.',
    bestTime: 'March to May',
    altitude: '2,600 m',
  },
  {
    id: 16,
    name: 'Srinagar',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1587502536263-9298c1c1a5f6?q=80&w=1200',
    tagline: 'Dal Lake & houseboats',
    description: 'Valley of paradise with houseboats, gardens, and breathtaking scenery.',
    bestTime: 'April to October',
    altitude: '1,775 m',
  },
  {
    id: 17,
    name: 'Gulmarg',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1600948836101-f9ffda59d250?q=80&w=1200',
    tagline: 'Snow meadows',
    description: 'Meadow in the mountains, famous for skiing, gondola rides, and natural beauty.',
    bestTime: 'December to March',
    altitude: '2,730 m',
  },
  {
    id: 18,
    name: 'Pahalgam',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1614591276564-7c9f3c9f9b7b?q=80&w=1200',
    tagline: 'Lidder Valley beauty',
    description: 'Scenic town in Lidder Valley with trekking trails and alpine forests.',
    bestTime: 'April to August',
    altitude: '2,440 m',
  },
  {
    id: 19,
    name: 'Leh',
    region: 'Ladakh',
    image: 'https://images.unsplash.com/photo-1605640840605-14ac1855827b?q=80&w=1200',
    tagline: 'High-altitude desert',
    description: 'Gateway to Ladakh with monasteries, stark landscapes, and adventure opportunities.',
    bestTime: 'June to September',
    altitude: '3,505 m',
  },
  {
    id: 20,
    name: 'Nubra Valley',
    region: 'Ladakh',
    image: 'https://images.unsplash.com/photo-1593181629936-11c609b8db9b?q=80&w=1200',
    tagline: 'Sand dunes & monasteries',
    description: 'Cold desert valley with sand dunes, monasteries, and Bactrian camels.',
    bestTime: 'July to September',
    altitude: '3,350 m',
  },
];
[V0_FILE]typescriptreact:file="components/destination-card.tsx" isMerged="true"
import Image from 'next/image';
import Link from 'next/link';
import { Destination } from '@/data/destinations';
import { MapPin, Calendar, Mountain } from 'lucide-react';

interface DestinationCardProps {
  destination: Destination;
}

export default function DestinationCard({ destination }: DestinationCardProps) {
  return (
    <Link href={`/destinations/${destination.id}`}>
      <div className="group relative rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 bg-white h-full cursor-pointer">
        {/* Image Container */}
        <div className="relative h-64 overflow-hidden bg-gradient-to-br from-green-100 to-emerald-100">
          <Image
            src={destination.image || "/placeholder.svg"}
            alt={destination.name}
            fill
            className="object-cover group-hover:scale-110 transition-transform duration-500"
            unoptimized
          />
          <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
          
          {/* Region Badge */}
          <div className="absolute top-4 right-4 bg-white/95 backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold text-primary shadow-md">
            {destination.region}
          </div>
        </div>

{/* Content Container */}
        <div className="p-5 flex flex-col h-48">
          {/* Title & Tagline */}
          <div className="mb-3">
            <h3 className="text-xl font-bold text-foreground group-hover:text-primary transition-colors">
              {destination.name}
            </h3>
            <p className="text-sm text-muted-foreground italic">{destination.tagline}</p>
          </div>

{/* Description */}
          <p className="text-sm text-muted-foreground line-clamp-2 mb-4 flex-grow">
            {destination.description}
          </p>

{/* Details Grid */}
          <div className="grid grid-cols-3 gap-3 mb-4 pt-3 border-t border-border">
            <div className="flex flex-col items-center text-center">
              <Calendar size={16} className="text-accent mb-1" />
              <span className="text-xs font-medium text-foreground">{destination.bestTime.split(' ')[0]}</span>
            </div>
            <div className="flex flex-col items-center text-center">
              <Mountain size={16} className="text-accent mb-1" />
              <span className="text-xs font-medium text-foreground">{destination.altitude}</span>
            </div>
            <div className="flex flex-col items-center text-center">
              <MapPin size={16} className="text-primary mb-1" />
              <span className="text-xs font-medium text-foreground">Explore</span>
            </div>
          </div>

{/* CTA Button */}
          <button className="w-full bg-primary text-primary-foreground px-4 py-2.5 rounded-xl font-semibold text-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all shadow-md hover:shadow-lg">
            View Details
          </button>
        </div>
      </div>
    </Link>
  );
}
[V0_FILE]typescriptreact:file="app/destinations/page.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Navigation from '@/components/navigation';
import Footer from '@/components/footer';
import DestinationCard from '@/components/destination-card';
import { destinations } from '@/data/destinations';
import { Search, MapPin } from 'lucide-react';

export default function DestinationsPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRegion, setSelectedRegion] = useState('All');

const regions = ['All', 'Himachal Pradesh', 'Uttarakhand', 'Kashmir', 'Ladakh'];

const filteredDestinations = destinations.filter((dest) => {
    const matchesSearch = dest.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      dest.tagline.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesRegion = selectedRegion === 'All' || dest.region === selectedRegion;
    return matchesSearch && matchesRegion;
  });

return (
    <>
      <Navigation onNavigate={() => {}} />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative py-12 md:py-16 bg-gradient-to-r from-primary to-accent text-primary-foreground">
          <div className="max-w-7xl mx-auto px-4 text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Explore Destinations</h1>
            <p className="text-lg opacity-90 max-w-2xl mx-auto">
              Discover 20+ breathtaking destinations across the Himalayas, from valleys to peaks
            </p>
          </div>
        </section>

{/* Search & Filter Section */}
        <section className="py-8 md:py-12 max-w-7xl mx-auto px-4">
          {/* Search Bar */}
          <div className="mb-8">
            <div className="relative">
              <Search className="absolute left-4 top-3.5 text-muted-foreground" size={20} />
              <input
                type="text"
                placeholder="Search destinations..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-3 rounded-xl border-2 border-border focus:border-primary focus:outline-none bg-white text-foreground placeholder-muted-foreground transition-colors"
              />
            </div>
          </div>

{/* Region Filter */}
          <div className="flex flex-wrap gap-3 mb-8">
            {regions.map((region) => (
              <button
                key={region}
                onClick={() => setSelectedRegion(region)}
                className={`px-6 py-2.5 rounded-full font-medium transition-all ${
                  selectedRegion === region
                    ? 'bg-primary text-primary-foreground shadow-md'
                    : 'bg-white text-foreground border-2 border-border hover:border-primary'
                }`}
              >
                {region}
              </button>
            ))}
          </div>

{/* Results Count */}
          <div className="mb-6 flex items-center gap-2 text-muted-foreground">
            <MapPin size={18} className="text-primary" />
            <span className="text-sm">
              Showing <span className="font-bold text-foreground">{filteredDestinations.length}</span> destinations
            </span>
          </div>
        </section>

{/* Destinations Grid */}
        <section className="py-8 md:py-12 max-w-7xl mx-auto px-4">
          {filteredDestinations.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
              {filteredDestinations.map((destination) => (
                <DestinationCard key={destination.id} destination={destination} />
              ))}
            </div>
          ) : (
            <div className="text-center py-16">
              <MapPin size={48} className="mx-auto text-muted-foreground/50 mb-4" />
              <h3 className="text-xl font-semibold text-foreground mb-2">No destinations found</h3>
              <p className="text-muted-foreground">Try adjusting your search or filters</p>
            </div>
          )}
        </section>

{/* Featured Stats Section */}
        <section className="py-12 md:py-16 bg-primary text-primary-foreground mt-8">
          <div className="max-w-7xl mx-auto px-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              <div>
                <div className="text-4xl font-bold mb-2">20+</div>
                <p className="opacity-90">Destinations</p>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">5</div>
                <p className="opacity-90">Regions</p>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">10K+</div>
                <p className="opacity-90">Happy Explorers</p>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">365</div>
                <p className="opacity-90">Days Open</p>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="py-12 md:py-16 max-w-7xl mx-auto px-4">
          <div className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-2xl p-8 md:p-12 text-center border-2 border-primary/20">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Ready to Plan Your Adventure?
            </h2>
            <p className="text-muted-foreground text-lg mb-8 max-w-2xl mx-auto">
              Get personalized recommendations and book your perfect Himalayan journey
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="tel:9459180333"
              className="bg-primary text-primary-foreground px-8 py-3.5 rounded-xl font-bold hover:shadow-lg transition-all shadow-md text-center"
            >
              Call Us
            </a>
            <a
              href="https://wa.me/919459180333"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-accent text-accent-foreground px-8 py-3.5 rounded-xl font-bold hover:shadow-lg transition-all shadow-md text-center"
            >
              WhatsApp
            </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
[V0_FILE]typescriptreact:file="app/destinations/loading.tsx" isMerged="true"
export default function Loading() {
  return null;
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
    domains: ['images.unsplash.com'],
  },
}

export default nextConfig
[V0_FILE]typescriptreact:file="app/contact/loading.tsx" isMerged="true"
export default function Loading() {
  return null;
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
'use client';

import Navigation from '@/components/navigation';
import ContactInfoCard from '@/components/contact-info-card';
import Footer from '@/components/footer';

export default function ContactPage() {
  return (
    <>
      <Navigation onNavigate={() => {}} />
      <main className="min-h-screen bg-background py-12 md:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ContactInfoCard />
        </div>
      </main>
      <Footer />
    </>
  );
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

interface NavigationProps {
  onNavigate: (id: string) => void;
}

export default function Navigation({ onNavigate }: NavigationProps) {
  const [isOpen, setIsOpen] = useState(false);

const handleClick = (id: string) => {
    onNavigate(id);
    setIsOpen(false);
  };

return (
    <nav className="sticky top-0 z-50 bg-background/98 backdrop-blur-md border-b border-border shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-14 sm:h-16">
          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
            <Image
              src="/images/green-peak-logo.png"
              alt="Green Peak Expedition"
              width={40}
              height={40}
              className="h-10 w-auto"
            />
            <span className="text-lg font-bold text-primary hidden sm:inline">Green Peak Expedition</span>
          </Link>

{/* Desktop Menu */}
          <div className="hidden md:flex gap-8 items-center">
            <Link
              href="/"
              className="text-secondary font-medium text-sm hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/30 rounded-md px-2 py-1 transition-all"
            >
              Home
            </Link>
            <Link
              href="/destinations"
              className="text-secondary font-medium text-sm hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/30 rounded-md px-2 py-1 transition-all"
            >
              Destinations
            </Link>
            <Link
              href="/tours"
              className="text-secondary font-medium text-sm hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/30 rounded-md px-2 py-1 transition-all"
            >
              Tours & Packages
            </Link>
            <Link
              href="/contact"
              className="text-secondary font-medium text-sm hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary/30 rounded-md px-2 py-1 transition-all"
            >
              Contact
            </Link>
            <a href="tel:9459180333" className="bg-accent text-accent-foreground px-5 py-2.5 rounded-xl font-semibold text-sm hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all shadow-md">
              Call Now
            </a>
            <a href="https://wa.me/919459180333" target="_blank" rel="noopener noreferrer" className="bg-primary text-primary-foreground px-5 py-2.5 rounded-xl font-semibold text-sm hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all shadow-md">
              WhatsApp
            </a>
          </div>

{/* Mobile Menu Button */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="md:hidden flex flex-col gap-1.5 p-2"
            aria-label="Toggle menu"
          >
            <div className="w-6 h-0.5 bg-foreground transition-transform" />
            <div className="w-6 h-0.5 bg-foreground transition-transform" />
            <div className="w-6 h-0.5 bg-foreground transition-transform" />
          </button>
        </div>

{/* Mobile Menu */}
        {isOpen && (
          <div className="md:hidden pb-4 flex flex-col gap-2 border-t border-border mt-2 pt-2">
            <Link
              href="/"
              className="text-left py-2 px-2 text-secondary font-medium text-sm hover:text-primary hover:bg-accent/10 rounded-md transition-all"
            >
              Home
            </Link>
            <Link
              href="/destinations"
              className="text-left py-2 px-2 text-secondary font-medium text-sm hover:text-primary hover:bg-accent/10 rounded-md transition-all"
            >
              Destinations
            </Link>
            <Link
              href="/tours"
              className="text-left py-2 px-2 text-secondary font-medium text-sm hover:text-primary hover:bg-accent/10 rounded-md transition-all"
            >
              Tours & Packages
            </Link>
            <Link
              href="/contact"
              className="text-left py-2 px-2 text-secondary font-medium text-sm hover:text-primary hover:bg-accent/10 rounded-md transition-all"
            >
              Contact
            </Link>
            <div className="flex gap-2 mt-3 pt-2 border-t border-border">
              <a href="tel:9459180333" className="flex-1 bg-accent text-accent-foreground px-4 py-2.5 rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-md text-center">
                Call
              </a>
              <a href="https://wa.me/919459180333" target="_blank" rel="noopener noreferrer" className="flex-1 bg-primary text-primary-foreground px-4 py-2.5 rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-md text-center">
                WhatsApp
              </a>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
'use client';

import Image from 'next/image';

export default function Footer() {
  return (
    <footer className="bg-gradient-to-b from-primary to-primary text-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-12 lg:py-16">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-10 sm:mb-12">
          {/* Company Info */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Image
                src="/images/green-peak-logo.png"
                alt="Green Peak Expedition"
                width={50}
                height={50}
                className="h-11 w-auto"
              />
              <h3 className="text-lg font-bold">Green Peak</h3>
            </div>
            <p className="text-xs sm:text-sm text-background/85 leading-relaxed mb-4">
              Premium mountain adventures in Himachal Pradesh with expert guides and unforgettable experiences.
            </p>
            <div className="space-y-2 sm:space-y-3 text-xs sm:text-sm">
              <a href="tel:9459180333" className="flex items-center gap-2 text-background/85 hover:text-white transition-colors">
                <span>📞</span> +91 9459180333
              </a>
              <a href="https://wa.me/919459180333" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-background/85 hover:text-white transition-colors">
                <span>💬</span> WhatsApp
              </a>
              <a href="mailto:greenpeakexpedition986@gmail.com" className="flex items-center gap-2 text-background/85 hover:text-white transition-colors">
                <span>✉️</span> Email
              </a>
            </div>
          </div>

{/* Popular Packages */}
          <div>
            <h4 className="text-sm sm:text-base font-bold mb-4 sm:mb-5">Popular Tours</h4>
            <ul className="space-y-2 sm:space-y-3 text-xs sm:text-sm">
              <li>
                <a href="/tours" className="text-background/85 hover:text-white transition-colors">
                  Manali Adventure Trek
                </a>
              </li>
              <li>
                <a href="/tours" className="text-background/85 hover:text-white transition-colors">
                  Spiti Valley Expedition
                </a>
              </li>
              <li>
                <a href="/tours" className="text-background/85 hover:text-white transition-colors">
                  Shimla Weekend Getaway
                </a>
              </li>
              <li>
                <a href="/tours" className="text-background/85 hover:text-white transition-colors">
                  Dharamshala Trekking
                </a>
              </li>
            </ul>
          </div>

{/* Destinations */}
          <div>
            <h4 className="text-sm sm:text-base font-bold mb-4 sm:mb-5">Destinations</h4>
            <ul className="space-y-2 sm:space-y-3 text-xs sm:text-sm">
              <li>
                <a href="/destinations" className="text-background/85 hover:text-white transition-colors">
                  Manali
                </a>
              </li>
              <li>
                <a href="/destinations" className="text-background/85 hover:text-white transition-colors">
                  Shimla
                </a>
              </li>
              <li>
                <a href="/destinations" className="text-background/85 hover:text-white transition-colors">
                  Spiti Valley
                </a>
              </li>
              <li>
                <a href="/destinations" className="text-background/85 hover:text-white transition-colors">
                  Dharamshala
                </a>
              </li>
            </ul>
          </div>

{/* Contact & Social */}
          <div>
            <h4 className="text-sm sm:text-base font-bold mb-4 sm:mb-5">Connect With Us</h4>
            <div className="flex gap-3 sm:gap-4 mb-4 sm:mb-6">
              <a
                href="https://www.instagram.com/greenpeakexpedition/"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 sm:w-10 h-9 sm:h-10 rounded-lg bg-background/10 hover:bg-background/20 flex items-center justify-center transition-colors"
                aria-label="Instagram"
              >
                <span className="text-base sm:text-lg">📱</span>
              </a>
              <a
                href="https://www.facebook.com/greenpeakexpedition"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 sm:w-10 h-9 sm:h-10 rounded-lg bg-background/10 hover:bg-background/20 flex items-center justify-center transition-colors"
                aria-label="Facebook"
              >
                <span className="text-base sm:text-lg">👍</span>
              </a>
              <a
                href="https://wa.me/919459180333"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 sm:w-10 h-9 sm:h-10 rounded-lg bg-primary hover:opacity-90 flex items-center justify-center transition-colors"
                aria-label="WhatsApp"
              >
                <span className="text-base sm:text-lg">💬</span>
              </a>
            </div>
            <p className="text-xs text-background/70">
              Based in Rampur Bushahr, Shimla, HP
            </p>
          </div>
        </div>

<div className="border-t border-background/20 pt-6 sm:pt-8">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-3 sm:gap-4 text-xs sm:text-sm text-background/80">
            <p>© 2026 Green Peak Expedition. All rights reserved.</p>
            <div className="flex gap-4 sm:gap-6">
              <a href="#" className="hover:text-white transition-colors">
                Privacy
              </a>
              <a href="#" className="hover:text-white transition-colors">
                Terms
              </a>
              <a href="#" className="hover:text-white transition-colors">
                Cancellation
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
[V0_FILE]typescript:file="data/destinations-detailed.ts" isMerged="true"
export interface DetailedDestination {
  id: number;
  name: string;
  region: string;
  image: string;
  tagline: string;
  description: string;
  bestTime: string;
  altitude: string;
  aboutPlace: string;
  famousPlaces: string[];
  activities: string[];
  bestFor: string[];
  accommodation: string;
  gettingThere: string;
  duration: string;
  temperature: {
    summer: string;
    winter: string;
  };
  highlights: string[];
  tips: string[];
}

export const detailedDestinations: DetailedDestination[] = [
  {
    id: 1,
    name: 'Manali',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1623060761138-8f6f6c1b6f6f?q=80&w=1200',
    tagline: 'Snow, adventure & valleys',
    description: 'Gateway to the Himalayas with stunning valleys, adventure sports, and cultural experiences.',
    bestTime: 'May to September',
    altitude: '2,050 m',
    aboutPlace: 'Manali is one of the most popular hill stations in India, nestled in the Kullu Valley. Known for its pristine beauty, adventure sports, and vibrant culture, Manali offers a perfect blend of nature and adventure. The town serves as a gateway to the Himalayas and is surrounded by snow-capped peaks, lush green valleys, and adventure opportunities.',
    famousPlaces: ['Rohtang Pass', 'Solang Valley', 'Hadimba Temple', 'Mall Road', 'Vashisht Hot Springs', 'Old Manali', 'Kullu Valley'],
    activities: ['Paragliding', 'River Rafting', 'Trekking', 'Mountain Biking', 'Horse Riding', 'Skiing', 'Rock Climbing'],
    bestFor: ['Adventure Seekers', 'Couples', 'Nature Lovers', 'Photographers'],
    accommodation: 'Wide range from budget hostels to luxury resorts. Popular stays include Old Manali guesthouses, Solang Valley hotels, and Mall Road properties.',
    gettingThere: 'By Air: Bhuntar Airport (50km). By Train: Joginder Nagar Railway Station (180km). By Road: Direct buses from Delhi, Shimla, and other cities.',
    duration: '3-5 days',
    temperature: {
      summer: '10-25°C',
      winter: '-5-10°C',
    },
    highlights: [
      'Rohtang Pass: 32km mountain pass with panoramic Himalayan views',
      'Solang Valley: Adventure sports hub with paragliding and skiing',
      'Hadimba Temple: Ancient wooden temple with mythological significance',
      'Mall Road: Vibrant shopping and dining hub',
    ],
    tips: [
      'Book accommodations in advance during peak season (May-September)',
      'Carry woolens even in summer for cold mountain nights',
      'Best for adventure activities: June-September',
      'Avoid peak tourist season if you prefer solitude',
      'Rohtang Pass gets crowded on weekends',
    ],
  },
  {
    id: 2,
    name: 'Kasol',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1600334129128-685c5582fd35?q=80&w=1200',
    tagline: 'Parvati Valley vibes',
    description: 'Bohemian riverside village perfect for backpackers and nature lovers.',
    bestTime: 'March to June',
    altitude: '1,640 m',
    aboutPlace: 'Kasol is a hidden gem in the Parvati Valley, famous for its backpacker culture, riverside camps, and trekking trails. The village is surrounded by marijuana plantations and offers a bohemian atmosphere. It\'s a perfect base for exploring the surrounding valleys and mountains.',
    famousPlaces: ['Parvati River', 'Kheerganga Trek', 'Tosh Village', 'Malana Village', 'Chalal', 'Manikaran'],
    activities: ['Trekking', 'River Camping', 'Rock Hopping', 'Meditation', 'Photography', 'Village Walks'],
    bestFor: ['Backpackers', 'Trekkers', 'Nature Lovers', 'Spiritual Seekers'],
    accommodation: 'Budget guesthouses and riverside camps dominate. Popular options include backpacker hostels with communal living spaces.',
    gettingThere: 'By Bus: Direct buses from Manali (4 hours), Delhi (12 hours). By Road: Scenic drive through Parvati Valley.',
    duration: '2-4 days',
    temperature: {
      summer: '15-28°C',
      winter: '5-15°C',
    },
    highlights: [
      'Kheerganga Trek: 14km trek to natural hot water springs',
      'Tosh Village: Offbeat mountain village with stunning views',
      'Parvati River: Pristine riverside camping spots',
      'Malana Village: Ancient village with unique culture',
    ],
    tips: [
      'Trek to Kheerganga early morning to avoid crowds',
      'Carry sturdy trekking shoes for rocky trails',
      'Camping on riverbanks is very popular',
      'Best visited in spring and summer',
      'Stay in Old Kasol for authentic experience',
    ],
  },
  {
    id: 3,
    name: 'Tosh',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1589405858862-2ac9cbb41321?q=80&w=1200',
    tagline: 'Offbeat mountain village',
    description: 'Quaint mountain village offering authentic Himalayan experience away from crowds.',
    bestTime: 'May to September',
    altitude: '2,150 m',
    aboutPlace: 'Tosh is a picturesque mountain village in the Parvati Valley, known for its pristine beauty and offbeat tourism. The village offers stunning views of the surrounding mountains and is ideal for those seeking solitude and authentic mountain life.',
    famousPlaces: ['Kunder River', 'Local Temples', 'Mountain Viewpoints', 'Forest Trails', 'Waterfall Trek'],
    activities: ['Trekking', 'Photography', 'Meditation', 'Village Exploration', 'Hiking'],
    bestFor: ['Nature Lovers', 'Photographers', 'Spiritual Seekers', 'Solo Travelers'],
    accommodation: 'Traditional homestays and guesthouses offering authentic mountain experience.',
    gettingThere: 'From Kasol: 4km trek (1.5 hours) or local jeeps. From Manali: 6-7 hours by road.',
    duration: '2-3 days',
    temperature: {
      summer: '12-22°C',
      winter: '2-8°C',
    },
    highlights: [
      'Mountain Village Life: Authentic Himalayan culture',
      'Forest Trails: Scenic trekking through pine forests',
      'Mountain Views: Panoramic views of Parvati Valley',
      'Local Cuisine: Traditional mountain food',
    ],
    tips: [
      'Trek from Kasol is more adventurous than jeep ride',
      'Limited wifi and phone connectivity (a feature, not a bug)',
      'Carry enough cash as ATMs are limited',
      'Best time for clear mountain views: June-September',
      'Pack warm clothes for cold mountain nights',
    ],
  },
  {
    id: 4,
    name: 'Jibhi',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1629194891935-6d6c3b2b4f6a?q=80&w=1200',
    tagline: 'Hidden forest retreat',
    description: 'Serene forest village surrounded by pine trees and pristine nature.',
    bestTime: 'April to June',
    altitude: '1,700 m',
    aboutPlace: 'Jibhi is a serene forest village in Himachal Pradesh, surrounded by dense pine forests and pristine natural beauty. It\'s a perfect destination for those seeking peace and tranquility away from the hustle and bustle of city life.',
    famousPlaces: ['Jibhi Waterfall', 'Serolsar Lake Trek', 'Forest Trails', 'Tirthan River', 'Local Markets'],
    activities: ['Trekking', 'Bird Watching', 'Fishing', 'Photography', 'Picnicking'],
    bestFor: ['Nature Lovers', 'Bird Watchers', 'Photographers', 'Families'],
    accommodation: 'Homestays and eco-lodges offering connection with nature.',
    gettingThere: 'From Manali: 4 hours by road. From Shimla: 6 hours. Local buses and private cabs available.',
    duration: '2-3 days',
    temperature: {
      summer: '15-25°C',
      winter: '5-12°C',
    },
    highlights: [
      'Jibhi Waterfall: Beautiful cascading waterfall',
      'Serolsar Lake: Scenic alpine lake trek',
      'Forest Environment: Dense pine and deodar forests',
      'Tirthan River: Pristine river for trout fishing',
    ],
    tips: [
      'Hire local guides for forest treks',
      'Best season for clear skies: April-May',
      'Carry insect repellent for forest areas',
      'Fishing requires local permits',
      'Stay in homestays for authentic experience',
    ],
  },
  {
    id: 5,
    name: 'Tirthan Valley',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1623308860101-1d9d9d8b0bb7?q=80&w=1200',
    tagline: 'Rivers & pine forests',
    description: 'Pristine valley with trout streams, trekking trails, and peaceful atmosphere.',
    bestTime: 'March to November',
    altitude: '1,650 m',
    aboutPlace: 'Tirthan Valley is a pristine Himalayan valley known for its clear trout streams, dense forests, and trekking trails. The valley offers a perfect blend of adventure and tranquility, making it ideal for nature enthusiasts and adventure seekers.',
    famousPlaces: ['Tirthan River', 'Shoja Village', 'Rolla', 'Great Himalayan National Park', 'Forest Trails'],
    activities: ['Trout Fishing', 'Trekking', 'Camping', 'Bird Watching', 'Nature Walks'],
    bestFor: ['Fishermen', 'Trekkers', 'Nature Lovers', 'Adventure Seekers'],
    accommodation: 'Homestays, eco-lodges, and small guesthouses offering intimate mountain experience.',
    gettingThere: 'From Shimla: 3-4 hours by road. From Manali: 5-6 hours. Local transport available.',
    duration: '3-5 days',
    temperature: {
      summer: '15-28°C',
      winter: '5-15°C',
    },
    highlights: [
      'Trout Fishing: Clear mountain streams for fishing',
      'Great Himalayan National Park: Biodiversity hotspot',
      'Trekking Routes: Multiple scenic trekking trails',
      'Pristine Nature: Untouched forest environment',
    ],
    tips: [
      'Fishing season: March-October',
      'Hire local guides for better fishing success',
      'Spring (March-May) offers best trekking weather',
      'Carry camping gear for wilderness experience',
      'Pack adequate warm clothing for cold nights',
    ],
  },
  {
    id: 6,
    name: 'Shimla',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1592635196078-9c8c4d8b0c8f?q=80&w=1200',
    tagline: 'Colonial hill town',
    description: 'Historic hill station with colonial architecture, toy train rides, and mall walks.',
    bestTime: 'October to June',
    altitude: '2,160 m',
    aboutPlace: 'Shimla is the capital of Himachal Pradesh and one of India\'s most visited hill stations. Known for its colonial heritage, pleasant weather, and scenic beauty, Shimla offers a perfect getaway with a mix of history, culture, and natural charm.',
    famousPlaces: ['The Ridge', 'Mall Road', 'Christ Church', 'Viceregal Lodge', 'Toy Train Route', 'Jakhoo Temple'],
    activities: ['Walking Tours', 'Shopping', 'Sightseeing', 'Trekking', 'Picnicking', 'Adventure Sports'],
    bestFor: ['Families', 'Couples', 'Photographers', 'History Enthusiasts'],
    accommodation: 'Wide range from budget hotels to luxury resorts. Many colonial-era heritage hotels available.',
    gettingThere: 'By Air: Shimla Airport. By Train: Kalka-Shimla Toy Train (historic route). By Road: Buses from Delhi, Chandigarh, and nearby cities.',
    duration: '2-3 days',
    temperature: {
      summer: '15-30°C',
      winter: '-5-10°C',
    },
    highlights: [
      'The Ridge: Vast open square with panoramic views',
      'Mall Road: Historic shopping and dining hub',
      'Toy Train: UNESCO World Heritage railway route',
      'Christ Church: Second oldest church in Asia',
      'Viceregal Lodge: Historic colonial palace',
    ],
    tips: [
      'Peak season crowds: May-June. Visit in shoulder seasons',
      'The Ridge is best explored on foot',
      'Toy Train booking in advance is recommended',
      'Winter months are cold; carry warm clothes',
      'Nearby Kufri and Chail offer additional attractions',
    ],
  },
  {
    id: 7,
    name: 'Kufri',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1616776005756-4dca3611c5b6?q=80&w=1200',
    tagline: 'Snow & viewpoints',
    description: 'Adventure destination near Shimla with skiing, trekking, and panoramic views.',
    bestTime: 'December to March',
    altitude: '2,510 m',
    aboutPlace: 'Kufri is a small hill station near Shimla, famous for its snow sports and adventure activities. The area offers stunning views of the surrounding Himalayas and is perfect for those seeking adventure combined with scenic beauty.',
    famousPlaces: ['Kufri Amusement Park', 'Mahasu Peak', 'Himalayan Nature Park', 'Green Valley', 'Christ Church'],
    activities: ['Skiing', 'Sledging', 'Horse Riding', 'Trekking', 'Snowboarding'],
    bestFor: ['Adventure Seekers', 'Families', 'Photographers', 'Winter Sports Enthusiasts'],
    accommodation: 'Hotels, resorts, and guesthouses. Book in advance during snow season.',
    gettingThere: 'From Shimla: 15-30 minutes by road. Easily accessible via car or bus.',
    duration: '1-2 days',
    temperature: {
      summer: '10-20°C',
      winter: '-10-0°C',
    },
    highlights: [
      'Skiing and Snow Sports: December-February',
      'Mahasu Peak: Panoramic mountain views',
      'Adventure Park: Family-friendly activities',
      'Nature Trails: Beautiful forest walks',
    ],
    tips: [
      'Snow availability: December-February',
      'Book skiing lessons in advance',
      'Weather can change rapidly; carry warm clothes',
      'Summer offers pleasant weather and trekking',
      'Can be visited as day trip from Shimla',
    ],
  },
  {
    id: 8,
    name: 'Chitkul',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1630845305075-6f6c9e1b1f1f?q=80&w=1200',
    tagline: 'Last village of India',
    description: 'Remote Himalayan village at the India-Tibet border with untouched beauty.',
    bestTime: 'May to October',
    altitude: '3,680 m',
    aboutPlace: 'Chitkul is the last inhabited village on the Indian side of the India-Tibet border, offering pristine Himalayan beauty and authentic mountain culture. The remote location ensures minimal tourists and a genuine mountain experience.',
    famousPlaces: ['Sutlej River', 'Kinnara-Kinnauri Culture', 'Mountain Passes', 'Border Area', 'Local Markets'],
    activities: ['Trekking', 'Photography', 'Cultural Tours', 'Hiking', 'Mountain Exploration'],
    bestFor: ['Adventure Seekers', 'Photographers', 'Trekkers', 'Cultural Enthusiasts'],
    accommodation: 'Limited but authentic homestays and guesthouses. Book in advance.',
    gettingThere: 'From Rampur: 6-7 hours by road. Most remote destination; requires personal vehicle or tour operator.',
    duration: '2-3 days',
    temperature: {
      summer: '5-15°C',
      winter: '-15-0°C',
    },
    highlights: [
      'India-Tibet Border: Remote frontier experience',
      'Kinnauri Culture: Unique mountain traditions',
      'Sutlej River: Pristine river landscape',
      'Untouched Nature: Minimal tourist footprint',
    ],
    tips: [
      'Highest altitude on this list; acclimatize properly',
      'Road conditions can be challenging; go with experienced driver',
      'Limited facilities; carry essentials',
      'September-October offers best weather',
      'Permits may be required for border areas',
    ],
  },
  {
    id: 9,
    name: 'Kalpa',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1622819584099-3f9a8c3a4fcb?q=80&w=1200',
    tagline: 'Kinnaur Kailash views',
    description: 'Picturesque village with stunning views of snow-capped Kinnaur Kailash.',
    bestTime: 'June to September',
    altitude: '2,960 m',
    aboutPlace: 'Kalpa is a picturesque village in Kinnaur district, famous for its stunning views of the snow-capped Kinnaur Kailash peak. The village offers a perfect blend of natural beauty, culture, and adventure.',
    famousPlaces: ['Kinnaur Kailash Peak', 'Sutlej River', 'Kinnara Temple', 'Village Walks', 'Orchards'],
    activities: ['Photography', 'Trekking', 'Village Walks', 'Meditation', 'Nature Observation'],
    bestFor: ['Photographers', 'Nature Lovers', 'Spiritual Seekers', 'Trekkers'],
    accommodation: 'Guesthouses and homestays offering mountain hospitality.',
    gettingThere: 'From Rampur: 2-3 hours by road. From Shimla: 7-8 hours.',
    duration: '2-3 days',
    temperature: {
      summer: '10-22°C',
      winter: '-5-5°C',
    },
    highlights: [
      'Kinnaur Kailash Views: Snow-capped peak photography',
      'Sunrise Vistas: Golden hour mountain landscape',
      'Local Culture: Kinnauri traditions and lifestyle',
      'Orchard Walks: Apple and apricot orchards',
    ],
    tips: [
      'Best photography: Early morning and sunset',
      'Weather can change quickly; carry warm clothes',
      'Local apples and apricots are excellent',
      'July-August brings occasional rain',
      'September offers clearest skies and best views',
    ],
  },
  {
    id: 10,
    name: 'Spiti Valley',
    region: 'Himachal Pradesh',
    image: 'https://images.unsplash.com/photo-1622451913486-93c0a3f8f80f?q=80&w=1200',
    tagline: 'Cold desert Himalayas',
    description: 'High-altitude cold desert valley with monasteries, stark landscapes, and adventure.',
    bestTime: 'June to September',
    altitude: '4,270 m',
    aboutPlace: 'Spiti Valley is a high-altitude cold desert valley offering otherworldly landscapes, Buddhist monasteries, and authentic Tibetan culture. The region is perfect for adventure seekers and those seeking spiritual experiences in remote locations.',
    famousPlaces: ['Kaza Town', 'Tabo Monastery', 'Key Monastery', 'Dhankar Monastery', 'Chandratal Lake', 'Kibber Village'],
    activities: ['Trekking', 'Motorbiking', 'Photography', 'Monastery Tours', 'Rock Climbing'],
    bestFor: ['Adventure Seekers', 'Motorcyclists', 'Photographers', 'Spiritual Seekers'],
    accommodation: 'Limited guesthouses and homestays in Kaza and villages. Book well in advance.',
    gettingThere: 'From Manali: 8-10 hours. From Shimla: 12+ hours. Requires sturdy vehicle and experienced driver.',
    duration: '4-6 days',
    temperature: {
      summer: '5-25°C',
      winter: '-20-0°C',
    },
    highlights: [
      'Buddhist Monasteries: Ancient Tabo, Key, Dhankar monasteries',
      'Chandratal Lake: High-altitude alpine lake',
      'Stark Landscapes: Lunar-like terrain',
      'Tibetan Culture: Remote Buddhist communities',
    ],
    tips: [
      'Altitude sickness is common; acclimatize in Manali first',
      'June-September is the only accessible period',
      'Carry high-altitude gear: sunscreen, sunglasses',
      'Fuel up in Manali or Shimla; limited petrol in Spiti',
      'Travel with experienced guides or tour operators',
    ],
  },
  {
    id: 11,
    name: 'Mussoorie',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?q=80&w=1200',
    tagline: 'Queen of the Hills',
    description: 'Popular hill station with cable car rides, trekking, and adventure activities.',
    bestTime: 'March to June',
    altitude: '2,005 m',
    aboutPlace: 'Mussoorie is one of India\'s most popular hill stations, known as the "Queen of the Hills". Located in Uttarakhand, it offers scenic beauty, colonial charm, adventure activities, and a vibrant tourist atmosphere.',
    famousPlaces: ['The Mall', 'Gun Hill', 'Camel\'s Back Road', 'Kempty Falls', 'Cloud\'s End', 'Lal Tibba'],
    activities: ['Trekking', 'Paragliding', 'Rappelling', 'Zip-lining', 'Horse Riding', 'Sightseeing'],
    bestFor: ['Families', 'Adventure Seekers', 'Couples', 'Photographers'],
    accommodation: 'Wide range from budget to luxury hotels and resorts.',
    gettingThere: 'By Air: Delhi airport (6 hours). By Train: Dehradun Station (1 hour). By Road: Buses and cabs from Delhi.',
    duration: '2-3 days',
    temperature: {
      summer: '15-28°C',
      winter: '5-15°C',
    },
    highlights: [
      'The Mall: Vibrant shopping and dining hub',
      'Gun Hill: Cable car ride with panoramic views',
      'Kempty Falls: Scenic waterfall and swimming spot',
      'Cloud\'s End Trek: Forest trail with valley views',
    ],
    tips: [
      'Peak season crowds: May-June. Visit in April or September',
      'The Mall is best explored in evening',
      'Adventure activities available year-round',
      'Camel\'s Back Road offers scenic morning walks',
      'Book adventure activities through registered operators',
    ],
  },
  {
    id: 12,
    name: 'Nainital',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1593693411515-c20261bcad6e?q=80&w=1200',
    tagline: 'Lakes & hills',
    description: 'Lake district with boat rides, trekking, and scenic natural beauty.',
    bestTime: 'September to November',
    altitude: '1,938 m',
    aboutPlace: 'Nainital is a picturesque hill station in Uttarakhand, famous for its pristine lakes and scenic beauty. The town is centered around Naini Lake and offers a perfect blend of adventure, spirituality, and natural charm.',
    famousPlaces: ['Naini Lake', 'Naina Devi Temple', 'Malliital', 'Tiffin Top', 'Naina Peak', 'Snow View Point'],
    activities: ['Boating', 'Trekking', 'Rock Climbing', 'Fishing', 'Horse Riding', 'Paragliding'],
    bestFor: ['Families', 'Adventure Seekers', 'Nature Lovers', 'Spiritual Tourists'],
    accommodation: 'Hotels, resorts, and guesthouses around the lake and in town center.',
    gettingThere: 'By Air: Pantnagar Airport. By Train: Kathgodam Railway Station. By Road: Buses and cabs from Delhi.',
    duration: '2-3 days',
    temperature: {
      summer: '15-25°C',
      winter: '5-15°C',
    },
    highlights: [
      'Naini Lake: Scenic boat rides and lakeside walks',
      'Naina Devi Temple: Sacred shrine with lake views',
      'Tiffin Top: Scenic viewpoint with panoramic vistas',
      'Snow View Point: Himalayan peak views',
    ],
    tips: [
      'Best season: September-November for clear weather',
      'Avoid peak summer (May-June) for crowds',
      'Boating available throughout the year',
      'Morning walks around the lake are refreshing',
      'Carry warm clothes for evening chill',
    ],
  },
  {
    id: 13,
    name: 'Ranikhet',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1603316002042-5d9b2c9f1f1d?q=80&w=1200',
    tagline: 'Peaceful cantonment',
    description: 'Peaceful hill station away from crowds, perfect for relaxation and walking.',
    bestTime: 'April to June',
    altitude: '1,829 m',
    aboutPlace: 'Ranikhet is a serene hill station in Uttarakhand, known for its peaceful atmosphere and pleasant weather. The town is ideal for those seeking a quiet getaway with scenic beauty and outdoor activities.',
    famousPlaces: ['Khali Estate', 'Asha Kanya Temple', 'Chaubatia Gardens', 'Kalika Temple', 'Golf Course'],
    activities: ['Walking', 'Trekking', 'Golfing', 'Photography', 'Nature Walks'],
    bestFor: ['Families', 'Nature Lovers', 'Photographers', 'Solo Travelers'],
    accommodation: 'Small hotels, guesthouses, and a few resorts offering peaceful stay.',
    gettingThere: 'From Nainital: 2-3 hours. From Delhi: 8-9 hours. By road via Almora.',
    duration: '2-3 days',
    temperature: {
      summer: '15-28°C',
      winter: '5-15°C',
    },
    highlights: [
      'Peaceful Cantonment: Away from tourist crowds',
      'Chaubatia Gardens: Apple and peach orchards',
      'Golf Course: Beautiful landscape and recreational golf',
      'Walking Trails: Scenic forest and hill paths',
    ],
    tips: [
      'Perfect for those seeking peace and tranquility',
      'Less touristy than other hill stations',
      'Orchard season (September-October) is beautiful',
      'April-May offers best weather',
      'Good base for exploring nearby Almora',
    ],
  },
  {
    id: 14,
    name: 'Auli',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1600359731958-4e52a5d1f2b6?q=80&w=1200',
    tagline: 'Skiing paradise',
    description: 'India\'s premier skiing destination with slopes, snow sports, and alpine meadows.',
    bestTime: 'December to March',
    altitude: '3,050 m',
    aboutPlace: 'Auli is India\'s premier skiing destination, offering world-class snow sports facilities and stunning alpine meadows. Located in Uttarakhand, it\'s perfect for winter sports enthusiasts and those seeking adventure in the Himalayas.',
    famousPlaces: ['Ski Slopes', 'Auli Meadows', 'Ropeway Ride', 'Forest Trails', 'Chopta Ridge Trek'],
    activities: ['Skiing', 'Snowboarding', 'Ropeway Ride', 'Snow Activities', 'Trekking'],
    bestFor: ['Winter Sports Enthusiasts', 'Adventure Seekers', 'Photographers', 'Families'],
    accommodation: 'Modern hotels and ski resorts with world-class facilities.',
    gettingThere: 'From Rishikesh: 6-7 hours. From Delhi: 8-9 hours. Ropeway access in winter.',
    duration: '3-5 days',
    temperature: {
      summer: '5-15°C',
      winter: '-15-5°C',
    },
    highlights: [
      'Skiing and Snowboarding: December-February',
      'Auli Meadows: Beautiful alpine grasslands',
      'Chairlift Rides: Panoramic Himalayan views',
      'Snow Sports: Professional instruction available',
    ],
    tips: [
      'Best skiing: January-February',
      'Book skiing lessons at resorts',
      'Carry appropriate winter gear',
      'Altitude acclimatization needed',
      'Weather dependent; check conditions before visiting',
    ],
  },
  {
    id: 15,
    name: 'Chopta',
    region: 'Uttarakhand',
    image: 'https://images.unsplash.com/photo-1617375524564-35b45b4fcd36?q=80&w=1200',
    tagline: 'Mini Switzerland of India',
    description: 'Scenic meadows with rhododendron forests and panoramic mountain views.',
    bestTime: 'March to May',
    altitude: '2,600 m',
    aboutPlace: 'Chopta is often called the "Mini Switzerland of India" due to its verdant meadows, dense forests, and panoramic mountain views. The destination is perfect for trekking and nature photography.',
    famousPlaces: ['Tungnath Temple', 'Chopta Meadows', 'Rhododendron Forests', 'Deoriatal Lake', 'Chandrashila Peak'],
    activities: ['Trekking', 'Photography', 'Nature Walks', 'Camping', 'Bird Watching'],
    bestFor: ['Trekkers', 'Photographers', 'Nature Lovers', 'Adventure Seekers'],
    accommodation: 'Guesthouses, homestays, and eco-lodges in Chopta and surrounding areas.',
    gettingThere: 'From Nainital: 4-5 hours. From Rishikesh: 6-7 hours. Via Gopeshwar town.',
    duration: '2-3 days',
    temperature: {
      summer: '10-20°C',
      winter: '0-10°C',
    },
    highlights: [
      'Tungnath Temple: Highest Shiva temple, trekking route',
      'Rhododendron Forests: Blooming March-April',
      'Meadows: Scenic alpine grasslands',
      'Chandrashila Peak: Panoramic summit views',
    ],
    tips: [
      'March-April: Best for rhododendron bloom',
      'Tungnath trek is moderately difficult',
      'Camping available at meadows',
      'Carry rain gear for unpredictable weather',
      'Early morning hikes offer best views',
    ],
  },
  {
    id: 16,
    name: 'Srinagar',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1587502536263-9298c1c1a5f6?q=80&w=1200',
    tagline: 'Dal Lake & houseboats',
    description: 'Valley of paradise with houseboats, gardens, and breathtaking scenery.',
    bestTime: 'April to October',
    altitude: '1,775 m',
    aboutPlace: 'Srinagar is the crown jewel of Kashmir, famous for its scenic beauty, beautiful lakes, and houseboats. The city offers a unique blend of natural beauty, culture, and hospitality.',
    famousPlaces: ['Dal Lake', 'Houseboats', 'Nishat Bagh', 'Shalimar Bagh', 'Hazratbal Shrine', 'Shankaracharya Temple'],
    activities: ['Shikara Ride', 'Houseboat Stay', 'Garden Visits', 'Shopping', 'Photography'],
    bestFor: ['Couples', 'Families', 'Photographers', 'Nature Lovers'],
    accommodation: 'Famous houseboats on Dal Lake or lakeside hotels and resorts.',
    gettingThere: 'By Air: Srinagar Airport. By Train: Srinagar Railway Station. By Road: Buses from Jammu.',
    duration: '3-4 days',
    temperature: {
      summer: '15-30°C',
      winter: '-5-10°C',
    },
    highlights: [
      'Dal Lake: Iconic shikara ride experience',
      'Houseboat Stay: Unique overnight accommodation',
      'Mughal Gardens: Nishat and Shalimar gardens',
      'Floating Markets: Unique shopping on water',
    ],
    tips: [
      'Book houseboats well in advance',
      'Shikara rides at dawn are magical',
      'September-October offers best weather',
      'March-April brings spring flowers',
      'Local Kashmiri cuisine is excellent',
    ],
  },
  {
    id: 17,
    name: 'Gulmarg',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1600948836101-f9ffda59d250?q=80&w=1200',
    tagline: 'Snow meadows',
    description: 'Meadow in the mountains, famous for skiing, gondola rides, and natural beauty.',
    bestTime: 'December to March',
    altitude: '2,730 m',
    aboutPlace: 'Gulmarg is a scenic destination in Kashmir, famous for its vast meadows, skiing facilities, and breathtaking mountain views. The destination offers world-class skiing and adventure activities.',
    famousPlaces: ['Gondola Ride', 'Ski Slopes', 'Meadows', 'Strawberry Fields', 'Aharbal Falls'],
    activities: ['Skiing', 'Gondola Rides', 'Photography', 'Trekking', 'Camping'],
    bestFor: ['Skiers', 'Adventure Seekers', 'Photographers', 'Couples'],
    accommodation: 'Hotels and resorts in Gulmarg, many with skiing facilities.',
    gettingThere: 'From Srinagar: 1.5-2 hours by road. From Baramulla: 45 minutes.',
    duration: '2-4 days',
    temperature: {
      summer: '10-20°C',
      winter: '-15-5°C',
    },
    highlights: [
      'Gondola Ride: Asia\'s highest cable car with panoramic views',
      'Skiing: World-class slopes December-March',
      'Meadows: Vast flower-filled alpine grasslands',
      'Strawberry Season: June offers fresh strawberries',
    ],
    tips: [
      'Winter skiing: December-February',
      'Gondola ride open year-round (weather permitting)',
      'Summer (June-August) offers trekking and flower viewing',
      'Book skiing lessons at resorts',
      'Weather can be unpredictable; carry layers',
    ],
  },
  {
    id: 18,
    name: 'Pahalgam',
    region: 'Kashmir',
    image: 'https://images.unsplash.com/photo-1614591276564-7c9f3c9f9b7b?q=80&w=1200',
    tagline: 'Lidder Valley beauty',
    description: 'Scenic town in Lidder Valley with trekking trails and alpine forests.',
    bestTime: 'April to August',
    altitude: '2,440 m',
    aboutPlace: 'Pahalgam is a scenic town in the Lidder Valley, famous for its trekking trails, pristine rivers, and alpine forests. It\'s a perfect destination for nature lovers and trekkers.',
    famousPlaces: ['Lidder River', 'Kolahoi Glacier', 'Baisaran Meadow', 'Aru Valley', 'Holi Nag Peak'],
    activities: ['Trekking', 'Fishing', 'Photography', 'River Walks', 'Camping'],
    bestFor: ['Trekkers', 'Fishermen', 'Nature Lovers', 'Photographers'],
    accommodation: 'Hotels and guesthouses in Pahalgam town with river views.',
    gettingThere: 'From Srinagar: 2-3 hours by road. From Anantnag: 1.5 hours.',
    duration: '3-4 days',
    temperature: {
      summer: '12-22°C',
      winter: '-5-8°C',
    },
    highlights: [
      'Lidder River: Clear alpine river for fishing',
      'Kolahoi Glacier Trek: Challenging trek to glacier',
      'Baisaran Meadow: Scenic trekking base camp',
      'Aru Valley: Beautiful side valley for exploration',
    ],
    tips: [
      'April-May and September-October offer best weather',
      'Kolahoi trek requires good fitness and acclimatization',
      'Fishing season: March-September',
      'Hire local guides for trekking',
      'Pack adequate gear for mountain trekking',
    ],
  },
  {
    id: 19,
    name: 'Leh',
    region: 'Ladakh',
    image: 'https://images.unsplash.com/photo-1605640840605-14ac1855827b?q=80&w=1200',
    tagline: 'High-altitude desert',
    description: 'Gateway to Ladakh with monasteries, stark landscapes, and adventure opportunities.',
    bestTime: 'June to September',
    altitude: '3,505 m',
    aboutPlace: 'Leh is the capital of Ladakh, famous for its high-altitude desert landscape, Buddhist monasteries, and adventure opportunities. The town serves as the gateway to exploring Ladakh\'s unique culture and terrain.',
    famousPlaces: ['Leh Palace', 'Shanti Stupa', 'Thiksey Monastery', 'Chang La Pass', 'Pangong Lake'],
    activities: ['Motorbiking', 'Trekking', 'Monastery Tours', 'Photography', 'Mountain Biking'],
    bestFor: ['Adventure Seekers', 'Motorcyclists', 'Photographers', 'Spiritual Seekers'],
    accommodation: 'Hotels, guesthouses, and homestays in Leh town.',
    gettingThere: 'By Air: Leh Airport (easiest). By Road: Manali-Leh or Srinagar-Leh highway (challenging).',
    duration: '4-5 days',
    temperature: {
      summer: '10-25°C',
      winter: '-20-5°C',
    },
    highlights: [
      'Leh Palace: Historic royal residence with panoramic views',
      'Monasteries: Thiksey, Hemis, and Diskit monasteries',
      'Pangong Lake: High-altitude salt lake with stunning views',
      'Motorbike Routes: Famous Leh-Manali highway',
    ],
    tips: [
      'Acclimatization essential: spend 2-3 days before treks',
      'June-September is accessible period',
      'Leh-Manali highway: June-September only',
      'Travel with experienced guides or tour operators',
      'Carry altitude sickness medication',
    ],
  },
  {
    id: 20,
    name: 'Nubra Valley',
    region: 'Ladakh',
    image: 'https://images.unsplash.com/photo-1593181629936-11c609b8db9b?q=80&w=1200',
    tagline: 'Sand dunes & monasteries',
    description: 'Cold desert valley with sand dunes, monasteries, and Bactrian camels.',
    bestTime: 'July to September',
    altitude: '3,350 m',
    aboutPlace: 'Nubra Valley is a unique cold desert valley in Ladakh, featuring sand dunes, Buddhist monasteries, and Bactrian camels. The valley offers an otherworldly experience with stark desert landscape and rich Tibetan culture.',
    famousPlaces: ['Diskit Monastery', 'Hundar Sand Dunes', 'Bactrian Camels', 'Panamik Hot Springs', 'Khardung La Pass'],
    activities: ['Camel Trekking', 'Photography', 'Monastery Tours', 'Hot Spring Visits', 'Mountain Exploration'],
    bestFor: ['Adventure Seekers', 'Photographers', 'Spiritual Seekers', 'Nature Lovers'],
    accommodation: 'Limited guesthouses and homestays. Book well in advance.',
    gettingThere: 'From Leh: 5-6 hours via Khardung La Pass. Requires good vehicle and driver.',
    duration: '2-3 days',
    temperature: {
      summer: '5-20°C',
      winter: '-20-5°C',
    },
    highlights: [
      'Sand Dunes: Unique desert landscape at high altitude',
      'Diskit Monastery: Ancient Buddhist monastery with views',
      'Bactrian Camels: Unique desert transport experience',
      'Panamik Hot Springs: Natural thermal springs',
    ],
    tips: [
      'July-September is accessible period',
      'Altitude acclimatization essential',
      'Khardung La Pass can close in snow',
      'Camel trekking is popular activity',
      'Carry sun protection for desert sun',
    ],
  },
];
[V0_FILE]typescriptreact:file="app/destinations/[id]/page.tsx" isMerged="true"
'use client';

import { useState } from 'react';
import Image from 'next/image';
import Navigation from '@/components/navigation';
import Footer from '@/components/footer';
import { detailedDestinations } from '@/data/destinations-detailed';
import { MapPin, Calendar, TrendingUp, Heart, MessageCircle, Phone } from 'lucide-react';

export default function DestinationDetail({ params }: { params: { id: string } }) {
  const destination = detailedDestinations.find((d) => d.id === parseInt(params.id));
  const [isFavorite, setIsFavorite] = useState(false);

if (!destination) {
    return (
      <>
        <Navigation onNavigate={() => {}} />
        <main className="min-h-screen bg-background flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-foreground mb-4">Destination Not Found</h1>
            <p className="text-foreground/70">Sorry, we couldn't find the destination you're looking for.</p>
          </div>
        </main>
        <Footer />
      </>
    );
  }

return (
    <>
      <Navigation onNavigate={() => {}} />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative h-96 sm:h-[500px] overflow-hidden">
          <Image
            src={destination.image || "/placeholder.svg"}
            alt={destination.name}
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-black/40" />
          <div className="absolute inset-0 flex flex-col justify-end p-4 sm:p-8">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white text-balance">{destination.name}</h1>
            <p className="text-lg sm:text-xl text-gray-200 mt-2">{destination.tagline}</p>
          </div>
        </section>

{/* Main Content */}
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
            {/* Left Column - Main Content */}
            <div className="lg:col-span-2 space-y-6 sm:space-y-8">
              {/* Quick Info Cards */}
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                <div className="bg-card rounded-xl p-4 shadow-md">
                  <p className="text-xs sm:text-sm text-muted-foreground mb-1">Altitude</p>
                  <p className="text-base sm:text-lg font-bold text-primary">{destination.altitude}</p>
                </div>
                <div className="bg-card rounded-xl p-4 shadow-md">
                  <p className="text-xs sm:text-sm text-muted-foreground mb-1">Best Time</p>
                  <p className="text-base sm:text-lg font-bold text-primary">{destination.bestTime}</p>
                </div>
                <div className="bg-card rounded-xl p-4 shadow-md">
                  <p className="text-xs sm:text-sm text-muted-foreground mb-1">Duration</p>
                  <p className="text-base sm:text-lg font-bold text-primary">{destination.duration}</p>
                </div>
              </div>

{/* About Place */}
              <div>
                <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4">About {destination.name}</h2>
                <p className="text-foreground/80 leading-relaxed text-sm sm:text-base">{destination.aboutPlace}</p>
              </div>

{/* Famous Places */}
              <div>
                <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-4">Famous Places</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {destination.famousPlaces.map((place, idx) => (
                    <div key={idx} className="bg-card rounded-lg p-4 shadow-md flex items-start gap-3">
                      <MapPin className="w-5 h-5 text-primary flex-shrink-0 mt-1" />
                      <span className="text-foreground text-sm sm:text-base">{place}</span>
                    </div>
                  ))}
                </div>
              </div>

{/* Activities */}
              <div>
                <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-4">Activities</h3>
                <div className="flex flex-wrap gap-2 sm:gap-3">
                  {destination.activities.map((activity, idx) => (
                    <span
                      key={idx}
                      className="bg-primary text-primary-foreground px-4 py-2 rounded-full text-sm sm:text-base font-medium"
                    >
                      {activity}
                    </span>
                  ))}
                </div>
              </div>

{/* Highlights */}
              <div>
                <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-4">Highlights</h3>
                <div className="space-y-3">
                  {destination.highlights.map((highlight, idx) => (
                    <div key={idx} className="bg-card rounded-lg p-4 shadow-md">
                      <p className="text-foreground text-sm sm:text-base">{highlight}</p>
                    </div>
                  ))}
                </div>
              </div>

{/* Travel Tips */}
              <div>
                <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-4">Travel Tips</h3>
                <ul className="space-y-2 sm:space-y-3">
                  {destination.tips.map((tip, idx) => (
                    <li key={idx} className="flex gap-3 text-foreground/80 text-sm sm:text-base">
                      <span className="text-primary font-bold flex-shrink-0">•</span>
                      <span>{tip}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

{/* Right Column - Sidebar */}
            <div className="space-y-4 sm:space-y-6">
              {/* Temperature Info */}
              <div className="bg-card rounded-xl p-5 sm:p-6 shadow-md">
                <h4 className="text-lg sm:text-xl font-bold text-foreground mb-4">Temperature</h4>
                <div className="space-y-3">
                  <div>
                    <p className="text-sm text-muted-foreground mb-1">Summer</p>
                    <p className="text-base sm:text-lg font-semibold text-primary">{destination.temperature.summer}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground mb-1">Winter</p>
                    <p className="text-base sm:text-lg font-semibold text-accent">{destination.temperature.winter}</p>
                  </div>
                </div>
              </div>

{/* Best For */}
              <div className="bg-card rounded-xl p-5 sm:p-6 shadow-md">
                <h4 className="text-lg sm:text-xl font-bold text-foreground mb-4">Best For</h4>
                <div className="space-y-2">
                  {destination.bestFor.map((type, idx) => (
                    <span key={idx} className="block text-sm sm:text-base text-foreground/80">• {type}</span>
                  ))}
                </div>
              </div>

{/* Accommodation */}
              <div className="bg-card rounded-xl p-5 sm:p-6 shadow-md">
                <h4 className="text-lg sm:text-xl font-bold text-foreground mb-3">Accommodation</h4>
                <p className="text-sm sm:text-base text-foreground/80">{destination.accommodation}</p>
              </div>

{/* Getting There */}
              <div className="bg-card rounded-xl p-5 sm:p-6 shadow-md">
                <h4 className="text-lg sm:text-xl font-bold text-foreground mb-3">Getting There</h4>
                <p className="text-sm sm:text-base text-foreground/80">{destination.gettingThere}</p>
              </div>

{/* CTA Buttons */}
              <div className="space-y-3 sticky top-20">
                <button
                  onClick={() => setIsFavorite(!isFavorite)}
                  className={`w-full py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 ${
                    isFavorite
                      ? 'bg-primary text-primary-foreground'
                      : 'bg-card text-foreground border-2 border-primary hover:bg-primary/10'
                  }`}
                >
                  <Heart className={`w-5 h-5 ${isFavorite ? 'fill-current' : ''}`} />
                  {isFavorite ? 'Saved' : 'Save Trip'}
                </button>

<a
                  href="https://wa.me/919459180333"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full bg-primary text-primary-foreground py-3 rounded-xl font-semibold hover:opacity-90 transition-all flex items-center justify-center gap-2 shadow-md"
                >
                  <MessageCircle className="w-5 h-5" />
                  WhatsApp
                </a>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}
[V0_FILE]typescriptreact:file="app/destinations/[id]/layout.tsx" isMerged="true"
import React from "react"
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Destination Details | Green Peak Expedition',
  description: 'Explore detailed information about our Himalayan destinations including activities, best time to visit, and travel tips.',
};

export default function DestinationLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return children;
}
[V0_FILE]typescriptreact:file="components/contact-info-card.tsx"
'use client';

import React from "react"

import {
  Mail,
  Phone,
  MapPin,
  Instagram,
  Facebook,
  MessageCircle,
  Quote,
} from 'lucide-react';
import { motion } from 'framer-motion';

export default function ContactInfoCard() {
  return (
    <section className="w-full flex justify-center px-4 sm:px-6">
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
        className="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden"
      >
        {/* Header */}
        <div className="text-center px-6 sm:px-8 md:px-12 pt-8 sm:pt-10 md:pt-12 pb-6 sm:pb-8">
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1, duration: 0.6 }}
            className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-3"
          >
            Get In Touch
          </motion.h1>
          <p className="text-base sm:text-lg text-muted-foreground">
            We'd love to hear from you. Reach out anytime.
          </p>
        </div>

{/* Main Content - Two Column Layout */}
        <div className="flex flex-col lg:flex-row">
          {/* Left Side - Quote Section */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2, duration: 0.6 }}
            className="w-full lg:w-1/2 bg-gradient-to-br from-secondary/40 to-primary/10 p-8 sm:p-10 md:p-12 flex flex-col justify-center"
          >
            <blockquote className="space-y-6">
              <Quote className="w-10 h-10 text-primary" />
              <p className="italic text-lg sm:text-xl md:text-2xl text-foreground font-light leading-relaxed">
                "Travel is not just about destinations, it's about the connections we create along the journey."
              </p>
              <div className="pt-6 border-t border-primary/20">
                <p className="text-sm text-muted-foreground font-medium">
                  Green Peak Expedition Team
                </p>
              </div>
            </blockquote>
          </motion.div>

{/* Right Side - Contact Methods */}
          <div className="w-full lg:w-1/2 p-8 sm:p-10 md:p-12 flex flex-col justify-center gap-8">
            {/* Phone */}
            <motion.div
              whileHover={{ translateX: 5 }}
              transition={{ type: 'spring', stiffness: 300 }}
              className="space-y-3"
            >
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                  <Phone className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="text-xs sm:text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                    Phone
                  </p>
                  <p className="text-lg sm:text-xl font-bold text-foreground">
                    +91 9459180333
                  </p>
                </div>
              </div>
              <a
                href="tel:9459180333"
                className="inline-flex w-full justify-center bg-primary text-primary-foreground px-6 py-2.5 rounded-xl font-semibold shadow-md hover:shadow-lg transition"
              >
                Call Now
              </a>
            </motion.div>

{/* Email */}
            <motion.div
              whileHover={{ translateX: 5 }}
              transition={{ type: 'spring', stiffness: 300 }}
              className="space-y-3"
            >
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
                  <Mail className="w-6 h-6 text-accent" />
                </div>
                <div className="min-w-0">
                  <p className="text-xs sm:text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                    Email
                  </p>
                  <p className="text-sm font-bold text-foreground truncate">
                    greenpeakexpedition986@gmail.com
                  </p>
                </div>
              </div>
              <a
                href="mailto:greenpeakexpedition986@gmail.com"
                className="inline-flex w-full justify-center bg-accent text-accent-foreground px-6 py-2.5 rounded-xl font-semibold shadow-md hover:shadow-lg transition"
              >
                Send Email
              </a>
            </motion.div>

{/* Address */}
            <motion.div
              whileHover={{ translateX: 5 }}
              transition={{ type: 'spring', stiffness: 300 }}
              className="space-y-3"
            >
              <div className="flex items-start gap-3">
                <MapPin className="w-6 h-6 text-primary mt-1 shrink-0" />
                <div>
                  <p className="text-xs sm:text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                    Address
                  </p>
                  <p className="text-sm text-foreground leading-relaxed">
                    Rampur Bushahr, Shimla<br/>
                    Himachal Pradesh
                  </p>
                </div>
              </div>
            </motion.div>

{/* Secondary Phone */}
            <div className="pt-4 border-t border-border">
              <p className="text-xs text-muted-foreground mb-2">
                ALTERNATIVE CONTACT
              </p>
              <a
                href="tel:9805230180"
                className="text-base font-bold text-primary hover:text-accent transition"
              >
                +91 9805230180
              </a>
            </div>

{/* Social Links */}
            <div className="pt-4 border-t border-border">
              <p className="text-xs text-muted-foreground mb-4 uppercase tracking-wide">
                Follow Us
              </p>
              <div className="flex gap-3">
                <SocialLink
                  href="https://www.instagram.com/greenpeakexpedition/"
                  icon={<Instagram className="w-5 h-5" />}
                />
                <SocialLink
                  href="https://www.facebook.com/greenpeakexpedition"
                  icon={<Facebook className="w-5 h-5" />}
                />
                <SocialLink
                  href="https://wa.me/919459180333"
                  icon={<MessageCircle className="w-5 h-5" />}
                  accent
                />
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </section>
  );
}