"use client"

import { useState, useEffect, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { motion, useScroll, useTransform } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { ArrowRight, ShoppingBag, Sparkles, Leaf, Hourglass, Heart } from "lucide-react"
import { Input } from "@/components/ui/input"
import { ProductCard } from "@/components/ui/product-card"

export default function HomePage() {
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 })
  const [heroRef, heroInView] = useInView({ triggerOnce: false, threshold: 0.1 })
  const [currentCollection, setCurrentCollection] = useState(0)
  const parallaxRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: parallaxRef,
    offset: ["start start", "end start"]
  })
  const y = useTransform(scrollYProgress, [0, 1], [0, 200])

  // Collections data
  const collections = [
    {
      id: 1,
      name: "ЭФЕМЕРНОСТЬ",
      season: "ВЕСНА-ЛЕТО 2025",
      description: "Воздушные силуэты, вдохновленные природой и движением",
      image: "/placeholder.svg?height=1080&width=1920",
      color: "#E2E2C1",
    },
    {
      id: 2,
      name: "АРХИТЕКТОНИКА",
      season: "ОСЕНЬ-ЗИМА 2024",
      description: "Структурированные формы с акцентом на линиях и пропорциях",
      image: "/placeholder.svg?height=1080&width=1920",
      color: "#63823B",
    },
    {
      id: 3,
      name: "МЕТАМОРФОЗЫ",
      season: "КАПСУЛЬНАЯ КОЛЛЕКЦИЯ",
      description: "Трансформируемые модели для динамичной городской жизни",
      image: "/placeholder.svg?height=1080&width=1920",
      color: "#2B5F47",
    },
  ]

  // Featured categories
  const categories = [
    {
      id: "dresses",
      name: "ПЛАТЬЯ",
      description: "Элегантные силуэты для особых случаев и повседневности",
      image: "/placeholder.svg?height=800&width=600",
    },
    {
      id: "suits",
      name: "КОСТЮМЫ",
      description: "Безупречный крой и современные интерпретации классики",
      image: "/placeholder.svg?height=800&width=600",
    },
    {
      id: "outerwear",
      name: "ВЕРХНЯЯ ОДЕЖДА",
      description: "Выразительные формы и функциональные детали",
      image: "/placeholder.svg?height=800&width=600",
    },
  ]

  // Featured products
  const featuredProducts = [
    {
      id: 1,
      name: "ШЕЛКОВОЕ ПЛАТЬЕ С ДРАПИРОВКОЙ",
      price: 12800,
      image: "/placeholder.svg?height=600&width=400",
      isNew: true,
    },
    {
      id: 2,
      name: "ЖАКЕТ ИЗ ИТАЛЬЯНСКОЙ ШЕРСТИ",
      price: 18500,
      image: "/placeholder.svg?height=600&width=400",
      isNew: true,
    },
    {
      id: 3,
      name: "БРЮКИ С ВЫСОКОЙ ПОСАДКОЙ",
      price: 8900,
      image: "/placeholder.svg?height=600&width=400",
      isNew: false,
    },
    {
      id: 4,
      name: "БЛУЗА С ОБЪЕМНЫМИ РУКАВАМИ",
      price: 7600,
      image: "/placeholder.svg?height=600&width=400",
      isNew: false,
    },
  ]

  // Editorial content
  const editorials = [
    {
      id: 1,
      title: "ИСКУССТВО СИЛУЭТА",
      description: "Исследование форм и пропорций в современной моде",
      image: "/placeholder.svg?height=800&width=600",
    },
    {
      id: 2,
      title: "УСТОЙЧИВОЕ РАЗВИТИЕ",
      description: "Наш подход к ответственному производству",
      image: "/placeholder.svg?height=800&width=600",
    },
  ]

  // Automatic collection rotation
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentCollection((prev) => (prev + 1) % collections.length)
    }, 6000)
    return () => clearInterval(interval)
  }, [collections.length])

  return (
    <main className="overflow-hidden">
      {/* Hero Section */}
      <section 
        ref={heroRef} 
        className="relative min-h-screen flex items-center overflow-hidden"
        style={{ backgroundColor: collections[currentCollection].color }}
      >
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-r from-black/30 to-transparent z-10" />
          <motion.div
            className="w-full h-full"
            initial={{ scale: 1.1, opacity: 0 }}
            animate={{ 
              scale: 1, 
              opacity: 1,
              transition: { duration: 1.5 }
            }}
            key={collections[currentCollection].id}
          >
            <Image
              src={collections[currentCollection].image}
              alt={collections[currentCollection].name}
              fill
              className="object-cover"
              priority
            />
          </motion.div>
        </div>

        {/* Декоративные элементы */}
        <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-[5] overflow-hidden">
          <motion.div 
            className="absolute top-[10%] right-[5%] w-64 h-64 rounded-full border border-white/10 opacity-60"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 0.6 }}
            transition={{ duration: 2, delay: 0.5 }}
          />
          <motion.div 
            className="absolute bottom-[15%] left-[10%] w-40 h-40 rounded-full border border-white/10 opacity-40"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 0.4 }}
            transition={{ duration: 2, delay: 0.8 }}
          />
          <motion.div 
            className="absolute top-[30%] left-[20%] w-20 h-20 rounded-full bg-tertiary/10 opacity-30 backdrop-blur-sm"
            initial={{ y: -50, opacity: 0 }}
            animate={{ y: 0, opacity: 0.3 }}
            transition={{ duration: 1.5, delay: 1 }}
          />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-2xl">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              key={`season-${collections[currentCollection].id}`}
              className="mb-4"
            >
              <span className="inline-block text-sm md:text-base tracking-widest text-white/90 font-light border-b border-white/30 pb-1">
                {collections[currentCollection].season}
              </span>
            </motion.div>
            
            <motion.h1
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              key={`name-${collections[currentCollection].id}`}
              className="text-4xl md:text-6xl lg:text-7xl font-serif text-white mb-6"
            >
              {collections[currentCollection].name}
            </motion.h1>
            
            <motion.p
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              key={`desc-${collections[currentCollection].id}`}
              className="text-lg md:text-xl text-white/80 mb-8 font-light"
            >
              {collections[currentCollection].description}
            </motion.p>
            
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.8 }}
              className="flex flex-wrap gap-4"
            >
              <Button 
                asChild
                size="lg" 
                className="bg-white text-primary hover:bg-white/90 rounded-none px-8 group relative overflow-hidden"
              >
                <Link href={`/collections/${collections[currentCollection].id}`}>
                  <span className="relative z-10">СМОТРЕТЬ КОЛЛЕКЦИЮ</span>
                  <span className="absolute inset-0 bg-tertiary scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 z-0"></span>
                </Link>
              </Button>
              
              <Button 
                asChild
                variant="outline" 
                size="lg" 
                className="border-white text-white hover:bg-white/10 rounded-none px-8 group relative overflow-hidden"
              >
                <Link href="/catalog">
                  <span className="relative z-10">ВСЕ ТОВАРЫ</span>
                  <span className="absolute inset-0 bg-white/10 scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 z-0"></span>
                </Link>
              </Button>
            </motion.div>
          </div>
          
          {/* Collection Indicators */}
          <div className="absolute bottom-10 left-4 right-4">
            <div className="container mx-auto">
              <div className="flex justify-center md:justify-start space-x-3">
                {collections.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentCollection(index)}
                    className={`w-12 h-1 transition-all ${
                      currentCollection === index ? "bg-white" : "bg-white/30"
                    }`}
                    aria-label={`Переключить на коллекцию ${index + 1}`}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Преимущества */}
      <section className="py-24 bg-gradient-to-b from-tertiary/20 to-white relative overflow-hidden">
        {/* Декоративные элементы */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute right-0 top-0 w-1/3 h-1/3 bg-[url('/pattern.svg')] opacity-5"></div>
          <div className="absolute left-0 bottom-0 w-1/4 h-1/4 bg-[url('/pattern.svg')] opacity-5"></div>
        </div>
        
        <div className="container mx-auto px-4 relative">
          <div className="text-center mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Почему мы</span>
              <h2 className="text-3xl md:text-4xl font-serif text-primary mb-4">НАШИ ПРЕИМУЩЕСТВА</h2>
              <div className="w-20 h-[2px] bg-secondary mx-auto"></div>
            </motion.div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
            <motion.div 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
            >
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
                <Sparkles className="h-10 w-10 text-primary" />
              </div>
              <h3 className="text-xl font-medium text-primary mb-4">Уникальный дизайн</h3>
              <p className="text-gray-600 leading-relaxed">Каждая модель разрабатывается нашими дизайнерами с вниманием к деталям и современным тенденциям моды.</p>
            </motion.div>
            
            <motion.div 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
            >
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
                <Leaf className="h-10 w-10 text-primary" />
              </div>
              <h3 className="text-xl font-medium text-primary mb-4">Экологичные материалы</h3>
              <p className="text-gray-600 leading-relaxed">Мы используем только качественные и экологически чистые ткани, заботясь о вашем комфорте и окружающей среде.</p>
            </motion.div>
            
            <motion.div 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
            >
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
                <Hourglass className="h-10 w-10 text-primary" />
              </div>
              <h3 className="text-xl font-medium text-primary mb-4">Вне времени</h3>
              <p className="text-gray-600 leading-relaxed">Создаем одежду, которая остается актуальной вне зависимости от сезона, сочетая классику и современность.</p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Категории */}
      <section className="py-20 relative overflow-hidden">
        {/* Декоративные элементы */}
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute -right-20 -top-20 w-80 h-80 rounded-full bg-tertiary/10"></div>
          <div className="absolute -left-40 bottom-0 w-96 h-96 rounded-full bg-primary/5"></div>
        </div>
        
        <div className="container mx-auto px-4 relative">
          <div className="text-center mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Наш ассортимент</span>
              <h2 className="text-3xl md:text-4xl font-serif text-primary mb-4">КАТЕГОРИИ</h2>
              <div className="w-20 h-[2px] bg-secondary mx-auto"></div>
            </motion.div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {categories.map((category, index) => (
              <motion.div
                key={category.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
              >
                <Link 
                  href={`/catalog?category=${category.id}`} 
                  className="group block relative overflow-hidden"
                >
                  <div className="aspect-[3/4] relative overflow-hidden">
                    <Image
                      src={category.image}
                      alt={category.name}
                      fill
                      className="object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent opacity-80"></div>
                    
                    {/* Рамка при наведении */}
                    <div className="absolute inset-[10px] border border-white/0 transition-all duration-500 group-hover:border-white/30 group-hover:inset-[15px]"></div>
                    
                    <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform transition-transform duration-500">
                      <h3 className="text-xl font-medium mb-2 group-hover:translate-y-[-5px] transition-transform duration-300">{category.name}</h3>
                      <p className="text-sm text-white/80 mb-4 group-hover:translate-y-[-5px] transition-transform duration-300 delay-75">{category.description}</p>
                      <span className="inline-flex items-center text-sm font-medium text-white group-hover:translate-y-[-5px] transition-transform duration-300 delay-150">
                        <span className="relative">
                          СМОТРЕТЬ ТОВАРЫ 
                          <span className="absolute bottom-[-4px] left-0 w-0 h-[1px] bg-white transition-all duration-300 group-hover:w-full"></span>
                        </span>
                        <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </Link>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Популярные товары */}
      <section className="py-24 bg-white relative overflow-hidden">
        {/* Декоративные элементы */}
        <div className="absolute top-0 right-0 w-1/3 h-1/2 bg-tertiary/10 rounded-bl-[100px] -z-10"></div>
        <div className="absolute bottom-0 left-0 w-1/4 h-1/3 bg-primary/5 rounded-tr-[70px] -z-10"></div>
        
        <div className="container mx-auto px-4 relative">
          <div className="flex flex-col md:flex-row justify-between items-center mb-16">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="mb-6 md:mb-0"
            >
              <span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Выбор стилистов</span>
              <h2 className="text-3xl md:text-4xl font-serif text-primary">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <Button 
                asChild
                variant="outline" 
                className="border-primary text-primary hover:bg-primary/5 rounded-none px-8"
              >
                <Link href="/catalog">
                  СМОТРЕТЬ ВСЕ ТОВАРЫ
                </Link>
              </Button>
            </motion.div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
            {featuredProducts.map((product) => (
              <ProductCard
                key={product.id}
                id={product.id}
                name={product.name}
                price={product.price}
                image={product.image}
                isNew={product.isNew}
              />
            ))}
          </div>
        </div>
      </section>

      {/* Featured Products */}
      <section className="py-24 bg-tertiary/20">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-5xl font-light text-primary mb-6 tracking-tight">
              ИЗБРАННЫЕ МОДЕЛИ
            </h2>
            <p className="text-gray-700 max-w-2xl mx-auto">
              Ключевые изделия текущего сезона, воплощающие эстетику бренда
            </p>
          </motion.div>

          <motion.div
            ref={ref}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
          >
            {featuredProducts.map((product, index) => (
              <motion.div
                key={product.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="group"
              >
                <Link href={`/product/${product.id}`}>
                  <div className="relative aspect-[3/4] overflow-hidden bg-tertiary/10">
                    <Image
                      src={product.image}
                      alt={product.name}
                      fill
                      className="object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    {product.isNew && (
                      <div className="absolute top-4 left-4 bg-primary text-white text-xs py-1 px-3 tracking-wider">
                        НОВИНКА
                      </div>
                    )}
                    <button className="absolute top-4 right-4 bg-white/80 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                      <Heart className="h-5 w-5 text-primary" />
                    </button>
                  </div>
                </Link>

                <div className="pt-4 pb-2">
                  <Link href={`/product/${product.id}`}>
                    <h3 className="text-sm tracking-wider text-gray-800 mb-2 group-hover:text-primary transition-colors">
                      {product.name}
                    </h3>
                  </Link>
                  <p className="text-primary">{product.price.toLocaleString()} ₽</p>
                </div>
              </motion.div>
            ))}
          </motion.div>

          <div className="text-center mt-16">
            <Button asChild className="bg-primary hover:bg-primary/90 text-white rounded-none px-12 py-6">
              <Link href="/catalog">
                СМОТРЕТЬ ВСЕ МОДЕЛИ
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Editorial Content */}
      <section className="py-24">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-5xl font-light text-primary mb-6 tracking-tight">
              ЖУРНАЛ
            </h2>
            <p className="text-gray-700 max-w-2xl mx-auto">
              Погрузитесь в мир нашего бренда через истории, интервью и вдохновляющий контент
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-8 md:gap-16">
            {editorials.map((editorial, index) => (
              <motion.div
                key={editorial.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                className="group"
              >
                <Link href="/journal">
                  <div className="relative aspect-video overflow-hidden mb-6">
                    <Image
                      src={editorial.image}
                      alt={editorial.title}
                      fill
                      className="object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                  </div>
                  <h3 className="text-xl md:text-2xl font-light text-primary mb-3 tracking-tight group-hover:text-secondary transition-colors">
                    {editorial.title}
                  </h3>
                  <p className="text-gray-700 mb-4">{editorial.description}</p>
                  <span className="inline-block text-primary border-b border-primary pb-1 group-hover:border-secondary group-hover:text-secondary transition-colors">
                    ЧИТАТЬ ДАЛЕЕ
                  </span>
                </Link>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Подписка на рассылку */}
      <section className="py-24 bg-primary relative overflow-hidden">
        {/* Декоративные элементы */}
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full opacity-5">
            <Image 
              src="/pattern.svg" 
              alt="" 
              fill 
              className="object-cover"
            />
          </div>
          <div className="absolute -right-20 -top-20 w-80 h-80 rounded-full border border-white/10 opacity-30"></div>
          <div className="absolute -left-40 bottom-0 w-96 h-96 rounded-full border border-white/10 opacity-20"></div>
        </div>
        
        <div className="container mx-auto px-4 relative">
          <div className="max-w-3xl mx-auto text-center">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <span className="text-sm tracking-widest text-tertiary uppercase mb-2 inline-block">Будьте в курсе</span>
              <h2 className="text-3xl md:text-4xl font-serif text-white mb-6">ПОДПИШИТЕСЬ НА РАССЫЛКУ</h2>
              <p className="text-white/80 mb-8 leading-relaxed">
                Подпишитесь на нашу рассылку, чтобы первыми узнавать о новых коллекциях, специальных предложениях и эксклюзивных событиях. Мы отправляем только самую важную и интересную информацию.
              </p>
              
              <div className="flex flex-col md:flex-row gap-4 max-w-xl mx-auto">
                <Input 
                  type="email" 
                  placeholder="Ваш email" 
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-tertiary md:flex-1"
                />
                <Button className="bg-tertiary hover:bg-tertiary/90 text-primary">
                  ПОДПИСАТЬСЯ
                </Button>
              </div>
              
              <p className="text-white/60 text-xs mt-4">
                Нажимая на кнопку, вы соглашаетесь с нашей <Link href="/privacy-policy" className="underline hover:text-white">политикой конфиденциальности</Link>
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Instagram Feed */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-light text-primary tracking-tight">
              @DRESSEDFORSUCCESSSTORE
            </h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
            {Array.from({ length: 6 }).map((_, index) => (
              <a
                key={index}
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                className="relative aspect-square group overflow-hidden"
              >
                <Image
                  src={`/placeholder.svg?height=300&width=300&text=Instagram+${index + 1}`}
                  alt={`Instagram post ${index + 1}`}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                  <span className="text-white">@dressedforsuccessstore</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  )
}