"use client"

import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { ArrowRight, Calendar, Clock, Search, User } from "lucide-react"

export default function BlogPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 })

  // Mock blog posts data
  const blogPosts = [
    {
      id: 1,
      title: "Тренды сезона весна-лето 2025: что будет в моде",
      excerpt:
        "Обзор главных трендов предстоящего сезона: цвета, силуэты, материалы и аксессуары, которые будут на пике популярности.",
      image: "/placeholder.svg?height=600&width=800",
      date: "15 марта 2025",
      author: "Анна Смирнова",
      readTime: "7 мин",
      category: "Тренды",
      featured: true,
    },
    {
      id: 2,
      title: "Как создать базовый гардероб: 10 необходимых вещей",
      excerpt:
        "Разбираемся, какие вещи должны быть в гардеробе каждой женщины, чтобы всегда выглядеть стильно и уместно в любой ситуации.",
      image: "/placeholder.svg?height=600&width=800",
      date: "2 марта 2025",
      author: "Екатерина Иванова",
      readTime: "5 мин",
      category: "Стиль",
    },
    {
      id: 3,
      title: "Устойчивая мода: как наш бренд заботится о планете",
      excerpt:
        "Рассказываем о наших инициативах в области устойчивого развития и о том, как мы минимизируем воздействие на окружающую среду.",
      image: "/placeholder.svg?height=600&width=800",
      date: "20 февраля 2025",
      author: "Михаил Петров",
      readTime: "6 мин",
      category: "Устойчивое развитие",
    },
    {
      id: 4,
      title: "История создания нашей новой коллекции",
      excerpt: "Заглядываем за кулисы и рассказываем о процессе создания новой коллекции: от идеи до готовых изделий.",
      image: "/placeholder.svg?height=600&width=800",
      date: "10 февраля 2025",
      author: "Дмитрий Иванов",
      readTime: "8 мин",
      category: "За кулисами",
    },
    {
      id: 5,
      title: "Как правильно ухаживать за одеждой из натуральных тканей",
      excerpt:
        "Советы по уходу за изделиями из хлопка, шелка, льна и шерсти, чтобы они служили вам долго и не теряли привлекательный внешний вид.",
      image: "/placeholder.svg?height=600&width=800",
      date: "5 февраля 2025",
      author: "Елена Козлова",
      readTime: "4 мин",
      category: "Советы",
    },
    {
      id: 6,
      title: "Как подобрать идеальный размер одежды при онлайн-покупках",
      excerpt:
        "Практические советы и рекомендации, которые помогут вам выбрать правильный размер одежды при покупках в интернет-магазине.",
      image: "/placeholder.svg?height=600&width=800",
      date: "25 января 2025",
      author: "Ольга Николаева",
      readTime: "5 мин",
      category: "Советы",
    },
  ]

  // Filter posts based on search query
  const filteredPosts = blogPosts.filter(
    (post) =>
      post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
      post.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // Get featured post
  const featuredPost = blogPosts.find((post) => post.featured)

  // Get regular posts (excluding featured)
  const regularPosts = blogPosts.filter((post) => !post.featured)

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[40vh] min-h-[300px] bg-gray-100">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=800&width=1920')" }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/40"></div>
        </div>

        <div className="relative h-full container mx-auto px-4 flex flex-col justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-2xl text-white"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Наш блог</h1>
            <p className="text-xl opacity-90">Статьи о моде, стиле и устойчивом развитии</p>
          </motion.div>
        </div>
      </section>

      <section className="py-20">
        <div className="container mx-auto px-4">
          {/* Search and Categories */}
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
            <div className="relative w-full md:w-auto md:min-w-[300px]">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Input
                type="text"
                placeholder="Поиск статей..."
                className="pl-10 border-gray-300 rounded-full"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>

            <div className="flex flex-wrap gap-2">
              {["Все", "Тренды", "Стиль", "Советы", "Устойчивое развитие", "За кулисами"].map((category) => (
                <Button
                  key={category}
                  variant={category === "Все" ? "default" : "outline"}
                  className={`rounded-full ${
                    category === "Все"
                      ? "bg-primary hover:bg-secondary"
                      : "border-primary/30 text-primary hover:bg-primary hover:text-white"
                  }`}
                  onClick={() => setSearchQuery(category === "Все" ? "" : category)}
                >
                  {category}
                </Button>
              ))}
            </div>
          </div>

          {/* Featured Post */}
          {featuredPost && searchQuery === "" && (
            <div className="mb-16">
              <div className="grid md:grid-cols-2 gap-8 items-center">
                <div className="relative h-[400px] rounded-2xl overflow-hidden">
                  <Image
                    src={featuredPost.image || "/placeholder.svg"}
                    alt={featuredPost.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <div className="flex items-center gap-4 mb-4">
                    <span className="inline-block px-3 py-1 bg-tertiary text-primary text-sm rounded-full">
                      {featuredPost.category}
                    </span>
                    <span className="text-gray-500 flex items-center text-sm">
                      <Calendar className="h-4 w-4 mr-1" />
                      {featuredPost.date}
                    </span>
                  </div>

                  <h2 className="text-3xl font-bold text-primary mb-4">{featuredPost.title}</h2>
                  <p className="text-gray-700 mb-6">{featuredPost.excerpt}</p>

                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="w-10 h-10 rounded-full bg-gray-200 mr-3 flex items-center justify-center">
                        <User className="h-5 w-5 text-gray-500" />
                      </div>
                      <div>
                        <p className="font-medium">{featuredPost.author}</p>
                        <p className="text-sm text-gray-500 flex items-center">
                          <Clock className="h-3 w-3 mr-1" />
                          {featuredPost.readTime} чтения
                        </p>
                      </div>
                    </div>

                    <Button asChild className="bg-primary hover:bg-secondary rounded-full">
                      <Link href={`/blog/${featuredPost.id}`}>
                        Читать статью
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Blog Posts Grid */}
          <motion.div
            ref={ref}
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8 }}
            className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {(searchQuery === "" ? regularPosts : filteredPosts).map((post) => (
              <Link key={post.id} href={`/blog/${post.id}`} className="group">
                <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-md">
                  <div className="relative h-60 overflow-hidden">
                    <Image
                      src={post.image || "/placeholder.svg"}
                      alt={post.title}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>

                  <div className="p-6">
                    <div className="flex items-center gap-4 mb-3">
                      <span className="inline-block px-3 py-1 bg-tertiary text-primary text-sm rounded-full">
                        {post.category}
                      </span>
                      <span className="text-gray-500 flex items-center text-sm">
                        <Calendar className="h-4 w-4 mr-1" />
                        {post.date}
                      </span>
                    </div>

                    <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-primary transition-colors">
                      {post.title}
                    </h3>
                    <p className="text-gray-600 mb-4 line-clamp-2">{post.excerpt}</p>

                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="w-8 h-8 rounded-full bg-gray-200 mr-2 flex items-center justify-center">
                          <User className="h-4 w-4 text-gray-500" />
                        </div>
                        <p className="text-sm font-medium">{post.author}</p>
                      </div>

                      <p className="text-sm text-gray-500 flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        {post.readTime} чтения
                      </p>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </motion.div>

          {/* No Results */}
          {searchQuery !== "" && filteredPosts.length === 0 && (
            <div className="text-center py-12">
              <h3 className="text-xl font-medium text-gray-700 mb-2">Ничего не найдено</h3>
              <p className="text-gray-500 mb-6">
                По запросу "{searchQuery}" не найдено статей. Попробуйте изменить запрос или просмотреть все статьи.
              </p>
              <Button
                variant="outline"
                className="border-primary text-primary hover:bg-primary hover:text-white rounded-full"
                onClick={() => setSearchQuery("")}
              >
                Показать все статьи
              </Button>
            </div>
          )}

          {/* Load More Button */}
          {filteredPosts.length > 6 && (
            <div className="text-center mt-12">
              <Button className="bg-primary hover:bg-secondary rounded-full px-8">Загрузить еще</Button>
            </div>
          )}
        </div>
      </section>

      {/* Newsletter Section */}
      <section className="py-16 bg-tertiary/50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-primary mb-4">Подпишитесь на нашу рассылку</h2>
            <p className="text-gray-700 mb-8">
              Получайте новые статьи, советы по стилю и эксклюзивные предложения прямо на вашу почту
            </p>
            <div className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
              <Input type="email" placeholder="Ваш email" className="rounded-full" />
              <Button className="bg-primary hover:bg-secondary rounded-full">Подписаться</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

