import React, { useState } from 'react';
import { 
  Globe, 
  MapPin, 
  ChevronRight, 
  Menu, 
  X, 
  Users, 
  Plane, 
  Camera,
  Languages,
  Bus,
  Phone,
  CheckCircle,
  Twitter,
  Instagram,
  Facebook
} from 'lucide-react';

const colors = {
  primary: '#00ced1', // Cyan/Turquoise
  secondary: '#ff8c00', // Orange
  accent: '#d2691e', // Terracotta
  soft: '#8fbc8f', // Sage Green
  earth: '#cd853f', // Tan
  bgLight: '#ffffff'
};

const translations = {
  en: {
    heroTag: "Let's Go",
    heroTitle: "Travel",
    heroBadge: "UP TO 50% OFF",
    subTitle: "DREAM DESTINATION",
    book: "BOOK NOW!",
    call: "For Free Call",
    services: ["Visa Assistance", "Hotel & Flight", "International Tours", "Travel Packages"],
    footer: "Global Horizon - Expansion Worldwide"
  },
  es: {
    heroTag: "Vamos a",
    heroTitle: "Viajar",
    heroBadge: "HASTA 50% DTO",
    subTitle: "DESTINO DE ENSUEÑO",
    book: "¡RESERVA AHORA!",
    call: "Llamada Gratuita",
    services: ["Asistencia de Visa", "Hotel y Vuelos", "Tours Internacionales", "Paquetes de Viaje"],
    footer: "Global Horizon - Expansión Mundial"
  },
  fr: {
    heroTag: "Allons",
    heroTitle: "Voyager",
    heroBadge: "JUSQU'À 50% DÉDUC",
    subTitle: "DESTINATION DE RÊVE",
    book: "RÉSERVEZ MAINTENANT!",
    call: "Appel Gratuit",
    services: ["Assistance Visa", "Hôtel et Vols", "Tours Internationaux", "Forfaits Voyage"],
    footer: "Global Horizon - Expansion Mondiale"
  },
  zh: {
    heroTag: "让我们去",
    heroTitle: "旅行",
    heroBadge: "最高 50% 优惠",
    subTitle: "梦想目的地",
    book: "立即预订！",
    call: "免费通话",
    services: ["签证协助", "酒店与机票", "国际旅游", "旅游套餐"],
    footer: "Global Horizon - 全球扩张"
  }
};

