import React, { useState } from 'react';
import { 
  Map, Calendar, ShoppingCart, User, FileText, 
  ChevronRight, Mountain, Menu, X, Clock, MapPin, 
  Trash2, CreditCard, CheckCircle 
} from 'lucide-react';

// --- DATOS MOCK DE DESTINOS ---
const destinationsData = [
  { id: 1, name: 'Mirador de Cóndores', price: 35000, difficulty: 'Media', duration: '1 Día', image: 'bg-emerald-800', desc: 'Espectacular vista en la Cordillera de los Andes donde podrás observar el vuelo del Cóndor Andino en su hábitat natural.' },
  { id: 2, name: 'Bosque de los Brujos', price: 28000, difficulty: 'Baja', duration: '1 Día', image: 'bg-stone-700', desc: 'Ruta mística rodeada de flora nativa y formaciones rocosas únicas. Ideal para principiantes y familias.' },
  { id: 3, name: 'Embalse El Yeso', price: 45000, difficulty: 'Baja', duration: '1 Día', image: 'bg-cyan-800', desc: 'Maravillosa reserva de agua color turquesa enclavada en medio de la Cordillera de los Andes, en el Cajón del Maipo.' },
  { id: 4, name: 'Cerro Manquehue', price: 25000, difficulty: 'Media-Alta', duration: 'Medio Día', image: 'bg-green-800', desc: 'El clásico de Santiago. Un desafío físico que te recompensa con la mejor vista panorámica de la capital.' },
  { id: 5, name: 'Alto El Naranjo', price: 22000, difficulty: 'Media', duration: 'Medio Día', image: 'bg-amber-700', desc: 'Ruta sombreada con un icónico Quillay en su cumbre. Excelente para entrenamiento de Trail y Trekking.' },
  { id: 6, name: 'Baños Morales', price: 40000, difficulty: 'Baja', duration: '1 Día', image: 'bg-orange-800', desc: 'Relájate en aguas termales ricas en minerales después de una suave caminata por el sector.' },
  { id: 7, name: 'Salto de Apoquindo', price: 30000, difficulty: 'Alta', duration: '1 Día', image: 'bg-blue-800', desc: 'Desafiante ruta en el Parque Aguas de Ramón que culmina en una impresionante cascada de 30 metros.' },
  { id: 8, name: 'Cajón del Diablo', price: 38000, difficulty: 'Media', duration: '1 Día', image: 'bg-stone-800', desc: 'Ruta profunda y enigmática, perfecta para desconectarse y sentir la inmensidad de la montaña.' },
  { id: 9, name: 'Laguna Negra', price: 55000, difficulty: 'Alta', duration: '1 Día', image: 'bg-slate-800', desc: 'Expedición de alta exigencia hacia una de las lagunas glaciares más hermosas y prístinas de la zona central.' },
  { id: 10, name: 'Monumento El Morado', price: 48000, difficulty: 'Media', duration: '1 Día', image: 'bg-zinc-800', desc: 'Caminata hacia el glaciar San Francisco, rodeado de imponentes cumbres y morrenas glaciares.' }
];

