import { NavLink } from "react-router-dom";
import { motion } from "framer-motion";
import { SectionHeader } from "../../shared/SectionHeader";
import { FiTrendingUp, FiAward, FiCheckCircle } from "react-icons/fi";

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

export default function About() {
  return (
    <div className="isolate bg-graymin-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
      {/* Hero Section */}
      <div className="relative h-screen overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
        </div>
        <div className="relative container mx-auto px-4 h-full flex items-center">
          <div className="max-w-3xl">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, ease: "easeInOut" }}
              className="text-4xl md:text-6xl font-bold text-white mb-6"
            >
              За Нас
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, delay: 0.2, ease: "easeIn" }}
              className="text-xl text-gray-200 mb-8"
            >
              Повеќе од 15 години искуство во обезбедување квалитет
            </motion.p>
          </div>
        </div>
      </div>

      {/* Vision & Values Section */}
      <div className="bg-white py-24">
        <div className="container bg-gradient-to-b from-cyan-900 to-cyan-400 rounded-xl mx-auto p-20">
          <SectionHeader
            title="Нашата Мисија"
            subtitle="Посветени сме на обезбедување највисок квалитет во нашата работа"
            className="text-white"
          />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
              <div className="flex items-center mb-4">
                <FiTrendingUp className="w-6 h-6 text-white mr-3" />
                <h3 className="text-2xl font-semibold text-white">Визија</h3>
              </div>
              <p className="text-white text-xl">
                Нашата визија е да бидеме водечка компанија во областа на
                испитување на материјали и контрола на квалитет во Македонија.
                Стремиме кон постојано унапредување на нашите услуги преку
                имплементација на најсовремени технологии и методологии. Сакаме
                да воспоставиме нови стандарди во индустријата и да допринесеме
                за развојот на градежништвото и инженерството во регионот.
              </p>
            </div>
            <div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
              <div className="flex items-center mb-4">
                <FiAward className="w-6 h-6 text-white mr-3" />
                <h3 className="text-2xl font-semibold text-white">Вредности</h3>
              </div>
              <ul className="text-gray-300 space-y-3">
                <li className="flex items-start text-xl">
                  <FiCheckCircle className="w-5 h-5 text-red mr-2 mt-1" />
                  <div>
                    <strong className="text-white">Квалитет</strong> - Посветени
                    сме на обезбедување највисок квалитет во сите наши услуги
                  </div>
                </li>
                <li className="flex items-start">
                  <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
                  <div>
                    <strong className="text-white">Интегритет</strong> -
                    Работиме со целосна транспарентност и професионална етика
                  </div>
                </li>
                <li className="flex items-start">
                  <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
                  <div>
                    <strong className="text-white">Иновација</strong> -
                    Постојано инвестираме во нови технологии и методи
                  </div>
                </li>
                <li className="flex items-start">
                  <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
                  <div>
                    <strong className="text-white">Експертиза</strong> - Нашиот
                    тим се состои од високо квалификувани професионалци
                  </div>
                </li>
                <li className="flex items-start">
                  <FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
                  <div>
                    <strong className="text-white">Одговорност</strong> -
                    Преземаме целосна одговорност за квалитетот на нашата работа
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="isolate bg-gray bg-gradient-to-b from-blue-700 to-blue-500 text-white py-24">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-8">
            Започнете го вашиот проект со нас
          </h2>
          <NavLink
            to="/contact"
            className="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors duration-300"
          >
            Контактирајте нѐ
          </NavLink>
        </div>
      </div>
    </div>
  );
}