export default function App() {
  const [lang, setLang] = useState('es');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const t = translations[lang];

  return (
    <div className="min-h-screen font-sans text-slate-900 bg-white overflow-x-hidden">
      {/* Navbar */}
      <nav className="fixed w-full z-50 bg-white/90 backdrop-blur-md px-6 py-4 flex justify-between items-center shadow-sm">
        <div className="flex items-center gap-2">
          <div className="p-2 rounded-lg text-white" style={{ backgroundColor: colors.primary }}>
            <Globe size={20} />
          </div>
          <span className="text-xl font-black tracking-tighter" style={{ color: colors.accent }}>GLOBAL HORIZON</span>
        </div>

        <div className="hidden md:flex items-center gap-6">
          <div className="flex items-center gap-2">
            <Languages size={18} style={{ color: colors.primary }} />
            <select 
              className="bg-transparent border-none font-bold text-sm cursor-pointer"
              value={lang}
              onChange={(e) => setLang(e.target.value)}
            >
              <option value="en">EN</option>
              <option value="es">ES</option>
              <option value="fr">FR</option>
              <option value="zh">ZH</option>
            </select>
          </div>
          <button 
            className="px-6 py-2 rounded-full text-white font-bold text-sm shadow-md transition-transform hover:scale-105"
            style={{ backgroundColor: colors.secondary }}
          >
            {t.book}
          </button>
        </div>

        <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X /> : <Menu />}
        </button>
      </nav>

      {/* Hero Section with Torn Paper Effect */}
      <section className="relative flex flex-col lg:flex-row min-h-[90vh] pt-20">
        
        {/* Left Side: Image with Torn Edge */}
        <div className="relative w-full lg:w-[45%] h-[400px] lg:h-auto overflow-hidden">
          <img 
            src="https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?auto=format&fit=crop&w=1000&q=80" 
            alt="Travel Destination" 
            className="w-full h-full object-cover"
          />
          {/* Torn Paper Overlay (CSS Shape) */}
          <div className="absolute top-0 right-0 h-full w-16 lg:w-32 bg-white translate-x-1/2 lg:translate-x-0 overflow-hidden hidden lg:block">
            <div className="h-full w-full" style={{ 
              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0,0 Q10,50 0,100 T0,200 T0,300 T0,400 T0,500 T0,600 T0,700 T0,800 T0,900 T0,1000 L100,1000 L100,0 Z' fill='white'/%3E%3C/svg%3E")`,
              backgroundSize: '100% 100%'
            }}></div>
          </div>
          
          {/* Badge */}
          <div className="absolute bottom-10 left-10 bg-white p-6 rounded-full shadow-2xl flex flex-col items-center justify-center w-32 h-32 border-2 border-dashed" style={{ borderColor: colors.secondary }}>
            <span className="text-xs font-bold text-slate-400">UP TO</span>
            <span className="text-2xl font-black" style={{ color: colors.secondary }}>50%</span>
            <span className="text-xs font-bold text-slate-400">OFF</span>
          </div>
        </div>

        {/* Right Side: Content */}
        <div className="flex-1 flex flex-col justify-center p-8 lg:p-24 relative">
          <div className="absolute top-0 right-0 p-12 opacity-5 pointer-events-none">
             <Plane size={300} style={{ transform: 'rotate(-45deg)', color: colors.primary }} />
          </div>

          <div className="mb-12">
            <h3 className="text-4xl lg:text-6xl font-script text-sky-400 mb-2" style={{ fontFamily: 'Dancing Script, cursive', color: colors.primary }}>
              {t.heroTag}
            </h3>
            <h1 className="text-7xl lg:text-9xl font-black italic tracking-tighter leading-none mb-6" style={{ color: colors.secondary }}>
              {t.heroTitle}
            </h1>
            
            <div className="inline-block px-8 py-2 rounded-full font-black text-white text-sm mb-8 shadow-lg" style={{ backgroundColor: colors.primary }}>
               {t.subTitle}
            </div>

            <p className="text-slate-500 max-w-md text-lg italic leading-relaxed mb-10">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>

            <div className="flex flex-col gap-6 mb-12">
               <div className="flex items-center gap-4">
                  <div className="p-3 rounded-full bg-slate-100" style={{ color: colors.secondary }}>
                    <Phone size={24} />
                  </div>
                  <div>
                    <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">{t.call}</p>
                    <p className="text-xl font-black text-slate-800">800-300-222-004</p>
                  </div>
               </div>

               <div className="flex flex-wrap gap-4">
                  <button className="px-12 py-5 rounded-full text-white font-black text-lg shadow-xl hover:brightness-110 active:scale-95 transition-all" style={{ backgroundColor: '#76b900' }}>
                    {t.book}
                  </button>
                  <div className="flex items-center gap-3">
                    <span className="text-slate-400 font-bold">www.loremtravel.com</span>
                  </div>
               </div>
            </div>

            {/* Social Icons */}
            <div className="flex gap-4">
               {[Twitter, Instagram, Facebook].map((Icon, i) => (
                 <div key={i} className="p-2 rounded-full border-2 cursor-pointer hover:bg-slate-50 transition-colors" style={{ borderColor: colors.secondary, color: colors.secondary }}>
                   <Icon size={18} />
                 </div>
               ))}
            </div>
          </div>
        </div>
      </section>

      {/* Services Grid (Inspired by the first uploaded layout) */}
      <section className="py-24 bg-slate-50 px-6">
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-16">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full lg:w-1/2">
            {t.services.map((service, i) => (
              <div key={i} className="flex items-center gap-4 bg-white p-6 rounded-3xl shadow-sm border border-slate-100 group hover:shadow-md transition-all">
                <div className="p-3 rounded-2xl group-hover:scale-110 transition-transform" style={{ backgroundColor: `${colors.primary}15`, color: colors.primary }}>
                   <CheckCircle size={24} />
                </div>
                <span className="font-bold text-slate-700">{service}</span>
              </div>
            ))}
          </div>

          <div className="w-full lg:w-1/2">
             <h2 className="text-4xl lg:text-5xl font-black mb-8 leading-tight" style={{ color: colors.accent }}>
                Nuestra Expansión Mundial <br/>
                <span className="text-2xl font-bold opacity-60 italic">"Experiencias Curadas y Viajes sin Esfuerzo"</span>
             </h2>
             <div className="flex gap-4">
                <div className="flex-1 p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm text-center">
                   <p className="text-4xl font-black mb-1" style={{ color: colors.primary }}>25%</p>
                   <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">OFF PACKAGES</p>
                </div>
                <div className="flex-1 p-8 rounded-[2.5rem] text-white shadow-xl text-center" style={{ backgroundColor: colors.primary }}>
                   <p className="text-4xl font-black mb-1">150+</p>
                   <p className="text-xs font-bold text-sky-100 uppercase tracking-widest">DESTINOS</p>
                </div>
             </div>
          </div>
        </div>
      </section>

      {/* Destinations Horizontal Style */}
      <section className="py-24 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 h-[500px]">
            <DestinationCard delay="0" img="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=400&q=80" title="Maldives" />
            <DestinationCard delay="100" img="https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&q=80" title="Bali" />
            <DestinationCard delay="200" img="https://images.unsplash.com/photo-1548013146-72479768bbfd?auto=format&fit=crop&w=400&q=80" title="India" />
            <DestinationCard delay="300" img="https://images.unsplash.com/photo-1520483844508-854c82d66b2c?auto=format&fit=crop&w=400&q=80" title="Greece" />
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-slate-100 text-center">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
           <div className="flex items-center gap-2">
            <div className="p-1 rounded-md text-white" style={{ backgroundColor: colors.primary }}>
              <Globe size={16} />
            </div>
            <span className="font-black tracking-tighter" style={{ color: colors.accent }}>GLOBAL HORIZON</span>
          </div>
          <p className="text-slate-400 font-bold text-sm tracking-widest uppercase">
            © 2025 Global Horizon Travel Agency. {t.footer}
          </p>
        </div>
      </footer>

      {/* Mobile Menu Overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50 bg-white p-8 flex flex-col items-center justify-center animate-in fade-in zoom-in duration-300">
          <button className="absolute top-8 right-8" onClick={() => setIsMenuOpen(false)}><X size={32}/></button>
          <div className="flex flex-col gap-8 text-center">
            <h2 className="text-3xl font-black" style={{ color: colors.accent }}>GLOBAL HORIZON</h2>
            <button className="text-2xl font-bold" style={{ color: colors.primary }}>{t.book}</button>
            <div className="flex gap-4">
              <select 
                className="bg-slate-100 rounded-lg p-4 font-bold"
                value={lang}
                onChange={(e) => { setLang(e.target.value); setIsMenuOpen(false); }}
              >
                <option value="en">English</option>
                <option value="es">Español</option>
                <option value="fr">Français</option>
                <option value="zh">中文</option>
              </select>
            </div>
          </div>
        </div>
      )}

      {/* Floating Call to Action */}
      <div className="fixed bottom-8 right-8 z-40 hidden md:block">
        <button className="p-5 rounded-full shadow-2xl animate-pulse transition-transform hover:scale-110" style={{ backgroundColor: colors.primary, color: 'white' }}>
          <Phone size={24} />
        </button>
      </div>
    </div>
  );
}

function DestinationCard({ img, title, delay }) {
  return (
    <div className="group relative h-full rounded-3xl overflow-hidden shadow-lg cursor-pointer transition-all hover:scale-[1.02]">
      <img src={img} alt={title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
      <div className="absolute bottom-0 left-0 p-6">
        <h3 className="text-white text-2xl font-black italic tracking-widest">{title.toUpperCase()}</h3>
      </div>
    </div>
  );
}