import { motion } from "framer-motion";
import { FiTrendingUp, FiAward, FiCheckCircle } from "react-icons/fi";
import { Button, Card } from "../../components/UI";
import { ScrollDownArrow } from '../../components/UI/ScrollDownArrow';

const milestones = [
  { year: "2008", title: "Основање на компанијата" },
  { year: "2012", title: "Проширување на лабораторијата" },
  { year: "2015", title: "ISO сертификација" },
  { year: "2018", title: "Воведување на нови услуги" },
  { year: "2020", title: "Модернизација на опремата" },
  { year: "2023", title: "Проширување на тимот" },
];

const values = [
  {
    title: "Квалитет",
    description: "Посветени сме на обезбедување највисок квалитет во сите наши услуги",
    color: "text-primary-500",
  },
  {
    title: "Интегритет",
    description: "Работиме со целосна транспарентност и професионална етика",
    color: "text-primary-500",
  },
  {
    title: "Иновација",
    description: "Постојано инвестираме во нови технологии и методи",
    color: "text-primary-500",
  },
  {
    title: "Експертиза",
    description: "Нашиот тим се состои од високо квалификувани професионалци",
    color: "text-primary-500",
  },
  {
    title: "Одговорност",
    description: "Преземаме целосна одговорност за квалитетот на нашата работа",
    color: "text-primary-500",
  },
];

export default function About() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative h-screen overflow-hidden bg-gradient-to-br from-primary-900 to-primary-700">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative container-base h-full flex items-center">
          <div className="flex flex-col h-full w-full">
            <div className="flex-grow flex items-center">
              <div className="max-w-3xl">
                <motion.h1
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8 }}
                  className="text-4xl md:text-6xl font-display font-bold text-white mb-6"
                >
                  За Нас
                </motion.h1>
                <motion.p
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8, delay: 0.2 }}
                  className="text-xl text-neutral-100 mb-8"
                >
                  Повеќе од 15 години искуство во обезбедување квалитет
                </motion.p>
              </div>
            </div>
            <div className="flex justify-center mb-12">
              <ScrollDownArrow targetId="vision-section" />
            </div>
          </div>
        </div>
      </section>

      {/* Vision & Mission Section */}
      <section id="vision-section" className="py-24 bg-neutral-50">
        <div className="container-base">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-neutral-900 mb-4">
              Нашата Мисија
            </h2>
            <div className="w-24 h-1 bg-primary-500 mx-auto mb-6"></div>
            <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
              Посветени сме на обезбедување највисок квалитет во нашата работа
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <Card className="bg-gradient-to-br from-primary-900 to-primary-700 text-white">
              <div className="flex items-center mb-6">
                <FiTrendingUp className="w-8 h-8 mr-4" />
                <h3 className="text-2xl font-display font-semibold">Визија</h3>
              </div>
              <p className="text-neutral-100 text-lg leading-relaxed">
                Нашата визија е да бидеме водечка компанија во областа на
                испитување на материјали и контрола на квалитет во Македонија.
                Стремиме кон постојано унапредување на нашите услуги преку
                имплементација на најсовремени технологии и методологии.
              </p>
            </Card>

            <Card className="bg-gradient-to-br from-primary-800 to-primary-600 text-white">
              <div className="flex items-center mb-6">
                <FiAward className="w-8 h-8 mr-4" />
                <h3 className="text-2xl font-display font-semibold">Вредности</h3>
              </div>
              <ul className="space-y-4">
                {values.map((value, index) => (
                  <li key={index} className="flex items-start">
                    <FiCheckCircle className="w-5 h-5 mr-3 mt-1" />
                    <div>
                      <strong className="block text-lg mb-1">{value.title}</strong>
                      <span className="text-neutral-100">{value.description}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </Card>
          </div>
        </div>
      </section>

      {/* Milestones Section */}
      <section className="py-24 bg-white">
        <div className="container-base">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-display font-bold text-neutral-900 mb-4">
              Нашиот Пат
            </h2>
            <div className="w-24 h-1 bg-primary-500 mx-auto mb-6"></div>
            <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
              Клучни моменти во нашиот развој
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {milestones.map((milestone, index) => (
              <Card
                key={index}
                className="text-center hover:-translate-y-1 transition-transform duration-300"
              >
                <div className="text-primary-600 text-3xl font-bold mb-2">
                  {milestone.year}
                </div>
                <div className="text-neutral-800 text-lg font-medium">
                  {milestone.title}
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-gradient-to-br from-primary-900 to-primary-700">
        <div className="container-base text-center">
          <h2 className="text-3xl md:text-4xl font-display font-bold text-white mb-8">
            Започнете го вашиот проект со нас
          </h2>
          <Button
            to="/contact"
            variant="primary"
            size="lg"
            className="bg-white text-primary-600 hover:bg-neutral-50"
          >
            Контактирајте нѐ
          </Button>
        </div>
      </section>
    </div>
  );
}
