import { motion } from 'framer-motion';
import Head from 'next/head';
import Image from 'next/image';
import { useState, useEffect } from 'react';

export default function Home() {
  // Данные о товарах
  const products = [
    {
      id: 1,
      name: 'Пальто',
      price: 15000,
      images: ['/wear/palto1.jpg', '/wear/palto2.jpg'],
      description: 'Элегантное пальто высокого качества'
    },
    {
      id: 2,
      name: 'Пиджак',
      price: 12000,
      images: ['/wear/pidzak1.jpg', '/wear/pidzak2.jpg'],
      description: 'Стильный пиджак для особых случаев'
    },
    {
      id: 3,
      name: 'Сорочка',
      price: 5000,
      images: ['/wear/sorochka1.jpg', '/wear/sorochka2.jpg'],
      description: 'Классическая сорочка из премиальных материалов'
    }
  ];

  // Состояние для отслеживания наведения на карточки товаров
  const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);
  
  // Состояние для отслеживания прокрутки страницы
  const [scrolled, setScrolled] = useState(false);

  // Эффект для отслеживания прокрутки
  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 50;
      if (isScrolled !== scrolled) {
        setScrolled(isScrolled);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <div className="min-h-screen bg-white font-['Arimo']">
      <Head>
        <title>Brand Store | Элегантная мода</title>
        <link rel="icon" href="/favicon.ico" />
        <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap" rel="stylesheet" />
      </Head>

      <header className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/80 backdrop-blur-md shadow-sm' : 'bg-transparent'}`}>
        <nav className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="flex items-center"
            >
              <div className="relative h-12 w-12">
                <Image 
                  src="/logo.png" 
                  alt="Brand Logo" 
                  layout="fill" 
                  objectFit="contain"
                />
              </div>
            </motion.div>
            <div className="hidden md:flex space-x-8">
              <a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>Коллекция</a>
              <a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>О нас</a>
              <a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>Контакты</a>
            </div>
          </div>
        </nav>
      </header>

      <main>
        {/* Секция с фоновым изображением */}
        <section className="relative h-screen">
          <div className="absolute inset-0 w-full h-full">
            <Image 
              src="/photos/head_photo.png" 
              alt="Главное фото" 
              layout="fill"
              objectFit="cover"
              priority
            />
          </div>
        </section>

        {/* Секция с приветственным текстом */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="text-center max-w-3xl mx-auto"
            >
              <h1 className="text-5xl md:text-6xl text-primary mb-6">
                Элегантность в каждой детали
              </h1>
              <p className="text-lg text-gray-600 mb-8">
                Откройте для себя новую коллекцию 2024
              </p>
              <button className="bg-primary text-white px-8 py-3 rounded-full hover:bg-accent transition-colors">
                Смотреть коллекцию
              </button>
            </motion.div>
          </div>
        </section>

        {/* Секция с товарами */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-6">
            {/* <h2 className="text-3xl text-primary text-center mb-16">Наши товары</h2> */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
              {products.map((product, index) => (
                <motion.div
                  key={product.id}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.2 }}
                  className="group"
                  onMouseEnter={() => setHoveredProduct(product.id)}
                  onMouseLeave={() => setHoveredProduct(null)}
                >
                  <div className="relative h-[600px] w-full overflow-hidden mb-6">
                    <Image 
                      src={hoveredProduct === product.id ? product.images[1] : product.images[0]} 
                      alt={product.name}
                      layout="fill"
                      objectFit="contain"
                      className="transition-opacity duration-300"
                    />
                  </div>
                  <div className="p-4">
                    <h3 className="text-2xl text-primary mb-3">{product.name}</h3>
                    <p className="text-gray-600 mb-5 text-lg">{product.description}</p>
                    <div className="flex justify-between items-center">
                      <span className="text-xl font-semibold text-primary">{product.price.toLocaleString()} ₽</span>
                      <button className="bg-primary text-white px-6 py-3 rounded-full hover:bg-accent transition-colors">
                        Подробнее
                      </button>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-primary text-white py-12">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h4 className="text-xl mb-4">О нас</h4>
              <p className="text-gray-400">
                Мы создаем элегантную одежду для тех, кто ценит качество и стиль.
              </p>
            </div>
            <div>
              <h4 className="text-xl mb-4">Контакты</h4>
              <p className="text-gray-400">
                Email: info@brandstore.com<br />
                Телефон: +7 (999) 123-45-67
              </p>
            </div>
            <div>
              <h4 className="text-xl mb-4">Подписаться</h4>
              <div className="flex">
                <input
                  type="email"
                  placeholder="Ваш email"
                  className="bg-white/10 px-4 py-2 rounded-l-full focus:outline-none"
                />
                <button className="bg-accent px-6 rounded-r-full hover:bg-accent/90 transition-colors">
                  →
                </button>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
} 