import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import ExploreSection from "@/components/ExploreSection";
import PlacesSection from "@/components/PlacesSection";
import BlogSection from "@/components/BlogSection";
import Footer from "@/components/Footer";
import { AIFloatingAssistant } from "@/components/AIFloatingAssistant";
import { useLanguage } from "@/contexts/LanguageContext";

const Index = () => {
  const navigate = useNavigate();
  const { t } = useLanguage();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedLocation, setSelectedLocation] = useState("");

  const handleSearch = () => {
    const params = new URLSearchParams();
    if (searchQuery) params.append('search', searchQuery);
    if (selectedLocation) params.append('location', selectedLocation);
    navigate(`/explore?${params.toString()}`);
  };

  const handleCategoryClick = (categoryName: string) => {
    navigate(`/explore/${categoryName.toLowerCase()}`);
  };

  const categories = [
    { icon: "🏢", title: t('apartments'), count: "99+" },
    { icon: "🍽️", title: t('restaurants'), count: "55+" },
    { icon: "🎭", title: t('events'), count: "55+" },
    { icon: "🛍️", title: t('shops'), count: "80+" },
    { icon: "🏛️", title: t('museums'), count: "96+" },
    { icon: "💪", title: t('gyms'), count: "21+" }
  ];

  return (
    <div>
      {/* Custom Styles */}
      <style>{`
        .font-caveat {
          font-family: 'Caveat', cursive;
        }
        .text-span {
          text-decoration: underline;
          color: #fe8303;
        }
        .bg-blur {
          backdrop-filter: blur(10px);
          background-color: rgba(255, 255, 255, 0.1);
        }
        .hero-header-classic {
          min-height: 100vh;
          background-size: cover;
          background-position: center;
        }
      `}</style>

      {/* Navbar */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-transparent">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between py-4">
            <a className="flex-shrink-0" href="/">
              <img 
                className="h-8" 
                src="https://karibeo.com/desktop/assets/images/logo.png" 
                alt="Karibeo" 
              />
            </a>
            
            <div className="hidden lg:flex items-center space-x-8">
              <a className="text-white hover:text-orange-400 transition-colors" href="/">{t('home')}</a>
              <a className="text-white hover:text-orange-400 transition-colors" href="/explore">{t('explore')}</a>
              <a className="text-white hover:text-orange-400 transition-colors" href="/about">{t('about')}</a>
            </div>
            
            <div className="flex items-center space-x-4">
              <a href="/sign-in" className="text-white hover:text-orange-400 transition-colors">
                ❤️
              </a>
              <a href="/sign-in" className="text-white hover:text-orange-400 transition-colors">
                👤
              </a>
              <a 
                href="/dashboard/add-listing" 
                className="hidden sm:flex items-center space-x-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full transition-colors"
              >
                <span>➕</span>
                <span>{t('addListing')}</span>
              </a>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Header */}
      <div className="hero-header-classic flex items-center bg-gray-900 overflow-hidden relative pt-20">
        <div 
          className="absolute inset-0 bg-cover bg-center" 
          style={{backgroundImage: 'url(https://karibeo.com/desktop/assets/images/8825.jpg)'}}
        />
        <div className="absolute inset-0 bg-black bg-opacity-50" />
        <div className="container mx-auto px-4 relative z-10 py-20">
          <div className="text-center text-white uppercase mb-3 text-sm font-medium">
            {t('heroBadge')}
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-white text-center mb-5">
            {t('heroTitle')}
          </h1>
          <div className="text-lg mb-8 text-center text-white max-w-2xl mx-auto">
            {t('heroSubtitle')}
          </div>

          {/* Search Form */}
          <div className="flex justify-center mb-6">
            <div className="w-full max-w-4xl">
              <div className="bg-blur rounded-2xl p-6 flex flex-col md:flex-row gap-4">
                <div className="flex items-center flex-1">
                  <div className="text-white mr-3">🔍</div>
                  <input 
                    type="text" 
                    className="bg-transparent text-white placeholder-white border-none outline-none flex-1" 
                    placeholder={t('searchPlaceholder')} 
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                  />
                </div>
                <div className="w-px bg-white bg-opacity-20 hidden md:block" />
                <div className="flex items-center flex-1">
                  <div className="text-white mr-3">📍</div>
                  <select 
                    className="bg-transparent text-white border-none outline-none flex-1"
                    value={selectedLocation}
                    onChange={(e) => setSelectedLocation(e.target.value)}
                  >
                    <option value="" className="text-gray-800">{t('locationPlaceholder')}</option>
                    <option value="florence" className="text-gray-800">Florence, Italy</option>
                    <option value="rome" className="text-gray-800">Rome, Italy</option>
                    <option value="milan" className="text-gray-800">Milan, Italy</option>
                    <option value="santo-domingo" className="text-gray-800">Santo Domingo, DR</option>
                    <option value="punta-cana" className="text-gray-800">Punta Cana, DR</option>
                  </select>
                </div>
                <button 
                  className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full transition-colors"
                  onClick={handleSearch}
                >
                  {t('searchButton')}
                </button>
              </div>
            </div>
          </div>

          {/* Category Cards */}
          <div className="flex justify-center">
            <div className="w-full max-w-6xl">
              <div className="flex overflow-x-auto space-x-4 p-4">
                {categories.map((category, index) => (
                  <div key={index} className="flex-shrink-0 w-72">
                    <div className="bg-blur rounded-3xl p-4 flex items-center shadow-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
                      <div className="flex-shrink-0">
                        <div className="bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center text-2xl">
                          {category.icon}
                        </div>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-lg font-semibold text-white">
                          <button 
                            onClick={() => handleCategoryClick(category.title)}
                            className="hover:text-orange-400 transition-colors text-left"
                          >
                            {category.title}
                          </button>
                        </h3>
                        <p className="text-sm text-gray-300">{category.count} {t('listings')}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Process Section */}
      <div className="py-20 border-t border-gray-200 relative overflow-hidden bg-white">
        <div className="container mx-auto px-4 py-8">
          <div className="flex justify-center">
            <div className="max-w-4xl text-center">
              <div className="mb-12">
                <h2 className="text-4xl md:text-5xl font-semibold mb-6">
                  {t('processTitle')}
                </h2>
                <div className="text-lg text-gray-600">
                  {t('processSubtitle')}
                </div>
              </div>
            </div>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-20 h-20 bg-orange-500 text-white font-caveat text-4xl flex items-center justify-center mx-auto mb-6 rounded-full">
                1
              </div>
              <h4 className="text-xl font-semibold mb-4">
                {t('step1')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer semper.
              </p>
            </div>
            
            <div className="text-center">
              <div className="w-20 h-20 bg-orange-500 text-white font-caveat text-4xl flex items-center justify-center mx-auto mb-6 rounded-full">
                2
              </div>
              <h4 className="text-xl font-semibold mb-4">
                {t('step2')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer.
              </p>
            </div>
            
            <div className="text-center">
              <div className="w-20 h-20 bg-orange-500 text-white font-caveat text-4xl flex items-center justify-center mx-auto mb-6 rounded-full">
                3
              </div>
              <h4 className="text-xl font-semibold mb-4">
                {t('step3')}
              </h4>
              <p className="text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pharetra vitae quam integer aenean.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Use the new ExploreSection component */}
      <ExploreSection />
      
      {/* Add the new PlacesSection component */}
      <PlacesSection />

      {/* Blog Section */}
      <BlogSection />

      {/* AI Section */}
      <div className="py-20 bg-orange-500 text-white relative overflow-hidden">
        <div className="container mx-auto px-4 py-8">
          <div className="grid md:grid-cols-2 gap-8">
            <div>
              <h2 className="text-4xl md:text-5xl font-semibold mb-8">
                Discover Your Ideal Vacation with 
                <br />
                <span className="font-caveat text-yellow-300">AI-Powered Precision</span>
              </h2>
              <img 
                src="https://img.freepik.com/foto-gratis/vista-superior-mano-sosteniendo-telefono-inteligente_23-2149617681.jpg"
                alt="AI Technology" 
                className="w-full h-96 rounded-2xl object-cover"
              />
            </div>
            <div className="flex flex-col justify-center">
              <p className="text-xl mb-6">
                Ready for an unforgettable getaway? Our AI tool tailors your perfect trip by matching you with top destinations, exclusive offers, and personalized discounts based on your interests.
              </p>
              <ul className="space-y-4 text-lg mb-8">
                <li>• Uncover trending businesses, hidden gems, and iconic landmarks near you.</li>
                <li>• Get custom vacation spot recommendations that suit your unique preferences.</li>
                <li>• Explore a variety of locations, from must-see attractions to local hotspots.</li>
                <li>• Unlock special deals and diverse options to plan your dream trip effortlessly.</li>
              </ul>
              <a 
                href="/contact" 
                className="bg-white text-orange-500 px-6 py-3 rounded-lg inline-flex items-center hover:bg-gray-100 transition-colors w-fit"
              >
                🚀 Start Now
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <Footer />

      {/* AI Floating Assistant */}
      <AIFloatingAssistant />
    </div>
  );
};

export default Index;