"use client"

import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import { useInView } from "react-intersection-observer"

export default function AboutBrand() {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.2,
  })

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  }

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 },
    },
  }

  return (
    <section className="py-24 bg-white overflow-hidden">
      <div className="container mx-auto px-4">
        <motion.div
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={inView ? "visible" : "hidden"}
          className="grid md:grid-cols-2 gap-16 items-center"
        >
          <motion.div variants={itemVariants} className="order-2 md:order-1">
            <span className="inline-block text-secondary font-medium mb-3">О нашем бренде</span>
            <h2 className="text-4xl font-bold text-primary mb-6 leading-tight">
              Создаем одежду, которая становится частью вашей истории
            </h2>
            <p className="text-gray-700 mb-6 text-lg leading-relaxed">
              Наш бренд создан для тех, кто ценит качество, стиль и индивидуальность. Мы используем только лучшие
              материалы и современные технологии производства, чтобы создавать одежду, которая не только выглядит
              стильно, но и дарит комфорт в повседневной жизни.
            </p>
            <p className="text-gray-700 mb-8 text-lg leading-relaxed">
              Каждая коллекция разрабатывается с учетом последних модных тенденций, но при этом мы всегда сохраняем свой
              уникальный стиль, который делает нашу одежду узнаваемой и особенной.
            </p>

            <div className="flex flex-wrap gap-6 items-center">
              <Button asChild className="bg-primary hover:bg-secondary rounded-full px-8">
                <Link href="/about">Узнать больше</Link>
              </Button>

              <div className="flex items-center gap-4">
                <div className="flex -space-x-4">
                  <div className="w-12 h-12 rounded-full border-2 border-white overflow-hidden relative bg-tertiary">
                    <Image src="/placeholder.svg?height=100&width=100" alt="Дизайнер" fill className="object-cover" />
                  </div>
                  <div className="w-12 h-12 rounded-full border-2 border-white overflow-hidden relative bg-tertiary">
                    <Image src="/placeholder.svg?height=100&width=100" alt="Дизайнер" fill className="object-cover" />
                  </div>
                  <div className="w-12 h-12 rounded-full border-2 border-white overflow-hidden relative bg-tertiary">
                    <Image src="/placeholder.svg?height=100&width=100" alt="Дизайнер" fill className="object-cover" />
                  </div>
                </div>
                <div>
                  <p className="font-medium text-primary">Наша команда</p>
                  <p className="text-sm text-gray-600">Профессионалы своего дела</p>
                </div>
              </div>
            </div>
          </motion.div>

          <motion.div variants={itemVariants} className="order-1 md:order-2 relative">
            <div className="relative h-[600px] w-full rounded-2xl overflow-hidden">
              <Image src="/placeholder.svg?height=1200&width=800" alt="О бренде" fill className="object-cover" />
            </div>
            <div className="absolute -bottom-8 -left-8 bg-white p-6 rounded-2xl shadow-xl max-w-xs">
              <div className="flex items-center gap-4 mb-3">
                <div className="bg-tertiary h-12 w-12 rounded-full flex items-center justify-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
                  </svg>
                </div>
                <div>
                  <h3 className="font-bold text-primary">Создано с любовью</h3>
                  <p className="text-sm text-gray-600">Каждая деталь имеет значение</p>
                </div>
              </div>
              <div className="flex gap-2">
                <span className="inline-block px-3 py-1 bg-tertiary text-primary text-sm rounded-full">Качество</span>
                <span className="inline-block px-3 py-1 bg-tertiary text-primary text-sm rounded-full">Стиль</span>
                <span className="inline-block px-3 py-1 bg-tertiary text-primary text-sm rounded-full">Комфорт</span>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}