export default function App() {
  const [currentView, setCurrentView] = useState('home');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const [selectedDestination, setSelectedDestination] = useState(null);
  const [selectedDate, setSelectedDate] = useState('');

  // Utilidades de formato
  const formatPrice = (price) => {
    return new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(price);
  };

  // Navegación
  const navigateTo = (view) => {
    setCurrentView(view);
    setIsMobileMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const viewDestination = (dest) => {
    setSelectedDestination(dest);
    setSelectedDate(''); // Resetear fecha
    navigateTo('destination-detail');
  };

  // Carrito
  const addToCart = () => {
    if (!selectedDate) {
      alert("Por favor selecciona una fecha en el calendario.");
      return;
    }
    const newItem = {
      ...selectedDestination,
      cartId: Date.now(),
      date: selectedDate
    };
    setCart([...cart, newItem]);
    navigateTo('cart');
  };

  const removeFromCart = (cartId) => {
    setCart(cart.filter(item => item.cartId !== cartId));
  };

  const cartTotal = cart.reduce((total, item) => total + item.price, 0);

  // --- COMPONENTES DE VISTA ---

  const HomeView = () => (
    <div className="animate-fadeIn">
      {/* Hero Section */}
      <div className="relative bg-stone-900 text-white overflow-hidden">
        <div className="absolute inset-0 opacity-40 bg-[url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=80')] bg-cover bg-center mix-blend-overlay"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
          <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
            Descubre la majestuosidad <br />
            <span className="text-amber-500">de las montañas chilenas</span>
          </h1>
          <p className="text-xl md:text-2xl text-stone-300 max-w-2xl mb-10">
            Únete a Travesía 360 y vive experiencias inolvidables de trekking y montañismo guiado.
          </p>
          <button 
            onClick={() => navigateTo('destinations')}
            className="bg-amber-500 hover:bg-amber-600 text-stone-900 font-bold py-4 px-8 rounded-lg shadow-lg flex items-center transition-all transform hover:scale-105"
          >
            Ver Expediciones <ChevronRight className="ml-2" />
          </button>
        </div>
      </div>

      {/* Featured Destinations */}
      <div className="py-16 bg-stone-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-stone-800">Destinos Destacados</h2>
            <div className="w-24 h-1 bg-amber-500 mx-auto mt-4 rounded"></div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {destinationsData.slice(0, 3).map((dest) => (
              <div key={dest.id} className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow cursor-pointer" onClick={() => viewDestination(dest)}>
                <div className={`h-48 ${dest.image} flex items-center justify-center`}>
                  <Mountain size={48} className="text-white opacity-50" />
                </div>
                <div className="p-6">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="text-xl font-bold text-stone-800">{dest.name}</h3>
                    <span className="bg-stone-100 text-stone-600 text-xs px-2 py-1 rounded font-semibold">{dest.difficulty}</span>
                  </div>
                  <p className="text-stone-600 mb-4 line-clamp-2">{dest.desc}</p>
                  <div className="flex justify-between items-center mt-4">
                    <span className="text-xl font-bold text-emerald-700">{formatPrice(dest.price)}</span>
                    <button className="text-amber-600 font-semibold flex items-center hover:text-amber-700">
                      Ver más <ChevronRight size={16} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="text-center mt-10">
            <button onClick={() => navigateTo('destinations')} className="border-2 border-stone-800 text-stone-800 hover:bg-stone-800 hover:text-white font-bold py-3 px-8 rounded-lg transition-colors">
              Ver Todos los Destinos
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  const DestinationsView = () => (
    <div className="py-12 bg-stone-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-stone-800 mb-2">Nuestras Expediciones</h2>
        <p className="text-stone-600 mb-8">Selecciona tu próximo desafío en la montaña.</p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {destinationsData.map((dest) => (
             <div key={dest.id} className="bg-white rounded-xl shadow border border-stone-100 overflow-hidden hover:shadow-lg transition-shadow cursor-pointer flex flex-col" onClick={() => viewDestination(dest)}>
               <div className={`h-40 ${dest.image} flex items-center justify-center relative`}>
                  <Mountain size={40} className="text-white opacity-50" />
               </div>
               <div className="p-5 flex-grow flex flex-col">
                 <h3 className="text-lg font-bold text-stone-800 mb-1">{dest.name}</h3>
                 <div className="flex items-center text-sm text-stone-500 mb-3 space-x-4">
                   <span className="flex items-center"><Clock size={14} className="mr-1"/> {dest.duration}</span>
                   <span className="flex items-center"><MapPin size={14} className="mr-1"/> {dest.difficulty}</span>
                 </div>
                 <p className="text-stone-600 text-sm mb-4 flex-grow">{dest.desc}</p>
                 <div className="flex justify-between items-center mt-auto pt-4 border-t border-stone-100">
                   <span className="text-lg font-bold text-emerald-700">{formatPrice(dest.price)}</span>
                   <button className="bg-emerald-800 hover:bg-emerald-900 text-white text-sm font-semibold py-2 px-4 rounded transition-colors">
                     Reservar
                   </button>
                 </div>
               </div>
             </div>
          ))}
        </div>
      </div>
    </div>
  );

  const DestinationDetailView = () => {
    if (!selectedDestination) return null;
    const dest = selectedDestination;
    
    return (
      <div className="py-12 bg-stone-50 min-h-screen animate-fadeIn">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <button onClick={() => navigateTo('destinations')} className="text-emerald-700 font-semibold mb-6 flex items-center hover:underline">
             &larr; Volver a expediciones
          </button>
          
          <div className="bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
            {/* Img Section */}
            <div className={`md:w-1/2 ${dest.image} min-h-[300px] flex items-center justify-center p-8`}>
               <div className="text-center">
                 <Mountain size={80} className="text-white opacity-80 mx-auto mb-4" />
                 <h2 className="text-3xl font-bold text-white drop-shadow-md">{dest.name}</h2>
               </div>
            </div>
            
            {/* Info & Booking Section */}
            <div className="md:w-1/2 p-8 lg:p-10 flex flex-col">
              <div className="mb-6">
                <div className="flex justify-between items-start mb-4">
                  <h1 className="text-3xl font-bold text-stone-800">{dest.name}</h1>
                  <span className="bg-emerald-100 text-emerald-800 font-bold px-3 py-1 rounded text-sm">
                    {formatPrice(dest.price)}
                  </span>
                </div>
                <div className="flex space-x-6 text-stone-600 mb-6">
                   <span className="flex items-center bg-stone-100 px-3 py-1 rounded"><Clock size={16} className="mr-2"/> {dest.duration}</span>
                   <span className="flex items-center bg-stone-100 px-3 py-1 rounded"><MapPin size={16} className="mr-2"/> Dif: {dest.difficulty}</span>
                </div>
                <p className="text-stone-700 leading-relaxed mb-6">
                  {dest.desc}
                  <br/><br/>
                  Esta expedición incluye guía certificado, equipo de primeros auxilios grupal, y registro en las autoridades correspondientes. Transporte sujeto a disponibilidad (consultar).
                </p>
              </div>

              {/* Booking Form (Calendar) */}
              <div className="mt-auto bg-stone-50 p-6 rounded-xl border border-stone-200">
                <h3 className="font-bold text-stone-800 mb-4 flex items-center">
                  <Calendar size={20} className="mr-2 text-emerald-700"/> Selecciona tu fecha
                </h3>
                <div className="mb-4">
                  <label className="block text-sm font-medium text-stone-700 mb-1">Fecha de la expedición</label>
                  <input 
                    type="date" 
                    className="w-full border-stone-300 rounded-lg shadow-sm p-3 border focus:ring-emerald-500 focus:border-emerald-500"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    min={new Date().toISOString().split('T')[0]} // Solo fechas futuras
                  />
                </div>
                <button 
                  onClick={addToCart}
                  className="w-full bg-amber-500 hover:bg-amber-600 text-stone-900 font-bold py-3 px-4 rounded-lg flex items-center justify-center transition-colors shadow-md"
                >
                  <ShoppingCart size={20} className="mr-2" /> Agregar al Carrito
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const CartView = () => (
    <div className="py-12 bg-stone-50 min-h-screen">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-stone-800 mb-8 flex items-center">
          <ShoppingCart className="mr-3" /> Tu Carrito de Compras
        </h2>
        
        {cart.length === 0 ? (
          <div className="bg-white p-12 text-center rounded-xl shadow border border-stone-100">
            <Mountain size={48} className="mx-auto text-stone-300 mb-4" />
            <h3 className="text-xl font-bold text-stone-600 mb-2">Tu mochila está vacía</h3>
            <p className="text-stone-500 mb-6">Aún no has seleccionado ninguna expedición.</p>
            <button onClick={() => navigateTo('destinations')} className="bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-2 px-6 rounded transition-colors">
              Explorar Destinos
            </button>
          </div>
        ) : (
          <div className="flex flex-col md:flex-row gap-8">
            <div className="md:w-2/3">
              <div className="bg-white rounded-xl shadow border border-stone-100 divide-y divide-stone-100">
                {cart.map((item) => (
                  <div key={item.cartId} className="p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between">
                    <div className="flex-grow">
                      <h4 className="text-lg font-bold text-stone-800">{item.name}</h4>
                      <p className="text-sm text-stone-500 flex items-center mt-1">
                        <Calendar size={14} className="mr-1" /> Fecha: {item.date}
                      </p>
                    </div>
                    <div className="flex items-center justify-between w-full sm:w-auto mt-4 sm:mt-0">
                      <span className="font-bold text-emerald-700 sm:mr-6">{formatPrice(item.price)}</span>
                      <button onClick={() => removeFromCart(item.cartId)} className="text-red-500 hover:text-red-700 p-2 bg-red-50 rounded-full">
                        <Trash2 size={18} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            
            <div className="md:w-1/3">
              <div className="bg-white p-6 rounded-xl shadow border border-stone-100 sticky top-24">
                <h3 className="text-lg font-bold text-stone-800 mb-4 border-b pb-2">Resumen</h3>
                <div className="flex justify-between mb-2 text-stone-600">
                  <span>Subtotal ({cart.length} items)</span>
                  <span>{formatPrice(cartTotal)}</span>
                </div>
                <div className="flex justify-between font-bold text-xl mt-4 pt-4 border-t border-stone-200">
                  <span>Total</span>
                  <span className="text-emerald-700">{formatPrice(cartTotal)}</span>
                </div>
                <button className="w-full mt-6 bg-amber-500 hover:bg-amber-600 text-stone-900 font-bold py-3 px-4 rounded-lg flex items-center justify-center transition-colors shadow">
                  <CreditCard size={20} className="mr-2" /> Pagar Ahora
                </button>
                <div className="mt-4 text-xs text-center text-stone-400 flex items-center justify-center">
                  <CheckCircle size={12} className="mr-1" /> Pago 100% seguro con Webpay
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );

  const RegisterView = () => (
    <div className="py-12 bg-stone-50 min-h-screen">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-white p-8 rounded-2xl shadow border border-stone-100">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-stone-800">Ficha de Registro</h2>
            <p className="text-stone-600 mt-2">Obligatorio para todos los participantes antes de la expedición.</p>
          </div>
          
          <form className="space-y-6" onSubmit={(e) => { e.preventDefault(); alert('Registro guardado exitosamente.'); navigateTo('home'); }}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">Nombre Completo *</label>
                <input type="text" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">RUT / Pasaporte *</label>
                <input type="text" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">Email *</label>
                <input type="email" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">Teléfono *</label>
                <input type="tel" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
            </div>

            <hr className="border-stone-200" />

            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Nivel de Experiencia en Montaña *</label>
              <select required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500">
                <option value="">Selecciona un nivel...</option>
                <option value="none">Ninguna - Es mi primera vez</option>
                <option value="low">Básica - Caminatas cortas en parques urbanos</option>
                <option value="medium">Media - Trekking regular (ej. Cerro Manquehue)</option>
                <option value="high">Alta - Cumbres sobre 3000m y uso de equipo</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-stone-700 mb-1">Condiciones Médicas o Alergias</label>
              <textarea className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" rows="3" placeholder="Si no tienes, escribe 'Ninguna'"></textarea>
            </div>

            <hr className="border-stone-200" />
            
            <h3 className="font-bold text-stone-800">Contacto de Emergencia</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">Nombre del contacto *</label>
                <input type="text" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-stone-700 mb-1">Teléfono del contacto *</label>
                <input type="tel" required className="w-full border-stone-300 rounded-lg p-2 border focus:ring-emerald-500 focus:border-emerald-500" />
              </div>
            </div>

            <div className="flex items-start mt-4">
              <input type="checkbox" required className="mt-1 mr-2 text-emerald-600 focus:ring-emerald-500 rounded" />
              <label className="text-sm text-stone-600">
                He leído y acepto los <span onClick={() => navigateTo('terms')} className="text-emerald-700 font-bold cursor-pointer hover:underline">Términos y Condiciones</span> y declaro que la información proporcionada es verdadera.
              </label>
            </div>

            <button type="submit" className="w-full bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-3 px-4 rounded-lg transition-colors mt-6">
              Enviar Ficha de Registro
            </button>
          </form>
        </div>
      </div>
    </div>
  );

  const BlogView = () => (
    <div className="py-12 bg-stone-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-stone-800 mb-8">Blog de Montaña</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="bg-white rounded-xl shadow overflow-hidden">
            <div className="h-48 bg-emerald-900"></div>
            <div className="p-6">
              <span className="text-amber-600 text-sm font-bold tracking-wider uppercase mb-2 block">Guías</span>
              <h3 className="text-xl font-bold text-stone-800 mb-2">Sistema de Capas: Cómo vestirse para el trekking</h3>
              <p className="text-stone-600 mb-4">Descubre la importancia de la primera, segunda y tercera capa para mantener tu temperatura corporal en la Cordillera de los Andes.</p>
              <button className="text-emerald-700 font-semibold hover:underline">Leer artículo completo</button>
            </div>
          </div>
          
          <div className="bg-white rounded-xl shadow overflow-hidden">
            <div className="h-48 bg-stone-800"></div>
            <div className="p-6">
              <span className="text-amber-600 text-sm font-bold tracking-wider uppercase mb-2 block">Destinos</span>
              <h3 className="text-xl font-bold text-stone-800 mb-2">Cerro Manquehue: Consejos para conquistar la cumbre</h3>
              <p className="text-stone-600 mb-4">El clásico capitalino requiere respeto. Te contamos qué llevar, por dónde subir y a qué hora es mejor realizar el ascenso.</p>
              <button className="text-emerald-700 font-semibold hover:underline">Leer artículo completo</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const TermsView = () => (
    <div className="py-12 bg-stone-50 min-h-screen">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 bg-white p-8 rounded-xl shadow">
        <h2 className="text-2xl font-bold text-stone-800 mb-6">Términos y Condiciones Generales</h2>
        <div className="prose text-stone-600 space-y-4 text-sm">
          <p><strong>1. Políticas de Reserva:</strong> Toda reserva se hace efectiva una vez confirmado el pago a través de nuestro sitio web. Los cupos son limitados y se asignan por orden de pago.</p>
          <p><strong>2. Políticas de Cancelación:</strong> Se permite cancelar o reagendar hasta 48 horas antes del inicio de la expedición. Cancelaciones con menos de 48 horas no tendrán devolución de dinero.</p>
          <p><strong>3. Clima y Seguridad:</strong> Travesía 360 se reserva el derecho de cancelar o modificar la ruta de la expedición si las condiciones climáticas (lluvia, nieve, viento extremo) o eventos de fuerza mayor ponen en riesgo la seguridad del grupo. En caso de cancelación por nuestra parte, se ofrecerá reagendamiento o devolución total.</p>
          <p><strong>4. Estado Físico y Salud:</strong> El cliente declara tener la salud y estado físico compatibles con la actividad que está reservando, según la dificultad descrita. Es obligatorio llenar la Ficha de Registro.</p>
          <p><strong>5. Instrucciones del Guía:</strong> Durante la expedición, las decisiones del guía a cargo son definitivas y obedecen a protocolos de seguridad de montaña.</p>
        </div>
      </div>
    </div>
  );

  // --- NAVEGACIÓN Y ESTRUCTURA PRINCIPAL ---

  return (
    <div className="font-sans text-stone-900 bg-stone-50 flex flex-col min-h-screen selection:bg-amber-200">
      
      {/* NAVBAR */}
      <nav className="bg-emerald-900 text-white sticky top-0 z-50 shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            {/* Logo */}
            <div className="flex items-center cursor-pointer" onClick={() => navigateTo('home')}>
              <Mountain className="h-8 w-8 text-amber-500 mr-2" />
              <span className="font-bold text-2xl tracking-tight">Travesía <span className="text-amber-500">360</span></span>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8 items-center">
              <button onClick={() => navigateTo('home')} className={`hover:text-amber-400 transition-colors font-medium ${currentView === 'home' ? 'text-amber-500' : ''}`}>Inicio</button>
              <button onClick={() => navigateTo('destinations')} className={`hover:text-amber-400 transition-colors font-medium ${currentView === 'destinations' ? 'text-amber-500' : ''}`}>Destinos</button>
              <button onClick={() => navigateTo('blog')} className={`hover:text-amber-400 transition-colors font-medium ${currentView === 'blog' ? 'text-amber-500' : ''}`}>Blog</button>
              <button onClick={() => navigateTo('register')} className={`hover:text-amber-400 transition-colors font-medium flex items-center ${currentView === 'register' ? 'text-amber-500' : ''}`}>
                <User size={16} className="mr-1"/> Registro
              </button>
              
              {/* Cart Button */}
              <button 
                onClick={() => navigateTo('cart')} 
                className="relative bg-emerald-800 hover:bg-emerald-700 p-3 rounded-full transition-colors flex items-center"
              >
                <ShoppingCart size={20} />
                {cart.length > 0 && (
                  <span className="absolute -top-1 -right-1 bg-amber-500 text-stone-900 text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
                    {cart.length}
                  </span>
                )}
              </button>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
               <button 
                onClick={() => navigateTo('cart')} 
                className="relative mr-4 p-2"
               >
                 <ShoppingCart size={24} />
                 {cart.length > 0 && (
                  <span className="absolute 0 top-0 right-0 bg-amber-500 text-stone-900 text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">
                    {cart.length}
                  </span>
                )}
               </button>
              <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
                {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        {isMobileMenuOpen && (
          <div className="md:hidden bg-emerald-800 px-2 pt-2 pb-4 space-y-1 shadow-inner">
            <button onClick={() => navigateTo('home')} className="block w-full text-left px-3 py-2 rounded-md font-medium hover:bg-emerald-700">Inicio</button>
            <button onClick={() => navigateTo('destinations')} className="block w-full text-left px-3 py-2 rounded-md font-medium hover:bg-emerald-700">Destinos</button>
            <button onClick={() => navigateTo('blog')} className="block w-full text-left px-3 py-2 rounded-md font-medium hover:bg-emerald-700">Blog</button>
            <button onClick={() => navigateTo('register')} className="block w-full text-left px-3 py-2 rounded-md font-medium hover:bg-emerald-700">Ficha de Registro</button>
            <button onClick={() => navigateTo('terms')} className="block w-full text-left px-3 py-2 rounded-md font-medium hover:bg-emerald-700">Términos y Condiciones</button>
          </div>
        )}
      </nav>

      {/* MAIN CONTENT AREA */}
      <main className="flex-grow">
        {currentView === 'home' && <HomeView />}
        {currentView === 'destinations' && <DestinationsView />}
        {currentView === 'destination-detail' && <DestinationDetailView />}
        {currentView === 'cart' && <CartView />}
        {currentView === 'blog' && <BlogView />}
        {currentView === 'register' && <RegisterView />}
        {currentView === 'terms' && <TermsView />}
      </main>

      {/* FOOTER */}
      <footer className="bg-stone-900 text-stone-400 py-12 border-t-4 border-amber-500">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div className="flex items-center mb-4">
              <Mountain className="h-6 w-6 text-amber-500 mr-2" />
              <span className="font-bold text-xl text-white">Travesía <span className="text-amber-500">360</span></span>
            </div>
            <p className="text-sm mb-4">
              Agencia de turismo de montaña y trekking especializada en rutas de la zona central de Chile. Conectando personas con la naturaleza de forma segura y profesional.
            </p>
          </div>
          <div>
            <h4 className="text-white font-bold mb-4">Enlaces Rápidos</h4>
            <ul className="space-y-2 text-sm">
              <li><button onClick={() => navigateTo('destinations')} className="hover:text-amber-500 transition-colors">Todas las Expediciones</button></li>
              <li><button onClick={() => navigateTo('blog')} className="hover:text-amber-500 transition-colors">Blog de Montaña</button></li>
              <li><button onClick={() => navigateTo('register')} className="hover:text-amber-500 transition-colors">Ficha de Registro Médico</button></li>
              <li><button onClick={() => navigateTo('terms')} className="hover:text-amber-500 transition-colors">Términos y Condiciones</button></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-bold mb-4">Contacto</h4>
            <ul className="space-y-2 text-sm">
              <li>Email: contacto@travesia360.cl</li>
              <li>Teléfono: +56 9 1234 5678</li>
              <li>Santiago, Chile</li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-stone-800 text-sm text-center">
          &copy; {new Date().getFullYear()} Travesía 360. Todos los derechos reservados.
        </div>
      </footer>

    </div>
  );
}