import { SectionHeader } from '../../shared/SectionHeader';
import { Button } from '../../shared/Button';
import { FiUsers, FiAward, FiCheckCircle, FiTrendingUp } from 'react-icons/fi';

export default function About() {
  const stats = [
    { label: 'Години искуство', value: '15+' },
    { label: 'Задоволни клиенти', value: '500+' },
    { label: 'Завршени проекти', value: '1000+' },
    { label: 'Експерти во тимот', value: '20+' }
  ];

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

  return (
    <div className="min-h-screen bg-gradient-to-b from-cyan-700/80 to-cyan-400">
      {/* Hero Section */}
      <div className="relative h-[60vh] overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="/about-hero.webp"
            alt="Laboratory equipment"
            className="w-full h-full object-cover"
          />
          <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">
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
              За Нас
            </h1>
            <p className="text-xl text-gray-200 mb-8">
              Повеќе од 15 години искуство во обезбедување квалитет
            </p>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      {/* <div className="container mx-auto px-4 py-16 -mt-20">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
          {stats.map((stat, index) => (
            <div key={index} className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center">
              <div className="text-3xl font-bold text-blue-400 mb-2">{stat.value}</div>
              <div className="text-gray-300">{stat.label}</div>
            </div>
          ))}
        </div>
      </div> */}

      {/* Vision & Values Section */}
      <div className="container mx-auto px-4 py-16">
        <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>

        {/* Timeline Section */}
        <div className="mb-16 border rounded-xl border-red-900/20 p-10 bg-white/10 backdrop-blur-lg">
          <SectionHeader 
            title="Нашиот Развој" 
            subtitle="Клучни моменти во нашата историја"
            className="text-white"
          />
          <div className="relative">
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-px"></div>
            <div className="space-y-8">
              {milestones.map((milestone, index) => (
                <div key={index} className={`flex items-center ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
                  <div className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8'}`}>
                    <div className="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-blue-800">
                      <div className="text-blue-400 font-bold text-xl mb-2">{milestone.year}</div>
                      <div className="text-blue-700 text-xl">{milestone.title}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Team Section */}
        <div className="mb-16">
          <SectionHeader 
            title="Нашиот Тим" 
            subtitle="Запознајте се со нашите експерти"
            className="text-white"
          />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[1, 2, 3].map((member) => (
              <div key={member} className="bg-white backdrop-blur-lg rounded-xl p-6 text-center">
                <div className="w-24 h-24 mx-auto mb-4 rounded-full bg-blue-400/20 flex items-center justify-center">
                  <FiUsers className="w-12 h-12 text-blue-400" />
                </div>
                <h4 className="text-white font-semibold mb-2">Име Презиме</h4>
                <p className="text-gray-400">Позиција</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="bg-blue-600/20 backdrop-blur-lg py-24">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
            Започнете го вашиот проект со нас
          </h2>
          <Button variant="outline">
            Контактирајте нѐ
          </Button>
        </div>
      </div>
    </div>
  );
}