"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"
import { ArrowRight } from "lucide-react"

export default function AboutPage() {
  const [ref1, inView1] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref2, inView2] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref3, inView3] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref4, inView4] = useInView({ triggerOnce: true, threshold: 0.2 })
  const [ref5, inView5] = useInView({ triggerOnce: true, threshold: 0.2 })

  return (
    <div className="bg-white">
      {/* Hero Section */}
      <section className="relative h-[60vh] min-h-[400px] md:min-h-[500px] lg:min-h-[600px]">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: "url('/placeholder.svg?height=1080&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-3xl md:text-4xl lg:text-5xl xl:text-6xl font-light mb-4 tracking-tight">О нашем бренде</h1>
            <p className="text-lg md:text-xl opacity-90 mb-6 font-light">Мы создаем одежду, которая становится частью вашей истории и отражает вашу индивидуальность</p>
            <div className="flex flex-wrap gap-3 mb-8">
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm rounded-none">
                Качество
              </span>
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm rounded-none">
                Стиль
              </span>
              <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-sm rounded-none">
                Устойчивое развитие
              </span>
            </div>
            <Button 
              className="bg-white text-primary hover:bg-white/90 rounded-none mt-2"
              asChild
            >
              <Link href="#our-story">
                Узнать больше
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </motion.div>
        </div>
      </section>

      {/* Our Story */}
      <section id="our-story" className="py-16 md:py-20 lg:py-24">
        <div className="container mx-auto px-4">
          <motion.div
            ref={ref1}
            initial={{ opacity: 0 }}
            animate={inView1 ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: 0.8 }}
            className="grid md:grid-cols-2 gap-8 md:gap-12 items-center"
          >
            <div className="order-2 md:order-1">
              <span className="inline-block text-secondary font-medium mb-3 uppercase tracking-widest text-sm">Наша история</span>
              <h2 className="text-2xl md:text-3xl lg:text-4xl font-light text-primary mb-6 tracking-tight">Путь к созданию уникального бренда</h2>
              <div className="space-y-4 text-gray-700">
                <p className="text-base md:text-lg">
                  Наш бренд был основан в 2015 году с простой, но амбициозной целью: создавать одежду, которая сочетает
                  в себе элегантность, комфорт и устойчивое развитие. Мы начали с небольшой коллекции базовых предметов
                  гардероба, созданных из экологически чистых материалов.
                </p>
                <p className="text-base md:text-lg">
                  С годами мы росли, но наши ценности оставались неизменными. Мы по-прежнему стремимся создавать одежду,
                  которая не только выглядит стильно, но и производится с уважением к людям и планете.
                </p>
                <p className="text-base md:text-lg">
                  Сегодня наш бренд представлен в нескольких странах, но мы по-прежнему сохраняем индивидуальный подход
                  к каждому изделию, уделяя особое внимание деталям и качеству.
                </p>
              </div>
              <div className="mt-8">
                <Button 
                  variant="outline" 
                  className="border-primary/30 text-primary hover:bg-primary/5 rounded-none"
                  asChild
                >
                  <Link href="/collections">
                    Смотреть коллекции
                  </Link>
                </Button>
              </div>
            </div>
            <div className="relative order-1 md:order-2">
              <div className="relative h-[300px] md:h-[400px] lg:h-[500px] overflow-hidden">
                <Image
                  src="/placeholder.svg?height=1000&width=800"
                  alt="История бренда"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="absolute -bottom-6 -right-6 bg-tertiary p-4 md:p-6 max-w-[200px] md:max-w-xs">
                <p className="text-primary font-medium text-base md:text-lg">2015</p>
                <p className="text-gray-700 text-sm md:text-base">Год основания нашего бренда</p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Our Values */}
      <section className="py-16 md:py-20 lg:py-24 bg-tertiary/10">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12 md:mb-16">
            <span className="inline-block text-secondary font-medium mb-3 uppercase tracking-widest text-sm">Наши ценности</span>
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-light text-primary mb-6 tracking-tight">Принципы, которыми мы руководствуемся</h2>
            <p className="text-base md:text-lg text-gray-700">
              Наши ценности определяют все, что мы делаем — от выбора материалов до отношений с клиентами и партнерами.
            </p>
          </div>

          <motion.div
            ref={ref2}
            initial={{ opacity: 0, y: 30 }}
            animate={inView2 ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, staggerChildren: 0.2 }}
            className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
          >
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={inView2 ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="bg-white p-6 md:p-8 shadow-sm border border-tertiary/20 hover:border-primary/20 transition-colors"
            >
              <div className="w-12 h-12 md:w-16 md:h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <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 h-6 w-6 md:h-8 md:w-8"
                >
                  <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>
              <h3 className="text-lg md:text-xl font-medium text-primary mb-3">Качество превыше всего</h3>
              <p className="text-gray-700">
                Мы не идем на компромиссы, когда речь идет о качестве. Каждое изделие проходит строгий контроль, чтобы
                гарантировать долговечность и безупречный внешний вид.
              </p>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={inView2 ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="bg-white p-6 md:p-8 shadow-sm border border-tertiary/20 hover:border-primary/20 transition-colors"
            >
              <div className="w-12 h-12 md:w-16 md:h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <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 h-6 w-6 md:h-8 md:w-8"
                >
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                </svg>
              </div>
              <h3 className="text-lg md:text-xl font-medium text-primary mb-3">Устойчивое развитие</h3>
              <p className="text-gray-700">
                Мы заботимся о планете и стремимся минимизировать наше воздействие на окружающую среду. Мы используем экологически чистые материалы и этичные методы производства.
              </p>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={inView2 ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="bg-white p-6 md:p-8 shadow-sm border border-tertiary/20 hover:border-primary/20 transition-colors"
            >
              <div className="w-12 h-12 md:w-16 md:h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <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 h-6 w-6 md:h-8 md:w-8"
                >
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                  <line x1="9" y1="9" x2="9.01" y2="9"></line>
                  <line x1="15" y1="9" x2="15.01" y2="9"></line>
                </svg>
              </div>
              <h3 className="text-lg md:text-xl font-medium text-primary mb-3">Клиентоориентированность</h3>
              <p className="text-gray-700">
                Наши клиенты — в центре всего, что мы делаем. Мы стремимся превзойти ожидания и создать положительный опыт на каждом этапе взаимодействия с нашим брендом.
              </p>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16 md:py-20 lg:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12 md:mb-16">
            <span className="inline-block text-secondary font-medium mb-3 uppercase tracking-widest text-sm">Наша команда</span>
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-light text-primary mb-6 tracking-tight">Люди, создающие наш бренд</h2>
            <p className="text-base md:text-lg text-gray-700">
              За каждым успешным брендом стоит команда талантливых и преданных своему делу людей. Познакомьтесь с некоторыми из них.
            </p>
          </div>

          <motion.div
            ref={ref3}
            initial={{ opacity: 0 }}
            animate={inView3 ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: 0.8 }}
            className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6"
          >
            {[
              { name: "Анна Смирнова", role: "Основатель и креативный директор" },
              { name: "Михаил Петров", role: "Директор по производству" },
              { name: "Елена Иванова", role: "Главный дизайнер" },
              { name: "Дмитрий Козлов", role: "Директор по маркетингу" }
            ].map((member, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={inView3 ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="group"
              >
                <div className="relative overflow-hidden mb-4">
                  <Image
                    src={`/placeholder.svg?height=600&width=400&text=Team${index + 1}`}
                    alt={member.name}
                    width={400}
                    height={600}
                    className="w-full aspect-[3/4] object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                    <div className="p-4 text-white">
                      <p className="font-medium">{member.name}</p>
                      <p className="text-sm text-white/80">{member.role}</p>
                    </div>
                  </div>
                </div>
                <h3 className="text-primary font-medium">{member.name}</h3>
                <p className="text-gray-600 text-sm">{member.role}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Milestones */}
      <section className="py-16 md:py-20 lg:py-24 bg-tertiary/10">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12 md:mb-16">
            <span className="inline-block text-secondary font-medium mb-3 uppercase tracking-widest text-sm">Наши достижения</span>
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-light text-primary mb-6 tracking-tight">Ключевые моменты нашей истории</h2>
            <p className="text-base md:text-lg text-gray-700">
              Путь нашего бренда отмечен важными вехами, которые сформировали нас такими, какие мы есть сегодня.
            </p>
          </div>

          <motion.div
            ref={ref4}
            initial={{ opacity: 0 }}
            animate={inView4 ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-px bg-primary/20 hidden md:block"></div>
            
            {[
              { year: "2015", title: "Основание бренда", description: "Запуск первой коллекции базовых предметов гардероба." },
              { year: "2017", title: "Открытие первого магазина", description: "Открытие нашего флагманского магазина в центре города." },
              { year: "2019", title: "Международная экспансия", description: "Выход на международный рынок и запуск онлайн-магазина." },
              { year: "2021", title: "Устойчивое развитие", description: "Переход на 100% экологически чистые материалы во всех коллекциях." },
              { year: "2023", title: "Новая эра", description: "Запуск инновационной линейки одежды с использованием передовых технологий." }
            ].map((milestone, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={inView4 ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: index * 0.2 }}
                className={`flex flex-col md:flex-row items-start md:items-center gap-4 mb-12 md:mb-16 relative ${
                  index % 2 === 0 ? "md:flex-row-reverse text-left md:text-right" : ""
                }`}
              >
                <div className="md:w-1/2 flex flex-col items-start md:items-center">
                  <div className={`flex items-center gap-4 ${index % 2 === 0 ? "md:flex-row-reverse" : ""}`}>
                    <div className="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center text-lg font-medium z-10">
                      {milestone.year}
                    </div>
                    <div className={`h-px w-12 bg-primary/20 hidden md:block ${index % 2 === 0 ? "md:order-first" : ""}`}></div>
                  </div>
                </div>
                <div className={`md:w-1/2 ${index % 2 === 0 ? "md:pr-16" : "md:pl-16"}`}>
                  <h3 className="text-xl font-medium text-primary mb-2">{milestone.title}</h3>
                  <p className="text-gray-700">{milestone.description}</p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-20 lg:py-24 bg-primary text-white">
        <div className="container mx-auto px-4">
          <motion.div
            ref={ref5}
            initial={{ opacity: 0, y: 20 }}
            animate={inView5 ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.8 }}
            className="max-w-3xl mx-auto text-center"
          >
            <h2 className="text-2xl md:text-3xl lg:text-4xl font-light mb-6">Станьте частью нашей истории</h2>
            <p className="text-lg md:text-xl opacity-90 mb-8 font-light">
              Присоединяйтесь к нам в нашем стремлении создавать одежду, которая не только выглядит прекрасно, но и производится с заботой о людях и планете.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Button 
                className="bg-white text-primary hover:bg-white/90 rounded-none min-w-[160px]"
                asChild
              >
                <Link href="/catalog">
                  Смотреть каталог
                </Link>
              </Button>
              <Button 
                variant="outline" 
                className="border-white text-white hover:bg-white/10 rounded-none min-w-[160px]"
                asChild
              >
                <Link href="/contact">
                  Связаться с нами
                </Link>
              </Button>
            </div>
          </motion.div>
        </div>
      </section>
    </div>
  )
}
