import React, { useState, useEffect } from 'react';
import { Sun, Snowflake, Wind, Droplets, Calendar, MapPin, Thermometer, ChevronDown } from 'lucide-react';
import { motion } from 'framer-motion';

const App = () => {
  const [currentSeason, setCurrentSeason] = useState('winter');
  const [selectedLocation, setSelectedLocation] = useState('Alps');

  const seasons = {
    winter: {
      name: 'الشتاء',
      icon: Snowflake,
      color: 'from-blue-900 to-cyan-600',
      bgImage: 'https://placehold.co/1200x800/1e40af/ffffff?text=Winter+Landscape',
      temperature: '-5°C إلى 5°C',
      description: 'موسم الثلج والهدوء، حيث تغطي البطانيات البيضاء المناظر الطبيعية'
    },
    summer: {
      name: 'الصيف',
      icon: Sun,
      color: 'from-orange-500 to-red-600',
      bgImage: 'https://placehold.co/1200x800/f97316/ffffff?text=Summer+Landscape',
      temperature: '25°C إلى 35°C',
      description: 'موسم الحرارة والحيوية، حيث تزدهر الطبيعة بألوانها الزاهية'
    }
  };

  const locations = {
    Alps: {
      name: 'جبال الألب',
      winterTemp: '-10°C',
      summerTemp: '22°C',
      description: 'سلسلة جبال تمتد عبر أوروبا، مشهورة بتزلج الشتاء ومناظر الصيف الخلابة'
    },
    Sahara: {
      name: 'الصحراء الكبرى',
      winterTemp: '15°C',
      summerTemp: '45°C',
      description: 'أكبر صحراء ساخنة في العالم، ذات كثبان رملية شاسعة وسماء صافية'
    },
    Amazon: {
      name: 'غابة الأمازون',
      winterTemp: '26°C',
      summerTemp: '32°C',
      description: 'أكبر غابة مطيرة في العالم، موطن للتنوع البيولوجي الاستثنائي'
    },
    Himalayas: {
      name: 'الهيمالايا',
      winterTemp: '-20°C',
      summerTemp: '18°C',
      description: 'أعلى سلسلة جبال في العالم، موطن لأعلى قمم الأرض'
    }
  };

  const weatherData = [
    { day: 'السبت', temp: -2, condition: 'snowy', icon: Snowflake },
    { day: 'الأحد', temp: 1, condition: 'cloudy', icon: Wind },
    { day: 'الاثنين', temp: 3, condition: 'sunny', icon: Sun },
    { day: 'الثلاثاء', temp: 0, condition: 'snowy', icon: Snowflake },
    { day: 'الأربعاء', temp: -1, condition: 'cloudy', icon: Wind },
    { day: 'الخميس', temp: 2, condition: 'sunny', icon: Sun },
    { day: 'الجمعة', temp: -3, condition: 'snowy', icon: Snowflake }
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSeason(prev => prev === 'winter' ? 'summer' : 'winter');
    }, 8000);
    return () => clearInterval(interval);
  }, []);

  const SeasonIcon = seasons[currentSeason].icon;

  return (
    <div className="min-h-screen bg-gray-900 text-white overflow-hidden">
      {/* Hero Section */}
      <div 
        className={`relative h-screen flex items-center justify-center bg-cover bg-center transition-all duration-1000`}
        style={{ backgroundImage: `url(${seasons[currentSeason].bgImage})` }}
      >
        <div className={`absolute inset-0 bg-gradient-to-b ${seasons[currentSeason].color} opacity-90`}></div>
        
        <div className="relative z-10 text-center px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <div className="flex justify-center mb-6">
              <SeasonIcon className="w-20 h-20 text-white drop-shadow-lg" />
            </div>
            <h1 className="text-6xl font-bold mb-4 drop-shadow-lg">
              {seasons[currentSeason].name}
            </h1>
            <p className="text-xl mb-8 max-w-2xl mx-auto drop-shadow-md">
              {seasons[currentSeason].description}
            </p>
            <div className="flex items-center justify-center gap-4 text-lg">
              <Thermometer className="w-6 h-6" />
              <span>{seasons[currentSeason].temperature}</span>
            </div>
          </motion.div>
        </div>

        {/* Season Toggle */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
          <div className="bg-white/20 backdrop-blur-sm rounded-full px-6 py-3 flex items-center gap-4">
            <button
              onClick={() => setCurrentSeason('winter')}
              className={`flex items-center gap-2 px-4 py-2 rounded-full transition-all ${
                currentSeason === 'winter' 
                  ? 'bg-blue-600 text-white' 
                  : 'text-white/70 hover:text-white'
              }`}
            >
              <Snowflake className="w-5 h-5" />
              الشتاء
            </button>
            <div className="w-px h-6 bg-white/30"></div>
            <button
              onClick={() => setCurrentSeason('summer')}
              className={`flex items-center gap-2 px-4 py-2 rounded-full transition-all ${
                currentSeason === 'summer' 
                  ? 'bg-orange-600 text-white' 
                  : 'text-white/70 hover:text-white'
              }`}
            >
              <Sun className="w-5 h-5" />
              الصيف
            </button>
          </div>
        </div>
      </div>

      {/* Locations Section */}
      <div className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.h2 
            className="text-4xl font-bold text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            وجهات طبيعية مذهلة
          </motion.h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {Object.entries(locations).map(([key, location]) => (
              <motion.div
                key={key}
                className={`bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 cursor-pointer border-2 transition-all ${
                  selectedLocation === key 
                    ? 'border-blue-500 shadow-lg shadow-blue-500/20' 
                    : 'border-gray-700 hover:border-gray-600'
                }`}
                whileHover={{ y: -5 }}
                onClick={() => setSelectedLocation(key)}
              >
                <h3 className="text-xl font-bold mb-3">{location.name}</h3>
                <div className="flex items-center gap-2 mb-2">
                  <Thermometer className="w-4 h-4 text-blue-400" />
                  <span className="text-sm">الشتاء: {location.winterTemp}</span>
                </div>
                <div className="flex items-center gap-2 mb-3">
                  <Sun className="w-4 h-4 text-orange-400" />
                  <span className="text-sm">الصيف: {location.summerTemp}</span>
                </div>
                <p className="text-gray-400 text-sm">{location.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </div>

      {/* Weather Forecast */}
      <div className="bg-gradient-to-r from-blue-900/30 to-orange-900/30 py-16 px-4">
        <div className="max-w-4xl mx-auto">
          <motion.h2 
            className="text-3xl font-bold text-center mb-8"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            توقعات الطقس للأسبوع القادم
          </motion.h2>
          
          <div className="grid grid-cols-7 gap-2">
            {weatherData.map((day, index) => {
              const DayIcon = day.icon;
              return (
                <motion.div
                  key={day.day}
                  className="bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center"
                  whileHover={{ scale: 1.05 }}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <DayIcon className="w-8 h-8 mx-auto mb-2" />
                  <div className="font-semibold">{day.day}</div>
                  <div className="text-2xl font-bold mt-1">{day.temp}°</div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <motion.div
              className="text-center"
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Snowflake className="w-8 h-8" />
              </div>
              <h3 className="text-xl font-bold mb-2">الثلوج</h3>
              <p className="text-gray-400">
                استكشف عجائب الثلج النقي والمناظر الطبيعية الشتوية الساحرة
              </p>
            </motion.div>
            
            <motion.div
              className="text-center"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="w-16 h-16 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Sun className="w-8 h-8" />
              </div>
              <h3 className="text-xl font-bold mb-2">الحرارة</h3>
              <p className="text-gray-400">
                اكتشف حرارة الشمس وطاقة الصيف في أكثر الأماكن سخونة على الأرض
              </p>
            </motion.div>
            
            <motion.div
              className="text-center"
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Droplets className="w-8 h-8" />
              </div>
              <h3 className="text-xl font-bold mb-2">التنوع الطبيعي</h3>
              <p className="text-gray-400">
                من الصحاري القاحلة إلى الغابات المطيرة، عالم من التنوع الطبيعي
              </p>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-800 py-8 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <MapPin className="w-6 h-6" />
            <span className="text-xl font-bold">مستكشف الطبيعة</span>
          </div>
          <p className="text-gray-400">
            اكتشف جمال الطبيعة في كل فصول السنة
          </p>
        </div>
      </footer>
    </div>
  );
};

export default App;