"use client"

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

// Типы для свойств компонента
interface HeroProps {
  images?: string[];
}

export default function Hero({ images = [] }: HeroProps) {
  return (
    <div className="relative h-[80vh] md:h-screen overflow-hidden bg-white">
      {/* Логотип по центру */}
      <div className="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
        <div className="relative w-[200px] h-[200px] md:w-[300px] md:h-[300px]">
          <Image
            src="/logotip.png"
            alt="Brand Logo"
            fill
            className="object-contain"
            priority
          />
        </div>
      </div>

      {/* Контент */}
      <div className="relative inset-0 flex items-center justify-center z-10">
        <div className="text-center text-black px-4 mt-[300px] md:mt-[400px]">
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.8 }}
            className="text-4xl md:text-6xl font-bold mb-4 font-['Playfair_Display']"
          >
            Элегантность в каждой детали
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 0.8 }}
            className="text-lg md:text-xl mb-8 max-w-2xl mx-auto"
          >
            Откройте для себя новую коллекцию, созданную с любовью к качеству и стилю
          </motion.p>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6, duration: 0.8 }}
          >
            <a
              href="/collections"
              className="bg-black text-white px-8 py-3 rounded-md font-medium hover:bg-gray-800 transition-colors inline-block"
            >
              Смотреть коллекцию
            </a>
          </motion.div>
        </div>
      </div>
    </div>
  );
}