"use client"

import { useEffect, useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"
import { Instagram, Info } from "lucide-react"

export default function Home() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <main className="relative flex min-h-screen flex-col items-center justify-between overflow-hidden bg-[#E2E2C1]">
      {/* Верхняя часть для центрирования */}
      <div className="flex-1"></div>
      
      {/* Центральный контент - надпись COMING SOON */}
      <motion.div
        className="z-10 flex flex-col items-center justify-center w-full px-4 text-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      >
        <motion.h1
          className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-widest text-[#2B5F47]"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1.2 }}
        >
          COMING SOON
        </motion.h1>
      </motion.div>
      
      {/* Средняя часть - логотип точно посередине */}
      <motion.div 
        className="flex-1 flex items-center justify-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 0.3 }}
      >
        <div className="w-32 h-16 relative">
          <Image 
            src="/logo.svg" 
            alt="Dressed For Success Logo" 
            fill 
            unoptimized={true}
            className="object-contain"
          />
        </div>
      </motion.div>
      
      {/* Нижняя часть - Instagram и ссылка на страницу о компании */}
      <motion.footer
        className="w-full flex items-center justify-center gap-4 pb-8"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, delay: 0.5 }}
      >
        <motion.a
          href="https://www.instagram.com/dressed_for_success_/"
          target="_blank" // Открытие ссылки в новой вкладке
          rel="noopener noreferrer" // Безопасность при открытии новой вкладки
          className="rounded-full bg-[#2B5F47] p-3 text-white transition-colors hover:bg-[#1a3c2c]"
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.95 }}
        >
          <Instagram className="h-5 w-5" />
        </motion.a>
        
        <motion.div
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.95 }}
        >
          <Link
            href="/about"
            className="rounded-full bg-[#2B5F47] p-3 text-white transition-colors hover:bg-[#1a3c2c] flex items-center justify-center"
          >
            <Info className="h-5 w-5" />
          </Link>
        </motion.div>
      </motion.footer>
    </main>
  )
}